/* DoggoVPN — Mini App design tokens mirrored for the website account pages. Source of truth: services/webapp/src/index.css (keep in sync manually). Loaded AFTER base.css on account pages only — overrides the landing vars (--bg-card, --border, …) inside the account context with themed values. Theme switching: , set pre-paint by theme.js. */ /* ── Dark ── */ :root[data-theme="dark"] { --bg-page: #0A0A0A; --nav-bg: #141414; --bg-card: rgba(255, 255, 255, 0.05); --bg-card-hover: rgba(255, 255, 255, 0.08); --bg-elevated: rgba(255, 255, 255, 0.07); --bg-hover: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.06); --border-card: rgba(255, 255, 255, 0.12); --border-active: rgba(212, 168, 32, 0.5); --cta: #D4A820; --cta-hover: #E5B82A; --cta-text: #0A0A0A; --cta-glow: rgba(212, 168, 32, 0.2); --gold-gradient: linear-gradient(135deg, #B8941A 0%, #D4A820 30%, #F0CC38 50%, #D4A820 70%, #B8941A 100%); --gold-shimmer: linear-gradient(90deg, transparent 0%, rgba(212, 168, 32, 0.08) 50%, transparent 100%); --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.6); --text-muted: rgba(255, 255, 255, 0.35); --status-success: #14B8A6; --status-error: #E11D48; --status-warning: #F59E0B; --glass-bg: rgba(18, 18, 20, 0.75); --glass-blur: 20px; --glass-border: rgba(255, 255, 255, 0.1); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --mesh-1: rgba(212, 168, 32, 0.08); --mesh-2: rgba(99, 60, 180, 0.06); --mesh-3: rgba(20, 184, 166, 0.04); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px; --nav-height: 64px; --nav-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5); /* Legacy landing-var bridge: old account markup that still reads base.css names picks up themed values instead of cream/white. */ --bg: var(--bg-page); --bg-section: var(--bg-elevated); --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted); --gold: var(--cta); --gold-hover: var(--cta-hover); --gold-text: var(--cta-text); --gold-light: rgba(212, 168, 32, 0.10); --gold-border: rgba(212, 168, 32, 0.28); --green: var(--status-success); --red: var(--status-error); } /* ── Light ── */ :root[data-theme="light"] { --bg-page: #F5F5F0; --nav-bg: #FFFFFF; --bg-card: rgba(255, 255, 255, 0.7); --bg-card-hover: rgba(255, 255, 255, 0.85); --bg-elevated: rgba(255, 255, 255, 0.8); --bg-hover: rgba(0, 0, 0, 0.04); --border: rgba(0, 0, 0, 0.06); --border-card: rgba(0, 0, 0, 0.1); --border-active: rgba(180, 140, 20, 0.5); --cta: #C49A1A; --cta-hover: #B38A15; --cta-text: #FFFFFF; --cta-glow: rgba(196, 154, 26, 0.2); --gold-gradient: linear-gradient(135deg, #B38A15 0%, #C49A1A 40%, #D4A820 60%, #C49A1A 100%); --gold-shimmer: linear-gradient(90deg, transparent 0%, rgba(196, 154, 26, 0.1) 50%, transparent 100%); --text-primary: #1A1A1A; --text-secondary: rgba(0, 0, 0, 0.55); --text-muted: rgba(0, 0, 0, 0.35); --status-success: #0D9488; --status-error: #BE123C; --status-warning: #D97706; --glass-bg: rgba(255, 255, 255, 0.7); --glass-blur: 20px; --glass-border: rgba(0, 0, 0, 0.1); --glass-shadow: 0 2px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.05); --mesh-1: rgba(212, 168, 32, 0.07); --mesh-2: rgba(139, 92, 246, 0.05); --mesh-3: rgba(20, 184, 166, 0.04); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px; --nav-height: 64px; --nav-shadow: 0 -2px 24px rgba(0, 0, 0, 0.1); --bg: var(--bg-page); --bg-section: var(--bg-elevated); --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted); --gold: var(--cta); --gold-hover: var(--cta-hover); --gold-text: var(--cta-text); --gold-light: rgba(196, 154, 26, 0.10); --gold-border: rgba(196, 154, 26, 0.28); --green: var(--status-success); --red: var(--status-error); } /* ── Layout standards (theme-independent) ────────────────────────────── Block-height scale + spacing tokens for the главная / помощь sections. Single source of truth — retune a value here and every matching block follows. Not theme-scoped (heights don't change with theme). Height tiers ("эталоны" for the different block types): --block-h primary action / link row — renew CTA, key buttons, top-level FAQ summary, doc links. The main standard (70). --block-h-sm nested / secondary row — FAQ sub-items. */ :root { --block-h: 70px; --block-h-sm: 56px; /* Header horizontal padding. Doubles as the brand's left offset once the header collapses to left-aligned on narrow phones (<420px). */ --header-pad-x: 12px; /* Gap between label and price inside the renew CTA. Shrinks on narrow screens so "Продлить подписку" never wraps to two lines. */ --renew-gap: 40px; } /* ── Mini App animations ── */ @keyframes pulse-gold { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 32, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(212, 168, 32, 0); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes glow-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } } @keyframes app-spin { to { transform: rotate(360deg); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ── Mini App utility classes ── */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .glass-gold { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1.5px solid var(--border-active); box-shadow: var(--glass-shadow), 0 0 20px rgba(212, 168, 32, 0.08); } .gold-glow { position: relative; overflow: hidden; } .gold-glow::before { content: ''; position: absolute; inset: -2px; background: var(--gold-gradient); border-radius: inherit; z-index: -1; filter: blur(16px); opacity: 0.5; animation: glow-pulse 2.5s ease-in-out infinite; } .noise::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); pointer-events: none; } .gold-shimmer { background: var(--gold-shimmer); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; } .gradient-border { border: 1px solid var(--border-active); }