/* ========================================================================== THSH — Digital Experiences Standalone sales site. Vanilla CSS, no build step, no dependencies. Palette, type and design language are lifted verbatim from the live shop theme (horse-show-husband-theme2, /t/6, assets/theme.css) so this site reads as a wing of thehorseshowhusband.com rather than a second brand. Every value in :root below is the exact token from that stylesheet. ========================================================================== */ :root{ /* --- exact values from the live shop theme ------------------------- */ --white:#FFFFFF; --paper:#FBF9F5; /* cream — page background (shop: --paper) */ --tan:#EFE7D5; /* cream — solid band (shop: --tan) */ --tan-soft:#F4EEE0; /* cream — soft band (shop: --tan-soft) */ --gold:#C7B488; /* gold accent + hairlines (shop: --tan-deep) */ --navy:#1A2B4A; /* primary (shop: --navy) */ --navy-deep:#13203A; --royal:#234FB0; --royal-d:#1B3E8E; --powder:#A9CCEC; /* powder blue (shop: --blue-lt) */ --blue-soft:#E6EEF9; --panel:#EDF1F6; --ink:#1A2B4A; --muted:#5C6A82; --line:rgba(26,43,74,.13); /* Type: the live shop loads Playfair Display + Inter. The build brief said "Jost", but the shop's layout/theme.liquid actually requests Inter, and matching the shop wins. To switch, change --sans here and the in each page's . */ --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* --- site-local scale ---------------------------------------------- */ --shadow-sm:0 6px 18px rgba(26,43,74,.07); --shadow-md:0 18px 38px rgba(26,43,74,.12); --shadow-lg:0 28px 64px rgba(26,43,74,.18); --ease:cubic-bezier(.22,.61,.36,1); --radius:8px; --header-h:76px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{max-width:100%;display:block} svg{display:block} h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} /* --- focus: visible, on-brand, keyboard-only ------------------------- */ :focus-visible{ outline:3px solid var(--royal); outline-offset:3px; border-radius:2px; } :focus:not(:focus-visible){outline:none} .skip-link{ position:absolute;left:12px;top:-60px;z-index:200; background:var(--navy);color:#fff; padding:12px 20px;border-radius:0 0 6px 6px; font-size:14px;font-weight:600; transition:top .2s var(--ease); } .skip-link:focus{top:0} .visually-hidden{ position:absolute!important;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* ========================================================================== Layout ========================================================================== */ .wrap{max-width:1180px;margin:0 auto;padding:0 30px} .narrow{max-width:780px;margin:0 auto;padding:0 30px} .sec{padding:96px 0} .sec-sm{padding:64px 0} .sec-cream{background:var(--tan-soft)} .sec-paper{background:var(--paper)} .sec-white{background:var(--white)} .sec-panel{background:var(--blue-soft)} /* ========================================================================== Type ========================================================================== */ .eyebrow{ display:inline-flex;align-items:center;gap:12px; font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:var(--royal); } /* the shop's signature: a short gold hairline before every eyebrow label. The collapsed start state is gated behind html.js so that with scripting off the hairline is simply drawn, never stuck at zero width. */ .eyebrow::before{ content:"";width:24px;height:2px;background:var(--gold); transform-origin:left center; transition:transform .7s var(--ease) .1s; } .js .eyebrow::before{transform:scaleX(0)} .reveal.in .eyebrow::before,.eyebrow.in::before{transform:scaleX(1)} .eyebrow-light{color:var(--powder)} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--navy)} .h-display{font-size:clamp(34px,5.2vw,62px);line-height:1.04} .h-1{font-size:clamp(30px,4.4vw,52px);line-height:1.06} .h-2{font-size:clamp(27px,3.6vw,42px);line-height:1.08} .h-3{font-size:clamp(21px,2.4vw,27px);line-height:1.18} .lede{font-size:clamp(17px,1.6vw,19px);color:var(--muted);line-height:1.62;max-width:56ch} .lede-light{color:rgba(255,255,255,.88)} .sec-head{margin-bottom:44px;max-width:62ch} .sec-head .h-2{margin-top:14px} .sec-head .lede{margin-top:14px} .sec-center{text-align:center} .sec-center .sec-head{margin-left:auto;margin-right:auto} .sec-center .eyebrow{justify-content:center} .sec-center .lede{margin-left:auto;margin-right:auto} /* gold hairline that draws itself in when revealed */ .rule{ height:2px;background:var(--gold);width:74px;margin:22px 0; transform-origin:left center; transition:transform .8s var(--ease) .15s; } .js .rule{transform:scaleX(0)} .sec-center .rule{margin-left:auto;margin-right:auto;transform-origin:center} .reveal.in .rule,.rule.in{transform:scaleX(1)} .rule-full{width:100%} /* ========================================================================== Buttons + links ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--sans);font-size:13px;font-weight:600; letter-spacing:.1em;text-transform:uppercase; padding:16px 32px;border-radius:3px;border:1.5px solid transparent; cursor:pointer;text-align:center; transition:background .22s var(--ease),color .22s var(--ease), transform .22s var(--ease),box-shadow .22s var(--ease), border-color .22s var(--ease); } .btn .arw{transition:transform .28s var(--ease)} .btn:hover .arw{transform:translateX(4px)} .btn-primary{background:var(--royal);color:#fff} .btn-primary:hover{background:var(--royal-d);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-outline{border-color:var(--navy);color:var(--navy);background:none} .btn-outline:hover{background:var(--navy);color:#fff;transform:translateY(-2px)} .btn-light{background:#fff;color:var(--navy)} .btn-light:hover{background:var(--powder);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-ghost-light{border-color:rgba(255,255,255,.55);color:#fff;background:none} .btn-ghost-light:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)} .btn-sm{padding:11px 20px;font-size:12px} .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px} .sec-center .btn-row,.idea .btn-row,.cta-band .btn-row,.proof .btn-row{justify-content:center} /* underline-slide link, same mechanic as the shop nav */ .ulink{ position:relative;display:inline-block;padding-bottom:4px; font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--navy); } .ulink::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--gold);transition:right .35s var(--ease); } .ulink:hover::after,.ulink:focus-visible::after{right:0} .ulink-light{color:#fff} /* ========================================================================== Motion — scroll reveals Children stagger via --i set in markup; JS only toggles .in ========================================================================== */ .reveal{transition:opacity .75s var(--ease),transform .75s var(--ease)} .js .reveal{opacity:0;transform:translateY(22px)} .reveal.in{opacity:1;transform:none} .stagger>*{transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .stagger>*{opacity:0;transform:translateY(20px)} .stagger.in>*{opacity:1;transform:none} .stagger.in>*{transition-delay:calc(var(--i,0) * 90ms)} /* ========================================================================== Header ========================================================================== */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(251,249,245,.92); backdrop-filter:saturate(170%) blur(10px); -webkit-backdrop-filter:saturate(170%) blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease),background .3s var(--ease); } .site-header.scrolled{box-shadow:0 6px 24px rgba(26,43,74,.08);background:rgba(251,249,245,.97)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;height:var(--header-h)} .brand{display:flex;align-items:center;gap:14px;min-width:0} .brand img{height:42px;width:auto;transition:transform .3s var(--ease)} .brand:hover img{transform:translateY(-1px) scale(1.02)} .brand-divider{width:1px;height:28px;background:var(--line);flex:none} .brand-word{ font-family:var(--serif);font-size:16px;font-weight:600;color:var(--navy); line-height:1.1;white-space:nowrap; } .brand-word span{ display:block;font-family:var(--sans);font-size:10px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:2px; } .nav{display:flex;align-items:center;gap:22px} .nav-links{display:flex;align-items:center;gap:18px} .nav-links a{ position:relative;font-size:14px;font-weight:500;color:var(--navy);padding:6px 0; transition:color .2s var(--ease); } .nav-links a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--gold);transition:right .32s var(--ease); } .nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current="page"]::after{right:0} .nav-links a[aria-current="page"]{color:var(--royal);font-weight:600} .burger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer; } .burger i{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px; transition:transform .3s var(--ease),opacity .2s var(--ease)} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* --- mobile drawer --- */ .mnav-overlay{ position:fixed;inset:0;background:rgba(15,26,48,.5);z-index:96; opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s; } .mnav-overlay.open{opacity:1;visibility:visible} .mnav{ position:fixed;top:0;right:0;height:100%;width:310px;max-width:86vw; background:var(--paper);z-index:97;transform:translateX(100%); visibility:hidden; transition:transform .34s var(--ease),visibility .34s var(--ease); display:flex;flex-direction:column;box-shadow:-16px 0 48px rgba(15,26,48,.22); } /* visibility (not just the transform) keeps the closed drawer's links out of the tab order — an off-screen element is still focusable. */ .mnav.open{transform:translateX(0);visibility:visible} .mnav-head{display:flex;align-items:center;justify-content:space-between; padding:18px 22px;border-bottom:1px solid var(--line)} .mnav-head .brand-word{font-size:15px} .mnav-close{background:none;border:0;cursor:pointer;color:var(--navy); width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1} .mnav-links{display:flex;flex-direction:column;padding:8px 0;flex:1;overflow-y:auto} .mnav-links a{padding:16px 22px;font-size:16px;font-weight:500;color:var(--navy); border-bottom:1px solid var(--line);transition:background .2s var(--ease)} .mnav-links a:hover{background:var(--tan-soft)} .mnav-links a[aria-current="page"]{color:var(--royal);font-weight:600} .mnav-foot{padding:20px 22px;border-top:1px solid var(--line)} .mnav-foot .btn{width:100%} /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative;overflow:hidden;background:var(--navy-deep); display:flex;align-items:center;min-height:clamp(520px,74vh,700px); } .hero-media{position:absolute;inset:0;overflow:hidden} /* slow, calm zoom — never a gimmick, just enough to feel alive */ .hero-media img{ width:100%;height:100%;object-fit:cover;object-position:center; transform:scale(1.06);animation:heroZoom 22s var(--ease) forwards; will-change:transform; } @keyframes heroZoom{from{transform:scale(1.10)}to{transform:scale(1.0)}} .hero-scrim{ position:absolute;inset:0; background:linear-gradient(96deg,rgba(19,32,58,.93) 0%,rgba(19,32,58,.72) 44%,rgba(19,32,58,.34) 100%); } .hero .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:72px;width:100%} /* NB: `ch` here would resolve against this element's own 16px font-size, not the headline's — which collapses the column. Hold the measure in px. */ .hero-inner{max-width:740px} .hero h1{color:#fff;margin:18px 0 0} .hero .lede{color:rgba(255,255,255,.9);margin-top:20px;max-width:52ch} .hero .rule{background:var(--gold)} /* compact hero for interior pages */ .hero-sm{min-height:clamp(420px,58vh,540px)} /* --- split hero: copy left, brand mark right ----------------------------- Mobile stacks it with the mark BELOW the text and smaller, so the headline is still the first thing on screen. */ .hero-split .wrap{width:100%} .hero-split-grid{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px;align-items:center; } .hero-split .hero-inner{max-width:none} .hero-mark{display:flex;justify-content:center;align-items:center} .hero-mark img{ width:100%;max-width:380px;height:auto; filter:drop-shadow(0 18px 40px rgba(0,0,0,.42)); animation:markIn 1s var(--ease) both .15s; } @keyframes markIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}} /* ========================================================================== Footer ========================================================================== */ .site-footer{background:var(--navy-deep);color:#a9b6c8;padding:68px 0 30px;font-size:14px} .footer-top{ display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px; padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1); } .footer-logo{height:46px;width:auto;margin-bottom:14px} .footer-tag{color:#8a99ad;max-width:34ch;line-height:1.6} .site-footer h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:#fff;margin-bottom:16px;font-weight:600;font-family:var(--sans)} .site-footer ul{display:flex;flex-direction:column;gap:2px} /* padded so each link is a comfortable thumb target, not a 16px hairline */ .site-footer li>a{display:inline-block;padding:7px 0;transition:color .2s var(--ease)} .site-footer a{transition:color .2s var(--ease)} .site-footer a:hover{color:#fff} .footer-mail{color:var(--powder);font-weight:500;word-break:break-word} .footer-mail:hover{color:#fff} .footer-bot{ display:flex;justify-content:space-between;align-items:center;gap:14px; padding-top:24px;color:#7e8da2;font-size:11.5px; letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap; } /* ========================================================================== Product cards (home) ========================================================================== */ .pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .pcard{ position:relative;display:flex;flex-direction:column; background:var(--white);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(199,180,136,.5)} .pcard-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel)} .pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .pcard:hover .pcard-media img{transform:scale(1.045)} /* --- framed product shot ------------------------------------------------ A phone rising out of the bottom edge of a tinted stage. Both cards use the same stage aspect and the same device width, so the two shots sit at exactly matching heights however tall the source screenshots are. */ .pcard-media-shot{ aspect-ratio:4/3;background:linear-gradient(158deg,var(--blue-soft) 0%,var(--panel) 62%,#dfe7f1 100%); display:flex;align-items:flex-end;justify-content:center;padding-top:30px; } .pcard-media-shot::after{ /* soft vignette so the device reads as lit */ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 58% at 50% 8%,rgba(255,255,255,.65),transparent 70%); } .shot{ position:relative;z-index:1; /* Height-driven, not width-driven: the stage fixes the height, so both cards' devices are always exactly the same height, and each shot keeps its own native aspect via --shot-ar. That means a screenshot never has to be cropped sideways to fit a frame ratio it was never shot at. */ /* content-box so --shot-ar describes the SCREEN, not the screen plus bezel; otherwise the asymmetric border (7px sides, 0 bottom) skews the ratio and object-fit quietly crops a few percent off the sides. */ box-sizing:content-box; height:calc(100% - 7px);width:auto;max-width:82%; aspect-ratio:var(--shot-ar,540/900); background:#fff;overflow:hidden; border:7px solid var(--navy-deep);border-bottom:0; border-radius:22px 22px 0 0; box-shadow:0 20px 44px rgba(19,32,58,.34),0 2px 0 rgba(255,255,255,.5) inset; transition:transform .45s var(--ease); } .shot::before{ /* speaker slot — just enough to read as a phone */ content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%); width:34%;height:4px;border-radius:3px;background:var(--navy-deep);opacity:.55;z-index:2; } .shot img{ width:100%;height:100%;object-fit:cover;object-position:top center; transition:none; } .pcard:hover .shot{transform:translateY(-8px)} .pcard:hover .shot img{transform:none} .pcard-tag{ position:absolute;top:14px;left:14px;z-index:2; background:rgba(19,32,58,.86);color:#fff;backdrop-filter:blur(4px); font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:6px 11px;border-radius:2px; } .pcard-body{padding:30px 30px 32px;display:flex;flex-direction:column;flex:1} .pcard-body .h-3{margin-bottom:12px} .pcard-body p{color:var(--muted);font-size:15.5px;line-height:1.62} .pcard-body .ulink{margin-top:auto;padding-top:24px;align-self:flex-start} /* ========================================================================== Proof strip ========================================================================== */ .proof{background:var(--navy);color:#fff;position:relative;overflow:hidden;text-align:center} .proof::before{ content:"";position:absolute;inset:0; background:radial-gradient(680px 460px at 50% 118%,rgba(35,79,176,.4),transparent 62%); } .proof .wrap{position:relative;z-index:2;padding:72px 30px} .proof .eyebrow{color:var(--powder);justify-content:center} .proof h2{color:#fff;margin-top:14px} .proof-line{ font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);font-style:italic; font-weight:500;color:var(--powder);margin-top:16px;line-height:1.4; } .proof .rule{background:var(--gold);margin-left:auto;margin-right:auto;transform-origin:center} /* ========================================================================== Numbered steps ========================================================================== */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:step} .step{position:relative;padding-top:26px} .step::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold); transform-origin:left center; transition:transform .8s var(--ease); } .js .step::before{transform:scaleX(0)} .stagger.in .step::before{transform:scaleX(1);transition-delay:calc(var(--i,0) * 90ms + 180ms)} /* Navy, not gold: #C7B488 on cream is ~2:1 and fails AA at this size. The gold accent lives in the hairline rule above each step instead. */ .step-num{ font-family:var(--serif);font-size:15px;font-weight:700;color:var(--navy); letter-spacing:.14em;margin-bottom:10px;display:block; } .step h3{font-size:21px;line-height:1.2;margin-bottom:9px} .step p{color:var(--muted);font-size:15.5px;line-height:1.62} /* ========================================================================== Feature list (what it answers / what it does) ========================================================================== */ .features{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .features-3{grid-template-columns:repeat(3,1fr)} .feature{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius); padding:30px 30px 32px; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(199,180,136,.55)} .feature h3{font-size:20px;margin-bottom:10px} .feature p{color:var(--muted);font-size:15.5px;line-height:1.62} .feature ul{margin-top:12px;display:flex;flex-direction:column;gap:8px} .feature li{position:relative;padding-left:20px;color:var(--muted);font-size:15px} .feature li::before{ content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--gold); } /* pull-quote inside a light section */ .pullquote{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(20px,2.7vw,30px);line-height:1.38;color:var(--navy); border-left:3px solid var(--gold);padding-left:26px;max-width:24ch; } /* ========================================================================== Idea band + CTA band ========================================================================== */ .idea{background:var(--tan-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center} .idea .wrap{padding:84px 30px} .idea .eyebrow{justify-content:center} .idea h2{margin:16px 0 14px} .idea p{color:#46546e;font-size:17px;max-width:54ch;margin:0 auto;line-height:1.62} .cta-band{background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden} .cta-band::before{ content:"";position:absolute;inset:0; background:radial-gradient(700px 480px at 50% 120%,rgba(35,79,176,.38),transparent 62%); } .cta-band .wrap{position:relative;z-index:2;padding:92px 30px} .cta-band h2{color:#fff;max-width:20ch;margin:0 auto} .cta-band p{color:rgba(255,255,255,.82);margin-top:16px;max-width:52ch;margin-left:auto;margin-right:auto} .cta-band .rule{background:var(--gold);margin:22px auto;transform-origin:center} /* ========================================================================== Get Started — contact ========================================================================== */ .mail-wrap{text-align:center;padding:12px 0 8px} .mail-link{ display:inline-block;font-family:var(--serif);font-weight:600; font-size:clamp(23px,4.4vw,46px);line-height:1.15;color:var(--navy); word-break:break-word;position:relative;padding-bottom:10px; transition:color .25s var(--ease); } .mail-link::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold); transform-origin:center;transition:transform .8s var(--ease) .2s; } .js .mail-link::after{transform:scaleX(0)} .reveal.in .mail-link::after{transform:scaleX(1)} .mail-link:hover{color:var(--royal)} .reassure{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px 30px; max-width:720px;margin:52px auto 0;text-align:left; } .reassure li{position:relative;padding-left:30px;color:var(--muted);font-size:15.5px;line-height:1.55} .reassure li::before{ content:"";position:absolute;left:0;top:.52em;width:14px;height:14px; border-radius:50%;border:2px solid var(--gold); } /* ========================================================================== Chat demo (Show Assistant) — the money feature ========================================================================== */ .demo-shell{max-width:680px;margin:0 auto} .chat{ background:var(--white);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow-lg);overflow:hidden; } .chat-head{ display:flex;align-items:center;gap:12px; padding:16px 20px;background:var(--navy);color:#fff; } .chat-avatar{ width:36px;height:36px;border-radius:50%;flex:none; background:var(--royal);color:#fff;display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.02em; } .chat-id{min-width:0;flex:1} .chat-id strong{display:block;font-size:14.5px;font-weight:600;line-height:1.25} .chat-id span{display:block;font-size:11.5px;color:var(--powder);line-height:1.3;margin-top:2px} .chat-live{ display:inline-flex;align-items:center;gap:7px;flex:none; font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--powder); } .chat-live i{ width:7px;height:7px;border-radius:50%;background:#6ee7a8;display:block; animation:pulse 2s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}} .chat-body{ padding:22px 20px;min-height:310px; display:flex;flex-direction:column;justify-content:flex-end;gap:14px; background:linear-gradient(180deg,var(--paper) 0%,var(--white) 100%); } .bubble{ max-width:86%;padding:13px 17px;border-radius:16px;font-size:15px;line-height:1.55; animation:bubbleIn .42s var(--ease) both; } @keyframes bubbleIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .bubble-q{ align-self:flex-end;background:var(--royal);color:#fff; border-bottom-right-radius:5px; } .bubble-a{ align-self:flex-start;background:var(--panel);color:var(--ink); border-bottom-left-radius:5px;border:1px solid var(--line); } .bubble-a strong{color:var(--navy);font-weight:600} /* blinking caret while the question "types" */ .caret{ display:inline-block;width:2px;height:1.05em;vertical-align:text-bottom; background:currentColor;margin-left:2px;animation:blink 1s steps(2,start) infinite; } @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} /* three-dot "thinking" indicator */ .dots{display:inline-flex;gap:5px;align-items:center;padding:3px 0} .dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);display:block; animation:dotB 1.3s var(--ease) infinite} .dots i:nth-child(2){animation-delay:.16s} .dots i:nth-child(3){animation-delay:.32s} @keyframes dotB{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .chat-foot{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:13px 20px;border-top:1px solid var(--line);background:var(--white); } .chat-hint{font-size:12.5px;color:var(--muted)} .chat-toggle{ display:inline-flex;align-items:center;gap:8px;flex:none; background:none;border:1.5px solid var(--line);border-radius:40px; padding:7px 15px;cursor:pointer;font-family:var(--sans); font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy); transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease); } .chat-toggle:hover{border-color:var(--navy);background:var(--navy);color:#fff} .demo-note{ text-align:center;font-size:13.5px;color:var(--muted); max-width:56ch;margin:22px auto 0;line-height:1.6; } /* Link out to the live demo. Solid border, not the old dashed one — this is a finished panel now, not a placeholder waiting on an embed. */ .live-panel{ max-width:680px;margin:0 auto;padding:38px 30px 40px; background:var(--white);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-sm);text-align:center; } .live-panel .eyebrow{justify-content:center;margin-bottom:12px} .live-panel p{color:var(--muted);font-size:15.5px;max-width:48ch;margin:0 auto;line-height:1.6} .live-panel .btn-row{justify-content:center;margin-top:26px} /* ========================================================================== Leaderboard (Call The Class) ========================================================================== */ .board{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow-md); } .board-head{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:20px 24px;background:var(--navy);color:#fff; } .board-head h3{color:#fff;font-size:20px;line-height:1.2} .board-head .sub{font-size:12.5px;color:var(--powder);margin-top:3px;letter-spacing:.02em} .board-live{ display:inline-flex;align-items:center;gap:7px; font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--powder); } .board-live i{width:7px;height:7px;border-radius:50%;background:#6ee7a8;display:block; animation:pulse 2s ease-in-out infinite} .board-cols{ display:grid;grid-template-columns:52px 1fr 78px;gap:14px; padding:12px 24px;border-bottom:1px solid var(--line);background:var(--paper); font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } .board-cols .c-pts{text-align:right} .board-row{ display:grid;grid-template-columns:52px 1fr 78px;gap:14px;align-items:center; padding:17px 24px;border-bottom:1px solid var(--line);position:relative;overflow:hidden; transition:opacity .6s var(--ease),transform .6s var(--ease); } .js .board-row{opacity:0;transform:translateX(-26px)} .board.in .board-row{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 130ms)} .board-row:last-child{border-bottom:0} .board-rank{ font-family:var(--serif);font-weight:700;font-size:19px;color:var(--navy); display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;background:var(--panel); } .board-name{font-weight:600;font-size:15.5px;color:var(--navy);min-width:0} .board-pts{ text-align:right;font-family:var(--serif);font-weight:700;font-size:21px; color:var(--navy);font-variant-numeric:tabular-nums; } /* leader: gold treatment + a single sweep of light across the row */ .board-row.leader{background:linear-gradient(90deg,rgba(199,180,136,.2),rgba(199,180,136,.05) 62%,transparent)} .board-row.leader .board-rank{background:var(--gold);color:var(--navy-deep)} .board-row.leader .board-pts{color:var(--navy)} .board-row.leader::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.72) 46%,transparent 78%); transform:translateX(-120%); } .board.in .board-row.leader::after{animation:sweep 1.5s var(--ease) 1.05s both} @keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}} .board-foot{ padding:15px 24px;background:var(--paper);border-top:1px solid var(--line); font-size:12.5px;color:var(--muted);text-align:center; } .board-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} /* ========================================================================== Responsive — mobile-first is the real target here; most board members open this on a phone, from an email. ========================================================================== */ @media (max-width:1000px){ .board-layout{grid-template-columns:1fr;gap:38px} } /* --- nav breakpoint ----------------------------------------------------- Four links plus the shop button need 1050px alongside the brand — measured, not guessed, and measured with fallback fonts, which are wider than Inter, so the real bar has margin to spare rather than less. Below that the bar would wrap to a second row, and the header's fixed 76px height would clip it — so the drawer takes over here rather than at the layout breakpoint used by the rest of the page. */ @media (max-width:1049px){ .nav-links,.nav .btn{display:none} .burger{display:flex} } @media (min-width:1050px){ .mnav,.mnav-overlay{display:none} } @media (max-width:900px){ .hero-split-grid{grid-template-columns:1fr;gap:34px} .hero-mark{order:2} /* mark always follows the copy */ .hero-mark img{max-width:230px} .sec{padding:72px 0} .pcards{grid-template-columns:1fr;gap:20px} .steps{grid-template-columns:1fr;gap:34px} .features,.features-3{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr 1fr;gap:34px} .footer-brand{grid-column:1 / -1} } @media (max-width:620px){ .wrap,.narrow{padding:0 20px} .sec{padding:60px 0} .sec-sm{padding:48px 0} .hero{min-height:auto} .hero .wrap{padding-top:64px;padding-bottom:64px} .hero-inner{max-width:none} .hero h1{max-width:none} .brand img{height:36px} .brand-word{font-size:14px} .brand-word span{display:none} .btn{width:100%;padding:15px 24px} .btn-row{gap:10px} .btn-sm{width:auto} .hero-mark img{max-width:172px} .pcard-media-shot{aspect-ratio:5/4;padding-top:24px} .shot{max-width:78%;height:calc(100% - 6px);border-width:6px;border-radius:18px 18px 0 0} .pcard-body{padding:24px 22px 26px} .feature{padding:24px 22px 26px} .idea .wrap,.cta-band .wrap,.proof .wrap{padding:60px 20px} .reassure{grid-template-columns:1fr;gap:14px;margin-top:38px} .pullquote{padding-left:18px} .chat-body{min-height:290px;padding:18px 15px} .bubble{max-width:92%;font-size:14.5px} .chat-foot{flex-direction:column;align-items:stretch;gap:10px} .chat-hint{text-align:center} .chat-toggle{justify-content:center} .board-cols,.board-row{grid-template-columns:40px 1fr 62px;gap:10px;padding-left:16px;padding-right:16px} .board-head{padding:16px} .board-name{font-size:14.5px} .board-pts{font-size:19px} .board-rank{width:30px;height:30px;font-size:16px} .footer-top{grid-template-columns:1fr;gap:30px} .footer-bot{justify-content:flex-start;gap:8px} } /* ========================================================================== Reduced motion — every animation collapses to its finished state. Nothing moves, nothing fades, nothing types. Content is identical. ========================================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; transition-delay:0ms!important; scroll-behavior:auto!important; } .reveal,.stagger>*{opacity:1!important;transform:none!important} .rule,.eyebrow::before,.step::before,.mail-link::after{transform:scaleX(1)!important} .board-row{opacity:1!important;transform:none!important} .board-row.leader::after{display:none} .hero-media img{animation:none!important;transform:none!important} .hero-mark img{animation:none!important;opacity:1!important;transform:none!important} .chat-live i,.board-live i,.dots i{animation:none!important;opacity:1!important} .caret{display:none} .bubble{animation:none!important} } /* Printing: flatten motion state so nothing prints blank. */ @media print{ .reveal,.stagger>*,.board-row{opacity:1!important;transform:none!important} .site-header,.mnav,.mnav-overlay,.chat-toggle{display:none} }