/* ========================================================================== FRONTGRADE · fg2 LEGACY SKIN The bridge stylesheet for every page that has no redesigned template yet. Requires tokens.css and components.css to be loaded first. -------------------------------------------------------------------------- WHAT THIS FILE IS FOR. page.html.twig now wraps every remaining page in the redesigned header and footer. Those two partials bring fg2-global with them, and fg2-global's components.css opens with a set of BARE ELEMENT rules that were written for pages built entirely out of fg2 markup: body { background: var(--surface-base); color: var(--text-muted); } ul, ol { padding: 0; list-style: none; } h1..h4, p, figure, blockquote { margin: 0; } img, svg, video { display: block; max-width: 100%; } hr { border-top: 1px solid rgba(255,255,255,0.08); } On a page made of fg2 components that is the correct floor. On a page made of the site's existing markup it is a near-black page ground under dark body copy, bulleted lists with no bullets, and a rule that is white on white. This file is what stands between those two facts. THE SCOPE IS ONE ELEMENT AND IT IS DELIBERATE. Every rule below is written under .fg2-legacy-skin, which page.html.twig puts on the
element and nowhere else. The header and the footer are SIBLINGS of that element, so no rule in this file can reach the chrome: a legacy page and a redesigned page show the same header, styled by the same stylesheet, because this one structurally cannot touch it. The containment runs the other way too, since the file is attached by page.html.twig alone and the redesigned templates never execute that line. SPECIFICITY IS LOAD-ORDER INDEPENDENT. .fg2-legacy-skin scores 0-1-0, which beats every bare element rule in components.css (0-0-1) no matter which file the aggregator emits first. Where a rule only needs to undo a components.css reset without outranking the site's own component CSS, the element part is wrapped in :where() so the selector stays at 0-1-0 and any existing rule carrying a class and an element (0-1-1) still wins. That is what keeps this file from quietly restyling components it was never meant to touch. CONTRAST. Ratios are computed from the sRGB relative-luminance formula against the exact ground the text sits on, in the same notation the rest of the fg2 layer uses. The single-orange rule still holds: #e35530 is the only orange, and where it does not clear a threshold on a light ground the combination is forbidden below rather than solved with a second hue. WHAT THIS FILE DELIBERATELY DOES NOT TOUCH is listed at the bottom. -------------------------------------------------------------------------- WHO STILL LOADS THIS, AND WHAT WOULD RETIRE IT The attach and the class are both gated on one boolean, computed per route by _frontgrade_fg2_legacy_skin_applies() in frontgrade.theme. The rule is not a list of paths: it reads the entity the route carries and answers no for the bundles that have a redesigned detail template. So the population below is a consequence of which bundles are converted, and it shrinks by itself as each one is. Counted on the local database on 2026-08-12, over every PUBLISHED node in the default language, by evaluating that same function per node (migration/verify/_skin-inventory.php), then spot checked over HTTP: bundle published skinned has an alias adept_notification 166 166 0 reachable only at /node/NID person 14 14 14 converted, awaiting wiring product 59 59 59 /product/* product_type 74 74 74 /products/* product_category 91 11 11 the 11 that fail the catalog gate news, blog 0 redesigned interior_page, landing_page 0 redesigned Plus the routes that carry no entity at all and have no page template of their own. Confirmed loading it over HTTP: /user/login, /user/password, /taxonomy/term/*, /form/*, /sitemap. Confirmed NOT loading it: the front page, the news hub, the events page, the two legal documents, the two error pages and the search page, each of which has a page__* template and so never executes the attach in page.html.twig. THE PERSON BUNDLE IS THE ONE ENTRY ABOVE THAT IS ALREADY WRONG. Those 14 pages now render node--person--full.html.twig, which is the interior pattern, on the dark ground. They still answer yes to the skin test only because the bundle is not yet in the redesigned list in frontgrade.theme, and the leadership listing answers yes because it is a view and carries no entity for that test to read. Neither is a stylesheet decision. Until both are wired, interior.css outranks every rule here on specificity, which is what keeps those pages correct in the meantime; the one exception, the primary button's label colour, is stated explicitly in section 17 of interior.css and is measured there. THE RETIREMENT CONDITION. This file can be deleted, with its library and the class in page.html.twig, when no visitor-facing route answers yes. That is not the same as converting the remaining product families: the generic Drupal routes in the second list are Drupal's own markup on a light ground with no redesign behind them, and they are exactly what this file exists for. Retirement therefore means either giving those routes a redesigned page template too, or narrowing this file to them and renaming it for what it would then be. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE LIGHT GROUND The design system is dark and has no light half. These are the four values the legacy body needs to sit on a light ground while still reading as the same system: the type, the accent, the spacing and the sharp corners all still come from tokens.css. -------------------------------------------------------------------------- */ .fg2-legacy-skin { /* Surfaces. */ --fgl-surface: #ffffff; /* page ground */ --fgl-surface-raised: #f4f6f8; /* zebra rows, inputs, inert wells */ /* Text. --fgl-ink #16202b on #ffffff 16.46:1 · on #f4f6f8 15.19:1 AAA --fgl-muted #4a5666 on #ffffff 7.46:1 · on #f4f6f8 6.89:1 AAA Both values now live in tokens.css as --text-ink-on-light and --text-muted-on-light, because a dark page can host a legacy component that paints its own light panel and needs the same two values there. The names below are kept because the rest of this file reads them, and they point at the tokens rather than restating the hexes so the pair cannot drift apart. The measured ratios are unchanged. */ --fgl-ink: var(--text-ink-on-light); --fgl-muted: var(--text-muted-on-light); /* Boundaries. --fgl-hairline is decorative and carries no minimum. --fgl-border-ui identifies a control and must clear 3:1, which #6b7a94 does at 4.34:1 on white. It is --stroke-quiet from tokens.css, reused rather than invented. */ --fgl-hairline: #d9dee5; /* 1.35:1, decorative separator only */ --fgl-border-ui: #6b7a94; /* 4.34:1 on white, control boundaries */ /* THE ORANGE ON A LIGHT GROUND. #e35530 measures 3.74:1 on #ffffff and 3.46:1 on #f4f6f8. It therefore clears the 3:1 threshold for large text and for non-text UI, and it does NOT clear the 4.5:1 threshold for normal text. Below it is used for underlines, rules, marks and fills, and never as a body-size text colour. Link text is ink with an orange underline for exactly this reason. */ } /* -------------------------------------------------------------------------- 2. THE CONTENT AREA -------------------------------------------------------------------------- */ .fg2-legacy-skin { position: relative; background: var(--fgl-surface); color: var(--fgl-ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); /* A short page (a 404, a login form) would otherwise show the dark page ground between the messages band and the footer. The floor keeps the light area reading as the body of the page. */ min-height: 42vh; } /* -------------------------------------------------------------------------- 3. UNDO THE fg2 ELEMENT RESETS THE EXISTING MARKUP DEPENDS ON Each rule here restores what the browser did before fg2-global reached these pages. Every one is at 0-1-0 so the site's own component CSS, which is all class-scoped, continues to win wherever it has an opinion. -------------------------------------------------------------------------- */ /* LISTS. components.css strips the marker and the indent so fg2 menus can be marked up as lists. Editorial copy is full of real bulleted and numbered lists, and without this they render as unindented run-on lines. */ .fg2-legacy-skin :where(ul, ol) { padding-inline-start: 40px; list-style: revert; } /* A list that the site's own CSS has already taken over keeps its own treatment: those selectors carry a class and therefore outrank the rule above. The two below are the generic Drupal wrappers, which are lists only as a markup convenience and must stay unmarked. */ .fg2-legacy-skin :where(.tabs, .menu, .links, .pager__items, .breadcrumb, .field__items) { padding-inline-start: 0; list-style: none; } /* FIGURES. The only element in the components.css margin reset that the existing stylesheets do not already re-declare through a `body figure` compound, so it is the only one that actually lost its spacing. */ .fg2-legacy-skin :where(figure) { margin: 1em 40px; } /* REPLACED ELEMENTS. components.css makes every image a block so fg2 cards can stack cleanly. In body copy that turns an inline logo or icon into its own line. `revert` returns them to the browser default, and any existing rule that deliberately blocks an image scores 0-1-1 and still wins. */ .fg2-legacy-skin :where(img, svg, video) { display: revert; } .fg2-legacy-skin :where(img, svg, video) { max-width: 100%; } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY Mapped to the new stack and the new scale. Fonts come from tokens.css and are already on the page: this file introduces no font loading of its own. TWO THINGS ARE DELIBERATELY NOT MAPPED. Headings are not uppercased. The design sets display type in caps, but these headings are existing content, including part numbers and product names where capitalisation carries meaning, and text-transform would rewrite all of it sight unseen. Heading margins are not set. The existing stylesheet declares them as `body h1` compounds, which score 0-0-2 and therefore survive the components.css margin reset intact. Leaving them alone keeps the vertical rhythm of every existing page exactly where it is. -------------------------------------------------------------------------- */ .fg2-legacy-skin :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); font-weight: var(--fw-display); color: var(--fgl-ink); letter-spacing: var(--ls-h2); text-wrap: balance; } .fg2-legacy-skin h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-h1); } .fg2-legacy-skin h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); } .fg2-legacy-skin h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } .fg2-legacy-skin h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); letter-spacing: 0; font-family: var(--font-body); font-weight: var(--fw-semibold); } .fg2-legacy-skin h5, .fg2-legacy-skin h6 { font-size: var(--fs-body); line-height: var(--lh-tight); letter-spacing: 0; font-family: var(--font-body); font-weight: var(--fw-semibold); } /* Body copy. The existing rule sets 20px/1.75; the design's reading size is 16 to 17px on the same leading, which is what the redesigned pages use. */ .fg2-legacy-skin p { font-family: var(--font-body); font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--fgl-ink); } /* The lead paragraph class the existing templates already emit. */ .fg2-legacy-skin p.intro-text { font-size: var(--fs-lede); line-height: var(--lh-lede); font-weight: var(--fw-medium); color: var(--fgl-muted); } .fg2-legacy-skin :where(li, dd, dt, td, th) { font-family: var(--font-body); line-height: var(--lh-body); } .fg2-legacy-skin small, .fg2-legacy-skin .field--name-field-caption, .fg2-legacy-skin figcaption { font-size: var(--fs-small); color: var(--fgl-muted); } /* Quotes. The design has no serif, so the existing serif setting is replaced by the display face at section size, marked with the accent rule the rest of the system uses to open a block. */ .fg2-legacy-skin blockquote { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fgl-ink); border-left: 2px solid var(--accent); padding-inline-start: var(--space-6); } /* Rules. components.css sets a white hairline, which is invisible here. */ .fg2-legacy-skin hr { border: 0; border-top: var(--border-hairline-w) solid var(--fgl-hairline); margin-block: var(--space-9); } .fg2-legacy-skin :where(code, pre, kbd, samp) { font-family: var(--font-mono); font-size: var(--fs-small); background: var(--fgl-surface-raised); } /* Selection follows the design. --text-on-accent on --accent is 5.22:1. */ .fg2-legacy-skin ::selection { background: var(--accent); color: var(--text-on-accent); } /* -------------------------------------------------------------------------- 5. LINKS INK, NOT ORANGE, AND THE REASON IS MEASURED. #e35530 on white is 3.74:1, short of the 4.5:1 a link at body size has to clear. Recolouring the orange is forbidden by the single-orange rule, so the brand is carried by the underline, which is non-text UI and only has to clear 3:1. Hover keeps the ink colour and thickens the underline rather than swapping to the orange, because a hover state is text too and would fail the same threshold. -------------------------------------------------------------------------- */ .fg2-legacy-skin a { color: var(--fgl-ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: var(--t-color), text-decoration-thickness var(--dur-fast) var(--ease-standard); } .fg2-legacy-skin a:hover { color: var(--fgl-ink); text-decoration-thickness: 2px; } /* An image or a card wrapped in a link must not carry a text underline. */ .fg2-legacy-skin a:has(> img), .fg2-legacy-skin a:has(> picture), .fg2-legacy-skin a:has(> svg) { text-decoration: none; } /* -------------------------------------------------------------------------- 6. FORM CONTROLS Generic controls only: the search form, the login form, exposed filters and anything else Drupal renders without a component stylesheet of its own. The webform styling is anchored on #block-frontgrade-content and on the .webform-submission-form class, which score above everything here, so a built webform keeps its existing appearance untouched. That is intentional: the webforms are the most heavily configured layouts on the site and are the wrong place for a blanket restyle. -------------------------------------------------------------------------- */ .fg2-legacy-skin :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], textarea, select) { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--fgl-ink); background: var(--fgl-surface); border: 1px solid var(--fgl-border-ui); /* 4.34:1, clears the 3:1 minimum */ border-radius: var(--radius-1); /* the system has no rounded corners */ padding: var(--space-3) var(--space-4); transition: var(--t-color); } /* The native select keeps its own arrow: appearance is deliberately not reset, because the site's custom select wrapper supplies an arrow only where it is applied and a bare select would otherwise lose its affordance. */ .fg2-legacy-skin :where(input, textarea, select):hover { border-color: var(--fgl-ink); } .fg2-legacy-skin :where(input, textarea, select)::placeholder { color: var(--fgl-muted); opacity: 1; } .fg2-legacy-skin :where(input, textarea, select):disabled { background: var(--fgl-surface-raised); color: var(--fgl-muted); cursor: not-allowed; } .fg2-legacy-skin :where(label, .form-item__label) { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--fgl-ink); } .fg2-legacy-skin :where(.form-item__description, .description) { font-size: var(--fs-small); color: var(--fgl-muted); } .fg2-legacy-skin .form-required::after { color: var(--accent); } /* Accent the native controls so a checkbox and a radio read as brand. */ .fg2-legacy-skin :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); } /* SUBMIT ACTIONS ONLY. Matching a bare