/** * Components — buttons, forms, badges, cards, header, footer, session meter. * Depends on tokens.css + base.css. * * Every component here is drawn from a specific screen in the client deck. * See design/README.md for which mockup each one comes from. */ /* ═══ Icons ══════════════════════════════════════════════════════════════ */ .aik-icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; vertical-align: middle; } .aik-icon--sm { width: 1em; height: 1em; } .aik-icon--lg { width: 1.75em; height: 1.75em; } .aik-icon--xl { width: 2.5em; height: 2.5em; } /* ═══ Buttons ════════════════════════════════════════════════════════════ Six variants, all observed in the deck: primary (Sign In) · gold (Subscribe Now) · success (Create Free Account) outline (Register Free) · dark (Browse All Sectors) · ghost (Clear filters) ═════════════════════════════════════════════════════════════════════════ */ .aik-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); /* Header CTA measured 140x44px with a ~10px radius. */ padding: 0 var(--sp-6); min-height: 44px; font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1; text-decoration: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); white-space: nowrap; } .aik-btn:hover { text-decoration: none; } .aik-btn:disabled, .aik-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .aik-btn--primary { background: var(--aik-sky); color: #fff; } .aik-btn--primary:hover { background: var(--aik-sky-dark); color: #fff; } .aik-btn--gold { background: var(--aik-gold); color: #fff; } .aik-btn--gold:hover { background: var(--aik-gold-dark); color: #fff; } .aik-btn--success { background: var(--aik-success); color: #fff; } .aik-btn--success:hover { background: #126b33; color: #fff; } .aik-btn--dark { background: var(--aik-navy-900); color: #fff; } .aik-btn--dark:hover { background: var(--aik-ribbon); color: #fff; } .aik-btn--outline { background: transparent; color: var(--aik-sky); border-color: var(--aik-border-strong); } .aik-btn--outline:hover { background: var(--aik-sky-soft); border-color: var(--aik-sky); color: var(--aik-sky-dark); } .aik-btn--ghost { background: transparent; color: var(--aik-sky); padding-inline: var(--sp-2); min-height: auto; } .aik-btn--ghost:hover { text-decoration: underline; } .aik-btn--block { width: 100%; } .aik-btn--sm { padding: var(--sp-2) var(--sp-3); min-height: 36px; font-size: var(--fs-sm); } /* ═══ Forms ══════════════════════════════════════════════════════════════ */ .aik-field { display: block; margin-bottom: var(--sp-4); } .aik-label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--aik-text); } .aik-input, .aik-select, .aik-textarea { width: 100%; padding: var(--sp-3) var(--sp-4); min-height: 44px; font-family: inherit; font-size: var(--fs-base); color: var(--aik-text); background: var(--aik-surface); border: 1px solid var(--aik-border-strong); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .aik-input::placeholder { color: var(--aik-faint); } .aik-input:focus, .aik-select:focus, .aik-textarea:focus { outline: none; border-color: var(--aik-sky); box-shadow: 0 0 0 3px var(--aik-sky-soft); } .aik-input--error { border-color: var(--aik-danger); } .aik-error { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--aik-danger); } /* Input with a leading icon — deck uses this for every search box. */ .aik-input-group { position: relative; } /* Direct child only. As a descendant selector this also caught the eye inside the password toggle, which sits in the same wrapper: the eye was pulled out of its button, pinned 16px from the button's own left edge, and given pointer-events:none. So the visible eye did nothing when clicked, and the button collapsed to 16px of empty padding somewhere to its left. The toggle worked — you just could not hit it. */ .aik-input-group > .aik-icon { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--aik-faint); pointer-events: none; } .aik-input-group .aik-input { padding-left: calc(var(--sp-4) * 2 + 1.25em); } .aik-checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; } .aik-checkbox input { width: 18px; height: 18px; accent-color: var(--aik-sky); cursor: pointer; } /* ═══ Badges — dataset tables map values onto these ═════════════════════ */ .aik-badge { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.5; border-radius: var(--r-full); background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); white-space: nowrap; } .aik-badge--teal { background: var(--badge-teal-bg); color: var(--badge-teal-fg); } .aik-badge--blue { background: var(--badge-blue-bg); color: var(--badge-blue-fg); } .aik-badge--amber { background: var(--badge-amber-bg); color: var(--badge-amber-fg); } .aik-badge--pink { background: var(--badge-pink-bg); color: var(--badge-pink-fg); } .aik-badge--purple { background: var(--badge-purple-bg); color: var(--badge-purple-fg); } /* Gold "Recommended" pill on the middle pricing card, deck p3. */ .aik-badge--recommended { background: var(--aik-gold); color: #fff; font-weight: var(--fw-semibold); } /* ═══ Cards ══════════════════════════════════════════════════════════════ */ .aik-card { background: var(--aik-surface); border: 1px solid var(--aik-border); border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: var(--sh-card); } .aik-card--interactive { transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base); } .aik-card--interactive:hover { border-color: var(--aik-sky); box-shadow: var(--sh-raised); transform: translateY(-2px); } /* Sector card — deck p2 grid */ .aik-sector-card { display: flex; align-items: flex-start; gap: var(--sp-4); text-decoration: none; color: inherit; } .aik-sector-card:hover { text-decoration: none; } .aik-sector-card__icon { color: var(--aik-sky); flex: none; } .aik-sector-card__title { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); color: var(--aik-navy-900); } .aik-sector-card__desc { margin: 0; font-size: var(--fs-sm); color: var(--aik-muted); line-height: var(--lh-snug); } .aik-sector-card__chevron { margin-left: auto; color: var(--aik-faint); align-self: center; } /* ═══ Header — three variants share this shell ═════════════════════════ guest (Register Now) · free (Subscribe Now + avatar) · subscriber (SP1) ═════════════════════════════════════════════════════════════════════════ */ .aik-header { position: relative; z-index: var(--z-header); background: var(--aik-ribbon); color: #fff; } .aik-header__inner { display: flex; align-items: center; min-height: var(--aik-header-h); width: var(--aik-container-wide); margin-inline: auto; } .aik-logo { display: inline-flex; align-items: center; gap: var(--sp-3); color: #fff; text-decoration: none; font-weight: var(--fw-bold); font-size: var(--fs-xl); letter-spacing: -0.01em; flex: none; gap: var(--sp-3); } /* Measured: header lockup is 226px wide and 44px tall. */ .aik-header .aik-logo__mark--marketing .aik-icon { width: 56px; height: 39px; } .aik-header .aik-logo__mark--gold .aik-icon { width: 46px; height: 43px; } .aik-logo:hover { color: #fff; text-decoration: none; } /* Two hand-authored marks — no stock icon matches either. app: gold triple chevron (deck p5–14) marketing: white swept-wing dart (deck p1) */ .aik-logo__mark { display: inline-flex; } .aik-logo__mark--gold { color: var(--aik-gold); } .aik-logo__mark--gold .aik-icon { width: 42px; height: 39px; /* keeps the 48:45 viewBox ratio */ } .aik-logo__mark--marketing { color: #fff; } .aik-logo__mark--marketing .aik-icon { width: 52px; height: 36px; /* 66:46 viewBox ratio */ } /* The marketing lockup sets its wordmark in caps, per the deck. */ .aik-logo--marketing .aik-logo__name { letter-spacing: 0.01em; } /* The free lockup (deck p2) is one line of mixed case, no strapline, and it is set noticeably larger than page 1's stacked wordmark. Sizing note. obj24 and obj10 were captured at different zooms, so their bar heights are not comparable and cap-height ratios between them disagree. Each element is therefore measured as a share of its own header's *inner width*, which does scale together. Against that 1396px reference bar: mark 3.87% wordmark 21.40% mark-to-wordmark gap 0.86% logo-to-nav gap 6.16% nav-to-actions gap 2.79% Rendered at 1450px those come out as the values below. */ .aik-logo--free .aik-logo__name { font-size: 25px; letter-spacing: -0.015em; white-space: nowrap; } .aik-header .aik-logo--free .aik-logo__mark--marketing .aik-icon { width: 56px; height: 39px; } /* 8px, not the measured 11px — the mark's viewBox carries ~4px of its own right margin, and the reference gap is between ink edges. */ .aik-logo--free { gap: 8px; } .aik-logo__text { display: flex; flex-direction: column; line-height: 1.1; } .aik-logo__sub { font-size: 0.55em; font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; } .aik-nav { display: flex; align-items: center; /* * 8px, not 4. At 4 the hover and active pills all but touched, so two items * beside each other read as one wide block rather than two targets. The gap * has to be visible when the backgrounds are lit, not only when they are not. */ gap: var(--sp-2); /* Measured: logo ends x290, nav ink starts x432 — a 142px gap on a 1315px bar. */ margin-left: 10.8%; } /* The free header's wordmark is wider, so the deck closes the logo-to-nav gap: 86px on a 1396px bar (6.2%) against page 1's 91px on 861px (10.6%). Its nav is also set a shade larger and spaced further apart — each label is ~7.7% of the bar against page 1's ~8.2%, with 4.0% between labels against 2.9%. */ /* The subscriber bar carries six nav items, the session meter, My Account and Logout — the most crowded of the three. Measured on obj21 (inner 1481px): the logo block is 12.96% of the bar and the logo-to-nav gap is 5.06%, against the guest header's 10.6%. Inheriting the guest gap overflowed the bar and pushed Logout off the right edge entirely. The gap between items was squeezed to 0 in that same fix, which was the wrong thing to give up: with the hover and active pills lit, two items beside each other read as one wide block rather than two targets. Room came from moving the collapse breakpoint to 1279 instead — the bar genuinely needs it now. */ .aik-header--subscriber .aik-nav { margin-left: 5.06%; gap: var(--sp-2); } .aik-header--subscriber .aik-nav__link { font-size: 13px; padding-inline: var(--sp-3); gap: var(--sp-2); } .aik-header--subscriber .aik-header__inner { min-height: 77px; /* 5.60% of inner width, against the guest bar's 6.85% */ } .aik-header--subscriber .aik-logo { font-size: var(--fs-lg); } .aik-header--subscriber .aik-logo__mark--gold .aik-icon { width: 38px; height: 35px; } .aik-header--subscriber .aik-header__actions { gap: var(--sp-3); } /* Spacing here was measured off obj24, which draws no Logout. Adding one — a signed-in member needs a way out on every page — costs about 150px, so the gaps give that back proportionally rather than any element being resized. */ .aik-header--free .aik-nav { margin-left: 2.4%; gap: 8px; } .aik-header--free .aik-nav__link { font-size: 15px; padding-inline: var(--sp-3); } .aik-header--free .aik-header__actions { gap: 18px; } /* Logout is an icon and a word — it does not carry the avatar's two-line block, so it should not inherit its width either. */ .aik-account--logout .aik-account__text { line-height: 1; } /* The free bar is shorter than page 1's: 5.37% of its inner width against 6.85%. Same normalisation that put every horizontal element within 0.5%, so this is the deck's intent rather than the two mockups' differing zoom. */ .aik-header--free .aik-header__inner { min-height: 70px; } .aik-nav__link { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); color: rgb(255 255 255 / 0.92); font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--r-md); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; } .aik-nav__link:hover { background: rgb(255 255 255 / 0.14); color: #fff; text-decoration: none; } /* * Active nav item — deck p5/p13. * * Sampled from p05_obj32: the ribbon is #034f7c and the active pill is #07669e, * which is the same blue lifted, not a different one. It had been set to the * sky blue the deck names in its colour key (#2563EB) — but that value belongs * to the sector rail's selected row, sampled at #0061f2 on the same artwork. * Two different highlights on one screen, and the wrong one was borrowed: a * saturated indigo sitting in a navy bar looked heavier than anything drawn. * * --aik-ribbon-light is #0a6ba6, within JPEG noise of the measurement. */ .aik-nav__link.is-active { background: var(--aik-ribbon-light); color: #fff; } .aik-header__actions { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; } /* * The signed-out bar's line, where its nav used to be. Placed in the centre of * the bar by the grid rule below. * * Set as the design draws it — an italic serif, the largest type in the bar, with * "informed" in the logo's gold. The site loads no web fonts, so the serif is a * system stack: Iowan Old Style on Apple devices, Palatino on Windows, Georgia * anywhere else. Nothing extra is downloaded. */ .aik-header__tagline { margin: 0; color: #fff; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 1.95vw, 1.875rem); font-style: italic; font-weight: var(--fw-normal); line-height: 1.2; letter-spacing: 0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .aik-header__tagline-accent { color: var(--aik-gold); font-weight: var(--fw-semibold); } /* * The line sits in the centre of the bar. * * "Also appears to be slightly leftwards. Needs to be moved slightly to the * right to appear centrally aligned." — client, 17 September * * It had been placed at the old nav's offset, 10.8% after the logo, so where it * landed depended on the logo's width and it sat left of centre. The signed-out * bar is now three columns — logo, line, button — with the two outer columns * equal, so the line is centred on the page itself. The outer columns never * shrink below the logo or the button, so nothing can overlap; if the bar is ever * too tight to centre exactly, the line gives way to the right rather than * running into the logo. * * From 768px up only. Below that the line is hidden and the bar is logo and * burger, which the flex layout already handles. */ @media (min-width: 768px) { .aik-header--guest .aik-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--sp-6); } .aik-header--guest .aik-logo { justify-self: start; } .aik-header--guest .aik-header__tagline { margin: 0; justify-self: center; } .aik-header--guest .aik-header__actions, .aik-header--guest .aik-burger { justify-self: end; margin-left: 0; } } .aik-header__divider { width: 1px; height: 28px; background: rgb(255 255 255 / 0.2); } /* Home icon — explicitly requested by the client, since the logo goes to Sectors. */ .aik-header__home { display: inline-flex; color: rgb(255 255 255 / 0.9); padding: var(--sp-2); border-radius: var(--r-md); } .aik-header__home:hover { background: rgb(255 255 255 / 0.1); color: #fff; } /* ── Session meter — deck p6/p13 ──────────────────────────────────────── Two rows, exactly as drawn: SESSION 3 / 10 ▓▓▓░░░░░░░ 30% ─────────────────────────────────────────────────────────────────────── */ .aik-session { display: flex; flex-direction: column; gap: var(--sp-1); color: #fff; } .aik-session__top { display: flex; align-items: baseline; gap: var(--sp-2); } .aik-session__bottom { display: flex; align-items: center; gap: var(--sp-2); } .aik-session__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } .aik-session__count { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; } .aik-session__bar { width: 150px; height: 7px; background: rgb(255 255 255 / 0.22); border-radius: var(--r-full); overflow: hidden; } .aik-session__fill { height: 100%; background: var(--aik-gold); border-radius: var(--r-full); transition: width var(--t-slow); } /* Warning states as usage climbs — behaviour above 100% is still unspecified by the client (see docs/10_Open_Questions.md Q3). */ .aik-session--warn .aik-session__fill { background: #f59e0b; } .aik-session--critical .aik-session__fill { background: #ef4444; } .aik-session__pct { font-size: var(--fs-xs); font-weight: var(--fw-semibold); opacity: 0.9; } /* ── Avatar chip — deck p2/p3 "JD Hi, Jamie / My Account" ─────────────── */ /* Measured on obj24: the disc is 0.89x the CTA's height, and it is *darker* than the ribbon (#021f47 against #034d88) — not the tint-of-white it was before. */ .aik-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--aik-avatar-bg); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.02em; flex: none; } .aik-account { display: inline-flex; align-items: center; gap: var(--sp-2); color: #fff; text-decoration: none; font-size: var(--fs-sm); line-height: 1.2; /* "My Account" is one line in every variant; without this the subscriber bar, which is the tightest of the three, wrapped it onto two. */ white-space: nowrap; } .aik-account:hover { color: #fff; text-decoration: none; } /* The two lines stack — baseline-to-baseline is 19px against a 74px bar in the reference, i.e. 1.25 line-height on the larger of the two. */ .aik-account__text { display: flex; flex-direction: column; line-height: 1.25; } .aik-account__name { font-weight: var(--fw-semibold); } /* Reference has the two lines almost the same size (cap-heights 13 and 12) and both plainly white — the strapline is distinguished by weight, not by dimming. */ .aik-account__sub { opacity: 0.92; font-size: 13px; font-weight: var(--fw-normal); } /* ═══ Footer — marketing and app variants ═══════════════════════════════ */ .aik-footer { background: var(--aik-ribbon); color: rgb(255 255 255 / 0.85); /* Measured: footer band is 86px tall. */ min-height: 86px; display: flex; align-items: center; padding-block: var(--sp-4); margin-top: auto; } .aik-footer__inner { display: flex; align-items: center; /* Wrap rather than nowrap. The row is logo, tagline, links and copyright, and at 1280 it wanted 1310px — 30px more than the laptop had. Chasing that with another breakpoint fixes 1280 and waits to be caught out by the next width; letting it wrap fixes every width at once, and above 1440 it still sits on one line, so the desktop design is unchanged. */ flex-wrap: wrap; gap: var(--sp-6); width: var(--aik-container); margin-inline: auto; } /* The footer lockup is noticeably smaller than the header's in the deck. */ .aik-footer .aik-logo { font-size: var(--fs-base); flex: none; } .aik-footer .aik-logo__mark--marketing .aik-icon { width: 34px; height: 24px; } .aik-footer .aik-logo__mark--gold .aik-icon { width: 28px; height: 26px; } .aik-footer .aik-logo__sub { font-size: 0.5em; } /* Page 2's footer, measured on obj22 (1469px page, footer band y1001-1069): band 69px = 4.70% of page width -> 68px here mark 52px — the same size as its header's 53px, unlike the other footers wordmark 268px = 0.873x its own header wordmark links start at 47.7% and sit 2.6% clear of the copyright, not centred The container stays at --aik-container-wide so the footer lockup lines up under the header lockup; page 2 draws them 6px apart, which reads as slop. */ .aik-footer--free { min-height: 68px; } .aik-footer .aik-logo--free .aik-logo__name { font-size: 22px; } .aik-footer .aik-logo--free .aik-logo__mark--marketing .aik-icon { width: 55px; height: 38px; } .aik-footer--free .aik-footer__links { margin-left: auto; margin-right: 2.6%; } /* The links carry the auto margin here, so the copyright must drop its own — two autos would split the free space and pull the pair back to the middle. */ .aik-footer--free .aik-footer__meta { margin-left: 0; } .aik-footer__tagline { font-size: var(--fs-sm); /* The break is explicit in the markup, so no max-width is needed — one was previously forcing a third line. */ opacity: 0.8; margin: 0; line-height: var(--lh-snug); flex: none; white-space: nowrap; } .aik-footer__links { display: flex; flex-wrap: nowrap; gap: var(--sp-5); list-style: none; margin: 0 auto; padding: 0; } .aik-footer__links li { margin: 0; white-space: nowrap; } .aik-footer__links a { color: rgb(255 255 255 / 0.85); font-size: var(--fs-sm); text-decoration: none; } .aik-footer__links a:hover { color: #fff; text-decoration: underline; } .aik-footer__meta { margin-left: auto; font-size: var(--fs-sm); opacity: 0.75; display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; flex: none; } /* Beta-version identifier — explicitly requested by the client. */ .aik-beta { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; background: var(--aik-gold); color: #fff; border-radius: var(--r-full); } /* ═══ Page shell — sticky footer ════════════════════════════════════════ */ .aik-page { display: flex; flex-direction: column; min-height: 100vh; } .aik-main { flex: 1 0 auto; } /* * Pages that end with the value band: the spare height goes above the band. * * The page shell stretches #aik-main to fill a tall window, and the band is its * last child — so on a short page the stretch opened a gap between the band and * the footer. As a flex column, #aik-main lets the band's wrapper take * margin-top: auto and sit on the footer. * * Not on the landing page (.home): it is taller than any window, and its sections * rely on margins that collapse in normal flow and would not in a flex column. */ body:not(.home) .aik-main:has(> .aik-value-wrap) { display: flex; flex-direction: column; } /* ═══ Empty state — 15 of 16 sectors have no content yet ═══════════════ */ .aik-empty { text-align: center; padding: var(--sp-16) var(--sp-6); color: var(--aik-muted); } .aik-empty__icon { color: var(--aik-faint); margin-inline: auto; margin-bottom: var(--sp-4); } /* ═══ Responsive ════════════════════════════════════════════════════════ The deck is desktop-only (docs/04_UI_Strategy.md §10), so none of this is drawn anywhere — it is the smallest set of decisions that keeps the same design usable on a phone, not a redesign. The header is the whole problem. The subscriber bar carries ten elements and even the guest bar carries seven; at 375px they overflowed to 662px and the page scrolled sideways. Below 1024px they collapse into a panel instead. ═════════════════════════════════════════════════════════════════════════ */ /* On desktop the wrapper is not a box at all — display:contents makes nav and actions direct flex children of the bar, exactly as they were before it existed. So the desktop layout is untouched by any of this. */ .aik-header__collapse { display: contents; } .aik-burger { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: var(--r-md); color: #fff; cursor: pointer; align-items: center; justify-content: center; flex: none; } .aik-burger:hover { background: rgb(255 255 255 / 0.12); } /* Three bars from one element: the middle is the span, the outer two are its pseudo-elements. They rotate into a cross when the panel is open. */ .aik-burger__box { position: relative; display: block; width: 22px; height: 2px; } .aik-burger__box span, .aik-burger__box::before, .aik-burger__box::after { position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t-base), opacity var(--t-fast); } .aik-burger__box span { top: 0; } .aik-burger__box::before { content: ""; top: -7px; } .aik-burger__box::after { content: ""; top: 7px; } .aik-header.is-open .aik-burger__box span { opacity: 0; } .aik-header.is-open .aik-burger__box::before { transform: translateY(7px) rotate(45deg); } .aik-header.is-open .aik-burger__box::after { transform: translateY(-7px) rotate(-45deg); } /* Measured, not guessed: at full size the free header wants 1344px and the subscriber header more, so a 1280 laptop overflowed by 64px. Rather than hand those widths a drawer they do not need, the bar tightens — the wordmark comes down, the nav closes up, and the greeting goes while the avatar stays. */ @media (max-width: 1439px) { .aik-nav__link { padding-inline: var(--sp-3); font-size: var(--fs-sm); } .aik-header--free .aik-nav__link { font-size: var(--fs-sm); } .aik-logo--free .aik-logo__name { font-size: var(--fs-xl); } .aik-header .aik-logo--free .aik-logo__mark--marketing .aik-icon { width: 44px; height: 31px; } /* The avatar still says who is signed in; the words are the affordable loss. */ .aik-header .aik-account__text { display: none; } .aik-header--free .aik-header__actions { gap: var(--sp-4); } .aik-session__bar { width: 90px; } } /* Give the signed-in bar a track wide enough to hold it. * * 91vw is the design's gutter and it is right on a large screen. On anything * smaller it was narrower than the bar's own contents, and the difference went * out past the gutter: at 1280 the subscriber header needed 1197px of a 1165px * track and put the last 32px — Logout — hard against the edge of the screen. * At 1440 the same 32px overflowed the document and gave every page a * horizontal scrollbar. Between those it just looked cut off, which is what * was reported and why it had gone unnoticed: only one of the two symptoms * leaves a scrollbar behind. * * 1414px is measured, not chosen — it is what this bar occupies at full desktop * scale, logo through Logout, rounded up off a fractional layout. So: the design's track where it is wide enough, * and exactly what the contents need where it is not, never past a 24px gutter. * Anything added to the header changes that number; re-measure rather than * assume it still holds. * * 100% rather than 100vw: vw includes the scrollbar, and trading a clipped * Logout for a horizontally scrolling page is not a fix. */ .aik-header--subscriber .aik-header__inner, .aik-header--free .aik-header__inner { width: max(var(--aik-container-wide), min(1414px, 100% - 48px)); } /* * Below about 1460 the wider track is not enough on its own and the nav's * proportional margin has to give as well. Separate from the width above so the * margin does not jump at a size where nothing needed it to. */ @media (min-width: 1280px) and (max-width: 1479px) { .aik-header--subscriber .aik-nav { margin-left: 2.2%; } .aik-header--free .aik-nav { margin-left: 1.6%; } } /* 1279, not 1023 and no longer 1199. The desktop bar was still being shown at 1024 and still did not fit: the subscriber variant carries ten elements and overflowed to 1327px. It moved again when Home joined the nav as a labelled item — six words plus the session meter, account and logout stopped fitting at 1200. Landscape tablets get the drawer, which is the right answer for a bar this dense. Anything changing the header's contents should re-check this number rather than assume it. */ @media (max-width: 1279px) { .aik-burger { display: inline-flex; } /* Now a real box: a panel hanging below the bar. */ .aik-header__collapse { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--aik-ribbon); border-top: 1px solid rgb(255 255 255 / 0.14); box-shadow: 0 18px 32px -12px rgb(3 41 77 / 0.45); padding: var(--sp-4) var(--sp-5) var(--sp-5); /* Collapsed by height rather than display:none so it can animate, and hidden from the tab order so a closed panel cannot be focused into. */ max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--t-base), visibility var(--t-base); } .aik-header.is-open .aik-header__collapse { max-height: min(80vh, 620px); overflow-y: auto; visibility: visible; } /* Nav becomes a list. The percentage margins that position it against the logo on desktop have to go, hence the resets. */ .aik-nav, .aik-header--free .aik-nav, .aik-header--subscriber .aik-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; } .aik-nav__link { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); border-radius: var(--r-md); } .aik-header__actions, .aik-header--free .aik-header__actions, .aik-header--subscriber .aik-header__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top: 1px solid rgb(255 255 255 / 0.14); } .aik-header__actions .aik-btn { width: 100%; } /* Inside the panel there is room for the words, so the account chip keeps its label — unlike on a cramped desktop bar. */ .aik-account { justify-content: flex-start; padding: var(--sp-2) 0; } .aik-account__text { display: flex; } .aik-header__divider { display: none; } /* The meter is the paid-value signal, so it stays — just laid out for a column rather than a bar. */ .aik-session { align-items: stretch; } .aik-session__bar { width: 100%; } } @media (max-width: 767px) { .aik-header__inner { width: 100%; gap: var(--sp-3); padding-inline: var(--sp-4); } /* A phone bar is the wordmark and the burger and nothing else fits beside them; the line would only be truncated to a few letters. */ .aik-header__tagline { display: none; } /* The wordmark is the first thing to run out of room next to a 44px button. */ .aik-logo, .aik-logo--free .aik-logo__name, .aik-footer .aik-logo--free .aik-logo__name { font-size: var(--fs-lg); } .aik-header .aik-logo--free .aik-logo__mark--marketing .aik-icon, .aik-header .aik-logo__mark--marketing .aik-icon, .aik-footer .aik-logo--free .aik-logo__mark--marketing .aik-icon { width: 38px; height: 26px; } } /* The footer is one nowrap row of logo, tagline, links and copyright, which needs more room than a tablet has. Same breakpoint as the header so the two never disagree about what counts as a small screen. */ @media (max-width: 1279px) { .aik-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } .aik-footer--free .aik-footer__links, .aik-footer__links { margin: 0; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); } .aik-footer__meta, .aik-footer--free .aik-footer__meta { margin-left: 0; } /* On a phone the tagline wraps on its own. The explicit break the desktop layout relies on then makes a third, one-phrase line in the middle of it ("…exploring / aviation careers, / training…"), so it goes. */ .aik-footer__tagline { white-space: normal; } .aik-footer__tagline br { display: none; } } @media (max-width: 479px) { .aik-btn { padding-inline: var(--sp-4); } } /* 320px — the oldest phones still in use. "AviationIndustryCareers" is a single unbreakable token, so it cannot wrap out of trouble: at 16px it measures 243px, and with the mark and a 44px button that is 349px in a 320px bar. 13px brings it to 197px and the row to 303px. Small for a wordmark, but legible — and the alternative was dropping the client's name from the screen entirely on the smallest phones. */ @media (max-width: 359px) { .aik-logo, .aik-logo--free .aik-logo__name, .aik-footer .aik-logo--free .aik-logo__name { font-size: 13px; } .aik-header .aik-logo--free .aik-logo__mark--marketing .aik-icon, .aik-header .aik-logo__mark--marketing .aik-icon, .aik-footer .aik-logo--free .aik-logo__mark--marketing .aik-icon { width: 30px; height: 21px; } .aik-header__inner { padding-inline: var(--sp-3); } } /* ═══ Action card ═══════════════════════════════════════════════════════ Shared by the landing page's three-up band and the registration page, so the sign-in card and the sign-up form are visibly one flow. ═════════════════════════════════════════════════════════════════════════ */ .aik-action { display: flex; flex-direction: column; background: var(--aik-surface); border: 1px solid var(--aik-border); border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: 0 8px 24px -6px rgb(15 23 42 / 0.12), 0 2px 6px -2px rgb(15 23 42 / 0.06); min-height: 257px; } .aik-action__head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); } .aik-action__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-full); flex: none; } .aik-action__icon--signin { background: var(--aik-sky-soft); color: var(--aik-sky); } .aik-action__icon--register { background: #dcfce7; color: var(--aik-success); } .aik-action__icon--institution { background: #ede9fe; color: #6d28d9; } .aik-action__title { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); } .aik-action__desc { margin: 0; font-size: var(--fs-sm); color: var(--aik-muted); line-height: var(--lh-snug); } .aik-action__body { flex: 1; } .aik-action__cta { margin-top: var(--sp-5); } /* Benefit list with green check marks — deck p1 cards 2 and 3 */ .aik-benefits { list-style: none; margin: 0; padding: 0; } /* * The ticked lists on the landing page's sign-up cards. * * Drawn to the reference the client sent: a bright green ring with a large tick * filling it, and the line beside it in the heading colour at body size — at * normal weight, as the client asked after seeing it bold. * The tick had been 14px with the sprite's default one-unit stroke — about half * a pixel at that size — in a muted row of small text, and read as faint grey * marks. * * check-circle-bold is its own symbol because the stock check-circle draws a * small tick in the middle of the ring; the reference's tick spans most of it. * * The green is a step brighter than --aik-success, which is the button's darker * green; the reference draws the ticks lighter than the button beneath them. * The stroke is set here, for these ticks only. */ .aik-benefits li { display: flex; /* The tick sits with the first line, not the middle of a wrapped item, so two ticks in the same row stay level when only one of their lines wraps. */ align-items: flex-start; gap: var(--sp-3); margin: 0 0 var(--sp-4); font-size: var(--fs-base); /* Not bold — the client's note on the first version. */ font-weight: var(--fw-normal); line-height: var(--lh-snug); color: var(--aik-navy-900); } .aik-benefits li:last-child { margin-bottom: 0; } .aik-benefits .aik-icon { width: 1.5rem; height: 1.5rem; /* 24px tick on a 21.6px first line: nudged up a pixel to centre on it. */ margin-top: -1px; flex: none; color: #16a34a; stroke-width: 2; } /* The Institutions card's ticks take that card's own purple, the colour of .aik-action__icon--institution above, so each list matches its card. */ .aik-benefits--institution .aik-icon { color: #6d28d9; } .aik-action__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-sm); } .aik-action__meta a { font-size: var(--fs-sm); } /* Password field with a visibility toggle */ .aik-pw { position: relative; } /* 40px square, not 20px of icon. It is the only control inside the field and it is aimed at with a fingertip, so the hit area has to be bigger than the glyph. */ .aik-pw__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--aik-faint); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); transition: color var(--t-fast), background var(--t-fast); } .aik-pw__toggle:hover { color: var(--aik-text); background: var(--aik-surface-sunken); } /* Clear of the 40px button and its 6px offset, so long passwords never run under it. */ .aik-pw .aik-input { padding-right: 52px; } /* ═══ Notices ══════════════════════════════════════════════════════════ */ .aik-notice { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); margin-bottom: var(--sp-4); } .aik-notice--error { background: #fef2f2; color: var(--aik-danger); border: 1px solid #fecaca; } .aik-notice--success { background: #f0fdf4; color: var(--aik-success); border: 1px solid #bbf7d0; } /* ═══════════════════════════════════════════════════════════════════════ Key Employers sector chooser — deck pages 6 and 7. Lives here rather than in datasets.css because the dropdown hangs from the header on every page, while that sheet only loads on the two table pages. ═══════════════════════════════════════════════════════════════════════ */ /* ═══ The sector chooser ═════════════════════════════════════════════════ */ .aik-emplist { margin: 0; padding: 0; list-style: none; } .aik-emplist--page { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-3); } .aik-emplist__link { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--aik-navy-900); text-decoration: none; background: var(--aik-surface); border: 1px solid var(--aik-border); border-radius: var(--r-md); } .aik-emplist__link:hover { border-color: var(--aik-sky); } .aik-emplist__num { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--aik-muted); font-variant-numeric: tabular-nums; } .aik-emplist__icon { flex: none; color: var(--aik-sky); } .aik-emplist__name { flex: 1 1 auto; min-width: 0; } .aik-emplist__count { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--aik-muted); } /* A sector with no table is not dressed up as though it leads somewhere. */ .aik-emplist__item.is-empty .aik-emplist__link { color: var(--aik-muted); } .aik-emplist__item.is-empty .aik-emplist__icon { color: var(--aik-faint); } .aik-emplist__item.is-current .aik-emplist__link { color: #fff; background: var(--aik-sky); border-color: var(--aik-sky); } .aik-emplist__item.is-current .aik-emplist__num, .aik-emplist__item.is-current .aik-emplist__icon, .aik-emplist__item.is-current .aik-emplist__count { color: rgba(255, 255, 255, 0.85); } /* ═══ The header dropdown — deck pages 6 and 7 ═══════════════════════════ */ .aik-navmenu { position: relative; display: inline-flex; } /* * Hangs from the nav item, over the page, which is the whole of the p6 note: * "with rest of the page remaining as-is". Capped in height with the scrollbar * the artwork itself shows against the tenth row. */ .aik-navmenu__panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; width: 19rem; max-height: 22rem; overflow-y: auto; padding: var(--sp-2); background: var(--aik-surface); border-radius: var(--r-lg); box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18); } .aik-navmenu__panel[hidden] { display: none; } .aik-emplist--menu .aik-emplist__link { background: none; border: 0; border-radius: var(--r-sm); } .aik-emplist--menu .aik-emplist__link:hover { background: var(--aik-surface-alt); } .aik-emplist--menu .aik-emplist__item + .aik-emplist__item .aik-emplist__link { border-top: 1px solid var(--aik-border); border-radius: 0; } /* ═══════════════════════════════════════════════════════════════════════ Breadcrumb. Shared by the Sectors browser and the data tables, so it lives here rather than in either sheet — it was in sectors.css, which does not load on /employers/, and the trail there broke onto three lines. ═══════════════════════════════════════════════════════════════════════ */ .aik-crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; margin-bottom: var(--sp-4); font-size: var(--fs-sm); } .aik-crumbs__lead, .aik-crumbs__link { color: var(--aik-muted); text-decoration: none; } .aik-crumbs__link:hover { color: var(--aik-sky); text-decoration: underline; } .aik-crumbs__sep { color: var(--aik-faint); } .aik-crumbs__here { color: var(--aik-navy-900); font-weight: var(--fw-semibold); } /* ═══════════════════════════════════════════════════════════════════════ Search results. No deck artwork exists for this screen, so it is built from parts drawn elsewhere: the page 2 search bar and the page 5 breadcrumb. ═══════════════════════════════════════════════════════════════════════ */ .aik-searchbar--results { margin-bottom: var(--sp-5); max-width: 46rem; } .aik-results { margin: 0; padding: 0; list-style: none; } .aik-result { padding: var(--sp-4) 0; border-top: 1px solid var(--aik-border); } .aik-result__title { display: inline-block; margin-bottom: var(--sp-1); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--aik-navy-900); text-decoration: none; } .aik-result__title:hover { color: var(--aik-sky); text-decoration: underline; } /* The trail is what tells a reader which of six "Fleet Strategy" pages this is. */ .aik-result__path { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--aik-muted); } .aik-result__excerpt { margin: 0; max-width: 72ch; line-height: var(--lh-normal); color: var(--aik-text); } .aik-results__none { padding: var(--sp-10) 0; text-align: center; color: var(--aik-muted); } .aik-results__none p { margin-bottom: var(--sp-5); } /* ═══ Contact / Feedback page ══════════════════════════════════════════════ * * The client drew the top line as a sentence rather than a form — "It is a * [Question] about [Sectors]" — so it is laid out as one, with the words and the * two selects on a single baseline. It wraps to two lines on a narrow screen * instead of squeezing the dropdowns. */ .aik-contact { max-width: 46rem; margin: 0 auto; padding: var(--sp-10) var(--sp-5) var(--sp-16); } .aik-contact__title { font-size: var(--fs-3xl); color: var(--aik-navy-900); margin-bottom: var(--sp-3); } .aik-contact__lede { color: var(--aik-text); line-height: var(--lh-relaxed); margin-bottom: var(--sp-8); } .aik-contact__sentence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-6); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--aik-border); } .aik-contact__word { color: var(--aik-text); white-space: nowrap; } .aik-contact__sentence .aik-dd { min-width: 12rem; } /* ═══ Feedback dropdowns ═══════════════════════════════════════════════ * * Drawn by the page (see the script in page-feedback.php) so the menu opens * directly under the field on every device, in the shape of the desktop menu the * client pointed at: the chosen row filled blue with a tick, the others plain, * readable type. The