/* ============================================================ NOX pricing A1 — the toggle calculator. Adapted from a shadcn/React/Tailwind component (motion, NumberFlow, VerticalCutReveal). This site is static HTML with no build step, so the behaviour is rebuilt in vanilla CSS and JS rather than pulling React in for one section. The palette is the NOX one, NOT the component's. The original paints a blue radial wash (#2529f8); on this site red is the brand and blue would read as a different company. Red is also kept dim here on purpose, per the de-pointifying pass that softened the glows in nox-v3.css. ============================================================ */ /* ---- page-wide ambient field ---- Fixed to the viewport and behind everything. The existing .grid-bg sits at z-index 0 too and comes after these in the DOM, so the stack reads: particles, noise, grid, then content (sections are z-index 1). */ .page-particles{ position:fixed;inset:0;z-index:0;width:100%;height:100%; pointer-events:none;display:block;opacity:.6; } .page-noise{ position:fixed;inset:0;z-index:0;pointer-events:none; opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- the pricing card: liquid glass ---- Same idiom as the site header, which is the only other glass surface here, so the two read as one material. Heavier blur because this panel is large and sits over a moving field: too little blur and the particles crawl through the text. */ #pricing .calc-wrap{ position:relative; border-radius:26px; isolation:isolate; background:var(--glass); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid var(--glass-brd); box-shadow: 0 30px 70px -20px rgba(0,0,0,.75), 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(255,42,42,.08); } /* The lit top edge that makes glass read as glass: a hairline gradient border that is bright where light would catch it and gone by the bottom. */ #pricing .calc-wrap::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,42,42,.10) 42%,transparent 70%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none;z-index:1; } #pricing .calc-inner{position:relative;z-index:2;padding:34px 30px 30px} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* No backdrop-filter: fall back to an opaque panel rather than letting the particle field run straight through the price. */ #pricing .calc-wrap{background:var(--bg-raised)} } /* ---- heading, cut-reveal ---- The React version clips each word and springs it up. Same idea: each word sits in an overflow-hidden box and translates from 100%. */ .cut-reveal{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .28em} .cut-reveal .cw{display:inline-flex;overflow:hidden;line-height:1.15} .cut-reveal .cw > span{ display:inline-block; transform:translateY(105%); transition:transform .72s var(--ease); } .cut-reveal.in .cw > span{transform:translateY(0)} .calc-eyebrow{ display:flex;align-items:center;justify-content:center;gap:8px; margin-bottom:14px;font-family:var(--mono);font-size:11.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--red); } .calc-eyebrow svg{width:15px;height:15px;fill:var(--red);stroke:none;flex:none} .calc-head{text-align:center;max-width:720px;margin:0 auto 28px} .calc-head h3{ font-family:var(--display);font-weight:400; font-size:clamp(24px,3.4vw,38px);line-height:1.18;margin:0 0 12px;color:var(--fg); } .calc-head p{color:var(--fg-muted);font-size:15px;line-height:1.6;margin:0} /* ---- layout ---- */ .calc-grid{ display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start; max-width:1000px;margin:0 auto; } @media (max-width:860px){ .calc-grid{grid-template-columns:1fr;gap:28px} } .calc-col h4{ font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--fg-faint);margin:0 0 6px;font-weight:500; } .calc-col .hint{color:var(--fg-muted);font-size:13px;line-height:1.5;margin:0 0 12px} .calc-block{margin-bottom:26px} /* ---- the switch ---- motion's layoutId slides a shared pill between buttons. Here one absolutely positioned indicator is moved with a transform, which gives the same read without a layout library. */ .pswitch{ position:relative;display:grid;gap:4px;padding:5px; border:1px solid var(--glass-brd);border-radius:var(--r-pill); background:rgba(255,255,255,.03); } .pswitch.two{grid-template-columns:repeat(2,1fr)} .pswitch.three{grid-template-columns:repeat(3,1fr)} /* Sector 02 carries a fourth, quoted tier. Four segments of switch label do not fit on one line on a narrow card, so it wraps to 2x2 there rather than shrinking the type to nothing. */ .pswitch.four{grid-template-columns:repeat(4,1fr)} @media (max-width:560px){ .pswitch.four{grid-template-columns:repeat(2,1fr)} } .pswitch .ind{ position:absolute;top:5px;left:5px;bottom:5px;z-index:0; border-radius:var(--r-pill); background:linear-gradient(180deg,var(--red) 0%,var(--red-dim) 100%); box-shadow:0 0 0 1px rgba(255,42,42,.35), 0 6px 18px rgba(255,42,42,.16); transition:transform .42s var(--ease), width .42s var(--ease); } .pswitch button{ position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer; padding:11px 10px;border-radius:var(--r-pill); font-family:var(--sans);font-size:13.5px;font-weight:500; color:var(--fg-muted);transition:color .28s var(--ease);white-space:nowrap; } .pswitch button:hover{color:var(--fg)} .pswitch button[aria-selected="true"]{color:#fff;font-weight:600} .pswitch button:focus-visible{outline:2px solid var(--red);outline-offset:3px} .pswitch .save{ display:inline-block;margin-left:6px;font-family:var(--mono);font-size:10px; letter-spacing:.08em;color:var(--ok); } .pswitch button[aria-selected="true"] .save{color:rgba(255,255,255,.85)} /* ---- feature list ---- */ .calc-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .calc-feats li{ display:flex;align-items:flex-start;gap:11px; color:var(--fg-muted);font-size:14.5px;line-height:1.45; opacity:0;transform:translateY(-8px);filter:blur(6px); transition:opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease); } .calc-feats li.in{opacity:1;transform:none;filter:none} .calc-feats .tick{ flex:none;width:21px;height:21px;border-radius:var(--r-pill); display:grid;place-items:center;margin-top:1px; background:linear-gradient(180deg,var(--red) 0%,var(--red-dim) 100%); box-shadow:0 2px 10px rgba(255,42,42,.22); } .calc-feats .tick svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none} /* ---- price + CTA ---- */ .calc-price{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding-top:6px;border-top:1px solid var(--line-soft);margin-top:4px; } .calc-price .amt{ font-family:var(--display);font-size:clamp(38px,5.6vw,54px); line-height:1;color:var(--fg);letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .calc-price .per{font-family:var(--mono);font-size:13px;color:var(--fg-muted)} .calc-price .was{ font-family:var(--mono);font-size:14px;color:var(--fg-faint); text-decoration:line-through;text-decoration-color:var(--red-dim); } /* The big number is the per-month equivalent, which is the figure people compare across plans - but on annual that is not what actually leaves the bank, so the amount genuinely charged gets its own line rather than being left for the reader to multiply. */ .calc-year{ flex-basis:100%;margin:8px 0 0; font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--fg-muted); } .calc-year b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums} .calc-note{font-size:12.5px;color:var(--fg-faint);line-height:1.55;margin:10px 0 18px} .calc-cta{ display:block;width:100%;text-align:center;text-decoration:none; padding:16px 20px;border-radius:var(--r-pill); font-family:var(--sans);font-weight:600;font-size:16px;color:#fff; background:linear-gradient(180deg,var(--red) 0%,var(--red-dim) 100%); border:1px solid rgba(255,42,42,.5); box-shadow:0 8px 26px rgba(255,42,42,.18); transition:transform .2s var(--ease), box-shadow .2s var(--ease); } .calc-cta:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(255,42,42,.26)} .calc-cta:active{transform:translateY(0)} /* ---- enterprise, kept out of the calculator ---- "Custom quoted" has no number to animate, so forcing it into the switch would mean inventing a price. It sits alongside instead. */ .calc-enterprise{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; max-width:1000px;margin:22px auto 0;padding:20px 24px; border:1px solid var(--glass-brd);border-radius:22px; background:var(--glass); backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%); box-shadow:0 18px 44px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10); } .calc-enterprise b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--fg)} .calc-enterprise p{margin:4px 0 0;color:var(--fg-muted);font-size:13.5px;line-height:1.5;max-width:56ch} .calc-enterprise .btn{flex:none} @media (prefers-reduced-motion:reduce){ .page-particles{display:none} .cut-reveal .cw > span{transform:none;transition:none} .calc-feats li{opacity:1;transform:none;filter:none;transition:none} .pswitch .ind{transition:none} } /* ============================================================ The same glass, on the other two pricing surfaces. index.html has a compact four-up band that links out to each sector's own calculator, plus the four sector cards in #sectors. Neither should grow a second calculator - each sector page holding its own is the right split - so they get the material, not the mechanic. These are ID-qualified (1,1,0) so they beat the .price-card / .price-band rules living in each page's inline