/* ===== A1 CONNECT — Product Page Hero + Specs ===== Requires in , in this order: base.css, header.css, product-hero.css. This file duplicates (deliberately, not shared) the button styles, the animated gradient heading technique, and the review-card visual component from hero.css. Every rule below is scoped under .product-hero so that when this file and hero.css are BOTH loaded on the same page (the home page preview, where Product is a #product section below the hero), the two review-card / button components never collide — same class names, same specificity, so without scoping whichever file loads second silently wins for both sections. */ :root { --ph-black: #060606; --ph-black-soft: #121212; } /* Section */ .product-hero { position: relative; scroll-margin-top: 90px; /* offset for the sticky header when this section is a #product anchor target on the home page */ background: radial-gradient(900px 420px at 85% -10%, rgba(59,130,246,0.22), transparent 60%), radial-gradient(700px 400px at 5% 110%, rgba(59,130,246,0.1), transparent 60%), linear-gradient(180deg, var(--ph-black) 0%, var(--ph-black-soft) 100%); color: #ffffff; padding: 96px 0 100px; overflow: hidden; } .product-hero .eyebrow { color: var(--gold-light); background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.4); } .product-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .product-hero h1 { font-family: "Sora", "Inter", sans-serif; line-height: 1.08; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(2.4rem, 4.6vw, 3.6rem); background: linear-gradient(100deg, #ffffff 0%, #cfe0ff 22%, #8fb8ff 45%, #ffffff 65%, #cfe0ff 85%, #8fb8ff 100%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 42px rgba(59,130,246,0.28); animation: productHeroGradientMove 7s ease-in-out infinite; } @keyframes productHeroGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .product-hero p.lead { color: rgba(255,255,255,0.68); font-weight: 400; font-size: 1.05rem; line-height: 1.7; max-width: 480px; } /* Spec list */ .product-hero .spec-list { list-style: none; margin: 30px 0 34px; padding: 0; display: flex; flex-direction: column; gap: 0; max-width: 460px; } .product-hero .spec-list li { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.09); font-size: 0.98rem; } .product-hero .spec-list li:last-child { border-bottom: none; padding-bottom: 0; } .product-hero .spec-list .spec-label { color: rgba(255,255,255,0.5); font-weight: 700; min-width: 150px; flex-shrink: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; } .product-hero .spec-list .spec-value { color: #ffffff; font-weight: 600; } .product-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; } /* Buttons (.btn / .btn-primary / .btn-outline) now live in base.css as a shared component used across hero, product-hero, and industries sections. */ /* Review card visual component — no badge ring here (this section is showcasing the product itself), but with the card's backside peeking out behind the front face to show it's a real, physical two-sided card. Scoped to .product-hero so it never affects the home hero's identically-named card. */ .product-hero .review-card-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; } .product-hero .review-card-backing { position: absolute; top: 50%; left: 50%; width: 82%; aspect-ratio: 1 / 1; border-radius: 30px; overflow: hidden; background-color: #eef1f7; background-image: url("assets/tape-tile.svg"), repeating-linear-gradient(0deg, rgba(20,60,140,0.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(20,60,140,0.06) 0 1px, transparent 1px 22px); background-size: 190px 88px, 22px 22px, 22px 22px; background-position: 0 0, 0 0, 0 0; background-repeat: repeat, repeat, repeat; border: 1px solid rgba(15, 33, 78, 0.08); transform: translate(-50%, -50%) rotate(-9deg) translate(-26px, -22px); box-shadow: 0 20px 45px rgba(0,0,0,0.35); z-index: 0; } .product-hero .review-card-frame { position: relative; width: 82%; aspect-ratio: 1/1; border-radius: 30px; z-index: 1; transform: rotate(4deg); } .product-hero .review-card { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45)); } @media (max-width: 900px) { .product-hero-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .product-hero { padding: 64px 0 56px; } .product-hero-grid { gap: 40px; } .product-hero .spec-list .spec-label { min-width: 120px; } .product-hero-actions { flex-direction: column; align-items: stretch; } .product-hero-actions .btn { width: 100%; } }