/* ============================================================ palette.css — time-of-day palettes, film grain, scroll primitives Stage 1 of feature/scroll-redesign. Loaded BEFORE style.css so theme vars can override if needed. ============================================================ */ :root { --transition-palette: 1.4s cubic-bezier(0.4, 0, 0.2, 1); /* Palette vars are decorative only — never touch theme's --bg / --brown / --white. Used by: hero parallax atmospherics, section dividers, pinned story bg, scroll-progress accent. Content sections keep their fixed theme colours. */ --p-depth: #e8d9c0; /* pinned story backdrop */ --p-ink: #2a1f15; /* text on .aog-story / hgallery heading */ --p-ink-soft: #5a4636; --sky-top: #d6c9b0; --sky-bottom: #f5ede0; --hill-far: #9a8f7a; --hill-mid: #7d6f5a; --silhouette: #3d2f23; --door: #6b4a30; --sun: rgba(255, 235, 200, 0.5); --accent: #b8553a; /* Atmospheric glow — mood light on the body, shows through transparent sections */ --glow-top: rgba(255, 210, 150, 0.38); --glow-bot: rgba(184, 85, 58, 0.10); } html[data-palette="dawn"] { --p-depth: #e6cfb0; --p-ink: #3a2418; --p-ink-soft: #7a5a42; --sky-top: #e8b89a; --sky-bottom: #f5d4b0; --hill-far: #a08a72; --hill-mid: #6b4f3a; --silhouette: #2c1810; --door: #5a3a25; --sun: rgba(255, 210, 160, 0.7); --glow-top: rgba(255, 180, 130, 0.42); --glow-bot: rgba(220, 110, 80, 0.14); } html[data-palette="day"] { --p-depth: #e8d9c0; --p-ink: #2a1f15; --p-ink-soft: #5a4636; --sky-top: #d6c9b0; --sky-bottom: #f5ede0; --hill-far: #9a8f7a; --hill-mid: #7d6f5a; --silhouette: #3d2f23; --door: #6b4a30; --sun: rgba(255, 235, 200, 0.5); --glow-top: rgba(255, 215, 155, 0.32); --glow-bot: rgba(184, 115, 70, 0.10); } html[data-palette="sunset"] { --p-depth: #2a1410; --p-ink: #f5d8b0; --p-ink-soft: #d4a574; --sky-top: #d4582c; --sky-bottom: #7a2418; --hill-far: #5a2818; --hill-mid: #3a1810; --silhouette: #1a0a05; --door: #3a1810; --sun: rgba(255, 180, 110, 0.85); --glow-top: rgba(255, 140, 80, 0.42); --glow-bot: rgba(120, 30, 20, 0.22); } html[data-palette="night"] { --p-depth: #070d18; --p-ink: #e8d4a8; --p-ink-soft: #a89570; --sky-top: #1a2840; --sky-bottom: #0e1729; --hill-far: #1f2d44; --hill-mid: #152038; --silhouette: #050810; --door: #1a2030; --sun: rgba(232, 212, 168, 0.4); --glow-top: rgba(255, 200, 130, 0.18); --glow-bot: rgba(40, 55, 100, 0.20); } /* === ATMOSPHERIC GLOW ====================================== */ /* Palette mood-light. We paint the base cream on , leave transparent, and place the glow on html::before fixed behind everything. Content sections that have their own bg stay readable; transparent ones let the warm/cool glow breathe through. */ /* Canvas base — Dawn Rose. Replaces theme's stark cream to give the page a warm rose undertone that ladders gracefully into sunset/night palettes. */ html { background-color: #F2DFCC; } html body { background-color: transparent; } /* beat theme's body bg rule */ html::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70vw 60vh at 85% -10%, var(--glow-top), transparent 60%), radial-gradient(ellipse 80vw 50vh at -15% 110%, var(--glow-bot), transparent 60%); transition: background var(--transition-palette); } /* === FILM GRAIN ============================================ */ body::after { content: ''; position: fixed; inset: -50%; pointer-events: none; z-index: 100; opacity: 0.14; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); animation: aog-grain 1.2s steps(4) infinite; } @keyframes aog-grain { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -2%); } 75% { transform: translate(-2%, -1%); } } /* === SCROLL PROGRESS BAR =================================== */ .aog-scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--accent); z-index: 999; transition: width 0.08s linear; box-shadow: 0 0 12px rgba(184, 85, 58, 0.5); pointer-events: none; } /* === PALETTE SWITCHER (inline in header, next to lang toggle) ====== */ .aog-palette-switch { position: relative; display: inline-flex; align-items: center; z-index: 50; font-family: inherit; color: var(--p-ink); margin-right: 0.4rem; } .aog-palette-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 100px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); cursor: pointer; color: inherit; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s; } .aog-palette-toggle:hover { background: rgba(255, 255, 255, 0.85); } .aog-palette-switch[data-open="true"] .aog-palette-toggle { transform: rotate(45deg); } .aog-palette-icon { display: block; } .aog-palette-menu { position: absolute; right: 0; top: calc(100% + 0.5rem); display: flex; flex-direction: column; gap: 0.15rem; padding: 0.35rem; min-width: 140px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); opacity: 0; transform: translateY(-6px) scale(0.96); transform-origin: top right; pointer-events: none; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .aog-palette-switch[data-open="true"] .aog-palette-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .aog-palette-menu button { border: none; background: transparent; padding: 0.55rem 0.9rem; border-radius: 10px; font-size: 0.78rem; cursor: pointer; color: #2a1f15; text-align: left; font-family: inherit; letter-spacing: 0.02em; transition: background 0.2s, color 0.2s; } .aog-palette-menu button[aria-checked="true"] { background: #2a1f15; color: #f5ede0; } .aog-palette-menu button:hover:not([aria-checked="true"]) { background: rgba(0, 0, 0, 0.06); } @media (max-width: 600px) { .aog-palette-toggle { width: 32px; height: 32px; } .aog-palette-toggle svg { width: 16px; height: 16px; } } /* === HERO PARALLAX ========================================= */ /* Real photo stays as the deepest layer; SVG atmospherics float above. */ .hero.hero-parallax { position: relative; overflow: hidden; isolation: isolate; /* kill the theme's background-image on .hero — photo moves to .hero-photo */ background-image: none; } .hero-parallax .hero-photo { position: absolute; inset: 0; /* no bleed needed — centered, parallax offset handled by JS */ background-image: url('/images/hero-bg.jpg'); background-size: cover; background-position: center; /* centered so no letter gets cropped on narrow viewports */ will-change: transform; transform: translate3d(0, 0, 0); z-index: 0; } .hero-parallax .hero-layer { position: absolute; inset: -8%; width: 116%; height: 116%; pointer-events: none; will-change: transform; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); mix-blend-mode: multiply; z-index: 1; } .hero-parallax .hero-layer--glow { mix-blend-mode: screen; } .hero-parallax .hero-layer svg { width: 100%; height: 100%; display: block; } .hero-parallax .hero-layer svg path, .hero-parallax .hero-layer svg circle, .hero-parallax .hero-layer svg rect { transition: fill var(--transition-palette), opacity var(--transition-palette); } .hero-parallax .hero-overlay { position: relative; z-index: 2; /* inherits theme's .hero-overlay sizing/padding */ } .hero-parallax .hero-content { position: relative; z-index: 3; } @media (prefers-reduced-motion: reduce) { .hero-parallax .hero-photo, .hero-parallax .hero-layer { transform: none !important; transition: none !important; } } /* === REVEAL / STAGGER PRIMITIVES (used in stage 3) ========= */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); } .reveal.in { opacity: 1; transform: translateY(0); } .stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); } .stagger.in > * { opacity: 1; transform: translateY(0); } .stagger.in > *:nth-child(1) { transition-delay: 0.05s; } .stagger.in > *:nth-child(2) { transition-delay: 0.15s; } .stagger.in > *:nth-child(3) { transition-delay: 0.25s; } .stagger.in > *:nth-child(4) { transition-delay: 0.35s; } .stagger.in > *:nth-child(5) { transition-delay: 0.45s; } /* === ORGANIC SECTION DIVIDER =============================== */ .aog-divider { display: block; width: 100%; height: 60px; margin: 0; position: relative; z-index: 1; } .aog-divider + section { margin-top: -1px; } /* kill hairline seam */ .aog-divider--flip { transform: scaleY(-1); } .aog-divider path { transition: fill var(--transition-palette); } /* === CLIP-PATH PHOTO REVEAL ================================ */ .photo-reveal { position: relative; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.175, 1); } .photo-reveal.in { clip-path: inset(0 0 0 0); } .photo-reveal img { display: block; width: 100%; height: 100%; object-fit: cover; } /* === PINNED STORYTELLING (3 stages) ======================== */ .aog-story { position: relative; height: 300vh; /* 3 × viewport drives 3 stages */ background: var(--p-depth); color: var(--p-ink); transition: background var(--transition-palette), color var(--transition-palette); } .aog-story__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .aog-story__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(184, 85, 58, 0.14), transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(232, 183, 90, 0.10), transparent 50%); pointer-events: none; } .aog-story__stage { position: absolute; max-width: 720px; padding: 0 1.5rem; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; z-index: 2; } .aog-story__stage.active { opacity: 1; transform: translateY(0); } .aog-story__label { font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--p-ink-soft); margin-bottom: 1.2rem; } .aog-story__stage h3 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.7rem, 4.2vw, 2.75rem); font-weight: 400; line-height: 1.22; letter-spacing: -0.015em; margin: 0 0 1rem; color: var(--p-ink); } .aog-story__stage p { font-size: 1rem; line-height: 1.7; color: var(--p-ink-soft); margin: 0; } .aog-story__dots { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; z-index: 3; } .aog-story__dot { width: 24px; height: 2px; background: rgba(42, 31, 21, 0.22); transition: background 0.4s; } .aog-story__dot.active { background: var(--p-ink); } /* Dark palettes invert the dot contrast */ html[data-palette="sunset"] .aog-story__dot, html[data-palette="night"] .aog-story__dot { background: rgba(245, 237, 224, 0.22); } /* Breathing verse — stage 3 h3 (variable Fraunces) */ .aog-story__verse { font-variation-settings: "wght" 360, "opsz" 144; animation: aog-breathe 7s ease-in-out infinite; will-change: font-variation-settings, letter-spacing; } @keyframes aog-breathe { 0%, 100% { font-variation-settings: "wght" 360, "opsz" 144; letter-spacing: 0; } 50% { font-variation-settings: "wght" 470, "opsz" 144; letter-spacing: 0.006em; } } @media (prefers-reduced-motion: reduce) { .aog-story__verse { animation: none; } } /* === HORIZONTAL WEEKLY GALLERY ============================ */ .aog-hgallery { position: relative; height: 400vh; /* 4 × viewport drives the track */ background: var(--bg); transition: background var(--transition-palette); } .aog-hgallery__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; } .aog-hgallery__heading { position: absolute; top: 8vh; left: max(1.5rem, 8vw); z-index: 3; color: var(--p-ink); transition: color var(--transition-palette); } .aog-hgallery__eyebrow { font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--p-ink-soft); margin-bottom: 0.5rem; } .aog-hgallery__heading h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-variation-settings: "wght" 420, "opsz" 144; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0; } .aog-hgallery__track { display: flex; gap: 1.5rem; padding: 0 max(1.5rem, 8vw); will-change: transform; transform: translate3d(0, 0, 0); } .aog-hcard { flex: 0 0 auto; width: clamp(260px, 26vw, 340px); aspect-ratio: 340 / 460; border-radius: 10px; overflow: hidden; position: relative; color: #fff; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18); } .aog-hcard__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .aog-hcard__body { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.3rem; z-index: 2; } .aog-hcard__label { display: block; font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.85; margin-bottom: 0.35rem; } .aog-hcard h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-variation-settings: "wght" 420, "opsz" 36; font-size: 1.45rem; line-height: 1.2; margin: 0; } /* On touch/narrow viewports, collapse the pinned scroll-jack into a native horizontal swipe. No scroll-locking, no wasted vertical space. */ @media (max-width: 900px) { .aog-hgallery { height: auto; } .aog-hgallery__pin { position: static; height: auto; display: block; /* stack heading above the track */ padding: 3rem 0 3.5rem; } .aog-hgallery__heading { position: relative; top: auto; left: auto; margin: 0 max(1.2rem, 6vw) 1.5rem; } .aog-hgallery__track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; -webkit-overflow-scrolling: touch; padding: 0 max(1.2rem, 6vw) 0.5rem; scrollbar-width: none; } .aog-hgallery__track::-webkit-scrollbar { display: none; } .aog-hcard { scroll-snap-align: center; } } @media (prefers-reduced-motion: reduce) { /* Fallback: free horizontal scroll instead of pinned track */ .aog-hgallery { height: auto; } .aog-hgallery__pin { position: static; height: auto; padding: 5rem 0; } .aog-hgallery__heading { position: relative; top: auto; left: auto; margin: 0 max(1.5rem, 8vw) 2rem; } .aog-hgallery__track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; } .aog-hcard { scroll-snap-align: center; } } html[data-palette="sunset"] .aog-story__dot.active, html[data-palette="night"] .aog-story__dot.active { background: var(--p-ink); } /* Load Fraunces (serif) only if present in the page — tolerated fallback to Georgia */ @media (prefers-reduced-motion: reduce) { .aog-story__stage { transition: none; } .photo-reveal { clip-path: inset(0 0 0 0); transition: none; } } /* === REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { html, body { transition: none; } body::after { animation: none; } .aog-scroll-progress { transition: none; } .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } }