/* * MARTIN CASINO - Design System * 1920s Berlin Art Deco aesthetic * Dark midnight blue, electric sapphire blue, burnt orange * Fonts: Cinzel (display) + Manrope (body) */ /* ============================================ DESIGN TOKENS ============================================ */ :root { /* Dark theme (permanent - no light mode switcher) */ --background: #070b14; --background-alt: #0c1322; --foreground: #faf8f1; --foreground-muted: #b8c1d4; --card: #0f172a; --card-hover: #16213a; --card-foreground: #faf8f1; --popover: #11151c; --popover-foreground: #faf8f1; --primary: #2563eb; --primary-hover: #3b82f6; --primary-foreground: #ffffff; --secondary: #1e293b; --secondary-foreground: #faf8f1; --muted: #1a2540; --muted-foreground: #9ba8c4; --accent: #f59e0b; --accent-hover: #fbbf24; --accent-foreground: #070b14; --border: #2a3a5c; --border-light: #3a4d72; --ring: #2563eb; /* Typography */ --font-display: "Cinzel", Georgia, serif; --font-body: "Manrope", system-ui, sans-serif; /* Spacing */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 56px; --space-2xl: 96px; /* Radii */ --radius: 4px; --radius-lg: 8px; /* Shadows */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 24px rgba(245, 158, 11, 0.15); /* Container */ --container-max: 1200px; } /* Dark class identical to :root (no theme switch, but .dark present on ) */ .dark { --background: #070b14; --background-alt: #0c1322; --foreground: #faf8f1; --foreground-muted: #b8c1d4; --card: #0f172a; --card-hover: #16213a; --card-foreground: #faf8f1; --popover: #11151c; --popover-foreground: #faf8f1; --primary: #2563eb; --primary-hover: #3b82f6; --primary-foreground: #ffffff; --secondary: #1e293b; --secondary-foreground: #faf8f1; --muted: #1a2540; --muted-foreground: #9ba8c4; --accent: #f59e0b; --accent-hover: #fbbf24; --accent-foreground: #070b14; --border: #2a3a5c; --border-light: #3a4d72; --ring: #2563eb; } /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--foreground); background-color: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video, iframe, embed, object, svg { max-width: 100%; height: auto; } p, li, td, th { overflow-wrap: break-word; } a { color: var(--primary-hover); text-decoration: none; transition: color 200ms ease-out; } a:hover { color: var(--accent-hover); } p a, li a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } p a:hover, li a:hover { color: var(--accent); text-decoration-thickness: 2px; } section { overflow: clip; } /* ============================================ TYPOGRAPHY SYSTEM Cinzel for display headings, Manrope for body ============================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--foreground); } h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-md); } h2 { font-size: clamp(24px, 4vw, 36px); margin-bottom: var(--space-sm); } h3 { font-size: clamp(20px, 3vw, 26px); margin-bottom: var(--space-sm); } p { margin-bottom: var(--space-sm); } .body-content p { margin-bottom: 28px; } .body-content a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; } .body-content a:hover { color: var(--primary-hover); } /* ============================================ LAYOUT UTILITIES ============================================ */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); } .section { padding: var(--space-xl) 0; } .section-lg { padding: var(--space-2xl) 0; } /* ============================================ BUTTONS Art Deco pill with orange / blue / outline variants ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 16px; font-weight: 600; padding: 12px 28px; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all 200ms ease-out; min-height: 44px; text-decoration: none; white-space: nowrap; } .btn-accent { background-color: var(--accent); color: var(--accent-foreground); border-color: var(--accent); } .btn-accent:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-foreground); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); } .btn-primary { background-color: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); } .btn-outline { background-color: transparent; color: var(--foreground); border-color: var(--border-light); } .btn-outline:hover { background-color: var(--secondary); border-color: var(--accent); color: var(--accent-hover); } .btn-lg { padding: 16px 40px; font-size: 18px; min-height: 52px; } /* ============================================ HEADER Sticky, dark, with logo + nav + CTA buttons ============================================ */ .site-header { position: sticky; top: 0; z-index: 1000; background-color: var(--background); border-bottom: 1px solid var(--border); } @media (min-width: 1024px) { .site-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } .header-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); display: flex; align-items: center; justify-content: space-between; height: 72px; } .site-brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; flex-shrink: 0; } .logo { width: 48px; height: 48px; border-radius: var(--radius); object-fit: contain; } .brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--foreground); letter-spacing: 0.02em; } .primary-nav { display: none; align-items: center; gap: var(--space-lg); } .nav-list { display: flex; align-items: center; gap: var(--space-lg); list-style: none; } .nav-list a { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--foreground-muted); padding: 8px 0; position: relative; transition: color 200ms ease-out; } .nav-list a:hover, .nav-list a:focus { color: var(--accent-hover); } .nav-list a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: width 200ms ease-out; } .nav-list a:hover::after { width: 100%; } .header-cta-group { display: none; align-items: center; gap: var(--space-sm); } /* ============================================ MOBILE MENU TOGGLE Hamburger → X on open ============================================ */ .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; gap: 5px; z-index: 1001; } .mobile-menu-toggle span { display: block; width: 26px; height: 3px; background-color: var(--foreground); border-radius: 2px; transition: all 300ms ease-out; } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile drawer */ @media (max-width: 1023px) { .primary-nav { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100vh - 72px); height: calc(100dvh - 72px); max-height: calc(100vh - 72px); background-color: var(--background); flex-direction: column; align-items: stretch; padding: var(--space-lg) var(--space-md); overflow-y: auto; z-index: 999; transform: translateX(100%); visibility: hidden; transition: transform 300ms ease-out, visibility 0s linear 300ms; display: flex; gap: var(--space-lg); } .primary-nav.is-open { transform: translateX(0); visibility: visible; transition: transform 300ms ease-out, visibility 0s linear 0s; } .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .nav-list li { border-bottom: 1px solid var(--border); } .nav-list a { display: flex; align-items: center; min-height: 56px; padding: var(--space-sm) 0; font-size: 18px; } .nav-list a::after { display: none; } .header-cta-group { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; } .header-cta-group .btn { width: 100%; } .mobile-menu-toggle { display: flex; } } @media (min-width: 1024px) { .primary-nav { display: flex; } .header-cta-group { display: flex; } .mobile-menu-toggle { display: none; } } /* ============================================ FOOTER Four columns: brand, links, payments, legal ============================================ */ .site-footer { background-color: var(--background-alt); border-top: 1px solid var(--border); padding: var(--space-2xl) var(--space-md) var(--space-xl); } .footer-inner { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 768px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-inner { grid-template-columns: 2fr 1fr 1.5fr 1fr; } } .footer-col { min-width: 0; } .footer-logo { width: 40px; height: 40px; margin-bottom: var(--space-sm); } .footer-brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--foreground); margin-bottom: var(--space-sm); } .footer-license, .footer-18 { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; margin-bottom: var(--space-sm); } .footer-heading { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--foreground); margin-bottom: var(--space-sm); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: var(--space-xs); } .footer-col ul a { font-size: 14px; color: var(--foreground-muted); } .footer-col ul a:hover { color: var(--accent-hover); } .payment-icons { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .payment-badge { display: inline-block; padding: 4px 10px; font-size: 12px; color: var(--foreground-muted); background-color: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius); } .footer-copy { font-size: 12px; color: var(--muted-foreground); margin-top: var(--space-md); } /* ============================================ HERO SECTION Full-bleed dark with macaw mascot ============================================ */ .hero { position: relative; padding: var(--space-2xl) var(--space-md); overflow: hidden; background-color: var(--background); } .hero-inner { max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); } @media (min-width: 1024px) { .hero-inner { flex-direction: row; align-items: center; } } .hero-content { flex: 1; min-width: 0; text-align: center; } @media (min-width: 1024px) { .hero-content { text-align: left; } } .hero-content h1 { margin-bottom: var(--space-md); } .hero-content p { font-size: 18px; color: var(--foreground-muted); max-width: 600px; margin: 0 auto var(--space-lg); } @media (min-width: 1024px) { .hero-content p { margin-left: 0; } } .hero-actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; } @media (min-width: 640px) { .hero-actions { flex-direction: row; } } @media (min-width: 1024px) { .hero-actions { justify-content: flex-start; } } .hero-image { flex: 1; min-width: 0; text-align: center; } .hero-image img { max-width: 100%; border-radius: var(--radius-lg); } /* Art Deco sunburst decoration */ .hero-deco { position: absolute; top: 50%; right: -100px; transform: translateY(-50%); width: 600px; height: 600px; background: conic-gradient( from 0deg, transparent 0deg, rgba(37, 99, 235, 0.06) 10deg, transparent 20deg, rgba(245, 158, 11, 0.04) 30deg, transparent 40deg, rgba(37, 99, 235, 0.06) 50deg, transparent 60deg, rgba(245, 158, 11, 0.04) 70deg, transparent 80deg, rgba(37, 99, 235, 0.06) 90deg, transparent 100deg, rgba(245, 158, 11, 0.04) 110deg, transparent 120deg, rgba(37, 99, 235, 0.06) 130deg, transparent 140deg, rgba(245, 158, 11, 0.04) 150deg, transparent 160deg, rgba(37, 99, 235, 0.06) 170deg, transparent 180deg, rgba(245, 158, 11, 0.04) 190deg, transparent 200deg, rgba(37, 99, 235, 0.06) 210deg, transparent 220deg, rgba(245, 158, 11, 0.04) 230deg, transparent 240deg, rgba(37, 99, 235, 0.06) 250deg, transparent 260deg, rgba(245, 158, 11, 0.04) 270deg, transparent 280deg, rgba(37, 99, 235, 0.06) 290deg, transparent 300deg, rgba(245, 158, 11, 0.04) 310deg, transparent 320deg, rgba(37, 99, 235, 0.06) 330deg, transparent 340deg, rgba(245, 158, 11, 0.04) 350deg, transparent 360deg ); border-radius: 50%; pointer-events: none; z-index: 0; } /* ============================================ STAT BLOCK COMPONENT Horizontal row of highlighted numbers ============================================ */ .stat-block { display: grid; grid-template-columns: 1fr; gap: var(--space-md); background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-lg); } @media (min-width: 640px) { .stat-block { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .stat-block { grid-template-columns: repeat(4, 1fr); } } .stat-unit { text-align: center; padding: var(--space-sm); border-right: 1px solid var(--border); transition: transform 200ms ease-out, box-shadow 200ms ease-out; } .stat-unit:last-child { border-right: none; } @media (max-width: 639px) { .stat-unit { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: var(--space-md); } .stat-unit:last-child { border-bottom: none; } } .stat-unit:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } .stat-number { display: block; font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--primary-hover); line-height: 1; margin-bottom: var(--space-xs); } @media (min-width: 1024px) { .stat-number { font-size: 42px; } } .stat-unit.orange .stat-number { color: var(--accent); } .stat-label { display: block; font-size: 14px; color: var(--foreground-muted); line-height: 1.4; } .stat-source { display: block; font-size: 12px; color: var(--muted-foreground); margin-top: 4px; } /* ============================================ GAME CARD GRID COMPONENT Responsive cards for slots / providers ============================================ */ .game-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 640px) { .game-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .game-card-grid { grid-template-columns: repeat(3, 1fr); } } .game-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); transition: transform 300ms ease-out, box-shadow 300ms ease-out, border-color 300ms ease-out; min-width: 0; } .game-card:hover { transform: scale(1.02); border-color: var(--accent); box-shadow: 0 4px 30px rgba(245, 158, 11, 0.12); } .game-card-image { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-sm); aspect-ratio: 16 / 9; } .game-card-image img { width: 100%; height: 100%; object-fit: cover; } .game-card-badge { position: absolute; top: var(--space-xs); right: var(--space-xs); background-color: var(--accent); color: var(--accent-foreground); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; } .game-card-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--foreground); margin-bottom: 4px; } .game-card-subtitle { font-size: 14px; color: var(--foreground-muted); } /* ============================================ CTA BANNER COMPONENT Full-width conversion section with sunburst ============================================ */ .cta-banner { position: relative; background-color: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-xl) var(--space-md); overflow: hidden; text-align: center; } @media (min-width: 1024px) { .cta-banner { padding: var(--space-2xl) var(--space-md); } } .cta-banner-sunburst { position: absolute; top: 50%; right: -200px; transform: translateY(-50%); width: 700px; height: 700px; background: conic-gradient( from 0deg, transparent 0deg, rgba(245, 158, 11, 0.05) 15deg, transparent 30deg, rgba(37, 99, 235, 0.06) 45deg, transparent 60deg, rgba(245, 158, 11, 0.05) 75deg, transparent 90deg, rgba(37, 99, 235, 0.06) 105deg, transparent 120deg, rgba(245, 158, 11, 0.05) 135deg, transparent 150deg, rgba(37, 99, 235, 0.06) 165deg, transparent 180deg, rgba(245, 158, 11, 0.05) 195deg, transparent 210deg, rgba(37, 99, 235, 0.06) 225deg, transparent 240deg, rgba(245, 158, 11, 0.05) 255deg, transparent 270deg, rgba(37, 99, 235, 0.06) 285deg, transparent 300deg, rgba(245, 158, 11, 0.05) 315deg, transparent 330deg, rgba(37, 99, 235, 0.06) 345deg, transparent 360deg ); border-radius: 50%; pointer-events: none; z-index: 0; } .cta-banner-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; } .cta-banner-heading { font-family: var(--font-display); font-size: clamp(24px, 4vw, 36px); font-weight: 700; color: var(--foreground); margin-bottom: var(--space-sm); } .cta-banner-subtext { font-size: 17px; color: var(--foreground-muted); margin-bottom: var(--space-lg); } .cta-banner-microcopy { font-size: 14px; color: var(--muted-foreground); margin-top: var(--space-sm); } /* ============================================ TRUST BADGE ROW COMPONENT Horizontal strip of certifications ============================================ */ .trust-badge-row { background-color: var(--background-alt); padding: var(--space-xl) var(--space-md); } .trust-badge-border { height: 2px; background: linear-gradient(90deg, transparent, var(--border-light), transparent); margin-bottom: var(--space-lg); } .trust-badge-border.bottom { margin-top: var(--space-lg); margin-bottom: 0; } .trust-badge-items { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-lg); max-width: var(--container-max); margin: 0 auto; opacity: 0.8; transition: opacity 200ms ease-out; } .trust-badge-items:hover { opacity: 1; } .trust-badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center; } .trust-badge-icon { font-size: 28px; line-height: 1; } .trust-badge-label { font-size: 13px; color: var(--foreground-muted); font-weight: 500; } /* ============================================ FAQ ACCORDION COMPONENT Expandable Q&A rows with orange accent ============================================ */ .faq-accordion { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 800px; margin: 0 auto; } .faq-row { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); border-left: 4px solid transparent; overflow: hidden; transition: border-color 300ms ease-out; } .faq-row[open] { border-left-color: var(--accent); } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); cursor: pointer; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--foreground); list-style: none; user-select: none; } @media (min-width: 1024px) { .faq-question { font-size: 20px; padding: var(--space-lg) 32px; } } .faq-question::-webkit-details-marker { display: none; } .faq-question-text { flex: 1; min-width: 0; } .faq-toggle-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; } .faq-toggle-icon::before, .faq-toggle-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background-color: var(--accent); border-radius: 2px; transition: transform 300ms ease-out, opacity 300ms ease-out; } .faq-toggle-icon::before { width: 16px; height: 3px; transform: translate(-50%, -50%); } .faq-toggle-icon::after { width: 3px; height: 16px; transform: translate(-50%, -50%); } .faq-row[open] .faq-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-answer { padding: 0 var(--space-lg) var(--space-lg); position: relative; } @media (min-width: 1024px) { .faq-answer { padding: 0 32px var(--space-lg); } } .faq-answer p { font-size: 17px; line-height: 1.6; color: var(--foreground-muted); } /* ============================================ GATE OVERLAY Radial wipe animation for spin.html navigation ============================================ */ .gate-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--accent); z-index: 9999; clip-path: circle(0% at 50% 50%); transition: clip-path 400ms ease-in; pointer-events: none; } .gate-overlay.active { clip-path: circle(150% at 50% 50%); } /* ============================================ SCROLL ANIMATION IntersectionObserver reveals ============================================ */ .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 500ms ease-out, transform 500ms ease-out; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Staggered children */ .animate-on-scroll:nth-child(2) { transition-delay: 60ms; } .animate-on-scroll:nth-child(3) { transition-delay: 120ms; } .animate-on-scroll:nth-child(4) { transition-delay: 180ms; } .animate-on-scroll:nth-child(5) { transition-delay: 240ms; } .animate-on-scroll:nth-child(6) { transition-delay: 300ms; } /* ============================================ CONTENT PATTERNS Reusable engagement & CRO elements ============================================ */ /* TL;DR / Summary box */ .tldr-box { background-color: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: var(--space-lg); margin: var(--space-lg) 0; } .tldr-box h3 { font-size: 18px; margin-bottom: var(--space-sm); } /* Callout / highlight box */ .callout { background-color: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; position: relative; } .callout::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--primary); border-radius: var(--radius) 0 0 var(--radius); } .callout.callout-warning::before { background-color: var(--accent); } /* Pull quote */ .pull-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 3vw, 28px); color: var(--foreground); border-left: 4px solid var(--accent); padding-left: var(--space-lg); margin: var(--space-lg) 0; line-height: 1.4; } .pull-quote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 14px; color: var(--muted-foreground); margin-top: var(--space-sm); } /* Comparison table */ .table-wrapper { min-width: 0; max-width: 100%; overflow-x: auto; margin: var(--space-lg) 0; } .table-wrapper:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .comparison-table { width: 100%; border-collapse: collapse; background-color: var(--card); border-radius: var(--radius); overflow: hidden; font-size: 15px; } .comparison-table thead { background-color: var(--secondary); } .comparison-table th, .comparison-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--border); } .comparison-table th { font-family: var(--font-display); font-weight: 600; color: var(--foreground); } .comparison-table td { color: var(--foreground-muted); } .comparison-table tr:last-child td { border-bottom: none; } .comparison-table .col-highlight { background-color: rgba(245, 158, 11, 0.06); } /* Social proof / testimonial cards */ .testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: var(--space-lg) 0; } @media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-lg); } .testimonial-card .rating { color: var(--accent); font-size: 18px; margin-bottom: var(--space-sm); } .testimonial-card p { color: var(--foreground-muted); font-size: 15px; line-height: 1.6; margin-bottom: var(--space-sm); } .testimonial-card .author { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--foreground); } /* Provider grid */ .provider-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } @media (min-width: 768px) { .provider-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .provider-grid { grid-template-columns: repeat(4, 1fr); } } .provider-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); text-align: center; transition: border-color 200ms ease-out; } .provider-card:hover { border-color: var(--accent); } .provider-card img { height: 48px; width: auto; margin: 0 auto var(--space-sm); object-fit: contain; } .provider-card p { font-size: 14px; color: var(--foreground-muted); } /* VIP tier cards */ .vip-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 768px) { .vip-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .vip-grid { grid-template-columns: repeat(4, 1fr); } } .vip-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-lg); text-align: center; transition: transform 200ms ease-out, border-color 200ms ease-out; } .vip-card:hover { transform: translateY(-2px); border-color: var(--accent); } .vip-card.featured { border-color: var(--accent); box-shadow: var(--shadow-glow); } .vip-card h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: var(--space-sm); } .vip-tier-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent-foreground); background-color: var(--accent); padding: 4px 12px; border-radius: 99px; margin-bottom: var(--space-sm); } /* Promo code box */ .promo-box { background-color: var(--secondary); border: 2px dashed var(--accent); border-radius: var(--radius); padding: var(--space-lg); text-align: center; margin: var(--space-lg) 0; } .promo-box .promo-code { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; } /* Two-column layout */ .two-col { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 768px) { .two-col { grid-template-columns: repeat(2, 1fr); } } /* Mascot image */ .mascot-img { max-width: 100%; border-radius: var(--radius-lg); } /* ============================================ SITEMAP PAGE ============================================ */ .sitemap-hero { position: relative; overflow: hidden; } .sitemap-intro { position: relative; z-index: 1; text-align: center; } .sitemap-intro h1 { margin-bottom: var(--space-md); } .sitemap-intro p { color: var(--foreground-muted); max-width: 640px; margin: 0 auto; } .sitemap-list { list-style: none; max-width: 760px; margin: var(--space-lg) auto 0; } .sitemap-item { background-color: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-sm); transition: border-color 200ms ease-out, box-shadow 200ms ease-out; } .sitemap-item:hover { border-left-color: var(--accent); box-shadow: var(--shadow-card); } .sitemap-link { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--primary-hover); margin-bottom: var(--space-xs); } a.sitemap-link:hover { color: var(--accent-hover); } .sitemap-desc { font-size: 15px; color: var(--foreground-muted); line-height: 1.6; margin: 0; } /* ============================================ ACCESSIBILITY ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-on-scroll { opacity: 1; transform: none; } } /* ============================================ PRINT ============================================ */ @media print { .site-header, .site-footer, .mobile-menu-toggle, .gate-overlay { display: none; } body { background: white; color: black; } }