/* ============================================================================ SDR CONSULTING INC. - DESIGN SYSTEM Fonts: Fraunces (display) + Outfit (body/UI) via Google Fonts Palette: Navy #192451 (ink) · Purple #602495 · Blue #3891FE All text is navy or a navy tint - never black. ========================================================================== */ /* ---- 1. TOKENS ---------------------------------------------------------- */ :root{ /* color */ --ink:#192451; --ink-soft:#4A5170; --ink-faint:#8B91AC; --purple:#602495; --purple-dark:#4A1C73; --purple-tint:#F4EDFA; --blue:#3891FE; --blue-dark:#1F6FD6; --blue-tint:#EAF3FF; --navy:#192451; --navy-soft:#232F63; --navy-deep:#111A3E; --bg:#FFFFFF; --bg-cream:#FAF9F6; --bg-soft:#F7F8FC; --bg-lavender:#F9F6FC; --line:rgba(25,36,81,.09); --line-strong:rgba(25,36,81,.16); --white:#FFFFFF; --success:#1B8A5A; --warn:#B7791F; --danger:#C0392B; --bold:#192451; /* color of /; flipped on dark surfaces */ --header-h:92px; /* measured at runtime by global.js; this is the fallback */ --grad:linear-gradient(135deg,#602495 0%,#3891FE 100%); --grad-rev:linear-gradient(315deg,#602495 0%,#3891FE 100%); --grad-soft:linear-gradient(135deg,rgba(96,36,149,.07),rgba(56,145,254,.07)); /* type */ --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-body:"Outfit",-apple-system,"Segoe UI",sans-serif; --fs-display:clamp(2.75rem,5.6vw,4.5rem); --fs-h1:clamp(2.3rem,4.6vw,3.5rem); --fs-h2:clamp(1.85rem,3.2vw,2.6rem); --fs-h3:clamp(1.25rem,1.8vw,1.45rem); --fs-lead:clamp(1.1rem,1.5vw,1.25rem); --fs-body:1.0625rem; --fs-small:.9375rem; --fs-tiny:.8125rem; /* space */ --section-y:clamp(4.5rem,9vw,8rem); --container:1200px; --container-wide:1360px; --container-prose:46rem; --gutter:clamp(1.25rem,4vw,2.5rem); /* radius */ --r-sm:.625rem; --r-md:1rem; --r-lg:1.5rem; --r-xl:2rem; --r-pill:999px; /* shadow - always navy-tinted, soft & diffused */ --shadow-sm:0 1px 2px rgba(25,36,81,.04),0 6px 20px rgba(25,36,81,.06); --shadow-md:0 2px 4px rgba(25,36,81,.04),0 16px 40px rgba(25,36,81,.09); --shadow-lift:0 4px 10px rgba(25,36,81,.05),0 28px 60px rgba(25,36,81,.13); --shadow-glow:0 10px 40px rgba(96,36,149,.25); /* motion */ --ease:cubic-bezier(.32,.72,0,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --t-fast:.2s var(--ease); --t-med:.45s var(--ease); --t-slow:.8s var(--ease); } /* ---- 2. RESET & BASE ----------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; /* No overflow-x here. `overflow-x:hidden` on body turns it into a scroll container, which silently breaks `position:sticky` on the header - it scrolls away instead of pinning. Horizontal overflow is contained by `overflow-x:clip` on , which does not create a scroll container. */ } img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} ::selection{background:rgba(96,36,149,.18);color:var(--ink)} h1,h2,h3,.display{ font-family:var(--font-display); font-weight:560; line-height:1.12; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; } h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);font-weight:580} h4,h5{font-family:var(--font-body);font-weight:600;color:var(--ink)} p{color:var(--ink-soft)} /* Bold text is normally darker than the body copy around it. On dark surfaces that would render navy-on-navy, so those containers flip --bold to white and every nested / follows automatically. */ strong,b{color:var(--bold);font-weight:600} .display{font-size:var(--fs-display)} /* gradient italic accent inside display headings */ .accent-i{ font-style:italic; font-weight:500; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; } /* Dark surfaces - declared together so a new one is never forgotten. Some of these classes live in the per-page stylesheets; the token is set here because custom properties inherit and load order does not matter for them. */ .topbar, .mega-feature, .cta-banner, .section--navy, .site-footer, .flagship, /* home.css */ .cred-bar, /* about.css */ .fm-badge, /* about.css */ .offer-banner, /* services.css + industries.css */ .calc-feature /* calculators.css */ {--bold:#FFFFFF} .lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft)} .small{font-size:var(--fs-small)} .tnum{font-variant-numeric:tabular-nums} /* eyebrow */ .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:var(--fs-tiny);font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--purple); margin-bottom:1.1rem; } .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)} .eyebrow--center{justify-content:center} .eyebrow--pill{ gap:.45rem;padding:.42rem .95rem;border-radius:var(--r-pill); background:var(--purple-tint);border:1px solid rgba(96,36,149,.14); } .eyebrow--pill::before{width:7px;height:7px;border-radius:50%} .eyebrow--light{color:#CBB7E6} .eyebrow--light::before{background:linear-gradient(135deg,#B78BE0,#7FB8FF)} /* ---- 3. LAYOUT ----------------------------------------------------------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .container--wide{max-width:var(--container-wide)} .container--prose{max-width:var(--container-prose)} .section{position:relative;padding-block:var(--section-y)} .section--tight{padding-block:clamp(3rem,6vw,5rem)} .section--cream{background:var(--bg-cream)} .section--soft{background:var(--bg-soft)} .section--lavender{background:var(--bg-lavender)} .section--navy{background:var(--navy);color:#fff} .section--navy h1,.section--navy h2,.section--navy h3{color:#fff} .section--navy p{color:rgba(255,255,255,.72)} .section-head{max-width:52rem;margin-bottom:clamp(2.5rem,5vw,4rem)} .section-head--center{margin-inline:auto;text-align:center} .section-head p{margin-top:1rem} .grid{display:grid;gap:1.5rem} @media(min-width:768px){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} } @media(min-width:768px) and (max-width:1023px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} } .skip-link{ position:absolute;left:1rem;top:-4rem;z-index:200; padding:.7rem 1.2rem;background:var(--navy);color:#fff; border-radius:var(--r-sm);font-weight:600;transition:top var(--t-fast); } .skip-link:focus{top:1rem} /* Decorative kit. The class names are doubled deliberately. Several dark panels use a `.panel > * { position: relative }` rule to lift their content above the background wash, and that rule has the same specificity as a plain `.blob`, so it was winning and dragging these purely decorative spans into the layout - in a grid they were claiming a whole cell. Doubling the selector keeps them absolutely positioned no matter what a container tries to do. */ .blob.blob,.dot-grid.dot-grid,.ring-deco.ring-deco{position:absolute} /* Contain the decoration at its own section. `overflow-x:clip` on does not reliably stop these from widening the page - some pages could still be dragged sideways by a blurred blob. `clip` (not `hidden`) is deliberate: it clips without creating a scroll container, so sticky sidebars keep working. */ section:has(> .blob), section:has(> .dot-grid), section:has(> .ring-deco){overflow:clip} .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;pointer-events:none;z-index:0} .blob--purple{background:radial-gradient(circle,rgba(96,36,149,.35),transparent 65%)} .blob--blue{background:radial-gradient(circle,rgba(56,145,254,.32),transparent 65%)} .blob--warm{background:radial-gradient(circle,rgba(56,145,254,.2),rgba(96,36,149,.18) 55%,transparent 75%)} .dot-grid{ position:absolute;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(25,36,81,.14) 1px,transparent 1px); background-size:20px 20px; -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent); mask-image:radial-gradient(closest-side,#000 40%,transparent); } .ring-deco{ position:absolute;border-radius:50%;pointer-events:none;z-index:0; border:1.5px dashed rgba(96,36,149,.22); } @media(prefers-reduced-motion:no-preference){ .ring-deco{animation:spin 40s linear infinite} .float-slow{animation:floaty 7s ease-in-out infinite} .float-slower{animation:floaty 10s ease-in-out infinite reverse} } @keyframes spin{to{transform:rotate(360deg)}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .section>.container{position:relative;z-index:1} /* ---- 4. BUTTONS ---------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;gap:.7rem; padding:.95rem 1.7rem;border-radius:var(--r-pill); font-weight:600;font-size:1rem;line-height:1;white-space:nowrap; transition:transform var(--t-fast),box-shadow var(--t-fast),background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast); } .btn:active{transform:scale(.97)} .btn .btn-ic{ display:inline-flex;align-items:center;justify-content:center; width:2rem;height:2rem;margin:-.35rem -.85rem -.35rem 0; border-radius:50%;background:rgba(255,255,255,.18);flex:none; transition:transform .35s var(--ease-spring); } .btn .btn-ic svg{width:14px;height:14px} .btn:hover .btn-ic{transform:translate(3px,-1px) scale(1.06)} .btn--grad{ background:var(--grad);color:#fff; box-shadow:0 6px 22px rgba(96,36,149,.28); position:relative;overflow:hidden; } .btn--grad::before{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 55%); opacity:0;transition:opacity var(--t-fast); } .btn--grad:hover{box-shadow:0 10px 30px rgba(96,36,149,.4);transform:translateY(-2px)} .btn--grad:hover::before{opacity:1} .btn--grad:active{transform:scale(.97)} .btn--outline{ border:1.5px solid var(--line-strong);color:var(--ink);background:rgba(255,255,255,.6); } .btn--outline .btn-ic{background:rgba(25,36,81,.07)} .btn--outline:hover{border-color:var(--ink);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)} .btn--light{background:#fff;color:var(--ink);box-shadow:0 6px 22px rgba(0,0,0,.18)} .btn--light .btn-ic{background:var(--purple-tint)} .btn--light:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)} .btn--ghost{ padding:.4rem .2rem;border-radius:.3rem;color:var(--purple);font-weight:600;gap:.45rem; } .btn--ghost svg{width:15px;height:15px;transition:transform .35s var(--ease-spring)} .btn--ghost:hover svg{transform:translateX(4px)} .btn--sm{padding:.7rem 1.25rem;font-size:var(--fs-small)} .btn--lg{padding:1.15rem 2.1rem;font-size:1.08rem} :focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:4px} .btn:focus-visible{outline-offset:3px} /* ---- 5. HEADER / NAV ------------------------------------------------------ */ .topbar{ background:var(--navy);color:rgba(255,255,255,.85); font-size:var(--fs-tiny);position:relative;z-index:60; } .topbar .container--wide{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px} .topbar a{display:inline-flex;align-items:center;gap:.4rem;transition:color var(--t-fast)} .topbar a:hover{color:#fff} .topbar svg{width:13px;height:13px} .topbar-group{display:flex;align-items:center;gap:1.4rem} @media(max-width:820px){.topbar .hide-m{display:none}} /* Live open/closed indicator in the topbar. The dot carries the state; the text says the same thing, so color is never the only signal. */ .office-status{display:inline-flex;align-items:center;gap:.45rem} .oh-dot{ width:7px;height:7px;border-radius:50%;flex:none; background:rgba(255,255,255,.4); transition:background var(--t-fast),box-shadow var(--t-fast); } .office-status.is-open .oh-dot{background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.22)} .office-status.is-closed .oh-dot{background:rgba(255,255,255,.34)} @media(prefers-reduced-motion:no-preference){ .office-status.is-open .oh-dot{animation:oh-pulse 2.6s ease-in-out infinite} } @keyframes oh-pulse{ 0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.22)} 50% {box-shadow:0 0 0 5px rgba(74,222,128,.10)} } .site-header{ position:sticky;top:0;z-index:100; padding:.8rem 0; pointer-events:none; /* No background. The island floats directly on the hero, which is pulled up behind it by the negative margin below; each hero adds --header-h to its own top padding so the content still clears the bar. Giving the header a background of its own is what produced the visible band before. */ background:transparent; margin-bottom:calc(-1 * var(--header-h)); } .header-island{ pointer-events:auto; max-width:var(--container-wide);margin-inline:auto; padding-inline:clamp(.8rem,2vw,1.25rem); } .header-inner{ display:flex;align-items:center;justify-content:space-between;gap:1rem; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); border:1px solid rgba(25,36,81,.08); border-radius:22px; padding:.55rem .65rem .55rem 1.1rem; box-shadow:0 2px 6px rgba(25,36,81,.04),0 14px 44px rgba(25,36,81,.08); transition:box-shadow var(--t-med),background-color var(--t-med); } .is-scrolled .header-inner{box-shadow:0 4px 10px rgba(25,36,81,.06),0 22px 60px rgba(25,36,81,.13);background:rgba(255,255,255,.92)} .brand{display:inline-flex;align-items:center;gap:.65rem;flex:none} .brand img{width:auto;height:44px} .nav-desktop{display:flex;align-items:center;gap:.15rem;position:relative} @media(max-width:1099px){.nav-desktop{display:none}} .nav-item{position:relative} /* wide panels anchor to the nav strip, not the individual item, so they can never extend past the viewport edge */ .nav-item--wide{position:static} .nav-link{ display:inline-flex;align-items:center;gap:.35rem; padding:.62rem .85rem;border-radius:var(--r-pill); font-weight:530;font-size:.99rem;color:var(--ink); transition:background-color var(--t-fast),color var(--t-fast); } .nav-link:hover,.nav-item.open>.nav-link,.nav-link.is-active{background:rgba(96,36,149,.07);color:var(--purple)} .nav-link .chev{width:13px;height:13px;transition:transform var(--t-fast);opacity:.6} .nav-item.open .chev{transform:rotate(180deg)} .header-cta{display:flex;align-items:center;gap:.4rem} .header-cta .btn{padding:.8rem 1.35rem} @media(max-width:1099px){.header-cta .btn--grad{display:none}} /* mega panels */ .mega{ position:absolute;top:calc(100% + 10px);left:50%; transform:translate(-50%,10px) scale(.985); opacity:0;visibility:hidden; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s .28s; background:#fff; border:1px solid rgba(25,36,81,.08); border-radius:var(--r-lg); box-shadow:0 6px 16px rgba(25,36,81,.06),0 40px 90px rgba(25,36,81,.16); padding:1.4rem; z-index:110; } .nav-item.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity .28s var(--ease),transform .28s var(--ease)} .mega--services{width:min(920px,calc(100vw - 2.5rem))} .mega--md{width:min(640px,calc(100vw - 2.5rem))} /* Resources carries ten links. Three shorter columns read far better than one stubby column beside one very long one. */ .mega--wide{width:min(1120px,calc(100vw - 2.5rem))} .mega--wide .mega-grid{grid-template-columns:1fr 1fr 1fr 1.05fr} @media(max-width:1240px){ .mega--wide{width:min(940px,calc(100vw - 2.5rem))} .mega--wide .mega-grid{grid-template-columns:1fr 1fr 1.1fr} .mega--wide .mega-col--tools{grid-column:1 / -2} .mega--wide .mega-col--tools .mega-col-links{display:grid;grid-template-columns:1fr 1fr} } .mega-grid{display:grid;gap:1.4rem} .mega--services .mega-grid{grid-template-columns:1.05fr 1.05fr 1.15fr} .mega--md .mega-grid{grid-template-columns:1fr 1fr} .mega-col-title{ font-size:var(--fs-tiny);font-weight:650;text-transform:uppercase; letter-spacing:.13em;color:var(--ink-faint); padding:.35rem .6rem .55rem; } .mega-link{ display:flex;align-items:flex-start;gap:.75rem; padding:.6rem;border-radius:var(--r-md); transition:background-color var(--t-fast); } .mega-link:hover{background:var(--bg-soft)} .mega-link .mi{ flex:none;width:38px;height:38px;border-radius:12px; display:grid;place-items:center; background:var(--purple-tint);color:var(--purple); transition:transform .35s var(--ease-spring),background-color var(--t-fast),color var(--t-fast); } .mega-link:hover .mi{transform:translateY(-2px) scale(1.05);background:var(--grad);color:#fff} .mega-link .mi svg{width:19px;height:19px} .mega-link b{display:block;font-weight:600;font-size:.98rem;line-height:1.3;color:var(--ink)} .mega-link span{display:block;font-size:.83rem;color:var(--ink-faint);line-height:1.4;margin-top:.15rem} .mega-feature{ position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem; border-radius:var(--r-md);padding:1.3rem;min-height:220px; background:var(--navy);color:#fff; } /* Photo layer sits underneath; the gradient above it keeps the text legible. */ .mf-bg{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0;opacity:.55; } .mega-feature::before{ content:"";position:absolute;inset:0;z-index:1; background:radial-gradient(120% 90% at 85% 0%,rgba(56,145,254,.5),transparent 55%),radial-gradient(110% 90% at 15% 110%,rgba(96,36,149,.65),transparent 60%); } /* With a photo behind, add a bottom-up scrim so the copy never loses contrast */ .mega-feature:has(.mf-bg)::before{ background: linear-gradient(180deg,rgba(17,26,62,.35) 0%,rgba(17,26,62,.86) 62%,rgba(17,26,62,.96) 100%), radial-gradient(110% 90% at 15% 110%,rgba(96,36,149,.5),transparent 60%); } .mega-feature>*{position:relative;z-index:2} /* Cut-out artwork (the e-book cover). It sits in the empty upper half of the card rather than clipped into a corner, which is where it was before. */ .mf-object{ align-self:center;margin-bottom:auto; width:min(148px,52%);height:auto; transform:rotate(-4deg); filter:drop-shadow(0 16px 28px rgba(0,0,0,.5)); transition:transform var(--t-med); } .mega-feature:hover .mf-object{transform:rotate(0deg) translateY(-5px) scale(1.03)} .mega-feature .tag{font-size:.72rem;font-weight:650;text-transform:uppercase;letter-spacing:.14em;color:#9CC5FF} .mega-feature b{font-family:var(--font-display);font-size:1.25rem;font-weight:560;line-height:1.25;color:#fff} /* :not(.btn) matters - the call to action is a , and without the guard it would inherit this muted white and vanish against the white button. */ .mega-feature>span:not(.tag):not(.btn){font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.45} .mega-feature .btn{margin-top:.6rem;align-self:flex-start;color:var(--ink)} .mega-footer{ display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-top:1.1rem;padding:.85rem .6rem .1rem;border-top:1px solid var(--line); font-size:var(--fs-small);color:var(--ink-soft); } .mega-footer a{color:var(--purple);font-weight:600;display:inline-flex;gap:.35rem;align-items:center} .mega-footer a svg{width:14px;height:14px} /* mobile nav */ .nav-burger{ display:none;width:44px;height:44px;border-radius:14px; place-items:center;position:relative;z-index:130; background:var(--bg-soft); } @media(max-width:1099px){.nav-burger{display:grid}} .nav-burger span{ position:absolute;left:12px;right:12px;height:2px;border-radius:2px; background:var(--ink);transition:transform .4s var(--ease),opacity .3s; } .nav-burger span:nth-child(1){top:16px} .nav-burger span:nth-child(2){top:22px} .nav-burger span:nth-child(3){top:28px} .nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-open .nav-burger span:nth-child(2){opacity:0} .nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mobile-nav{ position:fixed;inset:0;z-index:120; background:rgba(250,249,246,.94); -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px); /* Clear the topbar + header the panel opens beneath. Derived from the measured header height so it stays right when the bar is shorter on small screens; the 3.4rem covers the topbar and a little breathing room. */ padding:calc(var(--header-h) + 3.4rem) var(--gutter) 2.5rem; overflow-y:auto; opacity:0;visibility:hidden;transform:translateY(-12px); transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s; } .nav-open .mobile-nav{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)} .nav-open{overflow:hidden} /* The logo AND the close button both live in the header, and the overlay was covering it -- so the panel opened with a blank strip on top and no way to close it except Escape. Lift the header above the overlay while it is open. */ /* `position:fixed` is not cosmetic. Locking the page with `.nav-open{overflow:hidden}` turns into a scroll container, which silently breaks `position:sticky`: opened after scrolling, the header dropped to its document position far above the viewport and the logo vanished. Pinning removes the dependency on sticky entirely. */ .nav-open .site-header{position:fixed;top:0;left:0;right:0;z-index:130} .mobile-nav .m-group{border-bottom:1px solid var(--line)} .mobile-nav .m-top{ width:100%;display:flex;align-items:center;justify-content:space-between; padding:1.05rem .2rem;font-family:var(--font-display);font-size:1.35rem;font-weight:560;color:var(--ink); } .mobile-nav .m-top .chev{width:18px;height:18px;transition:transform var(--t-fast);opacity:.55} .mobile-nav .m-group.open .m-top .chev{transform:rotate(180deg)} .mobile-nav .m-sub{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease); } .mobile-nav .m-group.open .m-sub{grid-template-rows:1fr} .mobile-nav .m-sub-inner{overflow:hidden} .mobile-nav .m-sub a{ display:flex;align-items:center;gap:.6rem; padding:.6rem .35rem;color:var(--ink-soft);font-weight:500; } .mobile-nav .m-sub a:hover{color:var(--purple)} .mobile-nav .m-sub .m-sub-label{font-size:var(--fs-tiny);text-transform:uppercase;letter-spacing:.13em;color:var(--ink-faint);font-weight:650;padding:.9rem .35rem .3rem} .mobile-nav .m-cta{margin-top:1.8rem;display:flex;flex-direction:column;gap:.8rem} .mobile-nav .m-cta .btn{justify-content:center} @media(prefers-reduced-motion:no-preference){ .nav-open .m-stagger{animation:mnav .6s var(--ease) backwards} .nav-open .m-stagger:nth-child(2){animation-delay:.05s} .nav-open .m-stagger:nth-child(3){animation-delay:.1s} .nav-open .m-stagger:nth-child(4){animation-delay:.15s} .nav-open .m-stagger:nth-child(5){animation-delay:.2s} .nav-open .m-stagger:nth-child(6){animation-delay:.25s} .nav-open .m-stagger:nth-child(7){animation-delay:.3s} .nav-open .m-stagger:nth-child(8){animation-delay:.35s} } @keyframes mnav{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* ---- 6. CARDS (double-bezel) --------------------------------------------- */ .shell{ background:rgba(25,36,81,.035); border:1px solid rgba(25,36,81,.07); border-radius:var(--r-xl); padding:.45rem; } .shell--grad{background:var(--grad);border-color:transparent} .card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--shadow-sm); transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med); } .shell .card{border-radius:calc(var(--r-xl) - .45rem);height:100%;box-shadow:none;border-color:rgba(25,36,81,.06)} a.card{display:block} .card-hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(96,36,149,.2)} .card-topline::after{ content:"";position:absolute;top:-1px;left:1.6rem;right:60%;height:2.5px;border-radius:3px; background:var(--grad);opacity:0;transition:opacity var(--t-med),right var(--t-med); } .card-topline:hover::after{opacity:1;right:1.6rem} .card .icon-chip{ width:52px;height:52px;border-radius:16px; display:grid;place-items:center;margin-bottom:1.15rem; background:var(--purple-tint);color:var(--purple); transition:transform .4s var(--ease-spring),background-color var(--t-med),color var(--t-med); } .card:hover .icon-chip{transform:translateY(-3px) rotate(-4deg) scale(1.05);background:var(--grad);color:#fff} .icon-chip svg{width:25px;height:25px} .icon-chip--blue{background:var(--blue-tint);color:var(--blue-dark)} .card h3{margin-bottom:.55rem} .card p{font-size:var(--fs-small);line-height:1.6} .card .btn--ghost{margin-top:1rem} /* stat */ .stat b{display:block;font-family:var(--font-display);font-weight:560;font-size:clamp(2.2rem,3.6vw,3rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.35rem} .stat span{font-size:var(--fs-small);color:var(--ink-soft);font-weight:500} /* chips */ .chip{ display:inline-flex;align-items:center;gap:.45rem; padding:.5rem 1rem;border-radius:var(--r-pill); background:#fff;border:1px solid var(--line-strong); font-size:var(--fs-small);font-weight:550;color:var(--ink); transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast); } a.chip:hover{border-color:var(--purple);box-shadow:var(--shadow-sm);transform:translateY(-2px)} .chip svg{width:15px;height:15px;color:var(--purple)} .chip--tint{background:var(--purple-tint);border-color:transparent;color:var(--purple)} /* check list */ .checklist{display:grid;gap:.8rem} .checklist li{display:flex;gap:.75rem;align-items:flex-start;color:var(--ink-soft)} .checklist li b{color:var(--ink)} .checklist .ck{ flex:none;width:22px;height:22px;margin-top:.15rem;border-radius:50%; display:grid;place-items:center;background:var(--grad);color:#fff; } .checklist .ck svg{width:11px;height:11px} /* ---- 7. MARQUEE ----------------------------------------------------------- */ .marquee{overflow:hidden;position:relative;--fade:80px} .marquee::before,.marquee::after{ content:"";position:absolute;top:0;bottom:0;width:var(--fade);z-index:2;pointer-events:none; } .marquee::before{left:0;background:linear-gradient(90deg,var(--marquee-bg,#fff),transparent)} .marquee::after{right:0;background:linear-gradient(270deg,var(--marquee-bg,#fff),transparent)} /* The track holds FOUR identical sets of badges and slides by exactly one set. Two details make it loop without a visible jump: 1. Spacing is a right margin on each child, not `gap`. With `gap`, the track is 4 sets plus (4n-1) gaps, so a 25% shift lands half a gap short and the strip visibly snaps back every cycle. A trailing margin on every child makes the width a clean multiple of one set, so 25% is exact. 2. Four sets, not two. One set is narrower than a wide viewport, so after sliding a single set width a two-set track ran out of badges and left a blank stretch before restarting. Three sets always remain on screen. */ .marquee-track{display:flex;align-items:center;width:max-content;--mq-gap:clamp(2.5rem,5vw,4.5rem)} .marquee-track>*{margin-inline-end:var(--mq-gap);flex:none} @media(prefers-reduced-motion:no-preference){ .marquee-track{animation:marquee 60s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} } @media(prefers-reduced-motion:reduce){ .marquee-track{flex-wrap:wrap;width:100%;justify-content:center;row-gap:1.5rem} .marquee-track>*:nth-child(n+8){display:none} } @keyframes marquee{to{transform:translateX(-25%)}} .marquee img{ height:56px;width:auto;filter:grayscale(1) opacity(.55); transition:filter var(--t-med),transform var(--t-med); } .marquee img:hover{filter:none;transform:scale(1.06)} /* ---- 8. TESTIMONIALS ------------------------------------------------------ */ .t-track{ display:flex;gap:1.5rem;overflow-x:auto; scroll-snap-type:x mandatory; padding:0.5rem .25rem 1.5rem; scrollbar-width:none; } .t-track::-webkit-scrollbar{display:none} .t-card{ scroll-snap-align:start;flex:0 0 min(420px,86vw); display:flex;flex-direction:column;gap:1.1rem; } .stars{display:inline-flex;gap:.2rem;flex:none} .stars svg{width:17px;height:17px;fill:url(#star-grad) var(--purple);stroke:none;flex:none} /* The color after the url() is a required fallback, not decoration. The gradient lives in a zero-sized -- and forced display:block on it, so the brand mark lost its flex centering and sat in the corner of the chip. */ .t-meta>div span{display:block;font-size:.8rem;color:var(--ink-faint)} /* The review platform is shown as its own brand mark rather than its name. The name stays in the accessibility tree via a visually-hidden span. */ .t-logo{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:34px;height:34px;border-radius:10px; background:#fff;border:1px solid var(--line); box-shadow:var(--shadow-sm); } .t-logo svg,.t-logo img{width:20px;height:20px;display:block} .t-nav{display:flex;gap:.6rem} .t-btn{ width:46px;height:46px;border-radius:50%; border:1.5px solid var(--line-strong);display:grid;place-items:center;color:var(--ink); transition:all var(--t-fast);background:#fff; } .t-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-2px)} .t-btn svg{width:17px;height:17px} .t-btn:disabled{opacity:.35;pointer-events:none} /* Review wall. CSS multi-column was leaving one column running far past the others; a grid keeps every row level and, at 12 cards, divides evenly at 3, 2 and 1 columns so nothing is ever left dangling on its own. */ .t-wall{display:grid;gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1023px){.t-wall{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:679px){.t-wall{grid-template-columns:1fr}} .t-wall .t-card{flex:1 1 auto;width:auto;max-width:none;margin:0} .t-wall .t-card>.card{height:100%} /* ---- 9. FAQ --------------------------------------------------------------- */ .faq{display:grid;gap:.9rem;max-width:50rem;margin-inline:auto} .faq details{ background:#fff;border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--shadow-sm);overflow:hidden; transition:border-color var(--t-fast),box-shadow var(--t-med); } .faq details[open]{border-color:rgba(96,36,149,.25);box-shadow:var(--shadow-md)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.2rem 1.4rem;cursor:pointer;list-style:none; font-weight:600;color:var(--ink);font-size:1.02rem; } .faq summary::-webkit-details-marker{display:none} .faq .fq-ic{ flex:none;width:30px;height:30px;border-radius:50%; display:grid;place-items:center;background:var(--purple-tint);color:var(--purple); transition:transform var(--t-med),background-color var(--t-fast),color var(--t-fast); } .faq .fq-ic svg{width:14px;height:14px} .faq details[open] .fq-ic{transform:rotate(45deg);background:var(--grad);color:#fff} .faq .fq-body{padding:0 1.4rem 1.3rem;color:var(--ink-soft);font-size:var(--fs-small);line-height:1.7} .faq .fq-body a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px} /* ---- 10. CTA BANNER -------------------------------------------------------- */ .cta-banner{ position:relative;overflow:hidden; background:var(--navy);color:#fff; border-radius:var(--r-xl); padding:clamp(2.8rem,6vw,4.5rem) clamp(1.6rem,5vw,4rem); text-align:center; } .cta-banner::before{ content:"";position:absolute;inset:0; background: radial-gradient(60% 90% at 12% 110%,rgba(96,36,149,.55),transparent 60%), radial-gradient(55% 80% at 88% -10%,rgba(56,145,254,.4),transparent 60%); } .cta-banner .dot-grid{inset:auto -40px -60px auto;width:280px;height:280px;background-image:radial-gradient(rgba(255,255,255,.25) 1px,transparent 1px)} .cta-banner>*{position:relative} .cta-banner h2{color:#fff;max-width:34ch;margin-inline:auto} .cta-banner p{color:rgba(255,255,255,.75);max-width:52ch;margin:1rem auto 0} .cta-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem} .cta-banner .btn--outline{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.06)} .cta-banner .btn--outline:hover{background:rgba(255,255,255,.14);border-color:#fff} .cta-banner .btn--outline .btn-ic{background:rgba(255,255,255,.12)} /* ---- 11. PAGE HERO / BREADCRUMB ------------------------------------------- */ .page-hero{ position:relative;overflow:clip; padding:calc(var(--header-h) + clamp(1.6rem,3.5vw,2.6rem)) 0 clamp(2.8rem,6vw,4.5rem); background:var(--bg-cream); } .page-hero>*{position:relative;z-index:1} .page-hero h1{max-width:22ch} .page-hero .lead{max-width:56ch;margin-top:1.2rem} .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:var(--fs-tiny);font-weight:550;color:var(--ink-faint);margin-bottom:1.6rem} .breadcrumb a{color:var(--ink-soft);transition:color var(--t-fast)} .breadcrumb a:hover{color:var(--purple)} .breadcrumb svg{width:11px;height:11px;opacity:.5} .breadcrumb [aria-current]{color:var(--purple)} /* ---- 12. FORMS ------------------------------------------------------------- */ .form-slot{position:relative} .native-form{display:grid;gap:1.1rem} .f-row{display:grid;gap:1.1rem} @media(min-width:600px){.f-row--2{grid-template-columns:1fr 1fr}} .f-field{display:grid;gap:.4rem} .f-field label{font-size:var(--fs-small);font-weight:600;color:var(--ink)} .f-field label .req{color:var(--purple)} .f-field input,.f-field select,.f-field textarea{ width:100%;padding:.85rem 1.05rem; background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r-sm); font-size:1rem;color:var(--ink); transition:border-color var(--t-fast),box-shadow var(--t-fast); } .f-field textarea{min-height:120px;resize:vertical} .f-field input:focus,.f-field select:focus,.f-field textarea:focus{ outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(96,36,149,.12); } .f-field input::placeholder,.f-field textarea::placeholder{color:var(--ink-faint)} .f-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-tiny);color:var(--ink-faint);line-height:1.5} .f-consent input{margin-top:.2rem;accent-color:var(--purple);width:15px;height:15px;flex:none} .form-success{ display:none;place-items:center;text-align:center;gap:.6rem; padding:3rem 1.5rem; } .form-success .ok{ width:64px;height:64px;border-radius:50%;background:var(--grad);color:#fff; display:grid;place-items:center;margin-inline:auto;margin-bottom:1rem; box-shadow:var(--shadow-glow); } .form-success .ok svg{width:28px;height:28px} .form-slot.submitted .native-form{display:none} .form-slot.submitted .form-success{display:grid} /* ---- 13. FOOTER ------------------------------------------------------------ */ .site-footer{ position:relative;overflow:hidden; background:var(--navy-deep);color:rgba(255,255,255,.72); padding:clamp(4rem,7vw,5.5rem) 0 2rem; font-size:var(--fs-small); } .site-footer::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(50% 60% at 90% 0%,rgba(56,145,254,.14),transparent 60%), radial-gradient(45% 55% at 5% 100%,rgba(96,36,149,.2),transparent 60%); } .site-footer>.container--wide{position:relative} .footer-grid{ display:grid;gap:2.5rem; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1); } @media(max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:599px){ /* Brand spans, nav columns pair up. Stacking all four made the footer ~2000px on a phone once the links took a 44px touch height; two-up halves the nav. */ .footer-grid{grid-template-columns:1fr 1fr;column-gap:1.2rem} .footer-brand{grid-column:1 / -1} } .footer-brand img{height:48px;width:auto;background:#fff;padding:6px 10px;border-radius:12px} .footer-brand p{color:rgba(255,255,255,.6);margin-top:1.1rem;max-width:30ch;line-height:1.6} .footer-social{display:flex;gap:.6rem;margin-top:1.4rem} .footer-social a{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff; transition:transform var(--t-fast),background-color var(--t-fast); } .footer-social a:hover{transform:translateY(-3px);background:var(--purple)} .footer-social svg{width:17px;height:17px} .footer-col h4{color:#fff;font-size:.95rem;font-weight:600;margin-bottom:1.1rem;letter-spacing:.02em} .footer-col ul{display:grid;gap:.55rem} .footer-col a{color:rgba(255,255,255,.66);transition:color var(--t-fast),padding-left var(--t-fast)} .footer-col a:hover{color:#fff;padding-left:4px} .footer-contact li{display:flex;gap:.65rem;align-items:flex-start;color:rgba(255,255,255,.66)} /* Touch targets. Footer nav links measured 19px tall and topbar links 21px, both under the 24px WCAG 2.5.8 floor and well under the 44px platform guideline. Height comes from the link itself so the whole row is tappable; the list gap goes to zero because the min-height now provides the rhythm. */ @media(max-width:900px){ .footer-col ul{gap:0} .footer-col a{display:flex;align-items:center;min-height:44px} .footer-legal a{display:inline-flex;align-items:center;min-height:44px} .topbar .container--wide{min-height:44px} .topbar a{min-height:44px} a.btn--ghost{min-height:44px} } .footer-contact svg{width:16px;height:16px;flex:none;margin-top:.25rem;color:#7FB8FF} .footer-bottom{ display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between; padding-top:1.8rem;font-size:var(--fs-tiny);color:rgba(255,255,255,.45); } .footer-bottom a{color:rgba(255,255,255,.6)} .footer-bottom a:hover{color:#fff} .footer-legal{display:flex;flex-wrap:wrap;gap:1.2rem} /* back to top */ .to-top{ position:fixed;right:1.4rem;bottom:1.4rem;z-index:90; width:48px;height:48px;border-radius:50%; background:var(--grad);color:#fff;display:grid;place-items:center; box-shadow:var(--shadow-glow); opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity var(--t-med),transform var(--t-med),visibility 0s .45s; } .to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-med),transform var(--t-med)} .to-top svg{width:19px;height:19px} .to-top:hover{transform:translateY(-3px)} /* ---- 14. REVEAL SYSTEM ------------------------------------------------------ */ @media(prefers-reduced-motion:no-preference){ .js .reveal{opacity:0;transform:translateY(34px);filter:blur(6px); transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)} .js .reveal-left{transform:translateX(-38px) translateY(0)} .js .reveal-right{transform:translateX(38px) translateY(0)} .js .reveal-scale{transform:scale(.94)} .js .reveal.in-view{opacity:1;transform:none;filter:none} .js .d1{transition-delay:.08s}.js .d2{transition-delay:.16s}.js .d3{transition-delay:.24s} .js .d4{transition-delay:.32s}.js .d5{transition-delay:.4s} } /* ---- 15. MISC --------------------------------------------------------------- */ .iframe-box{ position:relative;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--bg-soft); } .iframe-box iframe{display:block;width:100%;height:100%;border:0} .video-16x9{aspect-ratio:16/9} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);background:#fff} table{width:100%;border-collapse:collapse;font-size:var(--fs-small)} th{ text-align:left;padding:.9rem 1.2rem;background:var(--bg-soft); font-weight:650;color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap; } td{padding:.9rem 1.2rem;border-bottom:1px solid var(--line);color:var(--ink-soft)} tr:last-child td{border-bottom:0} .prose{max-width:var(--container-prose)} .prose h2{margin:2.6rem 0 1rem;font-size:clamp(1.5rem,2.4vw,1.9rem)} .prose h3{margin:2rem 0 .8rem} .prose p{margin-bottom:1.1rem} .prose ul,.prose ol{margin:0 0 1.2rem 1.3rem;color:var(--ink-soft);display:grid;gap:.5rem} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px} .prose blockquote{ margin:1.8rem 0;padding:1.3rem 1.6rem;border-left:3px solid; border-image:var(--grad) 1;background:var(--bg-lavender);border-radius:0 var(--r-md) var(--r-md) 0; font-family:var(--font-display);font-size:1.15rem;color:var(--ink);font-style:italic; } .pill-note{ display:flex;gap:.8rem;align-items:flex-start; background:var(--blue-tint);border:1px solid rgba(56,145,254,.25); border-radius:var(--r-md);padding:1.1rem 1.3rem;font-size:var(--fs-small);color:var(--ink-soft); } .pill-note svg{width:19px;height:19px;flex:none;color:var(--blue-dark);margin-top:.1rem} .badge-soft{ display:inline-flex;align-items:center;gap:.35rem; font-size:.75rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase; color:var(--blue-dark);background:var(--blue-tint); padding:.3rem .7rem;border-radius:var(--r-pill); } .avatar{border-radius:50%;object-fit:cover} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} hr.fancy{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);margin:2.5rem 0} /* ---- ANIMATED HERO BACKDROP ------------------------------------------------ A slow aurora that drifts behind every hero. Three blurred color fields on independent, prime-ish durations so the loop never visibly repeats, plus a fine grain layer so the large flat areas do not band on wide screens. Painted by ::before on the hero itself (z-index 0) with hero content lifted to z-index 1, so it costs no extra DOM. Only `transform` and `opacity` are animated - both compositor-only, so this does not trigger layout or paint. The whole thing is inside a reduced-motion guard; with motion reduced the gradients still render, they simply hold still. ========================================================================== */ .hero::before, .page-hero::before, .lp-hero::before, .blog-hero::before, .article-hero::before{ content:"";position:absolute;inset:-18% -12%;pointer-events:none;z-index:0; background: radial-gradient(38% 46% at 18% 26%,rgba(96,36,149,.20),transparent 62%), radial-gradient(42% 48% at 82% 14%,rgba(56,145,254,.20),transparent 62%), radial-gradient(46% 52% at 60% 88%,rgba(124,77,190,.15),transparent 64%); filter:blur(46px); will-change:transform; } /* second, counter-drifting field for depth */ .hero::after, .page-hero::after, .lp-hero::after, .blog-hero::after, .article-hero::after{ content:"";position:absolute;inset:-14% -10%;pointer-events:none;z-index:0; background: radial-gradient(34% 40% at 74% 62%,rgba(56,145,254,.16),transparent 60%), radial-gradient(30% 38% at 26% 74%,rgba(96,36,149,.14),transparent 60%); filter:blur(52px); will-change:transform; } .hero>*,.blog-hero>*,.article-hero>*{position:relative;z-index:1} @media(prefers-reduced-motion:no-preference){ .hero::before,.page-hero::before,.lp-hero::before,.blog-hero::before,.article-hero::before{ animation:aurora-a 23s ease-in-out infinite; } .hero::after,.page-hero::after,.lp-hero::after,.blog-hero::after,.article-hero::after{ animation:aurora-b 31s ease-in-out infinite; } } @keyframes aurora-a{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 33% {transform:translate3d(3%,-2.5%,0) scale(1.08)} 66% {transform:translate3d(-2.5%,2%,0) scale(1.04)} } @keyframes aurora-b{ 0%,100%{transform:translate3d(0,0,0) scale(1.04)} 40% {transform:translate3d(-3.5%,2.5%,0) scale(1)} 75% {transform:translate3d(2%,-2%,0) scale(1.09)} } /* Grain sits in the hero's own background layer (no extra element), purely to stop the large soft gradients banding on wide displays. */ .hero,.page-hero,.lp-hero,.blog-hero,.article-hero{isolation:isolate} .hero,.page-hero,.lp-hero,.blog-hero{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),var(--bg-cream)}