/* * dontletitdie.lol * * A printed register rather than a terminal: bone paper, black ink, hairline * rules, one red. The escalation is done with ink, not chrome — as the clock * drops, red takes over the sheet and the register loses weight, because the * record is about to be worthless. * * Everything keys off one class on : `is-nominal`, `is-critical`, * `is-final`, `is-dead`. The client swaps that class as the clock falls, so a * state change costs a repaint rather than a reload. */ :root { --paper: #f3f0e8; --ink: #15120e; --red: #c8321e; --bone: #f7f2ea; --ash: #dedad2; --ash-ink: #3a3630; --stone: #d5d0c7; /* Re-pointed per state so the whole sheet follows one pair of variables. */ --bg: var(--paper); --fg: var(--ink); --rule: rgba(21, 18, 14, 0.25); --dotted: rgba(21, 18, 14, 0.28); --dim: rgba(21, 18, 14, 0.45); --dimmer: rgba(21, 18, 14, 0.4); --mid: rgba(21, 18, 14, 0.55); --accent: var(--red); --bar-on: var(--ink); --bar-off: rgba(21, 18, 14, 0.16); --gut: 44px; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --num: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } button { font: inherit; cursor: pointer; } input { font: inherit; color: inherit; } a { color: inherit; } /* ── state palettes ────────────────────────────────────────────────── */ body.is-critical { --bg: #f3ede6; --dim: rgba(21, 18, 14, 0.5); --dimmer: rgba(21, 18, 14, 0.45); --mid: rgba(21, 18, 14, 0.6); } body.is-final { --bg: var(--red); --fg: var(--bone); --rule: rgba(247, 242, 234, 0.35); --dotted: rgba(247, 242, 234, 0.3); --dim: rgba(247, 242, 234, 0.75); --dimmer: rgba(247, 242, 234, 0.65); --mid: rgba(247, 242, 234, 0.8); --accent: var(--bone); } body.is-dead { --bg: var(--ash); --fg: var(--ash-ink); --rule: rgba(58, 54, 48, 0.35); --dotted: rgba(58, 54, 48, 0.3); --dim: rgba(58, 54, 48, 0.6); --dimmer: rgba(58, 54, 48, 0.55); --mid: rgba(58, 54, 48, 0.7); --accent: var(--ash-ink); } /* ── shared type ───────────────────────────────────────────────────── */ .num { font-family: var(--num); font-weight: 800; font-variant-numeric: tabular-nums; } .red { color: var(--red); } /* Two lengths of the same line: the sheet's voice at desktop, the phone's patience at 402px. Mockups 3a and 4f say different things in these slots. */ .narrow-only { display: none; } /* ── masthead ──────────────────────────────────────────────────────── */ .masthead { display: flex; align-items: baseline; gap: 26px; padding: 20px var(--gut) 14px; background: var(--ink); color: var(--paper); flex: none; } .masthead__brand { font-family: var(--num); font-weight: 800; font-size: 15px; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; } .masthead__note, .masthead__aside { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243, 240, 232, 0.65); } .masthead__aside { margin-left: auto; text-align: right; } body.is-critical .masthead { background: var(--red); color: #f3ede6; border-bottom: 2px solid var(--red); } body.is-critical .masthead__note, body.is-critical .masthead__aside { color: #f3ede6; } body.is-dead .masthead { color: var(--ash); } body.is-dead .masthead__note, body.is-dead .masthead__aside { color: rgba(222, 218, 210, 0.65); } /* The final-minutes sheet drops the black bar — nothing is left to brand. */ body.is-final .masthead { background: transparent; color: var(--bone); gap: 20px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; } body.is-final .masthead__brand { font-size: 14px; text-transform: none; letter-spacing: -0.03em; } body.is-final .masthead__note, body.is-final .masthead__aside { color: rgba(247, 242, 234, 0.75); } /* ── the sheet ─────────────────────────────────────────────────────── */ .sheet { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* ── clock ─────────────────────────────────────────────────────────── */ .clockblock { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 44px var(--gut) 0; flex: none; } .clockblock__stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .clockblock__label { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); } .clock { font-family: var(--num); font-size: clamp(64px, 11.2vw, 132px); line-height: 0.76; font-weight: 800; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; } .clock__sec { color: var(--red); } .clockblock__aside { text-align: right; font-size: 12px; line-height: 2; color: var(--mid); padding-bottom: 10px; flex: none; } body.is-critical .clockblock__label { color: var(--red); } body.is-critical .clock { color: var(--red); animation: pulseGlow 1.15s ease-in-out infinite; } body.is-critical .clock__sec { color: inherit; } /* ── capacity strip ────────────────────────────────────────────────── */ .capacity { padding: 34px var(--gut) 0; display: flex; flex-direction: column; gap: 9px; flex: none; } .capacity__bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; } .capacity__bar { flex: 1; background: var(--bar-off); height: 40%; } .capacity__bar.is-on { background: var(--bar-on); height: 62%; } .capacity__bar.is-tall { height: 100%; } .capacity__legend { display: flex; gap: 20px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); border-top: 1px solid var(--rule); padding-top: 7px; } .capacity__legend span + span { margin-left: auto; text-align: right; } body.is-critical { --bar-on: var(--red); } body.is-critical .capacity__legend span:first-child { color: var(--red); } /* ── buy bar ───────────────────────────────────────────────────────── */ .buybar { display: flex; align-items: stretch; margin: 34px var(--gut) 0; border: 2px solid var(--ink); flex: none; } .buybar__row { /* Desktop keeps the strip as one row; mobile (4f) re-nests it as its own. */ display: contents; } .buybar__go { flex: none; white-space: nowrap; border: 0; background: var(--ink); color: var(--paper); font-family: var(--num); font-weight: 800; font-size: 15px; padding: 0 30px; height: 54px; } .buybar__name { flex: 1; min-width: 0; border: 0; border-left: 2px solid var(--ink); background: transparent; padding: 0 16px; font-size: 13px; outline: none; } .buybar__name::placeholder { color: rgba(21, 18, 14, 0.4); } .buybar__name:focus { background: rgba(21, 18, 14, 0.05); } .buybar__hours { display: flex; align-items: center; border-left: 2px solid var(--ink); } .buybar__hourslabel { padding: 0 14px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .buybar__step { width: 34px; border: 0; background: transparent; color: var(--mid); font-size: 16px; line-height: 1; padding: 0; height: 100%; } .buybar__step:disabled { color: rgba(21, 18, 14, 0.25); cursor: not-allowed; } .buybar__count { width: 44px; text-align: center; font-family: var(--num); font-size: 17px; font-weight: 800; } .buybar__total { display: flex; align-items: center; padding: 0 18px; border-left: 2px solid var(--ink); font-family: var(--num); font-weight: 800; font-size: 15px; white-space: nowrap; } .buynote { margin: 0; padding: 8px var(--gut) 0; font-size: 11px; color: var(--dim); flex: none; } .buyerror { margin: 0; padding: 6px var(--gut) 0; font-size: 11px; color: var(--red); flex: none; } body.is-critical .buybar { border-color: var(--red); } body.is-critical .buybar__go { background: var(--red); color: #f3ede6; } body.is-critical .buybar__name, body.is-critical .buybar__hours, body.is-critical .buybar__total { border-left-color: var(--red); } /* The caret the design puts in the name field once it starts mattering. */ body.is-critical .buybar__name::placeholder { color: rgba(21, 18, 14, 0.5); } /* ── two-column body ───────────────────────────────────────────────── */ .columns { flex: 1; display: flex; gap: var(--gut); padding: 30px var(--gut) 0; min-height: 0; } .register { flex: 1; display: flex; flex-direction: column; min-width: 0; } .colhead { display: flex; gap: 16px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--fg); padding-bottom: 6px; } /* `+ span` rather than `:last-child`: the vitals column has a single heading and must not be shoved to the right margin by the two-slot rule. */ .colhead span + span { margin-left: auto; text-align: right; } body.is-critical .colhead span:last-child { color: var(--red); } .register__rows { /* The sheet clips the register rather than scrolling it: the page is one printed page, and the server only sends the first 200 rows anyway. */ flex: 1; overflow: hidden; font-size: 13px; } .row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dotted var(--dotted); } .row__no { font-family: var(--num); width: 44px; color: var(--dimmer); flex: none; } .row__name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .row__name.is-anon { color: var(--mid); font-style: italic; } .row__burn { color: var(--red); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; flex: none; } .row__hrs { font-family: var(--num); font-weight: 800; width: 56px; text-align: right; flex: none; } .row__amt { font-family: var(--num); width: 52px; text-align: right; color: var(--mid); flex: none; } .row__ago { width: 84px; text-align: right; color: var(--dimmer); flex: none; } .row.is-new { animation: prependRow 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .register__more { padding: 9px 0; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dimmer); } .vitals { width: 236px; flex: none; display: flex; flex-direction: column; } .vitals__rows { font-size: 12px; padding-top: 4px; } .vitals__row { display: flex; gap: 12px; padding: 7px 0; } .vitals__row dt { color: var(--mid); margin: 0; } .vitals__row dd { margin: 0 0 0 auto; font-family: var(--num); font-weight: 800; text-align: right; } .smallprint { margin-top: auto; padding: 14px 0 18px; border-top: 1px solid var(--rule); font-size: 10px; line-height: 1.8; color: var(--dim); } /* ── final minutes ─────────────────────────────────────────────────── */ .finale { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-height: 0; padding: 0 var(--gut); } .finale__clock { font-family: var(--num); font-size: clamp(84px, 20vw, 300px); line-height: 0.74; font-weight: 800; letter-spacing: -0.075em; font-variant-numeric: tabular-nums; animation: pulseGlow 0.9s ease-in-out infinite; text-align: center; } .finale__clock .clock__sec { color: inherit; } .finale .buybar { margin: 0; border-color: var(--bone); background: var(--bone); max-width: 100%; } .finale .buybar__go { background: var(--ink); color: var(--bone); font-size: 19px; padding: 0 40px; height: 70px; } .finale .buybar__name { border-left: 0; padding: 0 20px; font-size: 14px; color: var(--ink); min-width: 300px; } .finale .buybar__name::placeholder { color: rgba(21, 18, 14, 0.45); } .finale .buybar__hours { color: var(--ink); border-left: 2px solid var(--ink); } .finale .buybar__step { width: 40px; font-size: 18px; color: rgba(21, 18, 14, 0.55); } .finale .buybar__count { width: 46px; font-size: 19px; } .finale__note { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); text-align: center; } .finale__strip { border-top: 1px solid var(--rule); padding: 12px var(--gut) 16px; font-size: 11px; display: flex; flex-wrap: wrap; gap: 32px; color: var(--dimmer); flex: none; } .finale__strip span:last-child:not(:first-child) { margin-left: auto; } /* ── gravestones ───────────────────────────────────────────────────── */ .notice { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px var(--gut); min-height: 0; } .stone { border: 2px solid var(--ash-ink); background: var(--stone); display: flex; flex-direction: column; text-align: center; } .stone--notice { width: 620px; max-width: 100%; padding: 44px 48px 38px; gap: 20px; } .stone__here { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(58, 54, 48, 0.6); } .stone__title { font-family: var(--num); font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; } .stone__facts { font-size: 13px; line-height: 2; color: var(--mid); } .stone__cause { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0; font-size: 14px; line-height: 1.7; } .stone__coda { font-size: 12px; color: var(--dim); line-height: 1.8; } .resurrect { display: flex; align-items: stretch; margin: 0 var(--gut) 20px; border: 2px solid var(--ash-ink); flex: none; } .resurrect__go { flex: none; white-space: nowrap; border: 0; background: var(--ash-ink); color: var(--ash); font-family: var(--num); font-weight: 800; font-size: 15px; padding: 0 30px; height: 54px; } .resurrect__name { flex: 1; min-width: 0; border: 0; border-left: 2px solid var(--ash-ink); background: transparent; padding: 0 18px; font-size: 12px; outline: none; } .resurrect__name::placeholder { color: var(--mid); } .resurrect__blurb { flex: 2; display: flex; align-items: center; padding: 0 18px; font-size: 12px; color: var(--mid); border-left: 2px solid var(--ash-ink); } .resurrect__link { display: flex; align-items: center; padding: 0 22px; border-left: 2px solid var(--ash-ink); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); text-decoration: none; white-space: nowrap; } /* ── graveyard ─────────────────────────────────────────────────────── */ .plots { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; padding: 36px var(--gut) 0; flex: none; } .stone--plot { /* Three across at desktop, per 4d; a lone headstone shouldn't stretch to the width of the sheet. */ flex: 1 1 280px; max-width: 420px; padding: 26px 24px 22px; gap: 12px; } .stone--plot .stone__here { font-size: 9px; letter-spacing: 0.3em; color: rgba(58, 54, 48, 0.55); } .stone--plot .stone__title { font-size: 30px; } .stone--plot .stone__facts { font-size: 11px; line-height: 1.9; } .stone--plot .stone__cause { border-bottom: 0; padding: 12px 0 0; font-size: 12px; } .stone--plot .stone__coda { font-size: 11px; } .prose { font-size: 13px; line-height: 2.1; padding-top: 12px; color: rgba(58, 54, 48, 0.85); max-width: 620px; } .prose p { margin: 0 0 1.4em; } .prose p:last-child { margin-bottom: 0; } /* ── receipt ───────────────────────────────────────────────────────── */ .receipt { flex: 1; display: flex; gap: var(--gut); padding: 44px var(--gut) 0; min-height: 0; } .receipt__main { flex: 1; display: flex; flex-direction: column; gap: 22px; min-width: 0; } .receipt__label { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; } .receipt__clock { font-family: var(--num); font-size: clamp(56px, 9vw, 104px); line-height: 0.78; font-weight: 800; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; } .receipt__note { font-size: 13px; line-height: 1.9; color: var(--mid); margin: 16px 0 0; max-width: 520px; } .share { border: 2px solid var(--ink); display: flex; flex-direction: column; } .share__head { padding: 12px 20px; border-bottom: 1px solid rgba(21, 18, 14, 0.3); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); } .share__body { padding: 20px; font-size: 14px; line-height: 1.8; margin: 0; } .share__actions { display: flex; border-top: 1px solid rgba(21, 18, 14, 0.3); } .share__go { flex: none; border: 0; background: var(--ink); color: var(--paper); font-family: var(--num); font-weight: 800; font-size: 14px; padding: 0 26px; height: 50px; white-space: nowrap; text-decoration: none; display: flex; align-items: center; } .share__copy { border: 0; border-left: 1px solid rgba(21, 18, 14, 0.3); background: transparent; flex: 1; text-align: left; padding: 0 18px; font-size: 11px; color: var(--dim); } .stub { width: 300px; flex: none; display: flex; flex-direction: column; } .stub__rows { font-size: 12px; padding-top: 6px; } .stub__row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dotted var(--dotted); } .stub__row:last-child { border-bottom: 0; } .stub__row dt { color: var(--mid); margin: 0; } .stub__row dd { margin: 0 0 0 auto; font-family: var(--num); font-weight: 800; text-align: right; } .stub__aside { margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(21, 18, 14, 0.3); font-size: 11px; line-height: 1.8; color: var(--mid); } .stub__back { margin-top: auto; padding: 14px 0 18px; border-top: 1px solid var(--rule); font-size: 11px; line-height: 1.8; color: var(--mid); text-decoration: none; } /* ── footer ────────────────────────────────────────────────────────── */ .footer { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 18px var(--gut) 20px; font-size: 10px; line-height: 1.8; color: var(--dimmer); flex: none; } .footer span + span { margin-left: auto; } .footer a { color: inherit; } /* ── motion ────────────────────────────────────────────────────────── */ @keyframes pulseGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } } @keyframes hardBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } } @keyframes prependRow { from { opacity: 0; transform: translateY(-10px); background: rgba(200, 50, 30, 0.14); } to { opacity: 1; transform: none; background: transparent; } } .blink { animation: hardBlink 1.2s steps(1, end) infinite; } body.is-final .blink { animation-duration: 0.8s; } @media (prefers-reduced-motion: reduce) { .blink, .clock, .finale__clock, .row.is-new { animation: none !important; } } /* ── mobile (mockups 4f / 4g) ──────────────────────────────────────── */ @media (max-width: 760px) { :root { --gut: 20px; } /* Desktop clips the register to the sheet; a phone just scrolls. The explicit `min-height: auto` matters — the desktop `min-height: 0` is what lets a flex child shrink below its content, and here it must not. */ html, body { height: auto; } .sheet { min-height: auto; } .columns, .register, .register__rows { flex: none; min-height: 0; overflow: visible; } .smallprint { margin-top: 18px; } .wide-only { display: none; } .narrow-only { display: inline; } .masthead { gap: 10px; padding: 12px var(--gut) 10px; } .masthead__brand { font-size: 12px; } .masthead__note { display: none; } .masthead__aside { font-size: 9px; letter-spacing: 0.16em; } .clockblock { flex-direction: column; align-items: stretch; gap: 10px; padding: 24px var(--gut) 0; } .clockblock__stack { gap: 10px; } .clockblock__label { font-size: 9px; letter-spacing: 0.22em; } .clock { font-size: clamp(44px, 14vw, 56px); line-height: 0.8; } .clockblock__aside { text-align: left; font-size: 11px; line-height: 1.7; padding-bottom: 0; } .capacity { padding: 22px var(--gut) 0; gap: 8px; } .capacity__bars { height: 22px; gap: 1.5px; } .capacity__legend { font-size: 9px; letter-spacing: 0.12em; } .capacity__legend span:last-child { display: none; } .buybar { flex-direction: column; margin: 20px var(--gut) 0; } .buybar__go { height: 52px; padding: 0; } .buybar__row { display: flex; border-top: 2px solid var(--ink); } .buybar__name { border-left: 0; height: 44px; padding: 0 12px; font-size: 11px; } .buybar__hourslabel { display: none; } .buybar__count { width: 32px; font-size: 15px; } .buybar__step { font-size: 15px; height: 44px; } .buybar__total { padding: 0 12px; font-size: 13px; } body.is-critical .buybar__row { border-top-color: var(--red); } .buynote { padding: 8px var(--gut) 0; font-size: 10px; line-height: 1.7; } .columns { flex-direction: column; gap: 26px; padding: 18px var(--gut) 0; } .colhead { font-size: 9px; letter-spacing: 0.16em; } .register__rows { font-size: 12px; } .row { gap: 10px; padding: 7px 0; } .row__no { width: 36px; } .row__amt, .row__burn { display: none; } .row__hrs { width: auto; } .row__ago { width: 52px; } .vitals { width: auto; } .finale { gap: 22px; } .finale__clock { font-size: clamp(96px, 38vw, 150px); line-height: 0.82; letter-spacing: -0.08em; } /* 4g stacks the clock into three lines rather than shrinking it. */ .finale__clock .clock__sep { display: none; } .finale__clock .clock__part { display: block; } .finale .buybar { width: 100%; } .finale .buybar__go { font-size: 17px; height: 60px; } .finale .buybar__row { border-top: 2px solid var(--ink); } .finale .buybar__name { min-width: 0; font-size: 11px; } .finale .buybar__hours { border-left: 2px solid var(--ink); } .finale .buybar__step { width: 34px; font-size: 15px; } .finale .buybar__count { width: 32px; font-size: 15px; } .finale__note { font-size: 10px; letter-spacing: 0.12em; } .finale__strip { padding: 10px var(--gut) 14px; font-size: 10px; gap: 4px 16px; } .finale__strip span:last-child { margin-left: 0; } .notice { padding: 24px var(--gut); } .stone--notice { padding: 28px 24px 24px; gap: 16px; } .stone__title { font-size: 32px; } .stone__facts, .stone__cause { font-size: 12px; } .resurrect { flex-direction: column; margin: 0 var(--gut) 20px; } .resurrect__go { padding: 0; } .resurrect__name, .resurrect__blurb, .resurrect__link { border-left: 0; border-top: 2px solid var(--ash-ink); padding: 12px 16px; } .resurrect__name { height: 44px; padding: 0 16px; } .plots { padding: 24px var(--gut) 0; } .receipt { flex-direction: column; padding: 24px var(--gut) 0; } .stub { width: auto; } .share__actions { flex-direction: column; } .share__copy { border-left: 0; border-top: 1px solid rgba(21, 18, 14, 0.3); height: 44px; } }