/* ========================================================================== FFL DESIGN TOKENS v1.5.1 (September 6, 2026) -------------------------------------------------------------------------- Drop this into the child theme and enqueue it BEFORE any other child-theme stylesheet. Nothing in this file targets a selector except the two accessibility rules at the end. It only declares variables. Rule for the team: no raw hex values anywhere else in the child theme. If a color is needed that isn't here, add it here first. Contrast ratios noted below are against white (#FFFFFF) unless stated. WCAG AA needs 4.5:1 for normal text, 3:1 for large text and UI borders. -------------------------------------------------------------------------- CHANGES IN v1.5.1 (John Harrington, September 6, 2026) -------------------------------------------------------------------------- 1. ARROW WATERMARK TINTS added (--watermark-on-*): the tone-on-tone fill for the logo arrow on PowerPoint section slides and the 2026 virtual backgrounds. One step off each surface; never any other color. No other value changed from v1.5. -------------------------------------------------------------------------- CHANGES IN v1.5 (John Harrington, September 5, 2026 — evening) -------------------------------------------------------------------------- 1. ROUTE DESTINATION IS NO LONGER RED. --route-dest and --route-dest-dark resolve to the disbursed teal #4DB6AC (with --route-dest-ring #2A7168 as the 7px ring on light surfaces). The last step of the E-rate process is money arriving; a red stop reads as a warning. Applies to the website (Home process, Services process, News year-rail origin), the PowerPoint Process slide, and the 2026 virtual backgrounds. Brand red now appears only in the logo, the Advantage hairline and tag, and as a display rule (the 6px red rule on title and section slides, --ffl-red on light / --ffl-red-dark on navy). 2. The route no longer appears on PowerPoint title or closing slides (template v1.1). It stays on the Process slide and the backgrounds. 3. Section 12 CHART AND DATA GUIDANCE added as a normative comment block so the rules travel with the file: series order, status vs. categorical, sequential use, source line, and the fence that keeps gold / teal / plum out of the interface. No other value changed from v1.4. -------------------------------------------------------------------------- CHANGES IN v1.4 (John Harrington, September 5, 2026) -------------------------------------------------------------------------- Decision: the brand and interface palette stays cool and unchanged. Charts and data graphics get their own color set so that multi-series charts are distinguishable by hue, not lightness alone (the v1.3 PowerPoint theme's six accents were five blue-grays and a gray, which fails colorblind viewers, projectors, and print). 1. Section 9 CATEGORICAL CHART SERIES added: --chart-1 … --chart-6 with text-safe (--chart-N-text) and on-dark (--chart-N-dark) variants. Series 1 is always FFL Blue. Gold, teal, and plum are new hues and are fenced to charts, tables, and data graphics — never UI, never CTA. 2. Section 10 SEQUENTIAL RAMP added: --seq-1 … --seq-5, the blue lineage light to dark, for single-measure shaded charts and heat tables. 3. Chart furniture tokens added: --chart-grid(-dark), --chart-axis(-dark). 4. PowerPoint theme accents 2–4 map to --chart-2/3/4 (template v1.1). 5. Funding-lifecycle colors are unchanged and remain the ONLY colors for status charts (requested / committed / pending / disbursed / denied). Do not use categorical series to show status, and do not use lifecycle colors for arbitrary series. No change to any v1.3.1 value. -------------------------------------------------------------------------- PREVIOUS CHANGES (kept for the trail) -------------------------------------------------------------------------- v1.3.1 (Sept 4) --step-hero 40→64px (Home), --step-h1 36→56px, --step-h1-article 32→48px. Tokens follow the reviewed mockup. v1.3 (Sept 4) Type scale from Website Mockup v2: H2 28→40px, H3 20px, tracking −0.01em, lh-tight 1.08, lh-body 1.6, eyebrow 11px; --font-subhead/--weight-subhead (Public Sans 700 below H2); --field-line; --radius-btn 6px; --radius-pill; logo SVG fills corrected to #00338D / #00B9E4 / #AA272F; reversed logo added. v1.2 (Sept 2) --ffl-red corrected to Pantone 1805C #AA272F (was 1665C #DD4814); --ffl-red-text removed; --ffl-red-dark #DC747B added; --ffl-cyan tokenized for the logo only; Advantage identity tokens become light/dark pairs; shared selection and action tokens; route destination tokens; Advantage defaults light. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND ANCHORS — locked to the logo. Use sparingly. Source: 2011 FFL Brand Guide (FFL-3560): "The logo colors are PANTONE 287C, PANTONE 306C, PANTONE 1805C." --------------------------------------------------------------------- */ --ffl-blue: #00338D; /* Pantone 287C — 11.3:1 ✓ any size */ --ffl-blue-hover: #00256B; /* darkened for :hover / :active */ --ffl-red: #AA272F; /* Pantone 1805C — the logo arrow. 6.91:1 ✓ */ /* Brand red on LIGHT surfaces. Permitted: the arrow motif (logo, favicon, section-slide watermark in tone-on-tone); display accents and heading rules (the 6px rule on title/section slides); Advantage identity (hairline, wordmark tag, light theme); red text at any size. Never a call to action. Never "selected." Never a status color — the funding-lifecycle denied red is a different value (--lc-den). v1.5: no longer the route destination (see --route-dest). */ --ffl-red-dark: #DC747B; /* Brand red on DARK surfaces. 6.05:1 on --app-dark-bg, 4.73:1 on --navy. Passes AA as text and 3px component. */ /* Do NOT place #AA272F on navy or the app-dark ramp (2.1–2.7:1). The logo itself is exempt (WCAG excludes logotypes). */ --ffl-cyan: #00B9E4; /* Pantone 306C — the logo's keyline ONLY. 2.32:1 on white: never text, never a border. Retired from interface use Sept 2, 2026. */ /* --------------------------------------------------------------------- 2. NEUTRAL FOUNDATION — does the heavy lifting --------------------------------------------------------------------- */ --navy: #1E2A38; /* hero, footer, ERM sidebar */ --navy-soft: #2A3948; /* hairlines and cards on navy */ --charcoal: #2F2F2F; /* primary body text — 13.1:1 ✓ */ --ink-2: #4E565E; /* secondary text on light — ~7:1 ✓ */ --slate: #6C757D; /* muted subheads, meta — 4.7:1 ✓ */ --gray-soft: #E5E5E5; /* card borders, dividers. NOT form fields */ --field-line: var(--slate); /* form-field borders — 4.7:1 on white */ --gray-line: #EEEEEC; /* lightest hairline on cream */ --cream: #FAFAF7; /* page background base */ --white: #FFFFFF; /* ON-DARK SCALE — ratios against --navy */ --on-dark-hi: #FFFFFF; /* headlines only — 14.6:1 ✓ */ --on-dark: #DCE3EC; /* body copy on navy — 11.0:1 ✓ */ --on-dark-mute: #C6CEDA; /* lede, secondary — 8.9:1 ✓ */ --on-dark-soft: #A9B6C6; /* footer body — 6.4:1 ✓ */ --on-dark-faint: #8A99AB; /* legal line, min usable — 4.5:1 ✓ */ --on-dark-accent: #8FB3E2; /* eyebrows, icons on navy — ~7.4:1 ✓ */ --on-dark-line: #33455A; /* hairlines and dividers */ --on-dark-field: #16202B; /* form field fill on navy */ /* --------------------------------------------------------------------- 3. COOL ACCENT — the workhorse. Owns secondary CTAs. --------------------------------------------------------------------- */ --steel: #4A6FA5; /* 5.1:1 ✓ — subheads, icons, 2nd CTAs */ --steel-hover: #3A5885; --steel-tint: #EDF1F7; /* pale fill for bands and table stripes */ /* Arrow watermark — v1.5.1. Fill for the oversized logo arrow on section slides and virtual backgrounds. One step off the surface it sits on. */ --watermark-on-app-dark: #121B2A; /* on --app-dark-bg #0B1321 */ --watermark-on-navy: #2A3948; /* on --navy (= --navy-soft) */ --watermark-on-cream: #EDF1F7; /* on --cream (= --steel-tint) */ --watermark-on-tint: #E2E8F1; /* on --steel-tint */ /* Route motif — the dashed rail, waypoints, and year timeline */ --route-light: #93A9C7; /* dashed legs on light backgrounds */ --route-dark: #54687F; /* dashed legs on navy */ --route-dot: var(--steel); --route-dest: #4DB6AC; /* v1.5 — disbursed teal. Fill of the last waypoint on light. */ --route-dest-ring: #2A7168; /* v1.5 — ring on light surfaces so the 38px dot meets 3:1. */ --route-dest-dark: #4DB6AC; /* v1.5 — same teal on navy and app-dark (6.6:1 on navy). */ /* Was var(--ffl-red) / var(--ffl-red-dark) through v1.4. Red is retired from the route: the destination is funding realized, not a stop. */ /* --------------------------------------------------------------------- 4. SEMANTIC STATES — status only. Never used as brand or CTA color. --------------------------------------------------------------------- */ --warn-fill: #FDECEC; --warn-line: #E57373; /* 2.99:1, fills/borders only */ --warn-text: #B04A44; /* 5.4:1 ✓ */ --ok-fill: #E9F5F3; --ok-line: #4DB6AC; --ok-text: #2A7168; /* 4.9:1 ✓ */ --info-fill: var(--steel-tint); --info-line: var(--steel); --info-text: #3A5885; /* --------------------------------------------------------------------- 5. TYPOGRAPHY DISPLAY: Libre Franklin 800, H1 and H2 only, −0.01em. BODY: Public Sans. H3 and below, cards, buttons at 700. MONO: IBM Plex Mono — form numbers, dates, eyebrows, figures. PRODUCTION: self-host woff2 with font-display:swap. No CDN link. --------------------------------------------------------------------- */ --font-display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --step-hero: clamp(2.5rem, 1.5rem + 3.2vw, 4rem); /* Home hero H1: 40 -> 64px */ --step-h1: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); /* interior H1: 36 -> 56px */ --step-h1-article: clamp(2rem, 1.25rem + 2.2vw, 3rem); /* News article H1: 32 -> 48px */ --step-h2: clamp(1.75rem, 1rem + 1.9vw, 2.5rem); /* H2: 28 -> 40px */ --step-h3: 1.25rem; /* 20px, Public Sans 700 */ --step-lede: clamp(1.0625rem, 1.3vw, 1.1875rem); --step-body: 1.0625rem; /* 17px */ --step-small: 0.875rem; --step-eyebrow: 0.6875rem; /* 11px */ --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.6; --tracking-display: -0.01em; --tracking-eyebrow: 0.12em; --weight-display: 800; --weight-strong: 600; --weight-body: 400; --font-subhead: var(--font-body); --weight-subhead: 700; /* --------------------------------------------------------------------- 6. SPACING — 4px base. --------------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; --section-y: clamp(4rem, 8vw, 7rem); --section-y-sm: clamp(2.5rem, 5vw, 4rem); /* --------------------------------------------------------------------- 7. LAYOUT --------------------------------------------------------------------- */ --container: 1180px; --container-prose: 68ch; --gutter: clamp(1.25rem, 4vw, 2.5rem); /* --------------------------------------------------------------------- 8. SHAPE, SHADOW, MOTION --------------------------------------------------------------------- */ --radius-sm: 4px; --radius-btn: 6px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(30, 42, 56, 0.05); --shadow-2: 0 2px 4px rgba(30, 42, 56, 0.06), 0 8px 24px rgba(30, 42, 56, 0.07); --ease: cubic-bezier(0.16, 0.84, 0.44, 1); --dur: 180ms; --focus-ring: 3px solid var(--steel); --focus-offset: 2px; /* --------------------------------------------------------------------- 9. CATEGORICAL CHART SERIES — NEW in v1.4. Charts, tables, and data graphics ONLY. Never a button, link, nav state, hairline, band, or background. Use in order; series 1 is always FFL Blue. Gold, teal, and plum exist so a multi-series chart separates by hue for colorblind viewers, projectors, and print. They are not brand colors and must not migrate into the interface. Status charts do NOT use these — they use the lifecycle set (§11). --------------------------------------------------------------------- */ --chart-1: #00338D; /* FFL Blue — anchor */ --chart-2: #C27A05; /* Gold — 3.1:1 as a fill */ --chart-3: #2A8C80; /* Teal — 4.1:1 */ --chart-4: #7B4B94; /* Plum — 6.4:1 */ --chart-5: #4A6FA5; /* Steel */ --chart-6: #93A9C7; /* Route light — "other" / remainder. Fills only. */ /* Text-safe variants for labels and callouts on white/cream (>= 4.5:1) */ --chart-1-text: #00338D; --chart-2-text: #8A5200; --chart-3-text: #2A7168; --chart-4-text: #6A3C82; --chart-5-text: #3A5885; --chart-6-text: #4E565E; /* Series on navy and the app-dark ramp */ --chart-1-dark: #4D8DFF; --chart-2-dark: #F5B342; --chart-3-dark: #5FC9BB; --chart-4-dark: #B589CC; --chart-5-dark: #8FB3E2; --chart-6-dark: #C6CEDA; /* Chart furniture */ --chart-grid: #E5E5E5; --chart-grid-dark: #26334A; --chart-axis: #6C757D; --chart-axis-dark: #7D8FA3; /* --------------------------------------------------------------------- 10. SEQUENTIAL RAMP — NEW in v1.4. One measure, shaded light to dark. Heat tables, choropleths, single-series intensity. Blue lineage. --------------------------------------------------------------------- */ --seq-1: #EDF1F7; --seq-2: #C6D2E6; --seq-3: #93A9C7; --seq-4: #4A6FA5; --seq-5: #00338D; } /* Accessibility floor — non-negotiable, applies everywhere. */ *:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 11. PRODUCT SURFACES, FUNDING LIFECYCLE, BRAND EXTENSIONS (v1.1/v1.2, unchanged) Consumed by: www, E-rate Manager (Tailwind @theme, defaults light), Advantage (Blade base layout, defaults light, dark optional), GuideNotes. ========================================================================== */ :root{ /* --- Product app surfaces — LIGHT (default for both ERM and Advantage) --- */ --app-canvas:#F7F8FA; --app-ink:#051632; --app-line:#E7EAEE; --app-link:#1257D6; --app-link-dark:#4D8DFF; --app-active-bg:#E8EEF6; --app-active-text:#16324F; --app-active-bar:var(--steel); /* --- App-dark ramp (user option in both products) --- */ --app-dark-bg:#0B1321; --app-dark-card:#1A2332; --app-dark-line:#26334A; --app-dark-stroke:#343F52; --app-dark-active:#1C3153; --app-dark-sel:#FBFCFF; --app-dark-active-bar:var(--on-dark-accent); --app-dark-text:#DCE3EC; --app-dark-muted:#B8B9C4; --app-dark-label:#7D8FA3; /* --- Primary action in apps --- */ --app-action:var(--ffl-blue); --app-action-text:var(--white); --app-action-dark:var(--app-link-dark); --app-action-dark-text:var(--app-dark-bg); /* --- Funding lifecycle (both apps, both themes, Trends status charts) --- */ --lc-req:#1257D6; --lc-req-dark:#4D8DFF; --lc-req-fill:#EFF4FE; --lc-com:#4A6FA5; --lc-com-solid:#16324F; --lc-com-text:#3A5885; --lc-com-fill:#EDF1F7; --lc-pend:#F79009; --lc-pend-text:#8A5200; --lc-pend-fill:#FDF3E0; --lc-disb:#4DB6AC; --lc-disb-text:#2A7168; --lc-disb-fill:#E9F5F3; --lc-den:#D92D20; --lc-den-dark:#FF6B5E; --lc-den-fill:#FCEFEF; /* --- Product identity (theme-proof cues) --- */ --hairline-erm:var(--steel); --hairline-adv:var(--ffl-red); --hairline-adv-dark:var(--ffl-red-dark); --adv-tag:var(--ffl-red); --adv-tag-dark:var(--ffl-red-dark); --favicon-erm-tile:var(--navy); --favicon-erm-arrow:var(--white); --favicon-adv-tile:var(--app-dark-card); --favicon-adv-arrow:var(--ffl-red-dark); /* --- Email-safe subset (GuideNotes) --- */ --email-font-display:"Libre Franklin",Arial,Helvetica,sans-serif; --email-font-body:"Public Sans",Arial,Helvetica,sans-serif; --email-canvas:#FAFAF7; --email-card:#FFFFFF; --email-text:#2F2F2F; --email-muted:#4E565E; --email-link:#00338D; --email-cta:#00338D; --email-band:#1E2A38; --email-band-text:#DCE3EC; } /* ========================================================================== 12. CHART AND DATA GUIDANCE — normative. v1.5. -------------------------------------------------------------------------- Applies to every chart, table, and data graphic FFL publishes: Trends Report, PowerPoint, E-rate Manager, Advantage, the website, GuideNotes. A. Which set to use CATEGORICAL (things that are different, not ranked): --chart-1 … -6 in order. Series 1 is always FFL Blue. Stop at four series where you can; six is the ceiling. Use --chart-N-dark on navy/app-dark. STATUS (requested / committed / pending / disbursed / denied): the funding-lifecycle set --lc-* ONLY, in that order. Never the categorical set; never a categorical color for a status. SEQUENTIAL (one measure, shaded): --seq-1 … -5 light to dark. The highest value is always the darkest step. Text on --seq-4/-5 is white; on --seq-1/-2/-3 it is --charcoal. DIVERGING (above/below a midpoint): --chart-2 gold vs --chart-1 blue through --seq-1 at the midpoint. Do not use red/green. B. Labels and text Data labels and callouts on white/cream use the --chart-N-text variants (all >= 4.5:1). Axis text is --chart-axis (light) or --chart-axis-dark. Gridlines --chart-grid / --chart-grid-dark, 1–2px, horizontal only. Numbers, dates, FRNs, and axis ticks are IBM Plex Mono; legends and titles are Public Sans. C. The source line Every chart carries "Source: E-rate Manager®" (or the actual source) in IBM Plex Mono 600, uppercase, +0.06em, --slate on light / --on-dark-soft on navy, bottom-right or under the legend. No chart ships without one. D. The fence --chart-2 gold, --chart-3 teal, and --chart-4 plum exist for data only. They are never a button, link, nav state, hairline, tag, bullet, highlight, title color, or background band. If a color from this section appears in interface chrome, it is a defect. Brand red (--ffl-red) is never a chart series. Denied is --lc-den. E. PowerPoint Theme accents 1–6 = --chart-1 … -6 (template v1.1). Insert → Chart gives the categorical order automatically. Status charts are recolored by hand to --lc-* and say so in the source line. ========================================================================== */ /* ========================================================================== RETIRED — do not reintroduce --ffl-red-text #B8390F · --adv-tag #FF8A5E · #DD4814 (1665C) on screen · PowerPoint theme v1.0 accents 3, 4, 6 as chart series (replaced by §9) · red route destination (v1.5: --route-dest is teal) · route on PowerPoint title/closing slides (template v1.1). ========================================================================== */