/* ========================================================================== Night Journey — the design layer ========================================================================== Built from html/desktop-light and html/desktop-dark in the "howofwhat-night-journey-design" export. The comps are standalone files at two fixed widths (1440 and 390) with every rule written inline. None of that ships: inline styles cannot be themed, cannot be overridden by the accessibility sheet, and are the one thing on this site that a visitor's own stylesheet cannot defeat. They are translated into the classes below. TWO THINGS THAT ARE LOAD-BEARING. 1. THERE IS ONE THEME MECHANISM, NOT TWO. The comps switch dark/light by linking to a different file. The site already has a theme switch — the accessibility toolbar's "Site colours" control, which writes `data-a11y-contrast` onto SERVER-SIDE, so the first paint is already correct and a visitor who needs a particular contrast never sees the wrong one. So the design's dark version is not a second theme. It IS `data-a11y-contrast="dark"`. The tokens below are declared once on :root in their light values and re-declared under that attribute. The moon button in the utility bar is a second trigger for the same control, not a parallel one, because two theme systems eventually disagree and the one that loses is always the accessible one. The 'high' and 'mono' options in that same control still come from accessibility.css, which loads after this file and uses !important. They must keep winning. Nothing here is !important. 2. THE PALETTE WAS CHECKED, NOT ASSUMED. Every pair below was measured against its composited background. One failed and is corrected here rather than shipped: gold text #8A6D00 on the light band #EEECF8 ....... 4.18:1 FAILS corrected to #7A6000 .............................. 5.14:1 #8A6D00 is kept for gold text on the page ground, where it measures 4.53:1 and passes. The difference is 13px text at weight 600, which is not large text, so 4.5 is the floor and 4.18 is a fail, not a rounding argument. The "see all" button's #8A8FA3 border measured 2.99:1 against the ground — under the 3:1 that a control boundary needs (WCAG 1.4.11) — and is darkened to #7C8194, 3.60:1. For reference, the pairs that pass: light muted 6.18, light link 7.16, dark muted 8.31, dark link 8.83, gold on the dark band 8.07, white on the accent 5.22. ========================================================================== */ /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root { --nj-ground: #F7F6FC; --nj-band: #EEECF8; --nj-surface: #FFFFFF; --nj-border: #DDDAEE; --nj-text: #10131A; --nj-muted: #565C6B; --nj-link: #4336D6; /* ONE gold for text, and it is darker than the design's. The comp uses #8A6D00. Measured against the real composited backgrounds it comes out at 4.27:1 on the page ground and 4.21:1 on the band — both under the 4.5 floor, at 13px, uppercase, letterspaced, which is the least legible shape small text comes in. An earlier pass here kept #8A6D00 for the ground on the strength of a hand calculation that said 4.53. The browser says 4.27. That is the whole argument for measuring instead of computing. #7A5F00 measures 5.64:1 on the ground and 5.19:1 on the band, and is still recognisably the same gold. --nj-gold-line stays at the design's #C9A227 because a 1px rule is decoration, not text, and is held to 3:1 as a non-text boundary rather than 4.5. */ --nj-gold-on-ground: #7A5F00; --nj-gold-on-band: #7A5F00; --nj-gold-line: #C9A227; --nj-accent: #6253F1; /* The sign-up pill inverts between themes: filled accent on light, filled white on dark. Two tokens rather than one so the rule that paints it never has to know which theme is on. */ --nj-cta-bg: #6253F1; --nj-cta-text: #FFFFFF; --nj-control-border: #7C8194; /* "Free", and anything else that means yes. #00705a is 5.6:1 on white and 1.8:1 on the dark surface, so it cannot be one value. */ --nj-positive: #00705A; --nj-radius-card: 20px; --nj-radius-tile: 16px; --nj-radius-pill: 999px; --nj-shadow-lift: 0 24px 48px rgba(16, 19, 26, .14); --nj-gutter: 120px; --nj-max: 1200px; } html[data-a11y-contrast="dark"] { --nj-ground: #10131A; --nj-band: #0B0D12; --nj-surface: #1B1F2A; --nj-border: #29303B; --nj-text: #FFFFFF; --nj-muted: #A8AEBD; --nj-link: #B3A8FF; /* On the dark band the brand gold measures 8.07:1, so it needs no second variant. */ --nj-gold-on-ground: #C9A227; --nj-gold-on-band: #C9A227; --nj-cta-bg: #FFFFFF; --nj-cta-text: #3D32BB; --nj-control-border: #8A8FA3; --nj-shadow-lift: 0 24px 48px rgba(0, 0, 0, .45); /* 8.2:1 on the dark surface. */ --nj-positive: #5BD6A8; } /* -------------------------------------------------------------------------- Page -------------------------------------------------------------------------- */ body.nj { background: var(--nj-ground); color: var(--nj-text); font-family: Poppins, system-ui, sans-serif; } .nj a { color: var(--nj-link); text-decoration: none; } .nj a:hover { color: var(--nj-text); } /* style.css carries `a { outline: none !important }` for the whole site, which removes the focus indicator (WCAG 2.4.7). Put it back everywhere this layer draws a link or a control. */ .nj a:focus-visible, .nj button:focus-visible, .nj input:focus-visible, .nj select:focus-visible, .nj textarea:focus-visible { outline: 3px solid var(--nj-link) !important; outline-offset: 2px; border-radius: 4px; } .nj-shell { max-width: var(--nj-max); margin: 0 auto; padding-inline: 24px; } /* The comps are a fixed 1440 with 120px gutters. A centred 1200 column with a 24px minimum gutter is the same measure on a 1440 screen and does not fall apart on a 1280 laptop, which the comps never covered. */ @media (min-width: 1448px) { .nj-shell { padding-inline: 0; } } /* -------------------------------------------------------------------------- Type -------------------------------------------------------------------------- */ .nj h1, .nj h2, .nj h3, .nj .nj-display { font-family: Raleway, Poppins, sans-serif; margin: 0; } .nj-h1 { font-weight: 900; font-size: clamp(40px, 5.3vw, 76px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; } .nj-h2 { font-weight: 800; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.12; letter-spacing: -0.02em; } .nj-lede { font-size: 18px; line-height: 1.6; color: var(--nj-muted); max-width: 52ch; margin: 0; } /* The "Stop 01 · Pick a road" label. */ .nj-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nj-gold-on-ground); } /* .nj-pagehead--band as well as .nj-band: the page header has its own band class, so an earlier version of this rule matched the section bands and silently missed the header on every inner page. */ .nj-band .nj-eyebrow, .nj-pagehead--band .nj-eyebrow { color: var(--nj-gold-on-band); } .nj-eyebrow::before { content: ""; inline-size: 40px; block-size: 1px; background: var(--nj-gold-line); flex: none; } /* The eyebrow rule is decoration. When it is the only thing separating two labels it is not, but here the text carries the meaning on its own. */ .nj-eyebrow--plain::before { content: none; } /* -------------------------------------------------------------------------- Sections -------------------------------------------------------------------------- */ .nj-section { padding-block: clamp(56px, 7vw, 96px); } .nj-band { background: var(--nj-band); } .nj-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; } .nj-section-head > div:first-child { display: flex; flex-direction: column; gap: 10px; } /* -------------------------------------------------------------------------- Controls -------------------------------------------------------------------------- */ .nj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding-inline: 24px; border: 0; border-radius: var(--nj-radius-pill); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; } .nj-btn--primary { background: var(--nj-accent); color: #FFFFFF; } .nj-btn--primary:hover { background: #4F41DA; color: #FFFFFF; } /* The sign-up pill. Inverts with the theme via the two --nj-cta tokens. */ .nj-btn--cta { background: var(--nj-cta-bg); color: var(--nj-cta-text); } .nj-btn--cta:hover { background: var(--nj-cta-bg); color: var(--nj-cta-text); filter: brightness(.94); } .nj-btn--ghost { background: transparent; color: var(--nj-text); border: 1px solid var(--nj-control-border); } .nj-btn--ghost:hover { color: var(--nj-text); border-color: var(--nj-text); } /* A text link that ends a section — "All categories →". 44px tall so it is a real target and not four pixels of text (WCAG 2.5.8). */ .nj-link-more { display: inline-flex; align-items: center; /* inline-flex collapses the whitespace between its children, so the space before the arrow has to be a gap or "All categories→" runs together. */ gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--nj-link); } /* "Browse all courses", underlined in brand gold rather than coloured. */ .nj-link-rule { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--nj-text); border-bottom: 1px solid var(--nj-gold-line); } .nj-link-rule:hover { color: var(--nj-text); border-bottom-color: var(--nj-text); } /* -------------------------------------------------------------------------- The search field — a pill holding an input and a button -------------------------------------------------------------------------- */ .nj-search { display: flex; align-items: center; gap: 12px; padding: 8px; background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-pill); max-width: 560px; } .nj-search input { flex: 1 1 0; min-width: 0; height: 48px; padding-inline: 20px; background: transparent; border: 0; color: var(--nj-text); font-family: inherit; font-size: 15px; } /* The wrapper takes the focus ring, so the input losing its own outline is not a regression — but only while the wrapper actually shows one. */ .nj-search:focus-within { outline: 3px solid var(--nj-link); outline-offset: 2px; } .nj-search input:focus-visible { outline: 0 !important; } .nj-search input::placeholder { color: var(--nj-muted); opacity: 1; } .nj-search .nj-btn { height: 48px; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .nj-grid { display: grid; gap: 24px; } .nj-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .nj-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nj-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nj-card { background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-card); color: var(--nj-text); display: flex; flex-direction: column; overflow: hidden; } .nj-card:hover { color: var(--nj-text); border-color: var(--nj-control-border); } /* A card that IS a link still reads as body text, not as a link. Without this `.nj a` wins on specificity and every card title comes out in the link colour, which is how a page ends up with forty lilac headlines. */ .nj a.nj-card, .nj a.nj-card:hover { color: var(--nj-text); } /* Category tile */ .nj-tile { min-height: 168px; box-sizing: border-box; padding: 24px; border-radius: var(--nj-radius-tile); justify-content: space-between; gap: 20px; } .nj-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nj-tile__icon { inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--nj-accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; } .nj-tile__count { font-size: 12px; color: var(--nj-muted); } .nj-tile__name { font-size: 16px; font-weight: 600; line-height: 1.35; } /* Course card */ .nj-course__media { position: relative; aspect-ratio: 16 / 10; background: var(--nj-band); display: block; } .nj-course__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .nj-course__price { position: absolute; inset-block-end: 16px; inset-inline-end: 16px; font-size: 12px; font-weight: 700; color: #10131A; background: #FFFFFF; border-radius: var(--nj-radius-pill); padding: 4px 12px; } .nj-course__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } .nj-course__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nj-link); } .nj-course__title { font-family: Raleway, Poppins, sans-serif; font-size: 21px; font-weight: 800; line-height: 1.25; } .nj-course__text { font-size: 14px; line-height: 1.55; color: var(--nj-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* Post card — no image in this design, the date and title carry it */ .nj-post { padding: 28px; min-height: 220px; box-sizing: border-box; background: transparent; justify-content: space-between; gap: 24px; } .nj-post__date { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--nj-gold-on-ground); } .nj-post__title { font-family: Raleway, Poppins, sans-serif; font-size: 24px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nj-post__more { font-size: 14px; font-weight: 600; color: var(--nj-link); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .nj-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nj-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .nj-grid--4, .nj-grid--3, .nj-grid--2 { grid-template-columns: minmax(0, 1fr); } .nj-section-head { flex-direction: column; align-items: flex-start; gap: 16px; } .nj-lede { font-size: 16px; } } /* ========================================================================== The shell — utility bar, navigation, drawer, footer ========================================================================== Scoped to .njt / .njf rather than to body.nj on purpose. The shell is on every page including the ones not yet converted, so it cannot depend on a class that only converted pages carry. (The homepage hero and partner strip are further down, after this block.) ========================================================================== */ .njt, .njf { font-family: Poppins, system-ui, sans-serif; background: var(--nj-ground); color: var(--nj-text); } .njt a:focus-visible, .njt button:focus-visible, .njf a:focus-visible, .njf button:focus-visible, .njf input:focus-visible { outline: 3px solid var(--nj-link) !important; outline-offset: 2px; border-radius: 4px; } /* --- Utility bar --------------------------------------------------------- */ .njt-utility { background: var(--nj-band); border-bottom: 1px solid var(--nj-gold-line); font-size: 13px; } .njt-utility__inner { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Kept, unused: the strapline this styled was removed from the markup, but the slot is still there and this is what it would look like if anything goes back into it. */ .njt-utility__tagline { color: var(--nj-muted); } /* margin-inline-start:auto rather than relying on space-between: the left-hand strapline is gone, and with one child space-between would park this group on the LEFT. auto keeps it right-aligned whether or not anything joins it. */ .njt-utility__end { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .njt-lang { display: inline-flex; align-items: center; min-height: 32px; padding-inline: 10px; border-radius: 6px; color: var(--nj-muted); font-size: 13px; } .njt-lang:hover { color: var(--nj-text); background: rgba(127, 127, 127, .14); } /* The language in use: weight and an underline as well as colour, so it is never colour alone (WCAG 1.4.1). */ .njt-lang[aria-current] { color: var(--nj-text); font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; } .njt-theme { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-inline-start: 12px; padding-inline: 14px; border: 0; border-inline-start: 1px solid var(--nj-border); border-radius: 0; background: none; color: var(--nj-text); font: inherit; font-weight: 600; cursor: pointer; } .njt-theme:hover { background: rgba(127, 127, 127, .14); } .njt-theme svg { flex: none; } /* --- Navigation ---------------------------------------------------------- */ .njt-nav__inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .njt-brand { display: flex; align-items: center; gap: 12px; color: var(--nj-text); flex: none; } .njt-brand:hover { color: var(--nj-text); } /* The logo is a spectrum mark that disappears on the dark ground, so it sits on its own white tile in both themes — that is the design's choice, not an oversight. */ .njt-brand__mark { inline-size: 60px; block-size: 60px; box-sizing: border-box; padding: 5px; border-radius: 14px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; } .njt-brand__mark img { max-inline-size: 100%; max-block-size: 100%; display: block; } .njt-brand__word { font-family: Raleway, Poppins, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; } .njt-menu { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; } .njt-menu a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; border-radius: 8px; color: var(--nj-text); white-space: nowrap; } .njt-menu a:hover { background: rgba(127, 127, 127, .12); color: var(--nj-text); } .njt-menu a[aria-current] { color: var(--nj-link); font-weight: 600; text-decoration: underline !important; text-underline-offset: 6px; text-decoration-thickness: 2px; } .njt-account { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; flex: none; } .njt-account a { color: var(--nj-text); } .njt-account .njt-login { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px; border-radius: 8px; } .njt-account .njt-login:hover { background: rgba(127, 127, 127, .12); color: var(--nj-text); } .njt-signup { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 24px; border-radius: var(--nj-radius-pill); background: var(--nj-cta-bg); color: var(--nj-cta-text) !important; } .njt-signup:hover { filter: brightness(.94); color: var(--nj-cta-text) !important; } /* --- Burger and drawer --------------------------------------------------- */ .njt-burger { display: none; inline-size: 44px; block-size: 44px; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--nj-text); cursor: pointer; } .njt-drawer { position: fixed; inset: 0; z-index: 1000; background: var(--nj-ground); display: flex; flex-direction: column; overflow-y: auto; } .njt-drawer[hidden] { display: none; } .njt-drawer__top { min-height: 64px; padding: 0 12px 0 20px; background: var(--nj-band); border-bottom: 1px solid var(--nj-gold-line); display: flex; align-items: center; justify-content: space-between; } .njt-drawer__body { flex: 1 1 auto; padding: 12px 20px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .njt-drawer__links { display: flex; flex-direction: column; } .njt-drawer__links a { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--nj-border); color: var(--nj-text); font-family: Raleway, Poppins, sans-serif; font-weight: 800; font-size: 24px; } .njt-drawer__links a[aria-current] { color: var(--nj-link); } .njt-drawer__links .njt-drawer__arrow { color: var(--nj-gold-on-ground); font-size: 18px; } .njt-drawer__foot { display: flex; flex-direction: column; gap: 12px; } .njt-drawer__langs { display: flex; gap: 8px; } .njt-drawer__langs a { flex: 1 1 0; min-height: 44px; border-radius: var(--nj-radius-pill); border: 1px solid var(--nj-border); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--nj-text); } .njt-drawer__langs a[aria-current] { background: var(--nj-accent); border-color: var(--nj-accent); color: #FFFFFF; } .njt-drawer__foot .nj-btn { min-height: 52px; width: 100%; } @media (max-width: 991px) { .njt-menu, .njt-account { display: none; } .njt-burger { display: inline-flex; } .njt-nav__inner { min-height: 64px; } .njt-brand__mark { inline-size: 44px; block-size: 44px; padding: 4px; border-radius: 12px; } .njt-brand__word { font-size: 18px; } .njt-utility__tagline { display: none; } } /* --- Footer -------------------------------------------------------------- */ .njf { margin-top: auto; background: var(--nj-band); border-top: 1px solid var(--nj-gold-line); padding-block: 72px 40px; } .njf__cols { display: flex; flex-wrap: wrap; gap: 48px 80px; justify-content: space-between; margin-bottom: 56px; } .njf__about { display: flex; flex-direction: column; gap: 16px; max-width: 320px; } .njf__brand { font-family: Raleway, Poppins, sans-serif; font-weight: 800; font-size: 26px; } .njf__about p { font-size: 14px; line-height: 1.6; color: var(--nj-muted); margin: 0; } .njf__col { display: flex; flex-direction: column; font-size: 14px; } .njf__col h2 { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--nj-text); margin: 0 0 4px; } .njf__col a { display: inline-flex; align-items: center; min-height: 32px; color: var(--nj-muted); } .njf__col a:hover { color: var(--nj-text); } .njf__news { display: flex; flex-direction: column; gap: 14px; width: min(380px, 100%); } .njf__news p { font-size: 14px; color: var(--nj-muted); margin: 0; } .njf__news-row { display: flex; gap: 8px; } .njf__news input { flex: 1 1 0; min-width: 0; height: 48px; padding-inline: 18px; background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-pill); color: var(--nj-text); font-family: inherit; font-size: 14px; } .njf__news input::placeholder { color: var(--nj-muted); opacity: 1; } .njf__news .nj-btn { height: 48px; } .njf__legal { padding-top: 24px; border-top: 1px solid var(--nj-border); font-size: 13px; color: var(--nj-muted); } /* ========================================================================== Inner pages ========================================================================== */ /* --- Page header --------------------------------------------------------- */ .nj-pagehead { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); display: block; } .nj-pagehead .nj-shell { display: flex; flex-direction: column; gap: 18px; } .nj-pagehead__title { font-family: Raleway, Poppins, sans-serif; font-weight: 900; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -0.03em; max-width: 980px; text-wrap: balance; margin: 0; } .nj-pagehead__lede { max-width: 640px; font-size: 17px; } /* --- Filter bar ---------------------------------------------------------- */ .nj-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 40px; } .nj-field { flex: 1 1 320px; min-width: 0; height: 56px; padding-inline: 24px; background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-pill); color: var(--nj-text); font-family: inherit; font-size: 15px; } .nj-field::placeholder { color: var(--nj-muted); opacity: 1; } .nj-filters .nj-btn { height: 56px; } /* A