/* FuelCheck brand, lifted verbatim from sherut-platform/resources/css/app.css so the portal and the platform cannot drift apart. Token names match the app's fc-* set. The app toggles dark mode with a `.dark` class on rather than trusting prefers-color-scheme; this does the same, seeded from the OS on first visit, so a reader who has chosen a theme in the app sees the portal the same way. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/fonts/plus-jakarta-sans-400.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('vendor/fonts/plus-jakarta-sans-500.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('vendor/fonts/plus-jakarta-sans-600.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('vendor/fonts/plus-jakarta-sans-700.woff2') format('woff2'); } :root { color-scheme: light; /* Brand palette — do not invent new hues here. */ --fc-yellow: #EBB507; /* sunflower-gold — accent / primary action */ --fc-dark: #151618; /* onyx — chrome / text / headers */ --fc-light: #F9F9FA; /* bright-snow — app background */ --fc-accent-2: #333436; /* graphite — secondary chrome */ /* Roles. Everything below is expressed through these, never a raw hex. */ --ground: var(--fc-light); --panel: #ffffff; --ink: var(--fc-dark); --ink-soft: #5f6165; --rule: #e3e4e6; --rule-strong: #cfd1d4; --accent: var(--fc-yellow); --accent-ink: var(--fc-dark); /* text that sits on the gold */ --accent-wash: rgba(235, 181, 7, 0.12); --shadow: 0 1px 2px rgba(21, 22, 24, .06), 0 8px 24px rgba(21, 22, 24, .06); --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } html.dark { color-scheme: dark; --ground: var(--fc-dark); --panel: #1c1d20; --ink: var(--fc-light); --ink-soft: #a1a4a9; --rule: #2c2d30; --rule-strong: #3d3f43; --accent-wash: rgba(235, 181, 7, 0.16); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); } * { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } code, kbd, pre { font-family: var(--font-mono); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ── the bar that carries the brand on every page ───────────────────────── */ .topbar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.5rem; background: var(--fc-dark); border-bottom: 3px solid var(--accent); } .topbar__logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; } /* The supplied logo is a flat PNG with an opaque white background — no alpha channel at all. On the onyx bar that white reads as a rendering fault unless it is given an edge, so it sits in a deliberate white lockup instead. */ .topbar__logo img { height: 22px; width: auto; display: block; background: #ffffff; padding: .3rem .45rem; border-radius: 5px; box-sizing: content-box; } .topbar__title { color: var(--fc-light); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; } .topbar__sep { color: #6b6d72; } .topbar__spacer { flex: 1; } .topbar__link { color: #c9cbcf; text-decoration: none; font-size: .87rem; font-weight: 500; padding: .35rem .6rem; border-radius: 6px; white-space: nowrap; } .topbar__link:hover { color: var(--fc-light); background: rgba(255,255,255,.07); } .topbar__link[aria-current="page"] { color: var(--fc-dark); background: var(--accent); } /* Segmented language switch and the theme button share this shell. */ .switch { display: inline-flex; align-items: center; border: 1px solid #3d3f43; border-radius: 7px; overflow: hidden; } .switch button { appearance: none; border: 0; background: transparent; color: #c9cbcf; font: 600 .78rem/1 var(--font-sans); letter-spacing: .04em; padding: .42rem .6rem; cursor: pointer; } .switch button:hover { background: rgba(255,255,255,.07); color: var(--fc-light); } .switch button[aria-pressed="true"] { background: var(--accent); color: var(--fc-dark); } .iconbtn { appearance: none; border: 1px solid #3d3f43; border-radius: 7px; background: transparent; color: #c9cbcf; padding: .34rem .5rem; cursor: pointer; line-height: 1; font-size: .95rem; } .iconbtn:hover { background: rgba(255,255,255,.07); color: var(--fc-light); } @media (max-width: 640px) { .topbar { flex-wrap: wrap; gap: .6rem .75rem; padding: .6rem 1rem; } .topbar__spacer { display: none; } .topbar__title { font-size: .85rem; white-space: normal; } } /* Anything that must only appear in one language. */ [data-lang]:not([data-lang~="all"]) { display: none; } html[lang="en"] [data-lang~="en"], html[lang="es"] [data-lang~="es"] { display: revert; }