/* ============================================================ 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; } @media (max-width: 640px) { .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 0.8rem !important; } } /* ============================================================ Catalog cards — richer hover, crimson glow, image zoom + shine ============================================================ */ .grid .card { position: relative; border-radius: 16px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease; will-change: transform; } .grid .card:hover { transform: translateY(-8px); border-color: var(--border-2); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 34px rgba(220, 38, 38, 0.18); } .grid .card__media img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .grid .card:hover .card__media img { transform: scale(1.08); } /* Diagonal light sweep across the media on hover */ .grid .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%); transform: translateX(-120%); transition: transform 0.7s ease; pointer-events: none; } .grid .card:hover .card__media::after { transform: translateX(120%); } /* Animated brand kicker underline */ .grid .card__brand { position: relative; display: inline-block; } .grid .card:hover .card__brand { text-shadow: 0 0 14px rgba(220, 38, 38, 0.5); } /* Chips: subtle pop on card hover */ .chip { transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .grid .card:hover .chip { border-color: var(--border-2); background: rgba(220, 38, 38, 0.08); } /* Price gets the gradient-tech treatment */ .card__price { font-family: 'Chakra Petch', 'Outfit', sans-serif; } /* ============================================================ Search / filter bar ============================================================ */ .card-surface { transition: border-color 0.3s ease, box-shadow 0.3s ease; } .card-surface:focus-within { border-color: var(--border-2); box-shadow: 0 0 26px rgba(220, 38, 38, 0.12); } /* ============================================================ Product detail (PDP) ============================================================ */ .pdp__media { position: relative; border-radius: 18px; overflow: hidden; animation: pdpFloat 7s ease-in-out infinite; } .pdp__media::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; background: linear-gradient(140deg, rgba(220, 38, 38, 0.5), transparent 45%, rgba(220, 38, 38, 0.28)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .pdp__media img { transition: transform 0.6s ease; } .pdp__media:hover img { transform: scale(1.04); } @keyframes pdpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .pdp__title { font-family: 'Chakra Petch', 'Outfit', sans-serif; font-size: clamp(1.9rem, 4.5vw, 2.8rem) !important; letter-spacing: 0.01em; } .pdp__info .card__price--lg { font-family: 'Chakra Petch', 'Outfit', sans-serif; background: linear-gradient(100deg, #ffffff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ Contact page ============================================================ */ .contact-info-item { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .contact-info-item:hover { transform: translateX(6px); } .contact-info-icon { display: inline-grid; place-items: center; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .contact-info-item:hover .contact-info-icon { transform: scale(1.25) rotate(-8deg); } /* Full-width Google Maps embed below the two contact cards */ .map-section { margin-top: 1.5rem; } .map-frame { position: relative; width: 100%; height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-2); box-shadow: var(--shadow); transition: box-shadow 0.4s ease; } .map-frame::after { /* Crimson inner frame glow that lifts on hover */ content: ""; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.5); pointer-events: none; transition: box-shadow 0.4s ease; } .map-frame:hover { box-shadow: var(--shadow), 0 0 34px rgba(220, 38, 38, 0.2); } .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; /* Dark-mode the light Google tiles to fit the theme; true colour on hover */ filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9); transition: filter 0.5s ease; } .map-frame:hover iframe { filter: none; } @media (max-width: 640px) { .map-frame { height: 320px; } } /* ============================================================ Buttons — animated crimson glow sweep (Gen-Z touch) ============================================================ */ .btn--primary { position: relative; overflow: hidden; } .btn--primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.6s ease; } .btn--primary:hover::before { transform: translateX(120%); } .btn--primary > * { position: relative; z-index: 1; } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .page-title, .pdp__media, .page-title::after { animation: none !important; } .grid .card, .grid .card__media img, .grid .card__media::after, .contact-info-item, .contact-info-icon, .btn--primary::before { transition: none !important; } }