/** * Horizon Core: THE MOBILE LAYER (HORIZON-20260924-001). * * ⭐ ONE copy of the phone rules for the shared hp-* component classes. Signed by * Alex 2026-09-24 (scope HORIZON-20260923-025 §4.3): every component stylesheet * a creator site uses exists in FIVE theme copies (shell, entertainer, commerce, * two per-client), so a phone fix made in one theme misses the others; a creator * is on the entertainer copy. This file reaches all five in one Core deploy and * cannot drift, because there is one of it. * * ⛔ DO NOT FIX THESE IN THE THEME COPIES. If a phone rule for an hp-* class is * wrong, fix it here. * * HOW IT WINS (read before adding a rule): * - It is enqueued LATE on wp_enqueue_scripts (src/Render/mobile-layer.php), so * it prints after every theme sheet in . * - Every selector starts with `body`, one element of specificity above the * theme's single-class rules, so it also beats Core and plugin sheets that * print later in the footer (hero lead, capture modal, Vault). * - TAP TARGETS USE min-height / min-width, never height. min-height beats * any smaller `height`, whatever that rule's specificity, so there is no * specificity war to lose. * - Measured, not guessed: every rule names the defect it closes (scope §5, * D-numbers) and was aimed at the selector the probe measured * (docs/research/mobile-phase1-2026-09-24/before-selectors-375.txt). * * THE THRESHOLDS (signed 2026-09-24): running text >= 16px (S3), nothing * visible under 12px (S4), taps >= 44x44 (S2; links inside a sentence are * exempt), fields >= 16px (S5, or iOS zooms the page on focus). * * Verify every change with the ratchet, never by eye alone: * node .claude/scripts/mobile/hz-mobile-ratchet.mjs --smoke * * ⭐ THE FLOORS RUN TO 1024px (HORIZON-20261002-065, Alex signed the "tablet floors"). Sections 1-3 (taps, running * text, nothing under 12px) sat in one phone block that stopped at 767px while the signed thresholds are measured at * 768 and 1024 too, so every page on every site failed the same list there (footer links, legal nav, the sign-up * box, product cards...). They now sit in `max-width: 1024px` blocks, in the SAME order, so a phone's cascade is * unchanged. What is LAYOUT, not a floor, stays phone-only in the `767.98px` blocks between them: the announcement * bar's 16px/tracking/flex link (tablets keep their own line-height rule at the end), the fixed subscribe bar's two * rows, and the "find me on" grid. ⛔ A new FLOOR goes in a 1024 block; a new phone LAYOUT rule in a 767.98 block. * Evidence: docs/research/tablet-floors-2026-10-02/. */ @media (max-width: 1024px) { /* ── 1. TAP TARGETS (S2) ─────────────────────────────────────────────── */ /* D11: every button is at least 44px tall. Ghost buttons are text links in button clothing (padding 0, height auto, 21px): the hit area grows, the look does not. */ body .hp-btn { min-height: 44px; } body .hp-btn--ghost, body .hp-viewall { display: inline-flex; align-items: center; min-height: 44px; } /* D2 footer links, D4 legal nav, and the other short standalone text links the fleet measured under 44px. inline-flex so min-height applies. */ body .hp-footer__links a, body .hp-footer__powered a, body .hp-legal-nav__list a, body .hp-page-header__eyebrow a, body .hp-announcement-card__title a, body .hp-announcement-card__readmore, body .hp-booking-cta__email, body .hp-episode-card__title a, body .hp-host-card__name a, body .hp-product-card__name a, body .product_meta .posted_in a, body .product_meta .tagged_as a, body .woocommerce-LostPassword a, body .horizon-vault-catalog__cta-link { display: inline-flex; align-items: center; min-height: 44px; } body .hp-footer__links a, body .hp-page-header__eyebrow a, body .product_meta .posted_in a, body .product_meta .tagged_as a { min-width: 44px; } /* 1.29.1: WooCommerce block "Add to cart" (39px), the contact page links. */ body .wc-block-grid__product-add-to-cart .wp-block-button__link, body .hp-contact-info__row a { display: inline-flex; align-items: center; min-height: 44px; } /* The 44px row IS the spacing now. Keeping the theme's 12-16px list gap on top of it opened the footer to a ~56px rhythm that read as empty (screenshot, star at 375); without it the rhythm is 44px, close to the original ~37px. */ body .hp-footer__links { gap: 0; } /* Commerce footer social icons: 18px glyphs, now 44px targets. The 44px box already spaces the glyphs, so the 20px gap drops to 8px: six icons stay on one row (at 20px the row ran 5px off a 375 phone; the ratchet caught it in the predicted run). Wrap is the fallback for a creator with more. */ body .hp-footer__socials { flex-wrap: wrap; gap: 0.5rem; } body .hp-footer__social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* The product image link collapsed to its line box (341x20) around a block image: make it the image's size. */ body .hp-product-card__image-wrap > a { display: block; height: 100%; } /* Commerce logo link: 41px wide when the logo is narrow. */ body .site-logo a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; } /* D13 filter tabs (content, shop categories) and the filters trigger. */ body .hp-filter-tab, body .hp-category-filter__tab, body #hp-filters-trigger, body .hp-guest-chip { min-height: 44px; } body .hp-category-filter__tab, body #hp-filters-trigger { display: inline-flex; align-items: center; } /* D12 content sort select: 36px tall and 14px (iOS zoomed on focus). */ body .hp-sort-select { min-height: 44px; font-size: var(--hp-text-base, 1rem); } /* D10 storefront header icons 40x40 (36x40 once scrolled): their 44px rule moved to hp-mobile-header.css (PHONES AND TABLETS, C) in HORIZON-20261002-042, so it runs to 1024px with the rest of the phone header. */ /* D19 colour swatches 36px; WooCommerce variation selects. */ body .hp-swatch { min-height: 44px; } /* ⛔ not .hp-variations-native-hidden: that select is visually hidden on purpose (the swatches replace it) and must stay 1px. */ body table.variations select:not(.hp-variations-native-hidden) { min-height: 44px; font-size: var(--hp-text-base, 1rem); } /* Disclosure rows: FAQ, and Core's shipping estimate groups (28px). ⛔ NOT display:flex: that drops the native ▸ marker, the only cue that the row opens (screenshot, a podcast site's shipping at 375). A summary is block-level, so min-height applies as it is; padding centres the text. */ body .hp-faq-item > summary, body .hp-shipping-estimates__group > summary { min-height: 44px; padding-block: 0.625rem; box-sizing: border-box; } /* WooCommerce product tabs, pagination, and the account page controls. */ body .woocommerce-tabs ul.tabs li a { min-height: 44px; display: inline-flex; align-items: center; } body .woocommerce-pagination .page-numbers .page-numbers { min-width: 44px; min-height: 44px; } body .show-password-input { min-width: 44px; min-height: 44px; } body .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; } /* Broadcast feed share link (Pulse V2): 42x22. */ body .hpv2-feed-item-share { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } /* D5 the email sign-up consent: a 13px checkbox inside its label. The LABEL is the target (a tap on the words ticks the box), so the label gets the 44px floor and the box itself is drawn at a size a thumb can see. */ body .hp-email-signup__consent { min-height: 44px; align-items: center; font-size: var(--hp-text-base, 1rem); } body .hp-email-signup__consent input[type="checkbox"], body #rememberme { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--hp-gold, currentColor); } /* D6 the email field: 14px (iOS zoomed on focus) and 39px in the capture band, where the column layout's `flex: 1` collapsed its 48px height. */ body .hp-email-signup__input { font-size: var(--hp-text-base, 1rem); min-height: 48px; } /* ── 2. RUNNING TEXT AT 16px (S3, D7) ─────────────────────────────────── */ /* Only classes the fleet measured as sentences at 12-14px. A blanket `.hp-section p` would also SHRINK the larger lead paragraphs, so this is a list, not a selector trick. */ body .hp-footer__bar, body .hp-footer__tagline, body .hp-email-signup__body, body .hp-email-signup__privacy, body .hp-subscribe-cta__trust, body .hp-subscribe-cta__benefits li, body .hp-empty-state p, body .hp-card > p:not([class]), body .hp-show-inquiries__checklist li, body .hp-show-feature__spec, body .hp-product-card__name, body .wc-block-grid__product-title, body .hp-breadcrumb, body .hp-pdp-breadcrumb .hp-breadcrumb, body .hp-size-step__desc, body .hp-size-note, body .hp-size-help, body .comment-form .comment-form-cookies-consent label, body .hp-contact-callout span, body .hp-contact-form__reassure, body .hp-booking-request__zone, body .hp-booking-request__reassurance, body .hp-announcement-card__excerpt, body .hp-host-card__bio, body .horizon-vault-catalog__card-preview p { font-size: var(--hp-text-base, 1rem); } } /* PHONE-ONLY LAYOUT (HORIZON-20261002-065 split it from the floors above; same rules, same order on a phone). The announcement bar: from 601px every theme makes it a fixed-height single line (38px, ellipsis), and on tablets its link is sized by line-height in the tablet block at the end; at 768 its text passes the floor as it is, and 16px uppercase in that bar would only cut more of the creator's announcement. So its 16px, tracking and flex link stay here. (On a phone hp-mobile-header.css restyles the bar again; this is the fallback under it.) */ @media (max-width: 767.98px) { body .hp-announcement-bar__link { display: inline-flex; align-items: center; min-height: 44px; } body .hp-announcement-bar { font-size: var(--hp-text-base, 1rem); } /* The announcement bar keeps its uppercase voice; the tracking eases so a 16px line does not wrap early. */ body .hp-announcement-bar { letter-spacing: 0.04em; line-height: 1.35; } /* The booking list's sticky day heading stacks with the header AND the first-visit consent banner: 72 + 38 + 124 = 29% of a 375 phone mid-scroll (predicted run, entertainer booking). While the banner shows, the heading scrolls with the list; once the visitor chooses, it sticks again. */ /* (moved below the media blocks in 1.30.1: it applies at every width) */ /* The fixed subscribe bar (D18 family): sentence, price and button in ONE row squeezed the sentence into a ~120px column. Letting it simply grow made the bar 169px, and with the header 30% of the screen: the predicted fleet run caught it. Now the sentence has its own full-width line (a one-line label, ellipsis only if a creator writes a very long one), and price + Subscribe sit on the row below: 91px, 20% with the header, measured at 375. */ body .hp-subscribe-bar { height: auto; min-height: 64px; padding-block: 0.5rem; } /* min-width:0 down the chain, or the one-line label's intrinsic width pushes the bar wider than the phone (443px at 375: the predicted run caught it). */ body .hp-subscribe-bar > .hp-container { min-width: 0; width: 100%; } body .hp-subscribe-bar__inner { flex-wrap: wrap; min-width: 0; row-gap: 0.25rem; column-gap: 0.75rem; } body .hp-subscribe-bar__text { flex: 1 0 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9375rem; } body .hp-subscribe-bar__inner > div { flex: 1 0 100%; justify-content: space-between; } } /* Floors continued, phones AND tablets (HORIZON-20261002-065): inline sizes and section 3. */ @media (max-width: 1024px) { /* Core sections that set a small size INLINE (style="font-size:...") on prose. An inline style beats every stylesheet rule, so this is the one place the layer needs !important. 1.29.1: scoped to
, not `.hp-section`. The payment-failed reasons and notice sit OUTSIDE any .hp-section on some themes, so the 1.29.0 rule never reached them (measured on a tenant after the deploy). Scoped to
OR #content: the commerce theme has no
element at all. */ body :is(main, #content) p[style*="font-size:var(--hp-text-sm)"], body :is(main, #content) p[style*="font-size:var(--hp-text-xs)"], body :is(main, #content) li[style*="font-size:var(--hp-text-sm)"], body :is(main, #content) div[style*="font-size:var(--hp-text-sm)"] { font-size: var(--hp-text-base, 1rem) !important; } /* The icon-card rows (Best Sellers, and every section built on the same markup): a title span over a muted description span, both inline-sized. The description is a sentence, so it goes to 16px; the title goes to 17px so it still reads as the heading of the pair. ⛔ These two match the inline STYLE STRING, so any edit to the style breaks them silently. Core's quick_links cards no longer match (1.41.45 and HORIZON-20261001-013 moved their styles onto tokens) and are sized by CLASS in the "QUICK-LINK CARDS" block below; these still serve the other card built on the old literals (section-library-showcase.php, `collab_roster`). */ body :is(main, #content) span[style*="color:var(--hp-text-muted);font-size:var(--hp-text-xs)"] { font-size: var(--hp-text-base, 1rem) !important; } body :is(main, #content) span[style*="font-weight:600;color:var(--hp-text);font-size:var(--hp-text-sm)"] { font-size: 1.0625rem !important; } /* ── 3. NOTHING UNDER 12px (S4) ───────────────────────────────────────── */ /* D8 platform names (10px), D20 Vault type badges (10px), shop badges, announcement-card dates, the Vault catalog type label. 12px is the floor. */ body .hp-platform-link__name, body .hp-vault-tile__type-badge, body .hp-vault-tile__type-badge *, body .hp-limited-badge, body .hp-announcement-card__date, body .hp-announcement-card__readmore, body .horizon-vault-catalog__content-type { font-size: 0.75rem; } /* 1.29.1: the same floor for INLINE 10px / 11px (the Vault tile type badge, "Secure payment via CCBill"). An inline size needs !important to move. */ body :is(main, #content) [style*="font-size:10px"], body :is(main, #content) [style*="font-size:11px"] { font-size: 0.75rem !important; } } /* PHONE-ONLY LAYOUT, continued (HORIZON-20261002-065): the "find me on" grid. Its 12px name floor is in section 3. */ @media (max-width: 767.98px) { /* ── 4. THE "FIND ME ON" BAR (D21) ───────────────────────────────────── */ /* It scrolled sideways with no cue that it scrolls (835px of chips in a 375px strip). Now an even grid of equal tiles, three across, so every platform is visible and no name is truncated (four across cut "CHATURBATE" to "CHATU..."; screenshot-checked on star at 375). */ body .hp-platform-bar__inner { flex-wrap: wrap; overflow-x: visible; } /* 1.38.6 (HORIZON-20260926-008 finding 7): Core's live_stream_on section (every /live-streams/, and the homes that carry it) puts the bar INSIDE .hp-container, so it was padded twice: 311px of grid at 375, not 343, and "CHATURBATE" / "MYFREECAMS" ended in an ellipsis. The container already sets the page edge; the bar lines up with the heading above it and gets the same width as the home bar that was checked. */ body .hp-container .hp-platform-bar__inner { padding-left: 0; padding-right: 0; } body .hp-platform-bar .hp-platform-links { display: grid !important; /* theme copies set flex with !important */ /* 106px = the longest name (MYFREECAMS, 88px at 12px / 0.03em) plus the tile's padding and border. A strip too narrow for three of those goes two across with whole names, never three with cut ones. */ grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: var(--hp-sp-2, 0.5rem) !important; width: 100%; min-width: 0; flex-shrink: 1; } body .hp-platform-bar .hp-platform-link { min-width: 0 !important; max-width: none !important; min-height: 64px; } body .hp-platform-link__name { letter-spacing: 0.03em; } } /* ── 5. CORE'S SHIPPING ESTIMATES TABLE (D14) ────────────────────────────── */ /* The only horizontal overflow in the fleet: 3-4 columns in 343px, and no CSS anywhere. Below 480px every row becomes a small block: the destination as its heading, then each price with its column name (data-label, set in src/Commerce/shipping-estimates.php). Every number stays exact and nothing scrolls sideways. */ @media (max-width: 479.98px) { body .hp-shipping-estimates__table, body .hp-shipping-estimates__table tbody, body .hp-shipping-estimates__table tr, body .hp-shipping-estimates__table th, body .hp-shipping-estimates__table td { display: block; width: 100%; } body .hp-shipping-estimates__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body .hp-shipping-estimates__table tr { padding: var(--hp-sp-3, 0.75rem) 0; border-bottom: 1px solid var(--hp-border, rgba(127, 127, 127, 0.25)); } body .hp-shipping-estimates__table th[scope="row"] { font-weight: 600; text-align: left; padding: 0 0 0.25rem; border: 0; } body .hp-shipping-estimates__table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.125rem 0; border: 0; } body .hp-shipping-estimates__table td::before { content: attr(data-label); color: var(--hp-text-muted, inherit); } body .hp-shipping-estimates__table td:empty { display: none; } } /* ── The phone header: hamburger TOP RIGHT (1.29.5) ───────────────────────── Alex, 2026-09-24: "the Hamburger to the right ... this is muscle memory for fans". It sat between the logo space and the store icons (x=87 of 375 on Trashy Imports). Now the store icons follow the logo (or start at the left edge when no logo shows on the phone) and the hamburger is always last, top right. ⛔ SCOPED to headers where the icons sit DIRECTLY in the header row (shell, entertainer, two per-client). The commerce theme nests them inside its navigation and already puts the hamburger right; an unscoped rule flipped its hamburger to the LEFT (measured on store, predicted run). Sites with no store icons (star) are untouched. No logo detection: a logo hidden on phones is still in the markup, and :has() cannot see that it is hidden (Trashy). 1.41.N (HORIZON-20261002-042): to 1024px, with the rest of the phone header (hp-mobile-header.css, PHONES AND TABLETS). At exactly 768 this block stopped at 767.98 while GeneratePress and the themes switch at 768, so Trashy's hamburger sat mid-bar there (x=314): two owners, two numbers. One number now. */ @media (max-width: 1024px) { body .inside-header:has(> .hp-header-icons) > #mobile-menu-control-wrapper { order: 99; margin-left: 0; } body .inside-header:has(> .hp-header-icons) > .hp-header-icons { order: 1; margin-left: 0; margin-right: auto; } } /* 1.30.1 (HORIZON-20260924-023): OUTSIDE every media query. The sticky booking-day heading stacks with the header and the first-visit consent banner at ANY width: at 768 it was 72 + 38 + 184 = 29% of the screen mid-scroll (entertainer /classes/, full ratchet). 1.29.1 put this inside the phone block, so tablets kept the stack. */ body:has(#hz-cc:not([hidden])) .hp-booking-day__heading { position: static; } /* 1.30.2 (HORIZON-20260924-023, S9 CLS): the 18+ gate panel is TOP-ANCHORED on a phone. The theme copies (hp-age-gate.css, four identical) centre it with `margin: auto 0`, and the panel is taller than most of the screen, so when the web fonts swap in and its height changes by ~17px the WHOLE panel moves: one tenant CLS 0.245 (Lighthouse). Top-anchored, only the text below the change moves. Predicted with injected CSS: that tenant 0.245 -> 0.086, star 0.051, another tenant 0.046, intimate 0.000; screenshots identical once loaded. */ @media (max-width: 767.98px) { body .hp-age-gate { align-items: flex-start; } body .hp-age-gate__panel { margin: 0 auto; } } /* 1.32.3 (HORIZON-20260925-018): a hero button is never narrower than its label. The theme copies (hp-components.css, all five) give the hero CTAs `flex: 1; min-width: 0` on phones, so each is forced to half the row (163px at 375) whatever its label, and `.hp-btn` is nowrap: a tenant's hero button (182px) spilled out of both sides and lost its first letter; streamer clipped too. Here a pair that fits still shares the row equally, and a pair that does not wraps to one full-width button per row (the theme already sets flex-wrap). 1rem side padding is what decides whether a pair fits: at the theme's 2rem every pair on the fleet would stack. Predicted with injected CSS at 375/390: two tenants and streamer stack; fetish widens 16px; every other hero identical; 1280 identical. Evidence: docs/research/hero-cta-label-overflow-2026-09-25/. */ @media (max-width: 767.98px) { body .hp-hero__cta .hp-btn { flex: 1 1 0; min-width: max-content; padding-inline: 1rem; } } /* QUICK-LINK CARDS, phones AND tablets (HORIZON-20261002-020). Core's quick_links section (section-library-showcase.php): a 14px title over a 12px description, both sized INLINE. This layer used to find them by matching the inline style string (section 2 above), and HORIZON-20261001-013 moved the description onto a size token, so the string stopped matching and every phone fell back to 12px (28 NEW in the full ratchet, 2026-10-02). Found by CLASS now, which no style edit can break. The pair is the one 1.29 shipped and screenshot-checked: a 17px heading over a 16px sentence. To 1024px, not 767: the signed 16px floor is measured at 768 too, where the same 12px had been blessed into the baseline. An inline size beats every stylesheet rule, hence !important. */ @media (max-width: 1024px) { body .hp-quick-link__title { font-size: 1.0625rem !important; } body .hp-quick-link__desc { font-size: var(--hp-text-base, 1rem) !important; } } /* TABLETS ONLY (768-1024px): what a phone does not need. Each rule here was measured failing at tablet widths only, so it cannot change a phone. (HORIZON-20261002-065 removed this block's shop category tab and Broadcast share link rules: the floors above now reach 1024 and carry both.) */ @media (min-width: 768px) and (max-width: 1024px) { /* HORIZON-20261002-020: the announcement-bar link was 436x18 at 768 (three tenants). From 601px every theme copy fixes the bar at --hp-announce-h: 38px, and the phone block's 44px rule stops at 767px. A bar that CARRIES A LINK is 44px tall here and the link fills it. line-height, not flex, so the theme's one-line ellipsis still works. The header follows the variable and hp-theme.js reads the bar's real height, so the absolute-to-fixed hand-off stays seamless. A bar with no link keeps 38px; the client's words are untouched. */ body.hp:has(> .hp-announcement-bar > .hp-announcement-bar__link) { --hp-announce-h: 44px; } body .hp-announcement-bar > .hp-announcement-bar__link { line-height: var(--hp-announce-h, 44px); } /* HORIZON-20261002-065. The comment form's "save my name" box is 13px and measured through its