/* ========================================================================== Family Points marketing site: the one stylesheet for every page. Light theme only. No web fonts, no imports, nothing from other domains. Groups: 1 Colors, 2 Base, 3 Layout, 4 Type, 5 Buttons, 6 Cards and tags, 7 Kid avatars, 8 Sections (page-specific rules go last: 8a header, 8b hero, 8c comparison, 8d AI help, 8e practice, 8f points and requests, 8g for kids, 8h stickers and gifts, 8i LED board, 8j privacy, 8k closing, 8l footer), 9 Phones (one breakpoint). ========================================================================== */ /* 1. COLORS -------------------------------------------------------------- Every color lives here once. Use var(--name) everywhere else. */ :root { /* Brand */ --blue: #2F5BEA; /* main brand blue: buttons, links */ --navy: #1E3A8A; /* dark blue: gradients, strong text on light blue */ --blue-tint: #E6ECFE; /* light blue tag background */ --blue-wash: #EEF2FE; /* very light blue highlight */ --blue-soft-text: #E6ECFE; /* text on the dark blue and navy panels (4.5:1 or better) */ --green-wash: #EAF7EF; /* very light green band */ /* Backgrounds */ --bg: #F7F8FA; /* page background */ --white: #FFFFFF; /* cards */ --ink: #0E1530; /* very dark navy: phone frames */ /* Text and greys, dark to light */ --text: #11181C; /* main text */ --grey-1: #3C4449; --grey-2: #4B5459; /* body text on white */ --grey-3: #687076; /* small, quiet text */ --grey-4: #C1C8CD; /* borders, empty dots */ --grey-5: #E6E8EB; /* thin lines, empty bars */ --grey-6: #F1F3F5; /* light chips */ /* Green for good things (+ points, Approve) */ --green-text: #18794E; /* text on light green */ --green-tint: #E6F6EB; /* light green background */ /* Amber for notes */ --amber-text: #5C4300; --amber-tint: #FFF4D6; /* The 8 kid colors (same as the app and the LED board) */ --red: #E5484D; --orange: #F76B15; --yellow: #FFC53D; --green: #30A46C; --sky: #0EA5E9; --purple: #8E4EC6; --pink: #D6409F; --teal: #12A594; /* Shape */ --radius-s: 8px; --radius-m: 12px; --radius-l: 18px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-phone: 0 28px 60px rgba(0, 0, 0, 0.45); --shadow-row: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-request: 0 6px 24px rgba(17, 24, 28, 0.08); --shadow-hover: 0 6px 20px rgba(17, 24, 28, 0.12); --shadow-result: 0 10px 30px rgba(17, 24, 28, 0.1); --shadow-menu: 0 10px 30px rgba(17, 24, 28, 0.18); --shadow-board: 0 16px 40px rgba(17, 24, 28, 0.25); /* White at different strengths, for glass-like boxes on dark panels */ --white-06: rgba(255, 255, 255, 0.06); --white-08: rgba(255, 255, 255, 0.08); --white-18: rgba(255, 255, 255, 0.18); /* Page-specific colors */ --us-row: #F6F8FF; /* "Family Points" column in the comparison table */ --sticker-bg: #FFF7E0; /* earned sticker */ --board-frame: #2A2520; /* wooden frame around the LED board */ --board-bg: #0B0B0C; /* the dark LED panel */ --board-bar: #3A3A40; /* empty part of a progress bar on the panel */ } /* 2. BASE ---------------------------------------------------------------- Small resets so every browser starts the same. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; /* The font already on the visitor's device: SF Pro on Apple, Segoe on Windows. */ font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; line-height: 1.5; color: var(--text); background: var(--bg); } img, svg { max-width: 100%; height: auto; } a { color: var(--blue); } a:hover { text-decoration: none; } /* Keyboard users see a clear ring around whatever has focus. */ :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } /* On dark panels (the hero and the privacy band use the class .on-dark) the focus ring is white so it can be seen. */ .on-dark :focus-visible { outline-color: var(--white); } /* 3. LAYOUT --------------------------------------------------------------*/ /* .wrap keeps content in a centered column. */ .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* Vertical space around a page section. */ .section { padding: 80px 0; } .section-tight { padding: 40px 0; } /* .grid-auto: cards sit side by side and wrap when there is no room. Change --min to make the cards wider or narrower. */ .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 320px), 100%), 1fr)); gap: 24px; } /* Text that screen readers read but nobody sees. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 4. TYPE ----------------------------------------------------------------*/ h1, h2, h3 { line-height: 1.15; margin: 0 0 12px; } h1 { font-size: 54px; line-height: 1.06; letter-spacing: -0.025em; font-weight: 800; } h2 { font-size: 38px; letter-spacing: -0.01em; } h3 { font-size: 21px; } p { margin: 0 0 14px; } .lead { max-width: 720px; font-size: 19px; color: var(--grey-2); } /* big intro sentence */ .small { font-size: 14px; color: var(--grey-3); } /* quiet note */ .center { text-align: center; } /* 5. BUTTONS ------------------------------------------------------------- Use .btn plus one color class, on an or a