/* ========================================================================= quizflix.mobile.css — the phone presentation. SCOPE, and it is absolute: every rule in this file lives inside one `@media (max-width: 767px)` block. 767 and not 768 because 768 is the app's existing breakpoint and it FIRES ON IPAD PORTRAIT — a tablet must load this file and get nothing from it. Loaded last in every so it wins on order; where a base rule is id-scoped (#media-modal …) the override is id-scoped too, because order does not beat specificity. THE FOUR RULES THIS FILE IS BUILT ON (owner, 2026-08-19): 1. DENSE, NOT BIG. No full-width slabs, no screen-filling controls. Where a control has to be 44px for Google's tap-target audit, the 44px is the HIT AREA and the ink stays small — padding and min-height, never a bigger box with a bigger fill. 2. PAGED, NOT SCROLLED. Long prose folds behind a control. "I rather remove stuff and hide it in buttons than have it all cluttered up." 3. SOLID CHROME. Nothing transparent over a photograph, nothing floating over a heading. 4. CUT FOR MOBILE. Decoration is deleted here, not reflowed: ad slots, the Ken Burns pan, the hover transforms. Priority order of the sections below is the owner's: the public front door (lander) and the Featured blog come first — they are what a stranger sees. ========================================================================= */ @media (max-width: 767px) { /* ── 0. GROUND ───────────────────────────────────────────────────────── */ html { /* Stops iOS inflating text in a rotated column, which is what makes a carefully sized line suddenly wrap on a phone that is lying down. */ -webkit-text-size-adjust: 100%; /* The public navbar is `position: fixed` and 52px tall (section 1), so it covers the top 52px of everything. A snapped section is aligned to `scroll-padding-top: 52px` — its start edge lands UNDER the bar — so a section that is 100svh tall has its last 52px below the fold and is not "one screen" at all. Caught on an SE, where row 3's photograph was cut by the viewport edge in exactly that band. Every full-view section below is `calc(100svh - var(--m-bar))`. One number, because the bar's height and this subtraction must never drift apart. */ --m-bar: 52px; /* The poster on a paged portal screen (section 7.1). Height, because that is what has to fit the screen; the width is this times the card's own 132:240 ratio so the crop never changes. `svh` so a tall phone gets a bigger card instead of more empty page, capped so it cannot run away on a tablet-sized phone. */ --m-poster: min(52svh, 400px); /* 🛑 A JOIN GRADIENT IS A TRANSITION, NOT A TEXT PLATE. Owner, 2026-08-19: "The gradient is a transition not the thing that sits behind the text they should not be related." This is how deep the header image dissolves into the page at its BOTTOM edge, and it is the only thing that number describes. It is not sized to a heading, it does not move when a heading moves, and nothing is allowed to derive its own legibility from it — text carries a `text-shadow` instead. The film page has had exactly this shape since 2026-08-17 (`--film-fade-h` in theme/quizflix/film.css: a fixed band at the seam, with the logo held clear of it by a derived padding). This is the same idea for the `.hero-section` screens, kept as its own token because a hero band can be shorter than a film header. */ --m-join: 120px; } body { /* Google's mobile-friendly test fails a page whose content is wider than the viewport. Several rows here are 240px cards and a 400px trailer box; they are each fixed below, and this is the backstop so one missed rule cannot make the whole page slide sideways. */ overflow-x: hidden; } img, video, iframe { max-width: 100%; } /* Motion that costs battery and buys nothing at this size. */ .hero-bg-anim { animation: none !important; } /* Decoration that is not content. Cut, per rule 4. */ .ad-slot { display: none !important; } /* ── 1. THE PUBLIC NAVBAR ──────────────────────────────────────────── Owner: "The transparency in the header looks like shit when an image is behind it." It is worse than a phone problem. `.navbar.scrolled` — the only rule that makes the bar opaque — is applied by assets/script/landing/script.js, and that file is loaded by index.html ALONE. So on /blog/, /blog/feature and /info/ the header is permanently the transparent gradient, at every width. This makes it solid on phones outright rather than depending on a scroll handler that four of the five public pages never load. */ .navbar, .navbar.scrolled { height: 52px; padding: 0 14px; background: #0b0b0b; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, 0.09); } /* The wordmark is a link home on every public page, so it is a tap target: 61x23 measured, which fails the audit. The ink stays 1.45rem; the box grows. */ .navbar .logo, .navbar a.logo { font-size: 1.45rem; line-height: 1; min-height: 44px; display: inline-flex; align-items: center; } .nav-right { gap: 8px; } /* Small ink, legal hit area: the 44px is min-height, the type stays 0.8rem and the fill stays the size of the words. */ .nav-right .nav-link { font-size: 0.85rem; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; } /* BETA FIX 1 — there is ONE control here now and it is a plain link, so the `.nav-right .btn-sm` rule that sized the red Sign Up pill is gone with it. `.nav-auth` is styled in landing.css at every width; this only buys back the tap target. */ .nav-right .nav-auth { font-size: 0.85rem; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; } /* ── 2. THE LANDER ──────────────────────────────────────────────────── */ /* BETA MOBILE FIX 2 (owner, 2026-08-19): "on mobile the header is the background it should be the full page. The text should be below it and scroll up over the image. The text background should be gradient transparent top to solid black at the very bottom so the image slowly fades away behind the text as it scrolls down." Three parts, and only one of them is new markup-free luck: - `.hero-bg-anim` is ALREADY `position: fixed` (landing.css). So the photograph does not move and the text passing over it is a consequence of scrolling, not of a parallax script. Nothing to add. - The text is pushed down by 56svh of padding INSIDE .hero-content, so the first thing on the screen is a clean, uninterrupted frame of the picture and the copy begins below it. - That padding is inside the gradient box, not above it, which is what makes the fade continuous: transparent where the image is clean, solid black by the bottom edge, and the section under the hero is black too, so the seam does not exist. Rule 3 (solid chrome) is not violated. That rule is about a BAR or a CONTROL floating on a photo. This is the opposite: the copy brings its own ground with it. `100svh` not `100vh`: on iOS Safari `vh` is the height with the address bar retracted, so 100vh puts the call-to-action under the browser chrome on first paint. */ .hero { height: auto; min-height: 100svh; padding: 0; display: flex; align-items: flex-end; } /* 🔴 `.hero .hero-content`, NEVER BARE `.hero-content`. This rule is the LANDER's text plate — a gradient that runs to solid black and carries the copy over a fixed photograph. `.hero-content` is also the class every PORTAL hero puts its heading in (home.js, arcade.js, search.js, profile.js, quizflix.render.logic.js), and this stylesheet loads on those pages too. Unscoped, the plate travelled: a black-to-transparent box wrapped around the title of every portal screen, sized to the text and moving with it. That is the defect the owner reported on 2026-08-19 — "behind the text is that black gradient that is the top of the content for blending not a shadow to make text visible… That gradient needs to be where it belongs not following text around" — and it is why the last three rounds of hero work kept finding a black band no hero rule accounted for. The lander's hero is `.hero`; the portals' is `.hero-section`, so one ancestor separates them for good. ⚠️ quizflix.responsive.css already carries the mirror-image warning at `.hero-section:not(.exercise-hero) .hero-content` — a bare `.hero-*` rule here restyles the lander. It is the same trap from the other side. */ .hero .hero-content { margin-top: 0; max-width: none; width: 100%; padding: 56svh 18px 28px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 34%, rgba(0, 0, 0, 0.55) 52%, rgba(0, 0, 0, 0.86) 74%, #000 100%); } /* The desktop vignette is a radial that reaches rgba(5,5,5,1) at 90% — on a 390px frame that is most of the picture painted out, and the owner asked for the picture. The gradient above is doing the legibility work now, so this only keeps the corners from glaring. */ .vignette { background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%); } /* 12px floor, here and everywhere below. Google's mobile-friendly test fails a page for "text too small to read" under it, and the desktop 0.9rem-of-a-scaled-root landed at 10.56px measured. */ .hero-tags { font-size: 0.75rem; letter-spacing: 1.4px; gap: 7px; margin-bottom: 10px; } .hero h1, .hero .hero-headline { /* 5rem is 80px — two words a line on a 390px screen. Trimmed again for BETA FIX 4 ("all the headers" are too big); still the largest type on the page, which is the one place that is correct. */ font-size: 2.2rem; line-height: 1.02; margin-bottom: 10px; text-shadow: none; } .hero-sub { font-size: 0.95rem; line-height: 1.45; margin-bottom: 22px; /* Four lines, then it stops. The paragraph is 42 words; unclamped it is a third of the screen and it pushes both buttons below the fold. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #cfcfcf; } /* Two controls on ONE line. Stacked full-width they are the "huge buttons" the owner rejected, and they cost 60px of the first screen. */ .cta-group { display: flex; flex-direction: row; gap: 10px; } /* BETA FIX 3 — smaller and squarer than before. The 44px stays because it is the audit's hit area; what shrank is the ink and the radius, which is rule 1 exactly. The flat/no-glow treatment itself lives in landing.css so desktop gets it too. */ .cta-group .btn, .cta-group .btn-lg { flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 0 16px; font-size: 0.75rem; letter-spacing: 0.05em; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; } .cta-group .btn i { font-size: 0.8em; } /* ROUND 2 (owner, 2026-08-19): "make all the sections in the imersion method also snap to screens… Perperation and evaluation can have the image below it, you can hide the video above it. Study on the go same thing keep the image from below the text but snap that screen to view." So each `.feature-row` is its own screen. Stacked they were the "scroll for miles"; a screen each with the prose folded is the paged reading the brief asks for. The order is already text-then-picture — the rows are `flex-direction: column` and `.reverse` is neutralised — which is the "image below it" the owner describes, so nothing moves. */ .feature-row, .feature-row.reverse { display: flex; flex-direction: column; justify-content: center; gap: 14px; margin-bottom: 0; min-height: calc(100svh - var(--m-bar)); /* Tight, because the screen is the budget. An iPhone SE is 667px and row 2 is a nine-line paragraph plus a three-item checklist plus a picture; at 56/40 it ran 71px past the fold and the photo was cut by the viewport edge. Measured on 375x667, not assumed. */ padding: 40px 0 24px; scroll-snap-align: start; } /* Screen 1 shares its screen with "The Immersion Method" — the h2 is the snap point for the pair, so the row does not declare a second one 26px further down. The 62px subtraction IS that heading block — 22 padding + 26 line + 14 margin — and it is set with those numbers at #methodology below. Change one, change the other. Measured on an SE: row 1 is content-driven at 531px, so the pair has to fit 615px of usable screen. */ .feature-row:first-of-type { min-height: calc(100svh - var(--m-bar) - 62px); padding-top: 0; scroll-snap-align: none; } /* 🛑 The video is cut, on the owner's word: "you can hide the video above it." It is the only motion on the page, it is the tallest thing in the three rows, and screen 1 is the one carrying three paragraphs. Rule 4 — cut for mobile, do not reflow. */ .feature-visual.visual-1 { display: none; } .feature-visual { width: 100%; margin: 0; /* The base is a fixed 350px box. Inside a screen that also holds a heading, a paragraph and a checklist, 350px is what pushes the last list item under the fold. */ height: auto; /* svh, so the cap tracks the screen it has to fit inside: 160px on an SE, 202px on a 390x844. A fixed px would fit one phone and break the other. */ max-height: 24svh; overflow: hidden; } .feature-visual img, .feature-visual video, .feature-visual .ui-player, .feature-visual .ui-doc { width: 100%; height: auto; max-height: 24svh; object-fit: cover; display: block; border-radius: 8px; } .section-dark, .row-dark { padding-left: 0; padding-right: 0; } /* Row 2's paragraph is nine lines on a 375x667 SE and it is a single

, so `foldLandingProse()` leaves it alone — correctly: "a Read more that reveals nothing is worse than the scroll it saves." That put the row 25px past its screen on the short phone only. The picture gives the 25px back, and only where it is needed — a 390x844 has the room and keeps the larger crop. */ @media (max-height: 700px) { .feature-visual, .feature-visual img, .feature-visual video, .feature-visual .ui-player, .feature-visual .ui-doc { max-height: 19svh; } } /* The section's own 80px top/bottom is dead space once every row inside it is a full screen with its own padding. The heading keeps a band clear of the 52px bar, and that band is what .feature-row:first-of-type takes off its own height: 22 + 26 + 14 = 62. ROUND 3 (owner, 2026-08-19): "The immersion method header sits to far from the top of the screen when it is snapped into place." The 44px was measured against the top of the SECTION, but the section's start edge is already parked 52px down by scroll-padding-top, so the gap on screen was 96px. 22px reads as a margin under the bar; the 52 is not ours to spend twice. Same number at #featured-media below. */ #methodology.section-dark { padding-top: 0; padding-bottom: 0; } #methodology .section-header { padding-top: 22px; margin-bottom: 14px; scroll-snap-align: start; } .container { padding-left: 16px; padding-right: 16px; } /* BETA FIX 4/5 (owner, 2026-08-19): "The text on the header featured attraction header is too big as are all the headers… The immersion method part also the headers and text are all too big." One step down across the board. .strip-title inherits this — it is .section-header plus a text-align, so the size lives here only. */ .section-header, .strip-title { font-size: 1.35rem; letter-spacing: 0.01em; margin-bottom: 16px; } /* Ragged-centre body copy is a desktop conceit that survives because a desktop line is 60 characters. Here it is 34, so eight centred lines is eight different left edges and the eye loses the column on every one. */ .feature-text, .feature-text h3, .feature-text p, .feature-list li { text-align: left; } .feature-text p { font-size: 0.88rem; line-height: 1.5; color: #b9b9b9; } .feature-text h3 { font-size: 1.05rem; line-height: 1.25; margin: 0 0 6px; } .step-badge { font-size: 0.78rem; margin-bottom: 5px; } /* 🔴 SCOPED TO THE LANDER, AND THAT IS THE WHOLE OF ROUND 5 ITEM 6. Owner, 2026-08-19: "the vocabulary words have made the sentences appear to be a table they are supposed to be inline with the rest of the article words they are vocabulary words not some sort of normal control." `.feature-list` is TWO DIFFERENT LISTS with one class name. On the lander it is the Immersion Method's tick list, where every

  • is an icon and a phrase. In a Featured article it is a prose list, and its items are sentences with `` glossary links inside them. The rule below makes an
  • a FLEX CONTAINER (it had to — see the tick note). A flex container turns every child into a flex item, and an anonymous text node is a child: a sentence with one vocab link in it becomes three columns — the words before, the word itself, the words after — which is the "table" the owner is looking at. Nothing was done to the vocabulary link at all; it was collateral from a fix two rounds ago on a different page. `body.page-lander` is the fence. The article's lists are left exactly as blog.css draws them. ⚠️ Anything added here must be asked the same question: is this class the lander's, or is it shared? `.feature-row`, `.feature-text` and `.feature-visual` above are lander-only markup; `.feature-list`, `.feature-card` and `.feature-title` are not. */ body.page-lander .feature-list { margin: 12px 0 0; padding: 0; list-style: none; } /* 🔴 THE TICKS SAT OUTSIDE THE PAGE. Owner, on an iPhone SE (375px): "the checkmarks in the list sit outside the page." The cause is the hanging indent this replaces — `padding-left: 22px` with `text-indent: -22px`. A hanging indent is a guess about how wide the thing that hangs is, and Font Awesome's `` is not 22px: the glyph box is the icon's own advance width PLUS the 10px `margin-right` that landing.css:463 gives it. Guess low and the icon is pulled past the container's left padding and off the page. It is width-dependent, which is why a 390px frame nearly hid it and a 375px one did not. A flex row cannot do this. The icon is a real, measured first item and the text is the second; nothing hangs, nothing overhangs, and the wrapped second line still aligns under the first because the text is its own flex item. `margin-right: 0` because the gap owns the spacing now. */ body.page-lander .feature-list li { font-size: 0.82rem; line-height: 1.35; padding: 5px 0; text-indent: 0; display: flex; align-items: flex-start; gap: 9px; } body.page-lander .feature-list li i { flex: 0 0 auto; margin-right: 0; line-height: inherit; /* Optical: the tick's ink is smaller than a cap, so it reads high against the first word without this. */ margin-top: 0.15em; } /* BETA FIX 6 (owner, 2026-08-19): "The counter section should be a snap to section and the counters can be displayed vertically instead of horizontally." This reverses the earlier "three boxes across, not three screens down" — which was the right call while the section was a 26px-tall strip among ten screens of scroll. It owns a screen now, so three across in 362px is three cramped columns for no reason. The snap is declared in section 2.9 with the other two. */ /* 🔴 …and it needs a background of its own. `.row-light` (landing.css:1063) wins over `.stats-section`'s opaque gradient on source order, and it is `--hover-overlay → --text-muted` — BOTH TRANSLUCENT. The lander's `.hero-bg-anim` is `position: fixed`, so what shows through is the cinema photograph, greyed. At 60px tall nobody saw it; at a full screen it is rule 3 broken in the most literal way there is. ⚠️ Pre-existing and NOT phone-only — it is transparent at every width. Fixed here for the phone; the desktop row is a separate call. */ .stats-section, .stats-section.row-light { background: #0c0c0c; border-top: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .stats-section { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; min-height: calc(100svh - var(--m-bar)); padding: 64px 24px; text-align: center; } .stat-box { flex: 0 0 auto; width: 100%; max-width: 260px; padding: 0; opacity: 1; } .stat-box i { font-size: 1.2rem; margin-bottom: 8px; } .stat-number { font-size: 2.6rem; line-height: 1; } .stat-label { font-size: 0.72rem; line-height: 1.2; letter-spacing: 0.14em; margin-top: 6px; } /* BETA FIX 7 — "high value high impact section text is ok but this section again is 1 view so once its close it should snap into place." The copy is untouched; it is given the screen and the snap. */ #outro { min-height: calc(100svh - var(--m-bar)); display: flex; align-items: center; padding: 56px 0; } .outro-container { padding: 0 22px; } .outro-container h3 { font-size: 1.35rem; margin-bottom: 14px; } .outro-container p { font-size: 0.9rem; line-height: 1.55; color: #b9b9b9; margin-bottom: 26px; } /* Not full width: an inline button reads as a button, a 358px red bar reads as a banner. */ .outro-container .btn-lg { min-height: 44px; padding: 0 22px; font-size: 0.75rem; letter-spacing: 0.05em; border-radius: 2px; display: inline-flex; align-items: center; } /* ── 2.9 THE FULL-VIEW SNAP SECTIONS ───────────────────────────────── Owner, 2026-08-19: the Featured Presentation, the counters and the closing pitch are each "1 view", and "once its close it should snap into place before scrolling more again." 🛑 `proximity`, never `mandatory`. That word is the owner's brief read literally — mandatory hijacks every flick, including one aimed at the three-essay Immersion Method between two snap points, and a section taller than the phone becomes unreachable in the middle. Proximity only finishes a scroll that already stopped near an edge. 🛑 Scoped to the LANDER. `html:has(body.page-lander)` and not bare `html` because this file is loaded by nineteen pages and a snap axis on the document affects every one of them. The selector is on and not because scroll-snap-type does NOT propagate body → viewport the way overflow does; on alone it silently does nothing. Browsers without :has() get the page exactly as it scrolls today. */ html:has(body.page-lander) { scroll-snap-type: y proximity; scroll-padding-top: 52px; /* 52px = the mobile navbar in section 1. Without it a snapped heading lands underneath the fixed bar. */ } body.page-lander #featured-media, body.page-lander .stats-section, body.page-lander #outro { scroll-snap-align: start; scroll-snap-stop: normal; } /* The Featured Presentation takes the screen it snaps to. ROUND 3 (owner, 2026-08-19): "the text should be at the top of the view and the cards larger, they should fill the view not look like a little band across the center." So the column starts at the top instead of centring, and the strip — still a strip — takes every pixel the title does not. 22px of top padding, the same as the Immersion heading: the 52px bar is already paid for by scroll-padding-top. */ body.page-lander #featured-media { min-height: calc(100svh - var(--m-bar)); display: flex; flex-direction: column; justify-content: flex-start; padding-top: 22px; padding-bottom: 24px; /* The 50px is desktop clearance under a hero that ends in a photograph. The mobile hero ends in solid #000 (FIX 2), so it is a black band between two black things AND it pushes the snap point off by 50px. */ margin-top: 0; } /* 🔴 THE GRADIENT THAT WAS FADING THE HERO BUTTONS. Owner, round 3: "the two buttons that still look childish are now under a gradient so they look faded down to the bottom." Not the buttons — computed style says solid #e50914 at opacity 1. `.content-strip::before` is a 150px transparent→black panel at `top: -150px` on a `z-index: 10` section, so it paints OVER the bottom 150px of the hero, which since margin-top: 0 is exactly where the call-to-action pair sits. Desktop keeps it (it feathers a hero that ends in photograph); the mobile hero already ends in solid #000, so here it only greys the controls. */ .content-strip::before { display: none; } /* 🛑 THE STRIP STAYS A FILM STRIP. Owner, 2026-08-19: "featured presentations as a film strip was fine you were not told to change that just the header text." An earlier pass turned it into a 2-column grid — scope the owner did not give, and reverted. The horizontal scrolling row IS the design; round 3 only makes the cards bigger inside it, which is what "the cards larger, they should fill the view" asks for. The card is one poster wide (78vw leaves a slice of the next one showing, which is what tells a thumb the row scrolls) and as tall as the section leaves. */ #featured-media .strip-title { flex: 0 0 auto; margin-bottom: 14px; } /* 🔴 ROUND 5 — THE ROW WAS SCROLLING UP AND DOWN. Owner, 2026-08-19: "the featured attraction row is smaller than the items causing the text to be cut in the bottom and the row to have a small scroll up down effect that needs to be fixed." Two causes, both here: 1. `overflow-x: auto` (landing.css) computes `overflow-y: auto` as well — the spec turns a `visible` axis into `auto` when the other one is not visible. Measured, the card is 529.09px inside a 529px row: a ninth of a pixel of overflow is enough for the browser to make the row scrollable, and what it cuts is the bottom of the caption bar, which is the one thing pinned to the card's bottom edge. 2. `.strip-card:hover { transform: scale(1.1) }` — on a touch screen a tap latches :hover, and a 529px card at 1.1 is 582px in a 529px row. That is a real 53px of vertical scroll, and it is why the effect showed up on the owner's phone and not in a desktop window. So: the row never scrolls vertically, and nothing inside it grows. Hover is a pointer idea; there is no pointer here. */ #featured-media .strip-container { flex: 1 1 auto; min-height: 0; align-items: stretch; justify-content: flex-start; gap: 12px; padding-bottom: 0; overflow-y: hidden; } #featured-media .strip-card { min-width: 78vw; height: auto; align-self: stretch; border-radius: 8px; } .strip-card:hover, .strip-card:focus, .strip-card:active { transform: none; z-index: auto; box-shadow: none; } /* The caption was 0.8rem on a 200px card; on a full-height poster it is the only text in the frame and it was reading as a footnote. */ /* The caption sits ON the clipped bottom edge, so it is the first thing a sub-pixel overflow eats. The extra bottom padding is the margin of error. */ #featured-media .strip-card span { font-size: 0.9rem; font-weight: 600; padding: 11px 12px 14px; line-height: 1.25; background: rgba(0, 0, 0, 0.78); } .main-footer { padding: 26px 16px; } .footer-col { margin-bottom: 18px; } /* Footer links measured 358x23 — full-bleed rows of text, two lines apart. A 40px row is both a legal target and easier to hit than a 23px one sitting 6px from its neighbour. */ .footer-col a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 40px; } /* ── 3. THE FEATURED BLOG ─────────────────────────────────────────── Owner, first complaint of the whole review: "the menu in featured is above the blog listing 13 other blogs right under the title." The cause is source order —