/* Template-specific overrides for hero layout */ /* ------------------------------------------------- BIAS Hero Template – Standard CSS Drop into: Expects: - Satoshi font available (or will fallback) - Tabler / Font Awesome icon fonts already loaded --------------------------------------------------*/ /* ---------- Root tokens ---------- */ :root { --bias-primary: #15931b; --bias-primary-soft: rgba(21, 147, 27, 0.06); --bg-light: #f9fafb; --bg-dark: #020617; --text-main: #0f172a; --text-muted: #6b7280; --sheet-radius: 1.5rem; --shell-max-width: 480px; --shell-max-width-md: 640px; --space-1: 0.25rem; --space-1_5: 0.375rem; --space-2: 0.5rem; --space-2_5: 0.625rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-hero-panel: 0 -16px 40px rgba(15, 23, 42, 0.3); --shadow-bottom-nav: 0 18px 40px rgba(0, 0, 0, 0.55); } /* Dark mode hook (when you add .dark to / ) */ .dark { color-scheme: dark; } /* ---------- Base typography / body ---------- */ body { margin: 0; padding: 0; background-color: var(--bg-light); color: var(--text-main); font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .dark body { background-color: var(--bg-dark); color: #e5e7eb; } /* Allow templates to explicitly opt-in */ .font-display { font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Generic main wrapper used in template */ main { min-height: 100vh; } /* ---------- Shell / container sizing ---------- */ .min-h-screen { min-height: 100vh; } .w-full { width: 100%; } .h-full { height: 100%; } .h-16 { height: 4rem; } .h-14 { height: 3.5rem; } .h-10 { height: 2.5rem; } .h-9 { height: 2.25rem; } .h-8 { height: 2rem; } .h-7 { height: 1.75rem; } .h-6 { height: 1.5rem; } .h-5 { height: 1.25rem; } .h-4 { height: 1rem; } .h-1 { height: 0.25rem; } .w-16 { width: 4rem; } .w-10 { width: 2.5rem; } .w-11\/12 { width: 91.666667%; } .max-w-\[480px\] { max-width: var(--shell-max-width); } .md\:max-w-\[640px\] { max-width: var(--shell-max-width-md); } @media (min-width: 768px) { .md\:max-w-\[640px\] { max-width: var(--shell-max-width-md); } } .mx-auto { margin-left: auto; margin-right: auto; } /* ---------- Positioning ---------- */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .top-0 { top: 0; } .top-2 { top: 0.5rem; } .top-4 { top: 1rem; } .top-6 { top: 1.5rem; } .bottom-2 { bottom: 0.5rem; } .bottom-4 { bottom: 1rem; } .left-4 { left: 1rem; } .left-6 { left: 1.5rem; } .right-4 { right: 1rem; } .right-6 { right: 1.5rem; } .inset-x-0 { left: 0; right: 0; } /* z-index helpers */ .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } /* ---------- Flex / grid / alignment ---------- */ .flex { display: flex; } .grid { display: grid; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .space-y-2 > :not(:last-child) { margin-bottom: var(--space-2); } .space-y-3 > :not(:last-child) { margin-bottom: var(--space-3); } .space-y-4 > :not(:last-child) { margin-bottom: var(--space-4); } .space-y-5 > :not(:last-child) { margin-bottom: 1.25rem; } .space-y-6 > :not(:last-child) { margin-bottom: 1.5rem; } .space-x-1 > :not(:last-child) { margin-right: var(--space-1); } .space-x-2 > :not(:last-child) { margin-right: var(--space-2); } .space-x-3 > :not(:last-child) { margin-right: var(--space-3); } /* ---------- Padding / margin ---------- */ .p-4 { padding: var(--space-4); } .p-3 { padding: var(--space-3); } .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .py-1\.5 { padding-top: var(--space-1_5); padding-bottom: var(--space-1_5); } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .pt-2 { padding-top: var(--space-2); } .pt-3 { padding-top: var(--space-3); } .pt-4 { padding-top: var(--space-4); } .pt-8 { padding-top: var(--space-8); } .pb-4 { padding-bottom: var(--space-4); } .pb-5 { padding-bottom: 1.25rem; } .pb-10 { padding-bottom: 2.5rem; } .pb-24 { padding-bottom: 6rem; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-8 { margin-top: var(--space-8); } /* ---------- Border radius ---------- */ .rounded-full { border-radius: 9999px; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-t-3xl { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; } /* for panel that overlaps hero */ .rounded-t-\[2rem\] { border-top-left-radius: 2rem; border-top-right-radius: 2rem; } /* ---------- Borders ---------- */ .border { border-width: 1px; border-style: solid; border-color: #e5e7eb; } .border-2 { border-width: 2px; } .border-dashed { border-style: dashed; } .border-b { border-bottom-width: 1px; } /* bias primary border */ .border-bias-primary { border-color: var(--bias-primary); } /* ---------- Shadows ---------- */ .shadow-sm { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .shadow-md { box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); } .shadow-lg { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16); } .shadow-\[0_-16px_40px_rgba\(15,23,42,0\.30\)\] { box-shadow: var(--shadow-hero-panel); } .shadow-\[0_18px_40px_rgba\(0,0,0,0\.55\)\] { box-shadow: var(--shadow-bottom-nav); } /* ---------- Colors / backgrounds ---------- */ .bg-white { background-color: #ffffff; } .bg-black { background-color: #000000; } .bg-black\/90 { background-color: rgba(0, 0, 0, 0.9); } .bg-\[\#f9fafb\] { background-color: #f9fafb; } .bg-\[\#020617\] { background-color: #020617; } /* Template-wide convenience */ .bg-background-light { background-color: var(--bg-light); } .bg-background-dark { background-color: var(--bg-dark); } /* Bias primary helpers */ .bg-bias-primary { background-color: var(--bias-primary); } .bg-bias-primary\/10 { background-color: rgba(21, 147, 27, 0.1); } .text-bias-primary { color: var(--bias-primary); } /* Text colors */ .text-white { color: #ffffff; } .text-slate-900 { color: #0f172a; } .text-slate-800 { color: #1e293b; } .text-slate-700 { color: #334155; } .text-slate-600 { color: #475569; } .text-slate-500 { color: #64748b; } .text-slate-400 { color: #94a3b8; } .text-zinc-900 { color: #18181b; } .text-zinc-800 { color: #27272a; } .text-zinc-700 { color: #3f3f46; } .text-zinc-600 { color: #52525b; } .text-zinc-500 { color: #71717a; } .text-zinc-400 { color: #a1a1aa; } /* ---------- Font sizes / weights / misc text ---------- */ .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .uppercase { text-transform: uppercase; } /* ---------- Hero specific pieces ---------- */ /* Category “pills” panel that overlaps hero */ .shadow-\[0_-16px_40px_rgba\(15,23,42,0\.30\)\] { box-shadow: var(--shadow-hero-panel); } /* Top hero section height */ .h-\[340px\] { height: 340px; } /* Aspect ratios used by product cards / hero images */ .aspect-\[3\/4\] { position: relative; width: 100%; } .aspect-\[3\/4\]::before { content: ""; display: block; padding-bottom: calc(4 / 3 * 100%); } /* Background cover helpers */ .bg-cover { background-size: cover; } .bg-center { background-position: center; } /* ---------- Bottom nav ---------- */ nav.fixed.bottom-4.left-4.right-4.h-16 { display: flex; align-items: center; justify-content: space-around; background-color: rgba(0, 0, 0, 0.9); border-radius: 999px; box-shadow: var(--shadow-bottom-nav); padding: 0 var(--space-4); z-index: 30; } /* Buttons inside bottom nav */ nav.fixed.bottom-4.left-4.right-4.h-16 button { border: none; background: transparent; color: #ffffff; cursor: pointer; } /* ---------- Sheets / bottom sheets ---------- */ [data-hero-sheet-panel], [data-interest-panel], [data-date-panel] { transform: translateY(100%); will-change: transform; } .translate-y-full { transform: translateY(100%); } /* When JS removes translate-y-full we want it fully visible */ .fixed.inset-0.flex.items-end.justify-center [data-hero-sheet-panel], .fixed.inset-0.flex.items-end.justify-center [data-interest-panel], .fixed.inset-0.flex.items-end.justify-center [data-date-panel] { transform: translateY(0); } /* Generic sheet styling (matches markup) */ .sheet-panel { background-color: #ffffff; border-top-left-radius: var(--sheet-radius); border-top-right-radius: var(--sheet-radius); box-shadow: 0 -16px 40px rgba(15, 23, 42, 0.45); } /* ---------- Overlays & modals ---------- */ .bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); } .backdrop-blur-sm { backdrop-filter: blur(6px); } /* Centered modal (review, phone capture) */ .fixed.inset-0.flex.items-center.justify-center { padding: var(--space-4); } /* ---------- Scrollbar hiding helpers ---------- */ .scrollbar-hide, .no-scrollbar, .scrollbar-hide::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar { display: none; } .scrollbar-hide, .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ---------- Simple hover helpers ---------- */ button:hover, a.button:hover { filter: brightness(0.96); } /* Explicit for primary buttons to keep them punchy */ .bg-bias-primary:hover { filter: brightness(0.95); } /* ---------- Utility display helpers ---------- */ .hidden { display: none !important; } .block { display: block; } .inline-flex { display: inline-flex; } /* ---------- Misc small helpers used in template ---------- */ .text-center { text-align: center; } .text-right { text-align: right; } .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Very light line clamp 2 (just for wishlist/product titles) */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }