/* ========================================================================== ALOFTAURA · aloftaura.international — the house stylesheet. ONE VOICE. Intrepid, set uppercase, everywhere — the letterform aloftaura.com is built on. It is the only face this site ships: 14.5 KB, one file, one request. Cormorant Garamond and Jost are gone (they were 102 KB between them and a second and third voice the house does not need). ONE GROUND. Obsidian #08080b, cream and white for text, gold for accent — and beneath all of it a slow aurora of cyan and luxury pink, the two hues the .international build already carried, now moving. ONE LIGHT. Gold does not sit flat here: it sweeps. The `shine` device runs a highlight across a heading, a rule or a button, so the metal reads as metal rather than as a colour. No framework, no build step, no third-party request — which is what lets the .htaccess run a strict Content-Security-Policy. ========================================================================== */ /* --- The face ------------------------------------------------------------- font-display: block, not swap. Every piece of text on this site is set in Intrepid, so a swap would repaint the entire page mid-load — far more jarring than the ~80 ms this costs. The file is 14.5 KB and preloaded. */ @font-face { font-family: "Intrepid"; src: url("../fonts/intrepid.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } :root { /* Ground */ --obsidian: #08080b; --obsidian-lift: #0d0d12; --panel: #101017; /* Ink */ --white: #ffffff; --cream: #f5f3ee; --muted: rgba(245, 243, 238, .62); --faint: rgba(245, 243, 238, .38); --line: rgba(245, 243, 238, .13); --line-soft: rgba(245, 243, 238, .07); /* Gold — five stops, so a shine has somewhere to travel */ --gold: #d9b45a; --gold-lt: #f4e3a1; --gold-pale: #fff6d6; --gold-mid: #e6c266; --gold-deep: #a8842f; /* The two motion hues */ --cyan: #67e8f9; --cyan-deep: #1c545c; --pink: #f472b6; --pink-deep: #602a58; --brand: "Intrepid", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; /* Same face, but never swapped by the script-aware block below. For the few places that stay Latin in every language — the house signature. */ --brand-latin: "Intrepid", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; --luxe: .34em; --luxe-sm: .18em; --gut: clamp(20px, 5vw, 64px); --maxw: 1320px; --dock-h: 0px; --ease: cubic-bezier(.22, 1, .36, 1); color-scheme: dark; } /* --- Script-aware type ----------------------------------------------------- Intrepid is a Latin display face and the luxe tracking is a Latin device. On Devanagari it visually splits conjuncts (घराना → घ र ा न ा); on Arabic it destroys the joins; and uppercase means nothing in either. src/i18n.js sets on every change, so both stand down for the scripts they were never designed for, and a system face with the right glyphs takes over. */ :root:not([lang="en"]) { --brand: "Noto Sans", "Nirmala UI", "Kohinoor Devanagari", system-ui, sans-serif; --luxe: .06em; --luxe-sm: .03em; } :root:not([lang="en"]) body { text-transform: none !important; } :root:not([lang="en"]) * { text-transform: none !important; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* THE VOICE. Uppercase is set once, here, on the root — not sprinkled over thirty selectors — so nothing on the page can quietly opt out of it. */ body { margin: 0; background: var(--obsidian); color: var(--cream); font-family: var(--brand); font-weight: 400; font-size: clamp(13px, .36vw + 11.6px, 15px); line-height: 1.9; letter-spacing: .07em; text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; padding-bottom: var(--dock-h); } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } .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; } .skip { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-200%); background: var(--white); color: var(--obsidian); padding: 10px 18px; font-size: 11px; letter-spacing: var(--luxe-sm); transition: transform .18s var(--ease); } .skip:focus { transform: none; } /* ========================================================================== THE GOLD SHINE A highlight that travels across gold text. Two stops of pale gold moving through a gold field — background-clip:text means the letterforms are the window, so it reads as light crossing metal rather than a colour fade. ========================================================================== */ @keyframes shine { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } } .shine { background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 34%, var(--gold-pale) 46%, var(--white) 50%, var(--gold-pale) 54%, var(--gold) 66%, var(--gold-deep) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s linear infinite; } /* The same sweep on a white heading — the light is white, the field is cream, so it reads as a sheen rather than a colour change. */ .shine-w { background: linear-gradient(100deg, var(--cream) 0%, var(--cream) 38%, var(--white) 48%, var(--gold-pale) 52%, var(--cream) 62%, var(--cream) 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 9s linear infinite; } @media (prefers-reduced-motion: reduce) { .shine, .shine-w { animation: none; background-position: 50% 0; } } /* ========================================================================== Type devices ========================================================================== */ .eyebrow { font-size: clamp(9px, .26vw + 8.2px, 11px); letter-spacing: var(--luxe); color: var(--faint); margin: 0; } .eyebrow.gold { color: var(--gold); } .display { font-weight: 400; line-height: 1.14; letter-spacing: .04em; } .lede { font-size: clamp(14px, .5vw + 12.4px, 18px); line-height: 1.85; letter-spacing: .1em; color: rgba(245, 243, 238, .78); } /* The gold hairline. It breathes rather than sitting still. */ .rule { width: 88px; height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 200% 100%; animation: shine 6s linear infinite; } .rule.wide { width: min(220px, 40vw); } @media (prefers-reduced-motion: reduce) { .rule { animation: none; } } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } /* Utility modifiers — no element on this site carries a `style` attribute, which is what lets the CSP keep `style-src 'self'`. */ .eyebrow--gap { margin-top: 22px; } .display--sm { font-size: clamp(24px, 3vw, 40px); } .lede--narrow { max-width: 34ch; } /* ========================================================================== Buttons — a gold sweep crosses on hover ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: .8em; font-size: 10.5px; letter-spacing: var(--luxe-sm); padding: 15px 30px; border: 1px solid var(--line); color: var(--cream); background: transparent; transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease); } .btn:hover { border-color: var(--gold); color: var(--gold-lt); } .btn.solid { background: var(--white); color: var(--obsidian); border-color: var(--white); } .btn.solid:hover { background: var(--gold-pale); border-color: var(--gold-pale); color: var(--obsidian); } .btn.gold { border-color: rgba(217, 180, 90, .45); color: var(--gold-lt); } .btn.gold:hover { background: rgba(217, 180, 90, .1); border-color: var(--gold); } /* ========================================================================== Header ========================================================================== */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; gap: clamp(12px, 3vw, 40px); padding: 16px var(--gut); background: linear-gradient(180deg, rgba(8, 8, 11, .92), rgba(8, 8, 11, 0)); border-bottom: 1px solid transparent; transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease); } .hdr { /* Never fully transparent: over a pale photograph the nav would wash out. */ background-color: rgba(8, 8, 11, .42); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); } .hdr.is-stuck { background: rgba(8, 8, 11, .84); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-bottom-color: var(--line-soft); } .hdr__mark { flex: 0 0 auto; display: flex; align-items: center; } /* Centred on the SCREEN, not between its neighbours. `margin-inline: auto` splits the leftover space evenly, which centres the nav between the wordmark and the CTA — and since the CTA (ENG + AAC SIGNIN) is the wider of the two, that landed the row ~34px left of true centre. Taking the nav out of flow anchors it to the header, which is fixed and full-bleed, so the midpoint is the viewport's own regardless of what flanks it. The mark and the CTA then own the row alone, hence space-between below. */ .hdr__nav { display: flex; gap: clamp(14px, 2.4vw, 38px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; } .hdr { justify-content: space-between; } .hdr__nav a { font-size: 10.5px; letter-spacing: var(--luxe-sm); color: rgba(245, 243, 238, .66); padding: 8px 0; position: relative; transition: color .35s var(--ease); } .hdr__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-pale), var(--gold-deep)); transition: right .45s var(--ease); } .hdr__nav a:hover, .hdr__nav a[aria-current="page"] { color: var(--white); } .hdr__nav a:hover::after, .hdr__nav a[aria-current="page"]::after { right: 0; } .hdr__cta { flex: 0 0 auto; } .hdr__cta .btn { padding: 11px 20px; font-size: 9.5px; } /* ========================================================================== Hero — the aurora ========================================================================== */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 130px var(--gut) 104px; overflow: hidden; } /* Three colour fields — cyan, pink, gold — drifting on their own clocks. The prime-ish durations keep them from ever landing back in the same arrangement, so the ground never visibly loops. Pure CSS: no image, no canvas, nothing to download. */ .hero__aurora { position: absolute; inset: -30%; pointer-events: none; } .hero__aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; opacity: .55; } .hero__aurora i:nth-child(1) { width: 62%; height: 58%; left: 2%; top: 6%; background: radial-gradient(circle, var(--cyan-deep) 0%, rgba(28, 84, 92, 0) 68%); animation: drift-a 29s ease-in-out infinite alternate; } .hero__aurora i:nth-child(2) { width: 58%; height: 54%; right: 0%; top: 12%; background: radial-gradient(circle, var(--pink-deep) 0%, rgba(96, 42, 88, 0) 68%); animation: drift-b 37s ease-in-out infinite alternate; } .hero__aurora i:nth-child(3) { width: 70%; height: 50%; left: 14%; bottom: 0%; background: radial-gradient(circle, rgba(140, 104, 34, .85) 0%, rgba(140, 104, 34, 0) 70%); animation: drift-c 43s ease-in-out infinite alternate; } @keyframes drift-a { 0% { transform: translate3d(-6%, -3%, 0) scale(1); } 100% { transform: translate3d(10%, 8%, 0) scale(1.22); } } @keyframes drift-b { 0% { transform: translate3d(6%, 4%, 0) scale(1.12); } 100% { transform: translate3d(-9%, -6%, 0) scale(.94); } } @keyframes drift-c { 0% { transform: translate3d(0, 6%, 0) scale(.96); } 100% { transform: translate3d(-7%, -5%, 0) scale(1.18); } } /* Grain. Without it the soft fields band visibly on 8-bit panels — the one artefact that makes a dark page look cheap. */ .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); opacity: .5; mix-blend-mode: overlay; } @media (prefers-reduced-motion: reduce) { .hero__aurora i { animation: none; } } .hero__in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 30px; } .hero__lockup { width: clamp(100px, 11vw, 146px); filter: drop-shadow(0 0 34px rgba(255, 246, 214, .18)); animation: breathe 9s ease-in-out infinite; } @keyframes breathe { 0%, 100% { filter: drop-shadow(0 0 26px rgba(255, 246, 214, .14)); transform: scale(1); } 50% { filter: drop-shadow(0 0 46px rgba(255, 246, 214, .3)); transform: scale(1.025); } } @media (prefers-reduced-motion: reduce) { .hero__lockup { animation: none; } } .hero__tag { font-size: clamp(10px, .3vw + 8.9px, 12.5px); letter-spacing: var(--luxe); color: rgba(245, 243, 238, .84); } .hero .lede { max-width: 34ch; } /* ========================================================================== Sections ========================================================================== */ .sect { padding: clamp(78px, 12vh, 156px) 0; position: relative; } .sect--tight { padding-block: clamp(60px, 9vh, 112px); } .sect__head { display: grid; gap: 20px; max-width: 64ch; } .sect__head .display { font-size: clamp(26px, 3.6vw, 54px); } /* --- The value chain ------------------------------------------------------ */ .chain { margin-top: clamp(48px, 8vh, 92px); display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .chain__step { padding-block: clamp(28px, 3vw, 46px); padding-inline: clamp(20px, 3.4vw, 46px); display: grid; gap: 14px; align-content: start; position: relative; border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); transition: background-color .5s var(--ease); } .chain__step:first-child { border-left-color: transparent; } .chain__step:hover { background: var(--obsidian-lift); } .chain__step h3 { font-weight: 400; font-size: clamp(17px, 1.2vw, 22px); letter-spacing: .16em; } .chain__step p { color: var(--muted); font-size: 12.5px; line-height: 1.95; } .chain__n { font-size: 9.5px; letter-spacing: var(--luxe); color: var(--gold-deep); } /* A gold thread that draws itself along the top edge as the step enters. */ .chain__step::before { content: ""; position: absolute; inset: 0 auto auto 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-pale), var(--gold-deep)); transition: width 1.1s var(--ease); } .chain__step.is-in::before { width: 100%; } .chain__step:nth-child(2)::before { transition-delay: .12s; } .chain__step:nth-child(3)::before { transition-delay: .24s; } .chain__step:nth-child(4)::before { transition-delay: .36s; } /* --- Division panels ------------------------------------------------------ */ .div-panel { display: grid; gap: clamp(28px, 5vw, 76px); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .div-panel { grid-template-columns: 1.05fr 1fr; } .div-panel--flip .div-panel__art { order: 2; } } .div-panel__art { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0b0b0f; } .div-panel--wide .div-panel__art { aspect-ratio: 3 / 2; } .div-panel__art img { width: 100%; height: 100%; /* Contained, not cropped — a full-length figure is shown whole. */ object-fit: contain; object-position: center; } /* An inset gold frame that brightens with the panel. */ .div-panel__art::after { content: ""; position: absolute; inset: 12px; pointer-events: none; border: 1px solid rgba(217, 180, 90, .22); } /* A slow cyan→pink wash over the crop, so the photograph sits in the same light as the hero rather than looking pasted onto it. */ /* A standing cyan → pink wash over every crop, so the photographs sit in the same light as the hero instead of looking pasted onto it. It drifts with the aurora rather than reacting to a pointer. */ .div-panel__art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(125deg, rgba(103, 232, 249, .1), transparent 45%, rgba(244, 114, 182, .11)); animation: wash 26s ease-in-out infinite alternate; } @keyframes wash { from { opacity: .55; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .div-panel__art::before { animation: none; opacity: .8; } } .div-panel__inset { position: absolute; right: -14px; bottom: -22px; z-index: 2; width: clamp(96px, 13vw, 152px); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); outline: 6px solid var(--obsidian); background: var(--panel); } .div-panel__inset img { width: 100%; height: 100%; object-fit: cover; } .div-panel__body { display: grid; gap: 22px; align-content: center; } .div-panel__body .display { font-size: clamp(24px, 3vw, 44px); } .div-panel__body p { color: var(--muted); max-width: 54ch; font-size: 13px; } .stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); margin-top: 10px; } .stats div { display: grid; gap: 6px; } .stats b { font-weight: 400; font-size: clamp(19px, 1.7vw, 28px); line-height: 1; letter-spacing: .1em; } .stats span { font-size: 9.5px; letter-spacing: var(--luxe-sm); color: var(--faint); } /* --- The pull quote ------------------------------------------------------- */ .quote { position: relative; min-height: min(74svh, 660px); display: grid; place-items: center; text-align: center; /* Asymmetric padding, not a transform: the line sits above the optical centre — where a caption reads as a statement rather than as a label floating in the middle of a photograph — and the block still centres honestly at any height. */ padding: clamp(48px, 7vh, 88px) var(--gut) clamp(90px, 15vh, 180px); overflow: hidden; } .quote__art { position: absolute; inset: 0; } .quote__art img { width: 100%; height: 100%; object-fit: cover; opacity: .46; } .quote__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(103, 232, 249, .1), transparent 40%, rgba(244, 114, 182, .12)), radial-gradient(72% 62% at 50% 50%, rgba(8, 8, 11, .3), rgba(8, 8, 11, .92)); } .quote blockquote { position: relative; z-index: 1; /* ONE LINE. The house's line reads as a single breath, so the type scales with the viewport rather than wrapping: at 1440px it sets around 34px, and it keeps shrinking on narrow screens instead of breaking in two. `nowrap` is lifted only below 560px, where holding one line would make it unreadable. */ font-size: clamp(13px, 2.55vw, 40px); line-height: 1.35; letter-spacing: .06em; max-width: none; white-space: nowrap; } @media (max-width: 560px) { .quote blockquote { white-space: normal; max-width: 22ch; text-wrap: balance; font-size: clamp(17px, 5.4vw, 26px); } } /* The attribution is the horizontal wordmark, not the word. At this size the mark is the signature — set in the house's own drawing rather than in the house's font. */ .quote__sig { display: block; margin-top: 34px; font-style: normal; } .quote__sig img { width: clamp(112px, 12vw, 168px); height: auto; margin-inline: auto; opacity: .9; } /* --- The AAC strip -------------------------------------------------------- */ .aac-strip { position: relative; overflow: hidden; border-block: 1px solid var(--line-soft); background: var(--panel); } /* The same two hues, moving slowly across the band. */ .aac-strip::before { content: ""; position: absolute; inset: -50%; background: radial-gradient(38% 60% at 22% 40%, rgba(28, 84, 92, .5), transparent 70%), radial-gradient(36% 58% at 78% 60%, rgba(96, 42, 88, .42), transparent 70%), radial-gradient(50% 70% at 50% 10%, rgba(140, 104, 34, .26), transparent 72%); filter: blur(60px); animation: drift-c 34s ease-in-out infinite alternate; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .aac-strip::before { animation: none; } } .aac-strip .wrap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding-block: clamp(40px, 7vh, 72px); } .aac-strip__txt { display: grid; gap: 12px; } .aac-strip__txt h2 { font-weight: 400; font-size: clamp(19px, 2vw, 30px); letter-spacing: .1em; } .aac-strip__txt p { color: var(--muted); font-size: 12.5px; max-width: 48ch; } /* ========================================================================== Footer ========================================================================== */ /* ONE FOOTER, EVERYWHERE. The home page's footer is the reference — it is the one a visitor meets first — and these three numbers are what the interior pages were off by: 54/44 padding against its even 64/64, a 9.5px signature against its 12px, and a 150px mark against its 168px. Measured, not guessed: the two footers now come out the same height on the same viewport. */ .ftr { border-top: 1px solid var(--line-soft); padding: 64px 0; } /* column-gap only. The contact band is a full-width flex item, so a ROW gap here stacked on top of the 27px the band already carries beneath itself and pushed this footer 20px taller than the home one. */ .ftr .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; row-gap: 0; } .ftr__mark img { width: 168px; opacity: .82; transition: opacity .4s var(--ease); } .ftr__mark:hover img { opacity: 1; } /* The signature line under the mark. It is part of the lockup, not copy — it stays in English and in Intrepid in all 46 languages, so it is marked data-no-i18n in the markup and pinned to the Latin face and Latin tracking here, past the script-aware swap. */ /* `:root` is carried here only to out-specify the script-aware `:root:not([lang="en"]) *` stand-down above — the signature is Latin in all 46 languages, so it keeps the Latin casing too. */ :root .ftr__mid { font-family: var(--brand-latin); text-transform: uppercase !important; font-size: 12px; letter-spacing: .34em; color: var(--faint); } .ftr__links { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 28px); align-items: center; } .ftr__links a, .ftr__links span { font-size: 12px; letter-spacing: var(--luxe-sm); color: var(--faint); transition: color .35s var(--ease); } .ftr__links a:hover { color: var(--gold-lt); } /* ========================================================================== The dock — small screens ========================================================================== */ .dock { position: fixed; inset: auto 0 0 0; z-index: 100; display: none; background: rgba(8, 8, 11, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line-soft); padding-bottom: env(safe-area-inset-bottom, 0); } .dock ul { display: flex; } .dock li { flex: 1 1 0; } .dock a { display: grid; justify-items: center; gap: 6px; padding: 11px 4px 12px; font-size: 8px; letter-spacing: .12em; color: var(--faint); transition: color .3s var(--ease); } .dock a[aria-current="page"], .dock a:hover { color: var(--gold-lt); } .dock svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.2; } @media (max-width: 760px) { :root { --dock-h: 64px; } .hdr__nav { display: none; } .hdr { justify-content: space-between; } .dock { display: block; } .div-panel__inset { right: 8px; bottom: -18px; } /* THE FOOTER ON A PHONE. The wrap is one flex row on a desktop and three stacked rows here, so the row-gap of 0 that makes the desktop footer match the home page's exactly collapses those three rows into a single crammed block — mark, signature and links touching, with the AAC link and the copyright reading as one accidental sentence. The gap comes back the moment the row wraps. Centred, not left-aligned: with the contact form's fields running the full width above it, a left-hugging lockup reads as fallen over rather than placed. And a hairline separates the signature band from the form, which is the job the horizontal distance does on a wide screen. */ .ftr { padding: 44px 0 36px; } .ftr .wrap { row-gap: 22px; justify-content: center; text-align: center; } .ftr__contact { width: 100%; } .ftr__mark { order: 1; } .ftr__mid { order: 2; width: 100%; } .ftr__links { order: 3; width: 100%; justify-content: center; gap: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); } } /* ========================================================================== Reveal on enter — staggered. Elements are visible by default and only hidden once JS confirms it will reveal them; a page whose content depends on script running is a page that is blank when it doesn't. ========================================================================== */ .js .reveal { opacity: 0; transform: translateY(24px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* --- Interior pages -------------------------------------------------------- */ .page-head { padding: calc(100px + clamp(44px, 8vh, 100px)) 0 clamp(40px, 6vh, 68px); border-bottom: 1px solid var(--line-soft); position: relative; overflow: hidden; } .page-head::before { content: ""; position: absolute; inset: -60% -20% auto -20%; height: 220%; background: radial-gradient(40% 55% at 18% 30%, rgba(28, 84, 92, .38), transparent 70%), radial-gradient(38% 52% at 82% 46%, rgba(96, 42, 88, .3), transparent 70%); filter: blur(70px); pointer-events: none; animation: drift-a 33s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .page-head::before { animation: none; } } .page-head .wrap { position: relative; z-index: 1; } .page-head .display { font-size: clamp(28px, 4.4vw, 62px); margin-top: 16px; } .page-head .lede { margin-top: 22px; max-width: 46ch; } .prose { max-width: 70ch; display: grid; gap: 22px; } .prose p { color: rgba(245, 243, 238, .74); font-size: 12.5px; } .prose h2 { font-weight: 400; font-size: clamp(17px, 1.8vw, 26px); letter-spacing: .12em; margin-top: 22px; } .prose h3 { font-size: 10px; letter-spacing: var(--luxe); color: var(--gold); margin-top: 18px; } .prose ul { display: grid; gap: 12px; } .prose li { color: rgba(245, 243, 238, .74); padding-left: 22px; position: relative; font-size: 12.5px; } .prose li::before { content: ""; position: absolute; left: 0; top: .92em; width: 9px; height: 1px; background: var(--gold-deep); } .prose a { color: var(--gold-lt); border-bottom: 1px solid rgba(244, 227, 161, .35); transition: border-color .35s var(--ease), color .35s var(--ease); } .prose a:hover { color: var(--gold-pale); border-bottom-color: var(--gold-pale); } /* ========================================================================== FULL-BLEED RULES The section hairlines — under the header, under the page head, above and below the AAC strip, above the footer — already run the width of the screen, because those elements are sections. The ledger grids and the contact band are not: they live inside `.wrap`, so their rules stopped at the gutter and the page read as two different systems, some lines touching the screen and some not. `calc(50% - 50vw)` is the width from the element's own left edge back to the viewport's, whatever the container is doing — so the grid escapes both the gutter and the 1440 cap without either being hard-coded. `overflow-x: clip` on the root is the companion to it: `vw` counts the classic scrollbar, which would otherwise put a few pixels of the grid past the right edge and produce a horizontal scrollbar. `clip` removes the overflow without making a scroll container, so nothing inside starts scrolling sideways instead. ========================================================================== */ html { overflow-x: clip; } .facts, .chain, .ftr__contact { margin-inline: calc(50% - 50vw); } /* The grids get NO padding of their own: padding would inset the tracks, and then each cell's own bottom and left rules would stop at the gutter again while the container's top rule ran on to the screen — the very mismatch this is meant to remove. The breathing room moves into the cells instead (see the padding on `.facts > div` and `.chain__step` below), so every line reaches the edge and the text still sits off it. The contact band is a flex row, not a grid — its rule is drawn on the element itself, so padding here is safe and keeps the form on its measure. */ .ftr__contact { padding-inline: var(--gut); } /* The facts ledger. Rules are drawn ON the cells, not as a coloured gap showing through — the gap trick leaves a solid orphan block wherever the item count is not a multiple of the column count. */ .facts { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: clamp(34px, 5vh, 58px); border-top: 1px solid var(--line-soft); } .facts > div { padding-block: 28px; padding-inline: clamp(20px, 3.4vw, 46px); display: grid; gap: 10px; border-bottom: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); transition: background-color .5s var(--ease); } .facts > div:first-child { border-left-color: transparent; } .facts > div:hover { background: var(--obsidian-lift); } .facts b { font-weight: 400; font-size: 19px; line-height: 1.2; letter-spacing: .12em; } .facts span { font-size: 9.5px; letter-spacing: var(--luxe-sm); color: var(--faint); } .facts p { color: var(--muted); font-size: 12px; } /* ========================================================================== THE LANGUAGE PICKER src/i18n.js injects its own stylesheet at runtime, so its rules land AFTER this file and win at equal specificity. Every selector here is therefore one step more specific — `.ftr__links .i18n-btn` beats `.i18n-btn` — which is why none of this needs !important. The button is styled to be indistinguishable from the links beside it: same size, same tracking, same colour, same gold on hover. It was arriving as a bordered pill with a globe, which read as a widget dropped into a row of words. The chrome the picker needs (the panel, the search, the rows) keeps its shape but takes the house palette. ========================================================================== */ .ftr__links .i18n-wrap { display: inline-flex; } .ftr__links .i18n-btn { padding: 0; border: 0; border-radius: 0; background: none; font-size: 9.5px; line-height: inherit; letter-spacing: var(--luxe-sm); color: var(--faint); transition: color .35s var(--ease); } .ftr__links .i18n-btn:hover { border-color: transparent; color: var(--gold-lt); } /* The globe is the one piece of decoration the row does not have. */ .ftr__links .i18n-btn .i18n-globe { display: none; } .ftr__links .i18n-btn .i18n-code { font-weight: 400; letter-spacing: var(--luxe-sm); } /* The panel is portalled onto , so it is reached from there. */ body .i18n-panel { border-radius: 0; border-color: var(--line); background: rgba(12, 12, 16, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--cream); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } body .i18n-search { border-radius: 0; border-color: var(--line); background: rgba(255, 255, 255, .04); color: var(--cream); text-transform: none; letter-spacing: .04em; } body .i18n-search:focus { border-color: var(--gold); } body .i18n-group-h { color: var(--faint); letter-spacing: var(--luxe-sm); } body .i18n-opt { border-radius: 0; } body .i18n-opt:hover { background: rgba(245, 243, 238, .07); } body .i18n-opt.active { box-shadow: inset 0 0 0 1px var(--gold); } body .i18n-code3 { border-radius: 0; color: var(--gold); background: rgba(217, 180, 90, .12); font-weight: 400; letter-spacing: .08em; } body .i18n-opt.active .i18n-code3 { color: var(--obsidian); background: var(--gold); } /* A language's own name is never uppercased — Devanagari and Arabic have no case, and forcing it on the Latin ones would make the list unreadable. */ body .i18n-native, body .i18n-en { text-transform: none; letter-spacing: .02em; } body .i18n-native { font-weight: 400; } body .i18n-en { color: var(--faint); } /* ========================================================================== THE FOOTER CONTACT FORM Two fields and a button. Same hairline-and-gold vocabulary as the rest of the house, and the same Intrepid uppercase — except the two inputs, where re-casing what someone is typing would change their own words back at them. ========================================================================== */ .aa-contact { display: grid; gap: 12px; width: min(340px, 100%); } .aa-contact__title { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #d9b45a; margin: 0 0 2px; } .aa-contact__field { display: grid; gap: 6px; } .aa-contact__field > span { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 243, 238, .38); } .aa-contact input[type="email"], .aa-contact textarea { width: 100%; padding: 11px 13px; border: 1px solid rgba(245, 243, 238, .16); border-radius: 0; background: rgba(255, 255, 255, .03); color: #f5f3ee; font-family: inherit; font-size: 13px; letter-spacing: .02em; text-transform: none; transition: border-color .3s cubic-bezier(.22,1,.36,1), background-color .3s cubic-bezier(.22,1,.36,1); } .aa-contact input[type="email"]::placeholder, .aa-contact textarea::placeholder { color: rgba(245, 243, 238, .28); text-transform: none; } .aa-contact input[type="email"]:focus, .aa-contact textarea:focus { outline: none; border-color: #d9b45a; background: rgba(255, 255, 255, .05); } .aa-contact textarea { resize: vertical; min-height: 76px; line-height: 1.7; } .aa-contact__send { justify-self: start; padding: 12px 26px; border: 1px solid rgba(217, 180, 90, .4); background: transparent; color: #f4e3a1; font-family: inherit; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, color .3s, background-color .3s, opacity .3s; } .aa-contact__send:hover:not(:disabled) { border-color: #d9b45a; background: rgba(217, 180, 90, .09); color: #fff6d6; } .aa-contact__send:disabled { opacity: .5; cursor: not-allowed; } .aa-contact__msg { margin: 0; font-size: 10.5px; letter-spacing: .08em; line-height: 1.7; min-height: 1.2em; color: rgba(245,243,238,.55); } .aa-contact__msg.is-ok { color: #9fdcbc; } .aa-contact__msg.is-bad { color: #ffb99e; } /* The honeypot. Removed from sight, from the tab order and from the accessibility tree — a person cannot reach it by any route, so anything in it was typed by a script. Never `display:none`: some bots skip those. */ .aa-contact__hp { /* The classic honeypot trick is left:-9999px — but that is 10,000px of real scrollable area, and the moment the document flips to RTL (Arabic, Farsi, Hebrew, Kashmiri, Sindhi, Urdu) the browser counts it and the whole page scrolls sideways. The standard visually-hidden clip does the same job in one pixel. Deliberately NOT display:none: some bots skip those. */ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- Contact form: horizontal --------------------------------------------- Overrides the stacked default. `align-items: end` lines the button up with the bottom of the fields rather than their labels, which is what makes a three-column form read as one row instead of three. */ .aa-contact { width: 100%; max-width: 860px; grid-template-columns: minmax(190px, 1fr) minmax(240px, 1.7fr) auto; align-items: end; gap: 14px; } .aa-contact__title { grid-column: 1 / -1; text-align: center; } .aa-contact__msg { grid-column: 1 / -1; text-align: center; } .aa-contact textarea { min-height: 0; height: 42px; resize: none; padding-top: 12px; transition: height .35s cubic-bezier(.22,1,.36,1), border-color .3s, background-color .3s; } /* It grows only once someone is actually writing in it. */ .aa-contact textarea:focus, .aa-contact textarea:not(:placeholder-shown) { height: 96px; resize: vertical; } .aa-contact__send { align-self: end; height: 42px; padding-block: 0; } @media (max-width: 820px) { .aa-contact { grid-template-columns: 1fr; align-items: stretch; } .aa-contact__title, .aa-contact__msg { text-align: left; } .aa-contact textarea { height: 84px; resize: vertical; } .aa-contact__send { justify-self: start; } } /* --- The division slideshows ---------------------------------------------- Every frame is stacked in the same box and only opacity moves, so the browser can keep the whole cross-fade on the compositor — no layout, no paint, no jank on a phone. The first frame is the image the page shipped with, so with scripting off nothing changes. */ .aa-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); will-change: opacity; } .aa-slide.is-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .aa-slide { transition: none; } } /* --- Header: mark + wordmark, and the language control --------------------- Matched to the home page so moving between pages does not move the furniture. The mount is more specific than i18n.js's own injected rules, which land after this file — `.hdr__lang .i18n-btn` beats `.i18n-btn`. */ .hdr__mark { display: flex; align-items: center; gap: 12px; } .hdr__mark img.hdr__word { width: auto; height: 19px; opacity: .92; } @media (max-width: 560px) { .hdr__word { display: none; } } .hdr__cta { display: flex; align-items: center; gap: 10px; } .hdr__lang { display: inline-flex; align-items: center; } .hdr__lang .i18n-wrap { display: inline-flex; } .hdr__lang .i18n-btn { padding: 11px 16px; border-radius: 0; border: 1px solid rgba(217, 180, 90, .45); background: transparent; color: var(--gold-lt); font-family: var(--brand); font-size: 9.5px; line-height: 1.2; letter-spacing: var(--luxe-sm); text-transform: uppercase; transition: border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease); } .hdr__lang .i18n-btn:hover { border-color: var(--gold); color: var(--gold-pale); background: rgba(217, 180, 90, .1); } /* Only the code — the globe and the caret are chrome no other word in the row has. i18n.js builds them as the button's first and last children. */ .hdr__lang .i18n-btn .i18n-globe, .hdr__lang .i18n-btn > span:last-child:not(.i18n-code) { display: none; } /* The footer's contact band — full width above the footer line, exactly as on the home page. */ .ftr__contact { flex: 1 0 100%; display: flex; justify-content: center; padding-bottom: clamp(26px, 4vh, 44px); margin-bottom: clamp(22px, 3vh, 36px); border-bottom: 1px solid var(--line-soft); } .ftr__mark img { width: 150px; } /* ========================================================================== HEADER PARITY Measured against the home page and matched value for value, so moving between pages does not move the furniture by a pixel: header 74px tall, 20px/40px padding wordmark 150 x 19 nav 12px ENG 10px, 9/16 padding, gold hairline at .4 alpha AAC SIGNIN 10.4px, 3.64px tracking, 8px gap, 8/16 padding Those numbers come from the export's own Tailwind utilities — this block is simply the same design expressed in one place instead of thirty. ========================================================================== */ .hdr { padding: 20px 40px; gap: 0; } .hdr.is-stuck { padding: 20px 40px; } @media (max-width: 760px) { .hdr, .hdr.is-stuck { padding: 16px 24px; } } .hdr__mark img.hdr__word { width: 150px; height: 19px; opacity: 1; } /* Matched to the home page's nav exactly: 40px between links and the wide tracking, not the small one — the interior pages were sitting at 34px/.18em, which made the same three words 63px narrower and visibly tighter when you moved between the two. `var(--luxe)` rather than a literal .35em so the script-aware block above still stands the tracking down for Devanagari and the Arabic-script languages, where it breaks the joins. */ .hdr__nav { gap: 40px; } .hdr__nav a { font-size: 12px; letter-spacing: var(--luxe); color: rgba(255, 255, 255, .6); } /* The home page's nav is Tailwind's tracking-luxe — .35em, one hundredth wider than the house variable. Scoped to English so the stand-down above still applies everywhere else, and the two navs measure the same to the pixel. */ :root[lang="en"] .hdr__nav a { letter-spacing: .35em; } .hdr__cta { gap: 10px; } .hdr__lang .i18n-btn { font-size: 10px; padding: 9px 16px; border-color: rgba(217, 180, 90, .4); letter-spacing: .18em !important; } .hdr__aac.btn.gold { display: inline-flex; align-items: center; gap: 8px; font-size: 10.4px; letter-spacing: 3.64px; padding: 8px 16px; border-color: rgba(217, 180, 90, .4); } .hdr__aac svg { width: 14px; height: 14px; flex: none; } /* The two controls are pinned to ONE height — 34px, the taller of the pair — so the outlines beside each other are the same box and the header still lands at 74px. Padding alone could not do it: the button's line-height was adding the difference. The inline padding matches too; only the type inside differs, which is the point (a three-letter code is not a button label). */ .hdr__aac.btn.gold, .hdr__lang .i18n-btn { height: 34px; line-height: 1; padding-block: 0; padding-inline: 16px; display: inline-flex; align-items: center; } /* The nav links were the tallest thing in the row — 12px type on the body's 1.9 line-height plus 8px padding came to 40px, which is what was pushing the header to 80. Reined in so the 34px AAC control sets the height, as it does on the home page. */ .hdr__nav a { padding: 6px 0; line-height: 1; } /* ========================================================================== SCALE PARITY WITH THE HOME PAGE Following a link from the home page into an interior page was visibly re-scaling everything: body copy landed at 11px against the home page's 16.5px, headings at 26–43px against 48px, and the content column at 1320/64px against 1440/40px. Nothing was broken — the two surfaces simply had two type scales — but the jump reads as the page resizing itself. These are the home page's own measured values, applied here so the two surfaces are one document. They come last in the file so they win over the earlier, smaller scale without having to edit thirty rules. ========================================================================== */ :root { --maxw: 1440px; /* the export's max-w-[90rem] */ --gut: clamp(20px, 3vw, 40px);/* its px-6 md:px-10 */ } body { font-size: 16px; line-height: 1.5; letter-spacing: .06em; } /* Display headings: the export's text-4xl md:text-5xl. */ .page-head .display { font-size: clamp(30px, 3.4vw, 48px); } .sect__head .display, .div-panel__body .display { font-size: clamp(28px, 3.2vw, 48px); } .prose h2 { font-size: clamp(20px, 1.9vw, 28px); } /* Body copy: text-sm md:text-base, which is what the home page's paragraphs actually compute to. */ .lede { font-size: clamp(14px, .8vw + 8px, 16.5px); line-height: 1.6; } .div-panel__body p, .prose p, .prose li, .chain__step p, .facts p, .aac-strip__txt p { /* 16px / 24px — the home page's exact measure, so following a link does not re-set the type. */ font-size: 16px; line-height: 1.5; letter-spacing: .04em; } /* The small caps stay small — they are labels, not copy. */ .eyebrow, .stats span, .facts span, .chain__n, .ftr__mid, .ftr__links a, .ftr__links span { font-size: 11px; } .stats b { font-size: clamp(22px, 2vw, 30px); } .facts b { font-size: 22px; } .chain__step h3 { font-size: clamp(18px, 1.4vw, 24px); } .quote blockquote { font-size: clamp(13px, 2.55vw, 40px); } /* ========================================================================== MOBILE The desktop design is small, widely-tracked uppercase — which is the house voice and stays. On a phone that same scale stops being restraint and starts being unreadable, and 34px controls are below every published minimum for a fingertip. This block does three things and nothing else: puts a floor under the type, gives every control a 44px touch area, and puts the wordmark back in the header where a phone had been left with two buttons and empty space. Scoped to `pointer: coarse` where it is about fingers and to width where it is about reading distance, so a small laptop window is untouched. ========================================================================== */ @media (max-width: 760px) { /* --- The wordmark, restored ------------------------------------------- It was hidden under 560px, which left the header as two right-aligned buttons floating over nothing — the one element that says whose site this is, gone on the devices most people arrive on. It fits comfortably: the nav is already hidden at this width, so the row is mark + ENG + SIGNIN. */ .hdr__word { display: block !important; } .hdr__mark img.hdr__word { width: clamp(104px, 30vw, 132px); height: auto; } /* --- A floor under the type -------------------------------------------- */ .eyebrow { font-size: 11px; } .aa-contact__title { font-size: 11px; letter-spacing: .24em; } .aa-contact__field > span { font-size: 11px; letter-spacing: .16em; } .stats span, .facts span, .chain__n { font-size: 11px; } .ftr__links a, .ftr__links span, .ftr__mid { font-size: 11px; } .dock a { font-size: 10px; letter-spacing: .1em; } .skip { font-size: 12px; } } @media (pointer: coarse) { /* --- 44px of finger, without changing what the eye sees ----------------- The visible box stays at its designed height; the touch area is grown underneath it with a pseudo-element, so ENG and AAC SIGNIN still read as the same pair of 34px outlines while both answer a thumb. */ .hdr__lang .i18n-btn, .hdr__aac.btn.gold, .ftr__links a, .ftr__mark, .dock a { position: relative; } .hdr__lang .i18n-btn::after, .hdr__aac.btn.gold::after, .ftr__links a::after, .ftr__mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* Fields and the send button are typed into, not just tapped — those get real height rather than an invisible extension. */ .aa-contact input[type="email"], .aa-contact textarea, .aa-contact__send { min-height: 46px; } .aa-contact textarea { min-height: 92px; } .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .hdr__lang .i18n-btn, .hdr__aac.btn.gold { min-height: 0; } /* the pair keeps its 34px */ } @media (pointer: coarse) { /* The wordmark links — header and footer — are 15-19px tall by design; the same invisible extension gives them a thumb without moving the image. */ .hdr__mark { position: relative; } .hdr__mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } } /* The same two guards as spa.css — see the note there. */ :root:not([lang="en"]) :is(h1, h2, h3, h4, p, li, blockquote, .display, .lede) { overflow-wrap: break-word; hyphens: auto; }