/* ============================================================ VAGPULSE — site-polish.css ADDITIVE overrides. Safe to append after styles.css?v=5. No ids/classes/data-* renamed or removed; no JS-driven properties fought (transforms set by app.js are untouched). ============================================================ */ /* ── 0. shared tokens: one radius + shadow language across all cards ── */ :root{ --r-md:14px; --r-lg:16px; --card-line:rgba(124,175,255,.16); /* one border color for every card */ --card-line-hover:rgba(91,160,255,.45); /* one hover color (was green on .cablecard) */ --shadow-card:0 18px 44px -24px rgba(16,16,16,.75); } /* ── 1. type hierarchy: balanced headings, calmer body measure ── */ h1,h2,h3{text-wrap:balance} /* why: no orphan words in big display type */ .lead,.section-head p,.scan-tip{text-wrap:pretty} .section-head p{font-size:1.06rem;max-width:640px;margin-left:auto;margin-right:auto} .section-head p b,.lead b{color:#dbe9ff} /* why: bolds were same color as body — now read as emphasis */ .section-head h2{letter-spacing:.01em} /* ── 2. tighter vertical rhythm (page was very airy between sections) ── */ .section{padding-top:4.75rem;padding-bottom:4.75rem} .section-head{margin-bottom:2.6rem} .featrow{margin-bottom:3.4rem} /* why: 4rem gaps made Capabilities feel endless */ .cta{padding-top:5rem;padding-bottom:5rem} .hero-center{padding-top:4.75rem} /* why: leaves headroom for the incoming .preorder-bar without pushing the app frame below the fold */ /* ── 3. buttons: consistent radius, real hover/active/focus states ── */ .btn{border-radius:12px;letter-spacing:.01em;-webkit-tap-highlight-color:transparent} .btn-primary:hover{transform:translateY(-1.5px); box-shadow:0 16px 36px -10px rgba(32,128,255,.6),inset 0 1px 0 rgba(255,255,255,.22)} .btn:active{transform:translateY(0) scale(.985)} /* why: click feedback was missing */ .btn-ghost{background:rgba(124,175,255,.05);border-color:rgba(124,175,255,.22)} .btn-ghost:hover{background:rgba(32,128,255,.10);border-color:var(--accent2);color:#dbe9ff} /* ── 4. keyboard focus (there was none anywhere on the page) ── */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--accent2);outline-offset:3px;border-radius:8px} .seg button:focus-visible,.sf-tab:focus-visible{outline-offset:1px} .sf-tab,.seg button,summary{-webkit-tap-highlight-color:transparent} /* ── 5. nav: subtle depth + animated link underline ── */ .nav{background:rgba(26,32,42,.82);box-shadow:0 12px 32px -22px rgba(16,16,16,.85)} .nav-links a:not(.btn){position:relative;padding:.25rem 0;transition:color .15s} .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px; border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--lime));transition:right .22s ease} .nav-links a:not(.btn):hover::after{right:0} /* why: hover was a bare color swap */ /* ── 6. hero: glassy eyebrow + divided stats ── */ .eyebrow{background:rgba(32,128,255,.07);border-color:rgba(91,160,255,.28); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .hero-stats{gap:0} .hero-stats>div{padding-left:1.5rem;padding-right:1.5rem;border-left:1px solid rgba(124,175,255,.18)} .hero-stats>div:first-child{border-left:none} /* why: stats floated loose; dividers group them */ /* ── 7. cards: ONE card language (bg2 gradient / --card-line / --r-md / lift) ── */ .card,.step,.ms,.faq details,.cablecard{border-radius:var(--r-md);border-color:var(--card-line)} .card,.step{box-shadow:var(--shadow-card)} .card:hover{border-color:var(--card-line-hover)} .step{transition:border-color .2s,transform .2s} .step:hover{border-color:var(--card-line-hover);transform:translateY(-2px)} .ms{transition:border-color .2s,transform .2s} .ms:hover{border-color:var(--card-line-hover);transform:translateY(-2px)} /* body-scoped: .cablecard is (re)declared in an inline