/* ───────────────────────────────────────────────────────────────────── I18N-FOUC-1 — pre-paint Hebrew bootstrap. The inline script at the top of adds .i18n-pending to when localStorage holds Hebrew. We hide ONLY the translatable nodes (not the whole page) so the layout is intact, the dark backdrop remains visible, but English fallback text never paints before setLang('he') swaps it. Removed by lang.js (and by a ~1.2 s failsafe in head.ejs) once translations have applied. visibility:hidden keeps the box flowing → no layout shift. ───────────────────────────────────────────────────────────────────── */ html.i18n-pending [data-i18n], html.i18n-pending [data-i18n-html], html.i18n-pending [data-i18n-placeholder] { visibility: hidden; } :root { /* MSLuxury palette — pulled directly from the silver/chrome monogram on black. The --gold variable name is retained for backwards compatibility; its value is now a brushed-silver tone so every element previously coloured gold reads as polished chrome instead. */ --gold: #c8c8cc; /* brushed silver — primary accent */ --gold-hover: #a8a8ac; /* deeper silver for hover/active states */ --gold-light: rgba(200, 200, 204, 0.1); --silver-bright: #e6e6e8; /* chrome highlight (matches monogram top edge) */ --silver-shadow: #6e6e72; /* engraved silver depth */ --dark: #050505; /* deep black backplate */ --dark-2: #121214; /* one step up */ --dark-3: #1f1f23; /* card surfaces */ --light: #f4f4f5; --white: #ffffff; --gray: #888; --gray-light: #bbb; --border: #e0e0e0; --success: #2e7d32; --error: #c62828; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; } /* RTL Support */ html[dir="rtl"] { overflow-x: hidden; } html[dir="rtl"] body { direction: rtl; text-align: right; overflow-x: hidden; } html[dir="rtl"] .nav-links { flex-direction: row-reverse; } /* Phase HEBREW-LAUNCH-FIX-1 — RTL polish for buttons, badges, hero steps, mobile bottom-bar padding, and WhatsApp-float position. The uppercase + 2px letter-spacing that looks premium in Latin script reads as cramped in Hebrew, so we soften both. The featured-card + competition-card badges flip to right:14px so they sit at the visual start of the card in RTL mode. */ html[dir="rtl"] .cta-btn, html[dir="rtl"] .lc-cta, html[dir="rtl"] .section-eyebrow, html[dir="rtl"] .why-enter-tag, html[dir="rtl"] .hero-featured-badge, html[dir="rtl"] .lc-card-badge { letter-spacing: 0.02em; text-transform: none; } html[dir="rtl"] .hero-featured-badge, html[dir="rtl"] .lc-card-badge { left: auto; right: 14px; } html[dir="rtl"] .hero-flow { direction: rtl; } html[dir="rtl"] body { padding-bottom: calc(var(--mobile-bar-height, 64px) + 16px); } @media (max-width: 768px) { html[dir="rtl"] .whatsapp-float { bottom: 80px; } } html[dir="rtl"] .breadcrumb { direction: rtl; } html[dir="rtl"] .spec-row { flex-direction: row-reverse; } html[dir="rtl"] .detail-actions { flex-direction: row-reverse; } html[dir="rtl"] .whatsapp-float { left: 25px; right: auto; } html[dir="rtl"] .comp-badge { left: auto; right: 15px; } html[dir="rtl"] .filter-inner { flex-direction: row-reverse; } html[dir="rtl"] .detail-info { overflow-x: hidden; overflow-y: visible; word-wrap: break-word; } html[dir="rtl"] .watch-detail { overflow-x: hidden; overflow-y: visible; } /* RTL: Insurance Page */ html[dir="rtl"] .ins-cov-list { text-align: right; } html[dir="rtl"] .ins-cov-list li { padding-left: 0; padding-right: 22px; } html[dir="rtl"] .ins-cov-list li::before { left: auto; right: 0; } html[dir="rtl"] .ins-form label { text-align: right; } html[dir="rtl"] .ins-form input, html[dir="rtl"] .ins-form select, html[dir="rtl"] .ins-form textarea { text-align: right; } html[dir="rtl"] .ins-info-item { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .ins-partner-badge { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .ins-form-legal label { flex-direction: row-reverse; } html[dir="rtl"] .ins-watch-details { text-align: right; } /* RTL: Payment Plans Page */ html[dir="rtl"] .pay-plan-list { text-align: right; } html[dir="rtl"] .pay-plan-list li { padding-left: 0; padding-right: 20px; } html[dir="rtl"] .pay-plan-list li::before { left: auto; right: 0; } a { text-decoration: none; color: inherit; } /* ── Language Bar ── */ .lang-bar { background: var(--dark); padding: 8px 5%; text-align: right; } .lang-btn { background: none; border: none; color: #666; cursor: pointer; margin-left: 15px; font-weight: 600; font-size: 12px; transition: 0.3s; letter-spacing: 1px; } .lang-btn.active { color: var(--gold); } /* ── Navigation ── */ nav { padding: 18px 5%; display: flex; justify-content: space-between; align-items: center; background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--dark); } .logo-mark { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #0a1628 0%, #1a2942 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #c8c8cc; } .logo-mark-inner { width: 32px; height: 32px; border-radius: 50%; background: #7cc5e8; display: flex; align-items: center; justify-content: center; } .logo-watch { font-size: 18px; line-height: 1; } .logo-text { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 0.9rem; line-height: 1; letter-spacing: 2px; color: var(--dark); text-transform: uppercase; } .logo-text-accent { color: #c8c8cc; font-size: 1.1rem; letter-spacing: 3px; } /* MSLuxury monogram logo */ .logo-mark-msl { background: var(--dark); border: 1px solid var(--gold); position: relative; overflow: hidden; } .logo-mark-msl::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(197, 160, 89, 0.35), transparent 60%); } .logo-monogram { position: relative; color: var(--gold); font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 18px; letter-spacing: 1px; z-index: 1; } .logo-msl .logo-text { font-weight: 800; letter-spacing: 2.5px; } .logo-msl .logo-text-accent { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: none; color: var(--gold); font-weight: 400; } /* MSLuxury image logo in nav — sits on the white nav bar, framed in a small dark plinth so the silver monogram reads well against the page chrome. */ .logo-msl-image { display: flex; align-items: center; gap: 14px; text-decoration: none; } .logo-image { /* LOGO-ASSET-OPTIMIZE-1 — the WantThat.watch powered-by-MS-Luxury artwork is a square promotional lockup, so its readable wordmark scales with the rendered box. Give it a stronger presence in the header (taller box) while keeping the nav on one line. Constrained by max-height with width:auto so the square never distorts or crops. The duplicate "by Moti Sadon" text beside the logo was removed (the artwork already carries it), which frees the width to size up. LOGO-ASSET-OPTIMIZE-1.1 — sized up further so the WantThat.watch wordmark inside the square reads as a proper brand mark. LOGO-HEADER-SIZE-1 — controlled box (both max-width AND max-height capped to the same value) so the full square lockup renders large and readable as a proper brand mark, never overflowing the nav and never letterboxing. object-fit:contain guarantees the aspect ratio (no crop/stretch/distortion) even if the box is ever non-square. */ max-height: 170px; max-width: 170px; height: auto; width: auto; object-fit: contain; display: block; /* Borderless: the logo sits cleanly in the header with no box, outline, or background plate. */ transition: transform 0.25s ease, filter 0.25s ease; } .logo-msl-image:hover .logo-image { transform: translateY(-1px); filter: drop-shadow(0 4px 14px rgba(197, 160, 89, 0.25)); } /* Footer image logo — borderless, matching the header logo. No box, background plate, padding, or frame around the mark. */ .footer-logo-image { display: block; width: auto; max-width: 240px; height: auto; margin-bottom: 10px; } @media (max-width: 640px) { .logo-image { max-height: 110px; max-width: 150px; } } .nav-links { display: flex; align-items: center; gap: 38px; } .nav-links a { position: relative; font-size: 0.78rem; font-weight: 500; color: #555; transition: color 0.3s ease; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 0; } .nav-links a:not(.nav-cta)::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: width 0.3s ease, left 0.3s ease; } .nav-links a:not(.nav-cta):hover { color: var(--dark); } .nav-links a:not(.nav-cta):hover::after { width: 100%; left: 0; } .nav-cta { font-size: 0.72rem !important; padding: 11px 24px !important; letter-spacing: 2.5px !important; background: linear-gradient(135deg, #1a1a1d 0%, #0a0a0c 100%) !important; color: var(--white) !important; border: 1px solid var(--gold) !important; text-transform: uppercase; /* LOGO-ASSET-OPTIMIZE-1 — keep the nav CTAs on a single line so the enlarged header logo never forces "Shop Now" to wrap. */ white-space: nowrap; } .nav-cta:hover { border-color: var(--silver-bright) !important; color: var(--silver-bright) !important; box-shadow: 0 4px 18px rgba(200, 200, 204, 0.2); } /* Returning-client Login — Rolex green with an ivory label and a subtle bronze-gold edge. Premium and clearly distinct from the charcoal Shop Now button beside it. Reuses .nav-cta sizing; recolours to green. */ .nav-links a.nav-login { background: linear-gradient(135deg, #0d3b2c 0%, #14513b 100%) !important; color: #f5f1e8 !important; border: 1px solid rgba(197, 160, 89, 0.55) !important; } .nav-links a.nav-login:hover { background: linear-gradient(135deg, #0f4634 0%, #1a6347 100%) !important; border-color: #c5a059 !important; color: #ffffff !important; box-shadow: 0 4px 18px rgba(20, 81, 59, 0.28); } /* DESIGN-CTA-SYSTEM-UNIFY-1 — the persistent nav "Enter Competition" CTA (.cta-btn.cta-btn-comp.nav-cta). The generic .nav-cta rule above forces a charcoal gradient + WHITE text with !important, so the canonical .cta-btn-comp treatment can't reach it; this nav-scoped override (mirroring .nav-login) wins on specificity + !important and recolours the CTA to the shared Rolex green ground + Rolex-gold token text + gold hairline border, so the nav primary CTA reads as gold-on-green instead of white-on-charcoal. The 52px/flex page-level sizing from .cta-btn-comp is reset back to the compact nav sizing so the header layout is preserved. */ .nav-links a.nav-cta.cta-btn-comp { background: #006039 !important; color: var(--gold, #c5a059) !important; border: 1px solid rgba(197, 160, 89, 0.55) !important; display: inline-block; min-height: 0; } .nav-links a.nav-cta.cta-btn-comp:hover { background: #007a47 !important; border-color: var(--gold, #c5a059) !important; color: #ffffff !important; box-shadow: 0 4px 18px rgba(0, 96, 57, 0.28); } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; } .hamburger span { display: block; width: 25px; height: 2px; background: var(--dark); transition: 0.3s; } /* ── Buttons ── MSLuxury luxury CTA system: - Primary (.cta-btn): charcoal base, silver border, WHITE text, chrome shine on hover. Strong, immediately visible. - Secondary (.cta-btn-outline): transparent base, silver border, WHITE/silver text. Elegant but clearly there. */ .cta-btn { display: inline-block; position: relative; overflow: hidden; background: linear-gradient(135deg, #1a1a1d 0%, #0a0a0c 100%); color: var(--white); padding: 15px 36px; border: 1px solid var(--gold); border-radius: 0; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; text-align: center; font-family: 'Inter', sans-serif; text-decoration: none; } /* Subtle chrome sheen that travels across the button on hover */ .cta-btn::before { content: ''; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent 30%, rgba(230, 230, 232, 0.18) 50%, transparent 70% ); transition: left 0.7s ease; pointer-events: none; } .cta-btn:hover::before { left: 120%; } .cta-btn:hover { transform: translateY(-1px); border-color: var(--silver-bright); box-shadow: 0 6px 22px rgba(200, 200, 204, 0.18), inset 0 0 0 1px rgba(230, 230, 232, 0.08); } .cta-btn:active { transform: translateY(0); } .cta-btn-outline { background: transparent; color: var(--white); border-color: var(--gold); } .cta-btn-outline:hover { background: rgba(200, 200, 204, 0.08); border-color: var(--silver-bright); color: var(--silver-bright); } /* ── Hero ── */ .hero { height: 85vh; display: flex; align-items: center; justify-content: flex-start; text-align: left; background: url('/images/hero-patek-tiffany.svg'); background-size: cover; background-position: center; color: var(--white); padding: 0 5%; position: relative; } .hero-content { position: relative; z-index: 2; max-width: 600px; } .hero .badge { border-color: var(--gold); color: var(--gold); margin-bottom: 25px; } .hero h1 { font-family: 'Playfair Display', serif; font-size: 3.8rem; margin-bottom: 20px; line-height: 1.15; letter-spacing: 1px; } .hero p { font-size: 1.15rem; max-width: 650px; margin: 0 0 35px; font-weight: 300; color: #ddd; } .hero-actions { display: flex; gap: 20px; justify-content: flex-start; flex-wrap: wrap; } /* HERO-PAYMENT-SOCIAL-STRIP-1 / -1.1 — premium trust + social badge strip directly below the hero CTAs. The three payment badges are DISPLAY-ONLY (no link, no behaviour). The Instagram badge is the only clickable element. Stays aligned with the left hero content on desktop; wraps onto two rows on narrow viewports without triggering horizontal scroll. -1.1 update: badges are larger, more readable, and each method pill now carries its own distinct payment-badge silhouette (Apple = black premium pill, Google = light luxe pill) — built entirely with text + CSS, no image assets, no unlicensed brand glyphs. */ .hero-pay-strip { margin: 20px 0 0; max-width: 620px; align-self: flex-start; } .hero-pay-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; } .hero-pay-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; min-height: 36px; border: 1px solid rgba(197, 160, 89, 0.38); background: rgba(13, 13, 13, 0.6); color: rgba(245, 241, 232, 0.92); font-size: 0.82rem; letter-spacing: 0.6px; font-weight: 600; border-radius: 999px; line-height: 1.2; white-space: nowrap; transition: border-color 0.2s ease, background 0.2s ease; } .hero-pay-badge-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--gold, #c5a059); } .hero-pay-badge-secure { color: #fff; border-color: rgba(197, 160, 89, 0.55); background: rgba(20, 20, 24, 0.72); text-transform: uppercase; font-size: 0.74rem; letter-spacing: 1.4px; } /* HERO-PAYMENT-SOCIAL-STRIP-1.1 — payment-method badges. The brief: "make Apple Pay and Google Pay look more like recognizable payment badges using text/CSS only, no image assets, no unlicensed logos". Two distinct silhouettes so the eye recognises them as separate methods at a glance. */ .hero-pay-badge-apple, .hero-pay-badge-google { /* Reset the default gold-on-dark base — each method has its own treatment. */ border-radius: 8px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; text-transform: none; letter-spacing: 0.2px; font-size: 0.86rem; font-weight: 600; padding: 8px 18px; min-height: 36px; } .hero-pay-badge-apple { background: #000; border-color: #000; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); } .hero-pay-badge-google { background: #fff; border-color: rgba(0, 0, 0, 0.12); color: #202124; /* Google body text colour */ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } /* Subtle non-interactive emphasis on hover — these badges DON'T do anything (no link, no payment), so the effect is intentionally minimal: a slight border highlight only. */ .hero-pay-badge-apple:hover { border-color: #1a1a1a; } .hero-pay-badge-google:hover { border-color: rgba(0, 0, 0, 0.22); } /* Instagram badge — clickable, with a touch of gold accent on hover */ .hero-pay-badge-ig { padding: 0; border: none; background: transparent; min-height: 0; } .hero-pay-badge-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; min-height: 36px; border: 1px solid rgba(197, 160, 89, 0.45); background: rgba(20, 20, 24, 0.72); color: #fff; font-size: 0.82rem; letter-spacing: 0.6px; font-weight: 600; border-radius: 999px; text-decoration: none; line-height: 1.2; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease; white-space: nowrap; } .hero-pay-badge-link:hover, .hero-pay-badge-link:focus-visible { border-color: var(--gold, #c5a059); color: #fff; background: rgba(13, 13, 13, 0.85); transform: translateY(-1px); } .hero-pay-note { margin: 12px 0 0; font-size: 0.72rem; letter-spacing: 0.4px; color: rgba(245, 241, 232, 0.55); line-height: 1.4; } @media (max-width: 560px) { .hero-pay-strip { margin-top: 16px; max-width: 100%; } .hero-pay-badges { gap: 8px 10px; } .hero-pay-badge, .hero-pay-badge-link { font-size: 0.78rem; padding: 8px 14px; min-height: 38px; /* keep ≥38px tap target on touch */ } .hero-pay-badge-secure { font-size: 0.7rem; letter-spacing: 1.1px; } .hero-pay-badge-apple, .hero-pay-badge-google { font-size: 0.84rem; padding: 8px 16px; } .hero-pay-note { font-size: 0.68rem; } } /* ── Page Hero ── */ .page-hero { background: var(--dark); color: var(--white); text-align: center; padding: 80px 5% 60px; } .page-hero h1 { font-family: 'Playfair Display', serif; font-size: 2.8rem; margin-bottom: 15px; letter-spacing: 1px; } .page-hero p { font-size: 1.1rem; font-weight: 300; max-width: 600px; margin: 0 auto; color: #aaa; } /* ── Section Titles ── */ .section-title { text-align: center; font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 10px; letter-spacing: 1px; } .section-subtitle { text-align: center; color: var(--gray); font-size: 1rem; font-weight: 300; margin-bottom: 50px; } .section-cta { text-align: center; margin-top: 50px; } /* ── Badge ── */ .badge { display: inline-block; padding: 8px 18px; border: 1px solid var(--gold); color: var(--gold); font-size: 0.7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } /* ── Watch Cards ── */ .watches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; padding: 0 5%; max-width: 1400px; margin: 0 auto; } .featured-section { padding: 80px 0; } .catalog-section { padding: 40px 0 80px; } .watch-card { background: var(--white); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; display: block; } .watch-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .watch-card-image { height: 320px; background-size: cover; background-position: center; position: relative; } .comp-badge { position: absolute; top: 15px; left: 15px; background: var(--gold); color: var(--white); padding: 5px 12px; font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .status-badge { position: absolute; top: 15px; right: 15px; padding: 5px 12px; font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .status-available { background: var(--success); color: white; } .status-sold { background: var(--error); color: white; } .status-consignment { background: var(--dark-3); color: white; } .watch-card-info { padding: 25px; } .watch-brand { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 5px; } .watch-model { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 5px; color: var(--dark); } .watch-ref { font-size: 0.8rem; color: var(--gray); margin-bottom: 15px; } .watch-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid var(--border); } .watch-price { font-weight: 700; font-size: 1.1rem; color: var(--dark); } .watch-size { font-size: 0.85rem; color: var(--gray); } /* ── Competition Cards ── */ .competitions-section { padding: 80px 0; background: var(--dark); color: var(--white); } .competitions-section .section-title { color: var(--white); } .competitions-section .section-subtitle { color: var(--gray); } .comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 30px; padding: 0 5%; max-width: 1400px; margin: 0 auto; } .comp-card { background: var(--dark-2); overflow: hidden; border: 1px solid var(--dark-3); transition: border-color 0.3s; } .comp-card:hover { border-color: var(--gold); } .comp-card-image { height: 250px; background-size: cover; background-position: center; position: relative; } .comp-countdown { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.85); padding: 12px 20px; display: flex; align-items: center; gap: 10px; } .countdown-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); } .countdown-timer { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--gold); letter-spacing: 1px; } .comp-card-info { padding: 25px; } .comp-card-info h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 5px; } .comp-watch { font-size: 0.85rem; color: var(--gray); margin-bottom: 20px; } .comp-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; } .comp-detail { text-align: center; } .detail-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 5px; } .detail-value { font-weight: 700; font-size: 0.95rem; color: var(--gold); } .comp-enter-btn { width: 100%; } /* ── Competition List Page ── */ .comp-hero { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1547996160-81dfa63595aa?auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; } .legal-notice { background: var(--gold-light); border-top: 2px solid var(--gold); } .legal-inner { max-width: 900px; margin: 0 auto; padding: 20px 5%; display: flex; align-items: center; gap: 15px; } .legal-icon { font-size: 1.5rem; } .legal-inner p { font-size: 0.85rem; color: var(--gray); } .comp-list-section { padding: 60px 5%; max-width: 1100px; margin: 0 auto; } .comp-list-card { display: grid; grid-template-columns: 1fr 1.5fr; background: var(--white); margin-bottom: 30px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: box-shadow 0.3s; } .comp-list-card:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.1); } .comp-list-image { min-height: 300px; background-size: cover; background-position: center; position: relative; } .comp-list-info { padding: 35px; display: flex; flex-direction: column; justify-content: center; } .comp-list-info h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 8px; } .comp-watch-name { color: var(--gray); font-size: 0.9rem; margin-bottom: 25px; } .comp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; } .comp-stat { text-align: center; } .stat-value { display: block; font-weight: 700; color: var(--gold); font-size: 0.95rem; } .stat-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); } /* ── Quiz / Competition Detail ── */ .quiz-hero { background: var(--dark); color: var(--white); padding: 60px 5%; } .quiz-hero-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; align-items: center; } .quiz-watch-image { height: 400px; background-size: cover; background-position: center; } .quiz-info .breadcrumb { font-size: 0.8rem; color: var(--gray); margin-bottom: 20px; } .quiz-info .breadcrumb a { color: var(--gold); } .quiz-info h1 { font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 10px; } .quiz-watch-name { color: var(--gray); margin-bottom: 25px; } .quiz-meta { display: flex; flex-direction: column; gap: 20px; } .quiz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } /* ══════════════════════════════════════════════════════════════════ COMPETITION ENTRY / SKILL-QUIZ — MS Luxury dark restyle. The whole entry funnel (skill question + qualified entry + result) uses the SAME black / deep-charcoal panels + gold (#c5a059) hairlines + ivory (#f5f1e8) text as the rest of the competition detail page. No white / light blocks remain — it visually blends with the page. ══════════════════════════════════════════════════════════════════ */ .quiz-section { /* Span the same 1200px column as the top entry area so the funnel reads as one continuous page instead of a narrow boxed-in card. */ padding: 8px 5% 48px; max-width: 1200px; margin: 0 auto; background: transparent; /* page dark shows through — no light block */ } .quiz-container { /* Snug while showing the skill question (keeps it elegant and centred); widens for the Confirm Entry step so the two-column Billing + Order Summary checkout has room and aligns with the rest of the page. */ max-width: 760px; margin: 0 auto; background: linear-gradient(165deg, rgba(30,22,45,0.55), rgba(10,7,16,0.72)); border: 1px solid rgba(197,160,89,0.28); border-radius: 16px; padding: 40px 38px; box-shadow: 0 30px 70px rgba(0,0,0,0.5); transition: max-width 0.4s ease; } .quiz-container:has(.quiz-entry-step.active) { max-width: 1080px; } /* Keep the skill question itself elegant and centred even inside the wider panel (so the answer grid never stretches into sparse full-width cards). */ .quiz-question-step[data-step="0"] { max-width: 660px; margin-left: auto; margin-right: auto; } .quiz-header { text-align: center; margin-bottom: 32px; } .quiz-badge { display: inline-block; padding: 6px 16px; background: rgba(197,160,89,0.1); color: #c5a059; border: 1px solid rgba(197,160,89,0.45); border-radius: 999px; font-size: 0.64rem; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 16px; } .quiz-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 1.9rem); color: #f5f1e8; margin-bottom: 10px; } .quiz-header p { color: rgba(245,241,232,0.7); font-size: 0.92rem; line-height: 1.55; } .quiz-question { margin-bottom: 26px; padding: 20px 22px; background: rgba(255,255,255,0.03); border: 1px solid rgba(197,160,89,0.18); border-left: 3px solid #c5a059; border-radius: 10px; } .question-text { font-family: 'Playfair Display', serif; font-size: 1.15rem; line-height: 1.5; color: #f5f1e8; } .quiz-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; } .quiz-option { display: flex; align-items: center; padding: 16px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; color: #f5f1e8; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .quiz-option:hover { border-color: rgba(197,160,89,0.6); background: rgba(197,160,89,0.06); transform: translateY(-1px); } .quiz-option input { display: none; } .quiz-option input:checked + .option-label { font-weight: 700; } .quiz-option:has(input:checked) { border-color: #c5a059; background: rgba(197,160,89,0.12); box-shadow: 0 0 0 1px rgba(197,160,89,0.5), 0 8px 22px rgba(0,0,0,0.35); } .option-label { font-size: 0.95rem; letter-spacing: 0.4px; color: #f5f1e8; } .quiz-entrant { margin-bottom: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); } .quiz-entrant h3 { font-family: 'Playfair Display', serif; color: #f5f1e8; margin-bottom: 18px; } .quiz-legal { margin-bottom: 24px; } .checkbox-label { display: flex; align-items: flex-start; gap: 10px; /* CHECKOUT-CONFIRMATION-UX-1 — slightly larger so the required confirmations read clearly on the dark panel. The label colour itself is forced by a global `label { color … !important }` rule, so the readable ivory tone is set on the inner below (which is not a