/* * Dashboard design system — drivinginstructorwicklow.ie (redesign U2, KTD2). * * Token-first: every colour below resolves to a `--db-` custom property * extracted from the approved mockups (design/mockups/*.html) and * design/DASHBOARD-HANDOFF.md. One shared stylesheet for the public site; * the admin area is frozen on its own snapshot (public/css/admin-legacy.css) * and never loads this file. * * Figtree is the LATIN family (R11): self-hosted variable woff2, byte-identical * to Google's Figtree v9 subsets (and to the file embedded in * design/dashboard-reference.html). Non-Latin scripts render on system stacks — * see "Per-script font stacks" below. * * DIRECTION (U5 — R8, KTD8). This stylesheet is written in LOGICAL properties * (margin-inline-*, padding-inline-*, inset-inline-*, text-align: start/end, * border-inline-*) so Arabic and Urdu mirror from the `dir="rtl"` attribute * alone; flex and grid mirror themselves. The only `[dir="rtl"]` rules in the * file are the handful of things a logical property cannot express — they are * marked as such, and tests/rtl-markup.test.js fails the build if a physical * direction declaration reappears anywhere else. */ /* * latin: the subset the site has always shipped. The unicode-range is Google's * own for this exact file — it does not narrow what renders (a font is skipped * per-glyph when it has no glyph either way), it stops the browser fetching a * Latin subset to satisfy a Cyrillic or Arabic character. */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* * latin-ext: Polish ł/ą/ę/ś/ż/ź/ć/ń, Lithuanian č/ė/į/š/ų/ū/ž, Romanian * ă/â/î/ș/ț, Turkish ğ/ı/ş. All of them sit ABOVE U+00FF, so before this face * existed those four locales rendered their diacritics in a system fallback * font mid-word — visibly a different typeface inside the same sentence. */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------------------------------------------ * * Per-script font stacks (U5 — KTD8). views/partials/header.ejs puts the * active locale's SCRIPT on , and each bucket points * --db-font-sans at a stack that can actually draw it. Self-hosting Arabic, * Nastaliq or Simplified-Chinese families would add megabytes to a marketing * page for a handful of visitors, so those four buckets are system fonts only * — deliberate stacks, not an accidental `sans-serif`. * ------------------------------------------------------------------ */ :root { /* latin + latin-ext: Figtree, then the platform UI face. */ --db-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Russian. Figtree has no Cyrillic, so it is not even offered. */ html[data-font="cyrillic"] { --db-font-sans: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Arabic (Naskh). Segoe UI on Windows, Geeza Pro on Apple, Noto Naskh on Linux/Android — all four have full Arabic coverage and sensible metrics. */ html[data-font="arabic"] { --db-font-sans: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Naskh Arabic', 'Noto Sans Arabic', system-ui, sans-serif; } /* Urdu prefers NASTALIQ, a different script style from Arabic Naskh: the baseline cascades diagonally, so the same string needs a taller line box. Naskh faces are the fallback — readable, just not idiomatic. */ html[data-font="urdu"] { --db-font-sans: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Segoe UI', 'Noto Naskh Arabic', Tahoma, system-ui, sans-serif; } /* Simplified Chinese. */ html[data-font="hans"] { --db-font-sans: system-ui, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', sans-serif; } :root { /* Dashboard tokens (design/DASHBOARD-HANDOFF.md). */ --db-bg: #F4F7FB; /* page background (cool off-white) */ --db-ink: #17202B; /* headings, body text */ --db-blu: #2F5FD8; /* primary: buttons, highlight words, progress */ --db-blu-deep: #1E3F97;/* dark end of the one gradient (CTA panel) */ --db-blu-hover: #2149AE; --db-teal: #159A8C; /* secondary/status: chip dots, checkmarks */ --db-mut: #5E6B7A; /* muted text */ --db-card: #FFFFFF; /* cards and panels */ --db-line: #DFE6EF; /* hairline borders (decorative surfaces only) */ /* * Form-control boundary (U7, WCAG 1.4.11). --db-line is 1.26:1 on white and * the input fill (#FAFCFE) is 1.03:1 against the card, so neither the * border nor the fill identified a field's extent. This darker line is * 3.4:1 on #FAFCFE and 3.5:1 on white; it is used ONLY by .db-form * controls — hairlines elsewhere stay decorative on --db-line. */ --db-line-strong: #7C8AA0; --db-amber: #F2A413; /* amber accents: icon tiles, avatar, warn callout */ /* * Star-rating glyphs (U7, WCAG 1.4.11). The stars are the only visible * statement of the rating, and --db-amber is 2.08:1 on white. This deeper * amber clears 3.6:1 while keeping the hue. */ /* * Teal as TEXT (U7, WCAG 1.4.3). --db-teal is 3.15:1 on the pale teal * tints, fine for glyphs but not for text; this deeper teal clears 4.5:1 * on white and on #EAF6F4 (5.85:1), and also carries .alert-success. */ --db-teal-deep: #0B6A60; /* * Error token (R5): form validation. #B3261E clears 4.5:1 on white and on * --db-bg, so it can carry inline error text as well as the field border. */ --db-err: #B3261E; /* Tint/prose shades that used to repeat as raw hex literals. */ --db-blu-tint: #EDF2FB; /* pale blue icon-tile / row background */ --db-prose: #33404E; /* long-form body text, darker than --db-mut */ --db-warn-tint: #FBEBEA; /* pale red tone-bad / warning background */ --db-teal-tint: #E7F5F3; /* pale teal tone-good background */ --db-radius: 12px; /* system radius; cards go up to 16-20px */ --db-radius-card: 16px; --db-radius-panel: 20px; --db-shadow-btn: 0 6px 16px rgba(47, 95, 216, .3); --db-shadow-card: 0 24px 60px rgba(23, 32, 43, .12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* * Longhands, not the `font:` shorthand: the family now comes from a custom * property, and a shorthand that resolves to an invalid value drops the whole * declaration — font-size and line-height included — rather than just the part * that went wrong. */ body { background: var(--db-bg); color: var(--db-ink); font-weight: 400; font-size: 16.5px; line-height: 1.62; font-family: var(--db-font-sans); } /* Nastaliq's diagonal baseline needs the extra leading or descenders from one line collide with the line beneath it. */ html[data-font="urdu"] body { line-height: 1.9; } img, svg { max-width: 100%; } /* * Global keyboard focus indicator (WCAG 2.2 2.4.7, 1.4.11). The Dashboard * system has light surfaces everywhere, so a single 3px --db-blu ring clears * 3:1 on the page background, on white cards, and on the hairline borders. * On the one dark surface (the blue CTA panel) the white halo underneath * carries the separation. :focus-visible, not :focus, so mouse clicks do not * draw a ring. */ :focus-visible { outline: 3px solid var(--db-blu); outline-offset: 2px; box-shadow: 0 0 0 5px #FFFFFF; border-radius: 6px; } /* * Skip link (WCAG 2.2 2.4.1) — markup in views/partials/header.ejs. * Off-screen rather than display:none/visibility:hidden, which would remove it * from the focus order — the only users who need it could never reach it. */ .skip-link { position: absolute; top: -100px; /* inset-inline-start, so it drops in from the reading-start corner in both directions — the corner a keyboard user's eye is already at. */ inset-inline-start: 1rem; z-index: 1100; padding: 0.75rem 1.25rem; background-color: var(--db-card); color: var(--db-ink); font-weight: 600; text-decoration: none; border: 1px solid var(--db-line); border-radius: 0 0 var(--db-radius) var(--db-radius); } .skip-link:focus { top: 0; } /* The skip target takes focus programmatically only; no ring around the page. */ main:focus { outline-color: transparent; box-shadow: none; } /* ------------------------------------------------------------------ * * Shared primitives (extracted from design/mockups/*.html) * ------------------------------------------------------------------ */ .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .disp { font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; } .btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: 15.5px; padding: 14px 26px; border-radius: var(--db-radius); border: 0; cursor: pointer; } .btn-blu { background: var(--db-blu); color: #fff; box-shadow: var(--db-shadow-btn); } .btn-blu:hover { background: var(--db-blu-hover); } /* --db-line-strong, not --db-line: a control's boundary must clear 3:1 (WCAG 1.4.11), and --db-line is 1.26:1 on both grounds this button sits on. The decorative hairlines elsewhere in the sheet keep --db-line. */ .btn-ln { border: 1.5px solid var(--db-line-strong); color: var(--db-ink); background: var(--db-card); } .btn-ln:hover { border-color: var(--db-ink); } /* Status chip with the teal dot — trust signals. */ .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--db-card); border: 1px solid var(--db-line); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--db-mut); } .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--db-teal); } /* White card with hairline border — the system's base surface. */ .db-card { background: var(--db-card); border: 1px solid var(--db-line); border-radius: var(--db-radius-panel); padding: 28px; } /* The CTA panel — the only gradient in the system. */ .db-panel { background: linear-gradient(135deg, var(--db-blu) 0%, var(--db-blu-deep) 100%); border-radius: 24px; color: #fff; text-align: center; padding: 64px 34px; } .db-panel h2 { font-size: clamp(28px, 4.2vw, 46px); } .db-panel p { /* 4.6:1 on the gradient's LIGHT end (--db-blu); the old #CBD8F5 was 3.92:1 there (U7, WCAG 1.4.3). */ color: #E1E9FB; max-width: 34em; margin: 14px auto 28px; } .db-panel .btn { background: #fff; color: var(--db-blu); } .db-panel .btn:hover { background: #E4EBFA; } /* Inline SVG icons (views/partials/icon.ejs) — 24px viewBox, 2px stroke. */ .icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.24em; } /* ------------------------------------------------------------------ * * Form conventions (R5): fields are white-on-card inputs with hairline * borders; an invalid field gets the error border plus inline error text. * ------------------------------------------------------------------ */ .db-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; } .db-form input, .db-form select, .db-form textarea { width: 100%; font: inherit; /* 16px is a FUNCTIONAL floor, not a type choice: iOS Safari zooms the viewport when a focused control is under 16px and does not zoom back out on blur, so 15px here scaled the page up on first tap and pushed the rest of the form off-screen. */ font-size: 16px; color: var(--db-ink); background: #FAFCFE; /* --db-line-strong, not --db-line: the field boundary must clear 3:1 (WCAG 1.4.11) — see the token's comment in :root. */ border: 1.5px solid var(--db-line-strong); border-radius: var(--db-radius); padding: 12px 14px; } /* --db-mut clears 5.3:1 on the #FAFCFE fill; the old #98A4B3 was 2.46:1. */ .db-form input::placeholder, .db-form textarea::placeholder { color: var(--db-mut); } /* Border colour signals focus; the global :focus-visible ring stays intact. */ .db-form input:focus, .db-form select:focus, .db-form textarea:focus { border-color: var(--db-blu); background: #fff; } .db-form textarea { min-height: 120px; resize: vertical; } /* Invalid state: coloured border + inline error text, same hairline weight. */ .db-form input[aria-invalid="true"], .db-form select[aria-invalid="true"], .db-form textarea[aria-invalid="true"] { border-color: var(--db-err); } /* Forward contract for inline validation errors — no view renders it yet. */ .field-error { color: var(--db-err); font-size: 13px; font-weight: 600; margin-top: 6px; } /* ------------------------------------------------------------------ * * Header / navigation * * Class names (.nav-links, .nav-link, .dropdown, .dropdown-content, * .dropdown-link, .mobile-menu-btn) are carried over from the previous shell * deliberately: the keyboard-accessibility contract on them is asserted by * tests/a11y-markup.test.js and survives the reskin. * ------------------------------------------------------------------ */ .site-header { background: rgba(244, 247, 251, .92); border-bottom: 1px solid var(--db-line); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(6px); } .nav-container { max-width: 1140px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* * THE BRAND IS THE ONLY THING IN THE BAR ALLOWED TO SHRINK (WCAG 1.4.10). * * The collapsed bar is brand + language button + hamburger, all of it nowrap, * which came to roughly 414px -- so 360px, 375px and 390px phones scrolled * sideways on every page. U7 chased that with breakpoints (hide the CTA at * 560, shrink the brand at 380, hide the wordmark at 340) and still left the * common widths overflowing. * * A flex row cannot overflow if one item can shrink and the rest fit, so the * wordmark truncates instead. `min-width: 0` is the load-bearing line: a flex * item defaults to `min-width: auto`, which refuses to shrink below its own * content -- which is exactly how a nowrap wordmark pushed the bar wider than * the screen. This holds at every width, including handsets not yet made. */ .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--db-ink); text-decoration: none; min-width: 0; overflow: hidden; } /* Truncates rather than pushes. The text stays in the accessibility tree -- the "W" mark beside it is aria-hidden, so clipping the wordmark is the only way to narrow the brand without stripping the link's accessible name. */ .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The rounded-square W mark (R6). */ .brand-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--db-blu); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex: none; } .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-links > li { position: relative; display: flex; align-items: center; } .nav-link { text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--db-mut); padding-block: 10px; padding-inline: 12px 6px; white-space: nowrap; } .nav-link:hover { color: var(--db-ink); } /* Chevron toggle beside each group trigger: Enter/Space toggles the panel without stealing the link's own navigation. */ .dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; margin: 0; padding-block: 10px; padding-inline: 2px 10px; cursor: pointer; color: var(--db-mut); font: inherit; } .dropdown-toggle .icon { width: 14px; height: 14px; transition: transform .15s; } .dropdown-toggle:hover { color: var(--db-ink); } .dropdown.open .dropdown-toggle .icon { transform: rotate(180deg); } /* The dropdown panel: white card, hairline border, system radius. */ .dropdown-content { position: absolute; top: 100%; inset-inline-start: 0; min-width: 220px; background: var(--db-card); border: 1px solid var(--db-line); border-radius: var(--db-radius); box-shadow: 0 12px 32px rgba(23, 32, 43, .10); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 1000; } /* * Open on hover, and on :focus-within so every panel destination is reachable * by keyboard: focusing the trigger reveals the panel, which puts its links * back into the tab order. `.open` is the click/tap fallback nav.js drives. */ .dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content, .dropdown.open .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-link { display: block; padding: 10px 14px; color: var(--db-ink); text-decoration: none; font-weight: 500; font-size: 14.5px; border-radius: 8px; } .dropdown-link:hover { background: var(--db-bg); color: var(--db-blu); } /* ------------------------------------------------------------------ * * Language switcher (site-i18n U4 — R6). views/partials/language-switcher.ejs * renders BOTH presentations on every page and this stylesheet shows exactly * one of them: above the nav breakpoint the `.dropdown` panel, below it the * `
` picker. The mobile rules live in the @media block further down, * beside the rules that make them necessary. * ------------------------------------------------------------------ */ .lang-toggle { gap: 6px; padding-block: 10px; padding-inline: 12px 10px; font-weight: 600; font-size: 14.5px; } .lang-toggle .icon-globe { width: 17px; height: 17px; } /* Only the chevron flips with the panel; the globe is not a state indicator. */ .dropdown.open .lang-toggle .icon-globe { transform: none; } /* The switcher is the LAST nav item, so its panel hangs from the inline-END edge or it would overflow the viewport. Logical, so it hangs from the left in RTL — where the end of the nav row now is. */ .lang-menu { inset-inline-start: auto; inset-inline-end: 0; min-width: 200px; max-height: 70vh; overflow-y: auto; } /* The entry for the language already showing: marked, not hidden — a switcher that drops the current language loses the "you are here" it exists to give. */ .lang-menu .lang-link[aria-current] { color: var(--db-blu); font-weight: 700; } /* The bar control, hidden at desktop widths (the .dropdown above is the switcher there). display:none rather than visibility so its links leave the tab order entirely — two switchers in the tab order would be a defect, not a redundancy. `position: relative` is the anchor its panel hangs from and is inert while the element is hidden. */ .lang-bar { display: none; position: relative; } /* The disclosure triangle is furniture here; the globe is the affordance. */ .lang-bar > summary::-webkit-details-marker { display: none; } .lang-bar > summary { list-style: none; } /* "Book lessons" keeps the mockup's compact nav sizing. */ .btn-nav { padding: 11px 20px; font-size: 14px; white-space: nowrap; } /* * TAP TO CALL — the bar's third control, and the only one that converts. * * Hidden above the nav breakpoint for the same reason the hamburger is: a * desktop visitor is not holding the phone they would dial with, and the * footer carries the number for them. It matches the hamburger and the * language button exactly — 40px square, same border token (1.4.11), same * radius — because three controls in a row that disagree on size read as an * accident. * * `flex: none` for the reason the other two have it: the brand is the item * that yields, never a tap target (2.5.5). */ .btn-call { display: none; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--db-line-strong); border-radius: 10px; color: var(--db-ink); text-decoration: none; } .btn-call:hover { border-color: var(--db-ink); } .btn-call .icon { width: 20px; height: 20px; } /* Hamburger — a real