/* Sadie's Custom Gifts — design system Shared aesthetic with charlotteclark.dev: dark, lime-accented. Fonts (Playfair Display + Inter) are loaded via in index.html . */ :root { --color-bg: #1a1714; --color-bg-secondary: #211e1a; --color-accent: #c8f53b; --color-accent-hover: #b8e52b; --color-text-primary: #f0ece4; --color-text-secondary: #a09990; --color-text-muted: #6b6258; --color-border: #2e2a25; --font-display: 'Playfair Display', serif; --font-body: 'Inter', sans-serif; --transition: all 0.3s ease; --radius: 4px; --max-width: 1200px; } /* ---------- Base reset ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: hidden; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } /* ---------- Accessibility ---------- */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; } a:focus-visible, button:focus-visible, .btn-primary:focus-visible, .btn-text-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } h1, h2, h3 { font-family: var(--font-display); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* ---------- Layout ---------- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; } /* ---------- Buttons ---------- */ /* Primary: pill-shaped CTA with diagonal fill-wipe + animated arrow */ .btn-primary { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-size: 1rem; line-height: 1; font-weight: 700; text-decoration: none; cursor: pointer; padding: 1.1rem 2.5rem; border: none; border-radius: 50px; background: var(--color-accent); color: #111; transition: transform 0.3s ease, box-shadow 0.3s ease, gap 0.3s ease; } .btn-primary::before { content: ""; position: absolute; top: -20%; left: 0; width: 130%; height: 140%; background: var(--color-accent-hover); transform: translateX(-115%) skewX(-18deg); transform-origin: left center; transition: transform 0.45s ease; } .btn-primary__label, .btn-primary__arrow { position: relative; z-index: 1; } .btn-primary__arrow { transition: transform 0.3s ease; } .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(200, 245, 59, 0.25); gap: 0.9rem; } .btn-primary:hover::before, .btn-primary:focus-visible::before { transform: translateX(-15%) skewX(-18deg); } .btn-primary:hover .btn-primary__arrow, .btn-primary:focus-visible .btn-primary__arrow { transform: translateX(4px); } /* Text link: pure text with a left-to-right underline draw */ .btn-text-link { position: relative; display: inline; font-family: var(--font-body); font-weight: 600; color: var(--color-accent); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; } .btn-text-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--color-accent); transition: width 0.3s ease; } .btn-text-link:hover::after, .btn-text-link:focus-visible::after { width: 100%; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .btn-primary:hover, .btn-primary:focus-visible { transform: none; } .btn-primary::before { display: none; } .btn-primary:hover .btn-primary__arrow, .btn-primary:focus-visible .btn-primary__arrow { transform: none; } .btn-text-link::after { display: none; } .btn-text-link:hover, .btn-text-link:focus-visible { text-decoration: underline; } } /* ---------- Hero ---------- */ .hero { background: var(--color-bg); padding-top: 5rem; padding-bottom: 2.5rem; } .hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; font-weight: 600; color: var(--color-accent); margin-bottom: 1.5rem; } .hero__headline { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; margin-bottom: 1.5rem; } .hero__line { display: block; } .hero__line--primary { color: var(--color-text-primary); } .hero__line--accent { color: var(--color-accent); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.25; margin-top: 0.75rem; } .hero__subtext { font-family: var(--font-body); color: var(--color-text-secondary); font-size: clamp(1rem, 2.5vw, 1.15rem); max-width: 600px; margin: 0 auto; } /* Staggered fade-in-up on load */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero__eyebrow, .hero__line, .hero__subtext { opacity: 0; animation: fade-in-up 0.7s ease forwards; } .hero__eyebrow { animation-delay: 0.1s; } .hero__line--primary { animation-delay: 0.4s; } .hero__line--accent { animation-delay: 0.7s; } .hero__subtext { animation-delay: 1s; } @media (prefers-reduced-motion: reduce) { .hero__eyebrow, .hero__line, .hero__subtext { animation: none; opacity: 1; } } /* ---------- Product showcase ---------- */ .showcase { background: var(--color-bg); padding-top: 2.5rem; padding-bottom: 1.25rem; } .showcase__heading { font-family: var(--font-display); color: var(--color-text-primary); text-align: center; font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 2.25rem; } .showcase__grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .product-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.3s ease; } .product-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .product-card:hover .product-card__img { transform: scale(1.06); } .product-card__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; background: linear-gradient( to bottom, rgba(26, 23, 20, 0) 0%, rgba(26, 23, 20, 0.6) 55%, rgba(26, 23, 20, 0.95) 100% ); transition: background 0.3s ease; } .product-card:hover .product-card__scrim { background: linear-gradient( to bottom, rgba(26, 23, 20, 0) 0%, rgba(26, 23, 20, 0.72) 50%, rgba(26, 23, 20, 0.98) 100% ); } .product-card__name { font-family: var(--font-body); font-weight: 600; color: var(--color-text-primary); font-size: 1rem; margin-bottom: 0.35rem; } .product-card__price { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); font-size: 1.25rem; } @media (prefers-reduced-motion: reduce) { .product-card:hover .product-card__img { transform: none; } } .showcase__note { margin-top: 2rem; margin-bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; font-family: var(--font-body); color: var(--color-text-secondary); font-size: 1rem; } .showcase__note-line { display: block; } .showcase__note .btn-text-link { color: var(--color-accent); font-weight: 700; } /* ---------- Bulk discount callout ---------- */ .bulk { background: var(--color-bg); padding-top: 1.25rem; padding-bottom: 3rem; } /* Two distinct blocks: automatic reward + separate bulk-quote offer */ .bulk__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3rem; } .bulk__reward, .bulk__quote { display: flex; flex-direction: column; align-items: center; max-width: 640px; } .bulk__reward { gap: 0.5rem; } .bulk__quote { gap: 0; } .bulk__statement { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.15; color: var(--color-text-primary); max-width: var(--max-width); margin-bottom: 0.9rem; } .bulk__statement .accent { color: var(--color-accent); white-space: nowrap; } .bulk__fineprint { font-family: var(--font-body); font-style: italic; color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.5; max-width: 42ch; } .bulk__quote-lead { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; color: var(--color-text-primary); margin-bottom: 0.85rem; } .bulk__quote-text { font-family: var(--font-body); color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.6; max-width: 34rem; margin-bottom: 1.5rem; } .btn-primary--sm { padding: 0.5rem 1.25rem; font-size: 0.85rem; } /* ---------- Footer ---------- */ .footer { background: var(--color-bg); padding: 3rem 2rem 2rem; } .footer__inner { max-width: var(--max-width); margin: 0 auto; text-align: center; } .footer__note { font-family: var(--font-body); color: var(--color-text-primary); font-size: 1.1rem; line-height: 1.6; max-width: 46ch; margin: 0 auto; } .footer__divider { border: 0; border-top: 1px solid var(--color-border); margin: 2rem auto; } .footer__copyright { font-family: var(--font-body); color: var(--color-text-muted); font-size: 0.8rem; } /* ---------- Responsive ---------- */ /* Phone: under 480px */ @media (max-width: 479px) { .container { padding: 0 1.25rem; } .hero { padding-top: 3.5rem; padding-bottom: 1.5rem; } .hero__headline { font-size: clamp(1.9rem, 8.5vw, 2.4rem); } .showcase__grid { grid-template-columns: 1fr; gap: 1.5rem; } .showcase__heading { margin-bottom: 1rem; } .showcase { padding-top: 1.25rem; padding-bottom: 1rem; } .bulk { padding-top: 1rem; padding-bottom: 2rem; } .bulk__inner { gap: 2.5rem; } .footer { padding: 2.5rem 1.25rem 2rem; } } /* Phone hero headline: only inside max-width 480px */ @media (max-width: 480px) { .hero__line--primary { display: block; font-size: 3.25rem; line-height: 1.05; } .hero__line--accent { font-size: 1.35rem; line-height: 1.3; } /* Turn the inline space into a hard line break so "We do it all." always starts its own line. */ .hero__accent-break { display: block; height: 0; } } /* Tablet: 480px – 899px */ @media (min-width: 480px) and (max-width: 899px) { .container { padding: 0 1.5rem; } .hero { padding-top: 4.5rem; padding-bottom: 2.5rem; } .showcase__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .bulk { padding-top: 1.25rem; padding-bottom: 2.5rem; } .showcase { padding-top: 2.5rem; padding-bottom: 1.25rem; } } /* Desktop: 900px and up */ @media (min-width: 900px) { .container { padding: 0 2rem; } .hero { padding-top: 5rem; padding-bottom: 2rem; } .showcase { padding-top: 2rem; padding-bottom: 1.25rem; } .bulk { padding-top: 1.25rem; padding-bottom: 3rem; } .bulk__inner { gap: 3.5rem; } }