/* GPDT design tokens (AV-487). * * Custom properties only — nothing here styles an element, so loading this file * cannot change any existing page. Deliberately NOT a reset: the design system's * base.css restyles bare body/h1-h6/p/a, which would repaint all ~35 stylesheets' * worth of legacy screens. * * NAMES FROM THE DESIGN SYSTEM. VALUES SPLIT BY ROLE: * brand / UI chrome -> what /solutions ships, because that is what users see * text -> the style-guide ramp, because that is measurably what * the comps use * * role /solutions style guide in use * navy chrome #0e3865 #00447c /solutions (--gpd-navy) * navy text — #00447c style guide (--gpd-navy-deep) * green CTA #2ec46b #80bb3d /solutions * body text #1f2937 #333f52 /solutions * title text — #48566a style guide * muted text #4b5563 #617082 style guide * tertiary — #8a99ab style guide * * The /solutions greys are used inside its hero card — card-on-colour, not page * text — which is why they lost for text roles. Reconciling the brand colours * is a decision for whoever owns the brand; it is a one-file change. * * Consumed by gpd-components.css and gpd-my-learning.css. home-hero.css still * hard-codes its values; migrating it is safe but out of scope here. */ :root { /* ---- Brand core ---- */ --gpd-navy: #0e3865; /* /solutions. UI chrome: buttons, badges, placeholders */ --gpd-navy-deep: #00447c; /* PMS 295. Heading text — what the comps set */ --gpd-sky: #00a8e2; /* PMS 2995. 2.73:1 on white - decorative only, never text */ --gpd-blue: #2680bb; /* PMS 299U. 4.30:1 on white */ --gpd-green: #2ec46b; /* /solutions CTA; style guide says #80bb3d */ --gpd-green-hover: #28a85b; --gpd-orange: #f15a22; --gpd-gold: #fbb040; --gpd-teal: #04927e; /* ---- Neutrals ---- */ --gpd-white: #ffffff; --gpd-gray-50: #f5f7fa; --gpd-gray-100: #eaeef3; --gpd-gray-150: #e4e4e4; /* /solutions welcome panel */ --gpd-gray-200: #d7dee7; --gpd-gray-300: #cbcbcb; /* /solutions progress track */ --gpd-gray-400: #8a99ab; /* comps use this for tertiary text e.g. "Earned ..." */ /* Text greys come from the style-guide ramp, not /solutions. Sampled from the design comps: page titles are #48566a and secondary lines #617082. /solutions uses #4b5563 for muted text inside the hero card, which is a card-on-colour context rather than page text. */ --gpd-gray-500: #617082; --gpd-gray-600: #48566a; --gpd-gray-700: #333f52; /* body text, sampled from the comps */ --gpd-gray-900: #131a28; /* ---- Topic colours. Subject-brand hex, unchanged from the style guide. ---- */ --topic-plc: #00a8e3; --topic-accelerated: #30bebd; --topic-school-culture: #1d2656; --topic-rti: #00447c; --topic-assessment: #8dc63f; --topic-marzano: #1778be; --topic-wellness: #0f6771; --topic-curriculum: #f15b25; --topic-behavior: #5d9b6d; /* ---- Semantic aliases. Prefer these over raw brand names. ---- */ --gpd-text-heading: var(--gpd-navy-deep); /* Page titles are deliberately softer than section headings — the comps set a large light slate title above navy section headings, and using navy for both flattens that hierarchy. */ --gpd-text-title: var(--gpd-gray-600); --gpd-text-body: var(--gpd-gray-700); --gpd-text-muted: var(--gpd-gray-500); --gpd-text-on-dark: var(--gpd-white); /* Links use --gpd-blue (4.30:1). /solutions' one inline link is navy (11:1); unify to one of the two when someone owns the call. Never --gpd-sky. */ --gpd-text-link: var(--gpd-blue); --gpd-text-link-hover: var(--gpd-navy); --gpd-surface-page: var(--gpd-white); --gpd-surface-card: var(--gpd-white); --gpd-surface-subtle: var(--gpd-gray-150); --gpd-surface-inverse: var(--gpd-navy); --gpd-border-subtle: var(--gpd-gray-200); --gpd-border-strong: var(--gpd-gray-300); --gpd-success: var(--gpd-green); --gpd-info: var(--gpd-blue); --gpd-warning: var(--gpd-gold); --gpd-danger: var(--gpd-orange); /* ---- Type ---- Frutiger LT Std needs a web licence that has not been confirmed, so the stack stays as-is. Swapping it later is one line. */ --gpd-font-body: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --gpd-font-display: var(--gpd-font-body); --gpd-fs-xs: 12px; --gpd-fs-sm: 13px; --gpd-fs-base: 14px; --gpd-fs-md: 16px; --gpd-fs-lg: 18px; --gpd-fs-xl: 20px; --gpd-fs-2xl: 26px; --gpd-fs-3xl: 32px; /* Light exists for display type only. Measured against the comps, the page title runs at roughly a third less ink than a bold of the same size. */ --gpd-fw-light: 300; --gpd-fw-regular: 400; --gpd-fw-medium: 500; --gpd-fw-semi: 600; --gpd-fw-bold: 700; --gpd-lh-tight: 1.15; --gpd-lh-snug: 1.3; --gpd-lh-normal: 1.5; /* ---- Spacing. 4px base, matching the steps home-hero already uses. ---- */ --gpd-space-1: 4px; --gpd-space-2: 8px; --gpd-space-3: 12px; --gpd-space-4: 18px; --gpd-space-5: 24px; --gpd-space-6: 32px; --gpd-space-7: 48px; /* NB the app loads ace's customised Bootstrap, whose gutter is 12px, not the stock 15px (themes/ace/css/uncompressed/bootstrap.css:844). Anything aligning to the Bootstrap grid must use this, not 15px. */ --gpd-grid-gutter: 12px; /* ---- Radii ---- */ --gpd-radius-sm: 6px; --gpd-radius-md: 10px; --gpd-radius-lg: 18px; --gpd-radius-pill: 999px; /* ---- Elevation ---- */ --gpd-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.12); --gpd-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08); --gpd-shadow-lg: 0 12px 32px rgba(19, 26, 40, 0.14); --gpd-shadow-focus: 0 0 0 3px rgba(38, 128, 187, 0.35); /* ---- Motion ---- */ --gpd-dur-fast: 0.15s; --gpd-dur-base: 0.25s; --gpd-ease: cubic-bezier(0.2, 0, 0.2, 1); /* ---- Gradients ---- The brand bar mirrors the logo bug's colour order. Built from the tokens above rather than the style guide's raw hex, so it tracks whatever the brand colours resolve to. */ --gpd-gradient-brandbar: linear-gradient(90deg, var(--gpd-orange) 0%, var(--gpd-gold) 20%, var(--gpd-green) 40%, var(--gpd-teal) 55%, var(--gpd-sky) 75%, var(--gpd-navy) 100%); } /* Breakpoints cannot be custom properties in media queries. The three the app already uses, so new work does not invent a fourth: 991px Bootstrap md boundary - stack two-column layouts 768px tablet - reduce padding and type 540px the point mobilecustomchanges.css re-flows .topics-container */