/* ============================================================ JuniorNexa — brand TOKENS. Loaded FIRST, by Include/header-base.php. ------------------------------------------------------------ Its companion is Webroot/css/clients/juniornexa-shell.css, loaded LAST by Include/inc_client_theme_head.php. The split is not cosmetic: this file custom properties, and the handful of literals that no token reaches. Early + !important, so a later sheet's :root cannot win on source order. the shell file component rules. Late + ordinary specificity, so `.edu-card` beats redesign-ui.css without a `body ` prefix on every line. ── Where these colours come from ──────────────────────────────────────────── Not from the logo, and no longer from a blue that was never in the pictures. They are the tin the CHILDREN'S SCREENS are already painted from — Webroot/css/kids-exam.css, which took them from the mockup, which took them from tools/kids_art.php, which draws all 230 scenes. Sampled back out of the finished jpgs to check: sand #F3E4BD, cream #FBEECE, orange #F18A2D, grass #5C9C50, teal #9BD5D6, marigold #F0B130. Until now that tin reached exactly two screens — the exam a child sits and the "Puzzle Time" page in front of it — and every other screen on the site was navy #17456B with a burnt-orange button. The product looked like two products. #1B1938 ink 15.6:1 on white — every heading, every word of body text #E9573B coral 3.6:1 on white — the PLAY colour. Large type (24px+), buttons, fills. Never a sentence, never a caption. #B8471C coral-600 5.3:1 on white — coral when coral has to be read #F3AE22 marigold 1.9:1 on white — a SHAPE colour: a star, a badge, a speaker. #8A5B04 (5.9:1) is the one that can be a word. #64A23A grass 2.9:1 — the ground band. #3E7A22 (5.3:1) reads. #6B3BE0 violet 6.3:1 on white — the only accent that is safe as type at any size, which is why the grown-ups door wears it. #1E6E80 sea 5.8:1 on white #FDF4E0 sand the child's ground #FAF7F0 paper the grown-ups' ground Every ratio above is computed, not estimated. The rule that matters: a hue that scores under 4.5 is a shape, a fill or a big headline — it is never a sentence and it never carries white text unless the -600 step is used. ============================================================ */ :root { /* ── Ink ─────────────────────────────────────────────────── */ --jn-ink-950: #13112B; --jn-ink-900: #1B1938; /* the ink */ --jn-ink-800: #241F45; --jn-ink-700: #332D5C; --jn-ink-600: #3F3A57; --jn-ink-500: #5B5478; --jn-ink-400: #6B6483; --jn-ink-300: #9A93AE; --jn-ink-200: #C9C3D6; --jn-ink-100: #E7E2F0; /* ── Coral — the colour of Play ──────────────────────────── */ --jn-coral-700: #8A3413; --jn-coral-600: #B8471C; /* coral when coral must be read */ --jn-coral-500: #E9573B; /* the play button, big type, fills */ --jn-coral-400: #F07257; --jn-coral-300: #F8A48F; --jn-coral-100: #FDE3DC; --jn-coral-50: #FFF4F1; /* ── Marigold — stars, badges, the speaker ───────────────── */ --jn-gold-700: #6B4A05; --jn-gold-600: #8A5B04; /* readable gold */ --jn-gold-550: #A9700A; /* safe as a bed for white text (5.0:1) */ --jn-gold-500: #F3AE22; --jn-gold-400: #FFD36B; --jn-gold-100: #FFF3D6; --jn-gold-50: #FDF9EE; /* ── Grass — the band at the foot of every scene ─────────── */ --jn-grass-700: #2F6119; --jn-grass-600: #3E7A22; /* readable grass */ --jn-grass-500: #64A23A; --jn-grass-400: #8CC96A; --jn-grass-100: #E4F4E0; --jn-grass-50: #F3FAF2; /* ── Violet — the grown-ups' door ────────────────────────── */ --jn-violet-700: #4A26A8; --jn-violet-600: #5A2FC4; --jn-violet-500: #6B3BE0; --jn-violet-300: #9B7BF0; --jn-violet-100: #F1EAFB; --jn-violet-50: #F8F5FE; /* ── Sea — the third region, and every "information" chip ─ */ --jn-sea-700: #14545F; --jn-sea-600: #1E6E80; --jn-sea-400: #37A2AE; --jn-sea-100: #EFF8FA; /* ── Grounds and rules ───────────────────────────────────── */ --jn-sky: #BFE3F2; --jn-sand: #FDF4E0; /* the child's ground */ --jn-paper: #FAF7F0; /* the grown-ups' ground */ --jn-line: #EAE3D6; --jn-white: #FFFFFF; /* ── Faces ───────────────────────────────────────────────── */ --jn-display: "Baloo 2", "Baloo Thambi 2", "Baloo Tammudu 2", "Trebuchet MS", system-ui, sans-serif; --jn-body: Mulish, "Source Sans 3", ui-sans-serif, system-ui, sans-serif; } /* ════════════════════════════════════════════════════════════ 1. The after-login shell (inner-app.css) ════════════════════════════════════════════════════════════ inner-app.css ships six ROLE themes, each repainting the sidebar rail. On a single-brand tenant that reads as six products behind one logo, so every role is pinned to the brand rail. --ia-accent stays per-role below: the status chips and role badges that carry meaning still differ, only the chrome is unified. The rail is no longer a dark slab. In the Two Doors design the after-login shell IS the grown-ups room, and a grown-ups room is calm — paper ground, ink type, one coral accent. A navy rail beside a cream page was the single loudest thing on every screen and it belonged to neither audience. */ :root, body.ia-role-student, body.ia-role-examiner, body.ia-role-admin, body.ia-role-super-admin, body.ia-role-moderator, body.ia-role-approver { /* --ia-navy-* is a historical name; it has always held the dark chrome scale, so the ink maps onto it with no hue surprise downstream. */ --ia-navy-900: var(--jn-ink-950) !important; --ia-navy-800: var(--jn-ink-900) !important; --ia-navy-700: var(--jn-ink-800) !important; --ia-navy-600: var(--jn-ink-700) !important; --ia-navy-500: var(--jn-ink-600) !important; --ia-navy-400: var(--jn-ink-500) !important; --ia-navy-100: var(--jn-ink-100) !important; --ia-navy-50: #F6F3FB !important; /* The rail: paper, not a slab. The active row is what carries the colour. */ --ia-sidebar-bg: var(--jn-white) !important; --ia-sidebar-bg-2: var(--jn-white) !important; --ia-sidebar-text: var(--jn-ink-600) !important; --ia-sidebar-muted: var(--jn-ink-400) !important; --ia-sidebar-hover: var(--jn-coral-50) !important; --ia-sidebar-border: var(--jn-line) !important; --ia-sidebar-active: var(--jn-coral-50) !important; --ia-sidebar-active-text: var(--jn-coral-700) !important; --ia-sidebar-active-icon: var(--jn-coral-500) !important; --ia-primary: var(--jn-coral-600) !important; --ia-primary-dark: var(--jn-coral-700) !important; --btn-primary-bg: var(--jn-coral-600) !important; --btn-primary-dark: var(--jn-coral-700) !important; --btn-primary-ring: rgba(184, 71, 28, .30) !important; --ia-header-accent-bg: var(--jn-coral-50) !important; --ia-header-accent: var(--jn-coral-700) !important; --ia-header-line: var(--jn-coral-500) !important; /* The two faces, for every rule in inner-app.css that reads a token. */ --ia-font-head: var(--jn-display) !important; --ia-font-body: var(--jn-body) !important; } /* Role identity survives in the accent, not the chrome. */ body.ia-role-student { --ia-accent: var(--jn-coral-600) !important; --ia-accent-soft: var(--jn-coral-100) !important; } body.ia-role-examiner { --ia-accent: var(--jn-violet-600) !important; --ia-accent-soft: var(--jn-violet-100) !important; } body.ia-role-admin { --ia-accent: var(--jn-grass-600) !important; --ia-accent-soft: var(--jn-grass-100) !important; } body.ia-role-super-admin { --ia-accent: var(--jn-sea-600) !important; --ia-accent-soft: var(--jn-sea-100) !important; } /* Student dashboard component set (redesign-ui.css). One token block re-skins the spotlight, focus card, tabs, KPI figures and week strip together. The spotlight is the warm coral rather than the stock near-black: it is the first thing on the page, and on this tenant the page belongs to a parent who has just come through a door marked with a key. Coral is the product's own "here is the thing to do next" colour, and white on #B8471C is 5.3:1. */ :root, body.ia-role-student { --edu-accent: var(--jn-coral-600); --edu-accent-dark: var(--jn-coral-700); --edu-accent-soft: var(--jn-coral-100); --edu-accent-ink: var(--jn-ink-900); --edu-ink: var(--jn-ink-900); --edu-spot-1: #8A3413; --edu-spot-2: #B8471C; --edu-spot-3: #E9573B; --edu-spot-accent: var(--jn-gold-400); } /* ════════════════════════════════════════════════════════════ 2. Public chrome + footer (homepage-new.css) ════════════════════════════════════════════════════════════ The homepage gets its colour through the --hn-brand-* bridge in homepage-templates.css, driven by theme_primary / theme_accent. The AUTH pages do not: Views/Layouts/auth.php loads homepage-new.css WITHOUT homepage-templates.css and never sets --hn-brand-primary, so the shared footer there falls back to the stock navy. Repainting the two base families here is what keeps the footer identical on the homepage and on /login/, /newUser/ and the rest. */ :root { --hn-navy-900: var(--jn-ink-950) !important; --hn-navy-800: var(--jn-ink-900) !important; --hn-navy-700: var(--jn-ink-800) !important; --hn-navy-600: var(--jn-ink-700) !important; --hn-navy-500: var(--jn-ink-600) !important; /* "primary navy" */ --hn-navy-400: var(--jn-ink-500) !important; --hn-navy-300: var(--jn-ink-300) !important; --hn-navy-100: var(--jn-ink-100) !important; --hn-navy-50: #F6F3FB !important; /* The stock sheet's "orange" family is the coral. */ --hn-orange-600: var(--jn-coral-600) !important; --hn-orange-500: var(--jn-coral-500) !important; --hn-orange-400: var(--jn-coral-400) !important; --hn-orange-300: var(--jn-coral-300) !important; --hn-orange-100: var(--jn-coral-100) !important; --hn-orange-50: var(--jn-coral-50) !important; --hn-grad-navy: linear-gradient(135deg, #241F45 0%, #3F3A57 100%) !important; --hn-grad-orange: linear-gradient(135deg, #B8471C 0%, #F07257 100%) !important; --hn-grad-hero: linear-gradient(150deg, #13112B 0%, #241F45 52%, #3F3A57 100%) !important; --hn-grad-hero-warm: linear-gradient(150deg, #241F45 0%, #332D5C 42%, #5B5478 100%) !important; --hn-grad-footer: linear-gradient(160deg, #13112B 0%, #241F45 100%) !important; --hn-shadow-navy: 0 8px 24px rgba(27, 25, 56, .30) !important; --hn-shadow-orange:0 8px 24px rgba(233, 87, 59, .30) !important; --hn-font-head: var(--jn-display) !important; --hn-font-body: var(--jn-body) !important; /* The public ground. Stock is #f0f5ff, a cold blue-white that reads as a SaaS product page; every scene in this catalogue sits on cream, so the pages the covers appear on do too. --hn-bg-alt is the band that alternates with it and stays a shade lighter. */ --hn-bg: var(--jn-paper) !important; --hn-bg-alt: #FEFCF7 !important; } /* --hn-grad-green paints exactly one thing, the third feature icon (homepage-new.css:975). Green IS in this palette — it is the grass in every scene. Every OTHER green on the page is semantic (free price, success chips, trust ticks) and is left alone. */ :root { --hn-grad-green: linear-gradient(135deg, #3E7A22 0%, #64A23A 100%) !important; --hn-shadow-green: 0 8px 24px rgba(100, 162, 58, .30) !important; } /* The coral cannot carry white text at 3.6:1 and the stock sheet reverses white out of --hn-orange-500 on this hover state. */ .hn-footer-social-link:hover { color: var(--jn-ink-900) !important; } /* The footer's decorative wash is keyed to the old orange/green. */ .hn-footer::before { background-image: radial-gradient(circle at 10% 20%, rgba(233,87,59,.14) 0%, transparent 42%), radial-gradient(circle at 90% 80%, rgba(243,174,34,.16) 0%, transparent 38%) !important; } /* ════════════════════════════════════════════════════════════ 3. Auth pages (auth-pages.css) ════════════════════════════════════════════════════════════ auth-pages.css builds /login/, /newUser/, /forgotPassword/ out of a green and orange token pair. A value set directly on an element always beats one inherited from :root, whatever the importance and whatever the sheet order — which is why these are declared on `body` rather than :root. One block recolours the pips, the rail, the strength bar, the icons and the submits. */ body.au-body { --au-grad-green: linear-gradient(135deg, #B8471C 0%, #E9573B 100%); --au-grad-orange: linear-gradient(135deg, #8A5B04 0%, #F3AE22 100%); --au-green-700: var(--jn-coral-700); --au-green-600: var(--jn-coral-600); --au-green-500: var(--jn-coral-500); --au-green-400: var(--jn-coral-400); --au-green-100: var(--jn-coral-100); --au-green-50: var(--jn-coral-50); --au-font: var(--jn-body); --au-font-head: var(--jn-display); /* The sign-up page's left panel ( .au-split-left ) and the auth footer both read --au-grad-hero / --au-grad-footer, which are stated in blue in auth-pages.css and reached by nothing else. On this tenant that panel was a full-height slab of a blue that appears nowhere in the product, beside a form a parent fills in. Repainted in the ink and violet the grown-ups' half wears everywhere else; every rule inside it reverses white out of the ground, and white on #13112B is 18.1:1. */ --au-grad-hero: linear-gradient(150deg, #13112B 0%, #241F45 45%, #4A26A8 100%); --au-grad-footer: linear-gradient(160deg, #13112B 0%, #241F45 100%); --au-grad-navy: linear-gradient(135deg, #241F45 0%, #5A2FC4 100%); --au-navy-500: var(--jn-violet-600); } /* The two hover shadows hardcode a green rgba() rather than reading the token. */ body.au-body .au-submit:hover, body.au-body .au-social-btn:hover { box-shadow: 0 10px 24px rgba(184, 71, 28, .28) !important; } /* ════════════════════════════════════════════════════════════ 4. The exam window (examHeader.php / inc_online_exam_head.php) ════════════════════════════════════════════════════════════ Children's exams open on the KIDS template (KIDS_EXAM_MODE_ENABLED), which draws its own chrome and deliberately does NOT load this file. This is what an adult-facing preview or an examiner's own attempt sees. */ .ef-topbar { background: linear-gradient(135deg, #241F45 0%, #5A2FC4 100%) !important; border-bottom-color: var(--jn-coral-500) !important; } /* ════════════════════════════════════════════════════════════ 5. Brand logo sizing ════════════════════════════════════════════════════════════ SHOW_BRAND_LOGO_HEADER is true, so inc_app_brand.php emits the wordmark alone (.app-brand--logo-only) with no name beside it: the image IS the brand, and how much of its own box it fills is the whole question. The artwork here is generated rather than exported from a design tool, so it has no phantom alpha border to fight — Script/gen_juniornexa_brand.php draws to the ink and stops. The shared heights in app-brand.css were chosen for exported logos that are typically half air, so applied to a full box they run small. These are re-cut for ink. */ .app-brand--logo-only .app-brand-logo { height: 38px; } @media (min-width: 992px) { .app-brand--logo-only .app-brand-logo { height: 42px; } } .hn-navbar .hn-brand-logo { height: 36px; } .hn-footer .hn-footer-logo { height: 38px; }