/* ========================================================================== 936.se — v2 Each section carries its own ground, ink and rule colour. Sections alternate dark / light so the page has a pulse; the lime appears exactly once, at the end, where the ask is. ========================================================================== */ /* --- Display face --------------------------------------------------------- Two are shipped. Fraunces is live; to try the other, change --font-display below to 'Bricolage Grotesque' and swap the preload in both HTML s. The unused file is never downloaded — @font-face only fetches on use. */ @font-face{ font-family: 'Fraunces'; src: url('/assets/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face{ font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } :root{ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --gutter: clamp(1.25rem, 5vw, 4rem); --measure: 62ch; /* Type scale. Every font-size on the site resolves to one of these — there are no bare rem values anywhere below. The hero is deliberately its own thing. Every other section runs on the same three levels, at the same sizes, in the same fonts: a section has a title, things at sub-head level, and description text. Nothing in a section is sized for that section alone. */ /* Hero — unique by design. */ --t-poster: clamp(2.75rem, 7vw, 6rem); --t-poster-sub: clamp(1.05rem, 1.9vw, 1.6rem); /* Sections 01–05 — the three shared levels. */ --t-section-title: clamp(2rem, 4.2vw, 3.75rem); /* every section heading */ --t-section-sub: clamp(1.25rem, 2vw, 1.75rem); /* intros, leads, item headings */ --t-body: clamp(1rem, 1.25vw, 1.15rem); /* all description text, buttons */ /* Set pieces — one instance each, not part of the three levels. */ --t-numeral: clamp(2.5rem, 5vw, 4.5rem); /* step numerals */ --t-display: clamp(1.5rem, 3.4vw, 3rem); /* the closing kicker line */ /* Chrome. */ --t-fine: clamp(.8rem, .95vw, .9rem); /* colophon */ --t-label: clamp(.7rem, .8vw, .78rem); /* tracked micro-labels */ /* Shared by everything at --t-label: the index numerals, the scroll cue, the language pairs and the rail. They read as one family, so they track as one family. */ --track-label: .16em; /* Scrim over background images, left → right. Raise all three if you swap in a brighter photo; text must keep 4.5:1 against the composite. */ --scrim-near: .90; --scrim-mid: .80; --scrim-far: .52; } /* --- The palette ---------------------------------------------------------- One class per ground. Everything downstream reads --bg / --fg / --muted / --rule, so a section changes character by changing one class in the HTML. */ .t-ink{ --bg:#0C0D10; --fg:#F2EDE3; --muted:#A3A099; --rule:rgba(242,237,227,.20); --btn-bg:#F2EDE3; --btn-fg:#0C0D10; /* Small text over a photo needs more than body muted: the rail rides the right edge where the scrim is thinnest, and the index numeral can land on a bright patch. Ink is the only theme that ever sits over an image — the rest have no --muted-strong and fall back to --muted. */ --muted-strong:#BFBCB4; } .t-bone{ --bg:#F1EADE; --fg:#15140F; --muted:#5B564B; --rule:rgba(21,20,15,.18); --btn-bg:#15140F; --btn-fg:#F1EADE; } .t-indigo{ --bg:#181845; --fg:#EFEDFF; --muted:#ADAADB; --rule:rgba(239,237,255,.24); --btn-bg:#EFEDFF; --btn-fg:#181845; } .t-sand{ --bg:#F4DFC7; --fg:#1A140C; --muted:#6A5340; --rule:rgba(26,20,12,.20); --btn-bg:#1A140C; --btn-fg:#F4DFC7; } /* The lime is a signal, not a ground — 100vh of it is a wall. It lives on the button instead, which is the one thing on the page you're meant to hit. */ .t-pine{ --bg:#12312A; --fg:#EFEFE6; --muted:#9DB6A9; --rule:rgba(239,239,230,.22); --btn-bg:#D8F24F; --btn-fg:#131707; } /* Kept for reference — swap onto a section to use the lime as a full ground. */ .t-lime{ --bg:#D8F24F; --fg:#131707; --muted:#414A15; --rule:rgba(19,23,7,.24); --btn-bg:#131707; --btn-fg:#D8F24F; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; scroll-snap-type: y proximity; -webkit-text-size-adjust: 100%; background: #0C0D10; } body{ margin: 0; font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img{ display: block; max-width: 100%; height: auto; } a{ color: inherit; } /* Headings take their size from their role class, never from the browser's defaults. Without this the two visually-hidden section headings render at the UA's 1.5em, which is a size that appears nowhere in the scale. */ h1, h2, h3{ font-size: inherit; font-weight: inherit; margin: 0; } :focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } .visually-hidden{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip{ position: absolute; left: var(--gutter); top: 0; z-index: 50; transform: translateY(-140%); background: #D8F24F; color: #131707; padding: .75rem 1.15rem; font-weight: 700; text-decoration: none; } .skip:focus-visible{ transform: translateY(.75rem); } .wrap{ width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: var(--gutter); } /* --- Masthead ------------------------------------------------------------- */ .masthead{ position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-inline: var(--gutter); color: #F2EDE3; } /* Own scrim, so the logo and language nav stay legible over any hero photo. */ .masthead::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 14rem; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(8,8,9,.78), rgba(8,8,9,0)); } .logo{ display: block; width: clamp(56px, 7vw, 84px); line-height: 0; } .logo img{ width: 100%; } .lang{ display: flex; align-items: center; gap: .35rem; margin-top: clamp(1rem, 2.5vw, 1.75rem); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-label); } .lang a{ padding: .35rem .55rem; color: #BCBCC4; text-decoration: none; transition: color .2s ease; } .lang a:hover, .lang a[aria-current]{ color: #F2EDE3; } .lang a + a{ border-left: 1px solid rgba(242,237,227,.25); } /* --- Section index rail --------------------------------------------------- Fixed to the right edge. The script swaps the t-* class on it as each section crosses the viewport middle, so it inherits that section's ink and never has to be told about colours twice. Below 64rem it is display:none — out of the layout and out of the accessibility tree — and the masthead pair takes the language toggle back. */ .rail{ position: fixed; top: 50%; right: clamp(1rem, 2.2vw, 2.25rem); transform: translateY(-50%); z-index: 20; display: none; flex-direction: column; align-items: flex-end; gap: clamp(1.5rem, 4vh, 2.5rem); color: var(--fg, #F2EDE3); } @media (min-width: 64rem){ .rail{ display: flex; } .masthead .lang{ display: none; } /* Reserve the rail's lane so the widest row (the six-item grid) can never run under it at mid widths. */ .wrap{ padding-right: calc(var(--gutter) + 5rem); } } .rail-lang{ display: flex; align-items: center; gap: .3rem; font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-label); } .rail-lang a{ padding: .2rem .4rem; color: var(--muted-strong, var(--muted, #A3A099)); text-decoration: none; transition: color .25s ease; } .rail-lang a:hover, .rail-lang a[aria-current]{ color: var(--fg, #F2EDE3); } .rail-lang a + a{ border-left: 1px solid var(--rule, rgba(255,255,255,.2)); } .rail-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(.65rem, 1.5vh, 1rem); } .rail-list a{ display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding: .15rem 0; color: var(--muted-strong, var(--muted, #A3A099)); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-label); text-decoration: none; transition: color .25s ease; } .rail-tick{ display: block; width: 14px; height: 1px; background: currentColor; transition: width .25s ease, height .25s ease; } .rail-list a:hover{ color: var(--fg, #F2EDE3); } .rail-list a[aria-current]{ color: var(--fg, #F2EDE3); } .rail-list a[aria-current] .rail-tick{ width: 30px; height: 2px; } /* --- Section shell -------------------------------------------------------- */ .section{ position: relative; min-height: 100svh; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(6rem, 14vh, 10rem); background: var(--bg); color: var(--fg); } .bleed{ position: absolute; inset: 0; z-index: 0; } .bleed img{ width: 100%; height: 100%; object-fit: cover; } .bleed::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,8,9,var(--scrim-near)) 0%, rgba(8,8,9,var(--scrim-mid)) 42%, rgba(8,8,9,var(--scrim-far)) 100%); } .section > .wrap, .section > .hero-body, .section > .hero-cue{ position: relative; z-index: 1; } /* Index numeral — structure without adding words. */ .marker{ display: block; margin-bottom: clamp(.75rem, 2vh, 1.5rem); font-family: var(--font-body); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-label); color: var(--muted-strong, var(--muted)); } .section-title{ font-family: var(--font-display); font-variation-settings: 'opsz' 96; font-size: var(--t-section-title); font-weight: 700; line-height: 1.0; letter-spacing: -.025em; margin: 0 0 clamp(1rem, 2vw, 1.5rem); text-wrap: balance; } .section-intro{ max-width: var(--measure); margin: 0; font-family: var(--font-display); font-variation-settings: 'opsz' 72; color: var(--fg); font-size: var(--t-section-sub); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; } /* --- 1 · Hero ------------------------------------------------------------- */ .hero{ justify-content: center; padding-block: clamp(9rem, 20vh, 13rem) clamp(7rem, 16vh, 9rem); } .poster{ max-width: 18ch; margin: 0; font-family: var(--font-display); font-variation-settings: 'opsz' 144; font-size: var(--t-poster); font-weight: 700; line-height: .98; letter-spacing: -.03em; text-wrap: balance; } .poster-sub{ display: block; max-width: 42ch; margin-top: clamp(1.25rem, 3vw, 2rem); font-family: var(--font-body); font-variation-settings: normal; color: var(--muted); font-size: var(--t-poster-sub); font-weight: 500; line-height: 1.4; /* Explicit, not omitted: letter-spacing inherits as a computed length, so without this the sub-line picks up the poster's -.03em at 96px — a -2.88px crush at its own size. Explicit keeps it honest. */ letter-spacing: normal; } .hero > .hero-cue{ position: absolute; left: 0; right: 0; bottom: clamp(2rem, 5vh, 3.5rem); } .cue{ display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; transition: color .2s ease; } .cue:hover{ color: var(--fg); } .cue .arrow{ animation: bob 2s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(4px) } } /* --- 2 · Belief & 6 · Contact -------------------------------------------- */ .prose{ max-width: var(--measure); } .prose p{ margin: 0 0 1.15em; } .prose p:last-child{ margin-bottom: 0; } .prose .lead{ font-family: var(--font-display); font-variation-settings: 'opsz' 72; font-size: var(--t-section-sub); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--fg); } .prose p:not(.lead){ color: var(--muted); font-size: var(--t-body); line-height: 1.7; } .btn{ display: inline-block; margin-top: clamp(2rem, 5vh, 3rem); padding: 1.05rem 2.25rem; background: var(--btn-bg); color: var(--btn-fg); font-size: var(--t-body); font-weight: 700; text-decoration: none; transition: opacity .2s ease; } .btn:hover{ opacity: .82; } .contact p:has(.btn){ margin: 0; } /* --- 3 · What we do ------------------------------------------------------- */ .grid{ list-style: none; /* Row gap tracks viewport height, not width: six items at sub-head size otherwise push this section past 100svh on a 900px-tall laptop. */ margin: clamp(2rem, 4.5vh, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3.5vh, 3rem) clamp(2rem, 6vw, 5rem); } .grid li{ max-width: 46ch; padding-top: clamp(1rem, 1.6vw, 1.5rem); border-top: 1px solid var(--rule); } .grid h3{ margin: 0 0 .5rem; font-family: var(--font-display); font-variation-settings: 'opsz' 72; font-size: var(--t-section-sub); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; } .grid p{ margin: 0; color: var(--muted); font-size: var(--t-body); line-height: 1.7; } /* --- 4 · How we work ------------------------------------------------------ */ .steps{ list-style: none; margin: clamp(2.5rem, 6vh, 4rem) 0 0; padding: 0; display: grid; gap: clamp(2rem, 5vh, 3.25rem); } .steps li{ display: grid; grid-template-columns: minmax(2.5rem, auto) 1fr; column-gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; max-width: 60ch; } .step-n{ grid-row: 1 / span 2; font-family: var(--font-display); font-variation-settings: 'opsz' 144; font-size: var(--t-numeral); font-weight: 700; line-height: .85; letter-spacing: -.04em; color: var(--muted); } .steps h3{ margin: 0 0 .35rem; font-family: var(--font-display); font-variation-settings: 'opsz' 72; font-size: var(--t-section-sub); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; } .steps p{ margin: 0; color: var(--muted); font-size: var(--t-body); line-height: 1.7; } @media (min-width: 64rem){ .steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); } .steps li{ display: block; max-width: 34ch; padding-top: clamp(1rem, 1.6vw, 1.5rem); border-top: 1px solid var(--rule); } .step-n{ display: block; margin-bottom: clamp(.5rem, 1.5vw, 1rem); --t-numeral: clamp(3.5rem, 6vw, 6rem); } } .kicker{ max-width: 22ch; margin: clamp(3rem, 8vh, 5rem) 0 0; font-family: var(--font-display); font-variation-settings: 'opsz' 96; font-size: var(--t-display); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; } /* --- Footer --------------------------------------------------------------- */ .site-footer{ background: var(--bg); color: var(--fg); padding-block: clamp(2.5rem, 6vh, 4rem); } .footer-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; } .colophon{ margin: 0; color: var(--muted); font-size: var(--t-fine); } .colophon a{ text-decoration-color: var(--rule); text-underline-offset: .2em; } .colophon a:hover{ color: var(--fg); text-decoration-color: currentColor; } /* --- Reveal --------------------------------------------------------------- */ .reveal{ opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible{ opacity: 1; transform: none; } .grid .reveal.is-visible, .steps .reveal.is-visible{ transition-delay: calc(var(--i, 0) * 70ms); } /* --- Narrow --------------------------------------------------------------- */ @media (max-width: 48rem){ .grid{ grid-template-columns: minmax(0, 1fr); } .poster{ max-width: none; } .bleed::after{ background: linear-gradient(to bottom, rgba(8,8,9,var(--scrim-near)) 0%, rgba(8,8,9,var(--scrim-mid)) 55%, rgba(8,8,9,var(--scrim-near)) 100%); } .footer-inner{ justify-content: flex-start; } } /* --- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } .reveal{ opacity: 1; transform: none; transition: none; } .cue .arrow{ animation: none; } *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; } }