/* ============================================================ ScoreCraft.ai — Stylesheet Dark/Light theme system with CSS custom properties Default: Dark mode | Toggle: .dark class on ============================================================ */ /* ========================================================== 1. DESIGN TOKENS — Light Mode (defaults) ========================================================== */ :root { /* Background */ --bg: #FFFFFF; --bg-alt: #F4F6FA; --bg-surface: #FFFFFF; /* Borders & Shadows */ --border: #E2E8F0; --shadow: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 10px 25px rgba(0,0,0,0.1); /* Foreground */ --fg: #0F172A; --fg-secondary: #475569; --fg-muted: #64748B; /* Brand — Indigo */ --primary: #6366F1; --primary-hover: #4F46E5; --primary-dim: rgba(99,102,241,0.1); /* Accents */ --accent: #06B6D4; --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; /* Navigation */ --nav-bg: #FFFFFF; --nav-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Footer — always dark */ --footer-bg: #0F172A; --footer-fg: #CDD0D4; --footer-fg-dim: #9BA1AB; --footer-border: #1E293B; /* Misc tokens */ --radius: 12px; --radius-lg: 16px; --radius-sm: 8px; } /* ========================================================== 2. DESIGN TOKENS — Dark Mode (.dark on ) ========================================================== */ .dark { --bg: #0F1219; --bg-alt: #171C26; --bg-surface: #171C26; --border: #2A3040; --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.4); --fg: #E8EAED; --fg-secondary: #9BA1AB; --fg-muted: #6D737A; --primary: #818CF8; --primary-hover: #6366F1; --primary-dim: rgba(129,140,248,0.15); --accent: #22D3EE; --nav-bg: #0F1219; --nav-shadow: 0 1px 3px rgba(0,0,0,0.3); --footer-bg: #0A0D12; --footer-fg: #CDD0D4; --footer-fg-dim: #9BA1AB; --footer-border: #1A1F2A; } /* ========================================================== 3. RESET & BASE ========================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.25s ease, color 0.25s ease; } main { flex: 1; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--primary-hover); } img { max-width: 100%; height: auto; } /* ========================================================== 4. ACCESSIBILITY ========================================================== */ /* Focus visible — keyboard-only focus ring */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 1rem; padding: 0.75rem 1.5rem; background: var(--primary); color: #FFFFFF; font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-sm); z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 1rem; color: #FFFFFF; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================== 5. LOGO SWITCHING ========================================================== */ .logo-light { display: block; } .logo-dark { display: none; } .dark .logo-light { display: none; } .dark .logo-dark { display: block; } /* ========================================================== 6. THEME TOGGLE ICON SWITCHING ========================================================== */ .icon-sun { display: none; } .icon-moon { display: block; } .dark .icon-sun { display: block; } .dark .icon-moon { display: none; } /* ========================================================== 7. CONTAINERS ========================================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .container-sm { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; } .container-lg { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; } /* ========================================================== 8. HEADER / NAV — Sticky with backdrop blur ========================================================== */ .header { position: sticky; top: 0; z-index: 100; height: 4.5rem; background: var(--nav-bg); border-bottom: 1px solid var(--border); box-shadow: var(--nav-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 0.25s ease, border-color 0.25s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.1rem; color: var(--fg); text-decoration: none; } .logo-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--primary); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-weight: 700; font-size: 0.8rem; } .logo .highlight { color: var(--primary); } /* Desktop nav links */ .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-links a { color: var(--fg-muted); font-size: 0.875rem; font-weight: 500; padding: 0.25rem 0; position: relative; transition: color 0.2s; text-decoration: none; } .nav-links a:hover { color: var(--fg); } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--primary); border-radius: 1px; transition: width 0.2s ease; } .nav-links a:hover::after { width: 100%; } /* Nav actions (theme toggle + mobile toggle) */ .nav-actions { display: flex; align-items: center; gap: 0.5rem; } /* Auth buttons in nav */ .btn-login { color: var(--primary) !important; font-weight: 500; } .btn-signup { background: var(--primary); color: #FFFFFF !important; padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-weight: 500; transition: background-color 0.2s; } .btn-signup:hover { background: var(--primary-hover); color: #FFFFFF !important; } /* Theme toggle button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; } .theme-toggle:hover { color: var(--fg); background: var(--bg-alt); border-color: var(--fg-muted); } /* Mobile hamburger toggle */ .mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--fg-muted); transition: color 0.2s; } .mobile-toggle:hover { color: var(--fg); } /* ========================================================== 9. MOBILE MENU — Slide-open panel ========================================================== */ .mobile-menu { display: none; background: var(--nav-bg); border-top: 1px solid var(--border); padding: 1rem 1.5rem; position: sticky; top: 4.5rem; z-index: 99; transition: background-color 0.25s ease; } .mobile-menu.open { display: block; animation: slideDown 0.25s ease-out; } .mobile-menu a { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--border); color: var(--fg-secondary); font-weight: 500; font-size: 0.95rem; transition: color 0.2s; } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu a:hover { color: var(--primary); } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================== 10. BUTTONS ========================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; } .btn-primary { background: var(--primary); color: #FFFFFF; box-shadow: 0 4px 14px rgba(99,102,241,0.25); } .btn-primary:hover { background: var(--primary-hover); color: #FFFFFF; box-shadow: 0 6px 20px rgba(99,102,241,0.3); transform: translateY(-1px); } .btn-outline { background: var(--bg-surface); color: var(--fg); border: 1px solid var(--border); } .btn-outline:hover { background: var(--bg-alt); color: var(--fg); } .btn-white { background: #FFFFFF; color: var(--primary); } .btn-white:hover { background: rgba(255,255,255,0.9); color: var(--primary); } .btn-lg { padding: 1rem 2rem; font-size: 1rem; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================================== 11. BADGES / TAGS ========================================================== */ .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .badge-high { background: rgba(239,68,68,0.1); color: var(--danger); } .badge-medium { background: rgba(245,158,11,0.1); color: var(--warning); } .badge-low { background: var(--bg-alt); color: var(--fg-muted); } .badge-success { background: rgba(34,197,94,0.1); color: var(--success); } .badge-primary { background: var(--primary-dim); color: var(--primary); } .badge-critical { background: rgba(239,68,68,0.1); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); } .badge-warning { background: rgba(245,158,11,0.1); color: var(--warning); border: 1px solid rgba(245,158,11,0.2); } .badge-info { background: rgba(6,182,212,0.1); color: var(--accent); border: 1px solid rgba(6,182,212,0.2); } /* ========================================================== 12. CARDS ========================================================== */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: background-color 0.25s ease, border-color 0.25s ease; } .card-body { padding: 1.5rem; } /* ========================================================== 13. HERO ========================================================== */ .hero { position: relative; overflow: hidden; padding: 5rem 1.5rem 4rem; text-align: center; } .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary-dim), var(--bg), rgba(6,182,212,0.05)); z-index: 0; transition: background 0.25s ease; } .hero-blob-1 { position: absolute; top: -10rem; right: -5rem; width: 24rem; height: 24rem; background: var(--primary-dim); border-radius: 50%; filter: blur(60px); } .hero-blob-2 { position: absolute; bottom: -10rem; left: -5rem; width: 20rem; height: 20rem; background: rgba(6,182,212,0.1); border-radius: 50%; filter: blur(60px); } .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .hero h1 { font-size: 2.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: var(--fg); } .hero-gauge { display: inline-block; vertical-align: middle; margin-right: 0.5rem; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.35)); } .hero h1 .highlight { color: var(--primary); } .hero p { font-size: 1.15rem; color: var(--fg-muted); margin-top: 1.5rem; max-width: 600px; margin-left: auto; margin-right: auto; } /* ========================================================== 14. AUDIT INPUT FORM ========================================================== */ .audit-form { margin-top: 2.5rem; max-width: 640px; margin-left: auto; margin-right: auto; } .audit-input-row { display: flex; gap: 0.75rem; } .audit-input-wrap { flex: 1; position: relative; } .audit-input-wrap .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--fg-muted); } .audit-input { width: 100%; padding: 1rem 1rem 1rem 3rem; font-size: 1rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--fg); outline: none; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.25s; } .audit-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); } .audit-input::placeholder { color: var(--fg-muted); } .competitor-toggle { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.75rem; font-size: 0.875rem; color: var(--primary); cursor: pointer; background: none; border: none; } .competitor-input { width: 100%; padding: 0.75rem 1rem; font-size: 0.9rem; border: 2px solid var(--border); border-radius: var(--radius); margin-top: 0.75rem; background: var(--bg-surface); color: var(--fg); outline: none; transition: border-color 0.2s, background-color 0.25s; } .competitor-input:focus { border-color: var(--primary); } .trust-line { font-size: 0.85rem; color: var(--fg-muted); margin-top: 1rem; } .form-error { font-size: 0.85rem; color: var(--danger); text-align: center; margin-top: 0.75rem; } /* ========================================================== 15. SECTIONS ========================================================== */ .section { padding: 5rem 1.5rem; } .section-muted { background: var(--bg-alt); transition: background-color 0.25s ease; } .section-gradient { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #FFFFFF; } .section-title { font-size: 2rem; font-weight: 700; text-align: center; color: var(--fg); } .section-subtitle { font-size: 1.1rem; color: var(--fg-muted); text-align: center; margin-top: 1rem; } /* ========================================================== 16. GRID ========================================================== */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* ========================================================== 17. STEP CARDS (How it works) ========================================================== */ .step-card { text-align: center; padding: 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); transition: box-shadow 0.2s, background-color 0.25s, border-color 0.25s; } .step-card:hover { box-shadow: var(--shadow-lg); } .step-icon { width: 56px; height: 56px; border-radius: var(--radius); background: var(--primary-dim); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--primary); } .step-number { font-size: 0.7rem; font-weight: 700; color: var(--primary); background: var(--primary-dim); padding: 0.2rem 0.75rem; border-radius: 20px; display: inline-block; margin-bottom: 0.75rem; } .step-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--fg); } .step-card p { color: var(--fg-muted); font-size: 0.9rem; } /* ========================================================== 18. PRICING CARDS ========================================================== */ .pricing-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; position: relative; background: var(--bg-surface); transition: background-color 0.25s, border-color 0.25s; } .pricing-card.featured { border-color: var(--primary); box-shadow: 0 10px 30px rgba(99,102,241,0.1); } .pricing-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--primary); color: #FFFFFF; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 20px; } .pricing-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--fg); } .pricing-card .price { font-size: 3rem; font-weight: 800; margin: 1rem 0 0.25rem; color: var(--fg); } .pricing-card .price span { font-size: 1rem; font-weight: 400; color: var(--fg-muted); } .pricing-card .desc { font-size: 0.85rem; color: var(--fg-muted); } .pricing-features { list-style: none; margin: 1.5rem 0; flex: 1; } .pricing-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--fg-secondary); } .pricing-features .check { color: var(--success); flex-shrink: 0; margin-top: 2px; } .pricing-features .cross { color: var(--fg-muted); flex-shrink: 0; margin-top: 2px; } /* ========================================================== 19. PROGRESS PAGE ========================================================== */ .progress-container { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; } .progress-ring { position: relative; width: 128px; height: 128px; margin: 0 auto 2.5rem; } .progress-ring .ring { position: absolute; border-radius: 50%; } .progress-ring .ring-1 { inset: 0; background: var(--primary-dim); animation: pulse-ring 2s ease-in-out infinite; } .progress-ring .ring-2 { inset: 12px; background: rgba(99,102,241,0.06); animation: pulse-ring 2s ease-in-out infinite 0.5s; } .dark .progress-ring .ring-2 { background: rgba(129,140,248,0.06); } .progress-ring .ring-3 { inset: 24px; background: var(--bg-surface); border: 4px solid var(--primary); display: flex; align-items: center; justify-content: center; } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; } .progress-steps { text-align: left; max-width: 320px; margin: 0 auto 2rem; } .progress-step { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .step-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step-dot.done { background: var(--success); color: #FFFFFF; } .step-dot.active { border: 2px solid var(--primary); } .step-dot.active::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: pulse 1.5s infinite; } .step-dot.pending { border: 2px solid var(--border); } .step-label { font-size: 0.9rem; } .step-label.active { color: var(--fg); font-weight: 500; } .step-label.done { color: var(--fg); font-weight: 500; } .step-label.pending { color: var(--fg-muted); } .tip-box { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; max-width: 400px; margin: 0 auto; font-size: 0.85rem; color: var(--fg-muted); transition: background-color 0.25s, border-color 0.25s; } .tip-box strong { color: var(--fg); } /* ========================================================== 20. RESULTS PAGE ========================================================== */ .results-header { background: linear-gradient(135deg, var(--primary-dim), rgba(6,182,212,0.05)); padding: 2rem; border-bottom: 1px solid var(--border); transition: background 0.25s, border-color 0.25s; } .results-site-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .reanalyze-btn { white-space: nowrap; font-size: 0.85rem; padding: 0.5rem 1rem; } .site-icon-img { width: 48px; height: 48px; border-radius: var(--radius); object-fit: contain; background: var(--bg-surface); } .site-icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--primary-dim); display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 700; font-size: 1.25rem; } .site-meta { font-size: 0.85rem; color: var(--fg-muted); margin-top: 0.25rem; } /* Score gauge */ .score-area { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .gauge { position: relative; width: 180px; height: 180px; } .gauge svg { transform: rotate(-90deg); } .gauge-bg { fill: none; stroke: var(--border); stroke-width: 10; } .gauge-fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.5s ease-out; } .gauge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gauge-score { font-size: 3rem; font-weight: 800; color: var(--fg); } .gauge-label { font-size: 0.8rem; color: var(--fg-muted); } /* Sub-scores */ .sub-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; flex: 1; } .sub-score { text-align: center; background: var(--bg-alt); border-radius: var(--radius); padding: 0.75rem; transition: background-color 0.25s; } .sub-score-value { font-size: 1.5rem; font-weight: 700; color: var(--fg); } .sub-score-value span { font-size: 0.8rem; font-weight: 400; color: var(--fg-muted); } .sub-score-label { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.25rem; } .sub-score-bar { height: 6px; background: var(--border); border-radius: 3px; margin-top: 0.5rem; overflow: hidden; } .sub-score-bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease-out; } /* Score reasons */ .score-reasons { margin-top: 1.25rem; } .score-reasons h4 { font-size: 0.7rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .score-reasons li { font-size: 0.85rem; color: var(--fg-muted); margin-bottom: 0.25rem; padding-left: 1rem; position: relative; } .score-reasons li::before { content: '\2022'; color: var(--primary); position: absolute; left: 0; } /* ========================================================== 21. ACTION CARDS ========================================================== */ .action-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.75rem; transition: box-shadow 0.2s, border-color 0.25s; } .action-card:hover { box-shadow: var(--shadow); } .action-header { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit; color: var(--fg); } .action-rank { width: 40px; height: 40px; border-radius: var(--radius); background: var(--primary-dim); display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .action-title { font-weight: 600; margin-bottom: 0.5rem; color: var(--fg); } .action-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; } .action-chevron { color: var(--fg-muted); flex-shrink: 0; transition: transform 0.2s; margin-top: 0.25rem; } .action-card.open .action-chevron { transform: rotate(180deg); } .action-detail { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--border); background: var(--bg-alt); transition: background-color 0.25s; } .action-detail h4 { font-size: 0.7rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 1rem 0 0.5rem; } .action-detail p { font-size: 0.9rem; line-height: 1.6; color: var(--fg-secondary); } .action-detail ul { list-style: none; } .action-detail li { font-size: 0.9rem; margin-bottom: 0.4rem; padding-left: 1rem; position: relative; color: var(--fg-secondary); } .action-detail li::before { content: '\2022'; color: var(--primary); position: absolute; left: 0; font-weight: 600; } .cta-suggestion { font-style: italic; background: var(--primary-dim); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--fg-secondary); } /* ========================================================== 22. FINDING ROWS ========================================================== */ .finding-row { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.5rem; transition: border-color 0.25s; } .finding-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit; color: var(--fg); } .finding-header:hover { background: var(--bg-alt); } .finding-title { flex: 1; font-size: 0.9rem; font-weight: 500; color: var(--fg); } .finding-pages { font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; } .finding-detail { padding: 0.75rem 1rem; border-top: 1px solid var(--border); background: var(--bg-alt); transition: background-color 0.25s; } .finding-detail p { font-size: 0.85rem; color: var(--fg-muted); margin-bottom: 0.5rem; } .finding-detail h4 { font-size: 0.7rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.75rem 0 0.4rem; } .finding-detail li { font-size: 0.85rem; margin-bottom: 0.3rem; padding-left: 1rem; position: relative; color: var(--fg-secondary); } .finding-detail li::before { content: '\2022'; color: var(--primary); position: absolute; left: 0; } /* ========================================================== 23. EMAIL CAPTURE ========================================================== */ .email-capture { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; transition: background-color 0.25s, border-color 0.25s; } .email-capture-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .email-capture-form input { flex: 1; padding: 0.5rem 0.75rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg); outline: none; transition: border-color 0.2s, background-color 0.25s; } .email-capture-form input:focus { border-color: var(--primary); } .email-capture-form button { padding: 0.5rem 1rem; } .email-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); border-radius: var(--radius); padding: 1rem; text-align: center; color: var(--success); font-size: 0.9rem; font-weight: 500; } /* ========================================================== 24. SHARE BUTTONS ========================================================== */ .share-buttons { display: flex; align-items: center; gap: 0.5rem; } .share-buttons span { font-size: 0.75rem; color: var(--fg-muted); } .share-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--fg-muted); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s, color 0.2s; } .share-btn:hover { background: var(--bg-surface); color: var(--fg-secondary); } /* ========================================================== 25. CTA BANNER ========================================================== */ .cta-banner { border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; margin-top: 2rem; } .cta-banner h2 { color: #FFFFFF; font-size: 1.5rem; font-weight: 700; } .cta-banner p { color: rgba(255,255,255,0.8); margin: 0.5rem 0 1.5rem; } .cta-banner .btn-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* ========================================================== 26. FOOTER — Always dark regardless of theme ========================================================== */ .footer { background: var(--footer-bg); color: var(--footer-fg); border-top: 1px solid var(--footer-border); padding: 3rem 1.5rem; margin-top: auto; transition: background-color 0.25s; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; max-width: 1200px; margin: 0 auto; } .footer-brand p { font-size: 0.85rem; color: var(--footer-fg-dim); margin-top: 0.75rem; max-width: 250px; } .footer h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--footer-fg); } .footer-col { display: flex; flex-direction: column; } .footer-col a { color: var(--footer-fg-dim); font-size: 0.85rem; margin-bottom: 0.5rem; transition: color 0.2s; text-decoration: none; } .footer-col a:hover { color: #FFFFFF; } .footer-bottom { text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--footer-border); font-size: 0.75rem; color: var(--footer-fg-dim); } /* ========================================================== 27. FAQ ========================================================== */ .faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; background: var(--bg-surface); transition: background-color 0.25s, border-color 0.25s; } .faq-item h3 { font-weight: 600; color: var(--fg); } .faq-item p { font-size: 0.9rem; color: var(--fg-muted); margin-top: 0.5rem; } /* ========================================================== 28. STATIC PAGES (Privacy, Terms, etc.) ========================================================== */ .static-page { padding: 4rem 1.5rem; } .static-page h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--fg); } .static-page h2 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--fg); } .static-page p { color: var(--fg-muted); font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.7; } /* ========================================================== 29. ANIMATIONS ========================================================== */ @keyframes pulse-ring { 0% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.2; } 100% { transform: scale(0.9); opacity: 0.5; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s ease-out forwards; } /* ========================================================== 30. UTILITIES ========================================================== */ .text-center { text-align: center; } .text-muted { color: var(--fg-muted); } .text-sm { font-size: 0.85rem; } .text-xs { font-size: 0.75rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .hidden { display: none; } /* ========================================================== 31. RESPONSIVE — 480 / 640 / 768 / 1024 breakpoints ========================================================== */ /* Large desktop and below */ @media (max-width: 1024px) { .sub-scores { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } /* Desktop nav switch */ @media (max-width: 768px) { .nav-links { display: none; } .mobile-toggle { display: block; } .hero h1 { font-size: 2rem; } .hero-gauge { width: 44px; height: 44px; } .hero p { font-size: 1rem; } .hero { padding: 3.5rem 1rem 3rem; } .audit-input-row { flex-direction: column; } .grid-3 { grid-template-columns: 1fr; } .score-area { flex-direction: column; align-items: center; } .footer-grid { grid-template-columns: 1fr 1fr; } .section { padding: 3rem 1rem; } .container, .container-sm, .container-lg { padding: 0 1rem; } } /* Tablet */ @media (max-width: 640px) { .sub-scores { grid-template-columns: repeat(2, 1fr); } .score-area { gap: 1.5rem; } .cta-banner { padding: 2rem 1.25rem; } .cta-banner h2 { font-size: 1.25rem; } .pricing-card { padding: 1.5rem; } .pricing-card .price { font-size: 2.5rem; } .action-header { padding: 1rem; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } .static-page h1 { font-size: 2rem; } } /* Small mobile */ @media (max-width: 480px) { .hero h1 { font-size: 1.65rem; } .hero p { font-size: 0.9rem; } .hero { padding: 2.5rem 0.75rem 2rem; } .section { padding: 2.5rem 0.75rem; } .section-title { font-size: 1.6rem; } .btn { padding: 0.65rem 1.25rem; font-size: 0.85rem; } .btn-lg { padding: 0.85rem 1.5rem; font-size: 0.95rem; } .gauge { width: 140px; height: 140px; } .gauge-score { font-size: 2.25rem; } .email-capture-form { flex-direction: column; } .email-capture-form button { width: 100%; } .share-buttons { flex-wrap: wrap; } .container, .container-sm, .container-lg { padding: 0 0.75rem; } }