:root{--a:#03AEBE;--a2:#5fe6f2;--a3:#2563eb;--bg:#08090a;--bg2:#0d0f11;--pan:#121517; --pan2:#171b1e;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.06); --ink:#fff;--ink2:#c4cbd1;--ink3:#8a929a;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;} .hv3-body{margin:0;background:var(--bg);color:var(--ink2); font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;} .hv3-body *{box-sizing:border-box;} .hv3-body img{max-width:100%;height:auto;} .hv3-body a{text-decoration:none;color:inherit;} .hv3 h1,.hv3 h2,.hv3 h3,.hv3 h4{color:var(--ink);letter-spacing:-.03em;line-height:1.07; margin:0 0 1rem;} .hv3 p{margin:0 0 1.1rem;color:var(--ink2);} .hv3-wrap{max-width:1200px;margin:0 auto;padding:0 26px;position:relative;z-index:2;} /* grain: one data-URI, no network request, gives the flat panels some tooth */ .hv3-body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none; opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,");} /* ---------------------------------------------------------------- progress + header */ .hv3-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:10000;background:transparent;} .hv3-prog i{display:block;height:100%;width:0; background:linear-gradient(90deg,var(--a2),var(--a),var(--a3)); box-shadow:0 0 12px rgba(3,174,190,.8);transition:width .08s linear;} .hv3-hd{position:fixed;top:0;left:0;right:0;z-index:9990; padding:18px 0;transition:padding .3s ease,background .3s ease,border-color .3s ease; border-bottom:1px solid transparent;} .hv3-hd.is-stuck{padding:10px 0;background:rgba(8,9,10,.82); backdrop-filter:blur(14px) saturate(150%);border-bottom-color:var(--line2);} .hv3-hd-in{display:flex;align-items:center;gap:26px;} .hv3-logo img{height:34px;width:auto;display:block;} .hv3-nav{display:flex;align-items:center;gap:4px;margin-left:auto;} .hv3-nav > li{list-style:none;position:relative;} .hv3-nav > li > a{display:block;padding:9px 13px;font-size:.93rem;font-weight:600; color:var(--ink2);border-radius:9px;transition:color .2s,background .2s;} .hv3-nav > li > a:hover{color:var(--ink);background:rgba(255,255,255,.05);} .hv3-nav ul{position:absolute;top:calc(100% + 8px);left:0;min-width:248px;margin:0;padding:8px; list-style:none;background:rgba(14,16,18,.97);backdrop-filter:blur(16px); border:1px solid var(--line);border-radius:14px; box-shadow:0 26px 60px -28px rgba(0,0,0,.95); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .2s ease,transform .2s ease,visibility .2s;} .hv3-nav > li:hover ul,.hv3-nav > li:focus-within ul{opacity:1;visibility:visible;transform:none;} .hv3-nav ul a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem; color:var(--ink2);transition:color .18s,background .18s,padding-left .18s;} .hv3-nav ul a:hover{color:var(--a2);background:rgba(3,174,190,.09);padding-left:16px;} .hv3-hd .hv3-btn{padding:.62rem 1.15rem;font-size:.9rem;} .hv3-burger{display:none;margin-left:auto;width:42px;height:38px;border-radius:10px; border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink); font-size:1.15rem;cursor:pointer;} /* ---------------------------------------------------------------- buttons */ .hv3-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.92rem 1.75rem;border-radius:999px;font-weight:700;font-size:.97rem; border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden; transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s,color .25s;} .hv3-btn-primary{background:linear-gradient(120deg,var(--a2),var(--a) 55%,#0b8fa0); color:#03202a !important;box-shadow:0 14px 34px -16px rgba(3,174,190,.9);} .hv3-btn-primary:hover{box-shadow:0 22px 48px -16px rgba(3,174,190,1);} .hv3-btn-ghost{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--ink) !important;} .hv3-btn-ghost:hover{border-color:var(--a);color:var(--a2) !important;} /* ---------------------------------------------------------------- hero shell */ .hv3-hero{position:relative;overflow:hidden;isolation:isolate; padding:clamp(8rem,6rem + 8vw,12rem) 0 clamp(4rem,3rem + 4vw,6rem);} .hv3-mesh{position:absolute;inset:-25% -10% auto -10%;height:160%;z-index:0; pointer-events:none;filter:blur(64px);opacity:.8; background: radial-gradient(28% 34% at 16% 24%,rgba(3,174,190,.66),transparent 64%), radial-gradient(26% 32% at 80% 16%,rgba(37,99,235,.52),transparent 66%), radial-gradient(32% 34% at 62% 74%,rgba(3,174,190,.32),transparent 68%), radial-gradient(24% 28% at 28% 84%,rgba(124,58,237,.34),transparent 70%); animation:hv3-drift 22s ease-in-out infinite alternate;} @keyframes hv3-drift{0%{transform:translate3d(-2%,-1%,0) scale(1);} 100%{transform:translate3d(3%,2%,0) scale(1.12);}} .hv3-scan{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:62px 62px; -webkit-mask-image:radial-gradient(76% 58% at 50% 34%,#000,transparent 76%); mask-image:radial-gradient(76% 58% at 50% 34%,#000,transparent 76%);} .hv3-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono); font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700; color:var(--a2);padding:.45rem .9rem;border:1px solid rgba(3,174,190,.32); border-radius:999px;background:rgba(3,174,190,.07);margin-bottom:1.6rem;} .hv3-dot{width:7px;height:7px;border-radius:50%;background:var(--a2); box-shadow:0 0 0 0 rgba(95,230,242,.7);animation:hv3-pulse 2.4s infinite;} @keyframes hv3-pulse{70%{box-shadow:0 0 0 9px rgba(95,230,242,0);}100%{box-shadow:0 0 0 0 rgba(95,230,242,0);}} .hv3-h1{font-size:clamp(2.7rem,1.3rem + 5.6vw,5.4rem);font-weight:800;margin:0 0 1.4rem;} .hv3-grad{background:linear-gradient(96deg,var(--a2),var(--a) 52%,var(--a3)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent;} .hv3-lede{font-size:clamp(1.03rem,.96rem + .45vw,1.24rem);max-width:58ch;margin-bottom:2.2rem;} .hv3-cta{display:flex;flex-wrap:wrap;gap:.85rem;} /* two-column hero (console variant) - headline left, live terminal right */ .hv3-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:3.2rem;align-items:center;} @media (max-width:1040px){ .hv3-hero-grid{grid-template-columns:1fr;gap:2.4rem;} } /* ---------------------------------------------------------------- particle field */ .hv3-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.85;} /* ---------------------------------------------------------------- scramble */ .hv3-scr{font-variant-ligatures:none;} .hv3-scr .g{display:inline-block;} .hv3-scr .g.scrambling{color:var(--a2);opacity:.85;} /* ---------------------------------------------------------------- attack graph */ /* The diagram is landscape. Squeezed into 360px it renders its labels at about 3px and becomes decoration. Below 820px it keeps its real size and the container scrolls, so the map stays readable instead of merely present. */ .hv3-graph-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:rgba(3,174,190,.5) transparent;} .hv3-graph-scroll::-webkit-scrollbar{height:6px;} .hv3-graph-scroll::-webkit-scrollbar-thumb{background:rgba(3,174,190,.5);border-radius:99px;} .hv3-graph-hint{display:none;font-family:var(--mono);font-size:.72rem;color:var(--ink3); text-align:center;margin:.6rem 0 0;} @media (max-width:820px){ .hv3-graph{min-width:680px;} .hv3-graph-scroll{margin:0 -26px;padding:0 26px .4rem;} .hv3-graph-hint{display:block;} } .hv3-graph{width:100%;height:auto;overflow:visible;} .hv3-graph .edge{stroke:rgba(255,255,255,.16);stroke-width:1.5;fill:none;} .hv3-graph .edge.hot{stroke:rgba(255,122,114,.85);stroke-width:2;} .hv3-graph .flow{stroke:var(--a2);stroke-width:2;fill:none;stroke-linecap:round; stroke-dasharray:7 190;animation:hv3-flow 3.4s linear infinite;filter:drop-shadow(0 0 5px rgba(95,230,242,.9));} .hv3-graph .flow.f2{animation-delay:.8s;} .hv3-graph .flow.f3{animation-delay:1.7s;} .hv3-graph .flow.bad{stroke:#ff7a72;filter:drop-shadow(0 0 6px rgba(255,122,114,.95)); animation-duration:2.4s;} @keyframes hv3-flow{from{stroke-dashoffset:197;} to{stroke-dashoffset:0;}} .hv3-graph .node rect{fill:#12171a;stroke:rgba(255,255,255,.16);stroke-width:1.2;} .hv3-graph .node.crit rect{stroke:rgba(255,122,114,.75); filter:drop-shadow(0 0 14px rgba(255,122,114,.35));} .hv3-graph .node text{fill:#dfe6eb;font-size:13.5px;font-weight:600; font-family:var(--mono);} .hv3-graph .node .sub{fill:#7f888f;font-size:11.5px;font-weight:500;} .hv3-graph .pin{fill:#ff7a72;} .hv3-graph .pin circle{animation:hv3-ping 2.2s ease-out infinite;transform-origin:center;} @keyframes hv3-ping{0%{r:5;opacity:.95;}70%{r:17;opacity:0;}100%{opacity:0;}} .hv3-graph-cap{font-family:var(--mono);font-size:.76rem;color:var(--ink3); text-align:center;margin:1rem 0 0;} /* word-by-word kinetic reveal (variant B) */ .hv3-kin .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg); animation:hv3-word .8s cubic-bezier(.16,1,.3,1) forwards;} @keyframes hv3-word{to{opacity:1;transform:none;}} /* ---------------------------------------------------------------- console */ .hv3-term{border:1px solid var(--line);border-radius:16px;overflow:hidden; background:linear-gradient(180deg,#0c0f11,#090b0c); box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(3,174,190,.09) inset;} .hv3-term-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .95rem; border-bottom:1px solid var(--line2);background:rgba(255,255,255,.02);} .hv3-term-bar i{width:11px;height:11px;border-radius:50%;display:block;} .hv3-term-bar i:nth-child(1){background:#ff5f57;} .hv3-term-bar i:nth-child(2){background:#febc2e;} .hv3-term-bar i:nth-child(3){background:#28c840;} .hv3-term-bar span{margin-left:.5rem;font-family:var(--mono);font-size:.74rem;color:var(--ink3);} .hv3-term-body{padding:1.1rem 1.15rem 1.4rem;font-family:var(--mono);font-size:.845rem; line-height:1.85;min-height:310px;white-space:pre-wrap;word-break:break-word;color:var(--ink2);} .hv3-term-body .c-cmd{color:#fff;} .hv3-term-body .c-ok{color:#5fe6f2;} .hv3-term-body .c-warn{color:#ffcf5c;} .hv3-term-body .c-bad{color:#ff7a72;font-weight:700;} .hv3-term-body .c-dim{color:var(--ink3);} .hv3-caret{display:inline-block;width:8px;height:1.05em;vertical-align:-.18em; background:var(--a2);animation:hv3-blink 1s steps(2) infinite;} @keyframes hv3-blink{50%{opacity:0;}} /* ---------------------------------------------------------------- stats */ .hv3-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;list-style:none; margin:2.6rem 0 0;padding:0;border:1px solid var(--line);border-radius:18px; overflow:hidden;background:var(--line);} .hv3-stats li{margin:0;padding:1.55rem 1rem;text-align:center; background:rgba(10,12,13,.9);backdrop-filter:blur(8px);} .hv3-stats b{display:block;font-size:clamp(1.7rem,1.1rem + 2vw,2.7rem);font-weight:800; line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,var(--a)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .hv3-stats span{display:block;margin-top:.5rem;font-size:.67rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink3);font-weight:700;} /* ---------------------------------------------------------------- marquee */ .hv3-mq{padding:2.4rem 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2); background:var(--bg2);overflow:hidden;} .hv3-mq-k{text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em; text-transform:uppercase;color:var(--ink3);margin:0 0 1.5rem;} .hv3-mq-track{display:flex;gap:3.4rem;width:max-content; animation:hv3-slide 46s linear infinite; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);} .hv3-mq:hover .hv3-mq-track{animation-play-state:paused;} @keyframes hv3-slide{to{transform:translateX(-50%);}} .hv3-mq-track img{height:32px;width:auto;object-fit:contain;flex:0 0 auto; filter:brightness(0) invert(1) opacity(.44);transition:filter .25s;} .hv3-mq-track img:hover{filter:brightness(0) invert(1) opacity(.95);} /* ---------------------------------------------------------------- sections */ .hv3-sec{padding:clamp(3.8rem,2.4rem + 5vw,6.5rem) 0;} .hv3-alt{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);} .hv3-h2{font-size:clamp(1.95rem,1.2rem + 2.6vw,3.15rem);font-weight:800;} .hv3-sub{font-size:1.05rem;max-width:70ch;margin:0 0 2.6rem;} .hv3-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--a2);font-weight:700;margin:0 0 .8rem;} /* ---------------------------------------------------------------- spotlight cards */ .hv3-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;} .hv3-card{position:relative;overflow:hidden;border-radius:20px;padding:1.8rem 1.6rem 1.5rem; background:var(--pan);border:1px solid var(--line);display:block; transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;} /* the spotlight follows the pointer; --mx/--my are written by JS */ .hv3-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; transition:opacity .3s; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(3,174,190,.16),transparent 62%);} .hv3-card:hover::before{opacity:1;} .hv3-card::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px; pointer-events:none;opacity:0;transition:opacity .3s; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(95,230,242,.75),transparent 62%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;} .hv3-card:hover::after{opacity:1;} .hv3-card:hover{transform:translateY(-7px);border-color:rgba(3,174,190,.34); box-shadow:0 30px 64px -34px rgba(3,174,190,.75);} .hv3-card-k{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em; color:var(--a2);display:block;margin-bottom:.75rem;} .hv3-card h3{font-size:1.17rem;margin:0 0 .55rem;} .hv3-card p{font-size:.95rem;margin:0 0 1rem;} .hv3-card-go{font-size:.85rem;font-weight:700;color:var(--a2);display:inline-block;} .hv3-card-go::after{content:" \2192";display:inline-block;transition:transform .25s;} .hv3-card:hover .hv3-card-go::after{transform:translateX(5px);} /* ---------------------------------------------------------------- compare */ .hv3-two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:0 0 1.9rem;} .hv3-col{border:1px solid var(--line);border-radius:20px;padding:1.8rem 1.7rem;background:var(--pan);} .hv3-col h3{font-size:1.06rem;margin:0 0 1.1rem;} .hv3-col ul{margin:0;padding:0;list-style:none;} .hv3-col li{margin:0 0 .8rem;padding-left:1.8rem;position:relative;font-size:.97rem;} .hv3-col li::before{position:absolute;left:0;top:-.06em;font-weight:800;font-size:1.05rem;} .hv3-bad{opacity:.85;} .hv3-bad li::before{content:"\00d7";color:#e0645f;} .hv3-good{border-color:rgba(3,174,190,.38);box-shadow:0 24px 56px -34px rgba(3,174,190,.7);} .hv3-good li::before{content:"\2713";color:var(--a2);} .hv3-note{border-left:3px solid var(--a);padding:.25rem 0 .25rem 1.15rem;max-width:78ch;} .hv3-note b{color:var(--ink);} /* ---------------------------------------------------------------- split figures */ .hv3-split{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none; margin:0 0 2.3rem;padding:0;} .hv3-split li{margin:0;padding:1.35rem 1.1rem;border:1px solid var(--line);border-radius:16px; background:var(--pan);text-align:center;transition:border-color .25s,transform .25s;} .hv3-split li:hover{border-color:rgba(3,174,190,.4);transform:translateY(-3px);} .hv3-split b{display:block;font-size:1.95rem;font-weight:800;color:var(--a2);line-height:1; letter-spacing:-.03em;font-variant-numeric:tabular-nums;} .hv3-split span{display:block;margin-top:.45rem;font-size:.73rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink3);font-weight:700;} /* ---------------------------------------------------------------- steps */ .hv3-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;} .hv3-steps li{margin:0;display:flex;gap:1rem;padding:1.6rem 1.5rem;border-radius:18px; background:var(--pan);border:1px solid var(--line); transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1);} .hv3-steps li:hover{border-color:rgba(3,174,190,.4);transform:translateY(-4px);} .hv3-step-n{flex:0 0 36px;height:36px;border-radius:11px;display:flex;align-items:center; justify-content:center;font-family:var(--mono);font-weight:800;font-size:.88rem;color:var(--a2); background:rgba(3,174,190,.12);border:1px solid rgba(3,174,190,.32);} .hv3-steps h3{font-size:1.03rem;margin:.2rem 0 .45rem;} .hv3-steps p{font-size:.93rem;margin:0;} /* ---------------------------------------------------------------- close + footer */ .hv3-close{text-align:center;background:radial-gradient(88% 130% at 50% 100%,#101619,var(--bg) 70%);} .hv3-close .hv3-sub{margin-left:auto;margin-right:auto;} .hv3-close .hv3-cta{justify-content:center;} .hv3-ft{background:#060708;border-top:1px solid var(--line2);padding:3.4rem 0 2rem;} .hv3-ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.4rem;} .hv3-ft h4,.hv3-ft .hv3-ft-h{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3); margin:0 0 1rem;font-weight:700;} .hv3-ft ul{list-style:none;margin:0;padding:0;} .hv3-ft li{margin:0 0 .55rem;} .hv3-ft a{font-size:.92rem;color:var(--ink2);transition:color .2s,padding-left .2s;display:inline-block;} .hv3-ft a:hover{color:var(--a2);padding-left:4px;} .hv3-ft-bot{border-top:1px solid var(--line2);padding-top:1.4rem;display:flex; flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.84rem;color:var(--ink3);} .hv3-ft-blurb{font-size:.93rem;max-width:38ch;color:var(--ink3);} /* ---------------------------------------------------------------- reveal */ .hv3-rv{opacity:0;transform:translateY(30px); transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);} .hv3-rv.is-in{opacity:1;transform:none;} /* ---------------------------------------------------------------- responsive */ @media (max-width:1040px){ .hv3-cards,.hv3-steps{grid-template-columns:repeat(2,1fr);} .hv3-split{grid-template-columns:repeat(2,1fr);} .hv3-ft-grid{grid-template-columns:1fr 1fr;} } @media (max-width:860px){ .hv3-nav{display:none;} .hv3-burger{display:block;} .hv3-nav.is-open{display:block;position:fixed;inset:64px 0 0;background:rgba(8,9,10,.98); backdrop-filter:blur(18px);padding:1.2rem 26px;overflow-y:auto;margin:0;} .hv3-nav.is-open > li > a{padding:14px 0;font-size:1.05rem;border-bottom:1px solid var(--line2);} .hv3-nav.is-open ul{position:static;opacity:1;visibility:visible;transform:none; background:transparent;border:0;box-shadow:none;padding:0 0 .6rem 1rem;min-width:0;} .hv3-hd .hv3-btn{display:none;} } @media (max-width:720px){ .hv3-two,.hv3-cards,.hv3-steps{grid-template-columns:1fr;} .hv3-stats,.hv3-split{grid-template-columns:repeat(2,1fr);} .hv3-ft-grid{grid-template-columns:1fr;} .hv3-btn{width:100%;} .hv3-term-body{font-size:.8rem;min-height:270px;line-height:1.8;} /* Legibility floor. The uppercase micro-labels are set in the .67-.73rem range, which is fine on a 27" display and is 10.7px on a phone - under every accessibility floor and genuinely hard to read. Nothing on a phone goes below 12px. */ .hv3-stats span,.hv3-split span,.hv3-card-k,.hv3-mq-k,.hv3-tag,.hv3-graph-cap, .hv3-term-bar span,.hv3-graph-hint{font-size:.78rem;letter-spacing:.1em;} /* the logo is an image-only link; give the thumb something to hit */ .hv3-logo{display:flex;align-items:center;min-height:44px;} .hv3-eyebrow{font-size:.74rem;} .hv3-ft-bot{font-size:.88rem;} .hv3-body{font-size:16.5px;} /* Tap targets. Footer links were 24px tall - half the 44px minimum, and the footer is where a phone user is most likely to be aiming with a thumb. */ .hv3-ft a{font-size:.98rem;padding:.5rem 0;} .hv3-ft li{margin-bottom:.1rem;} .hv3-ft h4,.hv3-ft .hv3-ft-h{font-size:.8rem;} .hv3-card-go{padding:.4rem 0;} /* Hero breathes: the fixed header is 64px and the mesh needs less vertical room. */ .hv3-hero{padding:6.4rem 0 3rem;} .hv3-stats{margin-top:2rem;} .hv3-sec{padding:3.2rem 0;} } @media (max-width:860px){ /* the open mobile menu: real rows, not desktop-sized hit areas */ .hv3-nav.is-open ul a{padding:12px 0;font-size:.98rem;} .hv3-nav.is-open > li > a{padding:15px 0;} } @media (prefers-reduced-motion:reduce){ .hv3-mesh,.hv3-mq-track,.hv3-dot{animation:none !important;} .hv3-rv,.hv3-rv.is-in{opacity:1 !important;transform:none !important;transition:none !important;} .hv3-kin .w{opacity:1 !important;transform:none !important;animation:none !important;} .hv3-card,.hv3-steps li,.hv3-btn,.hv3-split li{transition:none !important;} } /* ---------------------------------------------------------------- hero diagram, big */ .hv3-bp-hero{padding:clamp(7rem,5.5rem + 6vw,9.5rem) 0 clamp(2.4rem,2rem + 2vw,3.4rem);} /* The headline is two clauses and should read as two lines. At the shared 5.4rem it broke each clause in half and took four, which pushed the diagram - the thing that earns the page - down out of the first screen. Wider measure, smaller type, and each clause is held together with a nowrap span so it can never split mid-clause. */ .hv3-bp-head{max-width:1180px;margin:0 auto 2.4rem;text-align:center;} .hv3-bp-hero .hv3-h1{font-size:clamp(1.95rem,.85rem + 3.4vw,3.95rem);margin-bottom:1.2rem;} .hv3-bp-hero .hv3-h1 .ln{display:inline-block;} @media (max-width:900px){ .hv3-bp-hero .hv3-h1 .ln{display:inline;} } .hv3-bp-head .hv3-lede{margin:0 auto 0;text-align:center;max-width:64ch;} .hv3-bp-head .hv3-eyebrow{margin-left:auto;margin-right:auto;} .hv3-stage{position:relative;border:1px solid var(--line);border-radius:24px; background:linear-gradient(180deg,rgba(18,21,23,.88),rgba(10,12,13,.88)); padding:1.5rem 1.4rem 1.2rem; box-shadow:0 50px 110px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);} .hv3-stage-bar{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem; font-family:var(--mono);font-size:.75rem;color:var(--ink3);letter-spacing:.07em;} .hv3-stage-bar b{color:var(--a2);font-weight:700;} .hv3-stage-bar .sp{margin-left:auto;} /* ---------------------------------------------------------------- interactive nodes */ .hv3-graph .node.tap{cursor:pointer;} .hv3-graph .node.tap rect{transition:stroke .22s,filter .22s;} .hv3-graph .node.tap:hover rect,.hv3-graph .node.is-sel rect{ stroke:rgba(95,230,242,.95);filter:drop-shadow(0 0 16px rgba(3,174,190,.55));} .hv3-graph .node.tap:focus{outline:none;} .hv3-nodeinfo{margin:1.1rem 0 0;border-top:1px solid var(--line2);padding-top:1rem; min-height:76px;} .hv3-nodeinfo h4,.hv3-nodeinfo .hv3-ni-t{font-family:var(--mono);font-size:.82rem; letter-spacing:.1em;text-transform:uppercase;color:var(--a2);margin:0 0 .4rem; font-weight:700;} .hv3-nodeinfo p{margin:0;font-size:.96rem;} .hv3-nodeinfo .hint{color:var(--ink3);font-family:var(--mono);font-size:.82rem;} .hv3-nodeinfo.is-auto h4::after,.hv3-nodeinfo.is-auto .hv3-ni-t::after{content:" \00b7 auto";color:var(--ink3);font-weight:400;} /* The response has to appear where the eye already is. The strip under the map was too far from the cursor - the operator, who knew the feature existed, still missed it on first look. This tip is anchored to the node being pointed at; the strip below stays as the resting state and as the touch/keyboard answer. */ .hv3-tip{position:absolute;z-index:6;max-width:290px;padding:.8rem .95rem; border-radius:13px;background:rgba(12,15,17,.97);border:1px solid rgba(3,174,190,.45); box-shadow:0 24px 54px -26px rgba(0,0,0,.95),0 0 0 1px rgba(3,174,190,.12); opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s;} .hv3-tip.is-on{opacity:1;visibility:visible;transform:none;} .hv3-tip h5,.hv3-tip .hv3-tip-t{margin:0 0 .35rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em; text-transform:uppercase;color:var(--a2);font-weight:700;} .hv3-tip p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink2);} @media (hover:none),(max-width:820px){ .hv3-tip{display:none;} } /* ---------------------------------------------------------------- about */ .hv3-about{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start;} .hv3-about-cred{border-left:2px solid rgba(3,174,190,.45);padding-left:1.35rem; margin:0;padding-top:.2rem;} .hv3-about-cred li{list-style:none;margin:0 0 1rem;font-size:.97rem;} .hv3-about-cred b{color:var(--ink);display:block;margin-bottom:.15rem;} /* ---------------------------------------------------------------- tile icons */ .hv3-card-ico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center; justify-content:center;margin:0 0 1.05rem; background:linear-gradient(150deg,rgba(3,174,190,.22),rgba(3,174,190,.05)); border:1px solid rgba(3,174,190,.32); transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s;} .hv3-card:hover .hv3-card-ico{transform:scale(1.08) rotate(-4deg); background:linear-gradient(150deg,rgba(3,174,190,.34),rgba(3,174,190,.1));} .hv3-card-ico svg{width:25px;height:25px;stroke:var(--a2);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;} /* ---------------------------------------------------------------- process flow */ .hv3-flow{position:relative;margin:0 0 1rem;} .hv3-flow-line{position:absolute;left:8%;right:8%;top:27px;height:2px; background:var(--line);} .hv3-flow-line i{position:absolute;left:0;top:0;height:100%;width:0; background:linear-gradient(90deg,var(--a2),var(--a)); box-shadow:0 0 10px rgba(3,174,190,.85);transition:width 1.6s cubic-bezier(.16,1,.3,1);} .hv3-flow.is-in .hv3-flow-line i{width:100%;} .hv3-flow-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;position:relative;} .hv3-flow-row > div{text-align:center;} .hv3-flow-dot{width:54px;height:54px;margin:0 auto .85rem;border-radius:50%; display:flex;align-items:center;justify-content:center;font-family:var(--mono); font-weight:800;font-size:1rem;color:var(--a2);background:#0d1012; border:2px solid rgba(3,174,190,.4);position:relative;z-index:2; transition:transform .3s,box-shadow .3s,border-color .3s;} .hv3-flow-row > div:hover .hv3-flow-dot{transform:scale(1.1); border-color:var(--a2);box-shadow:0 0 22px rgba(3,174,190,.55);} .hv3-flow-row h3,.hv3-flow-row h4{font-size:.94rem;margin:0 0 .3rem;} .hv3-flow-row p{font-size:.84rem;margin:0;color:var(--ink3);line-height:1.5;} @media (max-width:900px){ .hv3-flow-row{grid-template-columns:repeat(3,1fr);gap:1.5rem .7rem;} .hv3-flow-line{display:none;} } @media (max-width:520px){ .hv3-flow-row{grid-template-columns:repeat(2,1fr);} } /* the fuller explanation under the flow visual */ .hv3-psteps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:2.6rem 0 0;} .hv3-pstep{position:relative;border:1px solid var(--line);border-radius:18px; padding:1.6rem 1.5rem;background:var(--pan); transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1);} .hv3-pstep:hover{border-color:rgba(3,174,190,.38);transform:translateY(-4px);} .hv3-pstep-n{font-family:var(--mono);font-size:.74rem;font-weight:800;letter-spacing:.14em; color:var(--a2);display:block;margin-bottom:.6rem;} .hv3-pstep h3{font-size:1.08rem;margin:0 0 .55rem;} .hv3-pstep p{font-size:.93rem;margin:0;line-height:1.68;} .hv3-pstep em{color:var(--ink);font-style:italic;} @media (max-width:1040px){ .hv3-psteps{grid-template-columns:repeat(2,1fr);} } @media (max-width:720px){ .hv3-psteps{grid-template-columns:1fr;} } /* ---------------------------------------------------------------- azure */ .hv3-azure{display:grid;grid-template-columns:.92fr 1.08fr;gap:2.2rem;align-items:center; border:1px solid var(--line);border-radius:22px;padding:1.8rem;background:var(--pan);} .hv3-azure img{border-radius:14px;display:block;width:100%;border:1px solid var(--line2);} .hv3-azure h3{font-size:1.34rem;margin:0 0 .7rem;} .hv3-azure-note{font-size:.9rem;color:var(--ink3);margin:1rem 0 1.2rem; border-left:2px solid rgba(3,174,190,.45);padding-left:.95rem;} @media (max-width:820px){ .hv3-azure{grid-template-columns:1fr;} } /* ---------------------------------------------------------------- testimonials */ .hv3-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;} .hv3-quote{margin:0;position:relative;border:1px solid var(--line);border-radius:18px; padding:2.4rem 1.5rem 1.5rem;background:var(--pan); transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1);} .hv3-quote:hover{border-color:rgba(3,174,190,.38);transform:translateY(-4px);} .hv3-quote::before{content:"\201C";position:absolute;top:.35rem;left:1.2rem; font-size:3.4rem;line-height:1;color:rgba(3,174,190,.4);font-family:Georgia,serif;} .hv3-quote blockquote{margin:0 0 1.1rem;font-size:.99rem;line-height:1.7;color:var(--ink2);} .hv3-quote figcaption{border-top:1px solid var(--line2);padding-top:.85rem;} .hv3-quote figcaption b{display:block;color:var(--ink);font-size:.93rem;} .hv3-quote figcaption span{display:block;color:var(--ink3);font-size:.85rem;margin-top:.1rem;} @media (max-width:1040px){ .hv3-quotes{grid-template-columns:1fr 1fr;} } @media (max-width:720px){ .hv3-quotes{grid-template-columns:1fr;} } /* a non-linking card, for the report section */ .hv3-card-flat{cursor:default;} .hv3-card-flat:hover{transform:none;border-color:var(--line);box-shadow:none;} .hv3-card-flat:hover::after{opacity:0;} /* ---------------------------------------------------------------- contact form CF7 ships light-theme markup; on this ground its inputs would be white boxes with near-invisible text. Restyled here rather than by touching the plugin. */ .hv3-contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start; text-align:left;} .hv3-close .hv3-contact .hv3-h2,.hv3-close .hv3-contact .hv3-sub{margin-left:0; margin-right:0;text-align:left;} .hv3-close .hv3-contact .hv3-cta{justify-content:flex-start;} .hv3-form{border:1px solid var(--line);border-radius:20px;padding:1.8rem; background:var(--pan);} .hv3-form .form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;} .hv3-form .keydesign-label{margin:0;} .hv3-form .keydesign-label:nth-child(3){grid-column:1 / -1;} .hv3-form input[type=text],.hv3-form input[type=email],.hv3-form textarea{ width:100%;background:#0c0f11;border:1px solid var(--line);border-radius:11px; padding:.85rem 1rem;color:var(--ink);font-size:.95rem;font-family:inherit; transition:border-color .2s,box-shadow .2s;} .hv3-form textarea{min-height:132px;resize:vertical;margin-top:.9rem;} .hv3-form input::placeholder,.hv3-form textarea::placeholder{color:var(--ink3);opacity:1;} .hv3-form input:focus,.hv3-form textarea:focus{outline:none;border-color:var(--a); box-shadow:0 0 0 3px rgba(3,174,190,.18);} .hv3-form input[type=submit]{width:100%;margin-top:1rem;cursor:pointer;border:0; padding:.95rem 1.7rem;border-radius:999px;font-weight:700;font-size:.97rem; background:linear-gradient(120deg,var(--a2),var(--a) 55%,#0b8fa0);color:#03202a; box-shadow:0 14px 34px -16px rgba(3,174,190,.9);transition:box-shadow .25s,transform .18s;} .hv3-form input[type=submit]:hover{transform:translateY(-2px); box-shadow:0 22px 48px -16px rgba(3,174,190,1);} .hv3-form .wpcf7-not-valid-tip{color:#ff7a72;font-size:.83rem;margin-top:.35rem;} .hv3-form .wpcf7-response-output{border-radius:11px;border-color:var(--line) !important; color:var(--ink2);font-size:.9rem;margin:1rem 0 0 !important;padding:.8rem 1rem !important;} .hv3-form .wpcf7-spinner{filter:invert(1) opacity(.6);} @media (max-width:900px){ .hv3-contact{grid-template-columns:1fr;gap:2rem;} .hv3-form .form{grid-template-columns:1fr;} } /* ---------------------------------------------------------------- faq */ .hv3-faq{max-width:920px;} .hv3-faq details{border:1px solid var(--line);border-radius:14px;background:var(--pan); margin:0 0 .7rem;overflow:hidden;transition:border-color .25s;} .hv3-faq details[open]{border-color:rgba(3,174,190,.42);} .hv3-faq summary{cursor:pointer;padding:1.05rem 3rem 1.05rem 1.3rem;font-weight:600; color:var(--ink);font-size:1rem;position:relative;list-style:none;} .hv3-faq summary::-webkit-details-marker{display:none;} /* the question is wrapped in an

so it appears in the outline; it must still look and lay out exactly like the summary text it replaced */ .hv3-faq summary h3{display:inline;margin:0;font:inherit;color:inherit; letter-spacing:inherit;} .hv3-faq summary::after{content:"+";position:absolute;right:1.2rem;top:50%; transform:translateY(-50%);font-size:1.35rem;color:var(--a2);font-weight:400;} .hv3-faq details[open] summary::after{content:"\2212";} .hv3-faq summary:hover{color:var(--a2);} .hv3-faq .a{padding:0 1.3rem 1.15rem;font-size:.96rem;margin:0;} @media (max-width:900px){ .hv3-about{grid-template-columns:1fr;gap:2rem;} } @media (max-width:720px){ .hv3-stage{padding:1rem .9rem .9rem;border-radius:18px;} .hv3-bp-head{text-align:left;} .hv3-bp-head .hv3-lede{text-align:left;} .hv3-bp-head .hv3-eyebrow{margin-left:0;} } /* the contact hero is a working section, not a statement - less air above it */ .hv3-contact-hero{padding:clamp(7rem,5.5rem + 5vw,8.5rem) 0 clamp(3rem,2.4rem + 2vw,4rem);} .hv3-contact-hero .hv3-h1{font-size:clamp(1.9rem,.9rem + 2.9vw,3.3rem);} .hv3-contact-hero .hv3-lede{margin-bottom:1.8rem;} .hv3-form-lg{padding:2rem;} .hv3-form-lg label{display:block;margin:0 0 1rem;font-size:.88rem;font-weight:600; color:var(--ink2);} .hv3-form-lg .sr-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;} /* CF7 applies its own autop, which wraps BOTH labels of a row in one

. The grid then has a single child and the row renders stacked. display:contents makes that wrapper transparent to the grid so the labels become the grid items - and it avoids turning off wpcf7_autop, which would change how every other form on the site renders. */ .hv3-form-lg .sr-row > p{display:contents;} /* ...and autop also turns the newline BETWEEN the two labels into a
. With the wrapper transparent that
becomes a grid item of its own and takes the second cell, pushing the second field onto a new row. Only the row-level break is removed; the ones inside a label (between its text and its input) are left alone. */ .hv3-form-lg .sr-row > p > br{display:none;} .hv3-form-lg p{margin:0;} .hv3-form-lg label{margin-bottom:.9rem;} .hv3-form-lg .sr-opt{color:var(--ink3);font-weight:500;text-transform:none; letter-spacing:0;font-size:.82rem;} .hv3-form-lg input[type=text],.hv3-form-lg input[type=email],.hv3-form-lg input[type=tel], .hv3-form-lg textarea,.hv3-form-lg select{ width:100%;margin-top:.4rem;background:#0c0f11;border:1px solid var(--line); border-radius:11px;padding:.8rem .95rem;color:var(--ink);font-size:.95rem; font-family:inherit;transition:border-color .2s,box-shadow .2s;} /* The dropdown LIST is drawn by the OS, not by us. Without color-scheme:dark the browser paints it light - so on this dark form the options rendered as dark text on a dark background and only the selected value (which we colour ourselves) was readable. color-scheme is the switch that makes the native popup dark with light text; the explicit option colours are the belt-and-braces for browsers that ignore it. */ .hv3-form-lg select,.hv3-form select{color-scheme:dark;} .hv3-form-lg option,.hv3-form option{background-color:#0c0f11;color:#ffffff;} .hv3-form-lg select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--a2) 50%), linear-gradient(135deg,var(--a2) 50%,transparent 50%); background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.4rem;} .hv3-form-lg option{background:#0c0f11;color:var(--ink);} .hv3-form-lg textarea{min-height:132px;resize:vertical;} .hv3-form-lg input:focus,.hv3-form-lg textarea:focus,.hv3-form-lg select:focus{ outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(3,174,190,.18);} .hv3-steps-4{grid-template-columns:repeat(4,1fr);} .hv3-mail{color:var(--a2) !important;font-weight:700;border-bottom:1px solid rgba(3,174,190,.4);} .hv3-mail:hover{border-bottom-color:var(--a2);} @media (max-width:1040px){ .hv3-steps-4{grid-template-columns:repeat(2,1fr);} } @media (max-width:900px){ .hv3-form-lg .sr-row{grid-template-columns:1fr;} } @media (max-width:720px){ .hv3-steps-4{grid-template-columns:1fr;} } /* ---------------------------------------------------------------- service hero */ .hv3-svc-hero{padding:clamp(6.5rem,5rem + 5vw,8.5rem) 0 clamp(2.6rem,2rem + 2vw,3.6rem);} .hv3-svc-hero .hv3-h1{font-size:clamp(2rem,1rem + 3.2vw,3.6rem);max-width:20ch;} .hv3-svc-hero .hv3-lede{max-width:64ch;} .hv3-svc-crumb{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em; color:var(--ink3);margin:0 0 1.2rem;} .hv3-svc-crumb a{color:var(--ink3);} .hv3-svc-crumb a:hover{color:var(--a2);} /* ---------------------------------------------------------------- prose layer The service pages are ordinary HTML - h2/h3/p/ul. This is what makes that read well on the dark ground without touching a word of it. */ .hv3-prose{max-width:78ch;} .hv3-prose > *:first-child{margin-top:0;} .hv3-prose h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.15rem);font-weight:800; margin:3.2rem 0 1rem;letter-spacing:-.025em;} .hv3-prose h2:first-child{margin-top:0;} .hv3-prose h3{font-size:1.14rem;font-weight:700;margin:2rem 0 .6rem;color:var(--ink);} .hv3-prose p{font-size:1.02rem;line-height:1.78;margin:0 0 1.1rem;color:var(--ink2);} .hv3-prose strong,.hv3-prose b{color:var(--ink);font-weight:700;} .hv3-prose a{color:var(--a2);font-weight:600; border-bottom:1px solid rgba(3,174,190,.35);} .hv3-prose a:hover{border-bottom-color:var(--a2);} .hv3-prose ul,.hv3-prose ol{margin:0 0 1.3rem;padding:0 0 0 0;list-style:none;} .hv3-prose ol{counter-reset:pr;} .hv3-prose li{position:relative;padding-left:1.8rem;margin:0 0 .7rem;font-size:1.01rem; line-height:1.72;color:var(--ink2);} .hv3-prose ul > li::before{content:"";position:absolute;left:.25rem;top:.72em; width:6px;height:6px;border-radius:50%;background:var(--a);} .hv3-prose ol > li{counter-increment:pr;} .hv3-prose ol > li::before{content:counter(pr);position:absolute;left:0;top:.05em; font-family:var(--mono);font-size:.8rem;font-weight:800;color:var(--a2);} .hv3-prose blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem; border-left:3px solid var(--a);color:var(--ink2);} .hv3-prose img{border-radius:14px;border:1px solid var(--line);} .hv3-prose table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem; display:block;overflow-x:auto;} .hv3-prose th,.hv3-prose td{border:1px solid var(--line);padding:.7rem .9rem; text-align:left;} .hv3-prose th{background:rgba(255,255,255,.04);color:var(--ink);font-weight:700;} .hv3-prose hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0;} /* the catalogue block these pages already carry */ .hv3-prose .wm-mp{background:var(--pan) !important;border:1px solid var(--line); border-radius:18px;padding:1.6rem;margin:2rem 0;} /* ---------------------------------------------------------------- service nav */ .hv3-svc-more{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;} .hv3-svc-more a{display:block;padding:1.1rem 1.2rem;border:1px solid var(--line); border-radius:14px;background:var(--pan);font-size:.96rem;font-weight:600; color:var(--ink2) !important; transition:border-color .22s,transform .22s cubic-bezier(.16,1,.3,1),color .22s;} .hv3-svc-more a:hover{border-color:rgba(3,174,190,.45);transform:translateY(-3px); color:var(--a2) !important;} .hv3-svc-more a.is-here{border-color:rgba(3,174,190,.5);color:var(--a2) !important; background:rgba(3,174,190,.07);} @media (max-width:900px){ .hv3-svc-more{grid-template-columns:1fr 1fr;} } @media (max-width:600px){ .hv3-svc-more{grid-template-columns:1fr;} } /* the generic content page reuses the service shapes; only the hero differs slightly */ .hv3-page-hero{padding:clamp(6rem,4.6rem + 4vw,7.6rem) 0 clamp(2.2rem,1.8rem + 2vw,3rem);} .hv3-page-hero .hv3-h1{font-size:clamp(2rem,1.1rem + 3vw,3.5rem);max-width:22ch;} .hv3-page-hero .hv3-lede{max-width:66ch;} /* ---------------------------------------------------------------- catalogue components Ported from appsec-design-system.php - see the module docstring for why and how. */ .hv3{--at-bg:var(--bg);--at-panel:var(--pan);--at-panel-2:var(--pan2); --at-line:var(--line);--at-line-soft:var(--line2);--at-accent:var(--a); --at-accent-dim:var(--a2);--at-ink:var(--ink);--at-ink-2:var(--ink2); --at-ink-3:var(--ink3);--at-radius:12px;--at-radius-lg:18px; --at-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --ds-ground:var(--bg);--ds-surface:var(--pan);--ds-surface-2:var(--pan2); --ds-border:var(--line);--ds-border-soft:var(--line2);--ds-ink:var(--ink); --ds-ink-2:var(--ink2);--ds-ink-3:var(--ink3);--ds-accent:var(--a);} .hv3 .at-lead{color:var(--at-ink-2) !important;font-size:1.055rem;line-height:1.75;max-width:74ch;}.hv3 .at-hero{border:1px solid var(--at-line);border-radius:var(--at-radius-lg);background:linear-gradient(160deg,rgba(3,174,190,.09),rgba(3,174,190,0) 55%),var(--at-panel);padding:clamp(1.5rem,1rem + 2vw,2.6rem);margin:0 0 2rem;}.hv3 .at-hero p{margin:0 0 .9rem;}.hv3 .at-hero p:last-child{margin-bottom:0;}.hv3 .at-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin:1.6rem 0 2.4rem;padding:0;list-style:none;}.hv3 .at-stats li{background:var(--at-panel);border:1px solid var(--at-line);border-radius:var(--at-radius);padding:1rem 1.15rem;margin:0;}.hv3 .at-stats b{display:block;font-size:1.85rem;line-height:1.1;color:var(--at-ink);font-weight:700;letter-spacing:-.02em;}.hv3 .at-stats span{display:block;font-size:.83rem;color:var(--at-ink-3);margin-top:.25rem;letter-spacing:.02em;}.hv3 .at-jump{position:sticky;top:calc(var(--header-height, var(--at-header-h)) + var(--admin-bar,0px));z-index:101;display:flex;flex-wrap:wrap;gap:.4rem;padding:.7rem 0;margin:0 0 1.2rem;background:rgba(20,20,21,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--at-line-soft);}.hv3 .at-jump a{display:inline-block;padding:.38rem .8rem;border-radius:999px;font-size:.87rem;font-weight:600;color:var(--at-ink-2) !important;border:1px solid var(--at-line);background:var(--at-panel);text-decoration:none;transition:.15s ease;}.hv3 .at-jump a:hover,.hv3 .at-jump a:focus-visible{color:var(--at-ink) !important;border-color:var(--at-accent);background:var(--at-panel-2);}.hv3 .at-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.05rem;margin:1.4rem 0 0;padding:0;list-style:none;}.hv3 .at-card{background:var(--at-panel);border:1px solid var(--at-line);border-radius:var(--at-radius);padding:1.25rem 1.35rem 1.15rem;margin:0;display:flex;flex-direction:column;transition:.16s ease;}.hv3 .at-card:hover{border-color:var(--at-accent-dim);transform:translateY(-2px);box-shadow:var(--at-shadow);}.hv3 .at-card h3{margin:0 0 .55rem !important;font-size:1.04rem !important;line-height:1.35;}.hv3 .at-card h3 a{color:var(--at-ink) !important;text-decoration:none;}.hv3 .at-card h3 a:hover{color:var(--at-accent) !important;}.hv3 .at-card-meta{font-size:.78rem;color:var(--at-ink-3);letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin:0 0 .7rem !important;}.hv3 .at-chips{display:flex;flex-wrap:wrap;gap:.32rem;margin:0 0 .95rem;padding:0;list-style:none;flex:1;align-content:flex-start;}.hv3 .at-chips li a{color:inherit !important;text-decoration:none;font-weight:400 !important;}.hv3 .at-chips li:hover{border-color:var(--at-accent);}.hv3 .at-chips li:hover a{color:var(--at-ink) !important;}.hv3 .at-chips li{margin:0;font-size:.79rem;line-height:1.3;color:var(--at-ink-2);background:var(--at-panel-2);border:1px solid var(--at-line-soft);border-radius:5px;padding:.22rem .5rem;}.hv3 .at-chips li.at-more-n{background:none;border-color:transparent;color:var(--at-ink-3);}.hv3 .at-card-go{margin:0 !important;font-size:.87rem;padding-top:.75rem;border-top:1px solid var(--at-line-soft);}.hv3 .at-card-go a{color:var(--at-accent) !important;text-decoration:none;}.hv3 .at-card-go a:hover{text-decoration:underline;}.hv3 .at-case{background:var(--at-panel);border:1px solid var(--at-line);border-left:3px solid var(--at-accent);border-radius:var(--at-radius);padding:1.35rem 1.5rem 1.15rem;margin:1.5rem 0;}.hv3 .at-case h3.wp-block-heading{margin:0 0 .9rem !important;font-size:1.1rem !important;line-height:1.4;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;}.hv3 .at-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--at-accent);background:rgba(3,174,190,.1);border:1px solid rgba(3,174,190,.32);border-radius:5px;padding:.16rem .46rem;white-space:nowrap;}.hv3 .at-f{margin:0 0 .7rem !important;font-size:.95rem;color:var(--at-ink-2) !important;line-height:1.7;}.hv3 .at-f:last-child{margin-bottom:0 !important;}.hv3 .at-f b{color:var(--at-ink);font-weight:700;}.hv3 .at-f-label{display:inline-block;min-width:0;color:var(--at-ink) !important;font-weight:700;}.hv3 .at-std{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem;color:var(--at-ink-2) !important;background:var(--at-panel-2);border:1px solid var(--at-line);border-radius:5px;padding:.14rem .44rem;margin:0 .28rem .28rem 0;white-space:nowrap;}.hv3 .at-depth{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:.16rem .58rem;margin:0 .3rem .3rem 0;white-space:nowrap;}.hv3 .at-depth-manual{color:#FFD8A8 !important;background:rgba(255,169,64,.13);border:1px solid rgba(255,169,64,.34);}.hv3 .at-depth-hybrid{color:#A5E8F0 !important;background:rgba(3,174,190,.13);border:1px solid rgba(3,174,190,.34);}.hv3 .at-depth-automated{color:#B9E6C4 !important;background:rgba(75,201,120,.13);border:1px solid rgba(75,201,120,.32);}.hv3 .at-num{text-align:right;white-space:nowrap;}.hv3 .at-note{border-left:3px solid var(--at-line);padding:.1rem 0 .1rem 1rem;color:var(--at-ink-3) !important;font-size:.93rem;margin:1.2rem 0;}.hv3 .at-more{margin-top:.35rem !important;font-size:.92rem;}.hv3 .at-scope{background:var(--at-panel);border:1px solid var(--at-line);border-radius:var(--at-radius);padding:1.2rem 1.4rem;margin:1.4rem 0;}.hv3 .at-scope p{margin:0 0 .6rem !important;}.hv3 .at-scope p:last-child{margin-bottom:0 !important;}.hv3 .at-cols{columns:2;column-gap:2rem;}.hv3 .at-cols li{break-inside:avoid;}.hv3 .at-feature{display:block;margin:0 0 2.2rem;padding:clamp(1.3rem,1rem + 1.6vw,2rem);border:1px solid var(--at-accent-dim);border-radius:var(--at-radius-lg);background:linear-gradient(135deg,rgba(3,174,190,.16),rgba(3,174,190,.03) 62%),var(--at-panel);text-decoration:none !important;transition:.18s ease;}.hv3 .at-feature:hover,.hv3 .at-feature:focus-visible{border-color:var(--at-accent);transform:translateY(-2px);box-shadow:var(--at-shadow);}.hv3 .at-feature > span{display:block;}.hv3 .at-feature-kicker{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--at-accent) !important;margin-bottom:.45rem;}.hv3 .at-feature-title{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);font-weight:700;line-height:1.32;letter-spacing:-.015em;color:var(--at-ink) !important;margin-bottom:.5rem;}.hv3 .at-feature-body{font-size:.97rem;line-height:1.68;color:var(--at-ink-2) !important;max-width:72ch;}.hv3 .at-feature-go{margin-top:.95rem;font-weight:700;font-size:.95rem;color:var(--at-accent) !important;}.hv3 .at-navstrip{display:flex;flex-wrap:wrap;gap:.5rem;margin:3.2rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--at-line-soft);}.hv3 .at-navstrip a{display:inline-block;padding:.45rem .9rem;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--at-ink-2) !important;border:1px solid var(--at-line);background:var(--at-panel);text-decoration:none;transition:.15s ease;}.hv3 .at-navstrip a:hover,.hv3 .at-navstrip a:focus-visible{color:var(--at-ink) !important;border-color:var(--at-accent);background:var(--at-panel-2);}@media (max-width:900px){.hv3 .at-cols{columns:1;}}@media (max-width:780px){.hv3 .at-jump{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}.hv3 .at-jump::-webkit-scrollbar{display:none;}.hv3 .at-jump a{flex:0 0 auto;}}@media (max-width:640px){.hv3 .at-grid{grid-template-columns:1fr;}.hv3 .at-navstrip a{font-size:.82rem;padding:.38rem .7rem;}.hv3 .at-stats{grid-template-columns:repeat(2,1fr);}.hv3 .at-case{padding:1.1rem 1.05rem 1rem;}.hv3 .at-jump{gap:.3rem;padding:.55rem 0;}.hv3 .at-jump a{font-size:.81rem;padding:.32rem .65rem;}.hv3 .at-case h3.wp-block-heading{gap:.45rem;}}@media (prefers-reduced-motion:reduce){.hv3 .at-card,.hv3 .at-jump a{transition:none;}.hv3 .at-card:hover{transform:none;}}.hv3 a:focus-visible,.hv3 .at-jump a:focus-visible{outline:2px solid var(--at-accent);outline-offset:2px;border-radius:3px;} /* ---------------------------------------------------------------- catalogue on hv3 Corrections that only matter once these components sit inside our own template. */ /* The `.at-hero` panel duplicated the page intro; the hv3 hero carries the lede now, so any that survive a rebuild render as a plain block rather than a second banner. */ .hv3 .hv3-lede .at-lead{max-width:none;font-size:inherit;color:inherit !important;} .hv3-prose > .at-hero{margin-top:0;} /* Tables in the catalogue were styled by `.site-main .wp-block-table`, which is gone. */ .hv3-prose .wp-block-table{margin:1.8rem 0;overflow-x:auto;} .hv3-prose .wp-block-table table{width:100%;border-collapse:collapse;font-size:.94rem;} .hv3-prose .wp-block-table td,.hv3-prose .wp-block-table th{ border:1px solid var(--line);padding:.7rem .9rem;text-align:left;color:var(--ink2);} .hv3-prose .wp-block-table th{background:var(--pan2);color:var(--ink);font-weight:700;} .hv3-prose .wp-block-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.02);} /* The jump strip at the top of a category page reads as navigation, so it gets the panel treatment the rest of the site gives a group of links. */ .hv3-prose .at-jump{background:var(--pan);border:1px solid var(--line); border-radius:16px;padding:1.1rem 1.3rem;margin:0 0 2.2rem;} .hv3-prose .at-navstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:.9rem 0;margin:0 0 2rem;} /* `.hv3-prose` caps its children at a 702px reading measure. That is right for paragraphs and wrong for every component here - the stat band, the card grids, the chip strip, the coverage panel and the wide tables are furniture, not prose, and squeezing them into the measure left 40% of the page empty beside them. `.hv3-prose` starts at the wrap's own content edge, so an explicit width is the whole breakout. */ .hv3-prose > .at-stats,.hv3-prose > .at-grid,.hv3-prose > .at-feature, .hv3-prose > .at-chips,.hv3-prose > .at-cols,.hv3-prose > .at-jump, .hv3-prose > .at-navstrip,.hv3-prose > .wp-block-table, .hv3-prose > .wp-block-group > .at-feature{ width:min(1148px,calc(100vw - 52px));max-width:none;} @media (max-width:720px){ .hv3-prose .at-grid{grid-template-columns:1fr !important;} .hv3-prose .at-stats{grid-template-columns:repeat(2,1fr) !important;} } /* ---------------------------------------------------------------- blog */ .hv3-postmeta{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink3);display:flex;gap:.6rem;align-items:center; margin:1.4rem 0 0;} .hv3-post .hv3-prose{margin-top:0;} /* Search sits in the hero, where the sidebar used to be a column of furniture. */ .hv3-blogsearch{display:flex;gap:.6rem;margin:2rem 0 0;max-width:520px;} .hv3 .hv3-blogsearch input{flex:1;background:var(--pan) !important; color:var(--ink) !important; border:1px solid var(--line);border-radius:999px;padding:.8rem 1.2rem;font:inherit; font-size:.95rem;} .hv3-blogsearch input::placeholder{color:var(--ink3);} .hv3-blogsearch input:focus{outline:none;border-color:var(--a); box-shadow:0 0 0 3px rgba(3,174,190,.18);} .hv3 .hv3-blogsearch button{background:linear-gradient(120deg,#5fe6f2,var(--a) 55%,#0b8fa0); color:#03202a;border:0;border-radius:999px;padding:.8rem 1.5rem;font-weight:800; cursor:pointer;font-size:.92rem;} /* Categories as a filter strip. Sixteen of them in a right rail was the reason the article column was narrow; across the top they are a way in instead. */ .hv3-blogfilter{padding-top:0 !important;padding-bottom:0 !important;} .hv3-chips{display:flex;flex-wrap:wrap;gap:.5rem;} .hv3-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem; border-radius:999px;border:1px solid var(--line);background:var(--pan); color:var(--ink2);font-size:.87rem;transition:border-color .2s,color .2s,background .2s;} .hv3-chip span{font-family:var(--mono);font-size:.74rem;color:var(--ink3);} .hv3-chip:hover{border-color:rgba(3,174,190,.45);color:var(--ink);} .hv3-chip.is-on{background:rgba(3,174,190,.14);border-color:rgba(3,174,190,.5); color:var(--a2);} .hv3-chip.is-on span{color:var(--a2);} .hv3-postgrid h2{font-size:1.17rem;margin:0 0 .55rem;color:var(--ink);} .hv3-postgrid .hv3-postmeta{margin:.2rem 0 1rem;} .hv3-pager{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:2.6rem 0 0;} .hv3-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 .9rem;border-radius:999px; border:1px solid var(--line);background:var(--pan);color:var(--ink2);font-size:.92rem;} .hv3-pager .page-numbers:hover{border-color:rgba(3,174,190,.45);color:var(--a2);} .hv3-pager .page-numbers.current{background:linear-gradient(120deg,#5fe6f2,var(--a) 55%,#0b8fa0); color:#03202a;border-color:transparent;font-weight:800;} .hv3-pager .page-numbers.dots{border-color:transparent;background:none;} /* Comments: the theme's markup, our colours. */ .hv3-comments{max-width:none;} .hv3-comments .comment-reply-title,.hv3-comments .comments-title{color:var(--ink); font-size:1.3rem;margin:0 0 1rem;} .hv3-comments .comment-list{list-style:none;margin:0 0 2rem;padding:0;} .hv3-comments .comment-list li{background:var(--pan);border:1px solid var(--line); border-radius:16px;padding:1.2rem 1.4rem;margin:0 0 1rem;} .hv3-comments .comment-meta,.hv3-comments .comment-metadata, .hv3-comments .comment-metadata a{color:var(--ink3);font-size:.84rem;} .hv3-comments .fn,.hv3-comments .comment-author a{color:var(--ink);font-weight:700;} .hv3-comments label{display:block;color:var(--ink2);font-size:.9rem;margin:0 0 .4rem;} .hv3-comments .required{color:#ff7a72;} .hv3-comments input[type="text"],.hv3-comments input[type="email"], .hv3-comments input[type="url"],.hv3-comments textarea{width:100%;background:var(--pan); color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem; font:inherit;font-size:.95rem;} .hv3-comments input:focus,.hv3-comments textarea:focus{outline:none;border-color:var(--a); box-shadow:0 0 0 3px rgba(3,174,190,.18);} .hv3-comments input[type="submit"]{width:auto;cursor:pointer;font-weight:800; background:linear-gradient(120deg,#5fe6f2,var(--a) 55%,#0b8fa0);color:#03202a;border:0; border-radius:999px;padding:.8rem 1.8rem;} .hv3-comments .comment-notes,.hv3-comments .logged-in-as{color:var(--ink3);font-size:.88rem;} @media (max-width:720px){ .hv3-blogsearch{flex-direction:column;} .hv3-blogsearch button{width:100%;} } /* ---------------------------------------------------------------- CybeRapid section bar */ /* `top` is the STUCK header's height, measured live rather than guessed: 91.6px at >=901px and 71.6px below it (the header shrinks its padding on `.is-stuck` and its logo at the mobile breakpoint). The header is z-index 9990 and paints over this bar, so an under-estimate does not overlap - it hides the bar entirely, which is exactly what a first attempt at 58px did. */ .hv3-crbar{position:sticky;top:92px;z-index:60;margin:0; background:rgba(10,12,13,.92);backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid var(--line);} .hv3-crbar-in{max-width:1200px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem); display:flex;align-items:center;gap:1.4rem;height:54px;} .hv3-crbar-k{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--a2);font-weight:700;white-space:nowrap;} .hv3-crbar nav{display:flex;align-items:center;gap:1.35rem;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none;} .hv3-crbar nav::-webkit-scrollbar{display:none;} .hv3-crbar nav a{font-size:.88rem;font-weight:600;color:var(--ink2);white-space:nowrap; padding:.35rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;} .hv3-crbar nav a:hover{color:var(--ink);} .hv3-crbar nav a[aria-current="page"]{color:var(--a2);border-bottom-color:var(--a2);} .hv3-crbar-cta{margin-left:auto;} .hv3-crbar-cta a{display:inline-block;font-size:.82rem;font-weight:700;color:var(--a2); border:1px solid rgba(3,174,190,.45);border-radius:999px;padding:.4rem 1rem; white-space:nowrap;transition:background .2s,border-color .2s;} .hv3-crbar-cta a:hover{background:rgba(3,174,190,.14);border-color:rgba(3,174,190,.7);} @media (max-width:900px){ .hv3-crbar{top:72px;} .hv3-crbar-k{display:none;} .hv3-crbar-in{gap:1rem;height:50px;} .hv3-crbar-cta{margin-left:.6rem;} } @media (prefers-reduced-motion:reduce){.hv3-crbar{backdrop-filter:none;}} /* ---------------------------------------------------------------- pricing tiers Four columns that must stay readable when one of them is a price. `.hv3-col` already carries the panel; this adds the number, the qualifier under it, and a tick marker on every card - `.hv3-col li::before` reserves the gutter but sets no content, so without this only the highlighted (`.hv3-good`) card would show markers and the row would read as if three tiers had unstyled lists. */ .hv3-prices{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:start;} .hv3-prices .hv3-col{display:flex;flex-direction:column;height:100%;} .hv3-prices .hv3-col > ul{flex:1;} .hv3-prices .hv3-col li::before{content:"\2713";color:var(--a2);} .hv3-price{font-size:clamp(1.8rem,1.2rem + 1.6vw,2.4rem);font-weight:800;line-height:1; letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin:.2rem 0 .35rem; background:linear-gradient(180deg,#fff,var(--a)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .hv3-price-k{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink3);font-weight:700;margin:0 0 .9rem;} @media (max-width:1080px){.hv3-prices{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.hv3-prices{grid-template-columns:1fr;}} /* ---------------------------------------------------------------- order page Form on the left, a standing recap of what was chosen on the right. The recap is static rather than reactive: the tier itself is carried by CF7's own `default:get`, so this panel needs no JavaScript to stay honest. */ .hv3-order{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(1.4rem,3vw,2.6rem);align-items:start;} .hv3-order-side{border:1px solid var(--line);border-radius:20px;padding:1.7rem 1.6rem; background:var(--pan);position:sticky;top:160px;} .hv3-recap{list-style:none;margin:.9rem 0 1.4rem;padding:0; border-top:1px solid var(--line2);} .hv3-recap li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; margin:0;padding:.7rem 0;border-bottom:1px solid var(--line2);} .hv3-recap b{font-weight:600;color:var(--ink);font-size:.95rem;} .hv3-recap span{font-variant-numeric:tabular-nums;font-weight:800;color:var(--a2); font-size:1.02rem;white-space:nowrap;} .hv3-order-note{font-size:.88rem;line-height:1.65;color:var(--ink3);margin:0 0 .9rem;} .hv3-order-note b{color:var(--ink2);} .hv3-order-note a{color:var(--a2) !important;font-weight:600;} /* The chosen tier, when ?plan= names one. */ .hv3-pick{margin:.6rem 0 1.2rem;} .hv3-pick h3{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;} .hv3-pick-price{font-size:clamp(2rem,1.4rem + 1.6vw,2.6rem);font-weight:800;line-height:1; letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin:.35rem 0 .3rem; background:linear-gradient(180deg,#fff,var(--a)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .hv3-pick-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink3);font-weight:700;margin:0 0 1rem;} .hv3-pick ul{list-style:none;margin:0 0 1rem;padding:0; border-top:1px solid var(--line2);} .hv3-pick li{margin:0;padding:.6rem 0 .6rem 1.6rem;position:relative;font-size:.9rem; line-height:1.55;color:var(--ink2);border-bottom:1px solid var(--line2);} .hv3-pick li::before{content:"\2713";position:absolute;left:0;top:.55rem; color:var(--a2);font-weight:800;} .hv3-pick-change{margin:0;font-size:.83rem;} .hv3-pick-change a{color:var(--a2) !important;font-weight:600;} @media (max-width:960px){ .hv3-order{grid-template-columns:1fr;} .hv3-order-side{position:static;order:-1;} } /* ---------------------------------------------------------------- menu hover gap The dropdown sat at `top: calc(100% + 8px)`, so there was an 8px strip between the menu item and its panel where the pointer was over NEITHER. Moving diagonally toward a submenu item crossed that strip and the panel vanished. The offset is now padding on the panel itself: same look, but the hover target is continuous. A wider invisible bridge under the parent covers diagonal approaches. */ .hv3-nav ul,.hv3-gh .hv3-nav ul{top:100% !important;padding-top:14px !important; background-clip:padding-box;} .hv3-nav > li::after,.hv3-gh .hv3-nav > li::after{content:"";position:absolute; left:0;right:-8px;top:100%;height:16px;} .hv3-nav > li:hover::after,.hv3-gh .hv3-nav > li:hover::after{display:block;} /* keep the panel up while the pointer is inside it */ .hv3-nav ul:hover,.hv3-gh .hv3-nav ul:hover{opacity:1 !important;visibility:visible !important; transform:none !important;} /* ---------------------------------------------------------------- footer headings The three footer column labels were promoted from

to

so the document outline would stop skipping a level. They took the theme's h2 colour with them - #1a1a1a on the footer's #060708, which measures 1.16:1. Invisible, on every page. `.hv3-ft-h` now carries the styling the h4 rule used to give them; this keeps it from being lost again if the element changes. */ .hv3-ft h2.hv3-ft-h,.hv3 .hv3-ft-h{color:var(--ink3);font-size:.76rem; letter-spacing:.15em;text-transform:uppercase;margin:0 0 1rem;font-weight:700;} /* ---------------------------------------------------------------- eyebrow colour `.hv3-eyebrow` is (0,1,0) and loses to `.hv3 p` (0,1,1), so the kicker rendered in body grey instead of the accent. Matched on the element as well to win. */ .hv3 p.hv3-eyebrow{color:var(--a2);} /* ---------------------------------------------------------------- open FAQs On the service pages every answer is now visible without a click. The
element is kept (so it still collapses, and so the markup stays semantic) but starts open. */ .hv3-faq details > summary{cursor:pointer;} .hv3-faq.is-open details{border-color:var(--line);} /* ---------------------------------------------------------------- mobile targets Two genuine findings from the mobile sweep (the rest were inline prose links, which cannot be 44px tall without breaking the paragraph they sit in): - the hero breadcrumb was a 14px-tall standalone control - testimonial attributions rendered at 11.5-11.9px on a phone */ @media (max-width:720px){ .hv3-svc-crumb{margin-bottom:.9rem;} .hv3-svc-crumb a{display:inline-block;padding:.42rem .1rem;} .hv3 .ts-org,.hv3 .ts-role,.hv3 .ts-name,.hv3 figcaption span, .hv3-prose small,.hv3-prose span{font-size:.8rem;} .hv3-pstep-n{font-size:.8rem;} /* catalogue card titles were a 26px-tall tap target; the whole card row becomes one */ .hv3-prose .at-card h3{margin-bottom:.15rem !important;} /* Any heading that IS a link, not only the catalogue cards - /our-services/ lists its six services as

...

in plain prose and those were 26px too. */ .hv3-prose h2 > a:only-child,.hv3-prose h3 > a:only-child, .hv3-prose h4 > a:only-child{display:block;padding:.4rem 0;} } /* ---------------------------------------------------------------- catalogue panel The "test cases behind this service" block is wrapped in .wm-mp on some pages and bare on others - cloud looked better purely because it had the wrapper. Both shapes are now styled identically, so it reads as a panel everywhere. */ .hv3-prose .wm-mp,.hv3-prose .hv3-catpanel{background:var(--pan) !important; border:1px solid var(--line) !important;border-radius:18px !important; padding:1.7rem 1.6rem !important;margin:2.4rem 0 !important;display:block;} .hv3-prose .wm-mp > h2,.hv3-prose .hv3-catpanel > h2{margin-top:0 !important; font-size:1.5rem !important;padding-bottom:.6rem;border-bottom:2px solid var(--a);} .hv3-prose .at-lead{color:var(--ink2) !important;font-size:1rem !important;} .hv3-prose .at-lead strong{color:var(--ink) !important;} .hv3-prose .at-grid{display:grid !important; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important; gap:.8rem !important;margin:1.3rem 0 1rem !important;padding:0 !important; list-style:none !important;} .hv3-prose .at-grid li,.hv3-prose .at-card{margin:0 !important;padding:.95rem 1.1rem !important; background:var(--pan2) !important;border:1px solid var(--line) !important; border-radius:11px !important;list-style:none !important; transition:border-color .22s,transform .22s;} .hv3-prose .at-grid li::before,.hv3-prose .at-card::before{display:none !important;} .hv3-prose .at-card:hover{border-color:rgba(3,174,190,.45) !important; transform:translateY(-2px);} .hv3-prose .at-card h3{margin:0 0 .3rem !important;font-size:.98rem !important;} .hv3-prose .at-card h3 a{border:0 !important;color:var(--ink) !important;} .hv3-prose .at-card h3 a:hover{color:var(--a2) !important;} .hv3-prose .at-card-meta{font-size:.76rem !important;color:var(--ink3) !important; letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin:0 !important;} .hv3-prose .at-more{font-size:.94rem;margin:.6rem 0 0 !important;padding-top:.9rem; border-top:1px solid var(--line2);} /* ---------------------------------------------------------------- 16:9 media box Kept for any future embed: a ratio box so an iframe cannot push the page around while it loads. /about/ used to carry a dead play button here; the video behind it turned out to be Elementor's own promo from the theme demo, so it was removed rather than fixed. */ .hv3-embed{position:relative;width:100%;margin:2.4rem 0;border-radius:18px; overflow:hidden;border:1px solid var(--line);background:var(--pan2);} .hv3-embed::before{content:"";display:block;padding-top:56.25%;} .hv3-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} /* ---------------------------------------------------------------- skip link Every page opens with the logo and about thirty header links. A keyboard or switch-access user had to tab through all of them, on every page, before reaching a word of content. The link is the first thing in the document and only visible while focused. */ /* `a{color:...}` from the reading layer is (0,1,1) and outranked the bare `.hv3-skip` class, so the link painted body-grey on the teal plate: 1.64:1, measured. Matched on the element as well. */ a.hv3-skip,.hv3-skip{position:absolute;left:-9999px;top:0;z-index:100001; padding:.85rem 1.2rem;border-radius:0 0 12px 0;background:var(--a); color:#04191c !important;font-weight:800;font-size:.92rem;text-decoration:none;} .hv3-skip:focus{left:0;outline:2px solid #fff;outline-offset:-4px;} #hv3-main:focus{outline:none;} /* The menu