/* ============================================================ SUPERFLY — BASE STYLES (shared by every page) ------------------------------------------------------------ This file holds the things that are the SAME on every page: 1. The brand fonts 2. The brand color palette (edit colors here once → all pages update) 3. A tiny CSS reset Page-specific styling lives in: assets/css/home.css, cocktails.css, find-a-bottle.css Most day-to-day changes are TEXT/IMAGES → edit the JSON in /data instead of touching CSS at all. See EDITING-GUIDE.md. ============================================================ */ /* ---------- BRAND FONTS ---------- Font files live in assets/fonts/. To swap a font, replace the file (keep the same name) or update the url() below. */ /* Neue Haas Grotesk Display Pro — headlines / structural type */ @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('../fonts/NeueHaasDisplayLight.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('../fonts/NeueHaasDisplayLightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('../fonts/NeueHaasDisplayRoman.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('../fonts/NeueHaasDisplayRomanItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('../fonts/NeueHaasDisplayMediu.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('../fonts/NeueHaasDisplayMediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('../fonts/NeueHaasDisplayBold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('../fonts/NeueHaasDisplayBoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } /* Helvetica Neue LT Std — eyebrows / labels / UI type */ @font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-Th.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-Lt.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-LtIt.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-Roman.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-Md.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-MdIt.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-Blk.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } /* Choplin — body copy (DEMO build; license the full family for production) */ @font-face { font-family: 'Choplin'; src: url('../fonts/Choplin-ExtraLight-DEMO.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Choplin'; src: url('../fonts/Choplin-Medium-DEMO.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } /* Whiskey Jill — vintage display face matching the SUPERFLY bottle wordmark (DEMO build — license the full family for production). */ @font-face { font-family: 'Whiskey Jill'; src: url('../fonts/WhiskeyJillDemo.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- BRAND COLOR PALETTE ---------- Change a value here and it updates everywhere on the site. Premium dark charcoal + warm cream + muted copper. */ :root { --bg-1: #0E0D0B; /* primary background */ --bg-2: #171310; /* secondary dark */ --bg-3: #1B1612; /* deep espresso section background */ --cream: #F4EFE6; /* warm cream — headings, key text */ --cream-dim: #C8BFB2; /* muted body text */ --cream-faint: rgba(244, 239, 230, 0.42); --gold: #B57A45; /* muted copper — primary accent */ --gold-hover: #C88952; /* brighter copper for hover states */ --gold-soft: #D8B88A; /* soft tan — secondary accent */ --rule: rgba(216, 184, 138, 0.22); /* divider / border */ --shadow: rgba(0, 0, 0, 0.35); /* soft shadow tint */ } /* ---------- RESET ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ PREMIUM POLISH — additive, additive only. Scroll-triggered fade-up reveals + floating Buy CTA. Both are progressive enhancements: if JS doesn't load, content stays fully visible and the floating CTA simply never appears. ============================================================ */ /* Scroll-reveal fade-up. .reveal is applied by interactions.js; the .js-ready guard prevents content from being invisible if JS fails. */ .js-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } .js-ready .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js-ready .reveal, .js-ready .reveal.visible { opacity: 1; transform: none; transition: none; } } /* Floating "Buy Superfly" CTA. Desktop: copper pill bottom-right. Mobile: full-width-ish copper bar near the bottom edge. JS toggles .visible when past the hero and not yet near the footer. */ .floating-buy { position: fixed; bottom: 24px; right: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--gold); color: #0E0D0B; font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 100px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 320ms ease, transform 320ms ease, background 200ms ease; } .floating-buy.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .floating-buy:hover { background: var(--gold-hover); } .floating-buy-arrow { font-size: 14px; transition: transform 200ms ease; } .floating-buy:hover .floating-buy-arrow { transform: translateX(3px); } @media (max-width: 720px) { .floating-buy { /* Sticky bottom bar, leaves small inset so it doesn't hug edges */ left: 12px; right: 12px; bottom: 12px; justify-content: center; padding: 16px 24px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .floating-buy { transition: opacity 200ms ease; transform: none; } .floating-buy.visible { transform: none; } .floating-buy:hover .floating-buy-arrow { transform: none; } }