/* ============================================================ SafeToOpen — redesign detail layer v1 Load AFTER styles.v28.css. Pure overlay: no markup changes required except the two tags (this file + redesign.v1.js). Keeps: Archivo + JetBrains Mono, cobalt/teal palette, all copy. Adds: crafted details — animated hero field, section indexing, card accents, button sheen, editorial hairlines. ============================================================ */ /* ---------- typography: Apple system font stack ---------- */ :root{ --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif; /* mono retired by request — every var(--mono) label now renders in the sans stack */ --mono:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif; } /* ---------- no shouting: uppercase labels → sentence case ---------- */ .kicker,.console__bar .lbl,.telem .c .k,.logos .cap,.bigstat .lab,.cmp thead th, .rescard .thumb .tag,.trust .ll,.more,.ppanel .ph,.stat .l,.ptier .tag, .footer__col h4,.crumb,.tier-pill,.xsplit__label,.l3__where,.ptier--exec .tag--exec, .why__k,.cmp__table thead th,.art-back,.art-tag,.art-sources h2,.art-related h2, .art-related .rt,.xreveal__label,.cert-badge__t,.legalbody .leg-toc h2,.proof__tag{ text-transform:none;letter-spacing:.01em; } /* slightly larger now that they're not caps-compressed */ .footer__col h4{font-size:13px;font-weight:600} .cmp thead th,.cmp__table thead th{font-size:12.5px;font-weight:600} .bigstat .lab{font-size:12.5px} .logos .cap{font-size:12.5px} .crumb{font-size:12px} .more{font-size:13px} /* ---------- global type polish ---------- */ h1,h2,h3,.h2,.headline{text-wrap:balance} p,.lead,.subhead{text-wrap:pretty} :focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px} .bigstat .big,.stat .v,.telem .c .v,.ptier .amt{font-variant-numeric:tabular-nums} /* (scroll-progress hairline removed by request) */ /* ============================================================ HERO — animated detection field (elements injected by JS) ============================================================ */ .hero{isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hero__inner{z-index:2} .hero-bg__mesh{position:absolute;inset:0;width:100%;height:100%;opacity:.9} .hero-bg__blob{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform} .hero-bg__blob.b1{width:620px;height:620px;top:-260px;right:-140px;background:radial-gradient(circle at 32% 32%,rgba(86,97,122,.13),rgba(14,26,48,.05) 58%,transparent 74%);animation:stoBlobA 26s ease-in-out infinite alternate} .hero-bg__blob.b2{width:700px;height:700px;bottom:-380px;left:-220px;background:radial-gradient(circle at 68% 38%,rgba(136,147,168,.11),transparent 70%);animation:stoBlobB 34s ease-in-out infinite alternate} @keyframes stoBlobA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-70px,50px,0) scale(1.12)}} @keyframes stoBlobB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(90px,-40px,0) scale(1.08)}} @media (prefers-reduced-motion:reduce){.hero-bg__blob{animation:none}} /* ============================================================ HERO v2 — quieter, product-forward, Apple-like restraint. Variants driven by attributes (set by redesign.v1.js defaults; overridden by the Tweaks panel). ============================================================ */ /* background variants */ .hero::before{opacity:0;transition:opacity .4s} html[data-hero-bg="cyber"] .hero::before{opacity:1;background-image:linear-gradient(rgba(14,26,48,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,26,48,.05) 1px,transparent 1px)} .hero-bg__blob{display:none} html[data-hero-bg="blue"] .hero-bg__blob,html[data-hero-bg="glow"] .hero-bg__blob,html[data-hero-bg="grey"] .hero-bg__blob,html[data-hero-bg="cyber"] .hero-bg__blob{display:block} /* grey mist: same motion, zero color (also used by the cyber grid) */ html[data-hero-bg="grey"] .hero-bg__blob.b1,html[data-hero-bg="cyber"] .hero-bg__blob.b1{background:radial-gradient(circle at 32% 32%,rgba(86,97,122,.13),rgba(14,26,48,.05) 58%,transparent 74%)} html[data-hero-bg="grey"] .hero-bg__blob.b2,html[data-hero-bg="cyber"] .hero-bg__blob.b2{background:radial-gradient(circle at 68% 38%,rgba(136,147,168,.11),transparent 70%)} html[data-hero-bg="grey"] .hero-bg::after,html[data-hero-bg="cyber"] .hero-bg::after{background:radial-gradient(50% 60% at 50% 30%,rgba(14,26,48,.035),transparent 70%)} html[data-hero-bg="white"] .hero-bg::after{display:none} .hero-bg__mesh{display:none} html[data-hero-mesh="on"] .hero-bg__mesh{display:block} /* cyber circuit layer: canvas masked like the grid so both fade together */ .hero-bg__cyber{display:none;position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 32% 0%,#000 25%,transparent 74%);mask-image:radial-gradient(ellipse 80% 60% at 32% 0%,#000 25%,transparent 74%)} html[data-hero-bg="cyber"] .hero-bg__cyber{display:block} /* soft static tint so "clean" isn't sterile */ .hero-bg::after{content:"";position:absolute;top:-30%;left:50%;width:90%;height:70%;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 30%,rgba(14,26,48,.04),transparent 70%);pointer-events:none} /* eyebrow line removed by request (v28 already hides .kicker globally) */ /* type: tighter, calmer */ h1.headline{font-weight:700;letter-spacing:-.028em;line-height:1.04} .hero .subhead{color:var(--mut);line-height:1.6} html[data-hero-accent="black"] .hero .accent{color:var(--ink)} /* CTAs: one solid flat button + a plain text link */ .hero .btn-primary{background:var(--cobalt);border-radius:10px;box-shadow:0 1px 2px rgba(14,26,48,.15)} .hero .btn-primary:hover{background:var(--cobalt-deep);box-shadow:0 4px 12px rgba(0,62,165,.25)} .hero .btn-primary::after{display:none} .hero .btn-line{background:transparent;border-color:transparent;color:var(--cobalt);font-weight:600} .hero .btn-line:hover{background:var(--cobalt-tint);border-color:transparent;color:var(--cobalt-deep)} .hero .ticks{margin-top:30px;gap:8px 16px} .hero .ticks .t{font-family:var(--sans);font-size:12.5px;letter-spacing:0;color:var(--faint)} .hero .ticks .t svg{display:none} .hero .ticks .t + .t::before{content:"·";color:var(--line-strong);margin-right:14px} /* demo panel: hairline frame + keyed shadow */ .hero-demo{border-radius:20px;box-shadow:0 0 0 1px var(--line),0 24px 60px -24px rgba(14,26,48,.25)} .hero-demo iframe{border-radius:20px} /* product screenshot variant: image carries its own window chrome + shadow */ .hero-demo--shot{border-radius:0;box-shadow:none;filter:drop-shadow(0 30px 55px rgba(14,26,48,.20));animation:stoShotFloat 9s ease-in-out infinite;will-change:transform} .hero-demo--shot img{display:block;width:100%;height:auto} @keyframes stoShotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){.hero-demo--shot{animation:none}} /* ============================================================ HERO MOCK — hand-built warning-panel scene (blue/grey/red/amber) ============================================================ */ .hero-demo.hero-mock{position:relative;border-radius:0;box-shadow:none;background:transparent;padding:0 0 12px;filter:none;display:grid} /* two alternating scenes (cycled by redesign.v1.js), grid-stacked so the container is always as tall as the tallest scene — nothing gets cropped */ .hm-scene{grid-area:1/1;position:relative;opacity:0;transition:opacity .55s var(--ease);pointer-events:none} .hm-scene.on{opacity:1} /* the suspicious page, kept abstract */ .hm-win{border:1px solid var(--line-strong);border-radius:14px;background:#fff;box-shadow:0 18px 44px -18px rgba(14,26,48,.22);overflow:hidden;align-self:start} .hm-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:linear-gradient(180deg,#fafbfd,#f0f3f8);border-bottom:1px solid var(--line)} .hm-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)} .hm-url{margin-left:10px;flex:1;max-width:230px;height:20px;display:flex;align-items:center;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:6px;font-family:var(--mono);font-size:10px;color:var(--mut);white-space:nowrap;overflow:hidden} /* SafeToOpen installed as a browser extension */ .hm-ext{margin-left:auto;width:20px;height:20px;border-radius:6px;background:var(--cobalt-tint);border:1px solid rgba(0,62,165,.18);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative} .hm-ext svg{width:11px;height:11px} .hm-ext::after{content:"";position:absolute;right:-2.5px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--cobalt-mid);border:1.5px solid #fff} .hm-page{position:relative;padding:26px 28px 30px;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;align-items:start} .hm-brand{grid-column:1;width:64%;height:22px;border-radius:6px;background:#dbe6f6} .hm-line{grid-column:1;height:9px;border-radius:5px;background:#eef2f8}.hm-line.l1{width:88%}.hm-line.l2{width:64%} .hm-form{grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;gap:9px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe} .hm-field{height:30px;border:1px solid var(--line);border-radius:7px;background:#fff;display:flex;align-items:center;padding:0 10px;font-size:11px;color:var(--faint)} /* scene A page: Facebook login replica */ .hm-page.hm-fb{display:grid;grid-template-columns:1.05fr 1fr;gap:8px 18px;align-items:center;padding:20px 20px 22px} .hm-fb__left{grid-column:1} .hm-fb__logo{font-size:25px;font-weight:800;letter-spacing:-.045em;color:#1877f2;margin-bottom:5px} .hm-fb__tag{font-size:11px;color:var(--ink-2);line-height:1.45;max-width:22ch} .hm-fb__card{grid-column:2;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 14px rgba(14,26,48,.08);padding:11px;display:flex;flex-direction:column;gap:7px} .hm-fb__card .hm-field{height:26px;font-size:10.5px} .hm-fb__login{height:28px;border-radius:7px;background:#1877f2;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center} .hm-fb__forgot{font-size:9.5px;color:#1877f2;text-align:center} .hm-fb__hr{height:1px;background:var(--line);margin:1px 0} .hm-fb__create{height:26px;border-radius:7px;background:#42b72a;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;align-self:center;padding:0 13px;white-space:nowrap;max-width:100%} /* scene B page: Microsoft sign-in replica */ .hm-page.hm-ms{display:flex;align-items:center;justify-content:center;background:#f2f4f8;padding:18px} .hm-ms__card{width:min(80%,240px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(14,26,48,.10);padding:15px 16px;display:flex;flex-direction:column;gap:8px} .hm-ms__logo{display:flex;align-items:center;gap:6px} .hm-ms__sq{display:grid;grid-template-columns:8px 8px;grid-auto-rows:8px;gap:1.5px} .hm-ms__sq i:nth-child(1){background:#f25022}.hm-ms__sq i:nth-child(2){background:#7fba00}.hm-ms__sq i:nth-child(3){background:#00a4ef}.hm-ms__sq i:nth-child(4){background:#ffb900} .hm-ms__logo span{font-size:12.5px;font-weight:600;color:#5e5e5e} .hm-ms__title{font-size:14.5px;font-weight:700;color:var(--ink)} .hm-ms__card .hm-field{height:24px;border-radius:2px;border-color:#c8c8c8;font-size:10.5px} .hm-ms__row{display:flex;gap:5px;font-size:9.5px;color:var(--mut)} .hm-ms__row em{font-style:normal;color:#0067b8} .hm-ms__next{align-self:flex-end;min-width:72px;height:25px;background:#0067b8;color:#fff;font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;border-radius:2px} .hm-btnfake{height:30px;border-radius:7px;background:#8fb1e8} /* the SafeToOpen verdict card */ .hm-panel{position:absolute;right:-14px;top:104px;width:min(78%,360px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 56px -16px rgba(14,26,48,.32);padding:14px 14px 12px;opacity:0;transform:translateY(22px) scale(.94)} .hm-scene.on .hm-panel{animation:hmPanelIn .85s cubic-bezier(.34,1.45,.42,1) .5s forwards} @keyframes hmPanelIn{0%{opacity:0;transform:translateY(22px) scale(.94)}55%{opacity:1;transform:translateY(-4px) scale(1.01)}100%{opacity:1;transform:none}} .hm-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px} .hm-logo{width:30px;height:30px;border-radius:8px;background:var(--cobalt-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative} .hm-logo::after{content:"";position:absolute;inset:0;border-radius:8px;opacity:0} .hm-scene.on .hm-logo::after{animation:hmPing 1.1s var(--ease) 1s} @keyframes hmPing{0%{opacity:1;box-shadow:0 0 0 0 rgba(0,62,165,.35)}100%{opacity:0;box-shadow:0 0 0 14px rgba(0,62,165,0)}} .hm-logo svg{width:16px;height:16px} .hm-ht b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .hm-ht em{display:block;font-style:normal;font-size:11.5px;color:var(--mut);margin-top:1px} .hm-issue{border-left:3px solid var(--danger);background:var(--danger-soft);border-radius:6px;padding:8px 10px;margin-bottom:7px;opacity:0;transform:translateX(18px)} @keyframes hmIssueIn{0%{opacity:0;transform:translateX(18px)}65%{opacity:1;transform:translateX(-3px)}100%{opacity:1;transform:none}} .hm-issue b{display:block;font-size:11.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em;line-height:1.35} .hm-issue em{display:block;font-style:normal;font-size:10.5px;color:var(--mut);line-height:1.4;margin-top:2px} .hm-issue.warn{border-left-color:var(--warning);background:#fff8ec} .hm-scene.on .hm-issue.i1{animation:hmIssueIn .55s var(--ease) 1.2s forwards} .hm-scene.on .hm-issue.i2{animation:hmIssueIn .55s var(--ease) 1.65s forwards} .hm-scene.on .hm-issue.i3{animation:hmIssueIn .55s var(--ease) 2.1s forwards} .hm-actions{display:flex;gap:8px;margin-top:10px;opacity:0} .hm-scene.on .hm-actions{animation:hmIn .5s var(--ease) 2.5s forwards} .hm-actions span{font-size:11px;font-weight:700;padding:6px 11px;border-radius:7px} .hm-actions .a1{color:#fff;background:var(--cobalt)} .hm-actions .a2{color:var(--mut);border:1px solid var(--line-strong)} @keyframes hmIn{to{opacity:1;transform:none}} /* scene B: lookalike-domain alert with the education card */ .hm-brand.alt{background:#e2e6ec} .hm-btnfake.alt{background:#9fb4d4} .hm-alert{position:relative;z-index:2;width:min(86%,330px);margin:-118px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 56px -14px rgba(14,26,48,.35);padding:15px 15px 13px;text-align:center;opacity:0} .hm-scene.on .hm-alert{animation:hmPanelIn .85s cubic-bezier(.34,1.45,.42,1) .5s forwards} .hm-ring{position:relative;width:46px;height:46px;margin:0 auto 9px;border-radius:50%;display:flex;align-items:center;justify-content:center} .hm-ring svg{width:20px;height:20px;position:relative;z-index:1} .hm-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#e88a8a 0 26%,#fbdcdc 26% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))} .hm-scene.on .hm-ring::before{animation:hmSpin 1.2s var(--ease) .7s both} @keyframes hmSpin{0%{transform:rotate(-300deg);opacity:0}25%{opacity:1}100%{transform:rotate(0)}} .hm-at{display:block;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--danger-text);margin-bottom:6px} .hm-ab{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin:0 0 10px} .hm-ab b{color:var(--ink)} .hm-edu{background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-align:left;opacity:0} .hm-scene.on .hm-edu{animation:hmIn .5s var(--ease) 1.4s forwards} .hm-edu>b{display:block;font-size:11.5px;color:var(--ink);font-weight:700} .hm-edu>em{display:block;font-style:normal;font-size:10.5px;color:var(--mut);margin:2px 0 7px} .hm-erow{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:5px 0 4px;font-size:10.5px;opacity:0;transform:translateX(12px)} .hm-scene.on .hm-erow.e1{animation:hmIssueIn .5s var(--ease) 1.9s forwards} .hm-scene.on .hm-erow.e2{animation:hmIssueIn .5s var(--ease) 2.25s forwards} .hm-erow span{font-weight:700;color:var(--ink)} .hm-erow i{font-style:normal;color:var(--mut)} .hm-abtns{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;opacity:0} .hm-scene.on .hm-abtns{animation:hmIn .5s var(--ease) 2.6s forwards} .hm-abtns span{font-size:10.5px;font-weight:700;padding:6px 10px;border-radius:8px;flex:1;white-space:nowrap} .hm-abtns .o{color:var(--cobalt);border:1px solid var(--cobalt)} .hm-abtns .r{flex-basis:100%;color:var(--danger-text);background:var(--danger-soft);border:1px solid var(--danger-border)} @media (prefers-reduced-motion:reduce){.hm-panel,.hm-issue,.hm-actions,.hm-alert,.hm-edu,.hm-erow,.hm-abtns{animation:none;opacity:1;transform:none}.hm-logo::after,.hm-scene--b{display:none}.hm-scene{opacity:1}} @media (max-width:940px){.hero-demo.hero-mock{max-width:520px;margin:0 auto}.hm-panel{right:0}} /* centered layout variant */ html[data-hero-align="centered"] .hero__inner{grid-template-columns:1fr;text-align:center} html[data-hero-align="centered"] .hero__copy{max-width:720px;margin:0 auto} html[data-hero-align="centered"] .hero .kicker{justify-content:center} html[data-hero-align="centered"] .hero .subhead{margin-inline:auto} html[data-hero-align="centered"] .cta-row,html[data-hero-align="centered"] .hero .ticks{justify-content:center} html[data-hero-align="centered"] .hero-demo{width:100%;max-width:780px;margin:0 auto} /* ============================================================ HERO STYLES — three hand-set compositions (data-hero-style) ============================================================ */ /* LEDGER: flat white, editorial rules, no washes */ html[data-hero-style="ledger"] .hero-bg,html[data-hero-style="ledger"] .hero::before{display:none} html[data-hero-style="ledger"] .hero{border-bottom:1px solid var(--line)} html[data-hero-style="ledger"] .hero__inner{gap:0;align-items:start;padding-top:clamp(48px,7vw,84px)} html[data-hero-style="ledger"] .hero__copy{padding-right:clamp(28px,4vw,56px);border-right:1px solid var(--line);max-width:none} html[data-hero-style="ledger"] .hero-demo{margin-left:clamp(28px,4vw,56px)} html[data-hero-style="ledger"] .hero .btn{border-radius:6px} html[data-hero-style="ledger"] .hero .ticks{margin-top:36px;padding-top:16px;border-top:1px solid var(--line)} @media (max-width:940px){ html[data-hero-style="ledger"] .hero__copy{border-right:0;padding-right:0} html[data-hero-style="ledger"] .hero-demo{margin-left:0;margin-top:8px} } /* PANEL: asymmetric two-tone, demo anchored on a solid grey field */ html[data-hero-style="panel"] .hero-bg,html[data-hero-style="panel"] .hero::before{display:none} html[data-hero-style="panel"] .hero{background:linear-gradient(90deg,#fff 0 58%,var(--bg-alt2) 58% 100%)} html[data-hero-style="panel"] .hero__copy{padding-right:clamp(16px,2.5vw,36px)} @media (max-width:940px){ html[data-hero-style="panel"] .hero{background:linear-gradient(180deg,#fff 0 46%,var(--bg-alt2) 46% 100%)} } /* DARK: deep ink field, white type, cards glow */ html[data-hero-style="dark"] .hero{background:var(--ink)} html[data-hero-style="dark"] .hero-bg,html[data-hero-style="dark"] .hero::before{display:none} html[data-hero-style="dark"] h1.headline{color:#fff} html[data-hero-style="dark"] .hero .accent{color:#8fb3ff} html[data-hero-style="dark"][data-hero-accent="black"] .hero .accent{color:#fff} html[data-hero-style="dark"] .hero .subhead{color:rgba(255,255,255,.74)} html[data-hero-style="dark"] .hero .ticks .t{color:rgba(255,255,255,.55)} html[data-hero-style="dark"] .hero .ticks .t + .t::before{color:rgba(255,255,255,.25)} html[data-hero-style="dark"] .hero .btn-line{color:#fff} html[data-hero-style="dark"] .hero .btn-line:hover{background:rgba(255,255,255,.1);color:#fff} html[data-hero-style="dark"] .hero .btn-primary{background:var(--cobalt-mid);box-shadow:0 8px 24px rgba(18,85,199,.4)} html[data-hero-style="dark"] .hm-win{border-color:rgba(255,255,255,.12);box-shadow:0 30px 70px -20px rgba(0,0,0,.55)} /* ============================================================ COLLAGE: deep brand field + geometric composition (Proofpoint- style confidence, in SafeToOpen cobalt). Default. ============================================================ */ html[data-hero-style="collage"] .hero{background:#04102b;border-bottom:none} html[data-hero-style="collage"] .hero-bg,html[data-hero-style="collage"] .hero::before{display:none} /* subtle dot texture, brand-dark, no gradient wash */ html[data-hero-style="collage"] .hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(143,179,255,.10) 1px,transparent 1.5px);background-size:26px 26px;mask-image:linear-gradient(115deg,transparent 42%,#000 78%);-webkit-mask-image:linear-gradient(115deg,transparent 42%,#000 78%);pointer-events:none} html[data-hero-style="collage"] .hero__inner{position:relative;z-index:1;align-items:center} html[data-hero-style="collage"] h1.headline{color:#fff} html[data-hero-style="collage"] .hero .accent{color:#7fa8ff} html[data-hero-style="collage"] .hero .subhead{color:rgba(233,240,252,.78)} html[data-hero-style="collage"] .hero .btn{border-radius:4px} html[data-hero-style="collage"] .hero .btn-primary{background:var(--cobalt-mid);box-shadow:none} html[data-hero-style="collage"] .hero .btn-primary:hover{background:#2f7ae0;box-shadow:none} html[data-hero-style="collage"] .hero .btn-line{color:#fff;border:1.5px solid rgba(255,255,255,.35);border-radius:4px} html[data-hero-style="collage"] .hero .btn-line:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);color:#fff} html[data-hero-style="collage"] .hero .ticks .t{color:rgba(233,240,252,.55)} html[data-hero-style="collage"] .hero .ticks .t + .t::before{color:rgba(233,240,252,.25)} /* email-security demo: parts that sit directly on the dark hero field (Replay button, caption, panel header, risk-meter labels) */ html[data-hero-style="collage"] .hero .esec-replay, html[data-hero-style="dark"] .hero .esec-replay{color:#fff;border-color:rgba(255,255,255,.35)} html[data-hero-style="collage"] .hero .esec-replay:hover, html[data-hero-style="dark"] .hero .esec-replay:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)} html[data-hero-style="collage"] .hero .esec-cap, html[data-hero-style="dark"] .hero .esec-cap{color:rgba(233,240,252,.75)} html[data-hero-style="collage"] .hero .esec-cap.win, html[data-hero-style="dark"] .hero .esec-cap.win{color:#ff9d9d} html[data-hero-style="collage"] .hero .esec-panel__h, html[data-hero-style="dark"] .hero .esec-panel__h{color:rgba(233,240,252,.6)} html[data-hero-style="collage"] .hero .esec-panel__h svg, html[data-hero-style="dark"] .hero .esec-panel__h svg{color:#7fa8ff} html[data-hero-style="collage"] .hero .esec-meter__row, html[data-hero-style="dark"] .hero .esec-meter__row{color:rgba(233,240,252,.6)} html[data-hero-style="collage"] .hero .esec-meter__track, html[data-hero-style="dark"] .hero .esec-meter__track{background:rgba(255,255,255,.14)} /* geometric composition: liquid-mercury goo layer (injected by JS) */ html[data-hero-style="collage"] .hero-demo.hero-mock{padding:34px 0 12px 34px} .hero-goo{position:absolute;inset:0;z-index:0;pointer-events:none;display:none} html[data-hero-style="collage"] .hero-goo{display:block} /* mercury layers on the dark bands / CTA (fewer drops, injected by JS) */ .sto-merc{position:absolute;inset:0;z-index:0;pointer-events:none} html[data-hero-style="collage"] .hm-scene{z-index:1} html[data-hero-style="collage"] .hm-win{border:none;box-shadow:0 34px 80px -22px rgba(0,0,0,.65);border-radius:10px} html[data-hero-style="collage"] .hm-bar{border-radius:10px 10px 0 0} html[data-hero-style="collage"] .hm-panel,html[data-hero-style="collage"] .hm-alert{border:none;border-radius:10px;box-shadow:0 30px 70px -18px rgba(0,0,0,.7)} @media (max-width:940px){ html[data-hero-style="collage"] .hero-demo.hero-mock{padding:26px 0 12px 22px} html[data-hero-style="collage"] .hero-demo.hero-mock::after{display:none} } /* ============================================================ GEOMETRIC MOTIF — quarter-circles + half-circle outlines, carried from the hero collage through the page's key surfaces ============================================================ */ /* dark stats band: flat ink field + shapes instead of mesh */ .bigstats{background:#04102b} .bigstats::before{background-image:radial-gradient(rgba(143,179,255,.10) 1px,transparent 1.5px);background-size:26px 26px;mask-image:linear-gradient(115deg,transparent 40%,#000 80%);-webkit-mask-image:linear-gradient(115deg,transparent 40%,#000 80%)} .bigstats .inner{position:relative} /* (mercury drop layers on .bigstats/.protect/.final__card are injected by JS) */ /* dark protect band: same field + corner quarter */ .protect{background:#04102b} /* (protect band mercury layer injected by JS) */ /* final CTA: flat cobalt + shapes instead of aurora */ .final__card{background:var(--cobalt);box-shadow:none} .final__card::before{background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.5px);background-size:26px 26px;mask-image:linear-gradient(115deg,transparent 45%,#000 85%);-webkit-mask-image:linear-gradient(115deg,transparent 45%,#000 85%)} /* (final CTA mercury layer injected by JS) */ /* ============================================================ RESOURCES CARDS — quiet editorial redesign (no fake thumbnail) ============================================================ */ .rescard{border-radius:14px} .rescard .thumb{background-image:none;aspect-ratio:auto;background:transparent;padding:22px 22px 0;justify-content:flex-start;overflow:visible} .rescard.t2 .thumb,.rescard.t3 .thumb{background:transparent} .rescard .thumb::before{content:none} .rescard .thumb .tag{position:static;align-self:flex-start;color:var(--cobalt);background:var(--cobalt-tint);padding:4px 9px;border-radius:5px;margin-bottom:14px} .rescard .thumb__title{color:var(--ink);font-size:19px;letter-spacing:-.015em;line-height:1.3;transition:color .2s} .rescard:hover .thumb__title{color:var(--cobalt)} .rescard .rb{padding:10px 22px 20px} .rescard p{font-size:13.5px} .rescard:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-strong)} /* hero palette: black/grey + blue only — no green, no gradient text */ .hero .accent{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--cobalt)} .hero .kicker .d{background:var(--cobalt-mid);animation:stoPulseBlue 2.4s var(--ease) infinite} @keyframes stoPulseBlue{0%{box-shadow:0 0 0 0 rgba(18,85,199,.4)}70%{box-shadow:0 0 0 7px rgba(18,85,199,0)}100%{box-shadow:0 0 0 0 rgba(18,85,199,0)}} .hero .ticks .t svg{color:var(--cobalt)} /* ============================================================ SECTION HEADS — hairline detail (numbering removed by request) ============================================================ */ .section-head.center .kicker::after{content:"";display:inline-block;width:26px;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)} /* ============================================================ CARDS — focus-lift on hover: slight scale + glossy top light ============================================================ */ .pillar,.step,.proofcard,.tst,.ptier,.client-card,.route{position:relative;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,background .3s} .pillar:hover,.step:hover,.proofcard:hover,.tst:hover,.ptier:not(.ptier--exec):hover,.client-card:hover,.route:hover{transform:translateY(-3px) scale(1.015);box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.9);background:linear-gradient(180deg,#ffffff 0%,#fafcff 100%)} /* the dark Executive tier keeps its navy field on hover — just lifts */ .ptier--exec:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 26px 58px rgba(8,20,48,.42)} /* step cards: no numbering (removed by request) */ .step .n{display:none} /* hover states get slightly keyed borders */ .pillar:hover,.proofcard:hover,.tst:hover,.step:hover,.ptier:not(.ptier--exec):hover,.client-card:hover,.route:hover{border-color:var(--line-strong)} /* ============================================================ BUTTONS — sheen + depth ============================================================ */ .btn{position:relative;overflow:hidden} .btn-primary{background:linear-gradient(180deg,var(--cobalt-mid) 0%,var(--cobalt) 42%,var(--cobalt) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px rgba(0,62,165,.22)} .btn-primary:hover{background:linear-gradient(180deg,var(--cobalt) 0%,var(--cobalt-deep) 60%,var(--cobalt-deep) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px rgba(0,62,165,.30)} .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:44%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none} .btn-primary:hover::after{left:130%} .btn-white{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 14px rgba(4,12,34,.18)} /* ---------- "more" links: animated underline ---------- */ .more,.proofcard .pl,.rescard .rl{position:relative;background-image:linear-gradient(90deg,currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;transition:background-size .35s var(--ease);padding-bottom:2px} .more:hover,.proofcard .pl:hover,.rescard:hover .rl{background-size:100% 1px} /* ============================================================ TRUST STRIP + BADGES ============================================================ */ .trust{background:linear-gradient(180deg,#fff 0%,var(--bg-alt) 160%)} .cbadge{transition:border-color .2s,color .2s,transform .2s} .cbadge:hover{border-color:var(--cobalt-mid);color:var(--ink);transform:translateY(-1px)} /* dark stats band: hover polish */ .bigstat{position:relative;transition:border-color .3s,background .3s,transform .3s var(--ease);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))} .bigstat:hover{border-color:rgba(143,179,255,.45);transform:translateY(-3px);background:linear-gradient(180deg,rgba(143,179,255,.08),rgba(255,255,255,.02))} .bigstat::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-top:1px solid rgba(143,179,255,.55);border-right:1px solid rgba(143,179,255,.55);opacity:0;transition:opacity .3s} .bigstat:hover::after{opacity:1} /* solid colors — gradient text clips glyphs that overflow the box (the 40,000+ bug) */ .bigstat .big{background:none;-webkit-background-clip:unset;background-clip:unset;color:#fff} .bigstat .big .u{background:none;-webkit-background-clip:unset;background-clip:unset;color:#8fb3ff} /* keep the number + unit from overflowing the card on narrow screens */ .bigstat .big{font-size:clamp(2rem,8.5vw,3.6rem)} @media (min-width:700px){.bigstat .big{font-size:clamp(2.4rem,3.4vw,3.6rem)}} /* ============================================================ COMPARISON TABLE — highlight our column as a card-in-table ============================================================ */ .cmp thead th.us{background:linear-gradient(180deg,var(--cobalt-mid),var(--cobalt));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .cmp td.us{box-shadow:inset 2px 0 0 var(--cobalt-tint),inset -2px 0 0 var(--cobalt-tint)} .cmp tbody tr{transition:background .15s} .cmp tbody tr:hover{background:var(--bg-alt)} /* ============================================================ TESTIMONIALS — human touches ============================================================ */ .tst .stars{color:#e8930c;text-shadow:0 1px 0 rgba(217,119,6,.15)} .tst .av{background:linear-gradient(135deg,var(--cobalt-mid),var(--cobalt-deep));box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--line-strong)} .tst .q{position:relative} /* ============================================================ FAQ — livelier disclosure ============================================================ */ .faq-item{transition:background .2s} .faq-item__t{transition:color .18s;border-radius:var(--r-sm)} .faq-item__t:hover{color:var(--cobalt)} .faq-item--open .faq-item__t{color:var(--cobalt)} .faq-item--open{background:linear-gradient(90deg,var(--cobalt-tint) 0%,transparent 70%)} .faq-item--open .faq-item__t,.faq-item--open .faq-item__b p{padding-left:12px;padding-right:12px} /* ============================================================ FINAL CTA — geometric (see motif section above) ============================================================ */ /* ============================================================ RESOURCES CARDS — thumb motif (see geometric section above) ============================================================ */ /* ============================================================ FOOTER — gradient seam + micro-motion ============================================================ */ .footer{position:relative} .footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cobalt-mid) 0%,var(--cobalt) 45%,transparent 100%)} .footer__col a{transition:color .15s,transform .15s;will-change:transform} .footer__col a:hover{transform:translateX(3px)} /* ============================================================ NAV — crisper landing ============================================================ */ .nav--scrolled{box-shadow:0 1px 0 rgba(14,26,48,.03),0 8px 24px -18px rgba(14,26,48,.25)} .nav__links a{position:relative} /* ============================================================ DARK PROTECT BAND — seam light ============================================================ */ .protect{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(4,12,34,.5)} /* ---------- reduced motion: keep it calm ---------- */ @media (prefers-reduced-motion:reduce){ .btn-primary::after{display:none} .hero-goo,.sto-merc{display:none !important} }