/* ============================================================ Fridg — "Morning Kitchen / Wine Bar" Two full themes from one token set, switched by data-theme on (set pre-paint by a tiny inline script; OS preference is the first-visit default). One stylesheet, no dependencies. Mobile-first. ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Morning Kitchen */ --cream: #FBF7F0; --ink: #221C15; --ink-soft: #5C5347; --paprika: #C24A20; --paprika-bright: #E8703F; --herb: #4F7A57; --herb-lift: #86AE8F; --wheat: #F4EBDA; --mint: #EAF1E8; /* Wine Bar (fixed — the night window always lands here) */ --aubergine: #191419; --candle: #F3EDE4; --candle-soft: #CFC5BA; --wine: #C97086; /* Semantic — Morning Kitchen (light default) */ color-scheme: light; --bg: var(--cream); --fg: var(--ink); --fg-soft: var(--ink-soft); --accent: var(--paprika); --accent-ink: #FFFFFF; --link: #3F6346; --herb-accent: var(--herb); --zone-a: var(--wheat); --zone-b: var(--mint); --line: #E7DECF; --card: #FFFDF8; --radius: 14px; --max: 68rem; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } :root[data-theme="dark"] { /* Wine Bar */ color-scheme: dark; --bg: var(--aubergine); --fg: var(--candle); --fg-soft: #BFB4A8; --accent: var(--paprika-bright); --accent-ink: #221C15; --link: var(--herb-lift); --herb-accent: var(--herb-lift); --zone-a: #241C19; --zone-b: #1E241F; --line: #3B3141; --card: #241D24; } /* No-JS fallback: follow the OS when the script never ran */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: var(--aubergine); --fg: var(--candle); --fg-soft: #BFB4A8; --accent: var(--paprika-bright); --accent-ink: #221C15; --link: var(--herb-lift); --herb-accent: var(--herb-lift); --zone-a: #241C19; --zone-b: #1E241F; --line: #3B3141; --card: #241D24; } } /* ---------- Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); background: var(--bg); color: var(--fg); line-height: 1.65; -webkit-font-smoothing: antialiased; timeline-scope: --barzone; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } a { color: var(--link); } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; } /* The 400ms theme crossfade: the toggle script pins this class on for ~450ms so nothing transitions at load or on scroll. */ html.theme-fade body, html.theme-fade body * { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-fade body, html.theme-fade body * { transition: none !important; } } /* ---------- Wordmark: "fridg", the i dotted with an olive (a drop of wine in Wine Bar) ---------- */ .wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; text-decoration: none; color: var(--fg); line-height: 1; } .wordmark .i { position: relative; display: inline-block; } .wordmark .dot { position: absolute; left: 50%; bottom: 0.68em; transform: translateX(-50%); width: 0.34em; line-height: 0; } .wordmark .dot svg { display: block; width: 100%; height: auto; } .wordmark .dot-grape { opacity: 0; } html[data-theme="dark"] .wordmark .dot-olive { opacity: 0; } html[data-theme="dark"] .wordmark .dot-grape { opacity: 1; } .hero .wordmark { font-size: 2.1rem; } /* ---------- THE THEME TOGGLE ---------- */ .theme-toggle { --tt-w: 3.6rem; --tt-h: 1.95rem; --tt-pad: 3px; position: relative; width: var(--tt-w); height: var(--tt-h); flex: none; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(90deg, #F1E7D6 0%, #6B4A56 60%, #191419 100%); cursor: pointer; padding: 0; } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-toggle .knob { position: absolute; top: var(--tt-pad); left: var(--tt-pad); width: calc(var(--tt-h) - 2 * var(--tt-pad) - 2px); height: calc(var(--tt-h) - 2 * var(--tt-pad) - 2px); border-radius: 50%; background: #FFFDF8; box-shadow: 0 1px 4px rgba(34, 28, 21, 0.35); display: grid; place-items: center; transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.4s ease; } .theme-toggle .knob svg { grid-area: 1 / 1; width: 13px; height: auto; transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); } .theme-toggle .grape { opacity: 0; transform: rotate(120deg) scale(0.4); } .theme-toggle:hover .knob { transform: scale(1.07); } .theme-toggle:active .knob { transform: scale(0.92); } html[data-theme="dark"] .theme-toggle .knob { transform: translateX(calc(var(--tt-w) - var(--tt-h))); background: #2B222B; } html[data-theme="dark"] .theme-toggle:hover .knob { transform: translateX(calc(var(--tt-w) - var(--tt-h))) scale(1.07); } html[data-theme="dark"] .theme-toggle:active .knob { transform: translateX(calc(var(--tt-w) - var(--tt-h))) scale(0.92); } html[data-theme="dark"] .theme-toggle .olive { opacity: 0; transform: rotate(-120deg) scale(0.4); } html[data-theme="dark"] .theme-toggle .grape { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .theme-toggle .knob, .theme-toggle .knob svg { transition: none; } } /* ---------- Header / Footer ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding-top: 0.9rem; padding-bottom: 0.9rem; } .header-right { display: flex; align-items: center; gap: 1.1rem; } .site-nav { display: flex; gap: 0.95rem; font-size: 0.92rem; } .site-nav a { text-decoration: none; color: var(--fg-soft); } .site-nav a:hover { color: var(--fg); } @media (min-width: 40rem) { .site-nav { gap: 1.4rem; font-size: 0.95rem; } .header-right { gap: 1.4rem; } } .site-footer { border-top: 1px solid var(--line); background: var(--zone-a); padding: 2.25rem 0 2.75rem; font-size: 0.9rem; color: var(--fg-soft); } .site-footer .wrap { display: flex; flex-direction: column; gap: 0.9rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; } .footer-links a { color: var(--fg-soft); text-decoration: none; } .footer-links a:hover { color: var(--fg); } .footer-brand { display: inline-flex; align-items: center; gap: 0.5rem; } .footer-brand svg { display: block; } .footer-brand .fi-grape { opacity: 0; } html[data-theme="dark"] .footer-brand .fi-olive { opacity: 0; } html[data-theme="dark"] .footer-brand .fi-grape { opacity: 1; } @media (min-width: 50rem) { .site-footer .wrap { flex-direction: row; justify-content: space-between; align-items: center; } } /* ---------- Sections ---------- */ .section { padding: 4.5rem 0; } .section-a { background: var(--zone-a); } .section-b { background: var(--zone-b); } .section h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin-bottom: 0.6rem; } .lede { color: var(--fg-soft); max-width: 42rem; margin-bottom: 2.25rem; } /* ---------- Hero ---------- */ .hero { text-align: center; padding: 4.5rem 0 5rem; } .hero h1 { font-size: clamp(2.2rem, 6.5vw, 3.6rem); max-width: 44rem; margin: 1.4rem auto 1rem; } .hero .tagline { font-size: clamp(1.02rem, 2.5vw, 1.22rem); color: var(--fg-soft); max-width: 40rem; margin: 0 auto 2.25rem; } .hero .tagline .foraj-name { font-family: var(--font-display); font-style: italic; } /* Store badges — coming-soon state */ .badges { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .badge { display: inline-flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 12px; padding: 0.55rem 1.2rem; min-width: 11rem; line-height: 1.3; text-align: left; } .badge .small { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); } .badge .big { font-size: 1.02rem; font-weight: 600; } .badge-note { font-size: 0.85rem; color: var(--fg-soft); margin-bottom: 3.5rem; } /* ---------- Phone mock + The Glow ---------- */ .phone { width: min(320px, 88vw); margin: 0 auto; border-radius: 46px; padding: 12px; background: #0F0B12; border: 1px solid #3A3140; box-shadow: 0 30px 80px -20px rgba(25, 20, 25, 0.55); text-align: left; } .screen { border-radius: 36px; background: linear-gradient(180deg, #1A1420 0%, #120E16 100%); color: #EFE7DA; padding: 1.4rem 1.2rem 1rem; overflow: hidden; font-size: 0.85rem; } .screen .greeting { font-family: var(--font-display); font-size: 1.15rem; } .screen .counts { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0.7rem 0 1.6rem; } .screen .chip { border: 1px solid rgba(243, 237, 228, 0.22); border-radius: 999px; padding: 0.12rem 0.65rem; font-size: 0.72rem; color: #D9CFC2; } .glow-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 1.6rem 0 1.9rem; } .glow-stage::before { content: ""; position: absolute; inset: -2.5rem; background: radial-gradient(circle at 50% 45%, rgba(255, 224, 166, 0.34) 0%, rgba(232, 112, 63, 0.14) 42%, transparent 70%); pointer-events: none; } .glow-btn { position: relative; width: 8.5rem; height: 8.5rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; background: radial-gradient(circle at 50% 32%, #FFEDC9 0%, #F6C36B 48%, #D8642F 100%); box-shadow: 0 0 46px 10px rgba(246, 195, 107, 0.38); color: #2B1608; } /* The Glow brightens in Wine Bar — an open fridge reads best at night */ html[data-theme="dark"] .glow-btn { box-shadow: 0 0 68px 18px rgba(246, 195, 107, 0.55); } html[data-theme="dark"] .glow-stage::before { background: radial-gradient(circle at 50% 45%, rgba(255, 224, 166, 0.46) 0%, rgba(232, 112, 63, 0.2) 42%, transparent 72%); } .glow-btn .time { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1; } .glow-btn .label { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } @media (prefers-reduced-motion: no-preference) { .glow-btn { animation: glow-pulse 3.4s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 46px 10px rgba(246, 195, 107, 0.38); } 50% { box-shadow: 0 0 60px 16px rgba(246, 195, 107, 0.5); } } html[data-theme="dark"] .glow-btn { animation-name: glow-pulse-bright; } @keyframes glow-pulse-bright { 0%, 100% { box-shadow: 0 0 68px 18px rgba(246, 195, 107, 0.55); } 50% { box-shadow: 0 0 84px 24px rgba(246, 195, 107, 0.68); } } } .screen .whisper { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 0.82rem; color: #CFC5BA; margin-bottom: 1.4rem; } .screen .tabbar { display: flex; justify-content: space-around; border-top: 1px solid rgba(243, 237, 228, 0.14); padding-top: 0.7rem; font-size: 0.68rem; color: #9C9186; } .screen .tabbar .active { color: #F6C36B; font-weight: 600; } /* ---------- Foraj quotes ---------- */ .foraj-line { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: var(--fg); } .sprout { color: var(--herb-accent); flex: none; } .chat-moments { display: grid; gap: 1rem; max-width: 38rem; } .chat-moment { display: flex; gap: 0.8rem; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); border-bottom-left-radius: 4px; padding: 1.1rem 1.4rem; } /* ---------- Feature trio ---------- */ .feature-grid { display: grid; gap: 1rem; } @media (min-width: 46rem) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } } .feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem 1.6rem; } .feature .glyph { font-size: 1.7rem; display: block; margin-bottom: 0.7rem; } .feature h3 { font-size: 1.12rem; margin-bottom: 0.45rem; } .feature p { color: var(--fg-soft); font-size: 0.95rem; } .feature .kicker { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; } /* ============================================================ THE NIGHT WINDOW — the pairing section is always Wine Bar, so both moods share one scroll regardless of toggle state. In Morning Kitchen, capable browsers get a bonus scroll-driven crossfade (background eases cream->aubergine->cream); everyone else gets the static gradient band. ============================================================ */ .bar-zone { color: var(--candle); background-image: linear-gradient( var(--bg) 0%, var(--aubergine) 9rem, var(--aubergine) calc(100% - 9rem), var(--bg) 100%); padding: 9rem 0; view-timeline-name: --barzone; } .bar-zone h2 { color: var(--candle); } .bar-zone .lede { color: var(--candle-soft); } .bar-zone .accent { color: var(--paprika-bright); } .bar-zone .sprout { color: var(--wine); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { html[data-theme="light"] .bar-zone { background-image: none; animation: zone-cross linear both; animation-timeline: view(); } @keyframes zone-cross { 0% { background-color: var(--bg); } 16%, 84% { background-color: var(--aubergine); } 100% { background-color: var(--bg); } } /* Header i-dot: olive <-> grape while the night window passes */ html[data-theme="light"] .wordmark .dot-grape { animation: dot-in linear both; animation-timeline: --barzone; } html[data-theme="light"] .wordmark .dot-olive { animation: dot-out linear both; animation-timeline: --barzone; } @keyframes dot-in { 0%, 18% { opacity: 0; } 32%, 68% { opacity: 1; } 82%, 100% { opacity: 0; } } @keyframes dot-out { 0%, 18% { opacity: 1; } 32%, 68% { opacity: 0; } 82%, 100% { opacity: 1; } } } } /* Pairing card */ .pairing { display: grid; gap: 2rem; align-items: start; } @media (min-width: 50rem) { .pairing { grid-template-columns: 1.1fr 1fr; } } .pairing-card { background: rgba(243, 237, 228, 0.07); border: 1px solid rgba(243, 237, 228, 0.18); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.6rem; } .pairing-card .dish { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.2rem; } .pairing-card .meta { font-size: 0.8rem; color: var(--candle-soft); margin-bottom: 1.1rem; } .pairing-card .pour { border-top: 1px solid rgba(243, 237, 228, 0.18); padding-top: 1rem; display: flex; gap: 0.7rem; align-items: baseline; } .pairing-card .pour .wine-name { color: var(--wine); font-weight: 600; } .pairing-card .foraj-line { font-size: 1.02rem; color: var(--candle); margin-top: 1.1rem; } .cocktail-chip { display: inline-block; border: 1px solid var(--wine); color: var(--wine); border-radius: 999px; padding: 0.25rem 0.9rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; } /* ---------- Household / waste rescue ---------- */ .split { display: grid; gap: 2rem; } @media (min-width: 50rem) { .split { grid-template-columns: 1fr 1fr; align-items: center; } } .stat { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 600; color: var(--herb-accent); line-height: 1; } .stat-caption { color: var(--fg-soft); margin-top: 0.4rem; } /* ---------- Buttons ---------- */ .btn { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; padding: 0.75rem 1.7rem; border-radius: 999px; font-weight: 600; } .btn:hover { filter: brightness(0.94); } /* ---------- Prose pages ---------- */ .prose { max-width: 44rem; margin: 0 auto; padding: 3.25rem 1.25rem 4.5rem; } .prose h1 { font-size: 2.1rem; margin-bottom: 0.5rem; } .prose h2 { font-size: 1.35rem; margin: 2.2rem 0 0.6rem; } .prose h3 { font-size: 1.08rem; margin: 1.5rem 0 0.4rem; } .prose p, .prose li { color: var(--fg-soft); } .prose p { margin-bottom: 1rem; } .prose ul, .prose ol { margin: 0 0 1rem 1.4rem; } .prose li { margin-bottom: 0.35rem; } .prose .updated { font-size: 0.9rem; color: var(--fg-soft); margin-bottom: 1.5rem; } .prose strong { color: var(--fg); } .notice { background: var(--zone-a); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 0.95rem 1.15rem; margin: 1.25rem 0 1.75rem; color: var(--fg); font-size: 0.95rem; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.45rem; margin: 1.25rem 0; } .card h3 { margin-top: 0; }