/* ============================================================ Selfcare portal — Audials branded stylesheet Palette source: audials.com (dark navy + blue + white) ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Audials brand palette ───────────────────────── */ --nav-bg: #0f1823; --nav-text: rgba(255,255,255,.65); --nav-text-hover: rgba(255,255,255,.9); --nav-text-active: #ffffff; --nav-border: rgba(255,255,255,.08); --blue: #2D9DE3; --blue-dark: #1578b7; --blue-light: #eff6ff; --pink: #ec4899; /* accent badge */ --text: #111827; --text-2: #374151; --muted: #6b7280; --border: #e5e7eb; --bg: #f3f4f6; --card: #ffffff; --danger: #dc2626; --danger-dark: #b91c1c; --danger-light: #fef2f2; --success: #16a34a; --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06); /* ── Layout ─────────────────────────────────────── */ --sidebar-w: 220px; --content-max: 660px; --header-h: 54px; } body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; color: var(--text); background: var(--bg); line-height: 1.5; } a { color: var(--blue-dark); } /* ================================================================ LAYOUT — desktop: sidebar + content | mobile: stacked ================================================================ */ .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────────── */ .sidebar { background: var(--nav-bg); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; } .sidebar-brand { padding: 20px 20px 8px; user-select: none; } .sidebar-user { padding: 20px 20px 18px; font-size: 0.8rem; color: var(--nav-text); border-bottom: 1px solid var(--nav-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-logo { height: 26px; width: auto; display: block; } .sidebar-nav { flex: 1; padding: 10px 0; } .nav-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 20px; min-height: 40px; color: var(--nav-text); text-decoration: none; font-size: 0.88rem; font-weight: 500; border-left: 3px solid transparent; transition: background .12s, color .12s; cursor: pointer; } .nav-link:hover { background: rgba(255,255,255,.06); color: var(--nav-text-hover); } .nav-link.active, .nav-link[aria-current="page"] { background: rgba(37,99,235,.18); border-left-color: var(--blue); color: var(--nav-text-active); font-weight: 600; } .nav-link.disabled { opacity: .35; cursor: default; pointer-events: none; } .nav-badge { background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 20px; text-align: center; } .sidebar-footer { padding: 14px 20px; border-top: 1px solid var(--nav-border); } /* Language-switch reload guard — hides the layout while translations load. The .lang-loading class is set on by an inline script in , BEFORE the browser paints, so no flash of untranslated content is possible. Removed by beginLangGuard().done() after translations are applied. Normal first-load navigation has no flag → class is never added → zero cost. */ html.lang-loading .layout, html.lang-loading .login-wrap, html.lang-loading .page-header { visibility: hidden; } /* ── Page header (authenticated pages — desktop only) ─────────── */ /* Full-width sticky bar above .layout — logo left, lang switcher right. Sidebar below it is offset by --header-h via body:has rule. */ .page-header { position: sticky; top: 0; z-index: 200; } /* Sidebar must start below the sticky page-header */ body:has(.page-header) .sidebar { top: var(--header-h); height: calc(100vh - var(--header-h)); } @media (max-width: 899px) { .page-header { display: none !important; } } /* ── Mobile header (hidden on desktop) ──────────────────────── */ .mobile-header { display: none; background: var(--nav-bg); color: #fff; padding: 12px 16px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.25); } .mobile-brand { display: flex; align-items: center; } .mobile-right { display: flex; align-items: center; gap: 14px; } .mobile-username { font-size: 0.82rem; color: rgba(255,255,255,.65); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Main content ────────────────────────────────────────────── */ .content { max-width: var(--content-max); padding: 32px 28px 64px; } .content-title { font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 24px; } /* Back link (devices page) */ .back-link { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; margin-bottom: 20px; transition: color .12s; } .back-link:hover { color: var(--blue); } .back-link::before { content: '←'; } /* ── Section + card ─────────────────────────────────────────── */ section { scroll-margin-top: 20px; margin-bottom: 14px; } .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; } .card-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 16px; } .card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .card-header-row .card-title { margin-bottom: 0; } /* ── Profile dl ─────────────────────────────────────────────── */ dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 12px; } dt { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); align-self: center; } dd { font-size: 0.9rem; font-weight: 500; word-break: break-all; } /* ── Forms ──────────────────────────────────────────────────── */ label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 14px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input[type="email"], input[type="password"], input[type="text"] { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 7px; font-size: 0.9rem; background: #fafafa; outline: none; transition: border-color .15s, box-shadow .15s; color: var(--text); } input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); background: #fff; } button[type="submit"] { display: block; width: 100%; margin-top: 16px; padding: 10px; background: var(--blue); color: #fff; border: none; border-radius: 7px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; } button[type="submit"]:hover { background: var(--blue-dark); } button[type="submit"]:active { transform: scale(.98); } button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* Generic buttons */ .btn-link { background: none; border: none; color: var(--blue); font-size: 0.88rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: none; transition: color .12s; } .btn-link:hover { text-decoration: underline; } .btn-link-danger { color: var(--danger); } .btn-link-danger:hover { color: var(--danger-dark); text-decoration: underline; } .btn-link-muted { color: var(--nav-text); } .btn-link-muted:hover { color: var(--nav-text-hover); } .btn-danger-sm { padding: 4px 12px; background: var(--danger); color: #fff; border: none; border-radius: 5px; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: background .12s; } .btn-danger-sm:hover { background: var(--danger-dark); } .btn-ghost { padding: 4px 12px; background: none; border: 1.5px solid var(--border); border-radius: 5px; font-size: 0.78rem; font-weight: 600; cursor: pointer; color: var(--muted); transition: border-color .12s, color .12s; } .btn-ghost:hover { border-color: var(--muted); color: var(--text); } /* Facebook button */ .btn-facebook { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; background: #1877f2; color: #fff; border: none; border-radius: 7px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background .15s; } .btn-facebook:hover { background: #166fe5; } /* Divider */ .divider { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 14px 0; position: relative; } .divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--border); } .divider::before { left: 0; } .divider::after { right: 0; } /* ── Badges ─────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; margin-left: 5px; vertical-align: middle; } /* ── Device list ────────────────────────────────────────────── */ .device-list { list-style: none; } .device-item { display: flex; align-items: center; gap: 9px; padding: 8px 2px; border-bottom: 1px solid var(--border); transition: opacity .2s; } .device-item:last-child { border-bottom: none; } .device-item.removing { opacity: 0; pointer-events: none; } .device-icon { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; } .device-icon--pc { background: #3b82f6; } .device-icon--tray { background: #8b5cf6; } .device-icon--android { background: #22c55e; } .device-icon--web { background: #f59e0b; } .device-icon--other { background: #94a3b8; } .device-info { flex: 1; min-width: 0; } .device-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } .device-meta { font-size: 0.74rem; color: var(--muted); margin-top: 1px; } .btn-remove { flex-shrink: 0; background: none; border: 1px solid var(--border); color: var(--danger); font-size: 0.74rem; font-weight: 600; padding: 2px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; transition: background .1s, border-color .1s; } .btn-remove:hover { background: var(--danger-light); border-color: var(--danger); } .btn-remove:disabled { opacity: .4; cursor: not-allowed; } /* "and N more" line under teaser */ .device-more-hint { text-align: center; font-size: 0.8rem; color: var(--muted); padding: 8px 0 2px; } /* "Manage devices" CTA link */ .manage-link { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 14px; padding: 9px; border: 1.5px solid var(--blue); border-radius: 7px; color: var(--blue); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: background .15s; } .manage-link:hover { background: var(--blue-light); } /* ── Devices page toolbar ───────────────────────────────────── */ .devices-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .search-input { flex: 1; min-width: 180px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 7px; font-size: 0.88rem; background: #fafafa; outline: none; transition: border-color .15s; } .search-input:focus { border-color: var(--blue); background: #fff; } /* ── Inline confirm bar ─────────────────────────────────────── */ .confirm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; background: var(--danger-light); border: 1px solid #fca5a5; border-radius: 7px; font-size: 0.84rem; color: var(--danger); font-weight: 600; } /* ── Danger zone ─────────────────────────────────────────────── */ .danger-zone { border: 1.5px solid #fca5a5; } .danger-zone .card-title { color: var(--danger); } .danger-zone > p { color: var(--muted); font-size: 0.88rem; margin-bottom: 14px; } .btn-danger { background: var(--danger) !important; } .btn-danger:hover { background: var(--danger-dark) !important; } /* ── Messages ───────────────────────────────────────────────── */ .msg { margin-top: 10px; font-size: 0.85rem; } .msg.hidden { display: none; } .msg.error { color: var(--danger); } .msg.success { color: var(--success); } .error:not(.msg) { color: var(--danger); font-size: 0.85rem; margin-top: 10px; } .empty { color: var(--muted); font-style: italic; padding: 6px 0; font-size: 0.88rem; } /* ── Login page ─────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .login-header { background: var(--nav-bg); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; } .login-header .brand-logo { display: block; } .login-body { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; } .login-card { width: 100%; max-width: 400px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; } .login-card h1 { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 24px; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 899px) { .layout { display: block; /* single column */ } .sidebar { display: none !important; } .mobile-header { display: flex !important; } .content { max-width: none; padding: 20px 16px 56px; } .content-title { font-size: 1.3rem; margin-bottom: 18px; } dl { grid-template-columns: 110px 1fr; } .mobile-right { gap: 10px; } .mobile-right .btn-link { font-size: .78rem; } } @media (max-width: 560px) { .mobile-username { display: none; } } @media (min-width: 900px) { .mobile-header { display: none !important; } } /* ── Credits ─────────────────────────────────────────────────── */ .credits-balance { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; } .credits-available { font-size: 2.5rem; font-weight: 800; color: var(--blue); line-height: 1; } .credits-label { font-size: 1rem; color: var(--muted); } .credits-reserved { font-size: .85rem; color: var(--muted); } /* ── Stats table (credits history + future use) ─────────────── */ .stats-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 12px; } .stats-table th { text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--border); color: var(--muted); font-weight: 600; } .stats-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); } .stats-table tr:last-child td { border-bottom: none; } /* ── Statistics grid ─────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 4px; } .stats-group { background: var(--bg); border-radius: var(--radius); padding: 14px 16px; } .stats-group-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; } .stats-item { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; } .stats-item span:first-child { font-size: 1.25rem; font-weight: 700; color: var(--blue); min-width: 32px; text-align: right; } .stats-item-label { font-size: .8rem; color: var(--text-2); } /* ── Collapsible cards ───────────────────────────────────────── */ .card[data-collapsible] .card-title { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; } .card[data-collapsible] .card-title::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--muted); transition: transform .2s ease; flex-shrink: 0; margin-left: 10px; } .card[data-collapsible].collapsed .card-title::after { transform: rotate(-90deg); } .card-body { /* no extra padding — inherits card's existing padding context */ } .card[data-collapsible].collapsed .card-body { display: none; } .card[data-collapsible] .card-title:hover::after { border-top-color: var(--blue); } /* ── Language switcher ───────────────────────────────────────── */ .lang-switcher { position: relative; display: inline-flex; align-items: center; z-index: 120; } .lang-switcher-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid rgba(17,24,39,.2); background: #fff; color: var(--text-2); font-size: .78rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; } .lang-switcher-btn:hover, .lang-switcher-btn:focus-visible { border-color: var(--blue); outline: none; } .lang-switcher.open .lang-switcher-btn { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.16); } .lang-switcher-globe { width: 14px; height: 14px; flex-shrink: 0; } .lang-switcher-current { line-height: 1; } .lang-switcher-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .75; transform-origin: center; transition: transform .16s ease; } .lang-switcher.open .lang-switcher-caret { transform: rotate(180deg); } .lang-switcher-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px 0; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .14s ease, transform .14s ease; } .lang-switcher.open .lang-switcher-panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .lang-switcher-section-label { padding: 4px 12px 5px; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .lang-switcher-option { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; cursor: pointer; color: var(--text-2); font-size: .8rem; } .lang-switcher-option:hover { background: var(--bg); } .lang-switcher-option.selected { background: var(--blue-light); } .lang-switcher-option-name { font-weight: 600; color: var(--text); } .lang-switcher-option-native { font-size: .74rem; color: var(--muted); } .lang-switcher-option-check { width: 12px; text-align: center; color: var(--blue); font-weight: 700; } .lang-switcher-divider { height: 1px; margin: 4px 0; background: var(--border); } /* Dark-context trigger button (sidebar/login/mobile headers). */ .sidebar .lang-switcher-btn, .login-header .lang-switcher-btn, .mobile-header .lang-switcher-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; } .sidebar .lang-switcher-btn:hover, .login-header .lang-switcher-btn:hover, .mobile-header .lang-switcher-btn:hover, .sidebar .lang-switcher-btn:focus-visible, .login-header .lang-switcher-btn:focus-visible, .mobile-header .lang-switcher-btn:focus-visible { border-color: rgba(255,255,255,.6); } .sidebar .lang-switcher.open .lang-switcher-btn, .login-header .lang-switcher.open .lang-switcher-btn, .mobile-header .lang-switcher.open .lang-switcher-btn { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 3px rgba(255,255,255,.12); } .mobile-right .lang-switcher-btn { min-height: 28px; padding: 4px 8px 4px 7px; font-size: .72rem; } .mobile-right .lang-switcher-panel { min-width: 220px; } /* ── Device hostname ─────────────────────────────────────────── */ .device-hostname { display: block; font-size: .72rem; color: var(--muted); font-family: monospace; letter-spacing: .02em; line-height: 1.3; }