/* ============================================================ GUARDIANGAZE UNIFIED THEME v2 (React build) Generated from guardian-gaze-site-final/*.html Import LAST in main.jsx so it wins over legacy stylesheets. · violet (--wp) = GuardianGaze for WordPress · navy (--ent) = GuardianGaze Enterprise Fonts: Geist (UI + display) · Geist Mono (data/labels) ============================================================ */ /* ============================================================ GUARDIANGAZE UNIFIED THEME v1 One design system, two products: · violet (--wp) = GuardianGaze · navy (--ent) = GuardianGaze Enterprise Fonts: Geist (all UI and display) · Geist Mono reserved for code/data only ============================================================ */ :root{ /* ---- brand ---- */ --wp: #6d4af0; --wp-deep: #4a28c0; --wp-dark: #2e1370; --wp-tint: #f3eeff; --wp-soft: #e7defd; --ent: #0B0B77; --ent-deep: #09095e; --ent-dark:#070748; --ent-tint: #f0f0fa; --ent-soft: #d0d0ec; /* ---- neutrals ---- */ --ink: #14142b; --ink-2: #4b4b66; --ink-3: #7a7a93; --paper: #fdfdff; --line: #e6e4f2; --ok: #0e8a5f; --warn:#b45309; /* ---- type ---- */ --display:'Geist',system-ui,-apple-system,sans-serif; --sans:'Geist',system-ui,-apple-system,sans-serif; --mono:'Geist Mono',ui-monospace,monospace; /* ---- shape ---- */ --radius:14px; --radius-sm:9px; --shadow:0 1px 2px rgba(11,11,119,.05),0 12px 32px -12px rgba(11,11,119,.14); --wrap:1120px; } /* ============ base ============ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} :focus-visible{outline:3px solid var(--wp);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} h1{font-family:var(--display);font-weight:650;font-size:clamp(38px,5.4vw,62px);line-height:1.07;letter-spacing:-.033em;color:var(--ent-dark)} h2{font-family:var(--display);font-weight:650;font-size:clamp(30px,3.8vw,44px);line-height:1.08;letter-spacing:-.025em;color:var(--ent-dark)} h3{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.15;color:var(--ent-dark)} h4{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ent-dark)} h1 em,h2 em{font-style:normal;color:var(--wp)} /* ============ stamp labels (family signature) ============ */ .stamp{display:inline-flex;align-items:center;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;padding:5px 12px;border:0;border-radius:999px} .stamp--wp{color:var(--wp-deep);background:var(--wp-tint)} .stamp--ent{color:var(--ent);background:var(--ent-tint)} .stamp--neutral{color:var(--ink-2);background:#fff;border:1px solid var(--line)} /* ============ header ============ */ .site-header{position:sticky;top:0;z-index:50;background:rgba(253,253,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px} .logo{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ent);text-decoration:none;display:flex;align-items:center;gap:10px} .logo svg{flex:none} .nav-links{display:flex;gap:28px;align-items:center;list-style:none} .nav-links a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-2)} .nav-links a:hover,.nav-links a[aria-current]{color:var(--ent)} @media(max-width:860px){.nav-links{display:none}} /* ============ buttons ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:15px;padding:12px 22px;border-radius:var(--radius-sm);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s} .btn:hover{transform:translateY(-1px)} .btn-wp{background:var(--wp);color:#fff;box-shadow:0 8px 20px -8px rgba(109,74,240,.55)} .btn-wp:hover{background:var(--wp-deep)} .btn-ent{background:var(--ent);color:#fff;box-shadow:0 8px 20px -8px rgba(11,11,119,.5)} .btn-ent:hover{background:var(--ent-deep)} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--ent-soft);background:var(--ent-tint)} .btn-lg{padding:15px 28px;font-size:16px} /* ============ hero ============ */ .hero{padding:88px 0 72px;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(640px 340px at 85% -10%,rgba(109,74,240,.10),transparent 65%), radial-gradient(560px 320px at 8% 110%,rgba(11,11,119,.07),transparent 60%)} .hero .wrap{position:relative} .hero-eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:26px;flex-wrap:wrap} .hero-sub{margin-top:22px;font-size:19px;color:var(--ink-2);max-width:640px} .hero-ctas{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap} .hero-note{margin-top:14px;font-size:13.5px;color:var(--ink-3)} .hero--wp::before{background:radial-gradient(700px 380px at 80% -10%,rgba(109,74,240,.16),transparent 65%)} .hero--ent::before{background:radial-gradient(700px 380px at 80% -10%,rgba(11,11,119,.12),transparent 65%)} /* trust strip */ .trust{margin-top:52px;padding-top:28px;border-top:1px solid var(--line);display:flex;gap:14px 40px;flex-wrap:wrap;align-items:center} .trust span{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink-3);display:flex;align-items:center;gap:8px} .trust svg{color:var(--ok)} /* ============ sections ============ */ .section{padding:96px 0} .section--tint-wp{background:linear-gradient(180deg,var(--wp-tint),var(--paper))} .section--tint-ent{background:linear-gradient(180deg,var(--ent-tint),var(--paper))} .section-head{max-width:680px;margin-bottom:56px} .section-head .stamp{display:inline-flex;align-items:center;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;padding:5px 12px;border:0;border-radius:999px} .section-head p{margin-top:16px;font-size:17.5px;color:var(--ink-2)} /* ============ stat band ============ */ .stats{background:var(--ent-dark);color:#fff;padding:44px 0} .stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .stat b{font-family:var(--display);font-size:40px;font-weight:700;display:block;line-height:1.1} .stat span{font-size:14.5px;color:#b9b9e4} @media(max-width:720px){.stats .wrap{grid-template-columns:1fr;gap:22px}} /* ============ product fork ============ */ .fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;position:relative} .fork-grid::before{display:none} @media(max-width:880px){.fork-grid{grid-template-columns:1fr}.fork-grid::before{display:none}} .mandate{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:38px 34px;display:flex;flex-direction:column} .mandate--wp{border-top:4px solid var(--wp)} .mandate--ent{border-top:4px solid var(--ent)} .mandate .stamp{display:inline-flex;align-items:center;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;padding:5px 12px;border:0;border-radius:999px} .mandate .prod{margin-top:6px;font-family:var(--sans);font-size:13.5px;color:var(--ink-3);letter-spacing:0} .mandate p.lead{margin-top:16px;color:var(--ink-2)} .mandate ul{list-style:none;margin:24px 0 30px;display:grid;gap:13px} .mandate li{display:flex;gap:11px;font-size:15px} .mandate li svg{flex:none;margin-top:3px} .mandate--wp li svg{color:var(--wp)} .mandate--ent li svg{color:var(--ent)} .mandate .btn{align-self:flex-start;margin-top:auto} .mandate .micro{margin-top:11px;font-size:13px;color:var(--ink-3)} /* ============ feature grid ============ */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:880px){.grid-3,.grid-2{grid-template-columns:1fr}} .card{border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;background:#fff} .card h3, .card h4{display:flex;align-items:center;gap:10px} .card p{margin-top:10px;font-size:14.5px;color:var(--ink-2)} .card--wp h3, .card--wp h4 svg{color:var(--wp)} .card--ent h3, .card--ent h4 svg{color:var(--ent)} .card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:10px} /* ============ flow ============ */ .flow{display:grid;grid-template-columns:var(--flow-cols,1fr auto 1fr auto 1fr);align-items:stretch;margin-top:8px} .flow-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)} .flow-step .num{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:0;display:block;margin-bottom:10px} .flow-step p{margin-top:8px;font-size:14.5px;color:var(--ink-2)} .flow-arrow{display:flex;align-items:center;padding:0 14px;color:var(--ent-soft)} @media(max-width:880px){.flow{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);justify-content:center;padding:8px 0}} /* ============ pricing ============ */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} @media(max-width:880px){.pricing-grid{grid-template-columns:1fr}} .price-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:32px 28px;display:flex;flex-direction:column} .price-card.featured{border:2px solid var(--wp);box-shadow:var(--shadow);position:relative} .price-card.featured::before{content:"MOST POPULAR";position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;background:var(--wp);color:#fff;padding:4px 12px;border-radius:999px} .price-card .plan{font-family:var(--display);font-weight:600;font-size:20px} .price-card .amount{margin:14px 0 4px;font-family:var(--display);font-weight:700;font-size:42px;color:var(--ent-dark)} .price-card .amount small{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-3)} .price-card .for{font-size:14px;color:var(--ink-2);margin-bottom:20px} .price-card ul{list-style:none;display:grid;gap:11px;margin-bottom:26px} .price-card li{display:flex;gap:10px;font-size:14.5px} .price-card li svg{flex:none;margin-top:3px;color:var(--wp)} .price-card .btn{margin-top:auto} /* ============ quote ============ */ .quote{padding:80px 0;background:var(--wp-tint)} .quote--ent{background:var(--ent-tint)} .quote blockquote{font-family:var(--display);font-size:clamp(22px,3vw,30px);font-weight:500;line-height:1.35;color:var(--wp-dark);max-width:820px} .quote--ent blockquote{color:var(--ent-dark)} .quote figcaption{margin-top:22px;font-size:15px;color:var(--ink-2)} .quote figcaption b{color:var(--ink);font-weight:600} /* ============ FAQ ============ */ .faq-list{max-width:760px;display:grid;gap:12px;margin-top:8px} details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:0 22px} summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 0;font-weight:600;font-size:16px;color:var(--ent-dark)} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--wp);transition:transform .2s} details[open] summary::after{transform:rotate(45deg)} details p{padding:0 0 20px;color:var(--ink-2);font-size:15px} /* ============ final CTA ============ */ .final{padding:100px 0;background:var(--ent-dark);color:#fff;text-align:center} .final h2{color:#fff} .final p{margin:18px auto 36px;max-width:560px;color:#c6c6ee;font-size:17.5px} .final .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)} .final .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff} .final .micro{margin-top:18px;font-size:13px;color:#8f8fd0} .final .micro a{color:#fff} /* ============ footer ============ */ .site-footer{padding:44px 0;border-top:1px solid var(--line)} .site-footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3)} .site-footer a{color:var(--ink-2);text-decoration:none} .site-footer a:hover{color:var(--ent)} /* ============ reveal ============ */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease} .reveal.in{opacity:1;transform:none} /* ============ page-level components ============ */ .logo img{height:30px;width:auto;display:block} .burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer} .burger svg{display:block} .logo-strip{padding:36px 0;border-bottom:1px solid var(--line)} .logo-strip .label{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink-3);text-align:center;margin-bottom:22px;font-weight:500} .logo-strip .row{display:flex;gap:48px;justify-content:center;align-items:center;flex-wrap:wrap} .logo-strip img{height:34px;width:auto;filter:grayscale(1) opacity(.55);transition:filter .2s} .logo-strip img:hover{filter:none} .shot{border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(11,11,119,.25);overflow:hidden;background:#fff} .shot img{width:100%;display:block} .shot-wrap{position:relative} .shot-wrap .caption{margin-top:14px;font-family:var(--sans);font-size:13.5px;letter-spacing:0;color:var(--ink-3);text-align:center} .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .footer-v2{background:var(--ent-dark);color:#c6c6ee;padding:64px 0 32px;font-size:14px} .footer-v2 .cols{display:grid;grid-template-columns:2fr repeat(var(--footer-cols,3),1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)} /* The enterprise footer now carries five link columns (Platform, Use cases, Resources, Company, WordPress) plus the brand column. Six tracks at 1120px gives ~150px each, which wraps the longer labels badly. Collapse the grid progressively rather than letting it squash. */ @media(max-width:1000px){.footer-v2 .cols{grid-template-columns:repeat(3,1fr);gap:32px}.footer-v2 .cols>*:first-child{grid-column:1/-1}} @media(max-width:720px){.footer-v2 .cols{grid-template-columns:repeat(2,1fr);gap:28px}} @media(max-width:460px){.footer-v2 .cols{grid-template-columns:1fr}} .footer-v2 h2, .footer-v2 h3, .footer-v2 h5{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:#8f8fd0;margin-bottom:16px;font-weight:600} .footer-v2 ul{list-style:none;display:grid;gap:10px} .footer-v2 a{color:#c6c6ee;text-decoration:none} .footer-v2 a:hover{color:#fff} .footer-v2 .brand img{height:28px;filter:brightness(0) invert(1);margin-bottom:14px} .footer-v2 .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:#8f8fd0} .footer-v2 .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .footer-v2 .badges span{font-family:var(--sans);font-size:12px;letter-spacing:0;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:5px 10px;color:#c6c6ee} .crumbs{position:relative;z-index:1;border-bottom:1px solid var(--line);background:var(--paper)} .crumbs .wrap{display:flex;gap:8px;align-items:center;padding-top:12px;padding-bottom:12px;font-size:13.5px;color:var(--ink-3);flex-wrap:wrap} .crumbs a{color:var(--ink-2);text-decoration:none} .crumbs a:hover{color:var(--ent)} .crumbs .sep{color:var(--ent-soft)} ::selection{background:var(--wp-soft);color:var(--wp-dark)} .card,.mandate,.price-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .card:hover,.mandate:hover,.price-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(11,11,119,.05),0 20px 44px -16px rgba(11,11,119,.16);border-color:var(--ent-soft)} .mandate--wp:hover{border-color:var(--wp-soft)} .shot{position:relative;padding-top:38px;background:#fff} .shot::before{content:"";position:absolute;top:0;left:0;right:0;height:38px;background:linear-gradient(180deg,#fafaff,#f2f1fb);border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0} .shot::after{content:"";position:absolute;top:15px;left:18px;width:8px;height:8px;border-radius:50%;background:var(--ent-soft);box-shadow:14px 0 0 var(--ent-soft),28px 0 0 var(--ent-soft)} .btn-lg::after{content:"\2192";font-size:17px;transition:transform .18s ease} .btn-lg:hover::after{transform:translateX(3px)} main p a{text-decoration:underline;text-decoration-color:var(--ent-soft);text-underline-offset:3px;transition:text-decoration-color .15s} main p a:hover{text-decoration-color:var(--ent)} .section-head h2{max-width:640px} .subnav{position:sticky;top:68px;z-index:40;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)} .subnav--wp{background:rgba(243,238,255,.85)} .subnav--ent{background:rgba(240,240,250,.88)} .subnav .wrap{display:flex;align-items:center;gap:26px;height:50px;font-size:14px} .subnav .which{display:flex;align-items:center;gap:8px;font-weight:650;white-space:nowrap} .subnav--wp .which{color:var(--wp-dark)} .subnav--ent .which{color:var(--ent-dark)} .subnav .which i{width:8px;height:8px;border-radius:2.5px;display:inline-block} .subnav--wp .which i{background:var(--wp)} .subnav--ent .which i{background:var(--ent)} .subnav a{text-decoration:none;color:var(--ink-2);font-weight:500;white-space:nowrap} .subnav a:hover{color:var(--ink)} .subnav .cta{margin-left:auto;font-weight:600} .subnav--wp .cta{color:var(--wp-deep)} .subnav--ent .cta{color:var(--ent)} .router{padding:0 0 8px} .router .wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:-26px;position:relative;z-index:2} @media(max-width:820px){.router .wrap{grid-template-columns:1fr;margin-top:0}} .route{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;text-decoration:none;box-shadow:0 1px 2px rgba(11,11,119,.05),0 14px 34px -14px rgba(11,11,119,.14);transition:transform .18s,box-shadow .18s,border-color .18s} .route:hover{transform:translateY(-3px)} .route--wp{border-top:3px solid var(--wp)} .route--wp:hover{border-color:var(--wp-soft);border-top-color:var(--wp)} .route--ent{border-top:3px solid var(--ent)} .route--ent:hover{border-color:var(--ent-soft);border-top-color:var(--ent)} .route .txt b{display:block;font-size:16.5px;color:var(--ink);font-weight:650} .route .txt span{font-size:14px;color:var(--ink-3)} .route .go{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px} .route--wp .go{background:var(--wp-tint);color:var(--wp-deep)} .route--ent .go{background:var(--ent-tint);color:var(--ent)} .mandate .mini-shot{height:190px;overflow:hidden;border-bottom:1px solid var(--line);background:#f7f6fd} .mandate .mini-shot img{width:100%;height:100%;object-fit:cover;object-position:top left} .mandate .body{padding:30px 32px 32px;display:flex;flex-direction:column;flex:1} .mandate .card-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .mandate .card-foot .micro{margin:0} .mandate .card-foot .alt{font-size:14px;font-weight:600;text-decoration:none} .mandate--wp .card-foot .alt{color:var(--wp-deep)} .mandate--ent .card-foot .alt{color:var(--ent)} .skip{position:absolute;left:-9999px;top:0;background:var(--ent-dark);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;z-index:100} .skip:focus{left:0} .grades{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .grade{font-family:var(--display);font-weight:700;font-size:26px;width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative} .grade small{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-family:var(--sans);font-size:10.5px;letter-spacing:0;color:var(--ink-3);font-weight:500} .gA{background:#0e8a5f} .gB{background:#4d9e3a} .gC{background:#c9a227} .gD{background:#d97706} .gF{background:#c2372f} .vs-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;font-size:15px} .vs-table th{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:600;padding:16px 20px;text-align:left;background:var(--ent-tint);color:var(--ent-dark);border-bottom:1px solid var(--line)} .vs-table td{padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)} .vs-table tr:last-child td{border-bottom:none} .vs-table td:first-child{font-weight:600;color:var(--ink);width:26%} .vs-table .win{color:var(--ent-dark);background:linear-gradient(180deg,rgba(11,11,119,.035),transparent)} .vs-table .win::before{content:"✓ ";color:var(--ok);font-weight:700} .timeline{display:grid;gap:0;margin-top:8px;position:relative} .timeline::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:var(--ent-soft)} .t-item{display:flex;gap:22px;padding:18px 0;position:relative} .t-item .dot{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--ent);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ent);z-index:1} .t-item h4{margin-bottom:4px} .t-item p{font-size:14.5px;color:var(--ink-2);max-width:560px} .crumbs{border-bottom:1px solid var(--line);background:var(--paper)} .anchor-bar{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--wp-tint);border:1px solid var(--wp-soft);border-radius:var(--radius-sm);padding:14px 20px;margin-bottom:34px;font-size:15px;color:var(--wp-dark);text-align:center;flex-wrap:wrap} .anchor-bar b{font-weight:650} .price-card .permo{font-size:14px;color:var(--ink-3);margin-top:2px} .price-card .social{font-size:13px;color:var(--wp-deep);font-weight:600;margin-top:10px} .price-card .was{color:var(--ink-3);font-weight:500;font-size:14px;text-decoration:line-through;margin-right:8px} .derisk{display:flex;gap:14px 36px;justify-content:center;flex-wrap:wrap;margin-top:30px;font-size:14px;color:var(--ink-2)} .derisk span{display:flex;align-items:center;gap:8px} .derisk svg{color:var(--ok);flex:none} .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .post{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s} .post:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(11,11,119,.05),0 20px 44px -16px rgba(11,11,119,.16)} .post .cover{height:120px;display:flex;align-items:flex-end;padding:16px} .post .cover.c-wp{background:linear-gradient(135deg,var(--wp-tint),var(--wp-soft))} .post .cover.c-ent{background:linear-gradient(135deg,var(--ent-tint),var(--ent-soft))} .post .cover span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:#fff} .post .cover.c-wp span{color:var(--wp-deep)} .post .cover.c-ent span{color:var(--ent)} .post .pbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .post h3{font-size:18.5px;line-height:1.3;color:var(--ink)} .post p{margin-top:8px;font-size:14px;color:var(--ink-2);flex:1} .post .meta{margin-top:14px;font-size:12.5px;color:var(--ink-3)} .featured{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;margin-bottom:44px;text-decoration:none;box-shadow:var(--shadow)} .featured .fcover{background:linear-gradient(135deg,var(--ent-dark),#1a1f4e);padding:40px;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px} .featured .fcover span{color:#b9b9e4;font-size:13px;font-weight:600} .featured .fcover h2{color:#fff;font-size:clamp(22px,2.6vw,30px);margin-top:10px} .featured .fbody{padding:36px} .featured .fbody p{color:var(--ink-2)} .featured .fbody .meta{margin-top:18px;font-size:13px;color:var(--ink-3)} .article{max-width:720px;margin:0 auto} .article p{margin:0 0 20px;font-size:17px;line-height:1.75;color:var(--ink)} .article h2{font-size:26px;margin:38px 0 14px} .article .lede{font-size:19px;color:var(--ink-2)} .article .byline{display:flex;gap:10px;align-items:center;margin:22px 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-3)} @media(max-width:820px){.nav-links{display:none}} .together{padding:88px 0;background:linear-gradient(180deg,var(--navy-tint),var(--paper))} .flow-step h4{font-family:var(--display);font-size:19px;font-weight:600;color:var(--navy-dark)} .procure{padding:96px 0} .procure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pcard{border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;background:#fff} .pcard h4{font-family:var(--display);font-size:18px;font-weight:600;color:var(--navy-dark);display:flex;align-items:center;gap:10px} .pcard h4 svg{color:var(--primary)} .pcard p{margin-top:10px;font-size:14.5px;color:var(--ink-2)} .faq{padding:96px 0} /* ============ React additions (not in the static export) ============ */ /* mobile nav: React toggles .open instead of the inline onclick script */ @media(max-width:860px){ .burger{display:block} .nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column; background:var(--paper);border-bottom:1px solid var(--line);padding:14px 24px;gap:0; box-shadow:0 18px 40px -20px rgba(11,11,119,.25); max-height:calc(100vh - 68px);overflow-y:auto;-webkit-overflow-scrolling:touch} .nav-links.open li{padding:12px 0;border-bottom:1px solid var(--line);width:100%} .nav-links.open li:last-child{border-bottom:0} } .site-header{position:sticky} .site-header .wrap.nav{position:relative} /* form controls used by auth + contact templates */ .gg-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .gg-field label{font-size:13.5px;font-weight:600;color:var(--ink)} .gg-input,.mandate input,.mandate textarea,.mandate select{ padding:13px 16px;border:1px solid var(--line);border-radius:9px; font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;width:100%} .gg-input:focus,.mandate input:focus,.mandate textarea:focus{ outline:none;border-color:var(--wp);box-shadow:0 0 0 3px var(--wp-tint)} .gg-error{color:#b91c1c;font-size:13.5px;margin-top:-6px;margin-bottom:12px} .gg-ok{color:var(--ok);font-size:13.5px;margin-top:-6px;margin-bottom:12px} .btn:disabled{opacity:.6;cursor:not-allowed;transform:none} /* the article/legal body needs readable rhythm when fed real copy */ .legal-body h2{font-size:24px;margin:34px 0 12px} .legal-body h3{font-size:19px;margin:26px 0 10px} .legal-body p{margin-bottom:14px;color:var(--ink-2);font-size:15.5px} .legal-body ul,.legal-body ol{margin:0 0 16px;padding-left:20px;color:var(--ink-2);font-size:15.5px} .legal-body li{margin-bottom:8px} /* skip link */ .skip{position:absolute;left:-9999px;top:0} .skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:8px;border:1px solid var(--line)} /* ============================================================ AUTH PAGES (auth.html) Login / SignUp / ForgotPassword / ResetPassword keep all their existing JSX and logic; these rules re-skin them to the theme's auth card so nothing in the auth flow had to be touched. ============================================================ */ .lp-page,.sp-page,.fp-page{ background:var(--paper); background-image:radial-gradient(700px 380px at 80% -10%,rgba(109,74,240,.16),transparent 65%); font-family:var(--sans);color:var(--ink);min-height:100vh} .lp-wrap,.sp-wrap,.fp-page > div{padding:64px 24px} .lp-container,.sp-container{max-width:460px;margin:0 auto} .lp-brand,.sp-brand,.fp-brand{text-align:left;margin-bottom:22px} .lp-brand h1,.sp-card-title,.fp-title{ font-family:var(--display);font-weight:650;font-size:34px;line-height:1.1; letter-spacing:-.025em;color:var(--ent-dark)} .lp-brand h1 em,.sp-card-title em{font-style:normal;color:var(--wp)} .lp-brand p,.sp-card-sub,.fp-para{margin-top:10px;font-size:13.5px;color:var(--ink-3)} .lp-brand-icon,.sp-brand-icon,.fp-brand-icon{ display:inline-flex;align-items:center;justify-content:center; width:auto;height:auto;padding:5px 12px;border-radius:999px; background:var(--wp-tint);color:var(--wp-deep);margin-bottom:14px} .lp-brand-icon svg,.sp-brand-icon svg,.fp-brand-icon svg{width:16px;height:16px} .lp-card,.sp-card,.fp-card{ border:1px solid var(--line);border-top:4px solid var(--wp); border-radius:var(--radius);background:#fff;box-shadow:var(--shadow); padding:32px 30px;display:flex;flex-direction:column} .lp-field,.sp-field,.fp-field{margin-bottom:16px} .lp-field label,.sp-field label,.fp-label{ font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink); display:block;margin-bottom:8px;text-transform:none;letter-spacing:0} .lp-input,.sp-input,.fp-input,.sp-otp-input{ width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:9px; font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff} .lp-input:focus,.sp-input:focus,.fp-input:focus,.sp-otp-input:focus{ outline:none;border-color:var(--wp);box-shadow:0 0 0 3px var(--wp-tint)} .lp-input-error,.lp-field-err,.sp-field-err{border-color:#dc2626} .lp-field-err,.sp-field-err{border:0;color:#b91c1c;font-size:13px;margin-top:6px} .lp-input-wrap,.sp-input-wrap,.fp-input-wrap{position:relative} .lp-input-ico,.fp-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3)} .lp-input-wrap .lp-input{padding-left:42px} .lp-submit,.sp-submit,.fp-btn-primary{ display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%; font-family:var(--sans);font-weight:600;font-size:16px;padding:15px 28px; border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer; background:var(--wp);color:#fff;box-shadow:0 8px 20px -8px rgba(109,74,240,.55); transition:transform .15s,background .15s} .lp-submit:hover,.sp-submit:hover,.fp-btn-primary:hover{background:var(--wp-deep);transform:translateY(-1px)} .lp-submit:disabled,.sp-submit:disabled,.fp-btn-primary:disabled{opacity:.6;transform:none;cursor:not-allowed} .lp-error,.sp-error,.fp-error{ background:#fef2f2;border:1px solid #fecaca;color:#b91c1c; border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;margin-bottom:16px} .sp-success,.fp-notice,.sp-notice{ background:var(--wp-tint);border:1px solid var(--wp-soft);color:var(--wp-dark); border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;margin-bottom:16px} .lp-signup-row,.sp-signin-row,.fp-back-link,.lp-remember{ font-size:13px;color:var(--ink-3);margin-top:14px;text-align:center} .lp-signup-row a,.sp-signin-row a,.fp-back-link a,.lp-remember a{color:var(--wp-deep);font-weight:600} .lp-plugin-banner,.lp-plugin-hint{ background:var(--wp-tint);border:1px solid var(--wp-soft);border-radius:var(--radius-sm); padding:12px 14px;font-size:14px;color:var(--wp-dark);margin-bottom:18px; display:flex;gap:10px;align-items:center} .sp-trust,.lp-recaptcha,.sp-recaptcha{margin-top:16px} .sp-trust-item{font-size:13.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center} .sp-trust-check{color:var(--ok)} .sp-pw-rules{font-size:13px;color:var(--ink-3);margin-top:10px} .sp-pw-rules-title{font-weight:600;color:var(--ink-2)} .sp-strength-badge{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase} .lp-pw-toggle,.sp-pw-toggle,.fp-pw-toggle{ position:absolute;right:12px;top:50%;transform:translateY(-50%); background:none;border:0;cursor:pointer;color:var(--ink-3)} /* ============================================================ LEGACY TOKEN COMPATIBILITY LAYER The pre-retheme stylesheets (index.css, newer-theme.css, tokens.css, style.css) define 251 custom properties, 216 of which theme.css does not otherwise override. Any legacy rule that still paints on a rethemed page would therefore use an off-palette colour. Below, every brand / neutral / surface token is re-pointed at a theme token. Functional status colours (red / green / amber scales used by the dashboard and admin) are deliberately left alone - they carry meaning, not brand. This block must stay LAST in the file. ============================================================ */ :root{ /* --- violet family -> GuardianGaze (--wp) --- */ --primary: var(--wp); --primary-deep: var(--wp-deep); --primary-dark: var(--wp-dark); --primary-tint: var(--wp-tint); --primary-tint-2: var(--wp-soft); --primary-soft: var(--wp-soft); --brand-primary: var(--wp); --brand-primary-deep: var(--wp-deep); --brand-primary-dark: var(--wp-dark); --brand-primary-tint: var(--wp-tint); --brand-primary-tint-2: var(--wp-soft); --brand-primary-soft: var(--wp-soft); --accent-violet: var(--wp); --accent-violet-dark: var(--wp-deep); /* --- navy family -> GuardianGaze Enterprise (--ent) --- */ --purple: var(--ent); --purple-dark: var(--ent-deep); --purple-light: var(--ent-tint); --purple-glow: rgba(11,11,119,.12); --brand-logo: var(--ent); --brand-logo-deep: var(--ent-deep); --brand-logo-dark: var(--ent-dark); --brand-logo-tint: var(--ent-tint); --brand-logo-tint-2: var(--ent-soft); --brand-logo-soft: var(--ent-soft); --brand-logo-glow: rgba(11,11,119,.12); /* --- neutrals / text --- */ --text: var(--ink-2); --text-2: var(--ink-3); --text-3: var(--ink-3); --ink-4: var(--ink-3); --muted: var(--ink-3); /* --- surfaces + borders --- */ --bg: var(--paper); --off-white: var(--paper); --surface: #fff; --surface-2: var(--wp-tint); --white: #fff; --border: var(--line); --border-dark: var(--line); --border-strong: var(--line); --compare-border: var(--line); /* --- semantic --- */ --safe: var(--ok); --safe-tint: #e6f5ed; --amber: var(--warn); /* --- shadows --- */ --shadow-sm: 0 1px 2px rgba(11,11,119,.05); --shadow-md: 0 4px 16px rgba(11,11,119,.06),0 0 0 1px rgba(11,11,119,.04); --shadow-lg: var(--shadow); --shadow-purple: 0 8px 30px -10px rgba(109,74,240,.35); /* --- typography: no Poppins anywhere in the system --- */ --display: 'Geist',system-ui,-apple-system,sans-serif; --sans: 'Geist',system-ui,-apple-system,sans-serif; --mono: 'Geist Mono',ui-monospace,monospace; } /* ============================================================ LEGACY PAGE-SHELL MAPPING Login / SignUp / ForgotPassword / ResetPassword carry Turnstile CAPTCHA, plugin-activation and validation logic, and the legal pages carry real policy copy. Rather than rewrite that markup (and risk the auth flow), the existing shells are restyled to the theme here. Visual result matches auth.html / legal.html. ============================================================ */ /* ---- auth pages (.lp-*) -> auth.html ---- */ .lp-page{background:var(--paper)} .lp-wrap{padding:72px 0} .lp-container{max-width:460px;margin:0 auto;padding:0 24px} .lp-brand{text-align:left;margin-bottom:22px} .lp-brand-icon{display:none} .lp-brand h1{font-family:var(--display);font-size:34px;font-weight:650;letter-spacing:-.02em; color:var(--ent-dark);line-height:1.1} .lp-brand h1 em{font-style:normal;color:var(--wp)} .lp-brand p{margin-top:14px;font-size:13.5px;color:var(--ink-3)} .lp-card{border:1px solid var(--line);border-top:4px solid var(--wp);border-radius:var(--radius); background:#fff;box-shadow:var(--shadow);padding:30px 32px;margin-top:22px} .lp-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .lp-field-label-row{display:flex;justify-content:space-between;align-items:center;gap:12px} .lp-field-label-row label,.lp-field label{font-size:13.5px;font-weight:600;color:var(--ink)} .lp-field-label-row a{font-size:13px;color:var(--wp-deep);text-decoration:none} .lp-input-wrap{position:relative;display:flex;align-items:center} .lp-input-ico{position:absolute;left:14px;display:flex;color:var(--ink-3)} .lp-input{width:100%;padding:13px 16px 13px 42px;border:1px solid var(--line); border-radius:var(--radius-sm);font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff} .lp-input:focus{outline:none;border-color:var(--wp);box-shadow:0 0 0 3px var(--wp-tint)} .lp-input-error{border-color:#dc2626} .lp-field-err{color:#b91c1c;font-size:13px} .lp-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b; padding:12px 14px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:18px} .lp-remember{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);margin-bottom:18px} .lp-recaptcha{margin-bottom:18px} .lp-plugin-banner{display:flex;align-items:center;gap:10px;background:var(--wp-tint); color:var(--wp-dark);border-radius:var(--radius-sm);padding:12px 16px;font-size:14px;margin-bottom:18px} .lp-card button[type=submit],.lp-submit{display:inline-flex;align-items:center;justify-content:center; gap:8px;width:100%;font-family:var(--sans);font-weight:600;font-size:16px;padding:15px 28px; border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer; background:var(--wp);color:#fff;box-shadow:0 8px 20px -8px rgba(109,74,240,.55)} .lp-card button[type=submit]:hover,.lp-submit:hover{background:var(--wp-deep)} .lp-card button[type=submit]:disabled{opacity:.6;cursor:not-allowed} .lp-foot,.lp-alt{text-align:center;margin-top:14px;font-size:13px;color:var(--ink-3)} .lp-foot a,.lp-alt a{color:var(--wp-deep);text-decoration:none} /* ---- legal / policy pages -> legal.html ---- */ .page-hero{padding:88px 0 24px;background:var(--paper);position:relative} .page-hero .container{max-width:var(--wrap);margin:0 auto;padding:0 24px} .page-hero-eyebrow{display:inline-flex;align-items:center;font-size:13px;font-weight:600; padding:5px 12px;border-radius:999px;color:var(--ink-2);background:#fff;border:1px solid var(--line)} .page-hero h1{margin-top:26px;font-family:var(--display);font-weight:650; font-size:clamp(32px,4vw,48px);line-height:1.07;letter-spacing:-.03em;color:var(--ent-dark)} .page-hero p,.page-hero-sub{margin-top:14px;font-size:13.5px;color:var(--ink-3)} /* ---- pricing page shell (.pricing-*) -> pricing.html ---- Subscription.jsx drives Stripe checkout (plan select -> site selection modal -> payment). Its markup is left intact and restyled here. */ .top-page-hero{padding:88px 0 40px;background:var(--paper);position:relative;overflow:hidden} .top-page-hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(700px 380px at 80% -10%,rgba(109,74,240,.16),transparent 65%)} .top-page-hero .container,.top-page-hero>div{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 24px} .top-page-hero h1{font-family:var(--display);font-weight:650;font-size:clamp(38px,5.4vw,62px); line-height:1.07;letter-spacing:-.033em;color:var(--ent-dark)} .top-page-hero h1 em{font-style:normal;color:var(--wp)} .top-page-hero p{margin-top:22px;font-size:19px;color:var(--ink-2);max-width:640px} .pricing-plans-sec,.pricing-compare-sec,.pricing-context-sec,.pricing-value-sec{padding:96px 0} .pricing-plans-sec{padding-top:0} .pricing-compare-sec{background:linear-gradient(180deg,var(--wp-tint),var(--paper))} .pricing-plans-sec .container,.pricing-compare-sec .container, .pricing-context-sec .container,.pricing-value-sec .container{max-width:var(--wrap);margin:0 auto;padding:0 24px} .pricing-plans-sec h2,.pricing-compare-sec h2,.pricing-context-sec h2,.pricing-value-sec h2{ font-family:var(--display);font-weight:650;font-size:clamp(30px,3.8vw,44px); line-height:1.08;letter-spacing:-.025em;color:var(--ent-dark)} /* ============================================================ LEGACY LAYOUT OVERRIDES App.css / newer-theme.css were written for the previous fixed-header layout. These rules neutralise the leftovers that were visibly breaking themed pages. ============================================================ */ /* 1. Old fixed header reserved 88px at the top of . The theme header is sticky and sits in normal flow, so that reservation became a blank band above every page. */ body{padding-top:0} @media(max-width:1024px){body{padding-top:0}} @media(max-width:860px){body{padding-top:0}} @media(max-width:640px){body{padding-top:0}} /* 2. newer-theme.css put an 800x800 radial blob on .hero::before and a 900x600 one on .final::before. The theme's own hero glow only set `inset` and `background`, so the legacy width/height leaked through and rendered as a hard-edged box / centre blob. Fully redefine. */ .hero::before{ content:"";position:absolute;inset:0;top:0;right:0;bottom:0;left:0; width:auto;height:auto;border-radius:0;filter:none;opacity:1;transform:none; pointer-events:none; background: radial-gradient(640px 340px at 85% -10%,rgba(109,74,240,.10),transparent 65%), radial-gradient(560px 320px at 8% 110%,rgba(11,11,119,.07),transparent 60%); } .hero--wp::before{background:radial-gradient(700px 380px at 80% -10%,rgba(109,74,240,.16),transparent 65%)} .hero--ent::before{background:radial-gradient(700px 380px at 80% -10%,rgba(11,11,119,.12),transparent 65%)} .hero::after{content:none;display:none} .final::before,.final::after{content:none;display:none} .final{background:var(--ent-dark);position:relative;overflow:visible;padding:100px 0} /* 3. Screenshots carry width/height attributes (e.g. 1882x911). CSS set width:100% but never height, so the HTML height attribute won and squashed every image. */ img{height:auto} .shot img,.shot-wrap img,.logo-strip img{height:auto} .logo-strip img{height:34px} .mandate .mini-shot img{height:100%} /* keeps its object-fit crop */ /* 4. App.css pinned .logo to a 40px box and capped the mark with max-height:100%, squashing the wordmark. */ .logo{height:auto;z-index:auto} .logo img{height:30px;width:auto;max-height:none} /* 5. Inline feature lists render an tick followed by text. Without flex the tick collided with the first word. */ main ul li > svg:first-child{flex:none;margin-top:4px} main ul li:has(> svg:first-child){display:flex;gap:11px;align-items:flex-start} .check-list{list-style:none;display:grid;gap:12px} .check-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px} .check-list li svg{flex:none;margin-top:4px;color:var(--wp)} .mandate--ent .check-list li svg,.check-list--ent li svg{color:var(--ent)} /* ============================================================ Appended during consolidation — rules that existed only in the static pages' inline

/

into columns therefore rendered with no space between a paragraph and the heading after it, and with any trailing .btn welded to the last line of copy. Two containers do this on the landing page — .grid-2 and .split — so the selectors are grouped rather than written for whichever one was reported. Scoped to classless children so it can never reach .card, .price-card or anything else that owns its typography. */ .grid-2 > div:not([class]), .grid-3 > div:not([class]), .split > div:not([class]){min-width:0} .grid-2 > div:not([class]) h3, .grid-3 > div:not([class]) h3, .split > div:not([class]) h3, .section > .wrap > div:not([class]) > h3{ font-size:20px;line-height:1.32;margin:34px 0 10px;letter-spacing:-.011em} .grid-2 > div:not([class]) > h3:first-child, .grid-3 > div:not([class]) > h3:first-child, .split > div:not([class]) > h3:first-child, .section > .wrap > div:not([class]) > h3:first-child{margin-top:0} .grid-2 > div:not([class]) p, .grid-3 > div:not([class]) p, .split > div:not([class]) p, .section > .wrap > div:not([class]) > p{ font-size:16.5px;line-height:1.7;color:var(--ink-2);margin:0 0 15px} .grid-2 > div:not([class]) p:last-child, .grid-3 > div:not([class]) p:last-child, .split > div:not([class]) p:last-child{margin-bottom:0} .grid-2 > div:not([class]) p strong, .grid-3 > div:not([class]) p strong, .split > div:not([class]) p strong{color:var(--ink);font-weight:620} /* A call to action closing a column had no separation from the sentence above it, in prose columns and in .longform alike. */ .grid-2 > div:not([class]) > .btn, .grid-3 > div:not([class]) > .btn, .split > div:not([class]) > .btn, .longform > .btn, .section > .wrap > div:not([class]) > .btn{margin-top:26px} .grid-2 > div:not([class]) p:last-of-type, .grid-3 > div:not([class]) p:last-of-type, .split > div:not([class]) p:last-of-type{margin-bottom:0} /* A prose column needs a reading gutter, not the 22px card gutter. */ .grid-2:has(> div:not([class])), .grid-3:has(> div:not([class])){gap:22px 56px} /* .split centres its columns vertically, which is right for a text-beside- image row and wrong for two text columns — it drops the shorter column's heading below the taller one's, so the two headings no longer line up. */ .split:has(> div:not([class]) > h3){align-items:start} /* Inline code in body copy had no styling of its own, so `eval` and `base64_decode` rendered as unstyled monospace at the wrong size. */ :where(.grid-2,.grid-3,.split,.longform,.section-head) code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;padding:1px 6px;border-radius:5px; background:rgba(109,74,240,.09);color:var(--wp-deep,#4a2fc4); white-space:nowrap} /* ============ modern polish ============ */ /* Anchor targets were landing underneath the sticky bars. The header is 69px and the product strip adds 60px, so every in-page link — including the "Skip to content" target, which is the one that has to work — scrolled its destination 129px out of sight. */ :target,[id]{scroll-margin-top:calc(69px + 24px)} /* Headings wrapped wherever the line happened to break, which is what put "actually does" alone on a second line. Balanced wrapping evens the lines; `pretty` keeps single-word orphans off the end of a paragraph. */ h1,h2,h3,.section-head h2,.hero h1{text-wrap:balance} p,.longform p,li{text-wrap:pretty} /* Buttons had hover but no pressed state, so a tap gave no feedback. */ .btn{transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease,border-color .16s ease} .btn:active{transform:translateY(0) scale(.985)} .btn-wp:active{box-shadow:0 4px 12px -8px rgba(109,74,240,.55)} /* Form controls and checkboxes inherited the browser default blue. */ :root{accent-color:var(--wp)} /* Figures in tables and price cards jittered because the default numerals are proportional. */ .vs-table,.price-card .amount,.grades{font-variant-numeric:tabular-nums} /* Links inside body copy had no distinguishable underline treatment. */ .longform a:not(.btn), .grid-2 > div:not([class]) a:not(.btn), .section-head a:not(.btn){ color:var(--wp-deep,#4a2fc4);text-decoration:underline; text-underline-offset:2px;text-decoration-thickness:1.5px; text-decoration-color:rgba(109,74,240,.35);transition:text-decoration-color .16s ease} .longform a:not(.btn):hover, .grid-2 > div:not([class]) a:not(.btn):hover{text-decoration-color:currentColor} /* Card hover was static; a small lift matches the button language without moving anything on tap-only devices. */ @media(hover:hover){ .card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .card:hover{transform:translateY(-2px);box-shadow:0 12px 28px -18px rgba(20,20,43,.35)} } /* Images should never break their container. */ img{max-width:100%;height:auto} /* ── UI consistency sweep ─────────────────────────────────────── Found by auditing every page at 390/768/1440. */ /* A long unbreakable token — an email address used as a card heading — forced the card 405px wide inside a 390px viewport, which was the only document level horizontal overflow left on the site. */ .card h3, .card h4, .card p, .longform p, .grid-2 > div:not([class]) p{ overflow-wrap:anywhere} /* Breadcrumb links measured 18px tall, below the 24px minimum tap target. Padding grows the hit area without moving the text. */ .crumbs a, .crumbs span{display:inline-block;padding:4px 0;line-height:1.4} /* .btn rendered at 14px, 14.5px and 15px depending on where it appeared. One base size, with .btn-lg as the only deliberate variant. */ .btn{font-size:15px} .btn-lg{font-size:16px} .card .btn, .price-card .btn, .crumbs .btn{font-size:15px} /* Standalone links — a list entry or a lone call to action — were 17-22px tall, under the 24px minimum tap target. Inline links inside a sentence are deliberately left alone: padding them would break the line box, and they are exempt from the guidance precisely because they sit in a block of text. */ a.plan-detail-link, a.sub-link, a.wsc-learn{display:inline-block;padding:4px 0} .sitemap-links li a, .top-page-hero + * li > a:only-child{display:inline-block;padding:3px 0} /* A link that is the entire content of its paragraph is a call to action, not an inline link, so it needs the 24px tap target the inline exemption does not cover. Selecting on :only-child keeps genuine inline links untouched. */ main p > a:only-child{display:inline-block;padding:4px 0} /* ═══════════════ BRAND SYSTEM ═══════════════ One design system, two accents. Everything structural is shared — typography, spacing, components, navigation, the dark CTA band — so the two halves of the site behave and read identically. What differs is the accent, and each product takes it from its own logo: WordPress violet #6d4af0 Enterprise gold #C1900E on navy #0B0B77 Navy stays the structural colour on both: the logo, every h1-h4, the CTA band. The gold replaces the WordPress violet on Enterprise surfaces, which also fixes the original defect — every Enterprise CTA band used the WordPress violet because a navy button on a navy band is invisible. Gold on navy has the contrast the navy never did. NOTE: the gold hex is read from the supplied logo image. It is defined once here as --ent-gold; correcting it is a one-line change in three files. */ :root{ --ent-gold: #C1900E; --ent-gold-deep: #a2780b; --ent-gold-tint: #fdf6e3; --ent-gold-soft: #f2e2b8; } .btn-ent{background:var(--ent-gold);color:#1a1400;box-shadow:0 8px 20px -8px rgba(193,144,14,.5)} .btn-ent:hover{background:var(--ent-gold-deep);color:#1a1400} .stamp--ent{color:var(--ent-gold-deep);background:var(--ent-gold-tint)} .section--tint-ent{background:linear-gradient(180deg,var(--ent-tint),var(--paper))} .card--ent h3,.card--ent h4 svg{color:var(--ent)} .mandate--ent{border-top-color:var(--ent-gold)} .mandate--ent:hover{border-color:var(--ent-gold-soft)} .mandate--ent li svg{color:var(--ent-gold-deep)} .mandate--ent .card-foot .alt{color:var(--ent-gold-deep)} .mandate--ent .check-list li svg,.check-list--ent li svg{color:var(--ent-gold-deep)} .quote--ent{background:var(--ent-gold-tint)} .quote--ent blockquote{color:var(--ent-dark)} .route--ent{border-top-color:var(--ent-gold)} .route--ent:hover{border-color:var(--ent-gold-soft);border-top-color:var(--ent-gold)} .route--ent .go{background:var(--ent-gold-tint);color:var(--ent-gold-deep)} .hero--ent::before{background:radial-gradient(700px 380px at 80% -10%,rgba(193,144,14,.14),transparent 60%)} .subnav--ent{background:rgba(253,246,227,.9)} .subnav--ent .which{color:var(--ent-dark)} .subnav--ent .which i{background:var(--ent-gold)} .subnav--ent .cta{color:var(--ent-gold-deep)} /* ── shared header chrome ─────────────────────────────────────── Both headers now use the same wrapper and classes. These lived in each app's scoped