/* ========================================================================== GOT Marketing Solutions — styles.css Shared design system for gotmarketingsolutions.com Identity: Cormorant Garamond (display serif) + Inter (body), light paper ground, ink text, #1F2E6E navy accent family (brand logo), hairline borders, tracked uppercase labels. Committed light theme. Conventions for sibling pages: - All colors come from the :root tokens below. Never hard-code a color. - Radii come from the --r-* scale; easings from --ease-*. Phone-device radii (48/39px) are the one deliberate exception. - Flat, class-based selectors. Max two levels deep. No IDs in CSS. - [data-reveal] elements animate in only after /site.js sets .reveal-armed on . Without JS (or with reduced motion) every element is fully visible — hiding is class-gated, never default. - The phone demo hides its steps only under .demo-live (set by /site.js). ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Tokens -------------------------------------------------------------------------- */ :root{ color-scheme:light; /* ground + surfaces */ --paper:#F8F9FB; --card:#FFFFFF; /* text */ --ink:#141A22; --ink-2:#39424F; --muted:#566070; --faint:#6C737E; /* accent — tuned to the brand logo (navy square / green orbit) */ --blue:#1F2E6E; --blue-deep:#151F4E; --blue-light:#4A5AA8; --blue-wash:#ECEEF7; --green:#5CB947; /* demo */ --bubble-in:#EDEFF3; --gold:#DA9E2C; /* hairlines */ --line:rgba(20,26,34,.12); --line-soft:rgba(20,26,34,.06); --line-strong:rgba(20,26,34,.22); /* inverse (ink CTA band) */ --inverse-text:rgba(255,255,255,.72); --inverse-bright:#FFFFFF; --inverse-line:rgba(255,255,255,.16); /* type */ --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --font-sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; /* radius scale */ --r-xs:2px; --r-sm:4px; --r-md:10px; --r-lg:16px; /* motion */ --ease-out:cubic-bezier(.16,1,.3,1); /* expo-out: entrances, lifts */ --ease-swift:cubic-bezier(.25,.46,.45,.94); /* quad-out: fades, color */ /* layout */ --wrap:1120px; --gutter:clamp(20px,5vw,48px); } /* -------------------------------------------------------------------------- 2 · Reset + base -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{ background:var(--paper); scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:17px; font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; min-height:100vh; } img,svg,video{display:block;max-width:100%} ul,ol{padding:0} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a,button{-webkit-tap-highlight-color:transparent} a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px} a:not([class]){ text-decoration-color:rgba(31,46,110,.35); transition:text-decoration-color .2s var(--ease-swift); } a:not([class]):hover{text-decoration-color:currentColor} h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:500; line-height:1.12; letter-spacing:.005em; overflow-wrap:break-word; } p{overflow-wrap:break-word;text-wrap:pretty} ::selection{background:var(--blue);color:#fff} :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:var(--r-xs); } section[id],footer[id]{scroll-margin-top:96px} /* wide content must scroll inside its own container, never the page */ .table-scroll::-webkit-scrollbar{height:8px} .table-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-sm)} .table-scroll::-webkit-scrollbar-track{background:transparent} .visually-hidden{ position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:16px;top:-64px;z-index:200; background:var(--ink);color:#fff; padding:12px 20px;font-size:.85rem;letter-spacing:.08em; text-decoration:none;border-radius:var(--r-xs); transition:top .2s ease; } .skip-link:focus{top:12px} /* -------------------------------------------------------------------------- 3 · Layout + shared type -------------------------------------------------------------------------- */ .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:clamp(72px,9vw,120px); border-top:1px solid var(--line-soft); position:relative; } .section-contrast{background:var(--card)} .eyebrow{ font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); font-variant-numeric:tabular-nums; margin-bottom:20px; } .h1{ font-size:clamp(2.7rem,6.5vw,4.6rem); line-height:1.04; letter-spacing:-.012em; text-wrap:balance; hanging-punctuation:first last; } .h2{ font-size:clamp(2rem,4.2vw,3rem); letter-spacing:-.006em; max-width:22ch; text-wrap:balance; hanging-punctuation:first last; } .h3{ font-size:1.5rem; font-weight:600; text-wrap:balance; } .lede{ font-size:1.1875rem; font-weight:300; line-height:1.75; color:var(--muted); max-width:58ch; } .body-copy{color:var(--muted);max-width:68ch} .body-copy + .body-copy{margin-top:18px} .section-head{max-width:720px;margin-bottom:clamp(40px,5vw,64px)} .section-head .lede{margin-top:18px} .rule{width:64px;height:1px;background:var(--blue);border:none;margin:26px 0} /* -------------------------------------------------------------------------- 4 · Buttons + text links -------------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:13px 30px; border-radius:var(--r-xs); font-family:var(--font-sans); font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; border:1px solid transparent; transition: background-color .22s var(--ease-swift), color .22s var(--ease-swift), border-color .22s var(--ease-swift), transform .3s var(--ease-out), box-shadow .3s var(--ease-out); } .btn:active{transform:translateY(0);transition-duration:.06s} .btn-primary{background:var(--ink);color:#fff} .btn-primary:hover{background:var(--blue-deep)} .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent} .btn-ghost:hover{background:var(--ink);color:#fff} .btn-inverse{background:var(--paper);color:var(--ink)} .btn-inverse:hover{background:#fff} .btn-ghost-inverse{border-color:var(--inverse-line);color:var(--inverse-bright)} .btn-ghost-inverse:hover{border-color:var(--inverse-bright)} .btn-row{display:flex;gap:14px;flex-wrap:wrap} @media (hover:hover){ .btn:hover{transform:translateY(-1px)} .btn-primary:hover{box-shadow:0 10px 24px rgba(30,68,117,.22)} .btn-inverse:hover{box-shadow:0 10px 24px rgba(0,0,0,.28)} } .text-link{ position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); text-decoration:none; border-bottom:1px solid transparent; } .text-link::after{ content:""; position:absolute; left:0; bottom:9px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease-out); } .text-link:hover{color:var(--blue-deep)} .text-link:hover::after{transform:scaleX(1)} .text-link:hover .icon-arrow{transform:translateX(3px)} .icon-arrow{transition:transform .3s var(--ease-out);flex-shrink:0} /* -------------------------------------------------------------------------- 5 · Header + nav (shared pattern — copy markup verbatim on every page) -------------------------------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(248,249,251,.85); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--line); } .header-bar{ display:flex; align-items:center; gap:28px; min-height:72px; } .wordmark{ font-family:var(--font-serif); font-weight:600; font-size:1.65rem; letter-spacing:.3em; color:var(--ink); text-decoration:none; line-height:1; padding:10px 0; transition:color .2s var(--ease-swift); } .wordmark:hover{color:var(--blue-deep)} .site-nav{ display:flex; align-items:center; gap:30px; margin-left:auto; } .nav-links{ display:flex; align-items:center; gap:26px; list-style:none; } .nav-links a{ display:inline-flex; align-items:center; min-height:44px; font-size:.72rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s var(--ease-swift),border-color .2s var(--ease-swift); } .nav-links a:hover{color:var(--ink)} .nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)} .btn-nav{min-height:44px;padding:10px 22px} .nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-xs); } .icon-close{display:none} @media (hover:hover){ .nav-links a:hover{border-bottom-color:var(--line-strong)} .nav-links a[aria-current="page"]:hover{border-bottom-color:var(--blue)} } @media (max-width:860px){ .nav-toggle{display:inline-flex} .site-header.is-open .icon-burger{display:none} .site-header.is-open .icon-close{display:block} .site-nav{ position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:10px var(--gutter) 24px; background:rgba(250,251,252,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .site-header.is-open .site-nav{display:flex} .nav-links{flex-direction:column;align-items:stretch;gap:0} .nav-links a{ min-height:48px; font-size:.82rem; border-bottom:1px solid var(--line-soft); } .nav-links a[aria-current="page"]{border-bottom-color:var(--line-soft)} .btn-nav{margin-top:18px;width:100%} } /* -------------------------------------------------------------------------- 6 · Reveal system (progressive enhancement) /site.js adds .reveal-armed to only when motion is allowed. -------------------------------------------------------------------------- */ .reveal-armed [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-swift),transform .85s var(--ease-out); } .reveal-armed [data-reveal].is-in{opacity:1;transform:none} .reveal-armed [data-reveal="2"]{transition-delay:.1s} .reveal-armed [data-reveal="3"]{transition-delay:.2s} .reveal-armed [data-reveal="4"]{transition-delay:.3s} /* -------------------------------------------------------------------------- 7 · Hero First paint is the moment: a CSS-only staged rise on load. Runs without JS (it is pure CSS), never runs under reduced motion, and every element ends fully visible — fill-mode carries it there even if JS is absent. -------------------------------------------------------------------------- */ .hero{ padding-block:clamp(84px,11vw,148px) clamp(68px,8vw,112px); position:relative; } .hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(1100px 560px at 82% -12%,rgba(31,46,110,.065),transparent 62%); pointer-events:none; } .hero-inner{max-width:900px} .hero-accent{color:var(--blue)} /* homepage hero: centered */ .hero-tagline{margin:22px 0 0} .hero-centered .hero-inner{margin-inline:auto;text-align:center} .hero-centered .hero-actions{justify-content:center} .hero-centered .hero-sub, .hero-centered .pg-cta-note{margin-inline:auto} .hero-sub{margin-top:30px} .hero-actions{margin-top:38px} .hero-note{ margin-top:26px; font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); } .hero-side{ position:absolute; top:50%; right:calc(var(--gutter) / 2); transform:translateY(-50%); writing-mode:vertical-rl; font-size:.625rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--faint); white-space:nowrap; } @media (max-width:1080px){.hero-side{display:none}} @media (prefers-reduced-motion:no-preference){ .hero .eyebrow, .hero .h1, .hero-sub, .hero-actions, .hero-note{ animation:hero-rise .85s var(--ease-out) both; } .hero .h1{animation-delay:.07s} .hero-sub{animation-delay:.18s} .hero-actions{animation-delay:.3s} .hero-note{animation-delay:.42s} .hero-side{animation:hero-fade 1s var(--ease-swift) .55s both} } @keyframes hero-rise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } @keyframes hero-fade{ from{opacity:0} to{opacity:1} } /* -------------------------------------------------------------------------- 8 · What we fix -------------------------------------------------------------------------- */ .fix-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .fix{ padding:36px 36px 40px 0; border-right:1px solid var(--line-soft); } .fix:last-child{border-right:none} .fix + .fix{padding-left:36px} .fix-icon{ width:54px; height:54px; display:grid; place-items:center; position:relative; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--blue); transform:rotate(-6deg); box-shadow:0 12px 26px rgba(20,26,34,.14); margin-bottom:22px; } .fix-icon svg{transform:rotate(6deg)} .fix-icon--brand{ background:#fff; border:1px solid var(--line); color:var(--blue); box-shadow:0 12px 26px rgba(20,26,34,.14); } .fix-icon--phoneapp{ background:linear-gradient(180deg,#67E36A 0%,#2FC142 100%); border:none; box-shadow:0 12px 26px rgba(47,193,66,.35); } .fix-icon.fix-icon--phoneapp::after{background:#FF3B30} .fix-icon::after{ content:""; position:absolute; right:-6px; top:-6px; width:14px; height:14px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px #fff; } .fix-num{ font-family:var(--font-serif); font-size:1.1rem; color:var(--blue-light); font-variant-numeric:tabular-nums; display:block; margin-bottom:10px; } .fix-title{font-size:1.5rem;font-weight:600;margin-bottom:12px;text-wrap:balance} .fix-copy{color:var(--muted);font-size:1rem} @media (max-width:860px){ .fix-grid{grid-template-columns:1fr} .fix{border-right:none;border-bottom:1px solid var(--line-soft);padding:30px 0} .fix + .fix{padding-left:0} .fix:last-child{border-bottom:none} } /* -------------------------------------------------------------------------- 9 · How it works -------------------------------------------------------------------------- */ .how-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px); align-items:start; } .how-intro{position:sticky;top:112px} .steps{list-style:none;counter-reset:step} .step{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:24px; padding:30px 0; border-top:1px solid var(--line); } .step:last-child{border-bottom:1px solid var(--line)} .step-num{ font-family:var(--font-serif); font-size:2.4rem; font-weight:500; color:var(--blue-light); font-variant-numeric:tabular-nums; line-height:1; } .step-title{font-size:1.5rem;font-weight:600;margin-bottom:8px;text-wrap:balance} .step-copy{color:var(--muted);font-size:1rem;max-width:48ch} @media (max-width:860px){ .how-grid{grid-template-columns:1fr} .how-intro{position:static} } /* -------------------------------------------------------------------------- 10 · Phone demo (the signature piece) Default state: every message visible, no motion — works with JS disabled and with prefers-reduced-motion. /site.js adds .demo-live to the section to arm the animated timeline. CLS note: every animated element keeps its layout space (opacity/transform only); the typing indicator overlays the reply's reserved slot, so nothing in the thread ever reflows. -------------------------------------------------------------------------- */ .demo-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(40px,6vw,88px); align-items:center; } .demo-copy .lede{margin-top:18px} .demo-legend{ list-style:none; margin-top:40px; border-top:1px solid var(--line); } .legend-item{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:18px; padding:18px 0; border-bottom:1px solid var(--line-soft); transition:opacity .45s var(--ease-swift); } .legend-num{ width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; font-size:.72rem; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums; transition:background-color .35s var(--ease-swift),color .35s var(--ease-swift),border-color .35s var(--ease-swift); margin-top:2px; } .legend-title{font-weight:500;font-size:1rem;color:var(--ink)} .legend-copy{color:var(--muted);font-size:1rem;line-height:1.6} .demo-live .legend-item{opacity:.42} .demo-live .legend-item.is-active{opacity:1} .demo-live .legend-item.is-active .legend-num{ background:var(--blue); border-color:var(--blue); color:#fff; } /* the phone */ .demo-stage{position:relative;justify-self:center;width:min(340px,100%)} .demo-stage::before{ content:""; position:absolute; inset:8% -14% 8% -14%; background:var(--blue-wash); border-radius:50%; z-index:0; } .phone{ position:relative; z-index:1; background:var(--ink); border-radius:48px; padding:10px; box-shadow: 0 2px 6px rgba(20,26,34,.16), 0 34px 80px rgba(20,26,34,.22); } .phone-screen{ position:relative; background:#fff; border-radius:39px; height:648px; display:flex; flex-direction:column; overflow:hidden; } .phone-notch{ width:104px; height:22px; background:var(--ink); border-radius:0 0 14px 14px; margin:0 auto; flex-shrink:0; } .phone-status{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:7px 20px 0; font-size:.66rem; font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--ink); pointer-events:none; } .status-icons{display:flex;align-items:center;gap:4px} .phone-head{ display:flex; align-items:center; gap:12px; padding:12px 18px 14px; border-bottom:1px solid var(--line-soft); flex-shrink:0; } .phone-avatar{ width:34px; height:34px; border-radius:50%; background:var(--blue-wash); color:var(--blue); display:grid; place-items:center; flex-shrink:0; } .phone-contact{display:flex;flex-direction:column;line-height:1.35} .phone-contact strong{font-size:.85rem;font-weight:500;font-variant-numeric:tabular-nums} .phone-contact small{font-size:.68rem;color:var(--muted)} .phone-thread{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:18px 14px 22px; overflow:hidden; transition:opacity .4s var(--ease-swift); } .phone-thread.is-resetting{opacity:0} .thread-note{ align-self:center; font-size:.64rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); text-align:center; font-variant-numeric:tabular-nums; } .bubble{ max-width:82%; padding:10px 14px; font-size:.84rem; line-height:1.5; } .bubble-out{ align-self:flex-end; background:var(--blue); color:#fff; border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); } .bubble-in{ align-self:flex-start; background:var(--bubble-in); color:var(--ink); border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm); } .bubble-meta{ display:block; margin-top:6px; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); } /* the customer-reply slot: typing indicator overlays the reserved space of the reply bubble, so showing/hiding it never reflows the thread */ .thread-slot{ position:relative; display:flex; flex-direction:column; align-items:flex-start; } .thread-slot .bubble-typing{position:absolute;left:0;bottom:0;z-index:0} .thread-slot [data-step]{position:relative;z-index:1} .bubble-typing{ display:none; align-items:center; gap:5px; padding:13px 15px; } .bubble-typing .dot{ width:6px; height:6px; border-radius:50%; background:var(--faint); animation:typing-bounce 1.2s infinite ease-in-out; } .bubble-typing .dot:nth-child(2){animation-delay:.15s} .bubble-typing .dot:nth-child(3){animation-delay:.3s} @keyframes typing-bounce{ 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} } .review-card{ align-self:flex-start; width:min(240px,88%); background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; box-shadow:0 12px 32px rgba(20,26,34,.1); } .review-stars{display:flex;gap:3px;color:#FBBC04;margin-bottom:8px} .review-title{font-weight:500;font-size:.86rem;line-height:1.4} .review-sub{font-size:.72rem;color:var(--muted);line-height:1.5} .demo-caption{ margin-top:20px; text-align:center; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); } /* armed timeline: steps hidden until .is-in — space stays reserved */ .demo-live [data-step]{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease-swift),transform .55s var(--ease-out); } .demo-live .bubble[data-step], .demo-live .review-card[data-step]{transform:translateY(12px) scale(.96)} .demo-live .bubble-out[data-step]{transform-origin:100% 100%} .demo-live .bubble-in[data-step]{transform-origin:0 100%} .demo-live .review-card[data-step]{transform-origin:0 100%} .demo-live [data-step].is-in, .demo-live .bubble[data-step].is-in, .demo-live .review-card[data-step].is-in{opacity:1;transform:none} .demo-live .bubble-typing{ display:inline-flex; opacity:0; transform:translateY(8px) scale(.95); transform-origin:0 100%; transition:opacity .35s var(--ease-swift),transform .4s var(--ease-out); } .demo-live .bubble-typing.is-in{opacity:1;transform:none} @media (max-width:960px){ .demo-grid{grid-template-columns:1fr} .demo-stage{justify-self:start} } @media (max-width:480px){ .demo-stage{justify-self:center} } /* -------------------------------------------------------------------------- 11 · Pricing -------------------------------------------------------------------------- */ .plans{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:28px; align-items:stretch; } /* --- services overview (homepage) --- */ /* --- shared CTA note (was page-local to index) --- */ .pg-cta-note{ margin-top:14px; font-size:.85rem; line-height:1.6; color:var(--muted); max-width:46ch; } .plan .pg-cta-note{margin-top:12px;text-align:center;max-width:none} .cta-band .pg-cta-note{color:var(--inverse-text)} .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,34px); } .svc{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:clamp(30px,3vw,42px) clamp(26px,2.6vw,38px) clamp(28px,2.6vw,36px); display:flex; flex-direction:column; } .svc-lead{ border-color:var(--ink); box-shadow:0 28px 64px rgba(20,26,34,.09); } .svc-tag{ display:inline-flex; align-items:center; height:27px; box-sizing:border-box; align-self:flex-start; font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); border:1px solid var(--blue-light); border-radius:100px; padding:5px 12px; margin-bottom:18px; } .svc-name{font-size:1.65rem;font-weight:600;text-wrap:balance} .svc-blurb{color:var(--muted);font-size:1rem;margin-top:8px;line-height:1.65} .svc-list{ list-style:none; display:grid; gap:12px; margin:26px 0 8px; padding-top:24px; border-top:1px solid var(--line-soft); } .svc-list li{ font-size:.98rem; color:var(--ink-2); line-height:1.6; padding-left:18px; position:relative; } .svc-list li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--blue); } .svc-link{margin-top:auto;align-self:flex-start} .svc:not(.svc-lead)::before{ content:""; display:block; height:27px; margin-bottom:18px; } @media (max-width:820px){ .svc:not(.svc-lead)::before{display:none} } @media (max-width:820px){ .svc-grid{grid-template-columns:1fr} } .plan{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:42px 38px 38px; display:flex; flex-direction:column; transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s var(--ease-swift); } .plan-featured{ border-color:var(--ink); box-shadow:0 28px 64px rgba(20,26,34,.09); position:relative; } .plan-featured::before{ content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:3px; background:var(--blue); } @media (hover:hover){ .plan:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(20,26,34,.08); border-color:var(--line-strong); } .plan-featured:hover{ border-color:var(--ink); box-shadow:0 34px 72px rgba(20,26,34,.13); } } .plan-flag{ align-self:flex-start; font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); border:1px solid var(--blue-light); border-radius:100px; padding:5px 14px; margin-bottom:20px; } .plan-name{font-size:1.65rem;font-weight:600;text-wrap:balance} .plan-blurb{color:var(--muted);font-size:1rem;margin-top:6px} .price-row{ display:flex; align-items:baseline; gap:6px; margin:24px 0 26px; padding-bottom:26px; border-bottom:1px solid var(--line-soft); } .price{ font-size:3.2rem; font-weight:300; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .price-per{color:var(--muted);font-size:1rem;font-variant-numeric:tabular-nums} .plan-list{list-style:none;display:grid;gap:14px;margin-bottom:34px} .plan-list li{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--ink-2); line-height:1.6; } .icon-check{flex-shrink:0;color:var(--blue);margin-top:4px} .plan-cta{margin-top:auto} @media (max-width:860px){ .plans{grid-template-columns:1fr} .plan{padding:34px 26px 30px} } /* -------------------------------------------------------------------------- 12 · Founders -------------------------------------------------------------------------- */ .founders-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); } .founder{border-top:1px solid var(--line);padding-top:24px} .founder-name{ font-family:var(--font-serif); font-size:1.8rem; font-weight:600; line-height:1.1; } .founder-role{ font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin:10px 0 14px; } .founder-line{color:var(--muted);font-size:1rem} @media (max-width:720px){ .founders-grid{grid-template-columns:1fr} } /* -------------------------------------------------------------------------- 13 · FAQ preview -------------------------------------------------------------------------- */ .faq-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px); align-items:start; } .faq-list{border-top:1px solid var(--line)} .faq-item{padding:26px 0;border-bottom:1px solid var(--line-soft)} .faq-q{font-size:1.35rem;font-weight:600;margin-bottom:8px;text-wrap:balance} .faq-a{color:var(--muted);font-size:1rem;max-width:56ch} @media (max-width:860px){ .faq-grid{grid-template-columns:1fr} } /* -------------------------------------------------------------------------- 14 · Final CTA band -------------------------------------------------------------------------- */ .cta-band{ background-color:var(--ink); background-image:radial-gradient(1000px 520px at 12% -10%,rgba(91,138,201,.16),transparent 62%); color:var(--inverse-text); border-top:none; } .cta-band .h2{color:var(--inverse-bright);max-width:20ch} .cta-band .eyebrow{color:var(--blue-wash)} .cta-copy{ margin-top:18px; max-width:52ch; font-size:1.05rem; font-weight:300; } .cta-band .btn-row{margin-top:36px} .cta-band :focus-visible{outline-color:var(--inverse-bright)} /* -------------------------------------------------------------------------- 15 · Footer (shared pattern — copy markup verbatim on every page) -------------------------------------------------------------------------- */ .site-footer{ border-top:1px solid var(--line); padding-block:clamp(48px,6vw,72px) 40px; background:var(--paper); } .footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; } .wordmark-footer{font-size:1.4rem;padding:0;margin-bottom:14px;display:inline-block} .footer-meta{color:var(--muted);font-size:.92rem;line-height:1.7} .footer-mail{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink-2); font-size:.92rem; text-decoration-color:var(--line-strong); transition:color .2s var(--ease-swift); } .footer-mail:hover{color:var(--blue)} .footer-nav ul{ list-style:none; display:flex; flex-direction:column; gap:2px; } .footer-nav a{ display:inline-flex; align-items:center; min-height:44px; font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s var(--ease-swift); } .footer-nav a:hover{color:var(--ink)} .footer-bottom{ margin-top:44px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } .badge-line{ font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .footer-copy{font-size:.78rem;color:var(--faint);font-variant-numeric:tabular-nums} /* -------------------------------------------------------------------------- 17 · Reduced motion — belt and suspenders. /site.js already refuses to arm animations when this matches; these rules guarantee stillness even if a class leaks through. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero .eyebrow, .hero .h1, .hero-sub, .hero-actions, .hero-note, .hero-side{animation:none} .reveal-armed [data-reveal]{opacity:1;transform:none;transition:none} .demo-live [data-step], .demo-live .bubble[data-step], .demo-live .review-card[data-step]{opacity:1;transform:none;transition:none} .demo-live .legend-item{opacity:1;transition:none} .bubble-typing, .demo-live .bubble-typing{display:none} .phone-thread{transition:none} .bubble-typing .dot{animation:none} .icon-arrow, .btn, .plan, .text-link::after, .nav-links a, .legend-num, .wordmark{transition:none} .btn:hover, .btn:active, .plan:hover{transform:none} } /* ---- brand lockup — rebuilt vector logo ---- */ .wordmark{display:inline-flex;align-items:center;gap:10px;font-family:'Exo 2',var(--font-sans);font-style:italic;font-weight:800;letter-spacing:.02em;color:var(--blue)} .logo-mark{display:block;flex:none} /* -------------------------------------------------------------------------- 18 · Swoosh heading underline /site.js injects an aria-hidden .swoosh svg under every main .h2. Same arming contract as the reveal system: only when motion is allowed does site.js add .swoosh-armed, and only then is the stroke wound back for the draw. Unarmed (no JS, no IntersectionObserver, reduced motion) the swoosh renders fully drawn. Pages that never load /site.js get no swoosh at all, which is also fine. -------------------------------------------------------------------------- */ .swoosh{ display:block; margin-top:14px; overflow:visible; } .swoosh-armed path{ stroke-dasharray:180; stroke-dashoffset:180; transition:stroke-dashoffset .8s var(--ease-out) .15s; } .swoosh-armed.is-in path{stroke-dashoffset:0} @media (prefers-reduced-motion:reduce){ .swoosh-armed path{stroke-dasharray:none;stroke-dashoffset:0;transition:none} } /* -------------------------------------------------------------------------- 19 · Icon motion (.fix-icon) Resting look is untouched: navy tile at rotate(-6deg), green corner dot. With motion allowed, each tile periodically wakes on a slow 7s cycle: it eases upright, the dot emits one soft pulse ring, and it settles back. Cards in a grid are staggered so they never fire in unison. On hover the tile straightens at once and the dot pulses gently for as long as the pointer stays. Reduced motion: static tilted tile, no loops. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:no-preference){ .fix-icon{ animation:fix-icon-wake 7s ease-in-out .3s infinite; transition:transform .35s var(--ease-out); } .fix-icon::after{ animation:fix-dot-pulse 7s var(--ease-swift) .3s infinite; } .fix:nth-child(2) .fix-icon, .fix:nth-child(2) .fix-icon::after{animation-delay:1.5s} .fix:nth-child(3) .fix-icon, .fix:nth-child(3) .fix-icon::after{animation-delay:2.7s} @media (hover:hover){ .fix:hover .fix-icon{ animation:none; transform:rotate(0deg) scale(1.04); } .fix:hover .fix-icon::after{ animation:fix-dot-pulse-hover 1.6s var(--ease-swift) infinite; } } } @keyframes fix-icon-wake{ 0%,42%{transform:rotate(-6deg)} 50%,58%{transform:rotate(0deg) scale(1.04)} 70%,100%{transform:rotate(-6deg)} } @keyframes fix-dot-pulse{ 0%,48%{box-shadow:0 0 0 3px #fff,0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)} 70%,100%{box-shadow:0 0 0 3px #fff,0 0 0 12px color-mix(in srgb,var(--green) 0%,transparent)} } @keyframes fix-dot-pulse-hover{ 0%{box-shadow:0 0 0 3px #fff,0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)} 75%,100%{box-shadow:0 0 0 3px #fff,0 0 0 10px color-mix(in srgb,var(--green) 0%,transparent)} } @media (prefers-reduced-motion:reduce){ .fix-icon, .fix-icon::after{animation:none;transition:none} } /* -------------------------------------------------------------------------- 20 · Mini CTA bar (homepage only, injected by /site.js) A slim fixed bar on the ink ground. site.js shows it once the visitor scrolls past pricing and hides it again on the way back up; dismiss holds for the session. Sits below the sticky header (z 100) and the skip link (z 200), so the open mobile nav always stacks above it. Hidden state is also visibility:hidden so nothing offscreen can take focus. Reduced motion: no transition, it simply appears and disappears. -------------------------------------------------------------------------- */ .mini-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--ink); color:var(--inverse-text); border-top:1px solid var(--inverse-line); padding-bottom:env(safe-area-inset-bottom,0px); transform:translateY(105%); visibility:hidden; } .mini-cta.is-shown{transform:none;visibility:visible} .mini-cta-bar{ display:flex; align-items:center; gap:16px; padding-block:9px; min-height:58px; } .mini-cta-copy{ flex:1; font-size:.85rem; line-height:1.5; color:var(--inverse-text); font-variant-numeric:tabular-nums; } .mini-cta .btn{min-height:40px;padding:9px 20px;flex-shrink:0} .mini-cta-close{ width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; color:var(--inverse-text); border-radius:var(--r-xs); font-size:1rem; line-height:1; transition:color .2s var(--ease-swift); } .mini-cta-close:hover{color:var(--inverse-bright)} .mini-cta :focus-visible{outline-color:var(--inverse-bright)} @media (prefers-reduced-motion:no-preference){ .mini-cta{transition:transform .45s var(--ease-out),visibility 0s linear .45s} .mini-cta.is-shown{transition:transform .45s var(--ease-out),visibility 0s linear 0s} } @media (max-width:640px){ .mini-cta-copy{display:none} .mini-cta .btn{flex:1} }