/* ===== home-mobile.css — the homepage on a phone and a tablet ============ Everything here is reported-from-a-real-device work on / , and every rule is inside a media query whose widest arm is 1150px (or a coarse pointer up to 1400px, the landscape-iPad convention this repo already uses in touch.css). A mouse on a window wider than 1150px matches none of it, so the desktop homepage — which the school is happy with — is byte-for-byte unchanged. Its own file for the standing reason: src/legacy/body.html and public/legacy/design.css are GENERATED by `npm run convert:design`, and anything written there is silently reverted by the next run. Loaded after responsive.css and hero-clearance.css so it settles over their repairs rather than under them. */ /* ── 1. THE HERO ON A PHONE ─────────────────────────────────────────────── Four things were reported, and they are one problem: the first screen spent its height on furniture before it got to the headline. · the two eyebrow chips wrapped onto two rows · the "THE WINTER PARK SCHOOL · WINTER PARK, FLORIDA" line wrapped onto two · so the headline — the reason for the screen — started ~70px down · and the photograph, anchored at top:31vh, sat level with the PARAGRAPH instead of level with the headline the way it does at every other width Fixed in that order: the furniture gets smaller, the headline gets bigger, the photograph comes up to meet it. */ @media (max-width: 719px) { /* The chips onto ONE row. The two together are 58 characters, so the type has to come down with the screen rather than sit at a fixed size — hence clamp() against vw. `nowrap` on the row, `nowrap` on each chip: a chip that wraps internally is worse than one that is small. The 6px status dots go; at this size they are 28px of width spent on decoration. */ /* minmax(0,1fr) on the column, not the default 1fr: a `nowrap` row is unshrinkable, so its min-content width would otherwise widen the grid TRACK and take the hero's right-hand padding with it — the paragraph and both CTAs ran to the edge of the screen. */ #page-home #home-hero { grid-template-columns: minmax(0, 1fr) !important; } #page-home #home-hero [data-edit-ok] > div:first-child { min-width: 0 !important; flex-wrap: nowrap !important; gap: 6px !important; margin-bottom: 10px !important; } #page-home #home-hero [data-edit-ok] > div:first-child > span { font-size: clamp(8px, 2.2vw, 11px) !important; letter-spacing: .02em !important; padding: 6px 10px !important; gap: 0 !important; white-space: nowrap !important; min-width: 0 !important; } #page-home #home-hero [data-edit-ok] > div:first-child > span > span[aria-hidden="true"] { display: none !important; } /* The place line onto one row as well — smaller, and with most of the .22em tracking given back, which is where its width was going. */ #page-home #home-hero h1 ~ p:first-of-type, #page-home #home-hero [data-edit-ok] > p:first-of-type { font-size: clamp(9.5px, 2.8vw, 12px) !important; letter-spacing: .09em !important; margin: 0 0 10px !important; } /* Less air under the fixed header — the furniture above the headline is now small enough that it does not need 30px of run-up. */ :root { --wps-hero-gap-top: 14px; } /* The headline, bigger. 14vw against 7.6ch: the cap is what keeps "leads the" from running under the photograph, and because ch scales with the font the two stay in proportion as the screen changes. */ #page-home #heroH1 { font-size: 13.4vw !important; max-width: 8.4ch !important; } /* The photograph up to the headline. Measured, not chosen: at 17vh its top lands within 2px of the headline's first line and its bottom within 1px of the headline's last, so the picture spans the headline exactly the way it does on a tablet and on a desktop — and, because it now ENDS where the headline ends, nothing of it is left sitting behind the paragraph below. vh rather than px because the section's own padding is viewport-based and a pixel value drifts the moment the address bar collapses. */ #page-home #heroPhotoCol { top: 17vh !important; width: 34vw !important; right: -3vw !important; } /* NOTHING BEHIND THE PARAGRAPH. "Machines will always know more facts than your child…" is the one paragraph on the site that has to be read, and it was being read over a drifting tan arch, a brown square and two circles. They are ambient decoration with no meaning; on a screen this size they are noise directly under 15px type. The blob and the photograph's own arch stay — they are big, pale and behind the whole column, not behind a line of text. */ #page-home #home-hero > div[style*="animation:drift"], #page-home #home-hero > div[style*="animation:drift2"] { display: none !important; } /* The paragraph gets its own clear band under the headline. */ #page-home #home-hero h1 + p { position: relative !important; z-index: 3 !important; margin-top: 22px !important; } } /* Very small phones: the same shape, one notch down. */ @media (max-width: 379px) { #page-home #heroH1 { font-size: 12.8vw !important; } #page-home #heroPhotoCol { top: 16vh !important; } } /* ── 2. CLEARANCE ROUND THE WAVY SEAMS — SUPERSEDED, deliberately empty ─── Phase 1b put five hand-tuned paddings here, one per reported seam, with a doubled-ID selector to out-specify rhythm.css. They worked, and they were the wrong shape of fix: five sections on one page, while 174 seamed sections across the other 31 pages had exactly the same fault and went untouched. Two of the five also overshot — measured at 234px and 218px of genuine dead space, which is the "way too much space in some places" that came back. The rule is now systemic and lives in rhythm.css: padding derived from the seam depth plus one constant, so every section on every page gets the same visible air. Nothing is needed here. Kept as a note rather than deleted so the next session does not re-add per-section paddings and end up with two sources of truth for the same measurement. */ /* ── 3. THE POSTCARD ────────────────────────────────────────────────────── Reported from a tablet: the black text overflows into the stamp pane, the card is cramped, and the photograph of the entrance is a stamp. There were two causes, and the second was a previous repair. 1. The postcard's own type is sized in VIEWPORT units — clamp(30px,3.4vw,44px) and friends — while the card is sized by its grid column. On a desktop the two agree. At 1007px the card is 560px wide and its headline is still being scaled by a 1007px viewport. 2. responsive.css tried to hold the card's SHAPE below 1150px by pinning it to 560px, forcing `white-space:nowrap` on every line inside it, and then scaling the whole card down with transform() on the small breakpoints. Lines that cannot wrap do not stay inside a 560px card — they run straight out of their column and under the stamp pane, which is exactly the overlap in the screenshot. And a card scaled to .53 on a 390px phone is a postcard rendered at 53% — the type goes with it. So the nowrap-and-scale approach is replaced by an ordinary responsive one: the card is fluid up to 560px, its type is stated in pixels so it stops tracking the viewport, the lines wrap like lines, and the panes stack on a phone instead of shrinking. Nothing is scaled, so nothing is illegible. */ @media (max-width: 1150px), (max-width: 1400px) and (pointer: coarse) { /* One column for the section, and a card that fits the screen it is on. `transform` without !important on purpose: it has to beat responsive.css's scale() and still lose to the fly-in animation, which is what paints the card arriving. */ #page-home #home-built-here > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: clamp(34px, 6vw, 56px) !important; } #page-home #postcardScene { width: 100%; max-width: 560px; margin: 0 auto; transform: none; } /* Lines wrap. The city line is the one exception — "Winter Park, FL" broken across two lines is not a postcard. */ #page-home #postcardBody p, #page-home #postcardBody span { white-space: normal !important; } #page-home #postcardBody p[data-land="2"] { white-space: nowrap !important; } /* ...and the polaroid's handwritten caption, which is one line by design and is sized to its frame. */ #page-home #postcardStub > div[data-no-edit] > span[aria-hidden="true"] { white-space: nowrap !important; font-size: 14px !important; } /* Type, decoupled from the viewport. */ #page-home #postcardBody p[data-land="1"] { font-size: 32px !important; } #page-home #postcardBody p[data-land="2"] { font-size: 29px !important; } #page-home #postcardBody p[data-land="3"] { font-size: 20px !important; line-height: 1.45 !important; } #page-home #postcardBody div[data-land="4"] { font-size: 13.5px !important; line-height: 1.5 !important; } #page-home #postcardBody div[data-land="5"] > span { font-size: 19px !important; } /* A little more room for the message, a little less for the stamp pane. */ #page-home #postcardBody { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr) !important; } #page-home #postcardBody > div:first-child { padding: 26px 20px 24px 24px !important; } #page-home #postcardStub { padding: 20px 18px 24px !important; gap: 14px !important; } /* The entrance photograph. 132px inside a 560px card is a thumbnail; the polaroid takes the stamp pane's full width and a 4:5 frame, which is the shape a snapshot actually is. */ #page-home #postcardStub > div[data-no-edit] { max-width: 100% !important; transform: rotate(1.5deg) !important; padding: 7px 7px 24px !important; } #page-home #postcardStub > div[data-no-edit] > div:first-child { height: auto !important; aspect-ratio: 4 / 5 !important; } #page-home #postcardStub > div[data-no-edit] > div:first-child image-slot { display: block !important; width: 100% !important; height: 100% !important; } } /* A phone: the two panes stack, which is what the pack itself does below 1080px and what responsive.css was overriding. The stamps and the polaroid sit on one row so the stub does not become a 400px column of its own, and nothing is scaled — the card is simply narrower. */ @media (max-width: 719px) { #page-home #postcardBody { grid-template-columns: minmax(0, 1fr) !important; } #page-home #postcardStub { border-left: 0 !important; border-top: 2px dashed rgba(34, 48, 30, .18) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 150px !important; align-items: start !important; gap: 16px !important; } #page-home #postcardStub > div:first-child { grid-column: 1; } #page-home #postcardStub > div[data-no-edit] { grid-column: 2; grid-row: 1 / span 2; max-width: 150px !important; align-self: start !important; } #page-home #postcardStub > div[data-land="5"] { grid-column: 1; margin-top: 0 !important; } #page-home #postcardBody p[data-land="1"] { font-size: 29px !important; } #page-home #postcardBody p[data-land="2"] { font-size: 26px !important; } } /* The fold and other very narrow phones: the stamp pane stops being two columns as well — 150px of polaroid beside 140px of address lines is two half-columns, not a layout. */ @media (max-width: 470px) { #page-home #postcardStub { grid-template-columns: minmax(0, 1fr) !important; } #page-home #postcardStub > div[data-no-edit] { grid-column: 1; grid-row: auto; max-width: 200px !important; margin: 0 auto !important; } #page-home #postcardBody p[data-land="2"] { font-size: 23px !important; } } /* ── 4. THE THIRD CARD IN "THE THREE THINGS EVERY FAMILY ASKS FOR" ──────── `repeat(auto-fit,minmax(300px,1fr))` gives two columns at tablet width, so the calendar card — the third of three — sits alone on row 2 next to an empty half. Reported as "just an empty space". It spans both columns instead, which is the normal answer to an orphan in a two-up grid and keeps the three cards reading as one set. */ @media (min-width: 720px) and (max-width: 1150px) { #page-home #home-practical-card-3 { grid-column: 1 / -1 !important; } /* Spanning means it is wide and short, so it lays itself out sideways: the calendar chip on the left, the words beside it. */ #page-home #home-practical-card-3 { display: grid !important; grid-template-columns: minmax(0, 320px) minmax(0, 1fr) !important; column-gap: 30px !important; align-items: center !important; } #page-home #home-practical-card-3 > :first-child { grid-column: 1 / -1; } } /* ── 5. THE GAP ABOVE THE FOOTER ────────────────────────────────────────── #home-visit closes the page with two buttons and then 20vh/16vh of empty dark green before the footer's scalloped edge. On a desktop that is air; on a tablet, where vh is large relative to the content, it read as a fault. The curve comes up closer to the buttons. */ @media (max-width: 1150px), (max-width: 1400px) and (pointer: coarse) { main.page#page-home > section#home-visit#home-visit { padding-top: calc(5vh + 96px) !important; padding-bottom: 7vh !important; } #page-home #home-visit > h2 { font-size: clamp(38px, 9vw, 74px) !important; } #page-home #home-visit > p[style*="Caveat"] { margin: 3vh auto 4vh !important; } } /* ═══════════════════════════════════════════════════════════════ 08 · THE BIRD FEEDER CHALLENGE — the timeline rail stops running through the words. The section draws its journey as one squiggly SVG spine: `position:absolute; left:4vw; width:60px; z-index:3`, with the four CAPE steps down the page beside it. The spine's left edge scales with the viewport but its 60px WIDTH does not, while the section's own padding is a flat 8vw. Measured, left edge → right edge of the rail against where the text actually starts: 1440 rail 58–118 text 115 3px into the text 1007 rail 40–100 text 80 20px into the text 768 rail 31– 91 text 61 30px into the text 390 rail 16– 76 text 31 45px into the text So on a phone the spine is drawn straight down the middle of every heading and paragraph in the section — this is the "lines on top of the text" in the school's screenshots, and it was already wrong on both tablet sizes. Below 1150px the spine moves into the margin and narrows to a slender left edge (the SVG is preserveAspectRatio="none", so it squashes to a near-straight line rather than clipping), and the section is padded to clear it. The journey still reads top to bottom; nothing is drawn over a word. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1150px) { #home-bird-feeder-challenge > svg[viewBox="0 0 60 1200"] { left: 0 !important; width: 26px !important; opacity: .55; } #home-bird-feeder-challenge { padding-left: 40px !important; padding-right: 24px !important; } } /* Under 470px the gutter is worth more than the spine: 40px of left padding out of 390 is a tenth of the screen given to a decoration. */ @media (max-width: 470px) { #home-bird-feeder-challenge > svg[viewBox="0 0 60 1200"] { width: 18px !important; } #home-bird-feeder-challenge { padding-left: 28px !important; padding-right: 20px !important; } }