/* ========================================================================== KidSetGo marketing site: the one stylesheet for every page. Light theme only. One self-hosted font (the wordmark), 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, 8m plain pages, 8n home extras), 9 Phones (one breakpoint). ========================================================================== */ /* The wordmark's font: Nunito Black, one file we host ourselves (brand.md 2, site.md S34). It is used only for the word "KidSetGo". Everything else uses the device's own font. The path is relative to this file (assets/). */ @font-face { font-family: "Nunito"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/Nunito-Black.woff2") format("woff2"); } /* 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; /* "KidSetGo" 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