/* ============================================================================= theme-aiage-news — style-v1.3.css (FINAL — Round B) ADDITIVE CSS FILE — this is NOT a replacement for the live style.css and does NOT get pasted into it. It ships as its own file, deployed to assets/css/style-v1.3.css inside the theme and loaded via a SEPARATE wp_enqueue_style() call (see functions.php-snippet.php) that depends on the theme's existing 'aiage-news-style' handle, so it always loads AFTER style.css and its rules win by cascade order — no !important arms race with v1.2.0 needed except where noted (the .aiage-subnav overrides, which pre-empt the OLD .aiage-nav bevel rules that a renamed class no longer matches anyway — see the note above that block). The ONLY edit this pass makes to the live style.css itself is the one-line theme-header version bump: Version: 1.2.0 → Version: 1.3.0 (see DEPLOY-STEPS.md — do NOT paste this file's contents into style.css). TOKENS — this file uses the theme's OWN existing CSS custom properties directly: --bg --white --ink --ink-2 --ink-3 --ink-4 --rule --yellow --yellow-2 --teal --teal-2 --display --serif --sans --mono. These are CONFIRMED (not guessed) — they are declared, unprefixed, on :root at the top of the live style.css (lines 20-28) specifically "so the component CSS below [stays] 1:1 with the landing page at aiagepress.com" — i.e. they are already the SAME names/values as MOCK-PUBHOUSE-V3-2026-07-14/assets/ house.css's own :root tokens. No --wp--preset--* fallback chain is needed or used; this removes the "unverified theme.json slug" risk the v1.3-draft flagged (theme.json's real font-family slugs are display/serif/sans/mono — NOT the draft's guessed bricolage-grotesque/dm-serif-display/inter-tight/ jetbrains-mono — moot here since style.css's own aliases are used instead). Only a few NEW composite values (max width, gutter, button bevel shadows) have no existing alias in style.css; those get local --aap-* custom properties, defined once below. ============================================================================= */ :root{ --aap-max: var(--wp--style--global--wide-size, 1320px); --aap-gutter: clamp(16px, 4vw, 40px); --aap-shadow-lift: 0 24px 50px -22px rgba(10,10,10,.32), 0 8px 18px -10px rgba(10,10,10,.16); --aap-btn-rest: inset 0 1.5px 0 rgba(255,255,255,.16), inset 0 -4px 6px rgba(0,0,0,.55), 3px 4px 0 var(--ink), 5px 8px 16px -6px rgba(10,10,10,.55); --aap-btn-hover: inset 0 1.5px 0 rgba(255,255,255,.28), inset 0 -3px 5px rgba(0,0,0,.3), 5px 7px 0 var(--ink), 8px 14px 22px -6px rgba(10,10,10,.6); } /* ---- wp-admin bar offset ------------------------------------------------- WP core adds a fixed admin bar for logged-in users: 32px tall at ≥783px, 46px tall at ≤782px (core breakpoint, confirmed WP default — not something this static-mock-derived CSS could verify against the live host, but this is a stable WP core constant, not theme/host-specific). Tier 1/2/3 below are `position:sticky`, offset from the viewport top by 0 / 40 / 74px with no admin bar; `.admin-bar` (the body class WP adds for logged-in users) pushes those same three offsets down by the admin-bar height so the sticky stack never renders underneath it. Tier 4 (.aiage-subnav-wrap) is static, not sticky, so it needs no offset rule. ---- */ .admin-bar .topstrip{ top: 32px; } .admin-bar .netbar{ top: 72px; } /* 32px admin bar + 40px topstrip */ .admin-bar .nav{ top: 106px; } /* 32px admin bar + 40px topstrip + 34px netbar */ @media (max-width: 782px){ .admin-bar .topstrip{ top: 46px; } .admin-bar .netbar{ top: 86px; } .admin-bar .nav{ top: 120px; } } /* ---- aap-chrome wrapper (the wp:group tiers 1-3 render inside) ---- */ .aap-chrome{ position: relative; z-index: 100; } /* ===================================================================== TIER 1 — topstrip marquee ===================================================================== */ .topstrip{ position: sticky; top: 0; z-index: 100; height: 40px; overflow: hidden; background: linear-gradient(180deg, #FFE45C, var(--yellow) 45%, var(--yellow-2)); border-bottom: 2px solid var(--ink); } .topstrip-track{ display: flex; width: max-content; will-change: transform; } /* Motion default ON for ALL visitors, including OS-level prefers-reduced-motion (owner runs OS reduce-motion; per memory note "owner-reduce-motion-on" this property must NOT be OS-gated — the marquee is gentle + pauses on hover/ focus, which is the only control). Guarded by the theme's OWN .reduce-motion HTML class (already the convention used everywhere else in style.css, e.g. `html:not(.reduce-motion) .wp-block-button__link`) rather than a `@media (prefers-reduced-motion: reduce)` query, so it stays consistent with the rest of the theme and with the brand-wide "don't OS-gate" decision. */ html:not(.reduce-motion) .topstrip-track{ animation: aapMarq 42s linear infinite; } html.reduce-motion .topstrip-track{ animation: none; } .topstrip:hover .topstrip-track, .topstrip:focus-within .topstrip-track{ animation-play-state: paused; } .topstrip span{ display: inline-flex; align-items: center; height: 40px; padding: 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--ink); } .topstrip span::after{ content: "✦"; margin: 0 16px 0 18px; color: var(--teal); } .topstrip a{ color: inherit; text-decoration: none; border-bottom: 1.5px solid rgba(10,10,10,.35); } .topstrip a:hover{ border-bottom-color: var(--ink); } .topstrip strong{ background: var(--ink); color: var(--yellow); padding: 3px 8px; margin-right: 8px; } @keyframes aapMarq{ to{ transform: translateX(-50%); } } /* ===================================================================== TIER 2 — ink netbar + native Google Translate + ✕ Original revert ===================================================================== */ .netbar{ position: sticky; top: 40px; z-index: 95; background: var(--ink); color: var(--bg); border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; } .netbar-inner{ max-width: var(--aap-max); margin: 0 auto; padding: 8px var(--aap-gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; justify-content: center; } .netbar a{ color: rgba(250,250,248,.75); text-decoration: none; border-bottom: 1px solid transparent; } .netbar a:hover, .netbar a[aria-current="page"]{ color: var(--yellow); border-bottom-color: var(--yellow); } .netbar .sep{ opacity: .35; } .netbar .here{ color: var(--yellow); font-weight: 600; } .netbar-translate{ display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } .netbar-translate .tr-label{ font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,250,248,.55); white-space: nowrap; } @media (min-width: 720px){ .netbar-translate{ margin-left: auto; } .netbar .sep-tr{ display: none; } } /* Native Google Website Translate widget — theme its .goog-te-combo