/* ========================================================================== FRONTGRADE · fg2 INTERIOR PAGE The company pages: About, Leadership, Locations, Doing Business With Us, Supplier Resources and its two children, Ethics, Support and Contact. The leadership listing and the biography pages beneath it are the same pattern: a view and a node bundle rather than a company page, but the same band, the same reading column and the same closing call to action. Requires tokens.css and components.css to be loaded first. -------------------------------------------------------------------------- WHAT THIS FILE IS FOR. The interior pattern is a reshape, not a rewrite. Every one of these pages already holds its content in paragraph components with markup and templates this work does not own, so the templates supply the chrome and this stylesheet supplies the frame: the bands, the measures, the surfaces and the type scale that put existing content into the redesign's language without moving a word of it. THAT IS WHY THE SELECTORS NAME .component-*. Those classes are the site's, not this design's. A rule here does not restyle a component everywhere it appears; every one of them is scoped under .fg-interior, which the three node wrappers and the leadership view put on the page's root element and nowhere else. A paragraph of the same type on a page outside the pattern is untouched, which is what lets the pattern land on the whole family without a sitewide component rewrite. IT MUST WIN AGAINST THE LEGACY SKIN, AND IT DOES SO ON SPECIFICITY ALONE. page.html.twig still puts .fg2-legacy-skin on the
these pages render inside, because the decision that drives it lives in the theme file and is returned as wiring rather than taken here. That skin is written for a light ground and every rule in it is at most 0-1-1 (.fg2-legacy-skin p, and its :where() rules score 0-1-0). Every rule below carries .fg-interior plus at least one more class or element, so it scores 0-2-0 or higher and outranks the skin no matter which order the aggregator emits the two files in. The pattern therefore renders correctly today, and renders identically if the skin is later switched off for these bundles. WHY EVERY COMPONENT RULE ALSO NAMES #block-frontgrade-content. The site's own component stylesheet anchors its paragraph layouts on that block wrapper: #block-frontgrade-content .component-link-list__links, and dozens like it, each scoring 1-1-0. Those rules place the components on a twelve column grid whose track widths are computed from the viewport rather than from the container the component is in, which is exactly what a band with its own measure has to be able to override. No selector built from classes alone can, so the rules that reshape a component match the same wrapper the site's rules match, one id and one more class. The id is read, never written, and .fg-interior still holds every rule to the pages in this pattern. Rules that touch only this design's own markup stay on classes. CONTRAST. Ratios are computed from the sRGB relative-luminance formula tokens.css states, against the exact surface the text sits on. The single-orange rule holds: #e35530 is the only accent, and it is used for marks, rules and hover states rather than for body text on a dark ground. --text-display on --surface-base 17.90:1 --text-primary on --surface-base 16.22:1 --text-muted on --surface-base 5.57:1 --accent on --surface-base 5.22:1 --text-primary on --surface-panel 14.55:1 --text-muted on --surface-panel 4.99:1 The hero draws a geometric ground under its own copy, so every backdrop it can produce is enumerated and measured separately; those tables are in section 3a, one per variant, and the tightest figure across all three is 4.54:1 against a 4.5 minimum. ========================================================================== */ /* -------------------------------------------------------------------------- 1. ROOT The article paints the page ground itself. The skin sets a light background on
, and although every band below paints over it, the element's own ground would still show through wherever a band does not reach. -------------------------------------------------------------------------- */ .fg-interior { background: var(--surface-base); color: var(--text-muted); font-family: var(--font-body); /* The gap between the breadcrumb line and the mark below it, and the trail's own line box. Both are declared on the root rather than on the band so every template that emits the pattern reads one value. --fg-crumb-line is the contract's stated line box for the trail, and it is set on the strip because the legacy sheet gives the list a 28px leading of its own; without it the trail's line box drifts with whatever the body leading happens to be. It previously carried a second, unrelated job as a height reserve for a trail printed outside the band; that shape is gone, and section 3c records why. */ --fg-crumb-gap: var(--space-5); --fg-crumb-line: 22px; } .fg-interior :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); color: var(--text-primary); } .fg-interior .fg-h1 { color: var(--text-display); } /* THE FLOOR COLOURS, STATED AT THE SAME WEIGHT THE SITE STATES THEM. The previous design set type colours for a white page under the content block id: #block-frontgrade-content h2 and #block-frontgrade-content li are both black. Left standing they put black headings on a near black band and black list items under orange bullets, which is not a small mismatch, it is invisible text. Every element that carries copy inside this pattern therefore gets its ground appropriate colour here, at a weight that outranks those rules, and the component sections further down override this floor wherever a particular element wants something else. */ #block-frontgrade-content .fg-interior :is(h1, h2, h3, h4, h5, h6) { color: var(--text-primary); } #block-frontgrade-content .fg-interior .fg-h1 { color: var(--text-display); } #block-frontgrade-content .fg-interior :is(p, li, dd, dt, td, th, figcaption, blockquote) { color: var(--text-muted); } #block-frontgrade-content .fg-interior .fg-eyebrow { color: var(--accent-text-safe); } #block-frontgrade-content .fg-interior .fg-meta, #block-frontgrade-content .fg-interior .fg-small { color: var(--text-secondary); } /* -------------------------------------------------------------------------- 2. THE BREADCRUMB LINE The trail is Drupal's breadcrumb block, so the markup below is the block's, styled rather than replaced. IT IS THE HERO'S FIRST LINE, NOT A BAR OF ITS OWN. The trail is part of the copy stack: crumbs, one tight gap, then the mark, the headline and the lede, reading as one block. Nothing stands between the site header and the trail except the band's own top padding. BOTH TEMPLATES PUT IT IN THE SAME PLACE. The node partial and the leadership view each print the trail inside the band's own container, where it is simply the first item in the stack: the gap under it is --fg-crumb-gap and the mark below it is the same 32px slot. The listing used to print it as a sibling above the band, which cost a whole section of accommodation; section 3c records what was removed. THE SLOT IS NOT A LANDMARK. Both templates carry this class on a plain container, because the rendered breadcrumb block emits its own