@charset "utf-8"; /* ============================================================================ VCE BRAND THEME FOR VT ONE — v3.8 Re-skins any vt-one / Ensemble AEM site to Virginia Cooperative Extension branding, per VCE Brand Guidelines V1.1. INSTALL This is the whole file. Replace modifyGlobalTemplate.css with it, e.g. /local_assets/www.ext.vt.edu/local/modifyGlobalTemplate.css Publish the file and flush the dispatcher — editing it is not enough. ── WHAT CHANGED FROM v3.7 ─────────────────────────────────────────────── NEW §11.5 pagination. vt-one shipped it as near-black squares. Now Light Grey pills with a 5.03:1 border, Maroon for the current page, 44px targets. Three things were wrong with it and only one was the colour: • IT STACKED. col-lg-3/6/3 only sits in a row above 992px, which inside #vt_main beside the right column almost never happens. Replaced with a flex row that wraps on its own terms. • CURRENT PAGE AND FOCUS LOOKED THE SAME. Both were a ring, so tabbing onto the current page told a keyboard user nothing. Current is now a filled pill; focus stays the §16 ring. • THE BOXES ARE BUTTONS, NOT LINKS. onclick="vtListPageAjax(…)" and no href, so a page number is not a URL — no middle-click, no open in new tab, no history entry. Ensemble architecture; CSS cannot reach it. Listed so it does not get filed as a styling bug. ⚠ THE BORDER ON THE PILLS IS 1.4.11, NOT DECORATION Light Grey is 1.20:1 on white. Fine for a §11.1e tag, where the shape is decorative and the text carries the meaning — not fine for a control, whose boundary has to be identifiable at 3:1. Don't tidy the border away. ⚠ DON'T ADD !important TO display IN §11.5b Numbers 5–9 carry Bootstrap's d-none/d-sm-flex, both !important, which is how the middle of the range drops on a phone. Our display sits under them on purpose. Add !important and all nine come back at 320px. ⚠ aria-current="true" SHOULD BE aria-current="page" — in the component's HTML, not here. §11.5d matches the class and the attribute, so fixing it upstream won't break the styling. NOT DONE the "Page 2 of 23 | 448 Results" line is a separate element that wasn't in the markup, so it has no selector yet. ── WHAT CHANGED FROM v3.6 ─────────────────────────────────────────────── ── people pages: the offices a person covers ── NEW §11.1f :offices/ pills, Dark Green, prefixed "Serves ", shown on bio cards only. They are scoped to li.bio-page, a class the List component stamps on every bio item by itself — so no CSS-class field to fill in on 107 sites, but it IS vt-one's class, not ours. Grep bio-page after an Ensemble upgrade. NEW §11.4 the bio page tag cloud, ul.tagcloud / a.vt-tag-link. A different component with different markup: no inner span for the label, no role="listitem", and the ?tag= query swapped for a /tags.html/ path. Three things that change the CSS and not just the selector — the §11.4 header walks through each. Shares §11.1's --pill-bg / --pill-ink, so a category colour still changes in one place for both components. CHANGED §11.1b order ladder 1/2/3 → 10/20/30/40, spaced like the §2 z-index ladder so the next category slots in without a renumber. :offices/ takes 20, between location and specialism. RENAMED §11.1f/g/h → §11.1g/h/i, to make room for the new §11.1f. Cross-references updated; nothing else moved. ⚠ TWO THINGS THE CSS CANNOT DO, BOTH IN THE JS People are normally tagged :home-office/x AND :offices/x, which renders "Housed in Nottoway" beside "Serves Nottoway"; and on a county's own page every staff card would read "Serves ". Comparing a tag's slug against a sibling's, or against the URL, is not expressible in a selector. vce-tag-pills-disable.html v3.1 does both. Ship the two together — v3.0 of the JS leaves the duplicates. ⚠ THE TAG CLOUD LINKS STAY LIVE, THE CARD PILLS STAY DEAD Looks like an inconsistency, isn't. The card pills are killed because the card title's stretched ::before makes the whole card one click target and a live link inside it fights for the same pixels. A bio page has no stretched link, so there is no conflict and no reason to take away a working route to the tag search. Both notes in §11.4. ⚠ "Serves" IS OUR READING OF THE TAG The taxonomy only says a person is associated with that office. If an office means something else by it, change the string in §11.1f and §11.4d — not the tags. ── WHAT CHANGED FROM v3.5 ─────────────────────────────────────────────── CHANGED §8.1 the solid block now sizes to its own content — the heading, or the button if that's wider — instead of a set width. The curve is a fixed --hero-curve-w (12rem) sitting at left:100%, outside the panel, so heading length and curve thickness are fully independent. --hero-solid-w is replaced by --hero-solid-max, a wrap ceiling rather than a width. ── WHAT CHANGED FROM v3.4 ─────────────────────────────────────────────── FIXED §8.1 the curve grew to span the hero whenever the panel was widened. --hero-curve-w was a percentage OF THE PANEL, so the two were coupled. Replaced by --hero-solid-w and --hero-curve-w, both in vw, so each is independent of the other. Defaults 32vw solid + 10vw curve; --hero-split is gone. ── WHAT CHANGED FROM v3.3 ─────────────────────────────────────────────── CHANGED §8.1 the hero panel's solid fill and its curve are now two pseudo-elements, sized independently, instead of one mask with the split baked into its viewBox. Both use top/bottom rather than inset, so they follow the panel's height rather than imposing one. ── WHAT CHANGED FROM v3.2 ─────────────────────────────────────────────── NEW §8.1 hero swoosh panel — the popover's Light Grey box becomes a brand panel with the swoosh as its right edge, over a full-bleed photo. Same guide curve as the swoosh cards, filled on the left. ⚠ Panel defaults to Dark Grey (white 5.03:1), not the mockup's #508590, which is off-palette and 4.12:1. ⚠ The button's white border is required, not trim — maroon scores 1.04–1.81 against every palette panel colour, so without it the control has no visible boundary (1.4.11). ── WHAT CHANGED FROM v3.1 ─────────────────────────────────────────────── FIXED §11.3 card titles went Maroon on hover — 1.04:1 on the Dark Green fill, i.e. invisible. §4 and §11 both style .vt-list-item-title-link:hover, at the same (0,2,2) as the unstated base rule here, so it hung on source order. Every state is now named at (0,3,2), and the hover affordance is an underline plus the card shadow rather than a colour change. ── WHAT CHANGED FROM v3.0 ─────────────────────────────────────────────── NEW §11.3 cardify list — swoosh cards driven by the List component. ext-office-cardify-list-component on the List's CSS-class field. Pure CSS, same approach as §14. Art panel uses the item's own image when it has one, and falls back to a DAM pattern when it doesn't. ⚠ The fallback may be redundant: your sample card's image is already a DAM pattern, so authors can pick one in the image field and skip the lookup entirely. The rotation is a floor for cards nobody set an image on, and it is positional, not semantic — see §11.3 for the semantic alternative using the taxonomy classes the li already carries. ⚠ Undoes §11's card rules the same way §14 does, so it must stay after §11. ── WHAT CHANGED FROM v2.12 ────────────────────────────────────────────── §11.1 REWRITTEN around the new :home-office/ tag namespace. THE GUESS IS GONE. The home office used to be inferred as "the last :offices/ tag" — unverified, and load-bearing enough to put a wrong county on a person's card. The tag now states it, so the sibling-position selectors, the vce-tags-show-services opt-out and the standing "verify this before shipping" warning are all deleted. Only two categories render: Housed in, and specializations. Everything else is hidden; vce-tags-show-all brings it back. ⚠ MIGRATION — this reads ONLY :home-office/. Anyone still carrying just the old :offices/ tags now shows no location tag. Query for people with a specialization and no home office before calling the migration done. COMPANION vce-tag-pills-disable.html updated for the new tag namespace AND the new URL shape (offices.ext.vt.edu/, no /local/). Both files have to be deployed together. ── WHAT CHANGED FROM v2.11 ────────────────────────────────────────────── CHANGED swoosh seam overlap is calc(100% - 1px) rather than 99.9%, so it's a constant 1px at every panel width. Applied to the mirrored vce-about--left variant too, which had no fix. ── WHAT CHANGED FROM v2.10 ────────────────────────────────────────────── ── your changes, placed ── §5.1 home content well, right column and its briefs forced white; content-area top padding removed. Moved off the white token onto --vce-page-bg, same value — so a site that retints its page ground carries these along with it. §8 hero popover message padding/margin and button sizing. ⚠ 5em vertical margin — check the hero under ~400px wide. §15 swoosh left: 100% → 99.9% to close the seam. Superseded in v2.12 by calc(100% - 1px), both variants. ── WHAT CHANGED FROM v2.9 ─────────────────────────────────────────────── NEW §2 stacking ladder — --z-decor 1, --z-content 100, and reserved --z-sticky/-dropdown/-overlay/-modal at 200–500. Every z-index in the file now reads from it; there were only two. CHANGED swoosh 100 → --z-decor (1); #vt_right_col 1000 → --z-content (100). Same relative order, decoration where it belongs, and room either side of both. See §15.3 for the two things to test. ── WHAT CHANGED FROM v2.8 ─────────────────────────────────────────────── §6.7 NEW — your university-footer hide and footer-content margin. ⚠⚠ Removes the Accessibility, Privacy, Equal Opportunity and Consumer Information links from every page. Needs sign-off. Also listed in a new "University chrome this file changes" block at the top, beside the pre-header, so it can't be missed. §15.3 NEW — your #vt_right_col z-index, moved beside the swoosh's. Superseded in v2.10 by the §2 stacking ladder. ── WHAT CHANGED FROM v2.7 ─────────────────────────────────────────────── ── your template fixes, merged and placed ── §5.1 #vt_main / #vt_one_content_area forced white. §5 is now "header row and page ground"; the header row is §5.2. §10 .vce-office-coords. §10 is now "Lozenges, eyebrows & utilities". ⚠ display:none also removes it from the accessibility tree — right for machine-readable data, wrong if a screen-reader user needs it. See the note there. §11 horizontal-scroll cover and item gutters, .ext-staff-list cap. ⚠ You had the .vt-list-columns::after rule twice, identical, with the same comment. Deduplicated. §11.2 Timely calendar container. This does NOT contradict the "deliberately does not touch" note — that's about the cross-origin iframe; the container is ours. ⚠ 40vh is ~290px on a phone, see the note. §13.1 .vce-rule-out::after margin-bottom. ⚠ With align-items:center a bottom margin moves the line UP by half its value. §15 swoosh z-index. Superseded in v2.10 by the §2 stacking ladder. Everything landed in a section rather than after the END marker, so the next person looking for "why is the content area white" finds it beside the other light-chrome rules instead of in a trailing pile. ── WHAT CHANGED FROM v2.6 ─────────────────────────────────────────────── NEW specialization tags get a Light Grey pill with Dark Blue text, 12.68:1. (Renumbered to §11.1e in v3.0.) ADDED --pill-ink in §11.1c. Every pill was white-on-colour until now, so the ink was hard-coded in two places; specializations are the first dark-on-light one. A new category is now two lines. CHANGED tag order is housed-in 1, services 2, specialization 3, topics 4 — was 1 / 2 / 3 with topics and specializations sharing the last slot. RENUMBERED §11.1f/g/h are now §11.1g/h/i to make room. All references updated; nothing else moved. ── WHAT CHANGED FROM v2.5 ─────────────────────────────────────────────── FIXED Office tags lost their colour and prefix once the companion JS ran. Every office selector matched a[href*=":offices/"], and the JS removes href to neutralise the links — so after it ran, nothing matched and the home-office pill fell back to the Maroon default with no "Housed in ". It LOOKED like only a colour bug because the JS had already deleted the Services tags from the DOM before stripping the hrefs. Every office selector now matches data-vce-tag-href as well, which is where the JS parks the URL. See §11.1 preamble. ── WHAT CHANGED FROM v2.4 ─────────────────────────────────────────────── NEW only the home office tag is shown; serviced offices hidden. The inference this relied on was retired in v3.0 — see the v2.12 entry above. ── WHAT CHANGED FROM v2.3 ─────────────────────────────────────────────── FIXED §14 nav items now fill their row's height. When one label wraps to two lines the row grows, but the anchors inside the shorter cells were not growing with it — so the hover fill and the teal rail stopped short. Every box between the li and the anchor now stretches explicitly. See §14.3. ── your edits, reviewed ── KEPT §6.6 pre-header, .vt-actions-header, .vt-wordMark-text. Right section. Full warning comment restored — it explains why this reverses a documented decision, which matters for whoever reads this next. KEPT §7 subnav droplist margin. Right section. MOVED .vt-page-info.row padding from §7 to §6.1. It was the only .vt-page-info rule outside §6; anyone retuning that band would have found the colour and missed the padding. MERGED §12.1 had .vt-accordion declared twice, the second cancelling the first's border-bottom. Now one rule. Net effect unchanged — no separator between accordion items, which is your call. ⚠ FLAG §6.1 `footer.footer-content` matches ZERO elements — it needs