/* ═══════════════════════════════════════════════════════════════════════ StoreIPTV8K v2.0 — Reset + Base ═══════════════════════════════════════════════════════════════════════ */ /* ─── Fonts ───────────────────────────────────────────────────── Loaded via in each layout's (not @import here) — @import inside CSS blocks the render tree until this file is fetched AND parsed before the browser even discovers the Google Fonts request, serializing what should be a parallel fetch. A is visible to the browser's preload scanner straight from the raw HTML. */ /* ─── Modern reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { /* `100dvh` (dynamic viewport height) accounts for iOS Safari/Chrome's collapsing URL bar — eliminates the dead space under the footer that plain `100vh` creates on mobile. Browsers without dvh fall back to vh. */ min-height: 100vh; min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); background-color: var(--ink); background-image: radial-gradient(ellipse at top, rgba(255,46,198,0.04) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(34,211,238,0.03) 0%, transparent 60%); background-attachment: fixed; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } [lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); } img, picture, video, canvas, svg { display: block; max-width: 100%; } /* `height: auto` is for FLUID raster media (photos): keep aspect ratio when the width is constrained. It must NOT apply blanket to : an icon SVG ships explicit width+height attributes, and `height:auto` drops that height — Chrome Mobile then can't always re-derive it from width+viewBox and falls back to the 150px SVG default, stretching the icon (footer payment marks). */ img, video, canvas { height: auto; /* Media can't force horizontal overflow — even as a flex/grid child that would otherwise refuse to shrink below its intrinsic width. `min-width: 0` is inert wherever space is not already tight, so desktop is unchanged. */ min-width: 0; } /* Decorative / container-sized SVGs (viewBox only, no dimension attributes) keep the old fluid behavior. Icon SVGs (width+height attrs) are left to render at their declared box — max-width:100% above still caps them. */ svg:not([width]):not([height]) { height: auto; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; } button { cursor: pointer; -webkit-appearance: none; } a { color: var(--gold); text-decoration: none; transition: color var(--tr-fast); } a:hover { color: var(--gold-light); } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } /* ─── Typography ───────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text); } [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5, [lang="ar"] h6, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: var(--font-arabic); font-weight: var(--weight-black); letter-spacing: 0; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-md); } p { line-height: var(--leading-relaxed); color: var(--text-soft); } small { font-size: var(--text-sm); color: var(--text-muted); } code, pre { font-family: var(--font-mono); font-size: 0.9em; } strong, b { font-weight: var(--weight-bold); color: var(--text); } em, i { font-style: italic; } /* ─── Selection ────────────────────────────────────────────────── */ ::selection { background-color: var(--gold); color: var(--text-on-gold); } /* ─── Custom Scrollbar (cinematic gold) ────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--gold-deep) var(--ink); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-mid), var(--gold-deep)); border-radius: var(--r-pill); border: 2px solid var(--ink); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), var(--gold-mid)); } /* ─── Focus rings (accessible & elegant) ───────────────────────── */ *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-xs); } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(255, 46, 198, 0.15); } /* ─── Utility classes ──────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-4); } @media (min-width: 768px) { .container { padding: 0 var(--space-5); } } @media (min-width: 1024px) { .container { padding: 0 var(--space-6); } } .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; } .gold { color: var(--gold); } .gold-light { color: var(--gold-light); } .muted { color: var(--text-muted); } .display { font-family: var(--font-display); } .mono { font-family: var(--font-mono); } .uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wide); } .hide-mobile { display: none; } @media (min-width: 768px) { .hide-mobile { display: initial; } .hide-desktop { display: none; } } .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; } /* ─── Skeleton / Loading shimmer ───────────────────────────────── */ .skeleton { background: linear-gradient( 90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--r-md); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Animated gold shimmer line (for "popular" badges, dividers) */ .gold-shimmer { background: linear-gradient( 90deg, transparent 0%, var(--gold-deep) 25%, var(--gold-light) 50%, var(--gold-deep) 75%, transparent 100% ); background-size: 200% 100%; animation: gold-shimmer-move 3s linear infinite; } @keyframes gold-shimmer-move { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Fade-in entrance animations ──────────────────────────────── */ .fade-in { animation: fade-in var(--tr-slow) both; } .fade-up { animation: fade-up var(--tr-slow) both; } .fade-down { animation: fade-down var(--tr-slow) both; } .scale-in { animation: scale-in var(--tr-bounce) both; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* ─── Section base ─────────────────────────────────────────────── */ section { position: relative; } .section { padding: var(--space-7) 0; } @media (min-width: 768px) { .section { padding: var(--space-8) 0; } } @media (min-width: 1024px) { .section { padding: var(--space-9) 0; } }