/** * 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, * bridgette, trashy), so a phone fix made in one theme misses the others; Raven * 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 */ @media (max-width: 767.98px) { /* ── 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-bar__link, 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). */ body .hp-header-icon { min-width: 44px; min-height: 44px; } /* 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, trashyimports 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-announcement-bar, 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); } /* 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; } /* 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 baileyfox 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. */ 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; } /* ── 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; } body .hp-platform-bar .hp-platform-links { display: grid !important; /* theme copies set flex with !important */ grid-template-columns: repeat(auto-fill, minmax(96px, 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, Trashy, Bridgette). 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). */ @media (max-width: 767.98px) { 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: cherrycravin CLS 0.245 (Lighthouse). Top-anchored, only the text below the change moves. Predicted with injected CSS: cherrycravin 0.245 -> 0.086, star 0.051, baileyfox 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; } }