/* ============================================ EMBER COFFEE - Specialty Cafe Portfolio Site ============================================ */ /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Core palette — Terracotta (canonical Ember theme) */ --deep: #B04A2E; --rose: #CE6B48; --coral: #E08A62; --peach: #F1B38E; /* Derived tones */ --darkest: #4A1E12; --dark: #6B2D1E; --cream: #FBF0E1; --warm-white: #F8EBD6; --sand: #EDD9BC; --linen: #F3E4CC; /* Text */ --text-dark: #2B140C; --text-body: #5B2A1A; --text-muted: #9A7A68; --text-light: #FBF0E1; --text-light-muted: rgba(251, 240, 225, 0.7); /* Spacing */ --section-pad: clamp(80px, 10vw, 140px); --content-pad: clamp(20px, 5vw, 80px); --max-width: 1320px; /* Transitions */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- Theme variants (swap via [data-theme] on ) ---- */ html[data-theme="winecream"] { --deep: #A75D5D; --rose: #D3756B; --coral: #F0997D; --peach: #FFC3A1; --darkest: #5C2E2E; --dark: #7A3F3F; --cream: #FFF5EE; --warm-white: #FAEBD7; --sand: #F5E6D3; --linen: #FAF0E6; --text-dark: #2C1810; --text-body: #4A2C20; --text-muted: #8B6F66; } html[data-theme="forest"] { --deep: #3F5C47; --rose: #5F7F69; --coral: #8DAA8F; --peach: #C9D8BF; --darkest: #1E2E22; --dark: #2C4432; --cream: #F6F1E4; --sand: #E9DFC7; --linen: #F4EEDF; --text-dark: #15231A; --text-body: #233227; --text-muted: #6E7F72; } html[data-theme="charcoal"] { --deep: #C95F3E; --rose: #D87957; --coral: #E89672; --peach: #F5B895; --darkest: #151515; --dark: #262525; --cream: #F2EDE4; --sand: #DBD3C4; --linen: #EBE6DC; --text-dark: #0D0D0D; --text-body: #262525; --text-muted: #7A7670; } html[data-theme="terracotta"] { --deep: #B04A2E; --rose: #CE6B48; --coral: #E08A62; --peach: #F1B38E; --darkest: #4A1E12; --dark: #6B2D1E; --cream: #FBF0E1; --sand: #EDD9BC; --linen: #F8EBD6; --text-dark: #2B140C; --text-body: #5B2A1A; --text-muted: #9A7A68; } html[data-theme="midnight"] { --deep: #FFB38A; --rose: #E89A74; --coral: #F0AE85; --peach: #FFD2B0; --darkest: #0E1320; --dark: #1A2034; --cream: #E8EAF2; --sand: #CBCFDC; --linen: #DDE0EB; --text-dark: #050811; --text-body: #1A2034; --text-muted: #6B7081; } /* ---- ColorHunt coffee palettes (10, top-liked from /palettes/coffee) ---- */ html[data-theme="ch-coffeehouse"] { --deep: #6F4E37; --rose: #8B6646; --coral: #A67B5B; --peach: #ECB176; --darkest: #3A2A1F; --dark: #5A3F2C; --cream: #FED8B1; --sand: #ECB176; --linen: #F6C793; --text-dark: #2B1E15; --text-body: #3A2A1F; --text-muted: #8B6646; } html[data-theme="ch-darkroast"] { --deep: #74512D; --rose: #8E6439; --coral: #AF8F6F; --peach: #C9A686; --darkest: #543310; --dark: #6A4320; --cream: #F8F4E1; --sand: #E5DFC4; --linen: #F0ECD5; --text-dark: #2E1B08; --text-body: #543310; --text-muted: #AF8F6F; } html[data-theme="ch-cinnamon"] { --deep: #803D3B; --rose: #99554E; --coral: #AF8260; --peach: #C9A07A; --darkest: #322C2B; --dark: #4A3F3D; --cream: #E4C59E; --sand: #CFAD85; --linen: #D9BA90; --text-dark: #1F1B1A; --text-body: #322C2B; --text-muted: #8B6F5A; } html[data-theme="ch-nougat"] { --deep: #AB886D; --rose: #856A54; --coral: #D6C0B3; --peach: #E0CEC1; --darkest: #493628; --dark: #6A4F3B; --cream: #E4E0E1; --sand: #D6C0B3; --linen: #DED3C7; --text-dark: #2C1F15; --text-body: #493628; --text-muted: #8A7463; } html[data-theme="ch-fig"] { --deep: #85586F; --rose: #9A7086; --coral: #AC7D88; --peach: #C79CA9; --darkest: #643843; --dark: #7A4A56; --cream: #FDF0D1; --sand: #EADAB7; --linen: #F5E6C6; --text-dark: #3F2028; --text-body: #643843; --text-muted: #9A7086; } html[data-theme="ch-walnut"] { --deep: #B17457; --rose: #98604A; --coral: #C88D72; --peach: #D8A88F; --darkest: #4A4947; --dark: #696763; --cream: #FAF7F0; --sand: #D8D2C2; --linen: #EAE4D5; --text-dark: #2A2928; --text-body: #4A4947; --text-muted: #8A887F; } html[data-theme="ch-silk"] { --deep: #8D493A; --rose: #A46052; --coral: #BC7B6D; --peach: #D0B8A8; --darkest: #5A2D23; --dark: #743A2F; --cream: #F8EDE3; --sand: #DFD3C3; --linen: #EDDFCF; --text-dark: #3A1D17; --text-body: #5A2D23; --text-muted: #8D7469; } html[data-theme="ch-indigo"] { --deep: #102C57; --rose: #1F4175; --coral: #DAC0A3; --peach: #E5D1B9; --darkest: #0A1D3D; --dark: #142649; --cream: #FEFAF6; --sand: #EADBC8; --linen: #F3E7D6; --text-dark: #061229; --text-body: #102C57; --text-muted: #6E7C95; } html[data-theme="ch-ochre"] { --deep: #795757; --rose: #8C6969; --coral: #A17F7F; --peach: #BC9C9C; --darkest: #3B3030; --dark: #664343; --cream: #FFF0D1; --sand: #E8D9B6; --linen: #F5E6C2; --text-dark: #221B1B; --text-body: #3B3030; --text-muted: #8C6969; } html[data-theme="ch-wine"] { --deep: #6D2932; --rose: #8A3843; --coral: #A45C66; --peach: #BF828C; --darkest: #561C24; --dark: #6D2932; --cream: #E8D8C4; --sand: #C7B7A3; --linen: #D8C8B4; --text-dark: #2E0E13; --text-body: #561C24; --text-muted: #8A6E62; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: 'Outfit', sans-serif; font-weight: 400; line-height: 1.6; color: var(--text-body); background: var(--cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; border: none; background: none; cursor: pointer; } ul, ol { list-style: none; } /* --- Typography --- */ h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 500; line-height: 1.1; color: var(--text-dark); } h1 { font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.01em; } h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); } p { max-width: 60ch; } .label { font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; } .label--side { position: absolute; left: clamp(6px, 1.5vw, 20px); top: 50%; writing-mode: vertical-lr; transform: rotate(180deg) translateY(50%); color: var(--darkest); opacity: 0.55; z-index: 10; pointer-events: none; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.28em; } .roastlog .label--side, .newsletter .label--side { color: var(--cream); opacity: 0.25; } @media (max-width: 768px) { .label--side { position: static; writing-mode: horizontal-tb; transform: none; opacity: 1; margin-bottom: 0.5rem; padding-left: var(--content-pad); font-size: 0.75rem; font-weight: 600; } } .story, .shop, .roastlog, .menu, .events, .gallery, .about, .testimonials, .wholesale-promo, .newsletter, .contact { position: relative; } /* --- Layout Utility --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--content-pad); } /* --- Scroll Reveal (fail-open: visible by default, JS opts in to hide) --- */ .reveal { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .js-ready .reveal { opacity: 0; transform: translateY(30px); } .js-ready .reveal.visible, .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { .js-ready .reveal, .reveal { opacity: 1; transform: none; transition: none; } } /* --- Skip link --- */ .skip-link { position: absolute; top: -100px; left: 0; z-index: 2100; padding: 0.75rem 1.25rem; background: var(--darkest); color: var(--cream); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0; outline: 2px solid var(--peach); outline-offset: 2px; } /* ============================================ NAVIGATION ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0.55rem 0; transition: background 0.4s var(--ease), padding 0.4s var(--ease), box-shadow 0.4s var(--ease); } .nav.scrolled { background: rgba(44, 24, 16, 0.95); padding: 0.4rem 0; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); } .nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--content-pad); } .nav__logo { display: inline-flex; align-items: center; cursor: pointer; line-height: 0; } .nav__logo img { height: 32px; width: 32px; display: block; object-fit: contain; opacity: 0; transform: translateY(-4px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .nav.scrolled .nav__logo img { opacity: 1; transform: translateY(0); } .nav__links { display: flex; gap: 2.5rem; align-items: center; list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; list-style: none; } .nav__links a { font-size: 0.85rem; font-weight: 500; color: var(--text-light-muted); letter-spacing: 0.04em; transition: color 0.3s var(--ease); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3em; } .nav__links a:hover, .nav__links a:focus-visible { color: var(--peach); outline: none; } .nav__caret { font-size: 0.7em; opacity: 0.7; transform: translateY(1px); transition: transform 0.25s var(--ease); } .nav__item--has-sub:hover > a .nav__caret, .nav__item--has-sub:focus-within > a .nav__caret, .nav__item--has-sub.is-open > a .nav__caret { transform: translateY(1px) rotate(180deg); } .nav__sub { position: absolute; top: calc(100% + 0.25rem); left: -0.75rem; min-width: 180px; background: var(--darkest); border: 1px solid rgba(241, 179, 142, 0.18); padding: 0.4rem 0; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28); z-index: 1005; } .nav__item--has-sub:hover > .nav__sub, .nav__item--has-sub:focus-within > .nav__sub, .nav__item--has-sub.is-open > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); } .nav__sub li { list-style: none; } .nav__sub a { display: block; padding: 0.55rem 1rem; font-size: 0.85rem; color: var(--cream); letter-spacing: 0.03em; white-space: nowrap; } .nav__sub a:hover, .nav__sub a:focus-visible { background: rgba(241, 179, 142, 0.12); color: var(--peach); } .nav__mobile-sub { font-size: 1.2rem; padding-left: 1.25rem !important; color: var(--peach) !important; opacity: 0.88; } .nav__mobile-reserve { display: block; width: calc(100% - 2rem); margin: 0.75rem 1rem; padding: 0.75rem 1.25rem; border: 1px solid rgba(255, 245, 238, 0.55); background: transparent; color: var(--cream); font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; text-align: center; } .nav--solid { background: rgba(44, 24, 16, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 245, 238, 0.08); } .nav--solid .nav__logo img { opacity: 1; transform: none; } .nav__cta { font-size: 0.8rem; font-weight: 600; color: var(--peach) !important; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--peach); padding: 0.5rem 1.25rem; transition: background 0.3s var(--ease), color 0.3s var(--ease); cursor: pointer; } .nav__cta:hover { background: var(--peach); color: var(--darkest) !important; } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; z-index: 1001; } .nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--cream); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__hamburger.active span:nth-child(2) { opacity: 0; } .nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile menu */ .nav__mobile { display: none; position: fixed; top: 0; left: 0; right: 0; background: rgba(44, 24, 16, 0.98); padding: 5rem 2rem 2rem; transform: translateY(-100%); transition: transform 0.4s var(--ease-out); backdrop-filter: blur(10px); } .nav__mobile.open { transform: translateY(0); } .nav__mobile a { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: var(--cream); padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 245, 238, 0.1); transition: color 0.3s var(--ease); cursor: pointer; } .nav__mobile a:hover { color: var(--peach); } @media (max-width: 768px) { .nav__links { display: none; } .nav__hamburger { display: flex; } .nav__mobile { display: block; } } /* ============================================ HERO — brand-mark knockout, dips into photo ============================================ */ .hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; isolation: isolate; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } /* Soft darkening scrim so text stays legible over any photo. Darkens both top (for lockup) and bottom (for meta). */ .hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0) 60%), linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 35%); z-index: 1; pointer-events: none; } /* Brand lockup sits below the tagline in the bottom-left meta stack */ .hero__lockup-img { display: block; width: min(42%, 260px); height: auto; margin: 0 0 1rem -0.4rem; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.35)); } @media (max-width: 768px) { .hero__lockup-img { width: min(60%, 200px); } } /* Meta block: logo + label — saved positions */ .hero__meta { position: absolute; top: 75.55%; left: 0.85%; right: auto; bottom: auto; z-index: 3; padding: 0; } .hero__label { color: var(--peach); margin: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); } .hero__tagline { position: absolute; top: 1.58%; left: 0.81%; right: auto; bottom: auto; z-index: 3; padding: 0; margin: 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4.2vw, 3.8rem); font-style: normal; font-weight: 500; letter-spacing: -0.01em; color: var(--cream); line-height: 1.05; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.4); white-space: nowrap; max-width: none; opacity: 0; transform: translateY(18px); animation: hero-rise 1.1s var(--ease) 0.25s forwards; } .hero__label, .hero__ctas { opacity: 0; transform: translateY(18px); } .hero__label { animation: hero-rise 1.1s var(--ease) 1.15s forwards; } .hero__ctas { animation: hero-rise 1.1s var(--ease) 1.4s forwards; } @keyframes hero-rise { to { opacity: 1; transform: translateY(0); } } .hero__ctas { position: absolute; right: clamp(20px, 5vw, 60px); bottom: clamp(28px, 5vh, 56px); left: auto; top: auto; z-index: 3; display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .hero__cta { display: inline-flex; align-items: center; gap: 0.75rem; font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.85rem 1.6rem; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease); cursor: pointer; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15); } .hero__cta--primary { background: var(--peach); color: var(--darkest); border: 1px solid var(--peach); } .hero__cta--primary:hover { background: var(--cream); gap: 1.1rem; } .hero__cta--ghost { background: transparent; color: var(--cream); border: 1px solid rgba(255, 245, 238, 0.55); } .hero__cta--ghost:hover { background: rgba(255, 245, 238, 0.12); border-color: var(--cream); } .hero__cta svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); } .hero__cta:hover svg { transform: translateX(4px); } @media (max-width: 768px) { .hero__tagline { font-size: clamp(1.55rem, 6.4vw, 2.4rem); white-space: normal; max-width: 16ch; top: clamp(88px, 11vh, 130px); left: var(--content-pad); } .hero__meta { top: auto; bottom: calc(clamp(48px, 6vw, 88px) + 3rem); left: var(--content-pad); } .hero__ctas { top: auto; left: var(--content-pad); right: var(--content-pad); bottom: clamp(28px, 5vh, 56px); transform: none; } } /* ============================================ ROAST CURVE OVERLAY (W4) ============================================ */ .roast-curve { position: absolute; right: clamp(16px, 2.5vw, 28px); bottom: clamp(96px, 12vh, 140px); z-index: 3; margin: 0; min-width: 220px; max-width: 280px; padding: 0.75rem 0.95rem 0.65rem; background: rgba(28, 14, 8, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 195, 161, 0.18); color: var(--cream); font-family: 'Outfit', sans-serif; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25); animation: hero-rise 1.1s var(--ease) 1.8s forwards; opacity: 0; transform: translateY(18px); } .roast-curve__head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--peach); margin-bottom: 0.35rem; } .roast-curve__dot { width: 6px; height: 6px; border-radius: 50%; background: #7FB385; box-shadow: 0 0 6px rgba(127, 179, 133, 0.6); animation: roastPulse 2s ease-in-out infinite; } .roast-curve__svg { width: 100%; height: 60px; display: block; } .roast-curve__meta { display: flex; gap: 0.9rem; margin-top: 0.35rem; font-size: 0.7rem; color: rgba(255, 245, 238, 0.75); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; } .roast-curve__meta em { font-style: normal; color: rgba(255, 245, 238, 0.45); margin-right: 0.25rem; text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.08em; } @media (max-width: 768px) { .roast-curve { display: none; } } @media (prefers-reduced-motion: reduce) { .roast-curve__dot { animation: none; } } /* ============================================ STORY / EDITORIAL TWO-COLUMN ============================================ */ .story { background: var(--sand); padding: var(--section-pad) 0; overflow: hidden; } .story__container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 80px); align-items: center; } .story__text { max-width: 52ch; } .story__label { color: var(--coral); margin-bottom: 1.25rem; } .story__title { margin-bottom: 2rem; } .story__pullquote { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 400; font-style: italic; line-height: 1.3; color: var(--deep); border-left: 3px solid var(--coral); padding: 0.5rem 0 0.5rem 1.5rem; margin: 0 0 2rem; } .story__desc { color: var(--text-muted); line-height: 1.85; font-size: 1.02rem; } /* Right column: image bleeds to viewport edge */ .story__media { position: relative; overflow: hidden; margin-right: calc(-1 * var(--content-pad)); aspect-ratio: 4 / 5; } .story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .story__media:hover img { transform: scale(1.03); } .story__notes { list-style: none; margin-top: clamp(60px, 8vw, 100px); padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid rgba(176, 74, 46, 0.22); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 60px); } .story__note { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; } .story__note-icon { display: block; width: 96px; height: 96px; flex-shrink: 0; margin-top: -8px; background-color: var(--deep); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; transition: transform 0.35s var(--ease), background-color 0.3s var(--ease); } .story__note-icon--roaster { -webkit-mask-image: url('img/story-icons/01-clean.png'); mask-image: url('img/story-icons/01-clean.png'); } .story__note-icon--trade { -webkit-mask-image: url('img/story-icons/02-clean.png'); mask-image: url('img/story-icons/02-clean.png'); } .story__note-icon--brew { -webkit-mask-image: url('img/story-icons/03-clean.png'); mask-image: url('img/story-icons/03-clean.png'); } .story__note:hover .story__note-icon { transform: translateY(-3px); } .story__note h4 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.35rem; letter-spacing: 0.01em; } .story__note p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.65; } @media (max-width: 900px) { .story__container { grid-template-columns: 1fr; } .story__media { margin-right: calc(-1 * var(--content-pad)); margin-left: calc(-1 * var(--content-pad)); aspect-ratio: 16 / 10; } .story__notes { grid-template-columns: 1fr; gap: 1.75rem; } } /* ============================================ MENU ============================================ */ .menu { background: var(--linen); padding: var(--section-pad) 0; } .menu__header { text-align: center; margin-bottom: clamp(50px, 6vw, 80px); } .menu__label { color: var(--coral); margin-bottom: 1rem; } .menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 60px); } .menu__category h3 { color: var(--deep); font-size: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--coral); } .menu__item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid rgba(167, 93, 93, 0.15); } .menu__item-name { font-weight: 500; color: var(--text-dark); } .menu__item-price { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--coral); flex-shrink: 0; margin-left: 1rem; } .menu__item-dots { flex: 1; border-bottom: 1px dotted rgba(167, 93, 93, 0.3); margin: 0 0.75rem; min-width: 20px; align-self: center; margin-bottom: 4px; } @media (max-width: 1024px) { .menu__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .menu__grid { grid-template-columns: 1fr; } } /* ============================================ GALLERY ============================================ */ .gallery { background: var(--warm-white); padding: var(--section-pad) 0; } .gallery__header { text-align: center; margin-bottom: clamp(50px, 6vw, 80px); } .gallery__label { color: var(--coral); margin-bottom: 1rem; } .gallery__header h2 { color: var(--deep); } .gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; gap: 4px; } .gallery__item { overflow: hidden; position: relative; cursor: pointer; } .gallery__item--tall { grid-row: span 2; } .gallery__item--wide { grid-column: span 2; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .gallery__item:hover img { transform: scale(1.06); } @media (max-width: 768px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .gallery__item--wide { grid-column: span 1; } } @media (max-width: 480px) { .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } .gallery__item--tall { grid-row: span 1; } } /* ============================================ ABOUT ============================================ */ .about { background: var(--cream); padding: var(--section-pad) 0; } .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } .about__image { overflow: hidden; } .about__image img { width: 100%; height: 500px; object-fit: cover; transition: transform 0.6s var(--ease); } .about__image:hover img { transform: scale(1.03); } .about__label { color: var(--coral); margin-bottom: 1rem; } .about__title { margin-bottom: 1.5rem; } .about__text { color: var(--text-muted); line-height: 1.8; margin-bottom: 1.5rem; } .about__signature { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-style: italic; color: var(--deep); } @media (max-width: 768px) { .about__grid { grid-template-columns: 1fr; } .about__image img { height: 350px; } } /* ============================================ CONTACT ============================================ */ .contact { background: var(--sand); padding: var(--section-pad) 0; } .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; } .contact__label { color: var(--coral); margin-bottom: 1rem; } .contact__title { margin-bottom: 2.5rem; } .contact__group { margin-bottom: 2rem; } .contact__group h4 { font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--deep); margin-bottom: 0.75rem; } .contact__group p, .contact__group a { color: var(--text-muted); line-height: 1.8; } .contact__group a { transition: color 0.3s var(--ease); cursor: pointer; } .contact__group a:hover { color: var(--coral); } .contact__map { background: var(--linen); height: 100%; min-height: 350px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .contact__map-placeholder { text-align: center; color: var(--text-muted); } .contact__map-placeholder svg { width: 48px; height: 48px; color: var(--rose); margin-bottom: 1rem; } .contact__map-placeholder p { font-size: 0.9rem; margin: 0 auto; } @media (max-width: 768px) { .contact__grid { grid-template-columns: 1fr; } .contact__map { min-height: 250px; } } /* ============================================ FOOTER ============================================ */ .footer { background: #2C1810; padding: 3rem 0 2rem; } .footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } .footer__logo { display: inline-flex; align-items: center; line-height: 0; } .footer__logo img { height: 64px; width: auto; display: block; } .footer__links { display: flex; gap: 2rem; } .footer__links a { font-size: 0.8rem; color: var(--text-light-muted); transition: color 0.3s var(--ease); cursor: pointer; } .footer__links a:hover { color: var(--peach); } .footer__social { display: flex; gap: 1rem; } .footer__social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-light-muted); border: 1px solid rgba(255, 245, 238, 0.2); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); cursor: pointer; } .footer__social a:hover { color: var(--peach); border-color: var(--peach); } .footer__social svg { width: 16px; height: 16px; } .footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 245, 238, 0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .footer__copyright { font-size: 0.75rem; color: var(--text-light-muted); } .footer__legal { display: flex; gap: 1.5rem; } .footer__legal a, .footer__legal-link { font-family: inherit; font-size: 0.75rem; color: var(--text-light-muted); transition: color 0.3s var(--ease); cursor: pointer; background: none; border: none; padding: 0; text-align: left; } .footer__legal a:hover, .footer__legal-link:hover { color: var(--peach); } @media (max-width: 640px) { .footer__inner { flex-direction: column; align-items: flex-start; } .footer__bottom { flex-direction: column; } } /* ============================================ UTILITY ============================================ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================ NAV STATUS (Open / Closed) ============================================ */ .nav__status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--text-light-muted); padding-left: 1rem; border-left: 1px solid rgba(255, 245, 238, 0.15); transition: color 0.3s var(--ease); } .nav__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .nav__status--open .nav__status-dot { background: #7FB385; box-shadow: 0 0 8px rgba(127, 179, 133, 0.6); } .nav__status--closed .nav__status-dot { background: var(--coral); } /* Active nav link (scrollspy) */ .nav__links a.active { color: var(--peach); } .nav__links a.active::after { content: ''; display: block; height: 1px; background: var(--peach); margin-top: 4px; animation: navUnderline 0.3s var(--ease-out); } @keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================================ SHOP ============================================ */ .shop { background: var(--cream); padding: var(--section-pad) 0; } .shop__header { text-align: center; margin-bottom: clamp(50px, 6vw, 80px); } .shop__label { color: var(--coral); margin-bottom: 1rem; } .shop__intro { max-width: 50ch; margin: 1.25rem auto 0; color: var(--text-muted); line-height: 1.7; } .shop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 40px); margin-bottom: clamp(60px, 8vw, 100px); } .shop__product { background: var(--linen); display: flex; flex-direction: column; cursor: pointer; transition: transform 0.3s var(--ease); } .shop__product:hover { transform: translateY(-4px); } .shop__product-image { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); } .shop__product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .shop__product:hover .shop__product-image img { transform: scale(1.05); } .shop__product-badge { position: absolute; top: 12px; left: 12px; background: var(--coral); color: var(--darkest); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; } .shop__product-badge--signature { background: var(--deep); color: var(--cream); } .shop__product-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; } .shop__product-origin { color: var(--text-muted); margin-bottom: 0.5rem; font-size: 0.7rem; } .shop__product-body h3 { font-size: 1.35rem; color: var(--text-dark); margin-bottom: 0.5rem; } .shop__product-notes { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; font-style: italic; line-height: 1.5; } .shop__product-footer { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.75rem; border-top: 1px solid rgba(167, 93, 93, 0.15); margin-top: auto; } .shop__product-price { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: var(--deep); } .shop__product-size { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.05em; } .shop__product-add { width: 100%; margin-top: 1rem; padding: 0.7rem; background: var(--deep); color: var(--cream); border: none; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em; cursor: pointer; transition: background 0.2s var(--ease); } .shop__product-add:hover { background: var(--dark); } .shop__product-add:active { transform: scale(0.97); } .shop__subscription { background: var(--deep); color: var(--cream); padding: clamp(32px, 4vw, 56px) clamp(32px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .shop__subscription-text { flex: 1 1 400px; } .shop__subscription-text h3 { color: var(--cream); font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 0.5rem; } .shop__subscription-text p { color: var(--text-light-muted); max-width: 50ch; } .shop__subscription-btn { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--darkest); background: var(--peach); padding: 0.9rem 2rem; transition: background 0.3s var(--ease), gap 0.3s var(--ease); cursor: pointer; flex-shrink: 0; } .shop__subscription-btn:hover { background: var(--cream); gap: 1.25rem; } .shop__subscription-btn svg { width: 18px; height: 18px; } @media (max-width: 1024px) { .shop__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .shop__grid { grid-template-columns: 1fr; } } /* ============================================ EVENTS ============================================ */ .events { background: var(--sand); padding: var(--section-pad) 0; } .events__header { text-align: center; margin-bottom: clamp(50px, 6vw, 80px); } .events__label { color: var(--coral); margin-bottom: 1rem; } .events__list { display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; list-style: none; padding: 0; } .events__item { display: grid; grid-template-columns: 180px 90px 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid rgba(167, 93, 93, 0.2); align-items: start; } .events__thumb { overflow: hidden; aspect-ratio: 1 / 1; } .events__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .events__item:hover .events__thumb img { transform: scale(1.05); } .events__item:first-child { padding-top: 0; } .events__item:last-child { border-bottom: none; } .events__date { display: flex; flex-direction: column; align-items: center; padding: 0.75rem 0.5rem; background: var(--deep); color: var(--cream); } .events__date-day { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 500; line-height: 1; } .events__date-month { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; color: var(--peach); } .events__tag { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin-bottom: 0.5rem; } .events__details h3 { font-size: 1.5rem; color: var(--text-dark); margin-bottom: 0.5rem; } .events__meta { font-size: 0.85rem; color: var(--deep); margin-bottom: 0.75rem; font-weight: 500; } .events__desc { color: var(--text-muted); line-height: 1.7; } .events__footer { text-align: center; margin-top: clamp(40px, 5vw, 60px); } .events__book { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); border: 2px solid var(--deep); padding: 0.85rem 2rem; transition: background 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease); cursor: pointer; } .events__book:hover { background: var(--deep); color: var(--cream); gap: 1.25rem; } .events__book svg { width: 18px; height: 18px; } @media (max-width: 900px) { .events__item { grid-template-columns: 140px 80px 1fr; gap: 20px; } } @media (max-width: 640px) { .events__item { grid-template-columns: 110px 1fr; gap: 1rem; } .events__thumb { grid-row: 1 / 3; } .events__date { align-self: start; } .events__date-day { font-size: 1.8rem; } } /* ============================================ ABOUT - TEAM ============================================ */ .about__team { position: relative; margin-top: clamp(60px, 8vw, 100px); padding-top: clamp(50px, 6vw, 80px); border-top: 1px solid rgba(167, 93, 93, 0.2); } .about__team-label { color: var(--coral); } .about__team-prose { max-width: 66ch; margin: 0 auto; font-family: 'Cormorant Garamond', serif; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.65; color: var(--text-body); text-align: center; font-weight: 400; } .about__team-prose strong { color: var(--deep); font-weight: 600; } .about__team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); } .about__team-member { padding: 1.5rem; border-left: 2px solid var(--coral); transition: border-color 0.3s var(--ease); } .about__team-member:hover { border-left-color: var(--deep); } .about__team-member h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.25rem; } .about__team-role { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); margin-bottom: 0.75rem; } .about__team-bio { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } @media (max-width: 900px) { .about__team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .about__team-grid { grid-template-columns: 1fr; } } /* ============================================ TESTIMONIALS - PRESS PULL + POSTCARD WALL (W3) ============================================ */ .testimonials { background: var(--linen); padding: var(--section-pad) 0; } .testimonials__header { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); } .testimonials__label { color: var(--coral); margin-bottom: 1rem; } .testimonials__press { max-width: 900px; margin: 0 auto clamp(48px, 6vw, 72px); padding: clamp(24px, 4vw, 56px) clamp(24px, 5vw, 72px); text-align: center; border-top: 1px solid rgba(167, 93, 93, 0.25); border-bottom: 1px solid rgba(167, 93, 93, 0.25); } .testimonials__press blockquote { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 400; font-style: italic; line-height: 1.35; color: var(--deep); margin: 0 auto 1.25rem; max-width: 32ch; } .testimonials__press figcaption { display: inline-flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; justify-content: center; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .testimonials__press cite { font-style: normal; font-weight: 700; color: var(--text-dark); letter-spacing: 0.14em; } .testimonials__intro { max-width: 52ch; margin: 0 auto clamp(28px, 3vw, 44px); text-align: center; color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; } .testimonials__wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); max-width: 1200px; margin: 0 auto; padding: 0 0.5rem; } .review-card { background: var(--cream); border: 1px solid rgba(75, 54, 33, 0.1); padding: 1.4rem 1.3rem 1.2rem; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: 0 6px 18px rgba(75, 54, 33, 0.06); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .review-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(75, 54, 33, 0.12); } .review-card__head { display: flex; align-items: center; gap: 0.7rem; } .review-card__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--deep); color: var(--cream); display: grid; place-items: center; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; flex: 0 0 auto; } .review-card[data-avatar-color="1"] .review-card__avatar { background: var(--deep); } .review-card[data-avatar-color="2"] .review-card__avatar { background: var(--rose); } .review-card[data-avatar-color="3"] .review-card__avatar { background: var(--coral); color: var(--text-dark); } .review-card[data-avatar-color="4"] .review-card__avatar { background: var(--dark); } .review-card__who { display: flex; flex-direction: column; min-width: 0; } .review-card__name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--text-dark); line-height: 1.2; } .review-card__meta { font-family: 'Outfit', sans-serif; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.01em; } .review-card__stars { color: var(--coral); font-size: 1rem; letter-spacing: 0.12em; line-height: 1; } .review-card__quote { font-family: 'Outfit', sans-serif; font-size: 0.92rem; line-height: 1.55; color: var(--text-body); margin: 0; flex: 1; } .review-card__source { font-family: 'Outfit', sans-serif; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 0.6rem; border-top: 1px solid rgba(75, 54, 33, 0.08); } @media (max-width: 960px) { .testimonials__wall { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .testimonials__wall { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .review-card, .review-card:hover { transition: none; transform: none; } } /* ============================================ WHOLESALE PROMO SECTION (S6) ============================================ */ .wholesale-promo { background: var(--sand); padding: var(--section-pad) 0; border-top: 1px solid rgba(167, 93, 93, 0.15); border-bottom: 1px solid rgba(167, 93, 93, 0.15); } .wholesale-promo__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .wholesale-promo__label { color: var(--coral); margin-bottom: 1rem; } .wholesale-promo__title { margin-bottom: 1.25rem; } .wholesale-promo__desc { color: var(--text-muted); line-height: 1.75; margin-bottom: 1.5rem; max-width: 52ch; } .wholesale-promo__list { list-style: none; padding: 0; margin: 0 0 1.5rem; } .wholesale-promo__list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; color: var(--text-body); font-size: 0.95rem; } .wholesale-promo__list li::before { content: ""; position: absolute; left: 0; top: 0.7rem; width: 10px; height: 1px; background: var(--coral); } .wholesale-promo__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .wholesale-promo__btn { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); background: var(--deep); border: 1px solid var(--deep); padding: 0.95rem 2rem; transition: background 0.3s var(--ease), gap 0.3s var(--ease); cursor: pointer; } .wholesale-promo__btn:hover { background: var(--darkest); gap: 1.1rem; } .wholesale-promo__btn svg { width: 18px; height: 18px; } .wholesale-promo__hint { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.04em; } .wholesale-promo__hint a { color: var(--deep); border-bottom: 1px solid currentColor; } @media (max-width: 768px) { .wholesale-promo__inner { grid-template-columns: 1fr; } } /* ============================================ ON THE BAR NOW - floating card (W1) ============================================ */ .bar-status { position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: 940; width: 280px; padding: 0.7rem 0.95rem 0.75rem; background: rgba(28, 14, 8, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--cream); border: 1px solid rgba(255, 195, 161, 0.18); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 14px 32px rgba(0, 0, 0, 0.22); font-family: 'Outfit', sans-serif; font-size: 0.78rem; letter-spacing: 0.02em; line-height: 1.35; display: flex; flex-direction: column; gap: 0.22rem; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .bar-status[data-state="visible"] { opacity: 1; transform: translateY(0); pointer-events: auto; } .bar-status__label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--peach); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.62rem; margin-bottom: 0.15rem; } .bar-status__pulse { width: 6px; height: 6px; border-radius: 50%; background: #7FB385; box-shadow: 0 0 6px rgba(127, 179, 133, 0.7); animation: roastPulse 2s ease-in-out infinite; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .bar-status__pulse { animation: none; } .bar-status { transition: opacity 0.2s linear; } } .bar-status__item { color: rgba(255, 245, 238, 0.88); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 0; } .bar-status__item em { font-style: normal; color: rgba(255, 195, 161, 0.65); text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.12em; width: 56px; flex-shrink: 0; text-align: right; margin-right: 0.5rem; } .bar-status__item > span { flex: 1; } @media (max-width: 640px) { .bar-status { right: 0; bottom: 0; left: 0; width: auto; min-width: 0; max-width: none; font-size: 0.65rem; padding: 0.4rem 2rem 0.4rem 0.65rem; border-left: none; border-right: none; border-bottom: none; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2); flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0; overflow: hidden; white-space: nowrap; } .bar-status__label { font-size: 0.55rem; margin-bottom: 0; margin-right: 0.6rem; flex-shrink: 0; } .bar-status__items { display: flex; align-items: center; gap: 0; overflow: hidden; flex: 1; min-width: 0; } .bar-status__items-inner { display: flex; align-items: center; gap: 0; white-space: nowrap; animation: bar-scroll 12s linear infinite; } @keyframes bar-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .bar-status__item { font-size: 0.65rem; flex-shrink: 0; white-space: nowrap; } .bar-status__item + .bar-status__item::before { content: '\00b7'; margin: 0 0.4rem; color: rgba(255, 195, 161, 0.4); } .bar-status__item em { width: auto; font-size: 0.55rem; margin-right: 0.25rem; } } .bar-status__close { display: none; } @media (max-width: 640px) { .bar-status__close { display: block; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: none; background: none; color: rgba(255, 245, 238, 0.45); font-size: 14px; line-height: 1; cursor: pointer; transition: color 0.2s var(--ease); } .bar-status__close:hover { color: var(--cream); } .bar-status.scroll-hidden { transform: translateY(calc(100% + 24px)); pointer-events: none; } .order-btn.scroll-hidden { transform: translateY(calc(100% + 24px)); pointer-events: none; } .order-btn { transition: background 0.25s var(--ease), border-color 0.25s var(--ease), bottom 0.35s var(--ease), transform 0.35s var(--ease); } .bar-status { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } } main { display: block; } /* ============================================ NEWSLETTER ============================================ */ .newsletter { background: var(--dark); padding: clamp(60px, 8vw, 100px) 0; } .newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; } .newsletter__label { color: var(--peach); margin-bottom: 1rem; } .newsletter__text h2 { color: var(--cream); margin-bottom: 1rem; } .newsletter__text p { color: var(--text-light-muted); max-width: 45ch; } .newsletter__form { display: flex; gap: 0; position: relative; flex-wrap: wrap; } .newsletter__form input { flex: 1 1 240px; padding: 1rem 1.25rem; background: transparent; border: 1px solid rgba(255, 245, 238, 0.3); color: var(--cream); font-family: inherit; font-size: 0.95rem; transition: border-color 0.3s var(--ease); } .newsletter__form input::placeholder { color: var(--text-light-muted); } .newsletter__form input:focus { outline: none; border-color: var(--peach); } .newsletter__form button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; background: var(--peach); color: var(--darkest); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--peach); transition: background 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease); cursor: pointer; } .newsletter__form button:hover { background: var(--cream); gap: 0.9rem; } .newsletter__form button svg { width: 16px; height: 16px; } .newsletter__success { flex-basis: 100%; margin-top: 1rem; color: var(--peach); font-size: 0.9rem; opacity: 0; transform: translateY(-5px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; } .newsletter__success.show { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .newsletter__inner { grid-template-columns: 1fr; } } /* ============================================ CONTACT MAP (iframe version) ============================================ */ .contact__map { position: relative; height: 100%; min-height: 400px; overflow: hidden; background: var(--linen); } .contact__map iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; filter: grayscale(30%) sepia(10%); } .contact__map-link { position: absolute; bottom: 12px; right: 12px; background: var(--deep); color: var(--cream); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; padding: 0.5rem 0.9rem; transition: background 0.3s var(--ease); cursor: pointer; } .contact__map-link:hover { background: var(--darkest); } /* ============================================ FIXED ORDER BUTTON ============================================ */ .order-btn { position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: 950; width: 280px; padding: 0.7rem 0.95rem 0.75rem; border: 1px solid rgba(255, 195, 161, 0.18); border-radius: 0; background: rgba(28, 14, 8, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--cream); font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 14px 32px rgba(0, 0, 0, 0.22); transition: background 0.25s var(--ease), border-color 0.25s var(--ease), bottom 0.35s var(--ease); } .order-btn:hover { background: rgba(28, 14, 8, 0.92); border-color: rgba(255, 195, 161, 0.35); } .order-btn.glow { border-color: rgba(255, 195, 161, 0.45); box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 14px 32px rgba(0,0,0,0.22), 0 0 18px 4px rgba(255, 195, 161, 0.25); } .order-btn.glow--dark { box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 14px 32px rgba(0,0,0,0.22), 0 0 22px 6px rgba(28, 14, 8, 0.6); border-color: rgba(28, 14, 8, 0.5); } .cart-btn.glow { filter: drop-shadow(0 0 6px rgba(255, 195, 161, 0.6)); color: var(--peach); } .bar-status[data-state="visible"] ~ .order-btn, .order-btn.above-bar-status { bottom: calc(clamp(16px, 2.5vw, 28px) + 116px); } @media (max-width: 640px) { .order-btn { width: auto; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.75rem; font-size: 0.7rem; border-left: none; border-right: none; border-bottom: none; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2); } .order-btn.above-bar-status, .bar-status[data-state="visible"] ~ .order-btn { bottom: 28px; } } .order-choose { display: flex; gap: 1rem; margin-top: 1.5rem; } .order-choose__btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 1.5rem; border: 1px solid rgba(167, 93, 93, 0.2); border-radius: 4px; background: transparent; color: var(--text-dark); font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: border-color 0.25s, background 0.25s; } .order-choose__btn:hover { border-color: var(--deep); background: rgba(167, 93, 93, 0.06); } .order-choose__btn svg { color: var(--deep); } /* ============================================ MENU ADD BUTTONS ============================================ */ .menu__intro { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.5rem; } .menu__intro strong { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--deep); color: var(--cream); font-size: 0.75em; line-height: 1; } .menu__item { position: relative; } .menu__item-add { position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--coral); background: transparent; color: var(--coral); font-size: 0.9rem; font-weight: 700; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.15s; } .menu__category:hover .menu__item-add, .menu__item:hover .menu__item-add { opacity: 1; } .menu__item-add:hover { background: var(--deep); border-color: var(--deep); color: var(--cream); transform: translateY(-50%) scale(1.15); } .menu__item-add.added { opacity: 1; background: var(--deep); border-color: var(--deep); color: var(--cream); animation: menu-pop 0.3s var(--ease); } @keyframes menu-pop { 0% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.4); } 100% { transform: translateY(-50%) scale(1); } } /* ============================================ CART BADGE ============================================ */ .cart-btn { position: relative; background: none; border: none; color: var(--cream); cursor: pointer; padding: 4px; transition: color 0.2s; display: inline-flex; align-items: center; align-self: center; margin-left: 0.75rem; margin-top: 2px; flex-shrink: 0; } .cart-btn:hover { color: var(--peach); } .cart-btn__count { position: absolute; top: -4px; right: -6px; background: var(--deep); color: var(--cream); font-family: 'Outfit', sans-serif; font-size: 0.65rem; font-weight: 700; min-width: 18px; height: 18px; display: grid; place-items: center; line-height: 1; } /* ============================================ PRODUCT DETAIL MODAL (PDP) ============================================ */ .pdp { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .pdp.open { opacity: 1; visibility: visible; } .pdp__backdrop { position: absolute; inset: 0; background: rgba(44, 24, 16, 0.7); backdrop-filter: blur(4px); } .pdp__card { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 820px; width: 92vw; max-height: 90vh; overflow-y: auto; background: var(--cream); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); z-index: 1; } .pdp__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--text-muted); transition: color 0.2s; } .pdp__close:hover { color: var(--text-dark); } .pdp__image { overflow: hidden; } .pdp__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp__body { padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .pdp__origin { color: var(--deep); font-size: 0.78rem; } .pdp__name { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; color: var(--text-dark); line-height: 1.15; } .pdp__notes { font-size: 0.92rem; color: var(--text-muted); font-style: italic; } .pdp__detail { display: flex; gap: 2rem; margin: 0.5rem 0; } .pdp__detail > div { display: flex; flex-direction: column; } .pdp__detail dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .pdp__detail dd { font-weight: 600; color: var(--text-dark); font-size: 0.95rem; } .pdp__price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.5rem; } .pdp__price { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 700; color: var(--text-dark); } .pdp__size { font-size: 0.85rem; color: var(--text-muted); } .pdp__qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(75, 54, 33, 0.18); width: fit-content; } .pdp__qty-btn { background: none; border: none; width: 36px; height: 36px; font-size: 1.1rem; cursor: pointer; color: var(--text-dark); transition: background 0.15s; } .pdp__qty-btn:hover { background: var(--sand); } .pdp__qty-val { min-width: 36px; text-align: center; font-weight: 600; font-size: 0.95rem; border-left: 1px solid rgba(75, 54, 33, 0.18); border-right: 1px solid rgba(75, 54, 33, 0.18); line-height: 36px; } .pdp__add { width: 100%; padding: 0.9rem; background: var(--deep); color: var(--cream); border: none; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s; margin-top: 0.25rem; } .pdp__add:hover { background: var(--dark); } .pdp__passport { font-size: 0.82rem; color: var(--deep); text-align: center; margin-top: 0.25rem; } .pdp__passport[hidden] { display: none; } @media (max-width: 700px) { .pdp__card { grid-template-columns: 1fr; } .pdp__image { max-height: 260px; } .pdp__body { padding: 1.5rem 1.25rem; } } /* ============================================ CART DRAWER ============================================ */ .cart-drawer { position: fixed; inset: 0; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .cart-drawer.open { opacity: 1; visibility: visible; } .cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(44, 24, 16, 0.5); } .cart-drawer__panel { position: absolute; top: 0; right: 0; width: min(420px, 90vw); height: 100%; background: var(--cream); box-shadow: -8px 0 40px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s var(--ease-out); } .cart-drawer.open .cart-drawer__panel { transform: translateX(0); } .cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid rgba(75, 54, 33, 0.1); } .cart-drawer__head h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--text-dark); } .cart-drawer__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); } .cart-drawer__items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; } .cart-drawer__item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(75, 54, 33, 0.08); font-size: 0.9rem; } .cart-drawer__item-name { font-weight: 600; color: var(--text-dark); } .cart-drawer__item-meta { font-size: 0.8rem; color: var(--text-muted); } .cart-drawer__item-price { font-weight: 600; color: var(--text-dark); white-space: nowrap; } .cart-drawer__item-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; margin-left: 0.75rem; } .cart-drawer__item-remove:hover { color: var(--deep); } .cart-drawer__empty { text-align: center; color: var(--text-muted); padding: 3rem 0; font-style: italic; } .cart-drawer__foot { padding: 1.25rem 1.5rem; border-top: 1px solid rgba(75, 54, 33, 0.12); } .cart-drawer__total { display: flex; justify-content: space-between; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--text-dark); margin-bottom: 1rem; } .cart-drawer__checkout { display: block; text-align: center; padding: 0.9rem; background: var(--deep); color: var(--cream); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: background 0.2s; } .cart-drawer__checkout:hover { background: var(--dark); } /* ============================================ TOAST ============================================ */ .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--darkest); color: var(--cream); font-family: 'Outfit', sans-serif; font-size: 0.9rem; padding: 0.75rem 1.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); z-index: 3000; opacity: 0; transition: transform 0.35s var(--ease-out), opacity 0.35s; pointer-events: none; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* ============================================ LEGAL MODAL ============================================ */ .modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(44, 24, 16, 0.9); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 2rem; } .modal.open { display: flex; } .modal__content { background: var(--cream); max-width: 640px; width: 100%; max-height: 82vh; overflow-y: auto; padding: clamp(32px, 5vw, 56px); position: relative; } .modal__close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color 0.3s var(--ease), background 0.3s var(--ease); cursor: pointer; } .modal__close:hover { color: var(--text-dark); background: var(--linen); } .modal__close svg { width: 20px; height: 20px; } .modal__pane { display: none; } .modal__pane.active { display: block; } .modal__pane h2 { margin-bottom: 1.5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); } .modal__pane p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.75; } .modal__pane p strong { color: var(--text-dark); } /* ============================================ COOKIE BANNER ============================================ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500; background: var(--darkest); color: var(--cream); transform: translateY(100%); transition: transform 0.5s var(--ease-out); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3); } .cookie-banner.show { transform: translateY(0); } .cookie-banner__inner { max-width: var(--max-width); margin: 0 auto; padding: 1.25rem var(--content-pad); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cookie-banner__text { flex: 1 1 400px; } .cookie-banner__text p { font-size: 0.85rem; line-height: 1.6; color: var(--text-light-muted); max-width: none; } .cookie-banner__text p strong { color: var(--cream); } .cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; } .cookie-banner__btn { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.7rem 1.4rem; background: var(--peach); color: var(--darkest); border: 1px solid var(--peach); transition: background 0.3s var(--ease), color 0.3s var(--ease); cursor: pointer; } .cookie-banner__btn:hover { background: var(--cream); } .cookie-banner__btn--ghost { background: transparent; color: var(--text-light-muted); border-color: rgba(255, 245, 238, 0.25); } .cookie-banner__btn--ghost:hover { background: rgba(255, 245, 238, 0.08); color: var(--cream); } @media (max-width: 640px) { .cookie-banner__inner { flex-direction: column; align-items: stretch; } .cookie-banner__actions { justify-content: flex-end; } } /* Hide nav status on small screens */ @media (max-width: 1024px) { .nav__status { display: none; } } /* Mobile open/closed status inside the drawer (S2) */ .nav__mobile-status { display: none; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 245, 238, 0.1); font-size: 0.8rem; color: var(--text-light-muted); font-family: 'Outfit', sans-serif; letter-spacing: 0.04em; } @media (max-width: 768px) { .nav__mobile-status { display: inline-flex; } } .nav__mobile-status .nav__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); } .nav__mobile-status.nav__status--open .nav__status-dot { background: #7FB385; box-shadow: 0 0 8px rgba(127, 179, 133, 0.6); } .nav__mobile-status.nav__status--closed .nav__status-dot { background: var(--coral); } /* ============================================ SHOP — FILTER CHIPS ============================================ */ .shop__filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(32px, 4vw, 56px); } .shop__chip { font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; color: var(--deep); background: transparent; border: 1px solid rgba(167, 93, 93, 0.4); padding: 0.55rem 1.1rem; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .shop__chip:hover { background: rgba(167, 93, 93, 0.08); } .shop__chip.active { background: var(--deep); color: var(--cream); border-color: var(--deep); } /* ============================================ SHOP — ROAST DATE STAMP ============================================ */ .shop__product-image { position: relative; } .shop__product-roast { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(44, 24, 16, 0.82); backdrop-filter: blur(6px); color: var(--cream); font-family: ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace; font-size: 0.68rem; letter-spacing: 0.04em; padding: 5px 9px; text-transform: uppercase; } .shop__product-roast-dot { width: 6px; height: 6px; border-radius: 50%; background: #7FB385; box-shadow: 0 0 6px rgba(127, 179, 133, 0.6); flex-shrink: 0; } /* ============================================ SHOP — DETAIL DL ============================================ */ .shop__product-detail { display: grid; grid-template-columns: 1fr; gap: 0.35rem; margin: 0.9rem 0 1rem; padding: 0.9rem 0; border-top: 1px solid rgba(167, 93, 93, 0.15); border-bottom: 1px solid rgba(167, 93, 93, 0.15); } .shop__product-detail > div { display: grid; grid-template-columns: 80px 1fr; gap: 0.75rem; align-items: baseline; } .shop__product-detail dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0; } .shop__product-detail dd { font-size: 0.85rem; color: var(--text-dark); margin: 0; } /* Fade + dim non-matching cards when a chip is active */ .shop__product { transition: transform 0.3s var(--ease), opacity 0.4s var(--ease), filter 0.4s var(--ease); } .shop__product.is-dimmed { opacity: 0.3; filter: grayscale(0.4); pointer-events: none; } /* ============================================ ROASTERY LOG ============================================ */ .roastlog { background: var(--darkest); padding: var(--section-pad) 0; color: var(--cream); } .roastlog__header { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); } .roastlog__label { color: var(--peach); margin-bottom: 1rem; } .roastlog__header h2 { color: var(--cream); margin-bottom: 1rem; } .roastlog__intro { color: var(--text-light-muted); max-width: 56ch; margin: 0 auto; line-height: 1.7; } .roastlog__terminal { max-width: 1000px; margin: 0 auto; background: #1F0E08; border: 1px solid rgba(255, 195, 161, 0.12); font-family: ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace; font-size: 0.85rem; line-height: 1.6; color: var(--text-light-muted); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } .roastlog__terminal-head { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.5rem; border-bottom: 1px solid rgba(255, 195, 161, 0.12); background: rgba(255, 245, 238, 0.03); } .roastlog__live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--peach); font-weight: 600; } .roastlog__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7FB385; box-shadow: 0 0 8px rgba(127, 179, 133, 0.7); animation: roastPulse 2s ease-in-out infinite; } @keyframes roastPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { .roastlog__live-dot { animation: none; } } .roastlog__synced { font-size: 0.72rem; color: var(--text-light-muted); letter-spacing: 0.05em; } .roastlog__feed { margin: 0; padding: 1.25rem 1.5rem; list-style: none; max-height: 420px; overflow-y: auto; } .roastlog__feed::-webkit-scrollbar { width: 6px; } .roastlog__feed::-webkit-scrollbar-track { background: transparent; } .roastlog__feed::-webkit-scrollbar-thumb { background: rgba(255, 195, 161, 0.2); } .roastlog__entry { padding: 0.5rem 0; border-bottom: 1px dashed rgba(255, 195, 161, 0.08); display: grid; grid-template-columns: 150px minmax(180px, auto) 1fr; gap: 1rem; align-items: baseline; } .roastlog__entry:last-child { border-bottom: none; } .roastlog__entry-ts { color: var(--peach); font-size: 0.78rem; white-space: nowrap; } .roastlog__entry-bean { color: var(--cream); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .roastlog__entry-body { color: var(--text-light-muted); font-size: 0.82rem; } .roastlog__entry-body .sep { color: rgba(255, 195, 161, 0.3); margin: 0 0.35rem; } .roastlog__entry-body .note { color: var(--cream); font-style: italic; } .roastlog__prompt { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 1.5rem 1rem; font-family: inherit; font-size: 0.82rem; } .roastlog__prompt-mark { color: var(--peach); font-weight: 600; } .roastlog__prompt-cursor { display: inline-block; width: 0.55rem; height: 1rem; background: var(--peach); animation: roastlog-blink 1.05s steps(1, end) infinite; vertical-align: middle; } @keyframes roastlog-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .roastlog__prompt-cursor { animation: none; } } .roastlog__footer { padding: 0.75rem 1.5rem; border-top: 1px solid rgba(255, 195, 161, 0.12); text-align: center; } .roastlog__footer-note { font-size: 0.72rem; color: rgba(255, 245, 238, 0.45); letter-spacing: 0.04em; } @media (max-width: 720px) { .roastlog__terminal { font-size: 0.75rem; } .roastlog__entry { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.7rem 0; } .roastlog__entry-ts { font-size: 0.7rem; } } /* ============================================ MODAL — WHOLESALE FORM ============================================ */ .modal__pane--wholesale { max-width: none; } .modal__lede { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-style: italic; color: var(--deep); margin-bottom: 2rem; line-height: 1.6; } .wholesale-form { display: flex; flex-direction: column; gap: 1.25rem; } .wholesale-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .wholesale-form__full { display: block; } .wholesale-form label { display: block; font-family: 'Outfit', sans-serif; } .wholesale-form label > span { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); margin-bottom: 0.4rem; } .wholesale-form input, .wholesale-form select, .wholesale-form textarea { width: 100%; padding: 0.75rem 0.9rem; background: var(--linen); border: 1px solid rgba(167, 93, 93, 0.2); color: var(--text-dark); font-family: inherit; font-size: 0.95rem; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .wholesale-form input:focus, .wholesale-form select:focus, .wholesale-form textarea:focus { outline: none; border-color: var(--coral); background: var(--cream); } .wholesale-form textarea { resize: vertical; font-family: inherit; } .wholesale-form fieldset { border: none; padding: 0; margin: 0; } .wholesale-form legend { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); margin-bottom: 0.6rem; padding: 0; } .wholesale-form__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .wholesale-chip { position: relative; cursor: pointer; } .wholesale-chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .wholesale-chip span { display: inline-block; padding: 0.55rem 1rem; background: var(--linen); border: 1px solid rgba(167, 93, 93, 0.2); font-size: 0.85rem; color: var(--text-dark); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .wholesale-chip:hover span { background: var(--sand); } .wholesale-chip input:checked + span { background: var(--deep); color: var(--cream); border-color: var(--deep); } .wholesale-chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; } .wholesale-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.9rem 2rem; background: var(--deep); color: var(--cream); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--deep); cursor: pointer; align-self: flex-start; transition: background 0.3s var(--ease), gap 0.3s var(--ease); } .wholesale-form__submit:hover { background: var(--darkest); gap: 1.1rem; } .wholesale-form__submit svg { width: 16px; height: 16px; } .wholesale-form__success { padding: 1rem 1.25rem; background: rgba(127, 179, 133, 0.12); border-left: 3px solid #7FB385; color: var(--text-dark); font-size: 0.9rem; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s var(--ease), max-height 0.4s var(--ease), margin 0.4s var(--ease); margin: 0; } .wholesale-form__success.show { opacity: 1; max-height: 100px; margin-top: 0.5rem; } @media (max-width: 640px) { .wholesale-form__row { grid-template-columns: 1fr; } } /* ============================================ FOCUS VISIBLE — refine keyboard focus ============================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; } .modal__content:focus { outline: none; }