/* ========================================================= Inclusion Bites — brand foundation Source of truth: docs/architecture/inclusion-bites-brand.md Palette sampled from the Canva 2026 master (DAHBaxjF6Mk). Fonts self-hosted via @fontsource (imported in Layout.astro). ========================================================= */ :root { /* primary — authoritative values from the wordmark vector source */ --ib-deep-teal: #0b535f; --ib-turquoise: #42b8a6; /* accent family — the "rainbow" (decoration / large text / icons only) */ --ib-orange: #f1932d; --ib-coral: #e27257; --ib-rose: #db536f; --ib-magenta: #ab448f; --ib-purple: #78407d; --ib-yellow: #f0e040; /* neutrals */ --ib-ink: #14232b; --ib-slate: #4a5a62; --ib-paper: #ffffff; --ib-mist: #f5f7f7; --ib-line: #e2e8e9; /* fixed deep-teal for panels/pills that sit on artwork or stay dark in both themes */ --ib-teal-panel: #0b535f; --ib-on-teal: #ffffff; /* semantic */ --ib-text: var(--ib-ink); --ib-heading: var(--ib-deep-teal); --ib-link: var(--ib-deep-teal); --ib-link-hover: var(--ib-turquoise); --ib-bg: var(--ib-paper); --ib-surface: var(--ib-mist); --ib-border: var(--ib-line); --ib-cta-bg: var(--ib-deep-teal); --ib-cta-text: #ffffff; --ib-accent-cta-bg: var(--ib-orange); --ib-accent-cta-text: var(--ib-ink); /* type */ --ib-font-wordmark: "Anton", system-ui, sans-serif; /* "INCLUSION" / hero display only */ --ib-font-display: "Poppins", system-ui, sans-serif; --ib-font-body: "Inter", system-ui, sans-serif; --ib-font-signature: "Dancing Script", cursive; /* signature only; Brittany is Canva-only */ /* the multi-colour gradient (decorative — never place body copy over it) */ --ib-gradient: linear-gradient( 120deg, var(--ib-orange), var(--ib-rose), var(--ib-magenta), var(--ib-purple), var(--ib-turquoise), var(--ib-yellow) ); /* scale */ --ib-maxw: 72rem; --ib-radius: 0.75rem; --ib-space: clamp(1rem, 2vw, 1.75rem); } /* Dark theme — JS resolves auto/light/dark to an explicit data-theme on . Neutrals flip; the brand deep-teal lightens for text/headings; panels/pills that sit on artwork keep --ib-teal-panel; orange stays. */ [data-theme="dark"] { --ib-deep-teal: #4bb7a3; /* text/heading teal on dark (buttons use dark text) */ --ib-ink: #e9eff1; --ib-slate: #a4b4ba; --ib-paper: #0e1a1f; --ib-mist: #16242b; --ib-line: #26383f; --ib-cta-text: #06231f; /* dark text on the brighter teal button */ --ib-accent-cta-text: #14232b; /* keep dark text on orange */ --ib-on-teal: #ffffff; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--ib-font-body); font-size: 1rem; /* 16px base */ line-height: 1.6; color: var(--ib-text); background: var(--ib-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--ib-font-display); font-weight: 700; line-height: 1.15; color: var(--ib-heading); margin: 0 0 0.5em; } h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); } p { margin: 0 0 1rem; } a { color: var(--ib-link); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; } a:hover { color: var(--ib-link-hover); } :focus-visible { outline: 3px solid var(--ib-turquoise); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--ib-turquoise); color: #fff; } img { max-width: 100%; height: auto; display: block; } /* layout helpers */ .ib-container { width: 100%; max-width: var(--ib-maxw); margin-inline: auto; padding-inline: var(--ib-space); } .ib-surface { background: var(--ib-surface); border: 1px solid var(--ib-border); border-radius: var(--ib-radius); } .ib-gradient-bar { height: 6px; background: var(--ib-gradient); } /* buttons — AA-safe pairings only */ .ib-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ib-font-display); font-weight: 600; line-height: 1; padding: 0.75rem 1.25rem; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; } .ib-btn--primary { background: var(--ib-cta-bg); color: var(--ib-cta-text); } .ib-btn--primary:hover { background: #0e4b55; color: #fff; } .ib-btn--accent { background: var(--ib-accent-cta-bg); color: var(--ib-accent-cta-text); /* Ink on orange — never white */ } .ib-btn--ghost { background: transparent; color: var(--ib-deep-teal); border-color: var(--ib-deep-teal); } /* signature — reserved for the host lockup only */ .ib-signature { font-family: var(--ib-font-signature); color: var(--ib-ink); font-weight: 700; } /* the real Brittany signature as SVG artwork (preferred over the font fallback) */ .ib-signature-img { display: inline-block; width: auto; height: 3rem; vertical-align: middle; } .ib-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* prose pages (about, legal) */ .ib-prose-page { padding-block: clamp(2.5rem, 6vw, 4rem); } .ib-prose-page > .ib-container { max-width: 48rem; } .ib-prose-page__eyebrow { font-family: var(--ib-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ib-orange); margin: 0 0 0.5rem; } .ib-prose { color: var(--ib-ink); font-size: 1.05rem; line-height: 1.7; } .ib-prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 2rem; } .ib-prose p, .ib-prose ul { margin: 0 0 1rem; } .ib-prose ul { padding-left: 1.25rem; } .ib-prose li { margin-bottom: 0.4rem; } .ib-prose a { color: var(--ib-deep-teal); font-weight: 600; } .ib-prose small { color: var(--ib-slate); font-size: 0.85rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }