smacks
6c00e1a00d
- Full CSS rewrite: Warm Ivory/Gold/Steinkohle design tokens, Floema grid, easing library - AuraMarbleBackground: fixed grain texture layer - CapitoliumPreloader: fullscreen counter animation with slide-up exit - LiquidOverlayMenu: fixed hamburger → fullscreen clip-path overlay with SlideUpTextHover nav links - IndexSectionIndicator: fixed left-side section tracker with animated fill line - Recipe Showcase Stage: GSAP ScrollTrigger pinned stage (images enter from right, exit left) with parallax inner-image effect, intro title, progress dots, hint line - LenisSmoothScroll: CDN integration synced with GSAP ticker - CapitoliumRevealButton: scaleY fill reveal on hover for all CTAs - SlideUpTextHover: overlay nav links - UnderlineExpandHover: footer + overlay footer links - head.php: GSAP 3.12.5 + ScrollTrigger + Lenis 1.0.42 CDN; Playfair Display + Manrope fonts - recipe.php: updated to new design system (btn-reveal, pill--gold, Lenis init) - impressum.php / datenschutz.php: migrated to shared head.php partial
1713 lines
49 KiB
CSS
1713 lines
49 KiB
CSS
/* ═══════════════════════════════════════════════════════════════
|
||
FlixCooks — Premium Design System (Phase 1)
|
||
Inspired by Capitolium, fromanother & Floema
|
||
═══════════════════════════════════════════════════════════════ */
|
||
|
||
/* ── 1. PREMIUM COLOR TOKENS (Warm Ivory + Steinkohle + Gold) ─── */
|
||
:root {
|
||
/* === WARM PREMIUM PALETTE (Light Mode – main brand) === */
|
||
--color-bg-light: #f2efea; /* Warm Ivory / Creme */
|
||
--color-bg-dark: #241f21; /* Steinkohle-Braun */
|
||
--color-accent-gold: #c3a677; /* Edles Mattgold */
|
||
--color-terracotta: #c87a5a; /* Terracotta */
|
||
--color-light-gold: #f0e3cf; /* Helles Creme-Gold */
|
||
--color-white: #ffffff;
|
||
--color-text-muted: #a7a0a1; /* Hellgrau */
|
||
--color-text-dark: #58595b; /* Dunkelgrau */
|
||
|
||
/* === FLOEMA GRID SYSTEM === */
|
||
--grid-gap: clamp(14px, 9.71px + 1.1vw, 28px);
|
||
--grid-margin: clamp(16px, 10.15px + 1.5vw, 36px);
|
||
--grid-width: calc(100vw - var(--grid-margin) * 2);
|
||
|
||
/* === EASING LIBRARY === */
|
||
--ease-out-expo: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
|
||
--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
|
||
--ease-fluid-slide: cubic-bezier(0.19, 1, 0.22, 1);
|
||
--ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
|
||
/* === TYPOGRAPHY === */
|
||
--font-serif-display: 'Playfair Display', 'Times New Roman', serif;
|
||
--font-serif-classic: 'Playfair Display', 'Georgia', serif;
|
||
--font-sans-clean: 'Manrope', system-ui, -apple-system, sans-serif;
|
||
|
||
/* === FUNCTIONAL TOKENS (maps to UI light mode) === */
|
||
--bg: var(--color-bg-light);
|
||
--bg-2: #e8e4dc;
|
||
--surface: #ffffff;
|
||
--surface-2: #f7f3ed;
|
||
--panel: #f4f0e9;
|
||
--panel-2: #ede9e1;
|
||
--stroke: rgba(36,31,33,0.12);
|
||
--ghost: rgba(36,31,33,0.07);
|
||
--ink: var(--color-bg-dark);
|
||
--muted: var(--color-text-dark);
|
||
--accent: var(--color-accent-gold);
|
||
--accent-soft: rgba(195,166,119,0.14);
|
||
--accent-2: #b09060;
|
||
--shadow: 0 10px 32px rgba(36,31,33,0.10);
|
||
--radius: 14px;
|
||
|
||
/* === LANDING TOKENS (dark atmosphere) === */
|
||
--land-bg: #0d0e11;
|
||
--land-text: #f0f2f7;
|
||
--land-muted: rgba(240,242,247,0.55);
|
||
--land-accent: #e8c87a;
|
||
--land-accent2: #c87a5a;
|
||
--land-blob-a: #4a3a6e;
|
||
--land-blob-b: #6b3a2a;
|
||
--land-blob-c: #1a3a5a;
|
||
--land-chip-bg: rgba(255,255,255,0.07);
|
||
--land-chip-border: rgba(255,255,255,0.12);
|
||
--land-chip-text: rgba(240,242,247,0.75);
|
||
--land-toggle-border: rgba(255,255,255,0.15);
|
||
--land-toggle-bg: rgba(255,255,255,0.06);
|
||
--land-toggle-color: rgba(240,242,247,0.7);
|
||
--land-scroll-line: rgba(240,242,247,0.5);
|
||
--land-scroll-text: rgba(240,242,247,0.4);
|
||
--land-grain: 0.03;
|
||
}
|
||
|
||
/* === LIGHT MODE LANDING TOKENS === */
|
||
:root,
|
||
[data-theme="light"] {
|
||
--land-bg: #f4f1eb;
|
||
--land-text: #1c1f29;
|
||
--land-muted: rgba(28,31,41,0.55);
|
||
--land-accent: #b07d2a;
|
||
--land-accent2: #8a4a20;
|
||
--land-blob-a: #c9b8e8;
|
||
--land-blob-b: #e8c0a0;
|
||
--land-blob-c: #a8c4d8;
|
||
--land-chip-bg: rgba(28,31,41,0.06);
|
||
--land-chip-border: rgba(28,31,41,0.12);
|
||
--land-chip-text: rgba(28,31,41,0.70);
|
||
--land-toggle-border: rgba(28,31,41,0.15);
|
||
--land-toggle-bg: rgba(28,31,41,0.06);
|
||
--land-toggle-color: rgba(28,31,41,0.6);
|
||
--land-scroll-line: rgba(28,31,41,0.35);
|
||
--land-scroll-text: rgba(28,31,41,0.35);
|
||
--land-grain: 0.04;
|
||
}
|
||
|
||
/* === DARK MODE TOKENS === */
|
||
[data-theme="dark"] {
|
||
--bg: #131519;
|
||
--bg-2: #0f1114;
|
||
--surface: #1a1d24;
|
||
--surface-2: #1e2029;
|
||
--panel: #22252e;
|
||
--panel-2: #1c1f28;
|
||
--stroke: #2e3240;
|
||
--ghost: rgba(180,190,220,0.08);
|
||
--ink: #dde0ea;
|
||
--muted: #8892a6;
|
||
--accent: #c3a677;
|
||
--accent-soft: rgba(195,166,119,0.15);
|
||
--accent-2: #a08050;
|
||
--shadow: 0 10px 32px rgba(0,0,0,0.4);
|
||
|
||
--land-bg: #0d0e11;
|
||
--land-text: #f0f2f7;
|
||
--land-muted: rgba(240,242,247,0.55);
|
||
--land-accent: #e8c87a;
|
||
--land-accent2: #c87a5a;
|
||
--land-blob-a: #4a3a6e;
|
||
--land-blob-b: #6b3a2a;
|
||
--land-blob-c: #1a3a5a;
|
||
--land-chip-bg: rgba(255,255,255,0.07);
|
||
--land-chip-border: rgba(255,255,255,0.12);
|
||
--land-chip-text: rgba(240,242,247,0.75);
|
||
--land-toggle-border: rgba(255,255,255,0.15);
|
||
--land-toggle-bg: rgba(255,255,255,0.06);
|
||
--land-toggle-color: rgba(240,242,247,0.7);
|
||
--land-scroll-line: rgba(240,242,247,0.5);
|
||
--land-scroll-text: rgba(240,242,247,0.4);
|
||
--land-grain: 0.03;
|
||
}
|
||
|
||
|
||
/* ── 2. BASE RESET ────────────────────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: auto; /* Lenis takes over */
|
||
scroll-padding-top: 5rem;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-sans-clean);
|
||
color: var(--ink);
|
||
background: var(--bg);
|
||
min-height: 100vh;
|
||
line-height: 1.6;
|
||
transition: background-color 0.4s ease, color 0.4s ease;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
font-family: var(--font-serif-display);
|
||
margin: 0;
|
||
color: var(--ink);
|
||
line-height: 1.15;
|
||
text-wrap: balance;
|
||
}
|
||
h1 span, h2 span { color: var(--accent); }
|
||
p { color: var(--muted); line-height: 1.6; }
|
||
a { color: var(--ink); text-decoration: none; transition: color 0.22s; }
|
||
a:hover { color: var(--accent); }
|
||
img, picture { display: block; max-width: 100%; height: auto; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
|
||
/* ── 3. CAPITOLIUM PRELOADER ─────────────────────────────────── */
|
||
.preloader {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 10000;
|
||
background-color: var(--color-bg-dark);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.9s var(--ease-in-out-quart),
|
||
opacity 0.5s ease 0.6s;
|
||
will-change: transform;
|
||
}
|
||
.preloader.loaded {
|
||
transform: translateY(-100vh);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
.preloader-content {
|
||
text-align: center;
|
||
width: clamp(200px, 50vw, 400px);
|
||
display: grid;
|
||
gap: 1.25rem;
|
||
}
|
||
.preloader-logo {
|
||
font-family: var(--font-serif-display);
|
||
font-size: clamp(1.8rem, 4vw, 2.8rem);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.28em;
|
||
color: var(--color-light-gold);
|
||
font-weight: 600;
|
||
}
|
||
.preloader-logo span {
|
||
color: var(--color-accent-gold);
|
||
font-style: italic;
|
||
}
|
||
.preloader-bar {
|
||
width: 100%;
|
||
height: 1px;
|
||
background-color: rgba(240,227,207,0.15);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.preloader-fill {
|
||
width: 0%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--color-accent-gold), var(--color-light-gold));
|
||
transition: width 0.08s linear;
|
||
transform-origin: left;
|
||
}
|
||
.preloader-text {
|
||
font-family: var(--font-sans-clean);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: rgba(240,227,207,0.45);
|
||
}
|
||
.preloader-perc {
|
||
color: var(--color-accent-gold);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ── 4. AURA MARBLE BACKGROUND ───────────────────────────────── */
|
||
.bg-marble-container {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -2;
|
||
overflow: hidden;
|
||
background-color: var(--bg);
|
||
pointer-events: none;
|
||
transition: background-color 0.4s ease;
|
||
}
|
||
.bg-marble-grain {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
opacity: 0.035;
|
||
mix-blend-mode: overlay;
|
||
pointer-events: none;
|
||
}
|
||
|
||
|
||
/* ── 5. FLOEMA LAYOUT GRID ───────────────────────────────────── */
|
||
.g-row {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
padding-left: calc(var(--grid-margin) - var(--grid-gap) * 0.5);
|
||
padding-right: calc(var(--grid-margin) - var(--grid-gap) * 0.5);
|
||
width: 100%;
|
||
}
|
||
.g-col {
|
||
padding-left: calc(var(--grid-gap) * 0.5);
|
||
padding-right: calc(var(--grid-gap) * 0.5);
|
||
}
|
||
.col-left { flex: 0 0 33.333%; max-width: 33.333%; }
|
||
.col-right { flex: 0 0 66.667%; max-width: 66.667%; }
|
||
.col-half { flex: 0 0 50%; max-width: 50%; }
|
||
.col-full { flex: 0 0 100%; max-width: 100%; }
|
||
@media (max-width: 768px) {
|
||
.col-left, .col-right, .col-half { flex: 0 0 100%; max-width: 100%; }
|
||
}
|
||
|
||
|
||
/* ── 6. CAPITOLIUM CLASSIC TYPOGRAPHY ────────────────────────── */
|
||
.editorial-header {
|
||
text-align: center;
|
||
position: relative;
|
||
padding: clamp(3rem, 5vw, 8rem) 1rem;
|
||
}
|
||
.editorial-script {
|
||
font-family: 'Brush Script MT', cursive;
|
||
font-size: clamp(8rem, 15vw, 22rem);
|
||
color: var(--color-accent-gold);
|
||
line-height: 0.3;
|
||
display: block;
|
||
opacity: 0.65;
|
||
}
|
||
.editorial-title {
|
||
font-family: var(--font-serif-display);
|
||
font-size: clamp(2.5rem, 4vw, 5.5rem);
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
color: var(--ink);
|
||
margin-top: -1rem;
|
||
}
|
||
.editorial-subtitle {
|
||
font-family: var(--font-serif-classic);
|
||
font-style: italic;
|
||
font-size: 1.15rem;
|
||
letter-spacing: 0.1em;
|
||
color: var(--color-text-muted);
|
||
text-transform: uppercase;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
|
||
/* ── 7. CAPITOLIUM REVEAL BUTTON ─────────────────────────────── */
|
||
.btn-reveal {
|
||
background: transparent;
|
||
border: 1px solid var(--color-accent-gold);
|
||
color: var(--ink);
|
||
padding: 1.15rem 2.5rem;
|
||
font-family: var(--font-serif-display);
|
||
font-size: 0.88rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
transition: color 0.4s var(--ease-out-expo);
|
||
z-index: 1;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
.btn-reveal::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-color: var(--color-accent-gold);
|
||
transform: scaleY(0);
|
||
transform-origin: bottom;
|
||
transition: transform 0.45s var(--ease-fluid-slide);
|
||
z-index: -1;
|
||
}
|
||
.btn-reveal-text {
|
||
transition: letter-spacing 0.4s var(--ease-fluid-slide),
|
||
padding-left 0.4s var(--ease-fluid-slide);
|
||
}
|
||
.btn-reveal-arrow {
|
||
transition: transform 0.4s var(--ease-fluid-slide);
|
||
display: inline-block;
|
||
font-style: normal;
|
||
}
|
||
.btn-reveal:hover { color: var(--color-white); }
|
||
.btn-reveal:hover::before { transform: scaleY(1); }
|
||
.btn-reveal:hover .btn-reveal-text { letter-spacing: 0.24em; padding-left: 0.08em; }
|
||
.btn-reveal:hover .btn-reveal-arrow { transform: translateX(6px) scale(1.1); }
|
||
|
||
|
||
/* ── 8. SLIDE UP TEXT HOVER ──────────────────────────────────── */
|
||
.slide-hover-link {
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
color: var(--ink);
|
||
font-family: var(--font-serif-display);
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
line-height: 1;
|
||
}
|
||
.slide-hover-wrapper {
|
||
display: block;
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 1.2em;
|
||
}
|
||
.slide-text-main,
|
||
.slide-text-clone {
|
||
display: block;
|
||
transition: transform 0.5s var(--ease-out-expo);
|
||
line-height: 1.2em;
|
||
will-change: transform;
|
||
}
|
||
.slide-text-clone {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
width: 100%;
|
||
color: var(--color-accent-gold);
|
||
}
|
||
.slide-hover-link:hover .slide-text-main { transform: translateY(-100%); }
|
||
.slide-hover-link:hover .slide-text-clone { transform: translateY(-100%); }
|
||
|
||
|
||
/* ── 9. UNDERLINE EXPAND HOVER ───────────────────────────────── */
|
||
.underline-link {
|
||
position: relative;
|
||
color: currentColor;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
.underline-link::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1px;
|
||
background-color: currentColor;
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.5s var(--ease-out-expo);
|
||
}
|
||
.underline-link:hover::after { transform: scaleX(1); }
|
||
|
||
|
||
/* ── 10. FLOEMA NUDGE HOVER ──────────────────────────────────── */
|
||
.nudge-link {
|
||
display: inline-block;
|
||
transition: margin 0.3s cubic-bezier(0.19, 1, 0.22, 1);
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
}
|
||
.nudge-link:hover {
|
||
margin-left: 6px;
|
||
color: var(--color-accent-gold);
|
||
}
|
||
|
||
|
||
/* ── 11. LIQUID OVERLAY MENU ─────────────────────────────────── */
|
||
.nav-trigger {
|
||
position: fixed;
|
||
top: clamp(1rem, 2vw, 1.75rem);
|
||
right: var(--grid-margin);
|
||
z-index: 1001;
|
||
width: 52px;
|
||
height: 52px;
|
||
background: rgba(242,239,234,0.88);
|
||
border: 1px solid rgba(195,166,119,0.45);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
transition: background 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
[data-theme="dark"] .nav-trigger {
|
||
background: rgba(26,29,36,0.88);
|
||
border-color: rgba(195,166,119,0.3);
|
||
}
|
||
.nav-trigger:hover {
|
||
background: rgba(195,166,119,0.15);
|
||
}
|
||
.nav-trigger.active {
|
||
background: var(--color-accent-gold);
|
||
border-color: var(--color-accent-gold);
|
||
}
|
||
|
||
.nav-burger-lines {
|
||
width: 20px;
|
||
height: 14px;
|
||
position: relative;
|
||
display: block;
|
||
}
|
||
.nav-line {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 1.5px;
|
||
background-color: var(--color-bg-dark);
|
||
transition: transform 0.4s var(--ease-fluid-slide),
|
||
opacity 0.3s ease,
|
||
background-color 0.3s ease;
|
||
}
|
||
[data-theme="dark"] .nav-line { background-color: var(--color-light-gold); }
|
||
.nav-trigger.active .nav-line { background-color: var(--color-white); }
|
||
.nav-line--top { top: 0; }
|
||
.nav-line--mid { top: 6px; }
|
||
.nav-line--bot { top: 12px; }
|
||
.nav-trigger.active .nav-line--top { transform: translateY(6px) rotate(45deg); }
|
||
.nav-trigger.active .nav-line--mid { opacity: 0; transform: scaleX(0); }
|
||
.nav-trigger.active .nav-line--bot { transform: translateY(-6px) rotate(-45deg); }
|
||
|
||
/* Logo header (top-left fixed) */
|
||
.nav-logo {
|
||
position: fixed;
|
||
top: clamp(0.8rem, 1.5vw, 1.5rem);
|
||
left: var(--grid-margin);
|
||
z-index: 1001;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.nav-logo img {
|
||
height: clamp(48px, 7vw, 80px);
|
||
width: auto;
|
||
display: block;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.nav-logo .logo--dark { display: none; }
|
||
[data-theme="dark"] .nav-logo .logo--light { display: none; }
|
||
[data-theme="dark"] .nav-logo .logo--dark { display: block; }
|
||
|
||
/* Overlay */
|
||
.nav-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 1000;
|
||
background-color: var(--color-bg-light);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
clip-path: inset(0 0 100% 0);
|
||
transition: clip-path 0.8s var(--ease-fluid-slide);
|
||
will-change: clip-path;
|
||
}
|
||
[data-theme="dark"] .nav-overlay {
|
||
background-color: #131519;
|
||
}
|
||
.nav-overlay.open {
|
||
clip-path: inset(0 0 0% 0);
|
||
}
|
||
.nav-overlay-inner {
|
||
padding: var(--grid-margin);
|
||
text-align: center;
|
||
width: 100%;
|
||
max-width: 800px;
|
||
}
|
||
.nav-menu-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.nav-menu-list li {
|
||
margin: clamp(1.5rem, 3vh, 2.5rem) 0;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo);
|
||
}
|
||
.nav-overlay.open .nav-menu-list li {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.nav-menu-list li:nth-child(1) { transition-delay: 0.15s; }
|
||
.nav-menu-list li:nth-child(2) { transition-delay: 0.22s; }
|
||
.nav-menu-list li:nth-child(3) { transition-delay: 0.29s; }
|
||
.nav-menu-list li:nth-child(4) { transition-delay: 0.36s; }
|
||
.nav-menu-list .slide-hover-link {
|
||
font-size: clamp(2rem, 4.5vw, 5rem);
|
||
color: var(--color-bg-dark);
|
||
letter-spacing: -0.02em;
|
||
}
|
||
[data-theme="dark"] .nav-menu-list .slide-hover-link {
|
||
color: var(--color-light-gold);
|
||
}
|
||
.nav-overlay-footer {
|
||
margin-top: clamp(2rem, 4vh, 4rem);
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
transition: opacity 0.4s ease 0.4s, transform 0.4s var(--ease-out-expo) 0.4s;
|
||
}
|
||
.nav-overlay.open .nav-overlay-footer {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.nav-overlay-footer a {
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-muted);
|
||
transition: color 0.25s ease;
|
||
}
|
||
.nav-overlay-footer a:hover { color: var(--color-accent-gold); }
|
||
|
||
/* Body scroll lock when overlay is open */
|
||
body.nav-open { overflow: hidden; }
|
||
|
||
|
||
/* ── 12. INDEX SECTION INDICATOR ─────────────────────────────── */
|
||
.section-indicator {
|
||
position: fixed;
|
||
left: var(--grid-margin);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.9rem;
|
||
z-index: 100;
|
||
font-family: var(--font-sans-clean);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--color-accent-gold);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
.section-indicator.visible { opacity: 1; }
|
||
.indicator-index {
|
||
font-size: 0.65rem;
|
||
color: rgba(195,166,119,0.6);
|
||
}
|
||
.indicator-line-wrapper {
|
||
width: 1px;
|
||
height: 80px;
|
||
background-color: rgba(195,166,119,0.18);
|
||
position: relative;
|
||
}
|
||
.indicator-line-fill {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 0%;
|
||
background-color: var(--color-accent-gold);
|
||
transition: height 0.35s var(--ease-out-expo);
|
||
}
|
||
.indicator-name {
|
||
writing-mode: vertical-rl;
|
||
letter-spacing: 0.15em;
|
||
color: var(--color-accent-gold);
|
||
font-size: 0.65rem;
|
||
}
|
||
@media (max-width: 960px) {
|
||
.section-indicator { display: none; }
|
||
}
|
||
|
||
|
||
/* ── 13. LANDING SECTION ─────────────────────────────────────── */
|
||
.landing {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 100dvh;
|
||
background: var(--land-bg);
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.4s ease;
|
||
}
|
||
|
||
/* Animated gradient blobs */
|
||
.landing__blobs {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.blob {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(80px);
|
||
opacity: 0.55;
|
||
will-change: transform;
|
||
}
|
||
.blob--a {
|
||
width: clamp(340px, 50vw, 700px);
|
||
height: clamp(340px, 50vw, 700px);
|
||
background: radial-gradient(circle, var(--land-blob-a) 0%, transparent 70%);
|
||
top: -15%;
|
||
left: -12%;
|
||
animation: blobA 18s ease-in-out infinite alternate;
|
||
}
|
||
.blob--b {
|
||
width: clamp(280px, 40vw, 600px);
|
||
height: clamp(280px, 40vw, 600px);
|
||
background: radial-gradient(circle, var(--land-blob-b) 0%, transparent 70%);
|
||
bottom: -10%;
|
||
right: -8%;
|
||
animation: blobB 22s ease-in-out infinite alternate;
|
||
}
|
||
.blob--c {
|
||
width: clamp(200px, 30vw, 450px);
|
||
height: clamp(200px, 30vw, 450px);
|
||
background: radial-gradient(circle, var(--land-blob-c) 0%, transparent 70%);
|
||
top: 40%;
|
||
left: 55%;
|
||
animation: blobC 15s ease-in-out infinite alternate;
|
||
}
|
||
@keyframes blobA {
|
||
from { transform: translate(0,0) scale(1); }
|
||
to { transform: translate(6%, 8%) scale(1.12); }
|
||
}
|
||
@keyframes blobB {
|
||
from { transform: translate(0,0) scale(1.05); }
|
||
to { transform: translate(-5%, -6%) scale(0.92); }
|
||
}
|
||
@keyframes blobC {
|
||
from { transform: translate(0,0) scale(0.95); }
|
||
to { transform: translate(4%, 10%) scale(1.08); }
|
||
}
|
||
[data-theme="light"] .blob { opacity: 0.45; filter: blur(90px); }
|
||
|
||
/* Grain overlay */
|
||
.landing::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
|
||
opacity: var(--land-grain, 0.03);
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Floating food chips */
|
||
.landing__chips {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
.chip {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: var(--land-chip-bg);
|
||
border: 1px solid var(--land-chip-border);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
border-radius: 16px;
|
||
padding: 10px;
|
||
width: clamp(80px, 10vw, 120px);
|
||
animation-timing-function: ease-in-out;
|
||
animation-iteration-count: infinite;
|
||
animation-direction: alternate;
|
||
opacity: 0;
|
||
animation-fill-mode: both;
|
||
transition: background 0.3s, border-color 0.3s;
|
||
}
|
||
.chip img {
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
object-fit: cover;
|
||
border-radius: 10px;
|
||
}
|
||
.chip span {
|
||
color: var(--land-chip-text);
|
||
font-size: clamp(10px, 1.2vw, 13px);
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.chip--1 { top: 12%; left: clamp(4%, 6vw, 8%); animation-name: floatA; animation-duration: 8s; animation-delay: 0.6s; }
|
||
.chip--2 { bottom: 18%; left: clamp(3%, 5vw, 7%); animation-name: floatB; animation-duration: 10s; animation-delay: 0.9s; }
|
||
.chip--3 { top: 10%; right: clamp(4%, 6vw, 8%); animation-name: floatC; animation-duration: 9s; animation-delay: 1.2s; }
|
||
.chip--4 { bottom: 14%; right: clamp(3%, 5vw, 7%); animation-name: floatA; animation-duration: 11s; animation-delay: 0.4s; }
|
||
|
||
@keyframes floatA {
|
||
from { transform: translateY(0px) rotate(-1deg); opacity: 0.85; }
|
||
to { transform: translateY(-18px) rotate(1deg); opacity: 1; }
|
||
}
|
||
@keyframes floatB {
|
||
from { transform: translateY(0px) rotate(1.5deg); opacity: 0.80; }
|
||
to { transform: translateY(-14px) rotate(-1.5deg); opacity: 1; }
|
||
}
|
||
@keyframes floatC {
|
||
from { transform: translateY(0px) rotate(-2deg); opacity: 0.90; }
|
||
to { transform: translateY(-22px) rotate(0.5deg); opacity: 1; }
|
||
}
|
||
|
||
/* Main copy */
|
||
.landing__copy {
|
||
position: relative;
|
||
z-index: 3;
|
||
text-align: center;
|
||
padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 5vw, 2rem);
|
||
max-width: 760px;
|
||
animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both;
|
||
animation-delay: 0.15s;
|
||
}
|
||
.landing__eyebrow {
|
||
color: var(--land-muted);
|
||
font-size: clamp(0.7rem, 1.2vw, 0.85rem);
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 1.25rem;
|
||
font-family: var(--font-sans-clean);
|
||
}
|
||
.landing__headline {
|
||
font-family: var(--font-serif-display);
|
||
font-size: clamp(2.6rem, 7.5vw, 7rem);
|
||
font-weight: 600;
|
||
line-height: 1.05;
|
||
color: var(--land-text);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.05em;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.landing__headline em {
|
||
font-style: italic;
|
||
color: var(--land-accent);
|
||
}
|
||
.landing__headline .line {
|
||
display: block;
|
||
opacity: 0;
|
||
animation: lineIn 0.7s cubic-bezier(0.16,1,0.3,1) both;
|
||
}
|
||
.landing__headline .line--1 { animation-delay: 0.35s; }
|
||
.landing__headline .line--2 { animation-delay: 0.5s; }
|
||
.landing__headline .line--3 { animation-delay: 0.65s; }
|
||
|
||
.landing__sub {
|
||
color: var(--land-muted);
|
||
font-size: clamp(0.95rem, 1.8vw, 1.15rem);
|
||
max-width: 520px;
|
||
margin: 0 auto 2.25rem;
|
||
opacity: 0;
|
||
animation: fadeUp 0.7s 0.8s cubic-bezier(0.16,1,0.3,1) both;
|
||
}
|
||
.landing__cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: clamp(12px,2vw,16px) clamp(22px,3vw,36px);
|
||
border-radius: 0;
|
||
border: 1px solid var(--land-accent);
|
||
background: transparent;
|
||
color: var(--land-accent);
|
||
font-family: var(--font-serif-display);
|
||
font-weight: 600;
|
||
font-size: clamp(0.8rem,1.2vw,0.95rem);
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: color 0.4s var(--ease-out-expo);
|
||
opacity: 0;
|
||
animation: fadeUp 0.7s 0.95s cubic-bezier(0.16,1,0.3,1) both;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
z-index: 1;
|
||
}
|
||
.landing__cta::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--land-accent);
|
||
transform: scaleY(0);
|
||
transform-origin: bottom;
|
||
transition: transform 0.45s var(--ease-fluid-slide);
|
||
z-index: -1;
|
||
}
|
||
.landing__cta:hover { color: var(--land-bg); }
|
||
.landing__cta:hover::before { transform: scaleY(1); }
|
||
.landing__cta svg { transition: transform 0.25s ease; }
|
||
.landing__cta:hover svg { transform: translateY(3px); }
|
||
|
||
/* Scroll nudge */
|
||
.landing__scroll-nudge {
|
||
position: absolute;
|
||
bottom: 2.5rem;
|
||
inset-inline: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
z-index: 3;
|
||
opacity: 0;
|
||
animation: fadeUp 0.7s 1.3s ease both;
|
||
}
|
||
.scroll-line {
|
||
width: 1px;
|
||
height: 48px;
|
||
background: linear-gradient(to bottom, transparent, var(--land-scroll-line));
|
||
animation: scrollPulse 2.5s ease-in-out infinite;
|
||
}
|
||
.landing__scroll-nudge span {
|
||
color: var(--land-scroll-text);
|
||
font-size: 0.62rem;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
font-family: var(--font-sans-clean);
|
||
}
|
||
@keyframes scrollPulse {
|
||
0%, 100% { opacity: 0.4; transform: scaleY(0.7); transform-origin: top; }
|
||
50% { opacity: 1; transform: scaleY(1); }
|
||
}
|
||
|
||
|
||
/* ── 14. RECIPE SHOWCASE STAGE ───────────────────────────────── */
|
||
.recipe-stage {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100dvh;
|
||
background: var(--color-bg-dark);
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Stage background grain */
|
||
.recipe-stage::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
|
||
opacity: 0.035;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Stage intro text */
|
||
.recipe-stage__intro {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
text-align: center;
|
||
padding: var(--grid-margin);
|
||
}
|
||
.recipe-stage__intro-eyebrow {
|
||
font-family: var(--font-sans-clean);
|
||
font-size: clamp(0.65rem, 1vw, 0.8rem);
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: rgba(195,166,119,0.65);
|
||
margin-bottom: 1rem;
|
||
}
|
||
.recipe-stage__intro-title {
|
||
font-family: var(--font-serif-display);
|
||
font-size: clamp(2.2rem, 6vw, 6.5rem);
|
||
font-weight: 600;
|
||
line-height: 1.05;
|
||
color: var(--color-light-gold);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.recipe-stage__intro-title em {
|
||
color: var(--color-accent-gold);
|
||
font-style: italic;
|
||
}
|
||
.recipe-stage__intro-line {
|
||
width: 60px;
|
||
height: 1px;
|
||
background: var(--color-accent-gold);
|
||
margin: 1.5rem auto;
|
||
opacity: 0.5;
|
||
transform-origin: left;
|
||
}
|
||
|
||
/* Slide container */
|
||
.recipe-stage__slides {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* Individual slide */
|
||
.recipe-stage__slide {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: center;
|
||
will-change: transform, opacity;
|
||
overflow: hidden;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.recipe-stage__slide { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* Slide image side */
|
||
.recipe-stage__slide-image {
|
||
position: relative;
|
||
height: 100dvh;
|
||
overflow: hidden;
|
||
}
|
||
.recipe-stage__slide-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
display: block;
|
||
will-change: transform;
|
||
}
|
||
.recipe-stage__slide-image::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(36,31,33,0.85) 0%,
|
||
rgba(36,31,33,0.15) 60%,
|
||
transparent 100%
|
||
);
|
||
}
|
||
@media (max-width: 768px) {
|
||
.recipe-stage__slide-image {
|
||
height: 45dvh;
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
}
|
||
.recipe-stage__slide-image::after {
|
||
background: linear-gradient(to bottom, transparent 30%, rgba(36,31,33,0.92) 100%);
|
||
}
|
||
}
|
||
|
||
/* Slide copy side */
|
||
.recipe-stage__slide-copy {
|
||
position: relative;
|
||
z-index: 2;
|
||
padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
|
||
}
|
||
@media (max-width: 768px) {
|
||
.recipe-stage__slide-copy {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 3;
|
||
padding: 2rem 1.5rem 3rem;
|
||
}
|
||
}
|
||
.recipe-stage__slide-num {
|
||
font-family: var(--font-sans-clean);
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: rgba(195,166,119,0.55);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.recipe-stage__slide-category {
|
||
font-family: var(--font-sans-clean);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--color-accent-gold);
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
}
|
||
.recipe-stage__slide-category::before {
|
||
content: '';
|
||
display: block;
|
||
width: 24px;
|
||
height: 1px;
|
||
background: var(--color-accent-gold);
|
||
}
|
||
.recipe-stage__slide-title {
|
||
font-family: var(--font-serif-display);
|
||
font-size: clamp(1.8rem, 3.5vw, 4rem);
|
||
font-weight: 600;
|
||
line-height: 1.1;
|
||
color: var(--color-light-gold);
|
||
margin-bottom: 1.25rem;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.recipe-stage__slide-desc {
|
||
font-family: var(--font-sans-clean);
|
||
font-size: clamp(0.85rem, 1.2vw, 1rem);
|
||
line-height: 1.7;
|
||
color: rgba(240,227,207,0.65);
|
||
max-width: 44ch;
|
||
margin-bottom: 1.75rem;
|
||
}
|
||
.recipe-stage__slide-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1.25rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.recipe-stage__slide-meta-item {
|
||
font-family: var(--font-sans-clean);
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.08em;
|
||
color: rgba(195,166,119,0.7);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
text-transform: uppercase;
|
||
}
|
||
.recipe-stage__slide-meta-item strong {
|
||
color: var(--color-accent-gold);
|
||
}
|
||
.recipe-stage__slide-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
font-family: var(--font-serif-display);
|
||
font-size: 0.82rem;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--color-light-gold);
|
||
border: 1px solid rgba(195,166,119,0.45);
|
||
padding: 0.9rem 2rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: color 0.4s var(--ease-out-expo);
|
||
text-decoration: none;
|
||
z-index: 1;
|
||
}
|
||
.recipe-stage__slide-cta::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--color-accent-gold);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.45s var(--ease-fluid-slide);
|
||
z-index: -1;
|
||
}
|
||
.recipe-stage__slide-cta:hover { color: var(--color-bg-dark); }
|
||
.recipe-stage__slide-cta:hover::before { transform: scaleX(1); }
|
||
|
||
/* Stage progress bar (bottom) */
|
||
.recipe-stage__progress {
|
||
position: absolute;
|
||
bottom: 2rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
}
|
||
.recipe-stage__progress-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: rgba(195,166,119,0.3);
|
||
transition: background 0.3s ease, transform 0.3s ease;
|
||
}
|
||
.recipe-stage__progress-dot.active {
|
||
background: var(--color-accent-gold);
|
||
transform: scale(1.5);
|
||
}
|
||
|
||
/* Slide scroll hint */
|
||
.recipe-stage__hint {
|
||
position: absolute;
|
||
bottom: 2rem;
|
||
right: var(--grid-margin);
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
opacity: 0.4;
|
||
}
|
||
.recipe-stage__hint span {
|
||
font-size: 0.6rem;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: var(--color-accent-gold);
|
||
writing-mode: vertical-rl;
|
||
font-family: var(--font-sans-clean);
|
||
}
|
||
.recipe-stage__hint-line {
|
||
width: 1px;
|
||
height: 40px;
|
||
background: linear-gradient(to bottom, var(--color-accent-gold), transparent);
|
||
animation: scrollPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
/* ── 15. SCROLL REVEAL ───────────────────────────────────────── */
|
||
.reveal-target {
|
||
opacity: 0;
|
||
transform: translateY(32px);
|
||
transition: opacity 0.6s var(--ease-out-expo),
|
||
transform 0.6s var(--ease-out-expo);
|
||
}
|
||
.reveal-target.revealed {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
|
||
/* ── 16. SITE HEADER (legacy – hidden; nav-logo + nav-trigger replace it) ── */
|
||
.site-header {
|
||
display: none; /* Replaced by LiquidOverlayMenu */
|
||
}
|
||
|
||
|
||
/* ── 17. SHARED COMPONENTS ───────────────────────────────────── */
|
||
.sr-only {
|
||
position: absolute; width: 1px; height: 1px; padding: 0;
|
||
margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
|
||
white-space: nowrap; border: 0;
|
||
}
|
||
|
||
/* Eyebrow labels */
|
||
.eyebrow {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
font-weight: 700;
|
||
color: var(--color-accent-gold);
|
||
font-size: 0.72rem;
|
||
font-family: var(--font-sans-clean);
|
||
}
|
||
|
||
/* Pills */
|
||
.pill {
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
border-radius: 999px;
|
||
background: var(--accent-soft);
|
||
color: var(--ink);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
font-family: var(--font-sans-clean);
|
||
}
|
||
.pill--ghost { background: var(--ghost); color: var(--muted); }
|
||
.pill--gold { background: rgba(195,166,119,0.15); color: var(--color-accent-gold); border: 1px solid rgba(195,166,119,0.3); }
|
||
|
||
|
||
/* ── 18. SEARCH BAR ──────────────────────────────────────────── */
|
||
.search { margin: 18px 0 8px; display: flex; gap: 8px; }
|
||
.search input {
|
||
flex: 1;
|
||
padding: 13px 16px;
|
||
border: 1px solid var(--stroke);
|
||
border-radius: 0;
|
||
font-size: 0.9rem;
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
font-family: var(--font-sans-clean);
|
||
transition: border-color 0.22s ease;
|
||
}
|
||
.search input:focus { outline: none; border-color: var(--color-accent-gold); }
|
||
.search button {
|
||
padding: 13px 18px;
|
||
border: 1px solid var(--color-accent-gold);
|
||
background: transparent;
|
||
color: var(--ink);
|
||
font-weight: 700;
|
||
font-size: 0.82rem;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
font-family: var(--font-sans-clean);
|
||
transition: background 0.25s ease, color 0.25s ease;
|
||
}
|
||
.search button:hover { background: var(--color-accent-gold); color: var(--color-white); }
|
||
|
||
|
||
/* ── 19. TAG SYSTEM ──────────────────────────────────────────── */
|
||
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
|
||
.tag {
|
||
padding: 7px 14px;
|
||
border: 1px solid var(--stroke);
|
||
background: transparent;
|
||
color: var(--muted);
|
||
font-weight: 600;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
font-family: var(--font-sans-clean);
|
||
transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease;
|
||
text-decoration: none;
|
||
}
|
||
.tag:hover { border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
|
||
.tag.active { background: var(--color-accent-gold); color: var(--color-white); border-color: var(--color-accent-gold); }
|
||
.tag.clear { background: transparent; border-style: dashed; }
|
||
|
||
|
||
/* ── 20. CARDS ───────────────────────────────────────────────── */
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
|
||
gap: 20px;
|
||
}
|
||
.grid--tight { grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 14px; }
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
overflow: hidden;
|
||
border: 1px solid var(--stroke);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform 0.3s var(--ease-out-expo),
|
||
box-shadow 0.3s var(--ease-out-expo);
|
||
}
|
||
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(36,31,33,0.12); }
|
||
[data-theme="dark"] .card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.4); }
|
||
.card__image { position: relative; display: block; overflow: hidden; }
|
||
.card__image img {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
display: block;
|
||
background: var(--panel);
|
||
transition: transform 0.6s var(--ease-out-expo);
|
||
}
|
||
.card:hover .card__image img { transform: scale(1.04); }
|
||
.card__body { padding: 18px; display: grid; gap: 10px; flex: 1; }
|
||
.card h3 { margin: 0; font-size: 1.2rem; }
|
||
.card h4 { margin: 0; font-size: 1rem; }
|
||
.card--bare { border: 1px solid var(--stroke); background: var(--panel); }
|
||
.card .pill { position: absolute; bottom: 10px; left: 10px; }
|
||
|
||
.meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 0.78rem; }
|
||
.meta--row { gap: 16px; }
|
||
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
|
||
|
||
/* ── 21. HERO CARD (featured) ────────────────────────────────── */
|
||
.hero-card {
|
||
background: var(--surface);
|
||
overflow: hidden;
|
||
border: 1px solid var(--stroke);
|
||
display: grid;
|
||
grid-template-rows: auto 1fr;
|
||
}
|
||
.hero-card img {
|
||
width: 100%;
|
||
aspect-ratio: 3/2;
|
||
object-fit: cover;
|
||
background: var(--panel);
|
||
display: block;
|
||
}
|
||
.hero-card__body { padding: 20px; display: grid; gap: 10px; }
|
||
|
||
|
||
/* ── 22. DISCOVER SHELL ──────────────────────────────────────── */
|
||
.discover-shell {
|
||
max-width: 1200px;
|
||
margin: 40px auto 40px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
|
||
gap: 24px;
|
||
align-items: stretch;
|
||
padding: 0 var(--grid-margin);
|
||
}
|
||
@media (max-width: 900px) { .discover-shell { grid-template-columns: 1fr; gap: 16px; margin: 24px auto; } }
|
||
|
||
.discover-shell__main {
|
||
background: var(--surface);
|
||
border: 1px solid var(--stroke);
|
||
padding: 28px;
|
||
display: grid;
|
||
gap: 20px;
|
||
}
|
||
.discover-shell__feature {
|
||
background: var(--surface);
|
||
border: 1px solid var(--stroke);
|
||
}
|
||
.section-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.section-header--stack {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
text-align: left;
|
||
}
|
||
.section-header h2, .section-header h3 { margin: 0; }
|
||
.section-header p { margin: 0; }
|
||
|
||
.discover-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
.discover-stat {
|
||
padding: 14px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--stroke);
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
.discover-stat strong {
|
||
font-size: clamp(1.1rem, 2vw, 1.6rem);
|
||
color: var(--ink);
|
||
font-family: var(--font-serif-display);
|
||
}
|
||
.discover-stat span { color: var(--muted); font-size: 0.8rem; }
|
||
|
||
.tag-panel {
|
||
background: var(--surface);
|
||
border: 1px solid var(--stroke);
|
||
padding: 20px;
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
.tag-panel__head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.tag-panel__head h3 { margin: 0; }
|
||
.tag-row--panel { margin-top: 0; }
|
||
|
||
.discover-search { margin: 0; }
|
||
|
||
|
||
/* ── 23. COMING SOON STRIP ───────────────────────────────────── */
|
||
.coming-strip {
|
||
max-width: 1200px;
|
||
margin: 0 auto 0;
|
||
padding: 20px var(--grid-margin);
|
||
background: var(--surface);
|
||
border-top: 1px solid var(--stroke);
|
||
border-bottom: 1px solid var(--stroke);
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
.coming-strip__head { display: flex; align-items: center; gap: 10px; }
|
||
.coming-strip__head small { color: var(--muted); font-size: 0.8rem; }
|
||
.coming-strip__row {
|
||
display: grid;
|
||
grid-auto-flow: column;
|
||
grid-auto-columns: minmax(130px,1fr);
|
||
gap: 14px;
|
||
overflow-x: auto;
|
||
padding-bottom: 6px;
|
||
scrollbar-color: rgba(195,166,119,0.3) transparent;
|
||
}
|
||
.coming-strip__row::-webkit-scrollbar { height: 4px; }
|
||
.coming-strip__row::-webkit-scrollbar-track { background: transparent; }
|
||
.coming-strip__row::-webkit-scrollbar-thumb { background: rgba(195,166,119,0.3); border-radius: 999px; }
|
||
.coming-chip {
|
||
background: var(--panel);
|
||
border: 1px solid var(--stroke);
|
||
padding: 10px;
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
.coming-chip__image img {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
object-fit: cover;
|
||
display: block;
|
||
background: var(--panel-2);
|
||
}
|
||
.coming-chip__title { font-weight: 700; color: var(--ink); font-size: 0.82rem; font-family: var(--font-sans-clean); }
|
||
|
||
|
||
/* ── 24. LATEST / RECIPE GRID SECTION ───────────────────────── */
|
||
.latest {
|
||
max-width: 1200px;
|
||
margin: 40px auto 60px;
|
||
padding: 0 var(--grid-margin);
|
||
}
|
||
.latest .section-header { margin-bottom: 24px; }
|
||
|
||
|
||
/* ── 25. COMING FEATURES SECTION ─────────────────────────────── */
|
||
.coming-features {
|
||
max-width: 1200px;
|
||
margin: 0 auto 80px;
|
||
padding: 0 var(--grid-margin);
|
||
}
|
||
.coming-features .section-header { margin-bottom: 24px; }
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
|
||
gap: 16px;
|
||
}
|
||
.feature-card {
|
||
padding: 20px 22px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--stroke);
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
.feature-card:hover { border-color: rgba(195,166,119,0.45); }
|
||
.feature-icon {
|
||
font-size: 1.5rem;
|
||
line-height: 1;
|
||
}
|
||
.feature-card p { font-size: 0.9rem; }
|
||
|
||
|
||
/* ── 26. BUTTON (general legacy) ─────────────────────────────── */
|
||
.button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 11px 20px;
|
||
background: transparent;
|
||
color: var(--ink);
|
||
font-weight: 700;
|
||
font-size: 0.82rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
border: 1px solid var(--stroke);
|
||
cursor: pointer;
|
||
font-family: var(--font-sans-clean);
|
||
transition: border-color 0.22s, background 0.22s, color 0.22s;
|
||
}
|
||
.button:hover { border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
|
||
|
||
|
||
/* ── 27. RECIPE PAGE ──────────────────────────────────────────── */
|
||
.recipe {
|
||
max-width: 1100px;
|
||
margin: 120px auto 80px;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--stroke);
|
||
}
|
||
.recipe__hero {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
|
||
align-items: stretch;
|
||
}
|
||
.recipe__hero img {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.recipe__hero__copy {
|
||
padding: 32px;
|
||
display: grid;
|
||
gap: 14px;
|
||
background: var(--panel);
|
||
}
|
||
.lede { font-size: 1.05rem; line-height: 1.7; }
|
||
.recipe__body {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
|
||
gap: 16px;
|
||
padding: 28px;
|
||
}
|
||
.panel {
|
||
padding: 20px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--stroke);
|
||
}
|
||
.panel h2 { margin-bottom: 1rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.1em; }
|
||
.ingredients { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
|
||
.ingredients li {
|
||
padding: 9px 12px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--stroke);
|
||
font-size: 0.88rem;
|
||
}
|
||
.steps { padding-left: 22px; display: grid; gap: 12px; }
|
||
.steps li { padding: 4px 0; line-height: 1.65; font-size: 0.9rem; }
|
||
.more { padding: 28px; border-top: 1px solid var(--stroke); }
|
||
|
||
|
||
/* ── 28. FOOTER ───────────────────────────────────────────────── */
|
||
.site-footer {
|
||
max-width: 1200px;
|
||
margin: 0 auto 60px;
|
||
padding: 32px var(--grid-margin);
|
||
border-top: 1px solid var(--stroke);
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
.footer-meta {
|
||
color: var(--muted);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
font-size: 0.82rem;
|
||
}
|
||
.footer-links {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.footer-links a {
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
}
|
||
.contact-link { font-weight: 700; color: var(--ink); }
|
||
|
||
|
||
/* ── 29. BACK TO TOP ──────────────────────────────────────────── */
|
||
#backToTop {
|
||
position: fixed;
|
||
right: 18px;
|
||
bottom: 18px;
|
||
width: 44px;
|
||
height: 44px;
|
||
border: 1px solid var(--stroke);
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow);
|
||
opacity: 0;
|
||
transform: translateY(12px);
|
||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||
z-index: 999;
|
||
font-size: 1.1rem;
|
||
}
|
||
#backToTop.show { opacity: 1; transform: translateY(0); }
|
||
#backToTop:hover { border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
|
||
|
||
|
||
/* ── 30. THEME TOGGLE ────────────────────────────────────────── */
|
||
.theme-toggle {
|
||
position: fixed;
|
||
bottom: 1.25rem;
|
||
right: 1.25rem;
|
||
z-index: 1000;
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--stroke);
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
||
}
|
||
.theme-toggle:hover { border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
|
||
|
||
|
||
/* ── 31. NOT FOUND ───────────────────────────────────────────── */
|
||
.not-found {
|
||
max-width: 800px;
|
||
margin: 160px auto;
|
||
text-align: center;
|
||
display: grid;
|
||
gap: 14px;
|
||
padding: 0 var(--grid-margin);
|
||
}
|
||
|
||
.empty-state {
|
||
padding: 28px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--stroke);
|
||
display: grid;
|
||
gap: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
/* ── 32. LEGAL PAGES ─────────────────────────────────────────── */
|
||
.legal-page { max-width: 900px; margin: 140px auto 80px; padding: 0 var(--grid-margin); }
|
||
.legal-card { background: var(--surface); border: 1px solid var(--stroke); padding: 28px; }
|
||
.legal-item { display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--stroke); }
|
||
.legal-item:last-child { border-bottom: none; }
|
||
.legal-label { font-weight: 700; color: var(--ink); font-size: 0.85rem; }
|
||
.legal-section { margin-top: 24px; }
|
||
.legal-section h2 { margin: 0 0 12px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.1em; }
|
||
@media (max-width: 600px) { .legal-item { grid-template-columns: 1fr; } }
|
||
|
||
|
||
/* ── 33. ADMIN OVERRIDE ──────────────────────────────────────── */
|
||
/* Admin uses its own inline styles; body override for admin only */
|
||
|
||
|
||
/* ── 34. KEYFRAMES ───────────────────────────────────────────── */
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(24px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes lineIn {
|
||
from { opacity: 0; transform: translateY(20px) skewY(1deg); }
|
||
to { opacity: 1; transform: translateY(0) skewY(0deg); }
|
||
}
|
||
@keyframes slideInRight {
|
||
from { transform: translateX(80px); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
@keyframes slideOutLeft {
|
||
from { transform: translateX(0); opacity: 1; }
|
||
to { transform: translateX(-80px); opacity: 0; }
|
||
}
|
||
|
||
|
||
/* ── 35. RESPONSIVE ──────────────────────────────────────────── */
|
||
@media (max-width: 600px) {
|
||
.landing__chips { display: none; }
|
||
.landing__headline { font-size: clamp(2.2rem, 12vw, 4rem); }
|
||
.discover-shell { padding: 0 12px; }
|
||
.latest { padding: 0 12px; }
|
||
.coming-features { padding: 0 12px; }
|
||
.discover-stats { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.recipe { margin: 80px auto 40px; }
|
||
.recipe__hero { grid-template-columns: 1fr; }
|
||
.recipe__hero img { aspect-ratio: 16/9; }
|
||
.recipe__body { padding: 16px; gap: 12px; }
|
||
.discover-stats { grid-template-columns: 1fr; }
|
||
.tag-panel__head { flex-direction: column; align-items: flex-start; }
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.landing__chips { display: none; }
|
||
.landing__headline { font-size: clamp(2rem, 10vw, 3.5rem); }
|
||
.latest .section-header,
|
||
.coming-features .section-header { flex-direction: column; gap: 4px; }
|
||
.coming-strip { padding: 16px var(--grid-margin); }
|
||
.coming-strip__row { grid-auto-columns: minmax(130px,44vw); scroll-snap-type: x proximity; }
|
||
.coming-chip { scroll-snap-align: start; }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.recipe__body { grid-template-columns: 1fr; }
|
||
.feature-grid { grid-template-columns: 1fr; }
|
||
.coming-features { margin-bottom: 40px; }
|
||
}
|