/* ============================================================ CRITICAL CSS — Inlined in for above-fold rendering Mobile-first design — NO SIDEBAR ============================================================ */ /* --- RESET --- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} body{min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} img,picture,video,canvas,svg{display:block;max-width:100%} input,button,textarea,select{font:inherit} a{text-decoration:none;color:inherit} ul,ol{list-style:none} h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;font-weight:700} p{overflow-wrap:break-word} button{cursor:pointer;border:none;background:none} /* --- CSS VARIABLES --- */ :root{ --bg-primary:#0d1117; --bg-secondary:#161b22; --bg-card:#1c2333; --bg-card-hover:#243044; --accent-green:#0f9b58; --accent-green-hover:#0d8a4d; --accent-gold:#f5a623; --accent-gold-hover:#e09515; --text-primary:#ffffff; --text-secondary:#a2abb4; --text-muted:#939da7; --border-color:#21262d; --font-primary:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif; --font-size-xs:0.75rem; --font-size-sm:0.875rem; --font-size-base:0.9375rem; --font-size-md:1rem; --font-size-lg:1.25rem; --font-size-xl:1.5rem; --font-size-2xl:2rem; --font-size-3xl:2.5rem; --line-height:1.5; --line-height-tight:1.2; --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-full:9999px; --header-height:60px; --transition-fast:150ms ease; --transition-base:250ms ease; --shadow-sm:0 1px 2px rgba(0,0,0,0.3); --shadow-md:0 4px 12px rgba(0,0,0,0.4); --shadow-lg:0 8px 24px rgba(0,0,0,0.5); } /* --- SKIP LINK --- */ .skip-link{ position:absolute; top:-100%; left:var(--space-md); z-index:999; padding:var(--space-sm) var(--space-md); background-color:var(--accent-green); color:var(--text-primary); font-weight:600; border-radius:var(--radius-md); text-decoration:none; font-size:var(--font-size-sm); } .skip-link:focus{ top:var(--space-sm); } /* --- FOCUS VISIBLE --- */ :focus-visible{ outline:2px solid var(--accent-green); outline-offset:2px; } button:focus-visible,a:focus-visible{ outline:2px solid var(--accent-green); outline-offset:2px; } /* --- BASE --- */ body{ font-family:var(--font-primary); font-size:var(--font-size-base); line-height:var(--line-height); color:var(--text-primary); background-color:var(--bg-primary); } /* --- HEADER (Mobile) --- */ .header{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 var(--space-sm); background-color:var(--bg-secondary); border-bottom:1px solid var(--border-color); gap:var(--space-xs); } .header__logo{ display:flex; align-items:center; height:20px; flex-shrink:0; } .header__logo img,.header__logo svg{ height:20px; width:auto; } .header__actions{ display:flex; align-items:center; gap:var(--space-xs); } /* --- BUTTONS --- */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:var(--space-xs) var(--space-sm); font-size:var(--font-size-xs); font-weight:600; border-radius:var(--radius-md); transition:background-color var(--transition-fast),transform var(--transition-fast); white-space:nowrap; } .btn--login,.btn--register{ padding:5px 10px; font-size:11px; border-width:1px; } .btn:active{ transform:scale(0.97); } .btn--login{ color:var(--accent-green); border:2px solid var(--accent-green); background:transparent; } .btn--login:hover{ background-color:var(--accent-green); color:var(--text-primary); } .btn--register{ color:#000; background-color:var(--accent-gold); border:2px solid var(--accent-gold); } .btn--register:hover{ background-color:var(--accent-gold-hover); border-color:var(--accent-gold-hover); } .btn--primary{ color:var(--text-primary); background-color:var(--accent-green); border:2px solid var(--accent-green); } .btn--primary:hover{ background-color:var(--accent-green-hover); border-color:var(--accent-green-hover); } /* --- HERO SECTION --- */ .hero{ position:relative; width:100%; overflow:hidden; background-color:var(--bg-primary); } .hero img{ display:block; width:100%; height:auto; margin:0; } /* --- H1 SECTION --- */ .page-title{ padding:var(--space-md) var(--space-md) var(--space-sm); text-align:center; } .page-title h1{ font-size:1.125rem; line-height:var(--line-height-tight); color:var(--text-primary); } .page-title p{ margin-top:var(--space-xs); font-size:var(--font-size-xs); color:var(--text-secondary); } /* --- CATEGORY TABS (prevents CLS) --- */ .categories{ padding:var(--space-sm) var(--space-md); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .categories::-webkit-scrollbar{display:none} .categories__list{ display:flex; gap:6px; min-width:max-content; } .categories__tab{ display:flex; align-items:center; gap:4px; padding:6px 12px; background-color:var(--bg-card); border-radius:var(--radius-full); color:var(--text-secondary); font-size:var(--font-size-xs); font-weight:500; white-space:nowrap; border:1px solid var(--border-color); } .categories__tab--active{ background-color:#0a7a44; border-color:#0a7a44; color:var(--text-primary); } .categories__tab svg,.categories__tab img{ width:16px; height:16px; object-fit:contain; } /* --- PROVIDER GRID (Casino, Slots, Table, etc.) --- */ .providers-grid{ display:flex; gap:var(--space-sm); padding:0 var(--space-md) var(--space-md); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .providers-grid::-webkit-scrollbar{display:none} .providers-grid .provider-card{ flex:0 0 42%; scroll-snap-align:start; } .provider-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:348/462; display:block; } .provider-card img{ width:100%; height:100%; object-fit:cover; display:block; } .provider-card__name{ position:absolute; bottom:10%; left:0; right:0; text-align:center; } /* --- GAMES GRID (prevents CLS) --- */ .section-header{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-md) var(--space-md) var(--space-sm); } .section-header h2{ font-size:var(--font-size-md); display:flex; align-items:center; gap:var(--space-xs); } .section-header__icon{ width:22px; height:22px; object-fit:contain; } .games-grid{ display:flex; gap:var(--space-sm); padding:0 var(--space-md) var(--space-md); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .games-grid::-webkit-scrollbar{display:none} .game-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; background-color:transparent; border:none; aspect-ratio:16/9; flex:0 0 78%; scroll-snap-align:start; } .game-card__image{ width:100%; height:100%; object-fit:cover; object-position:top; } .game-card__overlay{ position:absolute; inset:0; pointer-events:none; } .game-card__overlay > *{pointer-events:auto} .game-card__name{ position:absolute; bottom:8px; right:12px; } .game-card__link{ position:absolute; top:50%; right:8px; transform:translateY(-50%); } /* --- LANGUAGE SELECTOR BUTTON --- */ .lang-btn{ display:flex; align-items:center; gap:3px; padding:4px 6px; color:var(--text-primary); font-size:11px; border-radius:var(--radius-md); border:1px solid var(--border-color); background-color:var(--bg-card); min-height:28px; justify-content:center; } .lang-btn img{ width:16px; height:16px; border-radius:var(--radius-full); object-fit:cover; } .lang-btn svg{ width:14px; height:14px; } /* --- LANDING HERO (above fold, prevents CLS) --- */ .landing-hero{ padding:var(--space-3xl) var(--space-md) var(--space-xl); text-align:center; background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%); } .landing-hero__inner{ max-width:600px; margin:0 auto; } .landing-hero__logo{ height:48px; width:auto; margin:0 auto var(--space-lg); } .landing-hero h1{ font-size:var(--font-size-2xl); line-height:var(--line-height-tight); margin-bottom:var(--space-md); } .landing-hero__subtitle{ font-size:var(--font-size-base); color:var(--text-secondary); line-height:1.6; margin-bottom:var(--space-xl); } .landing-hero__cta{ display:flex; gap:var(--space-sm); justify-content:center; } .btn--lg{ padding:var(--space-md) var(--space-xl); font-size:var(--font-size-md); border-radius:var(--radius-lg); } /* --- REGION SELECTOR (above fold, prevents CLS) --- */ .region-selector{ padding:var(--space-2xl) var(--space-md); text-align:center; } .region-selector h2{ font-size:var(--font-size-xl); margin-bottom:var(--space-sm); } .region-selector__subtitle{ font-size:var(--font-size-sm); color:var(--text-secondary); margin-bottom:var(--space-xl); } .region-selector__grid{ display:flex; flex-wrap:wrap; gap:var(--space-sm); max-width:1100px; margin:0 auto; justify-content:center; } .region-selector .region-card{ width:calc(50% - var(--space-sm)/2); display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--space-lg) var(--space-md); background-color:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); text-decoration:none; } .region-selector .region-card__flag{ width:48px; height:48px; margin-bottom:var(--space-sm); border-radius:var(--radius-full); border:2px solid var(--border-color); } .region-selector .region-card__name{ font-size:var(--font-size-base); font-weight:700; color:var(--text-primary); line-height:1.2; } .region-selector .region-card__currency{ font-size:var(--font-size-xs); color:#2fbc73; font-weight:600; margin-bottom:var(--space-md); } .region-selector .region-card__langs{ display:flex; gap:var(--space-xs); justify-content:center; } .region-selector .region-card__info{ width:100%; } .region-selector .region-card__lang{ padding:var(--space-sm) var(--space-md); background-color:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius-full); font-size:var(--font-size-sm); color:var(--text-secondary); white-space:nowrap; flex:1; text-align:center; min-height:36px; display:flex; align-items:center; justify-content:center; } /* --- RESPONSIVE (above-fold layout, prevents CLS) --- */ @media(min-width:768px){ :root{ --font-size-base:1rem; --header-height:64px; } .header{height:64px;padding:0 var(--space-md);gap:var(--space-sm)} .header__logo{height:32px} .header__logo img,.header__logo svg{height:32px} .btn--login,.btn--register{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)} .lang-btn{padding:var(--space-sm) var(--space-md);min-height:40px;font-size:var(--font-size-sm)} .lang-btn img{width:24px;height:24px} .lang-btn svg{width:22px;height:22px} .page-title h1{font-size:var(--font-size-2xl)} .page-title p{font-size:var(--font-size-sm)} .categories__tab{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);gap:var(--space-xs)} .categories__tab svg,.categories__tab img{width:22px;height:22px} .section-header h2{font-size:var(--font-size-lg)} .section-header__icon{width:28px;height:28px} /* Switch from horizontal scroll to grid on tablet+ */ .games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);overflow:visible} .game-card{flex:none;aspect-ratio:16/9} .providers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);overflow:visible} .providers-grid .provider-card{flex:none} .region-selector__grid{gap:var(--space-md)} .region-selector .region-card{width:calc(33.333% - var(--space-md)*2/3)} .trust-grid{grid-template-columns:repeat(2,1fr)} .landing-hero h1{font-size:var(--font-size-3xl)} } @media(min-width:1024px){ :root{--header-height:64px} .hero{padding:0 0 var(--space-md)} .page-title{text-align:left;padding:var(--space-xl) var(--space-lg);max-width:1200px;margin:0 auto} .page-title h1{font-size:var(--font-size-2xl)} .categories{padding:var(--space-md) var(--space-lg);max-width:1200px;margin:0 auto} .games-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-md);padding:0 var(--space-lg) var(--space-lg);max-width:1200px;margin:0 auto} .providers-grid{grid-template-columns:repeat(6,1fr);gap:var(--space-md);padding:0 var(--space-lg) var(--space-lg);max-width:1200px;margin:0 auto} .section-header{padding:var(--space-xl) var(--space-lg) var(--space-sm);max-width:1200px;margin:0 auto} } @media(min-width:1440px){ .games-grid{grid-template-columns:repeat(3,1fr)} .region-selector .region-card{width:calc(25% - var(--space-md)*3/4)} .trust-grid{grid-template-columns:repeat(3,1fr)} .page-title h1{font-size:var(--font-size-3xl)} }