/* RavenRoom — off-white ground, white surfaces, black ink, one pure red. * * Light only, mobile-first. Red appears in exactly five places: the rule at the * top of the page, the submit button, the left bar on cards, the underline on a * chosen value, and link arrows. Everything else is black, grey, or hairline. * Squared corners throughout; no shadows, no gradients, no rounded pills. * * The two-tone rule: white floats on the off-white ground, and anything inset * inside a white surface returns to the ground colour. That gives the same * figure/ground separation the old white-page/grey-band alternation gave, but * warmer — and it does it with full-bleed bands rather than rounded cards, * which is the part of the reference we deliberately did not take. */ /* Libre Franklin — a Franklin Gothic revival, the American civic/signage lineage. Self-hosted so the strict default-src 'self' CSP stays intact; one variable file covers every weight the page uses. Regenerate with dev/fetch-fonts.mjs. */ @font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/librefranklin-var.woff2") format("woff2-variations"); } :root { --font: "Libre Franklin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ink: #000000; --ink-2: #2a2724; /* Warmed to sit on the new ground, and darkened: #767676 measured 4.48:1 on white but only 4.04:1 on #f7f6f4, which fails. This is 4.78:1 on the ground and 5.31:1 on the white bands, so it passes on both surfaces. */ --grey: #6e6b66; --line: #e3e0db; --mute: #b2aea8; /* disabled days and placeholders — inactive, so exempt */ --ground: #f7f6f4; /* the page itself */ --paper: #ffffff; /* what floats on it: rail, footer band, inset panels */ --red: #ff0000; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: hidden; /* the footer band bleeds with vw units */ border-top: 4px solid var(--red); background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Column so the footer band can be pushed to the bottom of short pages. While the page was white on white an unfilled tail below the footer was invisible; against the ground colour it reads as the page stopping halfway. The 4px is the red rule on , which would otherwise make this overflow by exactly that much. */ .page { display: flex; flex-direction: column; min-height: calc(100vh - 4px); max-width: 1120px; margin: 0 auto; padding: 22px 20px 0; } /* Whichever body the page has, it takes the slack — the footer keeps its own 56px gap rather than having it absorbed by an auto margin. */ .layout, .stage { flex: 1 0 auto; } /* Before a day is chosen there is no rail, so the page is a single readable column rather than a half-empty grid. */ main { max-width: 44rem; } /* ---- masthead ---------------------------------------------------------- */ .masthead { display: flex; align-items: center; gap: 9px; margin-bottom: 44px; } .mark { display: block; flex: none; } .wordmark { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.025em; } /* ---- type ------------------------------------------------------------- */ /* The one dominant element on the page. Everything else is deliberately quiet so this leads without competition. */ .display { margin: 0 0 18px; font-size: clamp(2.1rem, 7vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; max-width: 15ch; text-wrap: balance; /* stops a single orphaned word on the last line */ } .intro { margin: 0 0 40px; max-width: 46ch; color: var(--ink-2); font-size: 1.02rem; } .label { display: block; /* .label is used on