/* ============================================================ forms-light.css — flips the legacy dark theme (style.css + per-page inline styles) to the light "teen camp" look used by the homepage (home.css). Load LAST in on form pages. Strategy: re-map the CSS variables the dark theme consumes, then patch the handful of hardcoded dark surfaces. ============================================================ */ :root { --navy: #fdfcf8; /* page background */ --navy2: #f6f4ec; --navy3: #f6f4ec; --blue: #eef6ef; --accent: #16a34a; --accent2: #15803d; /* link green readable on light */ --cyan: #0891b2; --orange: #d97706; --white: #17251c; /* "white" text slots become ink */ --gray: #4b5c52; --light: #17251c; --card-bg: #ffffff; --card-border: #e7e3d8; } body { -webkit-font-smoothing: auto; } /* Nav */ .nav { background: rgba(253,252,248,0.92); backdrop-filter: blur(10px); } .nav-links a { color: #4b5c52; } .nav-links a:hover { color: #17251c; } .nav-cta { background: var(--accent) !important; color: #fff !important; border-radius: 999px; } .nav-cta:hover { background: var(--green-dk, #15803d) !important; } .nav-toggle { color: #17251c; } @media (max-width: 720px), (max-width: 900px) { .nav-links.open { background: #ffffff; border: 1.5px solid #e7e3d8; } } /* Ghost / outline buttons built for dark backgrounds */ .btn-ghost { background: #ffffff; color: #17251c; border: 2px solid #17251c; } .btn-ghost:hover { background: #17251c; color: #fff; } /* Cards & panels: translucent-white-on-dark becomes solid white cards */ .form-section, .apply-form-wrap, .od-callout, .step0-banner, .deposit-estimate, .payment-method-card, .cohort-checkbox-label, .checkbox-group, .scale-group, .radio-group { background: #ffffff; border-color: #e7e3d8; } .form-section { box-shadow: 0 10px 30px rgba(23,37,28,0.07); } /* Inputs */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { background: #ffffff !important; color: #17251c !important; border-color: #ddd8ca !important; } input::placeholder, textarea::placeholder { color: #9aa79f !important; } input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; } /* Checkbox / radio option tiles */ .cohort-checkbox-label:hover { background: #f2f7f3; } .cohort-checkbox-label input:checked + .cohort-checkbox-text, .od-week input:checked + span { color: #15803d; } .checkbox-item label, .cohort-checkbox-text, .scale-group-title, .checkbox-group-title, .radio-group-title { color: #33413a; } .cohort-checkbox-text strong { color: #17251c; } .cohort-checkbox-text em { color: #4b5c52; } /* Hints, notes, errors */ .hint { color: #6b7d72; } .error-msg { color: #b91c1c; } .form-error-banner { background: #fde8e8; border-color: #f3b8b8; color: #7f1d1d; } /* Wizard progress */ .wizard-progress-step { color: #6b7d72; } .wizard-progress-step.active { color: #15803d; } /* Footer */ .footer { background: #17251c; } .footer, .footer a { color: #d6e2da; } .footer a:hover { color: #ffffff; } /* Sections that painted their own dark backgrounds */ .section, .apply-page { background: transparent; } /* Links inside body copy */ a { color: #15803d; } a:hover { color: #17251c; } /* ============================================================ v2 — pi-debug audit fixes: literal dark-theme colors that the variable flip could not reach (invisible on light background) ============================================================ */ /* Gradient-clipped headlines (white→pale green/blue) → solid ink */ .apply-header h1, .manage-header h1, .thanks-box h1, .form-success h2 { background: none; -webkit-text-fill-color: #17251c; color: #17251c; } /* Payment method cards + deposit breakdown: literal white text */ .pmc-name { color: #17251c; } .pmc-desc, .deposit-breakdown { color: #4b5c52; } /* Date-picker glyph was inverted for dark inputs */ input[type="date"]::-webkit-calendar-picker-indicator { filter: none !important; opacity: 0.75; } /* Native select option lists (manage.html + feedback.html hardcode dark) */ select option { background: #ffffff !important; color: #17251c !important; } /* manage.html Group A/B divider labels were literal #fff */ .cg-header-label { color: #17251c; }