/* ========================================================================== Suncoast Shopping Network — site styles Plain CSS. No build step. Tailwind utilities are generated at runtime by the CDN script in each page's ; this file holds everything else: the design tokens, the shared form components, and a few helper classes. To rebrand, change the hex values in :root below — every page follows. ========================================================================== */ :root { /* Colour tokens ------------------------------------------------------ */ --background: #ffffff; --foreground: #1a2e05; --primary: #65a30d; --primary-foreground: #ffffff; --secondary: #f7fee7; --muted: #ecfccb; --muted-foreground: #4d7c0f; --accent: #facc15; --accent-foreground: #1a2e05; --destructive: #dc2626; --border: rgba(101, 163, 13, 0.18); --input-background: #f7fee7; --ring: #84cc16; /* Shape -------------------------------------------------------------- */ --radius: 0.75rem; /* Type --------------------------------------------------------------- */ --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --font-display: "Fraunces", ui-serif, Georgia, serif; --font-condensed: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input, select, textarea { font-family: inherit; } /* -------------------------------------------------------------------------- Type helpers -------------------------------------------------------------------------- */ .font-display { font-family: var(--font-display); } .font-condensed { font-family: var(--font-condensed); } /* -------------------------------------------------------------------------- Decorative helpers -------------------------------------------------------------------------- */ /* Lime -> yellow gradient behind the CTA panel */ .cta-gradient { background: linear-gradient(135deg, #84cc16 0%, #facc15 100%); } /* Dotted overlay on the CTA panel */ .cta-dots { background-image: radial-gradient(circle, white 1.5px, transparent 1.5px); background-size: 28px 28px; } /* 16:9 responsive video frame */ .ratio-16-9 { padding-bottom: 56.25%; } /* -------------------------------------------------------------------------- Form components -------------------------------------------------------------------------- */ .field { width: 100%; background-color: var(--secondary); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.75rem 1rem; color: var(--foreground); font-size: 1rem; transition: all 0.15s ease; } .field::placeholder { color: var(--muted-foreground); } .field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring); } /* Field with a leading icon */ .field--icon { padding-left: 2.5rem; } /* Field with both a leading icon and a trailing button */ .field--icon-both { padding-left: 2.5rem; padding-right: 2.5rem; letter-spacing: 0.1em; } /* White-background variant used on the contact form */ .field--white { background-color: #ffffff; } .field-label { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; } .field-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--muted-foreground); } .field-error { color: var(--destructive); font-size: 0.75rem; line-height: 1rem; margin-top: 0.25rem; } /* ========================================================================== Motion -------------------------------------------------------------------------- Everything here is progressive enhancement: • Reveal styles are scoped to `.js`, a class added by a tiny inline script in each . If JavaScript fails or is disabled, nothing is ever hidden — the page just renders static. • All of it is disabled under `prefers-reduced-motion: reduce`. • Transform-based hovers are only applied to elements that do NOT carry a Tailwind transform utility (e.g. `active:scale-[0.98]`), because this stylesheet is unlayered and would otherwise override them. ========================================================================== */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-reveal: 750ms; --dur-hover: 300ms; } /* --- Scroll / load reveal ------------------------------------------------ */ .js [data-anim] { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out) var(--anim-delay, 0ms), transform var(--dur-reveal) var(--ease-out) var(--anim-delay, 0ms); } .js [data-anim="up"] { transform: translate3d(0, 24px, 0); } .js [data-anim="fade"] { transform: none; } .js [data-anim="zoom"] { transform: scale(0.965); } .js [data-anim="left"] { transform: translate3d(-28px, 0, 0); } .js [data-anim="right"] { transform: translate3d(28px, 0, 0); } .js [data-anim].is-in { opacity: 1; transform: none; } /* --- Hover: lift (cards — safe, no Tailwind transform on these) ---------- */ .hover-lift { transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); } .hover-lift:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 14px 30px -12px rgba(26, 46, 5, 0.22); } /* --- Hover: glow (for buttons that already use Tailwind transforms) ------ */ .hover-glow { transition: box-shadow var(--dur-hover) var(--ease-out), opacity var(--dur-hover) ease; } .hover-glow:hover { box-shadow: 0 10px 26px -10px rgba(101, 163, 13, 0.65); } /* --- Hover: slow image zoom inside an overflow-hidden parent ------------- */ .zoom-wrap img { transition: transform 900ms var(--ease-out); } .zoom-wrap:hover img { transform: scale(1.06); } /* --- Sticky header gains elevation once the page scrolls ---------------- */ .nav-elevate { transition: box-shadow 350ms ease; } .nav-elevate.is-stuck { box-shadow: 0 6px 24px -10px rgba(26, 46, 5, 0.18); } /* --- Small chevron nudge on link hover ---------------------------------- */ .nudge svg { transition: transform var(--dur-hover) var(--ease-out); } .nudge:hover svg { transform: translate3d(3px, 0, 0); } /* --- Confirmation cards (signup success / message sent) ----------------- */ @keyframes ssn-pop-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.97); } to { opacity: 1; transform: none; } } .pop-in { animation: ssn-pop-in 600ms var(--ease-out) both; } /* --- Respect the user's motion preference ------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-anim], .js [data-anim].is-in { opacity: 1 !important; transform: none !important; transition: none !important; } .hover-lift, .hover-glow, .zoom-wrap img, .nav-elevate, .nudge svg { transition: none !important; } .hover-lift:hover, .zoom-wrap:hover img, .nudge:hover svg { transform: none !important; } .pop-in { animation: none !important; } }