/* ============================================================================ * TeachDemy — Become an Instructor + Instructor Support (flagship pass) * Round 14 · td-become-instructor.css · version 2.0.0 * ---------------------------------------------------------------------------- * Enqueued by functions.php on the Become an Instructor page (template or * slug) and by page-mentor-support.php itself (before get_header, so it * lands in the ) for the Instructor Support hub. * * Scope: everything lives under ".td-page" with page-specific prefixes — * .td-bi-* → Become an Instructor * .td-ms-* → Instructor Support (mentor-support) * Design tokens come from teachdemy-shared.css (--navy --green --gold * --mint --ink --muted --line --shadow). Gold is used sparingly, for the * stats numbers, the submit button and the CTA accents. No blue/indigo. * * The application wizard (#tdp-ia-wizard) is only RESTYLED here — its * markup/ids/classes are owned by the Teach Demy Plus plugin * (tdp-instructor-apply.css). ID-scoped selectors keep this file winning * regardless of load order, and dark-mode variants are provided because * these selectors also outrank the plugin's dark-mode rules. * ========================================================================== */ /* ========================================================================== * 1. HERO POLISH (both pages reuse the shared .page-hero — small upgrades) * ========================================================================== */ .td-page .td-bi-hero { position: relative; } .td-page .td-bi-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 320px at 86% 0%, rgba(247, 189, 49, .13), transparent 62%), radial-gradient(700px 360px at 0% 100%, rgba(39, 197, 139, .15), transparent 62%); pointer-events: none; } .td-page .td-bi-hero .eyebrow { color: var(--gold); border-color: rgba(247, 189, 49, .38); background: rgba(247, 189, 49, .10); } .td-page .td-bi-hero .container { padding-bottom: 96px; /* room for the overlapping stats band */ } /* ========================================================================== * 2. STATS BAND — navy gradient cards with big gold numbers (real data) * ========================================================================== */ .td-page .td-bi-statsband { position: relative; z-index: 6; padding: 0 0 10px; background: var(--bg); } .td-page .td-bi-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -56px; /* tucks the row up over the dark hero */ } .td-page .td-bi-stat { position: relative; overflow: hidden; background: linear-gradient(150deg, #0a3f3a 0%, var(--navy) 55%, #03201f 100%); border: 1px solid rgba(255, 255, 255, .13); border-radius: 18px; padding: 24px 22px 20px; box-shadow: 0 24px 50px rgba(6, 43, 43, .28); } .td-page .td-bi-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent 78%); } .td-page .td-bi-stat b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -1px; line-height: 1; color: var(--gold); } .td-page .td-bi-stat span { display: block; margin-top: 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: rgba(219, 232, 236, .82); } /* ========================================================================== * 3. "WHY TEACH ON TEACHDEMY" — 6 benefit cards * ========================================================================== */ .td-page .td-bi-benefit { transition: transform .25s ease, box-shadow .25s ease; } .td-page .td-bi-benefit:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(7, 31, 61, .10); } .td-page .td-bi-ben-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--mint), #f2fbf6); border: 1px solid #d5efe4; color: var(--green); } .td-page .td-bi-benefit h3 { font-size: 14px; color: var(--navy); } .td-page .td-bi-benefit p { font-size: 12px; line-height: 1.75; } /* Green ✓ badge (used in timeline notes, standards table, review list) */ .td-page .td-bi-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 900; flex: none; margin-right: 6px; vertical-align: -4px; } /* ========================================================================== * 4. "FROM APPLICATION TO PUBLISH" — 5-step vertical timeline * (builds on the shared .timeline/.step base with numbered nodes) * ========================================================================== */ .td-page .td-bi-timeline { counter-reset: tdbi; position: relative; padding: 4px 0 2px 52px; } .td-page .td-bi-timeline::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--green), rgba(22, 166, 115, .12)); } .td-page .td-bi-timeline .step { position: relative; margin-bottom: 24px; } .td-page .td-bi-timeline .step:last-child { margin-bottom: 0; } .td-page .td-bi-timeline .step::before { counter-increment: tdbi; content: counter(tdbi); position: absolute; left: -52px; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), var(--green2)); color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 0 0 5px var(--mint); } .td-page .td-bi-when { display: inline-block; margin-bottom: 7px; padding: 3px 9px; border-radius: 999px; background: #fdf3dc; color: #8a6410; font-size: 9px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; } .td-page .td-bi-process-notes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; } .td-page .td-bi-process-notes li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.7; } /* ========================================================================== * 5. STANDARDS TABLE — zebra rows + green ticks * ========================================================================== */ .td-page .td-bi-standcard { overflow: hidden; } .td-page .td-bi-standtable th { background: var(--navy); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; border-bottom: 0; } .td-page .td-bi-standtable th:first-child { border-top-left-radius: 12px; } .td-page .td-bi-standtable th:last-child { border-top-right-radius: 12px; } .td-page .td-bi-standtable td { font-size: 12.5px; font-weight: 650; color: var(--ink); } .td-page .td-bi-standtable tr:nth-child(even) td { background: #f6fbf9; } .td-page .td-bi-standtable td:last-child { color: var(--green); font-weight: 800; white-space: nowrap; } /* ========================================================================== * 6. #apply — two-column layout with sticky info panel * ========================================================================== */ /* Round 15 ("Edits 2"): the #apply intro text is centered, and the green * highlight box (stats/earnings) sits centered BELOW that text — the sticky * info panel + wizard two-column layout below stays as-is. */ .td-page .td-bi-applyhead { max-width: 720px; margin: 0 auto 6px; text-align: center; } .td-page .td-bi-applyhead .lead { margin-left: auto; margin-right: auto; } .td-page .td-bi-highlight { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; margin: 22px auto 0; max-width: 430px; padding: 18px 24px; border-radius: 16px; background: linear-gradient(135deg, #18b47d, #27c58b); color: #fff; box-shadow: 0 14px 34px rgba(24, 180, 125, .25); } .td-page .td-bi-highlight b { font-size: 22px; font-weight: 950; letter-spacing: -.4px; } .td-page .td-bi-highlight span { font-size: 12px; line-height: 1.6; color: #eafff6; } html[data-theme="dark"] .td-page .td-bi-highlight { background: linear-gradient(135deg, #0f8a60, #16a673); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); } .td-page .td-bi-applywrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 26px; } .td-page .td-bi-applyinfo { position: sticky; top: 100px; } .td-page .td-bi-info-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; box-shadow: 0 8px 28px rgba(7, 31, 61, .05); } .td-page .td-bi-info-card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .2px; color: var(--navy); } .td-page .td-bi-info-card h3:not(:first-child) { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); } .td-page .td-bi-start-list { margin: 0; padding-left: 16px; font-size: 12px; color: var(--muted); line-height: 1.9; } .td-page .td-bi-after-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.8; } .td-page .td-bi-after-list li { margin-bottom: 8px; } .td-page .td-bi-after-list li:last-child { margin-bottom: 0; } .td-page .td-bi-after-list b { color: var(--ink); } .td-page .td-bi-review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .td-page .td-bi-review-list li { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 750; color: var(--ink); } .td-page .td-bi-askfirst { margin-top: 20px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, #062b2b, #08766a); } .td-page .td-bi-askfirst p { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: #fff; } .td-page .td-bi-askfirst a { font-size: 12px; font-weight: 900; color: var(--gold); } .td-page .td-bi-askfirst a:hover { text-decoration: underline; } /* ========================================================================== * 7. APPLICATION WIZARD RESTYLE (markup untouched — CSS-only upgrade). * #tdp-ia-wizard is scoped by ID so these win over the plugin's own * stylesheet regardless of load order (plugin prints late, in footer). * ========================================================================== */ .td-page #tdp-ia-wizard.tdp-ia-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 50px rgba(7, 31, 61, .08); padding: 26px 26px 28px; } .td-page #tdp-ia-wizard .tdp-ia-progress { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 22px; } .td-page #tdp-ia-wizard .tdp-ia-progress li { flex: 1 1 100px; text-align: center; padding: 9px 10px; border-radius: 999px; background: #f2f8f6; border: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: .3px; transition: all .2s; } .td-page #tdp-ia-wizard .tdp-ia-progress li.current { background: var(--navy); border-color: var(--navy); color: #fff; } .td-page #tdp-ia-wizard .tdp-ia-progress li.done { background: var(--mint); border-color: #bfe8d8; color: #0a6b58; } .td-page #tdp-ia-wizard .tdp-ia-step h3 { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 17px; letter-spacing: -.2px; } .td-page #tdp-ia-wizard .tdp-ia-note { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; } .td-page #tdp-ia-wizard label.field { font-size: 10.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #354a55; } .td-page #tdp-ia-wizard input[type="text"], .td-page #tdp-ia-wizard input[type="email"], .td-page #tdp-ia-wizard input[type="tel"], .td-page #tdp-ia-wizard input[type="number"], .td-page #tdp-ia-wizard select, .td-page #tdp-ia-wizard textarea { border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; font-size: 13px; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; } .td-page #tdp-ia-wizard input:focus, .td-page #tdp-ia-wizard select:focus, .td-page #tdp-ia-wizard textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(22, 166, 115, .12); outline: none; } .td-page #tdp-ia-wizard .tdp-ia-photo { border: 2px dashed #bfe0d5; border-radius: 16px; background: linear-gradient(135deg, #f7fdfa, #fff); min-height: 110px; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; } .td-page #tdp-ia-wizard .tdp-ia-photo:hover { border-color: var(--green); } .td-page #tdp-ia-wizard .tdp-ia-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .td-page #tdp-ia-wizard .tdp-ia-row { background: #f8fcfa; border: 1px solid #e3f1ec; border-radius: 12px; padding: 8px; } .td-page #tdp-ia-wizard .tdp-ia-row input { border: 1px solid #dcebe6; border-radius: 8px; padding: 9px 10px; font-size: 12px; background: #fff; } .td-page #tdp-ia-wizard .tdp-ia-row-remove { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #f3c5c1; background: #fdf2f1; color: #c0392b; font-size: 14px; line-height: 1; cursor: pointer; transition: all .2s; } .td-page #tdp-ia-wizard .tdp-ia-row-remove:hover { background: #f9d8d6; } /* Round 16: numbered rows (No. badge) + required-field highlight. */ .td-page #tdp-ia-wizard .tdp-ia-row-no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 900; flex: none; } .td-page #tdp-ia-wizard .tdp-ia-row-no::after { content: none; } .td-page #tdp-ia-wizard input.tdp-ia-invalid, .td-page #tdp-ia-wizard select.tdp-ia-invalid, .td-page #tdp-ia-wizard textarea.tdp-ia-invalid, .td-page #tdp-ia-wizard .tdp-ia-radios input.tdp-ia-invalid { border-color: #c0392b !important; box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); } .td-page #tdp-ia-wizard .tdp-ia-radios input.tdp-ia-invalid { outline: 2px solid #c0392b; outline-offset: 2px; } /* Yes/No radios → pill toggles (input stays visible + focusable, so the plugin's required-validation keeps working; :has() paints the checked pill, with a plain :checked fallback for older browsers). */ .td-page #tdp-ia-wizard .tdp-ia-radios { display: flex; gap: 10px; flex-wrap: wrap; } .td-page #tdp-ia-wizard .tdp-ia-radios label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); font-size: 12.5px; font-weight: 800; cursor: pointer; transition: all .2s; } .td-page #tdp-ia-wizard .tdp-ia-radios label:hover { border-color: var(--green); } .td-page #tdp-ia-wizard .tdp-ia-radios input { accent-color: var(--green); width: 15px; height: 15px; flex: none; } .td-page #tdp-ia-wizard .tdp-ia-radios input:checked { box-shadow: 0 0 0 3px rgba(22, 166, 115, .25); border-radius: 50%; } .td-page #tdp-ia-wizard .tdp-ia-radios label:has(input:checked) { border-color: var(--green); background: var(--mint); color: #0a6b58; box-shadow: 0 6px 16px rgba(22, 166, 115, .15); } /* Buttons — green for navigation, GOLD for the final submit */ .td-page #tdp-ia-wizard .tdp-ia-btn { border-radius: 12px; font-weight: 900; letter-spacing: .2px; transition: transform .2s, box-shadow .2s, filter .2s; } .td-page #tdp-ia-wizard .tdp-ia-btn-primary { background: linear-gradient(135deg, var(--green), var(--green2)); box-shadow: 0 10px 24px rgba(22, 166, 115, .25); } .td-page #tdp-ia-wizard .tdp-ia-btn-ghost { background: #fff; border: 1.5px solid var(--line); color: var(--navy); } .td-page #tdp-ia-wizard #tdp-ia-submit { background: linear-gradient(135deg, #f7bd31, #eea50f); color: #33240a; border: 0; padding: 13px 28px; font-size: 13px; box-shadow: 0 12px 28px rgba(247, 189, 49, .35); } .td-page #tdp-ia-wizard .tdp-ia-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); } .td-page #tdp-ia-wizard .tdp-ia-success .icon { background: linear-gradient(135deg, #f7bd31, #eea50f); color: #33240a; box-shadow: 0 14px 30px rgba(247, 189, 49, .35); } /* ========================================================================== * 8. CTA BANDS (shared shape — .td-bi- on page A, .td-ms- on page B) * ========================================================================== */ .td-page .td-bi-ctaband, .td-page .td-ms-ctaband { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(130deg, #052423 0%, var(--navy2) 55%, #0a6d5f 100%); box-shadow: 0 24px 60px rgba(6, 43, 43, .25); } .td-page .td-bi-ctaband::before, .td-page .td-ms-ctaband::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 240px at 88% 20%, rgba(247, 189, 49, .16), transparent 65%), radial-gradient(380px 220px at 5% 90%, rgba(39, 197, 139, .18), transparent 60%); pointer-events: none; } .td-page .td-bi-ctaband-inner, .td-page .td-ms-ctaband-inner { position: relative; padding: 44px 46px; } .td-page .td-bi-ctaband h2, .td-page .td-ms-ctaband h2 { margin: 0 0 10px; max-width: 660px; font-size: 26px; letter-spacing: -.5px; color: #fff; } .td-page .td-bi-ctaband p, .td-page .td-ms-ctaband p { margin: 0; max-width: 560px; font-size: 13px; line-height: 1.8; color: #cfe3de; } .td-page .td-bi-ctaband-actions, .td-page .td-ms-ctaband-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .td-page .td-bi-btn-gold, .td-page .td-ms-btn-gold { background: linear-gradient(135deg, #f7bd31, #eea50f); color: #33240a; font-weight: 900; border: 0; border-radius: 12px; padding: 13px 22px; font-size: 12.5px; box-shadow: 0 12px 28px rgba(247, 189, 49, .35); transition: transform .2s, filter .2s; } .td-page .td-bi-btn-light, .td-page .td-ms-btn-light { background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; border-radius: 12px; padding: 13px 22px; font-size: 12.5px; font-weight: 800; transition: border-color .2s, background .2s; } .td-page .td-bi-btn-gold:hover, .td-page .td-ms-btn-gold:hover { transform: translateY(-1px); filter: brightness(1.05); } .td-page .td-bi-btn-light:hover, .td-page .td-ms-btn-light:hover { border-color: #fff; background: rgba(255, 255, 255, .16); } /* ========================================================================== * 9. INSTRUCTOR SUPPORT HUB (.td-ms-*) * ========================================================================== */ /* 3-benefit strip — tucks up under the dark hero */ .td-page .td-ms-benefits { position: relative; z-index: 6; margin-top: -38px; } .td-page .td-ms-ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .td-page .td-ms-ben { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: 0 16px 40px rgba(7, 31, 61, .10); transition: transform .25s ease, box-shadow .25s ease; } .td-page .td-ms-ben:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(7, 31, 61, .13); } .td-page .td-ms-ben-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--mint), #f2fbf6); border: 1px solid #d5efe4; color: var(--green); flex: none; } .td-page .td-ms-ben h3 { margin: 0 0 5px; font-size: 13.5px; color: var(--navy); } .td-page .td-ms-ben p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.7; } /* Free-support cross-note beside the pricing cards */ .td-page .td-ms-plan-note { margin: 12px 0 0; padding: 9px 14px; border-radius: 12px; background: var(--mint); border: 1px dashed #9fdcc3; color: #0a6b58; font-size: 12px; font-weight: 700; } .td-page .td-ms-plan-note strong { font-weight: 900; } /* Pricing cards — upgraded (gold on the featured plan, per-month note kept) */ .td-page .td-ms-layout .td-plan-opt { border-radius: 16px; transition: transform .2s, box-shadow .2s, border-color .2s; } .td-page .td-ms-layout .td-plan-opt:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(22, 166, 115, .12); } .td-page .td-ms-layout .td-plan-opt.selected { box-shadow: 0 14px 30px rgba(22, 166, 115, .18); } .td-page .td-ms-layout .td-plan-opt.is-featured { border-color: var(--gold); background: linear-gradient(180deg, #fffdf5, #fff); } .td-page .td-ms-layout .td-plan-ribbon { background: linear-gradient(135deg, #f7bd31, #eea50f); color: #33240a; font-size: 8.5px; font-weight: 900; letter-spacing: .8px; padding: 5px 10px; box-shadow: 0 6px 14px rgba(247, 189, 49, .35); } .td-page .td-ms-layout .td-plan-opt .pr { font-size: 24px; } .td-page .td-ms-layout .td-plan-opt small { font-weight: 700; } /* FAQ section — reuses the global .accordion
pattern, framed in a card so it matches the rest of the page. */ .td-page .td-ms-faq { max-width: 860px; } .td-page .td-ms-faq .accordion { margin-top: 24px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 6px 26px; box-shadow: 0 8px 28px rgba(7, 31, 61, .05); } .td-page .td-ms-faq .accordion details { border-bottom: 1px solid var(--line); } .td-page .td-ms-faq .accordion details:last-child { border-bottom: 0; } /* ========================================================================== * 10. DARK MODE ([data-theme="dark"]) — mirrors of every light rule above. * ID-scoped wizard rules must repeat here because they also outrank * the plugin's own dark-mode stylesheet. * ========================================================================== */ html[data-theme="dark"] .td-page .td-bi-stat { border-color: rgba(255, 255, 255, .17); } html[data-theme="dark"] .td-page .td-bi-benefit, html[data-theme="dark"] .td-page .td-bi-info-card, html[data-theme="dark"] .td-page .td-bi-timeline-card, html[data-theme="dark"] .td-page .td-bi-standcard, html[data-theme="dark"] .td-page .td-ms-ben, html[data-theme="dark"] .td-page .td-ms-faq .accordion { background: #0d2222; border-color: #1a3030; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); } html[data-theme="dark"] .td-page .td-bi-ben-icon, html[data-theme="dark"] .td-page .td-ms-ben-icon { background: #10302a; border-color: #1d4a3e; color: #9fe3cf; } html[data-theme="dark"] .td-page .td-bi-benefit h3, html[data-theme="dark"] .td-page .td-ms-ben h3, html[data-theme="dark"] .td-page .td-bi-info-card h3, html[data-theme="dark"] .td-page .td-ms-faq .accordion summary { color: #e6f2f0; } html[data-theme="dark"] .td-page .td-bi-benefit p, html[data-theme="dark"] .td-page .td-ms-ben p, html[data-theme="dark"] .td-page .td-bi-info-card .td-bi-start-list, html[data-theme="dark"] .td-page .td-bi-info-card .td-bi-after-list, html[data-theme="dark"] .td-page .td-ms-faq .accordion .accordion-body, html[data-theme="dark"] .td-page .td-bi-process-notes li, html[data-theme="dark"] .td-page .td-bi-timeline .step p { color: #8fb3a8; } html[data-theme="dark"] .td-page .td-bi-when { background: #2a2413; color: #e5c360; } html[data-theme="dark"] .td-page .td-bi-timeline .step::before { box-shadow: 0 0 0 5px rgba(22, 166, 115, .18); } html[data-theme="dark"] .td-page .td-bi-standtable tr:nth-child(even) td { background: #0f2a28; } html[data-theme="dark"] .td-page .td-bi-standtable td { color: #d9e8e4; } html[data-theme="dark"] .td-page .td-bi-review-list li, html[data-theme="dark"] .td-page .td-bi-after-list b { color: #d9e8e4; } /* Wizard dark-mode (must repeat the ID scope to beat the plugin) */ html[data-theme="dark"] .td-page #tdp-ia-wizard.tdp-ia-card { background: #0d2222; border-color: #1a3030; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-step h3 { color: #e6f2f0; border-bottom-color: #1a3030; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-progress li { background: #10262b; border-color: #1e3f42; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-progress li.done { background: #12332d; border-color: #1d4a3e; color: #9fe3cf; } html[data-theme="dark"] .td-page #tdp-ia-wizard input[type="text"], html[data-theme="dark"] .td-page #tdp-ia-wizard input[type="email"], html[data-theme="dark"] .td-page #tdp-ia-wizard input[type="tel"], html[data-theme="dark"] .td-page #tdp-ia-wizard input[type="number"], html[data-theme="dark"] .td-page #tdp-ia-wizard select, html[data-theme="dark"] .td-page #tdp-ia-wizard textarea { background: #0b1e22; border-color: #1e3f42; color: #e6f2f0; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-row { background: #0b1e22; border-color: #1e3f42; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-row-no { background: #e9fbf4; color: #06272f; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-row input { background: #0b1e22; border-color: #1e3f42; color: #e6f2f0; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-photo { background: linear-gradient(135deg, #0b1e22, #0d2222); } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-radios label { background: #0d2222; border-color: #1e3f42; color: #a7cfc9; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-radios label:has(input:checked) { background: #12332d; border-color: var(--green); color: #9fe3cf; } html[data-theme="dark"] .td-page #tdp-ia-wizard .tdp-ia-btn-ghost { background: #10262b; border-color: #1e3f42; color: #e6f2f0; } /* Support hub dark-mode extras */ html[data-theme="dark"] .td-page .td-ms-plan-note { background: #10302a; border-color: #1d4a3e; color: #9fe3cf; } html[data-theme="dark"] .td-page .td-ms-layout .td-plan-opt.is-featured { background: #0d2222; } /* ========================================================================== * 11. RESPONSIVE — 1100 / 900 / 640 * ========================================================================== */ @media (max-width: 1100px) { .td-page .td-bi-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; } .td-page .td-bi-applywrap { grid-template-columns: 300px minmax(0, 1fr); } } @media (max-width: 900px) { .td-page .td-bi-applywrap { grid-template-columns: 1fr; } .td-page .td-bi-applyinfo { position: static; } .td-page .td-bi-benefits { grid-template-columns: 1fr 1fr; } .td-page .td-ms-ben-grid { grid-template-columns: 1fr; } .td-page .td-bi-ctaband-inner, .td-page .td-ms-ctaband-inner { padding: 36px 30px; } /* Wizard two-column grids get cramped on tablets too. */ .td-page #tdp-ia-wizard .tdp-ia-grid { grid-template-columns: 1fr; } .td-page #tdp-ia-wizard .tdp-ia-row--edu, .td-page #tdp-ia-wizard .tdp-ia-row--exp { grid-template-columns: 34px 1fr 1fr 84px 34px; } } @media (max-width: 640px) { .td-page .td-bi-statsband { padding-bottom: 0; } .td-page .td-bi-stat { padding: 18px 16px 16px; } .td-page .td-bi-stat b { font-size: 27px; } .td-page .td-bi-stat span { font-size: 9.5px; } .td-page .td-bi-ctaband-inner, .td-page .td-ms-ctaband-inner { padding: 30px 22px; } .td-page .td-bi-ctaband h2, .td-page .td-ms-ctaband h2 { font-size: 21px; } .td-page .td-bi-ctaband-actions, .td-page .td-ms-ctaband-actions { flex-direction: column; align-items: stretch; } .td-page .td-bi-btn-gold, .td-page .td-ms-btn-gold, .td-page .td-bi-btn-light, .td-page .td-ms-btn-light { width: 100%; justify-content: center; } .td-page .td-bi-timeline { padding-left: 44px; } .td-page .td-bi-timeline .step::before { left: -44px; width: 28px; height: 28px; font-size: 12px; } .td-page .td-ms-faq .accordion { padding: 4px 18px; } } /* Reduced motion — the overlap/hover transitions are cosmetic only. */ @media (prefers-reduced-motion: reduce) { .td-page .td-bi-benefit, .td-page .td-ms-ben, .td-page #tdp-ia-wizard .tdp-ia-btn, .td-page .td-ms-layout .td-plan-opt { transition: none; } }