/* Слоняра VPN — design system, v2. Functional minimalism: flat surfaces, crisp hairline borders, a disciplined type/spacing scale, restrained accent use, and quiet micro-interactions instead of blur/glow/motion noise. 3 themes ("1" blue/default, "2" iris/violet, "3" emerald/teal) × 2 brightness (dark/light), selected via [data-theme]/[data-brightness] on , set server-side from cookies (see base.html) to avoid a flash of the wrong theme on first paint. The admin panel never sets these attributes, so it always renders on the bare :root (theme 1 dark) defaults below. */ * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; margin: 0; padding: 0; } /* ─── Theme 1 (blue, default) — dark ─── */ :root { --bg: #0b0d10; --bg-soft: #101317; --card: #14171c; --card-hover: #191d23; --glass: #14171c; --field-bg: #0e1013; --hover-overlay: rgba(255, 255, 255, 0.04); --border: #22262c; --text: #f5f6f7; --text-soft: #b8bec6; --text-dim: #767d87; --accent: #4f8ef7; --accent-dark: #3568c4; --accent-glow: rgba(79, 142, 247, 0.12); --warn: #f5a153; --danger: #f2555a; --success: #2fbf87; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.22); --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ─── Theme 1 — light ─── */ [data-theme="1"][data-brightness="light"] { --bg: #fafafb; --bg-soft: #ffffff; --card: #ffffff; --card-hover: #f4f5f7; --glass: #ffffff; --field-bg: #f2f3f5; --hover-overlay: rgba(15, 20, 25, 0.035); --border: #e4e6ea; --text: #14171c; --text-soft: #4a5058; --text-dim: #868d96; --accent: #3568c4; --accent-dark: #274d94; --accent-glow: rgba(53, 104, 196, 0.08); --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.05); --shadow-md: 0 8px 24px rgba(20, 23, 28, 0.08); } /* ─── Theme 2 "Ирис" (violet/indigo) — dark ─── */ [data-theme="2"] { --bg: #0c0b12; --bg-soft: #121018; --card: #17141f; --card-hover: #1c1926; --glass: #17141f; --field-bg: #100e16; --hover-overlay: rgba(255, 255, 255, 0.04); --border: #262231; --text: #f5f4f7; --text-soft: #c2bdd0; --text-dim: #7d7690; --accent: #8b7cf6; --accent-dark: #6a5ad1; --accent-glow: rgba(139, 124, 246, 0.14); --warn: #f5a866; --danger: #f2607a; --success: #35d29a; } /* ─── Theme 2 — light ─── */ [data-theme="2"][data-brightness="light"] { --bg: #faf9fc; --bg-soft: #ffffff; --card: #ffffff; --card-hover: #f4f2f9; --glass: #ffffff; --field-bg: #f1eef8; --hover-overlay: rgba(20, 16, 30, 0.035); --border: #e6e1f0; --text: #17141f; --text-soft: #4d465c; --text-dim: #857d95; --accent: #6a5ad1; --accent-dark: #52439f; --accent-glow: rgba(106, 90, 209, 0.08); } /* ─── Theme 3 "Изумруд" (teal/emerald) — dark ─── */ [data-theme="3"] { --bg: #08120f; --bg-soft: #0c1815; --card: #101f1a; --card-hover: #142720; --glass: #101f1a; --field-bg: #0a1512; --hover-overlay: rgba(255, 255, 255, 0.04); --border: #1c322a; --text: #f2f7f5; --text-soft: #b9d4ca; --text-dim: #74968a; --accent: #22c99a; --accent-dark: #199c78; --accent-glow: rgba(34, 201, 154, 0.14); --warn: #f0ab5f; --danger: #f2555a; --success: #2fbf87; } /* ─── Theme 3 — light ─── */ [data-theme="3"][data-brightness="light"] { --bg: #f8fbfa; --bg-soft: #ffffff; --card: #ffffff; --card-hover: #f0f8f5; --glass: #ffffff; --field-bg: #eef7f3; --hover-overlay: rgba(8, 25, 20, 0.035); --border: #dcefe7; --text: #08201a; --text-soft: #3d5c52; --text-dim: #7a9a8f; --accent: #199c78; --accent-dark: #147a5f; --accent-glow: rgba(25, 156, 120, 0.08); } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; } /* Quiet, consistent motion everywhere an element can react to input. */ a, button, input, select, .card, .sub-card, .tariff-card, .bottom-nav-link, .header-link, .platform-tab, .theme-swatch { transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease), opacity 150ms var(--ease); } /* Accessible, visible keyboard focus — same treatment everywhere, accent-colored ring. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .sub-card:focus-visible, .tariff-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ─── Layout ─── */ .page { max-width: 720px; margin: 0 auto; padding: var(--space-8) var(--space-5) 120px; } .page-wide { max-width: 1080px; } /* ─── Site header — flat, quiet, desktop-appropriate ─── */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .nav-logo { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--text); display: flex; align-items: center; gap: var(--space-2); } .nav-logo img { width: 26px; height: 26px; border-radius: 7px; } .header-actions { display: flex; align-items: center; gap: var(--space-2); } .header-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .header-link .icon { width: 15px; height: 15px; } .header-link:hover { background: var(--card-hover); color: var(--text); } .header-balance { background: var(--accent-glow); padding: 6px 13px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700; color: var(--accent); white-space: nowrap; } /* ─── Bottom nav — authenticated only. The one deliberately expressive shape in an otherwise flat system: a compact floating dock, solid surface, crisp border, quiet shadow. No blur. ─── */ .bottom-nav { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 2px; padding: 6px; background: var(--card); border-radius: var(--radius-pill); border: 1px solid var(--border); box-shadow: var(--shadow-md); } .bottom-nav-link { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 18px; border-radius: var(--radius-pill); color: var(--text-dim); font-size: 10.5px; font-weight: 600; min-width: 58px; } .bottom-nav-link .icon { width: 19px; height: 19px; } .bottom-nav-link:hover { color: var(--text); background: var(--hover-overlay); } .bottom-nav-link.active { background: var(--accent-glow); color: var(--accent); } /* ─── Header block (auth screens, empty states) ─── */ .header-center { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--space-6); } .header-center img { width: 60px; height: 60px; border-radius: 16px; margin-bottom: var(--space-4); } .header-center h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-bottom: 6px; } .header-center p { font-size: 14px; color: var(--text-dim); } /* ─── Cards ─── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); margin-bottom: var(--space-4); } .card-title { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .card-title .icon { color: var(--accent); } /* ─── Forms ─── */ .field-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-soft); } .field-input, .field-select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--field-bg); color: var(--text); font-size: 14.5px; font-family: var(--font); outline: none; margin-bottom: var(--space-4); } .field-input:focus, .field-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .field-error { color: var(--danger); font-size: 13px; margin: -8px 0 var(--space-3); } .field-hint { color: var(--text-dim); font-size: 12.5px; margin: -8px 0 var(--space-3); } .checkbox-row { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .checkbox-row input[type="checkbox"] { appearance: none; flex: 0 0 19px; width: 19px; height: 19px; background: var(--card); border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; position: relative; margin-top: 1px; } .checkbox-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .checkbox-row input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox-row label { font-size: 13px; line-height: 1.5; color: var(--text-soft); } .checkbox-row a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dark); } .btn-success { background: var(--success); color: #06231a; } .btn-success:hover { filter: brightness(0.94); } .btn-danger { background: transparent; color: var(--danger); border-color: var(--border); } .btn-danger:hover { background: var(--hover-overlay); border-color: var(--danger); } .btn-ghost { background: var(--field-bg); color: var(--text-soft); border-color: var(--border); } .btn-ghost:hover { background: var(--card-hover); color: var(--text); } .btn:disabled { opacity: 0.45; pointer-events: none; } .btn-sm { width: auto; padding: 8px 14px; font-size: 13px; } /* ─── Auth screens ─── */ .auth-wrap { max-width: 400px; margin: 56px auto; } .auth-switch { text-align: center; margin-top: var(--space-5); font-size: 13.5px; color: var(--text-dim); } .auth-switch a { color: var(--accent); font-weight: 600; } /* ─── Tariff cards ─── */ .tariff-grid { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); } .tariff-card { background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .tariff-card:hover { border-color: var(--text-dim); } .tariff-card.active { background: var(--accent-glow); border-color: var(--accent); } .tariff-name { font-weight: 600; font-size: 15px; margin-bottom: 2px; } .tariff-desc { font-size: 12.5px; color: var(--text-dim); } .tariff-price { font-weight: 700; font-size: 18px; color: var(--accent); white-space: nowrap; } /* ─── Subscription cards ─── */ .sub-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-3); cursor: pointer; } .sub-card:hover { border-color: var(--text-dim); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .sub-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); } .sub-status.active { background: rgba(47,191,135,0.12); color: var(--success); } .sub-status.expired { background: rgba(242,85,90,0.12); color: var(--danger); } /* ─── Device list (subscription detail) ─── */ .device-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1); } .device-row { display: flex; align-items: center; gap: var(--space-3); padding: 9px 12px; background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-soft); } .device-row .icon { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; } /* ─── Traffic bar (subscription detail) ─── */ .traffic-bar-track { height: 6px; border-radius: var(--radius-pill); background: var(--field-bg); border: 1px solid var(--border); overflow: hidden; margin: var(--space-2) 0 6px; } .traffic-bar-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); } /* ─── Modal ─── */ .modal-overlay { position: fixed; inset: 0; background: rgba(4, 6, 8, 0.5); z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--space-5); } .modal-box { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); max-width: 440px; width: 100%; max-height: 88vh; overflow-y: auto; padding: var(--space-6); position: relative; box-shadow: var(--shadow-md); } .modal-close { position: absolute; top: 18px; right: 18px; color: var(--text-dim); cursor: pointer; } .modal-close:hover { color: var(--text); } /* ─── Toast ─── */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 20px; font-size: 13.5px; z-index: 400; box-shadow: var(--shadow-md); } .toast.success { border-color: var(--success); color: var(--success); } .toast.error { border-color: var(--danger); color: var(--danger); } /* ─── Footer ─── */ .site-footer { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); text-align: center; font-size: 12.5px; color: var(--text-dim); } .site-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-3); } .site-footer a { color: var(--text-dim); } .site-footer a:hover { color: var(--accent); } /* ─── Platform tabs (Приложения) ─── */ .platform-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-5); } .platform-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--field-bg); color: var(--text-soft); font-size: 13.5px; font-weight: 600; cursor: pointer; } .platform-tab.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); } .platform-tab:hover:not(.active) { border-color: var(--text-dim); } .setup-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; } .setup-steps li { counter-increment: step; display: flex; gap: var(--space-3); align-items: flex-start; font-size: 13.5px; color: var(--text-soft); line-height: 1.5; } .setup-steps li::before { content: counter(step); flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent-glow); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; } .qr-box { display: flex; justify-content: center; padding: var(--space-5); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin: var(--space-4) 0; } .qr-box img { width: 160px; height: 160px; } /* ─── Settings ─── */ .settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); } .settings-row:last-child { border-bottom: none; } .settings-row-label { font-size: 13.5px; font-weight: 600; color: var(--text); } .settings-row-hint { font-size: 12px; color: var(--text-dim); margin-top: 1px; } .theme-swatches { display: flex; gap: var(--space-2); } .theme-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border); position: relative; } .theme-swatch.active { border-color: var(--text); } .theme-swatch.active::after { content: ""; position: absolute; left: 9px; top: 6px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .segmented { display: inline-flex; background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; } .segmented button, .segmented label span { display: inline-block; border: none; background: transparent; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; } .segmented button.active, .segmented label span.active { background: var(--accent); color: #fff; } /* ─── Admin layout (always theme 1 dark — admin never reads the site's theme cookies) ─── */ .admin-shell { display: flex; min-height: 100vh; } .admin-sidebar { width: 232px; flex-shrink: 0; background: var(--bg-soft); border-right: 1px solid var(--border); padding: var(--space-6) var(--space-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .admin-nav-link { display: block; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-soft); font-size: 13.5px; font-weight: 600; margin-bottom: 2px; } .admin-nav-link:hover { background: var(--hover-overlay); color: var(--text); } .admin-nav-link.active { background: var(--accent-glow); color: var(--accent); } .admin-main { flex: 1; padding: var(--space-8); max-width: 1200px; } .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); } .stat-value { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .stat-label { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .data-table th { text-align: left; padding: 10px 14px; color: var(--text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); } .data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); } .data-table tr:hover td { background: var(--hover-overlay); } .badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; } .badge-green { background: rgba(47,191,135,0.15); color: var(--success); } .badge-red { background: rgba(242,85,90,0.15); color: var(--danger); } .badge-blue { background: var(--accent-glow); color: var(--accent); } /* ─── Mobile: tighter spacing, condensed bottom nav ─── */ @media (max-width: 768px) { .page { padding: var(--space-6) var(--space-4) 100px; } .card { padding: var(--space-5); } .admin-shell { flex-direction: column; } .admin-sidebar { width: 100%; height: auto; position: static; display: flex; overflow-x: auto; gap: 4px; } .admin-main { padding: var(--space-5) var(--space-4); } } @media (max-width: 480px) { .bottom-nav-link { padding: 9px 13px; min-width: 42px; } .bottom-nav-link .label { display: none; } .header-link .label { display: none; } }