/* ========================================================================== Taj Restaurant & Banquet — base.css Design tokens, reset, typography, layout primitives, motion. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Surfaces — warm near-black, layered */ --ink-900: #07060a; --ink-850: #0b0a0e; --ink-800: #100e13; --ink-700: #17141b; --ink-600: #201c25; --ink-500: #2b2531; /* Brand gold */ --gold-100: #fbf3d8; --gold-200: #f3e2a4; --gold-300: #e3c866; --gold-400: #d4af37; --gold-500: #b8942a; --gold-600: #8d6f1c; /* Accents */ --saffron: #e8963c; --rose: #b4485c; --jade: #55a37a; --danger: #e2665f; /* Type */ --cream: #f4efe6; --cream-dim: #cfc6b8; --cream-faint: #948d82; /* Semantic */ --bg: var(--ink-900); --surface: var(--ink-800); --surface-2: var(--ink-700); --line: color-mix(in oklab, var(--gold-400) 22%, transparent); --line-strong: color-mix(in oklab, var(--gold-400) 45%, transparent); --text: var(--cream); --text-dim: var(--cream-dim); --text-faint: var(--cream-faint); /* Gradients */ --grad-gold: linear-gradient(103deg, var(--gold-500) 0%, var(--gold-300) 28%, var(--gold-100) 46%, var(--gold-300) 64%, var(--gold-500) 100%); --grad-surface: linear-gradient(180deg, color-mix(in oklab, var(--ink-700) 92%, var(--gold-400)) 0%, var(--ink-800) 100%); --glow-gold: 0 0 0 1px color-mix(in oklab, var(--gold-400) 30%, transparent), 0 18px 60px -24px color-mix(in oklab, var(--gold-400) 55%, transparent); /* Fluid type scale (clamp between 360px and 1440px viewports) */ --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --fs-sm: clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem); --fs-base: clamp(0.95rem, 0.91rem + 0.19vw, 1.08rem); --fs-lg: clamp(1.08rem, 1.01rem + 0.31vw, 1.28rem); --fs-xl: clamp(1.28rem, 1.14rem + 0.60vw, 1.66rem); --fs-2xl: clamp(1.55rem, 1.30rem + 1.08vw, 2.30rem); --fs-3xl: clamp(2.00rem, 1.55rem + 1.95vw, 3.35rem); --fs-4xl: clamp(2.55rem, 1.75rem + 3.45vw, 5.00rem); --fs-hero: clamp(3.00rem, 1.60rem + 6.05vw, 7.50rem); /* Spacing */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(3.5rem, 2rem + 6.5vw, 8rem); --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem); --maxw: 1280px; --maxw-narrow: 780px; /* Shape */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; --arch: 46% 46% 6px 6px / 34% 34% 6px 6px; /* Motion */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --dur-1: .18s; --dur-2: .34s; --dur-3: .6s; --dur-4: 1s; /* Layers */ --z-bg: 0; --z-content: 1; --z-sticky: 40; --z-header: 60; --z-drawer: 80; --z-modal: 90; --z-toast: 100; /* Elevation — the colour shadows are cast in. Near-black on the dark theme; a warm translucent brown once the page turns to paper. */ --shadow-color: #000; --shadow-card: none; color-scheme: dark; scroll-padding-top: 6.5rem; } /* -------------------------------------------------------------------------- 1b. Light theme — "Ivory & Bronze" The same design, re-lit rather than redrawn. The ink ramp inverts into warm paper (900 stays the page, 500 the deepest fill) and the gold ramp deepens into bronze (100 stays the strongest end, 600 the quietest) — so every existing var(--ink-N) / var(--gold-N) keeps the *role* it had, and the rest of the stylesheet needs no per-rule light variant. Set on by the inline script in , before first paint. Without JavaScript the site simply stays dark, as designed. -------------------------------------------------------------------------- */ :root[data-theme="light"] { /* Surfaces — warm ivory, layered */ --ink-900: #f6f1e7; --ink-850: #faf6ee; --ink-800: #fffdf8; --ink-700: #efe7d7; --ink-600: #e3d8c3; --ink-500: #d4c6ac; /* Brand bronze */ --gold-100: #4b3806; --gold-200: #674e0e; --gold-300: #836115; --gold-400: #a17c1c; --gold-500: #b8942a; --gold-600: #c8a53c; /* Accents — deepened to hold their contrast on a pale ground */ --saffron: #b8620c; --rose: #97293e; --jade: #2d7550; --danger: #b23a33; /* Type */ --cream: #231b11; --cream-dim: #564a39; --cream-faint: #857763; /* Hairlines read as warm brown here, not as low-opacity gold. */ --line: color-mix(in oklab, #6d5420 26%, transparent); --line-strong: color-mix(in oklab, #6d5420 52%, transparent); /* Gold stays gold wherever it is a surface rather than a text colour — the primary button is still a bright gold plate with dark type on it. */ --grad-gold: linear-gradient(103deg, #a8811d 0%, #d8b53f 28%, #f6e7ae 46%, #d8b53f 64%, #a8811d 100%); --grad-surface: linear-gradient(180deg, #fffefb 0%, #fdf9f0 100%); --glow-gold: 0 0 0 1px color-mix(in oklab, var(--gold-400) 26%, transparent), 0 18px 44px -26px color-mix(in oklab, #4a3813 55%, transparent); /* On paper, depth comes from shadow rather than from contrast. */ --shadow-color: color-mix(in oklab, #4a3813 34%, transparent); --shadow-card: 0 1px 2px color-mix(in oklab, #4a3813 7%, transparent), 0 14px 32px -22px color-mix(in oklab, #4a3813 45%, transparent); color-scheme: light; } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; background: var(--bg); color: var(--text); font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: var(--fs-base); font-weight: 400; line-height: 1.65; letter-spacing: .002em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Warm ambient wash + fine grain so the black never reads flat */ body::before { content: ""; position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; background: radial-gradient(1100px 620px at 12% -8%, color-mix(in oklab, var(--gold-400) 11%, transparent), transparent 62%), radial-gradient(900px 700px at 96% 6%, color-mix(in oklab, var(--rose) 8%, transparent), transparent 60%), radial-gradient(1200px 900px at 50% 108%, color-mix(in oklab, var(--gold-600) 10%, transparent), transparent 65%); } body::after { content: ""; position: fixed; inset: -50%; z-index: var(--z-bg); pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* On paper the wash carries the warmth the near-black used to, and the grain has to drop right back — noise reads far louder on a light ground. */ :root[data-theme="light"] body::before { background: radial-gradient(1100px 620px at 12% -8%, color-mix(in oklab, var(--gold-500) 13%, transparent), transparent 62%), radial-gradient(900px 700px at 96% 6%, color-mix(in oklab, var(--rose) 6%, transparent), transparent 60%), radial-gradient(1200px 900px at 50% 108%, color-mix(in oklab, var(--gold-600) 20%, transparent), transparent 65%); } :root[data-theme="light"] body::after { opacity: .02; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; background-color: var(--ink-700); } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } p, h1, h2, h3, h4, li { overflow-wrap: break-word; } ul[class], ol[class] { list-style: none; padding: 0; } a { color: var(--gold-300); text-decoration-color: color-mix(in oklab, var(--gold-300) 40%, transparent); text-underline-offset: .22em; } a:hover { color: var(--gold-200); } hr { border: 0; border-top: 1px solid var(--line); } /* Component display rules (.field { display: grid }, .note { display: flex } …) outrank the UA [hidden] rule, so state it explicitly. */ [hidden] { display: none !important; } ::selection { background: color-mix(in oklab, var(--gold-400) 38%, transparent); color: #fff; } :root[data-theme="light"] ::selection { background: color-mix(in oklab, var(--gold-500) 48%, transparent); color: #1a1408; } :focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; border-radius: 4px; } @supports (scrollbar-color: red blue) { html { scrollbar-color: var(--gold-600) var(--ink-850); scrollbar-width: thin; } } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ .display, h1, h2, h3, .h1, .h2, .h3 { font-family: "Cormorant Garamond", "Georgia", "Times New Roman", serif; font-weight: 500; line-height: 1.04; letter-spacing: -.012em; text-wrap: balance; } h1, .h1 { font-size: var(--fs-4xl); } h2, .h2 { font-size: var(--fs-3xl); } h3, .h3 { font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; } h4 { font-size: var(--fs-lg); font-family: inherit; font-weight: 700; letter-spacing: -.01em; } .hero-type { font-size: var(--fs-hero); line-height: .92; letter-spacing: -.028em; } /* Cormorant ships old-style figures by default, which turn "130" into "I30". Force lining figures anywhere the serif face renders numbers. */ .display, h1, h2, h3, .h1, .h2, .h3, .brand-name, .marquee li, .cal-month, .stat .num, .tier-price .amount, .hero-chip .big, .action-card .step { font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "lnum" 1; } .eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: "Manrope", sans-serif; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-300); } .eyebrow::before { content: ""; width: 2.2em; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400)); flex: none; } .eyebrow.is-centered::after { content: ""; width: 2.2em; height: 1px; background: linear-gradient(270deg, transparent, var(--gold-400)); flex: none; } .lede { font-size: var(--fs-lg); color: var(--text-dim); line-height: 1.68; text-wrap: pretty; } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .tiny { font-size: var(--fs-xs); } .small { font-size: var(--fs-sm); } .gold-text { background: var(--grad-gold); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s var(--ease-out) infinite; } @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* The bright ramp vanishes against ivory, so light mode shimmers a darker bronze — same movement, contrast that survives. */ :root[data-theme="light"] .gold-text { background: linear-gradient(103deg, #6a4d0b 0%, #94711a 28%, #b28e28 46%, #94711a 64%, #6a4d0b 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; } .italic-accent { font-style: italic; color: var(--gold-200); font-weight: 400; } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; } .wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--maxw-narrow)); margin-inline: auto; } .section { position: relative; padding-block: var(--section-y); z-index: var(--z-content); } .section-tight { padding-block: calc(var(--section-y) * .58); } .stack > * + * { margin-top: var(--flow, 1.15rem); } .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, .85rem); align-items: center; } .grid { display: grid; gap: var(--gap, 1.5rem); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); } .center { text-align: center; } .center .eyebrow { justify-content: center; } .mx-auto { margin-inline: auto; } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.75rem); } .section-head.center { margin-inline: auto; } .section-head > * + * { margin-top: .9rem; } /* Ornamental gold rule with centre diamond */ .rule { display: flex; align-items: center; gap: .85rem; color: var(--gold-400); } .rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold-400) 55%, transparent), transparent); } .rule i { display: block; width: 7px; height: 7px; rotate: 45deg; background: var(--gold-400); box-shadow: 0 0 14px color-mix(in oklab, var(--gold-400) 70%, transparent); } /* Mughal arch image mask */ .arch { border-radius: var(--arch); overflow: hidden; } .arch-frame { position: relative; border-radius: var(--arch); padding: 10px; background: linear-gradient(148deg, color-mix(in oklab, var(--gold-300) 62%, transparent) 0%, color-mix(in oklab, var(--gold-500) 22%, transparent) 30%, color-mix(in oklab, var(--gold-600) 14%, transparent) 58%, color-mix(in oklab, var(--gold-400) 52%, transparent) 100%); } .arch-frame > img { border-radius: var(--arch); width: 100%; height: 100%; object-fit: cover; } .ratio { position: relative; overflow: hidden; } .ratio > img, .ratio > iframe, .ratio > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ratio-1x1 { aspect-ratio: 1; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-3x4 { aspect-ratio: 3 / 4; } .ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-3x2 { aspect-ratio: 3 / 2; } /* Accessibility helpers */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: .6rem; left: .6rem; z-index: var(--z-toast); padding: .7rem 1.1rem; background: var(--gold-400); color: #14100a; font-weight: 700; border-radius: var(--r-sm); transform: translateY(-180%); transition: transform var(--dur-2) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } :root[data-theme="light"] .skip-link { background: var(--gold-300); color: #fff8e6; } /* -------------------------------------------------------------------------- 5. Scroll reveal -------------------------------------------------------------------------- */ /* Gated on the `js` class set by the inline script in . Without JavaScript — or if site.js fails to load — nothing is ever hidden. */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease-out) var(--reveal-delay, 0ms), transform .85s var(--ease-out) var(--reveal-delay, 0ms), filter .85s var(--ease-out) var(--reveal-delay, 0ms); filter: blur(6px); } .js [data-reveal].is-in { opacity: 1; transform: none; filter: none; } .js [data-reveal="left"] { transform: translateX(-30px); } .js [data-reveal="right"] { transform: translateX(30px); } .js [data-reveal="scale"] { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; } } /* -------------------------------------------------------------------------- 5b. Theme swap Where the browser has view transitions, flipping the theme cross-fades the whole page rather than snapping it. site.js skips the transition entirely under prefers-reduced-motion; this is the belt to that pair of braces. -------------------------------------------------------------------------- */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; animation-timing-function: var(--ease-out); mix-blend-mode: normal; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* -------------------------------------------------------------------------- 6. Print -------------------------------------------------------------------------- */ @media print { body::before, body::after, .site-header, .site-footer, .cart-fab, .drawer, .backdrop, .to-top { display: none !important; } body { background: #fff; color: #000; } .section { padding-block: 1rem; } a::after { content: " (" attr(href) ")"; font-size: .75em; } }