/* * Furni - main stylesheet */ :root{ --cream:#FBF2E3; --cream2:#F6E6CF; --off-white:#F4F1ED; --sand:#E8D5C4; /* Darkened from the original #998E7D/#7C6B58/#B08557/#C96C89 - all four were failing WCAG AA (~3.2-3.6:1) against the site's light backgrounds (white/off-white/sand) since they're used as actual body/label/heading text, not just decorative accents. New values verified >=4.5:1 (small text) against all three. Same hue family, just deep enough to read reliably - not a palette redesign. */ --taupe:#645C50; --charcoal:#241C17; --ink:#241C17; --ink-soft:#605344; --line:#E6D6B8; --amber:#E08A2E; --amber-deep:#B85F17; --amber-darker:#8F4710; --amber-tint:#FBE3C4; --sand-deep:#6D5336; --sage:#6C8355; --sage-deep:#4F6440; --sage-tint:#E4EAD6; --gold:#F0B429; --gold-deep:#C98F14; --gold-tint:#FBE7B8; --pink:#F4C6D2; --pink-deep:#A1566E; --pink-tint:#FCEAEF; --teal:#4E8B72; --teal-deep:#3B6B57; --coffee:#6F4E37; --espresso:#3B2219; /* exact brand-guideline neutrals, used only in the header, hero and highlights strip */ --brand-charcoal:#282828; --brand-grey:#E5E4E4; --bg:var(--cream); --surface:#ffffff; --card:var(--cream2); --on-dark:var(--cream); --on-dark-soft:#E4C9A8; } /* No dark-mode variant: the site has no dark-mode design (sections use hardcoded light backgrounds like .bg-white/#fff, not the --bg/ --surface variables), so a leftover prefers-color-scheme override here previously flipped --ink to near-white while backgrounds stayed light - invisible text for any visitor with system dark mode on (iPhone reports this by default in many regions). Removed rather than re-added, since implementing a real dark theme across every section wasn't asked for and is a much bigger task. */ *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth; overflow-x:hidden;} /* ============================================================ Typography system - "Direction C: Warm Modern Hospitality" English: General Sans (display/headings) + Satoshi (body/UI). Arabic (:lang(ar), set by main.js via ): Tajawal for every role - the family collapses to one font, but weight/ tracking still differ per role below, matching the spec table. Sizes are fluid (clamp()) between the spec's mobile and desktop values, bounded by its parenthetical min/max ranges so type never overshoots on very narrow or ultra-wide screens. Letter-spacing tracking (nav/button/eyebrow) is zeroed out for Arabic - positive tracking breaks the cursive joins between Arabic letterforms, so it's a deliberate omission, not a gap in the spec. Satoshi is self-hosted (assets/fonts/satoshi/) rather than pulled from Fontshare, so body/UI text renders correctly even if that CDN is slow, blocked, or unreachable. ============================================================ */ @font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi/Satoshi-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi/Satoshi-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi/Satoshi-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } :root{ --font-display:'General Sans',ui-sans-serif,system-ui,sans-serif; --font-body:'Satoshi',sans-serif; --font-nav:'Satoshi',sans-serif; --font-button:'Satoshi',sans-serif; --font-eyebrow:'Satoshi',sans-serif; --font-highlight:'General Sans',ui-sans-serif,system-ui,sans-serif; /* Fluid corner-accent radii - the large single-corner "cut" used sitewide (family-craft-portrait, the flask banner, tile-featured, place-card, vc-card, tile-sub) as a signature detail. Same min-px + px+vw + max-px fluid formula the type scale already uses (see the h1/h2 clamp() rules below), so these scale down smoothly on narrow screens instead of a 120px cut overwhelming a 360px-wide mobile card, and cap out at their original full size on large screens. */ --radius-accent-lg:clamp(56px, 34px + 6vw, 120px); --radius-accent-sm:clamp(28px, 17px + 3vw, 60px); /* Shared "torn paper" edge (originally .menu-page .torn-btn's own clip-path) - reused on every non-clickable pill/badge sitewide so they all read as torn paper rather than plain rounded pills, distinct from real buttons (which keep their full pill shape). */ --torn-edge:polygon(0% 13%,3% 9%,7% 15%,12% 7%,18% 16%,24% 6%,30% 13%,36% 8%,42% 15%,48% 6%,55% 13%,61% 7%,67% 15%,73% 7%,79% 14%,85% 8%,91% 16%,96% 6%,100% 12%,100% 88%,95% 93%,90% 86%,84% 94%,78% 85%,72% 93%,66% 87%,60% 95%,54% 86%,48% 94%,42% 85%,36% 94%,30% 86%,24% 93%,18% 85%,12% 94%,6% 87%,0% 91%); } :root:lang(ar){ --font-display:'Tajawal',sans-serif; --font-body:'Tajawal',sans-serif; --font-nav:'Tajawal',sans-serif; --font-button:'Tajawal',sans-serif; --font-eyebrow:'Tajawal',sans-serif; --font-highlight:'Tajawal',sans-serif; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-weight:400; font-size:clamp(17px, 16.62px + 0.096vw, 19px); line-height:1.6; letter-spacing:.005em; -webkit-font-smoothing:antialiased; } :root:lang(ar) body{letter-spacing:normal;} h1{font-family:var(--font-display); font-weight:600; font-size:clamp(38px, 32.77px + 2.308vw, 74px); line-height:1.1; letter-spacing:-.02em; margin:0 0 .4em;} h2{font-family:var(--font-display); font-weight:500; font-size:clamp(27px, 28.15px + 0.962vw, 46px); line-height:1.15; letter-spacing:-.01em; margin:0 0 .4em;} h3{font-family:var(--font-display); font-weight:500; font-size:clamp(21px, 21.46px + 0.385vw, 32px); line-height:1.25; letter-spacing:0; margin:0 0 .4em;} :root:lang(ar) h1{font-weight:700;} :root:lang(ar) h2{font-weight:700;} :root:lang(ar) h3{font-weight:500;} .navlink{font-family:var(--font-nav); font-weight:500; font-size:clamp(15px, 14.62px + 0.096vw, 16px); line-height:1; letter-spacing:.05em;} :root:lang(ar) .navlink{letter-spacing:normal;} .btn,.btn-primary,.btn-outline,.directions-btn,.visit-action__btn{font-family:var(--font-button); font-weight:700; font-size:clamp(15px, 14.62px + 0.096vw, 16px); line-height:1; letter-spacing:.03em;} :root:lang(ar) .btn,:root:lang(ar) .btn-primary,:root:lang(ar) .btn-outline,:root:lang(ar) .directions-btn,:root:lang(ar) .visit-action__btn{letter-spacing:normal;} .eyebrow,.eyebrow-line,.hl-label{font-family:var(--font-eyebrow); font-weight:700; font-size:clamp(12px, 11.62px + 0.096vw, 13px); line-height:1.2; letter-spacing:.1em; text-transform:uppercase;} :root:lang(ar) .eyebrow,:root:lang(ar) .eyebrow-line,:root:lang(ar) .hl-label{letter-spacing:normal;} .mark,.text-highlight{font-family:var(--font-highlight); font-weight:400; font-style:italic;} :root:lang(ar) .mark,:root:lang(ar) .text-highlight{font-weight:300; font-style:normal;} /* brandmark logo: swap wordmark per language (main.js toggles body.lang-ar) and, in the header only, per nav state (white wordmark over the transparent/hero-video top state, black once #siteNav.solid). The English wordmark now ships as two pre-colored SVGs (furni-logo-en-white.svg / -black.svg) instead of one dark SVG pushed through a CSS filter:invert() - that filter was the likely cause of the "distorted" rendering the client reported, since filtering a complex vector (fine strokes in the "chai" tagline) can introduce rendering artifacts a natively-colored asset doesn't have. Arabic still uses one dark SVG + filter, since that version wasn't reported as distorted. */ #siteNav .brandmark .logo-en-black, #siteNav .brandmark .logo-ar{display:none;} #siteNav .brandmark .logo-en-white{display:block;} #siteNav.solid .brandmark .logo-en-white{display:none;} #siteNav.solid .brandmark .logo-en-black{display:block;} body.lang-ar #siteNav .brandmark .logo-en-white, body.lang-ar #siteNav .brandmark .logo-en-black{display:none;} body.lang-ar #siteNav .brandmark .logo-ar{display:block;} /* Footer background is always light, so just the black wordmark - no white variant needed there. */ footer .foot-brand .logo-ar{display:none;} footer .foot-brand .logo-en-black{display:block;} body.lang-ar footer .foot-brand .logo-en-black{display:none;} body.lang-ar footer .foot-brand .logo-ar{display:block;} h1,h2,h3{text-wrap:balance; margin:0; font-weight:600;} p{margin:0;} a{color:inherit; text-decoration:none;} img,.photo{max-width:100%;} .script{font-family:'Beau Rivage',cursive; font-weight:400;} body.lang-ar .script{font-family:'Tajawal',sans-serif; font-style:italic; font-weight:400;} .wrap{max-width:1240px; margin:0 auto; padding-inline:24px; position:relative;} .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;} .eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--sand-deep); margin-bottom:14px;} .eyebrow::before{content:"";width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0;} /* brush watermark accent, sits on its own line above the heading */ .brush-behind::before{ content:attr(data-brush); display:block; font-family:'Beau Rivage',cursive; font-size:1.5em; line-height:1; color:var(--sand-deep); transform:rotate(-3deg); transform-origin:left bottom; margin:0 0 -.05em 2px; pointer-events:none; } body.lang-ar .brush-behind::before{display:none;} /* Sitewide "next/forward" arrow icon (View Full Menu, Read the story, the homepage menu CTA, the Our Story link) - mirrored in Arabic so it points toward the start of reading order like every other RTL forward-direction cue, instead of staying pinned to the right the way it reads in English. Scoped to this one shared class (plus the Our Story link's own arrow) rather than every in a button, so unrelated icons (pins, hamburger, external-link) are untouched. */ body.lang-ar .icon-arrow-next, body.lang-ar .story-note__arrow{transform:scaleX(-1);} /* marker highlight on key words */ /* Client-reported bug: this used to paint a partial yellow highlighter stripe (background-size:100% .5em at the baseline) behind "karak chai" in the homepage statement - looked like broken/glitched text rather than an intentional highlight, so it's removed. The font-highlight italic treatment above is enough to set the phrase apart without a background effect. */ /* rotated stamp badge */ .stamp{ position:absolute; width:112px; height:112px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-family:var(--font-eyebrow); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; transform:rotate(-10deg); z-index:2; } /* ---- placeholder photography ---- */ .photo{ position:relative; overflow:hidden; border-radius:22px; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px), linear-gradient(155deg,#3a3530 0%, #5b5349 45%, #8a8072 100%); } .photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%, rgba(255,255,255,.14), transparent 55%);} .photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;} .photo.has-image{background:var(--cream);} .photo.has-image::after{background:none;} .photo.has-image::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px); mix-blend-mode:overlay;} .photo .brief{position:absolute; left:14px; bottom:14px; right:14px; font-family:var(--font-body); font-size:12px; line-height:1.45; color:#fff; background:rgba(20,18,16,.6); padding:8px 11px; border:1px dashed rgba(255,255,255,.55); max-width:340px; border-radius:10px;} .photo .brief b{display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; margin-bottom:3px; font-weight:600;} .photo.r-hero{aspect-ratio:16/10;} .photo.r-wide{aspect-ratio:16/9;} .photo.r-square{aspect-ratio:4/5; border-top-left-radius:var(--radius-accent-sm);} .photo.r-portrait{aspect-ratio:4/5;} /* ---- nav ---- */ /* nav, hero and the highlight strip use only the five official brand neutrals, per the approved Figma redesign; typeface now comes from the Direction C role variables defined above, not a page-specific font-family. */ /* No background here at the top state - each page's own hero/banner provides its own dark overlay underneath (see header.hero::before below for the homepage; About/Contact/Visit/Journal/single-post already have their own __overlay treatment). ".solid" (scrolled past the hero) still gets an opaque fill below. */ #siteNav{position:fixed; top:0; left:0; right:0; z-index:50; padding-block:22px; transition:background-color .35s ease, padding .35s ease, border-color .35s ease, top .35s ease; font-family:var(--font-nav);} /* Raised above fixed page-level UI (currently just .furni-zamzam- badge, z-index:150) only while the mobile drawer is open, so it doesn't fight for the same corner the badge sits in - the open drawer should read as full-screen, not have that pill still showing through/over it. Stays at the base 50 otherwise, well below page content that should sit above a slim top bar. */ #siteNav.nav-open{z-index:200;} /* WordPress pushes page content down for logged-in users' admin toolbar (adds .admin-bar to body) but a position:fixed element ignores that shift on its own - clear it explicitly so the nav (and everything relying on it, like the hero banners below) isn't hidden under the toolbar. */ body.admin-bar #siteNav{top:32px;} @media (max-width:782px){ body.admin-bar #siteNav{top:46px;} } /* National Day promo banner (see furni_national_day_active() in functions.php) - a fixed strip above the nav, only present while body.has-nd-banner is set. --nd-banner-h drives both the banner's own height and how far #siteNav (and the admin-bar combo below) gets pushed down, so the two can't drift out of sync. */ :root{ --nd-banner-h:42px; } @media (max-width:640px){ :root{ --nd-banner-h:56px; } } .nd-banner{position:fixed; top:0; left:0; right:0; z-index:60; min-height:var(--nd-banner-h); display:flex; align-items:center; justify-content:center; text-align:center; padding:8px 20px; background:#006C35; color:#fff; font-family:var(--font-button); font-weight:700; font-size:13.5px; letter-spacing:.01em; line-height:1.4;} @media (max-width:640px){ .nd-banner{font-size:12px; padding:8px 16px;} } body.has-nd-banner #siteNav{top:var(--nd-banner-h);} body.has-nd-banner.admin-bar #siteNav{top:calc(var(--nd-banner-h) + 32px);} @media (max-width:782px){ body.has-nd-banner.admin-bar #siteNav{top:calc(var(--nd-banner-h) + 46px);} } #siteNav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px;} #siteNav .brandmark{display:flex; align-items:center;} /* No display here - the toggle rules above (scoped to #siteNav/ footer specifically) own visibility for each logo variant. Only the Arabic wordmark needs the invert filter now - the English ones are natively white/black already (see the toggle rules). */ #siteNav .brandmark img{height:46px; width:auto; transition:filter .35s ease;} #siteNav .brandmark .logo-ar{filter:brightness(0) invert(1);} #siteNav ul{display:flex; gap:30px; list-style:none; margin:0; padding:0;} #siteNav .navlink{font-size:16px; letter-spacing:.01em; color:#fff; font-weight:500; border-bottom:2px solid transparent; padding-bottom:3px;} /* hover:hover excludes touch devices - without it, tapping a mobile nav link fires a simulated :hover that then stays visually "stuck" on until the user taps elsewhere, reading as an underline that appears on click/tap rather than an intentional hover effect. */ @media (hover:hover){ #siteNav .navlink:hover{border-color:rgba(255,255,255,.6);} } #siteNav .navright{display:flex; align-items:center; gap:14px;} #langToggle{font-size:13.5px; letter-spacing:.02em; color:#fff; border:1.5px solid rgba(255,255,255,.55); padding:8px 16px; background:transparent; cursor:pointer; font-family:var(--font-nav); font-weight:500; border-radius:999px; transition:border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;} #langToggle:hover{background:rgba(255,255,255,.1); transform:translateY(-2px); box-shadow:0 8px 16px rgba(0,0,0,.2);} #siteNav .btn-outline{display:inline-flex; align-items:center; gap:7px; background:var(--coffee); color:#fff; padding:10px 20px; font-size:14px; letter-spacing:.01em; font-weight:600; border-radius:999px; border:1px solid #969696; box-shadow:0 8px 18px rgba(111,78,55,.3); transition:transform .2s ease, box-shadow .2s ease;} #siteNav .btn-outline:hover{transform:translateY(-2px); box-shadow:0 12px 22px rgba(111,78,55,.4);} #siteNav .btn-outline svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;} #siteNav.solid{background:var(--sand); padding-block:14px; box-shadow:0 2px 14px rgba(0,0,0,.08);} #siteNav.solid .brandmark .logo-ar{filter:none;} #siteNav.solid .navlink{color:var(--brand-charcoal);} @media (hover:hover){ #siteNav.solid .navlink:hover{border-color:var(--brand-charcoal);} } #siteNav.solid .btn-outline.navlink{color:#fff;} #siteNav.solid #langToggle{color:var(--brand-charcoal); border-color:rgba(40,40,40,.35);} #siteNav.solid #langToggle:hover{background:rgba(40,40,40,.06);} #siteNav.solid .menu-btn{color:var(--brand-charcoal);} .menu-btn{display:none; background:none; border:none; color:#fff; font-size:32px; cursor:pointer; line-height:1;} body.nav-locked{overflow:hidden;} /* buttons */ .btn{display:inline-flex; align-items:center; gap:9px; padding:14px 28px; font-size:15px; letter-spacing:.02em; font-weight:600; border:2px solid currentColor; cursor:pointer; background:none; border-radius:999px; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;} .btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;} .btn.solid{background:var(--espresso); color:#fff; border-color:var(--espresso); box-shadow:0 10px 22px rgba(59,34,25,.28);} .btn.solid:hover{background:#2c1913; border-color:#2c1913; transform:translateY(-2px); box-shadow:0 14px 28px rgba(59,34,25,.36);} .btn.gold{background:var(--gold); color:var(--ink); border-color:var(--gold); box-shadow:0 10px 22px rgba(201,143,20,.28);} .btn.gold:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(201,143,20,.36);} .hero .btn.solid{background:var(--coffee); color:#fff; border:none; box-shadow:none; text-transform:capitalize;} .hero .btn.solid:hover{transform:translateY(-2px); box-shadow:0 12px 22px rgba(111,78,55,.4);} .hero .btn.ghost{background:var(--off-white); color:var(--brand-charcoal); border-color:var(--off-white);} .hero .btn.ghost:hover{background:#fff; transform:translateY(-2px);} /* ---- hero ---- */ .hero{position:relative; padding-block:270px 100px; min-height:760px; overflow:hidden; isolation:isolate; font-family:var(--font-body);} .hero .bg{position:absolute; inset:0; z-index:-2; background:var(--brand-charcoal);} .hero .hero-photo{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:68% 45%;} /* Torn-paper edge overlay into the .highlights section below (cream fill matches --off-white exactly, see assets/images/torn-edge.svg). height is capped well under the hero's own 100px bottom padding (clamp floor/ceiling, not the SVG's native 148px) so it reads as a transition detail rather than a large band eating into the hero; object-fit:cover + object-position:top crops only the flat filler area at the bottom of the source shape when the box is shorter than that, never the jagged torn silhouette itself, which sits at the top of the source art. Overridden to z-index:1 (behind hero text/buttons, which the header.hero > * rule below puts at 2) and position:absolute despite being a direct header.hero child, because that rule would otherwise apply position:relative; z-index:2 to it same as every other direct child. */ .hero .torn-edge{position:absolute; left:0; right:0; bottom:-1px; z-index:1; width:100%; height:clamp(48px, 8vw, 110px); object-fit:cover; object-position:top; display:block; pointer-events:none;} /* Gentle, gradually-deepening bottom-weighted gradient - the hero::before below already darkens the very top for the nav bar, but faded to nothing well before the heading/subtext/buttons, which sit lower in the hero and had no real contrast boost against the new video. Kept moderate (peaks under 50%) so the footage still reads clearly through the top two-thirds. */ .hero .scrim{position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(20,17,14,.05) 0%, rgba(20,17,14,.16) 42%, rgba(20,17,14,.34) 75%, rgba(20,17,14,.46) 100%);} /* Stronger top-down overlay carrying nav legibility now that #siteNav itself has no background - darkest right behind the fixed nav bar, fading out by the middle of the hero. */ header.hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 25%, rgba(0,0,0,.10) 55%, rgba(0,0,0,0) 100%); } header.hero > *{position:relative; z-index:2;} .hero-inner{max-width:720px; color:#fff;} .hero .eyebrow{color:rgba(255,255,255,.85); font-family:var(--font-eyebrow); font-weight:500;} .hero .eyebrow::before{background:#fff;} .hero h1{font-size:clamp(2.83rem, 6.4vw, 4.72rem); line-height:1.05; letter-spacing:-.01em; font-weight:700;} .hero .lede{margin-top:22px; font-size:1.16rem; max-width:50ch; color:rgba(255,255,255,.9); font-family:var(--font-body); font-weight:500; line-height:1.55; text-shadow: 0 2px 4px rgba(0,0,0,0.4) } .hero .actions{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;} .hero .stamp{display:none;} /* highlight circle strip */ .highlights{padding-block:34px; background:var(--off-white); font-family:var(--font-body);} .hl-row{display:flex; justify-content:space-between; gap:24px; overflow-x:auto; overflow-y:visible; padding:22px 2px 26px; -ms-overflow-style:none; scrollbar-width:none;} .hl-row::-webkit-scrollbar{display:none;} .hl{display:flex; flex-direction:column; align-items:center; gap:12px; flex-shrink:0; text-align:center;} .hl-dot{width:82px; height:82px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(40,40,40,.08); transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;} .hl:hover .hl-dot{transform:translateY(-3px) scale(1.05); background:var(--brand-charcoal); box-shadow:0 10px 20px rgba(40,40,40,.28);} .hl-dot svg{width:28px; height:28px; stroke:var(--brand-charcoal); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s ease;} .hl:hover .hl-dot svg{stroke:#fff;} .hl-label{font-size:13px; font-weight:500; color:var(--brand-charcoal); letter-spacing:.06em; text-transform:uppercase;} /* ---- sections generic ---- */ section{padding-block:92px; position:relative;} /* Scattered low-opacity brand icons for closing CTA cards - see furni_brand_marks() in functions.php. Concentrated on the right, a couple peeking in from the left edge (clipped by the card's own overflow:hidden, which is what makes them read as "peeking"). */ .brand-marks{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; color:var(--brand-charcoal);} .brand-marks__mark{position:absolute; display:block;} .brand-marks__mark svg{width:100%; height:100%; display:block;} .brand-marks__mark--1{top:12%; right:8%; width:56px; height:56px; opacity:.09;} .brand-marks__mark--2{bottom:14%; right:22%; width:36px; height:36px; opacity:.08;} .brand-marks__mark--3{bottom:-16px; right:-16px; width:78px; height:78px; opacity:.11;} .brand-marks__mark--4{top:16%; left:-20px; width:45px; height:45px; opacity:.07;} @media (max-width:640px){ .brand-marks__mark--3{width:56px; height:56px;} } .center{max-width:920px; margin-inline:auto; text-align:center;} .statement{font-size:clamp(1.4rem, 2.6vw, 2.1rem); line-height:1.42; font-weight:500; text-wrap:balance;} .statement .muted{opacity:.72;} section.bg-sand{background:var(--sand);} section.bg-sage{background:var(--sage-tint);} section.bg-offwhite{background:var(--off-white);} section.bg-gold{background:var(--gold-tint);} section.bg-cream{background:var(--cream);} section.bg-pink{background:var(--pink-tint);} section.bg-white{background:#fff;} .split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;} .col-text h2{font-size:clamp(2.03rem, 3.4vw, 2.73rem); margin-bottom:18px;} .col-text p{opacity:.82; font-size:1.09rem; max-width:46ch;} .col-text .btn{margin-top:26px;} /* place / rooted in madinah */ /* Full-bleed "Rooted in Madinah" section - the photo is a fixed CSS background (background-attachment:fixed) rather than an , so it stays put in the viewport while .place-hero__inner (badge/ eyebrow/heading/cards, capped at the sitewide 1240px .wrap) scrolls over it, anchored to the bottom of the photo. iOS Safari doesn't honor background-attachment:fixed - the photo just scrolls normally there instead of pinning. That's an iOS-only platform limitation with no CSS-only fix that doesn't have its own tradeoffs (position:sticky "fixes" it but needs a non-visible overflow-free ancestor chain, which this site doesn't reliably have - not worth the fragility for one platform). Left as a graceful no-op on iOS per request: desktop and Android keep the pin effect, iOS just gets a normal scrolling photo instead of a broken one. */ .place-hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; background-size:cover; background-position:center; background-attachment:fixed; background-color:var(--brand-charcoal); overflow:hidden;} /* Full-section tint (0%-100%), not just the bottom portion - a light wash over the whole photo so it reads as one deliberately tinted surface, darkening further toward the bottom where the text/cards sit for extra contrast there. */ .place-hero__scrim{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(20,16,13,.22) 0%, rgba(20,16,13,.42) 45%, rgba(20,16,13,.78) 100%); pointer-events:none;} .place-hero__inner{position:relative; z-index:1; width:100%; padding-block:72px 64px;} .place-badge{display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#111; padding:3px 10px; background:rgba(255,255,255,1); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); pointer-events:none; user-select:none; white-space:nowrap; margin-bottom:28px;} .place-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0;} .place-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:44px; align-items:end;} .place-text{max-width:380px;} .eyebrow-line{display:inline-flex; align-items:center; gap:12px; color:var(--ink-soft); margin-bottom:18px;} .eyebrow-line::before{content:""; width:28px; height:2px; background:var(--gold); flex-shrink:0;} .place-hero .eyebrow-line{color:rgba(255,255,255,.75);} .place-text h2{font-size:clamp(2.03rem, 3.2vw, 2.73rem); font-weight:500; line-height:1.15;} .place-hero .place-text h2{color:#fff;} .place-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .place-card{background:#fff; border:1px solid var(--line); border-radius:18px; border-top-right-radius:var(--radius-accent-sm); padding:24px; box-shadow:0 2px 4px -1px rgba(0,0,0,.03), 0 6px 12px -2px rgba(0,0,0,.04), 0 16px 24px -4px rgba(0,0,0,.05), 0 32px 48px -8px rgba(0,0,0,.06);} /* #E8D5C4 is the existing --sand token, the same fill used for cards/banners sitewide (invitation-card, price pills, etc.). Left card's border stays --line as before; right card's border switched to --brand-grey (an existing near-exact match for the requested #e6e6e6) now that the new box-shadow above carries most of the definition/lift, so this one reads as a soft neutral outline rather than needing the bolder --taupe it had before. */ .place-card:nth-child(2){background:var(--sand); border-color:var(--brand-grey);} .place-card:nth-child(2) .place-icon{border-color:var(--taupe);} .place-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:10px;} .place-icon{width:42px; height:42px; border-radius:12px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .place-icon svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;} .place-tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; white-space:nowrap;} .place-card h3{font-size:1.11rem; font-weight:700; margin-bottom:8px; font-family:var(--font-display);} .place-card p{font-size:.94rem; opacity:.72; line-height:1.55;} @media (max-width:860px){ .place-grid{grid-template-columns:1fr;} .place-cards{grid-template-columns:1fr;} } /* menu section - brand-neutrals-only, per the client's redesign image */ .menu-section{background:var(--off-white); font-family:var(--font-body);} .menu-section .eyebrow-line{color:var(--taupe);} .menu-section .eyebrow-line::before{background:var(--taupe); width:22px;} .menu-section .col-text h2{font-family:var(--font-display); font-weight:700; color:var(--brand-charcoal); letter-spacing:-.01em; line-height:1.1;} .menu-section .col-text p{color:var(--ink-soft); opacity:1; font-weight:400; line-height:1.62;} .menu-section .btn.solid{background:var(--espresso); color:#fff; border:none; box-shadow:0 4px 12px rgba(59,34,25,.3); text-transform:capitalize;} .menu-section .btn.solid:hover{background:#2c1913; transform:translateY(-2px); box-shadow:0 14px 30px rgba(59,34,25,.4);} .sig-list{margin-top:30px; display:flex; flex-direction:column;} .sig-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px; border-bottom:1px solid rgba(40,40,40,.1);} .sig-row .name{display:block; font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:var(--brand-charcoal); text-transform:uppercase !important; font-weight:300 !important; letter-spacing:1px !important;} .sig-row .note{display:block; font-size:.91rem; margin-top:3px; font-family:var(--font-body); font-weight:400; color:var(--ink-soft);} /* Flat key-value spec, not pill/button-shaped chips - a static price list, not a Hot/Iced choice a visitor can click. A thin divider between entries stands in for the old chip backgrounds. */ .sig-row .price-group{display:flex; align-items:center; gap:16px; flex-shrink:0;} .sig-row .price{position:relative; display:flex; flex-direction:column; gap:2px; white-space:nowrap; font-family:var(--font-body);} .sig-row .price:not(:last-child)::after{content:""; position:absolute; top:2px; bottom:2px; right:-8px; width:1px; background:var(--brand-grey);} .sig-row .price-label{font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--taupe);} .sig-row .price-value{display:inline-flex; align-items:baseline; gap:3px;} .sig-row .price-value__num{font-variant-numeric:tabular-nums; font-size:1.1rem; font-weight:700; color:var(--brand-charcoal);} .sig-row .price-value__unit{font-size:.8em; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--taupe);} body.lang-ar .sig-row .name{font-family:'Tajawal',sans-serif;} /* National Day promo: strikes the original price pill(s) and appends a "SAR 9.6" badge - .is-promo-struck is added to .price-group / .item-price-group only while furni_national_day_active() is true. */ .is-promo-struck .price-value__num, .is-promo-struck .price-value__unit{text-decoration:line-through; opacity:.5;} .price-promo-badge{display:inline-flex; align-items:center; padding:6px 16px 8px; border-radius:16px; background:#006C35; color:#fff; font-family:var(--font-body); font-weight:700; font-size:.91rem; white-space:nowrap; align-self:center;} /* menu visual - photo with two soft blobs behind and a dark pour badge */ .menu-visual{position:relative; width:100%; max-width:420px; margin-inline:auto; padding:26px 8px 52px 54px;} .mv-blob{position:absolute; z-index:0;} .mv-blob-sand{background:var(--sand); width:88%; height:84%; left:0; bottom:14px; border-radius:48% 52% 45% 55%/55% 48% 52% 45%;} .mv-photo{position:relative; z-index:1; border-radius:28px; box-shadow:0 22px 44px rgba(40,40,40,.16);} .mv-badge{position:absolute; z-index:2; right:-4%; bottom:0; max-width:200px; background:var(--brand-charcoal); color:#fff; border-radius:16px; padding:16px 18px; box-shadow:0 16px 32px rgba(0,0,0,.28);} .mv-badge .mb-eyebrow{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); font-weight:600; margin-bottom:6px;} .mv-badge .mb-text{display:block; font-size:.96rem; line-height:1.42; font-weight:500;} @media (max-width:860px){ .menu-visual{margin-top:8px; max-width:360px; padding:22px 24px 46px;} } /* pattern moment - "The Mark" tile set. Each tile is now a standalone, pre-colored SVG (assets/images/the-mark/) with its own background baked in, rather than an inline stroke-only path colored via currentColor/--tile-fg - simpler and matches the approved tile artwork exactly. */ .pattern-section{background:var(--off-white); font-family:var(--font-body);} .pattern-label{display:flex; gap:10px; align-items:center; justify-content:center; font-family:var(--font-eyebrow); font-weight:600; font-size:13px; margin-bottom:36px;} .pattern-label .dash{color:var(--taupe);} .pattern-label .label-text{color:var(--brand-charcoal); letter-spacing:.08em; text-transform:uppercase;} /* Mobile/tablet fallback: simple wrapping grid, no explicit placement - the mosaic below only kicks in at 861px+, since a 7-column staggered cluster has no sensible way to reflow at phone/tablet widths. */ .pattern-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:600px; margin-inline:auto;} .pattern-grid .tile{aspect-ratio:1;} .pattern-grid .tile img{display:block; width:100%; height:100%; object-fit:contain;} /* Desktop: irregular mosaic instead of a clean rectangle - each tile is placed explicitly by its position in $mark_tiles (front-page.php) via nth-child, on a 7-column x 5-row grid with several cells left empty so the cluster reads as a staggered cross rather than a block. Approximated from a reference screenshot rather than measured pixel-for-pixel - nudge the row/column numbers below to reposition any tile, they're independent per nth-child. */ @media (min-width:861px){ .pattern-grid{grid-template-columns:repeat(6,90px); grid-auto-rows:90px; gap:0; justify-content:center; max-width:100%;} /* Overlap every tile by 1px on each side so two adjacent tiles' borders sit exactly on top of each other (one line) instead of side by side (a doubled, thicker-looking line) - matches each tile's own border stroke width. */ .pattern-grid .tile{margin:-1px;} .pattern-grid .tile:nth-child(1){grid-column:4; grid-row:1;} .pattern-grid .tile:nth-child(2){grid-column:1; grid-row:3;} .pattern-grid .tile:nth-child(3){grid-column:2; grid-row:3;} .pattern-grid .tile:nth-child(4){grid-column:6; grid-row:5;} .pattern-grid .tile:nth-child(5){grid-column:5; grid-row:4;} .pattern-grid .tile:nth-child(6){grid-column:3; grid-row:2;} .pattern-grid .tile:nth-child(7){grid-column:6; grid-row:3;} .pattern-grid .tile:nth-child(8){grid-column:2; grid-row:2;} .pattern-grid .tile:nth-child(9){grid-column:4; grid-row:3;} .pattern-grid .tile:nth-child(10){grid-column:5; grid-row:2;} .pattern-grid .tile:nth-child(11){grid-column:2; grid-row:4;} .pattern-grid .tile:nth-child(12){grid-column:5; grid-row:3;} .pattern-grid .tile:nth-child(13){grid-column:5; grid-row:5;} } .pattern-caption{text-align:center; margin-top:30px; color:var(--taupe); font-size:15px; line-height:1.5; font-weight:500; max-width:720px; margin-inline:auto;} /* blog tiles ("From the Journal") - 1 large featured tile (left) + 3 smaller tiles (right), per the "home page blogs section" Figma export. Colors/fonts mapped onto the site's existing tokens (--sand, --off-white, --taupe etc.) rather than the export's own one-off palette, so this matches the rest of the homepage. */ .blog-tiles__header{display:flex; flex-direction:column; gap:12px; margin-bottom:40px;} .blog-tiles__header .eyebrow-line{margin-bottom:0;} .blog-tiles__header h2{font-size:clamp(2.03rem, 3.4vw, 2.73rem);} .blog-tiles__grid{display:flex; gap:28px; align-items:stretch;} .tile-featured{background:var(--sand); border-radius:28px; border-top-left-radius:var(--radius-accent-lg); overflow:hidden; display:flex; flex-direction:column; flex:0 0 42%; box-shadow:0 14px 34px rgba(40,40,40,.07); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;} .tile-featured:hover{transform:translateY(-4px); box-shadow:0 20px 44px rgba(40,40,40,.14);} .tile-featured:hover .read-cta{transform:translateY(-2px); box-shadow:0 12px 24px rgba(59,34,25,.32);} .tile-featured__image{width:100%; height:300px; flex-shrink:0; overflow:hidden;} .tile-featured__image img{width:100%; height:100%; object-fit:cover; display:block;} .tile-featured__content{flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:36px;} .tile-featured__meta{display:flex; flex-direction:column; gap:16px;} .new-tag{display:inline-flex; align-items:center; gap:7px; padding:3px 10px; background:rgba(255,255,255,.55); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); pointer-events:none; user-select:none; align-self:flex-start;} .new-tag__dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;} .new-tag__label{font-family:inherit; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#998E7D; white-space:nowrap;} .tile-featured__title{font-family:var(--font-display); font-weight:600; font-size:clamp(1.46rem, 2vw, 1.88rem); line-height:1.25; color:var(--brand-charcoal);} .tile-featured__description{font-family:var(--font-body); font-size:16px; line-height:1.55; color:var(--ink-soft);} .tile-featured .read-cta{display:inline-flex; align-items:center; align-self:flex-start; background:var(--espresso); color:var(--off-white); padding:12px 22px; border-radius:999px; font-family:var(--font-button); font-weight:700; font-size:14px; white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease;} .tiles-column{display:flex; flex-direction:column; gap:16px; flex:1; min-width:0;} .tile-sub{background:var(--off-white); border-radius:22px; border-top-right-radius:var(--radius-accent-sm); overflow:hidden; display:flex; flex:1; min-height:0; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;} .tile-sub:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(40,40,40,.12);} .tile-sub__image{width:180px; flex-shrink:0; overflow:hidden;} .tile-sub__image img{width:100%; height:100%; object-fit:cover; display:block;} .tile-sub__details{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:24px 28px;} .tile-sub__category{font-family:var(--font-eyebrow); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--taupe);} .tile-sub__title{font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.3; color:var(--brand-charcoal); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;} @media (max-width:860px){ .blog-tiles__grid{flex-direction:column;} .tile-featured{flex-basis:auto;} } @media (max-width:520px){ .tile-featured__image{height:220px;} .tile-featured__content{padding:26px;} .tile-sub{flex-direction:column;} .tile-sub__image{width:100%; height:160px;} .tile-sub__details{padding:20px;} } /* visit */ .visit-panel{display:grid; grid-template-columns:1fr 1fr; border-radius:26px; overflow:hidden; box-shadow:0 18px 40px rgba(176,133,87,.14);} .visit-details{padding:52px 48px; background:var(--surface);} .visit-details h2{font-size:clamp(2.03rem, 3.2vw, 2.53rem); margin-bottom:28px;} .vrow{display:flex; gap:18px; padding-block:16px; border-top:1px solid var(--line);} .vrow:first-of-type{border-top:none;} .vrow .label{width:110px; flex-shrink:0; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sand-deep); font-weight:700; padding-top:2px;} .vrow .value{font-size:1.04rem;} .vrow .value .tbc{opacity:.65; font-style:italic;} .visit-media{position:relative; background:var(--sage-tint); min-height:340px; overflow:hidden;} /* The free embed (no API key - see $furni_map_src in front-page.php) always centers its pin at the exact vertical middle of whatever height the iframe itself renders at - there's no "center vs. marker" parameter to offset one from the other. So instead this renders the iframe taller than its visible box (130% height) and shifts it up (top:-32%), which crops away part of the mostly- empty area north of Furni while keeping the pin itself in view - net effect, the pin lands about a third of the way down the visible frame instead of dead center, revealing more of the area south of it (towards Al Masjid Al Nabawi) at the bottom. */ .visit-map{position:absolute; left:0; right:0; top:-32%; width:100%; height:130%; border:0; filter:grayscale(.35) contrast(1.05) saturate(1.1);} .visit-media .directions-btn{position:absolute; z-index:2; right:16px; bottom:16px; display:inline-block; background:var(--coffee); color:#fff; font-family:inherit; padding:11px 20px; border-radius:999px; text-decoration:none; box-shadow:0 8px 20px rgba(36,28,23,.22); transition:transform .2s ease, box-shadow .2s ease;} .visit-media .directions-btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(36,28,23,.28);} /* visit cta + footer - brand neutrals only, per client footer redesign */ .visit-cta{background:var(--off-white); padding-block:96px 64px; font-family:var(--font-body);} .vc-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:center;} .vc-eyebrow{display:flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); font-weight:600; margin-bottom:20px;} .vc-eyebrow::before{content:''; width:22px; height:1.5px; background:var(--taupe); flex-shrink:0;} .visit-cta h2{font-size:clamp(2.42rem, 4.6vw, 3.73rem); font-weight:700; color:var(--brand-charcoal); letter-spacing:-.01em; line-height:1.08; font-family:var(--font-display);} .vc-lede{margin-top:18px; font-size:1.08rem; line-height:1.62; color:var(--ink-soft); max-width:46ch; font-weight:400;} .vc-card{background:var(--sand); border-radius:24px; border-top-left-radius:var(--radius-accent-sm); padding:34px 32px 28px; box-shadow:0 14px 32px 0 rgba(40,40,40,.07); position:relative; overflow:hidden;} .vc-card > *:not(.brand-marks):not(.vc-pin){position:relative; z-index:1;} .vc-card-eyebrow{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); font-weight:600;} .vc-pin{position:absolute; top:30px; right:32px; width:34px; height:34px; border-radius:50%; background:rgba(40,40,40,.08); display:flex; align-items:center; justify-content:center;} .vc-pin svg{width:16px; height:16px; stroke:var(--brand-charcoal); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} .vc-card h3{margin-top:20px; font-size:1.83rem; font-weight:700; color:var(--brand-charcoal); font-family:var(--font-display);} .vc-sub{margin-top:4px; font-size:.98rem; color:var(--ink-soft);} .vc-divider{height:1px; background:rgba(40,40,40,.12); margin:26px 0 20px;} .vc-link{display:inline-flex; align-items:center; gap:8px; font-size:1.04rem; font-weight:600; color:var(--brand-charcoal);} .vc-link svg{width:15px; height:15px; stroke:var(--brand-charcoal); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease;} .vc-link:hover svg{transform:translate(2px,-2px);} footer{background:var(--off-white); color:var(--brand-charcoal); font-family:var(--font-body); padding-block:0;} footer .foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:2rem; padding-block:48px; border-top:1px solid rgba(40,40,40,.12);} footer .foot-brand-col{display:flex; flex-direction:column; align-items:flex-start; gap:18px;} footer .foot-brand img{height:46px; width:auto;} footer .foot-brand__tagline{font-size:.91rem; line-height:1.6; color:var(--taupe); max-width:36ch; margin:0;} @media (min-width:1920px){ footer .foot-brand__tagline{max-width:32ch;} } footer .foot-brand__social{display:flex; align-items:center; gap:14px;} footer .foot-brand__social a{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(40,40,40,.08); color:var(--brand-charcoal); flex-shrink:0; transition:background-color .2s ease;} footer .foot-brand__social a:hover{background:rgba(40,40,40,.14);} footer .foot-brand__social svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} footer h4{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); margin-bottom:16px; font-weight:600;} footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:1rem;} footer ul a{color:var(--brand-charcoal); font-weight:500;} footer ul a:hover{text-decoration:underline;} footer .foot-contact-list{gap:14px;} footer .foot-contact-link{display:inline-flex; align-items:center; gap:10px;} footer .foot-contact-icon{width:16px; height:16px; stroke:var(--taupe); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;} .foot-bottom{background:transparent; margin-top:0; border-top:1px solid rgba(40,40,40,.12);} .foot-bottom .bottom{display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; padding-block:22px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; text-align:center;} .foot-copyright{display:inline-flex; align-items:center; gap:8px;} .foot-flag{width:18px; height:auto; border-radius:2px; flex-shrink:0;} .foot-credit-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} /* ============================================================ Floating "Made with Zamzam" pill (template-parts/components/ zamzam-badge.php) - fixed bottom-right, persistent while scrolling. Currently only on the homepage (front-page.php); get_template_part() the same file from footer.php later to roll it out site-wide once approved. Solid --espresso/white rather than the translucent sand/glass treatment the old inline hero badge used - that one only ever sat over one dark photo; this sits over whatever scrolls underneath it, so it needs to read clearly against anything, not blend with one specific backdrop. z-index sits above the nav (50) but below the National Day popup (300) below, so it never floats on top of an open modal. */ /* Solid background, not glass - unlike the other badges (each scoped to one known section), this one is position:fixed and floats over whatever content happens to be scrolling underneath it, light or dark, so it needs to read clearly against anything rather than blending with one specific backdrop. */ .furni-zamzam-badge{position:fixed; right:24px; bottom:24px; z-index:150; display:inline-flex; align-items:center; gap:8px; padding:3px 10px; background:var(--espresso); border:1px solid rgba(255,255,255,.2); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.25); font-family:inherit; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#E9E9E9; pointer-events:none; user-select:none; white-space:nowrap;} .furni-zamzam-badge__icon{display:flex; width:15px; height:15px; flex-shrink:0; color:#E9E9E9;} .furni-zamzam-badge__icon svg{width:100%; height:100%; display:block;} @media (max-width:640px){ .furni-zamzam-badge{right:16px; bottom:16px; padding:3px 9px; font-size:.65rem;} .furni-zamzam-badge__icon{width:13px; height:13px;} } /* ============================================================ Saudi National Day popup (template-parts/components/ national-day-popup.php, wired into footer.php so it's available sitewide) - see that file's own header comment for the date- gating and view-cap logic (assets/js/main.js has the JS half). Colors: Furni's own tokens throughout, except --nd-flag-green/ --nd-flag-dark, which stand in for the real Saudi flag (the strips, the flag badges, and the tint/gradient over the photo) - those stay authentic flag colors rather than being reskinned to the brand palette. Fonts: --font-display for the one serif-style headline (matches every other h2 sitewide), --font-body/--font- button for everything else, Tajawal directly for the two Arabic lines (already loaded sitewide for Arabic - see functions.php - used here regardless of the page's own current language, since this card shows English+Arabic together rather than toggling). ============================================================ */ .furni-national-day{--nd-flag-green:#006C35; --nd-flag-dark:#1A3B2B; position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:40px 16px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;} .furni-national-day.is-open{opacity:1; visibility:visible; transition:opacity .3s ease;} .furni-national-day__backdrop{position:absolute; inset:0; background:rgba(20,18,16,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); border:none; padding:0; cursor:pointer;} .furni-national-day__card{position:relative; display:flex; align-items:stretch; width:100%; max-width:960px; min-height:560px; background:var(--cream); border:1px solid var(--sand); border-radius:28px; box-shadow:0 8px 16px rgba(0,0,0,.08), 0 24px 48px -12px rgba(0,0,0,.15); overflow:hidden; transform:scale(.96); transition:transform .3s ease;} .furni-national-day.is-open .furni-national-day__card{transform:scale(1);} /* ---- Left: photo panel ---- */ .furni-national-day__visual{position:relative; width:360px; flex-shrink:0; overflow:hidden;} .furni-national-day__photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;} .furni-national-day__tint{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(11,40,24,.72) 0%, rgba(26,59,43,.72) 55%, rgba(0,0,0,0) 100%); pointer-events:none;} .furni-national-day__flag-strip{position:absolute; left:0; width:100%; height:6px; display:flex;} .furni-national-day__flag-strip--top{top:0;} .furni-national-day__flag-strip--bottom{bottom:0;} .furni-national-day__flag-strip span{display:block; width:50%; height:6px;} .furni-national-day__flag-strip span:first-child{background:var(--nd-flag-green);} .furni-national-day__flag-strip span:last-child{background:#fff;} .furni-national-day__header{position:absolute; top:18px; left:0; width:100%; padding-inline:20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:6px;} .furni-national-day__flags{display:flex; align-items:center; gap:10px;} .furni-national-day__flag-badge{display:flex; align-items:center; justify-content:center; width:32px; height:22px; background:var(--nd-flag-green); border:1px solid rgba(255,255,255,.2); border-radius:3px; font-size:13px;} .furni-national-day__year-badge{display:flex; align-items:center; justify-content:center; padding:3px 10px; background:rgba(255,255,255,.55); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); font-family:inherit; font-weight:600; font-size:.7rem; color:#998E7D; text-transform:uppercase; letter-spacing:.08em; pointer-events:none; user-select:none; white-space:nowrap;} .furni-national-day__header-label{font-family:var(--font-body); font-weight:600; font-size:10px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; text-align:center; margin:0;} .furni-national-day__arabic-line{position:absolute; top:72px; left:0; width:100%; padding-inline:24px; box-sizing:border-box; font-family:'Tajawal',sans-serif; font-weight:700; font-size:16px; color:rgba(255,255,255,.4); text-align:center; margin:0;} .furni-national-day__brand{position:absolute; top:200px; left:0; width:100%; padding-inline:24px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;} .furni-national-day__brand-name{font-family:var(--font-button); font-weight:700; font-size:28px; color:#fff; text-transform:uppercase; letter-spacing:.06em; margin:0;} .furni-national-day__brand-sub{font-family:var(--font-body); font-weight:400; font-size:11px; color:rgba(255,255,255,.6); margin:0;} .furni-national-day__divider{position:absolute; top:268px; left:120px; width:120px; height:1px; background:rgba(255,255,255,.2);} .furni-national-day__ribbon{position:absolute; top:282px; left:0; width:100%; padding-inline:32px; box-sizing:border-box; font-family:var(--font-body); font-weight:500; font-size:10px; color:#a8d5b5; text-transform:uppercase; letter-spacing:.06em; text-align:center; margin:0;} .furni-national-day__bottom{position:absolute; bottom:6px; left:0; width:100%; height:58px; padding:0 20px 16px; box-sizing:border-box; display:flex; align-items:flex-end; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--nd-flag-dark) 100%);} .furni-national-day__promo-tag{display:inline-flex; align-items:center; padding:3px 10px; background:rgba(255,255,255,.55); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); font-family:inherit; font-weight:600; font-size:.7rem; color:#998E7D; text-transform:uppercase; letter-spacing:.08em; pointer-events:none; user-select:none; white-space:nowrap;} /* ---- Right: content panel ---- */ .furni-national-day__content{position:relative; flex:1 0 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:32px; box-sizing:border-box;} .furni-national-day__close{position:absolute; top:24px; right:24px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--cream); border:1px solid var(--sand); border-radius:20px; color:var(--espresso); cursor:pointer; padding:0; flex-shrink:0; transition:background-color .2s ease;} .furni-national-day__close:hover{background:var(--sand);} .furni-national-day__close svg{display:block; width:16px; height:16px;} .furni-national-day__badge{display:flex; align-items:center; gap:12px; padding:3px 10px; background:rgba(255,255,255,.55); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); pointer-events:none; user-select:none; flex-shrink:0;} .furni-national-day__badge-icon{width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:var(--espresso); color:#fff; border-radius:14px; flex-shrink:0;} .furni-national-day__badge-icon svg{display:block; width:16px; height:16px;} .furni-national-day__badge-label{font-family:inherit; font-weight:600; font-size:.7rem; color:#998E7D; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;} .furni-national-day__headline{display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; width:100%; flex-shrink:0;} .furni-national-day__headline-en{font-family:var(--font-display); font-weight:700; font-size:clamp(24px, 4vw, 36px); line-height:1.15; color:var(--brand-charcoal); width:100%; margin:0;} .furni-national-day__headline-ar{font-family:'Tajawal',sans-serif; font-weight:700; font-size:clamp(20px, 3.5vw, 28px); line-height:1.4; color:var(--brand-charcoal); width:100%; text-align:center; margin:0;} .furni-national-day__offer{display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; width:100%; flex-shrink:0;} .furni-national-day__offer-title{font-family:var(--font-body); font-weight:600; font-size:18px; line-height:1.35; color:var(--brand-charcoal); width:100%; margin:0;} .furni-national-day__offer-sub{font-family:var(--font-body); font-weight:400; font-size:14px; line-height:1.5; color:var(--taupe); width:100%; margin:0;} .furni-national-day__offer-price{font-family:var(--font-button); font-weight:700; font-size:15px; line-height:1.4; color:#006C35; width:100%; margin:0;} .furni-national-day__offer-expiry{font-family:var(--font-body); font-weight:400; font-size:12px; line-height:1.4; color:var(--taupe); width:100%; margin:0;} .furni-national-day__cta{display:inline-flex; align-items:center; gap:8px; padding:16px 24px; background:var(--espresso); border-radius:999px; font-family:var(--font-button); font-weight:700; font-size:14px; color:#fff; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;} .furni-national-day__cta:hover{opacity:.88; transform:translateY(-2px); box-shadow:0 12px 24px rgba(59,34,25,.32);} .furni-national-day__cta svg{display:block; width:16px; height:16px; flex-shrink:0;} .furni-national-day__continue{font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--taupe); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; flex-shrink:0; transition:color .2s ease;} .furni-national-day__continue:hover{color:var(--espresso);} @media (max-width:768px){ .furni-national-day__card{flex-direction:column; max-width:480px; min-height:unset;} .furni-national-day__visual{width:100%; height:240px;} .furni-national-day__brand{top:90px;} .furni-national-day__divider{top:158px;} .furni-national-day__ribbon{top:172px;} .furni-national-day__arabic-line{top:36px;} .furni-national-day__bottom{height:50px;} .furni-national-day__content{padding:24px; gap:16px;} .furni-national-day__badge-label{font-size:11px;} .furni-national-day__offer-title{font-size:16px;} .furni-national-day__cta{font-size:13px; padding:14px 20px;} } @media (max-width:480px){ .furni-national-day{padding:20px 12px;} .furni-national-day__card{border-radius:16px;} .furni-national-day__visual{height:200px;} .furni-national-day__brand{top:65px;} .furni-national-day__arabic-line{top:26px;} .furni-national-day__divider{top:130px;} .furni-national-day__ribbon{top:144px;} .furni-national-day__content{padding:20px 16px; gap:14px;} .furni-national-day__close{top:16px; right:16px;} .furni-national-day__badge{gap:8px; padding:8px 12px;} .furni-national-day__badge-label{font-size:10px; letter-spacing:.02em;} .furni-national-day__headline-en{font-size:22px;} .furni-national-day__headline-ar{font-size:20px;} .furni-national-day__offer-title{font-size:14px;} .furni-national-day__offer-sub{font-size:13px;} .furni-national-day__offer-expiry{font-size:11px;} .furni-national-day__cta{font-size:12px; padding:12px 16px; white-space:normal; text-align:center;} } @media (max-width:400px){ /* Below ~400px the "Saudi National Day Special" badge label (fixed nowrap) can run out of room and force the row wider than the card - let it wrap instead of pushing/overflowing the layout. */ .furni-national-day__badge{max-width:100%; flex-wrap:wrap; justify-content:center; row-gap:4px;} .furni-national-day__badge-label{white-space:normal; text-align:center;} } @media (prefers-reduced-motion: reduce){ .furni-national-day, .furni-national-day__card{transition:none;} } @media (max-width:860px){ /* Top bar: brand left, hamburger/close right - the only thing visible until the drawer opens. .nav-topbar always spans the full row width so justify-content can actually push the two apart to the edges (see header.php - it wraps brandmark + menu-btn so they can be ordered independently of ul/.navright, both of which the drawer needs stacked below instead). */ #siteNav .wrap{flex-wrap:wrap;} #siteNav .nav-topbar{display:flex; align-items:center; justify-content:space-between; width:100%;} #siteNav ul,#siteNav .navright{display:none;} .menu-btn{display:block;} /* Mobile drawer: opened via .nav-open (toggled in main.js). Full viewport height + its own scroll, rather than the old shrink-to-content box, so hero copy below it can never bleed through mid-screen on a short drawer. #siteNav itself has no background at the top of the page (each hero supplies its own dark overlay instead - see header.hero::before), which is fine for the slim top bar sitting over that overlay, but the open drawer needs a solid fill of its own (unless already .solid/ scrolled, which already has its own sand fill) so it's readable regardless of what's behind it. */ #siteNav.nav-open{height:80vh; overflow-y:auto;} #siteNav.nav-open:not(.solid){background:var(--brand-charcoal);} #siteNav.nav-open .wrap{flex-direction:column; flex-wrap:nowrap; align-items:stretch; min-height:100%;} /* Links: the main middle area, left-aligned, large touch-friendly type. */ #siteNav.nav-open ul{display:flex; flex-direction:column; align-items:flex-start; width:100%; gap:16px; margin-top:48px; padding-top:0; border-top:none;} #siteNav.nav-open .navlink{font-size:23px; font-weight:500; padding-block:16px; width:100%;} /* Footer area: Get Directions + language toggle, pinned to the bottom of the drawer via margin-top:auto on the column-flex .wrap above, instead of sitting in the top bar. */ #siteNav.nav-open .navright{display:flex; flex-direction:column; align-items:stretch; width:100%; gap:14px; margin-top:auto; padding-top:28px; padding-bottom:50px;} #siteNav.nav-open .btn-outline{order:1; justify-content:center; width:100%; padding-block:16px; background:#3B2219; box-shadow:none;} #siteNav.nav-open .btn-outline:hover{transform:none; box-shadow:none;} #siteNav.nav-open #langToggle{order:2; align-self:center; background:transparent;} .hero .brief{display:none;} .split{grid-template-columns:1fr; gap:32px;} .menu-section .col-text{order:2;} .menu-section .menu-visual{order:1;} .sig-row{flex-direction:column; align-items:flex-start;} .visit-panel{grid-template-columns:1fr;} .visit-details{padding:40px 26px;} .visit-media{min-height:260px;} .vc-grid{grid-template-columns:1fr; gap:32px;} footer .foot-grid{grid-template-columns:1fr 1fr; row-gap:32px;} } @media (max-width:520px){ footer .foot-grid{grid-template-columns:1fr;} .hero{padding-block:230px 76px; min-height:560px;} .brush-behind::before{font-size:2.6em;} } @media (prefers-reduced-motion: no-preference){ .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;} .reveal.in{opacity:1; transform:none;} } /* Mobile hero banner swap - a separately designed image shown in place of a page's desktop hero photo/video on phones. Only ever applied via PHP (front-page.php, page-about.php, page-contact.php, page-our-menu.php, page-visit.php) when that page's own "Hero banner image (mobile)" ACF field is actually filled in, so pages that haven't set one keep their existing desktop image on mobile, unchanged. Whatever page-specific rule already styles the desktop element (size/position/object-fit) still applies here - these two classes only ever toggle display, nothing else. */ .hero-banner-mobile{display:none;} @media (max-width:768px){ .hero-banner-desktop{display:none;} .hero-banner-mobile{display:block;} } /* ---- contact page (page-contact.php) ---- */ .contact-page{font-family:var(--font-body);} .contact-page .btn-primary{display:inline-flex; align-items:center; gap:7px; background:var(--espresso); color:var(--off-white); font-weight:600; font-size:15px; padding:14px 24px; border-radius:999px; border:none; cursor:pointer; white-space:nowrap; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease; text-decoration:none;} .contact-page .btn-primary:hover{opacity:.85; transform:translateY(-2px); box-shadow:0 12px 24px rgba(59,34,25,.32);} .contact-page .btn-primary svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;} .contact-page .visit-card .btn-primary{align-self:flex-start;} .contact-page .contact-hero-eyebrow{color:var(--sand); margin-bottom:0;} .contact-page .contact-hero-eyebrow::before{background:var(--sand); width:36px;} .contact-page .contact-visit-eyebrow{color:var(--taupe); margin-bottom:0;} .contact-page .contact-visit-eyebrow::before{background:var(--taupe); width:36px;} .contact-page .hero-band{position:relative; width:100%; height:640px; overflow:hidden; padding-block:0; display:flex; flex-direction:column;} .contact-page .hero-band__image{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;} .contact-page .hero-band__overlay{position:absolute; inset:0; background:rgba(40,40,40,.54);} .contact-page .hero-band__content{position:relative; z-index:1; display:flex; flex-direction:column; gap:32px; align-items:flex-start; justify-content:flex-end; flex:1; max-width:1240px; width:100%; margin-inline:auto; padding-inline:24px; padding-block:112px 132px;} /* Torn-paper edge into .contact-area below (fill matches body's --cream, which .contact-area sits on - see assets/images/ torn-edge-cream.svg). z-index:0 keeps it above the hero image/ overlay (both z-index:auto) and below hero-band__content (z-index:1); capped height so it never eats into the hero's own content, same approach as the homepage hero - see style.css's "hero" section. */ .contact-page .hero-band .torn-edge{position:absolute; left:0; right:0; bottom:-1px; z-index:0; width:100%; height:clamp(48px, 8vw, 110px); object-fit:cover; object-position:top; display:block; pointer-events:none;} .contact-page .hero-band__heading{font-weight:700; font-size:82px; line-height:1.02; color:var(--off-white); max-width:860px; margin:0;} .contact-page .hero-band__subtext{font-weight:400; font-size:20px; line-height:1.65; color:var(--sand); max-width:680px;} .contact-page .contact-area{display:flex; gap:72px; align-items:flex-start; max-width:1240px; margin-inline:auto; padding-block:96px;} .contact-page .contact-options{flex:1 0 0; min-width:0; display:flex; flex-direction:column; gap:32px; align-items:flex-start;} .contact-page .contact-options__label{font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); white-space:nowrap;} .contact-page .contact-options__heading{font-weight:400; font-size:36px; line-height:1.25; color:var(--brand-charcoal); margin:0;} .contact-page .direct-contact{width:100%; display:flex; flex-direction:column;} .contact-page .contact-method{position:relative; width:100%; border-top:1px solid var(--brand-grey);} .contact-page .contact-method__inner{display:flex; align-items:center; justify-content:space-between; padding:22px 0; white-space:nowrap;} .contact-page .contact-method__text{font-weight:400; font-size:17px; color:var(--brand-charcoal);} .contact-page .contact-method__text.tbc{opacity:.65; font-style:italic;} .contact-page .contact-method__arrow{font-size:19px; color:var(--taupe);} .contact-page .response-note{width:100%; background:var(--sand); border-radius:28px; padding:24px; display:flex; flex-direction:column; gap:8px;} .contact-page .response-note__title{font-weight:400; font-size:19px; color:var(--brand-charcoal); margin:0;} .contact-page .response-note__body{font-weight:400; font-size:15px; line-height:1.6; color:var(--brand-charcoal); margin:0;} .contact-page .contact-form{position:relative; width:570px; max-width:100%; flex-shrink:0; background:var(--off-white); border-radius:28px; border:1px solid var(--brand-grey); box-shadow:0 14px 34px rgba(40,40,40,.09);} .contact-page .contact-form__inner{display:flex; flex-direction:column; gap:24px; padding:40px;} /* Two separate CF7 forms (English/Arabic) occupy the same slot - see the comment in page-contact.php. Only one shows at a time, keyed off body.lang-ar (toggled by main.js alongside every other data-en/data-ar element), so the form switches with the rest of the page instead of needing its own toggle logic. */ .contact-page .contact-form__inner--ar{display:none;} body.lang-ar .contact-page .contact-form__inner--en{display:none;} body.lang-ar .contact-page .contact-form__inner--ar{display:flex;} .contact-page .form-row{display:flex; gap:20px; align-items:flex-start;} .contact-page .form-field-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;} .contact-page .form-notice{margin:24px 24px 0; padding:14px 18px; border-radius:14px; font-size:.96rem; line-height:1.5;} .contact-page .form-notice--success{background:var(--sand); color:var(--brand-charcoal);} .contact-page .form-notice--error{background:#fbe3e3; color:#8a2c2c;} .contact-page .form-field{display:flex; flex-direction:column; gap:12px; flex:1 0 0; min-width:0;} .contact-page .form-field--full{flex:none; width:100%;} .contact-page .form-field__label{font-weight:600; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-charcoal);} .contact-page .form-field__input, .contact-page .form-field__textarea{width:100%; border:1px solid var(--brand-grey); border-radius:16px; padding:17px 18px; font-family:inherit; font-size:17px; line-height:1.4; color:var(--brand-charcoal); background:transparent; outline:none; transition:border-color .2s ease; resize:none; appearance:none;} .contact-page .form-field__input::placeholder, .contact-page .form-field__textarea::placeholder{color:var(--taupe); font-weight:400;} .contact-page .form-field__input:focus, .contact-page .form-field__textarea:focus{border-color:var(--taupe);} .contact-page .form-field__input{height:58px;} .contact-page .form-field__textarea{height:152px;} /* Contact Form 7 chrome: the form-field__* classes above are applied directly to CF7's inputs via class: in the form template, so most styling is shared automatically. These cover CF7's own wrapper/ notice/validation markup, which the custom form never had. */ .contact-page .wpcf7-form{display:flex; flex-direction:column; gap:28px;} .contact-page .wpcf7-form-control-wrap{display:block; width:100%;} .contact-page .wpcf7-not-valid-tip{display:block; margin-top:6px; color:#8a2c2c; font-size:13px;} .contact-page .wpcf7-form .btn-primary{margin-top:4px;} .contact-page .wpcf7-response-output{margin:0; padding:16px 20px; border-radius:14px; font-size:.96rem; font-weight:500; line-height:1.5; border:none !important;} .contact-page .wpcf7-form.sent .wpcf7-response-output{background:var(--sand); color:var(--brand-charcoal);} .contact-page .wpcf7-form.failed .wpcf7-response-output, .contact-page .wpcf7-form.aborted .wpcf7-response-output, .contact-page .wpcf7-form.spam .wpcf7-response-output, .contact-page .wpcf7-form.invalid .wpcf7-response-output, .contact-page .wpcf7-form.unaccepted .wpcf7-response-output{background:#fbe3e3; color:#8a2c2c;} .contact-page .visit-section{display:flex; flex-direction:column; gap:64px; align-items:flex-start; max-width:1240px; margin-inline:auto; padding-bottom:112px;} .contact-page .location-image{position:relative; width:100%; height:560px; border-radius:40px; overflow:hidden; margin:0;} .contact-page .location-image__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .contact-page .location-badge{position:absolute; bottom:28px; right:28px; background:rgba(255,255,255,1); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); padding:3px 10px; font-family:inherit; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#998E7D; pointer-events:none; user-select:none; white-space:nowrap;} .contact-page .visit-heading{display:flex; flex-direction:column; gap:24px; align-items:flex-start; width:100%;} .contact-page .visit-heading__title{font-weight:700; font-size:50px; line-height:1.12; color:var(--brand-charcoal); max-width:900px; margin:0;} .contact-page .visit-cards{display:flex; gap:24px; align-items:stretch; width:100%;} .contact-page .visit-card{flex:1 0 0; min-width:0; display:flex; flex-direction:column; gap:20px; padding:36px; border-radius:28px; border-top-left-radius:var(--radius-accent-sm); border:1px solid var(--brand-grey);} .contact-page .visit-card--warm{background:var(--sand); border-color:transparent;} .contact-page .visit-card__title{font-weight:400; font-size:25px; color:var(--brand-charcoal); white-space:nowrap; margin:0;} .contact-page .visit-card__body{font-weight:400; font-size:17px; line-height:1.6; color:var(--taupe); margin:0;} .contact-page .visit-card--warm .visit-card__body{color:var(--brand-charcoal);} .contact-page .visit-card__hairline{width:100%; height:1px; background:var(--taupe); border:none;} .contact-page .visit-card__note{font-weight:400; font-size:15px; line-height:1.5; color:var(--brand-charcoal); margin:0;} .contact-page .contact-closing{max-width:1240px; margin-inline:auto; padding-bottom:80px;} .contact-page .closing-callout{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; background:var(--sand); border-radius:28px; border-top-left-radius:var(--radius-accent-sm); padding:56px; box-shadow:0 14px 34px rgba(40,40,40,.09); gap:40px;} .contact-page .closing-callout > *:not(.brand-marks){position:relative; z-index:1;} .contact-page .closing-message{display:flex; flex-direction:column; gap:16px; max-width:760px;} .contact-page .closing-message__heading{font-weight:700; font-size:44px; line-height:normal; color:var(--brand-charcoal); margin:0;} .contact-page .closing-message__body{font-weight:400; font-size:18px; line-height:1.6; color:var(--brand-charcoal); max-width:620px; margin:0;} @media (max-width:860px){ .contact-page .hero-band__heading{font-size:54px; max-width:100%;} .contact-page .hero-band__subtext{max-width:100%;} .contact-page .contact-area{flex-direction:column; gap:48px;} .contact-page .contact-form{width:100%;} .contact-page .visit-heading__title{max-width:100%; font-size:40px;} .contact-page .visit-cards{flex-wrap:wrap;} .contact-page .visit-card{flex:1 0 calc(50% - 12px);} .contact-page .closing-callout{flex-direction:column; align-items:flex-start; padding:40px;} } @media (max-width:520px){ .contact-page .hero-band{height:auto; min-height:500px;} .contact-page .hero-band__content{padding-block:80px 56px;} .contact-page .hero-band__heading{font-size:38px;} .contact-page .hero-band__subtext{font-size:17px;} .contact-page .contact-area{padding-block:56px; padding-inline:20px;} .contact-page .contact-options__label{white-space:normal;} .contact-page .contact-options__heading{font-size:27px;} .contact-page .contact-method__inner{white-space:normal;} .contact-page .contact-method__text{overflow-wrap:anywhere;} .contact-page .form-row{flex-direction:column;} .contact-page .visit-section{gap:40px; padding-bottom:64px; padding-inline:20px;} .contact-page .location-image{height:280px;} .contact-page .visit-heading__title{font-size:32px;} .contact-page .visit-cards{flex-direction:column;} .contact-page .visit-card{flex:none; width:100%;} .contact-page .visit-card__title{white-space:normal;} .contact-page .contact-closing{padding-bottom:56px; padding-inline:20px;} .contact-page .closing-callout{padding:32px 24px;} .contact-page .closing-message__heading{font-size:30px;} .contact-page .closing-message__body{font-size:16px; max-width:100%;} } /* ---- Our Menu (page-our-menu.php) - reuses the exact featured-item + grid layout home.php used to have as "Furni Journal", since that shape (not the Journal branding, which moved to News at /news) is what got carried over to the new /our-menu page. Nested class names without "journal" in them (.featured-story, .story-card*, etc.) were never Journal-specific and keep their names as-is; scoping still comes from the renamed .menu-page/.menu-hero parents. ---- */ .menu-hero{position:relative; height:640px; width:100%; overflow:hidden; display:flex; flex-direction:column; padding-block:0; font-family:var(--font-body);} .menu-hero__bg{position:absolute; inset:0; pointer-events:none;} .menu-hero__bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .menu-hero__overlay{position:absolute; inset:0; background:rgba(40,40,40,.5);} .menu-hero__content{position:relative; z-index:1; display:flex; flex-direction:column; gap:32px; align-items:flex-start; justify-content:flex-end; flex:1; max-width:1240px; width:100%; margin-inline:auto; padding-inline:24px; padding-block:112px 132px;} /* Torn-paper edge into .menu-page below (fill matches --off-white, which .menu-page sets explicitly - see assets/images/torn-edge.svg, same asset the homepage hero and About hero use). z-index:0 - see the matching comment on .contact-page .hero-band .torn-edge. */ .menu-hero .torn-edge{position:absolute; left:0; right:0; bottom:-1px; z-index:0; width:100%; height:clamp(48px, 8vw, 110px); object-fit:cover; object-position:top; display:block; pointer-events:none;} .menu-hero__title{font-weight:700; font-size:82px; line-height:1.02; color:var(--off-white); max-width:900px; margin:0;} .menu-hero__subtitle{font-weight:400; font-size:20px; line-height:1.65; color:var(--sand); max-width:650px;} .menu-hero-eyebrow{color:var(--sand); margin-bottom:0;} .menu-hero-eyebrow::before{background:var(--sand); width:36px;} .menu-page{font-family:var(--font-body); background:var(--off-white);} /* Combo Deals banner - ACF repeater driven (page-our-menu.php reads the "combo_deals" field), so this whole section simply doesn't render when the field is empty. Side-by-side row (wraps on narrow screens), each card capped at 620px rather than stretching full width. */ .menu-page .menu-deals{padding:64px 112px 0; width:100%; max-width:1440px; margin-inline:auto; box-sizing:border-box;} .menu-page .menu-deals__wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:24px;} .menu-page .menu-deal-card{flex:1 1 460px; max-width:620px; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; box-shadow:0 14px 34px rgba(40,40,40,.14);} .menu-page .menu-deal-card__header{background:var(--espresso); padding:16px 28px;} .menu-page .menu-deal-card__title{margin:0; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.03em; text-transform:uppercase; color:#fff; text-align:center;} .menu-page .menu-deal-card__body{flex:1; display:flex; align-items:center; justify-content:space-between; gap:20px; background:linear-gradient(135deg, var(--taupe), var(--sand-deep)); padding:24px 28px;} .menu-page .menu-deal-card__items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} .menu-page .menu-deal-card__item{display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:#fff;} .menu-page .menu-deal-card__item.is-optional{color:rgba(255,255,255,.5); font-weight:600;} .menu-page .menu-deal-card__icon{width:20px; height:20px; flex-shrink:0; object-fit:contain;} .menu-page .menu-deal-card__icon--dot{width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.8;} .menu-page .menu-deal-card__price{display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; line-height:1;} .menu-page .menu-deal-card__price-num{font-family:var(--font-display); font-weight:700; font-size:40px; color:#fff;} .menu-page .menu-deal-card__price-unit{font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:2px;} .menu-page .featured-story{display:flex; flex-direction:column; gap:24px; align-items:flex-start; padding:96px 112px 112px; width:100%; max-width:1440px; margin-inline:auto;} .menu-page .section-heading{display:flex; flex-direction:column; gap:8px; width:100%;} .menu-page .section-heading__label{font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); white-space:nowrap; margin:0;} .menu-page .section-heading__title{font-weight:700; font-size:50px; line-height:normal; color:var(--brand-charcoal); max-width:650px; margin:0; scroll-margin-top:120px;} .menu-page .story-card--featured{position:relative; background:var(--off-white); border-radius:28px; border:1px solid var(--brand-grey); box-shadow:0 14px 34px rgba(40,40,40,.09); width:100%;} .menu-page .story-card--featured .story-card__inner{display:flex; flex-direction:row; gap:48px; align-items:center; padding:28px;} .menu-page .story-card--featured .story-card__image{position:relative; width:44%; max-width:460px; height:340px; border-radius:22px; overflow:hidden; flex-shrink:0;} .menu-page .story-card--featured .story-card__image img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .menu-page .story-card--featured .story-summary{display:flex; flex-direction:column; gap:18px; align-items:flex-start; width:100%; min-width:0;} .menu-page .story-card--featured .story-summary__title{font-weight:700; font-size:36px; line-height:1.18; color:var(--brand-charcoal); margin:0;} .menu-page .story-card--featured .story-summary__body{font-weight:400; font-size:17px; line-height:1.7; color:var(--taupe); margin:0;} .menu-page .story-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; width:100%; align-items:stretch;} .menu-page .story-card--small{position:relative; background:var(--off-white); border-radius:28px; border-top-left-radius: 100px; border:1px solid var(--brand-grey); box-shadow: 0 4px 14px rgba(40, 40, 40, 0.06); min-width:0; height:100%;} .menu-page .story-card--small .story-card__inner{display:flex; flex-direction:column; gap:20px; align-items:flex-start; height:100%;} /* Sand backdrop behind the item photo so a floating cutout PNG (or a tightly-cropped product shot) reads as an intentional editorial frame rather than sitting on bare white - object-fit:contain (instead of cover, used everywhere else on the site) keeps the whole item visible inside that frame rather than cropping it. */ .menu-page .story-card--small .story-card__image{position:relative; width:100%; height:220px; border-top-left-radius:100px; border-top-right-radius: 24px; border-bottom: 4px solid #fff; overflow:hidden; flex-shrink:0; background:var(--sand); padding:16px;} /* "Architect" style for this page only - flat, no background, a thick 3px accent border on the left edge only (editorial-label look) rather than the glass treatment used for badges elsewhere sitewide. Sharp corners (no border-radius) is part of that look. */ .menu-page .story-card__calories{position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; padding:5px 14px; font-family:inherit; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-charcoal); background:#fff; border:none; border-radius:9999px; box-shadow:0 4px 10px rgba(0,0,0,.14); pointer-events:none; user-select:none; white-space:nowrap;} .menu-page .story-card--small .story-card__image img{position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); object-fit:contain;} .menu-page .story-card--small .story-summary{display:flex; flex-direction:column; gap:12px; align-items:flex-start; width:100%; padding-inline:24px; padding-bottom: 24px; flex:1;} .menu-page .story-card--small .story-summary__title{font-weight:600; font-size:28px; line-height:1.2; color:var(--brand-charcoal); margin:0;} .menu-page .story-card--small .story-summary__body{font-weight:400; font-size:16px; line-height:1.7; color:var(--taupe); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;} /* Bordered/transparent so item tags (category, "Prepared with Zamzam Water", etc.) read as metadata rather than being mistaken for the filled-sand price pills below them. */ /* De-emphasized on purpose - a plain small label, not a badge, so it doesn't compete with the item title right below it. */ .menu-page .story-tag{display:inline-block; font-family:inherit; padding:0; background:none; border:none; border-radius:0; box-shadow:none; font-weight:600; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--taupe); pointer-events:none; user-select:none; white-space:nowrap;} .menu-page .story-summary__tags{display:flex; flex-wrap:wrap; gap:8px;} /* margin-top:auto pins price pills to the bottom of the card regardless of how many lines the title/description above take up (.story-summary is flex:1, see above), so prices stay aligned across a row of cards even when titles wrap differently. */ /* Flat key-value spec row, not pill/button-shaped chips - this is a static price list, not a Hot/Iced choice a visitor can click, so nothing here should look interactive. A thin divider between entries (not a background) is what separates "Hot 21 SAR" from "Iced 24 SAR" instead. */ .menu-page .item-price-group{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:auto; padding-top:4px;} .menu-page .item-price{position:relative; display:flex; flex-direction:column; gap:2px; white-space:nowrap;} .menu-page .item-price:not(:last-child)::after{content:""; position:absolute; top:2px; bottom:2px; right:-8px; width:1px; background:var(--brand-grey);} .menu-page .item-price .price-label{font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--taupe);} .menu-page .item-price .price-value{display:inline-flex; align-items:baseline; gap:3px;} .menu-page .item-price .price-value__num{font-variant-numeric:tabular-nums; font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--brand-charcoal);} .menu-page .item-price .price-value__unit{font-size:.8em; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--taupe);} .menu-page .menu-empty{padding:48px 0; color:var(--taupe); font-size:1.06rem;} .menu-page .pagination{display:flex; gap:12px; align-items:center; justify-content:center; width:100%;} .menu-page .pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:48px; padding:0 18px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; white-space:nowrap; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease; background:var(--off-white); color:var(--brand-charcoal); border:1px solid var(--brand-grey);} .menu-page .pagination .page-numbers:hover{opacity:.75; transform:translateY(-2px); box-shadow:0 8px 18px rgba(40,40,40,.14);} .menu-page .pagination .page-numbers.current{background:var(--brand-charcoal); color:var(--off-white); border-color:var(--brand-charcoal);} .menu-page .pagination .page-numbers.dots{border-color:transparent; background:none;} .menu-page .menu-invitation{padding:0 112px 80px; width:100%; max-width:1440px; margin-inline:auto;} .menu-page .invitation-card{position:relative; overflow:hidden; background:var(--sand); border-radius:28px; box-shadow:0 14px 34px rgba(40,40,40,.09); padding:56px; display:flex; flex-direction:column; gap:32px; align-items:flex-start;} .menu-page .invitation-card > *:not(.brand-marks){position:relative; z-index:1;} .menu-page .invitation-card__title{font-weight:700; font-size:44px; line-height:normal; color:var(--brand-charcoal); max-width:760px; margin:0;} .menu-page .invitation-card__body{font-weight:400; font-size:18px; line-height:1.6; color:var(--brand-charcoal); max-width:650px; margin:0;} .menu-page .invitation-card__copy{display:flex; flex-direction:column; gap:14px;} .menu-page .visit-action{display:inline-block; background:var(--espresso); padding:14px 24px; border-radius:999px; font-weight:600; font-size:15px; color:var(--off-white); white-space:nowrap; cursor:pointer; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease; text-decoration:none;} .menu-page .visit-action:hover{opacity:.85; transform:translateY(-2px); box-shadow:0 12px 24px rgba(59,34,25,.32);} /* Anchor nav for jumping to a menu_type section (Drinks/Eats/Sweets) - plain in-page links, smooth-scrolling via the sitewide html{scroll-behavior:smooth} rule, no JS required. */ .menu-page .menu-tabs-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 28px; width:100%;} .menu-page .menu-tabs{display:flex; flex-wrap:wrap; gap:10px;} .menu-page .menu-tabs__link{display:inline-flex; align-items:center; padding:10px 20px; border-radius:999px; border:1px solid var(--brand-grey); background:var(--off-white); color:var(--brand-charcoal); font-weight:600; font-size:14px; white-space:nowrap; text-decoration:none; transition:background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;} .menu-page .menu-tabs__link:hover{background:var(--sand); border-color:var(--sand); transform:translateY(-2px); box-shadow:0 8px 18px rgba(40,40,40,.14);} /* "View Full Menu" - deliberately not a pill like the tabs beside it, so it reads as its own thing rather than one more filter chip. The clip-path polygon tears the top/bottom edges into an irregular line (same jagged-silhouette language as assets/images/torn-edge* .svg used on page heroes/sections, redrawn at button scale rather than stretching that large SVG down) instead of a straight or rounded edge - that torn line is what reads as "torn paper" rather than a plain rectangle. Static (no hover-state change). */ .menu-page .torn-btn{position:relative; display:inline-flex; align-items:center; gap:9px; padding:19px 30px; margin:6px 4px; font-family:var(--font-button); font-weight:700; font-size:clamp(15px, 14.62px + 0.096vw, 16px); letter-spacing:.03em; color:var(--espresso); background:var(--sand); border:1.5px solid var(--line); text-decoration:none; white-space:nowrap; clip-path:var(--torn-edge); box-shadow:0 14px 26px rgba(59,34,25,.2);} .menu-page .torn-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;} /* scroll-margin-top clears the fixed #siteNav so a tab click doesn't land the section heading underneath it. */ /* padding-block:0 overrides the sitewide bare section{padding-block: 92px} reset (style.css:340), which would otherwise add 92px above and below every menu-section on top of .featured-story's own gap:24px (kept tight there for the heading/tab-bar spacing above the first section). The extra margin-top below is what actually controls the gap between one section and the next: 24px (parent gap) + 32px (this) = 56px total, without touching the heading-to-tabs / tabs-to-first-section spacing. */ .menu-page .menu-section{scroll-margin-top:120px; width:100%; padding-block:0;} .menu-page .menu-section:not(:first-of-type){margin-top:32px;} .menu-page .menu-section__title{font-weight:700; font-size:30px; color:var(--brand-charcoal); margin:0 0 20px;} /* Drinks-only add-on note (page-our-menu.php gates this to the "menu-drinks" section specifically). Plain text with a left accent border rather than a badge/pill, so it reads as a footnote to the section heading, not another clickable-looking chip - naturally responsive since it's just a wrapping text line, no fixed-width layout to break on narrow screens. */ .menu-page .menu-section__note{margin:-8px 0 20px; padding-left:14px; border-left:2px solid var(--gold); font-size:15px; font-style:italic; color:var(--taupe); max-width:520px;} /* Flask Banner - ACF-driven (page-our-menu.php reads the "flask_*" fields), rendered once at the bottom of the Drinks section only. Horizontal card: image left, details + CTA right, spanning the full section width rather than sitting in the .story-grid. */ .menu-page .flask-banner{display:flex; margin-top:28px; background:var(--sand); border-radius:24px; border-top-left-radius:var(--radius-accent-lg); border-top-right-radius:var(--radius-accent-lg); overflow:hidden; box-shadow:0 14px 34px rgba(40,40,40,.1);} .menu-page .flask-banner__image{flex:0 0 320px; align-self:stretch;} .menu-page .flask-banner__image img{width:100%; height:100%; object-fit:cover; display:block;} .menu-page .flask-banner__content{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:60px 40px 32px;} .menu-page .flask-banner__tag{margin:0; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);} .menu-page .flask-banner__title{margin:0; font-weight:700; font-size:28px; color:var(--brand-charcoal);} .menu-page .flask-banner__description{margin:4px 0 0; font-size:16px; line-height:1.6; color:var(--taupe); max-width:60ch;} .menu-page .flask-banner__footer{display:flex; align-items:center; gap:24px; margin-top:16px; flex-wrap:wrap;} .menu-page .flask-banner__price{display:inline-flex; align-items:baseline; gap:3px; margin:0;} .menu-page .flask-banner__price-num{font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--brand-charcoal);} .menu-page .flask-banner__price-unit{font-size:.8em; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--taupe);} @media (max-width:1024px){ .menu-hero__content{padding-block:112px 132px;} .menu-hero__title{font-size:58px; max-width:100%;} .menu-hero__subtitle{font-size:18px; max-width:100%;} .menu-page .featured-story{padding:80px 56px 96px;} .menu-page .menu-deals{padding:56px 56px 0;} .menu-page .flask-banner{flex-direction:column;} .menu-page .flask-banner__image{flex-basis:auto; height:260px;} .menu-page .section-heading__title{font-size:38px; max-width:100%;} .menu-page .story-card--featured .story-card__inner{flex-direction:column; gap:32px;} .menu-page .story-card--featured .story-card__image{width:100%; max-width:100%; height:360px;} .menu-page .story-card--featured .story-summary__title{font-size:34px;} .menu-page .story-grid{grid-template-columns:repeat(2, 1fr);} .menu-page .menu-invitation{padding:0 56px 80px;} .menu-page .invitation-card__title{font-size:36px;} } @media (max-width:640px){ .menu-hero{height:480px;} .menu-hero__content{padding-block:80px 56px; padding-inline:20px; gap:24px;} .menu-hero__title{font-size:40px;} .menu-hero__subtitle{font-size:16px;} .menu-page .featured-story{padding:56px 20px 72px; gap:32px;} .menu-page .menu-deals{padding:40px 20px 0;} .menu-page .menu-deal-card__header{padding:14px 22px;} .menu-page .menu-deal-card__body{padding:20px 22px; gap:16px;} .menu-page .menu-deal-card__price-num{font-size:32px;} .menu-page .flask-banner__image{height:330px;} .menu-page .flask-banner__content{justify-content:flex-start; padding:24px 22px;} .menu-page .flask-banner__title{font-size:24px;} .menu-page .flask-banner__footer{gap:16px;} .menu-page .section-heading__label{white-space:normal;} .menu-page .section-heading__title{font-size:30px;} .menu-page .story-card--featured .story-card__image{height:240px;} .menu-page .story-card--featured .story-summary__title{font-size:27px;} .menu-page .story-card--featured .story-summary__body{font-size:16px;} .menu-page .story-card--featured .story-card__inner{gap:24px; padding:20px;} /* Swipeable slider on mobile only - native scroll-snap, no JS. Desktop/tablet keep the regular CSS grid above untouched. Each card is 85% of the viewport so the next one peeks in at the edge as a "there's more, swipe" cue. */ .menu-page .story-grid{display:flex; align-items:stretch; grid-template-columns:none; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:20px; padding-inline:20px; margin-inline:-20px; -webkit-overflow-scrolling:touch; scrollbar-width:none;} .menu-page .story-grid::-webkit-scrollbar{display:none;} /* height:auto (not the desktop grid's height:100%) is required for align-items:stretch to actually take effect here - flexbox only stretches an item whose cross-size is auto; a definite height: 100% (even one resolving against an auto-height scroller) suppresses stretch entirely, which is why cards weren't matching heights despite align-items:stretch being set on the container. */ .menu-page .story-grid > .story-card--small{flex:0 0 85%; height:auto; scroll-snap-align:start;} /* .story-tag was nowrap for the regular grid, where the card is wide enough to never need it - the narrower 85%-width slider card can't guarantee that, so let it wrap here instead of overflowing past the card edge. */ .menu-page .story-tag{white-space:normal;} .menu-page .story-card--small .story-summary__body{font-size:17px; -webkit-line-clamp:4;} .menu-page .menu-section__title{font-size:25px;} .menu-page .menu-section__note{font-size:14px; max-width:100%;} .menu-page .menu-invitation{padding:0 20px 48px;} .menu-page .invitation-card{padding:36px 28px;} .menu-page .invitation-card__title{font-size:27px;} .menu-page .invitation-card__body{font-size:16px;} .menu-page .pagination{flex-wrap:wrap;} .menu-page .menu-tabs-row{justify-content:flex-start;} .menu-page .torn-btn{width:100%; justify-content:center;} } /* ---- News (home.php - the blog listing, formerly "Furni Journal") No photo hero, unlike every other page banner - a plain eyebrow + headline, then the first post as a rich "featured story", then the rest in a 3-column grid, matching the approved News handoff. Design tokens mapped onto the theme's own (accent #C87D55 kept literal - the same one-off terracotta already used on the Visit page's map illustration; every other handoff color had an exact or close sitewide token already). ---- */ .news-page{font-family:var(--font-body); background:var(--off-white);} .news-header{display:flex; flex-direction:column; gap:12px; max-width:1240px; margin-inline:auto; padding:160px 0 0;} .news-header__title{font-size:clamp(34px, 4vw, 50px); font-weight:700; color:var(--brand-charcoal); margin:0; line-height:1.1;} .news-featured{display:flex; gap:48px; align-items:center; max-width:1240px; margin-inline:auto; padding:40px 0 0;} .news-featured__image{flex:1 1 0; min-width:0; height:420px; border-radius:28px; overflow:hidden; flex-shrink:0;} .news-featured__image img{width:100%; height:100%; object-fit:cover; display:block;} .news-featured__content{display:flex; flex-direction:column; gap:20px; flex:0 0 440px; min-width:0;} .news-featured__title{font-size:clamp(25px, 2.8vw, 36px); font-weight:700; color:var(--brand-charcoal); margin:0; line-height:1.2;} .news-featured__excerpt{font-weight:400; font-size:17px; color:var(--brand-charcoal); opacity:.8; line-height:1.65; margin:0;} .news-tag{display:inline-block; width:fit-content; font-family:inherit; padding:3px 10px; background:var(--cream); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#998E7D; pointer-events:none; user-select:none; white-space:nowrap;} .news-tag--accent{padding:3px 10px;} .news-author{display:flex; align-items:center; gap:12px;} .news-author__avatar{width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;} .news-author__avatar img{width:100%; height:100%; object-fit:cover; display:block;} .news-author__text{display:flex; flex-direction:column; gap:2px;} .news-author__name{font-size:14px; font-weight:600; color:var(--brand-charcoal);} .news-author__meta{font-size:12px; font-weight:400; color:var(--taupe);} .news-read-more{display:inline-flex; align-items:center; gap:8px; padding-top:4px; font-size:15px; font-weight:700; color:#C87D55; transition:gap .2s ease;} .news-read-more:hover{gap:12px;} .news-read-more svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;} .news-stories{display:flex; flex-direction:column; gap:32px; max-width:1240px; margin-inline:auto; padding:96px 0;} .news-stories__header{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;} .news-stories__title{font-size:clamp(25px, 2.5vw, 34px); font-weight:700; color:var(--brand-charcoal); margin:8px 0 0;} .news-stories__count{font-size:15px; font-weight:500; color:var(--taupe); white-space:nowrap; margin:0;} .news-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;} .news-card{background:var(--surface); border:1px solid var(--brand-grey); border-radius:20px; overflow:hidden;} .news-card__link{display:flex; flex-direction:column; height:100%;} .news-card__image{aspect-ratio:4/3; overflow:hidden;} .news-card__image img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;} .news-card:hover .news-card__image img{transform:scale(1.04);} .news-card__content{display:flex; flex-direction:column; gap:12px; padding:22px;} .news-card__meta{display:flex; align-items:center; justify-content:space-between; gap:12px;} .news-card__meta time{font-size:13px; font-weight:400; color:var(--taupe); white-space:nowrap;} .news-card__title{font-size:20px; font-weight:600; color:var(--brand-charcoal); margin:0; line-height:1.25;} .news-card__excerpt{font-size:15px; font-weight:400; color:var(--taupe); line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;} .news-empty{max-width:1240px; margin-inline:auto; padding:64px 112px; color:var(--taupe); font-size:1.06rem;} .news-pagination{padding-bottom:96px;} /* Background stays full-bleed; .wrap on the inner container caps it at the site's usual 1240px and uses the same 24px side padding as the nav, so the text/form align with the menu above instead of the wider 112px gutter the rest of this page's sections use. */ .news-newsletter{padding-block:64px; background:var(--espresso);} .news-newsletter__inner{display:flex; align-items:center; justify-content:space-between; gap:40px;} .news-newsletter__info{display:flex; flex-direction:column; gap:12px; max-width:580px;} .news-newsletter__heading{font-size:clamp(25px, 2.5vw, 34px); font-weight:700; color:var(--off-white); margin:0;} .news-newsletter__body{font-size:16px; font-weight:400; color:var(--sand); line-height:1.55; margin:0;} .news-newsletter__form{flex:0 0 400px; min-width:0;} /* Two separate CF7 forms (English/Arabic) occupy the same slot - same dual-form pattern as the Contact page (see page-contact.php and .contact-form__inner in this file). Only one shows at a time, keyed off body.lang-ar (toggled by main.js alongside every other data-en/data-ar element). */ .news-newsletter__form-inner--ar{display:none;} body.lang-ar .news-newsletter__form-inner--en{display:none;} body.lang-ar .news-newsletter__form-inner--ar{display:block;} /* Matches the CF7 form's own markup (furni-newsletter-form / -field / -input / -consent / -submit / -button classes set directly on the CF7 tags), rather than the generic input[type=email/submit] selectors this used before that form existed. */ .furni-newsletter-form{display:flex; flex-direction:column; gap:16px;} .furni-newsletter-field{display:flex; flex-direction:column; gap:8px;} .furni-newsletter-field label{font-weight:600; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--sand);} .furni-newsletter-field .wpcf7-form-control-wrap{display:block; width:100%;} .furni-newsletter-input{width:100%; padding:14px 24px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:999px; font-family:var(--font-body); font-size:15px; color:var(--off-white); outline:none; transition:border-color .2s ease, background-color .2s ease;} .furni-newsletter-input::placeholder{color:var(--sand); opacity:.6;} .furni-newsletter-input:focus{border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.14);} .furni-newsletter-consent .wpcf7-list-item{margin:0;} .furni-newsletter-consent label{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; color:var(--sand); cursor:pointer;} .furni-newsletter-consent input[type="checkbox"]{width:16px; height:16px; margin-top:2px; flex-shrink:0; accent-color:#C87D55; cursor:pointer;} .furni-newsletter-button{display:inline-flex; align-items:center; justify-content:center; padding:14px 32px; background:var(--coffee); border:none; border-radius:999px; font-family:var(--font-body); font-size:15px; font-weight:700; color:var(--off-white); cursor:pointer; white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease;} .furni-newsletter-button:hover{transform:translateY(-2px); box-shadow:0 12px 22px rgba(111,78,55,.4);} .news-newsletter__form .wpcf7-not-valid-tip{display:block; margin-top:6px; color:#F2C8C8; font-size:13px;} .news-newsletter__form .wpcf7-response-output{margin:12px 0 0; padding:12px 20px; border-radius:14px; font-size:.91rem; color:var(--sand); border:1px solid rgba(255,255,255,.2) !important; width:100%;} @media (max-width:1024px){ .news-header, .news-featured, .news-stories, .news-empty{padding-inline:56px;} .news-featured{flex-direction:column; align-items:stretch; gap:32px;} .news-featured__image{height:340px;} .news-featured__content{flex:unset; width:100%;} .news-grid{grid-template-columns:repeat(2, 1fr);} .news-newsletter__inner{flex-direction:column; align-items:flex-start; gap:28px;} .news-newsletter__form{flex:unset; width:100%;} .news-stories__header{flex-direction:column; align-items:flex-start; gap:8px;} } @media (max-width:640px){ .news-header, .news-featured, .news-stories, .news-empty{padding-inline:20px;} .news-featured__image{height:240px;} .news-grid{grid-template-columns:1fr;} } /* ---- Our Story (#story, front-page.php) ---- */ #story.story-section{padding-block:88px; font-family:var(--font-body);} #story .story-introduction{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin-bottom:48px;} #story .story-introduction .eyebrow-line{margin-bottom:0; color:var(--brand-charcoal); font-size:13px;} #story .story-introduction .eyebrow-line::before{width:42px; height:1px; background:var(--taupe);} #story .story-subtitle{font-weight:500; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); white-space:nowrap;} #story .story-composition{display:flex; align-items:center; gap:72px; width:100%;} #story .story-copy{display:flex; flex-direction:column; gap:32px; flex:0 0 548px; max-width:548px;} #story .story-copy__headline{font-weight:600; font-size:66px; line-height:1.04; color:var(--brand-charcoal); margin:0;} #story .story-copy__divider{width:96px; height:4px; background:var(--sand); border-radius:999px; flex-shrink:0;} #story .story-copy__body{font-weight:400; font-size:18px; line-height:1.7; color:var(--brand-charcoal); margin:0;} #story .story-note{display:inline-flex; align-items:center; gap:12px; background:var(--espresso); padding:14px 18px; border-radius:999px; align-self:flex-start; text-decoration:none; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;} #story .story-note:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(59,34,25,.32);} #story .story-note__text{font-weight:600; font-size:14px; color:#fff; white-space:nowrap;} #story .story-note__arrow{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; transition:transform .2s ease;} #story .story-note:hover .story-note__arrow{transform:translateX(2px);} /* Same hover nudge, composed with the RTL mirror above rather than overwriting it - transform values don't merge across rules of the same specificity, so without this the hover state would silently un-flip the arrow in Arabic. */ body.lang-ar #story .story-note:hover .story-note__arrow{transform:scaleX(-1) translateX(2px);} #story .family-craft-portrait{flex:1 0 0; min-width:0; background:var(--sand); border-radius:32px; border-top-left-radius:var(--radius-accent-lg); padding:24px; position:relative; align-self:stretch; display:flex; flex-direction:column; margin:0;} #story .portrait-image-wrap{flex:1 0 0; border-radius:28px; border-top-left-radius:var(--radius-accent-lg); overflow:hidden; position:relative; box-shadow:0 18px 42px rgba(40,40,40,.1);} #story .portrait-image-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-top-left-radius:var(--radius-accent-lg);} #story .image-caption{position:absolute; bottom:48px; left:48px; background:rgba(244,241,237,.92); border-radius:16px; padding:14px 18px; display:flex; flex-direction:column; gap:4px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);} #story .image-caption__title{font-weight:600; font-size:15px; color:var(--brand-charcoal); white-space:nowrap;} #story .image-caption__subtitle{font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); white-space:nowrap;} @media (max-width:860px){ #story.story-section{padding-block:56px;} #story .story-introduction{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:32px;} #story .story-composition{flex-direction:column; align-items:stretch; gap:36px;} #story .story-copy{flex:none; max-width:100%;} #story .story-copy__headline{font-size:46px;} #story .family-craft-portrait{min-height:380px;} #story .image-caption{bottom:28px; left:28px;} } @media (max-width:520px){ #story .story-copy__headline{font-size:34px;} #story .story-copy__body{font-size:16px;} #story .story-subtitle{white-space:normal;} #story .story-note__text{white-space:normal;} #story .image-caption{bottom:20px; left:20px; right:20px;} #story .image-caption__title, #story .image-caption__subtitle{white-space:normal;} } /* ---- About Us (page-about.php) ---- */ .about-page{font-family:var(--font-body); background:var(--off-white);} .about-page .about-hero{position:relative; height:640px; width:100%; overflow:hidden; padding-block:0; display:flex; flex-direction:column;} .about-page .about-hero__bg{position:absolute; inset:0;} .about-page .about-hero__bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .about-page .about-hero__overlay{position:absolute; inset:0; background:rgba(40,40,40,.52);} .about-page .about-hero__content{position:relative; z-index:1; display:flex; flex-direction:column; gap:32px; align-items:flex-start; justify-content:flex-end; flex:1; max-width:1240px; width:100%; margin-inline:auto; padding-inline:24px; padding-block:112px 132px;} /* Torn-paper edge into .about-story below (fill matches --off-white, which .about-story sets explicitly - see assets/images/torn-edge.svg, same asset the homepage hero uses). z-index:0 - see the matching comment on .contact-page .hero-band .torn-edge above for why. */ .about-page .about-hero .torn-edge{position:absolute; left:0; right:0; bottom:-1px; z-index:0; width:100%; height:clamp(48px, 8vw, 110px); object-fit:cover; object-position:top; display:block; pointer-events:none;} .about-page .about-hero-eyebrow{color:var(--sand); margin-bottom:0;} .about-page .about-hero-eyebrow::before{background:var(--sand); width:36px;} .about-page .about-hero__heading{font-weight:700; font-size:82px; line-height:1.02; color:var(--off-white); max-width:860px; margin:0;} .about-page .about-hero__subtext{font-weight:400; font-size:20px; line-height:1.65; color:var(--sand); max-width:680px; margin:0;} .about-page .about-story{position:relative; padding-block:130px 150px; overflow:hidden; background:var(--off-white);} .about-page .about-story__marks{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;} .about-page .about-story__mark{position:absolute; color:var(--taupe); opacity:.11;} .about-page .about-story__mark svg{display:block; width:100%; height:100%;} .about-page .about-story__mark--1{top:-60px; left:-50px; width:280px; height:280px;} .about-page .about-story__mark--2{bottom:-70px; right:-60px; width:340px; height:340px;} .about-page .about-story__mark--3{top:50%; left:50%; width:380px; height:380px; transform:translate(-50%,-50%); opacity:.07;} .about-page .about-story__mark--4{top:24%; right:6%; width:110px; height:110px; opacity:.12;} .about-page .about-story__mark--5{top:46%; left:4%; width:150px; height:75px; opacity:.11;} .about-page .about-story__mark--6{top:72%; right:8%; width:80px; height:80px; opacity:.13;} .about-page .about-story__inner{position:relative; z-index:1; max-width:660px; margin-inline:auto; padding-inline:24px; text-align:center;} .about-page .about-story__eyebrow{margin-bottom:44px;} /* Dot instead of the sitewide eyebrow-line's default bar, for this one eyebrow only ("Our Story", above the story text). */ .about-page .about-story__eyebrow::before{width:7px; height:7px; border-radius:50%; background:var(--gold);} .about-page .about-story__content p{margin:0 0 32px; font-family:var(--font-body); font-weight:400; font-size:1.11rem; line-height:1.75; color:var(--brand-charcoal);} .about-page .about-story__content p:last-child{margin-bottom:0;} .about-page .about-story__content strong{font-weight:700;} .about-page .about-story__content em{font-family:var(--font-highlight); font-style:italic; font-weight:400;} /* When an Arabic translation exists (page-about.php only renders the --ar block once story_content_ar is filled in), only one of the two shows at a time, keyed off body.lang-ar like everything else the toggle swaps. */ .about-page .about-story__content--ar{display:none;} body.lang-ar .about-page .about-story__content--en{display:none;} body.lang-ar .about-page .about-story__content--ar{display:block;} .about-page .about-closing{background:var(--off-white); padding-block:0 92px;} .about-page .closing-callout{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:40px; max-width:1240px; margin-inline:auto; background:var(--sand); border-radius:28px; border-top-left-radius:var(--radius-accent-sm); padding:56px; box-shadow:0 14px 34px rgba(40,40,40,.09);} .about-page .closing-callout > *:not(.brand-marks){position:relative; z-index:1;} .about-page .closing-message{display:flex; flex-direction:column; gap:16px; max-width:640px;} .about-page .closing-message__heading{font-weight:700; font-size:40px; line-height:1.15; color:var(--brand-charcoal); margin:0;} .about-page .closing-message__body{font-weight:400; font-size:18px; line-height:1.6; color:var(--taupe); margin:0;} .about-page .btn-primary{display:inline-flex; align-items:center; flex-shrink:0; background:var(--espresso); color:var(--off-white); font-weight:600; font-size:15px; padding:14px 24px; border-radius:999px; border:none; cursor:pointer; white-space:nowrap; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease; text-decoration:none;} .about-page .btn-primary:hover{opacity:.85; transform:translateY(-2px); box-shadow:0 12px 24px rgba(59,34,25,.32);} @media (max-width:1024px){ .about-page .about-hero{height:460px;} .about-page .about-hero__heading{font-size:54px; max-width:100%;} .about-page .about-hero__subtext{max-width:100%;} .about-page .about-story__mark--4{right:2%; width:80px; height:80px;} .about-page .about-story__mark--5{left:1%; width:110px; height:55px;} .about-page .about-story__mark--6{right:3%; width:60px; height:60px;} } @media (max-width:640px){ .about-page .about-hero{height:auto; min-height:420px;} .about-page .about-hero__content{padding-block:80px 56px;} .about-page .about-hero__heading{font-size:38px;} .about-page .about-hero__subtext{font-size:17px;} .about-page .about-story{padding-block:88px 96px;} .about-page .about-story__eyebrow{margin-bottom:32px;} .about-page .about-story__content p{font-size:1.06rem; margin-bottom:26px;} .about-page .about-story__mark--1{width:170px; height:170px;} .about-page .about-story__mark--2{width:200px; height:200px;} .about-page .about-story__mark--3, .about-page .about-story__mark--4, .about-page .about-story__mark--5, .about-page .about-story__mark--6{display:none;} .about-page .about-closing{padding-inline:20px;} .about-page .closing-callout{flex-direction:column; align-items:flex-start; gap:24px; padding:32px 24px;} } /* ---- Single blog post (single.php) ---- */ .single-post{font-family:var(--font-body);} .single-post .single-hero-eyebrow{color:var(--sand); margin-bottom:0;} .single-post .single-hero-eyebrow::before{background:var(--sand); width:36px;} .single-post .article-hero{position:relative; height:640px; width:100%; overflow:hidden; display:flex; flex-direction:column; padding-block:0;} .single-post .article-hero__bg{position:absolute; inset:0; pointer-events:none;} .single-post .article-hero__bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .single-post .article-hero__overlay{position:absolute; inset:0; background:rgba(40,40,40,.56);} .single-post .hero-content{position:relative; z-index:1; display:flex; flex-direction:column; gap:28px; align-items:flex-start; justify-content:flex-end; flex:1; max-width:1240px; width:100%; margin-inline:auto; padding-inline:24px; padding-block:112px 132px;} /* Torn-paper edge into the article body below (fill matches body's --cream - see assets/images/torn-edge-cream.svg). z-index:0 - see the matching comment on .contact-page .hero-band .torn-edge above. */ .single-post .article-hero .torn-edge{position:absolute; left:0; right:0; bottom:-1px; z-index:0; width:100%; height:clamp(48px, 8vw, 110px); object-fit:cover; object-position:top; display:block; pointer-events:none;} .single-post .hero-content__heading{font-size:78px; font-weight:700; color:var(--off-white); line-height:1.03; max-width:980px; margin:0;} .single-post .hero-content__subheading{font-size:20px; font-weight:400; color:var(--sand); line-height:1.65; max-width:690px; margin:0;} .single-post .article-body{display:flex; gap:64px; align-items:flex-start; max-width:1240px; margin-inline:auto; padding-block:88px; width:100%;} .single-post .reading-rail{display:flex; flex-direction:column; gap:16px; align-items:flex-start; width:170px; flex-shrink:0;} .single-post .reading-rail__label{font-size:14px; font-weight:600; color:var(--taupe); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; margin:0;} .single-post .reading-rail__hairline{height:1px; background:var(--brand-grey); width:100%;} .single-post .reading-rail__origin{font-size:15px; font-weight:400; color:var(--taupe); line-height:1.6; margin:0;} .single-post .article-copy{display:flex; flex-direction:column; gap:24px; align-items:flex-start; width:720px; max-width:100%;} /* Optional Arabic article body (content_ar, acf-json/group_post_extras .json) occupies the same slot as the English one - same dual-block pattern as .contact-form__inner / .about-story__content, keyed off body.lang-ar. Only rendered at all when content_ar is filled in (see single.php), so English-only posts stay a single block. */ .single-post .article-copy--ar{display:none;} body.lang-ar .single-post .article-copy--en{display:none;} body.lang-ar .single-post .article-copy--ar{display:flex;} .single-post .article-copy > *{margin:0;} .single-post .article-copy h2{font-size:32px; font-weight:600; color:var(--brand-charcoal); line-height:1.45;} .single-post .article-copy h3{font-size:23px; font-weight:600; color:var(--brand-charcoal); line-height:1.4;} .single-post .article-copy p{font-size:19px; font-weight:400; color:var(--brand-charcoal); line-height:1.8;} .single-post .article-copy ul, .single-post .article-copy ol{padding-inline-start:22px; font-size:19px; line-height:1.8; color:var(--brand-charcoal); display:flex; flex-direction:column; gap:8px;} .single-post .article-copy img{max-width:100%; border-radius:24px;} .single-post .article-copy blockquote{border-left:2px solid var(--taupe); padding:8px 0 8px 28px; margin:8px 0; font-size:33px; font-weight:600; color:var(--brand-charcoal); line-height:1.35;} .single-post .article-copy blockquote p{font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit;} .single-post .falooda-detail{display:flex; flex-direction:column; gap:36px; align-items:flex-start; max-width:1240px; margin-inline:auto; padding:0 112px 88px; width:100%;} .single-post .falooda-close-up{position:relative; height:620px; width:100%; border-radius:40px; overflow:hidden; flex-shrink:0; margin:0;} .single-post .falooda-close-up img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .single-post .image-note{display:flex; flex-direction:column; gap:8px; width:100%; color:var(--taupe); margin:0;} .single-post .image-note__caption{font-size:15px; font-weight:400; line-height:1.6; max-width:580px; margin:0;} .single-post .image-note__tag{font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; margin:0;} /* Up to 3 same-category posts (single.php $related_query) - reuses the News listing's own .news-grid/.news-card cards (see the "News" block above) rather than a separate card style, since it's the same card shown in the same 3-column grid, just fed by a different query. Hidden entirely when there's no related post. */ .single-post .related-stories{max-width:1240px; margin-inline:auto; padding:0 24px 88px; width:100%; display:flex; flex-direction:column; gap:28px;} .single-post .related-stories__title{font-size:clamp(25px, 2.5vw, 34px); font-weight:700; color:var(--brand-charcoal); margin:0;} .single-post .closing-note{max-width:1240px; margin-inline:auto; padding:0 24px 80px; width:100%;} .single-post .closing-card{background:var(--sand); border-radius:28px; padding:56px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:48px; box-shadow:0 14px 34px rgba(40,40,40,.09);} .single-post .closing-copy{display:flex; flex-direction:column; gap:16px; color:var(--brand-charcoal); max-width:760px;} .single-post .closing-copy__heading{font-size:44px; font-weight:700; line-height:1.1; margin:0;} .single-post .closing-copy__subtext{font-size:18px; font-weight:400; line-height:1.6; max-width:650px; margin:0;} .single-post .visit-action__btn{display:inline-block; background:var(--espresso); color:var(--off-white); font-family:inherit; font-size:15px; font-weight:600; padding:14px 24px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; white-space:nowrap; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;} .single-post .visit-action__btn:hover{opacity:.85; transform:translateY(-2px); box-shadow:0 12px 24px rgba(59,34,25,.32);} @media (max-width:1024px){ .single-post .hero-content{padding-block:112px 132px;} .single-post .hero-content__heading{font-size:54px; max-width:100%;} .single-post .hero-content__subheading{font-size:18px; max-width:100%;} .single-post .article-hero{height:auto; min-height:480px;} .single-post .article-body{padding:64px; flex-direction:column; gap:32px;} .single-post .reading-rail{width:100%; flex-direction:row; align-items:center; gap:12px;} .single-post .reading-rail__hairline{width:24px; height:1px;} .single-post .article-copy{width:100%;} .single-post .article-copy blockquote{font-size:25px;} .single-post .falooda-detail{padding:0 64px 64px;} .single-post .related-stories{padding-bottom:64px;} .single-post .related-stories .news-grid{grid-template-columns:repeat(2, 1fr);} .single-post .closing-note{padding-bottom:64px;} .single-post .closing-card{padding:40px;} .single-post .closing-copy__heading{font-size:36px;} } @media (max-width:640px){ .single-post .article-hero{min-height:440px;} .single-post .hero-content{padding-block:80px 56px; gap:20px;} .single-post .hero-content__heading{font-size:38px; line-height:1.1;} .single-post .hero-content__subheading{font-size:16px;} .single-post .article-body{padding:48px 24px; gap:24px;} .single-post .article-copy h2{font-size:23px;} .single-post .article-copy p, .single-post .article-copy ul, .single-post .article-copy ol{font-size:17px;} .single-post .article-copy blockquote{font-size:21px; padding-left:20px;} .single-post .falooda-detail{padding:0 24px 48px; gap:20px;} .single-post .falooda-close-up{height:360px; border-radius:24px;} .single-post .image-note__tag{white-space:normal;} .single-post .related-stories{padding-bottom:48px; gap:20px;} .single-post .related-stories .news-grid{grid-template-columns:1fr;} .single-post .closing-note{padding-bottom:48px;} .single-post .closing-card{padding:28px 24px; border-radius:20px; gap:24px;} .single-post .closing-copy__heading{font-size:30px;} .single-post .closing-copy__subtext{font-size:16px;} } /* ---- Visit page (page-visit.php) ---- */ .visit-page{font-family:var(--font-body);} .visit-page .visit-hero-eyebrow{color:var(--sand); margin-bottom:0;} .visit-page .visit-hero-eyebrow::before{background:var(--taupe); width:36px;} .visit-page .visit-hero{position:relative; display:flex; flex-direction:column; min-height:640px; overflow:hidden; padding-block:0;} .visit-page .visit-hero__bg{position:absolute; inset:0; z-index:0;} /* Torn-paper edge into .location below (fill matches body's --cream - see assets/images/torn-edge-cream.svg). This hero's own overlay already sits at z-index:1 and its content at z-index:2 (unlike every other hero banner, which use auto/1) - 1.5 puts the torn edge above the overlay and below the content, same relative position as everywhere else. */ .visit-page .visit-hero .torn-edge{position:absolute; left:0; right:0; bottom:-1px; z-index:1.5; width:100%; height:clamp(48px, 8vw, 110px); object-fit:cover; object-position:top; display:block; pointer-events:none;} .visit-page .visit-hero__bg img{width:100%; height:100%; object-fit:cover;} .visit-page .visit-hero__overlay{position:absolute; inset:0; background:rgba(40,40,40,.52); z-index:1;} /* .visit-hero__content used to carry the max-width/padding itself; now that the hero card sits beside it in the same row (see .visit-hero__row), that sizing moved to the row so both children share one centered 1240px column instead of each having their own. */ .visit-page .visit-hero__row{position:relative; z-index:2; flex:1; display:flex; align-items:flex-end; justify-content:space-between; gap:48px; max-width:1240px; width:100%; margin-inline:auto; padding-inline:24px; padding-block:0 132px;} .visit-page .visit-hero__content{display:flex; flex-direction:column; gap:28px; flex:1 1 0; min-width:0;} .visit-page .visit-hero__headline{font-size:82px; font-weight:700; line-height:1.02; color:var(--off-white); max-width:880px; margin:0;} .visit-page .visit-hero__subtext{font-size:20px; line-height:1.65; color:var(--sand); max-width:660px; margin:0;} /* ============================================================ "Visit & Hours" glass card (template-parts/components/ visit-hours-card.php) - now the second item in .visit-hero__row, beside the hero text rather than floating/overlapping it (that's the 3rd layout this went through - see git history/prior comments if curious - the first two either covered the hero text on mobile or fought a sibling's scroll behavior; a plain two-column row that collapses to a stacked column at the same breakpoint the hero text already uses has neither problem, no positioning tricks needed). Glassmorphism per request: translucent white tint + backdrop-filter blur (so it reads as frosted glass over the hero photo, not a solid card), a soft light border standing in for a hard edge. Single 32px radius (the "round border" option) rather than the earlier asymmetric 60/20 corners - simpler, more typical of glass-card UI. Text is two explicitly-requested colors rather than the theme's own tokens - --fhc-cream (#FAF5E8, close to but not quite --cream) for the title/values, --sand (#E8D5C4 - an exact match for the second color given) for labels/sub-text/the badge, same primary/secondary pairing role --off-white/--sand already play on the hero text right next to this card. No CTA anymore (removed per request) - the map/directions link already lives in the "Find us in Madinah" section further down this page. */ .furni-hero-card{--fhc-cream:#FAF5E8; flex:0 0 380px; width:380px; max-width:100%; background:rgba(255,255,255,.1); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,.25); border-radius:32px; box-shadow:0 20px 50px rgba(0,0,0,.25); padding:32px 28px; display:flex; flex-direction:column; gap:18px; overflow:hidden;} .furni-hero-card__palm{position:absolute; z-index:0; bottom:-10%; right:-8%; width:65%; height:auto; opacity:.08; pointer-events:none;} .furni-hero-card__badge{position:relative; z-index:1; display:inline-flex; align-self:flex-start; align-items:center; gap:8px; background:rgba(232,213,196,.15); border:1px solid rgba(232,213,196,.4); color:var(--sand); padding:8px 14px; border-radius:999px; font-family:var(--font-button); font-weight:700; font-size:12px; letter-spacing:.03em;} /* Real SVG rather than the emoji it used to be - emoji glyphs render with their own built-in color on most platforms and ignore CSS color entirely, so "make the drop white" wasn't otherwise reliably possible. Same droplet path already used for the "Pure Source" place-card icon on the homepage. */ .furni-hero-card__badge-icon{display:flex; width:14px; height:14px; color:#fff;} .furni-hero-card__badge-icon svg{width:100%; height:100%; display:block;} .furni-hero-card__title{position:relative; z-index:1; font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--fhc-cream); margin:0;} .furni-hero-card__row{position:relative; z-index:1; display:flex; align-items:stretch; gap:20px;} .furni-hero-card__col{display:flex; flex-direction:column; gap:4px; flex:1 0 0; min-width:0;} .furni-hero-card__divider{width:1px; flex-shrink:0; background:rgba(232,213,196,.3);} .furni-hero-card__label{font-family:var(--font-button); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sand);} .furni-hero-card__value{font-family:var(--font-body); font-weight:700; font-size:17px; color:var(--fhc-cream);} .furni-hero-card__sub{font-family:var(--font-body); font-weight:400; font-size:14px; color:var(--sand);} @media (max-width:768px){ /* Text + card stack to a single column here instead of sitting side by side - taller min-height so the hero has room to fit both without feeling cramped or clipping the card. .visit-hero__content still had flex:1 1 0 from the desktop row layout, which in column mode made IT grow to fill the row's whole height (flex-grow follows the main axis, vertical here) - that's what pushed the card down to the bottom with a big empty gap under the text instead of sitting right below it. flex:none lets it size to its own content instead; justify-content: flex-end on the row then moves the whole (now correctly sized) text+card group down to the bottom of the taller hero together, same bottom-anchored feel the text alone always had here. */ .visit-page .visit-hero{min-height:760px;} .visit-page .visit-hero__row{flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:32px;} .visit-page .visit-hero__content{flex:none;} .furni-hero-card{flex:none; width:100%;} } .visit-page .section-heading{display:flex; align-items:flex-end; justify-content:space-between; gap:40px;} .visit-page .heading-copy__eyebrow{font-weight:600; font-size:14px; color:var(--taupe); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; margin:0 0 18px;} .visit-page .heading-copy__title{font-weight:700; font-size:54px; line-height:1.1; color:var(--brand-charcoal); max-width:760px; margin:0;} /* "Find us in Madinah" quick-stat callouts - step icons below the eyebrow/title, replacing what used to be a plain description paragraph (.section-heading__description) on this one section only; gallery/guidance further down still use that shared class as-is. Icon and text are always separate sibling elements, never nested inside the data-en/data-ar element itself - main.js swaps language via innerHTML, which would otherwise wipe the icon. Row rather than stacked, ending in the small "open in Google Maps" icon pushed to the far right via margin-left:auto - that replaces the old full-width "Get Directions" button that used to sit below the map. */ .visit-page .location-steps{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:20px; margin-top:28px;} .visit-page .location-step{display:flex; align-items:center; gap:14px;} .visit-page .location-step__icon{display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:19px; line-height:1;} .visit-page .location-step__text{font-weight:600; font-size:16px; color:var(--brand-charcoal);} /* Small round icon-link standing in for the old text CTA - the pulsing rings are pure decoration (aria-hidden, pointer-events: none) expanding out from behind the pin and fading, classic "radar ping" language for "tap to locate". Gated behind prefers-reduced-motion like every other animation on this page (see .walking-path below). */ .visit-page .location-directions{position:relative; display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex-shrink:0; margin-left:auto; border-radius:50%; background:var(--espresso); color:#fff; transition:transform .2s ease, opacity .2s ease;} .visit-page .location-directions:hover{opacity:.88; transform:translateY(-1px);} .visit-page .location-directions__icon{position:relative; z-index:1; width:20px; height:20px; stroke:currentColor; fill:none;} .visit-page .location-directions__ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--espresso); opacity:0; pointer-events:none;} @media (prefers-reduced-motion: no-preference){ .visit-page .location-directions__ring{animation:location-radar 4.2s cubic-bezier(.25,.7,.4,1) infinite;} .visit-page .location-directions__ring--delay{animation-delay:2.1s;} } @keyframes location-radar{ 0%{transform:scale(1); opacity:.5;} 100%{transform:scale(2.3); opacity:0;} } /* Purely decorative (alt="", aria-hidden) - Furni's own charcoal/ subtle palm export, pinned to the top-right corner of the heading row rather than flowing as a flex sibling, so it can overlap slightly rather than pushing the heading text over. Needs .location .section-heading to be the positioned ancestor (added below). Sized to a fixed width rather than stretching, so it stays a moderate accent next to the text instead of dominating the section. */ .visit-page .location .section-heading{position:relative;} .visit-page .location-palm{position:absolute; top:0; right:0; width:170px; height:auto; opacity:.75; pointer-events:none;} .visit-page .section-heading__description{font-weight:400; font-size:17px; line-height:1.7; color:var(--taupe); max-width:360px; flex-shrink:0; margin:0;} /* Free-flowing masonry, not a fixed set of mosaic slots - CSS columns so any number of photos (added/removed freely from the ACF Gallery field) just reflows into the grid, each at its own natural aspect ratio, rather than being forced into a handful of pre-sized boxes. break-inside:avoid stops a photo splitting across two columns. */ .visit-page .gallery{max-width:1240px; margin-inline:auto; padding-block:96px 112px;} .visit-page .gallery-grid{column-count:3; column-gap:24px; margin-top:48px;} .visit-page .gallery-item{display:block; width:100%; break-inside:avoid; margin:0 0 24px; border-radius:28px; overflow:hidden; position:relative;} .visit-page .gallery-item img{width:100%; height:auto; display:block;} /* Soft white glow at the bottom of every photo - a gentle light wash, not a caption scrim (there's no text sitting on it). */ .visit-page .gallery-item__glow{position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(to top, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%); pointer-events:none;} /* Cascading scroll reveal, one item after another rather than the whole grid fading in at once - builds on the sitewide .reveal/ .reveal.in mechanism (assets/js/main.js), just layering a longer duration on top of it. The actual stagger delay is set inline per item in page-visit.php (cycling every 6 photos), since the item count here is unbounded rather than a fixed five named slots. */ @media (prefers-reduced-motion: no-preference){ .visit-page .gallery-item.reveal{transition-duration:.8s; transition-timing-function:ease-out;} } @media (max-width:960px){ .visit-page .gallery-grid{column-count:2;} } @media (max-width:560px){ .visit-page .gallery-grid{column-count:1;} } /* padding-block explicitly set (top only) rather than left at the sitewide bare section{padding-block:92px} reset - that reset was still silently adding 92px on BOTH top and bottom here (nothing had overridden it), so combined with .gallery's own 96px top padding right below, the gap between them was actually 92+96=188px instead of the single ~96px gap intended. .location sits directly above .gallery on the same plain page background now (order changed to Hero -> Location -> Gallery), so .gallery's own top padding is the only gap needed between them. */ .visit-page .location{max-width:1240px; margin-inline:auto; padding-block:96px 0;} /* Unified 2-column layout (see page-visit.php): left ~60% stacks heading -> steps -> map as one flow, right ~40% is just the phone mockup, vertically centered against the left column's full height - a deliberate "content vs. proof" split rather than the old side-by-side map/text card. One shared --cream surface behind both columns (rather than each having its own background) is what visually unifies them into a single panel. */ .visit-page .location-grid{display:grid; grid-template-columns:60% 40%; gap:48px; align-items:center; background:var(--cream); border-radius:32px; padding:48px;} .visit-page .location-col--left{display:flex; flex-direction:column; gap:36px;} .visit-page .location-col--right{display:flex; align-items:center; justify-content:center;} /* ---- Illustrated map, per the Figma "map card visit us page" handoff (illustration refined against the follow-up "map svg" export's exact vector data - see .map-illustration below). --espresso is this handoff's dark brown accent - added as a real token since the mobile nav drawer CTA already uses the same #3B2219 by coincidence (hardcoded there rather than reused from here, since that predates this token). Used to be one half of a shared .map-card row with .content-card - now stands alone in the left column, so it carries its own card treatment (radius/shadow) instead of inheriting it from that wrapper. */ .visit-page .map-panel{position:relative; height:360px; overflow:hidden; background:var(--off-white); border-radius:28px; box-shadow:0 14px 34px rgba(40,40,40,.09);} .visit-page .map-canvas{position:absolute; inset:0;} /* Roads/buildings/walking-path render as one inline SVG (viewBox="0 0 730 600", the exact canvas the Figma export used - see illustrated-map-container.svg) instead of separately positioned/rotated divs, so they stay pixel-accurate to the design and scale as a single unit at any .map-panel size (it's a flex:1 sibling of a fixed 400px content card, so its real width varies with the viewport - fixed-px divs drifted apart at anything other than the exact design width). The pill/landmark/ pin cards below stay as real HTML (for live/bilingual text), each positioned at its exact design rect converted to a percentage of the same 730x600 reference. */ .visit-page .map-illustration{position:absolute; inset:0; width:100%; height:100%; display:block;} /* The walking-path is the exact vector from the SVG export - animating stroke-dashoffset marches its dashes along that precise path from the landmark toward the Furni pin, seamlessly (the dasharray "6 6" repeats forever, so shifting by exactly one 6+6=12 period loops with no visible seam). Skipped for prefers-reduced-motion, same as every other .reveal animation on the site - it just renders as a static dashed line for those users. */ @media (prefers-reduced-motion: no-preference){ .visit-page .walking-path{animation:visit-walk-dash .9s linear infinite;} } @keyframes visit-walk-dash{ to{ stroke-dashoffset:-12; } } .visit-page .path-pill{position:absolute; left:32%; top:37%; display:flex; align-items:center; gap:6px; font-family:inherit; padding:3px 10px; background:rgba(255,255,255,.55); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#998E7D; pointer-events:none; user-select:none; white-space:nowrap;} .visit-page .pill-icon{width:12px; height:12px; flex-shrink:0;} .visit-page .pill-text{font-family:inherit; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#998E7D; white-space:nowrap;} .visit-page .landmark-card{position:absolute; left:23%; top:61.67%; display:flex; align-items:center; gap:14px; background:#fff; padding:16px; border-radius:16px; box-shadow:0 8px 8px rgba(59,34,25,.08);} .visit-page .landmark-icon-bg{display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:rgba(74,124,89,.08); border-radius:10px; flex-shrink:0;} .visit-page .landmark-icon{width:22px; height:22px;} .visit-page .landmark-text{display:flex; flex-direction:column; gap:2px;} .visit-page .landmark-label{font-family:var(--font-body); font-weight:700; font-size:11px; color:#4A7C59; text-transform:uppercase; letter-spacing:.04em; margin:0;} .visit-page .landmark-name{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--espresso); white-space:nowrap; margin:0;} .visit-page .destination-pin{position:absolute; left:40%; top:12%; display:flex; align-items:center; gap:8px; padding:3px 10px; background:rgba(255,255,255,.55); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); pointer-events:none; user-select:none; white-space:nowrap;} .visit-page .pin-dot{width:10px; height:10px; border-radius:50%; background:#C87D55; flex-shrink:0;} .visit-page .pin-label{font-family:inherit; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#998E7D; white-space:nowrap;} /* Used to hold a text block (eyebrow/heading/body) - now holds just the click-to-load phone mockup (see page-visit.php), in its own right-hand grid column rather than a fixed-width flex sibling of .map-panel. No card treatment of its own (no bg/shadow) - the phone mockup's own shadow (.furni-walking-video-frame below) carries the depth instead, so it isn't doubled up inside a second card. */ .visit-page .content-card{width:100%; max-width:400px; display:flex; align-items:center; justify-content:center; padding:32px;} /* ---- Click-to-load walking route video card (template-parts/ components/walking-video.php) - scoped under .furni-walking-video rather than .visit-page, since it's meant to be reusable on other templates too (see the PHP file's own header comment). Currently placed inside .content-card, the right side of the illustrated map in the .location section (page-visit.php), where the old directions text used to sit. ---- */ /* iPhone 17 Pro Max chassis - markup/values ported from a provided reference iphone.html (titanium-gradient frame, dynamic island, side buttons) essentially as-is, under this prefixed class family instead of its original .iphone-* names so it can't collide with anything else sitewide. Fixed pixel width/height (not aspect-ratio/%) exactly like the source, including its own single 600px breakpoint below - a deliberately literal port rather than a redesign. (A max-width/aspect-ratio safety net was tried here to fix a narrow-phone overflow, but it distorted the chassis itself - reverted; the overflow that caused is handled elsewhere instead.) */ /* Shadow is now this element's own job rather than shared with a wrapping .content-card (which no longer has one) - a soft, light multi-layer stack (a broad diffuse ambient layer + a tighter close contact layer) rather than one heavy drop-shadow, for a more "product photography" premium feel. */ .furni-walking-video-frame{--phone-width:320px; --phone-height:650px; --phone-radius:48px; --bezel:6px; position:relative; width:var(--phone-width); height:var(--phone-height); margin-inline:auto; padding:var(--bezel); border-radius:var(--phone-radius); background:linear-gradient(145deg, #d8d8d8 0%, #8e8e8e 18%, #3d3d3d 48%, #8b8b8b 78%, #d5d5d5 100%); box-shadow:0 40px 70px -20px rgba(40,40,40,.16), 0 10px 20px -8px rgba(40,40,40,.1), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 0 3px rgba(0,0,0,.25); box-sizing:border-box;} .furni-walking-video-frame__screen{position:relative; width:100%; height:100%; overflow:hidden; border-radius:calc(var(--phone-radius) - 5px); background:#000; box-shadow:inset 0 0 0 2px #111, inset 0 0 15px rgba(0,0,0,.8);} .furni-walking-video-frame__island{position:absolute; z-index:10; top:16px; left:50%; width:92px; height:28px; transform:translateX(-50%); border-radius:999px; background:#000; box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 0 3px rgba(255,255,255,.04); pointer-events:none;} .furni-walking-video-frame__button{position:absolute; width:4px; background:linear-gradient(to right, #555, #aaa, #555); border-radius:4px; box-shadow:1px 0 2px rgba(0,0,0,.35);} .furni-walking-video-frame__button--action{left:-3px; top:145px; height:28px;} .furni-walking-video-frame__button--volume-up{left:-3px; top:205px; height:52px;} .furni-walking-video-frame__button--volume-down{left:-3px; top:270px; height:52px;} @media (max-width:600px){ .furni-walking-video-frame{--phone-width:285px; --phone-height:580px; --phone-radius:43px;} } /* The screen now dictates the exact box (fixed by --phone-width/ -height above), so the card inside it fills 100%/100% instead of sizing itself via its own aspect-ratio/max-width - those still apply when this component is used bare, elsewhere, without the frame. #000 matches the screen's own black rather than this component's usual --off-white. Poster stays object-fit:contain (the pre-play preview - never cropped), but the actual