/** * NAAT Foundation — Runtime Color Presets * * Overrides CSS custom properties via data attributes on . * Two composable data attributes: * data-naat-season = default | festive | earth | high-contrast * data-naat-dark = true (composes on top of any season) * * @package NAAT_Foundation */ /* ========================================================================== Festive Season (Christmas / New Year — Dec 1 to Jan 7) ========================================================================== */ html[data-naat-season="festive"] { --naat-secondary: #C62828; --naat-secondary-light: #E53935; --naat-secondary-dark: #B71C1C; --naat-accent: #FFD700; --naat-accent-light: #FFE082; --naat-accent-hover: #FFC107; --naat-secondary-text: #B71C1C; --naat-off-white: #FFF8E1; --naat-gradient-cta: linear-gradient(135deg, #FFD700 0%, #FFC107 100%); --naat-gradient-gold: linear-gradient(135deg, #C62828 0%, #B71C1C 100%); --naat-shadow-colored: 0 10px 30px rgba(198, 40, 40, 0.2); } /* ========================================================================== Earth Season (Environmental Awareness — Apr 1 to Jun 30) ========================================================================== */ html[data-naat-season="earth"] { --naat-primary: #5D4037; --naat-primary-light: #795548; --naat-primary-dark: #3E2723; --naat-secondary: #8BC34A; --naat-secondary-light: #AED581; --naat-secondary-dark: #689F38; --naat-accent: #FF7043; --naat-accent-light: #FF8A65; --naat-accent-hover: #E64A19; --naat-text: #3E2723; --naat-text-light: #6D4C41; --naat-secondary-text: #558B2F; --naat-off-white: #FFF8E1; --naat-light-gray: #EFEBE9; --naat-gradient-primary: linear-gradient(135deg, #5D4037 0%, #795548 50%, #5D4037 100%); --naat-gradient-cta: linear-gradient(135deg, #FF7043 0%, #E64A19 100%); --naat-gradient-gold: linear-gradient(135deg, #8BC34A 0%, #689F38 100%); --naat-overlay-dark: linear-gradient(135deg, rgba(62, 39, 35, 0.88) 0%, rgba(93, 64, 55, 0.72) 100%); --naat-shadow-colored: 0 10px 30px rgba(93, 64, 55, 0.2); } /* ========================================================================== Easter Season (Spring — Mar 10 to Apr 30) ========================================================================== */ html[data-naat-season="easter"] { --naat-primary: #6A1B9A; --naat-primary-light: #8E24AA; --naat-primary-dark: #4A148C; --naat-secondary: #F8BBD0; --naat-secondary-light: #FCE4EC; --naat-secondary-dark: #F48FB1; --naat-accent: #4CAF50; --naat-accent-light: #66BB6A; --naat-accent-hover: #388E3C; --naat-secondary-text: #AD1457; --naat-off-white: #FFF8F0; --naat-gradient-primary: linear-gradient(135deg, #6A1B9A 0%, #8E24AA 50%, #6A1B9A 100%); --naat-gradient-cta: linear-gradient(135deg, #AD1457 0%, #E65100 100%); --naat-gradient-gold: linear-gradient(135deg, #F8BBD0 0%, #FFD54F 100%); --naat-overlay-dark: linear-gradient(135deg, rgba(74, 20, 140, 0.88) 0%, rgba(106, 27, 154, 0.72) 100%); --naat-shadow-colored: 0 10px 30px rgba(106, 27, 154, 0.2); } /* ========================================================================== High Contrast (WCAG AAA — 7:1 minimum ratios) ========================================================================== */ html[data-naat-season="high-contrast"] { --naat-primary: #006400; --naat-primary-light: #1B7A1B; --naat-primary-dark: #003300; --naat-secondary: #FFD600; --naat-secondary-light: #FFEA00; --naat-secondary-dark: #F9A825; --naat-accent: #FF3D00; --naat-accent-light: #FF6E40; --naat-accent-hover: #DD2C00; --naat-text: #000000; --naat-text-light: #424242; --naat-gray: #757575; --naat-dark-gray: #212121; --naat-secondary-text: #B8860B; --naat-gradient-primary: linear-gradient(135deg, #006400 0%, #1B7A1B 50%, #006400 100%); --naat-gradient-cta: linear-gradient(135deg, #FF3D00 0%, #DD2C00 100%); --naat-gradient-gold: linear-gradient(135deg, #FFD600 0%, #F9A825 100%); --naat-overlay-dark: linear-gradient(135deg, rgba(0, 51, 0, 0.92) 0%, rgba(0, 100, 0, 0.78) 100%); --naat-shadow-colored: 0 10px 30px rgba(0, 100, 0, 0.25); } /* ========================================================================== Dark Mode — Composes on top of any seasonal theme. Inverts neutrals/backgrounds, lightens accents for dark backgrounds. ========================================================================== */ html[data-naat-dark="true"] { --naat-white: #121212; --naat-off-white: #1E1E1E; --naat-light-gray: #2C2C2C; --naat-dark-gray: #BDBDBD; --naat-text: #E8E8E8; --naat-text-light: #B0B0B0; --naat-gray: #9E9E9E; --naat-border: #404040; --naat-primary: #4CAF50; --naat-primary-light: #66BB6A; --naat-primary-dark: #388E3C; --naat-secondary: #FFD54F; --naat-secondary-light: #FFE082; --naat-secondary-dark: #FFCA28; --naat-accent: #FF7043; --naat-accent-light: #FF8A65; --naat-accent-hover: #FF5722; --naat-secondary-text: #FFD54F; --naat-error: #ef5350; --naat-info: #42a5f5; --naat-gradient-primary: linear-gradient(135deg, #388E3C 0%, #4CAF50 50%, #388E3C 100%); --naat-gradient-cta: linear-gradient(135deg, #FF7043 0%, #FF5722 100%); --naat-gradient-gold: linear-gradient(135deg, #FFD54F 0%, #FFCA28 100%); --naat-overlay-dark: linear-gradient(135deg, rgba(18, 18, 18, 0.92) 0%, rgba(30, 30, 30, 0.78) 100%); --naat-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --naat-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25); --naat-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.35); --naat-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4); --naat-shadow-colored: 0 10px 30px rgba(76, 175, 80, 0.15); color-scheme: dark; } /* Festive + Dark Mode composites */ html[data-naat-season="festive"][data-naat-dark="true"] { --naat-secondary: #EF5350; --naat-secondary-light: #E57373; --naat-secondary-dark: #E53935; --naat-accent: #FFD740; --naat-accent-light: #FFE57F; --naat-secondary-text: #EF5350; --naat-gradient-cta: linear-gradient(135deg, #FFD740 0%, #FFC400 100%); --naat-gradient-gold: linear-gradient(135deg, #EF5350 0%, #E53935 100%); --naat-shadow-colored: 0 10px 30px rgba(239, 83, 80, 0.15); } /* Easter + Dark Mode composites */ html[data-naat-season="easter"][data-naat-dark="true"] { --naat-primary: #CE93D8; --naat-primary-light: #E1BEE7; --naat-primary-dark: #BA68C8; --naat-secondary: #F48FB1; --naat-secondary-light: #F8BBD0; --naat-secondary-dark: #EC407A; --naat-accent: #66BB6A; --naat-accent-light: #81C784; --naat-secondary-text: #F48FB1; --naat-gradient-primary: linear-gradient(135deg, #BA68C8 0%, #CE93D8 50%, #BA68C8 100%); --naat-gradient-cta: linear-gradient(135deg, #EC407A 0%, #E65100 100%); --naat-gradient-gold: linear-gradient(135deg, #F48FB1 0%, #FFD54F 100%); --naat-shadow-colored: 0 10px 30px rgba(206, 147, 216, 0.15); } /* Earth + Dark Mode composites */ html[data-naat-season="earth"][data-naat-dark="true"] { --naat-primary: #A1887F; --naat-primary-light: #BCAAA4; --naat-primary-dark: #8D6E63; --naat-secondary: #AED581; --naat-secondary-light: #C5E1A5; --naat-secondary-dark: #9CCC65; --naat-accent: #FF8A65; --naat-accent-light: #FFAB91; --naat-secondary-text: #AED581; --naat-gradient-primary: linear-gradient(135deg, #8D6E63 0%, #A1887F 50%, #8D6E63 100%); --naat-gradient-cta: linear-gradient(135deg, #FF8A65 0%, #FF7043 100%); --naat-gradient-gold: linear-gradient(135deg, #AED581 0%, #9CCC65 100%); --naat-shadow-colored: 0 10px 30px rgba(161, 136, 127, 0.15); } /* High Contrast + Dark Mode composites */ html[data-naat-season="high-contrast"][data-naat-dark="true"] { --naat-white: #000000; --naat-off-white: #0A0A0A; --naat-light-gray: #1A1A1A; --naat-text: #FFFFFF; --naat-text-light: #E0E0E0; --naat-primary: #00E676; --naat-primary-light: #69F0AE; --naat-primary-dark: #00C853; --naat-secondary: #FFFF00; --naat-accent: #FF6E40; --naat-secondary-text: #FFFF00; --naat-gradient-primary: linear-gradient(135deg, #00C853 0%, #00E676 50%, #00C853 100%); --naat-gradient-cta: linear-gradient(135deg, #FF6E40 0%, #FF3D00 100%); --naat-gradient-gold: linear-gradient(135deg, #FFFF00 0%, #FFD600 100%); --naat-shadow-colored: 0 10px 30px rgba(0, 230, 118, 0.2); } /* ========================================================================== Festive Season — CTA contrast fix Gold/yellow CTA background needs dark text (white on gold ≈ 1.3:1 ratio). ========================================================================== */ html[data-naat-season="festive"] .naat-section--cta, html[data-naat-season="festive"] .naat-cta-banner { color: #1B5E20; } html[data-naat-season="festive"] .naat-section--cta h2, html[data-naat-season="festive"] .naat-cta-banner__inner h2 { color: #1B5E20; } html[data-naat-season="festive"] .naat-section--cta .naat-btn--primary { background-color: #1B5E20; border-color: #1B5E20; color: #FFD700; } html[data-naat-season="festive"] .naat-section--cta .naat-btn--primary:hover { background-color: #0D3B14; border-color: #0D3B14; } html[data-naat-season="festive"] .naat-section--cta .naat-btn--outline-light, html[data-naat-season="festive"] .naat-cta-banner .naat-btn--outline-light { color: #1B5E20; border-color: rgba(27, 94, 32, 0.5); } html[data-naat-season="festive"] .naat-section--cta .naat-btn--outline-light:hover, html[data-naat-season="festive"] .naat-cta-banner .naat-btn--outline-light:hover { background: rgba(27, 94, 32, 0.1); border-color: #1B5E20; color: #1B5E20; } html[data-naat-season="festive"] .naat-btn--accent { background-color: #1B5E20; color: #FFD700; border-color: #1B5E20; } html[data-naat-season="festive"] .naat-btn--accent:hover { background-color: #0D3B14; color: #FFD700; } /* Festive + Dark CTA — gold bg still needs dark text */ html[data-naat-season="festive"][data-naat-dark="true"] .naat-section--cta, html[data-naat-season="festive"][data-naat-dark="true"] .naat-cta-banner { color: #1B5E20; } html[data-naat-season="festive"][data-naat-dark="true"] .naat-section--cta h2, html[data-naat-season="festive"][data-naat-dark="true"] .naat-cta-banner__inner h2 { color: #1B5E20; } /* ========================================================================== Dark Mode — Text-on-colored-surface contrast fixes Problem: --naat-white is used for both page backgrounds (cards, page bg) AND text on colored surfaces (headers, CTAs, overlays, footer). Dark mode flips --naat-white to #121212 (near-black), making all white text on gradient/overlay/colored backgrounds invisible. Fix: Re-scope --naat-white to #FFFFFF inside colored-surface containers. All children inherit legible white text via CSS custom property scoping. ========================================================================== */ /* --- Colored-surface containers --- These have gradient/overlay/colored backgrounds where text must stay white. Scoping --naat-white locally restores legibility for ALL children. */ html[data-naat-dark="true"] .naat-page-header, html[data-naat-dark="true"] .naat-section--cta, html[data-naat-dark="true"] .naat-cta-banner, html[data-naat-dark="true"] .naat-mosaic__caption, html[data-naat-dark="true"] .naat-gallery-item__overlay, html[data-naat-dark="true"] .naat-donate-sidebar-card--highlight { --naat-white: #FFFFFF; } /* Primary sections — darken bg for WCAG AA contrast (white on #4CAF50 ≈ 3:1) */ html[data-naat-dark="true"] .naat-section--primary { --naat-white: #FFFFFF; background-color: #1B5E20; } /* CTA sections — darken gradient for contrast (white on #FF7043 ≈ 2.8:1) */ html[data-naat-dark="true"] .naat-section--cta { background: linear-gradient(135deg, #BF360C 0%, #D84315 100%); } html[data-naat-dark="true"] .naat-cta-banner { background: linear-gradient(135deg, #BF360C 0%, #D84315 100%); } /* --- Footer --- Dark green footer bg becomes too bright in dark mode (#388E3C). Override to near-black with proper white text. */ html[data-naat-dark="true"] .site-footer { --naat-white: #E8E8E8; background-color: #1A1A1A; } html[data-naat-dark="true"] .footer-col__title { color: #FFFFFF; } html[data-naat-dark="true"] .site-footer .site-title { color: #FFFFFF; } html[data-naat-dark="true"] .footer-newsletter button { color: #FFFFFF; } html[data-naat-dark="true"] .footer-newsletter input[type="email"] { background-color: #2C2C2C; color: #E8E8E8; border: 1px solid #404040; } /* --- Buttons on colored backgrounds --- .naat-btn--primary uses color: var(--naat-white) on accent bg. Must force white text since buttons appear on multiple bg types. */ html[data-naat-dark="true"] .naat-btn--primary, html[data-naat-dark="true"] .naat-btn--primary:hover { color: #FFFFFF; } html[data-naat-dark="true"] .nav-donate-btn a { color: #FFFFFF !important; } html[data-naat-dark="true"] .naat-floating-donate__btn, html[data-naat-dark="true"] .naat-floating-donate__btn:hover { color: #FFFFFF; } html[data-naat-dark="true"] .skip-link, html[data-naat-dark="true"] .skip-link:focus { color: #FFFFFF; } /* Outline button on regular dark backgrounds (outside colored sections) */ html[data-naat-dark="true"] .naat-btn--outline { color: var(--naat-text); border-color: var(--naat-text); } html[data-naat-dark="true"] .naat-btn--outline:hover { background-color: var(--naat-text); color: var(--naat-off-white); } /* Accent button (used in CTA banners) — keep visible in dark mode */ html[data-naat-dark="true"] .naat-btn--accent { background-color: #FFFFFF; color: var(--naat-accent); border-color: #FFFFFF; } html[data-naat-dark="true"] .naat-btn--accent:hover { background: rgba(255, 255, 255, 0.9); } html[data-naat-dark="true"] .naat-btn--outline-light { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); } html[data-naat-dark="true"] .naat-btn--outline-light:hover { color: #FFFFFF; border-color: #FFFFFF; } /* --- Cards missing from base dark mode overrides --- style.css covers .naat-card, .naat-program-card, .naat-news-card, etc. but omits these card types. */ html[data-naat-dark="true"] .naat-team-card, html[data-naat-dark="true"] .naat-impact-card, html[data-naat-dark="true"] .naat-carousel__slide .naat-testimonial, html[data-naat-dark="true"] .naat-gallery-item__embed, html[data-naat-dark="true"] .naat-donate-sidebar-card, html[data-naat-dark="true"] .naat-event-card, html[data-naat-dark="true"] .naat-contact-card { background-color: var(--naat-off-white); border-color: var(--naat-border); } /* Team card link hover — prevent near-black text on green bg */ html[data-naat-dark="true"] .naat-team-card__links a:hover { color: #FFFFFF; } /* --- Carousel navigation --- */ html[data-naat-dark="true"] .naat-carousel__btn { background-color: var(--naat-off-white); color: var(--naat-text); } html[data-naat-dark="true"] .naat-carousel__btn:hover { background-color: var(--naat-primary); color: #FFFFFF; } /* --- Timeline (About page) --- */ html[data-naat-dark="true"] .naat-timeline__marker { border-color: var(--naat-primary); } html[data-naat-dark="true"] .naat-timeline__year { color: #FFFFFF; } html[data-naat-dark="true"] .naat-timeline__line { background-color: var(--naat-border); } /* --- WPForms & GiveWP submit buttons --- */ html[data-naat-dark="true"] .wpforms-submit, html[data-naat-dark="true"] .wpforms-form button[type="submit"], html[data-naat-dark="true"] .naat-donate-form__embed .give-btn, html[data-naat-dark="true"] .naat-donate-form__embed .givewp-donation-form-modal__open { color: #FFFFFF !important; } /* Program card placeholder icon */ html[data-naat-dark="true"] .naat-program-card__image--placeholder { color: rgba(255, 255, 255, 0.7); } /* --- The Events Calendar hardcoded colors --- TEC uses hardcoded #666/#555/#444 that don't adapt in dark mode. */ html[data-naat-dark="true"] .tribe-events .tribe-events-calendar-list__event-datetime-wrapper, html[data-naat-dark="true"] .tribe-events .tribe-events-calendar-list__event-description, html[data-naat-dark="true"] .tribe-events-single-event-description, html[data-naat-dark="true"] .tribe-events .tribe-events-address { color: var(--naat-text-light); } html[data-naat-dark="true"] .tribe-events .tribe-events-header__top-bar, html[data-naat-dark="true"] .tribe-events .tribe-events-calendar-list__event-row { border-color: var(--naat-border); } /* --- Zigzag section (About page) --- */ html[data-naat-dark="true"] .naat-zigzag__step { color: rgba(255, 255, 255, 0.15); } /* --- High Contrast + Dark colored surfaces --- HC+Dark uses --naat-white: #000000, must also scope back for surfaces. */ html[data-naat-season="high-contrast"][data-naat-dark="true"] .naat-page-header, html[data-naat-season="high-contrast"][data-naat-dark="true"] .naat-section--primary, html[data-naat-season="high-contrast"][data-naat-dark="true"] .naat-section--cta, html[data-naat-season="high-contrast"][data-naat-dark="true"] .naat-cta-banner, html[data-naat-season="high-contrast"][data-naat-dark="true"] .site-footer, html[data-naat-season="high-contrast"][data-naat-dark="true"] .naat-mosaic__caption, html[data-naat-season="high-contrast"][data-naat-dark="true"] .naat-gallery-item__overlay, html[data-naat-season="high-contrast"][data-naat-dark="true"] .naat-donate-sidebar-card--highlight { --naat-white: #FFFFFF; } /* --- Festive + Dark colored surfaces --- */ html[data-naat-season="festive"][data-naat-dark="true"] .naat-page-header, html[data-naat-season="festive"][data-naat-dark="true"] .naat-section--primary, html[data-naat-season="festive"][data-naat-dark="true"] .naat-mosaic__caption, html[data-naat-season="festive"][data-naat-dark="true"] .naat-gallery-item__overlay, html[data-naat-season="festive"][data-naat-dark="true"] .naat-donate-sidebar-card--highlight, html[data-naat-season="festive"][data-naat-dark="true"] .site-footer { --naat-white: #FFFFFF; } /* --- Earth + Dark colored surfaces --- */ html[data-naat-season="earth"][data-naat-dark="true"] .naat-page-header, html[data-naat-season="earth"][data-naat-dark="true"] .naat-section--primary, html[data-naat-season="earth"][data-naat-dark="true"] .naat-section--cta, html[data-naat-season="earth"][data-naat-dark="true"] .naat-cta-banner, html[data-naat-season="earth"][data-naat-dark="true"] .naat-mosaic__caption, html[data-naat-season="earth"][data-naat-dark="true"] .naat-gallery-item__overlay, html[data-naat-season="earth"][data-naat-dark="true"] .naat-donate-sidebar-card--highlight, html[data-naat-season="earth"][data-naat-dark="true"] .site-footer { --naat-white: #FFFFFF; } /* --- Easter + Dark colored surfaces --- */ html[data-naat-season="easter"][data-naat-dark="true"] .naat-page-header, html[data-naat-season="easter"][data-naat-dark="true"] .naat-section--primary, html[data-naat-season="easter"][data-naat-dark="true"] .naat-section--cta, html[data-naat-season="easter"][data-naat-dark="true"] .naat-cta-banner, html[data-naat-season="easter"][data-naat-dark="true"] .naat-mosaic__caption, html[data-naat-season="easter"][data-naat-dark="true"] .naat-gallery-item__overlay, html[data-naat-season="easter"][data-naat-dark="true"] .naat-donate-sidebar-card--highlight, html[data-naat-season="easter"][data-naat-dark="true"] .site-footer { --naat-white: #FFFFFF; } /* ========================================================================== Easter Season — CTA contrast fix Rose/pink CTA gradient needs white text for legibility. ========================================================================== */ html[data-naat-season="easter"] .naat-btn--accent { background-color: #4CAF50; color: #FFFFFF; border-color: #4CAF50; } html[data-naat-season="easter"] .naat-btn--accent:hover { background-color: #388E3C; color: #FFFFFF; } /* ========================================================================== Seasonal Decorative CSS Overlays CSS-only enhancements that overlay on hero/header sections. ========================================================================== */ /* --- Festive/Christmas: Subtle snowflake pattern + gold star accents --- */ html[data-naat-season="festive"] .naat-page-header::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px), radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 80px 80px, 120px 120px, 50px 50px; background-position: 0 0, 40px 40px, 20px 70px; z-index: 1; } html[data-naat-season="festive"] .naat-page-header .naat-container { position: relative; z-index: 2; } html[data-naat-season="festive"] .naat-cta-banner__inner::before { content: '\2605'; position: absolute; top: -12px; right: 24px; font-size: 28px; color: #FFD700; opacity: 0.6; pointer-events: none; } html[data-naat-season="festive"] .naat-team-card, html[data-naat-season="festive"] .naat-impact-card, html[data-naat-season="festive"] .naat-program-card { border-top: 3px solid var(--naat-accent); } /* --- Easter: Soft floral pattern + spring accents --- */ html[data-naat-season="easter"] .naat-page-header::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(ellipse, rgba(248, 187, 208, 0.2) 8px, transparent 8px), radial-gradient(ellipse, rgba(206, 147, 216, 0.15) 6px, transparent 6px), radial-gradient(ellipse, rgba(129, 199, 132, 0.12) 5px, transparent 5px); background-size: 100px 100px, 140px 140px, 70px 70px; background-position: 10px 10px, 60px 50px, 30px 80px; z-index: 1; } html[data-naat-season="easter"] .naat-page-header .naat-container { position: relative; z-index: 2; } html[data-naat-season="easter"] .naat-team-card, html[data-naat-season="easter"] .naat-impact-card, html[data-naat-season="easter"] .naat-program-card { border-top: 3px solid var(--naat-primary); } html[data-naat-season="easter"] .naat-section .section-heading h2::after { content: ''; display: block; width: 60px; height: 3px; margin: 12px auto 0; background: linear-gradient(90deg, var(--naat-primary), var(--naat-secondary)); border-radius: 2px; }