/* scope everything to .sm-home so it can't leak into wp-admin bar or plugins */ :root{ /* These alias the shared design tokens in assets/css/tokens.css, which loads first in . Change a colour there and the whole homepage follows. The local names are kept so the rest of this template's CSS is untouched. */ --paper:var(--bg-primary,#fbfaf7); --paper2:var(--bg-sand,#f2efe8); --ink:var(--text-main,#0a0806); --ink-soft:var(--text-muted,#6a6050); --line:var(--border-color,#e5e0d6); --green:var(--color-brand,#12814A); /* THE LOGO'S OWN GREEN. Deliberately NOT --green: the wordmark accent used to resolve to #189554 while the brandmark's rect is hardcoded #12814A, so the two halves of one lockup were 1.37x apart in luminance. #12814A also matches the printed business card, which cannot be changed after ordering. Both halves read this one value. */ --logo-green:#12814A; --sf:var(--color-accent,#e86000); --saffron:var(--color-accent,#e86000); --green-deep:var(--color-brand-deep,#12814A); --green-wash:var(--color-brand-tint,#eaf5ee); --white:var(--bg-card,#fff); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} /* ========================================================================== [hidden] MUST WIN ========================================================================== ⚠ THE `hidden` ATTRIBUTE ONLY WORKS THROUGH THE BROWSER'S OWN `[hidden]{display:none}`, WHICH ANY AUTHOR `display` RULE BEATS. So every element given a display rule silently stops responding to hidden — the JS sets the attribute, nothing happens, and the failure is invisible in code review because both halves look correct. This codebase had already hit it at least TEN times and patched it one selector at a time (.nav-burger[hidden], .sm-intro[hidden], .foot-share[hidden] and so on). Two known cases were still live: the "no businesses match" line on /businesses, which sat permanently visible showing whatever text was last written into it; and the Pinned view tab, which home.js hides with `pt.hidden = livePinned === 0` while .sm-vt-btn sets display:inline-flex — so a tab that opens an empty view could not hide itself, which is precisely the dead end the comment beside that line exists to prevent. One rule, once, ends the whole class. !important is warranted here because it has to outrank arbitrary author rules by design — that is the entire job. ========================================================================== */ [hidden] { display: none !important; } html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;} .sm-home{background:var(--paper);color:var(--ink);font-family:'Inter Tight',sans-serif;font-weight:400;line-height:1.5;overflow-x:hidden;} body{margin:0;background:var(--paper);} a{color:inherit;text-decoration:none;} ::selection{background:var(--green);color:var(--on-brand, #fff);} /* ---- type scale ---- */ .display{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-.02em;line-height:.98;} .tight{font-family:'Inter Tight',sans-serif;} /* MUTED, NOT GREEN. "Popular right now" and "Popular areas" are labels for the content beneath them. In green they read as links and competed with every other green on the page; the letter-spacing and caps already do the work of marking them as section headings. */ .eyebrow{font-family:'Inter Tight',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft,#6a6050);} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:100;background:var(--header-bg, rgba(251,251,249,.85));backdrop-filter:blur(12px);border-bottom:1px solid var(--line);} .nav-inner{max-width:1200px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:32px;} .logo{display:flex;align-items:center;gap:9px;} /* ⚠ THIS RULE WAS SILENTLY WINNING. `.logo svg` is (0,1,1) and `.logo-mark` is (0,1,0), so the mark rendered at 26px while the rule below declared 30px and the comment beneath it reasoned about a '30px mark' that never existed. Size now lives in one place: .logo-mark. */ .logo svg{width:auto;display:block;} .logo{display:inline-flex;align-items:center;gap:10px;} .logo-mark{width:32px;height:32px;border-radius:8px;flex:0 0 auto;} /* 33px (+15%, 2026-08-07), mark 32px. The old note here reasoned about the wordmark against "its own 30px mark" — but the mark was rendering at 26px, overridden by the .logo svg rule above, so that comparison was never the one on screen. Both numbers are now real and both copies of this header agree. Kept in step with .site-logo__word in style.css, which styles the SAME header on every other page. */ .logo-word{font-family:'Inter Tight',sans-serif;font-size:33px;font-weight:700;letter-spacing:-.028em;color:var(--ink);} .logo-word-accent{color:var(--logo-green);} /* The mark's fill is an inline SVG attribute, which CSS outranks — so this is what keeps the square and the wordmark on the same green in both modes. */ .logo-mark rect{fill:var(--logo-green);} :root[data-theme="dark"]{ --logo-green:#2f9d63; } /* Nudged down ~3px so the links sit just below the wordmark's centreline — at equal centring a 29px brand and 14px links read as competing for the same line. Small offset, but it makes the logo clearly lead. */ /* padding-top drops the links below the wordmark's optical centre — baseline alignment made them read as the same level in the hierarchy as the brand. Scaled with the wordmark: 3px was tuned when it was 22px, it's now 29px. */ /* align-items:center is what stops the plain text links sitting HIGHER than the button's label. Both navs are display:flex with no align-items, so they defaulted to stretch: each grew to the row's full height and its text sat at the top of that stretched box, while the button — being padded — centres its own label. Fine while every item was plain text, visibly off the moment one became a button. padding-top is left alone deliberately: it positions the whole nav group against the logo, and changing it would move the group rather than fix the mismatch inside it. */ .nav-links{display:flex;align-items:center;gap:28px;margin-left:0;align-self:center;} /* Location dropdown — pushed to the far right of the nav */ /* Mobile-only live badge that fills the empty band left of the city picker when the nav wraps. Hidden on desktop, where the hero heading does this job in place and the nav has no spare room. */ /* ⚠ VISIBLE AT EVERY WIDTH NOW. It used to be display:none by default and revealed only inside the mobile media query, because it lived in the header where desktop had its own hero. It now sits on the board's sort row, which every width has — hiding it on desktop would leave that row lopsided and the status nowhere at all. */ .nav-live{display:inline-flex;align-items:center;gap:10px; font-family:'Inter Tight',system-ui,sans-serif;font-weight:700;font-size:15px; letter-spacing:-.015em;color:var(--ink);white-space:nowrap;min-width:0; /* ⚠ auto margin, NOT justify-content — it beats the flex-end the existing media rule sets on this row, so the status stays left and the tabs stay right without either rule having to know about the other. */ margin-right:auto;} .nav-live .hero-live{width:18px;height:18px;margin:0;top:0;flex:0 0 auto;} .nav-live-txt{overflow:hidden;text-overflow:ellipsis;} /* When there is no board there is no sort row, so the bare wrapper just holds the status and keeps the same spacing below it. */ .sm-viewtoggle--bare{margin:0 0 14px;} /* ⚠ .nav-search's RULES ARE GONE WITH ITS MARKUP. The link moved to the filter row; leaving these behind would be dead CSS that the next person has to work out is unused — and worse, the margin-left:auto here was load-bearing for the header's right-alignment, so it had to be re-homed rather than just deleted. .nav-loc now carries it (see the standalone block below). */ /* ⚠ margin-left:auto MOVED HERE FROM .nav-search. That rule was what pushed the right-hand group to the edge; with the search link gone to the filter row, the picker is now the last item on the row and has to carry it, or the header collapses left and the logo and the city sit jammed together. */ .nav-loc{margin-left:auto;position:relative;} /* ── BROWSER HEADER: LOGO + BURGER, PICKER ON ITS OWN ROW BELOW ──────────── ⚠ His call. The picker moves out of the top row and sits under the divider, which is where the phone browser already put it — this makes every browser width agree instead of two arrangements needing separate reasoning. ⚠ IT STAYS INSIDE .nav IN THE MARKUP, and wraps to a second row instead of being moved. Moving it out would put it in a different parent, and the installed app still wants it up in the header beside the logo — one element cannot be in two parents, so a markup move would force a second copy, which is the duplication trap this page has paid for repeatedly. ⚠ THE DIVIDER MOVES WITH IT rather than a second line being drawn: .nav's own bottom border comes off and the picker row carries a top border instead, so there is still exactly ONE line and the picker now sits below it. Adding a border without removing the other would band the picker between two rules. The standalone block re-overrides all of this — see the app rules. */ /* ⚠ THE HEADER'S OWN BOTTOM PADDING WAS SIZED FOR A ONE-ROW HEADER. With the picker wrapped below the divider there is now a second row inside .nav, so 16px underneath it lands on top of the picker's own spacing and the board's top margin — three separate gaps stacked between the city name and Category. Halved here only; the app keeps the original, because there the header is still a single row. */ .nav-inner{flex-wrap:wrap;row-gap:0;padding-bottom:8px;} .nav{border-bottom:0;} .nav-loc{order:5;width:100%;margin-left:0;margin-top:0;padding-top:6px; border-top:1px solid var(--line);display:flex;justify-content:flex-end;} /* ⚠ FLUSH AT EVERY BROWSER WIDTH, not just wide — his call once he saw it on a phone. It was scoped to min-width:601px, which is why the pill survived here. Same declaration as the installed-app rule in style.css, still, rather than a third version of "flush". ⚠ padding:2px 0 is what removes the pill's own 8px/14px, and with the row's border-top that also collapses most of the gap that had built up: header padding, then the row's margin, then the pill's padding, three spacings stacked to say one thing. */ .nav-loc-btn{background:none;border:0;padding:2px 0;box-shadow:none;} .nav-loc-btn:hover{border-color:transparent;color:var(--green, #12814A);} /* ── ONCE THE PICKER HAS MOVED INTO THE FILTER ROW ───────────────────────── home.js relocates it and sets .sm-loc-inrow on . Everything the picker needed while it was a wrapped row inside the header is undone here, and the header goes back to one row carrying its own divider. ⚠ THE CLASS IS ON , NOT — it applies on the same paint as the move rather than a frame later. ⚠ EVERY BROWSER DECLARATION IS UNDONE, not just the visible ones: a leftover width:100% or border-top would draw a stray rule through the filter row. */ .sm-loc-inrow .nav{border-bottom:1px solid var(--line);} .sm-loc-inrow .nav-inner{padding-bottom:16px;} /* ⚠ LAST AND PUSHED RIGHT — his call. It led the row on the first pass, which put the least-changed control first and pushed the refresh icon onto a second line. margin-left:auto rather than justify-content, so it does not fight whatever the row already sets for its other children. The pill goes with it (see the rule below): with three controls plus refresh on a 390px row, the capsule's 14px of side padding was the difference between one line and two. */ .sm-int-dropdowns .nav-loc{order:99;width:auto;margin:0 0 0 auto;padding:0; border-top:0;display:inline-flex;align-items:center;} /* ⚠ THE FLUSH TREATMENT LIVES HERE, on the row's own selector, and that is not tidiness — it is the only version that can win. The base .nav-loc-btn pill rule is declared LATER in this file, so a single-class flush rule loses to it at equal specificity (which is exactly what shipped: the picker moved onto the row and arrived still wearing its pill). Two classes beats one, wherever either sits. ⚠ AND THE PICKER IS NO LONGER INSIDE .nav once home.js moves it, so anything scoped to the header stops applying to it the moment the move happens. It is a filter now, so it reads like its neighbours — Category and Area are 14px on this row. */ .sm-int-dropdowns .nav-loc-btn{background:none;border:0;padding:2px 0; box-shadow:none;font-size:14px;} .sm-int-dropdowns .nav-loc-btn:hover{border-color:transparent;color:var(--green, #12814A);} .nav-loc-btn:hover .nav-loc-caret{color:var(--green, #12814A);} .nav-loc-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--bg-card, #fff);font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:600;color:var(--ink);transition:border-color .18s;} .nav-loc-btn::-webkit-details-marker{display:none;} .nav-loc-btn:hover{border-color:var(--ink-soft);} /* ⚠ NO PILL ON THE WIDE LAYOUT — his call. The border and filled background were doing a job that only exists on a phone: on a cramped header the picker has to read as tappable, so it is drawn as a control. On a wide header there is space, the caret already says it opens, and a bordered white capsule floating on the right of an otherwise open row reads as a second button competing with the nav. ⚠ THE PADDING STAYS. Stripping it would shrink the tap target and shift the text against the header edge; only the border and fill go, so nothing moves. ⚠ Hover keeps a visible change — a control that looks like plain text still has to answer "is this clickable" when you point at it. */ .nav-loc-pin{font-size:12px;} .nav-loc-caret{font-size:11px;color:var(--ink-soft);transition:transform .2s;} .nav-loc[open] .nav-loc-caret{transform:rotate(180deg);} .nav-loc-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--bg-card, #fff);border:1px solid var(--rule);border-radius:14px;box-shadow:0 16px 40px -18px rgba(10,8,6,.4);padding:6px;z-index:600;} .nav-loc-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;font-size:14px;} .nav-loc-item.is-active{font-weight:600;color:var(--ink);background:var(--color-brand-tint, #eaf5ee);} .nav-loc-tick{color:var(--green);font-weight:700;} .nav-loc-item.is-soon{color:var(--ink-soft, #6a6050);cursor:not-allowed;} .nav-loc-soon{font-family:'Inter Tight',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft, #6a6050);border:1px solid var(--rule);border-radius:999px;padding:2px 8px;} @media(max-width:600px){ .nav-loc-btn{padding:8px 12px;} .nav-loc-city{font-size:14px;} /* keep the city NAME visible, it's essential context */ } /* ⚠ THE VIEW BUTTONS NEED A BASE RESET, NOT ONLY A DRAWER ONE. Saved, Pinned and Hidden are