/* ========================================================================= VCA landing site — dark-first theme inspired by VAClaims. Single stylesheet, no build step, no external dependencies. ========================================================================= */ /* Phase 7an (2026-04-11) — themeable via the data-theme attribute on . Dark mode is the default; light mode overrides all surface/ text tokens. The brand palette (va-blue/gold/red/green) and the dark header are shared across both themes so the site still feels like the same place regardless of mode. Theme preference syncs with VAClaims via localStorage key `vaclaims-theme`. */ :root { /* Brand palette — the same VA colors VAClaims uses, so the two sites feel like siblings even though they're separate apps. */ --va-blue: #003e73; --va-blue-light: #0071bc; --va-blue-lighter: #4a90d9; --va-gold: #ffbe2e; --va-red: #e31c3d; --va-green: #2e8540; --radius: 10px; --radius-sm: 6px; --font-sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: Georgia, 'Times New Roman', serif; } /* Dark theme (default). Matches [data-theme="dark"] AND the bare :root selector so the site is dark even before the no-flash init script runs. */ :root, html[data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface-2: #1a2332; --surface-3: #22303c; --text: #c9d1d9; --text-strong: #e6edf3; --text-dim: #8b949e; --text-muted: #6e7681; --border: #30363d; --border-strong: #484f58; --shadow: 0 2px 12px rgba(0, 0, 0, 0.6); --hero-bg: linear-gradient(135deg, #0a1b2e 0%, #0d1117 60%, #111824 100%); --hero-h1: #ffffff; --btn-ghost-hover-bg: rgba(255, 255, 255, 0.06); } /* Light theme — triggered when is set by the no-flash init script or the theme toggle. Brand colors and the navy header are unchanged; only surfaces + text flip. */ html[data-theme="light"] { --bg: #f6f8fa; --surface: #ffffff; --surface-2: #f2f5f8; --surface-3: #e8edf2; --text: #24292f; --text-strong: #0d1117; --text-dim: #57606a; --text-muted: #6e7781; --border: #d0d7de; --border-strong: #afb8c1; --shadow: 0 2px 12px rgba(15, 23, 42, 0.08); --hero-bg: linear-gradient(135deg, #eef3fb 0%, #f6f8fa 60%, #eef4fa 100%); --hero-h1: #0d1117; --btn-ghost-hover-bg: rgba(15, 23, 42, 0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--va-blue-lighter); text-decoration: none; } a:hover { color: var(--va-gold); text-decoration: underline; } .container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } /* ------------------------------------------------------------------------- Header ------------------------------------------------------------------------- */ .site-header { background: var(--va-blue); color: #fff; padding: 0.9rem 0; border-bottom: 3px solid var(--va-gold); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .header-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .brand { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 0.85rem; line-height: 1; } .brand:hover { text-decoration: none; } .brand:hover .brand-name { color: var(--va-gold); } .brand-logo { width: 48px; height: 48px; flex-shrink: 0; display: block; } .brand-text { display: flex; flex-direction: column; gap: 4px; } .brand-name { font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; transition: color 0.15s ease; } .brand-tag { font-size: 0.7rem; font-weight: 600; color: var(--va-gold); text-transform: uppercase; letter-spacing: 0.08em; } /* Mobile: trim the wordmark down so the header doesn't wrap awkwardly */ @media (max-width: 600px) { .brand-logo { width: 38px; height: 38px; } .brand-name { font-size: 1rem; } .brand-tag { font-size: 0.62rem; letter-spacing: 0.06em; } } .site-nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; } .site-nav a { color: #dce4ef; font-size: 0.95rem; font-weight: 500; } .site-nav a:hover { color: var(--va-gold); text-decoration: none; } .nav-cta { background: var(--va-gold); color: #1a1a1a !important; padding: 0.45rem 0.95rem; border-radius: var(--radius-sm); font-weight: 700; } .nav-cta:hover { background: #ffd466; color: #000 !important; text-decoration: none; } /* Phase 7an — Sign In link. Outlined variant of the CTA so it reads as "secondary action" next to the gold Reach Out button. Same padding/border-radius so they line up on the nav baseline. */ .nav-signin { border: 1px solid #dce4ef; padding: 0.42rem 0.9rem; border-radius: var(--radius-sm); font-weight: 600; } .nav-signin:hover { background: rgba(220, 228, 239, 0.12); color: #ffffff !important; text-decoration: none; } /* Phase 7an — theme toggle button in the dark navy header. Kept low-contrast so it doesn't compete with the gold Reach Out CTA, but still clearly clickable. */ .theme-toggle { background: transparent; border: 1px solid rgba(220, 228, 239, 0.35); color: #dce4ef; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background: rgba(220, 228, 239, 0.12); border-color: var(--va-gold); color: var(--va-gold); } /* ------------------------------------------------------------------------- Main content ------------------------------------------------------------------------- */ main { flex: 1; } section { padding: 3.5rem 0; } section.section-alt { background: var(--surface); } h1, h2, h3, h4 { color: var(--text-strong); font-weight: 700; line-height: 1.25; } h1 { font-size: 2.5rem; margin-bottom: 1rem; } h2 { font-size: 1.85rem; margin-bottom: 1rem; } h3 { font-size: 1.2rem; margin-bottom: 0.4rem; } section > .container > h2 { border-left: 4px solid var(--va-gold); padding-left: 0.9rem; margin-bottom: 1.25rem; } .section-lead { font-size: 1.05rem; color: var(--text-dim); max-width: 780px; margin-bottom: 2rem; } /* ------------------------------------------------------------------------- Hero — 2-column grid with the slogan/lead on the left and the "Submit a Question" quick-ask card on the right. Stacks on narrow. ------------------------------------------------------------------------- */ .hero { background: var(--hero-bg); padding: 4rem 0 3.5rem; border-bottom: 1px solid var(--border); } .hero-grid { display: grid; /* Left column flexes to fill the available width; right column is capped to 440px so the quick-ask card stays compact even on wide monitors instead of stretching out. */ grid-template-columns: 1fr minmax(340px, 440px); gap: 3rem; align-items: start; } .hero-text { text-align: left; } .hero-badge { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(255, 190, 46, 0.12); color: var(--va-gold); padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 190, 46, 0.4); font-size: 0.9rem; font-weight: 600; margin-bottom: 1.25rem; } .hero-flag { font-size: 1.1rem; } .hero h1 { font-size: 2.7rem; line-height: 1.1; color: var(--hero-h1); max-width: 600px; margin: 0 0 1.25rem 0; } .hero-lead { font-size: 1.15rem; color: var(--text-strong); max-width: 600px; margin: 0 0 1rem 0; } .hero-sub { font-size: 0.98rem; color: var(--text-dim); max-width: 600px; margin: 0 0 1.5rem 0; } .hero-actions { display: flex; justify-content: flex-start; gap: 0.6rem; flex-wrap: wrap; } /* Quick "Submit a Question" card on the hero — bright bordered card that contrasts against the dark hero background so visitors notice the inline contact path immediately. */ .quick-ask-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem 1.5rem 1.5rem 1.5rem; box-shadow: 0 8px 30px rgba(0,0,0,0.4); border-top: 4px solid var(--va-gold); } .quick-ask-icon { font-size: 2rem; line-height: 1; margin-bottom: 0.5rem; } .quick-ask-card h2 { font-size: 1.25rem; color: var(--text-strong); margin: 0 0 0.4rem 0; line-height: 1.3; } .quick-ask-card > p { font-size: 0.9rem; color: var(--text-dim); margin: 0 0 1rem 0; } .quick-ask-form .form-field { margin-bottom: 0.75rem; } .quick-ask-form label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; } .quick-ask-form input, .quick-ask-form textarea { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; font-family: inherit; font-size: 0.95rem; box-sizing: border-box; } .quick-ask-form input:focus, .quick-ask-form textarea:focus { outline: none; border-color: var(--va-gold); box-shadow: 0 0 0 3px rgba(255,190,46,0.2); } .quick-ask-form textarea { resize: vertical; min-height: 5rem; } .quick-ask-form .btn-block { display: block; width: 100%; margin-top: 0.5rem; } .quick-ask-note { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin: 0.75rem 0 0 0; line-height: 1.4; } /* Stack the hero on narrow screens */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 1.75rem; } .hero h1 { font-size: 2.1rem; } .hero-actions { justify-content: center; } .hero-text { text-align: center; } .hero h1, .hero-lead, .hero-sub { margin-left: auto; margin-right: auto; } } /* ------------------------------------------------------------------------- Road to Accreditation milestones ------------------------------------------------------------------------- */ .milestone-list { list-style: none; padding: 0; margin: 1.5rem 0 0 0; display: flex; flex-direction: column; gap: 1rem; } .milestone { display: flex; gap: 1.25rem; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; position: relative; } .milestone-marker { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border-strong); } .milestone-number { font-size: 1.1rem; font-weight: 700; color: var(--text-strong); } .milestone-body { flex: 1; min-width: 0; } .milestone-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .milestone-head h3 { font-size: 1.05rem; color: var(--text-strong); margin: 0; } .milestone-pill { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .milestone-pill-complete { background: rgba(46, 133, 64, 0.18); color: #6fd87f; border: 1px solid rgba(46, 133, 64, 0.5); } .milestone-pill-in-progress { background: rgba(255, 190, 46, 0.18); color: var(--va-gold); border: 1px solid rgba(255, 190, 46, 0.5); } .milestone-pill-upcoming { background: rgba(74, 144, 217, 0.18); color: var(--va-blue-lighter); border: 1px solid rgba(74, 144, 217, 0.5); } .milestone-detail { font-size: 0.92rem; color: var(--text-dim); margin: 0.25rem 0 0 0; line-height: 1.5; } .milestone-target { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0 0 0; } .milestone-target strong { color: var(--text-strong); } /* Visual emphasis on the in-progress card so it pops as "where I am right now" without dominating the layout. */ .milestone.milestone-in-progress { border-left: 4px solid var(--va-gold); background: linear-gradient(90deg, rgba(255,190,46,0.06) 0%, var(--surface) 50%); } .milestone.milestone-in-progress .milestone-marker { background: rgba(255,190,46,0.18); border-color: var(--va-gold); } .milestone.milestone-in-progress .milestone-number { color: var(--va-gold); } .milestone.milestone-complete .milestone-marker { background: rgba(46,133,64,0.18); border-color: #6fd87f; } .milestone.milestone-complete .milestone-number { color: #6fd87f; } .milestone-footnote { margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-muted); text-align: center; font-style: italic; } /* Disclaimer paragraph appended to the scope-cant card */ .scope-disclaimer { margin-top: 1rem; padding: 0.75rem 1rem; background: rgba(255, 190, 46, 0.08); border-left: 3px solid var(--va-gold); border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--text-strong); line-height: 1.5; } .scope-disclaimer strong { color: var(--va-gold); } /* ------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 0.7rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s ease; font-family: inherit; line-height: 1.3; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--va-gold); color: #1a1a1a; border-color: var(--va-gold); } .btn-primary:hover { background: #ffd466; border-color: #ffd466; color: #000; } .btn-secondary { background: var(--surface-2); color: var(--text-strong); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-3); border-color: var(--va-blue-lighter); color: var(--text-strong); } .btn-ghost { background: transparent; color: var(--text-strong); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--btn-ghost-hover-bg); border-color: var(--va-blue-lighter); color: var(--text-strong); } .btn-danger { background: transparent; color: var(--va-red); border-color: var(--va-red); } .btn-danger:hover { background: var(--va-red); color: #fff; } .btn-lg { padding: 0.9rem 2rem; font-size: 1.1rem; } .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.85rem; } /* ------------------------------------------------------------------------- Two-column layout (About section) ------------------------------------------------------------------------- */ .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .two-col p { margin-bottom: 1rem; color: var(--text); } /* ------------------------------------------------------------------------- Hints list ------------------------------------------------------------------------- */ .hints-list { list-style: none; counter-reset: hint; display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .hints-list li { counter-increment: hint; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--va-gold); padding: 1.5rem 1.75rem 1.5rem 4.5rem; border-radius: var(--radius); position: relative; } .hints-list li::before { content: counter(hint); position: absolute; left: 1.5rem; top: 1.3rem; width: 2.2rem; height: 2.2rem; background: var(--va-gold); color: #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; } .hints-list li h3 { color: var(--text-strong); margin-bottom: 0.4rem; font-size: 1.15rem; } .hints-list li p { color: var(--text); font-size: 0.98rem; } .hints-list li p em { color: var(--va-gold); font-style: italic; } /* ------------------------------------------------------------------------- Scope cards — "What I can / can't help with" ------------------------------------------------------------------------- */ .scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .scope-card { background: var(--surface-2); border: 1px solid var(--border); border-top: 5px solid var(--border-strong); border-radius: var(--radius); padding: 1.75rem; } .scope-card h3 { color: var(--text-strong); font-size: 1.15rem; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.6rem; } .scope-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .scope-card ul { list-style: none; } .scope-card li { padding: 0.55rem 0; color: var(--text); font-size: 0.95rem; border-bottom: 1px dotted var(--border); } .scope-card li:last-child { border-bottom: none; } .scope-card li em { color: var(--va-gold); font-style: italic; } .scope-can { border-top-color: var(--va-green); } .scope-can .scope-icon { background: var(--va-green); color: #fff; } .scope-cant { border-top-color: var(--va-red); } .scope-cant .scope-icon { background: var(--va-red); color: #fff; } .scope-boundary { background: rgba(74, 144, 217, 0.08); border: 1px solid var(--va-blue-lighter); border-left: 5px solid var(--va-blue-lighter); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-top: 0.5rem; } .scope-boundary h3 { color: var(--text-strong); font-size: 1.05rem; margin-bottom: 0.75rem; } .scope-boundary p { color: var(--text); font-size: 0.95rem; margin-bottom: 0.75rem; } .scope-boundary p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- Resources grid ------------------------------------------------------------------------- */ .resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .resource-card { background: var(--surface-2); border: 1px solid var(--border); border-top: 4px solid var(--va-blue-light); border-radius: var(--radius); padding: 1.5rem; } .resource-card h3 { color: var(--text-strong); font-size: 1.05rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .resource-card ul { list-style: none; } .resource-card li { padding: 0.4rem 0; font-size: 0.93rem; color: var(--text); } .resource-card li + li { border-top: 1px dotted var(--border); } .resource-card a { font-weight: 500; } /* ------------------------------------------------------------------------- Pre-registration form ------------------------------------------------------------------------- */ .form-container { max-width: 780px; } .register-form { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; margin-top: 1rem; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .form-field { display: flex; flex-direction: column; margin-bottom: 1rem; } .form-field label { color: var(--text-strong); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; } .form-field input, .form-field select, .form-field textarea { background: var(--bg); color: var(--text); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; font-size: 1rem; font-family: inherit; transition: border-color 0.15s ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--va-blue-lighter); box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15); } .form-field textarea { resize: vertical; min-height: 100px; } .req { color: var(--va-red); font-weight: 700; } .optional { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; } .field-error { color: var(--va-red); font-size: 0.85rem; margin-top: 0.25rem; } .form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .form-note { color: var(--text-muted); font-size: 0.85rem; max-width: 420px; flex: 1; } /* Honeypot — visible to bots, invisible to humans. Avoid display:none (some bots skip those); use absolute positioning off-screen. */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------------------------- Thank-you page ------------------------------------------------------------------------- */ .thankyou { padding: 5rem 0; } .thankyou-inner { max-width: 720px; text-align: center; } .thankyou-check { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; background: var(--va-green); color: #fff; border-radius: 50%; font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; box-shadow: 0 4px 24px rgba(46, 133, 64, 0.4); } .thankyou h1 { font-size: 2.5rem; margin-bottom: 1rem; } .thankyou .lead { font-size: 1.15rem; color: var(--text); margin-bottom: 2.5rem; } .thankyou-next { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; text-align: left; margin-bottom: 2rem; } .thankyou-next h2 { font-size: 1.3rem; margin-bottom: 1rem; } .thankyou-next ul { list-style: none; } .thankyou-next li { padding: 0.75rem 0; border-bottom: 1px solid var(--border); color: var(--text); } .thankyou-next li:last-child { border-bottom: none; } .thankyou-next li strong { color: var(--text-strong); } .thankyou-back { margin-top: 1rem; } /* ------------------------------------------------------------------------- Admin — prospect list ------------------------------------------------------------------------- */ .admin { padding: 2.5rem 0; } .admin-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .admin-header h1 { font-size: 1.85rem; } .admin-stats { display: flex; gap: 1.5rem; } .admin-stats .stat { color: var(--text-dim); font-size: 0.95rem; } .admin-stats strong { color: var(--text-strong); font-size: 1.4rem; display: block; } .empty-state { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 3rem; text-align: center; color: var(--text-dim); } .empty-state h2 { color: var(--text-dim); margin-bottom: 0.5rem; } .prospect-list { display: flex; flex-direction: column; gap: 1.25rem; } .prospect-card { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--va-gold); border-radius: var(--radius); padding: 1.5rem; } .prospect-card.is-contacted { border-left-color: var(--va-green); opacity: 0.85; } .prospect-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .prospect-identity h2 { font-size: 1.3rem; margin-bottom: 0.25rem; } .prospect-meta { color: var(--text-dim); font-size: 0.9rem; } .prospect-meta a { color: var(--va-blue-lighter); } .badge { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .badge-ok { background: rgba(46, 133, 64, 0.2); color: #afe9ba; border: 1px solid var(--va-green); } .badge-warn { background: rgba(255, 190, 46, 0.18); color: var(--va-gold); border: 1px solid var(--va-gold); } .prospect-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin-bottom: 1rem; font-size: 0.93rem; } .prospect-fields dt { color: var(--text-dim); font-weight: 600; } .prospect-fields dd { color: var(--text); } .prospect-message { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin-bottom: 1rem; } .prospect-message h3 { font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem; } .prospect-message p { color: var(--text); white-space: pre-wrap; } .prospect-notes-form { margin-top: 0.75rem; } .prospect-notes-form label { display: block; font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.35rem; } .prospect-notes-form textarea { width: 100%; background: var(--bg); color: var(--text); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-family: inherit; font-size: 0.93rem; resize: vertical; margin-bottom: 0.6rem; } .prospect-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .prospect-debug { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); font-size: 0.82rem; color: var(--text-muted); } .prospect-debug summary { cursor: pointer; color: var(--text-dim); } .prospect-debug dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; margin-top: 0.5rem; } .prospect-debug dt { font-weight: 600; } .prospect-debug dd { word-break: break-all; } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ .site-footer { background: var(--surface); border-top: 3px solid var(--va-blue); padding: 2.5rem 0 2rem; margin-top: 4rem; color: var(--text-dim); } .site-footer .container { max-width: 980px; } .disclaimer { background: rgba(227, 28, 61, 0.08); border-left: 3px solid var(--va-red); padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.88rem; line-height: 1.55; margin-bottom: 1rem; } .crisis-line { background: rgba(74, 144, 217, 0.08); border-left: 3px solid var(--va-blue-lighter); padding: 0.85rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--text); margin-bottom: 1.25rem; } .copyright { text-align: center; font-size: 0.82rem; color: var(--text-muted); } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width: 720px) { .hero h1 { font-size: 2.1rem; } .hero-lead { font-size: 1.05rem; } h1 { font-size: 1.9rem; } h2 { font-size: 1.45rem; } .site-nav { gap: 0.75rem; } .site-nav a { font-size: 0.88rem; } .hints-list li { padding-left: 4rem; padding-right: 1.25rem; } .hints-list li::before { left: 1rem; top: 1.1rem; width: 2rem; height: 2rem; } .register-form { padding: 1.25rem; } section { padding: 2.5rem 0; } }