/* =================================================================== Protect-Me — Colors & Typography Foundation Pulled directly from uploads/style.css (the live site stylesheet) Aesthetic: "Warm Editorial" — premium, story-driven, family-friendly =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,500&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); :root { /* ---------- TYPEFACES ---------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ---------- BRAND COLOR (signature terracotta orange) ---------- */ --brand: #d4411e; /* primary — used for accents, buttons, italics */ --brand-light: #f0654a; /* hover highlights / accent type in logo */ --brand-dark: #b8351a; /* pressed / hover-darken */ --brand-bg: rgba(212, 65, 30, 0.06); /* pill / quote background */ --brand-glow: rgba(212, 65, 30, 0.18); /* radial bloom behind hero */ /* ---------- DARK NEUTRALS (navigation / CTA band / footer) ---------- */ --dark: #0f172a; /* slate-900 — nav, CTA background */ --dark-soft: #1e293b; /* slate-800 — footer, hover fills */ /* ---------- TEXT TOKENS ---------- */ --text: #1e293b; /* body text on warm bg */ --text-secondary: #475569; /* supporting copy */ --text-muted: #94a3b8; /* captions, metadata */ /* ---------- WARM NEUTRALS (the "editorial cream" palette) ---------- */ --bg: #faf8f5; /* primary page background — warm off-white */ --bg-white: #ffffff; /* true white (feature section, cards) */ --bg-soft: #f1eeea; /* slightly warmer panel / table header */ --border: #e7e1d9; --border-light: #f0ece6; /* ---------- SEMANTIC STATES (status pills, story results) ---------- */ --danger: #dc2626; --danger-bg: #fef2f2; --danger-border: #fecaca; --warning: #d97706; --warning-bg: #fffbeb; --warning-border: #fed7aa; --safe: #16a34a; --safe-bg: #f0fdf4; --safe-border: #bbf7d0; /* ---------- RADII ---------- */ --radius-sm: 10px; /* buttons, pills, inline results */ --radius: 16px; /* cards */ --radius-lg: 24px; /* oversized "coming soon" wells */ /* ---------- ELEVATION ---------- */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.03); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04); --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.10); /* Brand-tinted elevation (for primary CTAs) */ --shadow-brand-sm: 0 4px 16px rgba(212, 65, 30, 0.25); --shadow-brand-md: 0 8px 24px rgba(212, 65, 30, 0.30); /* ---------- LAYOUT ---------- */ --container: 1120px; /* ---------- MOTION ---------- */ --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); /* scroll-reveal */ --ease-button: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* buttons, cards */ --t-fast: 0.2s; --t-base: 0.3s; --t-slow: 0.7s; /* ---------- SEMANTIC TYPE ROLES (opinionated defaults) ---------- */ --h1-size: clamp(2.2rem, 5vw, 4rem); --h1-weight: 700; --h1-lh: 1.1; --h1-track: -0.02em; --h2-size: clamp(2rem, 3.5vw, 2.8rem); --h2-weight: 700; --h2-lh: 1.2; --h2-track: -0.01em; --h3-size: 1.25rem; --h3-weight: 600; --body-size: 1rem; --body-lh: 1.65; --lead-size: 1.2rem; /* hero sub, section sub */ --lead-lh: 1.7; --label-size: 0.8rem; /* section label / hero badge */ --label-track: 0.15em; /* 0.08em for hero badge */ --caption-size: 0.85rem; } /* =================================================================== DARK MODE — activated by [data-theme="dark"] on or . The in-app Settings screen exposes this as a theme toggle. Philosophy: keep terracotta as-is; invert the cream palette into a warm-toned dark (not cold slate), so "warm editorial" survives. =================================================================== */ [data-theme="dark"] { /* Brand stays the hero — slightly brighter for legibility on dark */ --brand: #f0654a; --brand-light: #ff8468; --brand-dark: #d4411e; --brand-bg: rgba(240, 101, 74, 0.10); --brand-glow: rgba(240, 101, 74, 0.22); /* Dark neutrals become the "navigation highlight" — now inverted */ --dark: #f5f1ea; /* used where cream was used in light mode */ --dark-soft: #e7e1d9; /* Text on dark backgrounds */ --text: #f1ece4; --text-secondary: #c9c0b3; --text-muted: #857e74; /* Warm dark surfaces — umber/espresso, not slate */ --bg: #1a1613; /* page — warm near-black */ --bg-white: #221d19; /* elevated card surface */ --bg-soft: #2a241f; /* panel / hover fill */ --border: #3a322c; --border-light: #2e2823; /* Semantic states — rebalanced for dark contrast */ --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.12); --danger-border: rgba(239, 68, 68, 0.35); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --warning-border: rgba(245, 158, 11, 0.35); --safe: #22c55e; --safe-bg: rgba(34, 197, 94, 0.12); --safe-border: rgba(34, 197, 94, 0.35); /* Shadows are much subtler in dark mode — light doesn't "pool" */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-brand-sm: 0 4px 16px rgba(240, 101, 74, 0.35); --shadow-brand-md: 0 8px 24px rgba(240, 101, 74, 0.40); } /* Dark mode: h1-h6 read from --text, not --dark (which inverts) */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text); } /* Respect user's OS preference if no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* =================================================================== Semantic element defaults — applied when this stylesheet is linked. These mirror the live Protect-Me site exactly. =================================================================== */ body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: var(--body-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2; color: var(--dark); } h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-track); } h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-track); } h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); } p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--text); } a { color: var(--brand); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--brand-dark); } ::selection { background: rgba(212, 65, 30, 0.15); color: var(--dark); } /* A common editorial move on the site: italic serif accent inside a display heading */ .accent-italic { color: var(--brand); font-style: italic; font-family: var(--font-display); } /* Eyebrow label with hairlines on either side */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: var(--label-size); font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-track); color: var(--brand); } .eyebrow::before, .eyebrow::after { content: ''; width: 32px; height: 1.5px; background: var(--brand); opacity: 0.4; }