/* ========================================================================== Adjusting ETC Design note: the page is laid out like a well-written estimate — itemized, numbered, ruled, and free of anything that does not carry information. Hairlines instead of boxes. Monospace for anything countable. ========================================================================== */ /* ---------------------------------------------------------------- fonts -- */ @font-face { font-family: 'Archivo'; src: url('../assets/fonts/archivo-latin-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrainsmono-latin-var.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- tokens -- */ /* --- non-colour tokens: the same in every palette ------------------------- */ :root { --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; --pad: clamp(1.25rem, 5vw, 5.5rem); --maxw: 1280px; --nav-h: 68px; --ease: cubic-bezier(.22, .61, .36, 1); --mark-accent: var(--blue-lt); } /* --- palettes ------------------------------------------------------------- Every colour on the page resolves through one of these. Blues are sampled from the client's logo in each case; what changes between palettes is the base, its warmth, and the secondary accent used for credentials. Switch by setting data-theme on . `paper` is the default. Note on light palettes: --blue-lt is *darker* than --blue, not lighter. The "bright" accent has to move away from the background, and on a light base that means down, or it fails contrast. ------------------------------------------------------------------------- */ /* PAPER — warm off-white. The estimate, on paper. */ :root, [data-theme='paper'] { --ink: #F7F5F1; --paper: #1B2430; --muted: #4C5663; --faint: #545E6B; --blue: #2A6FB8; --blue-lt: #1F5FA6; --blue-deep: #17497E; --gold: #8A6512; --accent-sm: var(--blue-deep); --line: rgba(27, 36, 48, .16); --line-soft: rgba(27, 36, 48, .09); --band-1: #DDE8F6; --band-2: #CDDEF2; --nav-bg: rgba(247, 245, 241, .86); --glow-a: transparent; /* paper doesn't glow */ --glow-b: transparent; --glow-cta: rgba(42, 111, 184, .07); --on-blue: #FFFFFF; --blue-hover: #2360A5; --hover-bg: rgba(27, 36, 48, .05); --hover-bd: rgba(27, 36, 48, .3); --doc-bg: #FFFFFF; --doc-ink: #1B2430; --doc-muted: #6B7684; --doc-hair: #DDD7CB; --doc-bar: #DCE3EC; --doc-bar-soft: #ECEFF3; --doc-bar-fill: #97AAC1; --doc-chip: #E4EBF4; --doc-shadow: 0 22px 50px -30px rgba(27, 36, 48, .45), 0 0 0 1px rgba(27, 36, 48, .07); } /* COOL — cool off-white. Reads more like software than stationery. */ [data-theme='cool'] { --ink: #F4F6FA; --paper: #16202F; --muted: #48566D; --faint: #4F5D74; --blue: #2C6FC4; --blue-lt: #1E5FB0; --blue-deep: #164A8C; --gold: #2C6FC4; /* credentials in blue, not gold — monochrome */ --accent-sm: var(--blue-deep); --line: rgba(22, 32, 47, .15); --line-soft: rgba(22, 32, 47, .08); --band-1: #D9E5F5; --band-2: #C7DAF1; --nav-bg: rgba(244, 246, 250, .86); --glow-a: rgba(44, 111, 196, .12); --glow-b: rgba(22, 74, 140, .08); --glow-cta: rgba(44, 111, 196, .12); --on-blue: #FFFFFF; --blue-hover: #245FAB; --hover-bg: rgba(22, 32, 47, .05); --hover-bd: rgba(22, 32, 47, .28); --doc-bg: #FFFFFF; --doc-ink: #16202F; --doc-muted: #64748B; --doc-hair: #D6DEE9; --doc-bar: #D9E2ED; --doc-bar-soft: #EAEFF5; --doc-bar-fill: #90A6C0; --doc-chip: #DFE9F5; --doc-shadow: 0 22px 50px -30px rgba(22, 32, 47, .4), 0 0 0 1px rgba(22, 32, 47, .06); } /* SLATE — tinted rather than white. The middle ground. */ [data-theme='slate'] { --ink: #E4EAF2; --paper: #15202F; --muted: #47546A; --faint: #46515E; --blue: #245F9E; --blue-lt: #1B5190; --blue-deep: #143F73; --gold: #7A5C0F; --accent-sm: var(--blue-deep); --line: rgba(21, 32, 47, .17); --line-soft: rgba(21, 32, 47, .10); --band-1: #CEDCED; --band-2: #BCCFE8; --nav-bg: rgba(228, 234, 242, .88); --glow-a: rgba(36, 95, 158, .07); --glow-b: rgba(20, 63, 115, .05); --glow-cta: rgba(36, 95, 158, .12); --on-blue: #FFFFFF; --blue-hover: #1D5189; --hover-bg: rgba(21, 32, 47, .06); --hover-bd: rgba(21, 32, 47, .3); --doc-bg: #FBFCFE; --doc-ink: #15202F; --doc-muted: #5F6D82; --doc-hair: #CBD5E1; --doc-bar: #D3DDE8; --doc-bar-soft: #E5EBF2; --doc-bar-fill: #8B9FB8; --doc-chip: #DAE5F2; --doc-shadow: 0 22px 50px -30px rgba(21, 32, 47, .45), 0 0 0 1px rgba(21, 32, 47, .08); } /* NAVY — the previous dark palette, kept for comparison. */ [data-theme='navy'] { --ink: #141C2A; --paper: #EAF0F8; --muted: #9DACC0; --faint: #8B9BB2; --blue: #3B8CD9; --blue-lt: #61AFFA; --blue-deep: #1E5E9C; --gold: #D4AE3A; --accent-sm: var(--blue-lt); --line: rgba(157, 172, 192, .22); --line-soft: rgba(157, 172, 192, .13); --band-1: #18212F; --band-2: #1D2839; --nav-bg: rgba(20, 28, 42, .85); --glow-a: rgba(59, 140, 217, .16); --glow-b: rgba(30, 94, 156, .14); --glow-cta: rgba(59, 140, 217, .17); --on-blue: #08111C; --blue-hover: #4A99E4; --hover-bg: rgba(157, 172, 192, .07); --hover-bd: rgba(157, 172, 192, .4); --doc-bg: #F2F6FA; --doc-ink: #16202F; --doc-muted: #5C6B7F; --doc-hair: #CBD5E1; --doc-bar: #D3DDE8; --doc-bar-soft: #E2E9F0; --doc-bar-fill: #9FB4CA; --doc-chip: #DDE7F1; --doc-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); } /* ----------------------------------------------------------------- base -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); /* NB: do not put overflow-x here. Any non-visible overflow on the root breaks `position: sticky` for descendants, which silently unpins the process section. The top tint is a body background layer instead; .cta clips its own. */ } body { margin: 0; /* The top tint lives here rather than on .hero. .hero is a max-width container, so a gradient inside it gets clipped at the container edge — invisible on a dark base, an obvious hard-edged smudge on a light one. */ background: var(--ink); background-image: radial-gradient(58% 34% at 18% 0%, var(--glow-a), transparent 72%), radial-gradient(45% 26% at 88% 2%, var(--glow-b), transparent 72%); background-repeat: no-repeat; color: var(--paper); font-family: var(--sans); font-size: clamp(1rem, .96rem + .2vw, 1.075rem); font-weight: 400; line-height: 1.62; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.08; letter-spacing: -.018em; } p { margin: 0; } ol, ul, dl, dd { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--blue-lt); outline-offset: 3px; border-radius: 2px; } .mono { font-family: var(--mono); font-weight: 500; font-style: normal; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-160%); padding: .7rem 1.1rem; border-radius: 6px; background: var(--blue); color: var(--on-blue); font-weight: 600; transition: transform .18s var(--ease); } .skip:focus { transform: none; } /* --------------------------------------------------------------- layout -- */ .sec { max-width: var(--maxw); margin-inline: auto; padding: clamp(4.5rem, 10vw, 9rem) var(--pad); } .sec--tight { padding-block: clamp(3.5rem, 7vw, 6rem); } /* full-bleed bars (nav, footer) whose inner content still lines up with .sec */ .gutter { padding-inline: calc(var(--pad) + max(0px, (100% - var(--maxw)) / 2)); } .sec__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .sec__side { color: var(--muted); font-size: .95rem; max-width: 40ch; padding-top: .4rem; } @media (min-width: 940px) { .sec__head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; } .sec__side { padding-bottom: .5rem; } } .eyebrow { display: flex; align-items: center; gap: .7rem; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.15rem; } .eyebrow i { font-style: normal; color: var(--blue-lt); } .eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line); max-width: 8rem; } .sec__h2 { font-size: clamp(1.85rem, 4.1vw, 3.15rem); font-stretch: 96%; max-width: 20ch; text-wrap: balance; } /* -------------------------------------------------------------- buttons -- */ .btn { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: var(--line); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; padding: .68rem 1.15rem; border: 1px solid var(--btn-bd); border-radius: 7px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--sans); font-size: .93rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .btn:hover { --btn-bd: var(--hover-bd); background: var(--hover-bg); } .btn:active { transform: translateY(1px); } .btn__ico { width: 15px; height: 15px; flex: none; } .btn--sm { min-height: 38px; padding: .4rem .85rem; font-size: .86rem; } .btn--lg { min-height: 52px; padding: .85rem 1.55rem; font-size: 1rem; } .btn--primary { --btn-bg: var(--blue); --btn-fg: var(--on-blue); --btn-bd: var(--blue); font-weight: 600; } .btn--primary:hover { --btn-bg: var(--blue-hover); --btn-bd: var(--blue-hover); } .btn--ghost { --btn-bd: var(--line); } .tag { display: inline-block; padding: .32rem .72rem; border: 1px solid var(--line); border-radius: 100px; font-size: .78rem; font-weight: 500; letter-spacing: .03em; color: var(--paper); } /* ------------------------------------------------------------------ nav -- */ .nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 1.5rem; height: var(--nav-h); padding-inline: calc(var(--pad) + max(0px, (100% - var(--maxw)) / 2)); background: var(--nav-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .nav__brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; } .nav__mark { width: 30px; height: 30px; flex: none; color: var(--paper); } .nav__name { font-size: 1.02rem; font-weight: 500; font-stretch: 108%; letter-spacing: .1em; text-transform: uppercase; } .nav__etc { color: var(--blue-lt); font-weight: 700; margin-left: .42em; letter-spacing: .14em; } .nav__links { display: flex; gap: 1.75rem; } .nav__links a { position: relative; font-size: .9rem; color: var(--muted); transition: color .2s var(--ease); } .nav__links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--blue-lt); transition: right .25s var(--ease); } .nav__links a:hover { color: var(--paper); } .nav__links a:hover::after { right: 0; } .nav__end { display: flex; align-items: center; gap: .7rem; } .burger { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer; } .burger span { display: block; width: 17px; height: 1.5px; margin: 3.5px auto; background: var(--paper); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); } .burger[aria-expanded='true'] span:first-child { transform: translateY(2.5px) rotate(45deg); } .burger[aria-expanded='true'] span:last-child { transform: translateY(-2.5px) rotate(-45deg); } /* ---------------------------------------------------------- mobile menu -- */ .menu { position: fixed; inset: var(--nav-h) 0 0; z-index: 99; display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding: 2rem var(--pad) 4rem; background: var(--ink); opacity: 0; /* Presence is the `hidden` attribute, not `visibility` — a visibility transition leaves the links unfocusable at t=0, which breaks focus-into-menu on open. */ transition: opacity .28s var(--ease); } .menu[hidden] { display: none; } .menu.is-open { opacity: 1; } .menu__links { display: flex; flex-direction: column; gap: .35rem; } .menu__links a { display: flex; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.5rem; font-weight: 500; font-stretch: 96%; } .menu__links i { font-style: normal; font-size: .72rem; color: var(--blue-lt); } .menu__cta { width: 100%; } .menu__note { font-size: .76rem; color: var(--faint); text-align: center; } /* ----------------------------------------------------------------- hero -- */ .hero { position: relative; max-width: var(--maxw); margin-inline: auto; padding: clamp(3rem, 8vw, 6.5rem) var(--pad) clamp(3rem, 6vw, 5rem); } .hero__eyebrow { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); } .hero__where { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .hero__main { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; } /* the three services ARE the headline — no lead-in line explaining the acronym */ .decode { position: relative; padding-left: clamp(1.1rem, 2.6vw, 2rem); font-weight: 500; } .decode::before { content: ''; position: absolute; left: 0; top: .1em; bottom: .22em; width: 2px; background: linear-gradient(var(--blue), transparent); border-radius: 2px; } .decode__row { display: block; font-size: clamp(2.4rem, 8.4vw, 5.5rem); font-stretch: 92%; line-height: 1.08; letter-spacing: -.026em; white-space: nowrap; color: var(--paper); } /* ::first-letter needs a block container — hence display:block above */ .decode__row::first-letter { color: var(--blue-lt); font-weight: 600; font-size: 1.08em; } .hero__side { display: grid; gap: 1.4rem; justify-items: start; } .hero__lede { max-width: 52ch; color: var(--muted); font-size: 1.05rem; } .hero__note { max-width: 52ch; color: var(--paper); font-size: 1.05rem; font-weight: 500; } .hero__acts { display: flex; flex-wrap: wrap; gap: .8rem; } @media (min-width: 900px) { .hero__main { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-top: clamp(.5rem, 2vw, 1.5rem); } .hero__side { padding-top: .6rem; } .hero__lede, .hero__note { max-width: none; } } /* ---------------------------------------------------- credentials strip -- */ .creds { border-block: 1px solid var(--line-soft); background: var(--band-1); } .creds__list { display: grid; grid-template-columns: repeat(2, 1fr); max-width: var(--maxw); margin-inline: auto; } .cred { padding: 1.5rem var(--pad); border-bottom: 1px solid var(--line-soft); } .cred:nth-child(odd) { border-right: 1px solid var(--line-soft); } .cred:nth-last-child(-n+2) { border-bottom: 0; } .cred__k { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 500; font-stretch: 96%; letter-spacing: -.02em; line-height: 1.1; } .cred__k--mark { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; color: var(--gold); } .cred__v { margin-top: .3rem; font-size: .87rem; color: var(--muted); } @media (min-width: 760px) { .creds__list { grid-template-columns: repeat(4, 1fr); } .cred { border-bottom: 0; padding-block: 2.1rem; } .cred:nth-child(odd) { border-right: 0; } .cred + .cred { border-left: 1px solid var(--line-soft); } } /* ------------------------------------------------------------- services -- */ .svc { border-top: 1px solid var(--line); } .svc__item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'key body' '. price'; gap: .4rem clamp(1.1rem, 3vw, 2.5rem); padding: clamp(1.8rem, 3.5vw, 2.7rem) 0; border-bottom: 1px solid var(--line); } .svc__key { grid-area: key; width: clamp(2.6rem, 6vw, 4.2rem); font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 600; font-stretch: 90%; line-height: .95; color: var(--blue-lt); } .svc__key--plus { color: var(--faint); font-weight: 300; } .svc__body { grid-area: body; max-width: 68ch; } .svc__body h3 { font-size: clamp(1.25rem, 2.4vw, 1.65rem); font-stretch: 98%; margin-bottom: .45rem; } .svc__line { color: var(--paper); font-weight: 500; margin-bottom: .5rem; } .svc__for { color: var(--muted); font-size: .95rem; } .svc__price { grid-area: price; align-self: start; justify-self: start; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 5px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } @media (min-width: 840px) { .svc__item { grid-template-columns: auto 1fr auto; grid-template-areas: 'key body price'; align-items: start; } .svc__price { justify-self: end; } } /* ---------------------------------------------------- process (pinned) -- */ .story { position: relative; } .story__stage { max-width: var(--maxw); margin-inline: auto; padding: clamp(2rem, 3.5vw, 3.25rem) var(--pad); display: grid; gap: clamp(2.2rem, 5vw, 4rem); } .story__copy { min-width: 0; } .story__live { display: none; margin-top: clamp(2rem, 4vw, 3rem); } .story__count { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-sm); margin-bottom: .8rem; } .story__title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-stretch: 98%; margin-bottom: .7rem; color: var(--paper); } .story__text { color: var(--muted); max-width: 46ch; min-height: 3.2em; } .story__nav { display: none; margin-top: 2rem; border-top: 1px solid var(--line); } .story__nav li { border-bottom: 1px solid var(--line); } .story__nav button { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 46px; padding: .55rem 0; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: .98rem; font-weight: 500; color: var(--muted); text-align: left; transition: color .22s var(--ease); } .story__nav i { font-style: normal; font-size: .7rem; letter-spacing: .1em; } .story__nav button:hover { color: var(--muted); } .story__nav li.is-on button { color: var(--paper); } .story__nav li.is-on i { color: var(--blue-lt); } .story__static { display: grid; gap: 1.6rem; margin-top: 2.2rem; } .story__static li { display: flex; gap: 1.1rem; } .story__static i { font-family: var(--mono); font-style: normal; font-size: .72rem; color: var(--blue-lt); padding-top: .45em; } .story__static h3 { font-size: 1.15rem; margin-bottom: .3rem; } .story__static p { color: var(--muted); font-size: .95rem; max-width: 52ch; } .story__scroll { display: none; } /* the estimate document */ .story__doc { display: flex; justify-content: center; } .doc { width: min(100%, 505px); background: var(--doc-bg); color: var(--doc-ink); border-radius: 10px; box-shadow: var(--doc-shadow); padding: 1.15rem 1.25rem 1.35rem; font-size: .8rem; } .doc__head { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; border-bottom: 1.5px solid var(--doc-ink); } .doc__mark { width: 22px; height: 22px; color: var(--doc-ink); } .doc__mark svg { width: 100%; height: 100%; } .doc__title { font-size: .82rem; font-weight: 700; letter-spacing: .16em; margin-right: auto; } .doc__meta { font-size: .58rem; letter-spacing: .14em; color: var(--doc-muted); } .doc__claim { display: grid; gap: .42rem; padding: .8rem 0; border-bottom: 1px solid var(--doc-hair); } .doc__field { display: flex; align-items: center; gap: .6rem; } .doc__field i { font-family: var(--mono); font-style: normal; font-size: .55rem; letter-spacing: .1em; color: var(--doc-muted); width: 6.4rem; flex: none; } .doc__field u { flex: 1; height: 6px; border-radius: 3px; background: var(--doc-bar-soft); text-decoration: none; transform-origin: left; transform: scaleX(.35); transition: transform .5s var(--ease), background .35s var(--ease); } .doc__field.is-on u { transform: scaleX(1); background: var(--doc-bar-fill); } .doc__sheet { padding-top: .75rem; display: grid; gap: .85rem; } .doc__room { font-size: .58rem; letter-spacing: .14em; color: var(--blue-deep); font-weight: 700; padding-bottom: .32rem; border-bottom: 1px solid var(--doc-hair); margin-bottom: .42rem; } .doc__line { display: flex; align-items: center; gap: .55rem; padding: .2rem 0; } .doc__code { font-size: .55rem; font-weight: 700; letter-spacing: .08em; padding: .12rem .32rem; border-radius: 3px; background: var(--doc-chip); color: var(--blue-deep); flex: none; } .doc__desc { flex: 1; height: 5px; border-radius: 3px; background: var(--doc-bar); } .doc__qty { width: 2.4rem; height: 5px; border-radius: 3px; background: var(--doc-bar-soft); flex: none; } .doc__foot { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: .75rem; border-top: 1.5px solid var(--doc-ink); } .doc__stamp { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .22rem .55rem; border: 1.5px solid var(--blue-deep); border-radius: 4px; color: var(--blue-deep); transform: rotate(-3deg); } .doc__rule { flex: 1; height: 5px; border-radius: 3px; background: var(--doc-bar); } /* phase reveal, driven by JS adding .is-on */ .doc [data-from] { opacity: 0; transform: translateY(7px); transition: opacity .42s var(--ease), transform .42s var(--ease); } .doc [data-from].is-on { opacity: 1; transform: none; } /* line items cascade rather than snapping in together */ .doc__line:nth-child(2) { transition-delay: .04s; } .doc__line:nth-child(3) { transition-delay: .09s; } .doc__line:nth-child(4) { transition-delay: .14s; } .doc__line:nth-child(5) { transition-delay: .19s; } @media (min-width: 940px) { .story__stage { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: center; } } /* Pin only where the panel actually fits. This media query is a coarse gate; the real decision is contentFits() in main.js, which measures the panel against the space under the nav and falls back to the plain list if it would clip. 640px is deliberate: a 1366x768 laptop — the most common screen this site is read on — leaves about 657px of viewport once browser chrome and the taskbar are gone, and the panel does fit there once the padding below tightens. */ @media (min-width: 940px) and (min-height: 640px) { /* lead-in: the section scrolls in for a moment before it locks, instead of grabbing the page the instant its top edge touches the nav */ .js:not(.no-pin) .story { padding-top: 22vh; } .js:not(.no-pin) .story__stage { position: sticky; top: var(--nav-h); min-height: calc(100vh - var(--nav-h)); } .js:not(.no-pin) .story__scroll { display: block; height: 220vh; } .js:not(.no-pin) .story__live { display: block; } .js:not(.no-pin) .story__nav { display: block; } .js:not(.no-pin) .story__static { display: none; } /* tighter still where headroom is scarce, so the phase list never clips */ @media (max-height: 820px) { .js:not(.no-pin) .story__stage { padding-block: 1.5rem; } .js:not(.no-pin) .story__nav button { min-height: 44px; padding-block: .35rem; } } /* A short laptop viewport needs more than the 820px step gives back. Without this the panel misses by roughly 40px and contentFits() drops to the plain list — which is what a 1366x768 screen was doing. */ @media (max-height: 719px) { .js:not(.no-pin) .story { padding-top: 14vh; } .js:not(.no-pin) .story__stage { padding-block: .75rem; } .js:not(.no-pin) .story__nav button { min-height: 38px; padding-block: .2rem; } } } /* The pinned panel has to fit the viewport, so it runs at a smaller scale than the rest of the page: a section heading sized for a full-width section is 109px of the ~550px budget on its own. */ .story .sec__h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); max-width: 18ch; } .story .eyebrow { margin-bottom: .8rem; } .story__live { margin-top: 1.6rem; } .story__count { font-size: .64rem; } .story__title { font-size: clamp(1.25rem, 2.1vw, 1.6rem); margin-bottom: .45rem; } .story__text { font-size: .97rem; } .story__nav { margin-top: 1.2rem; } .story__nav button { min-height: 40px; padding-block: .3rem; font-size: .93rem; } /* ------------------------------------------------------------ who table -- */ .tablewrap { overflow-x: auto; } .who { width: 100%; border-collapse: collapse; min-width: 520px; } .who th, .who td { text-align: left; vertical-align: top; padding: 1.1rem 1.2rem 1.1rem 0; border-bottom: 1px solid var(--line); } .who thead th { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: .8rem; border-bottom-color: var(--paper); } .who tbody th { font-weight: 500; font-size: 1rem; width: 34%; padding-right: 2rem; } .who tbody td { color: var(--muted); font-size: .95rem; } .who tbody tr:last-child th, .who tbody tr:last-child td { border-bottom: 0; } /* ---------------------------------------------------------------- steps -- */ .steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .step { padding: 1.6rem clamp(1.2rem, 2.5vw, 1.9rem); background: var(--ink); } .step i { display: block; font-family: var(--mono); font-style: normal; font-size: .7rem; letter-spacing: .14em; color: var(--blue-lt); margin-bottom: .9rem; } .step h3 { font-size: 1.16rem; margin-bottom: .4rem; } .step p { color: var(--muted); font-size: .93rem; } @media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1060px) { .steps { grid-template-columns: repeat(4, 1fr); } } /* --------------------------------------------------- tonal bands + invert -- */ /* Sections sit in a centred max-width box, so a background on .sec would be a floating rectangle. Wrap it in .band to get a full-width tone behind it. */ .band { background: var(--band-1); border-block: 1px solid var(--line-soft); } .band--deep { background: var(--band-2); } /* ------------------------------------------------------------------ faq -- */ .faq { border-top: 1px solid var(--line); max-width: 900px; } .qa { border-bottom: 1px solid var(--line); } .qa summary { display: flex; align-items: center; gap: 1rem; min-height: 60px; padding: 1rem 0; font-size: clamp(1.02rem, 1.9vw, 1.2rem); font-weight: 500; cursor: pointer; list-style: none; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: ''; flex: none; width: 11px; height: 11px; margin-left: auto; border-right: 1.6px solid var(--blue-lt); border-bottom: 1.6px solid var(--blue-lt); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); } .qa[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .qa p { padding: 0 3rem 1.4rem 0; color: var(--muted); max-width: 68ch; } /* ------------------------------------------------------------------ cta -- */ /* Full-bleed so the inverted CTA and the footer read as one dark zone closing the page, rather than a dark rectangle floating on a light one. */ .cta { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem); padding-inline: calc(var(--pad) + max(0px, (100% - var(--maxw)) / 2)); background: var(--band-2); border-block: 1px solid var(--line-soft); } .cta__field { position: absolute; inset: 0; background: radial-gradient(60% 120% at 25% 100%, var(--glow-cta), transparent 70%); pointer-events: none; } .cta > * { position: relative; } .cta__h2 { font-size: clamp(1.9rem, 4.4vw, 3.3rem); font-stretch: 96%; margin-bottom: 1.2rem; } .cta__lede { color: var(--muted); max-width: 52ch; margin-bottom: 2rem; } .cta__acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; } .cta__note { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); } /* --------------------------------------------------------------- footer -- */ .foot { background: var(--band-1); padding: clamp(3rem, 6vw, 4.5rem) 0 1.6rem; } .foot__top { padding-inline: calc(var(--pad) + max(0px, (100% - var(--maxw)) / 2)); display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-bottom: 2.6rem; border-bottom: 1px solid var(--line-soft); } .foot__lockup { width: min(360px, 82vw); height: auto; } .foot__tag { margin-top: 1.2rem; color: var(--muted); font-size: .92rem; } .foot__cols { display: grid; gap: 2.2rem; } .foot__cols h3 { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; } .foot__cols a, .foot__hours, .foot__creds { display: block; font-size: .92rem; color: var(--muted); line-height: 2; } .foot__cols a { transition: color .2s var(--ease); width: fit-content; } .foot__cols a:hover { color: var(--paper); } .foot__hours, .foot__creds { line-height: 1.85; } .foot__hours { margin-top: .6rem; color: var(--faint); } .foot__bottom { padding-inline: calc(var(--pad) + max(0px, (100% - var(--maxw)) / 2)); display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; padding-top: 1.6rem; font-size: .7rem; letter-spacing: .07em; color: var(--faint); } .foot__bottom a:hover { color: var(--muted); } @media (min-width: 780px) { .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } .foot__cols { grid-template-columns: repeat(3, 1fr); } } /* --------------------------------------------------------------- reveal -- */ .js .reveal { opacity: 0; transform: translateY(16px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } /* -------------------------------------------------------------- responsive */ @media (max-width: 900px) { .nav__links { display: none; } .burger { display: block; } .nav__end .btn span { display: none; } .nav__end .btn { padding-inline: .7rem; } .nav__end .btn__ico { width: 17px; height: 17px; } } @media (min-width: 901px) { .menu { display: none !important; } } /* ------------------------------------------------------- reduced motion -- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } .doc [data-from] { opacity: 1; transform: none; } .doc__field u { transform: scaleX(1); background: var(--doc-bar-fill); } /* the pinned story becomes a plain list — no long scroll spacer to fight */ .js .story { padding-top: 0; } .js .story__stage { position: static; min-height: 0; } .js .story__scroll { display: none; } .js .story__live, .js .story__nav { display: none; } .js .story__static { display: grid; } } /* Off-canvas holder for the SVG sprite. Was an inline style attribute, which the Content-Security-Policy blocks — style-src 'self' does not cover style="". */ .sprite { position: absolute; }