/* RupyaOff Design System Tokens — Luxe Edition v3 ────────────────────────────────────────────────── Palette: Aged Parchment · Deep Emerald · Antique Brass · Jet Reference vibe: Tanishq · Forest Essentials · Robb Report · Taj Hotels Goals: editorial weight, hairline metallics, restrained motion, real depth. Brand identity preserved — green R / pink % logo still anchors masthead. */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap'); :root { /* === Brand (logo-anchor pink, kept) === */ --brand-50: #FFF1F4; --brand-100: #FFE1E8; --brand-200: #FFC2D2; --brand-300: #FF92AE; --brand-400: #FF5C84; --brand-500: #FF2D6E; --brand-600: #E60057; --brand-700: #BD0049; --brand-800: #9C0040; --brand-900: #7A0035; /* === Deep Emerald (new primary accent — replaces purple) === */ --emerald-50: #E8F0EB; --emerald-100: #C7DBCF; --emerald-200: #98BDA6; --emerald-300: #5E9678; --emerald-400: #2D7053; --emerald-500: #0E5C3F; /* signature deep emerald */ --emerald-600: #094A32; --emerald-700: #073A27; --emerald-800: #052A1C; --emerald-900: #021B11; /* === Antique Brass (warm gold metal, deeper than champagne) === */ --brass-50: #FAF1DA; --brass-100: #F0DFA9; --brass-200: #E1C374; --brass-300: #CDA547; --brass-400: #B58729; /* signature antique brass */ --brass-500: #946918; /* deep brass */ --brass-600: #6E4D10; --brass-700: #4A340A; /* === Burgundy (occasional accent for warmth) === */ --burgundy-500: #6B1F2E; --burgundy-700: #4A1320; /* === Aged Parchment Neutrals === */ --parchment-50: #F8EFD4; /* deepest parchment (page edges) */ --parchment-100: #F4ECD0; /* primary background */ --parchment-200: #EDE2BE; --parchment-300: #D9CB9F; --parchment-400: #B0A275; --parchment-500: #7A6F4C; --parchment-600: #514830; --parchment-700: #322C1C; --parchment-800: #1C1812; --parchment-900: #0A0908; /* pure editorial black, warm undertone */ /* Alias for backwards compatibility */ --ink-50: var(--parchment-50); --ink-100: var(--parchment-100); --ink-200: var(--parchment-200); --ink-300: var(--parchment-300); --ink-400: var(--parchment-400); --ink-500: var(--parchment-500); --ink-600: var(--parchment-600); --ink-700: var(--parchment-700); --ink-800: var(--parchment-800); --ink-900: var(--parchment-900); /* Semantic — recalibrated to luxe palette */ --success: var(--emerald-500); --success-light: var(--emerald-50); --warning: var(--brass-400); --warning-light: var(--brass-50); --error: #B8362E; --error-light: #F8E2DE; --info: #2D5577; --info-light: #DCE4ED; /* Special */ --electric: var(--brass-200); --electric-dark: var(--brass-400); --deep: var(--parchment-900); /* === Gradients === */ /* Kept for brand recognition (logo's "Off" + masthead) */ --gradient-hero: linear-gradient(135deg, #FF2D6E 0%, #7C3AED 100%); /* NEW signature luxe gradients */ --gradient-emerald-brass: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 50%, var(--brass-400) 130%); --gradient-brass: linear-gradient(135deg, var(--brass-300) 0%, var(--brass-500) 100%); --gradient-brass-foil: linear-gradient(135deg, #F0DFA9 0%, #CDA547 30%, #B58729 50%, #CDA547 70%, #F0DFA9 100%); --gradient-parchment: linear-gradient(180deg, #F4ECD0 0%, #EDE2BE 100%); --gradient-parchment-deep: linear-gradient(140deg, #F8EFD4 0%, #F4ECD0 40%, #EDE2BE 100%); --gradient-jet: linear-gradient(180deg, var(--parchment-800) 0%, var(--parchment-900) 100%); --gradient-emerald-deep: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-900) 100%); --gradient-luxe-cta: linear-gradient(135deg, var(--emerald-500) 0%, var(--brass-400) 130%); /* Legacy aliases */ --gradient-electric: var(--gradient-brass-foil); --gradient-cool: var(--gradient-emerald-deep); --gradient-warm: var(--gradient-brass); --gradient-dark: var(--gradient-jet); --gradient-luxe: var(--gradient-emerald-brass); --gradient-champagne: var(--gradient-brass-foil); --gradient-ivory: var(--gradient-parchment); /* === Shadows — sculpted velvet === */ --shadow-card: 0 1px 0 rgba(255,253,247,0.85) inset, 0 1px 1px rgba(10,9,8,0.04), 0 12px 28px -10px rgba(10,9,8,0.10); --shadow-hover: 0 1px 0 rgba(255,253,247,0.95) inset, 0 6px 12px -2px rgba(10,9,8,0.08), 0 28px 56px -16px rgba(14,92,63,0.16), 0 0 0 1px rgba(181,135,41,0.20); --shadow-cta: 0 12px 28px -4px rgba(255,45,110,0.30), 0 4px 8px rgba(10,9,8,0.14); --shadow-cta-luxe: 0 12px 32px -4px rgba(14,92,63,0.35), 0 4px 8px rgba(10,9,8,0.18), 0 0 0 1px rgba(181,135,41,0.40); --shadow-luxe: 0 1px 0 rgba(255,253,247,0.5) inset, 0 18px 48px -12px rgba(10,9,8,0.22), 0 4px 12px rgba(181,135,41,0.18); --shadow-luxe-deep: 0 24px 80px -12px rgba(10,9,8,0.45), 0 4px 16px rgba(181,135,41,0.22); --shadow-glow: 0 0 60px rgba(205,165,71,0.45); --shadow-card-lifted: 0 2px 0 rgba(255,253,247,0.6) inset, 0 28px 80px -28px rgba(10,9,8,0.32), 0 6px 16px rgba(10,9,8,0.10); --shadow-gold-ring: 0 0 0 1px rgba(181,135,41,0.45), 0 8px 24px -6px rgba(181,135,41,0.22); --shadow-paper: 0 1px 0 rgba(255,253,247,0.85) inset, 0 0.5px 0 rgba(10,9,8,0.10) inset, 0 1px 3px rgba(10,9,8,0.08), 0 22px 50px -18px rgba(10,9,8,0.18); /* Radii — editorial */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* Typography */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-serif: 'Cormorant Garamond', 'Bricolage Grotesque', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Surfaces — light mode (the new default) */ --bg-primary: var(--parchment-100); --bg-secondary: #FBF5E6; /* clean parchment for cards */ --bg-tertiary: var(--parchment-200); --bg-luxe-card: linear-gradient(180deg, #FCF6E7 0%, #F5EAC8 100%); --bg-dark: var(--parchment-900); --text-primary: var(--parchment-900); --text-secondary: var(--parchment-500); --text-tertiary: var(--parchment-400); --text-onLuxe: var(--brass-200); /* gold-tinted text on dark surfaces */ --border-color: var(--parchment-200); --border-subtle: rgba(10,9,8,0.07); --border-hairline: rgba(10,9,8,0.12); --border-brass: rgba(181,135,41,0.35); --border-brass-strong: rgba(181,135,41,0.55); --border-emerald: rgba(14,92,63,0.30); /* Easing curves */ --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1); --ease-quick: cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] { --bg-primary: var(--parchment-900); --bg-secondary: #14110D; --bg-tertiary: #1F1B14; --bg-luxe-card: linear-gradient(180deg, #1A160F 0%, #110D08 100%); --text-primary: var(--parchment-50); --text-secondary: var(--parchment-300); --text-tertiary: var(--parchment-400); --border-color: #2A2218; --border-subtle: rgba(244,236,208,0.08); --border-hairline: rgba(244,236,208,0.14); --border-brass: rgba(181,135,41,0.50); --border-brass-strong: rgba(181,135,41,0.70); --shadow-card: 0 1px 1px rgba(0,0,0,0.40), 0 16px 40px -8px rgba(0,0,0,0.55); --shadow-hover: 0 6px 12px rgba(0,0,0,0.50), 0 32px 64px -12px rgba(181,135,41,0.28); --shadow-luxe: 0 1px 0 rgba(244,236,208,0.08) inset, 0 18px 48px -12px rgba(0,0,0,0.70), 0 4px 12px rgba(181,135,41,0.25); --shadow-paper: 0 1px 0 rgba(244,236,208,0.06) inset, 0 18px 48px -12px rgba(0,0,0,0.70); } * { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; text-rendering: optimizeLegibility; } body { min-height: 100vh; /* True aged-parchment luxe canvas: 1. Warm parchment base + vertical wash 2. Brass watermark top-left, emerald wash bottom, pink whisper top-right 3. Vignette via radial darken at corners 4. Fine SVG linen noise (multiply-blended, 5% opacity) */ background-color: #F4ECD0; background-image: radial-gradient(at 8% -2%, rgba(181,135,41,0.22) 0px, transparent 50%), radial-gradient(at 95% 2%, rgba(255,45,110,0.06) 0px, transparent 40%), radial-gradient(at 5% 100%, rgba(14,92,63,0.10) 0px, transparent 55%), radial-gradient(at 100% 100%, rgba(10,9,8,0.06) 0px, transparent 45%), url("data:image/svg+xml;utf8,"), linear-gradient(180deg, #F8EFD4 0%, #F4ECD0 40%, #EDE2BE 100%); background-blend-mode: normal, normal, normal, normal, multiply, normal; background-attachment: fixed; } /* Subtle page-edge vignette so the parchment "lifts" off the bezel */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at center, transparent 50%, rgba(10,9,8,0.07) 100%); mix-blend-mode: multiply; } /* Make sure interactive content sits above the vignette */ #root, body > * { position: relative; z-index: 2; } /* Luxe serif headlines */ .luxe-headline, h1.luxe, h2.luxe { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.06; } ::selection { background: var(--brass-300); color: var(--parchment-900); } [data-theme="dark"] ::selection { background: var(--brass-500); color: var(--parchment-50); } .divider-gold { height: 1px; background: linear-gradient(90deg, transparent 0%, var(--brass-400) 50%, transparent 100%); border: none; margin: 32px 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .rupya-rail { scroll-behavior: auto !important; } } /* ===== Offer rails + featured carousel ===== */ /* Horizontal swipe rails (PopularStores, ExclusiveOffers) — scrollbar hidden, swipe/scroll to reveal more so sections show only a few items at a time. */ .rupya-rail { -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; } .rupya-rail::-webkit-scrollbar { display: none; } /* Featured carousel slide entrance. */ @keyframes rupyaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .rupya-fade { animation: rupyaFade 0.45s var(--ease-luxe, cubic-bezier(0.22, 1, 0.36, 1)); } /* Rail arrows are a desktop affordance; on touch/narrow screens the rail stays swipeable, so hide the buttons to keep it clean. */ @media (max-width: 640px) { .rail-arrow { display: none !important; } }