/* ========================================================================== Fleetzero brand stylesheet Load this on every Fleetzero app: It defines the brand palette and base styling as CSS custom properties so any app inherits a consistent look. Use the variables below instead of ad-hoc colors or fonts. ========================================================================== */ /* -------------------------------------------------------------------------- Fonts Headers: Neue Haas Grotesk Display (licensed) -> Helvetica Neue, Arial Body: Lexend (licensed/open) -> Open Sans, Calibri The licensed font files are NOT bundled. To use the real brand fonts, drop the font files into static/fonts/ and uncomment the @font-face blocks below. Until then the fallbacks render automatically. -------------------------------------------------------------------------- */ /* @font-face { font-family: "Neue Haas Grotesk Display"; src: url("../fonts/NeueHaasGroteskDisplay.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../fonts/Lexend.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } */ :root { /* --- Brand palette -------------------------------------------------- */ --fz-black: #000000; /* Fleetzero Black - dominant surface / text */ --fz-white: #ffffff; /* White - dominant surface */ --fz-green: #a3d669; /* Fleetzero Green - PRIMARY ACCENT */ --fz-blue: #00a3ff; /* Ocean Blue - data / callouts */ --fz-mineral: #395a47; /* Mineral Green - secondary dark */ --fz-gray: #eeeeee; /* Gallery Gray - light neutral */ /* --- Semantic roles (built on the 60/30/10 rule) -------------------- */ /* 60%: black/near-black surfaces | 30%: elevated dark secondary | 10%: green/blue accents */ /* DARK BY DEFAULT — new apps ship dark. Green + Ocean Blue stay 10% accents. */ color-scheme: dark; --fz-surface: #101214; /* near-black brand surface (dominant) */ --fz-surface-alt: #1b1e21; /* elevated dark surface (cards / secondary) */ --fz-text: #eef0f2; /* off-white text */ --fz-text-muted: #9aa0a6; /* muted labels */ --fz-accent: var(--fz-green); --fz-data: var(--fz-blue); --fz-border: #2a2e33; /* --- Typography ----------------------------------------------------- */ --fz-font-heading: "Neue Haas Grotesk Display", "Helvetica Neue", Arial, sans-serif; --fz-font-body: "Lexend", "Open Sans", Calibri, sans-serif; /* --- Spacing / shape ------------------------------------------------ */ --fz-radius: 6px; --fz-maxwidth: 880px; } /* -------------------------------------------------------------------------- Light theme — EXPLICIT OPT-IN only. Dark is the default (above); add data-theme="light" to when the user specifically asks for a light UI. -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --fz-surface: var(--fz-white); --fz-surface-alt: var(--fz-gray); --fz-text: var(--fz-black); --fz-text-muted: #555555; --fz-border: #d8d8d8; } /* -------------------------------------------------------------------------- Base styling — applied automatically so a new app looks on-brand at once -------------------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; background-color: var(--fz-surface); color: var(--fz-text); font-family: var(--fz-font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--fz-font-heading); color: var(--fz-text); line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; } h1 { font-size: 2.4rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.35rem; } p { margin: 0 0 1em; } a { color: var(--fz-data); /* Ocean Blue — reads on both dark (default) and light */ text-decoration: underline; } a:hover { filter: brightness(1.15); } :root[data-theme="light"] a { color: var(--fz-mineral); } :root[data-theme="light"] a:hover { filter: none; color: var(--fz-black); } /* Layout helper any page can use */ .fz-container { max-width: var(--fz-maxwidth); margin: 0 auto; padding: 2.5rem 1.5rem; } /* Accent button */ .fz-button { display: inline-block; font-family: var(--fz-font-heading); font-weight: 700; font-size: 1rem; color: var(--fz-black); background-color: var(--fz-accent); border: none; border-radius: var(--fz-radius); padding: 0.7rem 1.4rem; cursor: pointer; text-decoration: none; transition: filter 0.15s ease; } .fz-button:hover { filter: brightness(0.92); color: var(--fz-black); } /* Secondary / data button */ .fz-button--data { background-color: var(--fz-data); color: var(--fz-white); } .fz-button--data:hover { color: var(--fz-white); } /* Callout / card on the gray secondary surface */ .fz-card { background-color: var(--fz-surface-alt); border: 1px solid var(--fz-border); border-radius: var(--fz-radius); padding: 1.25rem 1.5rem; } /* Inline accent for data figures / callouts */ .fz-data-figure { color: var(--fz-data); font-family: var(--fz-font-heading); font-weight: 700; } /* Dark section (uses black surface; pair with the White Color logo) */ .fz-dark { background-color: var(--fz-black); color: var(--fz-white); } .fz-dark h1, .fz-dark h2, .fz-dark h3 { color: var(--fz-white); } /* ========================================================================== CHART GUIDANCE (for whoever builds charts in an app) -------------------------------------------------------------------------- - Fleetzero / positive data series : Fleetzero Green (#A3D669) and Ocean Blue (#00A3FF). - Legacy / diesel / baseline data : Fleetzero Black (#000000) and Gallery Gray (#EEEEEE). - Use 2D charts ONLY. No 3D, no shadows, no fake depth. - Minimal gridlines. Remove chart junk. Let the data carry the page. ========================================================================== */