/* ========================================================================== SydneyBauer — Main Stylesheet Production-quality CSS for premium dark social casino ========================================================================== */ /* -------------------------------------------------------------------------- 1. Google Fonts Import (fallback — load in for best performance) -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap'); /* -------------------------------------------------------------------------- 2. CSS Custom Properties -------------------------------------------------------------------------- */ :root { /* Colors */ --bg-dark: #080c12; --bg-medium: #0e1420; --bg-card: #131922; --bg-card-hover: #192030; --gold-primary: #d4941a; --gold-light: #f5c842; --gold-gradient: linear-gradient(135deg, #d4941a 0%, #f5c842 60%, #d4941a 100%); --teal: #00b896; --teal-dark: #008f74; --text: #e8eaf0; --text-muted: #7a8599; --text-dark: #3a4256; --border: rgba(212, 148, 26, 0.18); --border-light: rgba(232, 234, 240, 0.08); --glass-bg: rgba(8, 12, 18, 0.82); --shadow-gold: 0 0 24px rgba(212, 148, 26, 0.35); --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.55); --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.7); /* Typography */ --font-heading: 'Montserrat', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Helvetica Neue', sans-serif; /* Spacing */ --section-py: 96px; --section-py-sm: 60px; --container-max: 1280px; --container-px: 24px; --card-radius: 16px; --btn-radius: 10px; /* Transitions */ --transition: 0.25s ease; --transition-slow:0.4s ease; /* Nav */ --nav-height: 72px; --nav-height-sm: 60px; } /* -------------------------------------------------------------------------- 3. Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text); background-color: var(--bg-dark); min-width: 300px; overflow-x: hidden; } body.nav-open { overflow: hidden; } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--gold-light); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--gold-primary); } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--text); } p { color: var(--text-muted); } button { cursor: pointer; border: none; background: none; font-family: var(--font-body); } input, textarea, select { font-family: var(--font-body); font-size: 1rem; } ::selection { background: var(--gold-primary); color: var(--bg-dark); } :focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 3px; } /* -------------------------------------------------------------------------- 4. Utility Classes -------------------------------------------------------------------------- */ /* Container */ .container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-px); padding-right: var(--container-px); width: 100%; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: var(--btn-radius); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: all var(--transition); position: relative; overflow: hidden; text-decoration: none; } .btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.06); opacity: 0; transition: opacity var(--transition); } .btn:hover::after { opacity: 1; } .btn-primary { background: var(--gold-gradient); background-size: 200% auto; color: var(--bg-dark); box-shadow: 0 4px 18px rgba(212, 148, 26, 0.4); } .btn-primary:hover { background-position: right center; box-shadow: 0 6px 28px rgba(212, 148, 26, 0.6); transform: translateY(-2px); color: var(--bg-dark); } .btn-primary:active { transform: translateY(0); } .btn-outline { background: transparent; color: var(--gold-light); border: 2px solid var(--gold-primary); box-shadow: inset 0 0 0 0 var(--gold-primary); } .btn-outline:hover { background: rgba(212, 148, 26, 0.12); border-color: var(--gold-light); color: var(--gold-light); box-shadow: var(--shadow-gold); transform: translateY(-2px); } .btn-teal { background: var(--teal); color: #fff; box-shadow: 0 4px 18px rgba(0, 184, 150, 0.35); } .btn-teal:hover { background: var(--teal-dark); box-shadow: 0 6px 28px rgba(0, 184, 150, 0.5); transform: translateY(-2px); color: #fff; } .btn-sm { padding: 9px 20px; font-size: 0.8rem; } .btn-lg { padding: 17px 38px; font-size: 1rem; } /* Section Title */ .section-title { font-family: var(--font-heading); font-size: clamp(1.75rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.15; color: var(--text); margin-bottom: 16px; } .section-title span, .section-title .highlight { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 560px; margin-bottom: 52px; } .section-header { text-align: center; margin-bottom: 60px; } .section-header .section-subtitle { margin-left: auto; margin-right: auto; margin-bottom: 0; } /* Badge */ .badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .badge-gold { background: rgba(212, 148, 26, 0.18); color: var(--gold-light); border: 1px solid rgba(212, 148, 26, 0.35); } .badge-teal { background: rgba(0, 184, 150, 0.15); color: var(--teal); border: 1px solid rgba(0, 184, 150, 0.3); } .badge-rtp { background: rgba(0, 184, 150, 0.12); color: var(--teal); border: 1px solid rgba(0, 184, 150, 0.28); font-size: 0.68rem; padding: 3px 10px; } /* Divider */ .divider { width: 60px; height: 3px; background: var(--gold-gradient); border-radius: 2px; margin: 0 auto 24px; } /* Text utilities */ .text-gold { color: var(--gold-primary); } .text-teal { color: var(--teal); } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .fw-800 { font-weight: 800; } /* Section spacing */ .section { padding: var(--section-py) 0; } .section--alt { background-color: var(--bg-medium); } /* Reveal animation hook */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* -------------------------------------------------------------------------- 5. Animations / Keyframes -------------------------------------------------------------------------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 12px rgba(212, 148, 26, 0.3); } 50% { box-shadow: 0 0 36px rgba(212, 148, 26, 0.7), 0 0 60px rgba(212, 148, 26, 0.2); } } @keyframes starTwinkle { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- 6. Navigation -------------------------------------------------------------------------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-height); background: var(--glass-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border-light); transition: height var(--transition), background var(--transition), box-shadow var(--transition); } .site-nav.scrolled { height: var(--nav-height-sm); background: rgba(8, 12, 18, 0.96); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; } /* Logo */ .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .nav-logo__icon { width: 38px; height: 38px; background: var(--gold-gradient); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; animation: pulse-glow 3s infinite; transition: transform var(--transition); } .nav-logo:hover .nav-logo__icon { transform: rotate(-8deg) scale(1.05); } .nav-logo__text { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .nav-logo__text span { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Nav links */ .nav-links { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; } .nav-links a { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); text-decoration: none; padding: 8px 14px; border-radius: 8px; transition: color var(--transition), background var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--gold-primary); border-radius: 2px; transition: width var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,0.05); } .nav-links a:hover::after, .nav-links a.active::after { width: 60%; } /* Nav CTA */ .nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Burger */ .nav-burger { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; padding: 0; background: none; border: none; cursor: pointer; z-index: 1010; } .nav-burger span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition), width var(--transition); transform-origin: center; } /* Mobile Nav Overlay */ .nav-mobile { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; background: rgba(8, 12, 18, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 24px var(--container-px) 32px; border-bottom: 1px solid var(--border-light); z-index: 999; flex-direction: column; gap: 6px; animation: slideDown 0.25s ease forwards; } .nav-mobile a { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--text-muted); padding: 14px 16px; border-radius: 10px; border-bottom: 1px solid var(--border-light); transition: color var(--transition), background var(--transition); display: block; } .nav-mobile a:hover, .nav-mobile a.active { color: var(--gold-light); background: rgba(212, 148, 26, 0.08); } .nav-mobile a:last-child { border-bottom: none; } .nav-mobile__cta { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } /* Nav open state */ .nav-open .nav-mobile { display: flex; } .nav-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-open .nav-burger span:nth-child(2) { opacity: 0; width: 0; } .nav-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* -------------------------------------------------------------------------- 7. Hero Section -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--bg-dark); padding-top: var(--nav-height); } /* Dark overlay */ .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(8, 12, 18, 0.92) 0%, rgba(14, 20, 32, 0.75) 50%, rgba(8, 12, 18, 0.88) 100% ); z-index: 1; } /* Star / particle background */ .hero__stars { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__stars::before, .hero__stars::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 15%, rgba(212,148,26,0.8) 0%, transparent 100%), radial-gradient(1px 1px at 25% 40%, rgba(245,200,66,0.6) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 40% 8%, rgba(212,148,26,0.7) 0%, transparent 100%), radial-gradient(1px 1px at 55% 65%, rgba(0,184,150,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 70% 22%, rgba(245,200,66,0.6) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 82% 50%, rgba(212,148,26,0.7) 0%, transparent 100%), radial-gradient(1px 1px at 92% 80%, rgba(0,184,150,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 15% 70%, rgba(245,200,66,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 35% 90%, rgba(212,148,26,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 60% 35%, rgba(0,184,150,0.4) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 75% 75%, rgba(245,200,66,0.6) 0%, transparent 100%), radial-gradient(1px 1px at 88% 15%, rgba(212,148,26,0.7) 0%, transparent 100%), radial-gradient(1px 1px at 5% 90%, rgba(245,200,66,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 48% 52%, rgba(212,148,26,0.5) 0%, transparent 100%), radial-gradient(2px 2px at 20% 28%, rgba(245,200,66,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 63% 88%, rgba(0,184,150,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 30% 55%, rgba(212,148,26,0.3) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 95% 42%, rgba(245,200,66,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 44% 76%, rgba(212,148,26,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 8% 48%, rgba(0,184,150,0.3) 0%, transparent 100%); } .hero__stars::before { animation: starTwinkle 4s ease-in-out infinite; } .hero__stars::after { animation: starTwinkle 6s ease-in-out infinite 2s; opacity: 0.6; transform: scale(1.1) translate(10px, -10px); } /* Hero BG image / gradient */ .hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(212, 148, 26, 0.07) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 20% 70%, rgba(0, 184, 150, 0.05) 0%, transparent 60%), var(--bg-dark); z-index: 0; } .hero__content { position: relative; z-index: 2; width: 100%; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .hero__text { animation: fadeInUp 0.8s ease both; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; } .hero__headline { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; line-height: 1.08; margin-bottom: 20px; color: var(--text); } .hero__headline .gold-line { display: block; background: var(--gold-gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 4s linear infinite; } .hero__subheading { font-size: 1.1rem; color: var(--text-muted); max-width: 480px; margin-bottom: 36px; line-height: 1.7; } .hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero__stats { display: flex; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-light); } .hero__stat-value { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: var(--gold-light); display: block; } .hero__stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* Hero Visual / Floating Card */ .hero__visual { display: flex; justify-content: center; align-items: center; animation: fadeInUp 0.9s ease 0.2s both; } .hero__card-stack { position: relative; width: 320px; height: 420px; } .hero__card-float { position: absolute; border-radius: var(--card-radius); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); } .hero__card-float:nth-child(1) { width: 240px; height: 320px; top: 20px; left: 0; transform: rotate(-8deg); animation: float 6s ease-in-out infinite; background: linear-gradient(145deg, #1a2234, #131922); } .hero__card-float:nth-child(2) { width: 240px; height: 320px; top: 10px; right: 0; transform: rotate(5deg); animation: float 7s ease-in-out infinite 1s; background: linear-gradient(145deg, #192030, #0e1420); } .hero__card-float:nth-child(3) { width: 260px; height: 340px; top: 40px; left: 50%; transform: translateX(-50%); z-index: 2; animation: float 5.5s ease-in-out infinite 0.5s; background: linear-gradient(145deg, #1e2840, #131922); border-color: rgba(212, 148, 26, 0.4); box-shadow: var(--shadow-gold), var(--shadow-card); } /* -------------------------------------------------------------------------- 8. Games Grid -------------------------------------------------------------------------- */ .games-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .game-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--card-radius); overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); position: relative; cursor: pointer; } .game-card:hover { transform: translateY(-8px); border-color: var(--gold-primary); box-shadow: var(--shadow-gold), var(--shadow-card); } .game-card__thumb { position: relative; overflow: hidden; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--bg-medium) 0%, #1a2234 100%); } .game-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .game-card:hover .game-card__thumb img { transform: scale(1.08); } .game-card__thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,12,18,0.7) 0%, transparent 60%); opacity: 0; transition: opacity var(--transition); display: flex; align-items: center; justify-content: center; } .game-card:hover .game-card__thumb-overlay { opacity: 1; } .game-card__play-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--gold-gradient); display: flex; align-items: center; justify-content: center; transform: scale(0.7); transition: transform var(--transition); box-shadow: 0 0 30px rgba(212,148,26,0.5); } .game-card:hover .game-card__play-icon { transform: scale(1); } .game-card__play-icon svg { width: 22px; height: 22px; fill: var(--bg-dark); margin-left: 3px; } .game-card__body { padding: 16px; } .game-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .game-card__name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--text); } .game-card__provider { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 12px; } .game-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .game-card__hot { position: absolute; top: 12px; left: 12px; background: linear-gradient(135deg, #e53935, #ff6b35); color: #fff; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 10px rgba(229, 57, 53, 0.4); } .game-card__new { position: absolute; top: 12px; left: 12px; background: var(--teal); color: #fff; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 184, 150, 0.4); } /* -------------------------------------------------------------------------- 9. Features Section -------------------------------------------------------------------------- */ .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .feature-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--card-radius); padding: 32px 24px; text-align: center; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold-gradient); transform: scaleX(0); transition: transform var(--transition); } .feature-card:hover { transform: translateY(-6px); border-color: rgba(212,148,26,0.3); box-shadow: var(--shadow-card); } .feature-card:hover::before { transform: scaleX(1); } .feature-card__icon { width: 64px; height: 64px; border-radius: 16px; background: rgba(212, 148, 26, 0.1); border: 1px solid rgba(212, 148, 26, 0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.75rem; transition: transform var(--transition), background var(--transition); } .feature-card:hover .feature-card__icon { transform: scale(1.1) rotate(-5deg); background: rgba(212, 148, 26, 0.18); } .feature-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: 10px; color: var(--text); } .feature-card__text { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; } /* -------------------------------------------------------------------------- 10. How To Play -------------------------------------------------------------------------- */ .how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; } .how-steps::before { content: ''; position: absolute; top: 36px; left: calc(12.5% + 16px); right: calc(12.5% + 16px); height: 2px; background: linear-gradient(90deg, var(--gold-primary), var(--teal), var(--gold-primary)); opacity: 0.35; } .how-step { text-align: center; position: relative; } .how-step__number { width: 72px; height: 72px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--gold-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--gold-light); position: relative; z-index: 1; transition: transform var(--transition), background var(--transition), box-shadow var(--transition); } .how-step:hover .how-step__number { transform: scale(1.1); background: rgba(212, 148, 26, 0.12); box-shadow: var(--shadow-gold); } .how-step__title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; color: var(--text); } .how-step__text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; } /* -------------------------------------------------------------------------- 11. Testimonials -------------------------------------------------------------------------- */ .testimonials-track { display: flex; gap: 20px; overflow-x: auto; padding: 8px 4px 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--gold-primary) var(--bg-medium); -webkit-overflow-scrolling: touch; } .testimonials-track::-webkit-scrollbar { height: 5px; } .testimonials-track::-webkit-scrollbar-track { background: var(--bg-medium); border-radius: 999px; } .testimonials-track::-webkit-scrollbar-thumb { background: var(--gold-primary); border-radius: 999px; } .testimonial-card { flex: 0 0 300px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--card-radius); padding: 28px; scroll-snap-align: start; transition: border-color var(--transition), box-shadow var(--transition); } .testimonial-card:hover { border-color: rgba(212, 148, 26, 0.3); box-shadow: var(--shadow-card); } .testimonial-stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--gold-light); font-size: 0.9rem; } .testimonial-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 20px; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-gradient); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--bg-dark); flex-shrink: 0; } .testimonial-name { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--text); } .testimonial-location { font-size: 0.75rem; color: var(--text-muted); } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--bg-medium); border-top: 1px solid var(--border-light); } .footer-main { padding: 72px 0 48px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; gap: 40px; } .footer-brand p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; margin-top: 16px; max-width: 280px; } .footer-social { display: flex; gap: 10px; margin-top: 20px; } .footer-social a { width: 38px; height: 38px; border-radius: 9px; background: var(--bg-card); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.9rem; transition: all var(--transition); } .footer-social a:hover { background: rgba(212, 148, 26, 0.12); border-color: var(--gold-primary); color: var(--gold-light); transform: translateY(-3px); } .footer-col-title { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-primary); margin-bottom: 16px; } .footer-links { display: flex; flex-direction: column; gap: 9px; } .footer-links a { font-size: 0.88rem; color: var(--text-muted); text-decoration: none; transition: color var(--transition), padding-left var(--transition); display: inline-block; } .footer-links a:hover { color: var(--text); padding-left: 5px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: var(--text-muted); margin-bottom: 10px; } .footer-contact-icon { color: var(--gold-primary); flex-shrink: 0; margin-top: 2px; } /* Footer Bottom Bar */ .footer-bottom { border-top: 1px solid var(--border-light); padding: 24px 0; } .footer-bottom-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-copyright { font-size: 0.8rem; color: var(--text-muted); } .footer-copyright strong { color: var(--text); } .footer-disclaimer { font-size: 0.72rem; color: var(--text-dark); max-width: 640px; line-height: 1.6; text-align: right; } .footer-legal-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .footer-legal-links a { font-size: 0.78rem; color: var(--text-muted); transition: color var(--transition); } .footer-legal-links a:hover { color: var(--gold-light); } .footer-18plus { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--text-dark); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } /* -------------------------------------------------------------------------- 13. Cookie Consent Banner -------------------------------------------------------------------------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; background: rgba(19, 25, 34, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 20px var(--container-px); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5); transform: translateY(0); transition: transform 0.35s ease; } .cookie-banner.hidden { transform: translateY(110%); pointer-events: none; } .cookie-banner__inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cookie-banner__text { flex: 1; min-width: 200px; } .cookie-banner__title { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 4px; } .cookie-banner__desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; } .cookie-banner__desc a { color: var(--gold-light); text-decoration: underline; } .cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 14. About Page Hero -------------------------------------------------------------------------- */ .page-hero { padding: calc(var(--nav-height) + 64px) 0 80px; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212,148,26,0.07) 0%, transparent 60%), var(--bg-dark); text-align: center; border-bottom: 1px solid var(--border-light); } .page-hero__eyebrow { margin-bottom: 16px; } .page-hero__title { font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: 900; margin-bottom: 16px; } .page-hero__subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 560px; margin: 0 auto; line-height: 1.7; } /* -------------------------------------------------------------------------- 15. Contact Form -------------------------------------------------------------------------- */ .contact-form { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 20px; padding: 48px; } .form-group { margin-bottom: 20px; } .form-label { display: block; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .form-input, .form-textarea, .form-select { width: 100%; background: var(--bg-medium); border: 1px solid var(--border-light); border-radius: 10px; padding: 14px 16px; color: var(--text); font-size: 0.95rem; transition: border-color var(--transition), box-shadow var(--transition); appearance: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-dark); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--gold-primary); box-shadow: 0 0 0 3px rgba(212, 148, 26, 0.12); } .form-textarea { resize: vertical; min-height: 130px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-submit { width: 100%; margin-top: 8px; } /* -------------------------------------------------------------------------- 16. Policy / Prose Pages -------------------------------------------------------------------------- */ .prose-page { padding: calc(var(--nav-height) + 48px) 0 96px; } .prose-layout { max-width: 760px; margin: 0 auto; } .prose-layout h1 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); font-weight: 800; margin-bottom: 12px; } .prose-layout .prose-meta { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); } .prose-layout h2 { font-size: 1.35rem; font-weight: 700; margin: 40px 0 14px; color: var(--text); } .prose-layout h3 { font-size: 1.05rem; font-weight: 600; margin: 28px 0 10px; color: var(--gold-light); } .prose-layout p { margin-bottom: 16px; font-size: 0.95rem; line-height: 1.75; color: var(--text-muted); } .prose-layout ul, .prose-layout ol { margin: 0 0 16px 20px; } .prose-layout ul { list-style: disc; } .prose-layout ol { list-style: decimal; } .prose-layout li { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 6px; line-height: 1.65; } .prose-layout a { color: var(--gold-light); text-decoration: underline; } .prose-layout a:hover { color: var(--gold-primary); } .prose-layout blockquote { border-left: 3px solid var(--gold-primary); margin: 24px 0; padding: 16px 20px; background: rgba(212, 148, 26, 0.06); border-radius: 0 10px 10px 0; color: var(--text-muted); font-style: italic; } /* prose table */ .prose-layout table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 0.88rem; } .prose-layout th { background: rgba(212,148,26,0.10); color: var(--gold-light); font-family: var(--font-heading); font-weight: 700; text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--border); } .prose-layout td { padding: 9px 14px; border-bottom: 1px solid var(--border-light); color: var(--text-muted); vertical-align: top; } .prose-layout tr:last-child td { border-bottom: none; } /* prose TOC sidebar layout */ .prose-with-toc { display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: start; max-width: 1060px; margin: 0 auto; } .prose-toc { position: sticky; top: calc(var(--nav-height) + 24px); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 14px; padding: 22px 20px; order: 2; } .prose-toc__title { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-primary); margin-bottom: 14px; } .prose-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc-counter; } .prose-toc li { counter-increment: toc-counter; margin-bottom: 8px; } .prose-toc li::before { content: counter(toc-counter) ". "; color: var(--text-dark); font-size: 0.75rem; } .prose-toc a { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; transition: color var(--transition); } .prose-toc a:hover { color: var(--gold-light); } .prose-toc a.active { color: var(--gold-light); font-weight: 600; } .prose-layout-main { order: 1; } @media (max-width: 900px) { .prose-with-toc { grid-template-columns: 1fr; } .prose-toc { position: static; order: -1; } } /* -------------------------------------------------------------------------- 17. Promo / Banner Strip -------------------------------------------------------------------------- */ .promo-strip { background: var(--gold-gradient); background-size: 200% auto; animation: shimmer 6s linear infinite; padding: 14px 0; overflow: hidden; } .promo-strip__inner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .promo-strip__text { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--bg-dark); letter-spacing: 0.03em; } /* -------------------------------------------------------------------------- 18. Responsive — Tablet (max 1200px) -------------------------------------------------------------------------- */ @media (max-width: 1200px) { .games-grid { grid-template-columns: repeat(3, 1fr); } .features-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .footer-grid > .footer-brand { grid-column: 1 / -1; } .footer-grid > .footer-brand p { max-width: 100%; } .footer-grid > .footer-brand .footer-social { justify-content: flex-start; } .hero__inner { gap: 40px; } } /* -------------------------------------------------------------------------- 19. Responsive — Tablet Portrait (max 991px) — burger activates -------------------------------------------------------------------------- */ @media (max-width: 991px) { :root { --section-py: 72px; } /* Hide desktop nav, show burger */ .nav-links, .nav-cta { display: none; } .nav-burger { display: flex; } /* Hero */ .hero__inner { grid-template-columns: 1fr; gap: 56px; text-align: center; } .hero__subheading { margin-left: auto; margin-right: auto; } .hero__ctas { justify-content: center; } .hero__stats { justify-content: center; } .hero__visual { order: -1; } .hero__card-stack { width: 260px; height: 340px; } /* Games */ .games-grid { grid-template-columns: repeat(2, 1fr); } /* How to play */ .how-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; } .how-steps::before { display: none; } /* Footer */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-grid > .footer-brand { grid-column: 1 / -1; } .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 16px; } .footer-disclaimer { text-align: left; } /* Contact form */ .contact-form { padding: 32px 24px; } .form-row { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 20. Responsive — Mobile (max 767px) -------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --section-py: 56px; --container-px: 16px; } .section-header { margin-bottom: 40px; } /* Features */ .features-grid { grid-template-columns: 1fr; gap: 16px; } .feature-card { padding: 24px 20px; display: grid; grid-template-columns: 56px 1fr; gap: 16px; text-align: left; align-items: start; } .feature-card__icon { margin: 0; width: 56px; height: 56px; } /* Testimonials */ .testimonial-card { flex: 0 0 260px; padding: 20px; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-main { padding: 48px 0 32px; } /* Cookie */ .cookie-banner__inner { flex-direction: column; align-items: flex-start; } .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1; text-align: center; justify-content: center; } /* Promo strip */ .promo-strip__inner { flex-direction: column; gap: 8px; text-align: center; } } /* -------------------------------------------------------------------------- 21. Responsive — Small Mobile (max 480px) -------------------------------------------------------------------------- */ @media (max-width: 480px) { :root { --section-py: 48px; } .hero__card-stack { width: 200px; height: 260px; } .hero__card-float:nth-child(1), .hero__card-float:nth-child(2) { width: 170px; height: 230px; } .hero__card-float:nth-child(3) { width: 190px; height: 250px; } .hero__ctas { flex-direction: column; } .hero__ctas .btn { width: 100%; justify-content: center; } .btn-lg { padding: 15px 28px; font-size: 0.9rem; } .how-steps { grid-template-columns: 1fr; } .footer-legal-links { flex-direction: column; align-items: flex-start; gap: 10px; } .contact-form { padding: 24px 16px; } } /* -------------------------------------------------------------------------- 22. Responsive — Extra Small (max 360px) -------------------------------------------------------------------------- */ @media (max-width: 360px) { :root { --container-px: 12px; } body { font-size: 0.92rem; } .nav-logo__text { font-size: 1.05rem; } } /* -------------------------------------------------------------------------- 23. Reduced Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 24. Miscellaneous helpers -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .no-scroll { overflow: hidden; } .gold-text { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .teal-glow { text-shadow: 0 0 20px rgba(0, 184, 150, 0.5); } .gold-glow { text-shadow: 0 0 20px rgba(212, 148, 26, 0.5); } /* Scroll padding for fixed nav */ html { scroll-padding-top: calc(var(--nav-height) + 16px); } /* ===================================================================== FOOTER — full styles (shared across all pages) ===================================================================== */ .site-footer { padding-top: 72px; padding-bottom: 0; } .footer-grid { padding-bottom: 48px; } .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text); margin-bottom: 16px; } .footer-col h4 { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-primary); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 9px; list-style: none; padding: 0; margin: 0; } .footer-col ul a { font-size: 0.88rem; color: var(--text-muted); text-decoration: none; transition: color var(--transition), padding-left var(--transition); display: inline-block; } .footer-col ul a:hover { color: var(--text); padding-left: 5px; } .footer-col address { font-style: normal; } .footer-col address p { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 10px; } .footer-col address a { color: var(--gold-light); } .footer-socials { display: flex; gap: 10px; margin-top: 20px; } .footer-socials a { width: 38px; height: 38px; border-radius: 9px; background: var(--bg-card); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition); text-decoration: none; } .footer-socials a:hover { background: rgba(212,148,26,0.12); border-color: var(--gold-primary); color: var(--gold-light); transform: translateY(-3px); } .footer-socials svg { width: 18px; height: 18px; fill: currentColor; } .footer-bottom { border-top: 1px solid var(--border-light); padding: 24px 0; } .footer-disclaimer { font-size: 0.72rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; padding: 12px 16px; background: rgba(212,148,26,0.05); border: 1px solid rgba(212,148,26,0.12); border-radius: 8px; } .footer-bottom-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); } .footer-bottom-links a { color: var(--text-muted); transition: color var(--transition); text-decoration: none; } .footer-bottom-links a:hover { color: var(--gold-light); } /* ===================================================================== COOKIE BANNER (shared) ===================================================================== */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; background: rgba(19,25,34,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 20px var(--container-px); box-shadow: 0 -8px 40px rgba(0,0,0,0.5); transform: translateY(110%); transition: transform 0.35s ease; } .cookie-banner:not(.hidden) { transform: translateY(0); } .cookie-banner.hidden { transform: translateY(110%); pointer-events: none; } .cookie-content { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cookie-content p { flex: 1; min-width: 200px; font-size: 0.85rem; color: var(--text-muted); margin: 0; } .cookie-content a { color: var(--gold-light); text-decoration: underline; } .cookie-actions { display: flex; gap: 10px; flex-shrink: 0; } @media (max-width: 600px) { .cookie-content { flex-direction: column; align-items: flex-start; } .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; justify-content: center; } } /* ===================================================================== SHARED UTILITY ===================================================================== */ .gold { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gold-text { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Hero visual */ .hero__visual { position: relative; } .hero__img { width: 100%; max-width: 560px; height: auto; border-radius: 18px; box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,148,26,0.15); display: block; margin: 0 auto; object-fit: cover; } @media (max-width: 991px) { .hero__img { max-width: 100%; } } /* Games intro block */ .games-intro { max-width: 760px; margin: 0 auto; text-align: center; } .games-intro p { font-size: 1.05rem; color: var(--text-muted); line-height: 1.8; } .section--sm { padding-top: 40px; padding-bottom: 0; } /* ── Skip link (accessibility) ── */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 99999; background: var(--gold-primary); color: #000; font-weight: 700; font-size: 0.9rem; padding: 10px 20px; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; }