/* * Phase 08B-R8 — homepage-scoped component corrections. * Loaded after leadership-v1.css so these scoped, equal-or-higher- * specificity rules win the cascade for the exact numeric values the * approved prototype uses. Each correction here is cited in * docs/evidence/phase08b-r8-exact-port/ROOT_CAUSE_AUDIT.md — this file * intentionally does not restate rules that already matched the * prototype (geometry, borders, header/footer shell), only the ones that * measurably did not. */ /* Card radius: prototype measured 10px; the shared site-wide token used everywhere else (article/about/admin pages) is 8px and must not change globally, so every homepage card gets the corrected radius scoped to this root only. */ .cacs-homepage-professional-v1 .cacs-featured-research, .cacs-homepage-professional-v1 .cacs-current-issue, .cacs-homepage-professional-v1 .cacs-metrics-placeholder, .cacs-homepage-professional-v1 .cacs-announcements-card, .cacs-homepage-professional-v1 .cacs-at-a-glance, .cacs-homepage-professional-v1 .cacs-latest-articles-panel, .cacs-homepage-professional-v1 .cacs-editorial-board-link, .cacs-homepage-professional-v1 .cacs-board-card, .cacs-homepage-professional-v1 .cacs-featured-research__visual { border-radius: var(--cacs-hp-radius-card); } /* The floating info panel uses the smaller *control* radius in the prototype (6px), not the card radius (10px) - measured separately, not assumed to match its parent visual. */ .cacs-homepage-professional-v1 .cacs-featured-research__panel { border-radius: var(--cacs-hp-radius-control, 6px); box-shadow: 0 8px 24px rgba(6, 59, 70, 0.16); background: rgba(255, 255, 255, 0.95); } /* Generic issue cover: prototype gives it its own small radius + shadow, distinct from the card radius. */ .cacs-homepage-professional-v1 .cacs-current-issue__cover { border-radius: var(--cacs-hp-radius-control, 6px); box-shadow: 0 1px 2px rgba(6, 59, 70, 0.08), 0 1px 1px rgba(6, 59, 70, 0.06); } /* Phase 08B-R9: card gaps/padding measured against the prototype's own flat values (ROOT_CAUSE_AUDIT.md / COMPUTED_STYLE_PARITY.md from R8): hero-card gap 12px vs 16px, current-issue gap 8px vs 12px and padding 17.6px vs 12px. Corrects both the remaining style-parity mismatches and part of the residual Hero/Current-Issue height gap the R9 region audit found. */ .cacs-homepage-professional-v1 .cacs-featured-research { gap: 16px; } /* Phase 08B-R9 accessibility audit: the sitewide status-chip token pairing (--cacs-green text on a 85%-white-mixed tint of the same token) measured 2.64:1 on the Current Issue "Published" chip - below the 4.5:1 normal- text minimum. --cacs-green is shared by other status chips elsewhere in the theme, so it is not changed globally; this scoped override only darkens the homepage chip's text (same hue, lightness lowered) to a measured 4.79:1 while leaving the chip's background token untouched. */ .cacs-homepage-professional-v1 .cacs-current-issue__status { color: rgb(23, 120, 64); } .cacs-homepage-professional-v1 .cacs-current-issue { gap: 13px; padding: 12px; } /* Base text color on every card container: the global --cacs-color-ink token (oklch) and this theme's --cacs-dark-text (hex) are meant to read as the same "ink" color but are literally different custom properties, so cards were inheriting the former instead of the latter's exact value the prototype uses. */ .cacs-homepage-professional-v1 .cacs-featured-research, .cacs-homepage-professional-v1 .cacs-current-issue, .cacs-homepage-professional-v1 .cacs-metrics-placeholder, .cacs-homepage-professional-v1 .cacs-announcements-card, .cacs-homepage-professional-v1 .cacs-at-a-glance, .cacs-homepage-professional-v1 .cacs-latest-articles-panel, .cacs-homepage-professional-v1 .cacs-editorial-board-link, .cacs-homepage-professional-v1 .cacs-board-card, .cacs-homepage-professional-v1 .cacs-featured-research__panel { color: var(--cacs-dark-text); } /* Footer is a sibling of .cacs-home (and therefore of .cacs-homepage-professional-v1), not a descendant - the same structural fact leadership-v1.css already documents for footer width - so it cannot be reached by the scoped selectors above and is corrected here unscoped instead, same pattern leadership-v1.css already uses for footer-wide rules. */ .cacs_theme .pkp_structure_footer_wrapper, .cacs_theme .cacs-footer-columns, .cacs_theme .cacs-footer-legal { color: var(--cacs-dark-text); /* Inherited core `text-align: center` (not set anywhere in leadership-v1.css - traced to the core footer default, not guessed) against the prototype's left-aligned footer text. */ text-align: start; } .cacs_theme .pkp_structure_footer_wrapper { background: var(--cacs-soft-bg); } .cacs_theme .cacs-footer-columns h2 { line-height: 1.46; } .cacs_theme .cacs-footer-legal { padding-block-start: 6px; } /* Editorial Board link-out panel measured a distinct soft-bg fill (rgb(245,247,248)) against the prototype's plain white, the only card visually singled out from its siblings for no documented reason. */ .cacs-homepage-professional-v1 .cacs-editorial-board-link { background: var(--cacs-white); } /* Every homepage card heading must resolve to the serif heading font, not just some of them - the Journal Metrics heading was the one confirmed rendering in the sans body font (see ROOT_CAUSE_AUDIT.md). */ .cacs-homepage-professional-v1 .cacs-metrics-placeholder__head h2, .cacs-homepage-professional-v1 .cacs-at-a-glance h2, .cacs-homepage-professional-v1 .cacs-announcements-card h2, .cacs-homepage-professional-v1 .cacs-latest-articles-panel h2, .cacs-homepage-professional-v1 .cacs-editorial-board-link h2, .cacs-homepage-professional-v1 .cacs-current-issue h2 { font-family: var(--cacs-font-heading); color: var(--cacs-dark-text); /* Prototype card headings measured 16.8px/19.32px line-height. */ font-size: 1.05rem; line-height: 1.15; } /* Prototype metric labels use the normal (400) text weight, not a medium/semibold weight. */ .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell dt { font-weight: 400; } /* The featured/latest-article titles are native `

` elements; only the `` text carrier inside them had an explicit dark-text color (leadership-v1.css), so the H3 itself still inherited base.css's generic `h1..h6 { color: var(--cacs-color-brand-strong) }` rule - invisible today (the anchor fully covers the heading's text), but setting it explicitly here removes the ambiguity for any future content added directly inside the heading. */ .cacs-homepage-professional-v1 .cacs-featured-research .obj_article_summary .title, .cacs-homepage-professional-v1 .cacs-latest-articles-panel .obj_article_summary .title { color: var(--cacs-dark-text); } /* Prototype's compact article-list titles use the UI sans font, not the heading serif stack the native `

` element inherits unopposed from base.css. */ .cacs-homepage-professional-v1 .cacs-latest-articles-panel .obj_article_summary .title { font-family: var(--cacs-font-ui); } /* Prototype's board-card grid items have no background of their own (transparent, showing the white parent through); the theme's version explicitly painted each one white - same rendered pixel, but matching the prototype's actual declared value for an honest parity score. */ .cacs-homepage-professional-v1 .cacs-board-card { background: transparent; padding: 4px 8px; } .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell { border-block-start: none; padding-block-start: 0; } .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell dd { line-height: 1.1; } /* Metrics labels: prototype uses the neutral dark-text label color (opacity-muted), not a teal accent - a divergence this file corrects without touching the metric value color, icon color, or geometry. */ .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell dt { color: var(--cacs-dark-text); opacity: 0.75; } /* Submit Manuscript CTA + primary nav pills: prototype buttons measured 6px radius against the shared 4px site token. Scoped to the header controls that visually belong to this design (submit CTA is always present; nav pill treatment below extends to every nav item, not just the current-page one leadership-v1.css already filled). */ .cacs_theme .cacs_submit_cta { border-radius: var(--cacs-hp-radius-control, 6px); } /* Prototype nav items are filled cyan pills at every state's relevant moment (hover/current), 40px tall, 15px/600 text, 6px radius; the integrated theme previously only filled the current/home item and left every other item as a plain underline-on-hover link (measured ~32px tall, inherited 16px/400 text) - the single largest visual contributor to the "design not ported" gap in the primary nav. */ @media (min-width: 64rem) { .cacs_theme .pkp_navigation_primary > li > a { display: inline-flex; align-items: center; min-height: 1.7rem; padding-inline: 0.7rem; border-radius: var(--cacs-hp-radius-control, 6px); font-family: var(--cacs-font-ui); font-size: 0.9375rem; font-weight: 600; } .cacs_theme .pkp_navigation_primary > li > a:hover, .cacs_theme .pkp_navigation_primary > li > a:focus-visible { background: rgba(255, 255, 255, 0.14); } .cacs_theme .pkp_navigation_primary > li > a[href$="/index"], .cacs_theme .pkp_navigation_primary > li.current > a { background: var(--cacs-cyan); } } /* ------------------------------------------------------------------ V17 — full professional visual refinement pass. Continues the R8/R9 exact-port technique above (scoped, equal-or- higher-specificity corrections layered after leadership-v1.css) to close the remaining gaps a strict numeric-parity pass didn't cover: card elevation, a consistent accent-icon system, and control-radius consistency. Every value reuses tokens already defined in this design system (prototype's own --cacs-shadow-subtle, the leadership palette hues) rather than inventing new ones. No new template markup, no core/vendor/default-theme selectors. ------------------------------------------------------------------ */ /* Card elevation: every homepage card gets the same subtle raised- surface treatment (prototype's own shadow token) instead of reading as a flat bordered box, with a gentle lift on hover so the panel system feels deliberately designed rather than static HTML output. */ .cacs-homepage-professional-v1 .cacs-featured-research, .cacs-homepage-professional-v1 .cacs-current-issue, .cacs-homepage-professional-v1 .cacs-metrics-placeholder, .cacs-homepage-professional-v1 .cacs-announcements-card, .cacs-homepage-professional-v1 .cacs-at-a-glance, .cacs-homepage-professional-v1 .cacs-latest-articles-panel, .cacs-homepage-professional-v1 .cacs-editorial-board-link { box-shadow: 0 1px 2px rgba(6, 59, 70, 0.08), 0 1px 1px rgba(6, 59, 70, 0.06); transition: box-shadow 160ms ease; } .cacs-homepage-professional-v1 .cacs-featured-research:hover, .cacs-homepage-professional-v1 .cacs-current-issue:hover, .cacs-homepage-professional-v1 .cacs-metrics-placeholder:hover, .cacs-homepage-professional-v1 .cacs-announcements-card:hover, .cacs-homepage-professional-v1 .cacs-at-a-glance:hover, .cacs-homepage-professional-v1 .cacs-latest-articles-panel:hover, .cacs-homepage-professional-v1 .cacs-editorial-board-link:hover { box-shadow: 0 4px 16px rgba(6, 59, 70, 0.12), 0 1px 2px rgba(6, 59, 70, 0.08); } @media (prefers-reduced-motion: reduce) { .cacs-homepage-professional-v1 .cacs-featured-research, .cacs-homepage-professional-v1 .cacs-current-issue, .cacs-homepage-professional-v1 .cacs-metrics-placeholder, .cacs-homepage-professional-v1 .cacs-announcements-card, .cacs-homepage-professional-v1 .cacs-at-a-glance, .cacs-homepage-professional-v1 .cacs-latest-articles-panel, .cacs-homepage-professional-v1 .cacs-editorial-board-link { transition: none; } } /* Utility strip reads as a flat soft-bg band today, unlike the seven cards above - same elevation so it joins one coherent card system instead of feeling like a leftover block. */ .cacs_theme .cacs-home-utility-strip { box-shadow: 0 1px 2px rgba(6, 59, 70, 0.08), 0 1px 1px rgba(6, 59, 70, 0.06); } /* Journal Metrics: a small colored accent dot ahead of each value, cycling the same four leadership-palette hues used elsewhere in this theme (cyan/purple/green/coral) - a compact, CSS-only "icon" (no new markup) so the four figures read as a deliberate accent system instead of four identical gray rows. */ .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell { position: relative; padding-inline-start: calc(var(--cacs-space-2) + 10px); } .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell::before { content: ""; position: absolute; inset-inline-start: var(--cacs-space-2); inset-block-start: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; } .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell:nth-child(4n+1)::before { background: var(--cacs-cyan); } .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell:nth-child(4n+2)::before { background: var(--cacs-purple); } .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell:nth-child(4n+3)::before { background: var(--cacs-green); } .cacs-homepage-professional-v1 .cacs-metrics-placeholder__cell:nth-child(4n+4)::before { background: var(--cacs-coral); } /* Editorial board avatars: a teal accent ring (white gap + border tint) instead of a flat gray border, so the neutral silhouette/photo slot reads as a deliberate portrait frame. V21: real-photo now shares the same rectangular headshot-crop frame (width/height/ radius) as the illustrated placeholder below, so a real photo and the placeholder read as the same frame system, not two shapes. */ .cacs-homepage-professional-v1 .cacs-board-card__silhouette { flex: none; width: 3.1rem; height: 3.7rem; border-radius: 10px; object-fit: cover; border-color: var(--cacs-teal); border-width: 1.5px; box-shadow: 0 0 0 2px var(--cacs-white), 0 0 0 3px var(--cacs-border); } /* Utility strip icons: soft circular tint instead of flat currentColor- on-transparent, matching the metrics/board accent treatment above; CTA links get a small hover nudge instead of a static underline. */ .cacs_theme .cacs-home-utility-strip__icon { background: color-mix(in oklch, var(--cacs-teal), white 90%); border-radius: 50%; } .cacs_theme .cacs-home-utility-strip__item a { display: inline-flex; align-items: center; gap: 4px; transition: gap 140ms ease; } .cacs_theme .cacs-home-utility-strip__item a:hover, .cacs_theme .cacs-home-utility-strip__item a:focus-visible { gap: 7px; } /* Search field: unify to the prototype's own control radius (6px) instead of the smaller sitewide default (4px), matching the Submit Manuscript CTA and primary-nav pills corrected above. */ .cacs_theme .cacs_nav_search { border-radius: var(--cacs-hp-radius-control, 6px); } /* Primary CTAs (hero "Read Full Article", header "Submit Manuscript") get a matching resting/hover shadow pair so both read as the same premium, deliberately-elevated control. */ .cacs_theme .cacs_submit_cta, .cacs-homepage-professional-v1 .cacs-featured-research__cta { box-shadow: 0 1px 2px rgba(6, 59, 70, 0.08); transition: box-shadow 160ms ease, background 160ms ease; } .cacs_theme .cacs_submit_cta:hover, .cacs_theme .cacs_submit_cta:focus-visible, .cacs-homepage-professional-v1 .cacs-featured-research__cta:hover, .cacs-homepage-professional-v1 .cacs-featured-research__cta:focus-visible { box-shadow: 0 4px 12px rgba(16, 131, 230, 0.35); } /* Footer: a teal top-accent on the legal bar instead of a flat gray divider, and slightly stronger column-heading tracking/color so the labels read as intentional section markers, not default browser list output. */ .cacs_theme .cacs-footer-legal { border-block-start-color: var(--cacs-teal); border-block-start-width: 2px; } .cacs_theme .cacs-footer-columns h2 { letter-spacing: 0.07em; color: var(--cacs-teal); } /* ------------------------------------------------------------------ V18 — Design 2 reference fidelity pass. Closes the remaining gaps against docs' "1-dizayn (2).png" reference: a compact language-dropdown trigger, a divider before the utility actions, a filled current-page nav pill, colored icon glyphs on the hero panel and Journal Metrics, a card-grid Editorial Board layout, a colored article-type badge, and an honest disabled newsletter field. All CSS/JS only - no template or PHP changes, no fabricated routes, no realistic board photos/names (kept deliberately synthetic per explicit direction). See theme.js for the matching markup. ------------------------------------------------------------------ */ /* ---------- Language dropdown ---------- */ .cacs_theme .cacs_locale_switcher { position: relative; } /* Cancels the site-wide generic `button:not(.pkp_site_nav_toggle))` reset (components.css) which fills every raw