/* ========================================================================== LADDR — WEB DESIGN SYSTEM Derived from Laddr Brand Guideline (Fahad Ibne Shahid). Colour 01 (blue) is the brand's voice. Colour 02 (orange) is punctuation — it appears where something is achieved, never as a surface. ========================================================================== */ :root{ /* --- Colour 01 — brand blue ------------------------------------------- */ --blue-700:#053EBD; --blue-600:#0546D8; --blue-500:#3775FF; /* --- Colour 02 — accent orange (punctuation only) --------------------- */ --orange-500:#FF601F; --orange-600:#FF4A00; /* --- Colour 03 / 04 / 05 — ground, paper, ink ------------------------- */ --black:#000000; --paper:#FFF9F7; --ink:#252525; /* --- derived surfaces (extensions, declared explicitly) --------------- */ --surface-1:#0A0A0A; --surface-2:#121212; --surface-3:#181818; --line:rgba(255,249,247,.11); --line-2:rgba(255,249,247,.20); --text-muted:rgba(255,249,247,.62); --text-faint:rgba(255,249,247,.44); /* --- type ------------------------------------------------------------- */ /* TBJ Artnik and Serotiva are licensed faces (Taboja Studio / MyFonts). Outfit and Instrument Sans are the closest free equivalents in skeleton and proportion — geometric grotesque with a tall x-height, never wide. */ --f-display:"Outfit","TBJ Artnik",system-ui,sans-serif; --f-body:"Instrument Sans","Serotiva",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* --- space ------------------------------------------------------------ */ --gut:clamp(20px,5vw,56px); --shell:1180px; /* --- motion ----------------------------------------------------------- */ --ease:cubic-bezier(.22,.61,.36,1); --t-fast:140ms; --t-base:320ms; --t-slow:520ms; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; } body{ margin:0; background:var(--black); color:var(--paper); font-family:var(--f-body); font-size:16px; line-height:1.62; font-feature-settings:"ss01"; -webkit-font-smoothing:antialiased; /* clip, not hidden: hidden turns into its own scroll box, which silently stops the header from sticking to the top of the screen */ overflow-x:clip; } ::selection{ background:var(--blue-600); color:var(--paper); } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } :focus-visible{ outline:2px solid var(--blue-500); outline-offset:3px; border-radius:3px; } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); } /* ========================================================================== TYPE SCALE — tracking tightens as size grows, leading tightens with it ========================================================================== */ .display{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.7rem,6.6vw,5.4rem); line-height:.94; letter-spacing:-.038em; text-wrap:balance; margin:0; } .h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.95rem,4.1vw,3.15rem); line-height:1.02; letter-spacing:-.032em; text-wrap:balance; margin:0; } .h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.16; letter-spacing:-.022em; margin:0; } .lede{ font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.62; letter-spacing:-.004em; color:var(--text-muted); max-width:56ch; margin:0; } p{ margin:0; } .eyebrow{ font-family:var(--f-body); font-size:.6875rem; font-weight:600; letter-spacing:.185em; text-transform:uppercase; color:var(--text-faint); margin:0; display:flex; align-items:center; gap:11px; } .eyebrow::before{ content:""; width:6px; height:6px; flex:none; background:var(--orange-500); transform:rotate(45deg); } /* ========================================================================== LOGO — monochromatic, icon proportional to wordmark, clear space preserved Clear space = 0.5 x lockup height on every side (brand: 35mm gap). ========================================================================== */ .logo{ display:block; color:var(--paper); padding:calc(var(--logo-h,22px) * .5); margin:calc(var(--logo-h,22px) * -.5); transition:opacity var(--t-base) var(--ease); } .logo:hover{ opacity:.7; } .logo svg{ display:block; height:var(--logo-h,22px); width:auto; } .logo--nav{ --logo-h:23px; } .logo--foot{ --logo-h:30px; } .mark{ display:block; color:var(--paper); } .mark svg{ display:block; height:var(--mark-h,34px); width:auto; } /* ========================================================================== NAV — logo and booking button lead on the left, page links sit right ========================================================================== */ .nav{ position:sticky; top:0; z-index:60; background:rgba(0,0,0,.6); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-bottom:1px solid transparent; transition:border-color var(--t-slow) var(--ease), background var(--t-slow) var(--ease); } .nav.is-stuck{ border-bottom-color:var(--line); background:rgba(0,0,0,.82); } .nav__in{ display:flex; align-items:center; gap:clamp(20px,3.4vw,40px); height:70px; } .nav__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,30px); margin-left:auto; font-size:.875rem; font-weight:500; color:var(--text-muted); } .nav__links a{ position:relative; transition:color var(--t-fast) var(--ease); } .nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:1.5px; background:var(--blue-500); transform:scaleX(0); transform-origin:left; transition:transform var(--t-base) var(--ease); } .nav__links a:hover{ color:var(--paper); } .nav__links a:hover::after{ transform:scaleX(1); } /* ========================================================================== BUTTON — primary(blue) / accent(orange) / ghost, sm|md|lg Feedback lands on press, not on release. ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:46px; padding:0 24px; border-radius:999px; border:1px solid transparent; font-family:var(--f-body); font-size:.9rem; font-weight:600; letter-spacing:-.006em; cursor:pointer; white-space:nowrap; transition:transform 100ms ease-out, background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .btn:active{ transform:scale(.97); } .btn--primary{ background:var(--blue-600); color:var(--paper); box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 30px -12px rgba(5,70,216,.95); } .btn--primary:hover{ background:var(--blue-500); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 14px 38px -12px rgba(55,117,255,1); } .btn--ghost{ background:rgba(255,249,247,.04); border-color:var(--line-2); } .btn--ghost:hover{ background:rgba(255,249,247,.08); border-color:rgba(255,249,247,.34); } .btn--sm{ height:38px; padding:0 18px; font-size:.8125rem; } .btn--lg{ height:54px; padding:0 30px; font-size:.95rem; } .arrow{ display:inline-block; transition:transform var(--t-base) var(--ease); } .btn:hover .arrow{ transform:translateX(4px); } /* ========================================================================== HERO — the brand's own light: blue rising, diagonals climbing ========================================================================== */ .hero{ position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(80px,11vw,136px) clamp(60px,7.5vw,96px); } .bloom{ position:absolute; inset:-15% -10% auto -10%; height:150%; z-index:-2; pointer-events:none; will-change:transform; } .bloom::before{ content:""; position:absolute; inset:0; background:radial-gradient(95% 58% at 50% 96%, rgba(5,62,189,.55) 0%, rgba(5,62,189,0) 68%); } .bloom::after{ content:""; position:absolute; left:50%; bottom:14%; width:min(1560px,172vw); height:min(760px,86vw); transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(232,242,255,.95) 0%, rgba(140,180,255,.74) 14%, rgba(55,117,255,.56) 30%, rgba(5,70,216,.30) 50%, rgba(5,62,189,.10) 64%, rgba(0,0,0,0) 76%); filter:blur(34px); } /* brand motif — the guideline's diagonal parallelograms, feathered */ .diagonals{ position:absolute; inset:-20% -20%; z-index:-3; pointer-events:none; background:repeating-linear-gradient(-62deg, rgba(55,117,255,0) 0px, rgba(55,117,255,.085) 46px, rgba(55,117,255,.085) 104px, rgba(55,117,255,0) 150px, rgba(55,117,255,0) 268px); mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 58%, transparent 94%); -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 58%, transparent 94%); } .shade{ position:absolute; left:50%; bottom:14%; z-index:-1; pointer-events:none; width:min(1140px,134vw); height:min(430px,60vw); transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 48%, rgba(0,0,0,.90) 0%, rgba(0,0,0,.70) 38%, rgba(0,0,0,.24) 62%, rgba(0,0,0,0) 78%); } .hero__in{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; } .tag{ display:inline-flex; align-items:center; gap:11px; padding:8px 18px; border-radius:999px; border:1px solid var(--line-2); background:rgba(10,10,10,.62); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,249,247,.86); } .tag i{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--orange-500); animation:pulse 3s var(--ease) infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,96,31,.55); } 70%{ box-shadow:0 0 0 9px rgba(255,96,31,0); } 100%{ box-shadow:0 0 0 0 rgba(255,96,31,0); } } .hero .display{ max-width:15ch; } .hero .display .pop--dim{ color:rgba(255,249,247,.72); } /* each headline line lifts toward the reader under a cursor or a fingertip */ .hero .display .pop{ display:inline-block; transform-origin:50% 60%; transition:transform .45s cubic-bezier(.34,1.35,.64,1), color .35s var(--ease), text-shadow .45s var(--ease); -webkit-tap-highlight-color:transparent; } @media (hover:hover){ .hero .display .pop:hover{ transform:scale(1.035); text-shadow:0 8px 34px rgba(55,117,255,.35); } .hero .display .pop--dim:hover{ color:rgba(255,249,247,.92); } } .hero .display .pop.is-pressed{ transform:scale(1.035); text-shadow:0 8px 34px rgba(55,117,255,.35); } .hero .display .pop--dim.is-pressed{ color:rgba(255,249,247,.92); } @media (prefers-reduced-motion: reduce){ .hero .display .pop{ transition:color .2s; transform:none !important; } } .hero .lede{ text-align:center; max-width:57ch; } .hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px; } /* ========================================================================== PROOF ========================================================================== */ .proof{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .proof__grid{ display:grid; grid-template-columns:repeat(4,1fr); } .proof__cell{ padding:32px clamp(14px,2.4vw,30px); display:flex; flex-direction:column; gap:7px; } .proof__cell + .proof__cell{ border-left:1px solid var(--line); } .proof__cell:first-child{ padding-left:0; } .proof__n{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; } .proof__cell:first-child .proof__n{ color:var(--orange-500); } .proof__l{ font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint); line-height:1.5; } /* ========================================================================== SECTION FRAME ========================================================================== */ .section{ padding-block:clamp(74px,9vw,120px); } .section--tight{ padding-block:clamp(58px,7vw,92px); } .section__head{ display:flex; flex-direction:column; gap:18px; max-width:680px; margin-bottom:clamp(38px,5vw,58px); } /* ========================================================================== PILLARS — rungs on a rail ========================================================================== */ .rungs{ position:relative; display:grid; } .rail{ position:absolute; left:-32px; top:16px; bottom:16px; width:1px; background:var(--line); display:none; } @media (min-width:1120px){ .rail{ display:block; } } .rail__dot{ position:absolute; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--black); border:1px solid var(--line-2); transition:background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); } .rail__dot.on{ background:var(--orange-500); border-color:var(--orange-500); box-shadow:0 0 0 4px rgba(255,96,31,.15); } .rung{ position:relative; border-top:1px solid var(--line); padding-block:clamp(32px,4vw,46px); display:grid; grid-template-columns:minmax(0,1fr); gap:24px; } .rung:last-child{ border-bottom:1px solid var(--line); } .rung::before{ content:""; position:absolute; inset:0 -26px; background:linear-gradient(90deg, rgba(55,117,255,.075), rgba(55,117,255,0) 64%); opacity:0; transition:opacity var(--t-slow) var(--ease); pointer-events:none; } .rung:hover::before{ opacity:1; } @media (min-width:900px){ .rung{ grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(32px,5vw,72px); align-items:start; } } .rung__label{ display:block; margin-bottom:15px; font-size:.6875rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--blue-500); } .rung__desc{ color:var(--text-muted); font-size:.9375rem; margin-top:13px; max-width:44ch; } .rung__metric{ display:inline-flex; align-items:baseline; gap:10px; margin-top:22px; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface-1); } .rung__metric b{ font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:-.022em; font-variant-numeric:tabular-nums; } .rung__metric span{ font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); } .caps{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .caps li{ background:var(--surface-1); padding:15px 19px; display:flex; align-items:flex-start; gap:13px; font-size:.9375rem; color:rgba(255,249,247,.84); transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease); } .caps li:hover{ background:var(--surface-3); color:var(--paper); } .caps li::before{ content:""; flex:none; width:5px; height:5px; margin-top:.6em; background:var(--blue-500); transform:rotate(45deg); } /* ========================================================================== RECRUITMENT ========================================================================== */ .hire{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); } @media (min-width:860px){ .hire{ grid-template-columns:1fr 1fr; } } .mode{ border:1px solid var(--line); border-radius:14px; padding:clamp(24px,3vw,32px); background:linear-gradient(168deg, var(--surface-2) 0%, var(--surface-1) 100%); display:flex; flex-direction:column; gap:15px; transition:border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .mode:hover{ border-color:var(--line-2); transform:translateY(-2px); } .mode__kicker{ font-size:.625rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--blue-500); } .mode__roles{ font-size:.875rem; color:var(--text-muted); line-height:1.72; border-top:1px solid var(--line); padding-top:15px; margin-top:auto; } .mode__roles b{ display:block; margin-bottom:6px; font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); } .stats{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:30px; padding-top:30px; border-top:1px solid var(--line); } .stat b{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(1.6rem,3.1vw,2.2rem); letter-spacing:-.035em; line-height:1.04; font-variant-numeric:tabular-nums; color:var(--paper); } .stat span{ font-size:.625rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint); } /* ========================================================================== COMPARISON ========================================================================== */ .cmp{ border:1px solid var(--line); border-radius:14px; overflow:hidden; } .cmp__row{ display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line); } .cmp__row:first-child{ border-top:0; } @media (min-width:880px){ .cmp__row{ grid-template-columns:.9fr 1.28fr 1.28fr; } } .cmp__row--head{ background:var(--surface-2); } .cmp__cell{ padding:17px clamp(16px,2.2vw,22px); font-size:.9rem; line-height:1.55; display:flex; gap:11px; align-items:flex-start; } @media (min-width:880px){ .cmp__cell + .cmp__cell{ border-left:1px solid var(--line); } } .cmp__dim{ font-weight:600; font-size:.875rem; color:var(--paper); } .cmp__old{ color:var(--text-faint); } .cmp__new{ color:rgba(255,249,247,.88); background:rgba(5,70,216,.10); } .mark-i{ flex:none; margin-top:.12em; font-size:.9em; } .mark-x{ color:var(--text-faint); } .mark-v{ color:var(--blue-500); } .cmp__head-cell{ font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); padding-block:14px; } .cmp__head-cell.is-laddr{ color:var(--blue-500); } .cmp__mini{ display:none; font-size:.5625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; } @media (max-width:879px){ .cmp__row--head{ display:none; } .cmp__cell{ padding-block:13px; flex-direction:column; gap:0; } .cmp__dim{ padding-bottom:4px; } .cmp__mini{ display:block; } .cmp__cell .mark-i{ display:none; } .cmp__old,.cmp__new{ font-size:.875rem; } } /* ========================================================================== VOICES ========================================================================== */ .voices{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); } @media (min-width:820px){ .voices{ grid-template-columns:repeat(3,1fr); } } .voice{ margin:0; border-top:1px solid var(--line-2); padding-top:24px; display:flex; flex-direction:column; gap:17px; } .voice blockquote{ margin:0; font-size:1rem; line-height:1.6; letter-spacing:-.01em; color:rgba(255,249,247,.88); } .voice figcaption{ margin-top:auto; font-size:.8125rem; color:var(--text-faint); } .voice figcaption b{ display:block; font-size:.875rem; font-weight:600; color:var(--paper); } /* ========================================================================== CLOSE ========================================================================== */ .close{ position:relative; overflow:hidden; border-top:1px solid var(--line); } .close::before{ content:""; position:absolute; left:50%; bottom:-52%; width:min(1240px,150vw); height:min(640px,80vw); transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(120,166,255,.34) 0%, rgba(5,70,216,.24) 34%, rgba(0,0,0,0) 72%); filter:blur(30px); pointer-events:none; } .close__in{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; } .close .lede{ text-align:center; max-width:52ch; } .close__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } /* ========================================================================== FOOTER ========================================================================== */ .foot{ border-top:1px solid var(--line); background:var(--surface-1); padding-block:clamp(48px,6vw,68px) 0; } .foot__grid{ display:grid; gap:38px; grid-template-columns:minmax(0,1fr); } @media (min-width:820px){ .foot__grid{ grid-template-columns:1.5fr 1fr 1fr; gap:clamp(32px,5vw,72px); } } .foot__blurb{ font-size:.875rem; color:var(--text-muted); max-width:38ch; margin-top:18px; } .foot__tag{ font-family:var(--f-display); font-weight:600; font-size:.9375rem; letter-spacing:-.015em; color:var(--text-faint); margin-top:14px; } .foot__tag em{ font-style:normal; color:var(--orange-500); } .status{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); } .status i{ width:6px; height:6px; border-radius:50%; background:#2ED399; box-shadow:0 0 8px rgba(46,211,153,.7); display:block; } .foot h4{ margin:0 0 17px; font-size:.625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); } .foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .foot ul a{ font-size:.875rem; color:var(--text-muted); transition:color var(--t-fast) var(--ease); } .foot ul a:hover{ color:var(--paper); } .foot__bar{ margin-top:clamp(40px,5vw,58px); border-top:1px solid var(--line); padding-block:22px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; font-size:.75rem; color:var(--text-faint); } .foot__bar nav{ display:flex; gap:22px; margin-left:auto; } .foot__bar a:hover{ color:var(--paper); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:760px){ .proof__grid{ grid-template-columns:1fr 1fr; } .proof__cell{ padding-inline:0 18px; } .proof__cell:nth-child(odd){ padding-left:0; border-left:0; } .proof__cell:nth-child(even){ border-left:1px solid var(--line); padding-left:18px; } .proof__cell:nth-child(n+3){ border-top:1px solid var(--line); } } @media (max-width:640px){ .nav__links{ display:none; } .nav__in{ height:64px; } .stats{ grid-template-columns:1fr; gap:18px; } } /* entrance — from a visible resting state */ .rise{ animation:rise .82s var(--ease) both; } @keyframes rise{ from{ opacity:0; transform:translate3d(0,16px,0); } to{ opacity:1; transform:none; } } .d1{ animation-delay:.07s } .d2{ animation-delay:.14s } .d3{ animation-delay:.21s } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .bloom{ transform:none !important; } } @media (prefers-reduced-transparency: reduce){ .nav{ background:var(--black); backdrop-filter:none; -webkit-backdrop-filter:none; } .tag{ background:var(--surface-2); backdrop-filter:none; -webkit-backdrop-filter:none; } } /* contact form: spam trap stays invisible; success note */ .hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; } .form__msg.is-ok{ color:#9dbbff; border-color:rgba(90,140,255,.45); background:rgba(55,117,255,.10); } .form__msg.is-ok b{ color:var(--paper); } /* ========================================================================== LADDR — components for the interior pages Everything here reuses the tokens declared in the base layer. ========================================================================== */ /* --- page hero: quieter than the homepage, same light source ------------- */ .phero{ position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); padding-block:clamp(64px,8.5vw,110px) clamp(52px,7vw,86px); } .phero__glow{ position:absolute; left:50%; top:-46%; z-index:-2; pointer-events:none; width:min(1360px,158vw); height:min(720px,84vw); transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(140,180,255,.34) 0%, rgba(55,117,255,.26) 26%, rgba(5,70,216,.14) 46%, rgba(0,0,0,0) 72%); filter:blur(36px); } .phero__diag{ position:absolute; inset:-30% -20%; z-index:-3; pointer-events:none; background:repeating-linear-gradient(-62deg, rgba(55,117,255,0) 0px, rgba(55,117,255,.07) 46px, rgba(55,117,255,.07) 104px, rgba(55,117,255,0) 150px, rgba(55,117,255,0) 268px); mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 92%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 92%); } .phero__in{ display:flex; flex-direction:column; gap:22px; max-width:44rem; } .phero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; } .phero .display{ font-size:clamp(2.3rem,5.4vw,4.2rem); } /* --- generic panel ------------------------------------------------------- */ .panel{ border:1px solid var(--line); border-radius:14px; background:linear-gradient(168deg,var(--surface-2) 0%,var(--surface-1) 100%); padding:clamp(24px,3vw,34px); } /* --- principles (Our Story) --------------------------------------------- */ .principles{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; } @media (min-width:760px){ .principles{ grid-template-columns:1fr 1fr; } } .principle{ background:var(--surface-1); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:12px; transition:background var(--t-base) var(--ease); } .principle:hover{ background:var(--surface-3); } .principle__n{ font-family:var(--f-display); font-weight:700; font-size:.95rem; letter-spacing:-.02em; color:var(--blue-500); font-variant-numeric:tabular-nums; } .principle p{ color:var(--text-muted); font-size:.9375rem; } /* --- timeline / prose ---------------------------------------------------- */ .prose{ display:flex; flex-direction:column; gap:20px; max-width:62ch; } .prose p{ color:var(--text-muted); font-size:1rem; line-height:1.7; } .prose strong{ color:var(--paper); font-weight:600; } /* --- split: sticky label + content -------------------------------------- */ .split{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:960px){ .split{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); } } @media (min-width:960px){ .split__aside{ position:sticky; top:104px; } } /* --- pillar detail (3 Pillars) ------------------------------------------ */ .pillar{ border-top:1px solid var(--line); padding-block:clamp(40px,5.5vw,68px); scroll-margin-top:88px; } .pillar:last-of-type{ border-bottom:1px solid var(--line); } .pillar__top{ display:grid; gap:clamp(24px,3.6vw,56px); grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:900px){ .pillar__top{ grid-template-columns:minmax(0,1fr) minmax(0,.72fr); } } .pillar__kpis{ display:grid; gap:12px; } .kpi{ border:1px solid var(--line); border-radius:12px; background:var(--surface-1); padding:16px 18px; display:flex; align-items:baseline; justify-content:space-between; gap:14px; } .kpi b{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--paper); } .kpi span{ font-size:.625rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint); } .svc{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:clamp(24px,3vw,34px); } @media (min-width:700px){ .svc{ grid-template-columns:1fr 1fr; } } @media (min-width:1040px){ .svc--3{ grid-template-columns:repeat(3,1fr); } } .svc__item{ background:var(--surface-1); padding:20px 22px; display:flex; flex-direction:column; gap:7px; transition:background var(--t-base) var(--ease); } .svc__item:hover{ background:var(--surface-3); } .svc__item h4{ margin:0; font-family:var(--f-display); font-weight:600; font-size:1rem; letter-spacing:-.018em; } .svc__item p{ color:var(--text-muted); font-size:.875rem; line-height:1.58; } /* --- case studies -------------------------------------------------------- */ .case{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:linear-gradient(168deg,var(--surface-2) 0%,var(--surface-1) 100%); transition:border-color var(--t-base) var(--ease); } .case + .case{ margin-top:20px; } .case:hover{ border-color:var(--line-2); } .case__head{ padding:clamp(22px,3vw,30px); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:13px; } .case__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .chip{ display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); font-size:.625rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); } .chip--blue{ border-color:rgba(55,117,255,.42); color:var(--blue-500); background:rgba(5,70,216,.10); } .case__body{ display:grid; gap:1px; background:var(--line); } @media (min-width:820px){ .case__body{ grid-template-columns:1fr 1fr; } } .case__cell{ background:var(--surface-1); padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:11px; } .case__cell h4{ margin:0; font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); } .case__cell p{ color:var(--text-muted); font-size:.9375rem; line-height:1.62; } .case__results{ display:grid; gap:1px; background:var(--line); grid-template-columns:1fr 1fr; } @media (min-width:820px){ .case__results{ grid-template-columns:repeat(4,1fr); } } .result{ background:var(--surface-2); padding:22px clamp(16px,2.2vw,22px); display:flex; flex-direction:column; gap:6px; } .result b{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.02; letter-spacing:-.032em; font-variant-numeric:tabular-nums; } .result:first-child b{ color:var(--orange-500); } .result span{ font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); line-height:1.5; } /* --- calculator ---------------------------------------------------------- */ .calc{ display:grid; gap:clamp(20px,3vw,32px); grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:980px){ .calc{ grid-template-columns:minmax(0,1fr) minmax(0,.86fr); } } @media (min-width:980px){ .calc__out{ position:sticky; top:100px; } } .field{ display:flex; flex-direction:column; gap:12px; padding-block:22px; border-top:1px solid var(--line); } .field:first-of-type{ border-top:0; padding-top:0; } .field__top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; } .field__label{ font-size:.875rem; font-weight:500; color:rgba(255,249,247,.86); } .field__val{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--blue-500); white-space:nowrap; } .field__range{ display:flex; justify-content:space-between; font-size:.6875rem; color:var(--text-faint); font-variant-numeric:tabular-nums; } input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; margin:0; border-radius:999px; background:rgba(255,249,247,.14); cursor:pointer; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--blue-600); border:2px solid var(--paper); box-shadow:0 2px 10px rgba(5,70,216,.7); transition:transform 100ms ease-out; } input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.14); } input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--blue-600); border:2px solid var(--paper); box-shadow:0 2px 10px rgba(5,70,216,.7); } .toggles{ display:flex; flex-wrap:wrap; gap:9px; } .toggle{ position:relative; } .toggle input{ position:absolute; opacity:0; width:0; height:0; } .toggle span{ display:inline-flex; align-items:center; gap:9px; padding:10px 17px; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,249,247,.03); font-size:.8125rem; font-weight:500; cursor:pointer; transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease); } .toggle span::before{ content:""; width:7px; height:7px; flex:none; background:var(--text-faint); transform:rotate(45deg); transition:background var(--t-base) var(--ease); } .toggle input:checked + span{ background:rgba(5,70,216,.18); border-color:var(--blue-500); color:var(--paper); } .toggle input:checked + span::before{ background:var(--blue-500); } .toggle input:focus-visible + span{ outline:2px solid var(--blue-500); outline-offset:3px; } .out{ border:1px solid var(--line-2); border-radius:16px; overflow:hidden; background:linear-gradient(168deg,rgba(5,70,216,.16) 0%,var(--surface-1) 62%); } .out__hero{ padding:clamp(24px,3vw,32px); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:9px; } .out__hero > b{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,5vw,3.2rem); line-height:1; letter-spacing:-.038em; font-variant-numeric:tabular-nums; color:var(--paper); } .out__hero span{ font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint); } .out__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); } .out__cell{ background:var(--surface-1); padding:20px clamp(16px,2.2vw,22px); display:flex; flex-direction:column; gap:5px; } .out__cell b{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .out__cell span{ font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); } .out__foot{ padding:20px clamp(16px,2.2vw,22px); display:flex; flex-direction:column; gap:14px; } .assump{ font-size:.75rem; line-height:1.6; color:var(--text-faint); } .assump b{ font-family:var(--f-body); font-size:inherit; line-height:inherit; letter-spacing:normal; color:var(--text-muted); font-weight:600; } /* the first section after a page hero sits closer to it */ .phero + .section{ padding-top:clamp(46px,5.5vw,74px); } /* --- form ---------------------------------------------------------------- */ .form{ display:flex; flex-direction:column; gap:18px; } .form__row{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); } @media (min-width:640px){ .form__row--2{ grid-template-columns:1fr 1fr; } } .form__field{ display:flex; flex-direction:column; gap:8px; } .form__field > label{ font-size:.75rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); } .form__field .toggle span{ text-transform:none; letter-spacing:normal; font-size:.8125rem; color:var(--text-muted); } .form__field .toggle input:checked + span{ color:var(--paper); } .form__field .req{ color:var(--orange-500); } .form input[type=text], .form input[type=email], .form input[type=url], .form select, .form textarea{ width:100%; font:inherit; font-size:.9375rem; color:var(--paper); background:var(--surface-1); border:1px solid var(--line-2); border-radius:10px; padding:13px 15px; transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); } .form textarea{ min-height:118px; resize:vertical; } .form input::placeholder, .form textarea::placeholder{ color:rgba(255,249,247,.30); } .form input:hover, .form select:hover, .form textarea:hover{ border-color:rgba(255,249,247,.30); } .form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--blue-500); background:var(--surface-2); box-shadow:0 0 0 3px rgba(55,117,255,.18); } .form select{ appearance:none; cursor:pointer; padding-right:40px; background-image:linear-gradient(45deg,transparent 50%,rgba(255,249,247,.5) 50%),linear-gradient(135deg,rgba(255,249,247,.5) 50%,transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } .form__note{ font-size:.8125rem; color:var(--text-faint); line-height:1.6; } .setup{ border:1px dashed rgba(255,96,31,.5); background:rgba(255,96,31,.06); border-radius:12px; padding:16px 18px; font-size:.8125rem; line-height:1.65; color:var(--text-muted); } .setup b{ display:block; color:var(--orange-500); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.625rem; margin-bottom:6px; } .setup code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem; color:var(--paper); } /* --- contact rail -------------------------------------------------------- */ .reach{ display:grid; gap:14px; } .reach__item{ border:1px solid var(--line); border-radius:12px; background:var(--surface-1); padding:20px 22px; display:flex; flex-direction:column; gap:7px; transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); } a.reach__item:hover{ border-color:var(--blue-500); background:var(--surface-2); } .reach__item h4{ margin:0; font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); } .reach__item b{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; letter-spacing:-.02em; word-break:break-word; } .reach__item p{ font-size:.8125rem; color:var(--text-faint); } .promise{ display:grid; gap:10px; margin-top:6px; } .promise div{ display:flex; gap:11px; align-items:flex-start; font-size:.875rem; color:var(--text-muted); } .promise div::before{ content:""; flex:none; width:5px; height:5px; margin-top:.6em; background:var(--blue-500); transform:rotate(45deg); } /* --- FAQ ----------------------------------------------------------------- */ .faq{ border-top:1px solid var(--line); } .faq details{ border-bottom:1px solid var(--line); } .faq summary{ list-style:none; cursor:pointer; padding-block:20px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--f-display); font-weight:600; font-size:1.05rem; letter-spacing:-.02em; transition:color var(--t-base) var(--ease); } .faq summary::-webkit-details-marker{ display:none; } .faq summary:hover{ color:var(--blue-500); } .faq summary::after{ content:""; flex:none; width:11px; height:11px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--t-base) var(--ease); } .faq details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); } .faq details p{ padding-bottom:22px; color:var(--text-muted); font-size:.9375rem; max-width:66ch; } /* --- misc ---------------------------------------------------------------- */ .band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-1); } .linkish{ color:var(--blue-500); font-weight:500; } .linkish:hover{ text-decoration:underline; text-underline-offset:3px; } .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; } /* ========================================================================== LADDR — blue techno ground + glass layer One fixed backdrop sits behind every page; cards become frosted glass over it; the cursor carries a soft pool of light. ========================================================================== */ /* surfaces become translucent so the ground reads through everywhere */ :root{ --surface-1:rgba(8,13,30,.55); --surface-2:rgba(14,22,46,.60); --surface-3:rgba(26,40,80,.55); --glass-rim:rgba(160,190,255,.15); --grid:56px; } /* --- the ground ---------------------------------------------------------- */ .bg{ position:fixed; inset:0; z-index:-10; pointer-events:none; overflow:hidden; background:#010309; } .bg__base{ position:absolute; inset:0; background: radial-gradient(70% 55% at 50% 115%, rgba(5,70,216,.50) 0%, rgba(5,70,216,0) 70%), radial-gradient(50% 45% at 88% -8%, rgba(55,117,255,.26) 0%, rgba(55,117,255,0) 70%), radial-gradient(42% 40% at 4% 34%, rgba(5,62,189,.22) 0%, rgba(5,62,189,0) 70%), linear-gradient(180deg,#02040c 0%,#030a1c 55%,#020612 100%); } .bg__diag{ position:absolute; inset:-25%; background:repeating-linear-gradient(-62deg, rgba(55,117,255,0) 0px, rgba(55,117,255,.028) 46px, rgba(55,117,255,.028) 104px, rgba(55,117,255,0) 150px, rgba(55,117,255,0) 268px); } /* cursor light: moves by transform only, so nothing full-screen repaints */ .bg__spot{ position:absolute; left:0; top:0; opacity:0; transition:opacity .6s var(--ease); will-change:transform; } .bg__spot{ width:900px; height:900px; margin:-450px 0 0 -450px; background:radial-gradient(circle, rgba(55,117,255,.11) 0%, rgba(55,117,255,.04) 36%, rgba(55,117,255,0) 64%); } .bg.is-live .bg__spot{ opacity:1; } /* --- page chrome goes translucent ---------------------------------------- */ body{ background:#010309; } .nav{ background:rgba(2,5,14,.5); } .nav.is-stuck{ background:rgba(2,5,14,.78); } .band{ background:rgba(6,11,26,.42); } .foot{ background:rgba(2,5,14,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .hero .shade{ opacity:.8; } /* --- glass cards --------------------------------------------------------- */ :is(.panel,.case,.mode,.caps,.svc,.principles,.out,.reach__item,.kpi,.cmp,.rung__metric){ position:relative; isolation:isolate; background:linear-gradient(160deg, rgba(22,34,70,.50) 0%, rgba(7,12,28,.55) 100%); backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%); border-color:var(--glass-rim); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -24px rgba(0,0,0,.7); } .out{ background:linear-gradient(160deg, rgba(5,70,216,.30) 0%, rgba(7,12,28,.58) 70%); } /* sheen that follows the pointer across the glass, behind the text */ :is(.panel,.case,.mode,.caps,.svc,.principles,.out,.reach__item,.kpi,.cmp)::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:radial-gradient(440px circle at var(--gx,-999px) var(--gy,-999px), rgba(120,170,255,.06), rgba(120,170,255,0) 50%); opacity:0; transition:opacity .4s var(--ease); } /* a bright rim that catches the light where the pointer is */ :is(.panel,.case,.mode,.caps,.svc,.principles,.out,.reach__item,.kpi,.cmp)::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; padding:1px; background:radial-gradient(260px circle at var(--gx,-999px) var(--gy,-999px), rgba(150,190,255,.28), rgba(150,190,255,0) 62%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity:0; transition:opacity .4s var(--ease); } :is(.panel,.case,.mode,.caps,.svc,.principles,.out,.reach__item,.kpi,.cmp):hover::before, :is(.panel,.case,.mode,.caps,.svc,.principles,.out,.reach__item,.kpi,.cmp):hover::after{ opacity:1; } /* divider grids: the container is the glass, cells are clear, lines drawn per cell */ .caps,.svc,.principles,.case__body,.case__results,.out__grid{ gap:0; background:transparent; } .svc,.principles,.caps{ background:linear-gradient(160deg, rgba(22,34,70,.50) 0%, rgba(7,12,28,.55) 100%); } .caps li,.svc__item,.principle,.case__cell,.result,.out__cell{ background:transparent; box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line); } .caps li:hover,.svc__item:hover,.principle:hover{ background:rgba(255,255,255,.035); } .cmp__row--head{ background:rgba(255,255,255,.03); } .cmp__new{ background:rgba(5,70,216,.14); } .form select option{ background:#0a1022; color:var(--paper); } /* --- the lens: a soft light that follows the cursor ---------------------- */ .lens{ position:fixed; left:0; top:0; z-index:80; width:180px; height:180px; margin:-90px 0 0 -90px; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .6s var(--ease); will-change:transform; /* a feathered pool of light, screen-blended so text underneath stays sharp */ mix-blend-mode:screen; background:radial-gradient(circle, rgba(120,165,255,.10) 0%, rgba(90,140,255,.05) 38%, rgba(90,140,255,0) 70%); } .lens.is-on{ opacity:1; } .lens.is-text{ opacity:.4; } /* --- accessibility fallbacks --------------------------------------------- */ @media (hover:none), (pointer:coarse){ .lens,.bg__spot{ display:none; } } @media (prefers-reduced-motion: reduce){ .lens,.bg__spot{ display:none; } } @media (prefers-reduced-transparency: reduce){ :is(.panel,.case,.mode,.caps,.svc,.principles,.out,.reach__item,.kpi,.cmp,.rung__metric,.foot){ backdrop-filter:none; -webkit-backdrop-filter:none; background:#0a1022; } .lens{ display:none; } } @media (prefers-contrast: more){ :is(.panel,.case,.mode,.caps,.svc,.principles,.out,.reach__item,.kpi,.cmp){ background:#070b18; border-color:rgba(255,255,255,.4); } } /* --- review fixes -------------------------------------------------------- */ /* small uppercase labels were 4.2:1 on the dark ground; .6 clears AA at ~5.5:1 */ :root{ --text-faint:rgba(255,249,247,.60); } /* five services in a three-column grid: let the last one close the row */ @media (min-width:1040px){ .svc--3 .svc__item:last-child:nth-child(3n+2){ grid-column:span 2; } } /* phone menu — links used to be hidden outright below 640px */ .nav__menu{ display:none; } @media (max-width:640px){ .nav__menu{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 10px; margin-left:auto; border:1px solid var(--line-2); border-radius:12px; background:rgba(255,249,247,.04); cursor:pointer; } .nav__menu span{ display:block; height:1.5px; background:var(--paper); border-radius:2px; transition:transform var(--t-base) var(--ease); } .nav.is-open .nav__menu span:first-child{ transform:translateY(3.25px) rotate(45deg); } .nav.is-open .nav__menu span:last-child{ transform:translateY(-3.25px) rotate(-45deg); } .nav__links{ display:flex; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:8px var(--gut) 18px; /* solid: a blur can't reach the page from inside the nav's own glass */ background:#03070f; border-bottom:1px solid var(--line); box-shadow:0 24px 40px -20px rgba(0,0,0,.8); transform-origin:top; transform:scaleY(.96); opacity:0; visibility:hidden; transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base); } .nav.is-open .nav__links{ opacity:1; transform:none; visibility:visible; transition-delay:0s; } .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:1rem; color:var(--paper); } .nav__links a:last-child{ border-bottom:0; } .nav__links a::after{ display:none; } } /* form notice when the endpoint isn't connected yet */ .form__msg{ font-size:.875rem; line-height:1.6; padding:13px 15px; border-radius:10px; border:1px solid rgba(255,96,31,.5); background:rgba(255,96,31,.08); color:var(--paper); } .form__msg a{ color:var(--blue-500); } [hidden]{ display:none !important; } /* ========================================================================== Floating header — a rounded capsule, black easing into Laddr blue, with a glass pill that glides between the page links. ========================================================================== */ .nav, .nav.is-stuck{ background:transparent; border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none; padding:12px var(--gut) 0; pointer-events:none; /* the clear strip around the capsule never blocks the page */ } .nav__in{ pointer-events:auto; position:relative; max-width:calc(var(--shell) - 2 * var(--gut) + 44px); height:62px; padding:0 10px 0 22px; border-radius:999px; background:linear-gradient(100deg, rgba(0,0,0,.86) 0%, rgba(2,7,22,.84) 45%, rgba(5,30,92,.82) 100%); border:1px solid rgba(150,180,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px -14px rgba(0,0,0,.7); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); transition:box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease); } .nav.is-stuck .nav__in{ border-color:rgba(150,180,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px -16px rgba(0,0,0,.9); } /* page links sit on a quiet track; the glass pill slides underneath them */ .nav__links{ position:relative; gap:2px; padding:5px; border-radius:999px; } .nav__links a{ position:relative; z-index:1; padding:8px 15px; border-radius:999px; color:var(--text-muted); transition:color var(--t-base) var(--ease); } .nav__links a::after{ display:none; } .nav__links a:hover, .nav__links a.is-lit, .nav__links a[aria-current="page"]{ color:var(--paper); } .nav__glass{ position:absolute; z-index:0; left:0; top:0; width:0; height:0; border-radius:999px; pointer-events:none; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 100%); border:1px solid rgba(190,210,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px -8px rgba(5,70,216,.7); opacity:0; transition:transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .3s var(--ease); } .nav__glass.no-anim{ transition:none; } /* a soft glint that travels across the glass each time it moves */ .nav__glass::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 65%); background-size:250% 100%; background-position:120% 0; } .nav__glass.is-glint::after{ animation:glint .7s var(--ease); } @keyframes glint{ from{ background-position:120% 0; } to{ background-position:-20% 0; } } /* phones: capsule stays, the links open as a rounded panel under it */ @media (max-width:640px){ .nav{ padding:10px 12px 0; } .nav__in{ height:58px; padding:0 8px 0 18px; gap:12px; } .nav__glass{ border-radius:14px; } .nav__links{ position:absolute; gap:2px; margin:0; top:calc(100% + 8px); left:0; right:0; padding:8px; border-radius:22px; background:linear-gradient(160deg, #02050e 0%, #051a52 100%); border:1px solid rgba(150,180,255,.14); } .nav__links a{ padding:14px 18px; border-radius:14px; border-bottom:0; color:var(--text-muted); } .nav__links a:hover, .nav__links a.is-lit, .nav__links a[aria-current="page"]{ color:var(--paper); } .nav__menu{ border-radius:999px; } } @media (prefers-reduced-motion: reduce){ .nav__glass{ transition:opacity .2s linear; } .nav__glass.is-glint::after{ animation:none; } } /* scroll-edge fade: content dissolves as it slides up behind the floating capsule */ .nav::before{ content:""; position:absolute; left:0; right:0; top:0; height:48px; z-index:-1; background:linear-gradient(180deg, rgba(1,3,9,.9) 0%, rgba(1,3,9,.55) 45%, rgba(1,3,9,0) 100%); opacity:0; transition:opacity var(--t-slow) var(--ease); pointer-events:none; } .nav.is-stuck::before{ opacity:1; } /* ========================================================================== Pillar deck — three portrait glass cards that cycle in a loop until one is picked. The centre card faces the reader; the other two wait behind. ========================================================================== */ .deck{ position:relative; padding-top:clamp(12px, 2vw, 24px); overflow-x:clip; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); } /* a soft beam of light falling on the front card */ .deck__beam{ position:absolute; left:50%; top:-40px; z-index:0; pointer-events:none; width:min(560px, 90vw); height:min(620px, 120vw); transform:translateX(-50%); background:radial-gradient(50% 60% at 50% 0%, rgba(110,150,255,.26) 0%, rgba(55,117,255,.11) 45%, rgba(55,117,255,0) 75%); filter:blur(8px); } .deck__stage{ position:relative; z-index:1; display:grid; /* all three cards share one cell, so the stage */ grid-template-areas:"card"; /* is exactly as tall as the tallest card */ justify-items:center; touch-action:pan-y; } .pcard{ grid-area:card; position:relative; width:min(390px, 80vw); display:flex; flex-direction:column; gap:14px; padding:34px 30px 30px; border-radius:22px; background:linear-gradient(180deg, rgba(20,72,210,.46) 0%, rgba(10,44,140,.36) 45%, rgba(8,20,62,.66) 80%, rgba(6,14,40,.74) 100%); border:1px solid rgba(90,140,255,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 30px 60px -30px rgba(0,0,0,.85); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); cursor:pointer; transform-origin:50% 60%; transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s cubic-bezier(.22,.61,.36,1), filter .7s cubic-bezier(.22,.61,.36,1), border-color .4s var(--ease); will-change:transform; } /* four small corner studs, like fittings on a glass panel */ .pcard::after{ content:""; position:absolute; inset:12px; pointer-events:none; border-radius:12px; background: radial-gradient(circle, rgba(255,255,255,.65) 0 1.2px, transparent 1.8px) left top / 8px 8px no-repeat, radial-gradient(circle, rgba(255,255,255,.65) 0 1.2px, transparent 1.8px) right top / 8px 8px no-repeat, radial-gradient(circle, rgba(255,255,255,.65) 0 1.2px, transparent 1.8px) left bottom / 8px 8px no-repeat, radial-gradient(circle, rgba(255,255,255,.65) 0 1.2px, transparent 1.8px) right bottom / 8px 8px no-repeat; } /* positions: front, waiting left, waiting right */ .pcard[data-pos="c"]{ transform:translateX(0) scale(1); opacity:1; z-index:3; filter:none; cursor:pointer; } .pcard[data-pos="c"]:hover{ border-color:rgba(130,175,255,.5); } .pcard[data-pos="c"]:active{ transform:scale(.985); transition-duration:.1s; } .pcard[data-pos="l"]{ transform:translateX(-66%) scale(.86); opacity:.55; z-index:2; filter:brightness(.72) saturate(.85); } .pcard[data-pos="r"]{ transform:translateX(66%) scale(.86); opacity:.55; z-index:2; filter:brightness(.72) saturate(.85); } .pcard[data-pos="l"]:hover, .pcard[data-pos="r"]:hover{ opacity:.8; border-color:rgba(110,160,255,.45); } .pcard.is-wrapping{ z-index:1; } /* the card travelling round the back never crosses the front */ .pcard[data-pos="l"] *, .pcard[data-pos="r"] *{ pointer-events:none; } .pcard__icon{ align-self:center; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#dbe5ff; background:radial-gradient(circle at 50% 30%, rgba(90,140,255,.34), rgba(5,70,216,.10)); border:1px solid rgba(120,165,255,.36); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); margin-bottom:4px; } .pcard__icon svg{ width:24px; height:24px; } .pcard__label{ align-self:center; font-size:.6875rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:#9dbbff; /* lighter blue so the small label stays readable on the bluer glass */ } .pcard__title{ margin:0; text-align:center; font-family:var(--f-display); font-weight:600; font-size:clamp(1.25rem, 2vw, 1.5rem); line-height:1.18; letter-spacing:-.022em; text-wrap:balance; } .pcard__desc{ text-align:center; color:var(--text-muted); font-size:.9rem; line-height:1.6; } .pcard__list{ list-style:none; margin:6px 0 0; padding:0; border-top:1px solid var(--line); } .pcard__list li{ display:flex; gap:11px; align-items:flex-start; padding:11px 2px; border-bottom:1px solid var(--line); font-size:.875rem; line-height:1.5; color:rgba(255,249,247,.84); } .pcard__list li::before{ content:""; flex:none; width:5px; height:5px; margin-top:.6em; background:#7fa6ff; transform:rotate(45deg); } .pcard__metric{ align-self:center; margin-top:auto; display:inline-flex; align-items:baseline; gap:10px; padding:9px 16px; border-radius:999px; border:1px solid rgba(110,160,255,.32); background:rgba(5,70,216,.18); } .pcard__metric b, .pcard__metric span{ white-space:nowrap; } .pcard__metric b{ font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .pcard__metric span{ font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); } /* tabs: a small glass switch under the deck, like a segmented control */ .deck__tabs{ position:relative; z-index:2; display:flex; justify-content:center; gap:4px; width:max-content; max-width:100%; margin:34px auto 0; padding:5px; border-radius:999px; background:rgba(8,13,30,.6); border:1px solid rgba(170,195,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .deck__tab{ position:relative; overflow:hidden; border:1px solid transparent; background:transparent; cursor:pointer; padding:9px 20px; border-radius:999px; font-size:.8125rem; font-weight:600; color:var(--text-muted); transition:color var(--t-base) var(--ease), background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .deck__tab:hover{ color:var(--paper); } .deck__tab[aria-selected="true"]{ color:var(--paper); background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); border-color:rgba(190,210,255,.18); } /* while the loop runs, the active tab shows how long until the next card */ .deck__tab i{ position:absolute; left:14px; right:14px; bottom:4px; height:1.5px; border-radius:2px; background:rgba(120,165,255,.9); transform:scaleX(0); transform-origin:left; opacity:0; } .deck.is-playing .deck__tab[aria-selected="true"] i{ opacity:1; animation:deckTimer var(--deck-ms, 4200ms) linear forwards; } .deck.is-paused .deck__tab[aria-selected="true"] i{ animation-play-state:paused; } @keyframes deckTimer{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } .deck__hint{ margin-top:14px; text-align:center; font-size:.75rem; color:var(--text-faint); } @media (max-width:640px){ .pcard{ width:min(340px, 82vw); padding:30px 22px 24px; } .pcard[data-pos="l"]{ transform:translateX(-78%) scale(.84); } .pcard__metric{ flex-direction:column; align-items:center; gap:3px; border-radius:16px; padding:9px 20px; } .pcard[data-pos="r"]{ transform:translateX(78%) scale(.84); } .deck__tab{ padding:9px 16px; } } @media (prefers-reduced-motion: reduce){ .pcard{ transition:opacity .25s linear; } .deck__tab i{ display:none; } } /* "book a discovery call" cue — only on the card in front */ .pcard__cta{ align-self:center; margin-top:-2px; font-size:.75rem; font-weight:600; letter-spacing:.02em; color:#9dbbff; opacity:0; transform:translateY(4px); transition:opacity .4s var(--ease), transform .4s var(--ease); } .pcard[data-pos="c"] .pcard__cta{ opacity:.85; transform:none; } .pcard[data-pos="c"]:hover .pcard__cta{ opacity:1; } .pcard[data-pos="c"]:hover .pcard__cta .arrow{ transform:translateX(4px); } /* the pop-up: a glass card over a softly blurred, dimmed page */ .bookpop{ width:min(440px, calc(100vw - 32px)); padding:30px 28px 26px; border-radius:22px; color:var(--paper); background:linear-gradient(180deg, rgba(20,72,210,.55) 0%, rgba(8,24,72,.88) 60%, rgba(6,14,40,.94) 100%); border:1px solid rgba(110,160,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.9); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); } .bookpop[open]{ animation:popIn .38s cubic-bezier(.22,.61,.36,1); } .bookpop::backdrop{ background:rgba(1,3,9,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } @keyframes popIn{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } } .bookpop .eyebrow{ margin-bottom:12px; } .bookpop__title{ margin:0; font-family:var(--f-display); font-weight:600; font-size:1.35rem; line-height:1.2; letter-spacing:-.022em; text-wrap:balance; } .bookpop__text{ margin-top:12px; color:var(--text-muted); font-size:.9375rem; line-height:1.6; } .bookpop__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } @media (prefers-reduced-motion: reduce){ .bookpop[open]{ animation:none; } } /* ========================================================================== Client endorsements — glass cards gliding past in an endless loop. JS copies the cards so the belt is seamless; without JS (or with reduced motion) they sit as a swipeable row instead. ========================================================================== */ .voices.is-belt{ display:block; margin-inline:calc(var(--gut) * -1); overflow:hidden; padding-block:8px 18px; -webkit-mask:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } .voices__track{ display:flex; gap:20px; width:max-content; padding-inline:10px; will-change:transform; } .voices.is-belt .voice{ flex:0 0 auto; width:min(380px, 78vw); padding:28px 26px 24px; border:1px solid rgba(90,140,255,.24); border-radius:20px; background:linear-gradient(170deg, rgba(20,72,210,.26) 0%, rgba(10,30,90,.30) 45%, rgba(6,14,40,.62) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 22px 44px -28px rgba(0,0,0,.8); transition:border-color .35s var(--ease), transform .35s var(--ease); } .voices.is-belt .voice:hover{ border-color:rgba(130,170,255,.45); transform:translateY(-3px); } .voices.is-belt .voice blockquote{ font-size:.97rem; } .voices.is-belt .voice figcaption{ padding-top:16px; border-top:1px solid rgba(255,255,255,.08); } /* reduced motion: no belt — a row you can swipe or scroll through */ @media (prefers-reduced-motion: reduce){ .voices.is-belt{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask:none; mask:none; padding-inline:var(--gut); } .voices.is-belt .voice{ scroll-snap-align:start; } .voices.is-belt .voice[aria-hidden="true"]{ display:none; } }