/* LOOK-1 · ONE LOOK AND FEEL ACROSS THE TOP-LEVEL PAGES (Home, Calendar, News, Community, Board). Rich, 2026-10-27 20:33 CT, with production screenshots: "not all the pages have the same look and feel". Order: copilot/drafts drafts/flywheel/orders/LOOK-1.md (contract + Amendment 1); DEC-2026-10-382 (ships in 4.6, CSS first; if EYE or Rich's look fails, it is cut and the soft launch goes on the current look). CSS FIRST. Every rule here is scoped to one of the five page sections (#whats-happening, #block-calendar, #news-block, #browse, #community-board) or to the shared hooks the markup now carries: .ba-look-head the page header container (one per page) .ba-look-chips the page's filter-chip row Colors are the site tokens only (--ba-*), so Light and Dark follow the theme; no new colors. No behavior, no copy. Loaded once, last in (index.html), so these rules come after the inline blocks they unify. Held by scripts/tests/look-1.test.js; screenshots by scripts/tests/look-1-shots.mjs. */ /* ── 1 · ONE PAGE HEADER ───────────────────────────────────────────────────────────────────────────────────────── Eyebrow, the page's H1, one plain sentence. The H1 is the shared .ba-page-title scale on every page; Home keeps its greeting (the one personal page) and its card, at the same type size. */ #whats-happening #baGreeting.ba-look-head .ux-greet-title, #browse .ux-cm-hero.ba-look-head .ux-bz-title, #community-board .ba-look-head .ba-page-title, #block-calendar .ba-look-head .ba-page-title, #news-block .ba-look-head .ba-page-title{ font-family:var(--ba-font-body);font-size:clamp(28px,3.2vw,38px);font-weight:800;line-height:1.06; letter-spacing:-0.028em;color:var(--ba-text);text-transform:none;} #browse .ux-cm-hero.ba-look-head .ux-bz-title, #community-board .ba-look-head .ba-page-title{margin:0;} /* The sentence under the H1: one size and color on every page. */ #whats-happening #baGreeting.ba-look-head .ux-greet-sub, #browse .ux-cm-hero.ba-look-head .ux-bz-sub, #community-board .ba-look-head .ba-page-lede, #news-block .ba-look-head .ba-page-lede{ font-family:var(--ba-font-body);font-size:16px;font-weight:500;line-height:1.45;color:var(--ba-text-secondary);} #browse .ux-cm-hero.ba-look-head .ux-bz-sub{margin:var(--ba-s2) 0 var(--ba-s3);max-width:62ch;} #community-board .ba-look-head .ba-page-lede{margin:var(--ba-s2) 0 0;max-width:62ch;} /* Community: no tinted header card. The eyebrow, title and sentence sit on the page like every other page's; the filter field and the privacy line stay under them, unchanged. */ #browse .ux-cm-hero.ba-look-head{background:none;border:0;border-radius:0;box-shadow:none;padding:0;} #browse .ux-cm-hero.ba-look-head .ba-page-eyebrow{margin-bottom:var(--ba-s2);} /* Board: title first, the Board/Marketplace switch under it (the switch still hides with Market off: body.ba-market-off .ba-bm-toggle in index.html). */ #community-board .ba-look-head{margin-bottom:var(--ba-s4);} @media(max-width:600px){ #whats-happening #baGreeting.ba-look-head .ux-greet-title, #browse .ux-cm-hero.ba-look-head .ux-bz-title, #community-board .ba-look-head .ba-page-title, #block-calendar .ba-look-head .ba-page-title, #news-block .ba-look-head .ba-page-title{font-size:28px;line-height:1.08;} #whats-happening #baGreeting.ba-look-head .ux-greet-sub, #browse .ux-cm-hero.ba-look-head .ux-bz-sub, #community-board .ba-look-head .ba-page-lede, #news-block .ba-look-head .ba-page-lede{font-size:15px;} } /* ── 2 · ONE CHIP STYLE (the Calendar / Board .ba-chip) ────────────────────────────────────────────────────────── News's filter pills were large and dark-filled when selected; they now wear the .ba-chip look: hairline outline, secondary text, mint fill and accent ink when selected. Their phone tap height (44px) is kept. */ #news-block .ba-look-chips .nb-seg{border:0;background:none;padding:0;gap:var(--ba-s2);} #news-block .ba-look-chips .nb-seg-btn, #news-block .ba-look-chips .nb-topic, #news-block .ba-look-chips .nb-topic-trigger, #news-block .nb-topics .nb-topic{ min-height:32px;padding:0 14px;border-radius:var(--ba-r-pill);border:1px solid var(--ba-line); background:none;box-shadow:none;color:var(--ba-text-secondary); font-family:var(--ba-font-body);font-size:12.5px;font-weight:600;} #news-block .ba-look-chips .nb-seg-btn:hover, #news-block .ba-look-chips .nb-topic:hover, #news-block .ba-look-chips .nb-topic-trigger:hover, #news-block .nb-topics .nb-topic:hover{border-color:var(--ba-line-strong);color:var(--ba-text);background:none;} #news-block .ba-look-chips .nb-seg-btn[aria-selected="true"], #news-block .ba-look-chips .nb-topic[aria-pressed="true"], #news-block .nb-topics .nb-topic[aria-pressed="true"]{ border-color:var(--ba-accent-line);background:var(--ba-accent-soft);color:var(--ba-accent-ink);font-weight:600;} @media(max-width:680px){ #news-block .ba-look-chips .nb-seg-btn, #news-block .ba-look-chips .nb-topic-trigger{min-height:44px;font-size:13.5px;} } /* ── 3 · ONE BUTTON HIERARCHY ──────────────────────────────────────────────────────────────────────────────────── Solid = the page's one primary (unchanged). Secondary = outlined, no tint: Calendar's "+ Add an Event" and the Board's "Post to the block" were tinted fills that read as a third kind of button. */ #block-calendar .dir-btn.coral, #community-board .dir-btn.teal{background:none;border:1px solid var(--ba-accent-line);color:var(--ba-accent-ink); border-radius:var(--ba-r-pill);letter-spacing:normal;} #block-calendar .dir-btn.coral:hover, #community-board .dir-btn.teal:hover{background:var(--ba-accent-soft);} /* ── 4 · ONE SECTION HEADING STYLE: sentence case, the Home size ───────────────────────────────────────────────── Home's section heading ("What's new on the block") is the reference. The Board's ALL CAPS "ASK & SHARE" card title and its monospace "NEEDS YOU" label take it. The words are unchanged; only their case and size. */ #community-board .comm-card-title, #community-board .ba-sec-label[role="heading"], #block-calendar .ba-sec-label[role="heading"], #news-block .ba-sec-label[role="heading"], #browse .ba-sec-label[role="heading"]{ font-family:var(--ba-font-body);font-size:clamp(19px,1.7vw,23px);font-weight:800;line-height:1.2; letter-spacing:-0.01em;text-transform:none;color:var(--ba-text);} /* ── 5 · ONE LINK STYLE: "Label →" for navigation; underline only inside running text ──────────────────────────── */ #block-calendar .ba-calmine-link, #community-board .ba-bp-link, #whats-happening .ba-bp-link{text-decoration:none;color:var(--ba-accent-ink);font-weight:700;} #block-calendar .ba-calmine-link::after, #community-board .ba-bp-link::after, #whats-happening .ba-bp-link::after{content:"\2192" / "";margin-left:6px;} #block-calendar .ba-calmine-link:hover, #community-board .ba-bp-link:hover, #whats-happening .ba-bp-link:hover{text-decoration:underline;text-underline-offset:2px;}