/** * Pip Design System - CSS Variables * Font: Nunito (Google Fonts) - weights 400, 600, 700, 800, 900 * ================================================================ * Usage: @import url('path/to/colors_and_type.css'); * Also add Nunito from Google Fonts in your : * */ /* ── Google Font import ───────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap'); :root { /* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */ --font-base: 'Nunito', -apple-system, system-ui, sans-serif; /* weights */ --fw-regular: 400; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* app default for body + inputs */ --fw-extrabold: 800; /* @kind font */ /* buttons, labels, eyebrows */ --fw-black: 900; /* @kind font */ /* headings, hero, denominations */ /* display / hero (38–66px) */ --text-hero: clamp(40px, 5.6vw, 66px); --text-display: clamp(30px, 4.4vw, 46px); --text-title: clamp(28px, 3.6vw, 40px); --ls-hero: -2px; --ls-display: -1.2px; --ls-title: -1px; --lh-hero: 1.02; /* @kind other */ --lh-display: 1.08; /* @kind other */ --lh-title: 1.1; /* @kind other */ /* screen / card titles (mobile) */ --text-screen-title: 25px; --text-card-title: 20px; --ls-screen: -0.4px; /* body */ --text-body-lg: 19px; --text-body: 16px; --text-body-sm: 14px; --lh-body: 1.5; /* @kind other */ --lh-body-lg: 1.6; /* @kind other */ /* labels / eyebrows */ --text-label-lg: 15px; --text-label: 13px; --text-label-sm: 11px; --ls-eyebrow: 0.5px; --ls-label: 0.4px; /* ── BASE COLORS ─────────────────────────────────────────────────────── */ /* Text - cool ink */ --ink: #0C1C2E; /* primary text */ --ink2: #46586C; /* secondary / subhead */ --ink3: #8B9CAD; /* tertiary / placeholder */ /* Surfaces */ --bg: #EEF3F9; /* page background (cool off-white) */ --card: #FFFFFF; /* card background */ --soft: #E7F0F8; /* soft tinted surface */ --line: #E0E8F1; /* borders, dividers */ /* ── BRAND - TRUST BLUE ──────────────────────────────────────────────── */ --blue-50: #E7F1FE; --blue-100: #D4E6FC; --blue-200: #B0D2FA; --blue-300: #8BBDF7; --blue-400: #5AA1F2; --blue-500: #2E90FF; /* glow */ --blue-600: #1577E6; /* PRIMARY */ --blue-700: #0E5BC0; /* dark */ --blue-800: #0A4699; /* darker */ --blue-900: #073272; /* darkest */ /* shorthands */ --blue: #1577E6; --blue-dk: #0E5BC0; --blue-d2: #0B4A9E; --blue-lt: #E7F1FE; --blue-glow: #2E90FF; /* ── SUCCESS - GREEN ─────────────────────────────────────────────────── */ --green: #16A65A; --green-dk: #0C8A48; --green-lt: #E2F6EC; /* ── BRIDGE - TEAL ───────────────────────────────────────────────────── */ --teal: #0EA5A5; --teal-lt: #E0F6F6; /* ── CORAL - ENGLISH ─────────────────────────────────────────────────── */ --coral: #F2685C; --coral-lt: #FDECEA; /* ── SUBJECT ACCENTS ─────────────────────────────────────────────────── */ --subject-number: #1577E6; --subject-number-soft: #E7F1FE; --subject-reasoning: #2D6BE0; --subject-reasoning-soft: #E8EEFD; --subject-verbal: #0AA0E6; --subject-verbal-soft: #E1F3FD; --subject-data: #0EA5A5; --subject-data-soft: #E0F6F6; --subject-money: #16A65A; --subject-money-soft: #E2F6EC; --subject-nonverbal: #14B37A; --subject-nonverbal-soft: #E3F7EE; --subject-english: #F2685C; --subject-english-soft: #FDECEA; --subject-measurement: #0EA5A5; --subject-measurement-soft: #E0F6F6; --subject-geometry: #0AA0E6; --subject-geometry-soft: #E1F3FD; /* ── GAMIFICATION ────────────────────────────────────────────────────── */ --streak: #FF7A1A; --streak-lt: #FFEAD8; --xp: #FFB020; --xp-lt: #FFF3D0; --coin: #FFC93C; --coin-lt: #FFF7E6; --league-bronze: #C77B3C; --league-silver: #9AA7B4; --league-gold: #F0A92E; /* ── FUNCTIONAL / SEMANTIC ───────────────────────────────────────────── */ --success: #16A65A; --danger: #EF5350; --danger-lt: #FDE7E7; --warning: #FFB020; --info: #1577E6; /* ── HERO GRADIENT ───────────────────────────────────────────────────── */ /* Usage: background: linear-gradient(135deg, var(--grad-start), var(--grad-mid), var(--grad-end)) */ --grad-start: #0B4A9E; --grad-mid: #1577E6; --grad-end: #0EA5A5; /* ── SPACING TOKENS ──────────────────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* ── BORDER RADIUS ───────────────────────────────────────────────────── */ --r-sm: 8px; /* chips, small icon squares */ --r-md: 12px; /* icon badges, nav buttons */ --r-lg: 16px; /* buttons, answer rows, tags */ --r-xl: 20px; /* subject/trust cards */ --r-2xl: 24px; /* large cards */ --r-3xl: 26px; /* modal sheets, hero cards */ --r-pill: 9999px; /* badges, eyebrows, streak */ /* ── SHADOWS ─────────────────────────────────────────────────────────── */ --shadow: 0 1px 2px rgba(12, 28, 46, 0.05); /* subtle - cards at rest */ --shadow-md: 0 18px 40px -18px rgba(12, 28, 46, 0.28); /* elevated - modals, active cards */ --shadow-blue: 0 22px 50px -20px rgba(13, 91, 192, 0.55); /* brand gradient cards */ --shadow-btn: 0 5px 0 var(--blue-dk); /* primary button bottom */ --shadow-ghost:0 5px 0 #D7E1EC, 0 0 0 1.5px var(--line) inset; /* ghost button bottom */ /* ── SEMANTIC ALIASES ────────────────────────────────────────────────── */ /* Color */ --color-primary: var(--blue); --color-primary-dk: var(--blue-dk); --color-primary-lt: var(--blue-lt); --color-success: var(--green); --color-danger: var(--danger); --color-warning: var(--warning); --color-fg: var(--ink); --color-fg2: var(--ink2); --color-fg3: var(--ink3); --color-bg: var(--bg); --color-card: var(--card); --color-border: var(--line); /* Type */ --h1: var(--text-hero); --h2: var(--text-display); --h3: var(--text-title); --h4: var(--text-screen-title); --h5: var(--text-card-title); --p: var(--text-body); --small: var(--text-body-sm); } /* ── BASE RESET ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-base); color: var(--ink); background: var(--card); line-height: var(--lh-body); font-weight: var(--fw-bold); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ── UTILITY CLASSES ──────────────────────────────────────────────────────── */ /* Typography */ .text-hero { font-size: var(--text-hero); font-weight: var(--fw-black); letter-spacing: var(--ls-hero); line-height: var(--lh-hero); } .text-display { font-size: var(--text-display); font-weight: var(--fw-black); letter-spacing: var(--ls-display); line-height: var(--lh-display); } .text-title { font-size: var(--text-title); font-weight: var(--fw-black); letter-spacing: var(--ls-title); line-height: var(--lh-title); } .text-h4 { font-size: var(--text-screen-title); font-weight: var(--fw-black); letter-spacing: var(--ls-screen); } .text-body-lg { font-size: var(--text-body-lg); font-weight: var(--fw-semibold); line-height: var(--lh-body-lg); } .text-body { font-size: var(--text-body); font-weight: var(--fw-bold); line-height: var(--lh-body); } .text-body-sm { font-size: var(--text-body-sm); font-weight: var(--fw-bold); line-height: var(--lh-body); } .text-label { font-size: var(--text-label); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-label); } .text-eyebrow { font-size: var(--text-label); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; } .text-ink { color: var(--ink); } .text-ink2 { color: var(--ink2); } .text-ink3 { color: var(--ink3); } .text-blue { color: var(--blue); } .text-green { color: var(--green); } .text-white { color: #fff; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; cursor: pointer; font-family: var(--font-base); font-weight: var(--fw-extrabold); font-size: 17px; padding: 15px 26px; border-radius: var(--r-lg); letter-spacing: .2px; transition: transform .06s, box-shadow .06s, background .15s; } .btn:active { transform: translateY(3px); } .btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-btn); } .btn-primary:active { box-shadow: 0 2px 0 var(--blue-dk); } .btn-primary:hover { background: #1f82f0; } .btn-ghost { background: #fff; color: var(--ink); box-shadow: var(--shadow-ghost); } .btn-ghost:active { box-shadow: 0 2px 0 #D7E1EC, 0 0 0 1.5px var(--line) inset; } .btn-success { background: var(--green); color: #fff; box-shadow: 0 5px 0 var(--green-dk); } .btn-lg { font-size: 18px; padding: 18px 30px; } .btn-sm { font-size: 14px; padding: 11px 18px; border-radius: var(--r-md); } .btn-block { width: 100%; } /* Eyebrow pill */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-extrabold); font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--blue-dk); background: var(--blue-lt); padding: 7px 14px; border-radius: var(--r-pill); } /* Card */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: var(--space-lg); } .card-elevated { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: var(--space-lg); } /* Chip / badge */ .chip { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--fw-extrabold); font-size: 13.5px; color: var(--ink2); background: #fff; border: 1px solid var(--line); padding: 8px 13px; border-radius: var(--r-pill); box-shadow: var(--shadow); } /* Streak badge */ .streak-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--streak-lt); color: var(--streak); font-weight: var(--fw-extrabold); font-size: 14px; padding: 6px 12px; border-radius: var(--r-pill); } /* XP pill */ .xp-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--xp-lt); color: #8B6000; font-weight: var(--fw-extrabold); font-size: 13px; padding: 5px 10px; border-radius: var(--r-pill); } /* Gradient background utility */ .grad-brand { background: linear-gradient(135deg, var(--grad-start), var(--grad-mid), var(--grad-end)); }