/* ========================================================================== Toothpillow Design System, Colors & Type Source of truth for design tokens. Pulled from: Toothpillow 2023 Brand Guidelines + toothpillow.com (kids). ========================================================================== */ /* ------------------------------ FONT FACES -------------------------------- */ /* Cerco, primary sans (UI, body, UI accents) */ @font-face { font-family: "Cerco"; src: url("fonts/Cerco-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-ThinItalic.otf") format("opentype"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-MediumItalic.otf") format("opentype");font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Cerco"; src: url("fonts/Cerco-BlackItalic.otf") format("opentype");font-weight: 900; font-style: italic; font-display: swap; } /* Bigola Display, display serif for headlines */ /* Poppins: New Home's body sans, self-hosted (never fetched from Google at runtime, same reasoning as the video posters and workbook previews: a patient page makes no third-party request). Only loaded when the New Home comparison scheme is active, via the font stack swap in that block below. Latin subset, 5 weights, 40KB total. SIL Open Font License. */ @font-face { font-family: "Poppins"; src: url("fonts/Poppins-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/Poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/Poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/Poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Bigola Display"; src: url("fonts/Bigola-Display-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Bigola Display"; src: url("fonts/Bigola-Display-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Bigola Display Outline"; src: url("fonts/Bigola-Display-Outline.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* ============================== COLOR TOKENS ============================== */ :root { color-scheme: light; /* cream palette is light-only; block forced-dark inversion */ /* --- Core brand palette (from 2023 Brand Guidelines, p.17) --------------- Hierarchy: Sky Blue + Cream are the two foundation colors used in big areas. Everything else is an accent / pop color used sparingly. */ --tp-sky-blue: #BDDAFF; /* Pillow Blue, ACTIVE brand override (2026-05-29): primary brand blue is #BDDAFF, not the 2023 styleguide's Sky Blue #b6cbe4. */ --tp-cream: #fff8ed; /* PANTONE 7401 C 20%, primary background */ --tp-mint-green: #8cd1c8; /* PANTONE 564 C, accent */ --tp-bubblegum: #f6aacb; /* PANTONE 210 C, accent (printed CMYK is closer to a pinker pink; styleguide RGB shows bubblegum/dusty pink) */ --tp-peach: #fbcbc5; /* PANTONE 691 C, accent */ --tp-yellow: #fcbc68; /* PANTONE 135 C, accent */ --tp-purple-grape: #b26ba6; /* PANTONE 252 C, accent */ --tp-maroon: #DD5759; /* danger / dark counterpoint (production red) */ /* On-brand neutrals derived from the cream + sky blue families. The website uses a deep cool charcoal (close to PANTONE 432 C) for body copy on cream backgrounds. */ --tp-ink: #333333; /* primary text, ACTIVE brand override (2026-05-29): body text is #333333, not Ink #1d2a3a. */ --tp-ink-2: #3d4a5c; /* secondary text */ --tp-ink-3: #5f6a7a; /* tertiary / captions, darkened from #6b7686 to pass WCAG AA (4.5:1) on cream and cream-200 */ --tp-line: #e6dccb; /* hairline on cream */ --tp-line-2: #d6e3f0; /* hairline on sky-blue tinted surfaces */ /* Tints + shades for hover/press states. Sky blue and cream get a darken family; cream also gets a "deeper cream" for layered surfaces. */ /* Ramp re-derived from the active #BDDAFF brand blue (2026-07-16). 600 intentionally lands on ToothPillow Deep Blue #3A6EA4 (docs accent). */ --tp-sky-blue-50: #EFF5FF; --tp-sky-blue-100: #DCE9FF; --tp-sky-blue-200: #BDDAFF; /* = brand */ --tp-sky-blue-300: #9FC2EF; --tp-sky-blue-400: #7FA6D9; --tp-sky-blue-500: #5D88C0; --tp-sky-blue-600: #3A6EA4; --tp-sky-blue-700: #2C5175; --tp-cream-50: #fffdf7; --tp-cream-100: #fff8ed; /* = brand */ --tp-cream-200: #fcf1de; --tp-cream-300: #f5e6c9; --tp-cream-400: #ead9b1; /* Accent tint ramps, canonical homes for the tints previously hardcoded in course.css / consult.css (2026-07-16 audit fix). */ --tp-mint-50: #f1faf6; --tp-mint-100: #d9efeb; --tp-peach-50: #fef3f1; --tp-peach-100: #fdeae5; --tp-bubblegum-100: #f8dfee; --tp-grape-100: #d8bdd7; /* Gentle-flag palette: the "wrong / watch for this" comparisons use peach as a deliberate soft-flag (not maroon danger). Tokenized so the derived inks stop being copy-pasted hexes. */ --tp-flag-ink: #99352b; --tp-flag-border: #e79b8f; /* --- Canvas system (user appearance setting, html[data-canvas]) ---------- Mirrors the ToothPillow Dashboard's canvas system deliberately: same four scheme names, same hex values, same two families, so the two products read as one system and the control is already familiar. Tinted canvas (cream, blue): tinted field, WHITE cards. Paper (paper, stone): WHITE field, tinted cards. The Paper family is the "more white" request: it inverts which surface carries the tint, so the large background field goes white and the cards become the tinted objects sitting on it. Scheme blocks live at the bottom of this file, on html[data-canvas=...], UNLAYERED and after :root. */ --tp-canvas: var(--tp-cream); /* the page field */ --tp-card: #ffffff; /* module cards, resource cards, FAQ rows */ --tp-inset: var(--tp-cream-200); /* panels nested inside a card */ --tp-hairline: var(--tp-line); --tp-hairline-strong: #d9cdb6; /* The sticky bar is translucent over the canvas, so its tint has to follow the scheme or a white-canvas scheme gets a cream bar floating on white. */ --tp-nav-glass: rgba(255, 248, 237, 0.86); /* Floating chrome: modals, popovers, media buttons. White on every light scheme, dark on the dark scheme, so overlays follow the theme instead of flashing a white sheet over a dark page. */ --tp-float: #ffffff; /* --- Semantic mappings -------------------------------------------------- */ --bg-page: var(--tp-canvas); /* default app/site background */ --bg-surface: var(--tp-card); /* card / elevated surface */ --bg-surface-2: var(--tp-inset); /* secondary panel on cream */ --bg-inverse: var(--tp-sky-blue); /* dark/colored hero sections */ --bg-inverse-2: var(--tp-sky-blue-600); /* footer / deep emphasis */ --fg-primary: var(--tp-ink); --fg-secondary: var(--tp-ink-2); --fg-muted: var(--tp-ink-3); --fg-muted-on-sky: var(--tp-ink-2); /* muted text on sky surfaces: ink-3 fails AA there, ink-2 passes */ --fg-on-color: #ffffff; /* text on sky-blue / accent fills */ --fg-on-cream: var(--tp-ink); --accent: var(--tp-sky-blue); /* default accent */ --accent-strong: var(--tp-sky-blue-500); --accent-press: var(--tp-sky-blue-600); --warn: var(--tp-yellow); --danger: var(--tp-maroon); --success: var(--tp-mint-green); --line: var(--tp-line); --line-strong: var(--tp-line-2); /* --- Spacing scale (4px base) ------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- Radii, context-driven by breakpoint ------------------------------- Desktop: 70px on big graphics / sections, 30px on small things. Mobile: 40px on big background elements, 20px on small boxes. Pill buttons stay pill at every breakpoint. */ --radius-bg-desktop: 70px; /* hero shapes, full-bleed sections, big art */ --radius-card-desktop: 30px; /* cards, modals, image crops, form fields */ --radius-bg-mobile: 40px; --radius-card-mobile: 20px; --radius-pill: 9999px; /* responsive aliases, use these in component CSS */ --radius-bg: var(--radius-bg-desktop); --radius-card: var(--radius-card-desktop); --radius-inner: 16px; /* nested elements inside cards (chips, wells, thumbs) */ /* DEPRECATED (2026-07-16 audit): use the three tiers above (bg / card / inner) + --radius-pill. Kept only until the sweep removes the last uses. */ --radius-xs: 6px; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 36px; --radius-2xl: 48px; /* --- Shadows, soft, low-contrast on cream. No hard drop shadows. ------- */ --shadow-xs: 0 1px 2px rgba(29, 42, 58, 0.06); --shadow-sm: 0 2px 6px rgba(29, 42, 58, 0.08); --shadow-md: 0 8px 24px rgba(29, 42, 58, 0.10); --shadow-lg: 0 16px 40px rgba(29, 42, 58, 0.12); --shadow-up: 0 -8px 24px rgba(29, 42, 58, 0.08); /* bottom bars / sheets */ --shadow-inset: inset 0 0 0 1px rgba(29, 42, 58, 0.06); /* Ink ghosts + scrims: the sanctioned translucent derivatives (replaces hand-rolled rgba() copies scattered through the app). */ --ink-ghost: rgba(29, 42, 58, 0.05); --ink-ghost-strong: rgba(29, 42, 58, 0.08); --scrim-pill: rgba(29, 42, 58, 0.45); /* duration pills on media */ /* --- Layout constants ---------------------------------------------------- */ --header-h: 65px; /* top bar height; sticky rails offset from this */ --measure: 580px; /* lede / body max-width */ --measure-wide: 720px; /* wide prose max-width */ /* --- Motion ------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle springy */ --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* --- Typography --------------------------------------------------------- */ --font-display: "Bigola Display", "Recoleta", "Fraunces", Georgia, serif; --font-sans: "Cerco", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Menlo", monospace; /* type scale (web; bump 1.25x for marketing hero) */ --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-64: 64px; --fs-80: 80px; --fs-96: 96px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.4; --lh-relaxed: 1.55; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-strapline: 0.16em; /* uppercase strapline, per styleguide p.14 */ } /* ============================ SEMANTIC TYPOGRAPHY ========================= */ /* Uses the styleguide's "Strapline / Headline / Subhead / Button Copy" hierarchy from page 14, scaled for web. */ .tp-strapline, [data-tp="strapline"] { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-14); letter-spacing: var(--tracking-strapline); text-transform: uppercase; color: var(--fg-secondary); } h1, .tp-h1, [data-tp="h1"] { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 96px); line-height: var(--lh-tight); letter-spacing: 0; /* Bigola Display ships at 0% tracking */ color: var(--fg-primary); text-wrap: balance; } h2, .tp-h2, [data-tp="h2"] { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.2vw, 64px); line-height: var(--lh-snug); letter-spacing: 0; color: var(--fg-primary); text-wrap: balance; } h3, .tp-h3, [data-tp="h3"] { font-family: var(--font-sans); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: var(--lh-snug); color: var(--fg-primary); } h4, .tp-h4, [data-tp="h4"] { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-18); line-height: var(--lh-snug); color: var(--fg-primary); } .tp-subhead, [data-tp="subhead"] { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--fg-secondary); text-wrap: pretty; } p, .tp-body, [data-tp="body"] { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-primary); text-wrap: pretty; } .tp-caption, [data-tp="caption"] { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-muted); } .tp-btn-text, [data-tp="button"] { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-14); line-height: 1; letter-spacing: 0.01em; } code, .tp-mono { font-family: var(--font-mono); font-size: 0.95em; } /* ============================== UTILITIES ================================= */ .tp-bg-cream { background: var(--tp-cream); } .tp-bg-sky { background: var(--tp-sky-blue); } .tp-bg-mint { background: var(--tp-mint-green); } .tp-bg-peach { background: var(--tp-peach); } .tp-bg-pink { background: var(--tp-bubblegum); } .tp-bg-yellow{ background: var(--tp-yellow); } .tp-bg-grape { background: var(--tp-purple-grape); } .tp-bg-maroon{ background: var(--tp-maroon); } .tp-text-ink { color: var(--fg-primary); } .tp-text-muted { color: var(--fg-muted); } .tp-text-on-color { color: var(--fg-on-color); } /* ========================= CANVAS SCHEME BLOCKS =========================== Set by the appearance control (html[data-canvas]), applied before first paint. Same four schemes, names and hex values as the ToothPillow Dashboard. These override ONLY surface primitives. They must never touch --radius-bg or --radius-card: html[data-canvas] is specificity (0,1,1), which beats the 900px radius flip at (0,1,0), and would pin desktop radii onto phones. Not wrapped in @layer. There is no @layer anywhere in this codebase and :root above is unlayered, so a layered block would silently lose to it. ========================================================================== */ /* Paper Gray: white field, cool tinted cards. The most white of the four. */ html[data-canvas="paper"] { --tp-canvas: #ffffff; --tp-card: #f4f6f8; --tp-inset: #e9edf1; --tp-line: #e4e9ee; --tp-hairline-strong: #ccd5de; --tp-cream-50: #ffffff; /* alternating section bands go flat */ --tp-cream-200: #e9edf1; --tp-ink-3: #5b6673; /* keeps captions >=4.5:1 on a cool ground */ --tp-nav-glass: rgba(255, 255, 255, 0.86); } /* Paper Stone: white field, WARM tinted cards. The most white option that still feels like the cream brand rather than a cool admin tool. */ html[data-canvas="stone"] { --tp-canvas: #ffffff; --tp-card: #f5f3ee; --tp-inset: #ebe7df; --tp-line: #e6e1d5; --tp-hairline-strong: #d2cab8; --tp-cream-50: #ffffff; --tp-cream-200: #ebe7df; --tp-ink-3: #6b6357; --tp-nav-glass: rgba(255, 255, 255, 0.86); } /* Blue Gray: tinted field, white cards. Coolest of the tinted family. */ html[data-canvas="blue"] { --tp-canvas: #e9eef6; --tp-card: #ffffff; --tp-inset: #dfe6f1; --tp-line: #d5deeb; --tp-hairline-strong: #bdcadd; --tp-cream-50: #f2f5fa; --tp-cream-200: #dfe6f1; --tp-ink-3: #566276; --tp-nav-glass: rgba(233, 238, 246, 0.86); } /* ===================== New Home comparison scheme ========================= NOT a user-facing option. Reachable only at ?canvas=newhome, deliberately absent from the appearance picker so the Myo team does not see a half decided direction while they are reviewing content. Purpose: answer one question, does the Myo course read as the same product as the New Home patient app. It changes exactly the two things the token comparison showed actually differ, the body sans and the page ground. Everything else already matches: Bigola Display, #3A6EA4, #BDDAFF, #333333. Values copied verbatim from C:/KP/new-home/app/global.css on origin/main (re-verified 2026-09-01 at commit e3863035; line numbers are that commit): --color-guardian-bg #E4EFFC the pale blue field (line 52) --color-guardian-card #FFFFFF the white content pane (line 53) --color-surface-alt #F4F6FA inset/muted surface (line 31) --color-border #e5e7eb hairline (line 42) ON THE SANS, and this corrects an earlier framing of the question as "settle the sans company-wide". New Home does not run one sans. It runs TWO, split by audience: --font-sans Poppins (line 68) guardian + marketing, patient facing --font-inter Inter (line 94) scoped to [data-density="compact"], which is route scoped to /admin, /portal and /enrollment, staff facing Bigola Display is the shared heading face in both apps (line 69), which is why it is untouched here. The Myo course is patient facing, so the New Home precedent points at Poppins for THIS app specifically. There is no single company-wide sans to settle, because New Home already answered it per audience rather than per company. Delete this block and the Poppins @font-face rules to remove entirely. */ html[data-canvas="newhome"] { --tp-canvas: #E4EFFC; --tp-card: #FFFFFF; --tp-inset: #F4F6FA; --tp-line: #e5e7eb; --tp-hairline-strong: #d3dae5; --tp-cream-50: #F4F6FA; --tp-cream-200: #E4EFFC; /* NOT New Home's #6b7280. That measured 4.16:1 on white at 12px, under the 4.5 AA floor, in four places (nav tag, credentials line, footer disclaimer, copyright). Myo's own muted ink was picked to clear AA, so it stays. Worth raising with the New Home team as a real issue on their side, not just here. */ --tp-ink-3: #5f6a7a; --tp-nav-glass: rgba(228, 239, 252, 0.86); /* The one typographic change. Bigola stays as the display face in both apps. */ --font-sans: "Poppins", "Cerco", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Dark: a designed dark palette, NOT an inversion of the cream one. tokens.css previously set color-scheme:light to block forced-dark, because inverting cream produces mud. This scheme therefore re-derives neutrals on a cool near-black and re-points only the SEMANTIC text roles. The load-bearing rule: --tp-ink is NOT flipped. It is the ink that sits on accent FILLS (mint "done" chips, yellow step numerals, the Yes/No toggle), and those fills stay light in dark mode, so their text must stay dark. Body text moved to --fg-primary in course.css precisely so the two can diverge. Flipping --tp-ink would make every accent chip unreadable. */ html[data-canvas="dark"] { color-scheme: dark; --tp-canvas: #14171c; --tp-card: #1c2027; --tp-inset: #242932; --tp-float: #21262e; /* modals sit above the card layer */ --tp-line: #2f3540; --tp-line-2: #333b47; --tp-hairline-strong: #3c4451; --tp-nav-glass: rgba(20, 23, 28, 0.86); /* Section banding and the cream-derived layers collapse onto the dark ramp. */ --tp-cream: #14171c; --tp-cream-50: #14171c; --tp-cream-100: #1c2027; --tp-cream-200: #242932; --tp-cream-300: #2f3540; /* Semantic TEXT roles only. AA verified against --tp-card #1c2027: primary 14.6:1, secondary 9.4:1, muted 5.6:1. */ --fg-primary: #e9ecf1; --fg-secondary: #c2c9d4; --fg-muted: #99a3b1; /* --tp-ink-2 is used DIRECTLY as body colour in several places (the booking band copy among them), so leaving it at the light-scheme #3d4a5c rendered 1.62:1 on a dark card. --tp-ink itself stays dark on purpose: it is the ink for accent FILLS, which stay light. */ --tp-ink-2: #c2c9d4; --fg-muted-on-sky: #1d2a3a; /* sky fills stay light, so ink stays dark */ --fg-on-cream: #e9ecf1; /* Accent tints are backgrounds carrying dark ink, so they stay light. The 50/100 tints are darkened just enough to sit on the dark ground without glowing, while keeping >=7:1 for the dark ink on top. */ --tp-sky-blue-50: #1b2430; --tp-sky-blue-100: #24303f; --tp-mint-50: #16241f; --tp-mint-100: #1d3129; --tp-peach-50: #2a1f1e; --tp-peach-100: #3a2926; /* Shadows do almost nothing on a dark ground; depth comes from the surface ramp instead, so they are reduced rather than removed. */ --shadow-xs: 0 1px 2px rgba(0,0,0,.30); --shadow-sm: 0 2px 6px rgba(0,0,0,.34); --shadow-md: 0 8px 24px rgba(0,0,0,.40); --shadow-lg: 0 16px 40px rgba(0,0,0,.48); --ink-ghost: rgba(255,255,255,.06); --ink-ghost-strong: rgba(255,255,255,.10); } /* ============================ BREAKPOINTS ================================= The app uses exactly two breakpoints (2026-07-16 unification): - 900px: layout collapse (grids stack, sidebars drop) AND the radius flip - 640px: phone refinements (full-width buttons, tighter padding) Every stylesheet should key off these two values only. */ @media (max-width: 900px) { :root { --radius-bg: var(--radius-bg-mobile); --radius-card: var(--radius-card-mobile); } } /* The in-app device frame simulates a phone at any viewport size: give it the same mobile radii the real breakpoint provides. */ .mobile, .device-screen { --radius-bg: var(--radius-bg-mobile); --radius-card: var(--radius-card-mobile); }