/* * SiteRevive IQ theme — "deep navy dashboard" direction. * Dark navy sidebar, light gray-blue page body, white cards with a * left accent bar. This is the single source of truth for styling, * linked directly in base.html . Templates use these class names * layered on top of Tailwind utility classes loaded via the Play CDN * script in base.html. */ :root { /* Mirrors [data-theme="obsidianlight"] below — the absolute default theme (see base.html's anti-flash script and SRIQ.getTheme()), so JS-disabled/first-paint renders match it instead of navy. */ --color-primary: #3B82F6; --color-secondary: #2FBF96; --color-page-bg: #F7F7F8; --color-card: #fff; --color-text: #16171A; --color-text-secondary: #6B6B70; --color-border: rgba(0, 0, 0, .08); --color-border-soft: rgba(0, 0, 0, .05); --color-good: #10b981; --color-progress: #3b82f6; --color-warning: #ffa726; --color-danger: #f44336; --sidebar-bg: #000000; --sidebar-bg-hover: #1C1C1E; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; --sidebar-width: 15rem; --sidebar-width-collapsed: 4.5rem; } /* --- Themes: 7 light, 7 dark. Swapped via [data-theme] on . --- Obsidian Light and Obsidian lead their respective groups — they're the paired "true grayscale, no color tint" themes (only the accent is colored) and are the closest thing this app has to a default. Lagoon and Aurora sit right next to them — both pull their primary/ secondary straight from the logo's blue-to-cyan gradient. */ [data-theme="obsidianlight"] { --color-primary: #3B82F6; --color-secondary: #2FBF96; --color-page-bg: #F7F7F8; --color-card: #fff; --color-text: #16171A; --color-text-secondary: #6B6B70; --color-border: rgba(0, 0, 0, .08); --color-border-soft: rgba(0, 0, 0, .05); --sidebar-bg: #000000; --sidebar-bg-hover: #1C1C1E; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); } [data-theme="lagoon"] { --color-primary: #0090FF; --color-secondary: #00C9E8; --color-page-bg: #EFFAFE; --color-card: #fff; --color-text: #0C2B3D; --color-text-secondary: #55788C; --color-border: rgba(12, 43, 61, .08); --color-border-soft: rgba(12, 43, 61, .05); --sidebar-bg: #072C40; --sidebar-bg-hover: #0E3F59; --sidebar-text: #82B4C9; --sidebar-border: rgba(255, 255, 255, .08); } [data-theme="navy"] { --color-primary: #185FA5; --color-secondary: #0F6E56; --color-page-bg: #F4F6F9; --color-card: #fff; --color-text: #12213A; --color-text-secondary: #5F6B80; --color-border: rgba(18, 33, 58, .08); --color-border-soft: rgba(18, 33, 58, .05); --sidebar-bg: #12213A; --sidebar-bg-hover: #1B3357; --sidebar-text: #93A3BD; --sidebar-border: rgba(255, 255, 255, .08); } [data-theme="violet"] { --color-primary: #6D5FCF; --color-secondary: #0F6E56; --color-page-bg: #F5F4FB; --color-card: #fff; --color-text: #211B36; --color-text-secondary: #6B6480; --color-border: rgba(33, 27, 54, .08); --color-border-soft: rgba(33, 27, 54, .05); --sidebar-bg: #241B3A; --sidebar-bg-hover: #322447; --sidebar-text: #A99BC4; --sidebar-border: rgba(255, 255, 255, .08); } [data-theme="forest"] { --color-primary: #1F7A5C; --color-secondary: #185FA5; --color-page-bg: #F2F7F4; --color-card: #fff; --color-text: #142420; --color-text-secondary: #5C7268; --color-border: rgba(20, 36, 32, .08); --color-border-soft: rgba(20, 36, 32, .05); --sidebar-bg: #14261F; --sidebar-bg-hover: #1D362C; --sidebar-text: #8FAE9E; --sidebar-border: rgba(255, 255, 255, .08); } [data-theme="coral"] { --color-primary: #D85A30; --color-secondary: #185FA5; --color-page-bg: #FBF4F1; --color-card: #fff; --color-text: #2E1B14; --color-text-secondary: #82675C; --color-border: rgba(46, 27, 20, .08); --color-border-soft: rgba(46, 27, 20, .05); --sidebar-bg: #2E1B14; --sidebar-bg-hover: #3E2620; --sidebar-text: #C4A499; --sidebar-border: rgba(255, 255, 255, .08); } [data-theme="rose"] { --color-primary: #B03A5B; --color-secondary: #185FA5; --color-page-bg: #FBF3F5; --color-card: #fff; --color-text: #2A1620; --color-text-secondary: #7C5C68; --color-border: rgba(42, 22, 32, .08); --color-border-soft: rgba(42, 22, 32, .05); --sidebar-bg: #2A1620; --sidebar-bg-hover: #3A1F2C; --sidebar-text: #C09AAB; --sidebar-border: rgba(255, 255, 255, .08); } [data-theme="obsidian"] { --color-primary: #3B82F6; --color-secondary: #2FBF96; --color-page-bg: #0A0A0B; --color-card: #161616; --color-text: #F2F2F2; --color-text-secondary: #9A9A9E; --color-border: rgba(255, 255, 255, .1); --color-border-soft: rgba(255, 255, 255, .06); --sidebar-bg: #000000; --sidebar-bg-hover: #1C1C1E; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); } [data-theme="aurora"] { --color-primary: #22D3EE; --color-secondary: #3B82F6; --color-page-bg: #071019; --color-card: #0F2027; --color-text: #E4F6FA; --color-text-secondary: #86A9B4; --color-border: rgba(228, 246, 250, .1); --color-border-soft: rgba(228, 246, 250, .06); --sidebar-bg: #030B10; --sidebar-bg-hover: #0B1E28; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); } [data-theme="midnight"] { --color-primary: #4F9CE8; --color-secondary: #2FBF96; --color-page-bg: #0B1420; --color-card: #121E2E; --color-text: #E6EDF5; --color-text-secondary: #8493A8; --color-border: rgba(230, 237, 245, .1); --color-border-soft: rgba(230, 237, 245, .06); --sidebar-bg: #060B12; --sidebar-bg-hover: #101C2C; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); } [data-theme="charcoal"] { --color-primary: #9B8FEA; --color-secondary: #4F9CE8; --color-page-bg: #17181C; --color-card: #1F2126; --color-text: #EDEDEF; --color-text-secondary: #9A9BA3; --color-border: rgba(237, 237, 239, .1); --color-border-soft: rgba(237, 237, 239, .06); --sidebar-bg: #0E0F12; --sidebar-bg-hover: #1A1C21; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); } [data-theme="deepforest"] { --color-primary: #4FBF8F; --color-secondary: #4F9CE8; --color-page-bg: #0E1712; --color-card: #16211A; --color-text: #E4EDE7; --color-text-secondary: #8FA396; --color-border: rgba(228, 237, 231, .1); --color-border-soft: rgba(228, 237, 231, .06); --sidebar-bg: #081009; --sidebar-bg-hover: #122016; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); } [data-theme="espresso"] { --color-primary: #E0894F; --color-secondary: #4F9CE8; --color-page-bg: #1B1512; --color-card: #251E19; --color-text: #F0E8E1; --color-text-secondary: #A8988A; --color-border: rgba(240, 232, 225, .1); --color-border-soft: rgba(240, 232, 225, .06); --sidebar-bg: #120D0A; --sidebar-bg-hover: #201810; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); } [data-theme="plumnight"] { --color-primary: #D97AAE; --color-secondary: #4F9CE8; --color-page-bg: #180F18; --color-card: #221525; --color-text: #EDE3EE; --color-text-secondary: #A192A5; --color-border: rgba(237, 227, 238, .1); --color-border-soft: rgba(237, 227, 238, .06); --sidebar-bg: #0D070E; --sidebar-bg-hover: #1B0F1D; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-border: rgba(255, 255, 255, .06); } * { box-sizing: border-box; } body { background-color: var(--color-page-bg); color: var(--color-text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* --- Cards --- */ .card { background: var(--color-card); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 22px color-mix(in srgb, var(--color-primary) 9%, transparent); transition: box-shadow .2s ease; } .card-accent { border-left-width: 4px; border-left-style: solid; border-radius: var(--radius-md); } .card-interactive { transition: all .15s ease, box-shadow .2s ease; } .card-interactive:hover { border-color: var(--color-primary); background-color: color-mix(in srgb, var(--color-card) 92%, var(--color-text) 8%); box-shadow: 0 4px 18px rgba(0, 0, 0, .1), 0 0 34px color-mix(in srgb, var(--color-primary) 24%, transparent); } /* Obsidian is a true black/grayscale theme — a colored glow would clash, so cards get a soft white glow there instead of the usual primary-tinted one. */ [data-theme="obsidian"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 255, 255, .05); } [data-theme="obsidian"] .card-interactive:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 255, 255, .13); } /* --- Roadmap phase stepper --- */ .phase-step-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; flex-shrink: 0; } .phase-step-line { flex: 1; height: 2px; background: var(--color-border); margin: 0 6px 20px; } .phase-number-badge { width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; } /* --- Toggle switch --- */ .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-switch .toggle-track { position: absolute; inset: 0; background: rgba(128, 128, 128, .3); border-radius: 20px; cursor: pointer; transition: background-color .15s ease; } .toggle-switch .toggle-track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; } .toggle-switch input:checked + .toggle-track { background: var(--color-primary); } .toggle-switch input:checked + .toggle-track::before { transform: translateX(18px); } /* --- Disclosure (native details/summary) --- */ .disclosure { border-top: 1px solid var(--color-border-soft); } .disclosure:first-child { border-top: none; } .disclosure summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .disclosure summary::-webkit-details-marker { display: none; } .disclosure summary .chevron { transition: transform .15s ease; flex-shrink: 0; } .disclosure[open] summary .chevron { transform: rotate(90deg); } /* --- Settings rows --- */ .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border-soft); } .settings-row:last-child { border-bottom: none; } .settings-row-label { font-size: 13px; font-weight: 500; color: var(--color-text); margin: 0 0 2px; } .settings-row-desc { font-size: 12px; color: var(--color-text-secondary); margin: 0; } /* --- Theme picker swatches --- */ .theme-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; } .theme-swatch { border: none; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; } .theme-swatch-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 2px solid rgba(128, 128, 128, .3); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .theme-swatch:hover .theme-swatch-preview { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent); } .theme-swatch.selected .theme-swatch-preview { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent); } .theme-swatch-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; } .theme-swatch-dot { position: absolute; right: 10px; bottom: 10px; width: 12px; height: 12px; border-radius: 50%; } .theme-swatch-check { display: none; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; color: #fff; background: var(--color-primary); border-radius: 50%; padding: 2px; } .theme-swatch.selected .theme-swatch-check { display: block; } .theme-swatch-label { font-size: 12px; font-weight: 500; color: var(--color-text); } /* --- Progress bar --- */ .progress-track { height: 6px; background: var(--color-page-bg); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: var(--color-primary); border-radius: 4px; transition: width .3s ease; } .progress-fill-indeterminate { width: 40%; animation: progress-indeterminate 1.2s ease-in-out infinite; } @keyframes progress-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } /* --- Score ring --- */ .score-ring-track { stroke: var(--color-border); } .score-ring-fill.score-ring-good { stroke: var(--color-good); } .score-ring-fill.score-ring-warn { stroke: var(--color-warning); } .score-ring-fill.score-ring-danger { stroke: var(--color-danger); } .score-ring-text { font-size: 15px; font-weight: 500; fill: var(--color-text); } /* --- Icon chips (used inside metric/stat cards) --- */ .icon-chip { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* --- Sidebar (dark navy) --- */ #sidebar { background-color: var(--sidebar-bg) !important; } #sidebar .sidebar-divider { border-color: var(--sidebar-border) !important; } #sidebar .sidebar-logo-text { color: #fff; } .sidebar-icon-btn { color: var(--sidebar-text); border-radius: 8px; } .sidebar-icon-btn:hover { background-color: var(--sidebar-bg-hover); color: #fff; } .sidebar-item { border-radius: 8px; border-left: 3px solid transparent; color: var(--sidebar-text); font-weight: 500; transition: all .2s ease; white-space: nowrap; overflow: hidden; } .sidebar-item:hover { background-color: var(--sidebar-bg-hover); color: #fff; } .sidebar-item.active { background-color: color-mix(in srgb, var(--color-primary) 18%, transparent); border-left-color: var(--color-primary); color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 22%, transparent); } [data-theme="obsidian"] .sidebar-item.active, [data-theme="obsidianlight"] .sidebar-item.active { /* Both themes share the exact same black sidebar + blue accent, so the same clash the plain blue glow has against a pure-black sidebar in Obsidian reproduces identically here — same fix applies. */ box-shadow: 0 0 18px rgba(255, 255, 255, .08); } .sidebar-footer { color: var(--sidebar-text); } .sidebar-footer-link { color: var(--sidebar-text); } .sidebar-footer-link:hover { color: #fff; } /* --- Top bar (notifications / quick add / account) --- */ .topbar { padding-bottom: 14px; border-bottom: 1px solid var(--color-border); } .topbar-icon-btn { position: relative; color: var(--color-text-secondary); border-radius: 8px; } .topbar-icon-btn:hover { background-color: var(--color-border-soft); color: var(--color-text); } .topbar-badge { position: absolute; top: 3px; right: 3px; background-color: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 15px; height: 15px; line-height: 15px; text-align: center; padding: 0 3px; } .account-menu { position: relative; } .account-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; background-color: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0, 0, 0, .24); min-width: 210px; padding: 6px; z-index: 50; } .account-menu-panel.hidden { display: none; } .account-menu-email { padding: 8px 10px 8px; font-size: 12px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-soft); margin-bottom: 4px; word-break: break-all; } .account-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--color-text); text-align: left; background: none; border: none; cursor: pointer; text-decoration: none; } .account-menu-item:hover { background-color: var(--color-border-soft); } /* --- Section eyebrow labels --- */ .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--color-text-secondary); } /* --- Empty states --- */ .empty-state { border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: 32px 20px; text-align: center; } .empty-state-title { font-size: 13px; font-weight: 500; color: var(--color-text); margin: 0 0 4px; } .empty-state-subtitle { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 12px; } /* --- Buttons --- */ .btn-primary { background-color: var(--color-primary); color: #fff; border-radius: 8px; font-weight: 500; transition: all .2s ease; display: inline-block; text-decoration: none; border: none; cursor: pointer; } .btn-primary:hover { filter: brightness(0.92); box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 45%, transparent); } [data-theme="obsidian"] .btn-primary:hover { box-shadow: 0 4px 20px rgba(255, 255, 255, .18); } .btn-ghost { background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 8px; font-weight: 500; display: inline-block; text-decoration: none; cursor: pointer; } .btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn-danger { background: none; border: 1px solid rgba(244, 67, 54, .25); color: var(--color-danger); border-radius: 8px; font-weight: 500; cursor: pointer; } /* --- Confirmation dialogs (e.g. account deletion) --- */ .link-danger { font-size: 12px; color: var(--color-text-secondary); text-decoration: underline; text-decoration-color: transparent; background: none; border: none; cursor: pointer; padding: 0; transition: color .15s ease, text-decoration-color .15s ease; } .link-danger:hover { color: var(--color-danger); text-decoration-color: currentColor; } dialog.confirm-dialog { border: none; border-radius: 12px; padding: 0; max-width: 420px; width: 90%; background: var(--color-card); color: var(--color-text); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); } dialog.confirm-dialog::backdrop { background: rgba(0, 0, 0, .5); } dialog.confirm-dialog .confirm-dialog-body { padding: 24px; } dialog.confirm-dialog h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; } dialog.confirm-dialog p { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 16px; line-height: 1.5; } dialog.confirm-dialog input[type="password"] { width: 100%; margin-bottom: 16px; } dialog.confirm-dialog .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } /* --- Status pills --- */ .pill { border-radius: 20px; font-size: 11px; font-weight: 500; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; } .pill-good { background: color-mix(in srgb, var(--color-good) 16%, transparent); color: var(--color-good); } .pill-progress { background: color-mix(in srgb, var(--color-progress) 16%, transparent); color: var(--color-progress); } .pill-warn { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); } .pill-danger { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger); } .pill-neutral { background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent); color: var(--color-text-secondary); } .text-muted-faded { color: color-mix(in srgb, var(--color-text-secondary) 60%, transparent); } /* --- Data tables --- */ table.data th { color: var(--color-text-secondary); font-size: 10px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; border-bottom: 1px solid var(--color-border-soft); } table.data td { border-bottom: 1px solid var(--color-border-soft); font-size: 13px; } table.data tbody tr { transition: background-color .12s ease; } table.data tbody tr:hover { background-color: color-mix(in srgb, var(--color-primary) 6%, transparent); } [data-theme="obsidian"] table.data tbody tr:hover { background-color: rgba(255, 255, 255, .04); } /* --- Form fields --- */ input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; width: 100%; font-family: inherit; font-size: 14px; background-color: var(--color-card); color: var(--color-text); } textarea { resize: vertical; line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); } .fix-snippet-box { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 12.5px !important; background-color: color-mix(in srgb, var(--color-text) 5%, var(--color-card)) !important; color: var(--color-text); white-space: pre; overflow-x: auto; } .fix-snippet-box:focus { border-color: var(--color-border); box-shadow: none; } /* --- Drawer sidebar (collapsible) --- */ #sidebar { width: var(--sidebar-width); top: 0; left: 0; transition: width .18s ease, transform .18s ease; } #sidebar .sidebar-label, #sidebar .sidebar-logo-text { transition: opacity .12s ease; } #main-content { margin-left: var(--sidebar-width); transition: margin-left .18s ease; } .no-sidebar #main-content { margin-left: 0; } html.drawer-collapsed #sidebar { width: var(--sidebar-width-collapsed); } html.drawer-collapsed #sidebar .sidebar-label, html.drawer-collapsed #sidebar .sidebar-logo-text, html.drawer-collapsed #sidebar .sidebar-footer-text { display: none; } html.drawer-collapsed #sidebar .sidebar-item { justify-content: center; } /* --- Icon-prefixed inputs (e.g. website URL field) --- */ .input-icon-wrap { position: relative; } .input-icon-wrap .input-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--color-text-secondary); pointer-events: none; } .input-icon-wrap input { padding-left: 33px; } /* --- Website type picker (radio cards) --- */ .type-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .type-picker-card { position: relative; display: block; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 8px 12px; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .type-picker-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; } .type-picker-card:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); } .type-picker-card:has(input:checked) { border-color: var(--color-primary); border-width: 1.5px; background-color: color-mix(in srgb, var(--color-primary) 7%, var(--color-card)); } .type-picker-icon { width: 17px; height: 17px; color: var(--color-text-secondary); margin: 0 auto 6px; display: block; } .type-picker-card:has(input:checked) .type-picker-icon { color: var(--color-primary); } .type-picker-label { display: block; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); } .type-picker-card:has(input:checked) .type-picker-label { color: var(--color-primary); } /* --- Grouped form subsection (e.g. "Scan settings") --- */ .form-subsection { border: 1px solid var(--color-border-soft); border-radius: 10px; padding: 14px 16px 16px; } .form-subsection-title { font-size: 12px; font-weight: 600; color: var(--color-text); margin-bottom: 2px; } .form-subsection-desc { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 12px; } html.drawer-collapsed #main-content { margin-left: var(--sidebar-width-collapsed); } /* --- Notifications list --- */ .notification-item { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--color-border-soft); border-radius: 12px; padding: 14px 16px; background-color: var(--color-card); } .notification-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-primary); margin-top: 6px; flex-shrink: 0; } .notification-dot-spacer { width: 8px; flex-shrink: 0; } .notification-item.is-read { background-color: var(--color-page-bg); border-color: transparent; } .notification-item.is-read .notification-title { color: var(--color-text-secondary); } .notification-item.is-read .notification-message { color: var(--color-text-secondary); opacity: .8; } .icon-chip-sm { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-chip-danger { background-color: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); } .icon-chip-good { background-color: color-mix(in srgb, var(--color-good) 15%, transparent); color: var(--color-good); } .icon-chip-warn { background-color: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); } .icon-chip-secondary { background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent); color: var(--color-secondary); } .notification-item.is-read .icon-chip-sm { background-color: color-mix(in srgb, var(--color-text-secondary) 12%, transparent); color: var(--color-text-secondary); } .notification-title { font-size: 14px; font-weight: 500; color: var(--color-text); } .notification-message { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.5; } /* --- Demo mode toggle (topbar) --- */ .topbar-demo-toggle { padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--color-border); font-size: 13px; font-weight: 500; color: var(--color-text-secondary); } /* --- Demo mode guided tour --- */ .tour-svg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 900; } .tour-svg line, #tour-connector-line { stroke: var(--color-primary); stroke-width: 2; stroke-dasharray: 5 5; opacity: .65; } .tour-svg line.hidden, #tour-connector-line.hidden { display: none; } .tour-highlight { position: fixed; border: 2px solid var(--color-primary); border-radius: var(--radius-sm); box-shadow: 0 0 0 4000px rgba(0, 0, 0, .35), 0 0 24px color-mix(in srgb, var(--color-primary) 55%, transparent); pointer-events: none; z-index: 890; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; animation: tour-pulse 1.8s ease-in-out infinite; } .tour-highlight.hidden { display: none; } @keyframes tour-pulse { 0%, 100% { box-shadow: 0 0 0 4000px rgba(0, 0, 0, .35), 0 0 24px color-mix(in srgb, var(--color-primary) 55%, transparent); } 50% { box-shadow: 0 0 0 4000px rgba(0, 0, 0, .35), 0 0 36px color-mix(in srgb, var(--color-primary) 80%, transparent); } } [data-theme="obsidian"] .tour-highlight { border-color: #fff; box-shadow: 0 0 0 4000px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 255, 255, .45); } [data-theme="obsidian"] .tour-svg line, [data-theme="obsidian"] #tour-connector-line { stroke: #fff; } @keyframes tour-pulse-obsidian { 0%, 100% { box-shadow: 0 0 0 4000px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 255, 255, .45); } 50% { box-shadow: 0 0 0 4000px rgba(0, 0, 0, .55), 0 0 38px rgba(255, 255, 255, .7); } } [data-theme="obsidian"] .tour-highlight { animation-name: tour-pulse-obsidian; } .tour-window { position: fixed; top: 78px; right: 24px; width: 320px; max-width: calc(100vw - 32px); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 8px 28px rgba(0, 0, 0, .18), 0 0 30px color-mix(in srgb, var(--color-primary) 20%, transparent); z-index: 910; overflow: hidden; } .tour-window.hidden { display: none; } [data-theme="obsidian"] .tour-window { box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 255, 255, .12); } .tour-window-handle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card)); border-bottom: 1px solid var(--color-border); cursor: grab; user-select: none; } .tour-window-handle:active { cursor: grabbing; } .tour-window-title { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tour-window-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--color-text-secondary); background: transparent; border: none; cursor: pointer; } .tour-window-close:hover { background: color-mix(in srgb, var(--color-danger, #C0392B) 15%, transparent); color: var(--color-danger, #C0392B); } .tour-window-body { padding: 14px 14px 6px; } .tour-step-text { font-size: 13.5px; line-height: 1.55; color: var(--color-text); margin: 0; } .tour-window-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; } .tour-step-counter { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; } .tour-window-controls { display: flex; align-items: center; gap: 6px; } .tour-ctrl-btn { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease; } .tour-ctrl-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); } .tour-ctrl-btn:disabled { opacity: .4; cursor: not-allowed; } .tour-ctrl-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .tour-ctrl-btn-primary:hover:not(:disabled) { color: #fff; opacity: .9; } /* --- Proposal pricing/investment --- */ .investment-callout { text-align: center; } .investment-amount { font-size: 32px; font-weight: 700; color: var(--color-primary); letter-spacing: -0.02em; line-height: 1.2; } .pricing-card { padding: 0; overflow: hidden; } .pricing-phase { padding: 14px 18px; border-bottom: 1px solid var(--color-border-soft); } .pricing-phase:last-child { border-bottom: none; } .pricing-phase-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; gap: 10px; } .pricing-phase-header .phase-name { font-size: 13px; font-weight: 600; } .pricing-phase-header .phase-subtotal { font-size: 13px; font-weight: 600; color: var(--color-primary); white-space: nowrap; } .pricing-item-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: var(--color-text-secondary); padding: 2px 0; gap: 10px; } .pricing-item-row .price { color: var(--color-text); font-weight: 500; white-space: nowrap; } .pricing-total-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: color-mix(in srgb, var(--color-primary) 7%, transparent); border-top: 1px solid var(--color-border); } .pricing-total-row .label { font-size: 13px; font-weight: 600; } .pricing-total-row .amount { font-size: 20px; font-weight: 700; color: var(--color-primary); } .pricing-empty-state { padding: 20px 18px; font-size: 13px; color: var(--color-text-secondary); } /* --- Proposal phase cards --- */ .phase-plan-card { margin-bottom: 14px; } .phase-plan-card:last-child { margin-bottom: 0; } .phase-plan-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-soft); } .phase-plan-title { font-size: 14px; font-weight: 600; } .phase-plan-subtotal { font-size: 13px; font-weight: 600; color: var(--color-primary); white-space: nowrap; } .phase-plan-item { padding: 10px 0; border-bottom: 1px solid var(--color-border-soft); } .phase-plan-item:last-child { border-bottom: none; padding-bottom: 0; } .phase-plan-item:first-child { padding-top: 0; } .phase-plan-item-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .phase-plan-item-title { font-size: 13px; font-weight: 600; } .phase-plan-item-price { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; } .phase-plan-item-notes { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin-top: 4px; } .phase-plan-effort { margin-top: 7px; } /* --- Proposal at-a-glance summary panel --- */ .proposal-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .proposal-summary-stat { padding: 0 18px; text-align: center; } .proposal-summary-stat:first-child { padding-left: 0; } .proposal-summary-stat:last-child { padding-right: 0; } .proposal-summary-stat + .proposal-summary-stat { border-left: 1px solid var(--color-border-soft); } .proposal-summary-value { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--color-text); } .proposal-summary-unit { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); } .proposal-summary-value-accent { color: var(--color-primary); font-size: 19px; } @media (max-width: 640px) { .proposal-summary-grid { grid-template-columns: repeat(2, 1fr); row-gap: 16px; } .proposal-summary-stat:nth-child(3) { border-left: none; } .proposal-summary-stat:nth-child(odd) { padding-left: 0; } .proposal-summary-stat:nth-child(even) { padding-right: 0; } } .notification-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; } /* --- Client-facing report shell (white-label preview) --- */ .client-report-shell { max-width: 860px; margin: 0 auto; padding: 2.5rem 0; } .client-report-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--color-border-soft); padding-bottom: 20px; flex-wrap: wrap; } .client-report-brandmark { width: 34px; height: 34px; border-radius: 9px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .client-report-footer { text-align: center; font-size: 12px; color: var(--color-text-secondary); margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-soft); } /* --- Report branding fields (Settings > Workspace preview) --- */ .branding-logo-upload { display: flex; align-items: center; gap: 12px; } .branding-logo-preview { width: 44px; height: 44px; border-radius: 10px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* --- Core Web Vitals preview tiles --- */ .cwv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cwv-grid-2 { grid-template-columns: repeat(2, 1fr); } .cwv-tile { border: 1px solid var(--color-border-soft); border-radius: 12px; padding: 16px 18px; } .cwv-tile-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; } .cwv-tile-value { font-size: 26px; font-weight: 500; color: var(--color-text); line-height: 1; } .cwv-tile-unit { font-size: 13px; color: var(--color-text-secondary); font-weight: 400; margin-left: 2px; } .cwv-tile-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.5; } .cwv-tile-bar-track { height: 5px; border-radius: 3px; background-color: color-mix(in srgb, var(--color-text-secondary) 15%, transparent); margin-top: 12px; overflow: hidden; } .cwv-tile-bar-fill { height: 100%; border-radius: 3px; } .cwv-tile-bar-fill.cwv-good { background-color: var(--color-good); } .cwv-tile-bar-fill.cwv-warn { background-color: var(--color-warning); } .cwv-tile-bar-fill.cwv-poor { background-color: var(--color-danger); } /* --- Sortable table column headers --- */ .sort-header { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; } .sort-header:hover { color: var(--color-primary); } .sort-header-active { color: var(--color-primary); } /* --- Login page decorative background --- A soft two-color glow in the logo brand colors (#0090FF -> #00C9E8), pinned to the actual browser viewport (position: fixed; inset: 0) so it floods the full screen edge-to-edge on any size display. Built as percentage-anchored radial-gradients rather than fixed-pixel blurred circles — a fixed-size shape either leaves a bare gap in the middle on a wide screen or overflows badly on a narrow one; gradients sized as percentages of the viewport scale correctly either way. Colors are hardcoded to the logo gradient (not var(--color-primary)) so this always reads as on-brand regardless of which theme is active. */ .login-hero-bg::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 8% 8%, rgba(0, 144, 255, 0.34) 0%, rgba(0, 144, 255, 0) 48%), radial-gradient(circle at 92% 92%, rgba(0, 201, 232, 0.36) 0%, rgba(0, 201, 232, 0) 48%); }