/* * theme-ads.css — 3rd Street Designs Inc. * ───────────────────────────────────────────────────── * Light-baseline SaaS variant, duplicated from theme.css per that file's * own instructions ("swap or duplicate this file to experiment with a * new look"). Used by index-updated-for-ads.html only — production * index.html still points at theme.css. * * Direction: move the base canvas from all-dark to a light SaaS look * (#FAFAFA body, #FFFFFF cards, frosted borders), while high-impact * anchor sections (hero, five-contrasts, $499 audit) keep the dark * navy treatment via --color-anchor / --color-anchor-alt. */ /* ── Design Tokens ──────────────────────────────────── */ :root { --color-primary: #001f3f; /* deep navy — kept for anchor sections */ --color-primary-dark: #001328; /* darker navy — kept for anchor sections */ --color-anchor: #0F172A; /* modern dark navy for high-impact anchor sections */ --color-anchor-alt: #001f3f; /* deep navy, secondary anchor tone */ --color-canvas: #FAFAFA; /* light baseline page background */ --color-canvas-card: #FFFFFF; /* solid card surface on light sections */ --color-ink: #0F172A; /* primary text on light canvas */ --color-ink-muted: #475569; /* secondary text on light canvas */ --color-accent: #06b6d4; /* cyan-500 */ --color-accent-dark: #0891b2; /* cyan-600 */ --font-body: 'Inter', sans-serif; --font-display: 'Urbanist', sans-serif; } /* ── Base Typography ────────────────────────────────── */ /* !important needed: already carries Tailwind's bg-[#001f3f] text-slate-200 utility classes inline, which outrank a plain element selector on specificity alone. */ body { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; font-family: var(--font-body); } /* Headings use the display font. Scoped to h1-h6 and .font-heading only — do NOT widen this to * or body text: Tailwind's tracking-widest / tracking-[0.2em] utility classes used on nav links, buttons, badges, and eyebrows have higher specificity than this rule and are meant to keep working untouched. This only resets letter-spacing for headings that don't already carry an explicit tracking-* class. */ h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-display); letter-spacing: 0em; } /* ── Hero Gradient (anchor sections) ────────────────── */ .hero-gradient { background: radial-gradient(circle at top right, #003366, var(--color-anchor-alt)); } /* ── Navigation — colour enforcement ───────────────── */ /* Forces deep navy text on all nav items across scroll states */ #nav-container span:not(.text-cyan-400), #nav-container a:not(.bg-cyan-600) { color: var(--color-anchor-alt) !important; } /* Free Audit CTA button keeps white text */ #nav-container a.bg-cyan-600 { color: white !important; } /* ── Navigation — scrolled state ───────────────────── */ .nav-scrolled { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border-bottom: 1px solid rgba(0, 31, 63, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } /* ── Glassmorphism card utility ─────────────────────── */ /* Light semi-transparent surface for cards on the light canvas: subtle blur, clean light border, soft depth shadow. Radius is left to the consumer via Tailwind's rounded-* utilities, same pattern as .glass and .nav-glass in components.css. */ .glass-card { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08); }