/* ========================================================================== CC AntiCheat — Core (v5) Design tokens, base layer, ambient background, buttons, motion system. Performance rules used throughout this file: 1. Animate ONLY transform + opacity. 2. Never animate an element that carries filter / backdrop-filter. 3. backdrop-filter is used exactly once (navbar), nowhere else. 4. No animated background-position, no blur() on moving layers. ========================================================================== */ :root { /* --- surfaces ------------------------------------------------------ */ --bg: #05080f; --bg-soft: #0a1220; --bg-deep: #03060c; --panel: rgba(12, 21, 36, 0.72); --panel-solid: #0a1322; --panel-2: rgba(17, 29, 49, 0.82); /* --- hairlines ----------------------------------------------------- */ --line: rgba(118, 170, 255, 0.11); --line2: rgba(118, 170, 255, 0.17); --line-strong: rgba(118, 176, 255, 0.28); /* --- text ---------------------------------------------------------- */ --text: #eaf1fb; --text-dim: #c3d3e8; --muted: #92a6c3; --muted-2: #6a819f; --muted2: #6a819f; /* --- brand --------------------------------------------------------- */ --blue: #2e7bff; --blue-bright: #63aaff; --blue-soft: rgba(46, 123, 255, 0.12); --blue-dim: rgba(46, 123, 255, 0.09); --cyan: #4bd5ff; /* --- semantic status ----------------------------------------------- */ --green: #3ddca1; --yellow: #ffc861; --red: #ff6b81; /* --- gradients & shadows ------------------------------------------- */ --gradient-brand: linear-gradient(135deg, #4bd5ff 0%, #2e7bff 54%, #5b6cff 100%); --gradient-text: linear-gradient(104deg, #ffffff 0%, #a9ceff 46%, #55dfff 100%); --shadow: 0 24px 60px rgba(0, 0, 0, 0.42); --shadow-blue: 0 20px 50px rgba(20, 84, 190, 0.16); /* --- geometry ------------------------------------------------------ */ --radius: 20px; --radius-sm: 13px; --max: 1200px; /* --- type ---------------------------------------------------------- */ --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif; --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* --- aliases (used by panel/auth/legal stylesheets) ----------------- */ --surface: var(--panel-solid); --surface2: #0d1a2e; --border: var(--line); --border2: var(--line-strong); /* --- motion -------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.68, 0.24, 1); --fast: 160ms; --med: 260ms; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg-deep); scroll-behavior: smooth; /* sticky navbar clearance for #anchor jumps */ scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; /* clip (not hidden) — hidden turns into a scroll container and breaks position: sticky on the navbar */ overflow-x: clip; color: var(--text); background: var(--bg-deep); font-family: var(--font); font-size: 16px; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { -webkit-tap-highlight-color: transparent; } img { display: block; max-width: 100%; } svg { display: block; } h1, h2, h3, h4 { margin-top: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; } p { margin-top: 0; } ::selection { color: #041020; background: rgba(99, 170, 255, 0.85); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { border: 3px solid var(--bg-deep); border-radius: 999px; background: #1b2c48; } ::-webkit-scrollbar-thumb:hover { background: #27456f; } :focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; } /* ========================================================================== Ambient background Three DOM nodes total. Base, grid and vignette are painted once and never move. Only the two aura blobs animate — transform + opacity, no blur filter (the radial gradient already provides the softness for free). ========================================================================== */ #cc-live-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint style; background: radial-gradient(1100px 620px at 50% -12%, rgba(43, 122, 255, 0.16), transparent 62%), radial-gradient(900px 700px at 92% 8%, rgba(75, 213, 255, 0.06), transparent 60%), linear-gradient(180deg, #050a15 0%, #050c18 45%, #03060d 100%); } /* grid — static */ #cc-live-background::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(120, 175, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 175, 255, 0.055) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(115% 78% at 50% 0%, #000 12%, rgba(0, 0, 0, 0.35) 55%, transparent 88%); mask-image: radial-gradient(115% 78% at 50% 0%, #000 12%, rgba(0, 0, 0, 0.35) 55%, transparent 88%); } /* vignette — static */ #cc-live-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 5, 12, 0.42), transparent 20%, transparent 76%, rgba(2, 5, 12, 0.48)), radial-gradient(circle at 50% 42%, transparent 42%, rgba(2, 5, 12, 0.34) 100%); } .cc-aura { position: absolute; width: 780px; height: 780px; border-radius: 50%; will-change: transform, opacity; } .cc-aura-a { top: -34%; left: -14%; background: radial-gradient(circle, rgba(30, 104, 255, 0.34) 0%, rgba(30, 104, 255, 0.11) 38%, transparent 68%); animation: cc-aura-a 34s ease-in-out infinite alternate; } .cc-aura-b { bottom: -40%; right: -16%; background: radial-gradient(circle, rgba(58, 190, 255, 0.20) 0%, rgba(58, 190, 255, 0.07) 40%, transparent 68%); animation: cc-aura-b 44s ease-in-out infinite alternate; } @keyframes cc-aura-a { from { transform: translate3d(0, 0, 0); opacity: 0.72; } to { transform: translate3d(180px, 120px, 0); opacity: 1; } } @keyframes cc-aura-b { from { transform: translate3d(0, 0, 0); opacity: 1; } to { transform: translate3d(-160px, -130px, 0); opacity: 0.7; } } /* particle network — sits above the auras, below the vignette */ .cc-particles { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* cursor glow — a single composited layer moved with transform only */ .cc-mouse-glow { position: absolute; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(46, 123, 255, 0.11) 0%, rgba(75, 213, 255, 0.04) 36%, transparent 68%); transform: translate3d(-9999px, -9999px, 0); transition: opacity 520ms var(--ease); will-change: transform; } .cc-mouse-glow.is-live { opacity: 1; } /* everything else sits above the background */ body > *:not(#cc-live-background) { position: relative; z-index: 1; } .site-wrap, .wrap, .cc-shell, .auth-page, .legal-shell { position: relative; z-index: 1; } /* ========================================================================== Brand + labels ========================================================================== */ .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { width: 34px; height: 34px; object-fit: contain; } .brand-word { white-space: nowrap; color: #f4f9ff; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; } .brand-word b { color: var(--blue-bright); font-weight: inherit; } .eyebrow, .cc-badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; border: 1px solid var(--line2); border-radius: 999px; background: var(--blue-dim); color: #a8ceff; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .eyebrow { padding: 6px 13px; } .cc-badge { padding: 5px 9px; } .cc-badge.green { border-color: rgba(61, 220, 161, 0.38); background: rgba(61, 220, 161, 0.11); color: #7ce9c1; box-shadow: 0 0 18px rgba(61, 220, 161, 0.14); } .cc-badge.inactive { border-color: rgba(148, 163, 184, 0.16); background: rgba(148, 163, 184, 0.06); color: #7f8b9d; box-shadow: none; } /* pulse — scaling pseudo ring instead of an animated box-shadow (no repaint) */ .pulse, .status-pulse { position: relative; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--cyan); } .pulse::after, .status-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: cc-pulse 2.4s var(--ease) infinite; } @keyframes cc-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(3.4); opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } } .gradient { color: transparent; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; } /* ========================================================================== Buttons backdrop-filter deliberately removed here: these appear dozens of times per page and each one forced a re-blur of the animated background behind it. ========================================================================== */ .button, .nav-btn, .cc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(13, 24, 42, 0.9); color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .button:hover, .nav-btn:hover, .cc-btn:hover { transform: translateY(-2px); border-color: rgba(120, 185, 255, 0.5); background: rgba(21, 39, 66, 0.95); box-shadow: 0 10px 26px rgba(6, 14, 28, 0.5); } .button:active, .nav-btn:active, .cc-btn:active { transform: translateY(0); } .button.primary, .nav-btn-primary, .cc-btn.primary { border-color: transparent; background: var(--gradient-brand); color: #041020; font-weight: 700; box-shadow: 0 10px 28px rgba(32, 108, 235, 0.28); overflow: hidden; } /* brighter gradient on hover instead of filter: brightness() — a filter would force the whole button (and the background behind it) to be re-rendered */ .button.primary:hover, .nav-btn-primary:hover, .cc-btn.primary:hover { border-color: transparent; background: linear-gradient(135deg, #6fe2ff 0%, #4b93ff 54%, #7686ff 100%); box-shadow: 0 16px 36px rgba(32, 108, 235, 0.38); } .button.ghost { background: rgba(8, 15, 28, 0.6); border-color: var(--line2); color: var(--text-dim); } .button.danger, .cc-btn.danger { border-color: rgba(255, 107, 129, 0.3); background: rgba(255, 107, 129, 0.08); color: #ffa8b6; } .button.danger:hover, .cc-btn.danger:hover { border-color: rgba(255, 107, 129, 0.55); background: rgba(255, 107, 129, 0.14); } /* ========================================================================== Motion system ========================================================================== */ /* Reveals are only hidden once JS is confirmed alive (html.cc-motion), so the page can never end up permanently invisible if the script fails to load. */ .cc-motion .cc-reveal { opacity: 0; transform: translate3d(0, 20px, 0); } .cc-motion .cc-reveal.is-ready { transition: opacity 620ms var(--ease) var(--reveal-delay, 0ms), transform 620ms var(--ease) var(--reveal-delay, 0ms); } .cc-motion .cc-reveal.is-visible { opacity: 1; transform: none; } /* 3D tilt target. The float animation lives on a separate wrapper element so the two transforms can no longer overwrite each other. */ [data-tilt] { transform: perspective(1300px) rotateX(var(--tilt-x, 1.6deg)) rotateY(var(--tilt-y, -5deg)); transform-style: preserve-3d; transition: transform 300ms var(--ease); } [data-tilt]::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(460px circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(120, 205, 255, 0.11), transparent 48%); transition: opacity var(--med) var(--ease); } [data-tilt]:hover::after { opacity: 1; } @keyframes cc-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } @keyframes cc-rise-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } } @keyframes cc-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Freeze every looping animation while the tab is in the background. */ .cc-paused *, .cc-paused *::before, .cc-paused *::after { animation-play-state: paused !important; } /* ========================================================================== Responsive + accessibility ========================================================================== */ @media (max-width: 860px) { .cc-aura { width: 520px; height: 520px; } .cc-mouse-glow { display: none; } #cc-live-background::before { background-size: 48px 48px; } [data-tilt] { transform: none; } } /* The OS preference is the default. Every selector here is scoped to :not(.cc-force-motion) so a visitor can deliberately opt back in via CC_EFFECTS.setMotion("on") — and if the script never runs, the class is never set and the accessible behaviour still applies. */ @media (prefers-reduced-motion: reduce) { html:not(.cc-force-motion) { scroll-behavior: auto; } html:not(.cc-force-motion) *, html:not(.cc-force-motion) *::before, html:not(.cc-force-motion) *::after { animation-duration: 0.001ms !important; animation-delay: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0.001ms !important; } html:not(.cc-force-motion) .cc-aura { animation: none !important; } /* the particle field is still painted, just once and without movement — so the page keeps its texture instead of going flat */ html:not(.cc-force-motion) .cc-mouse-glow { display: none !important; } html:not(.cc-force-motion).cc-motion .cc-reveal { opacity: 1; transform: none; } } @media print { body { color: #000; background: #fff; } #cc-live-background { display: none !important; } }