/* servingthebest-platform — marketing theme * * Palette: brand navy (#0a2a57) + teal on a soft surface. Typography: Poppins, * self-hosted below (no third-party font request). * * tokens.json is the one definition of these values; the :root block mirrors * it and ThemeTokensTest fails when the two differ. The variable names keep * their original spelling (internal identifiers): the --stb-orange-* scale now * carries the teal family and --stb-accent is the brand's teal-ink. * * Package CSS is imported in ThemeShell.jsx (the @stb-/../css/.css * pattern) — not here — so the Vite bundle picks them up. Theme overrides for * package variables live in the :root block below. See packages//THEMING.md * for each package's exposed CSS custom properties. */ /* Poppins, Latin, from the brand kit (OFL; licence file ships beside the fonts). */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/poppins-latin-800-normal.woff2') format('woff2'); } :root { /* Palette — navy scale */ --stb-navy-50: #eff4f9; --stb-navy-100: #d5dfea; --stb-navy-200: #c2cad5; --stb-navy-300: #919fb3; --stb-navy-400: #607592; --stb-navy-500: #2f4a70; --stb-navy-600: #0a2a57; --stb-navy-700: #07264e; --stb-navy-800: #071b39; --stb-navy-900: #051327; /* Palette — accent scale (name kept; carries the teal family) */ --stb-orange-50: #e9fbf9; --stb-orange-100: #c7f5f0; --stb-orange-500: #08767a; --stb-orange-600: #065e62; --stb-orange-700: #054d4f; /* Brand teal: fills and marks, and text on navy only (never text on white) */ --stb-teal: #1ed6c3; /* Semantic aliases */ --stb-navy: var(--stb-navy-600); --stb-accent: var(--stb-orange-500); --stb-accent-deep: var(--stb-orange-600); --stb-bone: var(--stb-navy-50); --stb-ink: #0a2a57; --stb-ink-soft: #4b5d78; --stb-surface: #ffffff; --stb-muted: #4b5d78; --stb-subtle: #4b5d78; --stb-border: var(--stb-navy-100); --stb-border-soft: rgba(10, 42, 87, 0.08); /* Typography */ --stb-font-display: Poppins, 'Segoe UI', system-ui, -apple-system, sans-serif; --stb-font-body: Poppins, 'Segoe UI', system-ui, -apple-system, sans-serif; /* Shadow tokens */ --stb-shadow-card: 0 1px 2px rgba(10,42,87,0.08), 0 4px 16px rgba(10,42,87,0.06); --stb-shadow-card-hover: 0 1px 2px rgba(10,42,87,0.10), 0 18px 40px -12px rgba(10,42,87,0.22); /* Radius scale */ --stb-radius-sm: 6px; --stb-radius-md: 10px; --stb-radius-lg: 16px; --stb-radius-xl: 24px; /* AI chatbot overrides — variable names per packages/ai-chatbot/THEMING.md §5. * --stb-chatbot-accent drives the launcher button, panel header, user message * bubbles and send button — mapping it to the theme orange flips the package's * default blue throughout. */ --stb-chatbot-accent: var(--stb-accent); --stb-chatbot-accent-contrast: #ffffff; --stb-chatbot-surface: #ffffff; --stb-chatbot-surface-muted: var(--stb-navy-50); --stb-chatbot-text: var(--stb-ink); --stb-chatbot-text-muted: var(--stb-muted); --stb-chatbot-border: var(--stb-border); --stb-chatbot-radius: var(--stb-radius-lg); --stb-chatbot-shadow: var(--stb-shadow-card); --stb-chatbot-font: var(--stb-font-body); /* Contact overrides — see packages/contact/THEMING.md */ --stb-contact-form-bg: #ffffff; --stb-contact-form-fg: var(--stb-ink); --stb-contact-input-bg: #ffffff; --stb-contact-input-border: var(--stb-border); --stb-contact-submit-bg: var(--stb-accent); --stb-contact-submit-fg: #ffffff; --stb-contact-submit-hover-bg: var(--stb-accent-deep); /* Portfolio overrides — see packages/portfolio/THEMING.md */ --stb-portfolio-card-bg: #ffffff; --stb-portfolio-card-border: var(--stb-border); --stb-portfolio-tag-bg: var(--stb-navy-50); --stb-portfolio-tag-fg: var(--stb-navy-600); /* FAQs overrides — see packages/faqs/THEMING.md */ --stb-faq-accent: var(--stb-navy-600); --stb-faq-row-divider: 1px solid var(--stb-border); --stb-faq-row-padding: 1rem 0; --stb-faq-answer-color: var(--stb-ink-soft); --stb-faq-question-font-weight: 700; --stb-faq-list-gap: 0.5rem; --stb-faq-radius: var(--stb-radius-md); /* Cookie consent banner (packages #1117): the theme's own tokens. The accent buttons are orange with white text, as the theme's CTAs are. */ --stb-consent-bg: var(--stb-surface); --stb-consent-fg: var(--stb-ink); --stb-consent-accent: var(--stb-accent); --stb-consent-accent-fg: #ffffff; --stb-consent-border: var(--stb-border); --stb-consent-radius: var(--stb-radius-md); --stb-consent-font: var(--stb-font-body); } body.theme-servingthebest-platform { font-family: var(--stb-font-body); color: var(--stb-ink); background: #ffffff; line-height: 1.55; -webkit-font-smoothing: antialiased; } @layer base { :where(.theme-servingthebest-platform h1, .theme-servingthebest-platform h2, .theme-servingthebest-platform h3, .theme-servingthebest-platform h4) { font-family: var(--stb-font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--stb-navy-600); } } /* Accent on a navy fill. The accent is the brand's teal-ink, which is AA on a * light surface and under a white label, and 2.6:1 on navy. Inside a navy block * the accent becomes the brand teal (7.7:1 as text) and a teal fill carries a * navy label, never white (ThemeTokensTest checks these pairs). Matches the * utility classes the renderers use for their navy blocks. */ .theme-servingthebest-platform [class~="bg-[var(--stb-navy-600)]"], .theme-servingthebest-platform [class~="bg-[var(--stb-navy-700)]"], .theme-servingthebest-platform [class~="bg-[var(--stb-navy-800)]"] { --stb-accent: var(--stb-teal); --stb-accent-deep: var(--stb-teal); } .theme-servingthebest-platform [class~="bg-[var(--stb-navy-600)]"] [class~="bg-[var(--stb-accent)]"], .theme-servingthebest-platform [class~="bg-[var(--stb-navy-700)]"] [class~="bg-[var(--stb-accent)]"], .theme-servingthebest-platform [class~="bg-[var(--stb-navy-800)]"] [class~="bg-[var(--stb-accent)]"] { color: var(--stb-navy-600); } /* Focus rings */ .theme-servingthebest-platform :focus-visible { outline: 2px solid var(--stb-accent); outline-offset: 2px; border-radius: var(--stb-radius-sm); } /* Reveal-on-scroll animation primitive used by the wrapper */ .stb-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .stb-reveal.is-in { opacity: 1; transform: none; } /* Hero subtle grid pattern */ .stb-hero-grid { background-image: radial-gradient(circle at 20% 10%, rgba(30,214,195,0.12), transparent 50%), radial-gradient(circle at 90% 80%, rgba(255,255,255,0.06), transparent 55%), linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: auto, auto, 56px 56px, 56px 56px; background-position: 0 0, 0 0, -1px -1px, -1px -1px; } /* Accordion grid-row trick for smooth FAQ open/close */ .stb-accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .stb-accordion-content.is-open { grid-template-rows: 1fr; } .stb-accordion-content > div { overflow: hidden; } /* Smooth-scroll for anchor nav */ html { scroll-behavior: smooth; } /* Rich-text section copy (.stb-rich) * * Section fields keyed body/description are authored in the TipTap editor and * stored as HTML, so the block wraps nested

/