/* === main.css === */ /* === fonts.css === */ /* ═══════════════════════════════════════════════════════════════ CYNO.GG — Self-Hosted Google Fonts ═══════════════════════════════════════════════════════════════ Fonts: Manrope (400,500,600,700,800) + Sora (400,500,600,700) Format: WOFF2 (modern browsers) + WOFF fallback To fully self-host: 1. Download WOFF2 files from https://gwfh.mranftl.com/fonts 2. Place them in /public/assets/fonts/ 3. Uncomment the @font-face declarations below 4. Remove the Google Fonts from all HTML pages Until then, this file uses Google Fonts CDN with font-display: swap for optimal loading. ═══════════════════════════════════════════════════════════════ */ /* ── Manrope ──────────────────────────────────────────────────── */ /* Uncomment when files are downloaded: @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/manrope-regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/manrope-medium.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/manrope-semibold.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/manrope-bold.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/manrope-extrabold.woff2") format("woff2"); } */ /* ── Sora ─────────────────────────────────────────────────────── */ /* Uncomment when files are downloaded: @font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/sora-regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/sora-medium.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/sora-semibold.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/sora-bold.woff2") format("woff2"); } */ /* === base.css === */ /* Guest gating: elements marked [data-guest-hide] are member-only (menu, control hub, etc.). Hidden by default so guests never see a flash; revealed only once a non-guest role is confirmed on . Each target restores its own display value (revert would drop the flex layout). */ [data-guest-hide] { display: none !important; } body[data-user-role="member"] .top-nav[data-guest-hide], body[data-user-role="tester"] .top-nav[data-guest-hide], body[data-user-role="support"] .top-nav[data-guest-hide], body[data-user-role="admin"] .top-nav[data-guest-hide], body[data-user-role="owner"] .top-nav[data-guest-hide] { display: flex !important; } body[data-user-role="member"] .ctl-hub[data-guest-hide], body[data-user-role="tester"] .ctl-hub[data-guest-hide], body[data-user-role="support"] .ctl-hub[data-guest-hide], body[data-user-role="admin"] .ctl-hub[data-guest-hide], body[data-user-role="owner"] .ctl-hub[data-guest-hide] { display: inline-flex !important; } /* TEMP DEBUG: reveal guest-hidden chrome (menu + controls) when dev open-access is on, so gated pages are navigable without a login. Remove with the rest of the debug bypass. */ html.dev-open .top-nav[data-guest-hide] { display: flex !important; } html.dev-open .ctl-hub[data-guest-hide] { display: inline-flex !important; } :root { color-scheme: dark; --bg-0: #06080f; --bg-1: #0b1222; --bg-2: #101b30; --bg-3: #14203a; --glass-bg: rgba(16, 24, 40, 0.42); --glass-bg-strong: rgba(16, 24, 40, 0.65); --glass-border: rgba(160, 190, 230, 0.22); --glass-shadow: 0 18px 50px rgba(3, 8, 18, 0.5), 0 1px 0 rgba(255, 255, 255, 0.08); --glass-glow: 0 0 40px rgba(118, 224, 255, 0.2); --surface: rgba(12, 20, 36, 0.92); --surface-2: rgba(18, 28, 48, 0.88); --text: #eef3ff; --muted: #a8b9d4; --accent: #7bdcff; --accent-purple: #7c3aed; --blur-sm: 8px; --blur-md: 18px; --blur-lg: 28px; --blur-xl: 40px; --glass: var(--glass-bg); --glass-strong: var(--glass-bg-strong); --glass-soft: rgba(255, 255, 255, 0.04); --surface-strong: var(--surface-2); --overlay: rgba(8, 14, 26, 0.92); --blur-surface: var(--blur-md); --border-subtle: color-mix(in srgb, var(--glass-border) 70%, transparent); --border-strong: rgba(175, 206, 240, 0.32); --border-inner: rgba(255, 255, 255, 0.1); --border-glow: rgba(123, 220, 255, 0.35); --text-muted: var(--muted); --text-soft: #c8d5f2; --accent-2: #8de6d6; --accent-3: #d9b77a; --status-success: #6ee3b2; --status-warning: #f2c98f; --status-danger: #f09cb0; --status-muted: #8b97b2; /* Banner carousel component tokens */ --banner-card-width: 220px; --banner-card-width-mobile: 180px; --banner-aspect: 16 / 9; /* Spin wheel segment colors */ --wheel-1: #6ee7b7; --wheel-2: #3b82f6; --wheel-3: #f59e0b; --wheel-4: #ef4444; --wheel-5: #8b5cf6; --wheel-6: #10b981; --wheel-7: #f97316; --radius-xs: 12px; --radius-sm: 14px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 32px; --shadow-1: 0 10px 28px rgba(4, 10, 20, 0.32), 0 1px 2px rgba(4, 8, 14, 0.5); --shadow-2: 0 18px 52px rgba(3, 8, 18, 0.45), 0 2px 10px rgba(3, 7, 14, 0.6); --shadow-3: 0 30px 80px rgba(2, 6, 16, 0.5), 0 4px 18px rgba(3, 8, 18, 0.45); --shadow-glow: var(--glass-glow); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(4, 8, 16, 0.45); /* Liquid glass refraction system */ --liquid-refraction: linear-gradient( 135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%, rgba(123, 220, 255, 0.08) 60%, rgba(255, 255, 255, 0.12) 80%, rgba(255, 255, 255, 0.06) 100% ); --liquid-highlight: linear-gradient( 115deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 45% ); --liquid-caustic: radial-gradient( ellipse at 30% 20%, rgba(123, 220, 255, 0.2) 0%, transparent 50% ); --sb-size: 10px; --sb-track: rgba(16, 24, 40, 0.35); --sb-track-border: rgba(160, 190, 230, 0.10); --sb-thumb: rgba(123, 220, 255, 0.30); --sb-thumb-hover: rgba(123, 220, 255, 0.5); --sb-thumb-border: rgba(255, 255, 255, 0.22); --font-sans: "Manrope", system-ui, sans-serif; --font-display: "Sora", "Manrope", system-ui, sans-serif; --success: var(--status-success); --bg: var(--bg-0); --font-body: var(--font-sans); --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 1000; --z-modal: 1050; --z-toast: 9000; --z-tooltip: 9500; --z-captcha: 9200; --gap-sm: 8px; --gap-md: 12px; --gap-lg: 16px; --gap-xl: 20px; --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ── Button system tokens ── */ --btn-padding-xs: 3px 8px; --btn-padding-sm: 4px 10px; --btn-padding-base: 10px 17px; --btn-padding-lg: 14px 32px; --btn-padding-xl: 16px 40px; --btn-font-xs: 10px; --btn-font-sm: 11px; --btn-font-base: 13px; --btn-font-lg: 16px; --btn-font-xl: 18px; --btn-icon-size: 40px; --btn-icon-size-sm: 32px; --btn-icon-size-lg: 48px; --btn-shine-duration: 0.6s; --btn-glow-intensity: 0.25; --btn-glow-spread: 30px; --btn-transition-spring: cubic-bezier(0.16, 1, 0.3, 1); --btn-border-shimmer-speed: 3s; /* Button status color mixes */ --btn-success-bg: color-mix(in srgb, var(--status-success) 20%, transparent); --btn-success-border: color-mix(in srgb, var(--status-success) 45%, transparent); --btn-success-glow: color-mix(in srgb, var(--status-success) 25%, transparent); --btn-warning-bg: color-mix(in srgb, var(--status-warning) 20%, transparent); --btn-warning-border: color-mix(in srgb, var(--status-warning) 45%, transparent); --btn-warning-glow: color-mix(in srgb, var(--status-warning) 25%, transparent); --btn-danger-bg: color-mix(in srgb, var(--status-danger) 20%, transparent); --btn-danger-border: color-mix(in srgb, var(--status-danger) 45%, transparent); --btn-danger-glow: color-mix(in srgb, var(--status-danger) 25%, transparent); /* Toggle pill group tokens */ --toggle-pill-bg: color-mix(in srgb, var(--glass-bg-strong) 60%, transparent); --toggle-pill-border: color-mix(in srgb, var(--glass-border) 55%, transparent); --toggle-pill-btn-bg: color-mix(in srgb, var(--glass-bg) 50%, transparent); --toggle-pill-btn-active-bg: color-mix(in srgb, var(--accent) 15%, transparent); --toggle-pill-btn-active-border: color-mix(in srgb, var(--accent) 40%, transparent); /* Fluid typography — smooth scaling from mobile to desktop */ --fs-xs: clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem); --fs-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --fs-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --fs-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem); --fs-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); --fs-3xl: clamp(1.875rem, 1.5rem + 1.85vw, 3rem); } * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); } /* Custom cursor — only on devices with fine pointer + hover (desktop/laptop) */ @media (hover: hover) and (pointer: fine) { body.has-custom-cursor.is-cursor-enabled, body.has-custom-cursor.is-cursor-enabled *, body.has-custom-cursor.is-cursor-enabled *::before, body.has-custom-cursor.is-cursor-enabled *::after { cursor: none !important; } /* Custom cursor integration - Default: hide the native cursor everywhere (cursor: none) - Text caret: show only for actual text-entry fields - Keep native cursor hidden for controls (checkbox, radio, buttons, etc.) */ body.has-custom-cursor.is-cursor-enabled input:is( [type="text"], [type="email"], [type="password"], [type="search"], [type="url"], [type="tel"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"] ), body.has-custom-cursor.is-cursor-enabled textarea, body.has-custom-cursor.is-cursor-enabled [contenteditable="true"] { cursor: text !important; } /* Selects keep a NATIVE pointer cursor. The custom DOM cursor can't render over the OS-level