/*
* email.eu brand theme for La Suite Meet.
*
* Upstream ships a blue primary scale (DSFR #000091 etc.). email.eu's brand is
* minimal monochrome — near-black (#0D0D0F) on cream. We remap the PandaCSS
* primary tokens to a neutral near-black ramp so every blue accent (Login
* button, links, the settings gear, "Join a meeting" outline, focus rings)
* becomes email.eu black. Loaded after the app CSS (injected at end of ),
* and :root is unlayered so it beats the layered token defaults.
*/
:root {
--colors-primary-50: #f7f7f3;
/* primary-100 is the page/Screen background (layout/Screen.tsx) — set it to
email.eu cream so the home wrapper matches the body (no white/cream split). */
--colors-primary-100: #f5f5f0;
--colors-primary-200: #deded8;
--colors-primary-300: #c2c2bc;
--colors-primary-400: #7a7a78;
--colors-primary-500: #44444a;
--colors-primary-600: #232328;
--colors-primary-700: #161618;
--colors-primary-800: #0d0d0f; /* primary button bg (was #000091) */
--colors-primary-900: #0b0b0d;
--colors-primary-950: #080809;
--colors-primary-action: #0d0d0f; /* was #1212ff */
--colors-primary-active: #000000;
--colors-primary-text: #0d0d0f;
--colors-primary-subtle: #f3f2ed;
}
/* email.eu uses a warm cream page background rather than stark white. Match the
Screen wrapper (primary-100) above so the whole home page is one cream. */
body {
background-color: #f5f5f0;
}
/* email.eu display typography: serif headings. Gelasio is email.eu's display
face; it's metric-compatible with Georgia, so the Georgia fallback renders
the same look with NO external font load (keeps us off Google Fonts / EU-
sovereign). Scoped to the large display heading (h1) — UI stays sans. */
h1 {
font-family: 'Gelasio', Georgia, 'Times New Roman', serif !important;
letter-spacing: -0.01em;
line-height: 1.3 !important; /* upstream sets a tight ~1.07; give the serif room to breathe */
}
/* The hero subtitle paragraph (Home.tsx , the div right after the
heading) — loosen its line-height to match. */
main:has(img[src*="intro-slider"]) h1 + div {
line-height: 1.6 !important;
}
/* Fix the white/cream split: the app shell (layout/Layout.tsx) is hardcoded
backgroundColor 'white' and only as tall as its content, so the cream body
shows below it. The shell is the one div that directly wraps ; make it
cream and fill the viewport → one seamless cream page. */
div:has(> main) {
background-color: #f5f5f0 !important;
min-height: 100vh;
}
/* Home page only — uniquely identifiable by the (hidden) intro-slider images —
vertically centre the hero so it sits balanced in the page instead of pinned
to the top now that the marketing carousel is gone. */
main:has(img[src*="intro-slider"]) {
justify-content: center !important;
padding-bottom: 16vh !important; /* sit a touch above dead-centre */
}
/* Remove the divider line under the hero buttons (Home.tsx — the
only border-bottom element in the home hero). */
main:has(img[src*="intro-slider"]) .bd-b_1px_solid {
display: none !important;
}
/* Menu items: the black primary remap turned the hovered/focused/selected item
black, hiding its (dark) text. Use a light neutral highlight with dark text
instead — readable and on-brand. */
[role="menuitem"][data-hovered],
[role="menuitem"][data-focused],
[role="menuitem"][data-pressed],
[role="menuitem"][data-selected] {
background-color: #ededea !important;
color: #0d0d0f !important;
}
/* Same bug, different widget: the Settings > Language picker is a listbox whose
options are [role="option"] (not [role="menuitem"]). The black primary remap
makes the hovered/highlighted/selected option black-on-black (invisible text).
Apply the identical light-highlight + dark-text fix. */
[role="option"][data-hovered],
[role="option"][data-focused],
[role="option"][data-pressed],
[role="option"][data-selected],
[role="option"][aria-selected="true"] {
background-color: #ededea !important;
color: #0d0d0f !important;
}