/** * MCS Disability Site — Clarity Design Layer * Version 6.2.0 * * A site-wide, light-first presentation layer built for readers with brain fog, * visual fatigue, low vision, and chemical-sensitivity-related cognitive load. * Content and template routing remain unchanged. This stylesheet is loaded last. */ /* ========================================================================== 1. FOUNDATIONS ========================================================================== */ :root { --deep-blue: #173b4f; --trust-blue: #245d70; --calm-teal: #2f766f; --light-teal: #edf7f4; --warm-bg: #f7faf8; --pure-white: #ffffff; --text-dark: #20312f; --text-medium: #4d5f5b; --text-light: #55655f; /* v6.1.0 was #6d7d79 — 3.95:1 (V31 FAIL). Now >=5.6:1 */ --text-muted: #4d5f5b; /* v6.1.0 NEW — legacy rules use var(--text-muted,#4a5568); the token was never defined, so dark mode fell back to the literal #4a5568 (1.91:1 on dark surfaces). Now defined in both modes. */ --border-light: #dbe7e3; --warning-orange: #9b6426; --success-green: #2f766f; --citation-purple: #5b557f; --clarity-page: #f7faf8; --clarity-surface: #ffffff; --clarity-surface-soft: #f0f7f5; --clarity-surface-warm: #fbf8f2; --clarity-ink: #20312f; --clarity-muted: #566864; --clarity-faint: #596763; /* v6.1.0 was #73827f — 3.67:1 on soft surfaces (V31 FAIL). Now >=5.4:1 */ --clarity-navy: #173b4f; --clarity-teal: #2f766f; --clarity-teal-dark: #205d57; --clarity-gold: #a56d27; --clarity-line: #dbe7e3; --clarity-line-strong: #bfd3ce; --clarity-danger: #8b3d3d; --clarity-shadow: 0 1px 2px rgba(25, 53, 48, 0.04), 0 10px 30px rgba(25, 53, 48, 0.07); --clarity-shadow-lift: 0 2px 4px rgba(25, 53, 48, 0.05), 0 20px 46px rgba(25, 53, 48, 0.11); --clarity-radius-sm: 10px; --clarity-radius: 18px; --clarity-radius-lg: 26px; --clarity-reading: 820px; --clarity-wide: 1160px; } html[data-theme="dark"] { --deep-blue: #dceef3; --trust-blue: #9ec7d0; --calm-teal: #83c9be; --light-teal: #1b3b3a; --warm-bg: #102127; --pure-white: #162d34; --text-dark: #edf4f3; --text-medium: #c4d1cf; --text-light: #9fb0ad; --text-muted: #c4d1cf; /* v6.1.0 NEW — see light-mode note; 8.01:1 on dark surfaces */ --border-light: #315058; --clarity-page: #102127; --clarity-surface: #162d34; --clarity-surface-soft: #19383a; --clarity-surface-warm: #263229; --clarity-ink: #edf4f3; --clarity-muted: #c4d1cf; --clarity-faint: #9fb0ad; --clarity-navy: #dceef3; --clarity-teal: #83c9be; --clarity-teal-dark: #a2ddd4; --clarity-gold: #ddb66d; --clarity-line: #315058; --clarity-line-strong: #476971; --clarity-danger: #f0aaaa; --clarity-shadow: 0 1px 2px rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.22); --clarity-shadow-lift: 0 2px 5px rgba(0,0,0,.25), 0 22px 48px rgba(0,0,0,.34); } html { background: var(--clarity-page); scroll-padding-top: 92px; } body { font-family: "Atkinson Hyperlegible", "Source Sans 3", system-ui, -apple-system, sans-serif !important; font-size: 18px; line-height: 1.72; color: var(--clarity-ink); background: var(--clarity-page); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body, body.inner-page, body.mcsd-page { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6, .logo, .hero-answer, .stat-number, .number { font-family: "Atkinson Hyperlegible", "Source Sans 3", Arial, sans-serif !important; color: var(--clarity-navy); letter-spacing: -0.025em; } h1 { font-size: clamp(2.35rem, 5vw, 4.3rem); line-height: 1.06; } h2 { font-size: clamp(1.85rem, 3.5vw, 3rem); line-height: 1.13; } h3 { font-size: clamp(1.3rem, 2.2vw, 1.72rem); line-height: 1.25; } h4 { font-size: 1.16rem; line-height: 1.35; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } main a:not(.btn):not(.door):not(.guide-card):not(.cross-link-card):not(.citation):not(.mcsx-link), .content-block a, .faq-item a, .glossary-term a { color: var(--clarity-teal-dark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } main a:hover, main a:focus-visible { color: var(--clarity-navy); } :focus-visible { outline: 3px solid #d7a84a; outline-offset: 3px; } ::selection { background: #d9eee9; color: #183c38; } .container { max-width: var(--clarity-wide); padding-left: clamp(18px, 4vw, 34px); padding-right: clamp(18px, 4vw, 34px); } .container-narrow, .content-block { max-width: var(--clarity-reading); } /* ========================================================================== 2. NAVIGATION ========================================================================== */ nav[role="navigation"] { background: color-mix(in srgb, var(--clarity-surface) 95%, transparent) !important; border-bottom: 1px solid var(--clarity-line); box-shadow: 0 4px 18px rgba(25, 53, 48, 0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .nav-container { max-width: 1240px; min-height: 72px; padding: 10px 26px; gap: 18px; } .logo { color: var(--clarity-navy) !important; font-size: clamp(1.06rem, 2vw, 1.32rem); white-space: nowrap; } .logo span { color: var(--clarity-teal) !important; } .nav-links { gap: 3px; align-items: center; } .nav-links > li > a, .dropdown-toggle { color: var(--clarity-ink) !important; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em; padding: 9px 10px; border-radius: 999px; } .nav-links > li > a:hover, .nav-links > li > a:focus, .dropdown-toggle:hover, .dropdown-toggle:focus { color: var(--clarity-teal-dark) !important; background: var(--clarity-surface-soft) !important; } .nav-links > li > a[style] { color: var(--clarity-teal-dark) !important; background: var(--clarity-surface-soft); box-shadow: inset 0 0 0 1px var(--clarity-line-strong); } .dropdown-menu, .search-panel { background: var(--clarity-surface) !important; border: 1px solid var(--clarity-line) !important; border-radius: 14px !important; box-shadow: var(--clarity-shadow-lift) !important; } .dropdown-menu a { color: var(--clarity-ink) !important; border-radius: 8px; } .dropdown-menu a:hover { background: var(--clarity-surface-soft) !important; color: var(--clarity-teal-dark) !important; } .nav-group-label { color: var(--clarity-faint) !important; } .search-toggle, .mobile-menu-btn, .nav-toggle { color: var(--clarity-navy) !important; } .search-toggle:hover { background: var(--clarity-surface-soft); } .search-input { background: var(--clarity-surface) !important; color: var(--clarity-ink) !important; border-color: var(--clarity-line-strong) !important; } .sr-title { color: var(--clarity-navy) !important; } .sr-excerpt { color: var(--clarity-muted) !important; } /* ========================================================================== 3. INNER PAGE HERO + WAYFINDING ========================================================================== */ .inner-hero { padding: 118px 0 48px !important; background: radial-gradient(circle at 14% 12%, rgba(47,118,111,.12), transparent 34%), radial-gradient(circle at 90% 25%, rgba(36,93,112,.10), transparent 30%), linear-gradient(180deg, var(--clarity-surface) 0%, var(--clarity-surface-soft) 100%) !important; border-bottom: 1px solid var(--clarity-line); } .inner-hero .container { max-width: 1040px; } .inner-hero .section-header { max-width: 900px; margin: 0 auto !important; text-align: center; } .inner-hero h1 { margin: 8px auto 18px; max-width: 980px; } .inner-hero .section-intro { max-width: 820px; margin: 0 auto; color: var(--clarity-muted) !important; font-size: clamp(1.05rem, 2vw, 1.24rem); line-height: 1.62; } .breadcrumb { position: static !important; margin: 0 auto 20px !important; max-width: 900px; color: var(--clarity-faint); } .breadcrumb ol { justify-content: center; } .breadcrumb a { color: var(--clarity-teal-dark) !important; } .section-label { display: inline-flex; align-items: center; gap: 7px; color: var(--clarity-teal-dark) !important; background: var(--clarity-surface-soft) !important; border: 1px solid var(--clarity-line-strong); border-radius: 999px; padding: 6px 12px; font-family: "Atkinson Hyperlegible", system-ui, sans-serif !important; font-size: 0.77rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .mcsd-page-toc { position: relative; z-index: 5; max-width: 980px; margin: -19px auto 22px; padding: 0 20px; } .mcsd-page-toc details { background: var(--clarity-surface); border: 1px solid var(--clarity-line); border-radius: 15px; box-shadow: var(--clarity-shadow); overflow: hidden; } .mcsd-page-toc summary { list-style: none; cursor: pointer; padding: 13px 18px; color: var(--clarity-navy); font-weight: 700; } .mcsd-page-toc summary::-webkit-details-marker { display: none; } .mcsd-page-toc summary::after { content: "+"; float: right; color: var(--clarity-teal); font-size: 1.25rem; } .mcsd-page-toc details[open] summary::after { content: "–"; } .mcsd-page-toc-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; } .mcsd-page-toc a { display: inline-flex; color: var(--clarity-teal-dark); background: var(--clarity-surface-soft); border: 1px solid var(--clarity-line); border-radius: 999px; padding: 7px 11px; font-size: .88rem; line-height: 1.2; text-decoration: none; } .mcsd-page-toc a:hover, .mcsd-page-toc a.is-current { background: var(--clarity-teal); color: #fff; border-color: var(--clarity-teal); } /* ========================================================================== 4. SECTIONS + READING RHYTHM ========================================================================== */ section { padding: 58px 0; } section:nth-child(even) { background: var(--clarity-surface-soft); } section:nth-child(odd) { background: var(--clarity-surface); } .inner-hero, .back-home, .cross-links, footer { background: initial; } .section-header { max-width: 900px; margin: 0 auto 30px !important; text-align: center; } .section-header h2 { margin: 12px auto 13px; max-width: 920px; } .section-header h2::after, .section-header h1::after { content: ""; display: block; width: 56px; height: 3px; margin: 15px auto 0; border-radius: 999px; background: var(--clarity-teal); } .section-header .section-intro, .section-intro { max-width: 800px; margin-left: auto; margin-right: auto; color: var(--clarity-muted) !important; font-size: 1.04rem; } .content-block { margin-left: auto !important; margin-right: auto !important; } .content-block > h2:first-child, .content-block > h3:first-child { margin-top: 0; } .content-block h2 { margin-top: 1.8em; } .content-block h3 { margin-top: 1.45em; } .content-block h4 { margin-top: 1.3em; } .content-block ul, .content-block ol { padding-left: 1.25rem; margin: 0 0 1.25rem; } .content-block li { margin-bottom: .55rem; } /* ========================================================================== 5. CARDS + GRIDS ========================================================================== */ .card-grid, .resources-grid, .guides-grid, .science-grid, .cross-link-grid, .symptom-grid, .two-col { gap: 20px !important; } .card, .mechanism-card, .symptom-item, .trigger-category, .resource-category, .guide-card, .science-card, .science-stat, .science-about-card, .cross-link-card, .glossary-term, .faq-item, .about-box, .download-cta, .test-step, .eval-step, .supp-card, .journey-section { background: var(--clarity-surface) !important; color: var(--clarity-ink) !important; border: 1px solid var(--clarity-line) !important; border-radius: var(--clarity-radius) !important; box-shadow: var(--clarity-shadow); } .card, .mechanism-card, .symptom-item, .trigger-category, .resource-category, .science-about-card, .about-box, .test-step, .eval-step, .supp-card { padding: clamp(20px, 3vw, 28px) !important; } .card:hover, .guide-card:hover, .science-card:hover, .cross-link-card:hover, .mechanism-card:hover { transform: translateY(-2px) !important; box-shadow: var(--clarity-shadow-lift) !important; border-color: var(--clarity-line-strong) !important; } .card h3, .card h4, .mechanism-card h4, .resource-category h4, .cross-link-card h4, .guide-card-body h3 a, .science-card-title, .glossary-term h3, .faq-item h3 { color: var(--clarity-navy) !important; } .card p, .mechanism-card p, .resource-category p, .cross-link-card p, .guide-card-body p, .science-card p, .glossary-term p, .faq-item p { color: var(--clarity-muted) !important; } .card-icon, .download-cta-icon { background: var(--clarity-surface-soft) !important; color: var(--clarity-teal) !important; border-radius: 13px !important; } /* ========================================================================== 6. CALLOUTS + LISTS + TIMELINES ========================================================================== */ .key-points, .key-points-box, .warning-box, .bio-callout, .crisis-inline, .note, .verdict-list { max-width: var(--clarity-reading); margin-left: auto; margin-right: auto; background: var(--clarity-surface-soft) !important; color: var(--clarity-ink) !important; border: 1px solid var(--clarity-line) !important; border-left: 5px solid var(--clarity-teal) !important; border-radius: 14px !important; padding: 22px 24px !important; box-shadow: none !important; } .warning-box { background: var(--clarity-surface-warm) !important; border-left-color: var(--clarity-gold) !important; } .key-points h4, .warning-box h4, .bio-callout h4 { color: var(--clarity-navy) !important; } .styled-list { padding-left: 0 !important; } .styled-list li { position: relative; list-style: none; padding: 13px 14px 13px 44px !important; margin: 0 0 9px; background: var(--clarity-surface); border: 1px solid var(--clarity-line); border-radius: 12px; } .styled-list li::before { left: 14px !important; top: 13px !important; color: var(--clarity-teal) !important; } .phase-timeline::before { background: var(--clarity-line-strong) !important; } .phase-item { background: var(--clarity-surface) !important; border: 1px solid var(--clarity-line) !important; border-radius: 14px !important; padding: 20px 22px 20px 30px !important; margin-bottom: 15px !important; } .phase-item::before { background: var(--clarity-teal) !important; border-color: var(--clarity-surface) !important; } .phase-label { color: var(--clarity-teal-dark) !important; } .trigger-tag, .filter-btn, .page-jump a, .guide-badge, .unit-badge, .jmeta-pill { border-radius: 999px !important; } /* ========================================================================== 7. TABLES + ACCORDIONS ========================================================================== */ .mcsd-table-wrap { overflow-x: auto; margin: 22px auto; border: 1px solid var(--clarity-line); border-radius: 15px; background: var(--clarity-surface); box-shadow: var(--clarity-shadow); } .mcsd-table-wrap table { margin: 0 !important; border: 0 !important; min-width: 680px; } .trigger-table, .clinical-test-table, table { width: 100%; border-collapse: collapse; background: var(--clarity-surface) !important; color: var(--clarity-ink) !important; } .trigger-table th, .clinical-test-table th, table th { background: var(--clarity-navy) !important; color: #fff !important; font-family: "Atkinson Hyperlegible", system-ui, sans-serif !important; font-size: .9rem; letter-spacing: .02em; text-align: left; } .trigger-table td, .clinical-test-table td, table td { background: var(--clarity-surface) !important; color: var(--clarity-ink) !important; border-color: var(--clarity-line) !important; vertical-align: top; } .trigger-table tr:nth-child(even) td, table tr:nth-child(even) td { background: var(--clarity-surface-soft) !important; } .content-block details, .mcsx-details, .mcsd-ds details { background: var(--clarity-surface) !important; color: var(--clarity-ink) !important; border: 1px solid var(--clarity-line) !important; border-radius: 14px !important; box-shadow: 0 1px 0 rgba(25,53,48,.03); margin: 12px 0 !important; padding: 0 20px !important; } .content-block details summary, .mcsx-details > summary, .mcsd-ds details summary { color: var(--clarity-navy) !important; padding: 17px 0 !important; font-size: 1.02rem; font-weight: 700; } .content-block details[open], .mcsx-details[open] { border-color: var(--clarity-line-strong) !important; box-shadow: var(--clarity-shadow); } .content-block details > *:not(summary), .mcsx-details > *:not(summary) { color: var(--clarity-muted) !important; } /* ========================================================================== 8. RESEARCH, FAQ, GUIDES, GLOSSARY ========================================================================== */ .key-research-box, .references-section { max-width: 920px; margin-left: auto; margin-right: auto; background: var(--clarity-surface) !important; border: 1px solid var(--clarity-line) !important; border-radius: var(--clarity-radius) !important; box-shadow: var(--clarity-shadow); } .key-research-header, .references-section h2 { border-color: var(--clarity-line) !important; } .key-research-header h3, .key-research-title, .key-research-title a, .reference-item a { color: var(--clarity-navy) !important; } .key-research-citation, .key-research-finding, .reference-item { color: var(--clarity-muted) !important; } .faq-item, .glossary-term { padding: 22px 24px !important; margin-bottom: 14px !important; } .faq-item:last-child, .glossary-term:last-child { margin-bottom: 0 !important; } .guide-card { overflow: hidden; } .guide-card-body { padding: 24px !important; } .guide-read-link, .link-btn { color: var(--clarity-teal-dark) !important; } .science-filter-bar { background: var(--clarity-surface) !important; border-color: var(--clarity-line) !important; } .filter-btn { background: var(--clarity-surface-soft) !important; color: var(--clarity-ink) !important; border-color: var(--clarity-line) !important; } .filter-btn.active { background: var(--clarity-teal) !important; color: #fff !important; } /* ========================================================================== 9. BUTTONS + DOWNLOADS ========================================================================== */ .btn, .btn-primary, .download-btn, .mini.solid, .mcsx-link { border-radius: 999px !important; font-family: "Atkinson Hyperlegible", system-ui, sans-serif !important; font-weight: 700 !important; } .btn, .btn--teal, .btn-primary, .download-btn { background: var(--clarity-teal) !important; color: #fff !important; border: 1px solid var(--clarity-teal) !important; box-shadow: 0 6px 16px rgba(47,118,111,.18); } .btn:hover, .btn--teal:hover, .btn-primary:hover, .download-btn:hover { background: var(--clarity-teal-dark) !important; color: #fff !important; transform: translateY(-1px); } .btn--blue { background: var(--clarity-navy) !important; border-color: var(--clarity-navy) !important; } .download-cta { text-align: center; padding: 34px !important; } /* ========================================================================== 10. HOMEPAGE — LIGHT, CALM, DECISION-FIRST ========================================================================== */ body.mcsd-home { background: var(--clarity-page) !important; color: var(--clarity-ink) !important; } body.mcsd-home .hero { padding: 126px 0 56px !important; background: radial-gradient(circle at 15% 25%, rgba(47,118,111,.13), transparent 31%), radial-gradient(circle at 88% 22%, rgba(36,93,112,.11), transparent 31%), linear-gradient(180deg, var(--clarity-surface) 0%, var(--clarity-surface-soft) 100%) !important; color: var(--clarity-ink) !important; border-bottom: 1px solid var(--clarity-line); } body.mcsd-home .hero::before, body.mcsd-home .hero::after { opacity: .35 !important; } body.mcsd-home .hero-title, body.mcsd-home .hero h1 { color: var(--clarity-navy) !important; } body.mcsd-home .hero-answer { color: var(--clarity-teal) !important; } body.mcsd-home .hero-subtitle { color: var(--clarity-muted) !important; } body.mcsd-home .hero-affirm span { color: var(--clarity-teal-dark) !important; background: var(--clarity-surface) !important; border: 1px solid var(--clarity-line) !important; border-radius: 999px; } body.mcsd-home .hero-art { filter: saturate(.72); } body.mcsd-home .hero-stats { background: color-mix(in srgb, var(--clarity-surface) 86%, transparent) !important; border: 1px solid var(--clarity-line) !important; border-radius: 20px !important; box-shadow: var(--clarity-shadow); } body.mcsd-home .hero-stat .number { color: var(--clarity-navy) !important; } body.mcsd-home .hero-stat .label { color: var(--clarity-muted) !important; } .mcsd-ds .doors, .mcsd-ds .directory { background: var(--clarity-surface) !important; } .mcsd-ds .doors-head, .mcsd-ds .directory-head { text-align: center; max-width: 850px; margin-left: auto; margin-right: auto; } .mcsd-ds .door { background: var(--clarity-surface) !important; color: var(--clarity-ink) !important; border: 1px solid var(--clarity-line) !important; box-shadow: var(--clarity-shadow) !important; border-radius: 20px !important; } .mcsd-ds .door:hover { box-shadow: var(--clarity-shadow-lift) !important; border-color: var(--clarity-line-strong) !important; } .mcsd-ds .door h3 { color: var(--clarity-navy) !important; } .mcsd-ds .door p { color: var(--clarity-muted) !important; } .mcsd-ds .door .who, .mcsd-ds .door .go { color: var(--clarity-teal-dark) !important; } /* ========================================================================== 11. MATTRESS PAGE BRIDGE ========================================================================== */ body.page-safe-mattresses, body.page-safe-mattresses .inner-hero, body.page-safe-mattresses #safe-mattress-guide, body.page-safe-mattresses #safe-mattress-guide > section { background-color: var(--clarity-page) !important; } body.page-safe-mattresses #safe-mattress-guide > section:nth-child(even) { background: var(--clarity-surface-soft) !important; } body.page-safe-mattresses #safe-mattress-guide > section:nth-child(odd) { background: var(--clarity-surface) !important; } .mcsx-top-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 940px; margin: 0 auto 24px; } .mcsx-top-two-card { background: var(--clarity-surface); border: 1px solid var(--clarity-line); border-top: 5px solid var(--clarity-teal); border-radius: var(--clarity-radius); padding: 24px; box-shadow: var(--clarity-shadow); } .mcsx-top-two-card h3 { margin: 0 0 8px; } .mcsx-top-two-card p { color: var(--clarity-muted); } .mcsx-top-two-card ul { margin: 13px 0 0; padding-left: 1.1rem; } .mcsx-top-two-card li { margin: 7px 0; } .mcsx-top-two-label { color: var(--clarity-teal-dark); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .mcsx-grid { gap: 18px !important; max-width: 1060px; margin: 0 auto; } .mcsx-card { border-radius: var(--clarity-radius) !important; border-color: var(--clarity-line) !important; box-shadow: var(--clarity-shadow); padding: 24px !important; } .mcsx-card.is-match { border-color: var(--clarity-teal) !important; box-shadow: 0 0 0 2px var(--clarity-teal), var(--clarity-shadow-lift) !important; } .mcsx-filter { background: var(--clarity-surface-soft) !important; border-color: var(--clarity-line-strong) !important; border-radius: 16px !important; } .mcsx-independence { max-width: 940px; margin-left: auto; margin-right: auto; } /* ========================================================================== 12. CROSS LINKS + FOOTER ========================================================================== */ .cross-links { background: var(--clarity-surface-soft) !important; border-top: 1px solid var(--clarity-line); border-bottom: 1px solid var(--clarity-line); } .cross-link-card { padding: 22px !important; text-decoration: none !important; } .back-home { background: var(--clarity-surface) !important; } footer { background: #173b4f !important; color: #e9f2f1 !important; padding: 54px 0 26px !important; } footer a { color: #b8e3dc !important; } footer p { color: #e9f2f1; } footer .disclaimer { background: rgba(255,255,255,.08) !important; color: #e9f2f1 !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px !important; padding: 20px !important; } .footer-nav, .footer-ecosystem, .footer-copyright, .footer-cite { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; } .footer-bottom-bar { border-color: rgba(255,255,255,.14) !important; } .back-to-top { background: var(--clarity-teal) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.7) !important; box-shadow: var(--clarity-shadow-lift); } /* ========================================================================== 13. INLINE-STYLE DEFENSES + DARK MODE ========================================================================== */ html[data-theme="dark"] body, html[data-theme="dark"] .inner-page { background: var(--clarity-page) !important; } html[data-theme="dark"] .card, html[data-theme="dark"] .content-block details, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .glossary-term, html[data-theme="dark"] .key-research-box, html[data-theme="dark"] .science-card, html[data-theme="dark"] .guide-card, html[data-theme="dark"] .cross-link-card { color: var(--clarity-ink) !important; } /* Many legacy callouts carry a literal light background inline. Keep their text dark in both modes so no page becomes unreadable. */ :where(.key-points,.warning-box,.card,.content-block,.faq-item,.glossary-term)[style*="background"] { color: #20312f !important; } :where(.key-points,.warning-box,.card,.content-block,.faq-item,.glossary-term)[style*="background"] :where(p,li,span,strong,em,h2,h3,h4) { color: #20312f !important; } /* ========================================================================== 14. RESPONSIVE + REDUCED MOTION ========================================================================== */ @media (max-width: 980px) { .nav-container { padding-left: 18px; padding-right: 18px; } .nav-links { background: var(--clarity-surface) !important; border: 1px solid var(--clarity-line) !important; box-shadow: var(--clarity-shadow-lift) !important; } .nav-links a { color: var(--clarity-ink) !important; } .dropdown-menu { box-shadow: none !important; border: 0 !important; } .mcsx-top-two { grid-template-columns: 1fr; } } @media (max-width: 768px) { body { font-size: 17px; line-height: 1.68; } .inner-hero { padding-top: 104px !important; padding-bottom: 38px !important; } body.mcsd-home .hero { padding-top: 108px !important; } section { padding: 44px 0; } .section-header { margin-bottom: 24px !important; } .card-grid, .resources-grid, .guides-grid, .science-grid, .cross-link-grid, .symptom-grid, .two-col { grid-template-columns: 1fr !important; } .mcsd-page-toc { margin-top: -14px; padding: 0 14px; } .mcsd-page-toc-links { flex-direction: column; align-items: stretch; } .mcsd-page-toc a { border-radius: 10px; } .card, .mechanism-card, .symptom-item, .resource-category, .faq-item, .glossary-term { padding: 20px !important; } .footer-bottom-bar { flex-direction: column; text-align: center; } } @media (max-width: 520px) { h1 { font-size: 2.25rem; } h2 { font-size: 1.8rem; } .container { padding-left: 17px; padding-right: 17px; } .inner-hero .section-intro { font-size: 1rem; } .section-label { font-size: .7rem; } .mcsx-card, .mcsx-top-two-card { padding: 19px !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } @media print { nav[role="navigation"], .mcsd-page-toc, .back-to-top, .back-home, footer { display: none !important; } body { background: #fff !important; color: #000 !important; font-size: 11pt; } section { padding: 20px 0 !important; background: #fff !important; } .card, .faq-item, .glossary-term, .key-research-box { box-shadow: none !important; break-inside: avoid; } } /* ========================================================================== 15. SPACING NORMALIZATION (v6.0.0 polish) The biggest source of the "haphazard / some tight, some loose" spacing was per-template inline section padding (style="padding:...") overriding the rhythm set in §4. This forces one consistent vertical rhythm site-wide. The hero and thin utility bands intentionally keep their own tighter spacing. ========================================================================== */ section:not(.inner-hero):not(.hero) { padding-top: 56px !important; padding-bottom: 56px !important; } @media (max-width: 768px) { section:not(.inner-hero):not(.hero) { padding-top: 40px !important; padding-bottom: 40px !important; } } /* Thin utility bands stay tight and even (ID/class beats the rule above). */ .guide-download-bar, #on-this-page, #mcsx-contact-cta, .orientation-banner { padding-top: 22px !important; padding-bottom: 22px !important; } /* One consistent header-to-content gap everywhere. */ .section-header { margin-bottom: 28px !important; } /* Neutralize ad-hoc top margins so the header->content and block->block gaps read evenly instead of randomly tight or loose. */ .content-block > *:first-child { margin-top: 0 !important; } .content-block > .card-grid, .content-block > .trigger-table, .content-block > .key-points, .content-block > .mcsx-grid, .content-block > .mcsx-independence { margin-top: 22px !important; } /* Even, consistent grid gutters regardless of per-template inline gaps. */ .card-grid { gap: 22px !important; } /* Consistent gap between stacked deeper-explanation accordions. */ .mcsx-details, .content-block > details { margin: 12px auto !important; max-width: 880px; } /* ========================================================================== 16. v6.1.0 — VISITOR VISIBILITY + POLISH PASS Appended last so it wins the cascade without editing legacy rules. Every value below was derived from a measured WCAG ratio, not estimated. Gates: V31 (contrast, BLOCK), V30/V32 (targets/focus), V37 (spacing scale). No template markup and no content were changed by this section. ========================================================================== */ /* --- 16.1 Breadcrumb: strip the leaked main-nav navy band ----------------- The bare `nav{background:rgba(26,54,93,.96)}` rule in site.css also matched