/* ============================================ KOPPAR KAFÉ — style.css Nordic Icon AB | PRO Plan Dark Premium Track (Warm) ============================================ */ /* ── FONTS ─────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500&display=swap'); /* ── CSS VARIABLES ──────────────────────────── */ :root { /* Colors — Koppar Dark Premium Warm */ --bg: #0F0C09; --bg-secondary: #1A1510; --bg-tertiary: #241E17; --text: #EDE8E0; --text-secondary: #9A9088; --text-muted: #5A5248; --accent: #C17F3A; --accent-hover: #A86D2E; --accent-subtle: rgba(193, 127, 58, 0.12); --accent-shadow: rgba(193, 127, 58, 0.25); --border: rgba(237, 232, 224, 0.08); --border-hover: rgba(237, 232, 224, 0.16); /* Typography */ --font-heading: 'Cormorant Garamond', serif; --font-body: 'General Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Type scale */ --text-h0: clamp(3.5rem, 6vw, 6rem); --text-h1: clamp(2.5rem, 4vw, 4.5rem); --text-h2: clamp(2rem, 3.5vw, 3rem); --text-h3: 1.75rem; --text-h4: 1.25rem; --text-body: 1.0625rem; --text-body-sm: 0.9375rem; --text-small: 0.875rem; --text-label: 0.75rem; --text-mono: 0.875rem; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-label: 0.1em; --tracking-wide: 0.06em; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.25rem; --space-xl: 1.5rem; --space-2xl: 2rem; --space-3xl: 2.5rem; --space-4xl: 3rem; --space-5xl: 4rem; --space-6xl: 5rem; --space-7xl: 7.5rem; --space-8xl: 10rem; --section-padding: 120px; --section-padding-lg: 160px; /* Layout */ --container-max: 1200px; --container-wide: 1400px; --grid-gap: 1.25rem; --card-padding: 2rem; --card-padding-lg: 2.5rem; /* Radius */ --radius-none: 0; --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 1.25rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-full: 50px; } /* ── RESET ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; /* Lenis handles smooth scroll */ -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-body); color: var(--text); background: var(--bg); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: var(--font-body); } ul, ol { list-style: none; } /* ── REDUCED MOTION ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { .js-loaded [data-animate], .js-loaded [data-gsap-child], .js-loaded .gsap-animated { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── SCROLL ANIMATIONS — progressive enhancement */ /* Only hide when JS has loaded (.js-loaded on ). Without JS: all content visible immediately. */ .js-loaded [data-animate] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js-loaded [data-animate].is-visible { opacity: 1; transform: translateY(0); } /* GSAP-controlled children — CSS sets the initial hidden state, GSAP animates to visible via gsap.to() */ .js-loaded [data-gsap-child] { opacity: 0; transform: translateY(30px); will-change: transform, opacity; } /* ── LAYOUT ─────────────────────────────────── */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; } .container--wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 2rem; } .section { padding: var(--section-padding) 0; } .section--lg { padding: var(--section-padding-lg) 0; } /* ── SECTION HEADER ─────────────────────────── */ .section-header { margin-bottom: 4rem; } .section-header--center { text-align: center; } .section-header--center .section-heading { margin: 0 auto; } .section-header--center .section-sub { margin: 1rem auto 0; } .section-label { display: block; font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent); margin-bottom: 1rem; } .section-heading { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: 400; line-height: 1.15; letter-spacing: var(--tracking-tight); color: var(--text); max-width: 600px; } .section-heading em { font-style: italic; color: var(--text); } .section-sub { font-size: var(--text-body); color: var(--text-secondary); line-height: 1.7; margin-top: 1rem; max-width: 540px; } /* ── DIVIDER ────────────────────────────────── */ .divider { width: 100%; height: 1px; background: var(--border); margin: 0; } /* ── BUTTONS ────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-full); padding: 0.875rem 1.75rem; font-size: var(--text-body-sm); font-weight: 500; font-family: var(--font-body); letter-spacing: var(--tracking-wide); transition: all 0.2s ease; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn--primary { background: var(--accent); color: #0F0C09; box-shadow: 0 4px 12px var(--accent-shadow); } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-shadow); } .btn--secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn--secondary:hover { background: var(--bg-secondary); border-color: var(--border-hover); } .btn--light { background: var(--text); color: var(--bg); } .btn--light:hover { opacity: 0.9; transform: translateY(-1px); } /* ── LABEL BADGE ────────────────────────────── */ .label-badge { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0.375rem 1rem; font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 2rem; } .badge-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } /* ── PLACEHOLDER IMAGES (dark track) ───────── */ .img-placeholder { background: rgba(255, 255, 255, 0.05); border: 2px dashed rgba(237, 232, 224, 0.14); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--text-muted); text-align: center; padding: 2rem; width: 100%; } .img-placeholder span { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; opacity: 0.6; } .img-placeholder p { font-size: 0.8125rem; opacity: 0.5; line-height: 1.5; } /* ── CARDS ──────────────────────────────────── */ .card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--card-padding); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); border-color: var(--border-hover); } /* ═══════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 72px; display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .navbar.is-scrolled { background: var(--bg); border-bottom-color: var(--border); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } .navbar.is-hidden { transform: translateY(-100%); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; } .navbar__logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.04em; color: var(--text); } .navbar__logo em { font-style: italic; color: var(--accent); } .navbar__links { display: flex; align-items: center; gap: 2.5rem; } .navbar__link { font-size: var(--text-body-sm); font-weight: 400; color: var(--text-secondary); letter-spacing: 0.02em; transition: color 0.2s ease; } .navbar__link:hover { color: var(--text); } .navbar__cta .btn { padding: 0.625rem 1.25rem; font-size: 0.875rem; } /* Mobile navbar */ .navbar__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; cursor: pointer; } .navbar__toggle span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: all 0.3s ease; } @media (max-width: 768px) { .navbar__links { display: none; } .navbar__cta { display: none; } .navbar__toggle { display: flex; } .navbar__links.is-open { display: flex; flex-direction: column; position: fixed; top: 72px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 1.5rem 2rem 2rem; gap: 1.5rem; align-items: flex-start; } .navbar__links.is-open + .navbar__cta { display: none; } } /* ═══════════════════════════════════════════ HERO — Fullscreen ═══════════════════════════════════════════ */ .hero { position: relative; height: 100svh; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(15, 12, 9, 0.96) 0%, rgba(15, 12, 9, 0.72) 40%, rgba(15, 12, 9, 0.45) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; width: 100%; padding: 0 0 var(--space-8xl); } .hero__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; } .hero__heading { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); margin-bottom: 1.5rem; max-width: 800px; text-shadow: 0 2px 24px rgba(15, 12, 9, 0.6); } .hero__heading em { font-style: italic; color: var(--text); } .hero__sub { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--text); line-height: 1.7; max-width: 520px; margin-bottom: 2.5rem; text-shadow: 0 1px 12px rgba(15, 12, 9, 0.7); } .hero__actions { display: flex; gap: 0.75rem; margin-bottom: 2.5rem; flex-wrap: wrap; } .hero__trust { display: flex; gap: 2rem; flex-wrap: wrap; } .hero__trust-item { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.4rem; } .hero__trust-item::before { content: '✓'; color: var(--accent); font-size: 0.7rem; } /* Scroll indicator */ .hero__scroll { position: absolute; bottom: 2rem; right: 2rem; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.4; } .hero__scroll-label { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); writing-mode: vertical-rl; } .hero__scroll-line { width: 1px; height: 40px; background: var(--text-secondary); animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0%, 100% { transform: scaleY(1); opacity: 0.4; } 50% { transform: scaleY(0.5); opacity: 0.8; } } @media (max-width: 768px) { .hero__content { padding: 120px 0 5rem; position: relative; z-index: 1; } .hero__scroll { display: none; } .label-badge { display: none; } .hero__actions { display: flex; flex-direction: row; gap: 0.625rem; flex-wrap: nowrap; } .hero__actions .btn { width: auto; padding: 0.75rem 1.25rem; font-size: 0.875rem; white-space: nowrap; } .hero__trust { gap: 1rem; } .hero__trust-item { font-size: 0.6875rem; } } /* ═══════════════════════════════════════════ MARQUEE STRIP ═══════════════════════════════════════════ */ .marquee-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; padding: 1rem 0; background: var(--bg-secondary); } .marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; } .marquee-track:hover { animation-play-state: paused; } .marquee-item { display: flex; align-items: center; gap: 1.5rem; padding: 0 2.5rem; white-space: nowrap; } .marquee-item__text { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-secondary); } .marquee-item__dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════════════════════════════════ INTRO / ABOUT (short) ═══════════════════════════════════════════ */ .intro { padding: var(--section-padding) 0; } .intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .intro__text-col { } .intro__body-col { display: flex; flex-direction: column; gap: 1.25rem; } .intro__body-col p { font-size: var(--text-body); color: var(--text-secondary); line-height: 1.75; } .intro__link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent); margin-top: 0.5rem; transition: gap 0.2s ease; } .intro__link:hover { gap: 0.75rem; } .intro__link::after { content: '→'; } .intro__image { position: relative; overflow: hidden; } .intro__image .img-placeholder { aspect-ratio: 3/4; max-width: 380px; } .parallax-wrap { overflow: hidden; } .is-parallax { height: 120%; object-fit: cover; width: 100%; } @media (max-width: 900px) { .intro__grid { grid-template-columns: 1fr; gap: 3rem; } .intro__image { order: -1; } .intro__image .img-placeholder { max-width: 100%; aspect-ratio: 4/3; } } /* ═══════════════════════════════════════════ MENU SECTION (bento) ═══════════════════════════════════════════ */ .menu-section { padding: var(--section-padding) 0; border-top: 1px solid var(--border); } .menu-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: var(--grid-gap); margin-top: 3rem; } /* Featured espresso card */ .menu-card--featured { grid-column: 1 / 5; grid-row: 1 / 3; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--card-padding-lg); display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; transition: border-color 0.3s ease, transform 0.3s ease; } .menu-card--featured:hover { border-color: var(--border-hover); transform: translateY(-2px); } /* Regular drink cards */ .menu-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; transition: border-color 0.3s ease, transform 0.3s ease; } .menu-card:hover { border-color: var(--border-hover); transform: translateY(-2px); } .menu-card:nth-child(2) { grid-column: 5 / 9; } .menu-card:nth-child(3) { grid-column: 9 / 13; } .menu-card:nth-child(4) { grid-column: 5 / 9; } .menu-card:nth-child(5) { grid-column: 9 / 13; } .menu-card:nth-child(6) { grid-column: 1 / 5; } .menu-card:nth-child(7) { grid-column: 5 / 9; } .menu-card:nth-child(8) { grid-column: 9 / 13; } .menu-card__name { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 400; color: var(--text); } .menu-card--featured .menu-card__name { font-size: 1.75rem; } .menu-card__desc { font-size: var(--text-small); color: var(--text-secondary); margin-top: 0.5rem; line-height: 1.6; } .menu-card__price { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--accent); margin-top: 1.25rem; } .menu-card--featured .menu-card__price { font-size: 1.125rem; } .menu-card__tag { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); background: var(--accent-subtle); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); align-self: flex-start; margin-bottom: 1rem; } /* Food row */ .menu-food-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: var(--grid-gap); } .menu-food-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.3s ease; } .menu-food-card:hover { border-color: var(--border-hover); } .menu-food-card__name { font-size: var(--text-body-sm); color: var(--text); } .menu-food-card__sub { font-size: var(--text-small); color: var(--text-muted); margin-top: 0.2rem; } .menu-food-card__price { font-family: var(--font-mono); font-size: var(--text-small); color: var(--text-secondary); } .menu-cta { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .menu-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; } @media (max-width: 900px) { .menu-grid { grid-template-columns: 1fr 1fr; } .menu-card--featured { grid-column: 1 / 3; grid-row: auto; min-height: auto; } .menu-card:nth-child(n) { grid-column: auto; } .menu-food-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .menu-grid { grid-template-columns: 1fr; } .menu-card--featured { grid-column: 1; } .menu-card:nth-child(n) { grid-column: 1; } } /* ═══════════════════════════════════════════ ROASTING PROCESS — Sticky Scroll ═══════════════════════════════════════════ */ .process { border-top: 1px solid var(--border); } .process__container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: var(--container-max); margin: 0 auto; padding: var(--section-padding) 2rem 0; } /* Sticky heading side */ .process__sticky { position: sticky; top: 50%; transform: translateY(-50%); align-self: flex-start; padding: var(--section-padding) 0; height: fit-content; } .process__sticky-inner { display: flex; flex-direction: column; gap: 0; } .process__step-indicator { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 2.5rem; font-family: var(--font-mono); letter-spacing: 0.02em; } .process__step-indicator-num { font-size: clamp(3rem, 6vw, 4.5rem); color: var(--accent); line-height: 1; transition: opacity 0.3s ease; } .process__step-indicator-sep { font-size: 1.25rem; color: var(--text-muted); padding: 0 0.1rem; } .process__step-indicator-total { font-size: 1.25rem; color: var(--text-muted); } /* Steps side */ .process__steps { padding: var(--section-padding) 0; } .process__step { padding: var(--section-padding) 0; border-bottom: 1px solid var(--border); opacity: 0.35; transition: opacity 0.5s ease; } .process__step:first-child { padding-top: 0; } .process__step:last-child { border-bottom: none; } .process__step.is-active { opacity: 1; } .process__step-num { font-family: var(--font-mono); font-size: var(--text-label); color: var(--accent); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: 1.25rem; } .process__step-title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 300; font-style: italic; color: var(--text); margin-bottom: 1rem; line-height: 1.2; } .process__step-body { font-size: var(--text-body); color: var(--text-secondary); line-height: 1.75; max-width: 480px; } @media (max-width: 768px) { .process__container { grid-template-columns: 1fr; gap: 0; } .process__sticky { position: relative; top: auto; transform: none; padding: var(--section-padding) 0 3rem; } .process__sticky-inner { padding-top: 0; padding-bottom: 0; } .process__step { opacity: 1; padding: 2.5rem 0; } .process__steps { padding: 0 0 var(--section-padding); } } /* ═══════════════════════════════════════════ EDITORIAL BREAK ═══════════════════════════════════════════ */ .editorial-break { position: relative; height: 65vh; min-height: 400px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .editorial-break__bg { position: absolute; inset: 0; } .editorial-break__bg .img-placeholder { height: 100%; border-radius: 0; border: none; background: #1A1007; /* explicit warm brown — no olive cast */ } .editorial-break__overlay { position: absolute; inset: 0; background: rgba(15, 12, 9, 0.55); } .editorial-break__quote { position: relative; z-index: 2; text-align: center; padding: 0 2rem; } .editorial-break__text { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; font-style: italic; color: var(--text); line-height: 1.35; max-width: 700px; margin: 0 auto; } .editorial-break__attr { font-family: var(--font-mono); font-size: var(--text-label); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-top: 1.5rem; } /* ═══════════════════════════════════════════ STATS ═══════════════════════════════════════════ */ .stats { padding: var(--section-padding) 0; border-top: 1px solid var(--border); position: relative; overflow: hidden; } /* The unexpected detail — ambient K watermark */ .stats__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-heading); font-size: 40vw; font-weight: 300; font-style: italic; color: var(--accent); opacity: 0.018; pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; line-height: 1; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: relative; z-index: 1; } .stats__item { background: var(--bg); padding: 3rem 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .stats__number { font-family: var(--font-mono); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500; color: var(--text); line-height: 1; letter-spacing: -0.02em; } .stats__number .accent { color: var(--accent); } .stats__label { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); } @media (max-width: 768px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stats__grid { grid-template-columns: 1fr; } .stats__item { padding: 2rem 1.5rem; } } /* ═══════════════════════════════════════════ TESTIMONIALS ═══════════════════════════════════════════ */ .testimonials { padding: var(--section-padding) 0; border-top: 1px solid var(--border); } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: 3rem; } .testimonial-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--card-padding); display: flex; flex-direction: column; gap: 1.5rem; transition: border-color 0.3s ease, transform 0.3s ease; } .testimonial-card:hover { border-color: var(--border-hover); transform: translateY(-2px); } .testimonial-card__quote { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 400; font-style: italic; color: var(--text); line-height: 1.6; flex: 1; } .testimonial-card__mark { font-family: var(--font-heading); font-size: 3rem; line-height: 1; color: var(--accent); opacity: 0.3; align-self: flex-start; margin-bottom: -0.5rem; } .testimonial-card__author { border-top: 1px solid var(--border); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.2rem; } .testimonial-card__name { font-size: var(--text-body-sm); color: var(--text); font-weight: 500; } .testimonial-card__location { font-family: var(--font-mono); font-size: var(--text-label); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 900px) { .testimonials__grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════ PRE-FOOTER CTA ═══════════════════════════════════════════ */ .cta-section { background: var(--bg-tertiary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--section-padding-lg) 0; text-align: center; position: relative; overflow: hidden; } .cta-section__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 300px; background: var(--accent); opacity: 0.06; filter: blur(80px); border-radius: 50%; pointer-events: none; } .cta-section__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 0 2rem; } .cta-section__heading { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; line-height: 1.15; letter-spacing: var(--tracking-tight); color: var(--text); margin-bottom: 1.25rem; } .cta-section__heading em { font-style: italic; color: var(--text); } .cta-section__sub { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: 2.5rem; } .cta-section__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ .footer { background: var(--bg); border-top: 1px solid var(--border); padding: 5rem 0 2.5rem; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem; } .footer__brand-logo { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 400; color: var(--text); margin-bottom: 0.75rem; } .footer__brand-logo em { font-style: italic; color: var(--accent); } .footer__brand-desc { font-size: var(--text-body-sm); color: var(--text-muted); line-height: 1.6; max-width: 240px; } .footer__col-title { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); margin-bottom: 1.25rem; } .footer__nav { display: flex; flex-direction: column; gap: 0.75rem; } .footer__nav-link { font-size: var(--text-body-sm); color: var(--text-secondary); transition: color 0.2s ease; } .footer__nav-link:hover { color: var(--text); } .footer__contact-item { font-size: var(--text-body-sm); color: var(--text-secondary); display: block; margin-bottom: 0.5rem; transition: color 0.2s ease; } .footer__contact-item:hover { color: var(--text); } .footer__hours-item { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .footer__hours-item span:first-child { color: var(--text-muted); } .footer__bottom { border-top: 1px solid var(--border); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .footer__copy { font-family: var(--font-mono); font-size: var(--text-label); color: var(--text-muted); letter-spacing: 0.04em; } .footer__credit { font-family: var(--font-mono); font-size: var(--text-label); color: var(--text-muted); letter-spacing: 0.04em; } .footer__credit a { color: var(--accent); transition: opacity 0.2s; } .footer__credit a:hover { opacity: 0.8; } @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } } @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* ═══════════════════════════════════════════ MENU PAGE ═══════════════════════════════════════════ */ .page-hero { padding: calc(72px + 80px) 0 80px; border-bottom: 1px solid var(--border); } .page-hero__heading { font-family: var(--font-heading); font-size: clamp(3rem, 5vw, 5rem); font-weight: 300; line-height: 1.05; letter-spacing: var(--tracking-tight); color: var(--text); } .page-hero__heading em { font-style: italic; } .page-hero__sub { font-size: var(--text-body); color: var(--text-secondary); margin-top: 1rem; max-width: 520px; line-height: 1.7; } /* Menu page sections */ .menu-page-section { padding: var(--section-padding) 0; border-bottom: 1px solid var(--border); } .menu-page-section:last-of-type { border-bottom: none; } .menu-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0; } .menu-list-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .menu-list-item:last-child { border-bottom: none; } .menu-list-item__left { flex: 1; } .menu-list-item__name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; color: var(--text); } .menu-list-item__desc { font-size: var(--text-small); color: var(--text-muted); margin-top: 0.2rem; } .menu-list-item__price { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-secondary); flex-shrink: 0; } .menu-note-bar { background: var(--accent-subtle); border: 1px solid rgba(193, 127, 58, 0.2); border-radius: var(--radius-md); padding: 1rem 1.5rem; margin-top: 2rem; font-family: var(--font-mono); font-size: var(--text-label); color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; } .booking-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--card-padding-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 2.5rem; } .booking-card__price { font-family: var(--font-mono); font-size: 2rem; color: var(--accent); margin-bottom: 0.5rem; } .booking-card__price-label { font-family: var(--font-mono); font-size: var(--text-label); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .booking-card__details { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.7; margin-top: 1.25rem; } .booking-card__cta { margin-top: 2rem; } @media (max-width: 768px) { .booking-card { grid-template-columns: 1fr; gap: 2rem; } } /* ═══════════════════════════════════════════ ABOUT PAGE ═══════════════════════════════════════════ */ .about-split { padding: var(--section-padding) 0; border-bottom: 1px solid var(--border); } .about-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .about-split__image .img-placeholder { aspect-ratio: 3/4; max-width: 420px; } .about-split__text { display: flex; flex-direction: column; gap: 1.5rem; } .about-split__body { font-size: var(--text-body); color: var(--text-secondary); line-height: 1.8; } .about-split__quote { font-family: var(--font-heading); font-size: 1.5rem; font-style: italic; font-weight: 300; color: var(--text); line-height: 1.4; border-left: 2px solid var(--accent); padding-left: 1.5rem; margin: 0.5rem 0; } /* Reversed variant: image on right, text on left */ .about-split__grid--reversed .about-split__text { order: 1; } .about-split__grid--reversed .about-split__image { order: 2; } @media (max-width: 900px) { .about-split__grid { grid-template-columns: 1fr; gap: 3rem; } .about-split__image { order: -1; } .about-split__image .img-placeholder { max-width: 100%; aspect-ratio: 4/3; } /* On mobile, reversed grid stacks image above text */ .about-split__grid--reversed .about-split__text { order: 2; } .about-split__grid--reversed .about-split__image { order: 1; } } /* ═══════════════════════════════════════════ CONTACT PAGE ═══════════════════════════════════════════ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding: var(--section-padding) 0; } .contact-info__block { margin-bottom: 3rem; } .contact-info__block:last-child { margin-bottom: 0; } .contact-info__title { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent); margin-bottom: 1.25rem; } .contact-info__item { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.7; display: block; margin-bottom: 0.4rem; transition: color 0.2s; } a.contact-info__item:hover { color: var(--text); } /* Contact form */ .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-label { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); } .form-input, .form-select, .form-textarea { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.875rem 1rem; font-size: var(--text-body-sm); font-family: var(--font-body); color: var(--text); transition: border-color 0.2s ease; width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-select { appearance: none; cursor: pointer; } .form-textarea { min-height: 120px; resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 3.5rem; } .form-row { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════ MAP EMBED ═══════════════════════════════════════════ */ .map-section { padding: 0 0 var(--section-padding); } .map-embed { width: 100%; height: 400px; border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden; } .map-embed iframe { width: 100%; height: 100%; border: none; filter: grayscale(100%) invert(90%) sepia(10%); }