/* ═══════════════════════════════════════════════════════════════ BlueCapital — Company Building Platform Brand Guidelines v1.0 (2026). Zero JS dependencies. The premium motion here is CSS scroll-driven animation (animation-timeline: view() / scroll()), scrubbed to the scrollbar the way a Lenis + GSAP ScrollTrigger build would be, at zero payload. It is declared only inside @supports, so a browser without it simply renders the finished page — nothing is ever hidden by default and no JavaScript touches the reveals at all. Three voices, per the reference teardown: display Safiro Medium (licensed webfont) — headlines only text Inter 300/500 — everything readable meta system monospace (0 bytes) — indices, figures, labels Gold is confined to navy grounds and hairlines: it measures 1.92:1 on white and fails WCAG for text at any size. ═══════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Safiro'; src:url('../assets/fonts/safiro-medium-webfont.woff2') format('woff2'), url('../assets/fonts/safiro-medium-webfont.woff') format('woff'); font-weight:500;font-style:normal;font-display:swap; } :root{ /* ══ DESIGN TOKENS ═══════════════════════════════════════════ Named to Tailwind v4's theme namespaces, so migrating is mechanical rather than a rewrite: rename this `:root` to `@theme`, add `@import "tailwindcss";` above it, and Tailwind generates `bg-navy`, `text-ink-2`, `p-lg`, `font-display`, `ease-brand`, `max-w-shell` and so on from these very names. Nothing below this block would need to change to start using utilities alongside the existing classes. See TAILWIND.md. ─────────────────────────────────────────────────────────── */ /* --color-* → bg-* / text-* / border-* / fill-* Brand palette, exact Guidelines v1.0 values. `paper` and `mist` are named to avoid colliding with Tailwind's own white/gray. */ --color-navy:#202748; --color-blue:#365398; --color-mid:#527195; --color-pale:#d9ebfc; --color-paper:#fcfcfc; --color-mist:#f0f1f1; --color-gold:#c6b799; /* neutrals, biased toward the navy so they read as chosen */ --color-ink:#181d33; --color-ink-2:#4b5370; --color-ink-3:#7b8299; --color-line:#dde2ec; --color-line-2:#c4cbdb; --color-on-navy:#aab4cd; /* --font-* → font-display / font-sans / font-mono */ --font-display:'Safiro','Inter',-apple-system,BlinkMacSystemFont,sans-serif; --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:ui-monospace,'SF Mono',SFMono-Regular,'Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace; /* --spacing-* → p-* / m-* / gap-* Deliberately named, not numeric: Tailwind's numeric scale means something else, so `p-lg` can't be confused with `p-8`. Tightened one full step from the original spacious scale — the page was spending 1,440px on section padding alone and reading as a set of islands rather than a continuous document. Still a generous scale; the ratios between steps are unchanged. */ --spacing-2xs:8px; --spacing-xs:15px; --spacing-sm:22px; --spacing-md:30px; --spacing-lg:44px; --spacing-xl:64px; --spacing-2xl:88px; --spacing-3xl:112px; --spacing-gutter:clamp(20px,4.4vw,64px); /* --container-* → max-w-shell */ --container-shell:1360px; /* Diagonal device lean, measured off the official guideline artwork rather than estimated. See the .dev block. */ --dev-lean:-18.77deg; --dev-lean-base:-18.32deg; /* The brand gradient. Exported from the guidelines it carries ~48 interpolation stops with a non-linear midpoint, so a plain three-stop ramp bends differently through the middle. These eight are sampled off that curve; endpoints and the brand blue land where the guidelines specify (#d9ebfc → #365398 → #202748). */ --grad-brand:linear-gradient(90deg, #d8ebfb 0%, #a8bede 14%, #778fc0 30%, #4f6aa7 44%, #355195 57%, #26335e 79%, #202748 92%, #1f2648 100%); /* Header height. Referenced by the mobile menu's offset, the title card's top padding and the sticky chapter index, so it lives here rather than being repeated as a literal in four places. */ --hdr-h:84px; /* --ease-* → ease-brand · --duration-* → duration-fast|base|slow Premium motion is slower than UI motion. */ --ease-brand:cubic-bezier(.22,.61,.36,1); --duration-fast:200ms; --duration-base:420ms; --duration-slow:680ms; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--color-paper);color:var(--color-ink); font-family:var(--font-sans);font-weight:300; /* Raised twice now: 15.5-17.5 → 16.5-18.5 → 17.5-20px. Leading eased from 1.70 to 1.65 as the size grew, since larger text needs proportionally less of it. */ font-size:clamp(17.5px,1.15vw,20px);line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;line-height:1; letter-spacing:-.03em;text-wrap:balance} /* sub-headings are multi-word: line-height 1 is too tight for them */ h3{line-height:1.15} p{margin:0} ul,ol,dl,dd{margin:0;padding:0;list-style:none} svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} em{font-style:normal} b{font-weight:500} :focus-visible{outline:2px solid var(--color-blue);outline-offset:3px;border-radius:2px} .ch-navy :focus-visible,.title :focus-visible{outline-color:var(--color-pale)} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--color-navy); color:#fff;padding:14px 20px;font-size:14px;font-weight:500} .skip:focus{left:8px;top:8px} /* ── i18n: both languages ship in the HTML. Spanish is hidden until the root attribute flips, so no-JS visitors get English and both are crawlable. These selectors MUST be scoped inside body: itself carries a lang attribute, and an unscoped [lang="es"] would match the root element and hide the entire document. ───────────────────────── */ body [lang="es"]{display:none} html[data-lang="es"] body [lang="es"]{display:inline} html[data-lang="es"] body [lang="en"]{display:none} /* ── Scroll progress rail ─────────────────────────────────────── */ .prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:200; background:rgba(32,39,72,.08);pointer-events:none} /* The rail carries the brand gradient itself, so the page's one piece of persistent chrome is literally made of the brand asset. */ .prog i{display:block;height:100%;width:100%;background:var(--grad-brand); transform-origin:0 50%;transform:scaleX(0)} @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .prog i{animation:pgrow linear both;animation-timeline:scroll(root block)} } } @keyframes pgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ── Header ───────────────────────────────────────────────────── */ .hdr{position:fixed;top:0;left:0;right:0;z-index:150; display:flex;align-items:center;gap:var(--spacing-md); height:var(--hdr-h);padding:0 var(--spacing-gutter); transition:background var(--duration-base) var(--ease-brand),border-color var(--duration-base) var(--ease-brand); border-bottom:1px solid transparent} .hdr-mark{flex:none;display:flex;align-items:center;min-height:48px} .wm{width:168px;height:auto} .wm-blue{fill:var(--color-pale);transition:fill var(--duration-base) var(--ease-brand)} .wm-cap{fill:#fff;transition:fill var(--duration-base) var(--ease-brand)} /* Opaque by default. The blur is a desktop nicety and is opt-in below: backdrop-filter forces a full-surface composite every frame, which is the most expensive thing on this page for a mid-range phone. */ .hdr.stuck{background:var(--color-paper);border-bottom-color:var(--color-line)} .hdr.stuck .wm-blue{fill:var(--color-blue)} .hdr.stuck .wm-cap{fill:var(--color-navy)} /* chapter index — the dossier device, in mono */ .hdr-idx{display:flex;gap:var(--spacing-sm);margin-left:auto} .hdr-idx a{display:inline-flex;align-items:center;gap:6px; min-height:48px;font-family:var(--font-mono);font-size:13px; letter-spacing:.02em;color:rgba(255,255,255,.72); transition:color var(--duration-fast) var(--ease-brand)} .hdr-idx a em{color:var(--color-gold);font-size:11px} .hdr.stuck .hdr-idx a{color:var(--color-ink-2)} .hdr.stuck .hdr-idx a em{color:var(--color-mid)} .hdr-idx a[aria-current="true"]{color:#fff} .hdr.stuck .hdr-idx a[aria-current="true"]{color:var(--color-navy)} .hdr-end{display:flex;align-items:center;gap:var(--spacing-xs);flex:none} .lang{display:inline-flex;align-items:center;justify-content:center; min-width:52px;min-height:48px;background:none;border:0;cursor:pointer; font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em; color:rgba(255,255,255,.72);transition:color var(--duration-fast) var(--ease-brand)} .hdr.stuck .lang{color:var(--color-ink-2)} .lang .off{display:none} html[data-lang="es"] .lang .on{display:none} html[data-lang="es"] .lang .off{display:inline} .cta-sm{display:inline-flex;align-items:center;min-height:48px;padding:0 26px; border:1px solid rgba(217,235,252,.42);border-radius:999px; font-family:var(--font-sans);font-size:12px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:#fff; transition:background var(--duration-fast) var(--ease-brand),border-color var(--duration-fast) var(--ease-brand), color var(--duration-fast) var(--ease-brand)} .hdr.stuck .cta-sm{border-color:var(--color-blue);color:var(--color-blue)} .burger{display:none;width:48px;height:48px;background:none;border:0; cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px} .burger span{display:block;width:24px;height:1.5px;background:#fff; transition:transform var(--duration-base) var(--ease-brand)} .hdr.stuck .burger span{background:var(--color-navy)} .burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)} .mnav{position:fixed;top:var(--hdr-h);left:0;right:0;z-index:149; background:var(--color-navy);padding:var(--spacing-xs) var(--spacing-gutter) var(--spacing-md); border-top:1px solid rgba(217,235,252,.14); display:flex;flex-direction:column} .mnav a{display:flex;gap:12px;align-items:baseline;color:#fff;font-size:17px; padding:15px 0;border-bottom:1px solid rgba(217,235,252,.1)} .mnav a em{font-family:var(--font-mono);font-size:11px;color:var(--color-gold)} .mnav a:last-child{border-bottom:0} .mnav-cta{color:var(--color-pale)!important;font-weight:500} [hidden]{display:none!important} /* ── Title card ───────────────────────────────────────────────── */ /* 88svh rather than a full viewport: the next chapter peeks above the fold, which both signals there is more and stops the hero reading as a separate page. */ .title{position:relative;min-height:88svh;background:var(--color-navy);color:#fff; display:flex;flex-direction:column;justify-content:center; padding:calc(var(--hdr-h) + var(--spacing-lg)) var(--spacing-gutter) 0;overflow:hidden;isolation:isolate} .title-grad{position:absolute;inset:0;z-index:-2; background: radial-gradient(115% 85% at 84% 6%,rgba(54,83,152,.9) 0%,rgba(32,39,72,0) 60%), radial-gradient(80% 70% at 4% 96%,rgba(82,113,149,.42) 0%,rgba(32,39,72,0) 58%)} .title::after{content:"";position:absolute;inset:-7% 0;z-index:-1; background:url('../assets/img/pattern.svg') repeat;background-size:196px auto; opacity:.5; /* soft-light lets the pattern read differently over the gradient's light and dark ends instead of sitting on top at one flat opacity */ mix-blend-mode:soft-light; mask-image:linear-gradient(102deg,#000 0%,transparent 54%); -webkit-mask-image:linear-gradient(102deg,#000 0%,transparent 54%)} /* Angles measured off the official artwork (BrandGuidelines SVG, where 1 unit = 1pt). On all nine divider pages the slash runs 150.793pt across 443.63pt — 18.77° off vertical — and the base block is cut at 50.224 over 151.646, or 18.32°. This build previously used a guessed 24°, which reads noticeably steeper than the brand's. Each element now carries its own true angle. */ .dev{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1} .dev i{position:absolute;display:block;background:var(--color-blue)} /* Hero: the official BlueCapital mark (assets/img/hero-device.svg), inlined so it can take the brand blue token and stay vector-sharp at any DPR. The mark is anchored, not scaled. The is the animation hook and the height reference: top:-14% height:88% is the slash's vertical span, exactly where it has always sat. The svg then derives its own width from that height (135.01% of it, at the artwork's own 94.82:172.91 ratio), so the artwork is never stretched, squashed or re-scaled to suit the frame. right:0 on both puts the mark's trailing edge on the viewport's trailing edge — the composition reaches the edge by position rather than by being grown until it overflows, so nothing is clipped off the right. */ .title .dev i{top:-14%;right:0;width:15%;height:88%;background:none;opacity:.42} .title .dev i>svg{position:absolute;top:0;right:0;width:auto;height:135.01%; max-width:none;aspect-ratio:94.82/172.91;fill:var(--color-blue)} .dev-3 i{top:-24%;left:-9%;width:12%;height:82%; transform:skewX(var(--dev-lean));opacity:.2} .dev-6 i:nth-child(1){top:-32%;right:7%;width:10%;height:92%; transform:skewX(var(--dev-lean));opacity:.18} .dev-6 i:nth-child(2){bottom:-44%;right:-5%;width:22%;height:62%; transform:skewX(var(--dev-lean-base));opacity:.14} .title-in{position:relative;max-width:var(--container-shell);margin:0 auto;width:100%;flex:1; display:flex;flex-direction:column;justify-content:center} /* the scale contrast: 11px meta against a ~150px display cut */ .title h1{display:flex;flex-direction:column; font-size:clamp(44px,10.4vw,152px);letter-spacing:-.042em;line-height:.94} .title h1 .l2{color:#8fb0ea} /* Metadata rail pinned to the viewport edge. Two tracks, not three: with the Deployed figure gone, splitting the row in halves keeps both entries on an edge and leaves no orphan track mid-rail. */ .rail{position:relative;max-width:var(--container-shell);margin:0 auto;width:100%; display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm); padding:var(--spacing-md) 0 var(--spacing-md);border-top:1px solid rgba(217,235,252,.28)} .rail-c{display:flex;flex-direction:column;gap:11px} .rail-end{text-align:right} .rail-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--color-gold)} /* Lifted from 15px flat to a fluid 17–20px, and pulled from the muted on-navy tone up to pale — this block is the hero's only supporting information now that the eyebrow is gone, so it carries more weight. */ .rail-v{font-size:clamp(17px,1.15vw,20px);color:var(--color-pale); line-height:1.4;letter-spacing:-.006em} /* ── Chapters ─────────────────────────────────────────────────── */ .ch{position:relative;padding:var(--spacing-3xl) 0;overflow:hidden} .ch-grey{background:var(--color-mist)} .ch-navy{background:var(--color-navy);color:#fff} .ch-in{position:relative;max-width:var(--container-shell);margin:0 auto;padding:0 var(--spacing-gutter); display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--spacing-md)} /* chapter index sticks while its chapter scrolls — pinning, free */ .ch-head{position:sticky;top:calc(var(--hdr-h) + var(--spacing-sm)); align-self:start;height:max-content} .ch-n{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--color-blue)} .ch-navy .ch-n{color:var(--color-gold)} .ch-t{font-family:var(--font-mono);font-size:12px;letter-spacing:.15em; text-transform:uppercase;color:var(--color-ink-3);margin-top:6px} .ch-navy .ch-t{color:var(--color-on-navy)} .ch-body{min-width:0} /* section-opening claim, two-part per the brand's own habit */ .claim{display:flex;flex-direction:column; font-size:clamp(28px,4.4vw,64px);letter-spacing:-.032em;line-height:1.02; /* was a 96px gulf between every claim and its own body copy, which is what made sections read as disconnected */ margin-bottom:var(--spacing-lg);max-width:24ch} /* the second half of the two-part claim sits on its own line */ .claim em{display:block;color:var(--color-blue)} .ch-navy .claim em{color:#8fb0ea} /* Titles that carry a full sentence per line rather than a short phrase. */ .claim-wide{max-width:32ch} /* A one-sentence title that must not break. The font size was never the problem: at the current 63px the string measures 903px and the column offers 1099px — it was the 24ch cap, which resolves to 902px, wrapping it by 1.2px. Freeing the measure keeps it on one line at full size rather than shrinking the type. nowrap is gated at 560px, below which the string genuinely stops fitting and wrapping is the readable choice. */ .claim-solo{max-width:none} @media (min-width:560px){ .claim-solo>span{white-space:nowrap} } .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--spacing-md) var(--spacing-lg);max-width:none} .lead{font-size:clamp(22px,2.1vw,30px);line-height:1.42; letter-spacing:-.012em;color:var(--color-ink)} .lead b{color:var(--color-blue);font-weight:500} /* measure tightened as the size went up, so lines stay near 65 characters */ .body{color:var(--color-ink-2);max-width:44ch;line-height:1.68} /* ── Figures: bare grid, no cards ─────────────────────────────── */ /* Nine figures on an explicit 3-column grid so it fills exactly 3x3 — auto-fit left an orphan in the last row. The number is the focal point; the label is deliberately quiet mono above it. `margin-top:auto` drops every number to the bottom of its cell so the whole row shares a baseline even when labels wrap to different heights. */ .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--spacing-md); border-top:1px solid var(--color-line-2)} .figs>div{display:flex;flex-direction:column;gap:var(--spacing-xs); padding:var(--spacing-sm) 0 var(--spacing-md); border-bottom:1px solid var(--color-line-2)} .figs dt{font-family:var(--font-mono);font-size:13px;letter-spacing:.11em; text-transform:uppercase;color:var(--color-ink-3);line-height:1.45; max-width:27ch} .figs dd{font-family:var(--font-display); font-size:clamp(46px,6.4vw,88px);line-height:.88; color:var(--color-navy);display:flex;align-items:baseline;gap:2px; font-variant-numeric:tabular-nums;letter-spacing:-.04em; margin-top:auto} .figs dd em{color:var(--color-blue);font-size:.44em;letter-spacing:-.02em} .ratios{margin-top:var(--spacing-lg);padding-top:var(--spacing-sm); border-top:1px solid var(--color-line-2);display:flex;gap:var(--spacing-md); flex-wrap:wrap;align-items:baseline} .ratios-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--color-ink-3);flex:none} .ratios ul{display:flex;gap:var(--spacing-sm) var(--spacing-md);flex-wrap:wrap} .ratios li{font-size:16.5px;color:var(--color-ink-2)} .ratios b{font-family:var(--font-display);color:var(--color-navy);font-size:24px; line-height:1.2;margin-right:7px;font-variant-numeric:tabular-nums; letter-spacing:-.02em} /* ── Capabilities: prose, not cards ──────────────────────────── */ .caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:var(--spacing-md) var(--spacing-md)} .caps article{border-top:1px solid rgba(217,235,252,.24);padding-top:var(--spacing-xs)} .caps h3{font-size:25px;color:#fff;margin-bottom:10px;letter-spacing:-.024em} .caps p{color:var(--color-on-navy);font-size:17.5px;line-height:1.58;max-width:30ch} /* ── Ecosystem: an indexed list ──────────────────────────────── */ .eco{border-top:1px solid var(--color-line-2)} .eco>li{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:var(--spacing-md);padding:var(--spacing-sm) 0 var(--spacing-sm); border-bottom:1px solid var(--color-line-2)} .eco-d{display:flex;flex-direction:column;gap:8px; font-family:var(--font-display);font-size:clamp(19px,2vw,27px); color:var(--color-navy);letter-spacing:-.025em;line-height:1.08} .eco-i{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em; color:var(--color-mid)} /* Companies sit side by side rather than stacked, so a two-company discipline uses the row's width instead of doubling its height. Exactly two columns, not auto-fit: no discipline holds more than two companies, and auto-fit was opening a third column that stayed empty. */ .eco-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--spacing-sm) var(--spacing-md);align-self:center} /* Each company is logo + text on one row, so adding the marks costs no extra height. Every logo sits in an identical 128x48 slot, which gives consistent alignment and reserves its space exactly — no layout shift as the SVGs arrive. */ .eco-c p{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs)} .eco-logo-box{flex:none;width:142px;height:62px; display:flex;align-items:center;justify-content:flex-start} .eco-logo{width:auto;max-width:100%;display:block} /* Heights are hand-set per mark rather than uniform: these range from a 6.07:1 wordmark (yellowstone) to a 1.18:1 stacked lockup (Dynamic), and at equal height the wide ones read as far smaller. Chosen so each mark carries similar optical mass; aspect ratios are untouched. Recomputed for the official logo set — Dynamic and BETHASZ are stacked lockups here, so they take nearly the full slot height. */ .eco-logo[data-logo="mrs"] {height:40px} /* 2.24:1 */ .eco-logo[data-logo="alya"] {height:34px} /* 2.86:1 */ .eco-logo[data-logo="dynamic"] {height:58px} /* 1.18:1 stacked */ .eco-logo[data-logo="lifeflex"] {height:23px} /* 5.31:1 */ .eco-logo[data-logo="yellowstone"]{height:20px} /* 6.07:1 */ .eco-logo[data-logo="era"] {height:28px} /* 3.98:1 */ .eco-logo[data-logo="bethasz"] {height:56px} /* 1.42:1 stacked */ .eco-logo[data-logo="rocketcode"] {height:22px} /* 5.56:1 */ .eco-txt{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:none} .eco-c b{font-family:var(--font-display);font-size:23px;color:var(--color-ink); letter-spacing:-.024em;font-weight:500;line-height:1.14} .eco-c .eco-txt>span{font-size:16.5px;color:var(--color-ink-3);line-height:1.5;max-width:32ch} .eco-f{margin-top:var(--spacing-sm);font-family:var(--font-mono);font-size:11.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3)} /* ── Routes: the investor route leads ────────────────────────── */ .routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--spacing-md) var(--spacing-md)} .rt{border-top:1px solid var(--color-line-2);padding-top:var(--spacing-xs)} .rt-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--color-ink-3);margin-bottom:var(--spacing-xs)} .rt h3{font-size:24px;color:var(--color-ink);margin-bottom:10px;letter-spacing:-.024em} .rt p{color:var(--color-ink-2);font-size:17.5px;line-height:1.58;max-width:32ch} .rt-lead{grid-column:1/-1;border-top-color:var(--color-navy);border-top-width:2px} .rt-lead .rt-k{color:var(--color-blue)} .rt-lead h3{font-size:clamp(22px,2.4vw,30px)} .rt-lead p{font-size:20px;line-height:1.55;max-width:46ch} .rt-cta{display:inline-flex;align-items:center;min-height:48px;margin-top:var(--spacing-sm); padding:0 28px;border-radius:999px;background:var(--color-blue);color:#fff; font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; transition:background var(--duration-fast) var(--ease-brand),transform var(--duration-fast) var(--ease-brand)} /* ── Enquiry: discreet, not a form ───────────────────────────── */ .ch-end{padding-bottom:var(--spacing-2xl)} .enq{display:flex;flex-direction:column;gap:var(--spacing-md);align-items:flex-start} .enq-who{display:flex;align-items:center;gap:var(--spacing-xs); padding-bottom:var(--spacing-sm);border-bottom:1px solid rgba(217,235,252,.22);width:100%; max-width:420px} .enq-mark{width:32px;height:auto;fill:var(--color-gold);flex:none} .enq-n{font-family:var(--font-display);font-size:23px;color:#fff;letter-spacing:-.022em} .enq-r{font-size:16px;color:var(--color-on-navy)} .enq-cta{display:inline-flex;flex-direction:column;gap:4px; padding:var(--spacing-xs) var(--spacing-md);min-height:64px;justify-content:center; border:1px solid var(--color-gold);border-radius:2px; transition:background var(--duration-base) var(--ease-brand)} .enq-cta-t{font-size:11.5px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--color-gold)} .enq-cta em{font-family:var(--font-mono);font-size:16px;color:#fff} .enq-note{color:var(--color-on-navy);font-size:16.5px;line-height:1.6;max-width:46ch} /* ── Footer ──────────────────────────────────────────────────── */ .ftr{background:var(--color-navy);color:#fff;padding:var(--spacing-lg) 0 var(--spacing-md); border-top:1px solid rgba(217,235,252,.16)} .ftr-in{max-width:var(--container-shell);margin:0 auto;padding:0 var(--spacing-gutter); display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:center; justify-content:space-between} .wm-ftr{width:150px} .ftr .wm-blue{fill:var(--color-pale)} .ftr .wm-cap{fill:#fff} .ftr-tag{font-size:16px;color:var(--color-on-navy)} .ftr-meta{display:flex;gap:var(--spacing-sm);align-items:center;flex-wrap:wrap; font-family:var(--font-mono);font-size:11px;color:var(--color-on-navy)} .ftr-meta a{padding:13px 0;transition:color var(--duration-fast) var(--ease-brand)} /* ═══ MOTION ═══════════════════════════════════════════════════ Reveals are CSS scroll-driven animations — scrubbed to the scrollbar the way a Lenis + GSAP ScrollTrigger build would be, at zero payload. Nothing is ever hidden by default: the animation is declared only inside @supports, so a browser without it simply renders the finished page. There is no JS involved and therefore nothing that can strand content invisible. Ranges are staggered per element type so a chapter resolves in layers — heading, then body, then figures — rather than at once. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .claim, .cols>*, .caps article, .eco>li, .rt, .ratios, .enq, .eco-f{ animation:rise linear both; animation-timeline:view(); animation-range:entry 3% entry 34%; } /* figures resolve a touch later and tighter, so the grid reads as it fills rather than arriving pre-assembled */ .figs>div{ animation:rise linear both; animation-timeline:view(); animation-range:entry 8% entry 30%; } /* ── Hero parallax ──────────────────────────────────────────── Three layers drift at different rates against page scroll, so the title card gains depth as it leaves. Driven by animation-timeline: scroll(), so there is no scroll listener and no JavaScript at all. Uses the independent `translate` property rather than `transform`, which leaves each element's skewX() untouched — and both translate and opacity are compositor-only, so this costs no layout or paint. */ .title::after{ animation:heroPattern linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; } .title .dev i{ animation:heroDevice linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; } .title-in{ animation:heroCopy linear both; animation-timeline:view(); animation-range:cover 35% cover 100%; } /* ── The mark settling in ───────────────────────────────────── Opacity and a uniform scale only. The guidelines' misuse page forbids rotating, stretching or distorting the logo, so nothing here touches its proportions. */ .enq-mark{ animation:markSettle linear both; animation-timeline:view(); animation-range:entry 10% entry 46%; } /* Portfolio marks resolve just after their row, so the logo reads as arriving with the company rather than ahead of it. */ .eco-logo{ animation:rise linear both; animation-timeline:view(); animation-range:entry 6% entry 38%; } } } @keyframes rise{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } /* Parallax layers. Transform-adjacent properties only — `translate`, `scale` and `opacity` all run on the compositor. */ @keyframes heroPattern{to{translate:0 5%}} @keyframes heroDevice {to{translate:0 -4%}} @keyframes heroCopy {to{translate:0 3%;opacity:.5}} @keyframes markSettle {from{opacity:0;scale:.86}to{opacity:1;scale:1}} /* ═══ POINTER-DEPENDENT EFFECTS ════════════════════════════════ Everything here needs a real cursor. On a touch screen :hover latches after a tap and reads as a stuck state, so these are gated on (hover:hover) and (pointer:fine) rather than shipped to every device. Touch keeps the base styles, which are already complete — nothing here is required to understand the page. */ @media (hover:hover) and (pointer:fine){ .hdr-idx a:hover{color:#fff} .hdr.stuck .hdr-idx a:hover{color:var(--color-blue)} .lang:hover{color:#fff} .hdr.stuck .lang:hover{color:var(--color-blue)} .cta-sm:hover{background:rgba(217,235,252,.12);border-color:var(--color-pale)} .hdr.stuck .cta-sm:hover{background:var(--color-blue);color:#fff} .rt-cta:hover{background:#2c4681;transform:translateY(-1px)} .enq-cta:hover{background:rgba(198,183,153,.1)} .ftr-meta a:hover{color:var(--color-pale)} /* the frosted header, desktop only */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hdr.stuck{background:rgba(252,252,252,.86); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px)} } } /* Touch devices also skip the blend-mode pass on the hero pattern: soft-light over a large gradient is a per-pixel composite. */ @media (hover:none){ .title::after{mix-blend-mode:normal;opacity:.34} } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width:1180px){ .hdr-idx{gap:var(--spacing-xs)} .hdr-idx a span{display:none} html[data-lang="es"] .hdr-idx a span{display:none} .hdr-idx a em{font-size:11px} } @media (max-width:1024px){ :root{--spacing-2xl:72px;--spacing-3xl:92px} .ch-in{grid-template-columns:1fr;gap:var(--spacing-sm)} .ch-head{position:static;display:flex;gap:var(--spacing-xs);align-items:baseline} .ch-t{margin-top:0} .rt-lead{grid-column:auto} } @media (max-width:820px){ :root{--hdr-h:76px} .hdr-idx,.cta-sm{display:none} .figs{column-gap:var(--spacing-sm)} .figs>div{padding:var(--spacing-sm) 0 var(--spacing-md)} .burger{display:flex} .rail{grid-template-columns:1fr;gap:var(--spacing-xs);text-align:left} .rail-end{text-align:left} .eco>li{grid-template-columns:1fr;gap:var(--spacing-xs)} .eco-logo-box{width:112px;height:52px} .eco-logo[data-logo="mrs"]{height:34px} .eco-logo[data-logo="alya"]{height:29px} .eco-logo[data-logo="dynamic"]{height:48px} .eco-logo[data-logo="bethasz"]{height:46px} .eco-logo[data-logo="era"]{height:24px} .eco-logo[data-logo="lifeflex"]{height:20px} .eco-logo[data-logo="yellowstone"]{height:17px} .eco-logo[data-logo="rocketcode"]{height:19px} /* two 170px columns would break company names like "Dynamic Reinsurance" across awkward lines at 23px */ .eco-c{grid-template-columns:1fr} .eco-c{align-self:stretch} } @media (max-width:560px){ :root{--spacing-xl:48px;--spacing-2xl:56px;--spacing-3xl:68px} :root{--hdr-h:68px} .wm{width:146px} .title{min-height:auto;padding-top:calc(var(--hdr-h) + var(--spacing-lg))} .rail-c{gap:8px} .title h1{font-size:clamp(36px,11.5vw,52px)} /* Nine figures can't fill two columns without orphaning one, so a single column below 560px. Each row reads label-then-number, which scans like a statement of accounts. */ .figs{grid-template-columns:1fr} .figs>div{padding:var(--spacing-sm) 0 var(--spacing-md)} .figs dt{max-width:none} .figs dd{font-size:clamp(52px,15vw,64px)} .ratios{flex-direction:column;gap:var(--spacing-xs)} .ratios ul{gap:var(--spacing-xs) var(--spacing-sm)} .ftr-in{flex-direction:column;align-items:flex-start} .rt-cta,.enq-cta{width:100%} } @media print{ .hdr,.mnav,.prog,.dev,.burger{display:none} .title,.ch-navy,.ftr{background:#fff!important;color:#000!important} .rv{opacity:1!important;transform:none!important;animation:none!important} }