/* ═══════════════════════════════════════════════════ REDFLAG DESIGN SYSTEM — v1.0 Shared tokens, typography, components ═══════════════════════════════════════════════════ */ /* Fonts load from each HTML (preconnect + ) — avoids @import blocking first paint. */ /* ── TOKENS ── */ :root { /* Brand */ --rf-teal: #13BBAF; --rf-teal-dark: #0d8f86; /* Primary CTA green: white text meets WCAG AA 4.5:1 (body-sized bold still needs this on filled buttons). */ --rf-primary-cta: #1a6d38; --rf-primary-cta-hover: #155e2f; --rf-primary-cta-active: #124f28; /* Dev / state bar: teal fill behind white label text (brighter brand teal fails AA). */ --rf-teal-state-active: #0f766e; /* KPI “Needs Attention”, vs prior deltas, View issues — one alert red (AA on white). */ --rf-alert-red: #b91c1c; --rf-alert-red-hover: #991b1b; /* Issue counts: fewer vs prior (trend down) — positive signal, AA on white. */ --rf-trend-improve: #047857; --rf-teal-mid: #67d5cf; --rf-teal-light: #e8f9f8; --rf-teal-subtle: #f0fefe; /* Neutrals */ --rf-black: #0a0e1a; --rf-gray-900: #111827; --rf-gray-700: #374151; --rf-gray-600: #4b5563; --rf-gray-500: #6b7280; --rf-gray-400: #9ca3af; --rf-gray-300: #d1d5db; --rf-gray-200: #e5e7eb; --rf-gray-100: #f3f4f6; --rf-gray-50: #f9fafb; --rf-white: #ffffff; /* Severity */ --rf-critical: #ef4444; --rf-critical-bg: #fef2f2; --rf-critical-border: #fecaca; --rf-serious: #f97316; --rf-serious-bg: #fff7ed; --rf-serious-border: #fed7aa; --rf-moderate: #d97706; --rf-moderate-bg: #fffbeb; --rf-moderate-border: #fde68a; --rf-minor: #3b82f6; --rf-minor-bg: #eff6ff; --rf-minor-border: #bfdbfe; --rf-resolved: #16a34a; --rf-resolved-bg: #f0fdf4; --rf-resolved-border: #bbf7d0; /* Status */ --rf-status-open: #6b7280; --rf-status-wip: #d97706; --rf-status-verify: #3b82f6; --rf-status-fixed: #16a34a; /* Sidebar */ --rf-sidebar-bg: #0f1623; --rf-sidebar-border: rgba(255,255,255,0.06); --rf-sidebar-text: rgba(255,255,255,0.55); --rf-sidebar-active: rgba(255,255,255,0.10); --rf-sidebar-hover: rgba(255,255,255,0.06); /* Surfaces */ --rf-surface: #ffffff; --rf-surface-raised: #ffffff; --rf-surface-container: #f4f5f7; --rf-border: #e8eaed; --rf-border-subtle: #f0f2f4; /* Frosted shell — shared by light sidebar + topbar (one continuous glass over page wash) */ --rf-glass-frost-a: linear-gradient( 165deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 44%, rgba(248, 250, 252, 0.1) 100% ); --rf-glass-frost-b: linear-gradient( 90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.08) 100% ); --rf-glass-backdrop: blur(44px) saturate(2.08) contrast(1.05) brightness(1.03); /* Shadows */ --rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --rf-shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04); --rf-shadow-lg: 0 12px 40px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04); /* Radius */ --rf-radius-xs: 4px; --rf-radius-sm: 6px; --rf-radius-md: 8px; --rf-radius-lg: 12px; --rf-radius-xl: 16px; --rf-radius-2xl: 20px; --rf-radius-full: 9999px; /* Buttons — shared geometry (primary / secondary / tertiary) */ --rf-btn-radius: 10px; /* Typography */ --rf-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --rf-font-mono: 'JetBrains Mono', 'Fira Code', monospace; } /* ── BASE RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--rf-font-sans); background: var(--rf-surface-container); color: var(--rf-gray-900); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── MATERIAL ICONS ── */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; flex-shrink: 0; } .icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .icon-sm { font-size: 16px; } /* Compliance row status (Recent Domains, etc.): lock glyph box + opsz to font-size so icons match across pages */ .rf-dash-compliance-labels .rf-dash-domain-status .material-symbols-outlined.icon-sm { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .rf-dash-compliance-labels .rf-dash-domain-status .material-symbols-outlined.icon-sm.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .icon-md { font-size: 20px; } .icon-lg { font-size: 24px; } /* ── APP SHELL ── */ /* Transparent so fixed sidebar/topbar blur the same base as the page (body), not a second solid wash */ .rf-app { display: flex; min-height: 100vh; background: transparent; } /* ── SIDEBAR (light — same glass tokens as .rf-topbar; no isolation so backdrop samples the page) ── */ .rf-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; background: var(--rf-glass-frost-a), var(--rf-glass-frost-b); border-right: none; /* Top highlight + soft vertical “pane edge” between rail and main (no heavy side drop shadow) */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset -1px 0 0 rgba(255, 255, 255, 0.62), inset -2px 0 0 rgba(148, 163, 184, 0.22); -webkit-backdrop-filter: var(--rf-glass-backdrop); backdrop-filter: var(--rf-glass-backdrop); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .rf-sidebar:not(.rf-sidebar--dark) { background: rgba(248, 250, 252, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset -1px 0 0 rgba(255, 255, 255, 0.55), inset -2px 0 0 rgba(148, 163, 184, 0.18); } } .rf-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 20px 16px 18px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); text-decoration: none; cursor: default; } .rf-logo-mark { width: 32px; height: 32px; border-radius: 0; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rf-logo-mark svg { width: 22px; height: 22px; } .rf-logo-mark svg path { fill: #dc2626; opacity: 1; } .rf-logo-mark svg line { stroke: #dc2626; } .rf-logo-text { font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -0.025em; line-height: 1; font-family: var(--rf-font-sans); } .rf-logo-sub { font-size: 11px; font-weight: 600; color: #64748b; margin-top: 3px; letter-spacing: 0.01em; } .rf-logo-plan { font-size: 10px; font-weight: 700; color: #94a3b8; margin-top: 4px; letter-spacing: 0.02em; line-height: 1.2; } /* Plan tier outside sidebar rail — same type + green as `.rf-sidebar-nav > .rf-logo-plan--nav-top` */ .rf-logo-plan.rf-logo-plan--inline { display: inline-block; margin: 4px 0 0; padding: 0; text-align: left; border: none; color: var(--rf-resolved); } .rf-sidebar--dark .rf-logo-plan { color: rgba(255, 255, 255, 0.42); } /* First line inside sidebar nav: plan tier, right-aligned (light rail) */ .rf-sidebar-nav > .rf-logo-plan--nav-top { display: block; margin: 0; padding: 12px 10px 10px; text-align: right; border-bottom: 1px solid rgba(148, 163, 184, 0.12); color: var(--rf-resolved); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; } .rf-sidebar--dark .rf-sidebar-nav > .rf-logo-plan--nav-top { border-bottom-color: rgba(255, 255, 255, 0.08); color: #86efac; } .rf-sidebar-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 20px 10px 12px; overflow-y: auto; } /* Push Account (Settings / Upgrade) to the bottom so Upgrade isn’t visually stacked under Domains — fewer mis-taps. */ .rf-sidebar-nav > .rf-nav-section:last-of-type:not(:first-of-type) { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.14); } .rf-sidebar-nav:has(> .rf-logo-plan--nav-top) { padding-top: 0; } .rf-sidebar-nav:has(> .rf-logo-plan--nav-top) > .rf-nav-section:first-of-type { padding-top: 12px; } .rf-sidebar-nav > .rf-nav-section:first-of-type { margin-top: 12px; } .rf-nav-section { margin-bottom: 20px; } .rf-nav-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; padding: 0 6px; margin-bottom: 6px; } .rf-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--rf-radius-md); font-size: 14px; font-weight: 600; color: #475569; text-decoration: none; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; cursor: pointer; border: 1px solid transparent; background: transparent; box-shadow: none; width: 100%; text-align: left; margin: 0 2px 4px; font-family: var(--rf-font-sans); box-sizing: border-box; } .rf-nav-item:hover:not(.active) { background: rgba(148, 163, 184, 0.16); color: #0f172a; } .rf-nav-item.active { background: rgba(148, 163, 184, 0.16); color: #0f172a; } .rf-nav-item .material-symbols-outlined { font-size: 18px; opacity: 0.85; } .rf-nav-item.active .material-symbols-outlined { opacity: 1; color: inherit; } .rf-nav-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--rf-radius-full); background: rgba(239, 68, 68, 0.12); color: #b91c1c; } .rf-nav-item.active .rf-nav-badge { background: rgba(239, 68, 68, 0.12); color: #b91c1c; } .rf-sidebar-footer { padding: 12px 10px 16px; border-top: 1px solid rgba(148, 163, 184, 0.12); } .rf-user-pill { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--rf-radius-md); cursor: pointer; transition: background 0.15s; } .rf-user-pill:hover { background: rgba(148, 163, 184, 0.12); } .rf-avatar { width: 30px; height: 30px; border-radius: var(--rf-radius-full); background: var(--rf-teal); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; } .rf-avatar-lg { width: 40px; height: 40px; font-size: 16px; } .rf-user-name { font-size: 13px; font-weight: 700; color: #1e293b; line-height: 1; } .rf-user-plan { font-size: 10px; font-weight: 700; color: #64748b; letter-spacing: 0.06em; margin-top: 2px; } /* Dark sidebar (admin) */ .rf-sidebar--dark { background: #080d17; border-right: 1px solid var(--rf-sidebar-border); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .rf-sidebar--dark .rf-sidebar-logo { border-bottom-color: var(--rf-sidebar-border); } .rf-sidebar--dark .rf-logo-text { color: #ffffff; } .rf-sidebar--dark .rf-logo-sub { color: rgba(255, 255, 255, 0.5); } .rf-sidebar--dark .rf-nav-label { color: rgba(255, 255, 255, 0.3); } .rf-sidebar--dark .rf-nav-item { color: var(--rf-sidebar-text); } .rf-sidebar--dark .rf-nav-item:hover:not(.active) { background: var(--rf-sidebar-hover); color: rgba(255, 255, 255, 0.85); } .rf-sidebar--dark .rf-nav-item.active { background: var(--rf-sidebar-hover); color: rgba(255, 255, 255, 0.85); } .rf-sidebar--dark .rf-nav-badge { background: rgba(239, 68, 68, 0.25); color: #fca5a5; } .rf-sidebar--dark .rf-nav-item.active .rf-nav-badge { background: rgba(255, 255, 255, 0.12); color: #f1f5f9; } .rf-sidebar--dark .rf-sidebar-footer { border-top-color: var(--rf-sidebar-border); } .rf-sidebar--dark .rf-user-pill:hover { background: var(--rf-sidebar-hover); } .rf-sidebar--dark .rf-user-name { color: rgba(255, 255, 255, 0.85); } .rf-sidebar--dark .rf-user-plan { color: var(--rf-teal-mid); } .rf-sidebar--dark .rf-avatar { background: var(--rf-teal); } /* ── MAIN CONTENT ── */ .rf-main { flex: 1; margin-left: 220px; min-height: 100vh; display: flex; flex-direction: column; } .rf-topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 40; isolation: isolate; background: var(--rf-glass-frost-a), var(--rf-glass-frost-b); border-bottom: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(148, 163, 184, 0.12), 0 10px 40px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.03); -webkit-backdrop-filter: var(--rf-glass-backdrop); backdrop-filter: var(--rf-glass-backdrop); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .rf-topbar { background: rgba(248, 250, 252, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(148, 163, 184, 0.12); } } .rf-topbar-left { display: flex; align-items: center; gap: 8px; } .rf-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; } .rf-breadcrumb-item { color: var(--rf-gray-400); font-weight: 500; } .rf-breadcrumb-item.active { color: var(--rf-gray-900); font-weight: 700; } .rf-breadcrumb-sep { color: var(--rf-gray-300); font-size: 16px; } .rf-topbar-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } /* Topbar user (moved from sidebar footer on app pages) */ .rf-topbar-user { display: inline-flex; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border-radius: var(--rf-radius-md); text-decoration: none; color: inherit; transition: background 0.15s; border: none; background: none; cursor: pointer; font: inherit; text-align: left; } .rf-topbar-user:hover { background: rgba(148, 163, 184, 0.16); } .rf-topbar-user .rf-avatar { width: 28px; height: 28px; font-size: 11px; } .rf-topbar-user .rf-user-name { color: #1e293b; font-weight: 600; } .rf-topbar-user .rf-user-plan { color: #64748b; font-weight: 700; letter-spacing: 0.06em; margin-top: 1px; } .rf-topbar-user .rf-user-chevron { color: #94a3b8; margin-left: 2px; } /* Chrome extension CTA (dashboard) — glass chip; radius matches --rf-btn-radius */ .rf-extension-notice { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 40px; } .rf-install-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 16px 5px 5px; border-radius: var(--rf-btn-radius); border: 1.5px solid rgba(15, 23, 42, 0.12); background: linear-gradient( 165deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.88) 100% ); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); color: #0f172a; font-size: 13px; font-weight: 600; letter-spacing: -0.015em; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04); max-width: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateX(12px); transition: max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .rf-install-cta.rf-install-loaded { max-width: 320px; opacity: 1; pointer-events: auto; transform: translateX(0); } .rf-install-cta:hover { color: #0f172a; text-decoration: none; border-color: rgba(15, 23, 42, 0.22); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.08); } .rf-install-cta:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; } .rf-install-cta-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f1f5f9; color: #0f172a; flex-shrink: 0; border: 1px solid rgba(148, 163, 184, 0.25); } .rf-install-cta-icon .material-symbols-outlined { font-size: 18px; line-height: 1; } .rf-install-cta-label { display: inline-flex; align-items: center; white-space: nowrap; } .rf-install-char { display: inline-block; opacity: 0; transform: translateX(8px); } .rf-install-loaded .rf-install-char { animation: rfInstallCharIn 0.26s ease forwards; animation-delay: calc(var(--rf-char-index) * 34ms); } @keyframes rfInstallCharIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } /* In-app callout for extension / scan behavior (e.g. add-domain modal) */ .rf-extension-hint { padding: 14px 14px 14px 16px; background: linear-gradient(165deg, #fafafa 0%, #f8fafc 100%); border-radius: var(--rf-radius-md); border: 1px solid rgba(15, 23, 42, 0.08); border-left: 3px solid #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .rf-extension-hint-title { font-size: 12px; font-weight: 700; color: var(--rf-gray-700); margin-bottom: 4px; letter-spacing: 0.02em; text-transform: uppercase; } .rf-extension-hint-body { font-size: 12px; color: var(--rf-gray-500); line-height: 1.45; } .rf-content { flex: 1; padding: 28px; max-width: 1280px; width: 100%; } .rf-page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .rf-page-title { font-size: 22px; font-weight: 800; color: var(--rf-gray-900); letter-spacing: -0.02em; line-height: 1.1; } .rf-page-sub { font-size: 13px; color: var(--rf-gray-600); margin-top: 3px; } /* ── CARDS ── */ .rf-card { background: var(--rf-surface); border: 1px solid var(--rf-border); border-radius: var(--rf-radius-xl); box-shadow: var(--rf-shadow-sm); } .rf-card-p { padding: 20px 24px; } .rf-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--rf-border-subtle); } .rf-card-title { font-size: 14px; font-weight: 700; color: var(--rf-gray-900); } .rf-card-sub { font-size: 12px; color: var(--rf-gray-400); margin-top: 1px; } /* ── STAT CARDS ── */ .rf-stat { background: var(--rf-surface); border: 1px solid var(--rf-border); border-radius: var(--rf-radius-xl); padding: 20px; box-shadow: var(--rf-shadow-sm); transition: box-shadow 0.2s, transform 0.2s; } .rf-stat:hover { box-shadow: var(--rf-shadow-md); transform: translateY(-1px); } .rf-stat-icon { width: 40px; height: 40px; border-radius: var(--rf-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .rf-stat-label { font-size: 12px; font-weight: 600; color: var(--rf-gray-500); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .rf-stat-value { font-size: 28px; font-weight: 800; color: var(--rf-gray-900); letter-spacing: -0.03em; line-height: 1; } .rf-stat-delta { font-size: 11px; font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 3px; } .rf-stat-delta.up { color: #16a34a; } .rf-stat-delta.down { color: #dc2626; } .rf-stat-delta.neutral { color: var(--rf-gray-400); } /* ── SEVERITY PILLS ── */ .rf-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--rf-radius-full); white-space: nowrap; border: 1px solid transparent; } /* Severity + resolved: domains row style (.rf-dash-domain-footer .rf-dash-sev — 12px/600, no capsule) */ .rf-pill.rf-pill-critical, .rf-pill.rf-pill-serious, .rf-pill.rf-pill-moderate, .rf-pill.rf-pill-minor, .rf-pill.rf-pill-resolved { background: transparent; border: none; padding: 0; border-radius: 0; font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; } .rf-pill.rf-pill-critical { color: #b91c1c; } .rf-pill.rf-pill-serious { color: #9a3412; } .rf-pill.rf-pill-moderate { color: #92400e; } .rf-pill.rf-pill-minor { color: #1d4ed8; } .rf-pill.rf-pill-resolved { color: #166534; } .rf-pill-open { background: var(--rf-gray-100); color: var(--rf-gray-600); border-color: var(--rf-gray-200); } .rf-pill-wip { background: #fffbeb; color: var(--rf-moderate); border-color: var(--rf-moderate-border); } .rf-pill-verify { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; } .rf-pill-pro { background: var(--rf-teal); color: white; border-color: transparent; } .rf-pill-free { background: var(--rf-gray-100); color: var(--rf-gray-600); border-color: var(--rf-gray-200); } /* ── BUTTONS — primary / secondary / tertiary (same radius & weight everywhere) ── */ .rf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--rf-font-sans); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; padding: 10px 18px; border-radius: var(--rf-btn-radius); border: 1.5px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; text-decoration: none; white-space: nowrap; line-height: 1; box-sizing: border-box; } .rf-btn:focus-visible { outline: 2px solid var(--rf-gray-900); outline-offset: 2px; } .rf-btn:disabled { opacity: 0.48; cursor: not-allowed; pointer-events: none; } /* Primary — filled brand CTA */ .rf-btn-primary { background: var(--rf-primary-cta); color: var(--rf-white); border-color: var(--rf-primary-cta); box-shadow: 0 1px 2px rgba(26, 109, 56, 0.12); } .rf-btn-primary:hover:not(:disabled) { background: var(--rf-primary-cta-hover); border-color: var(--rf-primary-cta-hover); } .rf-btn-primary:active:not(:disabled) { background: var(--rf-primary-cta-active); border-color: var(--rf-primary-cta-active); transform: translateY(1px); } /* Secondary — outline / neutral */ .rf-btn-secondary { background: var(--rf-white); color: var(--rf-gray-900); border-color: var(--rf-border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .rf-btn-secondary:hover:not(:disabled) { background: var(--rf-gray-50); border-color: var(--rf-gray-300); } .rf-btn-secondary:active:not(:disabled) { transform: translateY(1px); } /* Strong outline (install extension, emphasis) — still secondary family */ .rf-btn-secondary.rf-btn-emphasis { color: #0f172a; border-color: #0f172a; font-weight: 600; } .rf-btn-secondary.rf-btn-emphasis:hover:not(:disabled) { background: #0f172a; color: var(--rf-white); border-color: #0f172a; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); } /* Tertiary — text / minimal */ .rf-btn-tertiary, .rf-btn-ghost { background: transparent; color: var(--rf-gray-600); border-color: transparent; box-shadow: none; } .rf-btn-tertiary:hover:not(:disabled), .rf-btn-ghost:hover:not(:disabled) { background: var(--rf-gray-100); color: var(--rf-gray-900); } .rf-btn-tertiary:active:not(:disabled), .rf-btn-ghost:active:not(:disabled) { transform: translateY(1px); } /* On dark backgrounds (marketing footer, etc.) */ .rf-btn.rf-btn-inverse.rf-btn-secondary { background: #ffffff; color: #0f172a; border-color: #e5e7eb; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .rf-btn.rf-btn-inverse.rf-btn-secondary:hover:not(:disabled) { background: #f3f4f6; border-color: #d1d5db; } .rf-btn.rf-btn-inverse.rf-btn-tertiary, .rf-btn.rf-btn-inverse.rf-btn-ghost { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.28); background: transparent; } .rf-btn.rf-btn-inverse.rf-btn-tertiary:hover:not(:disabled), .rf-btn.rf-btn-inverse.rf-btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: rgba(255, 255, 255, 0.45); } .rf-btn-danger { background: var(--rf-white); color: var(--rf-critical); border-color: var(--rf-critical-border); box-shadow: none; } .rf-btn-danger:hover:not(:disabled) { background: var(--rf-critical-bg); } .rf-btn-danger:active:not(:disabled) { transform: translateY(1px); } .rf-btn-sm { font-size: 12px; padding: 9px 14px; border-radius: var(--rf-btn-radius); } .rf-btn-lg { font-size: 14px; padding: 12px 22px; border-radius: var(--rf-btn-radius); } .rf-btn-block { width: 100%; justify-content: center; } /* ── TABLES ── */ .rf-table { width: 100%; text-align: left; border-collapse: collapse; } .rf-table thead tr { border-bottom: 1px solid var(--rf-border); } .rf-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rf-gray-400); padding: 10px 16px; background: var(--rf-gray-50); } .rf-table th:first-child { border-radius: 0; } .rf-table td { padding: 13px 16px; font-size: 13px; color: var(--rf-gray-700); border-bottom: 1px solid var(--rf-border-subtle); } .rf-table tbody tr:last-child td { border-bottom: none; } .rf-table tbody tr { transition: background 0.1s; cursor: default; } .rf-table tbody tr:hover { background: var(--rf-gray-50); } .rf-table tbody tr.clickable { cursor: pointer; } .rf-table .issue-name { font-size: 13px; font-weight: 700; color: var(--rf-gray-900); } .rf-table .issue-rule { font-family: var(--rf-font-mono); font-size: 11px; color: var(--rf-gray-400); margin-top: 1px; } /* ── INPUTS / FORM ── */ .rf-input { width: 100%; border: 1.5px solid var(--rf-gray-200); border-radius: var(--rf-radius-md); padding: 9px 12px; font-family: var(--rf-font-sans); font-size: 13px; color: var(--rf-gray-900); background: var(--rf-white); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .rf-input:focus { border-color: rgba(15, 23, 42, 0.28); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.10); } .rf-input:focus-visible { border-color: rgba(15, 23, 42, 0.36); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12); } .rf-input::selection { background: rgba(15, 23, 42, 0.16); color: var(--rf-gray-900); } .rf-input::-moz-selection { background: rgba(15, 23, 42, 0.16); color: var(--rf-gray-900); } .rf-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } /* Native select highlight / focus — green (not browser default blue) */ select.rf-input, select.rf-input.rf-select { accent-color: var(--rf-resolved); } select.rf-input:focus, select.rf-input.rf-select:focus { border-color: var(--rf-resolved); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); } .rf-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rf-gray-500); display: block; margin-bottom: 6px; } /* Secondary hint inside label, e.g. “(optional)” — AA on white (avoid --rf-gray-400 here) */ .rf-label .rf-label-hint { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--rf-gray-600); } .rf-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--rf-white); border: 1.5px solid var(--rf-gray-200); border-radius: var(--rf-radius-md); padding: 0 12px; transition: border-color 0.15s; } .rf-search-wrap:focus-within { border-color: rgba(15, 23, 42, 0.28); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.10); } .rf-search-wrap input { border: none; outline: none; background: transparent; font-family: var(--rf-font-sans); font-size: 13px; color: var(--rf-gray-900); padding: 8px 0; flex: 1; } .rf-search-wrap input::placeholder { color: var(--rf-gray-400); } /* ── COMPLIANCE BAR ── Full-width red→orange→green under a grey veil. Set --rf-compliance-fill (0–100%) on the wrap so only 0…fill shows the spectrum; the rest stays grey. Below 10%, reveal is clamped to 10% so the red band stays visible. */ .rf-compliance-bar-wrap { --rf-compliance-fill: 0%; --rf-compliance-reveal: max(var(--rf-compliance-fill), 10%); height: 6px; border-radius: var(--rf-radius-full); overflow: hidden; position: relative; isolation: isolate; background: var(--rf-gray-100); } .rf-compliance-bar-wrap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ef4444 0%, #f97316 33.33%, #22c55e 66.66%, #15803d 100%); z-index: 0; } /* No scan yet — solid track only (no spectrum underlay) */ .rf-compliance-bar-wrap--pending { background: #e2e8f0; } .rf-compliance-bar-wrap--pending::before, .rf-compliance-bar-wrap--pending::after { display: none !important; } .rf-compliance-bar-wrap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(226, 232, 240, 0.97); z-index: 1; -webkit-mask-image: linear-gradient( to right, transparent 0, transparent var(--rf-compliance-reveal), #000 var(--rf-compliance-reveal), #000 100% ); mask-image: linear-gradient( to right, transparent 0, transparent var(--rf-compliance-reveal), #000 var(--rf-compliance-reveal), #000 100% ); mask-mode: alpha; -webkit-mask-mode: alpha; pointer-events: none; } /* ── EMPTY / ERROR STATES ── */ .rf-empty-state { text-align: center; padding: 64px 32px; } .rf-empty-icon { width: 64px; height: 64px; border-radius: var(--rf-radius-xl); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 28px; } .rf-empty-title { font-size: 17px; font-weight: 700; color: var(--rf-gray-900); margin-bottom: 8px; } .rf-empty-sub { font-size: 13px; color: var(--rf-gray-500); max-width: 360px; margin: 0 auto 24px; line-height: 1.6; } /* Error / empty footer: support link — real destination + AA contrast on white (vs default .rf-link teal) */ a.rf-link.rf-empty-state-support { color: var(--rf-primary-cta); font-weight: 600; } a.rf-link.rf-empty-state-support:hover { color: var(--rf-primary-cta-hover); } /* Add-domain modal: URL validation (AA contrast on white; linked via aria-describedby) */ .rf-url-valid-feedback { margin: 6px 0 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--rf-primary-cta); } .rf-modal-url-valid-icon { color: var(--rf-primary-cta) !important; } /* ── TOAST ── */ .rf-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 9999; background: var(--rf-gray-900); color: white; padding: 12px 20px; border-radius: var(--rf-radius-xl); box-shadow: var(--rf-shadow-lg); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; animation: toastIn 0.3s cubic-bezier(0.16,1,0.3,1); } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ── MODAL BACKDROP ── */ .rf-modal-backdrop { position: fixed; inset: 0; background: rgba(10,14,26,0.5); backdrop-filter: blur(2px); /* Above .rf-topbar (40) / sidebar (50); above .rf-state-bar (200) so modals stay interactive */ z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; } .rf-modal-backdrop.hidden { display: none !important; } .rf-modal { background: var(--rf-surface); border-radius: var(--rf-radius-2xl); box-shadow: var(--rf-shadow-lg); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; } .rf-modal-header { padding: 24px 24px 16px; display: flex; align-items: flex-start; justify-content: space-between; } .rf-modal-body { padding: 0 24px 24px; } /* ── SIDE PANEL ── */ .rf-panel-backdrop { position: fixed; inset: 0; background: rgba(10,14,26,0.4); z-index: 300; display: flex; } .rf-panel-backdrop.hidden { display: none !important; } .rf-panel { width: 440px; max-width: 95vw; background: var(--rf-surface); margin-left: auto; height: 100%; overflow-y: auto; display: flex; flex-direction: column; } .rf-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--rf-border-subtle); position: sticky; top: 0; background: var(--rf-surface); z-index: 5; } .rf-panel-title { font-size: 15px; font-weight: 700; color: var(--rf-gray-900); } .rf-panel-body { padding: 24px; flex: 1; } /* ── SKELETON ── */ @keyframes rf-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} } .rf-skeleton { background: var(--rf-gray-200); border-radius: var(--rf-radius-sm); animation: rf-pulse 1.6s ease-in-out infinite; } /* ── SPINNER ── */ @keyframes rf-spin { to { transform: rotate(360deg); } } .rf-spinner { animation: rf-spin 0.75s linear infinite; width: 18px; height: 18px; } .rf-spinner-circle { fill: none; stroke: var(--rf-teal); stroke-width: 2.5; stroke-dasharray: 28 56; stroke-linecap: round; } /* ── STATE SWITCHER (demo tool) ── */ .rf-state-bar { background: var(--rf-gray-900); padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; border-top: 1px solid rgba(255,255,255,0.08); } .rf-state-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #cbd5e1; margin-right: 4px; } .rf-state-btn { font-family: var(--rf-font-sans); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--rf-radius-full); border: 1px solid rgba(255,255,255,0.22); background: transparent; color: #e2e8f0; cursor: pointer; transition: all 0.15s; } .rf-state-btn:hover { background: rgba(255,255,255,0.1); color: #f8fafc; } .rf-state-btn.active { background: var(--rf-teal-state-active); color: #ffffff; border-color: transparent; } /* Keep page content scrollable above the fixed demo state bar */ body:has(.rf-state-bar) { padding-bottom: 48px; box-sizing: border-box; } /* ── FOOTER (same frosted shell as .rf-topbar) ── */ .rf-footer { padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--rf-gray-400); position: relative; z-index: 1; isolation: isolate; background: var(--rf-glass-frost-a), var(--rf-glass-frost-b); border-top: 1px solid rgba(148, 163, 184, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 -10px 40px rgba(15, 23, 42, 0.05), 0 -2px 8px rgba(15, 23, 42, 0.03); -webkit-backdrop-filter: var(--rf-glass-backdrop); backdrop-filter: var(--rf-glass-backdrop); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .rf-footer { background: rgba(248, 250, 252, 0.88); border-top: 1px solid rgba(148, 163, 184, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } } /* ── MISC UTILS ── */ .rf-divider { height: 1px; background: var(--rf-border-subtle); } .rf-mono { font-family: var(--rf-font-mono); } .rf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rf-link { color: var(--rf-teal); font-weight: 600; text-decoration: none; } .rf-link:hover { text-decoration: underline; } /* SVG charts */ .chart-gridline { stroke: #f0f2f4; stroke-width: 1; } .chart-line-teal { stroke: var(--rf-teal); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .chart-line-red { stroke: var(--rf-critical); stroke-width: 2; fill: none; stroke-linecap: round; } .chart-line-green { stroke: #22c55e; stroke-width: 2; fill: none; stroke-linecap: round; } /* Animations */ @keyframes rf-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes rf-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rf-scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .rf-animate-up { animation: rf-fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) both; } .rf-animate-in { animation: rf-fadeIn 0.4s ease both; } /* Pulse dot */ @keyframes rf-pulseDot { 0%,100%{opacity:1} 50%{opacity:0.4} } .rf-pulse { animation: rf-pulseDot 2s infinite; } /* Toggle visibility (modals, toasts, panels, demo states). Must win over display:flex backdrops. */ .hidden { display: none !important; } /* ── MOBILE APP SHELL (≤767px): sidebar drawer, main full-bleed ── */ :root { --rf-mobile-bar-h: 52px; } @media (max-width: 767px) { /* Full-width drawer from the right (slides left); below fixed mobile bar */ .rf-sidebar { left: auto !important; right: 0; width: 100%; max-width: none; top: var(--rf-mobile-bar-h); bottom: 0; transform: translate3d(100%, 0, 0); transition: transform 0.24s ease; will-change: transform; box-shadow: none; pointer-events: none; } .rf-sidebar--dark { border-right: none; border-left: 1px solid var(--rf-sidebar-border); } body.rf-nav-drawer-open .rf-sidebar { transform: translate3d(0, 0, 0); pointer-events: auto; /* Above drawer dim layer + demo state bar; below .rf-mobile-bar (70) */ z-index: 220; box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 1px 0 0 rgba(255, 255, 255, 0.55), inset 2px 0 0 rgba(148, 163, 184, 0.22); } /* Glass rail blurs whatever is behind it — the dim backdrop reads as a grey veil over the menu */ body.rf-nav-drawer-open .rf-sidebar:not(.rf-sidebar--dark) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #f1f5f9; } body.rf-nav-drawer-open .rf-sidebar--dark { box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45); } .rf-main { margin-left: 0 !important; width: 100%; min-width: 0; } .rf-mobile-bar ~ .rf-app > .rf-main { padding-top: var(--rf-mobile-bar-h); box-sizing: border-box; } /* Drawer nav: touch-friendly row height, 16px link type */ .rf-sidebar-nav > .rf-logo-plan--nav-top { padding: 11px 10px 9px; font-size: 15px; } .rf-nav-label { font-size: 15px; margin-bottom: 6px; } .rf-nav-item { gap: 8px; padding: 9px 10px; font-size: 16px; } .rf-nav-item .material-symbols-outlined { font-size: 20px; } } @media (min-width: 768px) { .rf-sidebar { left: 0 !important; right: auto; width: 220px; max-width: none; transform: none !important; top: 0; bottom: 0; pointer-events: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset -1px 0 0 rgba(255, 255, 255, 0.62), inset -2px 0 0 rgba(148, 163, 184, 0.22); } .rf-sidebar--dark { border-left: none; border-right: 1px solid var(--rf-sidebar-border); box-shadow: none; } }