/* ========================================================================== Codeon Saveur — theme stylesheet (mobile first, app-style) One file, no framework. Base colours/fonts arrive as custom properties from the Customizer (inc/setup.php → codeon_sv_inline_tokens); everything else is derived here with color-mix() so any palette stays coherent. Order: tokens → base → buttons → navigation (pill, tab bar, sheet) → home sections → footer → inner pages → content → overlays → motion. ========================================================================== */ /* ---------- Tokens ---------- */ :root { --accent: #D0B47A; --accent-ink: #15132C; --ember: #E4572E; --bg: #FAF6EF; --ink: #15132C; --dark: #100E27; --f-head: system-ui, sans-serif; --f-body: system-ui, sans-serif; --radius: 24px; --h-scale: 1; --logo-h: 40px; --surface: color-mix(in oklab, var(--bg), #fff 72%); --surface-2: color-mix(in oklab, var(--ink) 5%, var(--bg)); --surface-3: color-mix(in oklab, var(--ink) 9%, var(--bg)); --muted: color-mix(in oklab, var(--ink) 60%, var(--bg)); --line: color-mix(in oklab, var(--ink) 11%, transparent); --line-strong: color-mix(in oklab, var(--ink) 22%, transparent); --accent-text: color-mix(in oklab, var(--accent) 58%, var(--ink)); --accent-soft: color-mix(in oklab, var(--accent) 20%, transparent); --ember-soft: color-mix(in oklab, var(--ember) 14%, transparent); --on-dark: #F6F1E7; --on-dark-muted: color-mix(in oklab, var(--on-dark) 68%, var(--dark)); --on-dark-line: color-mix(in oklab, var(--on-dark) 14%, transparent); --ok: #1F9D55; --r-xs: calc(var(--radius) * .34); --r-sm: calc(var(--radius) * .6); --r: var(--radius); --r-lg: calc(var(--radius) * 1.3); --shadow-sm: 0 1px 2px rgb(40 26 10 / .05), 0 4px 14px -6px rgb(40 26 10 / .12); --shadow: 0 1px 2px rgb(40 26 10 / .05), 0 14px 36px -14px rgb(40 26 10 / .22); --shadow-lg: 0 2px 6px rgb(40 26 10 / .06), 0 30px 70px -24px rgb(40 26 10 / .34); --container: 1240px; --gutter: clamp(16px, 4.6vw, 40px); --section: clamp(60px, 9vw, 120px); --topbar-h: 0px; --nav-h: 58px; --nav-top: 10px; --nav-space: calc(var(--admin-bar) + var(--nav-top) * 2 + var(--nav-h)); --tabbar-h: 70px; --admin-bar: var(--wp-admin--admin-bar--height, 0px); --rail-pad: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); --fs-h1: calc(clamp(2.5rem, 1.3rem + 5.4vw, 5.6rem) * var(--h-scale)); --fs-h2: calc(clamp(1.95rem, 1.3rem + 2.7vw, 3.3rem) * var(--h-scale)); --fs-h3: calc(clamp(1.1rem, 1rem + .4vw, 1.3rem) * var(--h-scale)); --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.16, 1, .3, 1); /* ease-out-expo: quick settle, no overshoot */ interpolate-size: allow-keywords; } .is-scheme-dark { --surface: color-mix(in oklab, var(--bg), #fff 6%); --surface-2: color-mix(in oklab, var(--bg), #fff 9%); --surface-3: color-mix(in oklab, var(--bg), #fff 14%); --line: color-mix(in oklab, var(--ink) 13%, transparent); --accent-text: var(--accent); --shadow-sm: 0 1px 2px rgb(0 0 0 / .3); --shadow: 0 14px 36px -14px rgb(0 0 0 / .6); --shadow-lg: 0 30px 70px -24px rgb(0 0 0 / .7); } .has-topbar { --topbar-h: 36px; } @media (min-width: 1024px) { :root { --nav-h: 64px; --nav-top: 14px; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-space) + 12px); -webkit-tap-highlight-color: transparent; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } @media (min-width: 1024px) { body { font-size: 1.0625rem; } } img, svg, video, iframe, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; } h3, h4 { line-height: 1.25; letter-spacing: -.01em; } figure { margin: 0; } ul, ol { padding-left: 1.2em; } button { font: inherit; color: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--accent); color: var(--accent-ink); } address { font-style: normal; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 999px; } .skip-link:focus { top: 12px; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container.narrow { max-width: calc(760px + var(--gutter) * 2); } .muted { color: var(--muted); } .small { font-size: .875rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 1.4em; border: 1px solid transparent; border-radius: 999px; font-family: var(--f-body); font-size: .95rem; font-weight: 600; line-height: 1.1; letter-spacing: .005em; text-decoration: none; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease); } .btn:active { transform: scale(.97); } .btn-lg { min-height: 54px; padding: 0 1.65em; font-size: 1rem; } .btn-block { display: flex; width: 100%; } .btn-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--accent) 80%, #000); } .btn-accent:hover { background: color-mix(in oklab, var(--accent), #fff 12%); color: var(--accent-ink); box-shadow: 0 14px 34px -12px color-mix(in oklab, var(--accent) 90%, #000); } .btn-dark { background: var(--ink); color: var(--bg); } .btn-dark:hover { background: color-mix(in oklab, var(--ink) 86%, var(--accent)); color: var(--bg); } .btn-ghost { border-color: var(--line-strong); color: var(--ink); background: var(--surface); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .btn-glass { border-color: rgb(255 255 255 / .3); color: #fff; background: rgb(255 255 255 / .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn-glass:hover { border-color: rgb(255 255 255 / .7); background: rgb(255 255 255 / .18); color: #fff; } .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .icon-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: inherit; text-decoration: none; transition: background-color .25s var(--ease), transform .2s var(--ease); } .icon-btn:hover { background: var(--surface-3); color: inherit; } .icon-btn:active { transform: scale(.94); } .link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; } .link-arrow .icon { transition: transform .3s var(--spring); } .link-arrow:hover { color: var(--accent-text); } .link-arrow:hover .icon { transform: translateX(4px); } /* ---------- Section scaffolding ---------- */ .section { padding-block: var(--section); position: relative; } .section-tight { padding-block: clamp(28px, 5vw, 64px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--f-body); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); } .eyebrow::before { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); flex: none; } .section-head { max-width: 720px; margin-bottom: clamp(24px, 3.5vw, 44px); } .section-head.is-center { margin-inline: auto; text-align: center; } .section-title { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 0; font-weight: 800; } .section-lead { margin-top: 14px; font-size: 1.06rem; color: var(--muted); max-width: 58ch; } .section-head.is-center .section-lead { margin-inline: auto; } .section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(24px, 3.5vw, 40px); } .section-head-row .section-head { margin-bottom: 0; } .mini-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--f-body); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; } .mini-title .icon { color: var(--accent-text); } .check-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; } .check-list li { display: flex; gap: 12px; align-items: center; } .check-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); } .check-dot .icon { stroke-width: 2.4; } .ornament { color: var(--accent); flex: none; } /* Dark bands + Ottoman eight-point star pattern */ .is-dark { background: var(--dark); color: var(--on-dark); isolation: isolate; overflow: hidden; } .is-dark .eyebrow { color: var(--accent); } .is-dark .section-lead { color: var(--on-dark-muted); } .has-pattern .is-dark::before, .has-pattern .promo-card::before, .has-pattern .site-footer::before, .has-pattern .aside-order::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23D0B47A' stroke-width='1'%3E%3Crect x='19' y='19' width='26' height='26'/%3E%3Crect x='19' y='19' width='26' height='26' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M0 0l9 9M64 0l-9 9M0 64l9-9M64 64l-9-9M32 0v6M32 58v6M0 32h6M58 32h6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 75%); } /* ---------- Status pill ---------- */ .status-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-family: var(--f-body); font-size: .78rem; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; } .status-pill[hidden] { display: none; } .status-pill i { width: 8px; height: 8px; border-radius: 50%; background: #9A96A8; flex: none; } .status-pill b { font-weight: 700; } .status-pill span { opacity: .78; font-weight: 500; } .status-pill.is-open i { background: var(--ok); box-shadow: 0 0 0 0 rgb(31 157 85 / .5); animation: sv-pulse 2.2s infinite; } .status-pill.is-closed i { background: var(--ember); } .status-pill.on-media { background: rgb(255 255 255 / .14); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .2); height: 34px; font-size: .82rem; } .status-pill.on-dark { background: rgb(255 255 255 / .08); color: var(--on-dark); } @keyframes sv-pulse { 70% { box-shadow: 0 0 0 7px rgb(31 157 85 / 0); } 100% { box-shadow: 0 0 0 0 rgb(31 157 85 / 0); } } /* ========================================================================== Navigation ========================================================================== */ /* Announcement bar */ .topbar { position: relative; z-index: 61; height: var(--topbar-h); display: flex; align-items: center; justify-content: center; padding-inline: var(--gutter); background: var(--dark); color: var(--on-dark); font-size: .8rem; font-weight: 500; } .topbar a, .topbar p { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 0; text-decoration: none; color: inherit; } .topbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar .icon { color: var(--accent); flex: none; } .topbar a:hover span { text-decoration: underline; } /* Floating pill */ .site-header { position: fixed; left: 0; right: 0; z-index: 60; top: calc(var(--admin-bar) + var(--topbar-h) + var(--nav-top)); padding-inline: var(--gutter); /* same edges as .container */ pointer-events: none; transition: top .4s var(--ease), transform .45s var(--ease); } .site-header.is-scrolled { top: calc(var(--admin-bar) + var(--nav-top)); } .site-header.is-hidden { transform: translateY(calc(-100% - var(--nav-top) - 20px)); } .pill { pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: var(--container); height: var(--nav-h); margin-inline: auto; padding: 6px 7px 6px 18px; border-radius: 999px; background: color-mix(in oklab, var(--surface) 80%, transparent); border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); box-shadow: var(--shadow); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; color: inherit; line-height: 1; min-width: 0; } .brand:hover { color: inherit; } /* :root lifts it above WooCommerce's `.woocommerce-page img { height: auto }`, which blew the logo out of the pill on account, cart and checkout pages. */ :root .brand-logo { height: min(var(--logo-h), calc(var(--nav-h) - 18px)); width: auto; } .brand-logo-light { display: none; } .brand-text { flex-direction: column; align-items: flex-start; } .brand-name { font-family: var(--f-head); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; } .brand-sub { margin-top: 3px; font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .65; } .pill-nav { display: none; } .pill-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .pill-status span { display: none; } .pill-cta { min-height: 44px; padding: 0 1.2em; } .has-tabbar .pill-cta { display: none; } .nav-account { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); text-decoration: none; } .nav-account-label { display: none; } /* Over the home photo: dark glass, light logo */ .has-overlay-header .site-header:not(.is-scrolled) .pill { background: rgb(12 10 30 / .26); border-color: rgb(255 255 255 / .16); color: #fff; box-shadow: none; } .has-overlay-header .site-header:not(.is-scrolled) .brand-logo-light { display: block; } .has-overlay-header .site-header:not(.is-scrolled) .brand-logo-main:has(+ .brand-logo-light) { display: none; } .has-overlay-header .site-header:not(.is-scrolled) .icon-btn, .has-overlay-header .site-header:not(.is-scrolled) .nav-account { background: rgb(255 255 255 / .14); } .has-overlay-header .site-header:not(.is-scrolled) .pill-status { display: none; } @media (min-width: 420px) { .pill-status span { display: inline; } } @media (min-width: 1024px) { .pill { padding-left: 22px; gap: 10px; } .has-tabbar .pill-cta { display: inline-flex; } .pill-nav { position: relative; display: flex; align-items: center; margin-inline: auto; } .pill-nav .menu { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .pill-nav .menu > li { position: relative; } .pill-nav .menu a { display: block; padding: 11px 16px; border-radius: 999px; font-size: .93rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .25s var(--ease); } .pill-indicator { position: absolute; top: 50%; left: 0; z-index: 0; height: 42px; width: var(--w, 0); border-radius: 999px; background: color-mix(in oklab, var(--ink) 8%, transparent); transform: translate(var(--x, 0), -50%); opacity: 0; transition: transform .5s var(--spring), width .5s var(--spring), opacity .25s var(--ease); } .pill-nav.is-ready .pill-indicator { opacity: 1; } .has-overlay-header .site-header:not(.is-scrolled) .pill-indicator { background: rgb(255 255 255 / .16); } .pill-nav .sub-menu { position: absolute; top: calc(100% + 10px); left: 50%; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: .25s var(--ease); } .pill-nav li:hover > .sub-menu, .pill-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .pill-nav .sub-menu a { border-radius: var(--r-sm); } .pill-nav .sub-menu a:hover { background: var(--surface-2); } } @media (min-width: 1280px) { .nav-account { width: auto; padding: 0 14px 0 10px; gap: 6px; display: inline-flex; align-items: center; height: 44px; border-radius: 999px; } .nav-account-label { display: inline; font-size: .88rem; font-weight: 600; } } @media (max-width: 1179px) and (min-width: 1024px) { .pill-status { display: none; } } /* Pages without the hero photo reserve room for the floating pill. */ body:not(.has-overlay-header) .site-main { padding-top: var(--nav-space); } /* ---------- App tab bar (phones & tablets) ---------- */ .tabbar { display: none; } @media (max-width: 1023px) { .has-tabbar { padding-bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); } .tabbar { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 55; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; max-width: 560px; height: var(--tabbar-h); margin-inline: auto; padding: 0 6px 8px; border-radius: 28px; background: color-mix(in oklab, var(--surface) 86%, transparent); border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); } .tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-height: 56px; padding: 0; border: 0; background: none; font-family: var(--f-body); font-size: .68rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); text-decoration: none; transition: color .25s var(--ease); } .tab > .icon { width: 52px; height: 30px; padding: 4px 13px; border-radius: 999px; transition: background-color .3s var(--ease), transform .3s var(--spring); } .tab:active > .icon { transform: scale(.9); } .tab.is-active { color: var(--ink); } .tab.is-active > .icon { background: var(--accent-soft); stroke-width: 2; } .tab-fab { display: grid; place-items: center; width: 58px; height: 58px; margin-top: -30px; margin-bottom: 1px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: 5px solid var(--bg); box-shadow: 0 12px 26px -10px color-mix(in oklab, var(--accent) 85%, #000); transition: transform .3s var(--spring); } .tab-main { color: var(--ink); } .tab-main:active .tab-fab { transform: scale(.92); } } /* ---------- Bottom sheet ("Plus") ---------- */ .sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 560px; max-height: none; height: auto; margin: 0 auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; } .sheet::backdrop { background: rgb(12 10 26 / .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .sheet-panel { max-height: min(88dvh, 860px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--surface); box-shadow: 0 -20px 60px -20px rgb(0 0 0 / .35); } .sheet[open] .sheet-panel { animation: sv-sheet-in .42s var(--ease) both; } .sheet[open]::backdrop { animation: sv-fade-in .3s var(--ease) both; } .sheet.is-closing .sheet-panel { animation: sv-sheet-out .28s var(--ease) both; } .sheet.is-closing::backdrop { animation: sv-fade-out .28s var(--ease) both; } .sheet.is-dragging .sheet-panel { animation: none; transition: none; } @keyframes sv-sheet-in { from { transform: translateY(100%); } } @keyframes sv-sheet-out { to { transform: translateY(100%); } } @keyframes sv-fade-in { from { opacity: 0; } } @keyframes sv-fade-out { to { opacity: 0; } } .sheet-handle { display: grid; place-items: center; height: 24px; cursor: grab; touch-action: none; } .sheet-handle i { width: 42px; height: 5px; border-radius: 99px; background: var(--line-strong); } .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; touch-action: none; } .sheet-head .brand-logo { height: 36px; } .sheet-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .sheet-action { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border-radius: var(--r); background: var(--surface-2); text-decoration: none; font-size: .78rem; font-weight: 600; transition: transform .2s var(--ease); } .sheet-action .icon { width: 26px; height: 26px; color: var(--accent-text); } .sheet-action:active { transform: scale(.97); } .sheet-menu { list-style: none; margin: 0 0 14px; padding: 0; } .sheet-menu li { border-bottom: 1px solid var(--line); } .sheet-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 4px; font-family: var(--f-head); font-size: 1.15rem; font-weight: 700; text-decoration: none; } .sheet-menu .current-menu-item > a { color: var(--accent-text); } .sheet-menu .icon { color: var(--muted); } .sheet-menu .sub-menu { list-style: none; padding: 0 0 8px 12px; } .sheet-menu .sub-menu li { border: 0; } .sheet-menu .sub-menu a { font-family: var(--f-body); font-size: 1rem; padding: 8px 4px; } .sheet-hours { padding: 16px; border-radius: var(--r); background: var(--surface-2); } .sheet-socials { margin-top: 16px; } .sheet-socials a { border-color: var(--line); } /* ========================================================================== Home sections ========================================================================== */ /* ---------- Hero ---------- */ .hero { position: relative; isolation: isolate; } .hero-full { display: flex; align-items: flex-end; min-height: calc(100svh - var(--topbar-h) - var(--admin-bar)); padding: calc(var(--nav-space) + 24px) 0 118px; color: #fff; background: var(--dark); } @media (min-width: 1024px) { .hero-full { min-height: min(calc(100svh - var(--topbar-h) - var(--admin-bar)), 980px); padding-bottom: 150px; } } .hero-full .hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .hero-full .hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); } .hero-full .hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(12 9 26 / calc(var(--overlay) * .6)) 0%, rgb(12 9 26 / calc(var(--overlay) * .45)) 30%, rgb(12 9 26 / calc(var(--overlay) + .3)) 72%, rgb(12 9 26 / calc(var(--overlay) + .4)) 100%), radial-gradient(120% 55% at 50% 118%, color-mix(in oklab, var(--ember) 55%, transparent), transparent 62%); } @media (min-width: 1024px) { .hero-full .hero-media::after { background: linear-gradient(90deg, rgb(12 9 26 / calc(var(--overlay) + .1)) 0%, rgb(12 9 26 / calc(var(--overlay) * .35)) 55%, transparent 85%), linear-gradient(180deg, rgb(12 9 26 / calc(var(--overlay) * .5)) 0%, transparent 30%, rgb(12 9 26 / calc(var(--overlay) * .9)) 100%), radial-gradient(90% 60% at 30% 120%, color-mix(in oklab, var(--ember) 50%, transparent), transparent 60%); } } .hero-embers { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); } .hero-embers.is-on { opacity: 1; } .hero-copy { max-width: 760px; } .hero-meta { margin-bottom: 18px; } .hero-full .eyebrow { color: var(--accent); } .hero-title { font-size: var(--fs-h1); font-weight: 800; line-height: .96; letter-spacing: -.045em; margin-bottom: 18px; } .hero-text { font-size: clamp(1.02rem, .96rem + .35vw, 1.22rem); max-width: 54ch; margin: 0; } .hero-full .hero-text { color: rgb(255 255 255 / .86); } .hero-full .btn-row { margin-top: 26px; } .hero-full .btn-row .btn { flex: 1 1 auto; } @media (min-width: 600px) { .hero-full .btn-row .btn { flex: 0 0 auto; } } .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; } .hero-chips li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-chips .icon { color: var(--accent); stroke-width: 2.4; } .hero-split .hero-chips li { background: var(--surface); border-color: var(--line); } .hero-split { display: grid; padding: calc(var(--nav-space) + 8px) 0 56px; } .hero-split .hero-media { margin: 0 var(--gutter) 28px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .hero-split .hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (min-width: 1024px) { .hero-split { grid-template-columns: 1fr; align-items: center; min-height: min(92svh, 860px); padding-bottom: 96px; } .hero-split > .hero-media, .hero-split > .hero-inner { grid-area: 1 / 1; } .hero-split > .hero-media { justify-self: end; width: min(46%, 600px); margin: 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) 0 0; } .hero-split .hero-media img { aspect-ratio: 4 / 5; } .hero-split .hero-copy { max-width: 48%; } } /* ---------- Hero: dish showcase ("Vitrine") ---------- Mobile first: the plate, its caption and progress bars, then the copy. Desktop: copy left, plate right. assets/js/showcase.js draws the plate in WebGL over the same box (.sc-gl-on); the markup alone shows dish one. */ .hero-showcase { padding-top: calc(var(--nav-space) + 10px); overflow-x: clip; } .hero-showcase .hero-media::after { display: none; } .sc-ambient { position: absolute; inset: 0; overflow: hidden; } .sc-ambient img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); filter: blur(42px) saturate(1.35) brightness(.5); } .sc-ambient::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 9 26 / .25), rgb(12 9 26 / .35) 45%, rgb(12 9 26 / .78)); } .hero-showcase .hero-media .sc-ambient img { animation: none; } .sc-gl { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease); } .sc-gl-on .sc-gl { opacity: 1; } .hero-showcase .hero-inner { display: grid; gap: 26px; } .sc-feature { display: grid; justify-items: center; gap: 14px; text-align: center; } .sc-plate { position: relative; width: min(72vw, 42svh, 420px); aspect-ratio: 1; border-radius: 50%; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .sc-plate-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 34px 60px -24px rgb(0 0 0 / .75), 0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent); transition: opacity .45s var(--ease), transform .6s var(--ease); } .sc-ring { position: absolute; inset: -9%; border-radius: 50%; border: 1.5px dashed color-mix(in oklab, var(--accent) 60%, transparent); animation: sc-spin 90s linear infinite; pointer-events: none; transition: opacity .6s var(--ease); } @keyframes sc-spin { to { transform: rotate(360deg); } } .sc-plate.is-swap .sc-plate-img { opacity: 0; transform: scale(.93) rotate(-5deg); } .sc-gl-on .sc-plate-img, .sc-gl-on .sc-ring { opacity: 0; } .sc-caption { display: grid; justify-items: center; gap: 3px; margin: 8px 0 0; min-height: 5.2em; transition: opacity .22s var(--ease), transform .22s var(--ease); } .is-changing .sc-caption { opacity: 0; transform: translateY(8px); } .sc-cat { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .sc-cat:empty { display: none; } .sc-name { font-family: var(--f-head); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; } .sc-price { margin-top: 6px; padding: 5px 13px; border-radius: 999px; font-size: .9rem; font-weight: 700; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sc-price[hidden] { display: none; } .sc-controls { display: flex; align-items: center; gap: 12px; width: min(78vw, 340px); } .sc-dots { display: flex; gap: 6px; flex: 1; } .sc-dot { position: relative; flex: 1; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; } .sc-dot::before, .sc-dot i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; } .sc-dot::before { background: rgb(255 255 255 / .24); } .sc-dot i { background: var(--accent); transform: scaleX(0); transform-origin: left; } .sc-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .sc-toggle { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; } .sc-toggle[hidden] { display: none; } .sc-toggle .i-play, .is-stopped .sc-toggle .i-pause { display: none; } .is-stopped .sc-toggle .i-play { display: block; } .sc-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hero-showcase .hero-title { font-size: calc(clamp(2.1rem, 1.4rem + 3.6vw, 4.6rem) * var(--h-scale)); } @media (max-width: 599px) { .hero-showcase .hero-chips { display: none; } .hero-showcase .hero-text { font-size: 1rem; } } @media (min-width: 1024px) { .hero-showcase { align-items: center; } .hero-showcase .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: 48px; } .hero-showcase .hero-copy { order: -1; } .sc-plate { width: min(34vw, 56svh, 540px); } .sc-controls { width: min(28vw, 340px); } } /* ---------- Quick actions ---------- */ .quick { position: relative; z-index: 3; padding-top: 20px; } .hero-full + .quick { margin-top: -86px; padding-top: 0; } .quick-card { padding: 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; } .quick-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; min-height: 72px; padding: 12px; border-radius: calc(var(--r-lg) - 8px); background: var(--surface-2); text-decoration: none; color: var(--ink); transition: background-color .25s var(--ease), transform .2s var(--ease); } .quick-tile:hover { background: var(--surface-3); color: var(--ink); } .quick-tile:active { transform: scale(.97); } .quick-tile.is-primary { background: var(--accent); color: var(--accent-ink); } .quick-tile.is-primary:hover { background: color-mix(in oklab, var(--accent), #fff 12%); color: var(--accent-ink); } .quick-tile.is-primary .quick-icon { background: rgb(255 255 255 / .38); color: var(--accent-ink); } .quick-tile.is-primary small { color: color-mix(in oklab, var(--accent-ink) 78%, var(--accent)); } .quick-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--surface); color: var(--accent-text); } .quick-text { display: grid; min-width: 0; line-height: 1.25; } .quick-text strong { font-size: .98rem; font-weight: 700; } .quick-text small { font-size: .78rem; color: var(--muted); } @media (min-width: 1100px) { .quick-tile { flex-direction: row; align-items: center; gap: 12px; } } .quick-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 8px 6px; font-size: .92rem; } .quick-hours .quick-icon { width: 36px; height: 36px; background: var(--surface-2); } .quick-hours p { margin: 0; } .quick-label { color: var(--muted); } .quick-note { flex-basis: 100%; color: var(--muted); font-size: .84rem; } @media (min-width: 768px) { .quick-grid { grid-template-columns: repeat(4, 1fr); } .quick-hours { padding: 14px 12px 8px; } .quick-note { flex-basis: auto; margin-left: auto !important; } } /* ---------- Rails (swipe carousels) ---------- */ .rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad); padding: 6px var(--rail-pad) 28px; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail-track { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; width: max-content; } .rail-track > * { scroll-snap-align: start; } .rail-controls { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; } .rail-btn { display: none; background: var(--surface); border: 1px solid var(--line); } .rail-btn[disabled] { opacity: .35; cursor: default; } @media (min-width: 1024px) { .rail-btn { display: inline-grid; } } /* ---------- Signature dishes ---------- */ .dish-card { display: flex; flex-direction: column; width: clamp(248px, 74vw, 310px); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .45s var(--spring), box-shadow .45s var(--ease); } @media (hover: hover) { .dish-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } } .dish-media { position: relative; overflow: hidden; background: var(--surface-2); } .dish-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 1s var(--ease); } .dish-card:hover .dish-media img { transform: scale(1.06); } .dish-tag { position: absolute; top: 12px; left: 12px; height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgb(12 10 26 / .5); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .dish-body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 14px; } .dish-name { font-size: var(--fs-h3); margin: 0 0 6px; } .dish-desc { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dish-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; } .price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .price small { font-size: .68em; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-right: 1px; } .dish-price { font-size: 1.08rem; } .dish-add { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--bg); text-decoration: none; transition: background-color .25s var(--ease), color .25s, transform .35s var(--spring); } .dish-add:hover { background: var(--accent); color: var(--accent-ink); transform: rotate(90deg); } /* ---------- Carte (home) ---------- */ .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--f-body); font-size: .92rem; font-weight: 600; white-space: nowrap; text-decoration: none; scroll-snap-align: start; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s; } .chip:has(.chip-thumb) { padding-left: 5px; } .chip:hover { border-color: var(--line-strong); color: var(--ink); } .chip:active { transform: scale(.96); } .chip[aria-selected="true"], .chip.is-active, .chip.is-active:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chip-thumb { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface-2); } .chip-thumb img { width: 100%; height: 100%; object-fit: cover; } .tab-panel-head { display: grid; gap: 4px; margin: 18px 0 6px; } .tab-panel-title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin: 0; font-weight: 800; } .tab-panel-head .muted { margin: 0; font-size: .92rem; max-width: 70ch; } .js [data-sv-tabs] .tab-panel:not(.is-active) { display: none; } .js [data-sv-tabs] .tab-panel.is-active { animation: sv-panel-in .45s var(--ease); } @keyframes sv-panel-in { from { opacity: 0; transform: translateY(10px); } } .tab-panel + .tab-panel { margin-top: 40px; } .js [data-sv-tabs] .tab-panel + .tab-panel { margin-top: 0; } .carte-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; color: var(--accent-text); text-decoration: none; } .carte-more:hover { color: var(--ink); } .carte-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; } .carte-foot .btn-row { margin: 0; } .note-card { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: var(--r); background: var(--accent-soft); font-size: .92rem; font-weight: 500; max-width: 640px; } .note-card .icon { flex: none; margin-top: 2px; color: var(--accent-text); } /* Menu rows (shared by home + carte page) */ .carte-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 44px; } @media (min-width: 900px) { .carte-section .carte-list { grid-template-columns: 1fr 1fr; } } .carte-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--line-strong); } .carte-item[hidden] { display: none; } .carte-main { min-width: 0; } .carte-name { margin: 0; font-family: var(--f-body); font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em; } .carte-desc { margin: 4px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; } .carte-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; } .carte-item.has-photo { justify-content: flex-start; } .carte-item.has-photo .carte-main { flex: 1; } .carte-photo { flex: none; width: 76px; height: 76px; border-radius: 16px; overflow: hidden; background: var(--surface-2); } .carte-photo img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .carte-photo { width: 84px; height: 84px; } } @media (max-width: 479px) { /* Photo, then name over description; the price moves under the text. */ .carte-item.has-photo { flex-wrap: wrap; } .carte-item.has-photo .carte-main { flex: 1 1 calc(100% - 92px); } .carte-item.has-photo .carte-price { margin-left: 92px; margin-top: -4px; } } .carte-item.is-soldout .carte-name, .carte-item.is-soldout .carte-price { opacity: .5; } .carte-item.is-soldout .carte-photo img { filter: grayscale(1); opacity: .6; } .carte-tag.tag-soldout { background: var(--ink); color: var(--bg); } .carte-price { flex: none; display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 11px; border-radius: 999px; background: var(--surface-2); font-size: .9rem; } .carte-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .01em; background: var(--surface-2); color: var(--ink); white-space: nowrap; } .carte-tag.tag-vege, .carte-tag.tag-vegetarien, .carte-tag.tag-vegan, .carte-tag.tag-vegane { background: color-mix(in oklab, #2E8B4E 15%, transparent); color: color-mix(in oklab, #2E8B4E 72%, var(--ink)); } .carte-tag.tag-epice { background: var(--ember-soft); color: color-mix(in oklab, var(--ember) 80%, var(--ink)); } .carte-tag.tag-signature { background: var(--accent-soft); color: var(--accent-text); } .carte-tag.tag-nouveau { background: color-mix(in oklab, #3B6FD9 14%, transparent); color: color-mix(in oklab, #3B6FD9 75%, var(--ink)); } .carte-tag.tag-poisson { background: color-mix(in oklab, #2F6E8F 14%, transparent); color: color-mix(in oklab, #2F6E8F 72%, var(--ink)); } mark.hit { background: var(--accent-soft); color: inherit; border-radius: 4px; padding: 0 1px; } /* ---------- Features (dark) ---------- */ .features-bg { position: absolute; inset: 0; z-index: -2; } .features-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; } .features-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--dark) 0%, color-mix(in oklab, var(--dark) 55%, transparent) 50%, var(--dark) 100%); } .feature-grid { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; } @media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .feature { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 20px; border-radius: var(--r-lg); background: rgb(255 255 255 / .05); border: 1px solid var(--on-dark-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .3s var(--ease), transform .45s var(--spring); } @media (hover: hover) { .feature:hover { background: rgb(255 255 255 / .09); transform: translateY(-4px); } } .feature-icon { grid-row: span 2; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: linear-gradient(145deg, var(--accent), color-mix(in oklab, var(--accent), var(--ember) 40%)); color: var(--dark); box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--ember) 70%, transparent); } .feature-title { font-size: var(--fs-h3); margin: 2px 0 6px; } @media (min-width: 600px) { .feature { display: block; padding: 24px; } .feature-icon { margin-bottom: 18px; } } .feature p { color: var(--on-dark-muted); margin: 0; font-size: .95rem; } /* ---------- About ---------- */ .about-grid { display: grid; gap: 48px; align-items: center; } @media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 100px); } } .about-media { position: relative; padding: 0 14% 14% 0; max-width: 560px; } .about-img img { width: 100%; object-fit: cover; border-radius: var(--r-lg); } .about-img-main img { aspect-ratio: 4 / 5; } .about-img-sub { position: absolute; right: 0; bottom: 0; width: 48%; } .about-img-sub img { aspect-ratio: 1; border: 6px solid var(--bg); border-radius: var(--r); box-shadow: var(--shadow-lg); } .about-seal { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .prose { font-size: 1.05rem; color: var(--muted); max-width: 60ch; } .signature { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font-family: var(--f-head); font-weight: 700; color: var(--accent-text); } .signature .ornament { width: 56px; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 28px 0; } .stats > div { padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); } .stats dt { font-family: var(--f-head); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; } .stats dd { margin: 6px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.3; } /* ---------- Order promo ---------- */ .promo-card { position: relative; isolation: isolate; display: grid; overflow: hidden; border-radius: calc(var(--r-lg) * 1.15); background: var(--dark); color: var(--on-dark); box-shadow: var(--shadow-lg); } .promo-card .section-title { color: var(--on-dark); } .promo-card .eyebrow { color: var(--accent); } .promo-card .section-lead { color: var(--on-dark-muted); } .promo-copy { padding: clamp(26px, 5vw, 64px); align-self: center; } .promo-copy .section-head { margin-bottom: 0; } .promo-copy .btn { margin-top: 30px; } .promo-media { position: relative; min-height: 260px; } .promo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .promo-badge { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgb(12 10 26 / .55); color: #fff; font-size: .85rem; font-weight: 700; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .promo-badge .icon { color: var(--accent); } @media (min-width: 900px) { .promo-card { grid-template-columns: 1.05fr 1fr; } .promo-media { min-height: 460px; } } .co-menu { margin-top: 8px; } /* ---------- Testimonials ---------- */ .testimonials { background: var(--surface-2); } .score { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; } .score-stars { display: inline-flex; gap: 2px; color: var(--accent-text); } .score-stars .icon { fill: currentColor; } .score strong { font-family: var(--f-head); font-size: 1.3rem; } .score span:last-child { color: var(--muted); font-size: .9rem; } .review { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; width: clamp(280px, 82vw, 390px); padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .review blockquote { margin: 0; } .review blockquote::before { content: "“"; display: block; height: .45em; margin-bottom: 10px; font-family: Georgia, serif; font-size: 4rem; line-height: 1; color: var(--accent); } .review blockquote p { font-size: 1.05rem; line-height: 1.55; } .review-by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); } .review-by > span:last-child { display: grid; line-height: 1.3; } .review-by small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; } .review-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; } /* ---------- Gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 8px; list-style: none; margin: 0; padding: 0; } .gallery-item:nth-child(8n+1), .gallery-item:nth-child(8n+6) { grid-row: span 2; } .gallery-item:nth-child(8n+4), .gallery-item:nth-child(8n+7) { grid-column: span 2; } .gallery-item a { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--r); cursor: zoom-in; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .gallery-item a:hover img { transform: scale(1.06); } .gallery-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 12px; border-radius: 999px; background: rgb(12 10 26 / .5); color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); transition: .35s var(--ease); } @media (hover: hover) { .gallery-item a:hover .gallery-cap { opacity: 1; transform: none; } } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(160px, 16vw, 230px); gap: 12px; } } /* ---------- Events ---------- */ .events-grid { display: grid; gap: 44px; align-items: center; } @media (min-width: 1024px) { .events-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 100px); } } .events-media { position: relative; padding: 0 0 14% 14%; max-width: 560px; } .events-media img { width: 100%; object-fit: cover; border-radius: var(--r-lg); } .events-img-main img { aspect-ratio: 4 / 5; } .events-img-sub { position: absolute; left: 0; bottom: 0; width: 48%; } .events-img-sub img { aspect-ratio: 1; border: 6px solid var(--bg); border-radius: var(--r); box-shadow: var(--shadow-lg); } .events-copy .btn { margin-top: 30px; } /* ---------- Reservation ---------- */ .reservation-card { display: grid; overflow: hidden; border-radius: calc(var(--r-lg) * 1.15); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .reservation-media img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .reservation-body { padding: clamp(22px, 4.5vw, 56px); } .reservation-actions { display: grid; gap: 10px; } @media (min-width: 600px) { .reservation-actions { grid-template-columns: 1fr 1fr; } } .reservation-hours { margin-top: 20px; padding: 16px 18px; border-radius: var(--r); background: var(--surface-2); } .reservation-body > .muted { margin-top: 14px; } .co-reservation { margin-top: 4px; } @media (min-width: 1024px) { .reservation-card { grid-template-columns: .9fr 1.1fr; } .reservation-media { position: relative; min-height: 360px; } .reservation-card:not(:has(.reservation-media)) { grid-template-columns: 1fr; } .reservation-media img { position: absolute; inset: 0; aspect-ratio: auto; } } /* ---------- Hours table ---------- */ .hours-table { margin: 0; display: grid; } .hours-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .93rem; } .hours-row:last-child { border-bottom: 0; } .hours-row dt { font-weight: 600; } .hours-row dd { margin: 0; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .hours-row.is-today dt, .hours-row.is-today dd { color: var(--accent-text); font-weight: 700; } .hours-compact .hours-row { padding: 6px 0; } .hours-note { margin: 10px 0 0; font-size: .84rem; color: var(--muted); } /* ---------- FAQ ---------- */ .faq-grid { display: grid; gap: 28px; } @media (min-width: 1024px) { .faq-grid { grid-template-columns: 1fr 1.6fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .faq-head { position: sticky; top: calc(var(--nav-space) + 24px); } } .faq-head .section-head { margin-bottom: 20px; } .faq-help { display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; } .faq-help > span:last-child { display: grid; line-height: 1.25; } .faq-help small { color: var(--muted); font-size: .78rem; } .faq-help .quick-icon { background: var(--accent); color: var(--accent-ink); } .faq-list { display: grid; gap: 10px; } .faq-item { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .3s var(--ease), border-color .3s; } .faq-item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 20px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.02rem; line-height: 1.35; } .faq-item summary::-webkit-details-marker { display: none; } .faq-toggle { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--surface-2); transition: transform .4s var(--spring), background-color .3s; } .faq-item[open] .faq-toggle { transform: rotate(45deg); background: var(--accent); color: var(--accent-ink); } .faq-answer { padding: 0 20px 20px; color: var(--muted); } .faq-item::details-content { block-size: 0; overflow-y: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; } .faq-item[open]::details-content { block-size: auto; } /* ---------- Journal cards ---------- */ .post-grid { display: grid; gap: 16px; } @media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } } .post-card-link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .45s var(--spring), box-shadow .45s var(--ease); } @media (hover: hover) { .post-card-link:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } } .post-card-media { display: block; overflow: hidden; background: var(--surface-2); } .post-card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1s var(--ease); } .post-card-link:hover .post-card-media img { transform: scale(1.05); } .post-card-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; color: var(--accent-text); } .post-card-body { display: grid; gap: 8px; padding: 18px 20px 22px; } .post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .post-meta a { color: var(--accent-text); text-decoration: none; } .post-card-title { font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; } .post-card-excerpt { color: var(--muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Contact & map ---------- */ .contact-grid { display: grid; gap: 16px; } @media (min-width: 1024px) { .contact-grid { grid-template-columns: .95fr 1.05fr; gap: 24px; align-items: stretch; } } .contact-cards { display: grid; gap: 10px; list-style: none; margin: 0 0 10px; padding: 0; } @media (min-width: 600px) and (max-width: 1023px) { .contact-cards { grid-template-columns: 1fr 1fr; } } .contact-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s, transform .2s; } .contact-card:hover { border-color: var(--line-strong); color: var(--ink); } .contact-card:active { transform: scale(.98); } .contact-card > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.3; } .contact-card small { color: var(--muted); font-size: .76rem; } .contact-card strong { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; } .contact-card .quick-icon { background: var(--surface-2); } .contact-chev { margin-left: auto; color: var(--muted); flex: none; } .contact-hours { padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); } .map-box { position: relative; min-height: 380px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 55%), repeating-linear-gradient(0deg, transparent 0 43px, var(--line) 43px 44px), repeating-linear-gradient(90deg, transparent 0 43px, var(--line) 43px 44px), var(--surface); } .map-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; } .map-placeholder .btn-row { margin: 0; justify-content: center; } .map-placeholder p { margin: 0; max-width: 36ch; } .map-pin { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .map-pin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--accent); opacity: .5; animation: sv-ring 2.4s var(--ease) infinite; } @keyframes sv-ring { from { transform: scale(.8); opacity: .6; } to { transform: scale(1.35); opacity: 0; } } .map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Contact page: several CodeOrder branches */ @media (min-width: 1024px) { .contact-grid.has-branches { grid-template-columns: 320px minmax(0, 1fr); } } .branches-title { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 1.25rem; letter-spacing: -.02em; } .branches-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .8rem; font-weight: 800; } .branch-list { display: grid; gap: 14px; } @media (min-width: 700px) { .branch-list { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } } .branch-card { display: grid; gap: 14px; align-content: start; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .branch-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; } .branch-head .quick-icon { background: var(--surface-2); } .branch-name { min-width: 0; display: grid; gap: 2px; } .branch-name h3 { margin: 0; font-size: 1.08rem; letter-spacing: -.01em; } .branch-badge { justify-self: start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); } .branch-status { grid-column: 1 / -1; justify-self: start; } .branch-addr { margin: 0; line-height: 1.45; } .branch-services { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .branch-services li { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); font-size: .76rem; font-weight: 600; } .branch-services .icon { color: var(--accent-text); } .branch-hours { border-top: 1px dashed var(--line-strong); padding-top: 4px; } .branch-hours summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: .9rem; } .branch-hours summary::-webkit-details-marker { display: none; } .branch-hours summary > span { flex: 1; } .branch-hours summary b { font-weight: 700; } .branch-chev { color: var(--muted); transition: transform .25s var(--ease); } .branch-hours[open] .branch-chev { transform: rotate(180deg); } .branch-hours .hours-table { padding-bottom: 6px; } /* Contact page: message form */ .write-grid { display: grid; gap: 18px; } @media (min-width: 1024px) { .write-grid { grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: start; } } .write-intro { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: var(--surface-2); } .write-intro h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.03em; } .write-intro > p { margin: 0; } .write-intro .quick-icon { background: var(--accent); color: var(--accent-ink); } .write-shortcuts { display: grid; gap: 8px; margin-top: 6px; } .write-shortcuts p { margin: 0; } .write-link { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-weight: 600; text-decoration: none; transition: border-color .25s, transform .2s; } .write-link:hover { border-color: var(--line-strong); color: var(--ink); } .write-link:active { transform: scale(.98); } .write-link span { flex: 1; } .write-link .icon:last-child { color: var(--muted); } .write-card { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } @media (min-width: 768px) { .write-card { padding: 28px; } } .contact-form { display: grid; gap: 18px; } .contact-form[aria-busy="true"] { opacity: .7; } .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cf-grid { display: grid; gap: 14px; } @media (min-width: 600px) { .cf-grid { grid-template-columns: 1fr 1fr; } .cf-wide { grid-column: 1 / -1; } } .cf-field { display: grid; gap: 6px; } .cf-field label { font-size: .85rem; font-weight: 700; } .cf-field label span { color: var(--ember); } .cf-field label small { font-weight: 500; color: var(--muted); } .cf-field input, .cf-field select, .cf-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg); font-size: 1rem; transition: border-color .2s, box-shadow .2s; } .cf-field textarea { min-height: 140px; resize: vertical; line-height: 1.5; } .cf-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .cf-field :is(input, select, textarea):focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft); } .cf-field [aria-invalid="true"] { border-color: var(--ember); box-shadow: 0 0 0 4px var(--ember-soft); } .cf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .cf-foot p { margin: 0; flex: 1 1 220px; } @media (max-width: 599px) { .cf-foot .btn { width: 100%; } } .cf-status { margin: 0; padding: 12px 14px; border-radius: 14px; font-weight: 600; font-size: .92rem; } .cf-status[hidden] { display: none; } .cf-status.is-ok { background: color-mix(in oklab, #2E8B4E 14%, transparent); color: color-mix(in oklab, #2E8B4E 75%, var(--ink)); } .cf-status.is-error { background: var(--ember-soft); color: color-mix(in oklab, var(--ember) 80%, var(--ink)); } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--section); border-radius: calc(var(--r-lg) * 1.3) calc(var(--r-lg) * 1.3) 0 0; background: var(--dark); color: var(--on-dark); font-size: .95rem; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--accent); } .footer-cta { border-bottom: 1px solid var(--on-dark-line); } .footer-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(44px, 7vw, 88px); } .footer-cta-title { margin: 0; font-family: var(--f-head); font-size: var(--fs-h2); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; max-width: 16ch; text-wrap: balance; } .footer-cta .btn-row { margin: 0; } .footer-grid { display: grid; gap: 32px; padding-block: clamp(40px, 6vw, 72px); } @media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.3fr 1.2fr 1fr .9fr; gap: 40px; } } .footer-about .brand-logo { height: 56px; } .footer-about p { margin-top: 18px; color: var(--on-dark-muted); max-width: 36ch; } .footer-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 16px; } .footer-contact { display: grid; gap: 10px; } .footer-menu, .legal-menu { list-style: none; margin: 0; padding: 0; } .footer-menu { display: grid; gap: 10px; } .site-footer .hours-row { border-color: var(--on-dark-line); } .site-footer .hours-row dd, .site-footer .hours-note { color: var(--on-dark-muted); } .site-footer .hours-row.is-today dt, .site-footer .hours-row.is-today dd { color: var(--accent); } .socials { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; } .socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--on-dark-line); transition: border-color .25s, background-color .25s; } .socials a:hover { border-color: var(--accent); background: rgb(255 255 255 / .06); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 22px; border-top: 1px solid var(--on-dark-line); font-size: .84rem; color: var(--on-dark-muted); } .footer-bottom p { margin: 0; } .legal-menu { display: flex; flex-wrap: wrap; gap: 8px 20px; } .credit a { color: var(--on-dark); font-weight: 700; } /* ========================================================================== Inner pages ========================================================================== */ .page-hero { padding-top: 12px; } .page-hero-card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); padding: 18px 0 10px; } .page-hero.has-image .page-hero-card { display: flex; align-items: flex-end; min-height: clamp(240px, 42vw, 420px); padding: 24px; color: #fff; background: var(--dark); } @media (min-width: 768px) { .page-hero.has-image .page-hero-card { padding: 40px; } } .page-hero-media { position: absolute; inset: 0; z-index: -1; } .page-hero-media img { width: 100%; height: 100%; object-fit: cover; } .page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 9 26 / .1), rgb(12 9 26 / .75)), radial-gradient(90% 60% at 20% 120%, color-mix(in oklab, var(--ember) 40%, transparent), transparent 60%); } .page-title { font-size: calc(var(--fs-h1) * .82); font-weight: 800; line-height: 1; letter-spacing: -.04em; margin: 0; max-width: 18ch; } .page-intro { margin: 14px 0 0; font-size: 1.06rem; max-width: 60ch; color: var(--muted); } .page-hero.has-image .page-intro { color: rgb(255 255 255 / .86); } .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .8rem; color: var(--muted); } .page-hero.has-image .crumbs ol { color: rgb(255 255 255 / .78); } .crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; } .crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; } /* ---------- Carte page ---------- */ .carte-toolbar { position: sticky; z-index: 20; top: calc(var(--nav-space) - 6px); padding: 10px 0 0; margin-top: 8px; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: top .45s var(--ease), border-color .3s; } .nav-hidden .carte-toolbar { top: var(--admin-bar); } .carte-toolbar.is-stuck { border-bottom-color: var(--line); } .carte-search { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s; } .carte-search:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft); } .carte-search > .icon { color: var(--muted); flex: none; } .carte-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 1rem; outline: none; } .carte-search input::-webkit-search-cancel-button { display: none; } .carte-search-clear { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); } .carte-search-clear[hidden] { display: none; } .carte-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; } .carte-filters::-webkit-scrollbar { display: none; } .filter-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .84rem; font-weight: 600; transition: .25s var(--ease); } .filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .filter-chip.tag-epice[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: #fff; } .filter-chip.tag-signature[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .filter-chip.tag-vege[aria-pressed="true"] { background: #2E8B4E; border-color: #2E8B4E; color: #fff; } .carte-index { margin-top: 4px; padding-bottom: 10px; } .carte-index .chip { height: 42px; font-size: .88rem; } .carte-index .chip-thumb { width: 32px; height: 32px; } .carte-page-grid { display: grid; gap: 32px; padding-block: 24px 16px; } @media (min-width: 1100px) { .carte-page-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; } } .carte-block { margin-bottom: 44px; scroll-margin-top: calc(var(--nav-space) + var(--toolbar-h, 190px)); } .carte-block[hidden] { display: none; } .carte-block-head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; border-radius: var(--r-lg); } .carte-block-head:not(.has-image) { padding-bottom: 12px; border-bottom: 2px solid var(--ink); border-radius: 0; } .carte-block-head.has-image { min-height: 128px; padding: 16px 20px; color: #fff; background: var(--dark); } @media (min-width: 768px) { .carte-block-head.has-image { min-height: 170px; padding: 22px 26px; } } .carte-block-img { position: absolute; inset: 0; z-index: -1; } .carte-block-img img { width: 100%; height: 100%; object-fit: cover; } .carte-block-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(12 9 26 / .78), rgb(12 9 26 / .15)); } .carte-block-title-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } .carte-block-title { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; } .carte-block-count { flex: none; height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--surface-2); } .carte-block-head.has-image .carte-block-count { background: rgb(255 255 255 / .16); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .carte-block-desc { margin: 14px 0 2px; color: var(--muted); font-size: .92rem; max-width: 72ch; } .carte-empty { padding: 36px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px dashed var(--line-strong); text-align: center; color: var(--muted); } .carte-empty[hidden] { display: none; } .carte-aside { display: grid; gap: 14px; align-content: start; } @media (min-width: 1100px) { .carte-aside { position: sticky; top: calc(var(--nav-space) + var(--toolbar-h, 190px) + 12px); } } .aside-card { display: grid; gap: 12px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .aside-card .mini-title { margin: 0; } .aside-order { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: var(--on-dark); border: 0; } .aside-order .muted { color: var(--on-dark-muted); } .aside-order .quick-icon { background: var(--accent); color: var(--accent-ink); } .aside-order .btn-ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); } .aside-title { margin: 0; font-family: var(--f-head); font-size: 1.3rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } .legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .carte-after { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); } /* ---------- Entry content (block editor) ---------- */ /* Content spans the same width as the navigation pill; running text keeps a readable measure but starts on the same left edge. */ .entry-content { max-width: none; margin-inline: 0; font-size: 1.06rem; } .entry-content > * { margin-block: 0 1.25em; } .entry-content > :is(p, h2, h3, h4, h5, h6, ul, ol, blockquote, .wp-block-quote, .wp-block-buttons, .wp-block-list, dl, pre) { max-width: 72ch; } .entry-content > *:last-child { margin-bottom: 0; } .entry-content h2 { font-size: calc(var(--fs-h2) * .78); margin-top: 1.6em; font-weight: 800; letter-spacing: -.03em; } .entry-content h3 { font-size: var(--fs-h3); margin-top: 1.4em; } .entry-content a { color: var(--accent-text); } .entry-content li { margin-bottom: .5em; } .entry-content img { border-radius: var(--r); } .entry-content figcaption { margin-top: 10px; font-size: .86rem; color: var(--muted); text-align: center; } .entry-content .alignwide { width: 100%; max-width: none; } .entry-content .alignfull { width: 100vw; max-width: none; margin-inline: 50%; transform: translateX(-50%); } .entry-content .alignfull img { border-radius: 0; } .entry-full { max-width: none; } .wp-block-quote { position: relative; margin-inline: 0; padding: 44px 24px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); } .wp-block-quote::before { content: "“"; position: absolute; top: 6px; left: 22px; font-family: Georgia, serif; font-size: 3rem; line-height: 1; color: var(--accent); } .wp-block-quote p { font-family: var(--f-head); font-size: 1.3rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; } .wp-block-quote cite { display: block; margin-top: 10px; font-size: .88rem; font-style: normal; font-weight: 600; color: var(--muted); } .wp-block-columns { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 44px); align-items: flex-start; } .wp-block-column { flex: 1 1 280px; min-width: 0; } .wp-block-column > *:first-child { margin-top: 0; } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .wp-block-button__link { display: inline-flex; align-items: center; min-height: 50px; padding: 0 1.5em; border-radius: 999px; background: var(--accent); color: var(--accent-ink) !important; font-size: .95rem; font-weight: 600; text-decoration: none; } .wp-block-button__link:hover { background: color-mix(in oklab, var(--accent), #fff 12%); } .is-style-outline .wp-block-button__link { background: transparent; color: var(--ink) !important; border: 1px solid var(--line-strong); } .wp-block-image { margin-inline: 0; } .wp-block-separator { border: 0; border-top: 1px solid var(--line); } .wp-block-table table { width: 100%; border-collapse: collapse; } .wp-block-table td, .wp-block-table th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } .wp-block-list li::marker { color: var(--accent-text); } /* ---------- Single post ---------- */ .post-hero .post-meta { margin-bottom: 12px; } .post-hero .page-title { max-width: 22ch; font-size: calc(var(--fs-h1) * .7); } .post-cover { margin-top: 20px; } .post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); } .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; } .post-tags a { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--surface-2); font-size: .84rem; text-decoration: none; } .post-navigation { max-width: 72ch; margin: 48px 0 0; } .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .post-navigation a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; } .post-navigation .nav-next { text-align: right; } .nav-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .nav-title { font-family: var(--f-head); font-size: 1.05rem; font-weight: 700; } .with-sidebar { display: grid; gap: 48px; } @media (min-width: 1024px) { .with-sidebar { grid-template-columns: minmax(0, 1fr) 300px; } .with-sidebar .entry-content { margin-inline: 0; } } .sidebar .widget { margin-bottom: 28px; } .widget-title { font-family: var(--f-body); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } /* ---------- Pagination, search, comments, 404 ---------- */ .pagination { margin-top: 48px; } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-weight: 600; } .page-numbers.current { background: var(--ink); color: var(--bg); border-color: var(--ink); } .search-form { display: flex; max-width: 480px; margin-top: 24px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .search-form input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent; font-size: 1rem; } .search-form input:focus { outline: none; } .search-form:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft); } .search-form button { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--ink); color: var(--bg); } .search-again .search-form { margin: 0 0 32px; } .empty-state { padding: 40px 0; text-align: center; } .empty-state .search-form { margin-inline: auto; } .not-found { text-align: center; } .not-found .eyebrow { justify-content: center; } .not-found .section-lead { margin-inline: auto; } .not-found .btn-row { justify-content: center; } .not-found .search-form { margin-inline: auto; } .not-found-code { display: block; font-family: var(--f-head); font-size: clamp(6rem, 22vw, 12rem); font-weight: 800; line-height: .9; letter-spacing: -.06em; color: var(--accent); } .comments { max-width: 72ch; margin: 56px 0 0; padding-top: 40px; border-top: 1px solid var(--line); } .comment-list { list-style: none; padding: 0; } .comment-list .children { list-style: none; padding-left: 24px; } .comment-body { padding: 18px 0; border-bottom: 1px solid var(--line); } .comment-author { display: flex; align-items: center; gap: 12px; font-weight: 600; } .comment-author img { border-radius: 50%; } .comment-metadata { font-size: .82rem; color: var(--muted); } .comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); } .comment-form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; } /* ========================================================================== Overlays ========================================================================== */ .lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; } .lightbox::backdrop { background: rgb(8 6 18 / .94); } .lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 16px; animation: sv-fade-in .3s var(--ease); } .lightbox figure { display: grid; justify-items: center; gap: 12px; min-width: 0; } .lightbox img { max-width: 100%; max-height: 80dvh; object-fit: contain; border-radius: var(--r); animation: sv-zoom-in .4s var(--ease); } @keyframes sv-zoom-in { from { opacity: 0; transform: scale(.96); } } .lightbox-caption { opacity: .85; text-align: center; font-size: .92rem; } .lightbox .icon-btn { background: rgb(255 255 255 / .12); color: #fff; } .lightbox .icon-btn:hover { background: rgb(255 255 255 / .22); } .lightbox-close { position: fixed; top: 16px; right: 16px; z-index: 2; } @media (max-width: 600px) { .lightbox-nav { position: fixed; bottom: 24px; } .lightbox-prev { left: 24px; } .lightbox-next { right: 24px; } .lightbox[open] { grid-template-columns: 1fr; } } .sv-global-reservation { display: contents; } /* ========================================================================== Motion ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .hero-full .hero-media img { animation: sv-hero-zoom 14s var(--ease) both; } .js .reveal { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .js .reveal.is-visible { opacity: 1; transform: none; filter: none; } .js .hero .reveal { transition-duration: 1.1s; } .js .hero-copy > .reveal:nth-child(2) { transition-delay: .08s; } .js .hero-copy > .reveal:nth-child(3) { transition-delay: .16s; } .js .hero-copy > .reveal:nth-child(4) { transition-delay: .26s; } .js .hero-copy > .reveal:nth-child(5) { transition-delay: .36s; } .js .hero-copy > .reveal:nth-child(6) { transition-delay: .46s; } /* Cross-document page transitions (opt-in rule in codeon_sv_inline_tokens). */ ::view-transition-old(root) { animation: .2s var(--ease) both sv-vt-out; } ::view-transition-new(root) { animation: .42s var(--ease) both sv-vt-in; } ::view-transition-group(sv-title) { animation-duration: .5s; animation-timing-function: var(--ease); } ::view-transition-old(sv-title), ::view-transition-new(sv-title) { height: 100%; } } @keyframes sv-hero-zoom { from { transform: scale(1.12); } to { transform: scale(1.04); } } @keyframes sv-vt-out { to { opacity: 0; transform: translateY(-10px) scale(.992); } } @keyframes sv-vt-in { from { opacity: 0; transform: translateY(18px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .hero-embers { display: none; } } /* ---------- Print ---------- */ @media print { .site-header, .topbar, .tabbar, .sheet, .footer-cta, .map-box, .carte-toolbar, .carte-aside, .lightbox, .hero-embers { display: none !important; } body { background: #fff; color: #000; padding: 0 !important; } .js .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } body:not(.has-overlay-header) .site-main { padding-top: 0; } } /* Editor palette classes */ .has-accent-color { color: var(--accent) !important; } .has-accent-background-color { background-color: var(--accent) !important; } .has-ink-color { color: var(--ink) !important; } .has-ink-background-color { background-color: var(--ink) !important; } .has-bg-color { color: var(--bg) !important; } .has-bg-background-color { background-color: var(--bg) !important; } .has-dark-color { color: var(--dark) !important; } .has-dark-background-color { background-color: var(--dark) !important; } /* ---------- CodeOrder embedded in any page ---------- The plugin's sticky search/tabs bar sticks at top:0, which would slide under the floating pill. Park it just below the pill, and let it rise to the top when the pill hides on scroll-down (body.nav-hidden, set by theme.js). */ .code-order-menu-navbar { top: calc(var(--nav-space) - 4px) !important; transition: top .45s var(--ease), background .2s ease, box-shadow .2s ease, border-radius .2s ease; } .nav-hidden .code-order-menu-navbar { top: var(--admin-bar) !important; } .entry-content > .code-order-menu-wrap, .entry-content > [class^="code-order"] { max-width: none; } /* CodeOrder focused checkout (standalone): the plugin hides the site header, so drop the room kept for it, the page title and the app tab bar, which sat under the checkout's own sticky pay bar. */ body.code-order-checkout-standalone .site-main { padding-top: 0; } body.code-order-checkout-standalone .topbar, body.code-order-checkout-standalone .page-hero, body.code-order-checkout-standalone .tabbar { display: none !important; } body.code-order-checkout-standalone .site-main > .section { padding-top: 12px; } body.code-order-checkout-standalone.has-tabbar:not(.co-x-has-bar) { padding-bottom: 0; } /* CodeOrder floating cart and AI chat bubble sit above the app tab bar instead of on top of its first and last tabs (both read --kfc-vert). */ @media (max-width: 1023px) { body.has-tabbar { --kfc-vert: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); } }