/* ============================================================ SEASON THEMING SYSTEM — Haberschlacht Guest House ────────────────────────────────────────────────── Overrides brutalist.css :root tokens per season. Applied via [data-season="..."] on . Default (no attribute) = summer (original palette). ============================================================ */ /* ================================================== SPRING — Fresh greens + blossom pink accents ================================================== */ [data-season="spring"] { --season-logo-filter: brightness(0) saturate(100%) invert(34%) sepia(92%) saturate(600%) hue-rotate(110deg) brightness(0.95); --brut-ink: #1a2e26; --brut-paper: #fdf8f3; --brut-paper-dark: #f5efe8; --brut-card: #fffcf9; --brut-soft: #f0ebe4; --brut-forest: #1e5c42; --brut-sage: #2e7d5e; --brut-sage-mid: #4caf80; --brut-sage-light: #7ecba0; --brut-sage-pale: #f0f8f2; --brut-gold: #c9956e; --brut-gold-pale: #faf0e6; --brut-block: #2e7d5e; --brut-block-mid: #256b50; --primary: #2e7d5e; --primary-light: #4caf80; --primary-dark: #1b5e40; --primary-50: rgba(46,125,94,0.06); --primary-100: rgba(46,125,94,0.10); --primary-200: rgba(46,125,94,0.18); --primary-color: #2e7d5e; --gold: #c9956e; --gold-light: #e0b890; --gold-dark: #a07850; --gold-50: rgba(201,149,110,0.06); --accent-color: #e8a0bf; --bg-primary: #fdf8f3; --bg-secondary: #f0ebe4; --bg-tertiary: #e6e0d8; --bg-elevated: #ffffff; --background-color: #fdf8f3; --background-gradient: #fdf8f3; --surface: #ffffff; --surface-hover: #fdf8f3; --accent-bg: #f0ebe4; --secondary-bg: #f0ebe4; --hover-bg: #e6e0d8; --text-primary: #1a2e26; --text-secondary: #2c4038; --text-tertiary: #4a6058; --text-muted: #6a8078; --text-color: #1a2e26; --text-light: #2c4038; --card-bg: #ffffff; --card-bg-hover: #fdf8f3; --border-color: rgba(30,92,66,0.14); --border-subtle: rgba(30,92,66,0.07); --border-light: rgba(30,92,66,0.10); --border-medium: rgba(30,92,66,0.20); } /* ================================================== SUMMER — Original palette (no overrides needed, brutalist.css defaults ARE summer). This block exists for explicitness & potential future tweaks. ================================================== */ [data-season="summer"] { --season-logo-filter: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(700%) hue-rotate(130deg) brightness(0.85); /* Uses brutalist.css defaults — intentionally no overrides */ } /* ================================================== FALL / AUTUMN — Warm browns, amber, harvest gold ================================================== */ [data-season="fall"] { --season-logo-filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(500%) hue-rotate(355deg) brightness(0.95); --brut-ink: #2a1a0e; --brut-paper: #faf5ef; --brut-paper-dark: #f0e8de; --brut-card: #fefcf8; --brut-soft: #ede5d8; --brut-forest: #3d2410; --brut-sage: #6b4423; --brut-sage-mid: #8b5e3c; --brut-sage-light: #b88860; --brut-sage-pale: #faf0e4; --brut-gold: #c97a2e; --brut-gold-pale: #fae8d0; --brut-block: #6b4423; --brut-block-mid: #5a3a1e; --primary: #5c3a1e; --primary-light: #8b5e3c; --primary-dark: #3d2410; --primary-50: rgba(92,58,30,0.06); --primary-100: rgba(92,58,30,0.10); --primary-200: rgba(92,58,30,0.18); --primary-color: #5c3a1e; --gold: #c97a2e; --gold-light: #e0a050; --gold-dark: #a06020; --gold-50: rgba(201,122,46,0.06); --accent-color: #c97a2e; --bg-primary: #faf5ef; --bg-secondary: #ede5d8; --bg-tertiary: #e0d4c4; --bg-elevated: #ffffff; --background-color: #faf5ef; --background-gradient: #faf5ef; --surface: #ffffff; --surface-hover: #faf5ef; --accent-bg: #ede5d8; --secondary-bg: #ede5d8; --hover-bg: #e0d4c4; --text-primary: #2a1a0e; --text-secondary: #3e2c1e; --text-tertiary: #5a4838; --text-muted: #7a6850; --text-color: #2a1a0e; --text-light: #3e2c1e; --card-bg: #ffffff; --card-bg-hover: #faf5ef; --border-color: rgba(92,58,30,0.16); --border-subtle: rgba(92,58,30,0.08); --border-light: rgba(92,58,30,0.10); --border-medium: rgba(92,58,30,0.22); } /* ================================================== WINTER — Cool slate-blue, icy accent, crisp white ================================================== */ [data-season="winter"] { --season-logo-filter: brightness(0) saturate(100%) invert(40%) sepia(80%) saturate(400%) hue-rotate(175deg) brightness(0.90); --brut-ink: #141e28; --brut-paper: #f4f6f8; --brut-paper-dark: #e8ecf0; --brut-card: #fafbfc; --brut-soft: #e0e5ea; --brut-forest: #1a3050; --brut-sage: #354f6b; --brut-sage-mid: #5a8ab4; --brut-sage-light: #8fb8d4; --brut-sage-pale: #eef4f8; --brut-gold: #9ba8b4; --brut-gold-pale: #e8f0f6; --brut-block: #354f6b; --brut-block-mid: #2c4560; --primary: #2c4a6e; --primary-light: #5a8ab4; --primary-dark: #1a3050; --primary-50: rgba(44,74,110,0.06); --primary-100: rgba(44,74,110,0.10); --primary-200: rgba(44,74,110,0.18); --primary-color: #2c4a6e; --gold: #9ba8b4; --gold-light: #b8c8d4; --gold-dark: #7a8a98; --gold-50: rgba(155,168,180,0.06); --accent-color: #8fb8d4; --bg-primary: #f4f6f8; --bg-secondary: #e0e5ea; --bg-tertiary: #d0d8e0; --bg-elevated: #ffffff; --background-color: #f4f6f8; --background-gradient: #f4f6f8; --surface: #ffffff; --surface-hover: #f4f6f8; --accent-bg: #e0e5ea; --secondary-bg: #e0e5ea; --hover-bg: #d0d8e0; --text-primary: #141e28; --text-secondary: #283848; --text-tertiary: #4a5868; --text-muted: #6a7888; --text-color: #141e28; --text-light: #283848; --card-bg: #ffffff; --card-bg-hover: #f4f6f8; --border-color: rgba(44,74,110,0.14); --border-subtle: rgba(44,74,110,0.07); --border-light: rgba(44,74,110,0.10); --border-medium: rgba(44,74,110,0.20); } /* ================================================== LOGO COLORING — CSS filter per season ────────────────────────────────────── Two stacked logos: #site-logo (colored by season filter) and #site-logo-white (pure white overlay). Homepage fades the white overlay opacity on scroll. Dark mode hides the colored logo via the overlay. ================================================== */ /* Container: stack the two logos */ .logo a { position: relative; display: inline-block; } /* Colored logo: always has the season filter */ #site-logo { filter: var(--season-logo-filter, none); } /* White overlay: sits on top, same size */ #site-logo-white { position: absolute; top: 0; left: 0; filter: none !important; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; } /* On non-homepage pages in light mode, hide white overlay (show colored) */ /* White overlay only shows on homepage hero + dark mode */ /* Dark mode: show white overlay everywhere */ [data-theme="dark"] #site-logo-white { opacity: 1 !important; } /* ========================================================================= DARK MODE × SEASON OVERRIDES ───────────────────────────── Combined selectors: [data-theme="dark"][data-season="..."] These override both brutalist.css dark-mode defaults AND the light season blocks above. Summer dark mode lives in brutalist.css already. ========================================================================= */ /* ── SPRING DARK ────────────────────────────────── */ [data-theme="dark"][data-season="spring"] { --brut-ink: #ede8e0; --brut-paper: #0b120d; --brut-paper-dark: #0f1a12; --brut-card: #141e16; --brut-soft: #1a2a1e; --brut-forest: #4caf80; --brut-sage: #3d9a6c; --brut-sage-mid: #2e7d5e; --brut-sage-light: #6abb9a; --brut-sage-pale: rgba(76, 175, 128, 0.09); --brut-gold: #d4a0b0; --brut-gold-pale: rgba(212, 160, 176, 0.08); --brut-block: #0d221a; --brut-block-mid: #12291e; --brut-muted: #8a9690; --brut-rule: rgba(237, 232, 224, 0.16); --brut-rule-mid: rgba(237, 232, 224, 0.10); --brut-rule-soft: rgba(237, 232, 224, 0.06); --primary: #4caf80; --primary-light: #6abb9a; --primary-dark: #2e7d5e; --primary-50: rgba(76, 175, 128, 0.08); --primary-100: rgba(76, 175, 128, 0.12); --primary-200: rgba(76, 175, 128, 0.22); --primary-color: #4caf80; --gold: #d4a0b0; --gold-light: #e8bcc8; --gold-dark: #b88898; --accent-color: #e8a0bf; --bg-primary: #0b120d; --bg-secondary: #0f1a12; --bg-tertiary: #152018; --bg-elevated: #141e16; --background-color: #0b120d; --background-gradient: #0b120d; --surface: #141e16; --surface-elevated: #1a2a1e; --surface-hover: #203026; --accent-bg: #1a2a1e; --secondary-bg: #141e16; --hover-bg: #203026; --text-primary: #ede8e0; --text-secondary: #c0bdb5; --text-tertiary: #8a9590; --text-muted: #6a7a70; --text-color: #ede8e0; --text-light: #c0bdb5; --card-bg: #141e16; --card-bg-hover: #203026; --border-color: rgba(237, 232, 224, 0.12); --border-subtle: rgba(237, 232, 224, 0.06); --border-light: rgba(237, 232, 224, 0.09); --border-medium: rgba(237, 232, 224, 0.18); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-card: none; --shadow-card-hover: none; --card-shadow: none; --card-shadow-hover: none; --header-bg: #141e16; --footer-bg: var(--brut-block); --season-logo-filter: none; } /* ── SUMMER DARK ── (Already in brutalist.css, no-op) */ [data-theme="dark"][data-season="summer"] { --season-logo-filter: none; } /* ── FALL / AUTUMN DARK ─────────────────────────── */ [data-theme="dark"][data-season="fall"] { --brut-ink: #f0e8dc; --brut-paper: #120d08; --brut-paper-dark: #1a1208; --brut-card: #1e1610; --brut-soft: #282018; --brut-forest: #b87a40; --brut-sage: #9a6430; --brut-sage-mid: #7a5020; --brut-sage-light: #c89858; --brut-sage-pale: rgba(184, 122, 64, 0.09); --brut-gold: #d4a040; --brut-gold-pale: rgba(212, 160, 64, 0.08); --brut-block: #221a10; --brut-block-mid: #2a2014; --brut-muted: #96908a; --brut-rule: rgba(240, 232, 220, 0.16); --brut-rule-mid: rgba(240, 232, 220, 0.10); --brut-rule-soft: rgba(240, 232, 220, 0.06); --primary: #b87a40; --primary-light: #c89858; --primary-dark: #8a5a28; --primary-50: rgba(184, 122, 64, 0.08); --primary-100: rgba(184, 122, 64, 0.12); --primary-200: rgba(184, 122, 64, 0.22); --primary-color: #b87a40; --gold: #d4a040; --gold-light: #e0b860; --gold-dark: #b08030; --accent-color: #d4a040; --bg-primary: #120d08; --bg-secondary: #1a1208; --bg-tertiary: #201810; --bg-elevated: #1e1610; --background-color: #120d08; --background-gradient: #120d08; --surface: #1e1610; --surface-elevated: #282018; --surface-hover: #302820; --accent-bg: #282018; --secondary-bg: #1e1610; --hover-bg: #302820; --text-primary: #f0e8dc; --text-secondary: #c8c0b0; --text-tertiary: #908878; --text-muted: #706860; --text-color: #f0e8dc; --text-light: #c8c0b0; --card-bg: #1e1610; --card-bg-hover: #302820; --border-color: rgba(240, 232, 220, 0.12); --border-subtle: rgba(240, 232, 220, 0.06); --border-light: rgba(240, 232, 220, 0.09); --border-medium: rgba(240, 232, 220, 0.18); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-card: none; --shadow-card-hover: none; --card-shadow: none; --card-shadow-hover: none; --header-bg: #1e1610; --footer-bg: var(--brut-block); --season-logo-filter: none; } /* ── WINTER DARK ────────────────────────────────── */ [data-theme="dark"][data-season="winter"] { --brut-ink: #e4e8f0; --brut-paper: #090d14; --brut-paper-dark: #0e1420; --brut-card: #121822; --brut-soft: #1a2230; --brut-forest: #5a8ab8; --brut-sage: #486e98; --brut-sage-mid: #3a5a80; --brut-sage-light: #7aa8cc; --brut-sage-pale: rgba(90, 138, 184, 0.09); --brut-gold: #8898a8; --brut-gold-pale: rgba(136, 152, 168, 0.08); --brut-block: #0d1828; --brut-block-mid: #121e30; --brut-muted: #8a90a0; --brut-rule: rgba(228, 232, 240, 0.16); --brut-rule-mid: rgba(228, 232, 240, 0.10); --brut-rule-soft: rgba(228, 232, 240, 0.06); --primary: #5a8ab8; --primary-light: #7aa8cc; --primary-dark: #3a6890; --primary-50: rgba(90, 138, 184, 0.08); --primary-100: rgba(90, 138, 184, 0.12); --primary-200: rgba(90, 138, 184, 0.22); --primary-color: #5a8ab8; --gold: #8898a8; --gold-light: #a0b0c0; --gold-dark: #708090; --accent-color: #7aa8cc; --bg-primary: #090d14; --bg-secondary: #0e1420; --bg-tertiary: #141c28; --bg-elevated: #121822; --background-color: #090d14; --background-gradient: #090d14; --surface: #121822; --surface-elevated: #1a2230; --surface-hover: #222c3a; --accent-bg: #1a2230; --secondary-bg: #121822; --hover-bg: #222c3a; --text-primary: #e4e8f0; --text-secondary: #b0b8c8; --text-tertiary: #8090a0; --text-muted: #607080; --text-color: #e4e8f0; --text-light: #b0b8c8; --card-bg: #121822; --card-bg-hover: #222c3a; --border-color: rgba(228, 232, 240, 0.12); --border-subtle: rgba(228, 232, 240, 0.06); --border-light: rgba(228, 232, 240, 0.09); --border-medium: rgba(228, 232, 240, 0.18); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-card: none; --shadow-card-hover: none; --card-shadow: none; --card-shadow-hover: none; --header-bg: #121822; --footer-bg: var(--brut-block); --season-logo-filter: none; } /* ================================================== HERO BLUR-UP (LQIP) — Progressive image loading ================================================== */ .hp-hero__img { transition: opacity 0.8s ease; } .hp-hero__img--lqip { filter: blur(20px); transform: scale(1.05); z-index: 0; } .hp-hero__img--lqip.loaded { opacity: 0 !important; } .hp-hero__img--full { opacity: 0; z-index: 1; } .hp-hero__img--full.loaded { opacity: 1; } /* ================================================== SEASON TRANSITION — Smooth color changes ================================================== */ body, .site-header, .site-footer, .hp-metrics, .brut-card, .room-card { transition: background-color 0.6s ease, color 0.4s ease, border-color 0.4s ease; } a, button, .btn { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }