/* * BlockBuster VPN — Design Tokens (Cinematic edition) * ────────────────────────────────────────────────────────────── * Единый источник правды для цветов, типографики, радиусов, * теней и motion-токенов. Tone — "Hollywood blockbuster / * космический": deep-space bg, aurora glows, electric cyan * accents поверх фирменного deep-sea navy и mint. * * По умолчанию — dark (cosmic). `.theme-light` на даёт * классический светлый набор (используется на админ-панели и * reset-password странице). * * Android Compose держит зеркальный Color.kt с теми же hex. * Если меняете токены — синхронизируйте: * apps/android_hy2_client/app/src/main/java/us/leaf3stones/hy2droid/ui/theme/Color.kt */ :root { color-scheme: dark light; /* ── Brand core ───────────────────────────────────────── */ --bb-primary: #0D3B66; /* DeepSea */ --bb-primary-mid: #1B6CA8; /* Harbor */ --bb-primary-deep: #06213F; /* Deep navy для hover / корней */ --bb-accent: #29C7AC; /* Mint — brand accent */ --bb-accent-deep: #1F9D73; /* Mint-dark */ --bb-accent-bright: #3FEFD3; /* Neon mint */ --bb-accent-tint: rgba(41, 199, 172, 0.14); /* ── Cinematic accents ────────────────────────────────── */ --bb-cyan: #00D9FF; /* Electric cyan — spotlight */ --bb-cyan-tint: rgba(0, 217, 255, 0.14); --bb-aurora: #7B5CFF; /* Aurora purple */ --bb-aurora-tint: rgba(123, 92, 255, 0.18); --bb-rose: #FF5A8C; /* Nebula rose */ --bb-rose-tint: rgba(255, 90, 140, 0.14); --bb-gold: #FFD76A; /* Golden-hour flare */ /* ── Semantic ─────────────────────────────────────────── */ --bb-success: #1F9D73; --bb-success-tint: rgba(31, 157, 115, 0.18); --bb-danger: #FF6B7A; --bb-danger-tint: rgba(255, 107, 122, 0.16); --bb-danger-ring: rgba(255, 107, 122, 0.42); --bb-warning: #FFB547; --bb-warning-tint: rgba(255, 181, 71, 0.16); /* ── Surfaces / ink (dark cosmic default) ─────────────── */ --bb-ink: #EEF4FF; /* star white — основной текст */ --bb-ink-soft: #D8E1F3; --bb-muted: #8FA3C2; /* secondary text — 4.6:1 на #0B1328 */ --bb-bg: #050814; /* deep space */ --bb-bg-mid: #0B1328; /* galactic sky */ --bb-bg-glow: #121E3C; /* nebula core */ --bb-surface: rgba(18, 30, 56, 0.62); --bb-surface-strong: rgba(22, 36, 64, 0.88); --bb-surface-glass: rgba(14, 24, 46, 0.72); --bb-input-bg: rgba(10, 20, 40, 0.82); --bb-stroke: rgba(139, 169, 210, 0.20); --bb-stroke-soft: rgba(91, 125, 172, 0.14); --bb-stroke-strong: rgba(170, 198, 236, 0.28); /* ── Highlights / rings ───────────────────────────────── */ --bb-accent-ring: rgba(63, 239, 211, 0.55); --bb-cyan-ring: rgba(0, 217, 255, 0.55); /* ── Gradients ────────────────────────────────────────── */ --bb-grad-primary: linear-gradient(135deg, #00D9FF 0%, #3FEFD3 45%, #29C7AC 100%); --bb-grad-primary-deep: linear-gradient(135deg, #1FB0C9 0%, #29C7AC 55%, #1F9D73 100%); --bb-grad-aurora: linear-gradient(135deg, #7B5CFF 0%, #00D9FF 55%, #29C7AC 100%); --bb-grad-nebula: radial-gradient(60% 80% at 30% 30%, rgba(123, 92, 255, 0.35), transparent 70%), radial-gradient(50% 70% at 80% 20%, rgba(0, 217, 255, 0.25), transparent 72%), radial-gradient(60% 80% at 70% 90%, rgba(41, 199, 172, 0.22), transparent 70%); --bb-grad-panel: linear-gradient(180deg, rgba(28, 44, 80, 0.72) 0%, rgba(12, 22, 42, 0.88) 100%); --bb-grad-text: linear-gradient(120deg, #EEF4FF 0%, #3FEFD3 40%, #00D9FF 80%); --bb-grad-text-aurora: linear-gradient(120deg, #B9A9FF 0%, #3FEFD3 45%, #00D9FF 90%); --bb-grad-border: conic-gradient(from 140deg at 50% 50%, rgba(123, 92, 255, 0.0) 0deg, rgba(0, 217, 255, 0.65) 90deg, rgba(63, 239, 211, 0.55) 160deg, rgba(0, 217, 255, 0.0) 230deg, rgba(123, 92, 255, 0.0) 360deg); /* ── Radius ───────────────────────────────────────────── */ --bb-r-xs: 6px; --bb-r-sm: 10px; --bb-r-md: 18px; --bb-r-lg: 26px; --bb-r-xl: 36px; --bb-r-2xl: 48px; --bb-r-pill: 999px; /* ── Elevation / shadows (glow-first для dark theme) ──── */ --bb-shadow-1: 0 8px 24px rgba(0, 0, 0, 0.35); --bb-shadow-2: 0 20px 42px rgba(0, 0, 0, 0.45); --bb-shadow-3: 0 36px 72px rgba(0, 0, 0, 0.55); --bb-shadow-cta: 0 16px 36px rgba(41, 199, 172, 0.30), 0 0 40px rgba(0, 217, 255, 0.22); --bb-shadow-cta-strong: 0 22px 44px rgba(41, 199, 172, 0.45), 0 0 56px rgba(0, 217, 255, 0.32); --bb-glow-cyan: 0 0 32px rgba(0, 217, 255, 0.55); --bb-glow-mint: 0 0 36px rgba(41, 199, 172, 0.45); --bb-glow-aurora: 0 0 48px rgba(123, 92, 255, 0.38); --bb-glow-rose: 0 0 42px rgba(255, 90, 140, 0.32); /* ── Typography ───────────────────────────────────────── */ --bb-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bb-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --bb-font-display: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bb-tracking-tight: -0.04em; --bb-tracking-display: -0.055em; --bb-tracking-wide: 0.14em; /* ── Spacing ──────────────────────────────────────────── */ --bb-sp-1: 4px; --bb-sp-2: 8px; --bb-sp-3: 12px; --bb-sp-4: 16px; --bb-sp-5: 24px; --bb-sp-6: 32px; --bb-sp-7: 48px; --bb-sp-8: 64px; --bb-sp-9: 96px; /* ── Touch targets ────────────────────────────────────── */ --bb-tap-min: 44px; /* WCAG 2.5.5 */ /* ── Focus ring (виден на dark и на bright одинаково) ─── */ --bb-focus-ring: 0 0 0 3px rgba(0, 217, 255, 0.6), 0 0 0 5px rgba(11, 19, 40, 0.85); /* ── Motion ───────────────────────────────────────────── */ --bb-dur-xs: 120ms; --bb-dur-sm: 200ms; --bb-dur-md: 360ms; --bb-dur-lg: 640ms; --bb-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --bb-ease-in: cubic-bezier(0.55, 0.09, 0.68, 0.53); --bb-ease-inout: cubic-bezier(0.76, 0, 0.24, 1); --bb-ease-bounce: cubic-bezier(0.2, 1.4, 0.4, 1); } /* ── Light theme override ──────────────────────────────── Админ-панель и reset-password используют классический light: добавьте class="theme-light" на . Остальные поверхности живут в cosmic dark. */ .theme-light { color-scheme: light; --bb-ink: #0A1428; --bb-ink-soft: #12243E; --bb-muted: #5E7087; --bb-bg: #F4F8FC; --bb-bg-mid: #E8EFF8; --bb-bg-glow: #DCE7F4; --bb-surface: rgba(255, 255, 255, 0.92); --bb-surface-strong: #FFFFFF; --bb-surface-glass: rgba(255, 255, 255, 0.78); --bb-input-bg: #FFFFFF; --bb-stroke: rgba(191, 209, 226, 0.72); --bb-stroke-soft: rgba(227, 236, 245, 0.92); --bb-stroke-strong: rgba(148, 176, 206, 0.55); --bb-shadow-1: 0 6px 16px rgba(16, 36, 61, 0.06); --bb-shadow-2: 0 16px 32px rgba(16, 36, 61, 0.08); --bb-shadow-3: 0 26px 48px rgba(16, 36, 61, 0.10); --bb-shadow-cta: 0 18px 32px rgba(31, 157, 115, 0.24); --bb-shadow-cta-strong: 0 22px 42px rgba(31, 157, 115, 0.34); --bb-grad-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 249, 253, 0.96) 100%); --bb-grad-text: linear-gradient(120deg, #0D3B66 0%, #1F9D73 55%, #29C7AC 100%); --bb-focus-ring: 0 0 0 3px rgba(41, 199, 172, 0.42); } /* ── Common resets ───────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--bb-font-sans); color: var(--bb-ink); background: var(--bb-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Global focus ring — читается на dark и на bright одинаково. */ :focus-visible { outline: none; box-shadow: var(--bb-focus-ring); border-radius: var(--bb-r-sm); } /* Reduce motion: отключаем анимированные поверхности и aurora drift. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Утилита: текст с градиентной заливкой. Fallback — ink. */ .grad-text { color: var(--bb-ink); background: var(--bb-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } .grad-text-aurora { color: var(--bb-ink); background: var(--bb-grad-text-aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } /* Селективная доступность: скрываем визуально, читаем SR */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }