/* Camera Camera — skin for direction B (Label Maker). Skin values are custom properties on :root. app.js writes the engine's skin accent and accent ink as --accent and --accent-ink, sets data-notch on , toggles .night-vision; the tape colors per notch are CSS, keyed by data-notch (spec §7). */ :root { --accent: #27A8F6; --accent-ink: #0A1C30; --ink: #184771; --muted: #4B6580; --muted-2: #6E7680; --yellow: #FFDC04; --green: #61CDA0; --green-hover: #7ad8b0; --green-shadow: #3E9F78; --red: #F14A67; --blue: #27A8F6; --basic: #A6F2FD; --gray: #A2A9B2; --paper: #F4F4F4; --white: #FFFFFF; --body-dark: #0F3354; --body-deep: #0C2239; --dot: #D5D9DE; --sev-info: #0F5A80; --sans: 'Lato', 'Segoe UI', system-ui, sans-serif; --display: 'Open Sans', 'Segoe UI', system-ui, sans-serif; --mono: 'Space Mono', monospace; --tap: 44px; --gutter: 48px; --focus: var(--ink); --tape-bg: var(--yellow); --tape-fg: var(--ink); --tape-border: 0 solid transparent; --tape-shadow: 0 1px 0 rgba(24, 71, 113, 0.2), 0 6px 12px -6px rgba(24, 71, 113, 0.45); } /* label tape per notch (spec §7): 0 yellow, 1 white + gray border, 2 Basic Blue, 3 theme accent + white ink, 4 Mundane Green */ :root[data-notch="1"] { --tape-bg: var(--white); --tape-border: 1px solid var(--gray); } :root[data-notch="2"] { --tape-bg: var(--basic); } :root[data-notch="3"] { --tape-bg: var(--accent); --tape-fg: var(--accent-ink); } :root[data-notch="4"] { --tape-bg: var(--green); } * { box-sizing: border-box; } html { background: var(--paper); } body { margin: 0; background-color: var(--paper); background-image: radial-gradient(var(--dot) 1.3px, rgba(213, 217, 222, 0) 1.6px); background-size: 22px 22px; color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.4; overflow-x: hidden; } /* links: Boring Blue text (AA on the paper) under a Bummer Blue underline; Bummer Blue text would be 2.38:1 */ a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { background: rgba(39, 168, 246, 0.15); } h1, h2, p, ol, ul, fieldset { margin: 0; } fieldset { padding: 0; border: 0; min-width: 0; } button, input, select, textarea { font: inherit; color: inherit; } [hidden] { display: none !important; } /* one focus ring: Boring Blue on the paper (Bummer Blue would be 2.38:1), Humdrum Yellow on the Boring Blue device body */ :focus-visible, .mode input:focus-visible + .key { outline: 3px solid var(--focus); outline-offset: 2px; } .device, #copy-fallback { --focus: var(--yellow); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- tape */ .tape { display: inline-block; max-width: 100%; font-family: var(--mono); font-weight: 700; border-radius: 3px; background: var(--tape-bg); color: var(--tape-fg); border: var(--tape-border); box-shadow: var(--tape-shadow); overflow-wrap: anywhere; } .night-vision .tape-row, .night-vision .tape-out, .night-vision .strip span { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(12, 34, 57, 0.45); letter-spacing: 1px; } /* ---------------------------------------------------------------- top bar */ .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 28px var(--gutter) 0; } .wordmark { display: flex; align-items: center; } .tape-wm { --tape-bg: var(--yellow); --tape-fg: var(--ink); --tape-border: 0 solid transparent; font-size: 22px; letter-spacing: 3px; padding: 6px 16px; box-shadow: 0 1px 0 rgba(24, 71, 113, 0.25), 0 8px 16px -8px rgba(24, 71, 113, 0.45); } .tape-wm-1 { transform: rotate(-2deg); } .tape-wm-2 { transform: rotate(3deg) translateY(4px); margin-left: -4px; } .topnav { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; } .topnav a { min-height: var(--tap); display: inline-flex; align-items: center; } .by { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .by img { height: 22px; width: auto; display: block; } /* ---------------------------------------------------------------- notice */ .notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px var(--gutter) 0; padding: 8px 8px 8px 14px; border: 2px solid var(--accent); border-radius: 8px; background: var(--white); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0; background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--ink); } .icon-btn:hover { background: rgba(24, 71, 113, 0.08); } .icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; } /* ---------------------------------------------------------------- columns */ .columns { display: grid; grid-template-columns: 1fr; gap: 40px 56px; padding: 28px var(--gutter) 32px; } @media (min-width: 760px) { .columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1024px) { .columns { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } } .maker-col, .labels-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .labels-col { padding-top: 6px; } .kicker { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; } .stage-title { font-family: var(--display); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; font-weight: 400; letter-spacing: -0.8px; } .sub { font-size: 18px; font-weight: 300; line-height: 1.5; text-wrap: pretty; } /* ---------------------------------------------------------------- the label maker */ .maker { display: flex; flex-direction: column; margin-top: 10px; } .tape-out-wrap { display: flex; justify-content: flex-end; padding-right: 44px; margin-bottom: -8px; position: relative; z-index: 0; } .tape-out { font-size: 19px; letter-spacing: 1px; padding: 8px 18px 14px; border-radius: 3px 3px 0 0; box-shadow: 0 6px 14px -8px rgba(24, 71, 113, 0.5); } .device { position: relative; z-index: 1; background: var(--ink); border-radius: 26px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; color: var(--white); box-shadow: 0 22px 40px -20px rgba(24, 71, 113, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.12); } .slot { position: absolute; top: 7px; right: 34px; left: 34px; height: 6px; border-radius: 3px; background: var(--body-deep); } .lcd { background: var(--basic); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); box-shadow: inset 0 0 0 3px var(--body-dark), inset 0 6px 12px rgba(24, 71, 113, 0.25); min-width: 0; } /* mode left, character count right; on a narrow LCD the count drops to its own line instead of both halves breaking */ .lcd-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .lcd-name { font-family: var(--mono); font-weight: 700; font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; } .modes { display: flex; gap: 8px; } .mode { flex: 1; min-width: 0; position: relative; } .mode input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .key { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 10px; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 var(--gray); transition: transform 0.08s, box-shadow 0.08s; pointer-events: none; overflow: hidden; } /* a pressed key: the checked mode key and the pressed convention chip */ .mode input:checked + .key, .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } .mode input:checked + .key { transform: translateY(3px); } .chip[aria-pressed="true"] { transform: translateY(2px); } .device-hint { font-size: 13px; font-style: italic; font-weight: 300; color: var(--basic); line-height: 1.4; } .device-label, .keycap > label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--basic); } .device-label { font-weight: 700; } .group { display: flex; flex-direction: column; gap: 8px; } .keycaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (min-width: 480px) { .keycaps { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .keycaps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .keycap { display: flex; flex-direction: column; gap: 2px; background: var(--body-dark); border-radius: 8px; padding: 8px 10px; min-width: 0; } .keycap-wide { grid-column: 1 / -1; } .keycap > input, .keycap > select, .keycap > textarea, #copy-fallback-text { width: 100%; min-height: 32px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(166, 242, 253, 0.35); border-radius: 0; font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--white); } .keycap > select { color-scheme: dark; } .keycap > textarea, #copy-fallback-text { line-height: 1.3; resize: vertical; } #copy-fallback-text { background: var(--body-dark); border-radius: 8px; padding: 8px 10px; } .keycap-light { background: var(--white); border: 1px solid var(--dot); } .keycap-light > label { color: var(--muted-2); } .keycap-light > input, .keycap-light > select { color: var(--ink); border-bottom-color: var(--dot); } .keycap-light > select { color-scheme: light; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { min-height: var(--tap); padding: 7px 12px; border-radius: 10px; border: 0; background: var(--body-dark); color: var(--white); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 var(--body-deep); } .settings > summary { cursor: pointer; list-style: none; min-height: var(--tap); display: flex; align-items: center; } .settings > summary::before { content: '+ '; margin-right: 4px; } .settings[open] > summary::before { content: '- '; } .settings-body { display: flex; flex-direction: column; gap: 10px; } .field-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .field-row { display: flex; align-items: center; gap: 6px; } .field-row label { display: flex; align-items: center; gap: 8px; flex-grow: 1; min-height: var(--tap); cursor: pointer; font-size: 14px; } .field-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); } .device .icon-btn { color: var(--white); } .device .icon-btn:hover { background: rgba(255, 255, 255, 0.1); } .key-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; box-shadow: 0 5px 0 var(--gray); } .key-btn:hover { background: var(--white); } .key-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--gray); } .key-btn[disabled], .key-btn[disabled]:hover, .key-btn[disabled]:active { background: var(--paper); opacity: 0.45; cursor: not-allowed; transform: none; } .key-print { background: var(--green); box-shadow: 0 5px 0 var(--green-shadow); font-size: 15px; letter-spacing: 2px; } .key-print:hover { background: var(--green-hover); } .key-print:active { box-shadow: 0 2px 0 var(--green-shadow); } .print-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .print-keys .key-print { grid-column: 1 / -1; } @media (min-width: 480px) { .print-keys { grid-template-columns: 1.1fr 1fr 1.6fr 1fr; } .print-keys .key-print { grid-column: auto; } } /* ---------------------------------------------------------------- today's labels */ .labels-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; } .labels-head h2 { font-family: var(--display); font-size: 24px; font-weight: 400; } .summary { font-family: var(--mono); font-size: 13px; color: var(--muted); } .toolbar-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 14px; border-radius: 10px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; } .btn:hover { background: var(--basic); } .btn[disabled], .btn[disabled]:hover { background: var(--white); opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--green); border-color: var(--green); } .btn-primary:hover { background: var(--green-hover); } .labels { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } /* offscreen rows skip layout and paint (500-row lists); the clip margin keeps the focus ring and tilted tape unclipped */ .row { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 72px; overflow-clip-margin: 8px; } .row-btn { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 100%; min-height: 60px; padding: 4px; border: 2px solid transparent; border-radius: 18px; background: transparent; text-align: left; cursor: pointer; } .row-btn:hover { background: rgba(255, 255, 255, 0.6); } /* the selected row: a Boring Blue border (>= 3:1 on the paper at every notch; the palest accents are near 1.1:1) with the notch's accent kept as an inner ring */ .row.is-selected .row-btn { border-color: var(--ink); background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 2px var(--accent); } .icon-box { width: 60px; height: 60px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--yellow); } .icon-1 .icon-box { background: var(--green); } .icon-2 .icon-box { background: var(--red); } .row-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .tape-row { font-size: 19px; letter-spacing: 0.5px; padding: 6px 14px; } /* 19px bold: AA-large on any tape */ .rot-0 .tape-row { transform: rotate(-1.5deg); } .rot-1 .tape-row { transform: rotate(1deg); } .rot-2 .tape-row { transform: rotate(-0.5deg); } .rot-3 .tape-row { transform: rotate(1.6deg); } .rot-4 .tape-row { transform: rotate(-1deg); } .rot-5 .tape-row { transform: rotate(0.6deg); } .row-note { font-size: 14px; font-style: italic; font-weight: 300; } .badges { display: flex; flex-wrap: wrap; gap: 4px; } .badges:empty { display: none; } .badge { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; border: 1px solid; } .badge-warn { color: #6B5A00; border-color: #C9AD00; background: #FFF6BF; } .badge-error { color: #8B1A32; border-color: var(--red); background: #FFE1E7; } .badge-info { color: var(--sev-info); border-color: var(--blue); background: #E3F5FF; } .row-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .tape-empty { --tape-bg: var(--white); --tape-fg: var(--muted); --tape-border: 1px dashed var(--gray); font-size: 17px; padding: 6px 14px; } /* ---------------------------------------------------------------- lint receipt */ .receipt { background: var(--white); border: 1px solid var(--dot); border-radius: 4px; padding: 14px 18px; font-family: var(--mono); font-size: 14px; line-height: 1.35; box-shadow: 0 6px 12px -8px rgba(24, 71, 113, 0.4); } .prompt { color: var(--muted-2); font-size: 12px; letter-spacing: 1px; margin-bottom: 6px; } .lint-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .lint-line { display: flex; gap: 12px; } .lint-tag { width: 64px; flex-shrink: 0; font-weight: 700; } .lint-ok { color: #1F7A55; } .lint-info { color: var(--sev-info); } .lint-warn { color: #7A6600; } .lint-error { color: #B3112F; } .lint-text { min-width: 0; overflow-wrap: anywhere; } /* ---------------------------------------------------------------- bulk mode */ .bulk { display: flex; flex-direction: column; gap: 12px; padding: 8px var(--gutter) 40px; } .bulk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } .bulk-head h2 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } .bulk-blurb, .bulk-hint { font-size: 15px; font-weight: 300; } .keycaps-bulk { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 760px) { .keycaps-bulk { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .keycaps-bulk { grid-template-columns: repeat(8, minmax(0, 1fr)); } } .strip-wrap { overflow: hidden; border-radius: 3px; -webkit-mask-image: linear-gradient(90deg, #000 70%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, #000 70%, rgba(0, 0, 0, 0) 100%); box-shadow: 0 6px 12px -6px rgba(24, 71, 113, 0.4); } .strip { display: flex; width: max-content; } .strip span { flex-shrink: 0; font-family: var(--mono); font-weight: 700; font-size: 14px; padding: 9px 16px; white-space: nowrap; border-right: 2px dashed rgba(24, 71, 113, 0.45); background: var(--tape-bg); color: var(--tape-fg); } /* ---------------------------------------------------------------- below the fold */ .below { padding: 40px var(--gutter); border-top: 1px solid var(--dot); } .below h2 { font-family: var(--display); font-size: 26px; font-weight: 400; margin-bottom: 18px; } /* each quote is printed on white label tape and stuck to the pegboard: a slight tilt per position, the attribution in small type underneath */ .quotes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); align-items: start; gap: 30px 44px; } .quotes li { min-width: 0; } .quotes blockquote { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .tape-quote { --tape-bg: var(--white); --tape-fg: var(--ink); --tape-border: 1px solid var(--gray); font-size: 17px; line-height: 1.4; letter-spacing: 0.3px; padding: 7px 15px; } .quotes li:nth-child(4n+1) .tape-quote { transform: rotate(-1.2deg); } .quotes li:nth-child(4n+2) .tape-quote { transform: rotate(0.9deg); } .quotes li:nth-child(4n+3) .tape-quote { transform: rotate(-0.5deg); } .quotes li:nth-child(4n) .tape-quote { transform: rotate(1.3deg); } .quotes footer { padding-left: 15px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px; color: var(--muted); } .rules ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; max-width: 700px; } .footer { padding: 30px var(--gutter) 40px; border-top: 1px solid var(--dot); color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 6px; } @media (max-width: 759px) { :root { --gutter: 16px; } .tape-wm { font-size: 18px; padding: 5px 12px; } .tape-out-wrap { padding-right: 16px; } .device { padding: 16px 14px; border-radius: 20px; } .modes { gap: 5px; } .key { font-size: 10px; letter-spacing: 0.5px; } .tape-quote { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }