/* * Installed mobile app layer. * Desktop keeps the editorial site; phones get a focused, edge-to-edge app shell. */ :root { --mobile-ink: var(--text-main); --mobile-muted: var(--text-muted); --mobile-dim: var(--text-muted); --mobile-bg: var(--bg-dark); --mobile-surface: var(--bg-card); --mobile-surface-2: var(--bg-panel-light); --mobile-line: var(--border); --mobile-orange: var(--primary); --mobile-green: var(--success); } html { background: var(--bg-dark); } @media (max-width: 768px) { :root { --mobile-ink: var(--text-main); --mobile-muted: var(--text-muted); --mobile-dim: var(--text-muted); --mobile-bg: var(--bg-dark); --mobile-surface: var(--bg-card); --mobile-surface-2: var(--bg-panel-light); --mobile-line: var(--border); --mobile-orange: var(--primary); --mobile-green: var(--success); --status-bar-bg: var(--mobile-bg); } body.app-page { --status-bar-bg: #090a0b; } ::selection { background: rgba(255, 91, 26, 0.35); color: #fff; } html { background: var(--mobile-bg) !important; overflow-x: hidden; /* * The authenticated shell is a fixed-scale app surface. Vertical * scrolling remains available, while browser pinch and double-tap zoom * are intentionally disabled for the installed-app experience. */ touch-action: pan-x pan-y; overscroll-behavior-x: none; } body { width: 100%; max-width: 100%; min-height: 100dvh; overflow-x: hidden; /* clip (unlike hidden) doesn't turn into a scroll container, so sticky headers keep sticking; older Safari falls back to hidden. */ overflow-x: clip !important; touch-action: pan-x pan-y; overscroll-behavior-x: none; } body { background: var(--mobile-bg) !important; color: var(--mobile-ink); padding-bottom: env(safe-area-inset-bottom); } *, *::before, *::after { max-width: 100%; } main, header, footer, section, article, .container, .forum-shell, .protection-shell { min-width: 0; } body::before { opacity: 0.018; mix-blend-mode: screen; } .ambient-light, .ambient-bg, .grid-overlay, .grid-mesh { opacity: 0; } body > header, .forum-page > header { background: rgba(13, 15, 18, 0.88) !important; border-bottom: 1px solid var(--mobile-line) !important; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } .brand, .brand:hover { color: var(--mobile-ink); } .brand-mark { width: 19px; height: 19px; border-color: var(--mobile-ink); } .brand-mark::after { background: var(--mobile-orange); box-shadow: 0 0 0 2px var(--mobile-bg); } .pwa-install-sheet { position: fixed; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); left: 14px; z-index: 500; display: flex; gap: 14px; align-items: center; padding: 15px 16px; background: rgba(28, 32, 37, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); color: var(--mobile-ink); animation: mobileSheetIn 0.45s var(--ease-smooth); } .pwa-install-sheet[hidden] { display: none; } .pwa-install-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; background: var(--mobile-orange); border-radius: 12px; color: #fff; font-family: var(--font-display); font-size: 1.65rem; } .pwa-install-copy { min-width: 0; flex: 1; } .pwa-install-copy strong { display: block; margin-bottom: 2px; font-size: 0.9rem; font-weight: 600; } .pwa-install-copy span { display: block; color: var(--mobile-muted); font-size: 0.74rem; line-height: 1.35; } .pwa-install-action, .pwa-install-dismiss { flex: 0 0 auto; border: 0; cursor: pointer; } .pwa-install-action { min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--mobile-orange); color: #fff; font-size: 0.76rem; font-weight: 600; } .pwa-install-dismiss { display: grid; width: 44px; height: 44px; margin: -12px -12px -12px -6px; place-items: center; align-self: flex-start; padding: 0; background: transparent; color: var(--mobile-muted); font-size: 1.35rem; line-height: 1; } /* Pages without the tab bar anchor the sheet just above the home indicator. */ body:not(:has(.mobile-tab-bar)) .pwa-install-sheet { bottom: calc(14px + env(safe-area-inset-bottom)); } body:not(:has(.mobile-tab-bar)) .pwa-help-sheet { bottom: calc(14px + env(safe-area-inset-bottom)); } /* Leave room so the end of the page can always scroll clear of the sheet. */ html.pwa-sheet-visible body { padding-bottom: calc(var(--pwa-sheet-space, 112px) + env(safe-area-inset-bottom)); } /* Floating + buttons move up so the sheet never covers them. */ html.pwa-sheet-visible .mobile-floating-add, html.pwa-sheet-visible .inbox-floating-action, html.pwa-sheet-visible .identity-floating-add { bottom: calc(64px + var(--pwa-sheet-space, 112px) + env(safe-area-inset-bottom)); } body .mobile-tab-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 120; display: grid; width: 100%; max-width: 100vw; box-sizing: border-box; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; grid-auto-flow: column; gap: 0; min-height: 66px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(20, 23, 27, 0.94); border-top: 1px solid var(--mobile-line); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; width: 100%; max-width: none; overflow: hidden; white-space: nowrap; border: 0; background: transparent; color: var(--mobile-dim); font: 500 0.64rem/1 var(--font-body); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } .mobile-tab svg { width: 20px; height: 20px; stroke-width: 1.7; } .mobile-tab.active, .mobile-tab:active { color: var(--mobile-orange); } .mobile-tab:active { transform: scale(0.94); } .mobile-tab-add { position: static; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--mobile-dim); box-shadow: none; } .mobile-tab-add svg { width: 20px; height: 20px; } .mobile-tab-add.active, .mobile-tab-add:active { color: var(--mobile-orange); } .mobile-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-install-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--mobile-muted); cursor: pointer; font-size: 0.76rem; } .mobile-install-link svg { width: 15px; height: 15px; } .pwa-help-sheet { position: fixed; inset: auto 14px calc(78px + env(safe-area-inset-bottom)) 14px; z-index: 510; padding: 20px; background: var(--mobile-surface-2); border: 1px solid var(--mobile-line); border-radius: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); } .pwa-help-sheet[hidden] { display: none; } .pwa-help-sheet h2 { margin: 0 0 8px; font-size: 1.08rem; } .pwa-help-sheet p { margin: 0; color: var(--mobile-muted); font-size: 0.83rem; line-height: 1.5; } .pwa-help-sheet ol { margin: 14px 0 0; padding-left: 20px; color: var(--mobile-ink); font-size: 0.84rem; line-height: 1.75; } .pwa-help-sheet button { width: 100%; min-height: 40px; margin-top: 16px; border: 0; border-radius: 10px; background: var(--mobile-orange); color: #fff; font-weight: 600; } /* Auth remains welcoming, but now reads as an app entry screen. */ body:not(.dashboard-page):not(.identity-page):not(.forum-page):not(.protection-page) .auth-container { padding: 20px 16px; } .auth-card { padding: 32px 20px 26px; background: var(--mobile-surface); border-color: var(--mobile-line); border-radius: 20px; box-shadow: none; } .auth-card h2, .auth-card label, .auth-card .brand { color: var(--mobile-ink); } .auth-card .subtitle, .auth-card .footer-links, .auth-card .forgot-link { color: var(--mobile-muted); } .auth-card input { background: var(--mobile-surface-2); border-color: var(--mobile-line); color: var(--mobile-ink); } .auth-card input:focus { background: var(--mobile-surface-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .auth-card a { color: var(--mobile-ink); } .auth-card .alert { color: var(--mobile-ink); } /* Community / public utility pages share the same installed background. */ .forum-page .forum-shell { padding: 28px 16px calc(82px + env(safe-area-inset-bottom)); } .forum-page .forum-header { padding: 42px 0 24px; } .forum-page .forum-header h1, .forum-page .thread-head h1 { color: var(--mobile-ink); font-size: 2.9rem; } .forum-page .forum-intro, .forum-page .thread-byline { color: var(--mobile-muted); } .forum-page .topic-row, .forum-page .reply-card, .forum-page .forum-form, .forum-page .topic-empty { background: var(--mobile-surface); border-color: var(--mobile-line); color: var(--mobile-ink); } .forum-page .topic-row:hover { transform: none; box-shadow: none; } .forum-page .topic-row h2, .forum-page .reply-card p { color: var(--mobile-ink); } .forum-page .topic-row p, .forum-page .topic-meta, .forum-page .topic-side, .forum-page .forum-form > p { color: var(--mobile-muted); } .forum-page .forum-filter, .forum-page .nav-link { color: var(--mobile-muted); } .forum-page .topic-badge { background: rgba(255, 255, 255, 0.08); color: #c9cacb; } .forum-page .topic-badge.hot { background: rgba(255, 91, 26, 0.16); color: #ffb08f; } .forum-page .forum-filter:hover, .forum-page .forum-filter.active { background: rgba(255, 91, 26, 0.12); color: var(--mobile-ink); } .forum-page .forum-field input, .forum-page .forum-field select, .forum-page .forum-field textarea, .protection-page .field { background: #111418; border-color: var(--mobile-line); color: var(--mobile-ink); } /* Protection reads like a compact security cockpit on a phone. */ .protection-page .protection-shell { padding: 30px 16px calc(92px + env(safe-area-inset-bottom)); } .protection-page > header { padding: calc(10px + env(safe-area-inset-top)) 0 8px; } .protection-page > header .container { padding: 0 18px; } .protection-page .protection-nav { gap: 18px; } .protection-page .protection-nav a { color: var(--mobile-muted); font-size: 0.86rem; } /* The tab bar's Home tab already leads to the dashboard. */ .protection-page .protection-nav a[href="/dashboard"] { display: none; } .protection-page .action-icon { background: rgba(255, 91, 26, 0.14); } .protection-page .protection-hero { margin-bottom: 24px; } .protection-page .protection-hero h1 { color: var(--mobile-ink); font-family: var(--font-body); font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; } .protection-page .protection-hero p, .protection-page .score-note, .protection-page .section-head p, .protection-page .stat-caption, .protection-page .mini-note, .protection-page .item-list span small { color: var(--mobile-muted); } .protection-page .score-card, .protection-page .action-card, .protection-page .panel, .protection-page .plan-card { background: var(--mobile-surface); border-color: var(--mobile-line); color: var(--mobile-ink); } .protection-page .score-number, .protection-page .section-head h2, .protection-page .stat-value { color: var(--mobile-ink); } .protection-page .stat-card, .protection-page .action-row, .protection-page .item-list li { border-color: var(--mobile-line); } .protection-page .catalog-item { background: #111418; border-color: var(--mobile-line); } .protection-page .catalog-item strong { color: var(--mobile-ink); } /* * The marketing homepage keeps its editorial layout on mobile, but uses the * installed-app palette. Explicitly override the light-theme text tokens so * no section can inherit near-black text on the dark mobile background. */ .hero h1, .section-header h2, .feature-card h3, .id-data, .step h3, .price-num, .p-list li, .faq-q { color: var(--mobile-ink) !important; } .hero-lede, .section-header p, .feature-card p, .id-label, .step p, .p-sub, .faq-a, .footer-blurb, .footer-copy { color: var(--mobile-muted) !important; } .highlight-anim { color: var(--mobile-ink) !important; } .feature-card, .id-card, .p-card, .faq-item { background: var(--mobile-surface); border-color: var(--mobile-line); color: var(--mobile-ink); } .btn-ghost { border-color: var(--mobile-line); color: var(--mobile-ink); } .footer-links a { color: var(--mobile-muted); } body.app-page main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } body.forum-page .forum-shell, body.protection-page .protection-shell { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; } .legacy-mobile-tab-bar { display: none !important; } } @media (min-width: 769px) { .mobile-tab-bar, .legacy-mobile-tab-bar, .pwa-install-sheet, .pwa-help-sheet, .mobile-install-link { display: none !important; } } @keyframes mobileSheetIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* iPhone surface: graphite panels, orange signal, and quiet separators. */ @media (max-width: 768px) { body.app-page { font-family: var(--font-body); background: #090a0b !important; color: #f4f4f2; } body.app-page > header { background: #090a0b !important; border: 0 !important; } body.app-page main { padding-top: 18px; } .mobile-tab-bar { right: 16px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 16px; width: auto; max-width: calc(100vw - 32px); min-height: 64px; padding: 7px 8px; background: rgba(27,28,29,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 30px; box-shadow: 0 10px 30px rgba(0,0,0,.45); } .mobile-tab { color:#a4a5a2; font-size:.61rem; gap:3px; } .mobile-tab svg { width:21px; height:21px; } .mobile-tab.active { color:#f4f4f2; } .mobile-tab.active svg { stroke-width:2.15; } .mobile-tab:active { transform:scale(.91); } .inbox-page main { padding: 18px 16px calc(104px + env(safe-area-inset-bottom)); } .inbox-page .inbox-heading { margin-bottom:18px; } .inbox-page .inbox-heading h1 { font:600 1.65rem var(--font-body); color:#f4f4f2; letter-spacing:-.05em; } .inbox-page .inbox-heading p { display:none; } .inbox-page .eyebrow { color:#a4a5a2; font-size:.66rem; } .inbox-page .inbox-refresh { border-color:rgba(255,255,255,.16); color:#d2d2cf; } .inbox-page .inbox-list { gap:0; border-top:1px solid rgba(255,255,255,.12); } .inbox-page .inbox-message { padding:16px 4px; border:0; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0; background:transparent; } .inbox-page .inbox-message-icon { width:38px; height:38px; flex-basis:38px; border-radius:50%; background:#a57af0; color:#120b1a; } .inbox-page .inbox-message h2 { margin-top:5px; font:500 .95rem var(--font-body); color:#f4f4f2; } .inbox-page .inbox-message-meta,.inbox-page .inbox-message-preview,.inbox-page .inbox-message-body { font-size:.77rem; color:#a8a9a6; } .inbox-page .inbox-message-topline { font-size:.62rem; color:#8f908e; } .inbox-page .inbox-empty { border-color:rgba(255,255,255,.14); background:#121314; } .protection-page .protection-shell { padding:22px 16px calc(104px + env(safe-area-inset-bottom)); } .protection-page .protection-hero h1 { font-size:1.8rem; } .protection-page .score-card,.protection-page .action-card,.protection-page .panel,.protection-page .plan-card { border-radius:16px; background:#151617; } .protection-page .stat-card { background:#151617; border:1px solid rgba(255,255,255,.12); border-radius:14px; } .protection-page .primary-btn { background:#ff5b22; color:#fff; } .site-url-row { display:flex; align-items:center; gap:10px; } .site-url-row .input-std { flex:1; min-width:0; } .site-preview { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:#202225; color:#ff6530; font-size:1.25rem; } .site-preview img { width:25px; height:25px; } } @media (max-width: 768px) { .app-page { background: var(--mobile-bg) !important; color: var(--mobile-ink); } .app-page .mobile-tab-bar { background: var(--glass-strong); border-color: var(--mobile-line); } .app-page .mobile-tab { color: var(--mobile-muted); } .app-page .mobile-tab.active { color: var(--mobile-ink); } .app-page .site-preview { background: var(--mobile-surface-2); border-color: var(--mobile-line); color: var(--primary-ink); } .app-page .settings-header, .app-page .identities-header { background: var(--glass-strong) !important; border-color: var(--mobile-line); } } .app-launch { display: none; } @media (max-width: 768px) { html.app-shell-hydrating, html.app-shell-hydrating body { overflow: hidden; background: #050606 !important; } html.app-shell-hydrating .app-launch { position: fixed; inset: 0; z-index: 1000; display: block; overflow: hidden; background: #050606; color: #f4f4f2; opacity: 1; transition: opacity .38s ease; } .app-launch.is-finished { opacity: 0; pointer-events: none; } .app-launch-splash, .app-launch-loading { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .app-launch.show-splash .app-launch-splash { display: grid; place-items: center; opacity: 1; } .app-launch-mark { display: grid; width: 104px; height: 104px; place-items: center; animation: appLaunchMark 1.05s cubic-bezier(.24,.75,.3,1) both; } .app-launch-mark img { width: 92px; height: 92px; border-radius: 24px; filter: drop-shadow(0 18px 26px rgba(255,91,26,.14)); } .app-launch.show-loading .app-launch-loading { display: block; padding: calc(22px + env(safe-area-inset-top)) 18px calc(92px + env(safe-area-inset-bottom)); opacity: 1; animation: appLoadingStageIn .34s ease both; } .app-loading-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 12px; margin-bottom: 32px; } .app-loading-circle, .app-loading-line, .app-loading-card { position: relative; overflow: hidden; background: #171919; } .app-loading-orbit { position: relative; width: 64px; height: 64px; margin: 9px auto 17px; border: 1px solid rgba(255,91,26,.26); border-radius: 50%; animation: appOrbitSpin 4s linear infinite; } .app-loading-orbit::before, .app-loading-orbit::after { position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; } .app-loading-orbit::after { inset: 20px; border-color: rgba(255,91,26,.38); } .app-loading-orbit span { position: absolute; top: -3px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--mobile-orange); box-shadow: 0 0 14px var(--mobile-orange); } .app-loading-orbit span:nth-child(2) { top: 28px; left: -3px; background: #73d6aa; box-shadow: 0 0 14px #73d6aa; } .app-loading-orbit span:nth-child(3) { top: 48px; left: 49px; background: #ffca67; box-shadow: 0 0 14px #ffca67; } .app-loading-caption { margin-bottom: 23px; text-align: center; } .app-loading-caption strong, .app-loading-caption span { display: block; } .app-loading-caption strong { color: #f7f4ed; font-size: .92rem; font-weight: 600; } .app-loading-caption span { margin-top: 4px; color: #8d9194; font-size: .7rem; } .app-loading-progress { position: relative; height: 3px; margin: 0 9px 24px; overflow: hidden; background: rgba(255,255,255,.08); border-radius: 4px; } .app-loading-progress span { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, transparent, var(--mobile-orange), transparent); animation: appProgress 1.7s ease-in-out infinite; } .app-loading-circle::after, .app-loading-line::after, .app-loading-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.075) 45%, rgba(255,255,255,.13) 52%, transparent 78%); transform: translateX(-120%); animation: appLoadingShimmer 1.15s ease-in-out infinite; } .app-loading-circle { width: 42px; height: 42px; border-radius: 50%; } .app-loading-line { display: block; width: 100%; height: 12px; border-radius: 7px; } .app-loading-title { width: 84px; height: 18px; } .app-loading-hero { width: 64%; height: 54px; margin-bottom: 28px; border-radius: 9px; } .app-loading-card { display: flex; flex-direction: column; gap: 15px; margin-bottom: 16px; padding: 23px 18px; border: 1px solid rgba(255,255,255,.035); border-radius: 18px; background: #101212; } .app-loading-card > * { z-index: 1; background: #202222; } .app-loading-card-title { width: 62%; height: 20px; } .app-loading-short { width: 46%; } .app-loading-medium { width: 76%; } .app-loading-button { height: 38px; margin-top: 5px; border-radius: 20px; } .app-loading-card-compact { min-height: 138px; } .app-launch-recovery { margin: 20px 8px 0; padding: 14px; background: rgba(255,91,26,.08); border: 1px solid rgba(255,91,26,.25); border-radius: 13px; color: #f7f4ed; font-size: .75rem; text-align: center; } .app-launch-recovery strong, .app-launch-recovery span { display: block; } .app-launch-recovery span { margin-top: 3px; color: #9b9c9d; } .app-launch-recovery div { display: flex; gap: 8px; justify-content: center; margin-top: 11px; } .app-launch-recovery button { min-height: 34px; padding: 0 13px; background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #f7f4ed; cursor: pointer; font-size: .72rem; } .app-launch-recovery button:first-child { background: var(--mobile-orange); border-color: var(--mobile-orange); color: #fff; } html.app-shell-ready .mobile-home > *, html.app-shell-ready .inbox-page main > *, html.app-shell-ready .identities-page main > *, html.app-shell-ready .identity-page main > *, html.app-shell-ready .protection-page main > * { animation: appContentIn .5s cubic-bezier(.22,.76,.3,1) both; } html.app-shell-ready .mobile-home > :nth-child(2), html.app-shell-ready .inbox-page main > :nth-child(2), html.app-shell-ready .identities-page main > :nth-child(2) { animation-delay: .05s; } html.app-shell-ready .mobile-home > :nth-child(3), html.app-shell-ready .inbox-page main > :nth-child(3), html.app-shell-ready .identities-page main > :nth-child(3) { animation-delay: .1s; } html.app-shell-ready .mobile-home > :nth-child(4) { animation-delay: .15s; } html.app-shell-ready .mobile-home > :nth-child(5) { animation-delay: .2s; } html.app-shell-ready .mobile-home > :nth-child(6) { animation-delay: .25s; } html.app-shell-ready .mobile-tab-bar { animation: appNavIn .48s cubic-bezier(.22,.76,.3,1) .12s both; } body.app-page-leaving { opacity: 0; transform: translateX(-9px); transition: opacity .14s ease, transform .14s ease; } .mobile-tab { border-radius: 22px; transition: color .2s ease, transform .2s ease, background-color .2s ease; } .mobile-tab.active { background: rgba(255,255,255,.075); } @keyframes appLaunchMark { 0% { opacity: 0; transform: scale(.55) rotate(-18deg); } 42% { opacity: 1; transform: scale(1.08) rotate(5deg); } 72% { transform: scale(.95) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } @keyframes appLoadingStageIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes appLoadingShimmer { 0% { transform: translateX(-120%); } 65%, 100% { transform: translateX(120%); } } @keyframes appOrbitSpin { to { transform: rotate(360deg); } } @keyframes appProgress { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } } @keyframes appContentIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes appNavIn { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } } } @media (max-width: 768px), (pointer: coarse) { /* iOS zooms the whole page into any field under 16px and leaves it zoomed. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not(.otp-digit), select, textarea { font-size: 16px !important; } } @media (max-width: 768px) { /* Sheets and dialogs own the screen: tuck the tab bar and floating buttons away. */ body.modal-open { overflow: hidden; } body.modal-open .mobile-tab-bar, body.modal-open .mobile-floating-add, body.modal-open .inbox-floating-action, body.modal-open .identity-floating-add, body.modal-open .pwa-install-sheet { opacity: 0; transform: translateY(120%); pointer-events: none; } } /* Touch screens (phones in either orientation, tablets): comfortable hit areas. */ @media (pointer: coarse) { .nav-link, .btn-logout, .back-btn, .forgot-link, .protection-nav a, .seo-nav nav a, .header-actions a, .mobile-list-heading a, .identity-edit-link, .inbox-edit-button, .inbox-refresh { display: inline-flex; align-items: center; min-height: 44px; } .icon-btn, .btn-mini, .btn-icon, .header-action { min-width: 40px; min-height: 40px; justify-content: center; } .toggle-row input[type="checkbox"] { width: 22px; height: 22px; } .footer-links a { display: inline-flex; align-items: center; min-height: 40px; } .inbox-open-link { display: inline-flex; align-items: center; min-height: 40px; } } @media (max-width: 768px) { .mobile-title-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #d8d8d5; font-size: .78rem; text-decoration: none; } .mobile-title-link span { color: #ff7b4c; font-size: 1rem; } } /* Authenticated desktop app shell. The phone shell remains a single shared tab bar; this rail only appears on wider screens. */ .desktop-app-rail { position: fixed; inset: 0 auto 0 0; z-index: 80; display: flex; width: 224px; flex-direction: column; padding: 30px 18px 22px; background: #111316; border-right: 1px solid rgba(19, 15, 2, 0.12); color: #f4f2ec; } .desktop-rail-brand { display: inline-flex; align-items: center; gap: 10px; margin: 0 12px 42px; color: #f4f2ec; font-size: .9rem; font-weight: 600; text-decoration: none; } .desktop-rail-brand .brand-mark { width: 18px; height: 18px; border-color: #f4f2ec; } .desktop-rail-brand .brand-mark::after { box-shadow: 0 0 0 2px #111316; } .desktop-rail-links, .desktop-rail-footer { display: grid; gap: 6px; } .desktop-rail-links a, .desktop-rail-footer a { display: flex; min-height: 42px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: #9fa1a3; font-size: .82rem; text-decoration: none; transition: color .2s, background .2s; } .desktop-rail-links a:hover, .desktop-rail-footer a:hover, .desktop-rail-links a.active { background: rgba(255,255,255,.075); color: #fff; } .desktop-rail-links svg, .desktop-rail-footer svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.7; } .desktop-rail-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); } .desktop-rail-footer .desktop-rail-create { margin-bottom: 8px; background: #ff5b1a; color: #fff; font-weight: 600; } .desktop-rail-footer .desktop-rail-create:hover { background: #e9490c; } @media (min-width: 769px) { body.app-page { --bg-dark: #0b0d0f; --bg-core: #0b0d0f; --bg: #0b0d0f; --bg-panel: #15181c; --bg-card: #15181c; --panel: #15181c; --bg-panel-light: #1d2126; --bg-hover: #20252b; --text-main: #f4f2ec; --text: #f4f2ec; --text-muted: #a4a5a6; --muted: #a4a5a6; --border: rgba(255,255,255,.11); --border-hover: rgba(255,255,255,.22); --primary-ink: #ff8a5e; --placeholder: #8e9092; background: #0b0d0f !important; color: #f4f2ec; } body.app-page > header { background: rgba(11,13,15,.94) !important; border-color: rgba(255,255,255,.11) !important; } body.dashboard-page > header { display: none; } body.dashboard-page main { color: #f4f2ec; } body.dashboard-page .ops-card, body.dashboard-page .id-card, body.dashboard-page .cred-box, body.dashboard-page .onboarding, body.dashboard-page .privacy-intel, body.dashboard-page .intel-card { background: #15181c; border-color: rgba(255,255,255,.11); color: #f4f2ec; } body.dashboard-page .ops-card:hover, body.dashboard-page .id-card:hover { border-color: rgba(255,255,255,.22); background: #1b1f24; } body.dashboard-page .ops-content p, body.dashboard-page .card-body p, body.dashboard-page .subtitle, body.dashboard-page .cred-label, body.dashboard-page .intel-content p { color: #a4a5a6; } body.identity-page .identity-panel, body.identity-page .sms-section .panel, body.identity-page .viewer-card { background: #15181c; border-color: rgba(255,255,255,.11); } body.inbox-page .inbox-message, body.inbox-page .inbox-state { background: #15181c; border-color: rgba(255,255,255,.11); } body.app-page > header, body.app-page > main, body.identity-page > .sms-section { margin-left: 224px; } body.app-page > header { padding-left: 28px; } body.app-page > main { margin-right: auto; } .identity-page > main, .identity-page > .sms-section { max-width: 1224px; } } @media (max-width: 768px) { .desktop-app-rail { display: none; } } @media (prefers-reduced-motion: reduce) { .app-launch { display: none !important; } body.app-page-leaving { opacity: 1 !important; transform: none !important; transition: none !important; } .mobile-home > *, .inbox-page main > *, .identities-page main > *, .identity-page main > *, .protection-page main > *, .mobile-tab-bar { animation: none !important; } } /* Fully dark authenticated desktop shell. Page-specific styles still control mobile layouts; these rules remove the remaining light editorial surfaces. */ @media (min-width: 769px) { .desktop-app-rail { width: 244px; padding: 32px 20px 24px; background: #0d0f12; border-right-color: rgba(255,255,255,.1); box-shadow: 18px 0 50px rgba(0,0,0,.16); } .desktop-rail-brand { margin-bottom: 50px; font-size: .94rem; } .desktop-rail-links { gap: 8px; } .desktop-rail-links a, .desktop-rail-footer a { min-height: 46px; color: #a8aaad; font-size: .86rem; } .desktop-rail-links a:hover, .desktop-rail-footer a:hover, .desktop-rail-links a.active { background: #1b1e22; color: #fff; } .desktop-rail-links a.active { box-shadow: inset 2px 0 #ff5b1a; } body.app-page { background: radial-gradient(circle at 72% -18%, rgba(255,91,26,.11), transparent 34%), #090b0d !important; color: #f7f7f4; } body.app-page::before { opacity: .025; mix-blend-mode: screen; } body.app-page .ambient-bg { background: radial-gradient(ellipse 65% 45% at 72% -10%, rgba(255,91,26,.1), transparent 72%); } body.app-page > header, body.app-page > main, body.identity-page > .sms-section { width: calc(100% - 244px); margin-left: 244px; margin-right: 0; } body.app-page > header { padding-right: max(32px, calc((100vw - 244px - 1120px) / 2)); padding-left: max(32px, calc((100vw - 244px - 1120px) / 2)); background: rgba(9,11,13,.9) !important; } body.dashboard-page > main, body.protection-page > main { max-width: none; padding-right: max(36px, calc((100vw - 244px - 1160px) / 2)); padding-left: max(36px, calc((100vw - 244px - 1160px) / 2)); } body.inbox-page > main, body.upgrade-page > main, body.identities-page > main, body.identity-page > main, body.identity-page > .sms-section { max-width: none; padding-right: max(36px, calc((100vw - 244px - 940px) / 2)); padding-left: max(36px, calc((100vw - 244px - 940px) / 2)); } body.dashboard-page .ops-card, body.dashboard-page .id-card, body.dashboard-page .onboarding, body.dashboard-page .intel-card, body.identities-page .search-field, body.identities-page .identity-list, body.identities-page .identity-empty, body.inbox-page .inbox-search, body.inbox-page .inbox-message, body.inbox-page .inbox-state, body.inbox-page .inbox-empty, body.identity-page .identity-panel, body.identity-page .panel-controls, body.identity-page .email-row, body.identity-page .sms-section .panel, body.upgrade-page .plan-card, body.protection-page .score-card, body.protection-page .panel, body.protection-page .action-card, body.protection-page .plan-card, body.protection-page .catalog-item { background: #14171b; border-color: rgba(255,255,255,.11); color: #f7f7f4; } body.dashboard-page .id-card, body.identity-page .identity-panel, body.identity-page .sms-section .panel, body.protection-page .score-card { background: linear-gradient(145deg, #181c21, #111418); } body.dashboard-page .cred-row, body.dashboard-page .card-data, body.dashboard-page .card-avatar, body.identity-page .cred-box, body.identity-page .sender-avatar, body.identity-page .viewer-header, body.protection-page .field, body.protection-page .badge, body.protection-page .password-box { background: #1c2025; border-color: rgba(255,255,255,.11); color: #f7f7f4; } body.dashboard-page .card-avatar img, body.identities-page .identity-logo img, body.identity-page .id-site-icon img { background: #20242a; } body.dashboard-page .modal-card { background: #14171b; border-color: rgba(255,255,255,.15); color: #fff; } body.dashboard-page .modal-card h2, body.dashboard-page .form-label { color: #fff; } body.dashboard-page .input-std, body.dashboard-page .domain-select, body.dashboard-page .toggle-row, body.identity-page .input-std { background: #0d1013; border-color: rgba(255,255,255,.15); color: #fff !important; } body.dashboard-page .input-std::placeholder, body.identity-page .input-std::placeholder { color: #8f9398; } body.dashboard-page .btn-shuffle { background: #20242a; border-color: rgba(255,255,255,.14); color: #fff; } body.dashboard-page .btn-primary-full { background: #ff5b1a; color: #fff; } body.protection-page .score-meter { background: #242930; } body.protection-page .plan-card.featured { background: #1c1715; } body.protection-page .badge-risk { background: rgba(255,91,26,.12); color: #ff9a73; } body.identity-page .viewer-card { background: #14171b; } body.upgrade-page .upgrade-header { justify-content: flex-end; } body.upgrade-page .upgrade-back { display: none; } .identity-floating-add, .inbox-floating-action { display: none; } } @media (max-width: 768px) { .app-page .inbox-heading h1, .app-page .inbox-message h2, .app-page .settings-header h1, .app-page .identities-header h1, .app-page .form-label { color: var(--mobile-ink) !important; } .app-page .inbox-heading .eyebrow, .app-page .inbox-message-meta, .app-page .inbox-message-preview, .app-page .inbox-message-body, .app-page .inbox-message-topline { color: var(--mobile-muted); } .app-page .inbox-refresh { border-color: var(--mobile-line); color: var(--mobile-muted); } .app-page .inbox-list, .app-page .inbox-message { border-color: var(--mobile-line); } .app-page .inbox-empty, .app-page .protection-page .score-card, .app-page .protection-page .action-card, .app-page .protection-page .panel, .app-page .protection-page .plan-card, .app-page .protection-page .stat-card, .app-page .identity-page .viewer-card { background: var(--mobile-surface); border-color: var(--mobile-line); } .app-page .protection-page .primary-btn, .app-page .btn-primary-full { background: var(--primary); color: var(--on-primary); } .app-page .protection-page .stat-card { border: 1px solid var(--mobile-line); } .app-page .settings-note, .app-page .settings-account-strip { background: var(--glass-hover); border-color: var(--mobile-line); } }