/* ===== A1 CONNECT — Shop / Purchase Page ===== Requires in , in this order: base.css, header.css, shop.css. Self-contained — dark intro hero + a light bundle-tier grid below. Reuses base.css's .card / .btn / .btn-primary utilities where possible. */ :root { --shop-black: #060606; --shop-black-soft: #121212; } /* Intro hero */ .shop-hero { position: relative; 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(--shop-black) 0%, var(--shop-black-soft) 100%); color: #ffffff; padding: 96px 0 80px; overflow: hidden; text-align: center; } .shop-hero .eyebrow { color: var(--gold-light); background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.4); } .shop-hero h1 { font-family: "Sora", "Inter", sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(2.1rem, 4.2vw, 3.1rem); margin: 0 auto 18px; max-width: 700px; color: #ffffff; } .shop-hero p.lead { color: rgba(255,255,255,0.68); font-size: 1.05rem; line-height: 1.7; max-width: 560px; margin: 0 auto; } /* Tier grid */ .tier-section { background: #ffffff; } .tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .tier-card { position: relative; border: 2.5px solid transparent; border-radius: var(--radius); padding: 26px 20px 24px; text-align: center; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(90deg, #5b9dff, #1d4ed8, #3b82f6, #8fb8ff, #1d4ed8, #5b9dff); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 300% 100%; animation: tierBorderMove 6s linear infinite; } .tier-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,33,78,0.12); } @keyframes tierBorderMove { 0% { background-position: 0 0, 0% 0; } 100% { background-position: 0 0, 100% 0; } } .tier-card.featured { border-width: 3px; box-shadow: 0 14px 34px rgba(59, 130, 246, 0.28); } .tier-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background-image: linear-gradient(135deg, #5b9dff, var(--gold) 55%, var(--gold-dark)); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(59,130,246,0.4); } /* Stacked-card visual — the real card product photo, fanned out to represent how many cards come in the bundle (capped visually at 6). */ .stack { position: relative; width: 100%; height: 150px; margin-bottom: 16px; } .card-face { position: absolute; left: 50%; bottom: 4px; width: 74px; height: auto; margin-left: -37px; filter: drop-shadow(0 6px 10px rgba(15,33,78,0.28)); } .stack .card-face:nth-child(1) { transform: translate(-35px, 0) rotate(-10deg); z-index: 1; } .stack .card-face:nth-child(2) { transform: translate(-21px, -8px) rotate(-5deg); z-index: 2; } .stack .card-face:nth-child(3) { transform: translate(-7px, -16px) rotate(0deg); z-index: 3; } .stack .card-face:nth-child(4) { transform: translate(7px, -24px) rotate(5deg); z-index: 4; } .stack .card-face:nth-child(5) { transform: translate(21px, -32px) rotate(10deg); z-index: 5; } .stack .card-face:nth-child(6) { transform: translate(35px, -40px) rotate(15deg); z-index: 6; } /* Centered overrides for stacks with fewer than 6 cards, so the group's horizontal center lines up with the box regardless of card count. */ .stack-5 .card-face:nth-child(1) { transform: translate(-28px, 0) rotate(-10deg); } .stack-5 .card-face:nth-child(2) { transform: translate(-14px, -8px) rotate(-5deg); } .stack-5 .card-face:nth-child(3) { transform: translate(0, -16px) rotate(0deg); } .stack-5 .card-face:nth-child(4) { transform: translate(14px, -24px) rotate(5deg); } .stack-5 .card-face:nth-child(5) { transform: translate(28px, -32px) rotate(10deg); } .stack-1 .card-face:nth-child(1) { transform: translate(0, -8px) rotate(-6deg); } .tier-card h3 { font-size: 1.05rem; margin: 0 0 4px; color: var(--gray-800); } .tier-qty { margin: 0 0 12px; font-size: 0.85rem; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; letter-spacing: 0.04em; } .tier-unit { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--gray-800); font-family: "Sora", "Inter", sans-serif; } .tier-unit span { font-size: 0.8rem; font-weight: 600; color: var(--gray-600); } .tier-total { margin: 2px 0 18px; font-size: 0.82rem; color: var(--gray-600); } .tier-add { margin-top: auto; width: 100%; padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; cursor: pointer; border: none; color: #ffffff; background-color: #1d4ed8; background-image: linear-gradient(135deg, #5b9dff, #3b82f6 55%, #1d4ed8); box-shadow: 0 10px 22px rgba(59, 130, 246, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease; } .tier-add:hover { transform: translateY(-2px); } .tier-add.added { background-image: none; background-color: #16a34a; box-shadow: 0 10px 22px rgba(22,163,74,0.35); } @media (max-width: 980px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .shop-hero { padding: 64px 0 56px; } .tier-grid { grid-template-columns: 1fr; } }