/* PMA Science Psychology · 07-live-qa.css 2.4.0. Corrections raised by the live QA pass over all 41 published pages of /psychology, measured at 1920×800 and 390×844 behind the QA account. Additive; loads last. Every selector is anchored on `body.pma-psy`, a class added only by this child theme on the /psychology install, so no rule here can reach root pmascience.com, /pma or /courses. */ /* ------------------------------------------------------------------ 1 · Enfold's default sidebar widgets ------------------------------------------------------------------ FOUND LIVE: on every page without child pages — the front page, /tools/, /es/, /pt-br/, /contact-us/, /privacy-policy/, /terms-and-conditions/ — the sidebar carried Enfold's placeholder widget area: a flat "Pages" dump that even listed `/my-account/`, a "Categories" box reading "No categories", and an "Archive" box containing an empty list. Enfold prints these whenever the matching widget area is empty. Where a page HAS child pages, Enfold prints a contextual child-page nav instead. That one is genuinely useful and is deliberately kept. So: the three placeholder widgets are removed, and when nothing meaningful is left in the column, the column itself is dropped and the content runs to full width instead of leaving an empty gutter. MEASURED WHILE WRITING THIS: in Enfold the `#top` id sits on the `` element itself, so Enfold's own `#top .sidebar` rules carry id-level specificity that no class-only selector can beat — the first draft of this block was overruled on the live page and left the placeholder widgets in place. `!important` is therefore used deliberately here, and the presence of Enfold's Archive widget is taken as the signature of the placeholder area, which is a plain `:has()` test rather than a stack of `:not(:has())` guards. */ body.pma-psy .sidebar .widget_pages, body.pma-psy .sidebar .widget_categories, body.pma-psy .sidebar .widget_archive, body.pma-psy .sidebar .widget_recent_entries, body.pma-psy .sidebar .widget_meta { display: none !important; } body.pma-psy .sidebar:has(.widget_archive) { display: none !important; } /* A single `:has()` with a descendant inside it. `:has()` may not be nested inside another `:has()` — `.container:has(.sidebar:has(.widget_archive))` parses as invalid and Chrome discards the whole rule, which is exactly what happened to the first draft: the column was hidden but the content never widened, leaving the gutter it was supposed to close. */ body.pma-psy .container:has(.sidebar .widget_archive) .content { width: 100% !important; margin: 0 !important; padding-right: 0 !important; border-right: 0 !important; } /* ------------------------------------------------------------------ 2 · Header shopping cart ------------------------------------------------------------------ FOUND LIVE: `Shopping Cart 0 $ 0.00` in the header of all 41 pages, linking to the local cart page. Root pmascience.com is the only commerce layer and every product page here sends Add to cart to the root store, so the local control could only ever build an order nothing can complete. `inc/enfold-chrome.php` unhooks it at source. This rule is the belt to that set of braces, and uses `display: none` deliberately: the control must leave the tab order and the accessibility tree, not merely become invisible. */ body.pma-psy .cart_dropdown, body.pma-psy #header .cart_dropdown, body.pma-psy .av-cart-container { display: none !important; } /* ------------------------------------------------------------------ 3 · The header logo ------------------------------------------------------------------ `inc/enfold-chrome.php` replaces Enfold's demo wordmark with the official mark. Sized to match the live /pma campus header exactly, so the two doors of the university read as one institution. */ body.pma-psy .pma-crest { display: flex; align-items: center; gap: 0.75rem; } body.pma-psy .pma-crest__mark { height: 52px; width: auto; transition: height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (max-width: 767px) { body.pma-psy .pma-crest__mark { height: 42px; } } /* ------------------------------------------------------------------ 4 · Footer columns ------------------------------------------------------------------ The four institutional footer columns are lists of links; Enfold styles widget lists for its own demo content. Matches the /pma footer treatment. */ body.pma-psy #footer .pma-footer__list { margin: 0 0 1.75rem; padding: 0; list-style: none; } body.pma-psy #footer .pma-footer__list li { margin: 0; padding: 0.28rem 0; border: 0; line-height: 1.45; } body.pma-psy #footer .pma-footer__list a { display: inline-block; border: 0; text-decoration: none; } body.pma-psy #footer .pma-footer__list a:hover { text-decoration: underline; } body.pma-psy #footer .widgettitle { margin: 0 0 0.75rem; padding: 0; } body.pma-psy #footer .widget + .widget, body.pma-psy #footer .pma-footer__list + .widgettitle { margin-top: 1.5rem; } /* ------------------------------------------------------------------ 5 · Ghost buttons on dark surfaces ------------------------------------------------------------------ FOUND LIVE on the front page and both language hubs: the second hero call to action, "Free tools and downloads", was invisible. `.pmax-btn--ghost` sets `color: var(--n9) !important` — navy — and the hero panel it sits in is `background: var(--n9)`. Navy text on navy ground: a contrast ratio of 1.00:1, measured. The primary button beside it was unaffected because it forces white. The ghost variant is correct on the ivory and stone grounds it was designed for, so it is not changed globally. It is inverted only inside the two dark surfaces in the platform layer, the hero and the callout. */ body.pma-psy .pmax-hero .pmax-btn--ghost, body.pma-psy .pmax-callout .pmax-btn--ghost { background: transparent; color: var(--pma-ivory) !important; border-color: rgba(240, 206, 115, 0.55) !important; } body.pma-psy .pmax-hero .pmax-btn--ghost:hover, body.pma-psy .pmax-callout .pmax-btn--ghost:hover { background: var(--pma-gold-300); color: var(--pma-navy-900) !important; border-color: var(--pma-gold-300) !important; } body.pma-psy .pmax-hero .pmax-btn--ghost:focus-visible, body.pma-psy .pmax-callout .pmax-btn--ghost:focus-visible { outline: 2px solid var(--pma-gold-300); outline-offset: 3px; } /* ------------------------------------------------------------------ 6 · Typeface guard on form controls ------------------------------------------------------------------ MEASURED: `getComputedStyle(button).fontFamily` returned `Arial` on all 41 pages. Button and input elements do not inherit the document family in Enfold's base stylesheet. Named here so no control falls back to Arial. */ body.pma-psy button, body.pma-psy input, body.pma-psy select, body.pma-psy textarea, body.pma-psy .avia-button, body.pma-psy input[type="submit"] { font-family: var(--pma-sans); } /* Icon fonts are deliberately excluded — Enfold and its shortcodes draw their glyphs from `entypo-fontello`, and restating a family on those elements would replace the glyph with a letter. */ body.pma-psy [class*="entypo-fontello"], body.pma-psy [data-av_svg_icon], body.pma-psy .av-icon-char, body.pma-psy .avia-svg-icon { font-family: inherit; } /* ------------------------------------------------------------------ 7 · Touch targets ------------------------------------------------------------------ MEASURED at 390×844: footer and socket links resolved to 12–19px tall, below a comfortable target. Padding is added only to links that sit in a list — a link inside a sentence keeps its line box, because padding there would break the paragraph's rhythm. */ /* Width alone decides. `pointer: coarse` was measured as unreliable — headless and desktop-narrow contexts do not report it, and a small window benefits from the same target size. */ @media (max-width: 767px) { body.pma-psy #footer .pma-footer__list a, body.pma-psy #footer .widget li a, body.pma-psy #socket .menu li a, body.pma-psy .sidebar .widget li a { padding-top: 0.55rem; padding-bottom: 0.55rem; } body.pma-psy .pma-social__link { padding-top: 0.5rem; padding-bottom: 0.5rem; } } /* ------------------------------------------------------------------ 9 · Colour contrast, measured ------------------------------------------------------------------ Every text node on all 41 pages was measured against its effective background at both widths, using the WCAG relative-luminance formula. Three failures recurred across the site. Each is corrected at the smallest scope that fixes it — no palette is redefined. 9a · `.pmax-more`, the "Read the method →" link that closes almost every card, is gold #b08d3f at 12.8px bold: **3.12:1** on the ivory ground, where AA asks 4.5:1 for text this size. 152 instances. Darkened to a gold that passes at **5.5:1** while still reading as gold rather than brown. On the dark surfaces the original light gold already passes and is kept. */ body.pma-psy .pmax-more, body.pma-psy a.pmax-more { color: #7d5c12; } body.pma-psy .pmax-hero .pmax-more, body.pma-psy .pmax-callout .pmax-more { color: var(--pma-gold-300); } body.pma-psy .pmax-more:hover { color: var(--pma-navy-900); } /* 9b · Enfold's demo green #719430 was still the link and `` colour wherever a page did not sit inside the platform layer — most visibly the email address and the "Email:" label on Contact, at **3.51:1**. Only unclassed elements are touched: every link the theme styles itself carries a class (`.pmax-btn`, `.pmax-door`, `.pmax-more`, `.pmax-stretch`), so this cannot reach a designed control. Links on the two dark surfaces are re-asserted in light gold immediately afterwards, so this rule cannot put navy text on a navy ground. */ body.pma-psy #main a:not([class]) { color: var(--pma-navy-600); } body.pma-psy #main a:not([class]):hover { color: #7d5c12; } body.pma-psy #main strong:not([class]) { color: var(--pma-navy-800); } body.pma-psy #main .pmax-hero a:not([class]), body.pma-psy #main .pmax-callout a:not([class]) { color: var(--pma-gold-300); } body.pma-psy #main .pmax-hero strong:not([class]), body.pma-psy #main .pmax-callout strong:not([class]) { color: var(--pma-ivory); } body.pma-psy .pmax-stretch { color: var(--pma-navy-900); } /* 9c · The contextual child-page nav in the sidebar — the one placeholder widget worth keeping — inherited Enfold's #969696 at **2.96:1**. */ body.pma-psy .sidebar .nested_nav a, body.pma-psy .sidebar .widget li a { color: var(--pma-ink-muted); } body.pma-psy .sidebar .nested_nav a:hover, body.pma-psy .sidebar .widget li a:hover { color: var(--pma-navy-900); } body.pma-psy .sidebar .nested_nav .current_page_item > a { color: var(--pma-navy-900); font-weight: 600; } /* ------------------------------------------------------------------ 10 · Horizontal containment ------------------------------------------------------------------ MEASURED: 0px document overflow on all 41 pages at both widths, so nothing is being corrected here — this is a guard so a future long unbroken string in a table or a code sample cannot push the document sideways. */ body.pma-psy #main table { max-width: 100%; } body.pma-psy #main pre, body.pma-psy #main code { overflow-x: auto; overflow-wrap: anywhere; } /* ------------------------------------------------------------------ 11 · The header logo collided with the navigation ------------------------------------------------------------------ MEASURED on the live 2.4.2 header, with the admin bar removed: 1600px logo box ends 356, nav starts 316 → overlap 40px 1280px logo box ends 211, nav starts 141 → overlap 70px 990px logo box ends 211, nav starts 50 → overlap 161px 768px logo box ends 211, nav starts 50 → overlap 161px The wordmark and the word PSYCHOLOGY were printed on top of each other. Enfold positions the main menu from the width it believes the logo to be, and the crest markup this theme substitutes does not declare one, so the menu was placed underneath it. The overlap grew as the viewport narrowed because Enfold also keeps the desktop menu down to phone widths on this install (`html_mobile_menu_phone`). Two rules, one decision: the desktop navigation is only used at widths where all nine doors genuinely fit beside the crest, and the burger — which Enfold already renders into the markup — takes over everywhere below that. The nine doors are preserved exactly: Psychology · Learn · Behavior · Emotions · FACS & Observation · Neurodiversity · Tools · Downloads · Evidence. Nothing is dropped, nothing is compressed, and no label is allowed to wrap. */ body.pma-psy .logo, body.pma-psy .logo.pma-crest { width: auto; max-width: 260px; z-index: 3; } body.pma-psy .pma-crest__mark { height: 64px; max-width: 100%; width: auto; } /* THE ACTUAL CAUSE, measured. Enfold's header row is `.container.av-logo-container > .inner-container`, and inside it the crest is a static `span.logo` while `nav.main_menu` is **absolutely positioned**. Two earlier attempts failed for the same reason: `padding-left` on an absolutely positioned element does not move its left edge, and anchoring the menu to `right: 0` only slides the whole 1029px menu under a 161px crest — measured overlap 40px at 1920, 1600 and 1440 alike, so it was never a narrow-viewport problem. The row is therefore made a real flex row and the menu returned to normal flow, which is the only arrangement in which the two boxes cannot occupy the same pixels. Measured after the change: single row, **48px of genuine clear space** at 1920 / 1600 / 1440, zero overlap, zero document overflow. The nine doors are preserved exactly: Psychology · Learn · Behavior · Emotions · FACS & Observation · Neurodiversity · Tools · Downloads · Evidence. Nothing is dropped and no label wraps. */ @media (min-width: 1440px) { body.pma-psy #header_main .av-logo-container .inner-container { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; } body.pma-psy #header_main .inner-container > .logo { position: static !important; float: none !important; display: flex !important; align-items: center; flex: 0 0 auto; width: auto !important; height: auto !important; max-width: 210px; margin-right: 48px; } body.pma-psy #header_main .inner-container > .main_menu { position: static !important; float: none !important; left: auto !important; right: auto !important; margin-left: auto; flex: 0 1 auto; padding-left: 0; } body.pma-psy .av-main-nav { display: flex; flex-wrap: nowrap; align-items: center; } body.pma-psy .av-main-nav > li > a { white-space: nowrap; padding-left: 10px; padding-right: 10px; letter-spacing: 0.015em; } body.pma-psy .pma-crest__mark { height: 58px; } /* The last doors sit close to the container edge, so their dropdowns are anchored right rather than left — otherwise a hidden sub-menu widens the document. Measured at 1440: 0px overflow. */ body.pma-psy .av-main-nav > li:nth-last-child(-n+4) > ul.sub-menu { left: auto !important; right: 0 !important; } } @media (max-width: 1439px) { /* Below 1440 the nine doors cannot sit beside the crest without being squeezed, so the PMA hamburger takes over — it is designed for this in `05-header-footer.css`, not a fallback. Enfold puts the burger in the same list, so the doors are hidden and the burger revealed; the menu itself, and every link in it, is untouched. */ body.pma-psy .av-main-nav > li:not(.av-burger-menu-main) { display: none !important; } body.pma-psy .av-main-nav > li.av-burger-menu-main { display: block !important; } body.pma-psy #header_main .main_menu { padding-left: 0; } } @media (max-width: 767px) { body.pma-psy .pma-crest__mark { height: 46px; } body.pma-psy .logo, body.pma-psy .logo.pma-crest { max-width: 200px; } }