/* ========================================================================== FRONTGRADE ยท fg2 MISSION AREA The mission area template's own layer, and nothing else. The page is a structural sibling of the capability page, so almost everything it needs is already in the shared kit; what is here is the small remainder the kit does not carry, plus the one component the mission page introduces (the copy placeholder). NO KIT VALUE IS REDEFINED. Every colour is a token, and every new foreground/background pair carries its computed WCAG 2.1 contrast ratio, derived the same way tokens.css derives its own. WHY THIS DUPLICATES A LITTLE OF capability.css. The breadcrumb and the hero media fill are written again here under mi- names rather than shared, because capability.css is not loaded on a mission page and loading a capability stylesheet to get two rules would attach that page's aria-current markers as well. Two small blocks are cheaper than that coupling, and either page family can move without touching the other. Requires tokens.css and components.css to be loaded first. ========================================================================== */ /* --- Breadcrumb ---------------------------------------------------------- Sits in the hero copy column, over the media-band scrim, and is the capability page's breadcrumb with one difference: the middle crumb is a span, not a link, because /mission-areas does not exist as a page. It therefore takes the muted colour without the link affordances. Measured against the worst case the scrim can produce (0.90 ink over the lightest point the placeholder well can reach, composited backdrop #0d0f17), which is the same context capability.css measures in: --text-muted 5.45:1 AA links, separators and the inert crumb --text-primary 15.87:1 AAA current page An 11px label plus 7px padding-block gives a 29px hit area. */ .mi-crumbs { margin-bottom: var(--space-6); } .mi-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); font-size: var(--fs-2xs); line-height: 1.4; letter-spacing: var(--ls-chip); } .mi-crumbs li { display: inline-flex; align-items: center; gap: var(--space-3); } .mi-crumbs li + li::before { content: "/"; color: var(--text-muted); } .mi-crumbs a, .mi-crumbs span { display: inline-block; padding-block: 7px; text-decoration: none; color: var(--text-muted); } .mi-crumbs a { transition: var(--t-color); } .mi-crumbs a:hover { color: var(--text-primary); } .mi-crumbs [aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-semibold); } /* --- Real media in the hero band well ------------------------------------ Takes the place of the placeholder component in the hero well. Absolute fill, so the image sits under the band's scrim (z-index 1) and copy column (z-index 2) exactly where the placeholder sat; z-index stays auto here, so no stacking context forms. The image is a backdrop beneath copy that already carries the whole message, so it is decorative and takes an empty alt. ALL SIX MISSIONS SHARE ONE IMAGE TODAY. No per-mission hero art exists; this is the interim the news hub already takes, and it is a content swap in the template's table, not a change here. */ .mi-media { position: absolute; inset: 0; overflow: hidden; } .mi-media__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- Two blocks inside one band ------------------------------------------ The capability page's grouping rule: related blocks share one band and are separated by space rather than by a second panel, so the page reads as hairline-ruled sections instead of alternating surfaces. Same clamp as .cap-stack, so the two page families keep the same vertical rhythm. */ .mi-stack { display: grid; gap: clamp(48px, 2.4rem + 3vw, 72px); } /* --- Copy placeholder ---------------------------------------------------- THE ONE COMPONENT THIS PAGE ADDS, and the reason it exists is editorial rather than visual. Six mission pages are being built from a copy set that answers roughly a third of their slots. A slot with no source has to look unmistakably like a slot: not a heading in a lighter weight, not a plausible sentence, and not an empty space that reads as a design choice. So the placeholder is muted, set at the same size as the text it stands in for, and boxed in a dashed hairline. Nothing about it can be mistaken for approved copy, and every one of them disappears the moment the table in page--fg2-mission.html.twig is given a value. --text-muted on --surface-base 5.57:1 AA bands --text-muted on --surface-raised 5.31:1 AA inside stat blocks The dashed rule is decoration beside text that already carries the whole message, so it is not held to a contrast minimum. */ .mi-tbd { color: var(--text-muted); font-weight: var(--fw-regular); font-style: normal; letter-spacing: normal; text-transform: none; border-bottom: 1px dashed var(--border-hairline-strong); padding-bottom: 2px; } .mi-tbd--block { display: block; border: 1px dashed var(--border-hairline-strong); padding: var(--space-4); } /* Inside a stat block the two placeholders stack, so the dashed rule is dropped from the label and kept on the note only; two dashed underlines one above the other read as a table, not as two empty slots. */ .fg-stat-block .mi-tbd { border-bottom: 0; padding-bottom: 0; } .fg-stat-block .mi-tbd:last-child { border-bottom: 1px dashed var(--border-hairline-strong); padding-bottom: 2px; } /* --- Linked mission tile ------------------------------------------------- The Related Mission Areas band is the page's lateral movement, so its tiles are links, unlike the capability page's Application Areas tiles which are inert labels of the same six names. The link is stretched over the whole tile and the visible focus ring is drawn on the tile rather than on the words, which is exactly how .fg-card--link behaves in the kit; the ring tokens and offsets are the kit's, not new values. --text-primary on --surface-raised 15.47:1 AAA resting title --text-primary on --surface-panel 14.55:1 AAA hover title Hover pairs the surface step with the accent border already used for tile hover elsewhere, so colour is never the only cue. */ .mi-tile { position: relative; } .mi-tile__link { color: inherit; text-decoration: none; } .mi-tile__link::after { content: ""; position: absolute; inset: 0; } .mi-tile:hover { background: var(--surface-panel); border-color: var(--border-hairline-strong); } .mi-tile:hover .fg-tile__icon { color: var(--accent); } .mi-tile:has(a:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring-inner); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer), 0 0 0 5px var(--focus-ring-halo); } .mi-tile__link:focus-visible { outline: none; box-shadow: none; } /* --- Reduced motion ------------------------------------------------------ The kit already stills the reveal animations and the global transitions under this query. The one transition introduced above is stilled here too, so this stylesheet adds no motion that the preference does not reach. The colour changes themselves remain: they are state, not motion. */ @media (prefers-reduced-motion: reduce) { .mi-crumbs a { transition: none; } } /* -------------------------------------------------------------------------- THE ALTERNATING GROUND, AND THE SURFACE STEP IT FORCES WHAT THIS ANSWERS. Every band on a mission page drew the same ground, --surface-base, separated only by a hairline, so a 5,400px page read as one undifferentiated column and a reader scrolling it had nothing to place themselves against. Measured before: 1 background value, rgb(9,12,20), across all 5 bands on all 6 mission pages. The first and third content bands now take --surface-raised, which is the alternate the two document pages already use and is already defined as "alt band" in the token file. Nothing new is introduced and no page is restructured: the change is one class on two bands in the shared skeleton, so all six pages move together. The band sequence becomes base, raised, base, raised, base from the pagehead to the closing band, so every adjacent pair on the page differs. WHY THE COMPONENTS HAVE TO STEP WITH IT. .fg-card, .fg-tile and .fg-stat-block are all drawn on --surface-raised, because that is the surface a card takes when it sits on the base ground. On a raised band they would be the same colour as the band and the grids would flatten into it. They therefore take the next surface in the same ladder, --surface-panel, which is what that token is for and what .fg-card--panel already names. The ladder is preserved rather than broken: the component is still exactly one step above whatever ground it sits on. CONTRAST IS UNCHANGED IN KIND. Both grounds are near-black and the type on them is the same three text roles the base ground carries; the smallest ratio in the pattern, --text-muted, is 5.57:1 on --surface-raised and 4.99:1 on --surface-panel, both past AA for the sizes in use. -------------------------------------------------------------------------- */ .fg-page > .fg-band--raised :is(.fg-card, .fg-tile, .fg-stat-block) { background: var(--surface-panel); } /* The tile's own hover took --surface-panel against the base ground. On the raised ground that is now its resting colour, so the hover steps one further and the state stays visible. */ .fg-page > .fg-band--raised .mi-tile:hover { background: var(--surface-elevated); }