/* ============================================================ FAIRWAY ABC — themes.css Seasonal & Holiday visual overrides. Applied via [data-theme="..."] on . Each theme overrides: • CSS custom properties (bg palette, accent, border) • Hero section background gradient (atmosphere) • Subtle shimmer/glow tint ============================================================ */ /* ── THEME BANNER ─────────────────────────────────────────── */ .theme-banner { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 500; text-align: center; position: relative; z-index: 1100; /* above nav (z-index 1000) */ overflow: hidden; transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease; max-height: 80px; line-height: 1.5; } .theme-banner-text { flex: 1; } .theme-banner-close { flex-shrink: 0; background: transparent; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; opacity: 0.6; transition: opacity 0.2s; padding: 0 0.25rem; color: inherit; } .theme-banner-close:hover { opacity: 1; } /* Adjust the fixed nav so it sits below the banner */ .theme-banner ~ .nav-header { top: 0; /* nav stays fixed; banner scrolls away */ } /* Banner colour skins */ .banner-christmas { background: #1a0a0a; color: #f5c8c8; border-bottom: 1px solid #4a1515; } .banner-new-year { background: #0d0d1a; color: #d4c87a; border-bottom: 1px solid #2a2845; } .banner-valentines { background: #1a0812; color: #f5a0b8; border-bottom: 1px solid #4a1530; } .banner-st-patricks { background: #081a0e; color: #80d89a; border-bottom: 1px solid #154a22; } .banner-patriotic { background: #0a0e1a; color: #a8c4f0; border-bottom: 1px solid #1a2650; } .banner-labor-day { background: #081018; color: #90bcf0; border-bottom: 1px solid #142840; } .banner-halloween { background: #120a04; color: #f0a060; border-bottom: 1px solid #3a1a08; } .banner-thanksgiving { background: #120a04; color: #e0b878; border-bottom: 1px solid #3a2008; } /* ============================================================ SPRING (Mar 20 – Jun 20) Atmosphere: Fresh, lighter backgrounds, soft greens and blossoming warmth. Feels brighter and more open than the default dark whiskey-den. ============================================================ */ [data-theme="spring"] { --bg-primary: #080f07; /* deep green-dark */ --bg-secondary: #0d1a0b; --bg-card: #111f0e; --bg-card-hover: #172914; --gold: #52c07a; /* spring green accent */ --gold-light: #72e09a; --gold-dark: #328a52; --gold-faint: rgba(82, 192, 122, 0.12); --border: #1e3a1a; --border-light: #2e4e28; --shadow-gold: 0 4px 20px rgba(82,192,122,0.25); --text-muted: #9abf94; --text-dim: #4a6a44; } [data-theme="spring"] .hero { background: radial-gradient(ellipse at 60% 40%, rgba(40,100,30,0.50) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(82,192,122,0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(180,220,80,0.06) 0%, transparent 40%), linear-gradient(150deg, #06100a 0%, #0d1e0a 45%, #080f06 100%); } [data-theme="spring"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(82,192,122,0.03) 80px, rgba(82,192,122,0.03) 82px ); } [data-theme="spring"] .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(60,160,60,0.06) 0%, transparent 70%); pointer-events: none; } /* ============================================================ SUMMER (Jun 21 – Sep 22) Atmosphere: Warm, vibrant, sun-soaked amber. Backgrounds shift warm, accent is a bright tropical orange-gold. ============================================================ */ [data-theme="summer"] { --bg-primary: #0f0900; /* deep sun-baked dark */ --bg-secondary: #180e00; --bg-card: #1e1400; --bg-card-hover: #271a00; --gold: #f0a030; /* blazing summer gold */ --gold-light: #ffc050; --gold-dark: #c07810; --gold-faint: rgba(240, 160, 48, 0.12); --border: #3a2400; --border-light: #4e3200; --shadow-gold: 0 4px 20px rgba(240,160,48,0.30); --text-muted: #c8a060; --text-dim: #6b5020; } [data-theme="summer"] .hero { background: radial-gradient(ellipse at 70% 30%, rgba(200,100,0,0.55) 0%, transparent 55%), radial-gradient(ellipse at 20% 70%, rgba(240,160,48,0.15) 0%, transparent 50%), radial-gradient(ellipse at 90% 80%, rgba(255,180,0,0.08) 0%, transparent 40%), linear-gradient(145deg, #0f0900 0%, #200e00 50%, #0f0900 100%); } [data-theme="summer"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(240,160,48,0.035) 80px, rgba(240,160,48,0.035) 82px ); } [data-theme="summer"] .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 10%, rgba(255,160,0,0.08) 0%, transparent 60%); pointer-events: none; } /* ============================================================ FALL (Sep 23 – Dec 20, excl. holidays) Atmosphere: Harvest warmth — rich amber, burnt orange, deep mahogany. Slightly lighter than winter but darker than summer. ============================================================ */ [data-theme="fall"] { --bg-primary: #0d0700; /* mahogany dark */ --bg-secondary: #160b00; --bg-card: #1c1008; --bg-card-hover: #261608; --gold: #d4703a; /* burnt-orange amber */ --gold-light: #f09050; --gold-dark: #a04820; --gold-faint: rgba(212, 112, 58, 0.12); --border: #3a1e08; --border-light: #502c0c; --shadow-gold: 0 4px 20px rgba(212,112,58,0.25); --text-muted: #c09070; --text-dim: #6a4020; } [data-theme="fall"] .hero { background: radial-gradient(ellipse at 65% 45%, rgba(160,60,10,0.55) 0%, transparent 60%), radial-gradient(ellipse at 20% 75%, rgba(212,112,58,0.12) 0%, transparent 50%), radial-gradient(ellipse at 85% 85%, rgba(255,120,20,0.07) 0%, transparent 40%), linear-gradient(135deg, #0d0700 0%, #1e0c00 55%, #0d0700 100%); } [data-theme="fall"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(212,112,58,0.03) 80px, rgba(212,112,58,0.03) 82px ); } [data-theme="fall"] .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(180,80,20,0.07) 0%, transparent 60%); pointer-events: none; } /* ============================================================ WINTER (Dec 21 – Mar 19, excl. Christmas/New Year) Atmosphere: Cool, icy, crisp. Backgrounds shift blue-grey, accent is cold silver-blue. Feels quiet and refined. ============================================================ */ [data-theme="winter"] { --bg-primary: #060810; /* deep night blue */ --bg-secondary: #0a0e18; --bg-card: #0e1520; --bg-card-hover: #141d2c; --gold: #5b9bd5; /* icy blue */ --gold-light: #80baf5; --gold-dark: #3a7aaa; --gold-faint: rgba(91, 155, 213, 0.12); --border: #1a2540; --border-light: #243050; --shadow-gold: 0 4px 20px rgba(91,155,213,0.25); --text-muted: #8aa8cc; --text-dim: #3a5070; } [data-theme="winter"] .hero { background: radial-gradient(ellipse at 65% 40%, rgba(30,60,120,0.50) 0%, transparent 60%), radial-gradient(ellipse at 20% 75%, rgba(91,155,213,0.10) 0%, transparent 50%), radial-gradient(ellipse at 85% 85%, rgba(140,200,255,0.05) 0%, transparent 40%), linear-gradient(150deg, #060810 0%, #0c1428 50%, #060810 100%); } [data-theme="winter"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(91,155,213,0.025) 80px, rgba(91,155,213,0.025) 82px ); } [data-theme="winter"] .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(100,160,220,0.06) 0%, transparent 65%); pointer-events: none; } /* ============================================================ CHRISTMAS (Dec 1 – Dec 25) Atmosphere: Deep holly red, candlelight gold accents. Warm and festive but still upscale and dark. ============================================================ */ [data-theme="christmas"] { --bg-primary: #0d0606; --bg-secondary: #160a0a; --bg-card: #1e0f0f; --bg-card-hover: #281414; --gold: #e63329; /* holly red */ --gold-light: #ff5545; --gold-dark: #b01a14; --gold-faint: rgba(230, 51, 41, 0.12); --border: #3a1414; --border-light: #501c1c; --shadow-gold: 0 4px 20px rgba(230,51,41,0.25); --text-muted: #c09090; --text-dim: #6a3030; } [data-theme="christmas"] .hero { background: radial-gradient(ellipse at 65% 40%, rgba(140,20,20,0.55) 0%, transparent 60%), radial-gradient(ellipse at 20% 75%, rgba(201,153,58,0.12) 0%, transparent 50%), radial-gradient(ellipse at 85% 85%, rgba(230,51,41,0.07) 0%, transparent 40%), linear-gradient(135deg, #0d0606 0%, #1e0c08 55%, #0d0606 100%); } [data-theme="christmas"] .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(20,100,30,0.06) 0%, transparent 50%); pointer-events: none; } /* Gold holiday shimmer for Christmas */ [data-theme="christmas"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(201,153,58,0.04) 80px, rgba(201,153,58,0.04) 82px ); } /* ============================================================ NEW YEAR (Dec 26 – Jan 4) Atmosphere: Midnight blue-black, champagne gold sparkle. Celebratory and luxurious. ============================================================ */ [data-theme="new-year"] { --bg-primary: #060610; --bg-secondary: #0a0a1c; --bg-card: #101028; --bg-card-hover: #181830; --gold: #d4af37; /* champagne gold */ --gold-light: #f0d060; --gold-dark: #a08020; --gold-faint: rgba(212, 175, 55, 0.12); --border: #1e1e40; --border-light: #2c2c58; --shadow-gold: 0 4px 20px rgba(212,175,55,0.30); --text-muted: #b0a880; --text-dim: #505040; } [data-theme="new-year"] .hero { background: radial-gradient(ellipse at 50% 40%, rgba(60,40,140,0.55) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(212,175,55,0.12) 0%, transparent 50%), radial-gradient(ellipse at 85% 20%, rgba(200,160,50,0.08) 0%, transparent 40%), linear-gradient(135deg, #060610 0%, #0e0c2a 55%, #060610 100%); } [data-theme="new-year"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 60px, rgba(212,175,55,0.045) 60px, rgba(212,175,55,0.045) 62px ); } [data-theme="new-year"] .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.04) 0%, transparent 70%); pointer-events: none; } /* ============================================================ VALENTINE'S DAY (Feb 7 – Feb 14) Atmosphere: Deep rose-black, warm pink accents. Romantic. ============================================================ */ [data-theme="valentines"] { --bg-primary: #0d0608; --bg-secondary: #180a10; --bg-card: #200e16; --bg-card-hover: #2c1220; --gold: #e0325a; /* rose red */ --gold-light: #ff5c7a; --gold-dark: #a8183a; --gold-faint: rgba(224, 50, 90, 0.12); --border: #3a1428; --border-light: #501a38; --shadow-gold: 0 4px 20px rgba(224,50,90,0.25); --text-muted: #c090a0; --text-dim: #6a3040; } [data-theme="valentines"] .hero { background: radial-gradient(ellipse at 60% 40%, rgba(140,20,60,0.55) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(224,50,90,0.12) 0%, transparent 50%), linear-gradient(135deg, #0d0608 0%, #200a14 55%, #0d0608 100%); } [data-theme="valentines"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(224,50,90,0.03) 80px, rgba(224,50,90,0.03) 82px ); } /* ============================================================ ST. PATRICK'S DAY (Mar 10 – Mar 17) Atmosphere: Irish pub dark green. Rich, warm, celebratory. ============================================================ */ [data-theme="st-patricks"] { --bg-primary: #060e08; --bg-secondary: #0a1810; --bg-card: #0f2016; --bg-card-hover: #142a1c; --gold: #2db560; /* shamrock green */ --gold-light: #50d880; --gold-dark: #1a8840; --gold-faint: rgba(45, 181, 96, 0.12); --border: #163a20; --border-light: #1e502e; --shadow-gold: 0 4px 20px rgba(45,181,96,0.25); --text-muted: #78b890; --text-dim: #3a6045; } [data-theme="st-patricks"] .hero { background: radial-gradient(ellipse at 60% 40%, rgba(20,100,40,0.55) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(45,181,96,0.12) 0%, transparent 50%), linear-gradient(135deg, #060e08 0%, #0e2010 55%, #060e08 100%); } [data-theme="st-patricks"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(45,181,96,0.03) 80px, rgba(45,181,96,0.03) 82px ); } /* ============================================================ MEMORIAL DAY & INDEPENDENCE DAY (Patriotic) Atmosphere: Deep navy, patriotic red accents. Bold and proud. ============================================================ */ [data-theme="memorial-day"], [data-theme="independence-day"] { --bg-primary: #060810; --bg-secondary: #0a0e1a; --bg-card: #0e1428; --bg-card-hover: #141c34; --gold: #cc2020; /* patriotic red */ --gold-light: #ee4040; --gold-dark: #941010; --gold-faint: rgba(204, 32, 32, 0.12); --border: #1a2245; --border-light: #243060; --shadow-gold: 0 4px 20px rgba(204,32,32,0.25); --text-muted: #8898cc; --text-dim: #3a4870; } [data-theme="memorial-day"] .hero, [data-theme="independence-day"] .hero { background: radial-gradient(ellipse at 70% 40%, rgba(140,15,15,0.50) 0%, transparent 55%), radial-gradient(ellipse at 20% 75%, rgba(20,40,130,0.35) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(204,32,32,0.07) 0%, transparent 40%), linear-gradient(150deg, #060810 0%, #0e1028 50%, #060810 100%); } [data-theme="memorial-day"] .hero::before, [data-theme="independence-day"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(204,32,32,0.025) 80px, rgba(204,32,32,0.025) 82px ); } /* ============================================================ LABOR DAY (Early Sep) Atmosphere: Late-summer twilight — rich teal-blue, reflective. ============================================================ */ [data-theme="labor-day"] { --bg-primary: #060c10; --bg-secondary: #0a1018; --bg-card: #0e1820; --bg-card-hover: #142030; --gold: #3a90cc; /* late-summer sky blue */ --gold-light: #60b8f0; --gold-dark: #2070a0; --gold-faint: rgba(58, 144, 204, 0.12); --border: #143050; --border-light: #1e4068; --shadow-gold: 0 4px 20px rgba(58,144,204,0.25); --text-muted: #7aacca; --text-dim: #305575; } [data-theme="labor-day"] .hero { background: radial-gradient(ellipse at 60% 40%, rgba(20,80,150,0.50) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(58,144,204,0.10) 0%, transparent 50%), linear-gradient(145deg, #060c10 0%, #0c1a28 50%, #060c10 100%); } /* ============================================================ HALLOWEEN (Oct 24 – Nov 1) Atmosphere: Pumpkin orange against pure black. Eerie, dramatic. ============================================================ */ [data-theme="halloween"] { --bg-primary: #080400; /* near-black */ --bg-secondary: #120800; --bg-card: #1a0e06; --bg-card-hover: #221408; --gold: #ff6b2b; /* jack-o-lantern orange */ --gold-light: #ff9050; --gold-dark: #cc4010; --gold-faint: rgba(255, 107, 43, 0.12); --border: #3a1a06; --border-light: #50280a; --shadow-gold: 0 4px 20px rgba(255,107,43,0.28); --text-muted: #c08050; --text-dim: #604020; } [data-theme="halloween"] .hero { background: radial-gradient(ellipse at 60% 40%, rgba(140,50,0,0.60) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(80,0,100,0.25) 0%, transparent 50%), radial-gradient(ellipse at 85% 85%, rgba(255,107,43,0.08) 0%, transparent 40%), linear-gradient(135deg, #080400 0%, #180800 55%, #080400 100%); } [data-theme="halloween"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(255,107,43,0.03) 80px, rgba(255,107,43,0.03) 82px ); } [data-theme="halloween"] .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(100,0,120,0.06) 0%, transparent 55%); pointer-events: none; } /* ============================================================ THANKSGIVING (late Nov) Atmosphere: Harvest gold — warm amber, maple, hearth glow. ============================================================ */ [data-theme="thanksgiving"] { --bg-primary: #0d0800; --bg-secondary: #180e00; --bg-card: #201408; --bg-card-hover: #2a1c0a; --gold: #c87c3c; /* harvest amber */ --gold-light: #e8a060; --gold-dark: #965818; --gold-faint: rgba(200, 124, 60, 0.12); --border: #3a2008; --border-light: #502c10; --shadow-gold: 0 4px 20px rgba(200,124,60,0.25); --text-muted: #c0a060; --text-dim: #6a4820; } [data-theme="thanksgiving"] .hero { background: radial-gradient(ellipse at 65% 40%, rgba(140,70,10,0.55) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(200,124,60,0.12) 0%, transparent 50%), linear-gradient(135deg, #0d0800 0%, #201000 55%, #0d0800 100%); } [data-theme="thanksgiving"] .hero::before { background: repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(200,124,60,0.03) 80px, rgba(200,124,60,0.03) 82px ); } /* ============================================================ Shared .hero::after rule for themes that don't define it. (Prevents inheritance bleed from a prior [data-theme] block.) ============================================================ */ [data-theme="valentines"] .hero::after, [data-theme="st-patricks"] .hero::after, [data-theme="memorial-day"] .hero::after, [data-theme="independence-day"] .hero::after, [data-theme="labor-day"] .hero::after, [data-theme="new-year"] .hero::after, [data-theme="thanksgiving"] .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; } /* ============================================================ Theme-aware pulseBadge keyframes (accent color) ============================================================ */ [data-theme] .grand-badge, [data-theme] .badge-new { /* The pulseBadge animation in style.css uses a hardcoded rgba. We re-declare it to use the active accent via currentColor tricks. Simplest approach: override animation's shadow directly. */ animation: pulseBadgeThemed 2s ease-in-out infinite; } @keyframes pulseBadgeThemed { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0.0); } } /* Each theme overrides the pulse with its own colour */ [data-theme="spring"] { --pulse-clr: rgba(82,192,122,0.5); } [data-theme="summer"] { --pulse-clr: rgba(240,160,48,0.5); } [data-theme="fall"] { --pulse-clr: rgba(212,112,58,0.5); } [data-theme="winter"] { --pulse-clr: rgba(91,155,213,0.5); } [data-theme="christmas"] { --pulse-clr: rgba(230,51,41,0.5); } [data-theme="new-year"] { --pulse-clr: rgba(212,175,55,0.55); } [data-theme="valentines"] { --pulse-clr: rgba(224,50,90,0.5); } [data-theme="st-patricks"] { --pulse-clr: rgba(45,181,96,0.5); } [data-theme="memorial-day"], [data-theme="independence-day"] { --pulse-clr: rgba(204,32,32,0.5); } [data-theme="labor-day"] { --pulse-clr: rgba(58,144,204,0.5); } [data-theme="halloween"] { --pulse-clr: rgba(255,107,43,0.55); } [data-theme="thanksgiving"] { --pulse-clr: rgba(200,124,60,0.5); } [data-theme] .grand-badge, [data-theme] .badge-new { animation: pulseBadgeThemed 2s ease-in-out infinite; } @keyframes pulseBadgeThemed { 0%,100% { box-shadow: 0 0 0 0 var(--pulse-clr, rgba(201,153,58,0.5)); } 50% { box-shadow: 0 0 0 10px transparent; } }