/* ============================================================================ DIWAN-E-KHAS — Heritage design system "Mughal Royal Court at Dusk" — oxblood, antique gold, saffron, parchment. Plain CSS, no build step. Safe to load over GeneratePress. ---------------------------------------------------------------------------- Sections: 0. Fonts (for standalone preview.html; WP enqueues them too) 1. Tokens 2. Reset & base 3. Reduced-motion guard 4. Layout utilities 5. Ornaments (divider, arch, jali, label) 6. Buttons 7. Header / nav 8. Gate intro animation 9. Hero 10. Story / about 11. Signature dishes 12. Dish-story modal (storybook) 13. Menu tabs 14. Gallery 15. Order-online strip 16. Reservations / contact 17. Footer 18. Reveal-on-scroll ========================================================================== */ /* 0. Fonts load via (preview.html) and wp_enqueue_style (WordPress). No @import here on purpose — @import is render-blocking and hurts LCP/FCP. */ /* 1. Tokens ---------------------------------------------------------------- */ :root { /* Palette */ --ink: #4a0e0e; /* oxblood maroon — royal base */ --ink-2: #380a0a; /* deeper maroon */ --ink-3: #260606; /* deepest — gate night sky */ --saffron: #dd5903; /* brand flame — primary CTA */ --marigold: #e8943a; /* warm highlight */ --gold: #c9a227; /* antique gold ornament */ --gold-2: #ecc769; /* lit gold */ --gold-3: #8a6a14; /* shadowed gold */ --ivory: #f7f1e5; /* warm ivory light section */ --ivory-2: #fcf8ef; /* lighter ivory */ --parch: #efe3c8; /* parchment (storybook) */ --parch-2: #e3d2ac; /* aged parchment edge */ --espresso: #2a2118; /* body text on light */ --sepia: #5a4326; /* sepia ink */ /* Modern counterpoint (the contemporary half of the fusion) */ --copper: #b06a3b; /* modern metal — rules & accents */ --copper-2: #c8895a; /* lit copper (on dark) */ --copper-ink:#8f4f27; /* darker copper for small text (AA) */ --charcoal: #221f1c; /* modern neutral dark */ --ash: #6a625a; /* modern muted body text */ /* Derived */ --line-gold: rgba(201,162,39,.38); --line-soft: rgba(42,33,24,.14); --shadow-1: 0 2px 10px rgba(38,6,6,.10); --shadow-2: 0 18px 50px -22px rgba(38,6,6,.55); --shadow-gold: 0 10px 40px -12px rgba(201,162,39,.45); /* Type */ --display: 'Playfair Display', Georgia, 'Times New Roman', serif; --royal: 'Marcellus', 'Playfair Display', serif; --body: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif; /* Fluid scale */ --fs-hero: clamp(2.6rem, 7vw, 5.6rem); --fs-h2: clamp(2rem, 4.5vw, 3.4rem); --fs-h3: clamp(1.35rem, 2.4vw, 1.9rem); --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem); --fs-label: clamp(.72rem, 1vw, .82rem); /* Space & shape */ --pad-x: clamp(1.1rem, 5vw, 5rem); --maxw: 1240px; --radius: 14px; --ease: cubic-bezier(.22,1,.36,1); } /* 2. Reset & base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body.diwan-no-scroll { overflow: hidden; } body.diwan-home { margin: 0; font-family: var(--body); font-weight: 400; line-height: 1.7; color: var(--espresso); background: var(--ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .diwan-home img { max-width: 100%; height: auto; display: block; } .diwan-home a { color: inherit; text-decoration: none; } .diwan-home h1, .diwan-home h2, .diwan-home h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.01em; } ::selection { background: var(--saffron); color: var(--ivory-2); } /* Focus visibility for keyboard users */ .diwan-home :focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 3px; } /* 3. Reduced-motion guard -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .diwan-home *, .diwan-home *::before, .diwan-home *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* 4. Layout utilities ------------------------------------------------------ */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .section { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem); } .section--dark { background: var(--ink); color: var(--ivory); } .section--ink { background: radial-gradient(120% 90% at 50% -10%, rgba(201,162,39,.16), transparent 60%), linear-gradient(180deg, var(--ink-2), var(--ink)); color: var(--ivory); } /* Paper-grain overlay used on dark sections for depth */ .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Jali lattice texture (subtle) */ .jali::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; background: repeating-linear-gradient(45deg, var(--gold) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, var(--gold) 0 1px, transparent 1px 22px); -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%); } /* 5. Ornaments ------------------------------------------------------------- */ .eyebrow { font-family: var(--royal); font-size: var(--fs-label); letter-spacing: .42em; text-transform: uppercase; color: var(--saffron); display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 1rem; } .eyebrow::before, .eyebrow::after { content: ""; width: clamp(18px, 4vw, 42px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); } .section--dark .eyebrow, .section--ink .eyebrow { color: var(--gold-2); } /* Centered gold filigree divider with a diya/lotus diamond in the middle */ .divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.4rem auto 0; max-width: 360px; color: var(--gold); } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); } .divider::after { background: linear-gradient(90deg, currentColor, transparent); } .divider svg { width: 30px; height: 30px; flex: none; } .title-wrap { text-align: center; max-width: 760px; margin-inline: auto; } .title-wrap p.lead { font-size: var(--fs-lead); opacity: .9; margin: .6rem auto 0; } .section h2 { font-size: var(--fs-h2); } .section h2 em { font-style: italic; color: var(--saffron); } .section--dark h2 em, .section--ink h2 em { color: var(--gold-2); } /* Gold gradient text accent */ .gold-text { background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 6. Buttons --------------------------------------------------------------- */ .btn { --bg: var(--saffron); --fg: var(--ivory-2); font-family: var(--royal); font-size: .98rem; letter-spacing: .08em; display: inline-flex; align-items: center; gap: .6rem; padding: .92em 1.7em; border: 0; border-radius: 999px; background: var(--bg); color: var(--fg); cursor: pointer; position: relative; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease); box-shadow: 0 10px 26px -12px rgba(221,89,3,.7); } .btn:hover { transform: translateY(-3px); filter: saturate(1.1); box-shadow: 0 16px 34px -12px rgba(221,89,3,.8); } .btn:active { transform: translateY(-1px); } .btn--ghost { --fg: var(--ivory-2); background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-gold); } .btn--ghost:hover { background: rgba(201,162,39,.12); box-shadow: inset 0 0 0 1px var(--gold-2); } .btn--dark { --bg: var(--ink); --fg: var(--gold-2); box-shadow: var(--shadow-2); } .btn--sm { padding: .62em 1.2em; font-size: .86rem; } .btn svg { width: 1.05em; height: 1.05em; } /* Quill "story" button */ .btn-story { font-family: var(--royal); font-size: .82rem; letter-spacing: .06em; display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 0; cursor: pointer; color: var(--ink); padding: .3em 0; position: relative; } .btn-story::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--gold), var(--saffron)); transform: scaleX(.0); transform-origin: left; transition: transform .4s var(--ease); } .btn-story:hover::after { transform: scaleX(1); } .btn-story svg { width: 1.05rem; height: 1.05rem; color: var(--saffron); } /* 7. Header / nav ---------------------------------------------------------- */ .site-top { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--pad-x); transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); } .site-top::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(180deg, rgba(38,6,6,.96), rgba(38,6,6,.86)); border-bottom: 1px solid var(--line-gold); transition: opacity .4s var(--ease); } .site-top.is-stuck { padding-block: .7rem; box-shadow: var(--shadow-2); } .site-top.is-stuck::before { opacity: 1; } .brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ivory); cursor: pointer; } .brand__mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--saffron), var(--ink-2)); box-shadow: 0 0 0 1px var(--line-gold), inset 0 0 12px rgba(0,0,0,.4); } .brand__mark svg { width: 24px; height: 24px; } .brand__name { line-height: 1; } .brand__name b { font-family: var(--display); font-weight: 700; font-size: 1.18rem; letter-spacing: .02em; display: block; } .brand__name span { font-family: var(--royal); font-size: .6rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold-2); } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); } .nav a { font-family: var(--royal); font-size: .92rem; letter-spacing: .04em; color: var(--ivory); position: relative; opacity: .9; transition: opacity .3s, color .3s; } .nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%; background: var(--gold-2); transform: scaleX(0); transform-origin: center; transition: transform .35s var(--ease); } .nav a:hover { opacity: 1; } .nav a:hover::after { transform: scaleX(1); } .top-actions { display: flex; align-items: center; gap: .9rem; } .icon-link { color: var(--ivory); display: inline-grid; place-items: center; position: relative; } .icon-link svg { width: 22px; height: 22px; } .cart-count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--saffron); color: #fff; font-family: var(--body); font-size: .64rem; font-weight: 700; border-radius: 999px; display: grid; place-items: center; } .nav-toggle { display: none; background: none; border: 0; color: var(--ivory); cursor: pointer; } .nav-toggle svg { width: 26px; height: 26px; } @media (max-width: 1000px) { .nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem; padding: 2rem var(--pad-x); background: linear-gradient(180deg, var(--ink-2), var(--ink-3)); border-left: 1px solid var(--line-gold); transform: translateX(100%); transition: transform .45s var(--ease); z-index: 65; } .nav.is-open { transform: none; } .nav a { font-size: 1.2rem; } .nav-toggle { display: inline-grid; place-items: center; z-index: 66; } } /* 8. Gate — scroll-revealed palace-dome portal (in-page section) ----------- */ .gate-sec { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; color: var(--ivory); background: radial-gradient(125% 120% at 50% 16%, var(--ink) 0%, var(--ink-3) 66%, #170303 100%); } /* modern thin frame — the contemporary half of the fusion */ .gate-sec::before { content: ""; position: absolute; inset: clamp(14px, 2.4vw, 30px); z-index: 6; border: 1px solid rgba(247,241,229,.18); pointer-events: none; } .gate__particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .gate__particles i { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--gold-2), transparent 70%); opacity: 0; animation: emberRise linear infinite; } @keyframes emberRise { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-84vh) scale(1.1); opacity: 0; } } /* Court content — framed INSIDE the gateway opening (between the pillars, under the arch) */ .gate__reveal { position: absolute; z-index: 0; left: 18%; right: 18%; top: 39%; bottom: 7%; display: grid; align-content: center; justify-items: center; text-align: center; padding: 0 .8rem; } .gate__reveal .crest { width: clamp(34px, 6%, 64px); height: auto; margin: 0 auto .45rem; color: var(--gold-2); } .gate__reveal .kicker { font-family: var(--body); font-weight: 600; font-size: clamp(.55rem, 1.1vw, .7rem); letter-spacing: .4em; text-transform: uppercase; color: var(--gold-2); display: inline-block; margin-bottom: .5rem; } .gate__reveal h2 { font-size: clamp(1.3rem, 3.2vw, 2.6rem); line-height: 1.08; color: var(--ivory); } .gate__reveal h2 em { font-style: italic; color: var(--gold-2); } .gate__reveal p { font-size: clamp(.85rem, 1.4vw, 1.06rem); opacity: .9; margin: .5rem auto .9rem; max-width: 34ch; } .gate__reveal .btn { padding: .7em 1.3em; font-size: .9rem; } /* The whole gateway scales as ONE fixed-aspect unit, so dome + pillars + arch stay joined */ .gate__stage { position: relative; z-index: 2; width: min(94%, 1180px); aspect-ratio: 1000 / 660; max-height: 92%; color: var(--gold); filter: drop-shadow(0 16px 32px rgba(0,0,0,.55)); } .gate__frame { position: absolute; inset: 0; z-index: 2; } .gate__frame svg { display: block; width: 100%; height: 100%; } /* Doors fill the central opening, behind the gold frame */ .gate__door { position: absolute; z-index: 1; top: 32%; bottom: 4%; width: 34%; background: linear-gradient(180deg, rgba(201,162,39,.14), transparent 26%), linear-gradient(180deg, var(--ink-2), var(--ink-3)); } .gate__door::before { /* carved jali on the door */ content: ""; position: absolute; inset: 0; opacity: .55; background: repeating-linear-gradient(45deg, rgba(201,162,39,.5) 0 1px, transparent 1px 24px), repeating-linear-gradient(-45deg, rgba(201,162,39,.5) 0 1px, transparent 1px 24px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 90%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 90%, transparent); } .gate__door--left { left: 16%; border-right: 2px solid var(--gold); transform-origin: left center; box-shadow: 10px 0 36px -10px rgba(0,0,0,.6); transform: perspective(1500px) rotateY(105deg); } .gate__door--right { right: 16%; border-left: 2px solid var(--gold); transform-origin: right center; box-shadow: -10px 0 36px -10px rgba(0,0,0,.6); transform: perspective(1500px) rotateY(-105deg); } /* Guards at the threshold, in front of the columns */ .gate__guard { position: absolute; z-index: 3; bottom: 3%; width: clamp(74px, 12%, 150px); color: var(--gold); filter: drop-shadow(0 0 18px rgba(201,162,39,.3)); } .gate__guard--left { left: 4.5%; } .gate__guard--right { right: 4.5%; transform: scaleX(-1); } /* ARMED (closed, pre-roll) — JS adds this only when motion is allowed */ .gate-sec.is-armed .gate__frame { transform: translateY(-118%); } .gate-sec.is-armed .gate__door--left { transform: perspective(1500px) rotateY(0); } .gate-sec.is-armed .gate__door--right { transform: perspective(1500px) rotateY(0); } .gate-sec.is-armed .gate__guard--left { transform: translateX(-150%); } .gate-sec.is-armed .gate__guard--right { transform: translateX(150%) scaleX(-1); } .gate-sec.is-armed .gate__reveal { opacity: 0; } /* REVEALED — gateway descends, guards march in, doors part, court fades up */ .gate-sec.is-armed.is-revealed .gate__frame { animation: gateDrop 1.6s var(--ease) .2s both; } .gate-sec.is-armed.is-revealed .gate__guard--left { animation: guardInL 1.1s var(--ease) 1.7s both; } .gate-sec.is-armed.is-revealed .gate__guard--right{ animation: guardInR 1.1s var(--ease) 1.7s both; } .gate-sec.is-armed.is-revealed .gate__door--left { animation: doorOpenL 1.3s var(--ease) 2.8s both; } .gate-sec.is-armed.is-revealed .gate__door--right { animation: doorOpenR 1.3s var(--ease) 2.8s both; } .gate-sec.is-armed.is-revealed .gate__reveal { animation: revealIn 1s var(--ease) 4.0s both; } @keyframes gateDrop { from { transform: translateY(-118%); } to { transform: translateY(0); } } @keyframes guardInL { from { transform: translateX(-150%); } to { transform: translateX(0); } } @keyframes guardInR { from { transform: translateX(150%) scaleX(-1); } to { transform: translateX(0) scaleX(-1); } } @keyframes doorOpenL { from { transform: perspective(1500px) rotateY(0); } to { transform: perspective(1500px) rotateY(105deg); } } @keyframes doorOpenR { from { transform: perspective(1500px) rotateY(0); } to { transform: perspective(1500px) rotateY(-105deg); } } @keyframes revealIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* 9. Hero ------------------------------------------------------------------ */ .hero { position: relative; min-height: 100svh; display: grid; align-items: center; color: var(--ivory); overflow: hidden; background: var(--ink-3); } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: heroPan 18s ease-in-out infinite alternate; } @keyframes heroPan { to { transform: scale(1.16) translate(-2%, -1%); } } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38,6,6,.92) 0%, rgba(38,6,6,.6) 45%, rgba(38,6,6,.25) 100%), linear-gradient(0deg, rgba(38,6,6,.9), transparent 45%); } .hero__inner { position: relative; z-index: 2; padding-block: 8rem 4rem; max-width: 720px; } .hero__inner .eyebrow { animation: rise .9s var(--ease) .15s both; } .hero h1, .hero h1 em { color: #fff; } .hero h1 { font-size: var(--fs-hero); margin: .3rem 0 0; text-shadow: 0 10px 40px rgba(0,0,0,.55); animation: rise 1s var(--ease) .28s both; } .hero h1 em { font-style: italic; } .hero__lead { font-size: var(--fs-lead); max-width: 46ch; color: #fff; opacity: .96; margin: 1.2rem 0 0; text-shadow: 0 2px 14px rgba(0,0,0,.55); animation: rise 1s var(--ease) .42s both; } .hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; animation: rise 1s var(--ease) .56s both; } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .hero__frame { /* decorative cusped arch outline framing the hero corner */ position: absolute; z-index: 1; inset: 1.4rem; border: 1px solid var(--line-gold); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; } .hero__scroll { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--royal); letter-spacing: .3em; text-transform: uppercase; font-size: .64rem; color: var(--gold-2); display: grid; justify-items: center; gap: .5rem; opacity: .85; } .hero__scroll i { width: 1px; height: 42px; background: linear-gradient(var(--gold-2), transparent); animation: scrollPulse 2s ease-in-out infinite; transform-origin: top; } @keyframes scrollPulse { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } } .hero__badge { position: absolute; z-index: 2; right: var(--pad-x); top: 50%; transform: translateY(-50%); width: clamp(120px, 14vw, 168px); aspect-ratio: 1; display: grid; place-items: center; text-align: center; border-radius: 50%; color: var(--gold-2); background: radial-gradient(circle, rgba(38,6,6,.5), transparent 70%); font-family: var(--royal); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; animation: spinBadge 28s linear infinite; } .hero__badge b { font-family: var(--display); font-size: 1.6rem; display: block; color: var(--ivory); letter-spacing: 0; } @keyframes spinBadge { to { transform: translateY(-50%) rotate(360deg); } } @media (max-width: 800px) { .hero__badge { display: none; } } /* 10. Story / about -------------------------------------------------------- */ .about { background: radial-gradient(80% 60% at 100% 0%, rgba(201,162,39,.10), transparent 60%), var(--ivory-2); } .about__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .about__media { position: relative; } .about__media img { border-radius: var(--radius); box-shadow: var(--shadow-2); aspect-ratio: 4/5; object-fit: cover; } .about__media .stamp { position: absolute; bottom: -22px; right: -10px; width: clamp(110px, 13vw, 150px); aspect-ratio: 1; background: var(--ink); color: var(--gold-2); border-radius: 50%; display: grid; place-items: center; text-align: center; box-shadow: var(--shadow-gold); border: 1px solid var(--line-gold); font-family: var(--royal); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; padding: 1rem; } .about__media .stamp b { font-family: var(--display); font-size: 1.8rem; color: var(--ivory); display: block; letter-spacing: 0; } .about h2 { font-size: var(--fs-h2); margin-top: .4rem; } .about p { margin: 1.2rem 0 0; color: #43382c; } .about .sign { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--saffron); margin-top: 1.4rem; } @media (max-width: 880px) { .about__grid { grid-template-columns: 1fr; } .about__media { order: -1; max-width: 460px; } } /* 11. Signature dishes ----------------------------------------------------- */ .dishes { background: radial-gradient(100% 80% at 0% 0%, rgba(201,162,39,.16), transparent 55%), linear-gradient(180deg, var(--ink), var(--ink-2)); color: var(--ivory); } .dish-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: clamp(2rem, 5vw, 3.4rem); } .dish { position: relative; background: rgba(247,241,229,.04); border: 1px solid var(--line-gold); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; } .dish:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); border-color: var(--gold-2); } .dish__img { position: relative; aspect-ratio: 5/4; overflow: hidden; } .dish__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .dish:hover .dish__img img { transform: scale(1.08); } .dish__price { position: absolute; top: .8rem; right: .8rem; z-index: 2; font-family: var(--display); font-size: 1.05rem; color: var(--ink); background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: .25em .7em; border-radius: 999px; box-shadow: var(--shadow-1); } .dish__veg { position: absolute; top: .9rem; left: .9rem; z-index: 2; width: 16px; height: 16px; } .dish__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .dish__body h3 { font-size: var(--fs-h3); color: var(--ivory); } .dish__body p { margin: 0; font-size: .92rem; color: rgba(247,241,229,.72); line-height: 1.55; } .dish__foot { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; border-top: 1px solid var(--line-gold); } .dish .btn-story { color: var(--gold-2); } .dish .btn-story svg { color: var(--gold-2); } /* 12. Dish-story modal (storybook) ---------------------------------------- */ .story { position: fixed; inset: 0; z-index: 220; display: none; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); } .story.is-open { display: grid; } .story__scrim { position: absolute; inset: 0; background: rgba(15,3,3,.82); backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s; } .story.is-open .story__scrim { opacity: 1; } .story__book { position: relative; z-index: 2; width: min(820px, 100%); max-height: 88svh; overflow: hidden; border-radius: 8px; color: var(--sepia); background: radial-gradient(120% 80% at 50% 0%, rgba(120,80,20,.10), transparent 60%), linear-gradient(180deg, var(--parch), var(--parch-2)); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(120,80,20,.18); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); } .story.is-open .story__book { transform: none; opacity: 1; } /* aged paper grain */ .story__book::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.5'/%3E%3C/svg%3E"); } /* ornate gold inner frame */ .story__book::after { content: ""; position: absolute; inset: 12px; pointer-events: none; border: 1px solid rgba(138,106,20,.5); box-shadow: inset 0 0 0 4px rgba(138,106,20,.12); border-radius: 4px; } .story__head { position: relative; z-index: 3; text-align: center; padding: 1.6rem 2rem .4rem; } .story__head .eyebrow { color: var(--sepia); } .story__head .eyebrow::before, .story__head .eyebrow::after { background: linear-gradient(90deg, transparent, var(--sepia)); } .story__head h3 { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--ink); } .story__stage { position: relative; z-index: 3; padding: .4rem clamp(1.4rem, 5vw, 3rem) 1rem; } .scene { display: none; } .scene.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.2rem); align-items: center; } .scene__art { position: relative; aspect-ratio: 1; display: grid; place-items: center; } .scene__art svg { width: 100%; height: 100%; } /* the ink line-art draws itself */ .scene__art .ink path, .scene__art .ink line, .scene__art .ink circle, .scene__art .ink polyline { fill: none; stroke: var(--sepia); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); } .scene.is-active .ink path, .scene.is-active .ink line, .scene.is-active .ink circle, .scene.is-active .ink polyline { animation: draw 1.6s var(--ease) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* sepia colour wash fades in after the drawing */ .scene__art .wash { opacity: 0; } .scene.is-active .scene__art .wash { animation: washIn 1.1s ease 1.1s forwards; } @keyframes washIn { to { opacity: .85; } } .scene__text { } .scene__text .scene-no { font-family: var(--royal); letter-spacing: .3em; text-transform: uppercase; font-size: .68rem; color: var(--saffron); } .scene__text p { margin: .5rem 0 0; font-family: var(--display); font-size: clamp(1.05rem, 2vw, 1.32rem); line-height: 1.55; color: var(--sepia); } .scene.is-active .scene__text p { animation: rise .7s var(--ease) both; } .scene.is-active .scene__text p:nth-child(2) { animation-delay: .5s; } .scene.is-active .scene__text p:nth-child(3) { animation-delay: .9s; } .scene.is-active .scene__text p:nth-child(4) { animation-delay: 1.3s; } .story__foot { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem clamp(1.4rem, 5vw, 3rem) 1.6rem; } .story__dots { display: flex; gap: .5rem; } .story__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--sepia); background: transparent; cursor: pointer; transition: background .3s, transform .3s; } .story__dots button[aria-current="true"] { background: var(--saffron); border-color: var(--saffron); transform: scale(1.15); } .story__nav { display: flex; gap: .6rem; } .story__nav button { font-family: var(--royal); letter-spacing: .06em; font-size: .82rem; cursor: pointer; background: transparent; border: 1px solid rgba(138,106,20,.5); color: var(--ink); padding: .45em 1em; border-radius: 999px; transition: background .3s, color .3s, opacity .3s; } .story__nav button:hover { background: var(--ink); color: var(--gold-2); } .story__nav button:disabled { opacity: .35; cursor: default; } .story__close { position: absolute; top: .8rem; right: .9rem; z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--gold-2); border: 1px solid var(--line-gold); cursor: pointer; display: grid; place-items: center; transition: transform .3s, background .3s; } .story__close:hover { transform: rotate(90deg); } .story__close svg { width: 18px; height: 18px; } /* page-turn flourish */ .story__book.turning .scene.is-active { animation: pageTurn .5s var(--ease); } @keyframes pageTurn { from { transform: rotateY(8deg); opacity: .3; transform-origin: left; } to { transform: none; opacity: 1; } } @media (max-width: 680px) { .scene.is-active { grid-template-columns: 1fr; } .scene__art { max-width: 240px; margin-inline: auto; } } /* 13. Menu tabs ------------------------------------------------------------ */ section.menu { background: var(--ivory); } .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2rem auto 0; } .tab { font-family: var(--royal); letter-spacing: .08em; font-size: .92rem; cursor: pointer; background: transparent; border: 1px solid var(--line-soft); color: var(--espresso); padding: .6em 1.3em; border-radius: 999px; transition: background .3s, color .3s, border-color .3s; } .tab[aria-selected="true"] { background: var(--ink); color: var(--gold-2); border-color: var(--ink); } .tab:hover { border-color: var(--gold); } .menu-panel { display: none; margin-top: 2.4rem; } .menu-panel.is-active { display: block; animation: rise .5s var(--ease) both; } .menu-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .4rem 3rem; max-width: 980px; margin-inline: auto; } .menu-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .5rem; padding: 1rem 0; border-bottom: 1px dashed var(--line-soft); } .menu-item h4 { font-family: var(--display); font-size: 1.18rem; margin: 0; font-weight: 600; } .menu-item .price { font-family: var(--display); color: var(--saffron); font-size: 1.1rem; white-space: nowrap; } .menu-item p { grid-column: 1 / -1; margin: .15rem 0 0; font-size: .88rem; color: #6a5f50; } .menu-item .dot { display: inline-block; width: 10px; height: 10px; border: 1px solid currentColor; vertical-align: middle; margin-right: .4rem; } .menu-item .dot.veg { color: #3c7a2e; } .menu-item .dot.veg::after { content:""; } .menu-item .dot.non { color: #9a2b1f; } /* 14. Gallery -------------------------------------------------------------- */ .gallery { background: var(--ink-2); color: var(--ivory); } .gallery-grid { columns: 3 240px; column-gap: 14px; margin-top: clamp(2rem, 5vw, 3rem); } .gallery-grid figure { margin: 0 0 14px; break-inside: avoid; position: relative; border-radius: 10px; overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-2); } .gallery-grid img { width: 100%; transition: transform .7s var(--ease), filter .7s; filter: saturate(.96); } .gallery-grid figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(38,6,6,.5), transparent 50%); opacity: 0; transition: opacity .5s; } .gallery-grid figure:hover img { transform: scale(1.07); filter: saturate(1.1); } .gallery-grid figure:hover::after { opacity: 1; } .gallery-grid figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-family: var(--royal); letter-spacing: .1em; font-size: .76rem; color: var(--gold-2); opacity: 0; transform: translateY(8px); transition: .5s; } .gallery-grid figure:hover figcaption { opacity: 1; transform: none; } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 210; display: none; place-items: center; background: rgba(10,2,2,.92); padding: 4vw; cursor: zoom-out; } .lightbox.is-open { display: grid; } .lightbox img { max-width: 92vw; max-height: 88svh; border-radius: 6px; box-shadow: var(--shadow-2); border: 1px solid var(--line-gold); } /* 15. Order-online strip --------------------------------------------------- */ .order { background: linear-gradient(180deg, var(--saffron), #c64e02); color: var(--ivory-2); text-align: center; } .order h2 { color: var(--ivory-2); } .order p { max-width: 52ch; margin: .8rem auto 0; opacity: .94; } .order__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.4rem, 4vw, 3rem); margin-top: 2.2rem; } .order__logos img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .9; transition: transform .4s var(--ease), opacity .4s; } .order__logos a:hover img { transform: translateY(-4px); opacity: 1; } /* 16. Reservations / contact ----------------------------------------------- */ .reserve { background: var(--ivory-2); } .reserve__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); } .reserve__info p { margin: .3rem 0 0; } .reserve__info .row { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); } .reserve__info .row svg { width: 22px; height: 22px; color: var(--saffron); flex: none; margin-top: 3px; } .reserve__info .row b { font-family: var(--royal); letter-spacing: .04em; display: block; color: var(--ink); } .reserve__form { background: var(--ink); color: var(--ivory); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--shadow-2); position: relative; overflow: hidden; } .reserve__form .field { margin-top: 1rem; } .reserve__form label { font-family: var(--royal); letter-spacing: .06em; font-size: .8rem; color: var(--gold-2); display: block; margin-bottom: .35rem; } .reserve__form input, .reserve__form select, .reserve__form textarea { width: 100%; font-family: var(--body); font-size: .96rem; color: var(--ivory); background: rgba(247,241,229,.06); border: 1px solid var(--line-gold); border-radius: 8px; padding: .8em .9em; transition: border-color .3s, background .3s; } .reserve__form input:focus, .reserve__form select:focus, .reserve__form textarea:focus { outline: none; border-color: var(--gold-2); background: rgba(247,241,229,.1); } .reserve__form .btn { width: 100%; justify-content: center; margin-top: 1.4rem; } .reserve__form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 880px) { .reserve__grid { grid-template-columns: 1fr; } .reserve__form .grid2 { grid-template-columns: 1fr; } } /* 17. Footer --------------------------------------------------------------- */ .site-foot { background: var(--ink-3); color: rgba(247,241,229,.8); padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; position: relative; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; } .foot-brand .brand { color: var(--ivory); margin-bottom: 1rem; } .foot-brand p { font-size: .9rem; max-width: 30ch; } .site-foot h4 { font-family: var(--royal); letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; color: var(--gold-2); margin: 0 0 1rem; } .site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .92rem; } .site-foot a:hover { color: var(--gold-2); } .socials { display: flex; gap: .7rem; margin-top: .4rem; } .socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-gold); display: grid; place-items: center; color: var(--ivory); transition: background .3s, color .3s, transform .3s; } .socials a:hover { background: var(--gold-2); color: var(--ink); transform: translateY(-3px); } .socials svg { width: 18px; height: 18px; } .foot-base { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-gold); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font-size: .8rem; opacity: .75; } @media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } } /* 18. Reveal-on-scroll ----------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } /* 19. Modern counterpoint — clean charcoal/ivory sections w/ copper -------- */ .section--modern { background: #fff; padding-block: clamp(4rem, 9vw, 8rem); } .about.section--modern { background: linear-gradient(180deg, var(--ivory-2), #fff); } /* modern label: copper, geometric sans, single tick (no gold filigree) */ .section--modern .eyebrow { font-family: var(--body); font-weight: 700; font-size: .72rem; letter-spacing: .34em; color: var(--copper-ink); gap: .65rem; } .section--modern .eyebrow::before { width: 26px; background: var(--copper); } .section--modern .eyebrow::after { display: none; } .section--modern h2 { color: var(--charcoal); letter-spacing: -.018em; } .section--modern h2 em { color: var(--copper-ink); } .section--modern .lead, .section--modern p { color: var(--ash); } /* copper hairline divider, left-anchored = modern */ .section--modern .divider { color: var(--copper); max-width: 110px; margin-left: 0; } .section--modern .divider::after { display: none; } /* About in modern dress */ .section--modern .about__media img { border-radius: 4px; } .section--modern .about__media .stamp { background: var(--charcoal); color: var(--copper-2); border-color: rgba(176,106,59,.45); box-shadow: 0 18px 40px -18px rgba(34,31,28,.6); } .section--modern .about__media .stamp b { color: #fff; } .section--modern .sign { color: var(--copper-ink); } /* Menu in modern dress */ .menu.section--modern .title-wrap .divider { margin-inline: auto; } .menu.section--modern .tab { color: var(--charcoal); border-color: rgba(34,31,28,.16); } .menu.section--modern .tab[aria-selected="true"] { background: var(--charcoal); color: var(--copper-2); border-color: var(--charcoal); } .menu.section--modern .tab:hover { border-color: var(--copper); } .menu.section--modern .menu-item { border-bottom: 1px solid rgba(176,106,59,.22); } .menu.section--modern .menu-item h4 { color: var(--charcoal); } .menu.section--modern .menu-item .price { color: var(--copper-ink); } .menu.section--modern .menu-item p { color: var(--ash); } .section--modern .btn--dark { background: var(--charcoal); color: var(--copper-2); box-shadow: 0 14px 34px -16px rgba(34,31,28,.7); } /* 20. Feature rows — floating organic-radius images + letter-reveal -------- */ .features { background: #fff; } .feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5.5rem); margin-bottom: clamp(3rem, 8vw, 7rem); } .feature-row:last-child { margin-bottom: 0; } .feature-row:nth-child(even) .feature-media { order: 2; } .feature-media { position: relative; isolation: isolate; } .feature-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; box-shadow: var(--shadow-2); border-radius: 6% 40% 6% 40%; animation: floaty 7s ease-in-out infinite; } .feature-row:nth-child(even) .feature-media img { border-radius: 40% 6% 40% 6%; animation-duration: 8.5s; animation-delay: -2.5s; } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(1.5deg); } } /* soft copper aura behind the image */ .feature-media::after { content: ""; position: absolute; inset: 10% -7% -12% 10%; z-index: -1; border-radius: inherit; background: radial-gradient(closest-side, rgba(176,106,59,.22), transparent 75%); } .feature-copy .eyebrow { font-family: var(--body); font-weight: 700; font-size: .7rem; letter-spacing: .32em; color: var(--copper-ink); gap: .6rem; } .feature-copy .eyebrow::before { width: 24px; background: var(--copper); } .feature-copy .eyebrow::after { display: none; } .feature-copy h3 { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.1; color: var(--charcoal); margin: .35rem 0 0; } .feature-copy h3 em { color: var(--copper-ink); font-style: italic; } .feature-copy p { color: var(--ash); margin-top: 1.1rem; font-size: var(--fs-lead); } @media (max-width: 820px) { .feature-row { grid-template-columns: 1fr; gap: 1.5rem; } .feature-row:nth-child(even) .feature-media { order: -1; } .feature-media img { aspect-ratio: 16/10; } } /* letter-by-letter heading reveal (JS splits text into .ch spans) */ .split .ch { display: inline-block; opacity: 0; transform: translateY(16px) rotate(3deg); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 22ms); } .split.in .ch { opacity: 1; transform: none; } .split .word { display: inline-block; white-space: nowrap; } /* never break a word mid-letter */ /* ======================================================================== SITE-WIDE LAYOUT — shared header/footer + inner pages (shop, blog, cart…) Added so EVERY page wears the heritage skin, not just the homepage. ===================================================================== */ /* --- Logo lockup ------------------------------------------------------- */ .brand__logo { height: clamp(52px, 7vw, 74px); width: auto; display: block; } .foot-logo { height: 96px; width: auto; display: block; margin-bottom: 1rem; } /* --- Nav menu (now driven by wp_nav_menu →