/* ================================================================ tokens.css – Compliance Checker Design tokens: fonts, colours, shadows, radii, z-index, layout. Loaded first so every other file can reference var(--*) names. ================================================================ */ /* === FONT FACES =============================================== */ /* Nexa — woff2 for performance, otf fallback */ @font-face { font-family: "NexaBold"; src: url("../fonts/Nexa_font_family_woff2/Nexa Bold.woff2") format("woff2"), url("../fonts/Nexa_font_family/Nexa Bold.otf") format("opentype"); font-weight: 700; font-display: swap; } @font-face { font-family: "NexaRegular"; src: url("../fonts/Nexa_font_family_woff2/Nexa Regular.woff2") format("woff2"), url("../fonts/Nexa_font_family/Nexa Regular.otf") format("opentype"); font-weight: 400; font-display: swap; } /* Work Sans — local .ttf files */ @font-face { font-family: "Work Sans"; src: url("../fonts/Work_sans/WorkSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../fonts/Work_sans/WorkSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../fonts/Work_sans/WorkSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../fonts/Work_sans/WorkSans-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } /* === CUSTOM PROPERTIES ======================================== */ :root { /* Brand colours */ --ae-darkblue: #087880; /* nav, teal buttons, borders */ --ae-darkblue-90: rgba(8, 120, 128, 0.9); /* nav CTA text colour */ --ae-darkblue-10: rgba(8, 120, 128, 0.08); /* teal button hover bg */ --ae-orange: #EFB417; /* yellow/orange CTA buttons */ --ae-lightgreen: #C2ED45; /* footer Quick-Links heading */ /* Neutrals */ --white: #fff; --white-15: rgba(255, 255, 255, 0.15); /* footer bottom border */ --ae-black: #282828; /* primary body text */ --ae-black-50: rgba(0, 0, 0, 0.5); /* muted / card stat numbers */ --ae-white: #F8F8F8; /* off-white surface — explore bg, nav text */ --card-bg: #F5F5F5; /* card surface */ /* Shadows */ --shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* small elevation */ --shadow-dropdown: 0 8px 20px rgba(0, 0, 0, 0.12); --shadow-card: 0 0 40px -10px rgba(0,0,0,.3), 0 0 25px -15px rgba(0,0,0,.2); /* Neutral scale for data UI (muted text, borders, track/hover tints) */ --color-muted: #666; /* secondary text */ --text-muted: #333; /* body text on data-heavy pages, dropdown links */ --color-input-border: #ddd; /* form input borders */ --color-track-bg: #eee; /* progress-bar track */ --color-row-hover: #f8f9fa; /* row / card hover tint */ --color-placeholder: #9a9a9a; /* form input placeholder text */ /* Soft-green data-panel palette — shared by .data-freshness-card (country-page shared) and .export-intro-panel (export page). */ --color-data-panel-bg-top: #f7fbf9; --color-data-panel-bg-bottom: #eef6f2; --color-data-panel-border: #d4e5de; --color-data-panel-label: #5c7b73; --color-data-panel-subvalue: #5f7871; --color-data-panel-value: #24443d; /* Case-studies-specific accents. --color-chip-accent is the navy used for the toolbar filter chips; --color-badge-potential-* are the muted tones of the "Potential" supply-chain badge. None of these map onto existing brand tokens. */ --color-chip-accent: #113e61; --color-badge-potential-text: #5a6b6a; --color-badge-potential-dot: #8a9a99; /* Commodity palette */ --commodity-cattle: #37f; /* blue */ --commodity-cocoa: #917dac; /* lavender */ --commodity-coffee: #a67b5d; /* tan brown */ --commodity-corn: #f4c430; /* saffron golden */ --commodity-cotton: #d4a5a5; /* dusty rose */ --commodity-palm: #d5a833; /* mustard */ --commodity-poultry: #c44569; /* raspberry / meat */ --commodity-rubber: #d57025; /* orange-red */ --commodity-soy: #5b8653; /* sage green */ --commodity-wood: #5f3c2e; /* dark brown */ /* Fluid UI text scale — for body / table / chip / label sizing. Uses rem+vw so the user's browser font-size preference (zoom) still scales the floor and ceiling, while ultrawide viewports get a smooth size lift between them. Anchored so the floor is active up to ~1440px and the ceiling kicks in around 2667px. */ --fs-xs: clamp(0.6875rem, 0.4rem + 0.3vw, 0.875rem); /* 11 → 14 */ --fs-sm: clamp(0.75rem, 0.45rem + 0.3vw, 0.9375rem); /* 12 → 15 */ --fs-md: clamp(0.8125rem, 0.5rem + 0.3vw, 1rem); /* 13 → 16 */ --fs-lg: clamp(0.875rem, 0.55rem + 0.3vw, 1.0625rem); /* 14 → 17 */ /* Fluid heading scale — mirrors the rungs in typography.css so a custom element can opt into a heading size without using a heading element or class. rem-based floors/ceilings so the browser font-size preference still scales them. */ --fs-display: clamp(3rem, 6vw, 6rem); /* 48 → 96 */ --fs-h1: clamp(2rem, 3.8vw, 3.75rem); /* 32 → 60 */ --fs-h2: clamp(1.5rem, 2.5vw, 2.5rem); /* 24 → 40 */ --fs-h3: clamp(1.25rem, 1.9vw, 1.875rem); /* 20 → 30 */ --fs-h4: clamp(1rem, 1.3vw, 1.125rem); /* 16 → 18 */ --fs-h5: clamp(0.875rem, 0.95vw, 0.9375rem); /* 14 → 15 */ --fs-h6: clamp(0.75rem, 0.85vw, 0.8125rem); /* 12 → 13 */ /* Fluid spacing scale — for padding / margin / gap. Use these wherever a layout should breathe more on ultrawide monitors and stay tight on phones. rem-based so user zoom still scales. */ --space-xs: clamp(0.5rem, 1vw, 0.75rem); /* 8 → 12 */ --space-sm: clamp(0.75rem, 1.5vw, 1.25rem); /* 12 → 20 */ --space-md: clamp(1rem, 2vw, 1.5rem); /* 16 → 24 */ --space-lg: clamp(1.25rem, 2.5vw, 2rem); /* 20 → 32 */ --space-xl: clamp(1.5rem, 3vw, 2.5rem); /* 24 → 40 */ --space-2xl: clamp(2rem, 3vw, 3rem); /* 32 → 48 */ /* Fluid table-column widths — for grid layouts where fixed-px columns would otherwise leave fr columns to absorb all the extra space on ultrawide displays. Sized in px (not rem) since these are layout widths, not text. */ --col-xs: clamp(44px, 3.5vw, 60px); /* icon col */ --col-sm: clamp(100px, 7vw, 140px); /* compact data */ --col-md: clamp(110px, 8vw, 150px); /* default data */ --col-lg: clamp(130px, 9vw, 180px); /* wide data */ /* Font families — wrap once here so callers don't repeat the fallback chain. --font-heading uses NexaBold for display headings; --font-body uses Work Sans for everything else; --font-cta is reserved for nav CTAs that opt into DM Sans. */ --font-heading: "NexaBold", Arial, sans-serif; --font-body: "Work Sans", Arial, sans-serif; --font-cta: "DM Sans", Arial, sans-serif; /* Motion */ --transition-base: 0.2s ease; /* default hover/state transition */ /* Typographic spacing */ --ls-uppercase: 0.08em; /* tracking for small uppercase labels */ /* Border radii */ --radius-pill: 52px; /* pill buttons */ --radius-card: 20px; /* cards and image frames */ --radius-lg: 16px; /* chart/table section frames + modals */ --radius-dropdown: 8px; /* dropdown panel */ --radius-sm: 4px; /* countries map corner */ /* Z-index scale — full layering of the app. Local stacking contexts (z:1, z:2 inside a positioned parent) stay inline and use --z-base/--z-content; these tokens cover global layers that need to coordinate across files (map, nav, drawer, modal). Comments document what sits at each level. */ --z-base: 0; /* default flow / decoration backings */ --z-content: 1; /* content above absolute decorations */ --z-elevated: 10; /* lifted content (cs-rail vs Leaflet) */ --z-tooltip: 1000; /* map legends, info tooltips, sticky- sidebar, sort tooltip */ --z-portal: 1050; /* portaled tooltips above the map */ --z-drawer-bg: 1055; /* drawer/sidebar backdrop */ --z-drawer: 1060; /* drawer/sidebar surface */ --z-nav: 1100; /* fixed nav — above Leaflet (1000), Bootstrap modal (1055), Bootstrap offcanvas (1045) */ --z-dropdown: 1101; /* nav dropdown panel */ --z-mobile-nav: 2000; /* fullscreen mobile nav overlay */ --z-modal: 9999; /* fullscreen modal (backdrop + dialog) */ /* Layout */ --nav-h: 100px; /* fixed nav height — used as offset */ --card-min-h: 380px; /* homepage 4-up card minimum height */ --page-max: min(95%, 2400px); /* page-level content cap — keeps top- level blocks off the screen edges on ultrawide while staying nearly full-width on phones */ /* Progress bar / breadcrumb tints (Flask app chrome) */ --progress-active: rgba(255, 255, 255, 0.15); /* active section highlight */ --progress-hover: rgba(255, 255, 255, 0.1); /* section hover highlight */ /* === EXTENDED PALETTE ====================================== Canonical bases: --ae-lightblue / --ae-green / --ae-yellow. Each has unique dark/lite tertiary tints used by country pages and methodology theming. Tertiary tint names retain their original "aqua/land/sun/jungle" prefixes — they are distinct hex values, not aliases of any base colour. */ /* Lightblue (canonical) + tertiaries */ --ae-lightblue: #4FD4C7; --ae-aqua-dark: #61BBAC; --ae-aqua-lite: #CAF1ED; /* Green (canonical) + tertiaries */ --ae-green: #36C726; --ae-land-dark: #6AA848; --ae-land-lite: #AEE9A8; /* Yellow (canonical) + sun tertiary */ --ae-yellow: #FEE327; --ae-sun-lite: #FBED97; /* Lightgreen tertiaries (canonical --ae-lightgreen lives in the Brand colours block at the top of :root). */ --ae-jungle-dark: #98CF37; --ae-jungle-light: #EBF7C8; }