@charset "UTF-8"; /* ================= Base / Reset ================= */ *, *::before, *::after { box-sizing: border-box; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: #0f172a; } img, video { display: block; max-width: 100%; height: auto; } button, input, textarea { font: inherit; } a { color: inherit; text-decoration: none; } /* Force light color scheme everywhere */ :root { color-scheme: light; /* tell browsers: use light UI + don't auto-darken */ } /* Make the page canvas white no matter what */ html, body { background-color: #ffffff !important; color: #0f172a; } /* If you still have Tailwind-like gradient classes on , flatten them to white */ body.bg-gradient-to-b, body.bg-gradient-to-r { background-image: none !important; background-color: #ffffff !important; } /* ================= Palette ================= */ :root { --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-900: #0f172a; --indigo-600: #4f46e5; --amber-600: #d97706; --white: #fff; --black: #000; --ring: #0000001a; } /* ================= Layout ================= */ .max-w-6xl { max-width: 72rem; } .mx-auto { margin-left: auto; margin-right: auto; } /* ================= Spacing ================= */ .p-2 { padding: .5rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .px-3 { padding-left: .75rem; padding-right: .75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } .py-3 { padding-top: .75rem; padding-bottom: .75rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .pt-16 { padding-top: 4rem; } .pb-10 { padding-bottom: 2.5rem; } .mt-1 { margin-top: .25rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-10 { margin-top: 2.5rem; } .mb-6 { margin-bottom: 1.5rem; } .gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-6 { gap: 1.5rem; } .gap-10 { gap: 2.5rem; } /* ================= Display (place BEFORE responsive so it can be overridden) ================= */ .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .text-center { text-align: center; } /* ================= Grid ================= */ .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } .grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); } /* ================= Responsive ================= */ @media (min-width:640px) { /* sm */ .sm\:flex-row { flex-direction: row; } .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .sm\:w-auto { width: auto; } } @media (min-width:768px) { /* md */ /* force override of .hidden at md and up */ .md\:flex { display: flex !important; } .md\:block { display: block !important; } .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } .md\:pt-24 { padding-top: 6rem; } .md\:pb-16 { padding-bottom: 4rem; } .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .md\:order-1 { order: 1; } .md\:order-2 { order: 2; } } @media (min-width:1024px) { /* lg */ .lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); } } /* ================= Positioning ================= */ .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .top-0 { top: 0; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .-bottom-4 { bottom: -1rem; } .-right-4 { right: -1rem; } .z-40 { z-index: 40; } .z-\[200\] { z-index: 200; } .order-1 { order: 1; } .order-2 { order: 2; } /* ================= Sizing ================= */ .w-full { width: 100%; } .h-full { height: 100%; } .w-4 { width: 1rem; } .h-4 { height: 1rem; } .w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; } .w-8 { width: 2rem; } .h-8 { height: 2rem; } .min-h-screen { min-height: 100vh; } /* ================= Borders / Radius ================= */ .border { border: 1px solid var(--slate-200); } .border-b { border-bottom: 1px solid var(--slate-200); } .border-t { border-top: 1px solid var(--slate-200); } .rounded-xl { border-radius: .75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-lg { border-radius: .5rem; } .rounded { border-radius: .25rem; } /* ================= Backgrounds / Effects ================= */ .bg-white { background-color: var(--white); } .bg-white\/70 { background-color: rgba(255,255,255,.7); } .bg-black { background-color: var(--black); } .text-white { color: var(--white); } .bg-slate-50 { background-color: var(--slate-50); } .bg-slate-100 { background-color: var(--slate-100); } .bg-black\/60 { background-color: rgba(0,0,0,.6); } .shadow { box-shadow: 0 1px 3px 0 var(--ring), 0 1px 2px -1px var(--ring); } .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); } .hover\:shadow-sm:hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,.08); } .backdrop-blur { backdrop-filter: saturate(180%) blur(8px); } /* ================= Typography ================= */ .text-sm { font-size: .875rem; line-height: 1.25rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-6xl { font-size: 3.75rem; line-height: 1; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .tracking-tight { letter-spacing: -.02em; } .leading-tight { line-height: 1.1; } .text-slate-500 { color: var(--slate-500); } .text-slate-600 { color: var(--slate-600); } .text-slate-700 { color: var(--slate-700); } .text-slate-900 { color: var(--slate-900); } .text-indigo-600 { color: var(--indigo-600); } .hover\:opacity-80:hover { opacity: .8; } /* ================= Gradients ================= */ .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)); } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)); } .from-white { --tw-gradient-from: var(--white); } .to-slate-50 { --tw-gradient-to: var(--slate-50); } .from-indigo-600 { --tw-gradient-from: var(--indigo-600); } .to-amber-600 { --tw-gradient-to: var(--amber-600); } /* Gradient text fallback */ .bg-clip-text.text-transparent { position: relative; display: inline-block; background-clip: text; -webkit-background-clip: text; color: transparent; } /* Ensure there's always a white base behind the transparent text */ .bg-clip-text.text-transparent::before { content: attr(data-text); /* copy the text */ position: absolute; left: 0; top: 0; color: #fff; /* white fallback */ width: 100%; overflow: hidden; white-space: nowrap; pointer-events: none; z-index: -1; } .bg-clip-text { -webkit-background-clip: text; background-clip: text; } .text-transparent { color: transparent; } /* ================= JS helpers ================= */ .aspect-\[9\/16\] { aspect-ratio: 9 / 16; } .object-cover { object-fit: cover; } .cursor-pointer { cursor: pointer; } /* ================= Extras ================= */ .tile { background-image: linear-gradient(135deg,#dbeafe,white,#fde68a); } kbd { font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size: .75rem; border: 1px solid var(--slate-200); border-bottom-width: 2px; padding: .125rem .375rem; border-radius: .375rem; background: #fff; } .text-\[10px\] { font-size: 10px; } .bg-black\/70 { background-color: rgba(0,0,0,.7); } /* === Packs page essentials === */ .aspect-9-16 { aspect-ratio: 9 / 16; } .pack-grid { display: grid; grid-template-columns: repeat(1,minmax(0,1fr)); gap: 1.5rem; } @media (min-width:640px) { .pack-grid { grid-template-columns: repeat(2,1fr); } } @media (min-width:768px) { .pack-grid { grid-template-columns: repeat(3,1fr); } } @media (min-width:1024px) { .pack-grid { grid-template-columns: repeat(4,1fr); } } .mosaic { display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 1fr; gap: 2px; height: 100%; } .mosaic > div { position: relative; overflow: hidden; border-radius: .5rem; background: #f1f5f9; } .mosaic img, .mosaic video { width: 100%; height: 100%; object-fit: cover; display: block; } .filter-toggle { cursor: pointer; } .filter-panel { display: none; } .filter-panel.open { display: block; } .page-btn { border: 1px solid #e2e8f0; border-radius: .5rem; padding: .375rem .625rem; background: #fff; cursor: pointer; } .page-btn[disabled] { opacity: .5; cursor: not-allowed; } .input, select { width: 100%; border: 1px solid #e2e8f0; border-radius: 1rem; padding: .5rem .75rem; } .label { font-size: .875rem; color: #475569; } .chip { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .625rem; border-radius: .5rem; border: 1px solid #e2e8f0; font-size: .875rem } .dot { width: .75rem; height: .75rem; border-radius: 9999px } .dot-green { background: #16a34a } .dot-amber { background: #d97706 } .dot-gray { background: #334155 } .badge { padding: .125rem .5rem; border-radius: .375rem; font-size: .75rem; color: #fff } .badge-green { background: #16a34a } .badge-amber { background: #d97706 } .badge-gray { background: #334155 } /* ======= General media helpers ======= */ .ej-media { width: 100%; height: 100%; object-fit: cover; display: block; } .ej-abs { position: absolute; inset: 0; } /* ======= Hero tiles ======= */ #hero-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .ej-hero-tile { border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); aspect-ratio: 9/16; background: linear-gradient(135deg,#dbeafe,#fff,#fde68a); } .ej-hero-tile--ph { background: linear-gradient(135deg,#e2e8f0,#fff); } /* ======= Packs grid ======= */ /* Packs grid (final, single definition) */ #packs-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; position: relative; /* keep your z-index helper */ z-index: 0; } @media (max-width:1200px) { #packs-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width:900px) { #packs-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { #packs-grid { grid-template-columns: 1fr; } } @media (max-width: 1200px) { #packs-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 900px) { #packs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { #packs-grid { grid-template-columns: 1fr; } } /* ======= Card ======= */ .ej-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; transition: box-shadow .15s ease; } .ej-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); } /* Cover */ .ej-cover { position: relative; background: #f1f5f9; aspect-ratio: 9/16; } .ej-cover-ph { position: absolute; inset: 0; background: linear-gradient(135deg,#c7d2fe,#fff,#fde68a); } /* 2x2 mosaic in cover */ .ej-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); gap: 2px; } .ej-mosaic-cell { position: relative; overflow: hidden; background: #f1f5f9; } /* +N more badge */ .ej-more-badge { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 8px; } /* Body – horizontal layout */ .ej-body { padding: 16px; display: flex; align-items: center; gap: 16px; } .ej-body--row { justify-content: space-between; } .ej-left { min-width: 0; } .ej-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ej-tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; } .ej-pill { font-size: 12px; background: #f1f5f9; color: #334155; padding: 2px 8px; border-radius: 9999px; } .ej-mid { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #475569; white-space: nowrap; } .ej-price { font-weight: 700; color: #0f172a; } .ej-cta { display: inline-flex; align-items: center; justify-content: center; background: #000; color: #fff; text-decoration: none; border-radius: 12px; padding: 8px 12px; } /* ======= Modal ======= */ .ej-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 200; } .ej-modal { background: #fff; width: 100%; max-width: 1100px; height: 85vh; border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; } .ej-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; } .ej-modal-title { font-weight: 600; font-size: 16px; } .ej-modal-close { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 4px 8px; cursor: pointer; } .ej-modal-meta { padding: 10px 16px; font-size: 14px; color: #475569; border-bottom: 1px solid #e5e7eb; } .ej-modal-body { padding: 12px; overflow: auto; flex: 1 1 auto; } .ej-modal-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } @media (max-width: 900px) { .ej-modal-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 600px) { .ej-modal-grid { grid-template-columns: repeat(2,1fr); } } .ej-modal-cell { border-radius: 12px; overflow: hidden; background: #f1f5f9; } .ej-modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #e5e7eb; } .ej-modal-hint { color: #64748b; font-size: 12px; } .ej-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 12px; padding: 12px; } /* ===== FINAL OVERRIDE: packs grid – keep this at the very end ===== */ #packs-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 16px !important; position: relative; z-index: 0; } @media (max-width:1200px) { #packs-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } } @media (max-width:900px) { #packs-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width:560px) { #packs-grid { grid-template-columns: 1fr !important; } } /* safety: each card behaves as a block inside the grid cell */ .ej-card { display: block; } html, body { background-color: #ffffff; color: #0f172a; /* your slate-900 default text color */ } @media (prefers-color-scheme: dark) { html, body { background-color: #ffffff !important; color: #0f172a !important; } } /* ==== Mobile nav helpers (fixed) ==== */ /* Hide on >=768px only */ @media (min-width:768px) { .md\:hidden { display: none !important; } #mobile-menu { display: none !important; } /* never show mobile panel on desktop */ } /* hamburger button */ .hamb-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--slate-200); border-radius: .75rem; background: #fff; cursor: pointer; } .hamb-bars, .hamb-bars::before, .hamb-bars::after { display: block; width: 18px; height: 2px; background: #0f172a; position: relative; border-radius: 2px; } .hamb-bars::before, .hamb-bars::after { content: ""; position: absolute; left: 0; } .hamb-bars::before { top: -6px; } .hamb-bars::after { top: 6px; } /* checkbox toggle */ #nav-toggle { position: absolute; opacity: 0; pointer-events: none; } /* mobile panel hidden by default */ #mobile-menu { display: none; } /* When checked, show panel */ #nav-toggle:checked ~ #mobile-menu { display: block; } /* mobile panel */ .mobile-panel { border-top: 1px solid var(--slate-200); background: #fff; padding: .75rem 1rem; } .mobile-link { display: block; padding: .625rem .5rem; border-radius: .5rem; } .mobile-link:hover { background: var(--slate-100); } .mobile-cta { display: block; margin-top: .5rem; text-align: center; background: #000; color: #fff; border-radius: .75rem; padding: .625rem 1rem; } /* === Chrome Android white-canvas belt-and-braces === */ /* 1) Root always white */ html, body { background-color: #ffffff !important; background-image: linear-gradient(#ffffff, #ffffff) !important; /* defeats color transforms */ background-attachment: fixed !important; color: #0f172a !important; } /* 2) White underlay in case something is transparent */ body::before { content: ""; position: fixed; inset: 0; background: #ffffff !important; z-index: -1; /* below all content */ pointer-events: none; } /* 3) Ensure full-page sections can’t inherit dark */ header, main, section, footer, nav, .page, .container { background-color: #ffffff !important; } /* 4) Kill any translucent header effect that shows through to a dark canvas */ .bg-white\/70 { background-color: #ffffff !important; } /* 5) If you still use gradient utility classes on , force them to flat white */ body.bg-gradient-to-b, body.bg-gradient-to-r { background-image: none !important; background-color: #ffffff !important; } /* --- Hard white page canvas (even if browser tries to invert) --- */ :root { color-scheme: light; } /* hint: light UI only */ html, body { background: #fff !important; } /* paint the root white */ /* A fixed white layer under everything (Samsung-safe) */ html::before { content: ""; position: fixed; inset: 0; background: #fff !important; z-index: -1; /* sits behind all content */ pointer-events: none; }