/* Theme Name: Wildflower Theme URI: https://wildflower.boston Author: Wildflower Studio Description: Editorial florist theme for Greater Boston — light, warm, botanical. Built for WooCommerce with GSAP-powered motion. Classic PHP theme, no build step. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.0 License: GPL-2.0-or-later Text Domain: wildflower WC requires at least: 8.0 WC tested up to: 9.0 */ /* ============================================================ 1. Design tokens ============================================================ */ /* Theming model ------------- The palette is split in two layers so the whole site can be re-skinned by flipping a single attribute (``), set server-side from the saved option in inc/theme-switcher.php — so every visitor sees the published theme with no flash. • BASE tokens (cream / charcoal) stay constant across every theme — the warm, editorial foundation that flowers sit on. • PER-THEME tokens (--primary + gradient stops, --accent, --accent-2, --radius-btn, --font-serif/-sans) change per theme. The dark "statement" surfaces use a single-hue gradient so they read as depth/light, never a cheap multi-colour gradient. The [data-theme="x"] blocks are GENERATED from wildflower_themes() in inc/theme-switcher.php — the single source of truth. To add a theme, add one entry there; the CSS and the remote ("pult") pick it up automatically. */ :root { /* ── Base — constant across all themes (Ivory) ── */ --background: #f5f1e9; /* warm ivory paper */ --cream: #faf7f0; /* lifted ivory surface */ --card: #ece6d9; /* recessed ivory surface */ --foreground: #232520; /* warm near-black ink */ --muted: #ebe4d6; --muted-foreground: #79726a; --border: #e4ddcc; /* Two theme accents (defaults below = Forest: a restrained monochrome — the flowers carry the colour). Generated per theme in theme-switcher.php. */ --accent: #5e7042; --accent-2: #6f8350; --accent-foreground: #f5f1e9; /* readable text on --accent (per theme) */ /* Highlight used for small text ON dark/green sections (eyebrows, numbers, prices, labels) — adds warmth/hierarchy so dark blocks aren't flat white. */ --accent-on-dark: #d4c193; --terracotta: var(--accent); /* legacy alias — follows the theme accent */ --terracotta-foreground: var(--accent-foreground); --ring: var(--accent); /* Soft neutral sage — only used inside placeholder media fallbacks. */ --sage: #cdd2c4; --sage-foreground: #232520; /* Dark "statement" colour + single-hue gradient stops (deep matcha). */ --primary: #45533a; --primary-2: #56653f; /* lighter gradient stop */ --primary-3: #2f3a25; /* darker gradient stop */ --primary-foreground: #f5f1e9; /* Soft "matcha" surface — a muted mid-tone of the theme colour, for calm feature blocks (testimonials, footer). Adapts to whatever theme is active. */ --surface-soft: color-mix(in oklab, var(--primary) 72%, var(--cream)); --surface-soft-foreground: #f5f1e9; /* Button corner radius — per theme; never a pill. */ --radius-btn: 3px; --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --radius-sm: 0.25rem; --radius-md: 0.4rem; --radius-lg: 0.625rem; --radius-xl: 0.875rem; --radius-2xl: 1.25rem; --radius-3xl: 1.75rem; --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --container: 80rem; --container-wide: 100rem; /* Single-hue "expensive" gradients: a soft radial light (studio-lit dark wall) plus a smooth one-colour linear fall-off. No second hue — depth only. */ /* Orientation matters: the DARK end sits top-left (under headings/text) for contrast; the soft "studio light" glow is pushed to the empty bottom-right. */ --primary-grad: radial-gradient(120% 120% at 86% 92%, color-mix(in oklab, var(--primary-2) 82%, white) 0%, transparent 50%), linear-gradient(145deg, var(--primary-3) 0%, var(--primary) 56%, var(--primary-2) 100%); --accent-grad: radial-gradient(130% 160% at 94% 70%, color-mix(in oklab, var(--accent) 86%, white) 0%, transparent 55%), linear-gradient(95deg, color-mix(in oklab, var(--accent) 86%, black) 0%, var(--accent) 60%); /* Fine, DESATURATED film grain (saturate 0) at very low opacity — real grain, not coloured static. Applied subtly over dark surfaces. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); } /* Theme presets ([data-theme="…"] var blocks) are GENERATED from wildflower_themes() in inc/theme-switcher.php — the single source of truth. Add a theme there, not here. */ /* ============================================================ 2. Reset & base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; border-color: var(--border); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); background-color: var(--background); color: var(--foreground); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"); } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } input, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--terracotta); color: var(--terracotta-foreground); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ============================================================ 3. Layout helpers ============================================================ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; } .container--wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: 1.5rem; } @media (min-width: 1024px) { .container, .container--wide { padding-inline: 3rem; } } .section { padding-block: clamp(4rem, 8vw, 6rem); } .eyebrow { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.28em; color: var(--muted-foreground); } .muted { color: var(--muted-foreground); } .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ 4. Buttons — editorial, animated (no pills) ============================================================ */ .btn, .btn--primary, .btn--accent, .btn--outline, .btn--ghost { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.875rem 1.75rem; border-radius: var(--radius-btn); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; user-select: none; overflow: hidden; transition: transform .3s var(--ease-luxe), background-color .3s var(--ease-luxe), color .3s var(--ease-luxe), box-shadow .3s var(--ease-luxe), border-color .3s var(--ease-luxe); } .btn--sm { padding: 0.625rem 1.25rem; font-size: 0.8125rem; } .btn--lg { padding: 1rem 2.25rem; font-size: 0.9375rem; } .btn--primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px color-mix(in oklab, var(--primary) 35%, transparent); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px color-mix(in oklab, var(--primary) 50%, transparent); } .btn--accent { background-color: var(--accent); background-image: var(--accent-grad); color: var(--terracotta-foreground); box-shadow: 0 1px 2px color-mix(in oklab, var(--accent) 40%, transparent); } .btn--accent:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px color-mix(in oklab, var(--accent) 55%, transparent); } .btn--outline { border: 1px solid color-mix(in oklab, var(--foreground) 20%, transparent); } .btn--outline:hover { border-color: var(--foreground); background: var(--foreground); color: var(--background); } .btn--ghost:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); } .btn:active, .btn--primary:active, .btn--accent:active, .btn--outline:active, .btn--ghost:active { transform: translateY(1px); } /* sheen sweep on solid buttons */ .btn--primary::before, .btn--accent::before { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transition: transform .7s var(--ease-luxe); pointer-events: none; } .btn--primary:hover::before, .btn--accent:hover::before { transform: translateX(100%); } /* arrow nudge */ .btn-arrow { transition: transform .3s var(--ease-luxe); } .btn:hover .btn-arrow, .btn--primary:hover .btn-arrow, .btn--accent:hover .btn-arrow, .btn--outline:hover .btn-arrow, .btn--ghost:hover .btn-arrow { transform: translateX(4px); } .btn-arrow svg { width: 1rem; height: 1rem; } /* ============================================================ 5. Elegant image fallback (mirrors SmartImage) ============================================================ */ .media { position: relative; overflow: hidden; background: var(--card); } .media > .media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .media img, .media video, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .media-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: var(--card); background-image: radial-gradient(120% 90% at 18% 12%, color-mix(in oklab, var(--sage) 70%, transparent) 0%, transparent 55%), radial-gradient(110% 90% at 88% 92%, color-mix(in oklab, var(--terracotta) 45%, transparent) 0%, transparent 50%), linear-gradient(135deg, color-mix(in oklab, var(--cream) 90%, var(--sage)) 0%, var(--card) 100%); } .media-fallback svg { width: 58%; max-width: 13rem; color: color-mix(in oklab, var(--foreground) 14%, transparent); } .media-fallback__label { position: absolute; bottom: .75rem; left: 1rem; font-family: var(--font-serif); font-style: italic; font-size: .875rem; color: color-mix(in oklab, var(--foreground) 25%, transparent); } /* ============================================================ 6. Motion — reveal on scroll / kinetic text ============================================================ */ /* Hidden states only apply when JS is available (the gets .js early), so if a script ever fails to load the content stays fully visible. */ .reveal { transition: opacity .9s var(--ease-luxe), transform 1s var(--ease-spring), filter .9s var(--ease-luxe); } .js .reveal { opacity: 0; transform: translateY(42px) scale(.965); filter: blur(10px); } .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* Masked, word-by-word headline reveal (the signature 2026 text motion). */ .kinetic .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .02em .04em .14em; margin: -.02em -.04em -.14em; } .kinetic .word > span { display: inline-block; transition: transform 1s var(--ease-spring); } .js .kinetic .word > span { transform: translateY(118%); } .kinetic.is-visible .word > span { transform: none; } /* Tiles assemble into place (gallery) */ .tile { transition: opacity .8s var(--ease-luxe), transform .9s var(--ease-spring), filter .8s var(--ease-luxe); } .js .tile { opacity: 0; transform: scale(.8) translateY(28px); filter: blur(6px); } .tile.is-visible { opacity: 1; transform: none; filter: none; } /* Note: the brand's entrance motion (reveals, marquee, gallery assemble) is intentionally kept even when the OS requests reduced motion, since it's gentle and central to the design. We only disable smooth scrolling. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================================ 7. Header ============================================================ */ .announce { position: relative; z-index: 50; background-color: var(--accent); background-image: var(--grain), var(--accent-grad); color: var(--accent-foreground); font-weight: 500; } .announce__inner { max-width: var(--container); margin-inline: auto; padding: .5rem 1rem; text-align: center; font-size: .8125rem; } .announce__close { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); padding: .25rem; border-radius: 999px; } .announce__close:hover { background: rgba(255,255,255,.15); } .site-header { position: sticky; top: 0; z-index: 40; transition: background-color .3s, backdrop-filter .3s, border-color .3s; border-bottom: 1px solid transparent; } body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } .site-header.is-scrolled { background: color-mix(in oklab, var(--background) 94%, transparent); backdrop-filter: blur(14px) saturate(1.1); border-bottom-color: color-mix(in oklab, var(--border) 70%, transparent); box-shadow: 0 8px 30px -22px rgba(0,0,0,.35); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; } .site-header__nav { display: none; gap: 1.75rem; align-items: center; flex: 1; justify-content: center; } .site-header__brand { text-align: left; margin-right: 1.5rem; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; } .site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-left: auto; } .nav-link { position: relative; font-size: .9rem; color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: color .2s; } .nav-link:hover, .nav-link.is-active { color: var(--foreground); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -.25rem; height: 1px; width: 0; background: var(--foreground); transition: width .3s; } .nav-link:hover::after { width: 100%; } .cart-toggle { position: relative; } .cart-toggle__count { position: absolute; top: -.5rem; right: -.5rem; display: flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; border-radius: 999px; background-color: var(--accent); background-image: var(--accent-grad); color: var(--terracotta-foreground); font-size: .6875rem; font-weight: 500; } .menu-toggle { display: inline-flex; } @media (min-width: 1024px) { .site-header__nav { display: flex; } .menu-toggle { display: none; } } .order-now { display: none; } @media (min-width: 1024px) { .order-now { display: inline-flex; } } /* mobile overlay nav */ .mobile-nav { position: fixed; inset: 0; z-index: 50; background: var(--card); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-luxe), visibility .4s; } .mobile-nav.is-open { opacity: 1; visibility: visible; } .mobile-nav__top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } .mobile-nav__brand { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; } .mobile-nav__links { display: flex; flex-direction: column; justify-content: center; flex: 1; gap: .5rem; padding-inline: 1.5rem; } .mobile-nav__links a { font-family: var(--font-serif); font-size: clamp(2rem,9vw,3rem); padding-block: .25rem; } .mobile-nav__foot { border-top: 1px solid var(--border); padding: 1.5rem; font-size: .875rem; color: var(--muted-foreground); } /* ============================================================ 8. Hero ============================================================ */ .hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem); } .hero__glow { position: absolute; right: -10rem; top: -5rem; width: 42rem; height: 42rem; border-radius: 999px; opacity: .6; filter: blur(64px); z-index: -1; background: radial-gradient(circle, color-mix(in oklab, var(--sage) 60%, transparent), transparent 70%); } .hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 7rem); align-items: center; } .hero__content { min-width: 0; max-width: 54rem; } .hero__badge { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); border-radius: 999px; padding: .375rem 1rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; color: color-mix(in oklab, var(--foreground) 45%, transparent); } .hero__badge .dot { width: .375rem; height: .375rem; border-radius: 999px; background: var(--terracotta); } .hero h1 { font-size: clamp(3.25rem, 8.8vw, 7.5rem); line-height: .9; letter-spacing: -0.045em; margin-top: clamp(1.5rem, 3vw, 2.25rem); } /* Big, bold, uppercase hero headline (reference: "FLOWERS TODAY."). */ .hero__title { text-transform: uppercase; font-weight: 700; font-size: clamp(3.75rem, 10.4vw, 8.4rem); line-height: .9; letter-spacing: -0.035em; } .hero__title.kinetic .word { padding: .04em .08em .16em; margin: -.04em -.08em -.16em; } .hero__title-accent { color: var(--accent); } .hero h1 .italic { font-style: italic; color: var(--accent-2); } .hero__lead { display: grid; justify-items: start; gap: 1.5rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); } .hero__lead p { max-width: 29rem; font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 500; line-height: 1.5; color: color-mix(in oklab, var(--foreground) 62%, transparent); } .hero__visual { min-width: 0; display: flex; justify-content: center; } .hero__media { position: relative; isolation: isolate; aspect-ratio: 4/5; width: min(100%, 38rem); border-radius: var(--radius-2xl); background: color-mix(in oklab, var(--sage) 60%, var(--cream)); box-shadow: 0 30px 70px -28px rgba(20,36,22,.38); } /* The subscription hero artwork is composed as a 4:3 banner; preserve its full frame. */ .hero__media--subscription { aspect-ratio: 4/3; } .hero__media .media-fallback { background-color: color-mix(in oklab, var(--sage) 62%, var(--cream)); background-image: radial-gradient(100% 80% at 15% 10%, color-mix(in oklab, var(--sage) 90%, transparent) 0%, transparent 66%), radial-gradient(100% 80% at 92% 92%, color-mix(in oklab, var(--terracotta) 72%, transparent) 0%, transparent 64%), linear-gradient(145deg, color-mix(in oklab, var(--cream) 55%, var(--sage)) 0%, color-mix(in oklab, var(--cream) 62%, var(--terracotta)) 100%); } .hero__media .media-fallback svg { width: 64%; max-width: 20rem; color: color-mix(in oklab, var(--primary) 30%, transparent); } .hero__media .media-fallback__label { bottom: 1.25rem; left: 1.5rem; color: color-mix(in oklab, var(--primary) 48%, transparent); } .hero__video { object-position: 50% 16%; } @media (max-width: 767px) { .hero { padding-block: 3.5rem 4.5rem; } .hero__lead .btn--lg { width: 100%; } } @media (min-width: 768px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); align-items: stretch; } .hero__visual { justify-content: flex-end; align-items: stretch; } .hero__media { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; min-height: 32rem; } .hero__media--subscription { height: auto; min-height: 0; aspect-ratio: 4/3; align-self: center; } } @media (orientation: landscape) and (min-width: 700px) and (max-height: 680px) { .hero { padding-block: 1.5rem 2.5rem; } .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .hero h1 { font-size: clamp(2.25rem, 5vw, 3.6rem); margin-top: .75rem; } .hero__lead { gap: .75rem; margin-top: .75rem; } .hero__lead p { font-size: .875rem; line-height: 1.35; } .hero__lead .btn--lg { padding: .75rem 1.5rem; font-size: .875rem; } .hero__media { width: min(100%, 18rem); } } /* ============================================================ 9. Generic grids & cards ============================================================ */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; } .section-head h2 { font-size: clamp(1.875rem, 4vw, 3rem); } .link-underline { font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; } .link-underline:hover { opacity: .7; } .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1rem; } @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1rem; } } .product-grid--3 { grid-template-columns: repeat(2,1fr); } @media (min-width: 1024px) { .product-grid--3 { grid-template-columns: repeat(3,1fr); } } .product-card { display: block; } .product-card .media { aspect-ratio: 4/5; border-radius: var(--radius-lg); } .product-card .media img { transition: transform .7s var(--ease-luxe); } .product-card:hover .media img { transform: scale(1.05); } .product-card__body { margin-top: .75rem; padding-inline: .25rem; } .product-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .product-card__name { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.2; } .product-card__price { font-size: .875rem; color: var(--muted-foreground); } .product-card__tagline { margin-top: .125rem; font-size: .875rem; color: var(--muted-foreground); } .badge { position: absolute; left: .75rem; top: .75rem; z-index: 2; border-radius: 999px; padding: .25rem .625rem; font-size: .6875rem; font-weight: 500; } .badge--primary { background: var(--primary); color: var(--primary-foreground); } .badge--accent { background-color: var(--accent); background-image: var(--accent-grad); color: var(--terracotta-foreground); } /* category row (horizontal scroll) */ .cat-row { display: flex; gap: 1rem; overflow-x: auto; padding: 0 1.5rem .5rem; } @media (min-width: 1024px){ .cat-row { padding-inline: 3rem; } } .cat-card { position: relative; flex: 0 0 auto; width: 68vw; border-radius: var(--radius-2xl); overflow: hidden; } @media (min-width: 640px){ .cat-card { width: 18rem; } } .cat-card .media { aspect-ratio: 3/4; } .cat-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--primary) 60%, transparent), transparent 60%); } .cat-card h3 { position: absolute; left: 1rem; bottom: 1rem; color: var(--primary-foreground); font-family: var(--font-serif); font-size: 1.5rem; } /* value props */ .value-props { background: var(--card); } .value-props__grid { display: grid; gap: 2.5rem; } @media (min-width: 1024px){ .value-props__grid { grid-template-columns: repeat(3,1fr); gap: 2rem; } } .value-prop h3 { font-size: 1.5rem; margin-block: .25rem; } .value-prop p { color: color-mix(in oklab, var(--foreground) 70%, transparent); } .value-prop svg { color: var(--primary); } /* subscription teaser */ .sub-teaser { display: grid; gap: 0; border-radius: var(--radius-3xl); overflow: hidden; background: color-mix(in oklab, var(--sage) 40%, var(--background)); } .sub-teaser .media { aspect-ratio: 4/3; min-width: 0; } .sub-teaser__body { min-width: 0; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem); } .sub-teaser__body h2 { max-width: 12ch; font-size: clamp(2rem,4vw,3rem); line-height: 1.02; } .sub-teaser__body .btn--primary { max-width: 100%; white-space: normal; text-align: center; } .sub-teaser__price { margin-top: 1.5rem; font-family: var(--font-serif); font-size: 1.5rem; } .sub-teaser__price .amt { color: var(--terracotta); } @media (min-width: 900px){ .sub-teaser { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; } .sub-teaser .media { aspect-ratio: auto; min-height: 32rem; } .sub-teaser__body { align-self: center; } } /* occasions bento */ .bento { display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 200px; gap: 1rem; } @media (min-width: 640px){ .bento { grid-auto-rows: 260px; } } @media (min-width: 1024px){ .bento { grid-template-columns: repeat(4,1fr); } } .bento__tile { position: relative; overflow: hidden; border-radius: var(--radius-2xl); } .bento__tile.is-big { grid-column: span 2; grid-row: span 2; } .bento__tile .media { position: absolute; inset: 0; } .bento__tile .media img { transition: transform .7s var(--ease-luxe); } .bento__tile:hover .media img { transform: scale(1.05); } .bento__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.1) 50%, transparent); } .bento__caption { position: absolute; left: 0; bottom: 0; padding: 1.25rem; color: #fff; } .bento__caption h3 { color: #fff; font-size: 1.25rem; } .bento__tile.is-big .bento__caption h3 { font-size: 2rem; } .bento__caption p { font-size: .875rem; color: rgba(255,255,255,.8); } /* how it works (dark) */ .how { position: relative; background-color: var(--primary); background-image: var(--grain), var(--primary-grad); color: var(--primary-foreground); transition: background-color .5s var(--ease-luxe); } /* Section headings must always read larger than their eyebrow. */ .how > .container > h2, .addons__head h2 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.04; } .how__grid { display: grid; gap: 2.5rem; margin-top: 3rem; } @media (min-width: 640px){ .how__grid { grid-template-columns: repeat(3,1fr); gap: 2rem; } } .how__num { font-family: var(--font-serif); font-size: clamp(3.5rem,6vw,4.5rem); color: var(--accent-on-dark); } /* Accent-on-dark hierarchy: warm highlight for small labels on dark sections. */ .how .eyebrow, .addons .eyebrow, .cta .eyebrow, .reviews .eyebrow, .site-footer .footer-cols h3 { color: var(--accent-on-dark); } .addon__price { color: var(--accent-on-dark) !important; } .reviews__rating { color: var(--accent-on-dark); } .how h3 { font-size: 1.5rem; margin-top: 1rem; } .how p { margin-top: .5rem; max-width: 20rem; color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); } /* testimonials marquee — two identical groups for a seamless, jitter-free loop */ .marquee { overflow: hidden; } .marquee__track { display: flex; width: max-content; animation: marquee 55s linear infinite; will-change: transform; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; gap: 1rem; padding-right: 1rem; } .quote-card { flex: 0 0 auto; width: 80vw; display: flex; flex-direction: column; justify-content: space-between; background: var(--card); border-radius: var(--radius-2xl); padding: 1.75rem; } @media (min-width: 640px){ .quote-card { width: 22rem; } } .quote-card blockquote { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.3; } .quote-card figcaption { margin-top: 1.5rem; font-size: .875rem; color: var(--muted-foreground); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* community grid */ .community-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 150px; gap: .75rem; } @media (min-width: 640px){ .community-grid { grid-template-columns: repeat(4,1fr); grid-auto-rows: 180px; } } .community-grid .media { border-radius: var(--radius-xl); } .community-grid .span-2 { grid-row: span 2; } /* bottom CTA */ .cta { position: relative; overflow: hidden; border-radius: var(--radius-3xl); background-color: var(--primary); background-image: var(--grain), var(--primary-grad); color: var(--primary-foreground); padding: clamp(4rem,8vw,7rem) 1.5rem; text-align: center; } .cta__glow { position: absolute; top: -6rem; left: 50%; transform: translateX(-50%); width: 34rem; height: 34rem; border-radius: 999px; opacity: .25; filter: blur(64px); background: radial-gradient(circle, color-mix(in oklab, var(--accent) 80%, white), transparent 70%); } .cta h2 { position: relative; color: var(--primary-foreground); font-size: clamp(2.25rem,6vw,4.5rem); line-height: 1.02; max-width: 48rem; margin-inline: auto; } .cta p { position: relative; margin: 1.25rem auto 0; max-width: 30rem; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); } .cta__row { position: relative; display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; margin-top: 2.25rem; } /* ============================================================ 10. Footer ============================================================ */ .site-footer { position: relative; background-color: var(--primary); background-image: var(--grain), var(--primary-grad); color: var(--primary-foreground); box-shadow: inset 0 1px 0 color-mix(in oklab, #ffffff 8%, transparent); } .site-footer__statement { color: var(--primary-foreground); } .site-footer .footer-cols h3 { color: color-mix(in oklab, var(--primary-foreground) 60%, transparent); } .site-footer .footer-cols a, .site-footer .footer-menu a { color: color-mix(in oklab, var(--primary-foreground) 78%, transparent); } .site-footer .footer-cols a:hover, .site-footer .footer-menu a:hover { color: var(--primary-foreground); } .site-footer p, .site-footer .footer-contact { color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); } .site-footer .link-underline { color: var(--primary-foreground); } .site-footer .footer-bottom { border-top-color: color-mix(in oklab, var(--primary-foreground) 18%, transparent); color: color-mix(in oklab, var(--primary-foreground) 60%, transparent); } .site-footer .footer-social a { color: color-mix(in oklab, var(--primary-foreground) 82%, transparent); border-color: color-mix(in oklab, var(--primary-foreground) 26%, transparent); } .site-footer .footer-social a:hover { color: var(--accent-foreground); background: var(--accent); border-color: var(--accent); } .site-footer .footer-legal a { color: color-mix(in oklab, var(--primary-foreground) 62%, transparent); } .site-footer .footer-legal a:hover { color: var(--primary-foreground); } .site-footer .newsletter-form { border-bottom-color: color-mix(in oklab, var(--primary-foreground) 40%, transparent); } .site-footer .newsletter-form input { color: var(--primary-foreground); } .site-footer .newsletter-form input::placeholder { color: color-mix(in oklab, var(--primary-foreground) 55%, transparent); } .site-footer .newsletter-form button { color: var(--primary-foreground); } .ig-strip { display: grid; grid-template-columns: repeat(3,1fr); } @media (min-width: 640px){ .ig-strip { grid-template-columns: repeat(6,1fr); } } .ig-strip .media { aspect-ratio: 1; } .site-footer__main { padding-block: 4rem; } .site-footer__statement { max-width: 48rem; font-size: clamp(2rem,5vw,3.75rem); line-height: 1.05; } /* Two columns on phones (never one tall stretched column), scaling up wider. */ .footer-cols { display: grid; gap: 2rem 1.5rem; margin-top: 3.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px){ .footer-cols { grid-template-columns: repeat(3,1fr); gap: 2rem 2.25rem; } } @media (min-width: 1200px){ .footer-cols { grid-template-columns: repeat(5,minmax(0,1fr)); } } .footer-cols h3 { font-family: var(--font-sans); font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-foreground); } .footer-cols ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; flex-direction: column; gap: .625rem; } .footer-cols a { font-size: .9rem; color: color-mix(in oklab, var(--foreground) 80%, transparent); } .footer-cols a:hover { color: var(--foreground); } .footer-bottom { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid var(--border); margin-top: 3.5rem; padding-top: 1.5rem; font-size: .75rem; color: var(--muted-foreground); } @media (min-width: 640px){ .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } } /* Social icons (Studio column) */ .footer-social { display: flex; gap: .6rem; margin-top: 1rem; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid color-mix(in oklab, var(--foreground) 22%, transparent); border-radius: 999px; color: color-mix(in oklab, var(--foreground) 78%, transparent); transition: color .25s var(--ease-luxe), border-color .25s, background-color .25s; } .footer-social a:hover { color: var(--accent-foreground); background: var(--accent); border-color: var(--accent); } /* Legal links in the bottom bar */ .footer-legal { display: flex; flex-wrap: wrap; gap: .35rem 1rem; } .footer-legal a { color: inherit; } .footer-legal a:hover { color: var(--foreground); } .newsletter-form { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 30%, transparent); padding-bottom: .5rem; margin-top: 1rem; } .newsletter-form input { width: 100%; background: transparent; border: none; outline: none; font-size: .9rem; } /* ============================================================ 11. Page header (inner pages) ============================================================ */ .page-header { padding-block: 2.5rem 2rem; } @media (min-width: 1024px){ .page-header { padding-block: 4rem 3rem; } } .page-header h1 { max-width: 48rem; font-size: clamp(2.25rem,5vw,3.75rem); } .page-header p { margin-top: 1.25rem; max-width: 36rem; color: color-mix(in oklab, var(--foreground) 70%, transparent); line-height: 1.6; } /* ============================================================ 12. WP nav menus, forms, misc ============================================================ */ .site-header__menu { display: flex; gap: 1.75rem; align-items: center; list-style: none; margin: 0; padding: 0; } .site-header__menu a { position: relative; font-size: .9rem; color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: color .2s; } .site-header__menu a:hover, .site-header__menu .current-menu-item > a { color: var(--foreground); } .site-header__menu a::after { content: ''; position: absolute; left: 0; bottom: -.25rem; height: 1px; width: 0; background: var(--foreground); transition: width .3s; } .site-header__menu a:hover::after { width: 100%; } .mobile-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .mobile-nav__menu a { font-family: var(--font-serif); font-size: clamp(2rem,9vw,3rem); } .footer-menu { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; } .field { display: flex; flex-direction: column; gap: .5rem; } .field label { font-size: .875rem; font-weight: 500; } .input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea, select { width: 100%; border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: var(--radius-md); padding: .75rem 1rem; font-size: .875rem; outline: none; transition: border-color .2s, background-color .2s; } .input:focus, input:focus, textarea:focus, select:focus { border-color: var(--foreground); background: var(--card); } textarea { resize: vertical; } .stack-md > * + * { margin-top: 1rem; } .stack-lg > * + * { margin-top: 1.75rem; } .italic-accent { font-style: italic; color: color-mix(in oklab, var(--foreground) 40%, transparent); } .text-accent { color: var(--terracotta); } .prose { max-width: 38rem; } .prose p + p { margin-top: 1.25rem; } .prose p { color: color-mix(in oklab, var(--foreground) 75%, transparent); line-height: 1.7; } /* ============================================================ 13. Mobile menu stagger ============================================================ */ .js .mobile-nav__menu .menu-item { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease-luxe), transform .6s var(--ease-luxe); } .mobile-nav.is-open .mobile-nav__menu .menu-item { opacity: 1; transform: none; } .mobile-nav__menu .menu-item:nth-child(1) { transition-delay: .06s; } .mobile-nav__menu .menu-item:nth-child(2) { transition-delay: .12s; } .mobile-nav__menu .menu-item:nth-child(3) { transition-delay: .18s; } .mobile-nav__menu .menu-item:nth-child(4) { transition-delay: .24s; } .mobile-nav__menu .menu-item:nth-child(5) { transition-delay: .30s; } .mobile-nav__menu .menu-item:nth-child(6) { transition-delay: .36s; } .mobile-nav__menu .menu-item:nth-child(7) { transition-delay: .42s; } .mobile-nav__menu .menu-item:nth-child(8) { transition-delay: .48s; } /* ============================================================ 14. Gallery — rich mosaic of varied tile sizes, densely packed so it fills without gaps. Tiles open in a lightbox. ============================================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 7.5rem; gap: .6rem; grid-auto-flow: dense; } .gallery-cta { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 9rem; gap: .85rem; } } @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 9.5rem; gap: 1rem; } } .gallery-grid .tile { grid-column: span 1; grid-row: span 1; position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 0; border: none; cursor: pointer; display: block; } .gallery-grid .tile.w2 { grid-column: span 2; } .gallery-grid .tile.h2 { grid-row: span 2; } .gallery-grid .tile .media-fallback { position: absolute; inset: 0; aspect-ratio: auto; transition: transform .8s var(--ease-luxe); } .gallery-grid .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-luxe); } .gallery-grid .tile:hover .media-fallback, .gallery-grid .tile:hover img { transform: scale(1.05); } /* Parallax: give media layers vertical headroom so they can drift on scroll without revealing edges. Applied on ALL screen sizes so the effect works on mobile too (JS drives it at a gentler amplitude on small screens). */ .gallery-grid .tile .media-fallback, .gallery-grid .tile img, .bento__tile .media-fallback, .bento__tile .media img { inset: -11% 0 auto 0; height: 122%; will-change: transform; } /* ============================================================ 14b. Lightbox ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: color-mix(in oklab, var(--foreground) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-luxe); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__stage { position: relative; width: min(88vw, 680px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-2xl); box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); background: var(--card); } .lightbox__stage .media-fallback, .lightbox__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; } .lightbox__close, .lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in oklab, var(--background) 92%, transparent); color: var(--foreground); box-shadow: 0 6px 20px -8px rgba(0,0,0,.4); transition: transform .2s, background-color .2s; } .lightbox__close { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; } .lightbox__btn { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; } .lightbox__btn:hover, .lightbox__close:hover { background: var(--background); } .lightbox__btn--prev { left: max(1rem, 3vw); } .lightbox__btn--next { right: max(1rem, 3vw); } .lightbox__count { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-size: .8rem; color: #fff; background: rgba(0,0,0,.45); padding: .25rem .75rem; border-radius: 999px; } /* ============================================================ 15. Colorful botanical fallback variants (more life / colour) ============================================================ */ .media-fallback--1 { background-image: radial-gradient(120% 90% at 18% 12%, color-mix(in oklab, var(--terracotta) 55%, transparent) 0%, transparent 55%), radial-gradient(110% 90% at 88% 92%, color-mix(in oklab, var(--sage) 65%, transparent) 0%, transparent 50%), linear-gradient(135deg, var(--cream), var(--card)); } .media-fallback--2 { background-image: radial-gradient(120% 90% at 80% 12%, color-mix(in oklab, var(--sage) 80%, transparent) 0%, transparent 55%), radial-gradient(110% 90% at 10% 90%, color-mix(in oklab, oklch(0.8 0.09 70) 55%, transparent) 0%, transparent 55%), linear-gradient(135deg, var(--card), var(--cream)); } .media-fallback--3 { background-image: radial-gradient(120% 90% at 20% 85%, color-mix(in oklab, oklch(0.78 0.1 15) 55%, transparent) 0%, transparent 55%), radial-gradient(110% 90% at 90% 10%, color-mix(in oklab, var(--cream) 90%, var(--terracotta)) 0%, transparent 55%), linear-gradient(135deg, color-mix(in oklab, var(--terracotta) 18%, var(--cream)), var(--card)); } .media-fallback--4 { background-image: radial-gradient(120% 90% at 85% 80%, color-mix(in oklab, oklch(0.82 0.11 95) 60%, transparent) 0%, transparent 55%), radial-gradient(110% 90% at 12% 18%, color-mix(in oklab, var(--sage) 55%, transparent) 0%, transparent 55%), linear-gradient(135deg, var(--cream), var(--card)); } .media-fallback--5 { background-image: radial-gradient(120% 90% at 15% 15%, color-mix(in oklab, oklch(0.72 0.12 330) 45%, transparent) 0%, transparent 55%), radial-gradient(110% 90% at 90% 90%, color-mix(in oklab, var(--sage) 60%, transparent) 0%, transparent 50%), linear-gradient(135deg, var(--card), var(--cream)); } /* ============================================================ X. Theming transitions + button motion ============================================================ */ /* Smooth, premium cross-fade when the theme changes live (no transition on first paint — only after the engine marks the document ready). */ .theme-ready, .theme-ready .announce, .theme-ready .how, .theme-ready .btn, .theme-ready .btn--primary, .theme-ready .btn--accent, .theme-ready .btn--outline { transition: background-color .55s var(--ease-luxe), background-image .55s var(--ease-luxe), color .55s var(--ease-luxe), border-color .55s var(--ease-luxe), box-shadow .35s var(--ease-luxe), transform .3s var(--ease-luxe); } /* Magnetic buttons — JS nudges --mx/--my toward the cursor; CSS applies it so it composes with the existing hover lift. Subtle on purpose. */ .btn--magnetic { will-change: transform; } .btn--magnetic { transform: translate(var(--mx, 0), var(--my, 0)); } .btn--magnetic:hover { transform: translate(var(--mx, 0), calc(var(--my, 0) - 2px)); } /* Pulsing halo for the single most important CTA (opt-in: .btn--pulse). Animates the button's own box-shadow so the ring is never clipped by the button's overflow:hidden (which the sheen needs). */ .btn--pulse { animation: wf-pulse 2.6s var(--ease-luxe) infinite; } @keyframes wf-pulse { 0% { box-shadow: 0 1px 2px color-mix(in oklab, var(--accent) 40%, transparent), 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); } 70% { box-shadow: 0 1px 2px color-mix(in oklab, var(--accent) 40%, transparent), 0 0 0 16px color-mix(in oklab, var(--accent) 0%, transparent); } 100% { box-shadow: 0 1px 2px color-mix(in oklab, var(--accent) 40%, transparent), 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .btn--pulse { animation: none; } } /* ============================================================ X2. Homepage rebuild — new sections (P8) ============================================================ */ /* Alternating surface for rhythm. */ .section--alt { background: var(--card); } /* Hero additions */ .hero__cta { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; } .hero__trust { display: flex; flex-wrap: wrap; align-items: center; row-gap: .35rem; font-size: .85rem; color: color-mix(in oklab, var(--foreground) 58%, transparent); } .hero__trust-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } .hero__trust-item:not(:last-child)::after { content: '·'; margin-inline: .85rem; color: color-mix(in oklab, var(--foreground) 30%, transparent); } .hero__stars { color: var(--accent); letter-spacing: 1px; } .hero__rating strong { color: var(--foreground); font-weight: 700; } .hero__trust-sub { color: color-mix(in oklab, var(--foreground) 48%, transparent); } /* Hero floating cards (price tag + rating chip) over the media */ .hero__visual { position: relative; } .hero__float { position: absolute; left: clamp(.5rem, 2vw, 1.25rem); bottom: clamp(.5rem, 2vw, 1.25rem); display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem .7rem 1rem; background: color-mix(in oklab, var(--cream) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); border-radius: var(--radius-xl); box-shadow: 0 18px 44px -20px rgba(0,0,0,.4); } .hero__float-text { display: flex; flex-direction: column; line-height: 1.2; } .hero__float-name { font-size: .8rem; font-weight: 600; } .hero__float-price { font-family: var(--font-serif); font-size: 1.05rem; color: var(--accent); } .hero__float-plus { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; color: var(--accent-foreground); background-color: var(--accent); background-image: var(--accent-grad); } .hero__chip { position: absolute; right: clamp(.5rem, 2vw, 1.25rem); top: clamp(.5rem, 2vw, 1.25rem); display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .75rem; font-size: .72rem; font-weight: 600; background: color-mix(in oklab, var(--cream) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); border-radius: 999px; box-shadow: 0 10px 26px -14px rgba(0,0,0,.35); } .hero__chip-star { color: var(--accent); } /* 4 · Trust strip */ .trust-strip { border-block: 1px solid var(--border); background: color-mix(in oklab, var(--cream) 60%, var(--background)); } .trust-strip__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; padding-block: 1.5rem; } .trust-strip__item { display: flex; align-items: center; gap: .85rem; } .trust-strip__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; color: var(--accent); background: color-mix(in oklab, var(--accent) 13%, transparent); } .trust-strip__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .trust-strip__item strong { font-size: .9rem; } .trust-strip__item em { font-style: normal; font-size: .78rem; color: var(--muted-foreground); } @media (max-width: 767px) { .trust-strip__row { gap: 1.25rem .85rem; } .trust-strip__item { gap: .75rem; align-items: flex-start; } .trust-strip__item strong { font-size: .98rem; line-height: 1.1; } .trust-strip__item em { font-size: .84rem; line-height: 1.25; } } @media (min-width: 768px) { .trust-strip__row { grid-template-columns: repeat(4, 1fr); gap: 2rem; } .trust-strip__item + .trust-strip__item { position: relative; } .trust-strip__item + .trust-strip__item::before { content: ''; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%); height: 2.25rem; width: 1px; background: var(--border); } } /* 5 · Asymmetric bento (desktop) */ @media (min-width: 768px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 184px; } .bento__tile.is-big { grid-column: span 2; grid-row: span 2; } } /* 6 · Bestsellers — horizontal scroller (3 shown, 6 total) */ .scroller__nav { display: flex; align-items: center; gap: .5rem; } .scroller__arrow { display: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground); transition: background-color .25s var(--ease-luxe), color .25s, border-color .25s, opacity .25s; } .scroller__arrow:hover { background: var(--foreground); color: var(--background); border-color: var(--foreground); } .scroller__arrow:disabled { opacity: .35; cursor: default; } .scroller__arrow:disabled:hover { background: none; color: var(--foreground); border-color: var(--border); } .scroller__nav .link-underline { margin-left: .5rem; } @media (min-width: 700px) { .scroller__arrow { display: inline-flex; } } .scroller__viewport { position: relative; } .products--scroll { display: flex; gap: clamp(1rem, 2vw, 1.5rem); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-block: .25rem; scroll-padding-left: 1.5rem; } .products--scroll::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .products--scroll { scroll-padding-left: 3rem; } } /* Woo outputs ul.products > li.product; keep that list as the horizontal track. */ .products--scroll ul.products { display: flex !important; gap: clamp(1rem, 2vw, 1.5rem); flex: 0 0 auto; width: max-content; max-width: none; margin: 0 !important; padding: 0; list-style: none; } .products--scroll li.product, .products--scroll > .product { flex: 0 0 min(80vw, 22rem) !important; width: min(80vw, 22rem) !important; max-width: none !important; margin: 0 !important; float: none; clear: none; scroll-snap-align: start; } @media (min-width: 700px) { .products--scroll li.product, .products--scroll > .product { flex-basis: clamp(14rem, 28vw, 23rem) !important; width: clamp(14rem, 28vw, 23rem) !important; } } /* ── Editorial product card (used in the scroller AND the shop grid) ── */ .product { position: relative; } .product__media { position: relative; display: block; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); } .product__media img, .product__media .media-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-luxe); } .product:hover .product__media img, .product:hover .product__media .media-fallback { transform: scale(1.05); } /* Hover label (desktop): gradient + "View bouquet". Visual only — it never captures pointer events, so the card's tap-to-open and the slider swipe work underneath it. Navigation comes from the media tap (JS) and the title link. */ .product__view { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1rem 1.1rem; z-index: 1; color: #fff; font-weight: 600; font-size: .95rem; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 58%); opacity: 0; transition: opacity .45s var(--ease-luxe); } .product__view span { transform: translateY(10px); transition: transform .45s var(--ease-luxe); } .product:hover .product__view { opacity: 1; } .product:hover .product__view span { transform: none; } @media (hover: none) { .product__view { display: none; } } /* Product card title as a link — inherit the card's ink, no underline. */ .product__info .woocommerce-loop-product__title a { color: inherit; text-decoration: none; } .product__media[data-href] { cursor: pointer; } /* Per-card photo slider (featured + gallery). Native swipe on touch, arrows on desktop hover, dots track the position. Sits inside .product__media. */ .card-slider { position: absolute; inset: 0; } .card-slider__track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .card-slider__track::-webkit-scrollbar { display: none; } .card-slider__slide { position: relative; flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; } .card-slider__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-luxe); } .card-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 999px; cursor: pointer; padding: 0; opacity: .92; background: color-mix(in oklab, #ffffff 92%, transparent); color: var(--foreground); box-shadow: 0 3px 12px rgba(0,0,0,.28); transition: opacity .25s var(--ease-luxe), background-color .25s; } .card-slider__arrow--prev { left: .5rem; } .card-slider__arrow--next { right: .5rem; } .card-slider__arrow:disabled { opacity: 0; pointer-events: none; } .card-slider__arrow:hover:not(:disabled) { background: #fff; } .card-slider__dots { position: absolute; left: 0; right: 0; bottom: .55rem; z-index: 3; display: flex; gap: .3rem; justify-content: center; pointer-events: none; } .card-slider__dot { width: 5px; height: 5px; border-radius: 999px; background: color-mix(in oklab, #ffffff 55%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: background-color .25s, width .25s var(--ease-luxe); } .card-slider__dot.is-active { background: #fff; width: 13px; } /* Arrows show on every device so it's obvious the photos flip; phones can also swipe. On desktop they brighten on card hover. */ .product:hover .card-slider__arrow:not(:disabled) { opacity: 1; } @media (min-width: 768px) { .card-slider__arrow { width: 2.2rem; height: 2.2rem; } } .product__media .badge--accent { position: absolute; top: .7rem; left: .7rem; z-index: 2; } /* Body — name + price on the left, circular add button on the right (under the photo). */ .product__body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; } .product__info { min-width: 0; } .product__body .woocommerce-loop-product__title { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.2; } .product__body .price { display: block; color: var(--accent); font-weight: 600; font-size: 1.05rem; margin-top: .15rem; } .product__body .price del { color: var(--muted-foreground); font-weight: 400; margin-right: .35rem; } .product__body .button { position: relative; flex: 0 0 auto; width: 2.6rem !important; height: 2.6rem; min-width: 0 !important; padding: 0 !important; border-radius: 999px !important; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in oklab, var(--accent) 58%, var(--border)) !important; font-size: 0 !important; line-height: 0; transform: translateX(-5px); box-shadow: none; transition: transform .25s var(--ease-luxe), background-color .25s var(--ease-luxe), border-color .25s var(--ease-luxe), color .25s var(--ease-luxe); } .product__body .button::before { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; font-weight: 400; line-height: 1; transform: translateY(-.04em); } .product__body .button:hover { transform: translateX(-5px) scale(1.06); background: color-mix(in oklab, var(--accent) 9%, transparent) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* Right-edge fade + hint signal that the row scrolls. */ .scroller__fade { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(2rem, 6vw, 5rem); pointer-events: none; background: linear-gradient(90deg, transparent, var(--card)); } .scroller.is-end .scroller__fade { opacity: 0; transition: opacity .3s; } .scroller__hint { display: block; text-align: right; padding: .75rem 1.5rem 0; font-size: .78rem; letter-spacing: .04em; color: var(--muted-foreground); } @media (min-width: 1024px) { .scroller__hint { padding-inline: 3rem; } } .scroller.is-end .scroller__hint { opacity: .4; } /* 7 · Complete the gift — add-ons (dark statement) */ .addons { position: relative; background-color: var(--primary); background-image: var(--grain), var(--primary-grad); color: var(--primary-foreground); border-radius: 0; } .addons__inner { display: grid; gap: 2rem; justify-items: start; } .addons__lead { margin-top: 1rem; max-width: 30rem; color: color-mix(in oklab, var(--primary-foreground) 78%, transparent); line-height: 1.6; } .addons__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; } .addon { min-width: 0; display: flex; flex-direction: column; gap: .5rem; min-height: 12rem; padding: 1.25rem; border: 1px solid color-mix(in oklab, var(--primary-foreground) 18%, transparent); border-radius: var(--radius-xl); background: color-mix(in oklab, var(--primary-foreground) 6%, transparent); transition: transform .3s var(--ease-luxe), background-color .3s var(--ease-luxe), border-color .3s var(--ease-luxe); } .addon:hover { transform: translateY(-3px); background: color-mix(in oklab, var(--primary-foreground) 11%, transparent); border-color: color-mix(in oklab, var(--accent) 60%, transparent); } .addon svg { color: var(--accent); } .addon__image { width: clamp(4.25rem, 13vw, 6rem); height: clamp(4.25rem, 13vw, 6rem); object-fit: cover; border-radius: .7rem; margin-bottom: auto; background: color-mix(in oklab, var(--primary-foreground) 8%, transparent); } .addon__name { font-family: var(--font-serif); font-size: 1.1rem; margin-top: .25rem; } .addon__price { font-size: .85rem; color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); } /* Mobile: keep a 2x2 grid. Inside each card, name + price sit in their own grid column on the LEFT and the image in its own column on the RIGHT — because they are separate tracks, the text can never touch or overlap the image, and the name is sized (and allowed to break as a last resort) so it always fits. */ @media (max-width: 767px) { .addons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; } .addon { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name image' 'price image'; align-items: center; column-gap: .7rem; row-gap: .1rem; min-height: 0; padding: 1rem 1.05rem; } .addon__name { grid-area: name; align-self: end; margin-top: 0; font-size: clamp(.9rem, 3.4vw, 1.05rem); line-height: 1.15; overflow-wrap: break-word; hyphens: auto; } .addon__price { grid-area: price; align-self: start; } .addon__image { grid-area: image; margin: 0; align-self: center; width: clamp(2.25rem, 10vw, 3rem); height: clamp(2.25rem, 10vw, 3rem); } } /* PC / tablet: a horizontal scroller of add-on cards (head above, CTA below). */ @media (min-width: 768px) { .addons__grid { grid-template-columns: none; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1.25rem; padding-bottom: .85rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--accent) 55%, transparent) transparent; scroll-padding-left: 0; /* Soft fade on the right so the clipped last card melts out instead of being hard-cut — hints there's more to scroll without a harsh edge. */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent 100%); } .addon { flex: 0 0 clamp(16rem, 26vw, 20rem); scroll-snap-align: start; min-height: clamp(13rem, 18vw, 16rem); padding: clamp(1.5rem, 2.5vw, 2rem); } .addon__image { width: clamp(5rem, 7vw, 7rem); height: clamp(5rem, 7vw, 7rem); } .addon__name { font-size: 1.3rem; } } /* Add-ons scroller arrows (same control as Bestsellers, restyled for the dark section). Hidden on phones, where the layout is a 2x2 grid, not a scroller. The arrows sit in the footer row, on the RIGHT, opposite the CTA button — next to where the last card is clipped, hinting there's more to scroll. */ .addons__foot { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; } .addons__nav { margin-top: 0; } .addons .scroller__arrow { display: none; border-color: color-mix(in oklab, var(--primary-foreground) 40%, transparent); color: var(--primary-foreground); } .addons .scroller__arrow:hover { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); } .addons .scroller__arrow:disabled:hover { background: none; color: var(--primary-foreground); border-color: color-mix(in oklab, var(--primary-foreground) 40%, transparent); } @media (min-width: 768px) { .addons .scroller__arrow { display: inline-flex; } } /* Buttons ON the dark green (matcha) sections. A green accent button on a green section loses all contrast, so on these blocks swap the green gradient for a warm champagne (the same gold used for eyebrows/prices here) with dark-green text — clear and elegant, never garish. */ .addons .btn--accent, .cta .btn--accent, .how .btn--accent { background-image: none; background-color: var(--accent-on-dark); color: var(--primary-3); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .addons .btn--accent:hover, .cta .btn--accent:hover, .how .btn--accent:hover { background-color: color-mix(in oklab, var(--accent-on-dark) 88%, white); color: var(--primary-3); box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .5); } .addons .btn--accent .btn-arrow, .cta .btn--accent .btn-arrow, .how .btn--accent .btn-arrow { color: var(--primary-3); } /* Phones: the "Browse add-ons" button (no scroller arrows here) sits centered and reads as an outline, not a filled block. */ @media (max-width: 767px) { .addons__foot { justify-content: center; } .addons__foot .btn--accent { background: transparent; background-image: none; border: 1px solid color-mix(in oklab, var(--primary-foreground) 55%, transparent); color: var(--primary-foreground); box-shadow: none; } .addons__foot .btn--accent .btn-arrow { color: var(--primary-foreground); } .addons__foot .btn--accent:hover { background: color-mix(in oklab, var(--primary-foreground) 12%, transparent); } } /* 10 · Our story */ .story { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .story__media { aspect-ratio: 5/4; border-radius: var(--radius-3xl); overflow: hidden; min-width: 0; } .story__body { min-width: 0; } .story__body h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 16ch; } .story__text { margin-top: 1.25rem; max-width: 34rem; color: color-mix(in oklab, var(--foreground) 75%, transparent); line-height: 1.65; } .story__stats { display: flex; flex-wrap: wrap; gap: 2.25rem; margin-top: 2rem; } .story__stats strong { display: block; font-family: var(--font-serif); font-size: 1.9rem; color: var(--accent); line-height: 1; } .story__stats span { font-size: .8rem; color: var(--muted-foreground); } @media (min-width: 860px) { .story { grid-template-columns: 1fr 1fr; } } /* 11 · Delivery */ .delivery { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 860px) { .delivery { grid-template-columns: .95fr 1.05fr; } } .delivery__body h2 { font-size: clamp(2rem, 4vw, 3rem); } .delivery__lead { margin-top: 1.25rem; max-width: 32rem; color: color-mix(in oklab, var(--foreground) 72%, transparent); line-height: 1.6; } .delivery__facts { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; margin: 1.75rem 0 1.5rem; } .delivery__facts strong { display: block; font-family: var(--font-serif); font-size: 1.4rem; color: var(--accent); line-height: 1.1; } .delivery__facts span { font-size: .82rem; color: var(--muted-foreground); } .zones { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .65rem; } .zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); } .zone span { font-size: .95rem; } .zone em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--accent); white-space: nowrap; } .cutoff { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; padding: .6rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; font-size: .9rem; background: var(--cream); } .cutoff svg { color: var(--accent); } .cutoff strong { color: var(--accent); } .delivery__map { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-3xl); overflow: hidden; background-color: var(--card); background-image: radial-gradient(120% 100% at 30% 20%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%), radial-gradient(120% 100% at 80% 90%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 55%), linear-gradient(140deg, var(--cream), var(--card)); } .delivery__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .delivery__pin { position: absolute; left: 50%; top: 46%; width: 18px; height: 18px; transform: translate(-50%,-50%); border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 28%, transparent), 0 0 0 14px color-mix(in oklab, var(--accent) 14%, transparent); } .delivery__map .media-fallback__label { position: absolute; bottom: 1rem; left: 1.25rem; } /* 12 · Reviews — accent stars */ .quote-card__stars { color: var(--accent); letter-spacing: 2px; font-size: .9rem; margin-bottom: .75rem; } /* 11 · Reviews — contained 3-up grid (aligns with every other section). */ .reviews-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } } .reviews-grid .quote-card { width: auto; flex: initial; border: 1px solid var(--border); } /* Phones: swipeable row instead of a tall stack (next card peeks). */ @media (max-width: 767px) { .reviews-grid { display: flex; grid-template-columns: none; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .4rem; } .reviews-grid::-webkit-scrollbar { display: none; } .reviews-grid .quote-card { flex: 0 0 82%; width: auto; scroll-snap-align: start; } } /* Matcha testimonial block — calm sage surface, light text (reference look). */ .reviews { position: relative; background-color: var(--surface-soft); background-image: var(--grain); color: var(--surface-soft-foreground); } .reviews .eyebrow { color: color-mix(in oklab, var(--surface-soft-foreground) 72%, transparent); } .reviews h2 { color: var(--surface-soft-foreground); } .reviews .reviews__rating { color: var(--surface-soft-foreground); opacity: .9; } .reviews .reviews-grid .quote-card { background: color-mix(in oklab, #ffffff 9%, transparent); border: 1px solid color-mix(in oklab, #ffffff 16%, transparent); color: var(--surface-soft-foreground); backdrop-filter: blur(2px); } .reviews .quote-card blockquote { color: var(--surface-soft-foreground); } .reviews .quote-card figcaption { color: color-mix(in oklab, var(--surface-soft-foreground) 72%, transparent); } .reviews .quote-card figcaption strong { color: var(--surface-soft-foreground) !important; } .reviews .quote-card__stars { color: color-mix(in oklab, var(--surface-soft-foreground) 55%, var(--accent)); } /* ============================================================ X3. Mobile sticky action bar (phones only) ============================================================ */ .mobile-bar { position: fixed; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom, 0px)); z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; background: color-mix(in oklab, var(--background) 90%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 18px 36px -22px rgba(0,0,0,.45); transform: translateY(calc(100% + 1.5rem)); transition: transform .45s var(--ease-luxe); } .mobile-bar.is-visible { transform: none; } .mobile-bar__info { display: flex; flex-direction: column; line-height: 1.2; } .mobile-bar__label { font-family: var(--font-serif); font-size: 1.05rem; } .mobile-bar__price { font-size: .74rem; color: var(--muted-foreground); } .mobile-bar .btn--accent { white-space: nowrap; } @media (max-width: 767px) { .mobile-bar { display: flex; } body { padding-bottom: 5.75rem; } .site-footer { padding-bottom: 4.5rem; } } /* ============================================================ X4. Header — world-class refinement ============================================================ */ .announce__inner { padding: .55rem 1rem; font-size: .76rem; letter-spacing: .04em; font-weight: 500; } /* Primary nav (the real menu output by wildflower_nav). */ .site-header__menu { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; } .site-header__menu li { margin: 0; } .site-header__menu a { position: relative; font-size: .875rem; font-weight: 500; letter-spacing: -.01em; color: color-mix(in oklab, var(--foreground) 66%, transparent); transition: color .2s var(--ease-luxe); } .site-header__menu a:hover, .site-header__menu .current-menu-item > a { color: var(--foreground); } .site-header__menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 1.5px; width: 0; margin-inline: auto; background: var(--accent); border-radius: 2px; transition: width .3s var(--ease-luxe); } .site-header__menu a:hover::after, .site-header__menu .current-menu-item > a::after { width: 100%; } /* ---- Shop dropdown: live catalog categories ---- */ .site-header__menu .menu-item--has-children { position: relative; } .site-header__menu .menu-item__link { display: inline-flex; align-items: center; gap: .28rem; } .menu-caret { opacity: .65; transition: transform .25s var(--ease-luxe); } .site-header__menu .menu-item--has-children:hover .menu-caret, .site-header__menu .menu-item--has-children:focus-within .menu-caret { transform: rotate(180deg); } /* Invisible bridge across the gap so the panel stays open on the way down. */ .site-header__menu .menu-item--has-children::before { content: ''; position: absolute; top: 100%; left: -.5rem; right: -.5rem; height: 1.1rem; } .site-header__menu .submenu { position: absolute; top: 100%; left: 50%; margin-top: .7rem; padding: .5rem; transform: translateX(-50%) translateY(8px); min-width: 13.5rem; list-style: none; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 22px 46px -22px rgba(0, 0, 0, .38); display: grid; gap: .05rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s var(--ease-luxe), transform .24s var(--ease-luxe), visibility .24s; z-index: 70; } .site-header__menu .menu-item--has-children:hover .submenu, .site-header__menu .menu-item--has-children:focus-within .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .site-header__menu .submenu a { display: block; padding: .5rem .7rem; border-radius: var(--radius-md); font-size: .875rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 78%, transparent); transition: background-color .2s, color .2s; } .site-header__menu .submenu a::after { display: none; } .site-header__menu .submenu a:hover { background: var(--muted); color: var(--foreground); } .site-header__menu .submenu__all { margin-top: .2rem; border-top: 1px solid var(--border); padding-top: .3rem; } .site-header__menu .submenu__all a { color: var(--accent); font-weight: 600; } /* Mobile: categories sit indented under Shop (menu is a full-screen list). */ .mobile-nav__menu .menu-item__link { display: inline-flex; align-items: center; gap: .4rem; } .mobile-nav__menu .menu-caret { display: none; } .mobile-nav__menu .submenu { list-style: none; margin: .5rem 0 .7rem; padding-left: .15rem; display: flex; flex-direction: column; gap: .45rem; } .mobile-nav__menu .submenu a { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 70%, transparent); } .mobile-nav__menu .submenu__all a { color: var(--accent); font-weight: 600; } /* Action icons (search / account / cart / burger). */ .site-header__actions { gap: .15rem; } .header-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; color: color-mix(in oklab, var(--foreground) 72%, transparent); transition: background-color .2s var(--ease-luxe), color .2s var(--ease-luxe); } .header-icon:hover { background: color-mix(in oklab, var(--foreground) 7%, transparent); color: var(--foreground); } /* Small, crisp cart badge with a ring so it reads off the icon. */ .cart-toggle__count { position: absolute; top: .25rem; right: .2rem; display: flex; align-items: center; justify-content: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .22rem; border-radius: 999px; background: var(--accent); background-image: none; color: var(--accent-foreground); font-size: .6rem; font-weight: 700; line-height: 1; border: 2px solid var(--background); } .site-header.is-scrolled .cart-toggle__count { border-color: color-mix(in oklab, var(--background) 92%, transparent); } /* Collapsible search panel. */ .header-search { display: grid; grid-template-rows: 0fr; overflow: hidden; background: color-mix(in oklab, var(--background) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid transparent; transition: grid-template-rows .4s var(--ease-luxe), border-color .4s; } .site-header.search-open .header-search { grid-template-rows: 1fr; border-top-color: color-mix(in oklab, var(--border) 60%, transparent); } .header-search__form { min-height: 0; display: flex; align-items: center; gap: .75rem; max-width: var(--container); margin-inline: auto; padding: 0 1.5rem; } .site-header.search-open .header-search__form { padding-block: 1rem; } @media (min-width: 1024px) { .header-search__form { padding-inline: 3rem; } } .header-search__form svg { color: var(--muted-foreground); flex: 0 0 auto; } .header-search__form input[type="search"] { flex: 1; border: 0; background: transparent; font-size: 1.05rem; font-family: var(--font-serif); padding: .25rem 0; outline: none; } /* ============================================================ X5. Quiet luxury — refined shadows + editorial details ============================================================ */ :root { --shadow-soft: 0 28px 64px -34px rgba(35,37,32,.30), 0 10px 24px -18px rgba(35,37,32,.18); --shadow-card: 0 18px 44px -28px rgba(35,37,32,.24); } /* Editorial "kicker" rule before every section eyebrow. */ .eyebrow { display: inline-flex; align-items: center; gap: .7rem; } .eyebrow::before { content: ''; flex: 0 0 auto; width: 1.75rem; height: 1px; background: currentColor; opacity: .45; } /* Soft, layered shadows on the key surfaces (depth without heaviness). */ .sub-teaser { box-shadow: var(--shadow-soft); } .delivery__map { box-shadow: var(--shadow-card); } .reviews-grid .quote-card { box-shadow: var(--shadow-card); } .bento__tile { box-shadow: var(--shadow-card); transition: transform .5s var(--ease-luxe), box-shadow .5s var(--ease-luxe); } .bento__tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } .product__media { box-shadow: var(--shadow-card); } /* Hairline shine on dark statement surfaces for a crafted edge. */ .addons, .how, .cta { box-shadow: inset 0 1px 0 color-mix(in oklab, #ffffff 8%, transparent); } /* ============================================================ X6. Delivery page ============================================================ */ .page-hero { padding-top: clamp(2.5rem, 5vw, 4rem); } .page-hero__title { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: .98; letter-spacing: -0.03em; max-width: 18ch; margin-top: .75rem; } .page-hero__lead { margin-top: 1.25rem; max-width: 42rem; font-size: clamp(1rem, 1.4vw, 1.15rem); color: color-mix(in oklab, var(--foreground) 70%, transparent); line-height: 1.6; } .page-hero__facts { display: flex; flex-wrap: wrap; gap: 1.75rem 2.75rem; margin-top: 2rem; } .page-hero__facts strong { display: block; font-family: var(--font-serif); font-size: 1.9rem; color: var(--accent); line-height: 1; } .page-hero__facts span { font-size: .8rem; color: var(--muted-foreground); } .deliv-rule__inner { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 860px) { .deliv-rule__inner { grid-template-columns: 1fr 1fr; gap: 3rem; } } .deliv-rule__title { color: var(--primary-foreground); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02; margin-top: .5rem; } .deliv-rule__text { color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); line-height: 1.7; max-width: 34rem; } /* How-it-works on a LIGHT surface: numbers in accent (not the on-dark champagne) */ .how__grid--light { display: grid; gap: 2.5rem; margin-top: 1rem; } @media (min-width: 640px) { .how__grid--light { grid-template-columns: repeat(3,1fr); gap: 2rem; } } .how__grid--light .how__num { color: var(--accent); } .how__grid--light h3 { font-size: 1.2rem; margin-top: .25rem; } .how__grid--light p { color: color-mix(in oklab, var(--foreground) 70%, transparent); line-height: 1.6; margin-top: .4rem; } /* Zones & pricing list */ .price-zones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .price-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem .25rem; border-bottom: 1px solid var(--border); } .price-zone__name { font-size: 1.02rem; } .price-zone__meta { display: inline-flex; align-items: center; gap: 1rem; flex: 0 0 auto; } .price-zone__badge { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .65rem; white-space: nowrap; } .price-zone__badge.is-same { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); } .price-zone__fee { font-family: var(--font-serif); font-size: 1.25rem; color: var(--accent); min-width: 3rem; text-align: right; } .price-zones__note { margin-top: 1.25rem; max-width: 42rem; font-size: .9rem; line-height: 1.6; } /* Neighborhoods grid (GEO) */ .neigh-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; } @media (min-width: 640px) { .neigh-grid { grid-template-columns: repeat(4, 1fr); } } .neigh { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: .9rem; } .neigh::before { content: ''; width: .4rem; height: .4rem; border-radius: 999px; background: var(--accent); flex: 0 0 auto; } /* FAQ (AEO) */ .faq-wrap { max-width: 52rem; } .faq { border-top: 1px solid var(--border); } .faq__item { border-bottom: 1px solid var(--border); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.2rem 0; font-family: var(--font-serif); font-size: 1.15rem; color: var(--foreground); } .faq__q::-webkit-details-marker { display: none; } .faq__icon { position: relative; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--accent); transition: transform .3s var(--ease-luxe), opacity .3s; } .faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); } .faq__icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); } .faq__item[open] .faq__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); } .faq__a { padding: 0 0 1.3rem; max-width: 44rem; } .faq__a p { color: color-mix(in oklab, var(--foreground) 72%, transparent); line-height: 1.7; } /* Delivery zone row: name + area subtext on the left */ .price-zone__name { display: flex; flex-direction: column; gap: .2rem; } .price-zone__areas { font-style: normal; font-size: .8rem; color: var(--muted-foreground); } /* Delivery — region tiers + chips + rate ladder */ .deliv-tiers { display: grid; gap: 0; } .deliv-tier { padding-block: 1.75rem; border-top: 1px solid var(--border); } .deliv-tier:first-child { border-top: 0; padding-top: .5rem; } .deliv-tier__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .9rem; margin-bottom: 1.1rem; } .deliv-tier__name { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1; } .deliv-tier__rate { font-family: var(--font-serif); font-size: 1.15rem; color: var(--accent); } .deliv-tier__badge { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .6rem; } .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; } .chip { font-size: .82rem; color: color-mix(in oklab, var(--foreground) 80%, transparent); background: var(--background); border: 1px solid var(--border); border-radius: 999px; padding: .42rem .85rem; transition: border-color .2s, color .2s; } .chip:hover { border-color: color-mix(in oklab, var(--accent) 50%, transparent); color: var(--foreground); } .rates { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .rate { font-family: var(--font-serif); font-size: 1.05rem; color: var(--accent); background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .6rem 1.05rem; min-width: 3.4rem; text-align: center; } /* ============================================================ X7. Subscriptions page ============================================================ */ .page-hero__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; } /* Plan cards */ .plans { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .plan { position: relative; display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 2rem 1.75rem; transition: transform .4s var(--ease-luxe), box-shadow .4s var(--ease-luxe); } .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .plan--featured { border-color: color-mix(in oklab, var(--accent) 55%, transparent); box-shadow: var(--shadow-soft); } @media (min-width: 860px) { .plan--featured { transform: scale(1.03); } .plan--featured:hover { transform: scale(1.03) translateY(-4px); } } .plan__badge { position: absolute; top: -.7rem; left: 1.75rem; background-color: var(--accent); background-image: var(--accent-grad); color: var(--accent-foreground); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .3rem .7rem; border-radius: 999px; } .plan__name { font-family: var(--font-serif); font-size: 1.6rem; } .plan__price { font-family: var(--font-serif); font-size: 2.6rem; color: var(--accent); line-height: 1; margin-top: .5rem; } .plan__price span { font-family: var(--font-sans); font-size: .9rem; color: var(--muted-foreground); font-weight: 400; } .plan__cadence { color: var(--muted-foreground); font-size: .9rem; margin-top: .35rem; } .plan__features { list-style: none; margin: 1.5rem 0; padding: 1.5rem 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .85rem; flex: 1; } .plan__features li { display: flex; align-items: flex-start; gap: .65rem; font-size: .92rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); } .plan__features svg { color: var(--accent); flex: 0 0 auto; margin-top: .15rem; } .plan__cta { width: 100%; margin-top: auto; } /* What's included */ .incl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .incl-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .incl-grid { grid-template-columns: repeat(4, 1fr); } } .incl { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; } .incl__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; color: var(--accent); background: color-mix(in oklab, var(--accent) 13%, transparent); } .incl h3 { font-family: var(--font-serif); font-size: 1.2rem; margin-top: 1rem; } .incl p { color: color-mix(in oklab, var(--foreground) 70%, transparent); font-size: .9rem; line-height: 1.55; margin-top: .4rem; } /* Gift terms (on dark) */ .gift-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .gift-terms li { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid color-mix(in oklab, var(--primary-foreground) 18%, transparent); } .gift-terms strong { font-family: var(--font-serif); font-size: 2rem; color: var(--accent-on-dark); line-height: 1; min-width: 2.5rem; } .gift-terms span { color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); } /* Subscriptions — subscriber moments strip */ .subs-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } @media (min-width: 640px) { .subs-strip { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .subs-strip { grid-template-columns: repeat(6, 1fr); } } .subs-strip .media { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; } .subs-strip .media-fallback { position: absolute; inset: 0; } /* ============================================================ X8. Shop by occasion — interactive picker (Эф4) ============================================================ */ .occasions { display: grid; gap: clamp(1.5rem, 4vw, 3rem); } @media (min-width: 900px) { .occasions { grid-template-columns: 1fr 1fr; align-items: stretch; } } .occasions__list { display: flex; flex-direction: column; } @media (min-width: 900px) { .occasions__list { max-height: 32rem; overflow-y: auto; padding-right: .75rem; scrollbar-color: color-mix(in oklab, var(--accent) 55%, transparent) transparent; scrollbar-width: thin; } } .occasions__item { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.25rem .25rem; border-top: 1px solid var(--border); color: var(--foreground); transition: padding-left .35s var(--ease-luxe); } .occasions__item:last-child { border-bottom: 1px solid var(--border); } .occasions__index { font-size: .8rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .occasions__text { min-width: 0; } .occasions__name { display: block; font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.05; transition: color .3s var(--ease-luxe); } .occasions__desc { display: block; font-size: .9rem; color: var(--muted-foreground); margin-top: .15rem; } .occasions__arrow { color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease-luxe); } /* Active state (set by JS / first item) — always visible. */ .occasions__item.is-active { padding-left: 1rem; } .occasions__item.is-active .occasions__name { color: var(--accent); } .occasions__item.is-active .occasions__arrow { opacity: 1; transform: none; } /* Hover mirrors the active treatment on pointer devices. */ @media (hover: hover) { .occasions__item:hover { padding-left: 1rem; } .occasions__item:hover .occasions__name { color: var(--accent); } .occasions__item:hover .occasions__arrow { opacity: 1; transform: none; } } .occasions__stage { position: relative; border-radius: var(--radius-2xl); overflow: hidden; background: var(--card); aspect-ratio: 4/5; box-shadow: var(--shadow-card); } @media (min-width: 900px) { .occasions__stage { aspect-ratio: auto; min-height: 100%; } } .occasions__media { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s var(--ease-luxe); } .occasions__media.is-active { opacity: 1; } .occasions__media .media-fallback { position: absolute; inset: 0; } .occasions__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .occasions__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%); } .occasions__cap { position: absolute; left: 1.25rem; bottom: 1.1rem; z-index: 1; color: #fff; font-family: var(--font-serif); font-size: 1.6rem; text-shadow: 0 2px 14px rgba(0,0,0,.4); } .occasions__thumb { display: none; } /* Mobile: drop the big stage and lay the occasions out as a 2-column grid (image on top, name below) instead of a tall vertical list — and not a horizontal scroller, since Bestsellers right above already scrolls sideways. */ @media (max-width: 899px) { .occasions { display: block; } .occasions__stage { display: none; } .occasions__index { display: none; } .occasions__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin-top: 2rem; max-height: none; overflow: visible; padding: 0; } .occasions__item { display: flex; flex-direction: column; align-items: stretch; gap: .55rem; padding: 0; border: 0; transition: none; } .occasions__item:last-child { border: 0; } .occasions__item.is-active { padding-left: 0; } .occasions__thumb { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; } .occasions__thumb .media-fallback { position: absolute; inset: 0; } .occasions__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .occasions__text { min-width: 0; } .occasions__name { font-size: 1.1rem; line-height: 1.15; } .occasions__item.is-active .occasions__name { color: var(--foreground); } .occasions__desc { display: none; } .occasions__arrow { display: none; } } /* ============================================================ X9. Scroll-story video (Эф28) — zoom on scroll ============================================================ */ .vstory { position: relative; height: 100vh; } .js .vstory { height: 220vh; } @media (prefers-reduced-motion: reduce) { .js .vstory { height: 100vh; } } .vstory__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 clamp(1rem, 4vw, 3rem); } .vstory__media { position: relative; width: 100%; height: min(100%, 90vh); max-width: var(--container-wide); margin-inline: auto; border-radius: var(--radius-3xl); overflow: hidden; transform: scale(.84); transform-origin: center; will-change: transform; background: var(--card); box-shadow: var(--shadow-soft); } .vstory__video, .vstory__media .media-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vstory__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05) 45%, rgba(0,0,0,.3)); } .vstory__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.75rem, 5vw, 4rem); color: #fff; max-width: 44rem; } .vstory__overlay .eyebrow { color: var(--accent-on-dark); } .vstory__title { color: #fff; font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 4rem); line-height: 1.02; margin-top: .6rem; } .vstory__lead { color: rgba(255,255,255,.86); margin-top: 1rem; max-width: 34rem; line-height: 1.6; } .vstory__overlay .btn--accent { margin-top: 1.5rem; } /* ============================================================ X10. Hero headline rotating word (Эф29) ============================================================ */ .hero__rotate { position: relative; display: inline-grid; vertical-align: top; } .hero__rotate-word { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(.28em); transition: opacity .45s var(--ease-luxe), transform .5s var(--ease-spring); } .hero__rotate-word.is-active { opacity: 1; transform: none; } .hero__rotate-word.is-out { opacity: 0; transform: translateY(-.28em); } /* Reviews with photo (Эф14) */ .quote-card__by { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; } .quote-card__avatar { position: relative; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in oklab, #fff 25%, transparent); } .quote-card__avatar .media-fallback { position: absolute; inset: 0; } .quote-card__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .quote-card__who { display: flex; flex-direction: column; line-height: 1.25; } .quote-card__loc { font-size: .8rem; opacity: .8; } /* ============================================================ X11. Gallery interactive hover (Эф11) + button hover polish (Эф5) ============================================================ */ .gallery-grid .tile { transition: transform .45s var(--ease-luxe), box-shadow .45s var(--ease-luxe), opacity .45s var(--ease-luxe); } @media (hover: hover) { .gallery-grid:hover .tile { opacity: .62; } .gallery-grid:hover .tile:hover { opacity: 1; transform: translateY(-4px); z-index: 2; box-shadow: var(--shadow-soft); } } /* Outline buttons: refined fill-wipe from the bottom on hover */ .btn--outline { position: relative; isolation: isolate; } .btn--outline::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--foreground); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease-luxe); } @media (hover: hover) { .btn--outline:hover { color: var(--background); border-color: var(--foreground); background: transparent; } .btn--outline:hover::after { transform: scaleY(1); } } /* ============================================================ X12. About — team grid ============================================================ */ .team-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .team-grid { grid-template-columns: repeat(4, 1fr); } } .team-member__photo { position: relative; display: block; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); } .team-member__photo .media-fallback { position: absolute; inset: 0; } .team-member__name { font-family: var(--font-serif); font-size: 1.2rem; margin-top: .9rem; } .team-member__role { color: var(--muted-foreground); font-size: .88rem; margin-top: .1rem; } /* ============================================================ X13. Contact page ============================================================ */ .contact { display: grid; gap: clamp(2rem, 5vw, 3.5rem); } @media (min-width: 900px) { .contact { grid-template-columns: 1.2fr .8fr; align-items: start; } } .contact__form { display: flex; flex-direction: column; gap: 1.1rem; } .field { display: flex; flex-direction: column; gap: .4rem; } .field > span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); } .field input, .field textarea, .field select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-btn); padding: .85rem 1rem; background: var(--cream); font: inherit; color: var(--foreground); outline: none; transition: border-color .2s, box-shadow .2s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); } .field textarea { resize: vertical; } .field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; } @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } } /* ---- Custom order page ---- */ .corder-hero { padding-bottom: 1rem; } .corder-hero__title { margin-top: .5rem; font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1.02; max-width: 18ch; } .corder-hero__lead { margin: 1.5rem 0 2rem; max-width: 42rem; font-size: 1.1rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 75%, transparent); } .corder-hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; } .corder-hero__meta { margin-top: 1.5rem; font-size: .85rem; letter-spacing: .01em; color: var(--muted-foreground); } /* Many cards → a 2-up grid on phones (never one tall vertical strip), 3-up on desktop. */ .corder-types { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; } @media (min-width: 620px) { .corder-types { gap: 1.25rem; } } @media (min-width: 960px) { .corder-types { grid-template-columns: repeat(3, 1fr); } } .corder-type { padding: 1.05rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--cream); transition: transform .3s var(--ease-luxe), border-color .3s var(--ease-luxe); } @media (min-width: 620px) { .corder-type { padding: 1.6rem; } } .corder-type:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 55%, transparent); } .corder-type__ic { display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); margin-bottom: .7rem; } @media (min-width: 620px) { .corder-type__ic { width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; } } .corder-type h3 { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.15; } @media (min-width: 620px) { .corder-type h3 { font-size: 1.25rem; } } .corder-type p { margin-top: .4rem; font-size: .85rem; line-height: 1.5; color: color-mix(in oklab, var(--foreground) 72%, transparent); } @media (min-width: 620px) { .corder-type p { font-size: .95rem; line-height: 1.55; } } .corder-price { margin-top: 2.75rem; } .corder-price__note { margin-top: 1.75rem; max-width: 46rem; } .corder { display: grid; gap: clamp(2rem, 5vw, 3.5rem); } @media (min-width: 960px) { .corder { grid-template-columns: 1.35fr .65fr; align-items: start; } } .corder__form { display: flex; flex-direction: column; gap: 1.1rem; } .corder__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .5rem; } .corder__actions .btn--primary { align-self: flex-start; } .corder__note { font-size: .82rem; color: var(--muted-foreground); max-width: 22rem; } .corder__ok { margin-top: .35rem; font-size: .9rem; color: var(--accent); font-weight: 600; } .corder__aside { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.75rem; } @media (min-width: 960px) { .corder__aside { position: sticky; top: 6rem; } } .corder__aside-title { font-family: var(--font-serif); font-size: 1.35rem; } .corder__list { list-style: none; margin: 1.1rem 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; } .corder__list li { position: relative; padding-left: 1.6rem; line-height: 1.5; color: color-mix(in oklab, var(--foreground) 82%, transparent); } .corder__list li::before { content: ''; position: absolute; left: 0; top: .5em; width: .7rem; height: .4rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .corder__aside-contact { font-size: .92rem; line-height: 1.9; color: var(--muted-foreground); } .contact__form .btn--primary { align-self: flex-start; margin-top: .5rem; } .contact__note { font-size: .85rem; } .contact__card { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.75rem; } .contact__details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; } .contact__details li { display: flex; flex-direction: column; gap: .2rem; } .contact__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); font-weight: 600; } .contact__details a:hover { color: var(--accent); } .contact__map { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-2xl); overflow: hidden; margin-top: 1.25rem; background-color: var(--card); background-image: radial-gradient(120% 100% at 30% 20%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%), radial-gradient(120% 100% at 80% 90%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 55%), linear-gradient(140deg, var(--cream), var(--card)); box-shadow: var(--shadow-card); } .contact__map .media-fallback__label { position: absolute; bottom: 1rem; left: 1.25rem; } /* ============================================================ X14. Occasions landing grid ============================================================ */ .occ-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .occ-grid { grid-template-columns: repeat(3, 1fr); } } .occ-card__link { position: relative; display: block; aspect-ratio: 4/5; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); } .occ-card__media { position: absolute; inset: 0; } .occ-card__media .media-fallback { position: absolute; inset: 0; transition: transform .7s var(--ease-luxe); } .occ-card__link:hover .occ-card__media .media-fallback { transform: scale(1.05); } .occ-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05) 55%); } .occ-card__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; color: #fff; display: flex; flex-direction: column; gap: .15rem; } .occ-card__name { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 1.6rem); } .occ-card__desc { font-size: .85rem; color: rgba(255,255,255,.82); } .occ-card__go { margin-top: .5rem; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-on-dark); display: inline-flex; align-items: center; gap: .4rem; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease-luxe); } .occ-card__go svg { width: 1rem; height: 1rem; } @media (hover: hover) { .occ-card__link:hover .occ-card__go { opacity: 1; transform: none; } } @media (hover: none) { .occ-card__go { opacity: 1; transform: none; } } /* ============================================================ X15. Journal index + Article (single) ============================================================ */ .journal-feature { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 860px) { .journal-feature { grid-template-columns: 1.1fr .9fr; } } .journal-feature__media { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--radius-2xl); overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); } .journal-feature__media img, .journal-feature__media .media-fallback { position: absolute; inset: -11% 0 auto 0; width: 100%; height: 122%; object-fit: cover; transition: transform .7s var(--ease-luxe); will-change: transform; } .journal-feature:hover .journal-feature__media img, .journal-feature:hover .journal-feature__media .media-fallback { transform: scale(1.04); } .journal-feature__title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.05; margin: .5rem 0 .75rem; } .journal-feature__title a:hover { color: var(--accent); } .journal-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; } @media (min-width: 640px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } } .post-card__media { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); } .post-card__media img, .post-card__media .media-fallback { position: absolute; inset: -11% 0 auto 0; width: 100%; height: 122%; object-fit: cover; transition: transform .7s var(--ease-luxe); will-change: transform; } .post-card:hover .post-card__media img, .post-card:hover .post-card__media .media-fallback { transform: scale(1.05); } .post-card__body { padding-top: 1rem; } .post-card__cat { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); } .post-card__title { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.2; margin: .5rem 0 .4rem; } .post-card__title a:hover { color: var(--accent); } .post-card__excerpt { color: color-mix(in oklab, var(--foreground) 70%, transparent); font-size: .92rem; line-height: 1.55; } .post-card__meta { display: block; margin-top: .75rem; font-size: .8rem; color: var(--muted-foreground); } .post-card__more { display: inline-block; margin-top: 1rem; } /* Reading progress bar */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; } .read-progress span { display: block; height: 100%; width: 0; background-color: var(--accent); background-image: var(--accent-grad); } body.admin-bar .read-progress { top: 32px; } @media (max-width: 782px) { body.admin-bar .read-progress { top: 46px; } } /* Article */ .article { padding-bottom: clamp(3.5rem, 7vw, 6rem); } .article__head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); text-align: center; } .article__head-inner { max-width: 46rem; margin-inline: auto; } .article__title { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.04; margin: .5rem 0 1rem; } .article__meta { color: var(--muted-foreground); font-size: .9rem; } .article__cover-wrap { margin-bottom: clamp(2rem, 4vw, 3rem); } .article__cover { aspect-ratio: 16/9; border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-soft); } .article__cover img { width: 100%; height: 100%; object-fit: cover; } .article__tags { max-width: 44rem; margin: 2rem auto 0; display: flex; gap: .5rem; flex-wrap: wrap; } .article__tags a { font-size: .78rem; border: 1px solid var(--border); border-radius: 999px; padding: .3rem .8rem; color: var(--muted-foreground); } .article__author { max-width: 44rem; margin: 2.5rem auto 0; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; gap: 1rem; align-items: flex-start; } .article__avatar img { width: 3.5rem; height: 3.5rem; border-radius: 999px; } .article__author strong { font-family: var(--font-serif); font-size: 1.1rem; } .article__author p { color: var(--muted-foreground); font-size: .9rem; margin-top: .25rem; line-height: 1.55; } /* Prose typography */ .prose { max-width: 44rem; margin-inline: auto; font-size: 1.075rem; line-height: 1.75; color: color-mix(in oklab, var(--foreground) 88%, transparent); } .prose > * + * { margin-top: 1.4rem; } .prose h2 { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.15; margin-top: 2.5rem; } .prose h3 { font-family: var(--font-serif); font-size: 1.45rem; margin-top: 2rem; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .prose blockquote { border-left: 2px solid var(--accent); padding-left: 1.25rem; font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--foreground); } .prose img { border-radius: var(--radius-xl); } .prose ul, .prose ol { padding-left: 1.25rem; } .prose li + li { margin-top: .5rem; } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }