/* ============================================================================ RWS v5 — Base layer (shared by all concepts) Reset · base typography · containers · buttons · toggle-driven visibility · reveal/countdown primitives. Concept style.css themes ON TOP of this. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); color: var(--text); } /* Item 2: Playfair reserved for large display headings. h3/h4 use Lato — far more legible small. */ h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: var(--lh-snug); color: var(--text); letter-spacing: -0.005em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } p { line-height: var(--lh-body); } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } strong { font-weight: 700; } em { font-style: italic; } /* --- Layout helpers --- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--side-pad); } .prose { max-width: var(--maxw-prose); } .section { padding-block: var(--s-9); } .stack > * + * { margin-top: var(--s-4); } /* --- Kicker / eyebrow (used sparingly, never stacked) --- */ .kicker { font-family: var(--font-body); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-faint); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; padding: 0.8em 1.4em; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Primary = RW signature: ink button, yellow text */ .btn-primary { background: var(--ink); color: var(--rw-yellow); } .btn-primary:hover { background: #0e1411; } /* Yellow chip CTA (use once per view) */ .btn-yellow { background: var(--rw-yellow); color: var(--ink); } .btn-yellow:hover { background: var(--rw-yellow-deep); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline); } .btn-ghost:hover { border-color: var(--text); } /* --- The yellow "thread": a single brand accent line --- */ .thread { height: 3px; width: 56px; background: var(--rw-yellow); border: 0; } /* ============================================================================ TOGGLE-DRIVEN VISIBILITY (set on ) These are the calm-by-default rules the sticky control header flips. ========================================================================== */ /* View: Simple (3 doors) vs Full (5 areas). Default = simple. */ .view-simple, .view-full { } html[data-view="full"] .view-simple { display: none !important; } html[data-view="simple"] .view-full { display: none !important; } /* Countdown: hidden unless explicitly turned on. Default = off. */ .countdown { display: none; } html[data-countdown="on"] .countdown { display: revert; } /* Motion: calm by default. Reveal animations are ADDITIVE, only when on. With motion off, everything is simply visible — no layout shift, no jank. */ .reveal { opacity: 1; transform: none; } html[data-motion="on"] .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } html[data-motion="on"] .reveal.is-in { opacity: 1; transform: none; } /* Respect OS preference: if user asks for reduced motion, force calm. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } html[data-motion="on"] .reveal { opacity: 1; transform: none; } } /* --- Countdown primitive (concepts theme the look) --- */ .countdown { gap: var(--s-4); align-items: baseline; } .countdown .cd-unit { display: inline-flex; flex-direction: column; align-items: center; } .countdown .cd-num { font-variant-numeric: tabular-nums; font-weight: 700; } .countdown .cd-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } /* --- Disclaimer block (verbatim copy injected by content.js or hardcoded) --- */ .disclaimer { font-size: var(--fs-small); color: var(--text-faint); line-height: 1.5; max-width: var(--maxw-prose); } /* --- Accessibility --- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } html[data-theme="dark"] :focus-visible, .is-dark :focus-visible { outline-color: var(--rw-yellow); } /* --- Skip link --- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 0.6em 1em; z-index: 999; } .skip-link:focus { left: var(--side-pad); }