/* ============================================================================ Huntchy — shared design system (Spotlight) Loaded LAST in so it overrides each page's inline :root + base rules. Single source of truth for color, type, motion. No stray hex lives here twice. ========================================================================== */ :root{ /* —— Locked palette (brief §1) —— */ --ink:#06070F; /* darkest pool — page base / vignette */ --navy-900:#0B0D1A; --navy-800:#14132E; --panel:#12152A; --violet:#8B5CF6; --violet-lt:#9B6CF8; --magenta:#E0529C; --rose:#F0A6C8; --mint:#54C3A3; /* RESERVED — one learned-match signal only */ --white:#FFFFFF; --muted:#A9B1C7; --faint:#6B7390; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14); /* —— Derived soft / glow tints —— */ --violet-soft:rgba(139,92,246,.12); --violet-glow:rgba(139,92,246,.34); --magenta-soft:rgba(224,82,156,.12); --magenta-glow:rgba(224,82,156,.30); --mint-soft:rgba(84,195,163,.12); /* —— Headline accent gradient (static, ends saturated on magenta) —— */ --grad-accent:linear-gradient(100deg,#9B6CF8 0%,#E0529C 58%,#F0A6C8 74%,#E0529C 100%); --grad-cta:linear-gradient(100deg,var(--violet),var(--magenta)); /* —— Legacy token aliases → new values (so every page reskins at once) —— */ --bg:var(--ink); --bg-2:var(--navy-900); --surf:var(--panel); --surf-2:var(--navy-800); --ink-2:var(--navy-800); --text:#E8EAF2; /* legacy dim/grey were too dark on dark — lift to a readable ~5.3:1 secondary */ --muted-2:var(--faint); --dim:#7E879D; --grey:#828BA0; --blue:var(--magenta); --blue-soft:var(--magenta-soft); --blue-glow:var(--magenta-glow); --match:var(--violet); --match-soft:var(--violet-soft); --match-glow:var(--violet-glow); --green:var(--violet); --cyan:var(--violet-lt); --gold:var(--rose); --amber:#E6B15C; --amber-soft:rgba(230,177,92,.12); /* —— Type system (brief §1) —— */ --font-display:"Bricolage Grotesque","Inter",-apple-system,BlinkMacSystemFont,sans-serif; --font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* —— Radii + 2-step shadow scale (brief §5.7) —— */ --radius-sm:10px; --radius:14px; --radius-lg:18px; --r:18px; --shadow-1:0 2px 10px rgba(0,0,0,.35); --shadow-2:0 22px 55px -26px rgba(0,0,0,.82); --ease:cubic-bezier(.3,.8,.3,1); } /* ——— Base: near-black with off-center pools + edge vignette (brief §2) ——— */ body{ font-family:var(--font-body); background-color:var(--ink); background-image: radial-gradient(120% 80% at 50% -12%, rgba(139,92,246,.11), transparent 55%), radial-gradient(90% 60% at 86% 112%, rgba(224,82,156,.08), transparent 55%), radial-gradient(140% 115% at 50% 42%, transparent 44%, rgba(6,7,15,.58) 100%); background-attachment:fixed; } /* Fine grain to kill gradient banding (brief §2). ~4.5%, overlay blend. */ body::after{ content:"";position:fixed;inset:0;z-index:3;pointer-events:none; opacity:.045;mix-blend-mode:overlay; 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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ——— Type roles ——— */ h1,h2,h3,.section h2,.trust h2,.faq h2,.hero h1,.about-hero h1,.blog-hero h1{ font-family:var(--font-display); } .nav .brand b,.fbrand .lgrow b{font-family:var(--font-display);letter-spacing:-.02em} /* Mono signals "data/engine": eyebrows, kickers, data ticks, footer line */ .kick,.cc .ct,.post .pt,.fcol h4,.fbot,.mr-status,.net-lab,.plan .rib,.eyebrow{ font-family:var(--font-mono); } /* Optical caps spacing on the eyebrow-shaped ones only (not the footer sentence) */ .kick,.cc .ct,.post .pt,.fcol h4,.net-lab,.plan .rib,.eyebrow{ text-transform:uppercase;letter-spacing:.14em; } /* ——— Headline accent gradient — static, clipped to text (brief §2) ——— */ h1 .g,h2 .g,.hero .g,.about-hero .g,.g{ background:var(--grad-accent); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ——— Micro-details (brief §5) ——— */ ::selection{background:rgba(139,92,246,.32);color:#fff} :focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:3px} .num,.mr-bv,.plan .pp,.price-grid .pp,[data-count]{font-variant-numeric:tabular-nums} :target{scroll-margin-top:92px} h1[id],h2[id],h3[id],section[id],[id^="p-"]{scroll-margin-top:92px} hr,.divider{border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),transparent)} /* ——— Scroll-aware nav (brief §4): transparent over hero → frosted on scroll ——— */ .nav{ background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom:1px solid transparent; transition:background .25s var(--ease),backdrop-filter .25s var(--ease),border-color .25s var(--ease); } .nav.scrolled{ background:rgba(6,7,15,.72); backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%); border-bottom-color:var(--line); } /* Nav links: gradient underline grows from left; color lifts to white */ .nav .links a{position:relative;transition:color .18s ease-out} .nav .links a::after{ content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--violet),var(--magenta)); transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out; } .nav .links a:hover{color:var(--white)} .nav .links a:hover::after{transform:scaleX(1)} .nav .links a.on::after{display:none} /* ——— Language toggle (PT | EN) ——— */ .lang-toggle{display:inline-flex;align-items:center;gap:1px;padding:3px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);font-family:var(--font-mono)} .lang-toggle a{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--faint);padding:4px 8px;border-radius:6px;text-decoration:none;line-height:1;transition:color .18s ease-out,background .18s ease-out} .lang-toggle a:hover{color:var(--white)} .lang-toggle a[aria-current="true"]{color:var(--white);background:linear-gradient(100deg,var(--violet),var(--magenta))} /* ——— Primary CTA: violet→magenta, lift + glow + arrow nudge (brief §3) ——— */ .nav .cta,.btn.prime,.plan.feat .pbtn{ background:var(--grad-cta);color:var(--white);border-color:transparent; box-shadow:0 6px 20px -6px var(--violet-glow); transition:transform .18s ease-out,box-shadow .18s ease-out,filter .18s ease-out; } .nav .cta:hover,.btn.prime:hover,.plan.feat .pbtn:hover{ transform:translateY(-2px);box-shadow:0 13px 32px -8px var(--violet-glow);filter:brightness(1.06); } .nav .cta:active,.btn.prime:active,.plan.feat .pbtn:active{transform:translateY(0)} .arw{display:inline-block;transition:transform .18s ease-out} .nav .cta:hover .arw,.btn.prime:hover .arw{transform:translateX(3px)} /* ——— Ghost / secondary CTA: border → violet, faint inner glow (brief §3) ——— */ .btn:not(.prime){ transition:transform .18s ease-out,border-color .18s ease-out,box-shadow .18s ease-out,background .18s ease-out; } .btn:not(.prime):hover{ transform:translateY(-2px);border-color:var(--violet); box-shadow:inset 0 0 18px rgba(139,92,246,.12); } /* ——— Contrast cards: lift, border→violet, top-left glow pool (brief §3) ——— */ .cc{ position:relative;overflow:hidden; transition:transform .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out; } .cc::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(380px 240px at 0% 0%,rgba(139,92,246,.16),transparent 70%); opacity:0;transition:opacity .2s ease-out; } .cc:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.45);box-shadow:var(--shadow-2)} .cc:hover::before{opacity:1} /* Winning (Huntchy) card glows a touch stronger */ .cc.h::before{background:radial-gradient(420px 260px at 0% 0%,rgba(139,92,246,.24),transparent 70%)} .cc.h:hover{border-color:rgba(139,92,246,.6)} /* The single sanctioned mint signal — learned-match tick on the Huntchy card */ .learned{ display:flex;align-items:center;gap:7px;margin-top:14px; font-family:var(--font-mono);font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:.1em;color:var(--mint); } .learned svg{width:14px;height:14px;flex:none} /* ——— Logo: sonar rings speed up on hover (brief §3) ——— */ .brand:hover .mk .r,.brand:hover .mk .r2,.brand:hover .mk .d{animation-duration:1.55s} /* ——— Reveal-on-scroll (brief §4) ——— */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s ease-out} .reveal.in{opacity:1;transform:none} /* ——— Hero beam + orbs (parallax driven by JS) ——— */ .hero{position:relative} .beam,.orb{position:absolute;pointer-events:none;z-index:0;will-change:transform} .beam{ top:-120px;left:50%;width:520px;height:660px;max-width:120vw;transform:translateX(-50%); background: radial-gradient(ellipse 34% 42% at 50% 30%, rgba(139,92,246,.30), transparent 62%), radial-gradient(ellipse 26% 50% at 50% 60%, rgba(224,82,156,.20), transparent 60%); filter:blur(34px); } .orb{width:300px;height:300px;border-radius:50%;filter:blur(60px);opacity:.5} .orb-a{top:40px;left:-60px;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 70%)} .orb-b{top:160px;right:-70px;background:radial-gradient(circle,rgba(224,82,156,.42),transparent 70%)} .hero>*:not(.beam):not(.orb){position:relative;z-index:1} /* Scroll-progress bar (brief §4, optional/tasteful) — injected by JS */ #hc-progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:60; background:linear-gradient(90deg,var(--violet),var(--magenta)); transition:width .08s linear; } /* ——— Reduced motion: disable ALL motion; static page stays complete (brief §5.8) ——— */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } html{scroll-behavior:auto !important} .reveal{opacity:1 !important;transform:none !important} .beam,.orb,#hc-progress{display:none !important} .mk .r,.mk .r2,.mk .d{animation:none !important} }