/* ============================================================ Food for Occasions — site.css Seasonal theming via [data-season] on ============================================================ */ /* ── DESIGN TOKENS: DEFAULT (year-round) ── */ :root { --stone: #C8BFB0; --stone-lt: #EDE8E1; --sage: #7A8C72; --sage-dk: #566350; --fig: #3D2B35; --fig-mid: #5C3F50; --cream: #FAF7F2; --warm: #FFFDF9; --char: #2A2523; --muted: #7B726A; --border: #DDD7CE; /* Semantic aliases — override these per season */ --accent: var(--sage); --accent-dk: var(--sage-dk); --hero-tint-a: rgba(61, 43, 53, 0.65); --hero-tint-b: rgba(61, 43, 53, 0.45); --band-bg: var(--fig); --band-text: #DDD0BC; --news-bg: var(--fig); --rule-color: var(--sage); } /* ── SEASONAL TOKENS ── */ [data-season="spring"] { --accent: #7DAE8A; --accent-dk: #4F7E5C; --hero-tint-a: rgba(31, 60, 38, 0.60); --hero-tint-b: rgba(31, 60, 38, 0.35); --band-bg: #2D4A33; --band-text: #C8E6CC; --news-bg: #2D4A33; --rule-color: #7DAE8A; } [data-season="summer"] { --accent: #C8923A; --accent-dk: #9E6A1E; --hero-tint-a: rgba(80, 45, 10, 0.58); --hero-tint-b: rgba(80, 45, 10, 0.35); --band-bg: #5C3A10; --band-text: #F5DEB3; --news-bg: #5C3A10; --rule-color: #C8923A; } [data-season="autumn"] { --accent: #B05A2F; --accent-dk: #7D3810; --hero-tint-a: rgba(70, 30, 10, 0.65); --hero-tint-b: rgba(70, 30, 10, 0.40); --band-bg: #5A2D0C; --band-text: #F0C080; --news-bg: #5A2D0C; --rule-color: #B05A2F; } [data-season="christmas"], [data-season="winter"] { --accent: #8B1A2F; --accent-dk: #5E0D1A; --hero-tint-a: rgba(20, 20, 45, 0.72); --hero-tint-b: rgba(20, 20, 45, 0.45); --band-bg: #14142D; --band-text: #D4AF82; --news-bg: #14142D; --rule-color: #8B1A2F; } [data-season="wedding_season"] { --accent: #8C7B5E; --accent-dk: #635542; --hero-tint-a: rgba(50, 40, 30, 0.60); --hero-tint-b: rgba(50, 40, 30, 0.35); --band-bg: #3A2E22; --band-text: #E8DCC8; --news-bg: #3A2E22; --rule-color: #8C7B5E; } /* ============================================================ UK CELEBRATION & EVENT THEMES Same token pattern as the seasons above. Selected via the CP season picker (Globals → Site Settings). Palettes are kept deliberately refined — this is a wedding caterer, so even the playful ones stay elegant. Base page stays cream/warm for legibility; only accents / overlays / bands shift. ============================================================ */ /* Valentine's Day — romantic rose & deep wine */ [data-season="valentines"] { --accent: #B23A5A; --accent-dk: #7E2038; --hero-tint-a: rgba(70, 20, 35, 0.62); --hero-tint-b: rgba(70, 20, 35, 0.38); --band-bg: #4A1526; --band-text: #F3C6D2; --news-bg: #4A1526; --rule-color: #B23A5A; } /* Mother's Day — soft pink & lilac */ [data-season="mothers_day"] { --accent: #C77D9A; --accent-dk: #9B5773; --hero-tint-a: rgba(74, 44, 60, 0.58); --hero-tint-b: rgba(74, 44, 60, 0.34); --band-bg: #5A3E52; --band-text: #F3D9E4; --news-bg: #5A3E52; --rule-color: #C77D9A; } /* Easter — fresh duck-egg & pastel green */ [data-season="easter"] { --accent: #6FB2A6; --accent-dk: #47857A; --hero-tint-a: rgba(30, 60, 58, 0.55); --hero-tint-b: rgba(30, 60, 58, 0.32); --band-bg: #2E5750; --band-text: #DFF0EA; --news-bg: #2E5750; --rule-color: #6FB2A6; } /* Summer Garden Party — coral & leafy green */ [data-season="garden_party"] { --accent: #D2795E; --accent-dk: #A6543C; --hero-tint-a: rgba(40, 55, 35, 0.55); --hero-tint-b: rgba(40, 55, 35, 0.32); --band-bg: #3E4A2E; --band-text: #F0D9C4; --news-bg: #3E4A2E; --rule-color: #D2795E; } /* Harvest — deep russet & gold */ [data-season="harvest"] { --accent: #9C6B1E; --accent-dk: #6E4910; --hero-tint-a: rgba(55, 35, 10, 0.66); --hero-tint-b: rgba(55, 35, 10, 0.42); --band-bg: #4A320F; --band-text: #EBC985; --news-bg: #4A320F; --rule-color: #9C6B1E; } /* Halloween — burnt orange & deep aubergine (sophisticated, not garish) */ [data-season="halloween"] { --accent: #C2611C; --accent-dk: #8A3F0E; --hero-tint-a: rgba(30, 15, 35, 0.72); --hero-tint-b: rgba(30, 15, 35, 0.48); --band-bg: #241428; --band-text: #E8A054; --news-bg: #241428; --rule-color: #C2611C; } /* Bonfire Night — night sky & ember */ [data-season="bonfire_night"] { --accent: #D9762A; --accent-dk: #A24E12; --hero-tint-a: rgba(15, 18, 40, 0.72); --hero-tint-b: rgba(15, 18, 40, 0.46); --band-bg: #10132A; --band-text: #F0C674; --news-bg: #10132A; --rule-color: #D9762A; } /* New Year — midnight & champagne gold */ [data-season="new_year"] { --accent: #C9A24B; --accent-dk: #9A7628; --hero-tint-a: rgba(12, 14, 28, 0.72); --hero-tint-b: rgba(12, 14, 28, 0.46); --band-bg: #0C0E1C; --band-text: #E8D294; --news-bg: #0C0E1C; --rule-color: #C9A24B; } /* Royal / National Celebration — patriotic red, blue & gold (jubilees, coronations, national sporting finals) */ [data-season="royal"] { --accent: #B01B2E; --accent-dk: #7C1220; --hero-tint-a: rgba(15, 25, 60, 0.66); --hero-tint-b: rgba(15, 25, 60, 0.42); --band-bg: #12224E; --band-text: #EBD79A; --news-bg: #12224E; --rule-color: #B01B2E; } /* ── CHRISTMAS EXTRAS ── */ [data-season="christmas"] .seasonal-banner { background: #8B1A2F; border-bottom: 1px solid rgba(212,175,130,0.3); } [data-season="christmas"] .section-news { background-image: linear-gradient(to right, rgba(20,20,45,0.92), rgba(20,20,45,0.78)), url('https://images.unsplash.com/photo-1543589077-47d81606c1bf?w=1400&q=80'); } /* ============================================================ SEASONAL DECORATION A falling-particle layer + banner motifs, driven by site.js reading [data-season]. Purely decorative: pointer-events:none, and switched off entirely under reduced-motion. ============================================================ */ .season-decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 190; } .season-decor .particle { position: absolute; top: -8vh; line-height: 1; animation: ffo-fall linear infinite; will-change: transform; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } @keyframes ffo-fall { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); } 100% { transform: translate3d(var(--drift, 0px), 114vh, 0) rotate(var(--spin, 360deg)); } } /* Banner motifs — flank the seasonal message so the banner itself pops */ .seasonal-banner p::before, .seasonal-banner p::after { opacity: 0.95; } [data-season="spring"] .seasonal-banner p::before { content: "🌸 "; } [data-season="spring"] .seasonal-banner p::after { content: " 🌼"; } [data-season="summer"] .seasonal-banner p::before { content: "☀️ "; } [data-season="summer"] .seasonal-banner p::after { content: " 🌻"; } [data-season="autumn"] .seasonal-banner p::before { content: "🍂 "; } [data-season="autumn"] .seasonal-banner p::after { content: " 🍁"; } [data-season="winter"] .seasonal-banner p::before { content: "❄️ "; } [data-season="winter"] .seasonal-banner p::after { content: " ❄️"; } [data-season="wedding_season"].seasonal-banner p::before { content: "🤍 "; } [data-season="wedding_season"].seasonal-banner p::after { content: " 💍"; } [data-season="valentines"] .seasonal-banner p::before { content: "💕 "; } [data-season="valentines"] .seasonal-banner p::after { content: " 🌹"; } [data-season="mothers_day"] .seasonal-banner p::before { content: "💐 "; } [data-season="mothers_day"] .seasonal-banner p::after { content: " 🌷"; } [data-season="easter"] .seasonal-banner p::before { content: "🐣 "; } [data-season="easter"] .seasonal-banner p::after { content: " 🌷"; } [data-season="garden_party"] .seasonal-banner p::before { content: "🌿 "; } [data-season="garden_party"] .seasonal-banner p::after { content: " 🦋"; } [data-season="harvest"] .seasonal-banner p::before { content: "🌾 "; } [data-season="harvest"] .seasonal-banner p::after { content: " 🍂"; } [data-season="halloween"] .seasonal-banner p::before { content: "🎃 "; } [data-season="halloween"] .seasonal-banner p::after { content: " 🦇"; } [data-season="bonfire_night"] .seasonal-banner p::before { content: "🎆 "; } [data-season="bonfire_night"] .seasonal-banner p::after { content: " ✨"; } [data-season="christmas"] .seasonal-banner p::before { content: "🎄 "; } [data-season="christmas"] .seasonal-banner p::after { content: " 🎁"; } [data-season="new_year"] .seasonal-banner p::before { content: "🎉 "; } [data-season="new_year"] .seasonal-banner p::after { content: " 🥂"; } [data-season="royal"] .seasonal-banner p::before { content: "👑 "; } [data-season="royal"] .seasonal-banner p::after { content: " 🎉"; } @media (prefers-reduced-motion: reduce) { .season-decor { display: none; } } /* ── RESET & BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.75; background: var(--warm); color: var(--char); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* ── ACCESSIBILITY ── */ .skip-link { position: absolute; top: -120px; left: 1rem; background: var(--fig); color: #fff; padding: 0.5rem 1rem; font-size: 0.85rem; border-radius: 2px; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 1rem; } /* ── SEASONAL BANNER ── */ .seasonal-banner { background: var(--band-bg); color: var(--band-text); padding: 0.65rem 5vw; text-align: center; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.05em; } /* ── HEADER (fixed wrapper: optional seasonal banner sits above the nav) ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; } /* ── NAV ── */ .site-nav { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1rem 5vw; background: rgba(255, 253, 249, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 500; color: var(--fig); text-decoration: none; letter-spacing: 0.03em; line-height: 1.2; } .nav-logo span { display: block; font-family: 'Jost', sans-serif; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; } .nav-links a { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--char); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--accent-dk); } .nav-cta { background: var(--fig) !important; color: #fff !important; padding: 0.52rem 1.3rem; border-radius: 1px; } .nav-cta:hover { background: var(--fig-mid) !important; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.3rem; } .nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--char); margin: 5px 0; transition: 0.25s; } /* ── BUTTONS ── */ .btn { display: inline-block; font-family: 'Jost', sans-serif; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; padding: 0.85rem 2rem; border-radius: 1px; border: none; cursor: pointer; transition: all 0.2s; } .btn-sage { background: var(--accent); color: #fff; } .btn-sage:hover { background: var(--accent-dk); } .btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); } .btn-ghost-light:hover { background: rgba(255,255,255,0.1); } .btn-fig { background: var(--fig); color: #fff; } .btn-fig:hover { background: var(--fig-mid); } /* ── SECTION BASE ── */ section { padding: 6rem 5vw; } .section-inner { max-width: 1120px; margin: 0 auto; } .section-tag { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; } h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 500; line-height: 1.15; color: var(--fig); margin-bottom: 1.2rem; } h2 em { font-style: italic; font-weight: 400; } .lead { font-size: 1rem; font-weight: 300; color: var(--muted); max-width: 560px; margin-bottom: 3rem; line-height: 1.9; } /* ── BOTANICAL RULE ── */ .botanical-rule { display: flex; align-items: center; gap: 1.2rem; margin: 1.2rem 0 2.2rem; color: var(--rule-color); opacity: 0.7; } .botanical-rule .rule-line { flex: 1; height: 1px; background: var(--border); } /* ── HERO ── */ .hero { min-height: 100vh; position: relative; display: grid; place-items: center; text-align: center; padding: 8rem 5vw 6rem; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; background-color: var(--fig); } .hero-bg--placeholder { background: url('https://images.unsplash.com/photo-1592861956120-e524fc739696?w=1800&q=85') center/cover no-repeat fixed; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, var(--hero-tint-a) 0%, var(--hero-tint-b) 60%, var(--hero-tint-a) 100% ); } .hero-inner { position: relative; z-index: 1; max-width: 820px; } .hero-tag { display: inline-block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--stone); border: 1px solid rgba(200,191,176,0.45); padding: 0.4rem 1.2rem; margin-bottom: 2rem; border-radius: 1px; } .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem, 8vw, 6rem); font-weight: 400; color: #fff; line-height: 1.05; margin-bottom: 1.6rem; letter-spacing: -0.01em; } .hero h1 em { font-style: italic; color: #DDD0BC; } .hero-sub { font-size: 1rem; font-weight: 300; color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.85; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ── TAGLINE BAND ── */ .tagline-band { background: var(--band-bg); padding: 2.5rem 5vw; text-align: center; } .tagline-band p { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-style: italic; font-weight: 400; color: var(--band-text); max-width: 700px; margin: 0 auto; line-height: 1.7; } /* ── WHAT WE DO ── */ .section-what-we-do { background: var(--warm); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); } .service-card { padding: 2.5rem 2rem; border-right: 1px solid var(--border); transition: background 0.2s; } .service-card:last-child, .service-card:nth-child(3) { border-right: none; } .service-card:nth-child(n+4) { border-top: 1px solid var(--border); } .service-card:hover { background: var(--cream); } .service-icon { font-size: 2rem; line-height: 1; margin-bottom: 1rem; display: block; color: var(--accent); font-weight: 400; } .service-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 500; color: var(--fig); margin-bottom: 0.6rem; } .service-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.8; } /* ── WHO WE ARE ── */ .section-about { background: var(--cream); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } .about-img-wrap { position: relative; } .about-img-wrap img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 2px; } /* Rotating "Who we are" background — crossfading slides */ .about-slideshow { position: relative; aspect-ratio: 3/4; border-radius: 2px; overflow: hidden; } .about-slideshow .about-slide { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; opacity: 0; transition: opacity 1.4s ease; } .about-slideshow .about-slide.is-active { opacity: 1; } .about-badge { position: absolute; bottom: 2rem; left: -2rem; background: var(--fig); color: #fff; padding: 1.4rem 1.8rem; border-radius: 1px; } .about-badge strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 500; line-height: 1; } .about-badge span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); } .about-text p { font-size: 0.95rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.9; } .about-address { margin-top: 1.8rem; padding: 1.4rem 1.6rem; background: var(--warm); border: 1px solid var(--border); border-left: 3px solid var(--accent); font-size: 0.88rem; line-height: 1.8; font-style: normal; } .about-address strong { display: block; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; } /* ── WEDDINGS ── */ .section-weddings { background: var(--warm); } .wedding-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6rem; align-items: center; } .wedding-text p { font-size: 0.95rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.9; } .menu-options-label { font-size: 0.8rem; color: var(--muted); font-style: italic; margin: 1.5rem 0 0.6rem; } .wedding-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } .option-pill { font-size: 0.74rem; font-weight: 500; padding: 0.38rem 0.85rem; background: var(--cream); border: 1px solid var(--border); border-radius: 20px; color: var(--char); } .wedding-images { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.5rem; height: 520px; } .wedding-images img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; } .wedding-images img:first-child { grid-row: span 2; } /* ── MENUS ── */ .section-menus { background: var(--cream); } /* Menus: a centred, collapsible accordion (click a title to reveal its dishes) */ .menus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; /* each card sizes to its own height; opening one doesn't stretch its neighbour */ max-width: 980px; margin: 0 auto 2rem; } .menu-card { background: var(--warm); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 0 0 2px 2px; overflow: hidden; } .menu-summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; padding: 1.4rem 1.8rem; transition: background 0.2s ease; } .menu-summary::-webkit-details-marker { display: none; } .menu-summary::marker { content: ''; } .menu-summary:hover { background: var(--cream); } .menu-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .menu-summary h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 500; color: var(--fig); margin: 0; } .menu-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin: 0.35rem 0 0; display: block; } .menu-chevron { flex-shrink: 0; width: 1.6rem; height: 1.6rem; margin-top: 0.2rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; color: var(--accent); font-weight: 300; transition: transform 0.25s ease; } .menu-details[open] .menu-chevron { transform: rotate(45deg); } .menu-body { padding: 0 1.8rem 1.6rem; } .menu-dishes { padding: 0.2rem 0 0; } .menu-course { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 1.5rem 0 0.7rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .menu-course:first-child { margin-top: 0.2rem; } .menu-dish { font-size: 0.9rem; line-height: 1.45; color: var(--char); margin: 0.55rem 0; } .dish-name { display: block; } .dish-note { display: block; font-size: 0.8rem; color: var(--muted); font-style: italic; margin-top: 0.1rem; } .menu-or { text-align: center; font-size: 0.72rem; font-style: italic; color: var(--muted); letter-spacing: 0.08em; margin: 0.4rem 0; } .menu-card-footer { padding-top: 1.2rem; margin-top: 0.8rem; border-top: 1px solid var(--border); } .menu-dietary { font-size: 0.78rem; color: var(--muted); font-style: italic; margin-bottom: 0.8rem; } .menu-pricing { display: flex; gap: 1rem; flex-wrap: wrap; } .menu-price { font-size: 0.82rem; font-weight: 600; color: var(--accent-dk); } .menu-min { font-size: 0.78rem; color: var(--muted); } .menus-note { text-align: center; font-size: 0.88rem; color: var(--muted); font-style: italic; margin-top: 1rem; } .menus-note a { color: var(--accent-dk); font-style: normal; font-weight: 500; } /* ── AND MORE ── */ .section-more { background: var(--warm); } .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .more-card { background: var(--cream); border: 1px solid var(--border); padding: 2.2rem; border-radius: 2px; } .more-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 500; color: var(--fig); margin-bottom: 0.7rem; } .more-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.85; } /* ── GALLERY ── */ .section-gallery { background: var(--cream); } .gallery-grid { columns: 3; gap: 0.75rem; } .gallery-item { break-inside: avoid; margin-bottom: 0.75rem; position: relative; overflow: hidden; border-radius: 2px; } .gallery-item img { width: 100%; display: block; transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.03); } .gallery-item figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.55)); color: #fff; font-size: 0.75rem; padding: 1.5rem 0.8rem 0.6rem; opacity: 0; transition: opacity 0.2s; } .gallery-item:hover figcaption { opacity: 1; } /* Collapsed by default: show the first 12, reveal the rest via the "show more" button */ .gallery-grid .gallery-item:nth-child(n+13) { display: none; } .gallery-grid.is-expanded .gallery-item:nth-child(n+13) { display: block; } .gallery-toggle-wrap { text-align: center; margin-top: 2.5rem; } /* ── NEWS ── */ .section-news { /* Default (revert): url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1400&q=80') */ background: linear-gradient(to right, rgba(61,43,53,0.90), rgba(61,43,53,0.75)), url('/assets/gallery/other-occasions-right-1.jpg') center/cover no-repeat; background-color: var(--news-bg); } .section-news h2 { color: #DDD0BC; } .section-news .section-tag { color: var(--stone); } .section-news .lead { color: rgba(255,255,255,0.65); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* News carousel — same scrolling pattern as the testimonials */ .news-carousel { position: relative; margin-top: 1rem; } .news-track { display: flex; gap: 1.5rem; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.5rem 0.25rem 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .news-track::-webkit-scrollbar { display: none; } .news-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .news-track .news-card { flex: 0 0 auto; width: clamp(280px, 85vw, 360px); scroll-snap-align: start; } .news-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); padding: 2rem; border-radius: 2px; } .news-date { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.6rem; } .news-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 500; color: #fff; margin-bottom: 0.6rem; line-height: 1.3; } .news-card p { font-size: 0.85rem; color: rgba(255,255,255,0.62); line-height: 1.8; } /* ── TESTIMONIALS ── */ .section-testimonials { background: var(--cream); } /* Scrolling carousel */ .testimonials-carousel { position: relative; margin-top: 2.5rem; } .testimonials-track { display: flex; gap: 1.5rem; align-items: flex-start; /* cards size to their own text — no giant empty boxes */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.5rem 0.25rem 1.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .testimonials-track::-webkit-scrollbar { display: none; } /* WebKit */ .testimonials-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .testimonial { background: var(--warm); border: 1px solid var(--border); padding: 2rem; border-radius: 2px; flex: 0 0 auto; width: clamp(270px, 82vw, 360px); scroll-snap-align: center; display: flex; flex-direction: column; } .testimonial-stars { color: #C8923A; margin-bottom: 0.8rem; font-size: 0.9rem; } .testimonial blockquote { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-style: italic; color: var(--fig); line-height: 1.75; margin-bottom: 1.2rem; } .testimonial cite { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-style: normal; margin-top: auto; /* pin attribution to the card foot */ } /* Carousel arrows */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--warm); color: var(--fig); font-family: 'Jost', sans-serif; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .carousel-btn:hover, .carousel-btn:focus-visible { background: var(--accent); color: #fff; border-color: var(--accent); } .carousel-prev { left: -10px; } .carousel-next { right: -10px; } /* ── INSTAGRAM FEED ── */ .section-instagram { background: var(--warm); text-align: center; } .section-instagram .lead { margin-left: auto; margin-right: auto; } .instagram-embed { margin-top: 2.5rem; min-height: 120px; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .instagram-fallback { color: var(--muted); margin: 0; } /* ── LEGAL / PRIVACY ── */ .legal { background: var(--warm); padding-top: 9rem; } .legal-inner { max-width: 760px; margin: 0 auto; } .legal-inner h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 500; color: var(--fig); margin: 0.4rem 0 0.3rem; } .legal-updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 2.5rem; } .legal-inner h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; color: var(--fig); margin: 2.4rem 0 0.6rem; } .legal-inner p, .legal-inner li { line-height: 1.75; color: var(--char); } .legal-inner ul { margin: 0.4rem 0 1rem 1.2rem; } .legal-inner li { margin-bottom: 0.4rem; } .legal-inner a { color: var(--accent-dk); text-decoration: underline; } /* ── CONTACT ── */ .section-contact { background: var(--warm); } .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6rem; align-items: start; } .contact-info h2 { margin-bottom: 1rem; } .contact-info > p { font-size: 0.95rem; color: var(--muted); margin-bottom: 2rem; line-height: 1.9; } .contact-detail { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.3rem; } .contact-icon { width: 36px; height: 36px; background: var(--cream); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; flex-shrink: 0; } .contact-detail-body strong { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; } .contact-detail-body a, .contact-detail-body span, .contact-detail-body address { font-size: 0.92rem; color: var(--char); text-decoration: none; font-style: normal; line-height: 1.6; } .contact-detail-body a:hover { color: var(--accent-dk); } .social-row { display: flex; gap: 0.7rem; margin-top: 2rem; flex-wrap: wrap; } .social-btn { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); padding: 0.4rem 0.9rem; border-radius: 1px; text-decoration: none; transition: all 0.2s; } .social-btn:hover { border-color: var(--fig); color: var(--fig); } /* Light variant for the dark "What's happening now" section */ .news-follow { margin-top: 3.5rem; text-align: center; } .news-follow-label { color: rgba(255,255,255,0.7); font-size: 1.05rem; max-width: 44ch; margin: 0 auto 1.4rem; } .news-follow .social-row { justify-content: center; margin-top: 0; } .social-btn--light { color: var(--stone); border-color: rgba(255,255,255,0.35); } .social-btn--light:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); } /* ── CONTACT FORM ── */ .contact-form-wrap { background: var(--cream); border: 1px solid var(--border); padding: 3rem; border-radius: 2px; } .contact-form-wrap h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 500; color: var(--fig); margin-bottom: 0.3rem; } .form-intro { font-size: 0.84rem; color: var(--muted); margin-bottom: 2rem; font-style: italic; } .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } .form-group label span[aria-hidden] { color: var(--accent); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.72rem 0.9rem; border: 1px solid var(--border); border-radius: 1px; font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 300; color: var(--char); background: var(--warm); outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); } .form-group textarea { resize: vertical; min-height: 110px; } .form-error { font-size: 0.78rem; color: #C0392B; margin-top: 0.3rem; } .form-submit { width: 100%; padding: 0.9rem; background: var(--fig); color: #fff; border: none; font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer; border-radius: 1px; transition: background 0.2s; } .form-submit:hover { background: var(--fig-mid); } .form-note { font-size: 0.72rem; color: var(--muted); text-align: center; margin-top: 0.8rem; line-height: 1.6; } /* ── FOOTER ── */ .site-footer { background: var(--char); padding: 3rem 5vw; } .footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.2rem; align-items: center; text-align: center; } .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 500; color: rgba(255,255,255,0.75); } .site-footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; } .site-footer a { font-size: 0.74rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; } .site-footer a:hover { color: rgba(255,255,255,0.85); } .footer-contact { font-size: 0.82rem; color: rgba(255,255,255,0.45); } .footer-social { display: flex; gap: 1.2rem; align-items: center; } .footer-social a { color: rgba(255,255,255,0.45); transition: color 0.2s; } .footer-social a:hover { color: rgba(255,255,255,0.85); } .footer-credits { font-size: 0.72rem; color: rgba(255,255,255,0.42); max-width: 640px; margin: 0 auto 0.6rem; line-height: 1.7; } .footer-copy { font-size: 0.72rem; color: rgba(255,255,255,0.3); } /* ── RESPONSIVE ── */ @media (max-width: 1024px) { .about-grid { gap: 4rem; } .wedding-grid { gap: 3rem; } .contact-grid { gap: 3rem; } } @media (max-width: 900px) { .menus-grid { grid-template-columns: 1fr; max-width: 680px; } .services-grid { grid-template-columns: 1fr 1fr; } .service-card:nth-child(2) { border-right: none; } .service-card:nth-child(3) { border-right: 1px solid var(--border); border-top: 1px solid var(--border); } .service-card:nth-child(4) { border-right: none; } .about-grid, .wedding-grid, .contact-grid { grid-template-columns: 1fr; } .about-badge { left: 0.5rem; bottom: 0.5rem; } .wedding-images { grid-template-columns: 1fr 1fr; height: 320px; } .wedding-images img:first-child { grid-row: auto; } .news-grid { grid-template-columns: 1fr 1fr; } .more-grid { grid-template-columns: 1fr; } .gallery-grid { columns: 2; } /* Fixed backgrounds break (blank/misaligned) on mobile Safari & most touch browsers — pin them */ .hero-bg { background-attachment: scroll; } } /* Catch touch devices of any width (e.g. iPad landscape) — fixed backgrounds are unreliable there */ @media (hover: none), (pointer: coarse) { .hero-bg { background-attachment: scroll; } } @media (max-width: 700px) { .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--warm); border-bottom: 1px solid var(--border); padding: 1.5rem 5vw; gap: 1.2rem; } .nav-links.is-open { display: flex; } .nav-toggle { display: block; } .services-grid { grid-template-columns: 1fr; } .service-card { border-right: none !important; } .service-card + .service-card { border-top: 1px solid var(--border); } .news-grid { grid-template-columns: 1fr; } .carousel-btn { display: none; } /* swipe to scroll on touch screens */ .form-2col { grid-template-columns: 1fr; } .contact-form-wrap { padding: 2rem; } section { padding: 4rem 5vw; } .gallery-grid { columns: 2; gap: 0.5rem; } .gallery-item { margin-bottom: 0.5rem; } } /* Touch devices have no hover, so surface captions permanently (they'd never appear otherwise) */ @media (hover: none) { .gallery-item figcaption { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .hero-bg { background-attachment: scroll; } } /* ── THANK YOU PAGE ── */ .thankyou-wrap { min-height: 70vh; display: grid; place-items: center; padding: 8rem 5vw 5rem; text-align: center; } .thankyou-inner { max-width: 560px; } .thankyou-icon { font-size: 3rem; margin-bottom: 1.5rem; display: block; } .thankyou-inner h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; color: var(--fig); margin-bottom: 1rem; } .thankyou-inner p { color: var(--muted); font-weight: 300; line-height: 1.8; margin-bottom: 2rem; }