/* ========================================================================== XtraDeals UAE — shared stylesheet Design tokens live in the @theme block duplicated in each page's . This file holds everything Tailwind utilities can't express: the ticket card signature shape, motion, and a handful of composed components. ========================================================================== */ * { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } html { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; } body { background-color: #F0EEF0; color: #2A272B; } ::selection { background: #D89A3E; color: #2A272B; } :focus-visible { outline: 2px solid #8E288C; outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- Ticket / coupon-stub card — the site's signature shape. A rounded card with two punched semi-circle notches at mid-height and an optional dashed "tear line" separating a stub. Used for product cards, category cards, the promo banner, and the corporate employee credit card. -------------------------------------------------------------------------- */ .ticket-card { position: relative; isolation: isolate; } .ticket-card::before, .ticket-card::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; background: var(--ticket-notch-color, #F0EEF0); border-radius: 50%; transform: translateY(-50%); z-index: 2; box-shadow: inset 0 0 0 1px rgba(42, 39, 43, 0.06); } .ticket-card::before { left: -9px; } .ticket-card::after { right: -9px; } .ticket-card--dark { --ticket-notch-color: #2A272B; } .ticket-card--sunk::before, .ticket-card--sunk::after { box-shadow: none; } .ticket-stub { position: relative; } .ticket-stub::before { content: ""; position: absolute; inset-block: 0; left: 0; border-left: 2px dashed rgba(42, 39, 43, 0.18); } .ticket-stub--light::before { border-left-color: rgba(240, 238, 240, 0.35); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.9375rem; padding: 0.85rem 1.6rem; border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: #8E288C; color: #FFFFFF; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 20px -8px rgba(142, 40, 140, 0.55); } .btn-primary:hover { background: #6C2770; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 10px 24px -6px rgba(142, 40, 140, 0.6); } .btn-gold { background: #D89A3E; color: #2A272B; box-shadow: 0 8px 20px -8px rgba(216, 154, 62, 0.6); } .btn-gold:hover { background: #C88B31; } .btn-outline { background: transparent; color: #F0EEF0; box-shadow: inset 0 0 0 1.5px rgba(240, 238, 240, 0.4); } .btn-outline:hover { box-shadow: inset 0 0 0 1.5px rgba(240, 238, 240, 0.9); } .btn-outline-dark { background: transparent; color: #2A272B; box-shadow: inset 0 0 0 1.5px rgba(42, 39, 43, 0.2); } .btn-outline-dark:hover { box-shadow: inset 0 0 0 1.5px rgba(42, 39, 43, 0.55); } .btn-added { background: #2A272B !important; color: #F0EEF0 !important; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ #site-header { transition: box-shadow 0.25s ease, background-color 0.25s ease; } #site-header.is-scrolled { box-shadow: 0 1px 0 rgba(42, 39, 43, 0.08), 0 12px 24px -18px rgba(42, 39, 43, 0.35); } .nav-link { position: relative; color: #6F6A70; font-weight: 500; transition: color 0.15s ease; } .nav-link:hover { color: #2A272B; } .nav-link.is-active { color: #2A272B; } .nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #D89A3E; border-radius: 2px; } /* -------------------------------------------------------------------------- Mobile nav + cart drawer -------------------------------------------------------------------------- */ #mobile-nav { transform: translateX(100%); transition: transform 0.3s ease; } #mobile-nav.is-open { transform: translateX(0); } #cart-drawer { transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } #cart-drawer.is-open { transform: translateX(0); } .scrim { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .scrim.is-open { opacity: 1; pointer-events: auto; } /* -------------------------------------------------------------------------- Product media placeholders — flat colour tiles standing in for photography -------------------------------------------------------------------------- */ .media-tile { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .media-tile svg { width: 42%; height: 42%; opacity: 0.9; } .media-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.35), transparent 55%); mix-blend-mode: overlay; } /* -------------------------------------------------------------------------- Discount / status badges -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.3rem 0.6rem; border-radius: 999px; line-height: 1; } .badge-sale { background: #FFE4DE; color: #C43D26; } .badge-new { background: #F3E7F2; color: #6C2770; } .badge-gold { background: #F7E9D0; color: #8A6320; } .badge-out { background: rgba(42,39,43,0.06); color: #6F6A70; } /* -------------------------------------------------------------------------- Marquee — scrolling deal ticker under the hero -------------------------------------------------------------------------- */ .marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- Reveal-on-scroll -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* -------------------------------------------------------------------------- FAQ accordion (native
) -------------------------------------------------------------------------- */ details.faq-item summary { cursor: pointer; list-style: none; } details.faq-item summary::-webkit-details-marker { display: none; } details.faq-item .faq-chevron { transition: transform 0.25s ease; } details.faq-item[open] .faq-chevron { transform: rotate(180deg); } details.faq-item[open] summary { color: #8E288C; } /* -------------------------------------------------------------------------- Checkout payment-method mockup (corporate-credit page) — shows the actual product moment: an employee selecting "Pay via Payroll" at checkout. Deliberately not a credit-card visual — no card is ever issued. -------------------------------------------------------------------------- */ .payroll-option { transition: border-color 0.15s ease, background-color 0.15s ease; } .payroll-option.is-selected { border-color: #8E288C; background: #F3E7F2; } .radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #6F6A70; display: flex; align-items: center; justify-content: center; shrink: 0; } .radio-dot.is-selected { border-color: #8E288C; } .radio-dot.is-selected::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #8E288C; } /* -------------------------------------------------------------------------- Range / form controls -------------------------------------------------------------------------- */ input[type="range"] { accent-color: #8E288C; } input[type="checkbox"], input[type="radio"] { accent-color: #8E288C; } /* -------------------------------------------------------------------------- Utility: number ticker font -------------------------------------------------------------------------- */ .font-mono-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }