/* ========================================================================== VELORA — one stylesheet, built on CSS logical properties. There is no RTL build and no [dir="rtl"] override farm: flipping `dir` on mirrors the layout for free. The short list of things that must NOT mirror (prices, phone numbers, SKUs, Fawry codes, Latin brand names) is pinned with .ltr / at the point of use. See BLUEPRINT §2.4. ========================================================================== */ /* ---------------------------------------------------------------- tokens */ :root { /* brand — sampled from the Velora lockup */ --gold: #c6a05c; --gold-deep: #a87f33; --gold-light: #e2c88f; --gold-wash: #f3e7d2; --ink: #232326; /* the charcoal R */ --ink-soft: #4a4a4f; --ink-mute: #7b7b83; --cream: #f7f0e8; /* page ground */ --surface: #fcf8f3; /* cards */ --surface-2: #f2e9de; --line: #e6d9c7; --line-strong: #d6c2a6; --success: #3f7d5a; --danger: #a3352f; --warning: #b5791f; --info: #3a6079; /* type */ --font-display: 'Cormorant Garamond', 'Amiri', 'Times New Roman', serif; --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); --step-0: clamp(0.94rem, 0.9rem + 0.2vw, 1rem); --step-1: clamp(1.1rem, 1.03rem + 0.35vw, 1.25rem); --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem); --step-4: clamp(2.3rem, 1.7rem + 2.8vw, 4rem); /* space + shape */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --radius: 4px; --radius-lg: 8px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(35 35 38 / 0.05); --shadow: 0 6px 20px -8px rgb(35 35 38 / 0.14); --shadow-lg: 0 24px 48px -20px rgb(35 35 38 / 0.24); --container: 1240px; --header-h: 68px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* `hidden` states that an element is not relevant, but the UA rule that enforces it is the weakest thing in the cascade: any author `display` on the same element silently outranks it. `.field { display: block }` alone kept a required wallet-phone input on screen for every shopper, and `.price-was { display: flex }` let a struck-through price survive a switch to a variant that has no discount. Anchor it once, here, so `el.hidden = true` means the same thing everywhere. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: 0.005em; } :where(h1, h2, h3, h4):lang(ar) { font-family: 'Amiri', var(--font-display); line-height: 1.35; } :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- utilities */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 768px) { .container { padding-inline: var(--sp-5); } } /* Direction-neutral content: prices, phones, SKUs, codes, Latin marks. These must read the same in an Arabic RTL page and an English LTR one. */ .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .stack > * + * { margin-block-start: var(--flow, var(--sp-4)); } .muted { color: var(--ink-mute); } .small { font-size: var(--step--1); } .eyebrow { font-size: var(--step--1); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; } :where(.eyebrow):lang(ar) { letter-spacing: normal; text-transform: none; } .rule { display: flex; align-items: center; gap: var(--sp-4); color: var(--gold); } .rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to inline-end, transparent, var(--line-strong), transparent); } /* Directional icons flip with dir; illustrative ones never do. */ .icon-dir { transition: transform 0.2s var(--ease); } [dir='rtl'] .icon-dir { transform: scaleX(-1); } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.72em 1.6em; border-radius: var(--radius); font-size: var(--step-0); font-weight: 500; border: 1px solid transparent; transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); text-align: center; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; } .btn-primary { background: var(--ink); color: var(--cream); } .btn-primary:hover { background: #35353a; } .btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-deep)); color: #2b2313; font-weight: 600; } .btn-gold:hover { filter: brightness(1.05); } .btn-outline { border-color: var(--line-strong); color: var(--ink); background: transparent; } .btn-outline:hover { border-color: var(--gold-deep); color: var(--gold-deep); } .btn-ghost { color: var(--ink-soft); padding-inline: var(--sp-3); } .btn-ghost:hover { color: var(--gold-deep); } .btn-block { width: 100%; } .btn-lg { padding: 0.9em 2.2em; font-size: var(--step-1); } .btn-sm { padding: 0.5em 1em; font-size: var(--step--1); } /* ---------------------------------------------------------------- forms */ .field { display: block; } .field + .field { margin-block-start: var(--sp-4); } .label { display: block; font-size: var(--step--1); font-weight: 500; margin-block-end: var(--sp-2); color: var(--ink-soft); } .label .req { color: var(--danger); } .input, .select, .textarea { width: 100%; padding: 0.68em 0.9em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } .input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(198 160 92 / 0.18); } .textarea { min-height: 6rem; resize: vertical; } .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%); background-size: 5px 5px, 5px 5px; background-position: right 1rem center, right calc(1rem - 5px) center; background-repeat: no-repeat; padding-inline-end: 2.4rem; } [dir='rtl'] .select { background-position: left 1rem center, left calc(1rem - 5px) center; } .hint { font-size: var(--step--1); color: var(--ink-mute); margin-block-start: var(--sp-1); } .error-text { font-size: var(--step--1); color: var(--danger); margin-block-start: var(--sp-1); } /* numeric inputs stay LTR regardless of page direction */ input[inputmode='numeric'], input[type='tel'], input[type='email'], input[name='code'] { direction: ltr; text-align: start; } [dir='rtl'] input[inputmode='numeric'], [dir='rtl'] input[type='tel'], [dir='rtl'] input[type='email'] { text-align: right; } /* ---------------------------------------------------------------- header */ .header { position: sticky; inset-block-start: 0; z-index: 60; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(12px); border-block-end: 1px solid var(--line); } .header-top { background: var(--ink); color: var(--gold-light); font-size: var(--step--1); text-align: center; padding-block: 0.45rem; letter-spacing: 0.04em; } .header-bar { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--header-h); } @media (min-width: 768px) { .header-bar { gap: var(--sp-4); } } .logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; flex-shrink: 0; } .logo-word { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.6rem; letter-spacing: 0.2em; text-indent: 0.2em; /* balance the trailing letter-space */ color: var(--ink); } .logo-kicker { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.5rem; letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase; color: var(--gold-deep); margin-block-start: 2px; } .nav-main { display: none; gap: var(--sp-5); margin-inline-start: var(--sp-5); } @media (min-width: 1024px) { .nav-main { display: flex; } } .nav-link { font-size: var(--step--1); letter-spacing: 0.06em; color: var(--ink-soft); padding-block: 0.4rem; border-block-end: 1px solid transparent; transition: color 0.16s var(--ease), border-color 0.16s var(--ease); white-space: nowrap; } .nav-link:hover, .nav-link[aria-current='page'] { color: var(--ink); border-block-end-color: var(--gold); } .header-actions { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; /* Without this the header row squeezes the buttons to a few pixels on small phones instead of letting the (already hidden) search field absorb the loss. */ flex-shrink: 0; border-radius: var(--radius); color: var(--ink-soft); transition: background-color 0.16s var(--ease), color 0.16s var(--ease); } .icon-btn:hover { background: var(--surface-2); color: var(--ink); } .badge-count { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; min-width: 17px; height: 17px; padding-inline: 4px; display: grid; place-items: center; background: var(--gold-deep); color: #fff; border-radius: var(--radius-pill); font-size: 0.62rem; font-weight: 600; direction: ltr; } .lang-switch { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--step--1); color: var(--ink-soft); transition: border-color 0.16s var(--ease), color 0.16s var(--ease); } .lang-switch:hover { border-color: var(--gold); color: var(--gold-deep); } .search-form { display: none; position: relative; flex: 1 1 0; min-width: 0; max-width: 420px; } @media (min-width: 768px) { .search-form { display: block; } } .search-form .input { padding-inline-start: 2.6rem; background: var(--surface); border-radius: var(--radius-pill); } .search-form .search-icon { position: absolute; inset-block-start: 50%; inset-inline-start: 0.85rem; transform: translateY(-50%); color: var(--ink-mute); pointer-events: none; } .suggest { position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 70; } .suggest:empty { display: none; } .suggest a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); } .suggest a:hover { background: var(--surface-2); } .suggest img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); } /* mobile drawer */ /* Below 480px the header keeps only what a thumb needs: menu, logo, language, cart. */ @media (max-width: 479px) { .lang-label, .hide-xs { display: none; } .lang-switch { padding-inline: 0.5rem; } } .drawer-toggle { display: inline-grid; } @media (min-width: 1024px) { .drawer-toggle { display: none; } } .drawer { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(86vw, 340px); background: var(--surface); z-index: 100; padding: var(--sp-5); overflow-y: auto; transform: translateX(-100%); transition: transform 0.28s var(--ease); box-shadow: var(--shadow-lg); } [dir='rtl'] .drawer { transform: translateX(100%); } .drawer[data-open='true'] { transform: translateX(0); } .scrim { position: fixed; inset: 0; background: rgb(35 35 38 / 0.45); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.24s var(--ease); } .scrim[data-open='true'] { opacity: 1; pointer-events: auto; } .drawer-nav a { display: block; padding-block: var(--sp-3); border-block-end: 1px solid var(--line); font-size: var(--step-1); } /* ---------------------------------------------------------------- hero */ .hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 80% 0%, rgb(226 200 143 / 0.35), transparent 60%), linear-gradient(160deg, var(--surface), var(--surface-2)); border-block-end: 1px solid var(--line); } .hero-inner { display: grid; gap: var(--sp-6); align-items: center; padding-block: var(--sp-7); } @media (min-width: 900px) { .hero-inner { grid-template-columns: 1.05fr 0.95fr; padding-block: var(--sp-8); } } .hero h1 { font-size: var(--step-4); white-space: pre-line; } .hero p { max-width: 46ch; color: var(--ink-soft); font-size: var(--step-1); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .hero-figure { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--gold); box-shadow: var(--shadow-lg); max-width: 460px; margin-inline: auto; } .hero-figure img { width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------------------------------- sections */ .section { padding-block: var(--sp-7); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-5); } .section-head h2 { font-size: var(--step-2); } .section-link { font-size: var(--step--1); color: var(--gold-deep); white-space: nowrap; } .section-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------------------------------------------------------------- grids */ .grid-products { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } } .grid-categories { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .grid-categories { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } } /* ---------------------------------------------------------------- product card */ .card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); } .card:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-2px); } .card-media { position: relative; aspect-ratio: 1; background: var(--surface-2); overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); } .card:hover .card-media img { transform: scale(1.04); } .card-body { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3) var(--sp-4); flex: 1; } .card-brand { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); } .card-name { font-size: var(--step-0); font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-price { display: flex; align-items: baseline; gap: var(--sp-2); margin-block-start: auto; padding-block-start: var(--sp-2); } .price { font-weight: 600; color: var(--ink); } .price-was { font-size: var(--step--1); color: var(--ink-mute); text-decoration: line-through; } .shade-dots { display: flex; align-items: center; gap: 3px; font-size: var(--step--1); color: var(--ink-mute); } .shade-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgb(35 35 38 / 0.18); } .tag { display: inline-block; padding: 0.2em 0.6em; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; } .tag-sale { background: var(--danger); color: #fff; } .tag-new { background: var(--gold-wash); color: var(--gold-deep); } .card-tags { position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); z-index: 2; } .card-wish { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(4px); color: var(--ink-soft); } .card-wish:hover, .card-wish[aria-pressed='true'] { color: var(--danger); } .sold-out-veil { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--cream) 72%, transparent); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; color: var(--ink-soft); z-index: 1; } /* ---------------------------------------------------------------- category tile */ .cat-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); } .cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .cat-tile:hover img { transform: scale(1.05); } .cat-tile figcaption { position: absolute; inset-block-end: 0; inset-inline: 0; padding: var(--sp-4); background: linear-gradient(to top, rgb(35 35 38 / 0.78), transparent); color: #fff; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; } /* ---------------------------------------------------------------- trust strip */ .trust { border-block: 1px solid var(--line); background: var(--surface); } .trust-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--sp-5); } @media (min-width: 900px) { .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .trust-item { display: flex; gap: var(--sp-3); align-items: flex-start; } .trust-item svg { color: var(--gold-deep); flex-shrink: 0; } .trust-item strong { display: block; font-size: var(--step-0); font-weight: 600; } .trust-item span { font-size: var(--step--1); color: var(--ink-mute); } /* ---------------------------------------------------------------- brand strip */ .brand-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-5) var(--sp-7); padding-block: var(--sp-6); } .brand-strip a { font-family: 'Cormorant Garamond', serif; font-size: var(--step-2); letter-spacing: 0.12em; color: var(--ink-mute); transition: color 0.2s var(--ease); text-transform: uppercase; } .brand-strip a:hover { color: var(--gold-deep); } /* ---------------------------------------------------------------- footer */ .footer { background: var(--ink); color: #cfcfd4; margin-block-start: var(--sp-8); } .footer a { color: #cfcfd4; } .footer a:hover { color: var(--gold-light); } .footer-grid { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); grid-template-columns: 1fr; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } } .footer h3 { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-block-end: var(--sp-3); font-weight: 500; } :where(.footer h3):lang(ar) { letter-spacing: normal; text-transform: none; } .footer-links li + li { margin-block-start: var(--sp-2); } .footer-links a { font-size: var(--step--1); } .footer .logo-word { color: var(--cream); } .footer-bottom { border-block-start: 1px solid rgb(255 255 255 / 0.1); padding-block: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center; font-size: var(--step--1); color: #8f8f97; } .pay-marks { display: flex; gap: var(--sp-3); align-items: center; opacity: 0.75; font-size: 0.7rem; letter-spacing: 0.1em; } /* ---------------------------------------------------------------- misc */ .breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--step--1); color: var(--ink-mute); padding-block: var(--sp-4); } .breadcrumb a:hover { color: var(--gold-deep); } .breadcrumb .sep { opacity: 0.5; } .empty-state { text-align: center; padding-block: var(--sp-8); color: var(--ink-mute); } .empty-state h2 { color: var(--ink); margin-block-end: var(--sp-2); } .toast { position: fixed; inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5); z-index: 200; background: var(--ink); color: var(--cream); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); box-shadow: var(--shadow-lg); transform: translateY(140%); transition: transform 0.3s var(--ease); max-width: min(90vw, 380px); } .toast[data-open='true'] { transform: translateY(0); } /* ---------------------------------------------------------------- dark mode Opt-in only: the brand is a cream-and-gold house, so the light palette is the design. Dark mode inverts the ground and keeps gold as the single accent. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --cream: #17171a; --surface: #1e1e22; --surface-2: #26262b; --line: #33333a; --line-strong: #45454e; --ink: #ede8e0; --ink-soft: #b9b4ac; --ink-mute: #86828c; --gold-wash: #2e2617; } :root:not([data-theme='light']) .footer { background: #101013; } :root:not([data-theme='light']) .header-top { background: #101013; } :root:not([data-theme='light']) .btn-primary { background: var(--gold); color: #1a1508; } }