/* ========================================================= Smart Cloud Digital — Design System Dark gaming-marketplace theme. Built with CSS logical properties so a single stylesheet serves both AR (RTL) and EN (LTR) — flipping is enough. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Chakra+Petch:wght@400;500;600;700&family=Russo+One&display=swap'); /* --------------------------------------------------------- Theme source: ui-ux-pro-max skill database — real output, not hand-picked. Query: "gaming marketplace game top-up gift cards wholesale reseller" --design-system -> Product/Color match: "Gaming" (data/colors.csv) -> Typography match: Russo One / Chakra Petch (gaming, esports, bold, energetic — data/typography.csv) Values below are copied as returned; --brand-gold and --success are the only additions on top (semantic tokens the dataset doesn't define), noted where used. --------------------------------------------------------- */ :root{ color-scheme: dark; /* --- Color tokens (skill: "Gaming" palette, colors.csv) --- */ --bg: #0F0F23; /* Background */ --bg-elevated: #15152C; /* derived, darker than Card for header/elevated surfaces */ --surface: #1E1C35; /* Card */ --surface-2: #27273B; /* Muted */ --border: #4C1D95; /* Border */ --border-soft: rgba(76, 29, 149, 0.4); /* Border, softened for dividers */ --text-primary: #E2E8F0; /* Foreground */ --text-secondary: #94A3B8; /* Muted Foreground */ --text-muted: #94A3B8; --brand-primary: #7C3AED; /* Primary */ --brand-primary-hover: #8B5CF6; --brand-primary-contrast: #FFFFFF; /* On Primary */ --brand-accent: #F43F5E; /* Accent/CTA — background/gradient use only, see --accent-text below */ --brand-accent-contrast: #000000; /* On Accent */ --accent-text: #FB7185; /* not in dataset — lighter tint of the dataset's Accent (#F43F5E), added because #F43F5E used as plain TEXT fails WCAG AA on --surface (4.49:1) and --surface-2 (3.97:1); this tint verified 5.42–7.01:1 across bg/surface/surface-2. Backgrounds/gradients keep the real --brand-accent unchanged. */ --brand-gold: #FBBF24; /* not in dataset — added for price emphasis so money values don't compete visually with the CTA/accent color */ --success: #22C55E; /* not in dataset — generic semantic success */ --danger: #EF4444; /* Destructive — background/border use */ --danger-text: #F87171; /* not in dataset — lighter tint of --danger for plain TEXT use; #EF4444 as text is borderline on --surface (4.38:1, just under AA's 4.5:1). This tint verified 5.97–6.82:1. */ --warning: #FBBF24; --info: #A78BFA; /* Secondary */ --focus-ring: #7C3AED; /* Ring */ /* --- Spacing scale (8px rhythm) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* --- Radius / elevation --- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(0,0,0,.28); --shadow-md: 0 8px 24px rgba(0,0,0,.36); --shadow-glow: 0 0 0 1px rgba(124,92,255,.35), 0 8px 32px rgba(124,92,255,.25); /* --- Type scale --- */ --font-base: 'Chakra Petch', 'Tajawal', system-ui, -apple-system, sans-serif; /* skill typography match: Chakra Petch (gaming/esports body). Listed first on purpose — it has no Arabic glyphs, so Arabic characters fall through to Tajawal automatically per-glyph while Latin text/numbers render in Chakra Petch */ --font-display: 'Russo One', 'Tajawal', sans-serif; /* skill typography match: Russo One (gaming display face) — Latin-only, so Arabic glyphs fall back to Tajawal automatically */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px; --container: 1200px; --header-h: 76px; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-base); font-size: var(--fs-md); line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } h1,h2,h3,h4{ margin: 0; font-weight: 800; line-height: 1.25; } p{ margin: 0; } ul{ list-style: none; margin: 0; padding: 0; } button{ font-family: inherit; cursor: pointer; } input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; } /* Background radial glow accents */ body{ background-image: radial-gradient(600px circle at 15% 0%, rgba(124,92,255,.16), transparent 60%), radial-gradient(500px circle at 100% 10%, rgba(34,228,192,.10), transparent 55%); background-repeat: no-repeat; } /* --- Focus visibility (accessibility) --- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } .skip-link{ position: absolute; inset-inline-start: var(--space-4); top: -60px; background: var(--brand-primary); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 200; transition: top .2s ease; font-weight: 700; } .skip-link:focus{ top: var(--space-4); } .container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } @media (max-width: 640px){ .container{ padding-inline: var(--space-4); } } /* ========================= Header / Navigation ========================= */ .site-header{ position: sticky; top: 0; z-index: 100; background: rgba(10,14,26,.85); backdrop-filter: blur(14px); border-block-end: 1px solid var(--border-soft); } .header-inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); } .brand{ display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg); letter-spacing: .2px; } .brand-mark{ width: 36px; height: 36px; border-radius: 10px; background: var(--brand-primary); /* solid, not the old two-tone gradient — no single text color hit AA 4.5:1 against both gradient endpoints at once (see .cat-icon note below) */ display: grid; place-items: center; color: var(--brand-primary-contrast); /* white on brand-primary = 5.70:1, AA-compliant */ font-weight: 900; box-shadow: var(--shadow-glow); } .main-nav{ display: flex; align-items: center; gap: var(--space-6); } .main-nav ul{ display: flex; gap: var(--space-5); } .main-nav a{ color: var(--text-secondary); font-weight: 500; font-size: var(--fs-sm); padding: var(--space-2) 0; border-block-end: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--text-primary); border-block-end-color: var(--brand-primary); } .header-actions{ display: flex; align-items: center; gap: var(--space-3); } .lang-toggle{ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 6px 14px; min-height: 44px; font-size: var(--fs-sm); font-weight: 700; } .lang-toggle:hover{ color: var(--text-primary); border-color: var(--brand-primary); } .nav-toggle{ display: none; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 44px; height: 44px; color: var(--text-primary); } .nav-mobile-auth{ display: none; } .header-auth-links{ display: flex; align-items: center; gap: var(--space-3); } @media (max-width: 900px){ .main-nav{ display: none; } .nav-toggle{ display: inline-flex; } .header-auth-links{ display: none; } .main-nav.open{ display: flex; position: absolute; inset-inline: 0; top: var(--header-h); background: var(--bg-elevated); border-block-end: 1px solid var(--border-soft); flex-direction: column; align-items: stretch; padding: var(--space-4) var(--space-5); gap: var(--space-4); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .main-nav.open ul{ flex-direction: column; gap: var(--space-3); } .main-nav.open .nav-mobile-auth{ display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-soft); } } /* ========================= Buttons ========================= */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-pill); padding: 12px 24px; font-weight: 700; font-size: var(--fs-sm); border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap; } .btn:active{ transform: translateY(1px); } .btn-primary{ background: linear-gradient(135deg, #6A4CFF, #5638D6); color: #fff; box-shadow: var(--shadow-glow); } .btn-primary:hover{ background: var(--brand-primary-hover); filter: brightness(1.08); } .btn-secondary{ background: var(--surface); color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover{ border-color: var(--brand-primary); } .btn-ghost{ background: transparent; color: var(--text-secondary); } .btn-ghost:hover{ color: var(--text-primary); } .btn-block{ width: 100%; } .btn-lg{ padding: 14px 30px; font-size: var(--fs-md); } .btn[disabled]{ opacity: .5; cursor: not-allowed; } /* ========================= Sections / generic ========================= */ .section{ padding-block: var(--space-9); } .section-tight{ padding-block: var(--space-7); } .section-head{ display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-6); } .eyebrow{ color: var(--accent-text); font-weight: 800; font-size: var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase; } .section-title{ font-family: var(--font-display); font-size: var(--fs-3xl); } .section-sub{ color: var(--text-secondary); font-size: var(--fs-md); max-width: 640px; } .badge{ display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill); } .card{ background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5); } /* ========================= Hero ========================= */ .hero{ padding-block-start: var(--space-8); padding-block-end: var(--space-7); } .hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: center; } .hero-title{ font-family: var(--font-display); font-size: var(--fs-4xl); letter-spacing: -.5px; } .hero-title .accent{ background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub{ color: var(--text-secondary); font-size: var(--fs-lg); margin-block-start: var(--space-4); max-width: 560px; } .hero-actions{ display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; } .hero-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-block-start: var(--space-7); } .stat{ text-align: center; } .stat-num{ font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 900; color: var(--text-primary); } .stat-label{ font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: 4px; } .hero-panel{ background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); position: relative; } .hero-panel-row{ display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); border-block-end: 1px solid var(--border-soft); } .hero-panel-row:last-child{ border-block-end: none; } .mini-icon{ width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-weight: 800; color: var(--accent-text); } @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } .hero-stats{ grid-template-columns: repeat(2, 1fr); } .hero-title{ font-size: var(--fs-3xl); } } /* ========================= Payment strip ========================= */ .payment-strip{ display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding-block: var(--space-5); border-block: 1px solid var(--border-soft); } .payment-strip span{ color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .payment-icons{ display: flex; gap: var(--space-3); flex-wrap: wrap; } .payment-chip{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); } /* ========================= Grids: categories / products / features ========================= */ .grid{ display: grid; gap: var(--space-5); } .grid-4{ grid-template-columns: repeat(4, 1fr); } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-2{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 1000px){ .grid-4{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px){ .grid-4, .grid-3{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } } .cat-card{ background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .cat-card:hover{ border-color: var(--brand-primary); /* transform + box-shadow on hover are now handled by the 3D tilt system further down (JS-driven rotateX/rotateY inline style + .cat-card:hover{ box-shadow: var(--shadow-depth-2) }) */ } .cat-icon{ width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: var(--fs-lg); color: var(--brand-primary-contrast); /* white on brand-primary = 5.70:1, AA-compliant */ background: var(--brand-primary); /* was a two-tone accent→primary gradient; neither black nor white text reached 4.5:1 against BOTH endpoints at once (only the 3:1 large-text floor), so this switches to one solid, verified color per the skill's own Accessibility (CRITICAL) rule */ } .cat-name{ font-weight: 700; font-size: var(--fs-sm); } .cat-count{ font-size: var(--fs-xs); color: var(--text-muted); } .feature-card{ background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-5); } .feature-icon{ width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; font-size: var(--fs-lg); margin-block-end: var(--space-4); color: var(--accent-text); } .feature-title{ font-weight: 800; font-size: var(--fs-md); margin-block-end: var(--space-2); } .feature-text{ color: var(--text-secondary); font-size: var(--fs-sm); } /* Steps */ .steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: step; } @media (max-width: 900px){ .steps{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .steps{ grid-template-columns: 1fr; } } .step{ position: relative; } .step-num{ width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent-text); display: grid; place-items: center; font-weight: 900; margin-block-end: var(--space-4); } .step-title{ font-weight: 800; margin-block-end: var(--space-1); } .step-text{ color: var(--text-secondary); font-size: var(--fs-sm); } /* ========================= CTA banner ========================= */ .cta-banner{ background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(34,228,192,.10)); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-7); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .cta-banner h3{ font-family: var(--font-display); font-size: var(--fs-2xl); } .cta-banner p{ color: var(--text-secondary); margin-block-start: var(--space-2); } /* ========================= Footer ========================= */ .site-footer{ border-block-start: 1px solid var(--border-soft); padding-block: var(--space-7); margin-block-start: var(--space-8); } .footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); } @media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } } .footer-col h2{ font-size: var(--fs-sm); margin-block-end: var(--space-3); color: var(--text-primary); } .footer-col ul{ display: flex; flex-direction: column; gap: var(--space-2); } .footer-col a{ color: var(--text-secondary); font-size: var(--fs-sm); } .footer-col a:hover{ color: var(--accent-text); } .footer-bottom{ margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); color: var(--text-muted); font-size: var(--fs-xs); } .socials{ display: flex; gap: var(--space-3); } .socials a{ width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: var(--fs-sm); } .socials a:hover{ border-color: var(--brand-accent); color: var(--accent-text); } /* ========================= Page header (inner pages) ========================= */ .page-hero{ padding-block: var(--space-7); border-block-end: 1px solid var(--border-soft); } .breadcrumbs{ color: var(--text-muted); font-size: var(--fs-xs); margin-block-end: var(--space-3); } .breadcrumbs a:hover{ color: var(--accent-text); } /* ========================= Filters / search (products page) ========================= */ .filter-bar{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-6); } .tabs{ display: flex; gap: var(--space-2); flex-wrap: wrap; } .tab{ background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 16px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; } .tab[aria-pressed="true"]{ background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .search-box{ display: flex; align-items: center; gap: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 16px; min-width: 260px; } .search-box input{ background: transparent; border: none; outline: none; color: var(--text-primary); width: 100%; } .search-box input::placeholder{ color: var(--text-muted); } .product-card{ background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, border-color .15s ease; } .product-card:hover{ border-color: var(--brand-primary); } .product-thumb{ aspect-ratio: 16/10; background: linear-gradient(135deg, var(--surface-2), var(--bg-elevated)); display: grid; place-items: center; font-weight: 900; font-size: var(--fs-2xl); color: var(--accent-text); } .product-body{ padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .product-cat{ font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; } .product-name{ font-weight: 800; font-size: var(--fs-md); } .product-footer{ display: flex; align-items: center; justify-content: space-between; margin-block-start: auto; padding-block-start: var(--space-3); } .price{ color: var(--brand-gold); font-weight: 900; } .price-from{ font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; } /* ========================= Product detail page ========================= */ .pd-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-7); align-items: start; } @media (max-width: 900px){ .pd-grid{ grid-template-columns: 1fr; } } .pd-image{ aspect-ratio: 4/3; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--surface-2), var(--bg-elevated)); display: grid; place-items: center; font-size: 64px; font-weight: 900; color: var(--accent-text); border: 1px solid var(--border-soft); overflow: hidden; } /* The letter fallback (set as the element's own text) always renders underneath; a real product/game image, when G2Bulk provides one, overlays it — and if that image URL 404s, onerror removes the and the letter shows through cleanly instead of a broken-image icon. */ .pd-image img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Denomination picker (product.html) — one card per variant showing its own price, laid out in a responsive grid, so every option is comparable at a glance instead of hidden behind a row of same-looking chips. */ .variant-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } /* Now that the grid runs full page width (see #pdPurchasePanel in product.html) there's room to pack more per row on wider screens — a real game can have 30-40 denominations, and 6-across keeps that a one-screen grid instead of a very long page of 2-3-wide rows. */ @media (min-width: 480px){ .variant-grid{ grid-template-columns: repeat(3, 1fr); } } @media (min-width: 700px){ .variant-grid{ grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1000px){ .variant-grid{ grid-template-columns: repeat(6, 1fr); } } .variant-card{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3); text-align: start; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .variant-card:hover{ border-color: var(--brand-primary); } .variant-card[aria-pressed="true"]{ border-color: var(--brand-primary); background: var(--surface-2); box-shadow: 0 0 0 1px var(--brand-primary) inset; } .variant-label{ font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); } .variant-price{ font-size: var(--fs-lg); font-weight: 800; color: var(--brand-gold); font-variant-numeric: tabular-nums; } .qty-control{ display: inline-flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 8px; } .qty-control{ padding: 4px; } .qty-control button{ width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); font-weight: 800; font-size: var(--fs-md); display: grid; place-items: center; } .qty-value{ min-width: 24px; text-align: center; font-weight: 800; } .price-box{ display: flex; align-items: baseline; gap: var(--space-2); margin-block: var(--space-4); } .price-box .amount{ font-size: var(--fs-3xl); font-weight: 900; color: var(--brand-gold); } .delivery-note{ display: flex; align-items: center; gap: var(--space-2); color: var(--accent-text); font-size: var(--fs-sm); font-weight: 700; margin-block-start: var(--space-3); } /* ========================= Auth pages ========================= */ .auth-shell{ min-height: calc(100dvh - var(--header-h)); display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 900px){ .auth-shell{ grid-template-columns: 1fr; } } .auth-visual{ background: radial-gradient(500px circle at 30% 20%, rgba(124,92,255,.35), transparent 60%), radial-gradient(500px circle at 80% 80%, rgba(34,228,192,.25), transparent 60%), var(--bg-elevated); padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); border-inline-end: 1px solid var(--border-soft); } @media (max-width: 900px){ .auth-visual{ display: none; } } .auth-visual .visual-title{ font-size: var(--fs-3xl); max-width: 420px; font-weight: 800; } .auth-visual p{ color: var(--text-secondary); max-width: 380px; } .auth-form-wrap{ display: flex; align-items: center; justify-content: center; padding: var(--space-7) var(--space-5); } .auth-card{ width: 100%; max-width: 420px; } .auth-card h1{ font-family: var(--font-display); font-size: var(--fs-2xl); margin-block-end: var(--space-2); } .auth-sub{ color: var(--text-secondary); font-size: var(--fs-sm); margin-block-end: var(--space-6); } .field{ margin-block-end: var(--space-4); } .field label{ display: block; font-size: var(--fs-sm); font-weight: 700; margin-block-end: var(--space-2); } .field input, .field select, .field textarea{ width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-primary); } .field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(124,92,255,.25); } .field-hint{ font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: 6px; } .field-error{ font-size: var(--fs-xs); color: var(--danger-text); margin-block-start: 6px; display: none; } .field.has-error input{ border-color: var(--danger); } .field.has-error .field-error{ display: block; } .form-row-split{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .checkbox-row{ display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); } .link-accent{ color: var(--accent-text); font-weight: 700; } .link-accent:hover{ text-decoration: underline; } .auth-divider{ display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--fs-xs); margin-block: var(--space-5); } .auth-divider::before, .auth-divider::after{ content: ''; flex: 1; height: 1px; background: var(--border-soft); } .auth-footer-note{ text-align: center; margin-block-start: var(--space-5); color: var(--text-secondary); font-size: var(--fs-sm); } /* ========================= Contact page ========================= */ .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); } @media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } } .contact-channel{ display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); margin-block-end: var(--space-4); } .contact-channel .mini-icon{ flex-shrink: 0; } .contact-channel h2{ font-size: var(--fs-md); margin-block-end: 4px; } .contact-channel p{ color: var(--text-secondary); font-size: var(--fs-sm); } /* ========================= Utilities ========================= */ .text-center{ text-align: center; } .mt-0{ margin-block-start: 0 !important; } .visually-hidden{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================= Icon system (replaces emoji) ========================= */ .icon{ display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; } .icon svg{ width: 22px; height: 22px; } .icon-sm svg{ width: 18px; height: 18px; } .icon-lg svg{ width: 28px; height: 28px; } /* ========================================================= 3D & Hyperrealism layer Theme source: ui-ux-pro-max skill database, style record "3D & Hyperrealism" (data/styles.csv), matched via: python3 scripts/search.py "3D hyperrealism gaming" --domain style -> Style ID: 3d-and-hyperrealism | Best For: Gaming, product showcase, immersive experiences -> CSS/Technical Keywords used below: transform: translate3d, perspective: 1000px, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow() -> Design System Variables used as returned: --perspective: 1000px, --parallax-layers: 5, --shadow-depth: 20-40%, --animation-duration: 300-400ms The dataset also calls for WebGL/Three.js 3D — implemented in script.js (initHero3D) as a progressive enhancement that loads Three.js from a CDN at runtime and silently falls back to the CSS parallax layers below if that load fails, since a static delivered site can't guarantee a CDN is reachable on every network. Accessibility risk is flagged "high" for this style in the dataset, so every effect here is gated behind prefers-reduced-motion and pointer:fine, and none of it touches text contrast (handled entirely in the tokens above). ========================================================= */ :root{ --perspective: 1000px; --shadow-depth-1: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 20px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.3); --shadow-depth-2: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 36px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.35); --anim-3d: 320ms cubic-bezier(.22,.9,.32,1); } /* Perspective-tilt cards: JS (initTilt) sets rotateX/rotateY/translateZ as inline custom properties on pointermove; this class just owns the base transition + depth shadow + glare-sheen overlay markup it injects. */ .cat-card, .product-card, .feature-card, .hero-panel, .cta-banner, .pd-image, .dash-stat-card{ transition: transform var(--anim-3d), box-shadow var(--anim-3d), border-color .15s ease; transform: perspective(var(--perspective)) rotateX(0) rotateY(0) translateZ(0); will-change: transform; box-shadow: var(--shadow-depth-1); } .cat-card:hover, .product-card:hover, .feature-card:hover, .hero-panel:hover, .cta-banner:hover, .dash-stat-card:hover{ box-shadow: var(--shadow-depth-2); } .tilt-glare{ position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; mix-blend-mode: overlay; opacity: 0; transition: opacity 200ms ease; } .tilt-glare.is-active{ opacity: 1; } .cat-card, .product-card, .feature-card, .hero-panel, .cta-banner, .dash-stat-card{ position: relative; overflow: hidden; } .pd-image{ position: relative; } /* Embossed / extruded 3D icon badges — layered inset highlight (top-left light source) + outer drop shadow (bottom-right), instead of a flat fill, per the dataset's "realistic shadows (layers)" effect. */ .cat-icon{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -6px 10px rgba(0,0,0,.25), 0 10px 18px -6px rgba(124,58,237,.55), 0 2px 4px rgba(0,0,0,.3); } .feature-icon, .mini-icon, .step-num{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -4px 8px rgba(0,0,0,.35), 0 6px 14px -4px rgba(0,0,0,.45); } .brand-mark{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -6px 10px rgba(0,0,0,.25), 0 4px 10px -2px rgba(124,58,237,.5); } /* 3D extruded / press-down buttons — solid bottom edge simulates thickness; pressing flattens it, matching the dataset's "physics lighting" + tactile skeuomorphic guidance for gaming UI. */ .btn-primary{ box-shadow: 0 4px 0 #4527A6, 0 4px 14px rgba(124,58,237,.35), var(--shadow-glow); transform: translateY(0) perspective(var(--perspective)); transition: transform 120ms ease, box-shadow 120ms ease, background .15s ease, border-color .15s ease; } .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 #4527A6, 0 8px 18px rgba(124,58,237,.4), var(--shadow-glow); } .btn-primary:active{ transform: translateY(2px); box-shadow: 0 1px 0 #4527A6, 0 2px 8px rgba(124,58,237,.3); } .btn-secondary{ box-shadow: 0 4px 0 rgba(0,0,0,.4); transition: transform 120ms ease, box-shadow 120ms ease, border-color .15s ease; } .btn-secondary:hover{ transform: translateY(-2px); } .btn-secondary:active{ transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4); } /* Multi-layer parallax hero background (dataset: "parallax (3-5 layers)"). Five depth layers, each a soft glow disc; JS (initParallax) nudges each layer's translate by a different multiplier on pointermove, and a slow independent CSS drift keeps them alive even without a pointer (e.g. touch devices), always well under WCAG's 3s flash threshold. */ .parallax-field{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .parallax-layer{ position: absolute; border-radius: 50%; filter: blur(10px); will-change: transform; transition: transform 400ms cubic-bezier(.22,.9,.32,1); } /* Base (resting) position only — the actual motion (autonomous drift + pointer offset) is driven entirely by JS (initParallax) writing to this same transform property via requestAnimationFrame, so there's no fight between a CSS animation and inline styles over one property. On prefers-reduced-motion the JS loop never starts and these stay put — still a layered depth visual, just static. */ .parallax-layer[data-depth="1"]{ width: 420px; height: 420px; top: -120px; inset-inline-start: 5%; background: radial-gradient(circle, rgba(124,58,237,.30), transparent 70%); } .parallax-layer[data-depth="2"]{ width: 300px; height: 300px; top: 40px; inset-inline-end: 8%; background: radial-gradient(circle, rgba(244,63,94,.22), transparent 70%); } .parallax-layer[data-depth="3"]{ width: 260px; height: 260px; bottom: -80px; inset-inline-start: 30%; background: radial-gradient(circle, rgba(167,139,250,.20), transparent 70%); } .parallax-layer[data-depth="4"]{ width: 180px; height: 180px; top: 20%; inset-inline-start: 60%; background: radial-gradient(circle, rgba(251,191,36,.14), transparent 70%); } .parallax-layer[data-depth="5"]{ width: 140px; height: 140px; bottom: 10%; inset-inline-end: 20%; background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%); } .hero, .page-hero{ position: relative; } .hero-grid, .page-hero .container{ position: relative; z-index: 1; } /* Progressive-enhancement WebGL canvas (see assets/hero3d.js). Hidden until the script confirms Three.js actually loaded, so a blocked CDN never leaves an empty gray box — the CSS parallax layers above remain the always-on visual either way. */ .hero-3d-canvas{ position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 800ms ease; pointer-events: none; } .hero-3d-canvas.is-loaded{ opacity: 1; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .cat-card, .product-card, .feature-card, .hero-panel, .cta-banner, .pd-image, .dash-stat-card{ transform: none !important; } .parallax-layer{ animation: none !important; } .hero-3d-canvas{ display: none !important; } } /* Tilt/parallax are pointer-driven, so on touch/coarse-pointer devices (no hover, no precise mousemove) fall back to a flat, static card — avoids dead hover styles and saves battery. */ @media (pointer: coarse){ .cat-card, .product-card, .feature-card, .hero-panel, .cta-banner, .pd-image, .dash-stat-card{ transform: none !important; } } /* ========================================================= Dashboard (real backend: register/login/dashboard.html) ========================================================= */ .dashboard-loading{ color: var(--text-secondary); padding-block: var(--space-8); text-align: center; } .dash-greeting-name{ color: var(--accent-text); } .dash-stats{ margin-block-end: var(--space-6); } .dash-stat-card{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .dash-stat-icon{ width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); color: var(--brand-primary-contrast); margin-block-end: var(--space-2); } .dash-stat-icon svg{ width: 24px; height: 24px; } .dash-stat-value{ font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 900; color: var(--text-primary); } .dash-stat-value-code{ font-size: var(--fs-lg); letter-spacing: 1px; color: var(--accent-text); } .dash-stat-label{ font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; } .dashboard-columns{ display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-6); align-items: start; } @media (max-width: 900px){ .dashboard-columns{ grid-template-columns: 1fr; } } .profile-card, .orders-card{ min-width: 0; } /* grid items default to min-width:auto, which lets a wide table push the whole grid track (and the page) wider instead of scrolling inside .table-scroll — this override is what makes that inner scroll actually work */ .profile-card h2, .orders-card h2{ font-size: var(--fs-lg); margin-block-end: var(--space-5); } .profile-card .field-static{ color: var(--text-secondary); padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); } .table-scroll{ overflow-x: auto; } .orders-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); white-space: nowrap; } .orders-table th{ text-align: start; color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; padding-block-end: var(--space-3); border-block-end: 1px solid var(--border-soft); } .orders-table td{ padding-block: var(--space-3); border-block-end: 1px solid var(--border-soft); color: var(--text-secondary); } .orders-table tr:last-child td{ border-block-end: none; } .status-badge{ display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); } .status-badge.status-ok{ color: var(--success); border-color: rgba(34,197,94,.35); } .status-badge.status-pending{ color: var(--brand-gold); border-color: rgba(251,191,36,.35); } .status-badge.status-failed{ color: var(--danger-text); border-color: rgba(239,68,68,.35); } .orders-empty{ color: var(--text-muted); font-size: var(--fs-sm); padding-block: var(--space-5); text-align: center; } .dashboard-logout-btn{ margin-block-start: var(--space-6); } .form-server-error{ background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: var(--danger-text); padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); margin-block-end: var(--space-4); } .form-server-error.is-success{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: var(--success); } /* Live catalogue (products.html grid + product.html detail) */ .product-name small[data-i18n="out_of_stock"]{ display: inline-block; font-size: var(--fs-xs, 0.75rem); color: var(--danger-text); border: 1px solid rgba(239,68,68,.35); border-radius: var(--radius-sm); padding: 1px 6px; margin-inline-start: var(--space-2); vertical-align: middle; } #pdVerifyResult{ display: inline-block; margin-inline-start: var(--space-3); font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); } #pdVerifyResult.is-valid{ color: var(--success); } #pdVerifyResult.is-invalid{ color: var(--danger-text); } .code-value{ display: inline-block; font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace); background: rgba(255,255,255,.08); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 3px 8px; letter-spacing: .03em; word-break: break-all; } #pdPlayerFields{ margin-block-start: var(--space-5); } #pdPlayerFields .btn{ margin-block-start: var(--space-2); } /* Dashboard order history — filters + live status + revealed codes */ .orders-card-head{ display: flex; flex-direction: column; gap: var(--space-4); margin-block-end: var(--space-5); } .orders-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .tabs-compact .tab{ padding: 6px 14px; font-size: var(--fs-xs, 0.75rem); } .orders-toolbar .search-box{ min-width: 200px; padding: 8px 14px; } .order-copy-btn{ padding: 4px 12px; font-size: var(--fs-xs, 0.75rem); } .order-pending-dots{ color: var(--text-muted); letter-spacing: 2px; animation: dash-pending-pulse 1.4s ease-in-out infinite; } .status-badge.status-pending-live{ position: relative; } .status-badge.status-pending-live::before{ content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-inline-end: 6px; animation: dash-pending-pulse 1.4s ease-in-out infinite; } @keyframes dash-pending-pulse{ 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce){ .order-pending-dots, .status-badge.status-pending-live::before{ animation: none; opacity: .7; } } /* ========================= Homepage product carousels (index.html) — "منتجات مميزة", "أحدث المنتجات", "عروض", "شحن الألعاب". Real G2Bulk items, rendered by initHomeCarousels() in script.js. Drag-to-scroll (mouse + touch) via enableDragScroll() — deliberately NOT part of the .cat-card/.product-card 3D-tilt group (see initTilt's selector list) so the pointermove tilt effect can't fight with a drag gesture on the same element. ========================= */ .carousel-section{ padding-block: var(--space-7); } .carousel-section + .carousel-section{ padding-block-start: 0; } /* .carousel-wrap used to double as the section's .container (max-width 1200px, same as the rest of the site). With a fixed 10-column grid, that cap forces every card down to ~100px regardless — there just isn't more room to give them. So this section gets its own, wider gutter-matched wrapper instead, capped generously rather than at the normal content width, so 10 columns can actually be a comfortable size on real desktop screens. */ .carousel-wrap{ position: relative; max-width: 1800px; margin-inline: auto; padding-inline: var(--space-5); } @media (max-width: 640px){ .carousel-wrap{ padding-inline: var(--space-4); } } .carousel-track{ /* A fixed, wrapping grid — not a horizontally-scrollable strip. Exactly 10 equal-width (1fr) columns, so every row always has exactly 10 cards that stretch to fill the row's real width (bigger on a wide screen, narrower on a small one) instead of a fixed pixel size. Nothing here drags or scrolls sideways: hovering a card never shifts anything. */ display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--space-4); padding-block: var(--space-2) var(--space-4); } @media (max-width: 900px){ .carousel-track{ grid-template-columns: repeat(5, 1fr); } } @media (max-width: 640px){ .carousel-track{ grid-template-columns: repeat(3, 1fr); } } .carousel-card{ display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; min-width: 0; } .carousel-card-media{ position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--surface-2), var(--bg-elevated)); border: 1px solid var(--border-soft); display: grid; place-items: center; overflow: hidden; font-weight: 900; font-size: var(--fs-xl); color: var(--accent-text); transition: border-color .15s ease, transform .15s ease; } .carousel-card:hover .carousel-card-media{ border-color: var(--brand-primary); transform: translateY(-3px); } .carousel-card-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; } .carousel-flag{ position: absolute; top: 6px; inset-inline-start: 6px; font-size: 15px; line-height: 1; background: rgba(15, 15, 35, .72); border-radius: var(--radius-sm); padding: 3px 5px; } .carousel-badge{ position: absolute; bottom: 6px; inset-inline-end: 6px; display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px 3px 6px; border-radius: var(--radius-pill); background: rgba(15, 15, 35, .85); border: 1px solid var(--border-soft); color: var(--text-primary); white-space: nowrap; } .carousel-badge::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gold); flex-shrink: 0; } .carousel-badge.badge-topup::before{ background: #22C55E; } .carousel-count{ position: absolute; bottom: 6px; inset-inline-start: 6px; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; border-radius: var(--radius-pill); background: var(--brand-gold); color: #141413; } .carousel-card-name{ font-size: var(--fs-sm); font-weight: 700; text-align: center; line-height: 1.3; /* Wrap onto 2 lines instead of a single truncated line (many real product names — "Razer Gold Australia 50", "Razer Gold Thailand 1000" — didn't fit in one line at all before). Longer than that still clamps with an ellipsis so a card can never grow unbounded. min-height reserves room for 2 lines up front so a short name and a long one still line up to the same card height within a row. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; min-height: calc(1.3em * 2); } @media (prefers-reduced-motion: reduce){ .carousel-card-media{ transition: none; } .carousel-card:hover .carousel-card-media{ transform: none; } }