/* ========================================================================= FIFA — Design tokens Fictional international tournament ticketing platform. ========================================================================= */ :root { --fifa-ink: #0B0E1A; /* near-black navy background */ --fifa-ink-soft: #121730; /* slightly lifted panel bg */ --fifa-cobalt: #1E3FE0; /* primary brand blue */ --fifa-cobalt-dark: #142aa3; --fifa-coral: #FF4B3E; /* CTA / accent */ --fifa-coral-dark: #d93a2e; --fifa-gold: #F5C84C; /* premium / hospitality accent */ --fifa-slate: #9AA5C7; /* muted text on dark */ --fifa-white: #FFFFFF; --fifa-line: rgba(154, 165, 199, 0.18); /* aliases used by FIFA-inspired components */ --fifa-blue: var(--fifa-cobalt); --fifa-orange: var(--fifa-coral); --fifa-black: var(--fifa-ink); --fifa-page-bg: #ffffff; --font-display: "Poppins", "Barlow Condensed", sans-serif; --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --radius-card: 14px; } /* Basic reset and sensible defaults for cross-site consistency */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } img, picture, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font-family: inherit; } a { text-decoration: none; } /* Theme variants applied to via {% block body_class %} */ .fifa-light-theme { background-color: var(--fifa-page-bg); color: var(--fifa-ink); } .fifa-light-theme a { color: var(--fifa-cobalt); } .fifa-light-theme .info-card, .fifa-light-theme .feature-box { background: #ffffff; color: var(--fifa-ink); border-color: rgba(16,24,40,0.06); } .fifa-dark-theme { background-color: var(--fifa-ink); color: var(--fifa-white); } /* Accessible focus outlines */ :focus { outline: 3px solid rgba(59,130,246,0.25); outline-offset: 2px; } /* Utility helpers */ .container-narrow { max-width: 1180px; margin: 0 auto; padding: 0 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body { background-color: var(--fifa-ink); color: var(--fifa-white); font-family: var(--font-body); font-size: 16px; line-height: 1.55; } h1, h2, h3, h4, .display-font { font-family: var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; } .text-slate { color: var(--fifa-slate) !important; } .text-coral { color: var(--fifa-coral) !important; } .text-gold { color: var(--fifa-gold) !important; } .bg-ink { background-color: var(--fifa-ink) !important; } .bg-ink-soft { background-color: var(--fifa-ink-soft) !important; } .font-mono { font-family: var(--font-mono); letter-spacing: 0.03em; } a { color: var(--fifa-cobalt); text-decoration: none; } a:hover { color: var(--fifa-coral); } /* --------------------------------------------------------------------- Navbar --------------------------------------------------------------------- */ .fifa-topbar { background-color: var(--fifa-ink-soft); border-bottom: 1px solid var(--fifa-line); padding: 0.35rem 0; min-height: 48px; } .fifa-topbar a, .fifa-topbar button { color: var(--fifa-white); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .fifa-topbar .top-links a, .fifa-topbar .top-actions a { color: var(--fifa-white); } @media (max-width: 768px) { .fifa-topbar { min-height: 46px; padding: 0.25rem 0; } .fifa-topbar .top-links { gap: 0.35rem; } .fifa-topbar .topbar-link { padding: 0.35rem 0.7rem; font-size: 0.75rem; } .fifa-topbar .top-actions { gap: 0.9rem; } .fifa-topbar .btn-topbar { padding: 0.3rem 0.65rem; font-size: 0.72rem; } } .fifa-topbar .topbar-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); transition: background 0.2s ease, transform 0.15s ease; } .fifa-topbar .topbar-link i { font-size: 0.95rem; color: var(--fifa-gold); } .fifa-topbar .topbar-link:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; transform: translateY(-1px); } .fifa-topbar .btn-topbar { color: var(--fifa-white); border: 1px solid rgba(255,255,255,0.16); background: transparent; font-size: 0.75rem; padding: 0.35rem 0.75rem; } .fifa-topbar .top-icon { color: var(--fifa-white); font-size: 1rem; } .fifa-main-nav { background-color: rgba(4, 18, 56, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .fifa-main-nav .navbar-brand { font-family: var(--font-display); font-size: 1.15rem; color: var(--fifa-white); letter-spacing: 0.08em; } .fifa-main-nav .nav-link { color: var(--fifa-slate); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 0.75rem !important; } .fifa-main-nav .nav-link:hover, .fifa-main-nav .nav-link.active { color: var(--fifa-white); } .top-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--fifa-white); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.2s ease, transform 0.15s ease; } .top-icon:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); } .cart-badge { background: var(--fifa-coral); color: var(--fifa-white); font-family: var(--font-mono); font-size: 0.7rem; border-radius: 50%; padding: 0.15rem 0.4rem; position: relative; top: -8px; left: -6px; } .footer-link { display: inline-block; color: var(--fifa-white); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .footer-link:hover { color: var(--fifa-coral); } .footer-divider { border-color: var(--fifa-line); margin: 2rem 0 1.25rem; } .info-card, .feature-box, .store-card, .legal-item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-card); } .info-card { color: var(--fifa-white); } .info-card h2, .info-card h4, .feature-box strong, .store-card strong { color: var(--fifa-white); } .info-card p, .feature-box p, .store-card p, .legal-item p { color: var(--fifa-slate); } .feature-box, .store-card { min-height: 100%; } .feature-list .feature-item { padding: 1rem; border-radius: var(--radius-card); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255,255,255,0.03); } .feature-list .feature-item strong { display: block; margin-bottom: 0.5rem; color: var(--fifa-white); } .legal-list .legal-item { transition: transform 0.2s ease, border-color 0.2s ease; } .legal-list .legal-item:hover { transform: translateY(-3px); border-color: rgba(255, 75, 62, 0.25); } /* --------------------------------------------------------------------- Hero --------------------------------------------------------------------- */ .fifa-hero { position: relative; background: radial-gradient(circle at 15% 25%, rgba(26, 147, 255, 0.22), transparent 18%), radial-gradient(circle at 85% 20%, rgba(59, 130, 246, 0.16), transparent 18%), linear-gradient(135deg, #02030a 0%, #04132f 30%, #0c2a68 62%, #02030a 100%); overflow: hidden; padding: 6rem 0 5rem; } .fifa-hero::before { content: ""; position: absolute; top: -25%; left: -20%; width: 80%; height: 200%; background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 35%); transform: rotate(-12deg); opacity: 0.55; filter: blur(40px); pointer-events: none; } .fifa-hero .stripe { position: absolute; top: 0; bottom: 0; width: 14px; background: rgba(59, 130, 246, 0.85); transform: skewX(-12deg); opacity: 0.55; } .fifa-hero .stripe.s1 { left: 7%; } .fifa-hero .stripe.s2 { left: 11.5%; opacity: 0.35; } .fifa-hero .stripe.s3 { left: 15.5%; opacity: 0.2; } .fifa-hero-content { position: relative; z-index: 2; } .fifa-hero h1 { font-size: 3.2rem; line-height: 1.05; } .fifa-hero .eyebrow { font-family: var(--font-mono); color: var(--fifa-coral); letter-spacing: 0.15em; font-size: 0.85rem; } .ticket-hero-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; } .ticket-hero-card h2, .ticket-hero-card p { color: var(--fifa-white); } .ticket-hero-card .eyebrow { color: var(--fifa-coral); } .ticket-hero-card .btn-fifa-primary { padding: 0.6rem 1rem; } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .btn-fifa-primary { background-color: var(--fifa-coral); border: none; color: var(--fifa-white); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.65rem 1.6rem; border-radius: 8px; transition: background-color 0.15s ease, transform 0.1s ease; } .btn-fifa-primary:hover { background-color: var(--fifa-coral-dark); color: var(--fifa-white); transform: translateY(-1px); } .btn-fifa-outline { background: transparent; border: 1.5px solid var(--fifa-cobalt); color: var(--fifa-white); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.6rem 1.5rem; border-radius: 8px; } .btn-fifa-outline:hover { background: var(--fifa-cobalt); color: var(--fifa-white); } .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 18%), linear-gradient(135deg, #02030a 0%, #04132f 30%, #0c2a68 62%, #02030a 100%); } .auth-container { width: 100%; max-width: 1180px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; } .auth-hero, .auth-panel { border-radius: var(--radius-card); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25); } .auth-hero { padding: 3rem; display: flex; flex-direction: column; justify-content: center; } .auth-brand { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fifa-coral); margin-bottom: 2rem; } .auth-copy h1 { font-size: clamp(2.7rem, 4vw, 3.6rem); line-height: 1.02; margin-bottom: 1.25rem; } .auth-copy p { color: var(--fifa-slate); font-size: 1.05rem; max-width: 38rem; } .auth-cta { margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .auth-cta p { margin: 0; color: var(--fifa-white); font-weight: 600; } .auth-panel { padding: 2.75rem; background: rgba(11, 14, 26, 0.92); } .panel-head h2 { margin-bottom: 0.5rem; } .panel-head p { color: var(--fifa-slate); margin-bottom: 1.75rem; } /* --------------------------------------------------------------------- Featured tickets list (homepage ticket cards) --------------------------------------------------------------------- */ .fifa-featured-tickets-section { padding: 3rem 0; } .fifa-featured-inner { max-width: 1180px; margin: 0 auto; padding: 0 1rem; } .fifa-section-heading { font-family: var(--font-display); font-size: 1.75rem; text-transform: uppercase; margin-bottom: 1.5rem; color: var(--fifa-ink); letter-spacing: 0.06em; } .fifa-ticket-list { margin-bottom: 0; } .fifa-ticket-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; border-radius: 1.5rem; background: #fff; border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 14px 32px rgba(15,23,42,0.08); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .fifa-ticket-card:hover { transform: translateY(-6px); box-shadow: 0 28px 66px rgba(15,23,42,0.16); border-color: rgba(59,130,246,0.16); } .fifa-ticket-card--upcoming { background: linear-gradient(180deg, rgba(248,250,252,0.96), #fff 92%); border-color: rgba(59,130,246,0.16); } .fifa-ticket-card.card { border: none; } .fifa-ticket-card .card-body { padding: 1.6rem; } .fifa-ticket-card .card-footer { padding: 0 1.6rem 1.5rem; } .fifa-ticket-info { display: flex; flex-direction: column; gap: 0.45rem; } .fifa-ticket-match { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.01em; color: var(--fifa-ink); line-height: 1.35; } .fifa-ticket-category { color: #6b7280; font-size: 0.85rem; } .fifa-ticket-price { font-weight: 900; color: var(--fifa-coral); font-family: var(--font-display); font-size: 1.4rem; } .fifa-ticket-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 0.95rem; background: rgba(249,115,22,0.14); color: var(--fifa-orange); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; } .fifa-ticket-badge--alt { background: rgba(59,130,246,0.14); color: var(--fifa-blue); } .fifa-ticket-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: auto; } .fifa-ticket-actions form { flex: 1; min-width: 140px; margin: 0; } .fifa-ticket-actions .btn-fifa-primary, .fifa-ticket-actions .btn-fifa-outline, .fifa-ticket-actions a.btn-fifa-primary { width: 100%; } .fifa-ticket-actions .btn-fifa-outline { color: var(--fifa-ink); border-color: rgba(15,23,42,0.15); background: transparent; } .fifa-ticket-actions .btn-fifa-outline:hover { background: rgba(15,23,42,0.06); color: var(--fifa-ink); } @media (max-width: 768px) { .fifa-ticket-card { min-height: auto; } .fifa-ticket-actions { flex-direction: column; } .fifa-ticket-actions form { width: 100%; } .fifa-ticket-actions a { width: 100%; } .fifa-section-heading { font-size: 1.35rem; } } .auth-form label { color: var(--fifa-white); font-weight: 600; } .auth-form .form-control { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--fifa-white); } .auth-form .form-control:focus { border-color: var(--fifa-cobalt); box-shadow: 0 0 0 0.15rem rgba(30, 63, 224, 0.18); } .auth-form .btn-fifa-primary { width: 100%; padding: 1rem; text-transform: uppercase; } .auth-form .text-slate a { color: var(--fifa-coral); } @media (max-width: 992px) { .auth-container { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- Action cards (Buy now / Marketplace style tiles) --------------------------------------------------------------------- */ .fifa-action-card { border-radius: var(--radius-card); overflow: hidden; background: var(--fifa-white); color: var(--fifa-ink); height: 100%; } .fifa-action-card .card-head { background: var(--fifa-cobalt); padding: 1.75rem 1.5rem; position: relative; } .fifa-action-card.coral .card-head { background: var(--fifa-coral); } .fifa-action-card .icon-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--fifa-white); color: var(--fifa-ink); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; } .fifa-action-card .card-head h3 { color: var(--fifa-white); font-size: 1.4rem; margin: 0; } .fifa-action-card .card-body-section { padding: 1.5rem; } .fifa-action-card .card-body-section p { color: #4a4f63; } /* --------------------------------------------------------------------- Ticket stub — signature component --------------------------------------------------------------------- */ .ticket-stub { display: flex; background: rgba(14, 24, 56, 0.95); border-radius: var(--radius-card); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); position: relative; } .ticket-stub:hover { border-color: rgba(255,255,255,0.18); } .tier-card { background: rgba(10, 20, 40, 0.95); border-radius: var(--radius-card); transition: transform .16s ease, border-color .16s ease; } .tier-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.16); } .tier-card .tier-price { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--fifa-coral); } .tier-card .tier-pill { display: inline-flex; padding: 0.35rem 0.75rem; background: rgba(255,255,255,0.06); color: #ffffff; border-radius: 999px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .tier-card .tier-meta { color: var(--fifa-slate); font-size: 0.9rem; margin-top: 0.5rem; } .tier-card .tier-note { color: var(--fifa-gold); font-size: 0.85rem; } .ticket-stub .stub-main { flex: 1; padding: 1.25rem 1.5rem; } .ticket-stub .stub-divider { position: relative; width: 0; border-left: 2px dashed var(--fifa-line); margin: 0.75rem 0; } .ticket-stub .stub-divider::before, .ticket-stub .stub-divider::after { content: ""; position: absolute; width: 22px; height: 22px; background: var(--fifa-ink); border-radius: 50%; left: -11px; } .ticket-stub .stub-divider::before { top: -11px; } .ticket-stub .stub-divider::after { bottom: -11px; } .ticket-stub .stub-side { width: 200px; padding: 1.25rem 1.25rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: rgba(30, 63, 224, 0.07); } .ticket-stub .stub-price { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--fifa-white); } .ticket-stub .stub-category { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fifa-gold); text-transform: uppercase; letter-spacing: 0.08em; } .ticket-stub .match-code { font-family: var(--font-mono); color: var(--fifa-slate); font-size: 0.8rem; } @media (max-width: 576px) { .ticket-stub { flex-direction: column; } .ticket-stub .stub-divider { width: auto; height: 0; border-left: none; border-top: 2px dashed var(--fifa-line); margin: 0 1.5rem; } .ticket-stub .stub-divider::before { top: -11px; left: -11px; } .ticket-stub .stub-divider::after { top: -11px; right: -11px; left: auto; } .ticket-stub .stub-side { width: auto; } } .stadium-preview-card { background: rgba(255,255,255,0.95); border: 1px solid rgba(15, 23, 56, 0.12); border-radius: var(--radius-card); padding: 1.5rem; box-shadow: 0 18px 48px rgba(18, 25, 64, 0.08); } .stadium-preview-header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1.25rem; } .stadium-preview-header p { margin: 0; color: #52576d; } .stadium-price-banner { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.95); border-radius: 999px; border: 1px solid rgba(15, 23, 56, 0.08); font-size: 0.95rem; color: #111; } .stadium-price-banner strong { color: #111; } .stadium-venue-summary { text-align: right; } .stadium-venue-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #111; } .stadium-capacity { color: #444; font-size: 0.9rem; } .stadium-preview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 1rem; align-items: start; } .stadium-map-sketch { position: relative; min-height: 280px; border-radius: calc(var(--radius-card) + 4px); background: radial-gradient(circle at center, rgba(252, 255, 255, 0.95), rgba(229, 235, 243, 0.95) 48%, #f8f9fb 100%); overflow: hidden; border: 1px solid rgba(15, 23, 56, 0.08); } .stadium-map-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 999px; border: 12px solid rgba(17, 24, 39, 0.06); } .stadium-map-ring--outer { width: 92%; height: 84%; } .stadium-map-ring--middle { width: 72%; height: 60%; border-color: rgba(17, 24, 39, 0.12); } .stadium-map-ring--inner { width: 54%; height: 38%; border-color: rgba(17, 24, 39, 0.18); } .stadium-map-field { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48%; height: 28%; border-radius: 1.5rem; background: linear-gradient(180deg, #9dd56f 0%, #74ae40 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); } .stadium-map-zone { position: absolute; border-radius: 1.5rem; opacity: 0.95; display: flex; justify-content: center; align-items: center; padding: 0.35rem; } .stadium-map-zone--1 { width: 42%; height: 18%; top: 12%; left: 50%; transform: translateX(-50%); background: rgba(11, 84, 65, 0.92); } .stadium-map-zone--2 { width: 30%; height: 16%; bottom: 12%; left: 50%; transform: translateX(-50%); background: rgba(197, 24, 50, 0.92); } .stadium-map-zone--3 { width: 18%; height: 16%; top: 36%; left: 10%; background: rgba(249, 115, 22, 0.92); } .stadium-map-zone--4 { width: 18%; height: 16%; top: 36%; right: 10%; background: rgba(14, 165, 233, 0.92); } .stadium-zone-label { color: #fff; font-size: 0.78rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; } .stadium-map-callout { position: absolute; min-width: 110px; padding: 0.85rem 1rem; border-radius: var(--radius-card); background: #fff; box-shadow: 0 18px 42px rgba(12, 22, 45, 0.15); text-align: center; } .stadium-map-callout--1 { top: 6%; left: 50%; transform: translateX(-50%); } .stadium-map-callout--2 { top: 8%; right: 6%; } .stadium-map-callout--3 { bottom: 18%; left: 6%; } .stadium-map-callout--4 { bottom: 14%; right: 6%; } .stadium-callout-price { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 800; color: #111; } .stadium-callout-note { color: var(--fifa-coral); font-size: 0.8rem; margin-top: 0.25rem; font-weight: 700; } .stadium-price-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; } .stadium-price-strip-item { background: #f7f8fb; border-radius: var(--radius-card); padding: 0.9rem 1rem; text-align: center; border: 1px solid rgba(15, 23, 56, 0.08); } .stadium-price-strip-value { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 800; color: #111; } .stadium-price-strip-label { font-size: 0.8rem; color: #5d6678; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.25rem; } @media (max-width: 992px) { .stadium-price-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .stadium-price-strip { grid-template-columns: 1fr; } .stadium-map-callout { position: relative; transform: none; top: auto; right: auto; bottom: auto; left: auto; margin: 0.5rem auto 0; } } .stadium-price-summary { background: linear-gradient(135deg, rgba(245, 200, 76, 0.08) 0%, rgba(245, 200, 76, 0.04) 100%); border: 1px solid rgba(245, 200, 76, 0.2); border-radius: var(--radius-card); padding: 1rem 1.25rem; text-align: center; } .price-range-info { display: flex; gap: 0.75rem; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 0.95rem; color: #111; } .price-label { color: #5d6678; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; } .price-min, .price-max { display: inline-flex; align-items: center; gap: 0.35rem; } .price-min strong, .price-max strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--fifa-coral); font-weight: 900; } .price-sep { color: #cbd5e1; font-weight: 300; } .stadium-legend { display: grid; gap: 0.85rem; } .stadium-legend-item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center; padding: 0.9rem 1rem; border-radius: var(--radius-card); background: #f6f7fb; } .stadium-legend-dot { width: 12px; height: 12px; border-radius: 50%; } .stadium-legend-dot--1 { background: #0b5441; } .stadium-legend-dot--2 { background: #c51832; } .stadium-legend-dot--3 { background: #f97316; } .stadium-legend-dot--4 { background: #0ea5e9; } .stadium-legend-copy { display: grid; gap: 0.15rem; } .stadium-legend-title { font-weight: 700; color: #111; } .stadium-legend-sub { color: #5d6678; font-size: 0.9rem; } .stadium-legend-price { font-family: var(--font-mono); font-weight: 700; color: #111; } @media (max-width: 992px) { .stadium-preview-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .stadium-preview-card { padding: 1rem; } .stadium-preview-header { gap: 1rem; } .stadium-legend-item { padding: 0.85rem; } } /* --------------------------------------------------------------------- Match cards --------------------------------------------------------------------- */ .date-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--fifa-slate); background: rgba(255, 255, 255, 0.04); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; font-size: 0.85rem; } .date-pill:hover { background: rgba(255, 255, 255, 0.08); } .date-pill.active { border-color: var(--fifa-coral); background: rgba(255, 82, 92, 0.14); color: var(--fifa-white); } .match-card { background: var(--fifa-ink-soft); border: 1px solid var(--fifa-line); border-radius: var(--radius-card); padding: 1.25rem; height: 100%; transition: border-color 0.15s ease, transform 0.15s ease; } .match-card:hover { border-color: var(--fifa-cobalt); transform: translateY(-2px); } .match-card-rich { background: linear-gradient(180deg, rgba(14, 22, 54, 0.98), rgba(8, 14, 32, 0.96)); border-color: rgba(255, 255, 255, 0.16); } .match-card-rich .teams { font-size: 1.25rem; } .price-tag { font-family: var(--font-mono); font-size: 1rem; color: var(--fifa-coral); } .price-banner { display: inline-flex; align-items: center; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; border-radius: 999px; background: rgba(255, 82, 92, 0.12); color: var(--fifa-white); font-size: 0.95rem; letter-spacing: 0.02em; } .price-banner strong { margin-left: 0.35rem; font-size: 1rem; } .match-card-rich .btn-fifa-primary { min-width: 130px; } .match-card-rich .meta { color: rgba(255,255,255,0.78); } .match-card-rich .price-tag { color: var(--fifa-gold); } .match-card .stage-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fifa-coral); text-transform: uppercase; letter-spacing: 0.08em; } .match-card .teams { font-family: var(--font-display); font-size: 1.15rem; margin: 0.5rem 0; } .match-card .meta { color: var(--fifa-slate); font-size: 0.85rem; } .team-card { background: rgba(15, 23, 56, 0.8); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-card); } .team-card .team-name { font-family: var(--font-display); font-size: 1.2rem; } .tile-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-card); transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .tile-card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.12); border-color: var(--fifa-coral); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18); } .tile-card .card-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.75rem; } /* Tile image header (mimics FIFA's visual tiles) */ .tile-card .tile-image { height: 140px; border-radius: calc(var(--radius-card) - 8px) calc(var(--radius-card) - 8px) 0 0; background-position: center; background-size: cover; background-repeat: no-repeat; margin: -1rem -1rem 1rem -1rem; } .tile-card .card-title { text-transform: uppercase; font-size: 0.95rem; } .ticket-home-hero { background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 18%), radial-gradient(circle at top right, rgba(255, 75, 62, 0.15), transparent 18%), linear-gradient(135deg, #02030a 0%, #04132f 35%, #081a3a 100%); } .hero-feature-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: calc(var(--radius-card) * 1.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); } .stay-hero, .map-panel { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); } .stay-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-card); } .map-placeholder { min-height: 320px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .score-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-card); } .score-card h3 { color: var(--fifa-white); } .score-card .text-muted { color: rgba(255, 255, 255, 0.55); } .ticket-sidebar { background: rgba(15, 23, 56, 0.9); border: 1px solid var(--fifa-line); border-radius: var(--radius-card); } .score-badge { width: 84px; height: 84px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--fifa-white); border: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--font-mono); text-transform: uppercase; font-weight: 700; } .team-entry { gap: 1rem; } .team-entry:hover { background: rgba(255, 255, 255, 0.03); } .team-entry .flag { font-size: 1.2rem; } /* --------------------------------------------------------------------- Standings table --------------------------------------------------------------------- */ .standings-card { background: var(--fifa-ink-soft); border: 1px solid var(--fifa-line); border-radius: var(--radius-card); padding: 1.5rem; } .standings-table-container { overflow-x: auto; } .standings-table { width: 100%; border-collapse: collapse; min-width: 640px; } .standings-table th, .standings-table td { padding: 1rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .standings-table th { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--fifa-slate); text-align: left; } .standings-table td { color: var(--fifa-white); font-size: 0.92rem; } .standings-table tr:hover { background: rgba(255, 255, 255, 0.03); } .standings-table .rank { font-family: var(--font-mono); color: var(--fifa-coral); } .standings-table .team-name { min-width: 220px; } .group-pill { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fifa-cobalt); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ .fifa-footer { background: var(--fifa-ink-soft); border-top: 1px solid var(--fifa-line); color: var(--fifa-slate); padding: 3rem 0 1.5rem; font-size: 0.9rem; } .fifa-footer h6 { color: var(--fifa-white); font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.05em; margin-bottom: 1rem; } .fifa-footer a { color: var(--fifa-slate); } .fifa-footer a:hover { color: var(--fifa-white); } /* ========================================================================= Official FIFA site clone — header, tickets page, feature cards ========================================================================= */ :root { --fifa-navy: #051431; --fifa-black: #000000; --fifa-page-bg: #ececec; --fifa-orange: #e85a24; --fifa-blue: #1a56db; --fifa-airbnb: #ff385c; } .fifa-header-inner { max-width: 1440px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Top bar */ .fifa-site-header .fifa-topbar { background: var(--fifa-navy); border-bottom: none; min-height: 52px; padding: 0; } .fifa-topbar-left { display: flex; align-items: center; gap: 1rem; } .fifa-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2rem; height: 2rem; padding: 0; border: none; background: transparent; cursor: pointer; } .fifa-hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px; } .fifa-wordmark-link { display: inline-flex; align-items: center; line-height: 0; } .fifa-wordmark, .fifa-wc-brand-img, .fifa-mobile-logo { display: block; width: auto; height: 22px; max-height: 22px; } .fifa-topbar-right { align-items: center; gap: 0; } .fifa-topbar-nav { display: flex; align-items: center; gap: 1.75rem; } .fifa-topbar-left .fifa-topbar-icon.d-lg-none { margin-left: 0.75rem; } .fifa-topbar-nav a { color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .fifa-topbar-nav a:hover { color: #fff; opacity: 0.85; text-decoration: none; } .fifa-topbar-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.25); margin: 0 1.25rem; } .fifa-lang-btn { display: inline-flex; align-items: center; gap: 0.4rem; border: none; background: transparent; color: #fff; font-size: 0.78rem; font-weight: 500; padding: 0; cursor: pointer; } .fifa-lang-btn .bi-chevron-down { font-size: 0.65rem; opacity: 0.8; } .fifa-topbar-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: #fff; font-size: 1.05rem; margin-left: 0.75rem; } .fifa-topbar-icon:hover { color: #fff; opacity: 0.85; } .fifa-topbar-badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--fifa-orange); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; } /* Main nav bar */ .fifa-site-header .fifa-main-nav { background: var(--fifa-black); border-bottom: none; padding: 0; min-height: 56px; } .fifa-wc-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; padding: 0.85rem 0; } .fifa-wc-brand:hover { color: #fff; text-decoration: none; } .fifa-wc-logo { flex-shrink: 0; } .fifa-main-nav-links { align-items: center; gap: 0.25rem; margin-left: auto; } .fifa-nav-link { display: inline-flex; align-items: center; gap: 0.25rem; color: #fff; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 1rem 0.85rem; white-space: nowrap; transition: opacity 0.15s ease; } .fifa-nav-link .bi-chevron-down { font-size: 0.55rem; opacity: 0.85; } .fifa-nav-link:hover, .fifa-nav-link.active { color: #fff; opacity: 0.8; text-decoration: none; } .fifa-nav-toggle { border: none; background: transparent; color: #fff; font-size: 1.5rem; padding: 0.5rem; margin-left: auto; } .fifa-offcanvas { background: var(--fifa-navy); color: #fff; } .fifa-offcanvas a { color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; } .fifa-offcanvas hr { border-color: rgba(255, 255, 255, 0.15); } @media (max-width: 991px) { .fifa-main-nav-links { flex-direction: column; align-items: flex-start; width: 100%; padding: 0.5rem 0 1rem; } .fifa-nav-link { padding: 0.65rem 0; } } /* Tickets page — light body */ body.fifa-light-theme { background: var(--fifa-page-bg); color: #111; } body.fifa-light-theme main a:not(.fifa-feature-tile):not(.fifa-promo-card):not(.fifa-pass-banner):not(.fifa-accom-btn):not(.fifa-accom-listing):not(.fifa-footer-tile):not(.fifa-subpage-back) { color: inherit; } .fifa-light-theme .alert { margin-top: 1rem; } /* Hero */ .fifa-tickets-hero { background: var(--fifa-page-bg); padding: 2.5rem 0 1.5rem; } .fifa-tickets-hero-inner { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; } .fifa-tickets-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; color: #111; margin-bottom: 0.35rem; line-height: 1.05; } .fifa-tickets-hero-date { color: #444; font-size: 0.95rem; margin-bottom: 2rem; } /* Promo cards row */ .fifa-promo-grid { margin-bottom: 1.5rem; } .fifa-promo-card { display: flex; flex-direction: column; background: #fff; border-radius: 2px; overflow: hidden; text-decoration: none; color: #111; min-height: 100%; transition: box-shadow 0.2s ease, transform 0.15s ease; } .fifa-promo-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transform: translateY(-2px); color: #111; text-decoration: none; } .fifa-promo-card-head { padding: 1.5rem 1.25rem 1rem; position: relative; min-height: 120px; } .fifa-promo-card-head.coral { background: linear-gradient(135deg, rgba(255,75,62,0.48), rgba(232,90,36,0.28)), url("/static/img/promo-1.54b5eced2eaf.svg"); background-size: cover; background-position: center; } .fifa-promo-card-head.blue { background: linear-gradient(135deg, rgba(26,86,219,0.45), rgba(30,63,224,0.25)), url("/static/img/promo-2.abd4035e6171.svg"); background-size: cover; background-position: center; } .fifa-promo-card-head.gold { background: linear-gradient(135deg, rgba(201,162,39,0.36), rgba(139,105,20,0.18)), url("/static/img/promo-3.0821a59442a9.svg"); background-size: cover; background-position: center; } .fifa-promo-card-head h3 { color: #fff; font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; text-transform: uppercase; margin: 0; line-height: 1.1; } .fifa-promo-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; } .fifa-promo-card-body p { color: #555; font-size: 0.92rem; margin-bottom: 1rem; flex: 1; } .fifa-promo-card-cta { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--fifa-orange); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; } .fifa-promo-card-head.blue + .fifa-promo-card-body .fifa-promo-card-cta { color: var(--fifa-blue); } /* FIFA PASS banner */ .fifa-pass-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; background: #fff; padding: 1.5rem 1.75rem; margin-bottom: 0.5rem; text-decoration: none; color: #111; transition: box-shadow 0.2s ease; } .fifa-pass-banner:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); color: #111; text-decoration: none; } .fifa-pass-banner h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 900; text-transform: uppercase; margin: 0 0 0.35rem; } .fifa-pass-banner p { color: #555; font-size: 0.9rem; margin: 0; max-width: 900px; } .fifa-pass-banner .btn-fifa-pass { background: var(--fifa-black); color: #fff; border: none; padding: 0.75rem 1.5rem; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; border-radius: 2px; transition: background 0.15s ease; } .fifa-pass-banner:hover .btn-fifa-pass { background: #222; } /* Feature card grid */ .fifa-tickets-grid-section { background: var(--fifa-page-bg); padding: 1.5rem 0 3rem; } .fifa-tickets-grid-inner { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; } .fifa-feature-grid { margin: 0; } @media (max-width: 991px) { .fifa-feature-grid { margin: 0; } } @media (max-width: 575px) { .fifa-feature-grid { margin: 0; } } .fifa-feature-grid.two-col { margin: 0; } @media (max-width: 991px) { .fifa-feature-grid.two-col { margin: 0; } } @media (max-width: 575px) { .fifa-feature-grid.two-col { margin: 0; } } .fifa-feature-item { display: flex; flex-direction: column; gap: 0.65rem; } .fifa-feature-tile { color: #fff; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; min-height: 230px; background: #050505; overflow: hidden; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease; border: 1px solid rgba(255,255,255,0.08); } .fifa-feature-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); border-color: rgba(255,255,255,0.18); text-decoration: none; } .fifa-feature-tile::after { content: ""; position: absolute; bottom: -35%; right: -20%; width: 75%; height: 95%; border-radius: 50%; z-index: 1; } .fifa-feature-tile.accent-orange::after { background: var(--fifa-orange); } .fifa-feature-tile.accent-blue::after { background: var(--fifa-blue); bottom: -40%; right: -25%; width: 80%; } .fifa-feature-tile.accent-both::before { content: ""; position: absolute; top: -45%; left: -25%; width: 55%; height: 80%; border-radius: 50%; background: var(--fifa-blue); z-index: 1; } .fifa-feature-tile.accent-both::after { background: var(--fifa-orange); } .fifa-feature-tile__brand { width: 42px; height: 42px; object-fit: contain; z-index: 2; } .fifa-feature-tile__logo { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; width: 36px; height: 42px; opacity: 0.95; } .fifa-feature-tile__title { position: relative; z-index: 2; color: #fff; font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.6rem); font-weight: 900; text-transform: uppercase; text-align: center; line-height: 1.05; letter-spacing: 0.03em; padding: 1.15rem 1rem; margin: 0; } .fifa-feature-tile.has-logo .fifa-feature-tile__title { margin-top: 1.5rem; } .fifa-feature-label { font-family: var(--font-display); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.98); line-height: 1.3; } .fifa-feature-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); text-decoration: none; } .fifa-feature-tile { color: #fff; } .fifa-feature-tile a, .fifa-feature-tile h2, .fifa-feature-tile span { color: #fff; } /* Accommodation section */ .fifa-accom-section { background: #fff; padding: 0; border-top: 1px solid #ddd; } .fifa-accom-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #eee; max-width: 1440px; margin: 0 auto; } .fifa-accom-brand { display: flex; align-items: center; gap: 1rem; } .fifa-accom-brand img { height: 40px; width: auto; } .fifa-accom-brand-text { font-size: 0.78rem; color: #555; max-width: 280px; line-height: 1.35; } .fifa-accom-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; text-transform: none; letter-spacing: -0.01em; color: #111; margin: 0; flex: 1; text-align: center; } .fifa-accom-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--fifa-airbnb); color: #fff; border: none; border-radius: 999px; padding: 0.85rem 1.5rem; font-weight: 700; font-size: 0.95rem; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, transform 0.1s ease; } .fifa-accom-btn:hover { background: #e31c5f; color: #fff; transform: scale(1.02); text-decoration: none; } .fifa-accom-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; } @media (max-width: 991px) { .fifa-accom-body { grid-template-columns: 1fr; } .fifa-accom-title { order: -1; width: 100%; text-align: left; } .fifa-accom-header { flex-direction: column; align-items: flex-start; } } .fifa-accom-listings { padding: 1rem 1.5rem 1.5rem; overflow-y: auto; max-height: 600px; display: flex; flex-direction: column; gap: 1.25rem; } .fifa-accom-listing { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; text-decoration: none; color: #111; border-radius: 12px; transition: background 0.15s ease; } .fifa-accom-listing:hover { background: #f7f7f7; color: #111; text-decoration: none; } @media (max-width: 575px) { .fifa-accom-listing { grid-template-columns: 1fr; } } .fifa-accom-listing-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #ddd; } .fifa-accom-listing-img img { width: 100%; height: 200px; object-fit: cover; } .fifa-accom-badge { position: absolute; top: 10px; left: 10px; background: #fff; color: #111; font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.55rem; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .fifa-accom-listing-body h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem; } .fifa-accom-rating { font-size: 0.85rem; margin-bottom: 0.35rem; } .fifa-accom-rating strong { font-weight: 700; } .fifa-accom-meta { color: #717171; font-size: 0.85rem; margin-bottom: 0.25rem; } .fifa-accom-dates { color: #717171; font-size: 0.85rem; margin-bottom: 0.35rem; } .fifa-accom-price { font-size: 0.95rem; font-weight: 600; } .fifa-accom-price u { text-decoration: underline; text-underline-offset: 2px; } .fifa-accom-map { position: relative; background: #f4f7fb; min-height: 420px; overflow: hidden; border-radius: 0 0 18px 18px; } .fifa-accom-map-embed { width: 100%; height: 100%; min-height: 420px; } .fifa-accom-map::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 30% 45%, rgba(255,255,255,0.3), transparent), radial-gradient(ellipse 35% 25% at 70% 60%, rgba(255,255,255,0.2), transparent); pointer-events: none; } .fifa-map-pin { position: absolute; width: 36px; height: 44px; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); } .fifa-map-pin::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #fff; } .fifa-map-pin-inner { width: 32px; height: 32px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 1px 4px rgba(0,0,0,0.15); } .fifa-map-pin-inner img { width: 20px; height: auto; } .fifa-map-label { position: absolute; font-size: 0.65rem; font-weight: 600; color: #333; white-space: nowrap; transform: translateX(-50%); text-shadow: 0 0 3px #fff, 0 0 3px #fff; } /* Room detail and booking polish */ .room-detail-hero-image { min-height: 280px; max-height: 420px; object-fit: cover; } .room-detail-thumb { height: 140px; object-fit: cover; } .room-booking-form { border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 16px; padding: 1rem; background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(241,245,249,0.95)); } .room-detail-list li { padding-bottom: 0.65rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .room-detail-list li:last-child { border-bottom: 0; padding-bottom: 0; } .payment-detail-box { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.08); } /* Footer tiles on tickets page */ .fifa-tickets-footer-section { background: var(--fifa-page-bg); padding: 2rem 0 3rem; } .fifa-tickets-footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; } .fifa-footer-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 767px) { .fifa-footer-tiles { grid-template-columns: 1fr; } } .fifa-footer-tile { display: flex; flex-direction: column; gap: 0.65rem; text-decoration: none; color: inherit; } .fifa-footer-tile:hover { text-decoration: none; color: inherit; } .fifa-footer-tile .fifa-feature-tile__title { font-size: clamp(0.9rem, 1.8vw, 1.25rem); } body.fifa-light-theme .fifa-footer { background: var(--fifa-black); border-top: none; margin-top: 0 !important; } .fifa-wc-brand-img { display: block; height: 28px; width: auto; max-width: min(320px, 55vw); } /* --------------------------------------------------------------------- Sub-page layout (info pages, matches, standings, etc.) --------------------------------------------------------------------- */ .fifa-subpage-hero { background: var(--fifa-page-bg); padding: 2rem 0 1rem; } .fifa-subpage-inner, .fifa-subpage-content .fifa-subpage-inner { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; } .fifa-subpage-back { display: inline-flex; align-items: center; gap: 0.4rem; color: #555; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1.25rem; text-decoration: none; } .fifa-subpage-back:hover { color: var(--fifa-orange); text-decoration: none; } .fifa-subpage-eyebrow { font-family: var(--font-mono); color: var(--fifa-orange); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; } .fifa-subpage-title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; color: #111; margin: 0 0 0.75rem; line-height: 1.05; } .fifa-subpage-lead { color: #555; font-size: 1.05rem; max-width: 720px; margin: 0 0 1rem; line-height: 1.55; } .fifa-subpage-content { background: var(--fifa-page-bg); padding: 0 0 3rem; } .fifa-subpage-content .fifa-subpage-inner > .row, .fifa-subpage-content .fifa-subpage-inner > .d-flex, .fifa-subpage-content .fifa-subpage-inner > .mb-4, .fifa-subpage-content .fifa-subpage-inner > .mb-5 { /* spacing preserved from templates */ } /* Light-theme component overrides */ body.fifa-light-theme h1, body.fifa-light-theme h2, body.fifa-light-theme h3, body.fifa-light-theme h4, body.fifa-light-theme h5, body.fifa-light-theme h6, body.fifa-light-theme .display-5 { color: #111; } body.fifa-light-theme .text-slate { color: #555 !important; } body.fifa-light-theme .text-coral { color: var(--fifa-orange) !important; } body.fifa-light-theme .eyebrow.text-coral { color: var(--fifa-orange) !important; } body.fifa-light-theme .match-card, body.fifa-light-theme .standings-card, body.fifa-light-theme .info-card, body.fifa-light-theme .feature-box, body.fifa-light-theme .store-card, body.fifa-light-theme .legal-item, body.fifa-light-theme .team-card, body.fifa-light-theme .feature-list .feature-item, body.fifa-light-theme .hero-feature-card, body.fifa-light-theme .stay-hero, body.fifa-light-theme .map-panel, body.fifa-light-theme .score-card, body.fifa-light-theme .ticket-sidebar, body.fifa-light-theme .tier-card, body.fifa-light-theme .auth-hero, body.fifa-light-theme .auth-panel { background: #fff; border-color: #e0e0e0; color: #111; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } body.fifa-light-theme .match-card-rich { background: #fff; border-color: #ddd; color: #111; } body.fifa-light-theme .match-card-rich .meta { color: #666; } body.fifa-light-theme .match-card-rich .price-tag { color: var(--fifa-orange); } body.fifa-light-theme .match-card .teams, body.fifa-light-theme .standings-table td, body.fifa-light-theme .info-card h2, body.fifa-light-theme .info-card h4, body.fifa-light-theme .feature-box strong, body.fifa-light-theme .store-card strong, body.fifa-light-theme .legal-item h2, body.fifa-light-theme .team-card .team-name, body.fifa-light-theme .score-card h3 { color: #111; } body.fifa-light-theme .info-card p, body.fifa-light-theme .feature-box p, body.fifa-light-theme .store-card p, body.fifa-light-theme .legal-item p, body.fifa-light-theme .feature-list .feature-item p { color: #555; } body.fifa-light-theme .feature-list .feature-item strong { color: #111; } body.fifa-light-theme .standings-table th { color: #777; } body.fifa-light-theme .standings-table tr:hover { background: rgba(0, 0, 0, 0.02); } body.fifa-light-theme .ticket-stub { background: #fff; border-color: #e0e0e0; } body.fifa-light-theme .ticket-stub .stub-side { background: #f0f4ff; } body.fifa-light-theme .ticket-stub .stub-price { color: #111; } body.fifa-light-theme .ticket-stub .stub-divider::before, body.fifa-light-theme .ticket-stub .stub-divider::after { background: var(--fifa-page-bg); } body.fifa-light-theme .form-control, body.fifa-light-theme .form-select { background: #fff; border-color: #ccc; color: #111; } body.fifa-light-theme .form-control:focus, body.fifa-light-theme .form-select:focus { background: #fff; border-color: var(--fifa-blue); color: #111; } body.fifa-light-theme label { color: #444; } body.fifa-light-theme .btn-fifa-outline { border-color: #111; color: #111; } body.fifa-light-theme .btn-fifa-outline:hover { background: #111; color: #fff; } body.fifa-light-theme .date-pill { background: #fff; border-color: #ccc; color: #555; } body.fifa-light-theme .date-pill:hover { background: #f5f5f5; color: #111; } body.fifa-light-theme .date-pill.active { border-color: var(--fifa-orange); background: rgba(232, 90, 36, 0.1); color: #111; } body.fifa-light-theme .price-banner { background: rgba(232, 90, 36, 0.12); color: #111; } body.fifa-light-theme .accordion-item { background: #fff !important; border-color: #e0e0e0 !important; } body.fifa-light-theme .accordion-button { background: #fff !important; color: #111 !important; box-shadow: none !important; } body.fifa-light-theme .accordion-button:not(.collapsed) { background: #f8f8f8 !important; color: #111 !important; } body.fifa-light-theme .accordion-body { background: #fff; color: #555; } body.fifa-light-theme .payment-strip { background: #fff; border-color: #e0e0e0; color: #555; } body.fifa-light-theme .fifa-action-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } body.fifa-light-theme main > section.container { max-width: 1440px; } body.fifa-light-theme .fifa-subpage-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 2px; padding: 1.5rem; height: 100%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); transition: box-shadow 0.2s ease, transform 0.15s ease; } body.fifa-light-theme .fifa-subpage-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } body.fifa-light-theme .fifa-subpage-card h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.65rem; } body.fifa-light-theme .fifa-subpage-card p { color: #555; font-size: 0.92rem; margin: 0; line-height: 1.5; } body.fifa-light-theme .team-entry:hover { background: rgba(0, 0, 0, 0.03); } body.fifa-light-theme .score-badge { background: #f0f0f0; color: #111; border-color: #ddd; } /* --------------------------------------------------------------------- Forms --------------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--fifa-ink-soft); border: 1px solid var(--fifa-line); color: var(--fifa-white); } .form-control:focus, .form-select:focus { background-color: var(--fifa-ink-soft); border-color: var(--fifa-cobalt); color: var(--fifa-white); box-shadow: 0 0 0 0.2rem rgba(30, 63, 224, 0.25); } .form-control::placeholder { color: var(--fifa-slate); } label { color: var(--fifa-slate); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; } /* --------------------------------------------------------------------- Badge for payment trust strip --------------------------------------------------------------------- */ .payment-strip { background: var(--fifa-ink-soft); border: 1px solid var(--fifa-line); border-radius: 10px; padding: 0.75rem 1.25rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--fifa-slate); }