/* ====================================================================== Maritime Passport — Partner Portal THEME layer (MAR-777; re-based MAR-756, born MAR-665, epic MAR-646). A theme over css/design-tokens.css per ADR-021 — not a parallel token set. design-tokens.css loads first (partner/_head.html) and supplies brand pigments, the Design 0.1 surface tokens, status triples, spacing, motion and fonts; this file layers the portal's own composition on top: aliases onto the shared warm tokens, concentric radii, and deliberate type-scale overrides. MATERIAL (MAR-777): Maritime Passport Design 0.1 (Figma 518:20886) — see docs/design/partner-portal/BRIEF.md ("Visual direction — Maritime Passport Design 0.1") and docs/design/mp-design-system/. The surface is light, warm and quiet: structure comes from whitespace and hairline warm borders — not from shadow, blur, gradient or dark fills. The Liquid Glass direction this file used to implement is retired (MAR-775); the glass/mesh/blue-ramp vocabulary is deleted, every class name survives. Colour convention: hex/rgba literals live ONLY in :root token blocks. A rule references var(--token), or derives a translucency from one via color-mix(in srgb, var(--token) N%, transparent). Light theme only — the app is light-only today (BRIEF § Cross-cutting). This material is scoped to /web/partner/* pages (they alone link this file). Poppins comes from the global token layer (design-tokens.css, linked ahead of this file) — the --sans token references that family (MAR-750). ====================================================================== */ /* ── The split (MAR-719 per-screen; MAR-816 per change unit) ─────────────── This file is the THEME layer: tokens, fonts and the document base. The rest of the shared layer sits beside it, one file per change unit, all linked unconditionally by partner/_head.html in cascade order: portal.css theme tokens + document base (this file) portal.shell.css app frame, sidebar, page header portal.public-nav.css the fixed public header (MAR-1815 split) portal.public-footer.css the marketing footer (MAR-937 split) portal.primitives.css panel material, buttons, pills, notes, chips portal.data.css table, stat tiles, status tabs, queue, progress portal.forms.css field + control kit, wizard rail, drop zone portal.overlay.css floating surfaces (the modal today) portal.account.css sidebar account footer + page (MAR-1782 split) The three splits are the convention working rather than exceptions to it: each left portal.shell.css when that sheet ran out of headroom against the size ceiling below, which is what the ceiling's own failure message asks for. tests.unit.partner_css's SHARED_SHEETS is the authority on the ORDER — it is the cascade, pinned against partner/_head.html. SOME of those positions are load-bearing and the rest are free, so do not reorder on the assumption that the list is arbitrary: portal.css must stay first, and primitives must stay ahead of data. The two split-out public sheets' positions are free — public-nav's was recorded as a constraint by MAR-1815 and then measured not to be, since its ≤700px rules are qualified and win on specificity rather than on order. Each reason is written where it applies; the cascade note in partner/_head.html carries all of them. Rules a single screen owns live in portal..css, linked when the page sets screen_css. * a NEW screen adds portal..css — it does not grow these files; * a NEW primitive/control/overlay family adds portal..css and a link in partner/_head.html — it does not grow an existing sheet. This is the rule MAR-816 exists to establish: portal.css had reached 41 KB serving 16 screens because every ticket appended to one file, so unrelated partner tickets serialised behind it in the collision guard. A sheet over 16 KB fails test_no_partner_stylesheet_exceeds_size_ceiling; * a rule is promoted into the shared layer only when a SECOND screen actually needs it; * the ?v= cache-buster is never typed by hand — every link renders {{ static_version }} (an env global derived from this tree's mtimes in backend/core/templates.py). Hand-typed versions are how team/branding shipped stale styles (?v=1) while the other pages served ?v=2. ────────────────────────────────────────────────────────────────────── */ /* ── Breakpoints: one scale, four values (MAR-1814) ─────────────────────── Every width-keyed @media condition under css/partner/ names one of: 600px narrow phone (supersede rows, team cards) 700px phone (the public bar; the data tables' cell padding and wrapping) 820px tablet (two-column screen bodies; and since MAR-1816 the SHELL's sidebar collapse — the 214px rail is already costing the data tables their reading width at 768, so the sidebar becomes a nav drawer here rather than at 700. portal.account.css's sidebar-footer block tracks it, pinned by test_partner_portal_shell.py) 1024px desktop floor (public footer, widest grids) A new layout collapse REUSES the nearest value; it does not add a fifth. Enforced by test_media_query_widths_are_on_the_breakpoint_scale in tests/unit/test_partner_design_foundation.py, from BREAKPOINT_SCALE in tests/unit/partner_css.py — the same "this number is never extended" framing SHEET_SIZE_CEILING carries above. * ROUND UP when a max-width value must move. These are desktop-first stacking queries, so a wider collapse point can only stack EARLIER, never leave a multi-column grid alive at a width the author measured it does not fit. The argument is specific to max-width and does not carry to the min-width form — moving one of those UP withholds an enhancement over a band that had it, so judge those case by case. * 1024 is written BOTH ways and the two are not interchangeable: `min-width:1024px` is the desktop floor, `max-width:1024px` a ceiling, and both match AT exactly 1024px. Where a pair must partition rather than overlap, the max-width complement of `min-width:1024px` is 1023 — which is why the public bar's 1023 is a carve-out below and not a rounding error. * There is NO --bp-* token, and this is a prohibition rather than an omission: a custom property is not substitutable inside a media-query condition, so `@media (max-width: var(--bp-md))` never matches. The scale is prose plus the test's tuple, and design-tokens.css correctly declares no breakpoints at all. * The portal declares its OWN scale rather than adopting the app's 768/480 (css/responsive-*.css, not linked by partner pages) because this is already a theme layer with its own deliberate type and radius scales over the shared tokens (ADR-021), and the portal's collapses cluster at 600–820 where the app's cluster at 480–768. Unifying the two is a much larger change with its own argument. * CARVE-OUT, per (sheet, value) and never per sheet: two surfaces are ports of the corporate marketing site and must break where IT breaks — portal.public-footer.css at 768 (corporate md) and the public bar in portal.public-nav.css at 1023 (corporate lg's complement). Those two pairs, and only those, are listed with their reasons in BREAKPOINT_EXEMPTIONS beside the scale; the footer's other query is corporate lg at 1024, which needs no entry because it is already ON the scale. Per-pair because portal.shell.css carried both a legitimate 1023 and, until MAR-1814, a 640 that had to migrate: a file-level exemption would let any future off-scale value into the largest sheet. MAR-1815 then made the per-pair keying earn its keep a second way — the bar moved to its own sheet, so the exemption was RE-KEYED to travel with the query. A file-level one would have silently kept exempting a sheet that no longer holds the value. Same shape as the colour convention's SVG data-URI carve-out (MAR-887) — a tree-wide guard with a named, reasoned exception, never a widened rule. ────────────────────────────────────────────────────────────────────── */ /* Poppins is self-hosted globally by design-tokens.css (linked ahead of this file by partner/_head.html) — no font declarations here (MAR-750). */ /* ====================================================================== Colour — aliases onto the shared Design 0.1 tokens. The portal keeps its own token NAMES (the ~200 downstream references in the per-screen sheets read them) but every value now resolves to a shared warm token — nothing here is a parallel pigment (MAR-756 precedent for aliasing). ====================================================================== */ :root { /* ── ink — the portal's text tokens now alias the shared warm ink ── */ --ink: var(--mp-ink); --ink-2: var(--mp-muted); --ink-3: var(--mp-subtle); /* ── hairlines — warm rules, not blue-tinted translucency ── */ --rule: var(--mp-rule); --rule-soft: var(--mp-rule-light); /* ── hover wash — an opaque warm step, no translucent blue tint ── */ --tint-hover: var(--mp-beige); } /* ====================================================================== Radii — collapsed onto the Figma 0.1 scale (MAR-777): panels carry --mp-card-radius; the smaller steps stay as theme values (the bundle's spacing.css documents 8/12/16/20). Elevation is gone entirely — Design 0.1 panels are flat, bordered, unshadowed. ====================================================================== */ :root { --r-xl: 20px; /* outer frame */ --r-lg: var(--mp-card-radius); /* a panel — 16px */ --r-md: 12px; /* inner blocks, inputs */ --r-sm: 8px; /* small controls, code fields */ --r-pill: var(--mp-radius-pill); --page-pad: 18px; /* the rim between viewport and app frame (the page wrapper — see portal.shell.css) */ /* in-product density (MAR-777 step 4): portal screens halve the marketing proportions — cards pad ~24px, not the marketing 36px */ --pp-card-padding: 24px; /* floating surfaces (MAR-782): the portal's one permitted shadow — panels stay flat (hairlines, never elevation), but a modal and the row-menu popover genuinely float (the BRIEF's carve-out). Derived from ink so it reads warm over the beige ground. */ --pp-float-shadow: 0 18px 44px -12px color-mix(in srgb, var(--mp-ink) 28%, transparent); /* the modal scrim over the beige ground: warm-neutral ink, not navy */ --pp-scrim: color-mix(in srgb, var(--mp-ink) 38%, transparent); } /* ====================================================================== Type — Poppins via the shared family tokens (MAR-743/750). Tight tracking at display sizes; uppercase micro labels carry ~0.12em. Tabular numerals wherever digits align in a column. ====================================================================== */ :root { --sans: var(--font-sans); --mono: var(--font-mono); /* Deliberate THEME OVERRIDES of the shared type scale: the portal's display sizes run larger (shared 22/28/34). The small steps (--text-xs…lg) were value-identical duplicates and now come from design-tokens.css. */ --text-xl: 24px; /* screen title */ --text-2xl: 29px; /* stat values */ --text-3xl: 38px; /* hero */ --ls-hero: -.03em; --ls-title: -.022em; --ls-label: .12em; } /* ── base (partner pages only — they alone link this stylesheet) ─────── */ * { box-sizing: border-box; } body { margin:0; background:var(--mp-beige-3); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } @media (prefers-reduced-motion: reduce) { * { transition:none !important; } }