/* ============================================================================ start_pages.css -- /start and /start/ (report 119, Joseph 2026-09-28). "The 'start' pages should have the same design philosophy as the seasonal pages: full screen splash at the top, auto-scroll upon entering from a previous page, and once the auto-scroll executes, the user should be at the bottom of the page. Small navigation pages, just like the season pages." "I like the 'services cards' to be the same size everywhere, refer to the main and season pages for that." The start pages are rendered by the season pages' own template (landing.html, page_mode='start'), so the splash, the section heads, the cards and the footer ARE the season pages' rules. This file only adds what a start page has and a season page does not; every rule is scoped to html[data-page="start"], so nothing here can reach /summer, /winter, /chimney or the main page. Colours are tokens only. ============================================================================ */ /* ---- the lane pages' way back, in the splash above the title (was .hero-booking .backlink, booking_pages.css) ---- */ html[data-page="start"] .hero .start-backlink { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--mnm-muted-2-ondark); text-decoration: none; font-size: var(--mnm-fs-sm); } html[data-page="start"] .hero .start-backlink:hover, html[data-page="start"] .hero .start-backlink:focus-visible { color: var(--mnm-brand-ink); } /* ---- the cards: exactly the season pages' card, laid out in a centred row ------------------------------------------- The season pages lay their cards out with `grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))` inside a 1100 px column (landing.html .tile-grid, .services-cards-section .container-x). That sets every card's width: columns = how many 260 px cards (16 px apart) fit in the column; width = (column - gaps) / columns. A grid would leave /start's fifth card hanging on the left, so here the cards sit in a centred, wrapping row instead, and each card is given the season card's width by the same arithmetic, worked out from the same column (min(1100px, 100cqw); the section is the query container, its content box is the column the season grid sits in). Column counts step at the widths where auto-fit steps: 2 at 536 px of column, 3 at 812, 4 at 1088. The row itself may run wider than 1100 px on a wide screen, so five (/start) or six (Concrete, winter /start) of those same-size cards can share one row: the card never grows, the row just holds more of them. Where they do not all fit, the rows are balanced (3 + 2, 3 + 3) rather than 4 + 1. */ /* SP-2 (Joseph 2026-09-28): /chimney's three cards follow the same season card size, so these card-row rules are scoped to html[data-cards="season"]: the start pages and the /chimney season page. The main page's cards are another kind. */ html[data-cards="season"] .services-cards-section { container-type: inline-size; } html[data-cards="season"] .services-cards-section .container-x { max-width: none; } html[data-cards="season"] .start-grid { --mnm-start-gap: var(--vs-card-gap, 16px); --mnm-start-cols: 1; --mnm-start-card-w: calc((min(1100px, 100cqw) - (var(--mnm-start-cols) - 1) * var(--mnm-start-gap)) / var(--mnm-start-cols)); --mnm-start-row: var(--mnm-start-cols); display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--mnm-start-gap); max-width: calc(var(--mnm-start-row) * var(--mnm-start-card-w) + (var(--mnm-start-row) - 1) * var(--mnm-start-gap)); margin: 0 auto; } html[data-cards="season"] .start-grid > .tile { flex: 0 0 var(--mnm-start-card-w); max-width: 100%; min-width: 0; } @container (min-width: 536px) { html[data-cards="season"] .start-grid { --mnm-start-cols: 2; } } @container (min-width: 812px) { html[data-cards="season"] .start-grid { --mnm-start-cols: 3; } } @container (min-width: 1088px) { html[data-cards="season"] .start-grid { --mnm-start-cols: 4; } /* five or six cards: 3 + 2 / 3 + 3 until the whole set fits one row of season-size (263 px) cards */ html[data-cards="season"] .start-grid[data-n="5"], html[data-cards="season"] .start-grid[data-n="6"] { --mnm-start-row: 3; } } @container (min-width: 1379px) { html[data-cards="season"] .start-grid[data-n="5"] { --mnm-start-row: 5; } } /* 5 x 263 + 4 x 16 */ @container (min-width: 1658px) { html[data-cards="season"] .start-grid[data-n="6"] { --mnm-start-row: 6; } } /* 6 x 263 + 5 x 16 */ /* Card names wrap, never an ellipsis (kept from report 114): the season card already wraps; this only makes sure a single long word can break in the narrowest column instead of running out of the card. */ html[data-page="start"] .tile h3 { overflow-wrap: anywhere; } /* ---- the section head: the season pages' label, title and lead, with the lead where the lead asks to be ------------- landing.html gives every .section-title a 50 px bottom margin (meant for sections that go straight into content) and the cards' .section-lead an 8 px top margin; the bigger one wins, so on the season pages the lead floats 50 px under its title. Here the lead sits 8 px under it, as its own rule says. 42 px back, which is what lets a two-row lane (Concrete, six cards) end at the bottom of a 1440 x 900 screen. Sizes and fonts are untouched. */ html[data-page="start"] .services-cards-section .section-title { margin-bottom: 8px; } /* ---- the one line under the cards: the general request and the phone (was the booking page's .foot) ------------- */ html[data-page="start"] .start-foot { margin: 20px 0 0; text-align: center; font-size: var(--mnm-fs-sm); color: var(--mnm-muted-2); } html[data-page="start"] .start-foot a { color: var(--mnm-accent); font-weight: 600; text-decoration: none; } html[data-page="start"] .start-foot a:hover, html[data-page="start"] .start-foot a:focus-visible { text-decoration: underline; } /* ---- Dev pick 10 (2026-10-01, Joseph: "white background, replace with what we use for masonery page"), corrected by PKS-4 (2026-10-01 7:51 PM, Joseph: "No, I meant /summer's look instead") ----------------------------- This page's services-cards-section used to sit on the plain --mnm-bg (near white). The first build pinned it to chimney's lime-wash ground; this pins it to /summer's instead -- which, since /summer never overrides --mnm-bg itself, is the same plain base tone, just fixed here so it holds regardless of the page's actual current-season look (--mnm-bg-summer, tokens.css). */ html[data-page="start"] .services-cards-section { background: var(--mnm-bg-summer); } /* ---- Dev pick 9 (2026-10-01): the pale-blue/white "winter" look for the winter cards /start can show alongside its regular lanes (?winter=cards -- see quote_lanes() in app.py). Same tokens the availability calendar already uses for a winter day, not a new colour. */ html[data-page="start"] .tile.tile-winter { background: var(--mnm-avail-winter-bg); border-color: var(--mnm-avail-winter-line); } html[data-page="start"] .tile.tile-winter .ico { color: var(--mnm-avail-winter-line); } /* a11y (report 165 #2, /start): --mnm-avail-winter-line on --mnm-avail-winter-bg measured 1.67:1 for this text (axe: serious) -- it is a border/icon tint, not built for text contrast (availability.html's own .daynum rule already keeps that pattern's number on --mnm-ink for the same reason). --mnm-ink-blue-2 keeps the "winter blue" family (already used elsewhere on this site) and clears AA at 5.4:1. */ html[data-page="start"] .tile.tile-winter .go { color: var(--mnm-ink-blue-2); } html[data-page="start"] .tile.tile-winter:hover { border-color: var(--mnm-avail-winter-line); } /* ---- Queue job 29 / report 211 (Joseph, CRL-15, 2026-10-09): at 1440x900 /start ended 84 px below where the footer link "/start#services" lands (the page-length rule: the cards are meant to be the end of the page; 1280x800 keeps its one accepted exception, SP-1). Nothing here touches a card's own size, padding or gap (Joseph: "the 'services cards' to be the same size everywhere") -- only /start's OWN room around them: the section's top/bottom padding, the gap under the lead line, the title's own bottom margin, and the gap above the one line under the cards. Scoped to html[data-start-root], NOT html[data-page="start"] -- a /start/ sub-page carries data-page="start" too but has 3-6 cards (one short row), already a shorter page than 1440x900's own viewport; trying this same cut there pushed its cards further DOWN after the auto-scroll (less page to scroll means less of the hero can be pushed off-screen), breaking this test's own `0 <= top <= 260` check on /start/masonry_repair. data-start-root is the top-level page alone (landing.html), so /summer, /winter, /chimney, / and every /start/ are untouched -- proved by pagediff (report) and by this file's own test staying green on the lanes. */ html[data-start-root] .services-cards-section { padding-top: 28px; padding-bottom: 16px; } html[data-start-root] .services-cards-section .section-title { margin-bottom: 4px; } html[data-start-root] .services-cards-section .section-lead { margin-bottom: 14px; } html[data-start-root] .start-foot { margin-top: 10px; } /* ---- footer room for the chat button (kept from report 114) -------------------------------------------------------- The chat button is fixed in the bottom-right corner (_chat_widget.html: a 171 x 62 pill 22 px in, a 52 px circle 16 px in at 480 px and under). On a page this short the footer is on screen whenever the cards are, so the footer keeps that corner clear on these pages only: the links row stops short of the pill, and on a phone the footer ends with enough room under its last line that nothing in it sits under the circle when scrolled to the bottom. */ html[data-page="start"] .site-footer-links { padding-right: 200px; } @media (max-width: 480px) { html[data-page="start"] .site-footer-links { padding-right: 0; } html[data-page="start"] .site-footer { padding-bottom: 84px; } }