/* =========================================================== DwayneVera.com — shared design system (lab) Tokens + primitives lifted from the live homepage so every page in the lab reads as the same site. =========================================================== */ @property --tex-y { syntax: ""; inherits: false; initial-value: 0px; } :root { --ink: #0c0e10; --ink-soft: #14171b; --slate-deep: #141a1f; --paper: #ece9e2; --paper-dim: #dcd8cf; --current: #c9913f; --current-bright: #e2ae5e; --current-ink: #8a5d1a; /* amber that passes AA on paper */ --alloy: #999d9a; --accent-glow: rgba(201, 145, 63, .16); --line: rgba(236, 233, 226, .16); --line-dark: rgba(12, 14, 16, .22); --display: "Archivo", "Helvetica Neue", system-ui, sans-serif; --serif: "Fraunces", Georgia, serif; --data: "IBM Plex Mono", ui-monospace, monospace; --fs-moment: clamp(42px, 5.2vw, 84px); --fs-section: clamp(26px, 2.8vw, 44px); --fs-sub: clamp(18px, 1.5vw, 24px); --gutter: clamp(20px, 4.2vw, 72px); --ease-out: cubic-bezier(.22, 1, .36, 1); --nav-h: 66px; } /* =========================================================== Per-page accent identity. Every page sets data-accent on . Because every primitive below only ever references --current / --current-bright / --current-ink, swapping these three re-skins the whole page. --current-ink is the only one that lands on paper, so it is the one tuned for >=4.5:1 against #ece9e2; --current-bright is tuned for >=4.5:1 against #0c0e10. Both were measured, not eyeballed. The tinted --ink-soft / --slate-deep are what make each page feel like a different room rather than the same room with new trim. =========================================================== */ [data-accent="amber"] { --current: #c9913f; --current-bright: #e2ae5e; --current-ink: #8a5d1a; --ink-soft: #16140f; --slate-deep: #1a160f; --accent-glow: rgba(201,145,63,.16); } [data-accent="ember"] { --current: #c96f52; --current-bright: #e08066; --current-ink: #93361c; --ink-soft: #191310; --slate-deep: #1e1512; --accent-glow: rgba(201,111,82,.16); } [data-accent="teal"] { --current: #3aa5a1; --current-bright: #3fb5b0; --current-ink: #0f6f6c; --ink-soft: #0f1719; --slate-deep: #10191c; --accent-glow: rgba(58,165,161,.16); } [data-accent="violet"] { --current: #8878ea; --current-bright: #9b8cf7; --current-ink: #5342c9; --ink-soft: #14131f; --slate-deep: #171528; --accent-glow: rgba(136,120,234,.18); } [data-accent="green"] { --current: #55b26c; --current-bright: #62c47a; --current-ink: #2f7440; --ink-soft: #101812; --slate-deep: #111d15; --accent-glow: rgba(85,178,108,.16); } [data-accent="rose"] { --current: #cc5f7e; --current-bright: #e07a9c; --current-ink: #a2274f; --ink-soft: #1a1116; --slate-deep: #20131b; --accent-glow: rgba(204,95,126,.18); } [data-accent="ice"] { --current: #4bb0d4; --current-bright: #5fc7e8; --current-ink: #1a6b8a; --ink-soft: #0f171d; --slate-deep: #101c24; --accent-glow: rgba(75,176,212,.18); } *, *::before, *::after { box-sizing: border-box; } html { background: var(--ink); color: var(--paper); font-family: var(--display); overflow-x: clip; /* GSAP pins go position:fixed and escape body-only clip */ scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--ink); color: var(--paper); overflow-x: clip; } a { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--current); outline-offset: 5px; } img { max-width: 100%; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .micro { font-family: var(--data); font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto; z-index: 200; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; min-height: var(--nav-h); padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px; background: rgba(12,14,16,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav__brand { font-size: 13px; font-weight: 740; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; } .nav__brand span { opacity: .6; } .nav__links { display: flex; gap: 24px; justify-self: center; } .nav__links a { font-family: var(--data); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; opacity: .7; transition: opacity 220ms ease; } .nav__links a:hover, .nav__links a[aria-current="page"] { opacity: 1; color: var(--current-bright); } .nav__cta { justify-self: end; font-family: var(--data); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(236,233,226,.5); padding: 9px 16px; transition: background 220ms ease, color 220ms ease; } .nav__cta:hover { background: var(--paper); color: var(--ink); } @media (max-width: 900px) { .nav__links { display: none; } } /* ---------- scroll progress ---------- */ .prog { position: fixed; top: 0; left: 0; z-index: 300; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--current), var(--current-bright)); pointer-events: none; } /* ---------- surfaces ---------- */ .panel { position: relative; padding: clamp(80px, 10vw, 150px) var(--gutter); } /* an atmospheric wash in the page's own hue — this is most of what makes the pages feel like different rooms instead of one dark template */ .panel--ink::before, .panel--soft::before, .panel--slate::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 82% 0%, var(--accent-glow), transparent 62%); } .panel > * { position: relative; } .tex::before, .tex::after { z-index: 0; } .panel--ink { background: var(--ink); color: var(--paper); } .panel--soft { background: var(--ink-soft); color: var(--paper); } .panel--slate { background: var(--slate-deep); color: var(--paper); } .panel--paper { background: var(--paper); color: var(--ink); } .panel--amber { background: var(--current); color: var(--ink); } .tex { position: relative; isolation: isolate; overflow: hidden; } .tex::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--tex-src); background-size: cover; background-position: center; filter: blur(3px) saturate(.55) brightness(.5); transform: scale(1.18) translateY(var(--tex-y, 0px)); opacity: .5; } .tex::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--tex-tint, rgba(12,14,16,.94)) 0%, rgba(12,14,16,.86) 55%, var(--tex-tint, rgba(12,14,16,.94)) 100%); } /* ---------- type primitives ---------- */ .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--current); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; } .panel--paper .eyebrow { color: var(--current-ink); } .h-moment { margin: 0; font-size: var(--fs-moment); font-weight: 720; letter-spacing: -.045em; line-height: 1; text-wrap: balance; } .h-section { margin: 0; font-size: var(--fs-section); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; max-width: 24ch; text-wrap: balance; } .deck { margin: 20px 0 0; max-width: 44rem; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--paper-dim); text-wrap: pretty; } .panel--paper .deck { color: rgba(12,14,16,.72); } .accent { color: var(--current-bright); } .panel--paper .accent, .panel--amber .accent { color: var(--current-ink); } .serif { font-family: var(--serif); font-style: italic; font-weight: 380; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-family: var(--data); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: transform 220ms var(--ease-out), background 220ms ease, color 220ms ease, border-color 220ms ease; } .btn--solid { background: var(--current); color: var(--ink); border: 1px solid var(--current); } .btn--solid:hover { background: var(--current-bright); border-color: var(--current-bright); transform: translateY(-2px); } .btn--ghost { border: 1px solid rgba(236,233,226,.5); color: var(--paper); } .btn--ghost:hover { background: var(--paper); color: var(--ink); transform: translateY(-2px); } .panel--paper .btn--ghost { border-color: rgba(12,14,16,.45); color: var(--ink); } .panel--paper .btn--ghost:hover { background: var(--ink); color: var(--paper); } /* ---------- page header ---------- */ .phead { padding-top: calc(var(--nav-h) + clamp(60px, 9vw, 130px)); } .phead__title { margin: 0; font-size: clamp(46px, 7.5vw, 120px); font-weight: 740; font-variation-settings: "wdth" 86; letter-spacing: -.05em; line-height: .94; } .phead__sub { margin: 24px 0 0; max-width: 40rem; font-size: var(--fs-sub); line-height: 1.5; color: var(--paper-dim); } /* ---------- next-page footer ---------- */ .nextup { display: grid; gap: 14px; } .nextup a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: clamp(22px, 2.6vw, 34px) 0; border-top: 1px solid var(--line); text-decoration: none; transition: padding-left 300ms var(--ease-out); } .nextup a:hover { padding-left: 12px; } .nextup a:last-child { border-bottom: 1px solid var(--line); } .nextup__t { font-size: clamp(22px, 2.4vw, 36px); font-weight: 680; letter-spacing: -.03em; } .nextup__a { color: var(--current-bright); font-size: 24px; } .foot { padding: 40px var(--gutter) 56px; border-top: 1px solid var(--line); color: var(--alloy); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* ---------- scroll reveal primitives ---------- */ .dimline { opacity: 1; } .wsc { display: inline; } /* ---------- film: scroll-scrubbed frame sequence ---------- The section is tall; the stage inside it is sticky and viewport-height, so scrolling the section scrubs the canvas in place. Chapters cross-fade over it. */ .film { position: relative; background: var(--ink); } .film__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; background: var(--ink); } .film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .film__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12,14,16,.72) 0%, rgba(12,14,16,.18) 34%, rgba(12,14,16,.2) 62%, rgba(12,14,16,.9) 100%); } .film__chapters { position: relative; width: 100%; height: 100%; } .film__chapter { position: absolute; inset: auto 0 0 0; padding: 0 var(--gutter) clamp(74px, 13vh, 150px); display: grid; gap: 14px; justify-items: center; text-align: center; opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); } .film__chapter.is-visible { opacity: 1; transform: none; } .film__chapter p { margin: 0; max-width: 20ch; font-size: clamp(26px, min(4vw, 5.6vh), 62px); font-weight: 720; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; text-shadow: 0 2px 30px rgba(12,14,16,.6); } .film__chapter .serif { font-family: var(--serif); font-style: italic; font-weight: 380; letter-spacing: -.02em; color: var(--current-bright); } .film__chapter .micro { color: var(--current-bright); margin: 0; } /* progress spine along the bottom of the stage */ .film__spine { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; height: 2px; background: rgba(236,233,226,.16); } .film__fill { display: block; height: 100%; background: var(--current); transform-origin: left; transform: scaleX(0); } /* qa/reduced: the stage stops being sticky so the section reads as one still */ body.qa-flat .film { height: auto !important; } body.qa-flat .film__stage { position: relative; } body.qa-flat .film__chapter { position: relative; opacity: 1; transform: none; padding-bottom: 20px; } /* ?film= forces one moment — keep the real overlay geometry so the capture shows what a visitor actually sees, not a flattened stack */ body.film-forced .film__stage { height: 100svh; } body.film-forced .film__chapter { position: absolute; inset: auto 0 0 0; opacity: 0; padding-bottom: clamp(74px, 13vh, 150px); } body.film-forced .film__chapter.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .film { height: auto !important; } .film__stage { position: relative; } .film__chapter { position: relative; opacity: 1; transform: none; } } /* ---------- marquee ---------- */ .mq { overflow: hidden; width: 100%; } .mq__in { display: flex; gap: clamp(28px, 4vw, 64px); width: max-content; will-change: transform; } .mq__in > * { flex: 0 0 auto; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }