/* ========================================================================== Media Mingles — design system Palette: #3368A0 · #66A3BF · #C8DFDB · #F2EFE7 ========================================================================== */ :root{ /* brand palette (locked) */ --blue: #3368A0; --blue-mid: #66A3BF; --mint: #C8DFDB; --cream: #F2EFE7; /* derived tints & shades */ --blue-950: #08182C; --blue-900: #0E2743; --blue-800: #163A5F; --blue-700: #23527F; --blue-600: #3368A0; --blue-500: #4A80B4; --blue-300: #8FBBD3; --blue-100: #DCEAF2; --mint-300: #A9CFC9; --mint-100: #E2F0EE; --cream-200: #E7E2D6; --cream-50: #FAF8F4; --ink: #0E2743; --ink-soft: #3D5570; --muted: #6C819A; --line: rgba(14,39,67,.12); --line-soft: rgba(14,39,67,.07); --bg: var(--cream); --surface: #FFFFFF; /* type */ --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* rhythm */ --wrap: 1240px; --gut: clamp(20px, 5vw, 56px); --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px; --shadow-sm: 0 2px 8px rgba(14,39,67,.06); --shadow-md: 0 12px 34px -12px rgba(14,39,67,.22); --shadow-lg: 0 34px 80px -30px rgba(14,39,67,.38); --shadow-blue: 0 22px 50px -20px rgba(51,104,160,.55); --ease: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.65,0,.35,1); --t: .45s var(--ease); } *,*::before,*::after{ box-sizing:border-box; } /* Horizontal clipping belongs on . Putting overflow-x on makes body its own scroll container and can stop the page scrolling. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; } @supports (overflow-x: clip){ html{ overflow-x:clip; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:clamp(15.5px,.42vw + 14.6px,17px); line-height:1.65; -webkit-font-smoothing:antialiased; } body.is-locked{ overflow:hidden; } img,svg,video{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } ::selection{ background:var(--blue); color:#fff; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.03; letter-spacing:-.035em; margin:0 0 .5em; text-wrap:balance; } h1{ font-size:clamp(2.9rem,7.2vw,5.6rem); } h2{ font-size:clamp(2.1rem,4.4vw,3.5rem); } h3{ font-size:clamp(1.28rem,1.7vw,1.6rem); letter-spacing:-.025em; } h4{ font-size:1.06rem; letter-spacing:-.015em; } p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; } /* ---------- layout ---------- */ .wrap{ width:min(var(--wrap), 100% - var(--gut)*2); margin-inline:auto; } .wrap-narrow{ width:min(760px, 100% - var(--gut)*2); margin-inline:auto; } section{ position:relative; } .sect{ padding:clamp(40px,5vw,74px) 0; } .sect-sm{ padding:clamp(28px,3.4vw,48px) 0; } .grid{ display:grid; gap:clamp(18px,2.2vw,30px); } .g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:1000px){ .g-4{ grid-template-columns:repeat(2,1fr);} .g-3{ grid-template-columns:repeat(2,1fr);} } @media (max-width:680px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } } /* ---------- shared bits ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); font-weight:500; margin-bottom:1.1rem; } .eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.55; } .eyebrow.no-rule::before{ display:none; } .lede{ font-size:clamp(1.02rem,1.15vw,1.22rem); color:var(--ink-soft); max-width:62ch; } .muted{ color:var(--muted); } .mono{ font-family:var(--font-mono); } .sect-head{ margin-bottom:clamp(18px,2.2vw,30px); } .sect-head.split{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; } .sect-head p{ margin-top:.4em; } /* buttons */ .btn{ --btn-bg:var(--blue); --btn-fg:#fff; position:relative; display:inline-flex; align-items:center; gap:.6em; padding:.92em 1.6em; border:0; border-radius:var(--r-pill); background:var(--btn-bg); color:var(--btn-fg); font-weight:600; font-size:.94rem; letter-spacing:-.01em; cursor:pointer; overflow:hidden; isolation:isolate; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .btn::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--blue-800); transform:translateY(101%); transition:transform .45s var(--ease); } .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-blue); } .btn:hover::after{ transform:translateY(0); } .btn:focus-visible{ outline:2px solid var(--blue-800); outline-offset:3px; } .btn .ar{ transition:transform .35s var(--ease); } .btn:hover .ar{ transform:translateX(3px); } .btn-ghost{ --btn-bg:transparent; --btn-fg:var(--ink); border:1px solid var(--line); } .btn-ghost::after{ background:var(--ink); } .btn-ghost:hover{ color:#fff; box-shadow:var(--shadow-md); } .btn-light{ --btn-bg:#fff; --btn-fg:var(--blue-900); } .btn-light::after{ background:var(--mint); } .btn-light:hover{ color:var(--blue-900); } .btn-mint{ --btn-bg:var(--mint); --btn-fg:var(--blue-900); } .btn-mint::after{ background:#fff; } .btn-sm{ padding:.66em 1.15em; font-size:.86rem; } .link-u{ position:relative; font-weight:600; color:var(--blue); } .link-u::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1.5px; background:currentColor; transform-origin:right; transform:scaleX(0); transition:transform .4s var(--ease); } .link-u:hover::after{ transform-origin:left; transform:scaleX(1); } /* cards */ .card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,34px); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--blue-100); } .chip{ display:inline-flex; align-items:center; gap:.45em; padding:.4em .85em; border-radius:var(--r-pill); background:var(--mint-100); color:var(--blue-800); font-size:.74rem; font-weight:600; letter-spacing:.01em; border:1px solid rgba(51,104,160,.12); } /* dark blocks */ .on-dark{ background:var(--blue-950); color:var(--cream); } .on-dark h1,.on-dark h2,.on-dark h3{ color:#fff; } .on-dark .lede,.on-dark p{ color:rgba(242,239,231,.72); } .on-dark .eyebrow{ color:var(--mint); } .on-dark .card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); } .on-dark .card:hover{ background:rgba(255,255,255,.07); border-color:rgba(200,223,219,.3); } .on-dark .chip{ background:rgba(200,223,219,.12); color:var(--mint); border-color:rgba(200,223,219,.22); } .on-dark .amt{ color:var(--mint); } .on-dark .amt small{ color:rgba(242,239,231,.66); } .on-dark .plist li{ color:rgba(242,239,231,.8); } .on-dark .tick{ background:var(--mint); color:var(--blue-900); } .on-dark .stat .inf{ font-size:1.15em; line-height:.8; display:inline-block; transform:translateY(.04em); } .stat b{ color:#fff; } .on-dark .stat > span{ color:rgba(242,239,231,.6); } .on-dark .hero-stats{ border-top-color:rgba(255,255,255,.12); } .on-dark .step{ border-color:rgba(255,255,255,.12); } .on-dark .step:last-child{ border-bottom-color:rgba(255,255,255,.12); } .on-dark .step:hover{ background:linear-gradient(90deg,rgba(200,223,219,.09),transparent 60%); } .on-dark .step-k{ color:var(--mint); } .on-dark .step p{ color:rgba(242,239,231,.7); } .on-dark .logos{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); } .on-dark .logos div{ background:var(--blue-900); color:rgba(242,239,231,.6); box-shadow:0 0 0 1px rgba(255,255,255,.08); } .on-dark .logos div:hover{ background:var(--blue-800); color:var(--mint); } /* ---------- scroll reveal ---------- */ /* Content is never hidden behind JavaScript. There is no scroll-reveal: if a thing is on the page it is visible, full stop. The attribute is left in the markup so the hook exists, but it changes nothing. */ [data-rise]{ opacity:1; transform:none; } /* ========================================================================== Header ========================================================================== */ .top{ position:fixed; inset:0 0 auto; z-index:80; padding:16px 0; transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease); } .top.stuck .brand-logo{ height:34px; } .top.stuck{ padding:9px 0; background:rgba(242,239,231,.86); backdrop-filter:blur(16px) saturate(1.5); box-shadow:0 1px 0 var(--line-soft); } .top-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:800; font-size:1.16rem; letter-spacing:-.045em; } /* The client's own logo artwork, not a redraw. Two files — dark for the cream header, cream for the dark footer — swapped rather than filtered, so the mark keeps its exact colour in both places. */ /* Stacked lockup — needs real height or the wordmark turns to mush. */ .brand-logo{ height:42px; width:auto; display:block; } .brand-logo-light{ display:none; } .brand:hover .brand-logo{ transform:translateY(-1px); } .brand-logo{ transition:transform .35s var(--ease); } /* Anywhere the ground is dark, show the reversed file instead. */ .on-dark .brand-logo, .foot .brand-logo, .drawer .brand-logo{ display:none; } .on-dark .brand-logo-light, .foot .brand-logo-light, .drawer .brand-logo-light{ display:block; } .foot .brand-logo-light, .drawer .brand-logo-light{ height:54px; } /* The mark alone, tiled as a faint watermark behind dark sections. */ .pattern-mark{ position:absolute; inset:0; pointer-events:none; opacity:.045; background-image:url("../img/logo-mark-light.png"); background-size:132px auto; } .brand span i{ font-style:normal; color:var(--blue); } .nav{ display:flex; align-items:center; gap:4px; } .nav a{ position:relative; padding:.5em .82em; border-radius:var(--r-pill); font-size:.9rem; font-weight:500; color:var(--ink-soft); transition:color .3s var(--ease), background .3s var(--ease); } .nav a:hover{ color:var(--ink); background:rgba(51,104,160,.07); } .nav a[aria-current="page"]{ color:var(--blue); font-weight:600; } .nav a[aria-current="page"]::after{ content:""; position:absolute; left:50%; bottom:2px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--blue); } .top-cta{ display:flex; align-items:center; gap:10px; } .burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:14px; background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .burger i{ display:block; width:17px; height:1.7px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease), opacity .3s; } .burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.7px) rotate(45deg); } .burger[aria-expanded="true"] i:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.7px) rotate(-45deg); } .drawer{ position:fixed; inset:0; z-index:79; background:var(--blue-950); color:var(--cream); padding:110px var(--gut) 40px; display:flex; flex-direction:column; gap:6px; clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease); overflow-y:auto; } .drawer.open{ clip-path:inset(0 0 0 0); } .drawer a{ font-family:var(--font-display); font-size:clamp(1.9rem,7vw,2.7rem); letter-spacing:-.04em; padding:.16em 0; border-bottom:1px solid rgba(255,255,255,.08); opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s; } .drawer.open a{ opacity:1; transform:none; } .drawer a:hover{ color:var(--mint); } .drawer-foot{ margin-top:auto; padding-top:32px; font-size:.9rem; color:rgba(242,239,231,.6); } .drawer-foot a{ font-family:var(--font-body); font-size:.95rem; border:0; padding:0; color:var(--mint); } @media (max-width:1080px){ .nav{ display:none; } .burger{ display:flex; } .top-cta .btn{ display:none; } .top-cta .btn.keep{ display:inline-flex; } } /* WordPress admin bar: shift the fixed header out from under it. Only ever seen by logged-in users, but it hides the nav otherwise. */ body.admin-bar .top{ top:32px; } body.admin-bar .drawer{ top:32px; } @media screen and (max-width:782px){ body.admin-bar .top{ top:46px; } body.admin-bar .drawer{ top:46px; } } /* ========================================================================== Kinetic headings — words rise out of their own baseline on load. Split by JS; if that never runs the heading is simply normal text, so the words can never be left hidden. Transform only, so it stays cheap on a phone. Runs once at load — nothing here is tied to scrolling. ========================================================================== */ .kin{ display:inline-block; vertical-align:bottom; transform-style:preserve-3d; padding-bottom:.06em; } .kin > i{ display:inline-block; font-style:inherit; /* The resting state is the visible one. The motion lives only inside the keyframe, so a word can never be stranded if the animation is throttled, unsupported or interrupted. */ animation:kinWave 1.05s cubic-bezier(.18,.82,.22,1) both; animation-delay:var(--kd,0ms); transform-origin:50% 100%; will-change:transform; } /* A wave: each word tips up out of the page, overshoots a touch, settles. */ @keyframes kinWave{ 0% { transform:perspective(900px) rotateX(-82deg) translate3d(0,.34em,0); } 55% { transform:perspective(900px) rotateX(9deg) translate3d(0,-.05em,0); } 78% { transform:perspective(900px) rotateX(-3.5deg) translate3d(0,.012em,0); } 100% { transform:perspective(900px) rotateX(0deg) translate3d(0,0,0); } } /* The accent word rides the wave a beat longer. */ .kin.kin-accent > i{ animation-duration:1.18s; } @media (prefers-reduced-motion: reduce){ .kin > i{ transform:none; animation:none; } } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; padding:clamp(124px,14vw,168px) 0 clamp(40px,5vw,66px); overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 99%); mask-image:linear-gradient(to bottom,#000 58%,transparent 99%); } .orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform; } .orb-1{ width:46vw; height:46vw; background:var(--blue-mid); top:-14vw; right:-9vw; } .orb-2{ width:34vw; height:34vw; background:var(--mint); bottom:-14vw; left:-8vw; opacity:.75; } .orb-3{ width:22vw; height:22vw; background:var(--blue); top:32vh; left:36vw; opacity:.2; } .hero-grid-lines{ position:absolute; inset:0; background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 25%,transparent 78%); } .hero-in{ position:relative; z-index:1; } .hero h1{ margin-bottom:.3em; } .hero h1 .ln{ display:block; overflow:hidden; } .hero h1 .ln > span{ display:block; } @keyframes heroLine{ to{ transform:translateY(0); } } .hero h1 em{ font-style:normal; background:linear-gradient(96deg,var(--blue) 8%,var(--blue-mid) 52%,var(--mint-300) 96%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* When the heading is split into word masks the glyphs move into a child, and background-clip:text does not reach it — the word would inherit the transparent colour with no gradient behind it and paint as nothing. Re-apply the fill at the level that actually holds the letters. */ h1 em .kin > i{ background:linear-gradient(96deg,var(--blue) 8%,var(--blue-mid) 52%,var(--mint-300) 96%); -webkit-background-clip:text; background-clip:text; color:transparent; } .rotator{ display:inline-grid; vertical-align:bottom; } .rotator > b{ grid-area:1/1; font-weight:inherit; opacity:0; transform:translateY(.35em); transition:opacity .5s var(--ease), transform .5s var(--ease); background:linear-gradient(96deg,var(--blue) 10%,var(--blue-mid) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; } .rotator > b.on{ opacity:1; transform:none; } .hero-sub{ display:flex; gap:clamp(24px,4vw,60px); align-items:flex-start; flex-wrap:wrap; margin-top:clamp(24px,3vw,38px); } .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; } /* Four measures as four blocks: contained, equal, nothing sprawling. */ .hero-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1vw,14px); margin-top:clamp(28px,3.6vw,48px); padding-top:0; border-top:0; } @media (max-width:720px){ .hero-stats{ grid-template-columns:repeat(2,1fr); gap:10px; } } .stat{ padding:clamp(14px,1.6vw,20px) clamp(12px,1.4vw,18px); border-radius:var(--r-md); background:rgba(255,255,255,.55); border:1px solid var(--line-soft); backdrop-filter:blur(6px); transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); } .stat:hover{ transform:translateY(-3px); background:#fff; box-shadow:0 14px 26px -16px rgba(14,39,67,.34); } .stat .inf{ font-size:1.15em; line-height:.8; display:inline-block; transform:translateY(.04em); } .stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.55rem,2.6vw,2.15rem); letter-spacing:-.05em; line-height:1; color:var(--blue-800); } .stat > span{ display:block; margin-top:.55em; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-family:var(--font-mono); } .stat b span{ font:inherit; letter-spacing:inherit; color:inherit; } /* marquee */ .marquee{ overflow:hidden; padding:14px 0; border-block:1px solid var(--line); background:var(--cream-50); } .marquee-track{ display:flex; width:max-content; gap:0; animation:slide 34s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } .marquee span{ display:inline-flex; align-items:center; gap:1.4em; padding-inline:.7em; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-700); white-space:nowrap; } .marquee span::after{ content:"✳"; color:var(--blue-mid); } @keyframes slide{ to{ transform:translateX(-50%); } } .marquee.on-dark{ background:var(--blue-900); border-color:rgba(255,255,255,.08); } .marquee.on-dark span{ color:var(--mint); } /* ========================================================================== Feature / service cards ========================================================================== */ .svc{ position:relative; display:flex; flex-direction:column; min-height:270px; overflow:hidden; } .svc-n{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; color:var(--blue-mid); margin-bottom:auto; } .svc h3{ margin:34px 0 .45em; } .svc p{ font-size:.94rem; color:var(--ink-soft); } .svc-go{ margin-top:18px; display:inline-flex; align-items:center; gap:.45em; font-size:.86rem; font-weight:600; color:var(--blue); opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease); } .svc:hover .svc-go{ opacity:1; transform:none; } .svc::before{ content:""; position:absolute; inset:auto -30% -60% auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,var(--mint) 0%,transparent 68%); opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease); transform:scale(.6); } .svc:hover::before{ opacity:.7; transform:scale(1); } .icon-b{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--mint-100); color:var(--blue); border:1px solid rgba(51,104,160,.12); transition:transform .5s var(--ease), background .4s; } .card:hover .icon-b{ transform:rotate(-8deg) scale(1.06); background:var(--blue); color:#fff; } .icon-b svg{ width:24px; height:24px; } .on-dark .icon-b{ background:rgba(200,223,219,.12); color:var(--mint); border-color:rgba(200,223,219,.2); } /* bento */ .bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.6vw,22px); } .bento > *{ grid-column:span 2; } .bento .b-wide{ grid-column:span 3; } .bento .b-full{ grid-column:span 6; } @media (max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr);} .bento > *,.bento .b-wide,.bento .b-full{ grid-column:span 2; } } /* ========================================================================== Accordion / steps / tabs ========================================================================== */ .acc{ border-top:1px solid var(--line); } .acc-item{ border-bottom:1px solid var(--line); } .acc-btn{ width:100%; display:flex; align-items:center; gap:20px; justify-content:space-between; padding:clamp(20px,2.4vw,30px) 0; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.6rem); letter-spacing:-.03em; font-weight:700; transition:color .3s var(--ease), padding-left .4s var(--ease); } .acc-btn:hover{ color:var(--blue); padding-left:10px; } .acc-btn .pm{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; position:relative; transition:background .4s var(--ease), border-color .4s, transform .4s var(--ease); } .acc-btn .pm::before,.acc-btn .pm::after{ content:""; position:absolute; background:currentColor; border-radius:2px; transition:transform .4s var(--ease), opacity .3s; } .acc-btn .pm::before{ width:13px; height:1.7px; } .acc-btn .pm::after{ width:1.7px; height:13px; } .acc-item.open .acc-btn{ color:var(--blue); } .acc-item.open .pm{ background:var(--blue); border-color:var(--blue); color:#fff; transform:rotate(90deg); } .acc-item.open .pm::after{ opacity:0; } .acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); } .acc-item.open .acc-panel{ grid-template-rows:1fr; } .acc-panel > div{ overflow:hidden; } .acc-body{ padding:0 0 clamp(22px,2.6vw,32px); max-width:74ch; color:var(--ink-soft); } .acc-body ul{ margin:.6em 0 0; padding-left:1.1em; } .acc-body li{ margin-bottom:.35em; } .on-dark .acc,.on-dark .acc-item{ border-color:rgba(255,255,255,.12); } .on-dark .acc-btn .pm{ border-color:rgba(255,255,255,.2); } .steps{ counter-reset:st; display:grid; gap:2px; } .step{ position:relative; display:grid; grid-template-columns:minmax(96px,140px) 1fr; gap:clamp(18px,3vw,44px); padding:clamp(24px,3vw,38px) 0; border-top:1px solid var(--line); transition:background .4s var(--ease); } .step:last-child{ border-bottom:1px solid var(--line); } .step:hover{ background:linear-gradient(90deg,rgba(200,223,219,.28),transparent 60%); } .step-k{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); padding-top:.35em; } .step h3{ margin-bottom:.35em; } .step p{ color:var(--ink-soft); max-width:60ch; margin:0; } @media (max-width:640px){ .step{ grid-template-columns:1fr; gap:10px; } } /* tabs */ .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; } .tab{ padding:.6em 1.15em; border-radius:var(--r-pill); border:1px solid var(--line); background:transparent; cursor:pointer; font-size:.87rem; font-weight:600; color:var(--ink-soft); transition:all .3s var(--ease); } .tab:hover{ border-color:var(--blue-300); color:var(--blue); } .tab.on{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:var(--shadow-blue); } /* ========================================================================== Work grid + lightbox ========================================================================== */ .work-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:clamp(16px,2vw,26px); } .work-i{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--blue-900); aspect-ratio:4/5; cursor:pointer; border:0; padding:0; text-align:left; display:block; width:100%; transition:transform .55s var(--ease), box-shadow .55s var(--ease); } .work-i:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); } .work-i.hide{ display:none; } .work-canvas{ position:absolute; inset:0; } .work-meta{ position:absolute; inset:auto 0 0; padding:24px; z-index:2; background:linear-gradient(to top,rgba(8,24,44,.97) 18%,rgba(8,24,44,.82) 48%,rgba(8,24,44,.35) 78%,transparent); color:#fff; } .work-meta small{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mint); text-shadow:0 1px 6px rgba(8,24,44,.9); } .work-meta h3{ font-size:1.24rem; margin:.35em 0 .2em; color:#fff; } .work-meta p{ font-size:.85rem; color:rgba(242,239,231,.72); margin:0; } .work-tagrow{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; } .work-tagrow span{ font-size:.68rem; padding:.28em .6em; border-radius:var(--r-pill); background:rgba(255,255,255,.12); color:var(--mint); } /* Real work stills behind the craft cards. */ .work-i .work-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .6s var(--ease); } .work-i:hover .work-shot{ transform:scale(1.05); } .work-i .work-meta{ z-index:2; } .lb{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:var(--gut); background:rgba(8,24,44,.85); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; } .lb.open{ opacity:1; visibility:visible; } .lb-card{ background:var(--cream-50); border-radius:var(--r-lg); max-width:660px; width:100%; padding:clamp(26px,4vw,44px); max-height:86vh; overflow-y:auto; transform:translateY(20px) scale(.97); transition:transform .5s var(--ease); } .lb.open .lb-card{ transform:none; } .lb-x{ position:absolute; top:22px; right:22px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-size:1.3rem; line-height:1; } .lb-x:hover{ background:#fff; color:var(--blue-900); } .lb-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; } .lb-stats div{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); padding:14px; text-align:center; } .lb-stats b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--blue); letter-spacing:-.04em; } .lb-stats span{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; } /* ========================================================================== Pricing ========================================================================== */ .price-card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:clamp(26px,3vw,38px); transition:transform .5s var(--ease), box-shadow .5s var(--ease); } .price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .price-card.feat{ background:linear-gradient(165deg,var(--blue-900),var(--blue-800) 60%,var(--blue-700)); color:var(--cream); border-color:transparent; box-shadow:var(--shadow-lg); } .price-card.feat h3,.price-card.feat .amt{ color:#fff; } .price-card.feat li,.price-card.feat p{ color:rgba(242,239,231,.78); } .price-card.feat .tick{ background:var(--mint); color:var(--blue-900); } .ribbon{ position:absolute; top:20px; right:20px; font-size:.68rem; font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; padding:.4em .8em; border-radius:var(--r-pill); background:var(--mint); color:var(--blue-900); font-weight:600; } .amt{ font-family:var(--font-display); font-size:clamp(2.2rem,3.6vw,2.9rem); letter-spacing:-.05em; line-height:1; color:var(--blue-800); margin:.25em 0 .1em; } .amt small{ font-size:.85rem; font-family:var(--font-body); letter-spacing:0; color:var(--muted); font-weight:500; } .plist{ list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:11px; font-size:.92rem; } .plist li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink-soft); } .tick{ flex:none; width:19px; height:19px; border-radius:50%; background:var(--mint-100); color:var(--blue); display:grid; place-items:center; font-size:.62rem; margin-top:.2em; font-weight:700; } .price-card .btn{ margin-top:auto; justify-content:center; } /* calculator */ .calc{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-xl); padding:clamp(26px,3.4vw,42px); box-shadow:var(--shadow-md); } .calc-row{ margin-bottom:26px; } .calc-row > label{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; font-size:.92rem; margin-bottom:12px; } .calc-row output{ font-family:var(--font-mono); color:var(--blue); font-size:.92rem; } input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:99px; background:linear-gradient(90deg,var(--blue) var(--p,50%),var(--cream-200) var(--p,50%)); outline:none; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--blue); cursor:grab; box-shadow:var(--shadow-sm); transition:transform .2s; } input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.14); cursor:grabbing; } input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--blue); cursor:grab; } .seg{ display:flex; gap:6px; background:var(--cream); padding:5px; border-radius:var(--r-pill); border:1px solid var(--line-soft); } .seg button{ flex:1; padding:.55em .8em; border:0; border-radius:var(--r-pill); background:transparent; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--ink-soft); transition:all .3s var(--ease); } .seg button.on{ background:var(--blue); color:#fff; box-shadow:var(--shadow-sm); } .calc-out{ margin-top:30px; padding-top:26px; border-top:1px dashed var(--line); display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; } .calc-out b{ font-family:var(--font-display); font-size:clamp(2rem,4vw,2.9rem); letter-spacing:-.05em; line-height:1; color:var(--blue-800); } .togglepill{ display:inline-flex; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); } .togglepill button{ padding:.6em 1.3em; border:0; border-radius:var(--r-pill); background:transparent; cursor:pointer; font-weight:600; font-size:.88rem; color:var(--ink-soft); transition:all .3s var(--ease); } .togglepill button.on{ background:var(--blue); color:#fff; } /* ========================================================================== Website portfolio — storefront screenshots, scrolled on hover ========================================================================== */ .site-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,32px); } @media (max-width:820px){ .site-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .site-grid{ grid-template-columns:1fr; } } .site-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line-soft); box-shadow:var(--shadow-sm); aspect-ratio:3/4; display:block; transition:transform .5s var(--ease), box-shadow .5s var(--ease); } .site-card:hover{ transform:translateY(-6px); box-shadow: 0 22px 44px -18px rgba(14,39,67,.5), 0 2px 0 rgba(255,255,255,.9) inset, 0 -2px 0 rgba(14,39,67,.08) inset; } /* The shot is about twice as tall as the frame, so it is clipped at the fold. On hover it travels up to reveal the rest of the page. A fixed percentage keeps this working without container queries. */ .site-card img{ position:absolute; inset:0 0 auto; width:100%; height:auto; display:block; transition:transform 5s cubic-bezier(.32,.02,.28,1); } .site-card:hover img{ transform:translateY(-42%); } @media (prefers-reduced-motion: reduce){ .site-card img, .site-card:hover img{ transition:none; transform:none; } } .site-chrome{ position:absolute; inset:0 0 auto; height:26px; z-index:2; background:linear-gradient(to bottom,rgba(255,255,255,.96),rgba(255,255,255,.72)); backdrop-filter:blur(6px); border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:5px; padding-inline:11px; } .site-chrome i{ width:7px; height:7px; border-radius:50%; background:var(--cream-200); flex:none; } .on-dark .site-card{ border-color:rgba(255,255,255,.1); } .only-few{ margin-top:clamp(18px,2.4vw,26px); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); } .on-dark .only-few{ color:rgba(242,239,231,.55); } /* ========================================================================== Client logo rail — logos only, no names, scrolling continuously ========================================================================== */ .logo-rail{ position:relative; overflow:hidden; padding:10px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .logo-rail-track{ display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); width:max-content; animation:railSlide 52s linear infinite; } .logo-rail:hover .logo-rail-track{ animation-play-state:paused; } @keyframes railSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* Each logo rides on its own tile so wordmarks and square marks sit evenly. */ .logo-tile{ flex:none; display:grid; place-items:center; width:clamp(132px,13vw,182px); aspect-ratio:21/13; border-radius:var(--r-md); overflow:hidden; background:#fff; border:1px solid var(--line-soft); box-shadow:0 1px 2px rgba(14,39,67,.06); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .logo-tile img{ width:100%; height:100%; object-fit:contain; display:block; } /* Embossed on hover: lifted, with a light top edge and a soft ground shadow. */ .logo-tile:hover{ transform:translateY(-5px); border-color:var(--blue-100); box-shadow: 0 14px 26px -12px rgba(14,39,67,.42), 0 2px 0 rgba(255,255,255,.95) inset, 0 -2px 0 rgba(14,39,67,.06) inset; } .on-dark .logo-tile{ border-color:rgba(255,255,255,.12); box-shadow:0 1px 2px rgba(0,0,0,.35); } .on-dark .logo-tile:hover{ box-shadow:0 16px 30px -12px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.6) inset; } @media (prefers-reduced-motion: reduce){ .logo-rail{ -webkit-mask-image:none; mask-image:none; } .logo-rail-track{ animation:none; width:100%; flex-wrap:wrap; justify-content:center; } .logo-rail-track .rail-dup{ display:none; } } /* ========================================================================== Testimonials / logos / faq / cta / forms ========================================================================== */ .quote-track{ display:flex; gap:clamp(16px,2vw,24px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:none; } .quote-track::-webkit-scrollbar{ display:none; } .quote{ flex:0 0 min(430px,84vw); scroll-snap-align:start; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:clamp(24px,2.6vw,34px); } .quote p{ font-family:var(--font-display); font-size:1.14rem; line-height:1.45; letter-spacing:-.02em; color:var(--ink); } .quote footer{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); } .avatar{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.86rem; color:#fff; background:linear-gradient(140deg,var(--blue),var(--blue-mid)); flex:none; } .quote footer .who b{ display:block; font-size:.9rem; } .quote footer .who span{ font-size:.78rem; color:var(--muted); } .q-nav{ display:flex; gap:8px; } .q-nav button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; display:grid; place-items:center; transition:all .3s var(--ease); } .q-nav button:hover{ background:var(--blue); color:#fff; border-color:var(--blue); } .logos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; border-radius:var(--r-md); overflow:hidden; background:transparent; } .logos div{ background:var(--cream-50); box-shadow:0 0 0 1px var(--line-soft); padding:26px 16px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.98rem; letter-spacing:-.02em; color:var(--muted); transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); text-align:center; } .logos div:hover{ background:#fff; color:var(--blue); transform:scale(1.03); } .cta-band{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(32px,4.4vw,62px); background:linear-gradient(140deg,var(--blue-900) 0%,var(--blue-700) 55%,var(--blue) 100%); color:#fff; } .cta-band::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(200,223,219,.34),transparent 66%); top:-190px; right:-130px; } .cta-band h2{ color:#fff; max-width:16ch; } .cta-band p{ color:rgba(242,239,231,.8); max-width:52ch; } .cta-in{ position:relative; z-index:1; } .field{ margin-bottom:18px; } .field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:7px; color:var(--ink-soft); } .field input,.field select,.field textarea{ width:100%; padding:.85em 1em; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:.94rem; transition:border-color .3s, box-shadow .3s; } .field textarea{ min-height:130px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(51,104,160,.13); } .field .err{ display:none; color:#B4442F; font-size:.78rem; margin-top:6px; } .field.bad input,.field.bad select,.field.bad textarea{ border-color:#B4442F; } .field.bad .err{ display:block; } .form-note{ font-size:.8rem; color:var(--muted); margin-top:14px; } .form-ok{ display:none; padding:16px 18px; border-radius:var(--r-md); background:var(--mint-100); border:1px solid var(--mint-300); color:var(--blue-800); font-size:.9rem; font-weight:500; margin-bottom:18px; } .form-ok.show{ display:block; } /* The brand rail sits between the last section and the footer on every page. */ .rail-outro{ padding-top:clamp(30px,4vw,54px); padding-bottom:clamp(34px,4.5vw,60px); border-top:1px solid var(--line); } .rail-outro .eyebrow{ margin-bottom:1.4rem; } .on-dark + .rail-outro{ border-top:0; } /* ========================================================================== Founder — a single aligned band: portrait, name, story, markets. Everything hangs off one baseline grid so nothing drifts. ========================================================================== */ .founder{ position:relative; overflow:hidden; } .founder-in{ display:grid; grid-template-columns:clamp(132px,15vw,178px) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start; max-width:900px; } @media (max-width:640px){ .founder-in{ grid-template-columns:1fr; gap:18px; justify-items:start; } } .founder-shot{ width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:linear-gradient(150deg,var(--blue-100),var(--mint-100)); border:3px solid #fff; box-shadow:var(--shadow-md); display:grid; place-items:center; } @media (max-width:640px){ .founder-shot{ width:clamp(120px,34vw,150px); } } .founder-shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; } .founder-body > *:first-child{ margin-top:-.12em; } /* optical top alignment */ .founder h3{ font-size:clamp(1.5rem,2.5vw,2rem); margin-bottom:.12em; line-height:1.05; } .founder .role{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:.9em; } .founder p{ max-width:54ch; color:var(--ink-soft); margin-bottom:1.1em; } /* Two markets, one row, identical chips. */ /* Two markets, two ends of the same line: India anchors the left, UAE the right, both on one baseline above a hairline rule. */ .markets{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin:1.4em 0 0; padding-top:14px; border-top:1px solid var(--line); } @media (max-width:420px){ .markets{ gap:10px; } } .market{ display:inline-grid; grid-template-columns:30px auto; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); font-size:.82rem; font-weight:600; line-height:1; white-space:nowrap; } /* Drawn flags, not photographs: a rippling flag photo is unreadable at 30px. Both share one viewBox so the pair is always the same size and baseline. */ .market .flag{ width:30px; height:20px; display:block; border-radius:2.5px; box-shadow:0 0 0 1px rgba(14,39,67,.14), 0 1px 2px rgba(14,39,67,.16); transform-origin:0% 50%; animation:flagWave 3.6s ease-in-out infinite; } .market:nth-child(2) .flag{ animation-delay:-1.4s; } /* out of step, like real cloth */ @keyframes flagWave{ 0%,100%{ transform:perspective(120px) rotateY(0deg) skewY(0deg); } 30% { transform:perspective(120px) rotateY(-7deg) skewY(-1.1deg); } 65% { transform:perspective(120px) rotateY(5deg) skewY(.9deg); } } @media (prefers-reduced-motion: reduce){ .market .flag{ animation:none; } } /* Two flags drift behind the copy — present, never loud. */ .founder-flags{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } /* One flag hangs off each edge of the section, faint enough to read as atmosphere rather than decoration sitting on top of the words. */ .founder-flags img{ position:absolute; opacity:.13; filter:saturate(.95); will-change:transform; } .founder-flags .fl-in{ width:clamp(190px,23vw,320px); top:-12%; left:-4%; animation:flagDrift 15s ease-in-out infinite; } .founder-flags .fl-ae{ width:clamp(190px,23vw,320px); bottom:-14%; right:-4%; animation:flagDrift 19s ease-in-out infinite reverse; } @keyframes flagDrift{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg) skewY(0deg); } 35% { transform:translate3d(-8px,6px,0) rotate(-1.2deg) skewY(.7deg); } 70% { transform:translate3d(6px,-5px,0) rotate(1deg) skewY(-.6deg); } } @media (max-width:720px){ .founder-flags{ display:none; } } @media (prefers-reduced-motion: reduce){ .founder-flags img{ animation:none; } } /* ========================================================================== Deck entrance — the pack gathers itself. Cards arrive scattered around the stack and sweep in to square up, the way a dealer collects a hand. Runs once on load; the settled stack is the resting state, so if the animation never plays nothing is out of place. ========================================================================== */ .deck.is-gathering > *{ animation:deckGather .92s cubic-bezier(.18,.86,.26,1) both; animation-delay:var(--gd,0ms); } @keyframes deckGather{ from{ transform:translate3d(var(--gx,0), var(--gy,0), -160px) rotate(var(--gr,0deg)) scale(.86); } } /* Each card keeps its resting transform at the end; only the arrival differs. */ @media (prefers-reduced-motion: reduce){ .deck.is-gathering > *{ animation:none; } } /* ========================================================================== Card deck — a wallet-style stack. Cards sit squarely on top of one another with a small vertical offset and no rotation: the stack reads as one object, not a scattered pile. Dealing is a single vertical move — the top card sinks straight back into the pack — so nothing ever flies sideways across the layout. ========================================================================== */ @media (max-width:1400px){ .deck{ position:relative; display:block; padding-bottom:44px; max-width:min(560px,100%); margin-inline:auto; perspective:1800px; perspective-origin:50% 0%; } .deck > *{ position:absolute; inset:0 0 auto; width:100%; transition:transform .9s cubic-bezier(.16,.84,.24,1), box-shadow .6s var(--ease); transform-origin:50% 0%; will-change:transform; backface-visibility:hidden; } /* Square, centred, no tilt — the stack looks deliberate. */ .deck > *[data-pos="0"]{ position:relative; transform:none; z-index:5; pointer-events:auto; box-shadow:0 22px 44px -22px rgba(14,39,67,.42); } .deck > *[data-pos="1"]{ transform:translate3d(0,-14px,-60px) scale(.973); z-index:4; pointer-events:none; box-shadow:0 16px 30px -20px rgba(14,39,67,.32); } .deck > *[data-pos="2"]{ transform:translate3d(0,-26px,-120px) scale(.947); z-index:3; pointer-events:none; box-shadow:0 12px 24px -20px rgba(14,39,67,.26); } .deck > *[data-pos="3"]{ transform:translate3d(0,-36px,-180px) scale(.923); z-index:2; pointer-events:none; box-shadow:0 10px 20px -20px rgba(14,39,67,.2); } .deck > *[data-pos="x"]{ transform:translate3d(0,-36px,-180px) scale(.923); z-index:1; pointer-events:none; visibility:hidden; } /* A pinned card owns the front; the queue behind it stays square too. */ .deck-pinned > *[data-pos="1"]{ transform:translate3d(0,-13px,-60px) scale(.972); } .deck-pinned > *[data-pos="2"]{ transform:translate3d(0,-25px,-120px) scale(.946); } .deck-pinned > *[data-pos="3"]{ transform:translate3d(0,-35px,-180px) scale(.922); } .deck-pinned > *[data-pos="x"]{ transform:translate3d(0,-35px,-180px) scale(.922); } /* The beat. Lift — a clean rise off the pack, squared up. */ .deck > *[data-pos="0"].is-embossed, .deck > *[data-pos="1"].is-embossed{ transform:translate3d(0,-10px,70px) scale(1.014); box-shadow:0 34px 60px -24px rgba(14,39,67,.46), 0 1px 0 rgba(255,255,255,.85) inset; } .deck-pinned > *[data-pos="1"].is-embossed{ transform:translate3d(0,-22px,40px) scale(.995); } /* Sink — the card settles straight down and back into the pack. */ .deck > *.is-dealing{ transform:translate3d(0,26px,-220px) scale(.9); transition:transform .5s cubic-bezier(.62,.02,.34,1); z-index:0; } .deck > .svc{ min-height:250px; } .deck > .post-c{ min-height:0; } } @media (prefers-reduced-motion: reduce){ .deck > *{ transition:none; } } /* The pinned poster keeps its own shape — no browser chrome, no scroll. */ .site-card-lead{ aspect-ratio:3/4; background:#0f3b1f; } .site-card-lead img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:none; } .site-card-lead:hover img{ transform:none; } /* Mobile breathes too much between blocks — tighten it. */ @media (max-width:720px){ .sect{ padding:clamp(46px,7vw,64px) 0; } .sect-sm{ padding:clamp(34px,5.5vw,50px) 0; } .hero{ padding-top:clamp(112px,26vw,140px); padding-bottom:clamp(34px,7vw,54px); } .sect-head{ margin-bottom:clamp(22px,5vw,32px); } .hero-stats{ margin-top:clamp(30px,7vw,48px); padding-top:26px; gap:24px 30px; } .founder-in{ gap:22px; } .site-lead{ margin-bottom:18px; } } /* ========================================================================== Footer ========================================================================== */ .foot{ background:var(--blue-950); color:rgba(242,239,231,.66); padding:clamp(56px,7vw,92px) 0 32px; } .foot-top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(26px,3vw,44px); padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.09); } @media (max-width:860px){ .foot-top{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } } .foot .brand{ color:#fff; margin-bottom:16px; } .foot .brand-mark{ color:var(--mint); } .foot h4{ color:#fff; font-size:.76rem; font-family:var(--font-mono); letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; font-weight:500; } .foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.9rem; } .foot a:hover{ color:var(--mint); } .foot-bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:.8rem; } .foot-bot a{ color:rgba(242,239,231,.66); } .socials{ display:flex; gap:9px; margin-top:18px; } .socials a{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; transition:all .35s var(--ease); } .socials a:hover{ background:var(--mint); color:var(--blue-900); border-color:var(--mint); transform:translateY(-3px); } .socials svg{ width:17px; height:17px; } /* Tracker is staff-only, so it sits quietly at the foot of the contact list: a small curved chip. The caption follows a smile-shaped arc under the face, echoing the icon rather than sitting as a flat second line. */ .tracker-line{ margin-top:12px; } .tracker-line a{ display:inline-flex; align-items:center; gap:7px; padding:5px 13px 3px 9px; border-radius:24px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.035); line-height:1; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .tracker-line a:hover{ background:rgba(200,223,219,.12); border-color:rgba(200,223,219,.3); transform:translateY(-1px); } .tk-face{ display:grid; place-items:center; flex:none; } .tk-face svg{ width:11px; height:11px; opacity:.75; } .tk-text{ display:block; font-size:.72rem; font-weight:500; } .tk-arc{ display:block; width:104px; height:20px; margin-top:-1px; overflow:visible; } .tk-arc text{ font-family:var(--font-mono); font-size:6.4px; letter-spacing:.9px; text-transform:uppercase; fill:currentColor; opacity:.42; } /* progress + to-top */ .readbar{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-mid),var(--mint)); z-index:100; transition:width .1s linear; } .totop{ position:fixed; right:22px; bottom:22px; z-index:70; width:48px; height:48px; border-radius:50%; border:0; background:var(--blue); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow-blue); opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; transition:all .4s var(--ease); } .totop.show{ opacity:1; transform:none; pointer-events:auto; } .totop:hover{ background:var(--blue-800); transform:translateY(-3px); } /* page hero (inner pages) */ .phero{ padding:clamp(112px,12vw,150px) 0 clamp(24px,3vw,40px); position:relative; overflow:hidden; } .phero .orb-1{ width:38vw; height:38vw; top:-16vw; right:-8vw; opacity:.42; } .phero .orb-2{ width:26vw; height:26vw; bottom:-16vw; left:-6vw; opacity:.5; } .crumbs{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; } .crumbs a:hover{ color:var(--blue); } /* ========================================================================== Blog / insights ========================================================================== */ .filterbar{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--line); } .search-w{ position:relative; flex:1; min-width:230px; max-width:340px; } .search-w input{ width:100%; padding:.72em 1em .72em 2.5em; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); font:inherit; font-size:.9rem; } .search-w input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(51,104,160,.12); } .search-w svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); } .post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(18px,2.2vw,30px); } .post-c{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease); } .post-c:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .post-c.hide{ display:none; } .post-thumb{ aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--blue-900); } .post-thumb .tnum{ position:absolute; right:16px; bottom:10px; font-family:var(--font-display); font-size:3.4rem; color:rgba(255,255,255,.14); letter-spacing:-.05em; line-height:1; } /* Article cards front a real poster rather than generated art. */ .post-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .post-c:hover .post-thumb img{ transform:scale(1.05); } .post-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; } .post-body h3{ font-size:1.16rem; margin:.5em 0 .4em; letter-spacing:-.028em; } .post-c:hover h3{ color:var(--blue); } .post-body p{ font-size:.9rem; color:var(--ink-soft); flex:1; } .post-foot{ display:flex; gap:14px; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:.76rem; color:var(--muted); font-family:var(--font-mono); letter-spacing:.06em; } .no-res{ display:none; text-align:center; padding:60px 0; color:var(--muted); } .no-res.show{ display:block; } .featured{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-soft); background:var(--surface); margin-bottom:clamp(30px,4vw,52px); } .featured .fimg{ min-height:320px; position:relative; background:var(--blue-900); } .featured .fbody{ padding:clamp(28px,3.4vw,48px); display:flex; flex-direction:column; justify-content:center; } @media (max-width:820px){ .featured{ grid-template-columns:1fr; } } /* article */ .article{ padding:0 0 clamp(60px,7vw,100px); } .art-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(30px,4vw,64px); align-items:start; } @media (max-width:1000px){ .art-wrap{ grid-template-columns:1fr; } .toc{ display:none; } } .prose{ max-width:70ch; font-size:1.045rem; } .prose h2{ font-size:clamp(1.5rem,2.5vw,2.05rem); margin:2em 0 .55em; scroll-margin-top:110px; } .prose h3{ font-size:1.2rem; margin:1.7em 0 .5em; scroll-margin-top:110px; } .prose p,.prose li{ color:#26405C; } .prose ul,.prose ol{ padding-left:1.25em; margin:0 0 1.2em; } .prose li{ margin-bottom:.5em; } .prose li::marker{ color:var(--blue-mid); } .prose strong{ color:var(--ink); font-weight:650; } .prose a{ color:var(--blue); font-weight:550; text-decoration:underline; text-decoration-color:var(--blue-300); text-underline-offset:3px; } .prose a:hover{ text-decoration-color:var(--blue); } .prose blockquote{ margin:1.8em 0; padding:22px 26px; border-left:3px solid var(--blue); background:var(--mint-100); border-radius:0 var(--r-md) var(--r-md) 0; font-family:var(--font-display); font-size:1.16rem; line-height:1.45; letter-spacing:-.02em; color:var(--blue-800); } .prose blockquote p{ margin:0; color:inherit; } .callout{ margin:1.9em 0; padding:22px 26px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--cream-50); } .callout h4{ margin:0 0 .5em; color:var(--blue); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; } .callout p:last-child,.callout ul:last-child{ margin-bottom:0; } .prose table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.92rem; } .prose th,.prose td{ padding:11px 14px; border:1px solid var(--line); text-align:left; } .prose th{ background:var(--mint-100); font-weight:650; color:var(--blue-800); } .table-scroll{ overflow-x:auto; } .toc{ position:sticky; top:100px; font-size:.86rem; } .toc h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:500; } .toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); display:grid; gap:2px; } .toc a{ display:block; padding:.42em 0 .42em 15px; margin-left:-1px; border-left:1px solid transparent; color:var(--muted); transition:all .3s var(--ease); } .toc a:hover{ color:var(--blue); } .toc a.on{ color:var(--blue); border-left-color:var(--blue); font-weight:600; } .art-head{ padding:clamp(120px,14vw,166px) 0 clamp(28px,3vw,42px); } .art-metarow{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; color:var(--muted); margin-top:24px; padding-top:22px; border-top:1px solid var(--line); } .share{ display:flex; gap:8px; align-items:center; margin-left:auto; } .share button,.share a{ width:36px; height:36px; border-radius:11px; border:1px solid var(--line); display:grid; place-items:center; background:transparent; cursor:pointer; transition:all .3s var(--ease); } .share button:hover,.share a:hover{ background:var(--blue); color:#fff; border-color:var(--blue); } .share svg{ width:15px; height:15px; } .art-cta{ margin:clamp(40px,5vw,64px) 0 0; } .nextprev{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; padding-top:34px; border-top:1px solid var(--line); } @media (max-width:640px){ .nextprev{ grid-template-columns:1fr; } } .np{ padding:20px 22px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--surface); transition:all .4s var(--ease); } .np:hover{ border-color:var(--blue-300); transform:translateY(-3px); } .np small{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .np b{ display:block; margin-top:6px; font-family:var(--font-display); font-size:1.02rem; letter-spacing:-.025em; } .np.right{ text-align:right; } /* utility */ .sr{ 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:absolute; left:-9999px; z-index:200; padding:12px 18px; background:var(--blue); color:#fff; border-radius:0 0 var(--r-sm) 0; } .skip:focus{ left:0; top:0; } .hr{ height:1px; background:var(--line); border:0; margin:0; }