/** * Patriot University — safe-area insets (P1.8) * * Everything here is scoped to `.pu-m1`, the body class PU_MOBILE_FIRST adds. * The flag ships FALSE, so this file is inert until it is flipped as its own * deploy — the same staging PU_HOUSE_STYLE and the apparatus layer both used. * * WHY THIS COULD NOT SHIP BEFORE P0.2. `env(safe-area-inset-*)` returns 0 on * iOS unless the page opts in with `viewport-fit=cover`, which P0.2 added to * both header files. Written earlier, every rule below would have been a * no-op — present in the stylesheet, silently resolving to nothing, and * indistinguishable from working. * * THE `max()` PATTERN, EVERYWHERE. `max(, env(...))` keeps the * designed spacing where there is no inset and grows only where the hardware * takes space. `env()` alone would collapse the gap to 0 on every device * without a notch, which is most of them. * * WHAT A DESKTOP BROWSER CAN AND CANNOT TELL YOU. Chromium on a laptop reports * 0 for every inset, so `max()` resolves to the existing value and the * computed-style check confirms EXACTLY ONE THING: that this file changes * nothing where there are no insets. It cannot confirm the notch behaviour. * That needs a physical device — §13.2's release gate — and until someone runs * it, "correct on a notched iPhone" is a claim, not a measurement. */ /* ── The sticky header ─────────────────────────────────────────────────── Sticky at top:0, so in landscape on a notched iPhone the Dynamic Island overlaps its content. The inset is ADDED to the existing padding rather than replacing it: the design spacing is still wanted underneath the hardware. */ .pu-m1 .pu-header__inner { padding-top: calc(var(--iti-space-sm) + env(safe-area-inset-top, 0px)); padding-left: max(var(--iti-space-md), env(safe-area-inset-left, 0px)); padding-right: max(var(--iti-space-md), env(safe-area-inset-right, 0px)); } /* ── The reading column ────────────────────────────────────────────────── Landscape puts the notch on one side and the rounded corner on the other. Without this the first character of every line sits under the hardware. */ .pu-m1 .pu-content-area { padding-left: max(var(--iti-space-md), env(safe-area-inset-left, 0px)); padding-right: max(var(--iti-space-md), env(safe-area-inset-right, 0px)); } /* ── Fixed furniture near the bottom edge ──────────────────────────────── The home indicator is a physical strip, not a margin. A 44px scroll-to-top button sitting at `bottom: 24px` is partly under it on an iPhone without this, which also makes it hard to hit — a tap-target problem as much as a visual one. */ .pu-m1 .pu-scroll-top { bottom: max(var(--iti-space-lg), env(safe-area-inset-bottom, 0px)); right: max(var(--iti-space-lg), env(safe-area-inset-right, 0px)); } .pu-m1 .pu-toast { bottom: max(var(--iti-space-lg), env(safe-area-inset-bottom, 0px)); } /* ── Full-screen overlays ──────────────────────────────────────────────── These cover the viewport including the unsafe area, which is correct — the BACKDROP should reach the edges. Only their content needs insetting. */ .pu-m1 .pu-modal-overlay, .pu-m1 .pu-gnet-overlay { padding-top: max(4vmin, env(safe-area-inset-top, 0px)); padding-bottom: max(4vmin, env(safe-area-inset-bottom, 0px)); padding-left: max(4vmin, env(safe-area-inset-left, 0px)); padding-right: max(4vmin, env(safe-area-inset-right, 0px)); } /* ── Anchors must not land under the sticky header (P1.10) ─────────────── WCAG 2.4.11 Focus Not Obscured. Measured on a live KB article before writing anything: header 95px sticky · scroll-padding-top: auto heading lands at top = 0 -> OBSCURED by 95px Not partly. Completely. Every in-page anchor — Echo KB's own table of contents, every `#`-link, and keyboard focus scrolling — puts its target entirely behind the header. `scroll-padding-top` on the SCROLL CONTAINER is the whole fix, and the container is : setting it on does nothing here, because `document.scrollingElement` is the documentElement. SURFACE-A ONLY, and that is the part worth reading twice. Measured across four pages: kb article / page .pu-header sticky 95px home / post .hs-masthead STATIC 206px Surface B's masthead scrolls away, so it can never obscure anything. A global rule would add 95px of dead space above every anchor jump on Posts and the homepage — a regression introduced by a fix. `body.pu-house` is Surface B's own marker (functions.php `pu_house_body_class`), so `:not(.pu-house)` scopes this to the surface that actually has the problem. `:has()` is already a dependency here — `.hs .spread:has(.rail)` uses it. THE OFFSET NOW USES THE TOKEN, BECAUSE THE TOKEN IS NOW CORRECT. This read `calc(95px + …)` with the measured value inlined, because `--pu-header-h` said 64px: the spec's design target for a COLLAPSED mobile header (§9.1, "single row, 56-64px"), which does not exist yet. Using it today would leave 31px of every heading under the header — a partial fix that reads as a complete one. 95px is what the header measures now; the guard below fails if the two ever disagree, so the collapse work cannot silently invalidate this. */ html:has(body.pu-m1:not(.pu-house)) { scroll-padding-top: calc(var(--pu-header-h) + var(--iti-space-sm)); }