/* ═══════════════════════════════════════════════════════════════ НЕЙРОН · Mercury v3 · POLISH + VARIATION SYSTEM (overlay) Loads AFTER mercury-v3.css. Adds premium baseline polish and mix-and-match visual variants driven by attributes from the Tweaks panel. Nothing here is required for the page to work — it only elevates and re-skins. ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── 0. BASELINE PREMIUM POLISH (always on) ───────────────────────────────────────────── */ /* refined selection + cohesive caret */ ::selection{background:color-mix(in srgb,var(--lav-deep) 22%,transparent);color:var(--ink)} html{caret-color:var(--lav-deep)} /* tasteful custom scrollbar (desktop) */ @media (pointer:fine){ *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} *::-webkit-scrollbar{width:11px;height:11px} *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 16%,transparent);border-radius:99px;border:3px solid var(--bg)} *::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 30%,transparent)} *::-webkit-scrollbar-track{background:transparent} } /* accessible focus ring that matches the brand */ :where(a,button,summary,input,[tabindex]):focus-visible{ outline:2px solid var(--lav-deep); outline-offset:3px; border-radius:6px; } /* Section dividers: replace flat hairline with a centered gradient that fades at the edges — a small, expensive detail. */ .section{border-top:0 !important} .section::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent 0%,var(--line) 18%,var(--line) 82%,transparent 100%); z-index:0; } .final{border-top:0 !important} .final::after{ content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2; background:linear-gradient(90deg,transparent,var(--line),transparent); } /* Slightly richer, more layered elevation on the hero/keystone cards. Keeps the same direction & color, just deepens the falloff. */ .hv,.price-card,.calc__panel{ box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 6px -2px rgba(12,15,23,0.05), 0 14px 28px -16px rgba(12,15,23,0.10), 0 44px 80px -48px rgba(12,15,23,0.22); } /* Universal, gentle hover micro-lift for clickable surfaces that don't already animate (pills, chips already do their own thing). */ @media (prefers-reduced-motion:no-preference) and (pointer:fine){ .reviews-empty{transition:transform .35s var(--ease),box-shadow .35s var(--ease)} } /* ───────────────────────────────────────────── 1. ACCENT THEME · html[data-accent] Re-tones primary accents, gradients, CTA pulse, links, eyebrow dots. Duotone role chips (S/M/A/C) stay for semantic consistency. ───────────────────────────────────────────── */ /* expose CTA pulse stops as variables so themes can re-tint them */ :root{--pulse-a:#a7e8c8;--pulse-b:#c7a7ff;--accent-grad:linear-gradient(120deg,var(--lav-deep) 0%,var(--mint-deep) 100%)} .accent,.stat-strip .k.a{background-image:var(--accent-grad) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important} .btn--pulse{background:linear-gradient(135deg,var(--pulse-a) 0%,var(--pulse-b) 100%) !important} html[data-accent="lavpeach"]{ --lav-deep:#6b4ddb;--mint-deep:#c46a2a; --pulse-a:#e6dcff;--pulse-b:#f6d8bd; --accent-grad:linear-gradient(120deg,#6b4ddb 0%,#c46a2a 100%); } html[data-accent="azure"]{ --lav-deep:#1f6391;--mint-deep:#0f7b5e; --pulse-a:#cfe4f0;--pulse-b:#a8e5d3; --accent-grad:linear-gradient(120deg,#1f6391 0%,#0f7b5e 100%); } html[data-accent="graphite"]{ --lav-deep:#3c4150;--mint-deep:#6a7080; --pulse-a:#e7e4dc;--pulse-b:#cfccc4; --accent-grad:linear-gradient(120deg,#2a2e39 0%,#6a7080 100%); /* desaturate the pastel duotone so the whole page reads mono-luxe */ --mint:#dfe4e2;--mint-2:#eef1ef; --lav:#e0dee6;--lav-2:#f0eff4; --peach:#e8e3da;--peach-2:#f3efe8; --sky:#dde3e8; } /* ───────────────────────────────────────────── 2. SURFACE MOOD · html[data-mood] Shifts the white/paper temperature across every card at once. ───────────────────────────────────────────── */ html[data-mood="porcelain"]{ --bg:#f4f6f8;--bg-2:#eceff3;--bg-3:#e2e7ec; --surface:#ffffff;--line:#e1e6ec;--line-soft:#eef1f5; --ink:#0b0e16;--ink-2:#39404e;--ink-3:#6f7787; } html[data-mood="sand"]{ --bg:#f6f1e8;--bg-2:#efe8da;--bg-3:#e6ddca; --surface:#fffdf8;--line:#e7ddca;--line-soft:#f1ebdd; --ink:#1a1407;--ink-2:#473f2e;--ink-3:#857a64; } /* ───────────────────────────────────────────── 3. CARD STYLE · html[data-cards] ───────────────────────────────────────────── */ :root{--card-list:0} /* shared card selector group */ html[data-cards="outline"] :is(.hv,.team-card,.team-context,.audit-step,.is-card,.module,.sp,.calc__panel,.price-card,.risk-item,.obj,.reviews-empty,.rev-card){ box-shadow:none !important; border-color:color-mix(in srgb,var(--ink) 16%,transparent) !important; background:var(--surface); } html[data-cards="outline"] :is(.team-card,.audit-step,.module,.risk-item,.obj,.price-card,.sp):hover{ border-color:var(--ink) !important; box-shadow:0 10px 24px -18px rgba(12,15,23,0.4) !important; } html[data-cards="glass"] :is(.hv,.team-card,.team-context,.audit-step,.is-card,.module,.sp,.calc__panel,.price-card,.risk-item,.obj,.reviews-empty,.rev-card){ background:color-mix(in srgb,var(--surface) 66%,transparent) !important; -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border-color:color-mix(in srgb,#ffffff 65%,var(--line)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 18px 44px -22px rgba(12,15,23,0.22) !important; } /* ───────────────────────────────────────────── 4. AMBIENT TEXTURE · html[data-tex] Full-page fixed overlay behind content. ───────────────────────────────────────────── */ .tex-layer{ position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0; transition:opacity .6s var(--ease); } /* keep all page content above the ambient texture layer */ body>header,body>main,body>footer{position:relative;z-index:1} /* scroll-progress hairline — a small, always-on sign of life */ .nrn-progress{ position:fixed;top:0;left:0;height:2px;width:0%;z-index:60; background:var(--accent-grad); box-shadow:0 0 10px color-mix(in srgb,var(--lav-deep) 60%,transparent); transition:width .12s linear;pointer-events:none; } @media (prefers-reduced-motion:reduce){.nrn-progress{transition:none}} html[data-anim="off"] .nrn-progress{display:none} html[data-tex="grid"] .tex-layer{ opacity:1; background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 0); background-size:30px 30px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 10%,transparent 75%); mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 10%,transparent 75%); } html[data-tex="grain"] .tex-layer{ opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } /* ───────────────────────────────────────────── 5. MOTION · html[data-anim] calm = drop the looping ambient motion, keep entrance reveals. off = no motion at all, everything visible. ───────────────────────────────────────────── */ html[data-anim="calm"] :is(.hero::before,.hero::after,.hv::before,.hv::after,.hv-spark .pt-glow,.btn--pulse,.btn--pulse::before,.btn--pulse::after,.hero__chip .pulse::before,.hv-hd .dot::after,.tm-row--ltr,.tm-row--rtl){ animation:none !important; } html[data-anim="calm"] .btn--pulse::before, html[data-anim="calm"] .btn--pulse::after{display:none} html[data-anim="off"] *{ animation:none !important; transition:none !important; } html[data-anim="off"] .reveal, html[data-anim="off"] .text-stream>span{opacity:1 !important;transform:none !important;filter:none !important} html[data-anim="off"] .tex-layer{transition:none} /* ───────────────────────────────────────────── 5b. LIVELINESS — cohesive "alive" layer All gated on motion-allowed + anim != off. ───────────────────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ /* cinematic blur-in on every reveal entrance */ html:not([data-anim="off"]) .reveal{filter:blur(6px)} html:not([data-anim="off"]) .reveal.in{ filter:blur(0); transition:opacity .9s var(--ease),transform .9s var(--ease-bounce),filter .8s var(--ease); } /* slow shimmer drift across accent gradient text */ html[data-anim="full"] .accent{ background-size:220% 100% !important; animation:nrnAccentDrift 9s ease-in-out infinite; } @keyframes nrnAccentDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* growing accent dash next to every section eyebrow */ .section__head .eyebrow{position:relative} .section__head .eyebrow::after{ content:"";display:inline-block;width:0;height:2px;margin-left:10px;border-radius:2px; background-image:var(--accent-grad);vertical-align:middle; transition:width .7s var(--ease) .18s; } html:not([data-anim="off"]) .section__head.reveal.in .eyebrow::after{width:40px} } /* unified premium hover for card grids (pointer devices) */ @media (pointer:fine){ html:not([data-anim="off"]) :is(.team-card,.module,.risk-item,.obj,.audit-step,.sp){ transition:box-shadow .3s var(--ease),border-color .25s var(--ease),transform .28s var(--ease); } html:not([data-anim="off"]) :is(.team-card,.module,.risk-item,.obj,.audit-step,.sp):hover{ box-shadow:0 24px 48px -26px rgba(12,15,23,0.30),inset 0 0 0 1px color-mix(in srgb,var(--lav-deep) 20%,transparent); border-color:color-mix(in srgb,var(--lav-deep) 42%,var(--line)) !important; } html:not([data-anim="off"]) :is(.team-card,.audit-step) .ico{transition:transform .35s var(--ease-bounce),box-shadow .25s var(--ease)} html:not([data-anim="off"]) :is(.team-card,.audit-step):hover .ico{transform:translateY(-3px) scale(1.07)} } /* magnetic / tilt helpers set inline by mercury-v3-anim.js */ .nrn-magnetic{transition:transform .25s var(--ease)} .nrn-tilt{transition:transform .3s var(--ease)} html[data-anim="off"] .nrn-magnetic,html[data-anim="off"] .nrn-tilt{transform:none !important} /* ───────────────────────────────────────────── 6. TWEAKS PANEL · vanilla, hidden until host activates ───────────────────────────────────────────── */ #nrn-tweaks{ position:fixed;right:18px;bottom:18px;z-index:9999; width:300px;max-width:calc(100vw - 36px); background:rgba(255,255,255,0.86); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(12,15,23,0.10); border-radius:18px; box-shadow:0 32px 70px -28px rgba(12,15,23,0.42),inset 0 1px 0 rgba(255,255,255,0.7); font-family:var(--sans);color:var(--ink); padding:6px; opacity:0;transform:translateY(14px) scale(0.98);pointer-events:none; transition:opacity .28s var(--ease),transform .28s var(--ease-bounce); display:none; } #nrn-tweaks.on{display:block;opacity:1;transform:none;pointer-events:auto} #nrn-tweaks .tw-hd{ display:flex;align-items:center;gap:8px; padding:12px 12px 12px 14px; } #nrn-tweaks .tw-hd .grip{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--lav) 0%,var(--mint) 100%);box-shadow:0 0 0 3px rgba(212,206,242,0.3)} #nrn-tweaks .tw-hd b{font:700 14px/1 var(--display);letter-spacing:-0.01em} #nrn-tweaks .tw-hd .sp{margin-left:auto;font:500 11px/1 var(--mono);color:var(--ink-4);text-transform:uppercase;letter-spacing:0.08em} #nrn-tweaks .tw-x{ width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center; color:var(--ink-3);font-size:18px;line-height:1;transition:background .15s,color .15s; } #nrn-tweaks .tw-x:hover{background:var(--bg-2);color:var(--ink)} #nrn-tweaks .tw-body{max-height:min(70vh,560px);overflow:auto;padding:2px 12px 12px} #nrn-tweaks .tw-sec{margin-top:14px} #nrn-tweaks .tw-sec:first-child{margin-top:4px} #nrn-tweaks .tw-lbl{font:600 11px/1 var(--sans);letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;display:block} #nrn-tweaks .tw-seg{ display:grid;gap:5px;grid-auto-flow:column;grid-auto-columns:1fr; background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:4px; } #nrn-tweaks .tw-seg.wrap{grid-auto-flow:row;grid-template-columns:1fr 1fr} #nrn-tweaks .tw-seg button{ padding:8px 6px;border-radius:8px;font:600 12px/1.05 var(--sans);color:var(--ink-2); letter-spacing:-0.005em;transition:background .18s var(--ease),color .18s,box-shadow .18s; display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;min-height:32px; } #nrn-tweaks .tw-seg button:hover{color:var(--ink)} #nrn-tweaks .tw-seg button.sel{ background:var(--surface);color:var(--ink); box-shadow:0 2px 8px -3px rgba(12,15,23,0.22),inset 0 0 0 1px rgba(12,15,23,0.04); } #nrn-tweaks .tw-seg button .sw{width:13px;height:13px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08)} #nrn-tweaks .tw-foot{ display:flex;gap:8px;padding:10px 12px 4px; } #nrn-tweaks .tw-reset{ flex:1;padding:9px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line); font:600 12px/1 var(--sans);color:var(--ink-2);transition:background .15s,color .15s; } #nrn-tweaks .tw-reset:hover{background:var(--bg-3);color:var(--ink)} @media (max-width:560px){ #nrn-tweaks{right:10px;left:10px;bottom:10px;width:auto} } /* ───────────────────────────────────────────── 7. MOBILE POLISH (complements the base breakpoints) ───────────────────────────────────────────── */ @media (max-width:640px){ /* calmer ambient blobs on phones — cleaner + lighter */ .hero::before,.hero::after{opacity:.45} /* progress hairline a touch more present on small screens */ .nrn-progress{height:3px} /* shorter eyebrow dash so heads stay tidy */ html:not([data-anim="off"]) .section__head.reveal.in .eyebrow::after{width:24px} /* never let the texture overlay add visual noise on small screens */ html[data-tex="grain"] .tex-layer{opacity:.32} /* tighten section divider inset to the narrower gutter */ .section::before{background:linear-gradient(90deg,transparent 0%,var(--line) 8%,var(--line) 92%,transparent 100%)} } @media (max-width:480px){ /* keep the keystone-card shadow from feeling heavy on tiny screens */ .hv,.price-card,.calc__panel{ box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 22px -14px rgba(12,15,23,0.12), 0 30px 56px -40px rgba(12,15,23,0.18); } /* full-width comfortable CTAs on phones */ .hero__ctas .btn--lg{width:100%;justify-content:center} } /* ───────────────────────────────────────────── 8. SIGNATURE MOMENTS (deepened, accent-tied) ───────────────────────────────────────────── */ /* 8a · ROADMAP — self-building: stations light up after the drawing line */ @media (prefers-reduced-motion:no-preference){ html:not([data-anim="off"]) .program-roadmap .station{ opacity:0;transform:translateY(14px) scale(.9); transition:opacity .5s var(--ease),transform .6s var(--ease-bounce); } html:not([data-anim="off"]) .program-roadmap.in .station{opacity:1;transform:none} html:not([data-anim="off"]) .program-roadmap.in .station.s1{transition-delay:.20s} html:not([data-anim="off"]) .program-roadmap.in .station.s2{transition-delay:.58s} html:not([data-anim="off"]) .program-roadmap.in .station.s3{transition-delay:.96s} html:not([data-anim="off"]) .program-roadmap.in .station.s4{transition-delay:1.34s} html:not([data-anim="off"]) .program-roadmap.in .station.s5{transition-delay:1.72s} html:not([data-anim="off"]) .program-roadmap.in .station.s6{transition-delay:2.10s} /* one-shot "charge" ring as each pin lands (pin::before is free) */ html:not([data-anim="off"]) .program-roadmap.in .station .pin::before{ content:"";position:absolute;inset:-3px;border-radius:21px; border:2px solid var(--mint-deep);opacity:0;pointer-events:none; animation:nrnCharge .9s var(--ease) both; } .program-roadmap.in .station.s1 .pin::before{animation-delay:.50s} .program-roadmap.in .station.s2 .pin::before{animation-delay:.88s} .program-roadmap.in .station.s3 .pin::before{animation-delay:1.26s} .program-roadmap.in .station.s4 .pin::before{animation-delay:1.64s} .program-roadmap.in .station.s5 .pin::before{animation-delay:2.02s} .program-roadmap.in .station.s6 .pin::before{animation-delay:2.40s} } @keyframes nrnCharge{0%{opacity:.85;transform:scale(.82)}100%{opacity:0;transform:scale(1.5)}} /* 8b · CALCULATOR — accent-filled slider tracks (set --fill via JS) */ .calc-slider input[type=range]{ background:linear-gradient(90deg, var(--lav-deep) 0%, color-mix(in srgb,var(--lav-deep) 55%,var(--mint-deep)) var(--fill,20%), var(--bg-3) var(--fill,20%)) !important; } .calc-slider input[type=range]:focus{ background:linear-gradient(90deg, var(--lav-deep) 0%, color-mix(in srgb,var(--lav-deep) 55%,var(--mint-deep)) var(--fill,20%), var(--lav-2) var(--fill,20%)) !important; } /* 8c · FINALE — "time reclaimed" burst on CTA click */ .nrn-reclaim-burst{ position:absolute;left:50%;top:50%;width:360px;height:360px;border-radius:50%; transform:translate(-50%,-50%) scale(.5); border:3px solid var(--mint); box-shadow:0 0 40px rgba(168,229,211,0.55),inset 0 0 40px rgba(168,229,211,0.4); z-index:3;pointer-events:none;opacity:0; animation:nrnReclaim 1.5s var(--ease) forwards; } @keyframes nrnReclaim{ 0%{opacity:.9;transform:translate(-50%,-50%) scale(.5)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)} } .finale-stat.nrn-flash .finale-stat__k{animation:nrnStatFlash 1.3s var(--ease)} @keyframes nrnStatFlash{ 0%,100%{text-shadow:none;transform:translateY(0)} 28%{text-shadow:0 0 26px var(--mint),0 0 6px var(--mint);transform:translateY(-3px)} } .clock-svg.nrn-reclaiming{filter:drop-shadow(0 0 34px rgba(168,229,211,0.8)) drop-shadow(0 18px 50px rgba(91,76,214,0.5)) !important;transition:filter .4s var(--ease)}