/** * WCP Field Media Upload - CSS Variables * * Centralized design tokens for consistent theming. * Edit colors here to change the entire application appearance. * * COLOR NAMING CONVENTION: * --color-{name} : Base color * --color-{name}-{shade} : Shade variant (50=lightest, 900=darkest) * --color-{name}-bg : Background tint * --color-{name}-text : Text color for use on light backgrounds * --color-{name}-border : Border color */ :root { /* =========================================== COLOR PALETTE - Light Mode =========================================== */ /* Brand/Primary Colors - Monochrome theme matching logo */ --color-primary: #2d2d2d; --color-primary-dark: #1a1a1a; --color-primary-light: #4a4a4a; /* Primary color shades (for compatibility) */ --color-primary-50: #f8f8f8; --color-primary-100: #e8e8e8; --color-primary-200: #d1d1d1; --color-primary-300: #a3a3a3; --color-primary-400: #737373; --color-primary-500: #525252; --color-primary-600: #2d2d2d; --color-primary-700: #1a1a1a; --color-primary-800: #0d0d0d; --color-primary-900: #000000; /* Accent Color - Used for interactive elements */ --color-accent: #2563eb; --color-accent-light: #3b82f6; --color-accent-dark: #1d4ed8; --color-accent-bg: rgba(37, 99, 235, 0.1); /* =========================================== SEMANTIC COLORS =========================================== */ /* Red - Errors, danger, delete actions */ --color-red-50: #fef2f2; --color-red-100: #fee2e2; --color-red-200: #fecaca; --color-red-300: #fca5a5; --color-red-400: #f87171; --color-red-500: #ef4444; --color-red-600: #dc2626; --color-red-700: #b91c1c; --color-red-800: #991b1b; --color-red-900: #7f1d1d; /* Green - Success, confirmation, vegetation */ --color-green-50: #f0fdf4; --color-green-100: #dcfce7; --color-green-200: #bbf7d0; --color-green-300: #86efac; --color-green-400: #4ade80; --color-green-500: #22c55e; --color-green-600: #16a34a; --color-green-700: #15803d; --color-green-800: #166534; --color-green-900: #14532d; /* Blue - Info, links, water */ --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-200: #bfdbfe; --color-blue-300: #93c5fd; --color-blue-400: #60a5fa; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --color-blue-800: #1e40af; --color-blue-900: #1e3a8a; /* Sky - Light blue for water, info badges */ --color-sky-50: #f0f9ff; --color-sky-100: #e0f2fe; --color-sky-500: #0ea5e9; --color-sky-600: #0284c7; --color-sky-700: #0369a1; /* Cyan - Deeper blue-green */ --color-cyan-50: #ecfeff; --color-cyan-100: #cffafe; --color-cyan-200: #a5f3fc; --color-cyan-500: #06b6d4; --color-cyan-600: #0891b2; --color-cyan-700: #0e7490; /* Teal - Blue-green for categories */ --color-teal-50: #f0fdfa; --color-teal-100: #ccfbf1; --color-teal-200: #99f6e4; --color-teal-500: #14b8a6; --color-teal-600: #0d9488; --color-teal-700: #0f766e; /* Orange - Distinct from amber, more saturated */ --color-orange-50: #fff7ed; --color-orange-100: #ffedd5; --color-orange-200: #fed7aa; --color-orange-500: #f97316; --color-orange-600: #ea580c; --color-orange-700: #c2410c; /* Amber/Yellow - Warnings, caution */ --color-amber-50: #fffbeb; --color-amber-100: #fef3c7; --color-amber-200: #fde68a; --color-amber-300: #fcd34d; --color-amber-400: #fbbf24; --color-amber-500: #f59e0b; --color-amber-600: #d97706; --color-amber-700: #b45309; --color-amber-800: #92400e; --color-amber-900: #78350f; /* Yellow aliases (map to amber for consistency) */ --color-yellow-50: var(--color-amber-50); --color-yellow-100: var(--color-amber-100); --color-yellow-200: var(--color-amber-200); --color-yellow-500: var(--color-amber-500); --color-yellow-600: var(--color-amber-600); --color-yellow-700: var(--color-amber-700); --color-yellow-800: var(--color-amber-800); /* Purple/Violet - Structures, special items */ --color-purple-50: #faf5ff; --color-purple-100: #f3e8ff; --color-purple-200: #e9d5ff; --color-purple-500: #a855f7; --color-purple-600: #9333ea; --color-purple-700: #7c3aed; --color-purple-800: #6b21a8; /* Semantic Aliases */ --color-success: var(--color-green-600); --color-success-bg: var(--color-green-50); --color-success-text: var(--color-green-800); --color-success-border: var(--color-green-200); /* Success shades (for compatibility) */ --color-success-50: var(--color-green-50); --color-success-100: var(--color-green-100); --color-success-200: var(--color-green-200); --color-success-600: var(--color-green-600); --color-success-700: var(--color-green-700); --color-warning: var(--color-amber-500); --color-warning-bg: var(--color-amber-50); --color-warning-text: var(--color-amber-800); --color-warning-border: var(--color-amber-200); /* Warning shades (for compatibility) */ --color-warning-50: var(--color-amber-50); --color-warning-100: var(--color-amber-100); --color-warning-200: var(--color-amber-200); --color-warning-600: var(--color-amber-600); --color-warning-700: var(--color-amber-700); --color-error: var(--color-red-600); --color-error-bg: var(--color-red-50); --color-error-text: var(--color-red-800); --color-error-border: var(--color-red-200); /* Error shades (for compatibility) */ --color-error-50: var(--color-red-50); --color-error-100: var(--color-red-100); --color-error-200: var(--color-red-200); --color-error-500: var(--color-red-500); --color-error-600: var(--color-red-600); --color-error-700: var(--color-red-700); --color-info: var(--color-blue-600); --color-info-bg: var(--color-blue-50); --color-info-text: var(--color-blue-800); --color-info-border: var(--color-blue-200); /* =========================================== WORK CATEGORY COLORS =========================================== */ --color-category-vegetation: var(--color-green-700); --color-category-vegetation-bg: var(--color-green-50); --color-category-vegetation-border: var(--color-green-200); --color-category-water: var(--color-sky-700); --color-category-water-bg: var(--color-sky-50); --color-category-water-border: var(--color-sky-100); --color-category-structures: var(--color-purple-700); --color-category-structures-bg: var(--color-purple-50); --color-category-structures-border: var(--color-purple-100); --color-category-site-prep: var(--color-amber-700); --color-category-site-prep-bg: var(--color-amber-50); --color-category-site-prep-border: var(--color-amber-100); --color-category-other: var(--color-gray-600); --color-category-other-bg: var(--color-gray-50); --color-category-other-border: var(--color-gray-200); /* =========================================== MEASUREMENT CATEGORY COLORS =========================================== */ --color-measure-physical: var(--color-blue-700); --color-measure-physical-bg: var(--color-blue-50); --color-measure-chemical: var(--color-purple-700); --color-measure-chemical-bg: var(--color-purple-50); --color-measure-biological: var(--color-green-700); --color-measure-biological-bg: var(--color-green-50); --color-measure-habitat: var(--color-amber-700); --color-measure-habitat-bg: var(--color-amber-50); --color-measure-weather: var(--color-sky-700); --color-measure-weather-bg: var(--color-sky-50); /* =========================================== TAXON/SPECIES COLORS =========================================== */ --color-taxon-bird: #1565c0; --color-taxon-bird-bg: #e3f2fd; --color-taxon-mammal: #8b4513; --color-taxon-mammal-bg: #fff8e1; --color-taxon-reptile: #228b22; --color-taxon-reptile-bg: #e8f5e9; --color-taxon-amphibian: #1e90ff; --color-taxon-amphibian-bg: #e1f5fe; --color-taxon-fish: #0097a7; --color-taxon-fish-bg: #e0f7fa; --color-taxon-insect: #f59e0b; --color-taxon-insect-bg: #fff8e1; --color-taxon-arachnid: #8b4513; --color-taxon-arachnid-bg: #efebe9; --color-taxon-plant: #2e7d32; --color-taxon-plant-bg: #e8f5e9; --color-taxon-fungi: #6d4c41; --color-taxon-fungi-bg: #efebe9; --color-taxon-unknown: #708090; --color-taxon-unknown-bg: #f5f5f5; /* =========================================== CHART COLORS (for data visualization) =========================================== */ --color-chart-1: #3b82f6; /* Blue */ --color-chart-2: #ef4444; /* Red */ --color-chart-3: #22c55e; /* Green */ --color-chart-4: #f59e0b; /* Amber */ --color-chart-5: #8b5cf6; /* Purple */ --color-chart-6: #94a3b8; /* Gray */ --color-chart-7: #ec4899; /* Pink */ --color-chart-8: #14b8a6; /* Teal */ /* =========================================== POINT TYPE BADGE COLORS (for location/map markers) =========================================== */ --color-point-blue: var(--color-blue-700); --color-point-blue-bg: var(--color-blue-100); --color-point-green: var(--color-green-700); --color-point-green-bg: var(--color-green-100); --color-point-teal: var(--color-teal-700); --color-point-teal-bg: var(--color-teal-100); --color-point-orange: var(--color-orange-700); --color-point-orange-bg: var(--color-orange-100); --color-point-red: var(--color-red-700); --color-point-red-bg: var(--color-red-100); --color-point-purple: var(--color-purple-700); --color-point-purple-bg: var(--color-purple-100); --color-point-gray: var(--color-gray-600); --color-point-gray-bg: var(--color-gray-200); /* =========================================== OVERLAY & BACKDROP COLORS =========================================== */ --color-overlay-light: rgba(255, 255, 255, 0.9); --color-overlay-dark: rgba(0, 0, 0, 0.5); --color-backdrop: rgba(0, 0, 0, 0.6); /* =========================================== GRAY SCALE =========================================== */ --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* Core Colors */ --color-white: #ffffff; --color-black: #000000; /* =========================================== SEMANTIC NEUTRALS These were used by ~350 declarations across nine stylesheets while being defined NOWHERE -- they existed only inside the standalone mockups/mockup-option*.html files and never made it into the app. (That directory was removed 2026-08-15 once these values were captured here; read the originals with: git show 2a6505f:mockups/mockup-option3.html) An unresolvable var() is invalid at computed-value time, so every one of those declarations silently fell back: border: 1px solid var(--color-border) -> border-color became currentColor, painting heavy dark hairlines instead of subtle ones color: var(--color-text-muted) -> color inherited, so "muted" sub-labels rendered at full body weight Found 2026-08-15 from a single wonky-looking table; the cause was app-wide. Defined as aliases rather than literals, matching the existing --color-success: var(--color-green-600) convention, so the dark-mode block below (which reinverts the whole gray scale) applies automatically -- custom properties resolve lazily, so no dark-mode duplication is needed here. Values are the mockups' own, which map exactly onto the gray scale: #e5e7eb = gray-200, #9ca3af = gray-400, #111827 = gray-900. =========================================== */ --color-border: var(--color-gray-200); --color-border-light: var(--color-gray-100); --color-text: var(--color-gray-900); --color-text-primary: var(--color-gray-900); --color-text-secondary: var(--color-gray-600); --color-text-muted: var(--color-gray-400); --color-surface: var(--color-white); --color-bg-primary: var(--color-white); --color-bg-card: var(--color-white); --color-bg-secondary: var(--color-gray-50); --color-bg-subtle: var(--color-gray-50); --color-bg-tertiary: var(--color-gray-100); /* Bare "the background". Aliases --color-white, which the dark block flips to slate, so it tracks the theme like every other neutral. */ --color-bg: var(--color-white); /* =========================================== SEMANTIC ALIASES -- the remaining tail Second pass over the same class of bug: names used by stylesheets but never defined. Each is mapped by how it is USED, not by its name. Every alias below points at a token that already existed; the only new raw values in this file are the 300/400/900 ramp steps added above, which are the genuine Tailwind values for palettes this file already matches exactly (red-500 #ef4444, green-500 #22c55e, blue-500 #3b82f6, amber-500 #f59e0b), so the scale is completed rather than approximated. =========================================== */ /* "danger" is this codebase's other name for error -- both are used as a solid fill and as text (detail-page, inline-edit, project-goals). */ --color-danger: var(--color-error); /* The *-light trio appears only as a background fill (dashboard, review, pending-items), which is exactly what the existing *-bg tokens are. */ --color-success-light: var(--color-success-bg); --color-warning-light: var(--color-warning-bg); --color-error-light: var(--color-error-bg); --color-warning-dark: var(--color-amber-700); /* Numbered status steps, straight through to the underlying ramp. */ --color-success-300: var(--color-green-300); --color-success-400: var(--color-green-400); --color-success-500: var(--color-green-500); --color-warning-300: var(--color-amber-300); --color-warning-400: var(--color-amber-400); --color-warning-500: var(--color-amber-500); --color-warning-800: var(--color-amber-800); --color-warning-900: var(--color-amber-900); --color-error-300: var(--color-red-300); --color-error-400: var(--color-red-400); --color-error-800: var(--color-red-800); --color-error-900: var(--color-red-900); --color-info-50: var(--color-blue-50); --color-info-100: var(--color-blue-100); --color-info-300: var(--color-blue-300); --color-info-700: var(--color-blue-700); /* Focus ring (member-list). color-mix keeps it tracking --color-primary, which the dark block overrides -- an rgba literal would not. */ --color-primary-alpha: color-mix(in srgb, var(--color-primary) 25%, transparent); /* =========================================== BRAND PALETTE + MODULE COLOR CONTEXT Four base colors drive a per-module "context" of derived tokens. Rule: chrome reads --ctx-* ONLY; body text + card backgrounds stay neutral. Switching context = setting [data-context] on (done in header.php from $action). Everything traces back to one base hue mixed with the neutral palette, so the family stays harmonious -- no per-element hand-coloring. =========================================== */ --brand-green: #27ebb2; /* rgb 39 235 178 -- primary brand (accents, default text) */ --brand-green-deep: #00e1bb; /* rgb 0 225 187 -- deeper teal for the page bg wash */ --brand-pink: #c157ff; /* rgb 193 87 255 -- secondary */ --brand-blue: #0058ff; /* rgb 0 88 255 -- secondary */ --brand-grey: #5e5e5e; /* rgb 94 94 94 -- neutral primary (text-weight) */ --brand-grey-light: #d0d0d0; /* rgb 208 208 208 -- hairlines, and light text on dark bg */ /* Approved text-on-background combos (the 3-color cycle): green bg -> blue text pink bg -> green text blue bg -> pink text A module context uses its signature color for the page-background wash + the accent, and the paired color (per the cycle) for the HEADER TEXT (and the "Methodology & sources" summary, which tracks the header). There is NO header background bar -- the colored text sits directly on the (washed) page body. */ /* Context tokens -- DEFAULTS = the "media gallery / no module" look: GREEN header/breadcrumb/summary text on a plain page bg. Module blocks below override the text color + add a bg-wash tint. */ --ctx-base: var(--brand-green); --ctx-header-fg: color-mix(in srgb, var(--brand-green) 78%, var(--color-gray-900)); --ctx-rule: color-mix(in srgb, var(--brand-green) 38%, var(--color-gray-300)); --ctx-accent: var(--brand-green); /* The page-background wash color: behind the botanical tile sits a wash of THIS color (see sidebar.css). Default = plain gray-50 (no tint -- only the *text* is green on default pages). A module context replaces it with a tint of the module's signature hue. */ --ctx-bg-wash: var(--color-gray-50); /* =========================================== DEBUG/DEVELOPMENT COLORS =========================================== */ /* =========================================== BACKGROUND PATTERN Botanical line-art tile on .app-main-content (see sidebar.css). Two knobs, both tuned here: --bg-pattern-wash : opacity of the page-color wash layered OVER the pattern. Higher (toward 100%) = fainter, lower = bolder. --bg-pattern-size : the rendered tile size (background-size for the image layer), independent of the source file's pixel dimensions. ~400px gives roughly 3 repeats across a typical content column on a wide screen; drop it for more repeats, raise it for fewer. The wash color is var(--color-gray-50), which is mode-aware, so the dark-mode block only swaps the image (LIGHT vs DARK). =========================================== */ --bg-pattern-wash: 72%; --bg-pattern-size: 300px auto; /* Auth pages (login, register, MFA, password-reset) -- the DARK line-art tile behind their centered cards, deepened toward a fixed near-black. Intentionally moody / NOT theme-reactive. */ --bg-pattern-wash-dark: 38%; --bg-pattern-wash-dark-color: #0a0d14; /* Admin / back-office pages (config, member/org/request mgmt, system tools, account) -- the dark tile under a CHARCOAL wash: clearly a darker "back-office" surface, but a mid-dark slate, not the near-black of the login backdrop. Bump --bg-admin-wash toward 100% or lighten --bg-admin-wash-color to lift it further; drop them to deepen it. */ --bg-admin-wash: 70%; --bg-admin-wash-color: #585d65; /* =========================================== DEBUG/DEVELOPMENT COLORS =========================================== */ --color-debug-bg: #fffbe6; --color-debug-border: #ffe58f; /* =========================================== DARK MODE COLORS (Slate palette) =========================================== */ --dark-bg-primary: #0f172a; /* slate-900 - darkest, main background */ --dark-bg-secondary: #1e293b; /* slate-800 - cards, panels */ --dark-bg-tertiary: #334155; /* slate-700 - hover states, borders */ --dark-bg-elevated: #475569; /* slate-600 - elevated elements */ --dark-border-primary: #334155; /* slate-700 */ --dark-border-secondary: #1e293b; /* slate-800 */ --dark-text-primary: #f1f5f9; /* slate-100 - primary text */ --dark-text-secondary: #e2e8f0; /* slate-200 - secondary text */ --dark-text-muted: #94a3b8; /* slate-400 - muted text */ --dark-text-dimmed: #64748b; /* slate-500 - very muted text */ /* =========================================== TYPOGRAPHY (scaled to ~75% for compact UI) =========================================== */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Alias: map-view.css asks for --font-family-sans. */ --font-family-sans: var(--font-family); /* The one genuinely missing family. issues.css renders raw payloads in it, so it needs to be monospaced; there was no mono stack in this file. */ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --font-family-mono: var(--font-mono); --font-size-xs: 0.5625rem; /* 9px (was 12px) */ --font-size-sm: 0.6875rem; /* 11px (was 14px) */ --font-size-base: 0.8125rem; /* 13px (was 16px) */ --font-size-lg: 0.875rem; /* 14px (was 18px) */ --font-size-xl: 1rem; /* 16px (was 20px) */ --font-size-2xl: 1.125rem; /* 18px (was 24px) */ --font-size-3xl: 1.375rem; /* 22px (was 30px) */ /* Text size aliases (for compatibility) */ --text-xs: var(--font-size-xs); --text-sm: var(--font-size-sm); --text-base: var(--font-size-base); --text-lg: var(--font-size-lg); /* This scale runs sm -> base -> lg with no "md"; gis-ro.css asks for one, and base is the step that name refers to. */ --text-md: var(--font-size-base); --text-xl: var(--font-size-xl); --text-2xl: var(--font-size-2xl); --text-3xl: var(--font-size-3xl); --text-4xl: 1.75rem; /* 28px (was 36px) */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Font weight aliases */ --font-normal: var(--font-weight-normal); --font-medium: var(--font-weight-medium); --font-semibold: var(--font-weight-semibold); --font-bold: var(--font-weight-bold); --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* Alias: issues.css uses the short form. */ --leading-relaxed: var(--line-height-relaxed); /* =========================================== SPACING (scaled to ~75% for compact UI) =========================================== */ --spacing-1: 0.1875rem; /* 3px (was 4px) */ --spacing-2: 0.375rem; /* 6px (was 8px) */ --spacing-3: 0.5625rem; /* 9px (was 12px) */ --spacing-4: 0.75rem; /* 12px (was 16px) */ --spacing-5: 0.9375rem; /* 15px (was 20px) */ --spacing-6: 1.125rem; /* 18px (was 24px) */ --spacing-8: 1.5rem; /* 24px (was 32px) */ --spacing-10: 1.875rem; /* 30px (was 40px) */ --spacing-12: 2.25rem; /* 36px (was 48px) */ /* Spacing aliases (for compatibility) */ --spacing-2xs: 0.09375rem; /* 1.5px (was 2px) */ --spacing-xs: var(--spacing-1); --spacing-sm: var(--spacing-2); --spacing-md: var(--spacing-4); --spacing-lg: var(--spacing-6); --spacing-xl: var(--spacing-8); --spacing-2xl: var(--spacing-12); /* =========================================== BORDER RADIUS (scaled to ~75% for compact UI) =========================================== */ --radius-sm: 0.1875rem; /* 3px (was 4px) */ --radius-md: 0.25rem; /* 4px (was 6px) */ --radius-lg: 0.375rem; /* 6px (was 8px) */ --radius-xl: 0.5625rem; /* 9px (was 12px) */ --radius-2xl: 0.75rem; /* 12px (was 16px) */ --radius-full: 9999px; /* Unsuffixed default, used once in media-gallery.css. md is the base step. */ --border-radius: var(--radius-md); /* =========================================== SHADOWS =========================================== */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Component-specific shadows */ --shadow-card: 0 4px 12px rgb(0 0 0 / 0.08); --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 0.15); --shadow-dropdown: 0 4px 12px rgb(0 0 0 / 0.15); --shadow-modal: 0 20px 60px rgb(0 0 0 / 0.3); --shadow-floating: 0 2px 8px rgb(0 0 0 / 0.15); --shadow-control: 0 2px 4px rgb(0 0 0 / 0.3); --shadow-mobile-bar: 0 -4px 20px rgb(0 0 0 / 0.25); /* Focus ring */ --shadow-focus: 0 0 0 3px rgb(45 45 45 / 0.1); --shadow-focus-primary: 0 0 0 3px rgb(59 130 246 / 0.2); /* Dark mode shadows (more visible on dark backgrounds) */ --shadow-dark-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3); --shadow-dark-md: 0 4px 6px -1px rgb(0 0 0 / 0.4); --shadow-dark-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5); --shadow-dark-modal: 0 20px 60px rgb(0 0 0 / 0.5); --shadow-dark-card: 0 4px 12px rgb(0 0 0 / 0.3); /* =========================================== TRANSITIONS =========================================== */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* Alias: member-list.css calls the middle step "normal", this file calls it "base". Same 200ms. */ --transition-normal: var(--transition-base); /* =========================================== Z-INDEX SCALE Note: Leaflet map controls use z-index ~1000, so modals must be higher =========================================== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 1100; --z-modal: 1200; --z-popover: 1300; --z-tooltip: 1400; --z-toast: 1500; /* =========================================== RESPONSIVE BREAKPOINTS =========================================== */ --breakpoint-sm: 640px; /* Mobile */ --breakpoint-md: 768px; /* Tablet portrait */ --breakpoint-lg: 1024px; /* Tablet landscape / Desktop */ --breakpoint-xl: 1280px; /* Large desktop */ /* =========================================== TEXT TRUNCATION Line clamp values for graceful degradation =========================================== */ --line-clamp-max: 2; /* Default max lines before truncation */ /* =========================================== COMPONENT SIZES (scaled to ~75% for compact UI) All component-specific pixel dimensions in one place. =========================================== */ /* Icon sizes */ --icon-xs: 12px; /* was 16px */ --icon-sm: 14px; /* was 18px */ --icon-md: 16px; /* was 20px */ --icon-lg: 18px; /* was 24px */ --icon-xl: 24px; /* was 32px */ /* Avatar sizes */ --avatar-xs: 20px; /* was 24px */ --avatar-sm: 24px; /* was 32px */ --avatar-md: 30px; /* was 40px */ --avatar-lg: 36px; /* was 48px */ --avatar-xl: 48px; /* was 64px */ /* Button icon size */ --btn-icon-size: 12px; /* was 16px */ --btn-icon-size-lg: 14px; /* was 18px */ /* Navigation sizes */ --rail-width: 42px; /* was 56px */ --panel-width: 180px; /* was 240px */ --header-height: 48px; /* was 64px */ --mobile-header-height: 40px; /* was 52px */ --bottom-rail-height: 42px; /* was 56px */ /* Button/control sizes */ --control-height-sm: 24px; /* was 32px */ --control-height-md: 30px; /* was 40px */ --control-height-lg: 36px; /* was 48px */ --control-icon-btn: 21px; /* was 28px */ --control-toggle-btn: 28px; /* was 36px */ /* Container widths */ --container-narrow: 648px; /* 540 * 1.2 */ --container-default: 864px; /* 720 * 1.2 */ --container-wide: 1260px; /* 1050 * 1.2 */ /* Used once, by the impersonation banner, which spans the viewport and so wants the widest of the three rather than the reading-width default. */ --container-max-width: var(--container-wide); /* Stat/dashboard card icon */ --stat-icon-size: 47px; /* was 36px -- 30% larger for the home page */ --stat-icon-inner: 23px; /* was 18px -- 30% larger for the home page */ /* List item sizes */ --list-avatar-size: 30px; /* was 40px */ /* Search bar */ --search-max-width: 300px; /* was 400px */ --search-icon-size: 14px; /* was 18px */ --search-input-offset: 20px; /* was 26px */ /* Detail layout */ --detail-sidebar-width: 180px; /* Reduced to give more space to tables */ /* Activity/log panels */ --activity-log-width: 300px; /* was 400px */ --activity-log-height: 225px; /* was 300px */ /* Badge sizes */ --badge-height: 12px; /* was 16px */ --badge-font: 7px; /* was 9px */ --badge-height-lg: 14px; /* was 18px */ /* Textarea minimum height */ --textarea-min-height: 60px; /* was 80px */ /* Mobile menu header */ --mobile-menu-header-height: 40px; /* was 52px */ } /* =========================================== MODULE COLOR CONTEXTS One block per module. No header background bar -- the colored header/breadcrumb/summary TEXT sits directly on the page body, which carries a wash of the module's signature hue. Header text uses the cycle-paired color (green bg -> blue ink, etc.). Accent = the signature hue for the small bits (breadcrumb "|", header hairline, link hover). =========================================== */ /* GIS module -- green signature, blue header ink. The body wash is the deeper teal (--brand-green-deep) at a real strength so it reads as a green page, not a mint hint. */ [data-context="gis"] { --ctx-base: var(--brand-green); --ctx-header-fg: color-mix(in srgb, var(--brand-blue) 90%, var(--color-gray-900)); --ctx-rule: color-mix(in srgb, var(--brand-green) 55%, var(--color-gray-400)); --ctx-accent: var(--brand-green); --ctx-bg-wash: color-mix(in srgb, var(--brand-green-deep) 78%, var(--color-gray-50)); } /* Pink-signature module (unassigned -- ready for the module map). Combo: pink bg -> green ink. */ [data-context="pink"] { --ctx-base: var(--brand-pink); --ctx-header-fg: color-mix(in srgb, var(--brand-green) 80%, var(--color-gray-900)); --ctx-rule: color-mix(in srgb, var(--brand-pink) 50%, var(--color-gray-400)); --ctx-accent: var(--brand-pink); --ctx-bg-wash: color-mix(in srgb, var(--brand-pink) 55%, var(--color-gray-50)); } /* Blue-signature module (unassigned). Combo: blue bg -> pink ink. */ [data-context="blue"] { --ctx-base: var(--brand-blue); --ctx-header-fg: color-mix(in srgb, var(--brand-pink) 85%, var(--color-gray-900)); --ctx-rule: color-mix(in srgb, var(--brand-blue) 45%, var(--color-gray-400)); --ctx-accent: var(--brand-blue); --ctx-bg-wash: color-mix(in srgb, var(--brand-blue) 45%, var(--color-gray-50)); } /* Admin / back-office (config, lookup tables, member/org/request management, system tools, account/profile). DARK botanical tile (the tile swap is in sidebar.css, keyed off this attribute) with PINK loose text -- titles, subtitles, section headers, anything sitting directly on the dark backdrop rather than inside a white card. Cards/tables/modals reset to normal dark text (also in sidebar.css) so their content is unaffected. */ [data-context="admin"] { --ctx-base: var(--brand-pink); --ctx-header-fg: var(--brand-pink); --ctx-rule: color-mix(in srgb, var(--brand-pink) 50%, transparent); --ctx-accent: var(--brand-pink); /* not used for the bg here -- the .app-main-content override in sidebar.css supplies the dark wash + dark tile -- but set it sensibly in case something else reads it on an admin page. */ --ctx-bg-wash: var(--bg-admin-wash-color); } /* Explicit "default green-text" alias (same as the :root defaults). Lets a template mark its intent rather than relying on absence of the attribute. */ [data-context="neutral"] { --ctx-base: var(--brand-green); --ctx-header-fg: color-mix(in srgb, var(--brand-green) 78%, var(--color-gray-900)); --ctx-rule: color-mix(in srgb, var(--brand-green) 38%, var(--color-gray-300)); --ctx-accent: var(--brand-green); --ctx-bg-wash: var(--color-gray-50); } /* =========================================== DARK MODE OVERRIDES Apply dark mode colors when user prefers dark color scheme Note: Use actual values, not var() references, for proper resolution =========================================== */ @media (prefers-color-scheme: dark) { :root { /* Override gray scale for dark mode (inverted) */ --color-gray-50: #0f172a; /* Was light, now darkest */ --color-gray-100: #1e293b; --color-gray-200: #334155; --color-gray-300: #475569; --color-gray-400: #64748b; --color-gray-500: #94a3b8; --color-gray-600: #cbd5e1; --color-gray-700: #e2e8f0; --color-gray-800: #f1f5f9; --color-gray-900: #f8fafc; /* Was dark, now lightest */ /* Flip white/black for dark mode */ --color-white: #1e293b; --color-black: #f1f5f9; /* Use accent color for primary in dark mode for better visibility */ --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-primary-light: #3b82f6; } } /* =========================================== GRACEFUL DEGRADATION UTILITIES Text truncation and responsive visibility =========================================== */ /* Single line truncation with ellipsis */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Multi-line truncation (2 lines max) */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Single line clamp variant */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* =========================================== RESPONSIVE VISIBILITY UTILITIES Hide/show content based on screen size =========================================== */ /* Hide on mobile (< 640px) */ @media (max-width: 639px) { .hide-mobile { display: none !important; } .show-mobile-only { display: initial; } } @media (min-width: 640px) { .show-mobile-only { display: none !important; } } /* Hide on tablet and below (< 1024px) */ @media (max-width: 1023px) { .hide-tablet { display: none !important; } .show-tablet-only { display: initial; } } @media (min-width: 1024px) { .show-tablet-only { display: none !important; } } /* Desktop only (>= 1024px) */ @media (max-width: 1023px) { .show-desktop-only { display: none !important; } } @media (min-width: 1024px) { .hide-desktop { display: none !important; } } /* =========================================== RESPONSIVE TEXT SIZING Slightly smaller text on mobile =========================================== */ @media (max-width: 639px) { .text-responsive { font-size: 0.875em; } }