/* ============================================================ pages.css — inner storefront pages (Products / Product / Contact) Brings the home-page tech aesthetic + Gen-Z motion to the rest of the store. Loaded on top of style.css only on these pages. ============================================================ */ /* Chakra Petch is loaded globally in base.html . */ /* ---- Ambient crimson glow behind the page (decorative, fixed) ---- */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(42vw 42vw at 82% -6%, rgba(220, 38, 38, 0.16), transparent 70%), radial-gradient(38vw 38vw at -8% 108%, rgba(220, 38, 38, 0.10), transparent 70%); } .main { position: relative; z-index: 1; } /* ============================================================ Big tech page title (matches the hero headline language) ============================================================ */ .page-title { font-family: 'Chakra Petch', 'Outfit', sans-serif; font-size: clamp(2.2rem, 6vw, 3.6rem) !important; font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; margin: 0.4rem 0 1.6rem !important; background: linear-gradient(100deg, #ffffff 0%, #ffffff 42%, var(--accent) 62%, #ff6a6a 78%, #ffffff 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pageTitleSheen 7s linear infinite; } .page-title::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 0.7rem; border-radius: 4px; background: linear-gradient(90deg, var(--accent), transparent); animation: underlineGrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes pageTitleSheen { to { background-position: 220% center; } } @keyframes underlineGrow { from { width: 0; opacity: 0; } to { width: 72px; opacity: 1; } } /* ============================================================ Catalog grid — tighter, more refined cards (were too large) ============================================================ */ .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 1.1rem !important; } .grid .card__media { aspect-ratio: 1 / 1; } .grid .card__body { padding: 0.9rem 0.95rem 1rem; gap: 0.4rem; } .grid .card__brand { font-size: 0.68rem; letter-spacing: 1px; } .grid .card__name { font-size: 0.98rem; line-height: 1.25; } .grid .card__specs { font-size: 0.78rem; /* Keep specs to two lines so cards stay uniform */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .grid .card__price { font-size: 1.1rem; } .grid .card .variant-select { font-size: 0.82rem; padding: 0.45rem 0.55rem; } .grid .card .btn { padding: 0.55rem 0.9rem; font-size: 0.86rem; } .grid .card .field__label { font-size: 0.72rem; } .grid .chip { font-size: 0.68rem; padding: 0.12rem 0.5rem; } /* ============================================================ Flavour picker (product page) Tiles instead of a dropdown: every option and its stock state is visible at a glance, and each is a proper tap target. The