/* ============================================================================= I Like To Move It Movers — design system Palette derived from Ray's approved market logos, August 4 2026. The two markets are separate local operations and each carries its own logo, so the brand is themed per market rather than shared: Albany, NY (default) red #CC1116 + black #131313 on off-white Charlotte, NC navy #00193F + blue #1F5C9E on off-white Albany is the default because it is the live market — the crews, the trucks and the phone all answer there today. Charlotte is Fall 2026 and scopes itself under [data-market="charlotte"], which the generator stamps on . Contrast decisions that are deliberate and should not be "tidied": - Both accents clear 4.5:1 on cream (red 5.31, blue 6.31) so the accent is safe for text on a light ground. The previous palette needed a separate darkened token for this because safety orange sat at 2.3:1; that hack is gone. --accent-deep now only exists for small print and dense link runs, where the extra headroom (red 7.28, blue 8.49) is worth having. - White on both accents clears 4.5:1 (red 5.74, blue 6.81), so accent buttons carry WHITE text. The old orange buttons needed navy text. - The light carolina blue from the Charlotte logo is 2.14:1 on cream and is therefore decorative only. It is the on-dark accent (7.51:1 against the Charlotte navy), never text on a light ground. Colours are also published as RGB triplets because roughly twenty rules build translucent fills with rgba(). Those referenced the literal navy and orange before, which meant a themed override could not reach them. ========================================================================== */ /* -------------------------------------------------------------- tokens ---- */ :root { /* Albany, the default market brand. */ --dark: #131313; --dark-deep: #050505; --dark-soft: #232323; --dark-line: #3a3a3a; --dark-rgb: 19, 19, 19; --accent: #cc1116; --accent-lift: #e32b30; --accent-deep: #a50e13; /* extra headroom for small text on light grounds */ --accent-rgb: 204, 17, 22; /* The accent is a mid-dark red, so it CANNOT be text on the dark header, hero or footer — #cc1116 on #131313 is only 3.24:1. This lightened red is 6.09:1 there. It is for text on dark grounds only; on cream it drops to 2.83:1, so never use it the other way round. */ --accent-on-dark: #ff5a5f; /* Review stars stay gold on both themes. Gold is the convention users read as a rating; theming it would make the stars look like decoration. */ --star: #f5a623; --line-hover: #d9d6d1; /* Form errors. On the Albany theme the brand accent IS red, so an invalid field styled in error-red would be indistinguishable from a focused one. Two things separate them: this error red is materially darker than the brand red (#8c1d18 vs #cc1116), and invalid fields also take a 2px border where focus uses a 4px translucent ring. Colour alone never carries the state — the field keeps aria-invalid and a visible message. */ --error: #8c1d18; --error-ink: #8c1d18; --cream: #f7f6f4; --cream-deep: #edebe7; --cream-rgb: 247, 246, 244; --white: #ffffff; --ink: #131313; --ink-muted: #575757; --ink-on-dark: #f7f6f4; --ink-muted-on-dark: #c2c2c2; --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.11rem); --step-1: clamp(1.19rem, 1.12rem + 0.35vw, 1.39rem); --step-2: clamp(1.41rem, 1.29rem + 0.6vw, 1.73rem); --step-3: clamp(1.68rem, 1.48rem + 0.98vw, 2.17rem); --step-4: clamp(2rem, 1.7rem + 1.5vw, 2.71rem); --step-5: clamp(2.37rem, 1.92rem + 2.25vw, 3.39rem); --step-6: clamp(2.6rem, 2rem + 3vw, 4rem); --space-2xs: clamp(0.31rem, 0.3rem + 0.07vw, 0.35rem); --space-xs: clamp(0.56rem, 0.53rem + 0.14vw, 0.63rem); --space-sm: clamp(0.88rem, 0.84rem + 0.2vw, 1rem); --space-md: clamp(1.31rem, 1.24rem + 0.34vw, 1.5rem); --space-lg: clamp(1.75rem, 1.66rem + 0.45vw, 2rem); --space-xl: clamp(2.63rem, 2.49rem + 0.68vw, 3rem); --space-2xl: clamp(3.5rem, 3.32rem + 0.91vw, 4rem); --space-3xl: clamp(4.5rem, 3.98rem + 2.61vw, 6rem); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(var(--dark-rgb), 0.07), 0 2px 6px rgba(var(--dark-rgb), 0.06); --shadow-2: 0 4px 10px rgba(var(--dark-rgb), 0.08), 0 10px 26px rgba(var(--dark-rgb), 0.08); --shadow-3: 0 10px 20px rgba(var(--dark-rgb), 0.1), 0 22px 48px rgba(var(--dark-rgb), 0.12); --shadow-accent: 0 8px 22px rgba(var(--accent-rgb), 0.32); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --wrap: 1180px; --wrap-narrow: 780px; /* Two header heights, because the logo has two sizes. Ray, 2026-08-09: the header carries the original market badge now, and a badge only reads once it is big enough to show the mascot, the skyline and the city line — 92px, measured, not guessed. That plus 12px of air top and bottom is a 116px bar, and with the utility strip above it the page would open behind 153px of sticky chrome, which is a third of a laptop fold. So the header shrinks the moment it sticks: the utility strip collapses, the logo drops to 52px and the bar lands at 76px. At rest the visitor is looking at the brand, which is what the logo is for; once they have scrolled they are reading the page, and the header should get out of the way. scroll-padding-top reads the STUCK height, since any in-page jump happens with the header already stuck. */ --header-h: 116px; --header-h-stuck: 76px; --brand-h: 92px; --brand-h-stuck: 52px; /* The utility strip above the header bar. It is not part of --header-h because --header-h drives the sticky offset and the strip collapses on scroll. The full-height hero needs the resting number instead: at the top of the page the strip is still open, so the hero starts --header-h plus this far down and has to subtract both to reach the fold. */ --utility-h: 47px; /* Header surface, August 8 2026. Ray asked for "a lighter theme, the header is too dark", so the header — and ONLY the header — sits on white. The --dark* family is untouched: the hero, drawer, footer, dark cards and the photo scrims at the bottom of this file all still need a genuinely dark ground for white text to clear 4.5:1 over a bright photograph. Lightening those tokens globally would quietly break every one of them, so the header gets its own six tokens instead and every header rule reads from these. Two of them intentionally alias the light-ground tokens rather than holding their own hex: --header-fg is the page ink and --header-accent is the small-text accent, both already tuned for exactly this job. Because they alias, the Charlotte override below only has to restate what actually differs. --header-line and --header-tint are built from --dark-rgb, so they re-resolve per market at the point of use, the same trick --shadow-* uses. Measured against the white ground (Albany / Charlotte): --header-fg #131313 / #00193f 18.58:1 / 17.34:1 --header-fg-muted #575757 / #2e4d7e 7.23:1 / 8.47:1 --header-accent #a50e13 / #17497e 7.86:1 / 9.17:1 and against the --header-bg-util strip (#edebe7, itself 1.19:1 off white): --header-fg 18.58 -> 15.62:1 / 17.34 -> 14.58:1 --header-fg-muted 6.07:1 / 7.11:1 --header-accent 6.60:1 / 7.70:1 Every one clears 4.5:1, the muted tones included, so nothing on this header depends on the "large text" exemption. */ --header-bg: var(--white); --header-bg-util: var(--cream-deep); --header-fg: var(--ink); --header-fg-muted: var(--ink-muted); --header-accent: var(--accent-deep); --header-line: rgba(var(--dark-rgb), 0.14); --header-tint: rgba(var(--dark-rgb), 0.06); } /* Albany market theme, restated. :root already holds these, so this block does nothing on an Albany page — it exists for the one case where it does matter: the market chooser on a CHARLOTTE page, where is themed navy and the Albany card would otherwise inherit it and render a navy Albany. A card that says "Albany, NY" in Charlotte's colours is the kind of thing a client spots in two seconds. Anything scoped to a market must carry its own attribute and find its own tokens here, not assume it is on a page of that market. */ [data-market="albany"] { --dark: #131313; --dark-deep: #050505; --dark-soft: #232323; --dark-line: #3a3a3a; --dark-rgb: 19, 19, 19; --accent: #cc1116; --accent-lift: #e32b30; --accent-deep: #a50e13; --accent-rgb: 204, 17, 22; --accent-on-dark: #ff5a5f; --error: #8c1d18; --error-ink: #8c1d18; --ink: #131313; --ink-muted: #575757; --ink-on-dark: #f7f6f4; --ink-muted-on-dark: #c2c2c2; --header-fg: var(--ink); --header-fg-muted: var(--ink-muted); --header-accent: var(--accent-deep); } /* Charlotte market theme. Stamped on by generate.mjs for the Charlotte hub and every Charlotte service page. Only the brand colours move — type, spacing, radii and motion are shared, so the two markets read as one company in two cities rather than as two different companies. */ [data-market="charlotte"] { --dark: #00193f; --dark-deep: #000d24; --dark-soft: #0d2b57; --dark-line: #1d3f6d; --dark-rgb: 0, 25, 63; --accent: #1f5c9e; --accent-lift: #2b73c0; --accent-deep: #17497e; --accent-rgb: 31, 92, 158; /* Charlotte's on-dark accent is the light carolina blue straight off its logo — 7.51:1 on the Charlotte navy. */ --accent-on-dark: #6fb0ec; /* Charlotte's accent is blue, so error red is unambiguous here and can sit at the more legible weight. */ --error: #b3261e; --ink: #00193f; /* Ray, 2026-08-07: Charlotte text must read navy, never grey or black. The old slate #4a5a74 was the one non-navy text tone on these pages; this is a desaturated navy that keeps the muted/full hierarchy (7.84:1 on cream vs 15.4:1 for full ink). */ --ink-muted: #2e4d7e; --ink-muted-on-dark: #a9cbea; /* The light header. The ground stays white in both markets — a navy-tinted header would just be the dark header again — so only the foregrounds move, and they move by following the Charlotte ink and accent above. These are restated rather than left to inherit from :root on purpose: if anyone ever hard-codes an Albany hex into the :root header tokens, Charlotte still resolves to its own navy instead of silently inheriting red-on-white. Ratios on white: fg 17.34:1, fg-muted 8.47:1, accent 9.17:1. */ --header-fg: var(--ink); --header-fg-muted: var(--ink-muted); --header-accent: var(--accent-deep); } /* --------------------------------------------------------------- reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-stuck) + 16px); } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, picture, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent-deep); text-underline-offset: 3px; text-decoration-thickness: 1.5px; } a:hover { color: var(--dark); } ul, ol { padding-left: 1.15em; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--accent); color: var(--dark); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--dark); font-weight: 800; padding: 12px 20px; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------- typography ---- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: var(--step-6); font-weight: 900; } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-2); letter-spacing: -0.015em; } h4 { font-size: var(--step-1); letter-spacing: -0.01em; } p { text-wrap: pretty; } .eyebrow { font-family: var(--font-display); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-sm); } /* The dashed rule that used to sit in front of every eyebrow is gone (Ray, 2026-08-09). It was a 26px striped bar drawn with ::before, and at eyebrow size the stripes read as a strikethrough struck across the first word rather than as a rule leading into it. The eyebrow keeps its `display: flex`, which now only governs wrapping. */ /* The base .eyebrow takes --accent-deep, which is tuned for cream and white grounds and is far too dark to sit on one of the dark surfaces. On the hero it measured 1.59:1 — effectively invisible, and it had been that way since the photo hero shipped. Nothing caught it: axe declines to judge contrast when the text sits over a background image, so the browser gate passed it every run. Every dark context gets the on-dark accent here instead. */ .hero .eyebrow, .page-hero .eyebrow, .section-dark .eyebrow, .panel-navy .eyebrow { color: var(--accent-on-dark); } .lede { font-size: var(--step-1); color: var(--ink-muted); max-width: 62ch; } .section-head { max-width: 66ch; margin-bottom: var(--space-xl); } .section-head p { color: var(--ink-muted); font-size: var(--step-1); margin-top: var(--space-sm); } /* ------------------------------------------------------------- layout ---- */ .container { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .container-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; } .section { padding-block: var(--space-3xl); position: relative; } .section-tight { padding-block: var(--space-2xl); } .section-cream { background: var(--cream); } .section-white { background: var(--white); } .section-sand { background: var(--cream-deep); } .section-dark { background: var(--dark); color: var(--ink-on-dark); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); } .section-dark p, .section-dark li { color: var(--ink-muted-on-dark); } .section-dark .eyebrow { color: var(--accent-on-dark); } .grid { display: grid; gap: var(--space-md); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .split { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); } .split-media-first > :first-child { order: 2; } } /* ------------------------------------------------------------ buttons ---- */ .btn { /* White on the accent, not dark. Red gives 5.74:1 against white and only 3.24:1 against the near-black; blue gives 6.81:1. The old orange was the other way round and needed dark text — do not carry that pairing over. */ --btn-bg: var(--accent); --btn-fg: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 50px; padding: 0.7em 1.5em; border: 2px solid transparent; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-weight: 800; font-size: var(--step-0); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-accent); } .btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--dur-fast); } .btn-primary:hover { background: var(--accent-lift); } .btn-navy { --btn-bg: var(--dark); --btn-fg: var(--white); } .btn-navy:hover { background: var(--dark-soft); box-shadow: var(--shadow-2); } /* Also the header phone button since the header went light. Nothing needed changing: --dark and --header-fg are the same value in both markets (#131313 Albany, #00193f Charlotte), so the ink and the border land at 18.58:1 and 17.34:1 on the white bar, and the hover inverts to white-on-dark at the same ratios. .btn-ghost-light below is still the hero's button — it is white on a translucent border and would vanish up here. */ .btn-ghost { --btn-bg: transparent; --btn-fg: var(--dark); border-color: var(--dark); } .btn-ghost:hover { background: var(--dark); color: var(--white); box-shadow: var(--shadow-2); } .btn-ghost-light { --btn-bg: transparent; --btn-fg: var(--white); border-color: rgba(var(--cream-rgb), 0.45); backdrop-filter: blur(6px); } .btn-ghost-light:hover { background: rgba(var(--cream-rgb), 0.12); border-color: var(--cream); color: var(--white); box-shadow: none; } .btn-sm { min-height: 42px; padding: 0.45em 1.1em; font-size: var(--step--1); } .btn-block { width: 100%; } .text-link { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); color: var(--accent-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; letter-spacing: 0.01em; } .text-link::after { content: "→"; transition: transform var(--dur) var(--ease-out); } .text-link:hover { color: var(--dark); } .text-link:hover::after { transform: translateX(4px); } .section-dark .text-link { color: var(--accent-on-dark); } .section-dark .text-link:hover { color: var(--white); } /* ------------------------------------------------------------- header ---- Light surface, built entirely from the --header-* tokens at the top of this file. Nothing in here reads --dark or --ink-on-dark any more; if you need a new colour on the header, add a --header-* token rather than reaching for a dark-context one, because the dark tokens are shared with the hero, drawer, footer and photo scrims. */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); color: var(--header-fg); /* The hero below is dark, so this hairline does nothing there — it is for the interior pages whose first section is cream or white, where the header would otherwise dissolve into the page before it is scrolled. */ border-bottom: 1px solid var(--header-line); transition: box-shadow var(--dur) var(--ease-out); } /* 0.28 was tuned to be visible falling out of a near-black bar. Under a white one the same alpha reads as a grey smudge, so the stuck shadow drops to 0.12 and tightens its blur. */ .site-header.is-stuck { box-shadow: 0 6px 20px rgba(var(--dark-rgb), 0.12); } /* Desktop only. On a 390px screen the address, hours, both market links and the email wrapped to four lines of small grey text above the logo — pushing the headline and the primary CTA off the first screen. All of it is in the footer, and the phone is on the sticky action bar. */ /* Collapsed rather than hidden when the header sticks — see --header-h. It is an address, opening hours and an email; none of it is worth 37px of a scrolled viewport, and all of it is in the footer. max-height works here because the strip is a single line of known height, so there is no auto-height to guess. */ .header-utility { display: none; overflow: hidden; max-height: 60px; transition: max-height var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); /* A cream tint rather than white, so the strip separates from the header bar under it without needing a second rule. It is only 1.19:1 off white, which is why the ink on it is still checked against the strip and not the bar. */ background: var(--header-bg-util); border-bottom: 1px solid var(--header-line); font-size: var(--step--1); color: var(--header-fg-muted); } @media (min-width: 900px) { .header-utility { display: block; } } .header-utility .container { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; justify-content: space-between; padding-block: 8px; } /* 6.07:1 Albany, 7.11:1 Charlotte on the strip — the email link is small print, so it gets the muted ink at rest and the deep accent (6.60 / 7.70:1) on hover rather than the brand accent, which is tuned for larger runs. */ .header-utility a { color: var(--header-fg-muted); text-decoration: none; } .header-utility a:hover { color: var(--header-accent); } .header-utility .util-markets { display: flex; gap: var(--space-sm); align-items: center; flex: none; } /* --- what yields when the strip runs out of room --------------------------- The strip gained a third item and stopped being a comfortable single line. Measured at 1280 with the container at its 1180px cap: address and hours 393, the estimates line plus the email 434, the selector 341, two gaps 48 — 1216 into 1180. It wrapped, and `max-height: 60px` with `overflow: hidden` above turned that wrap into a selector sliced in half. A wrap here is not a graceful degradation, it is a missing control. Wrapping is therefore off, and the strip drops content in priority order instead. The order is not arbitrary — it is what the rest of this file already says about each item: 1. "Free estimates, no obligation" goes first. It is marketing filler, and the trust strip twenty pixels below the hero carries "Free estimates" as a card of its own. 2. The address and hours go next. The comment on .header-utility already notes they are all in the footer, which is why the whole strip is droppable below 900px in the first place. 3. The email link and the selector are what survive. The selector survives everything, because it is the only control on the strip and the only thing here a visitor can act on. The widths below are measured, so they are only as good as the body font the measuring was done in. The ellipsis on the address span is the net under that: on a platform whose system font runs wider than the one these numbers came from, the address truncates and the selector still lands whole. Re-measure rather than nudging a threshold by eye. */ @media (min-width: 900px) { .header-utility .container { flex-wrap: nowrap; } .header-utility .container > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* No max-width on this one, and that is the point. .container caps at 1180px, so 1216 does not fit at 1280 and it does not fit at 2560 either — a wider window buys nothing. The estimates line and the selector can never share this strip, at any size. */ .header-utility .util-markets > span { display: none; } } /* 989 into a 989 container is zero slack, so the label goes at the same 1060 the nav list and the header buttons already break at. The nav still names itself to assistive tech through aria-label="Choose your location". */ @media (min-width: 900px) and (max-width: 1059px) { .market-nav-label { display: none; } } /* 901 into an 880 container is over, and the address is the last thing left that is repeated elsewhere. */ @media (min-width: 900px) and (max-width: 959px) { .header-utility .container > span:first-child { display: none; } } /* --- the market selector --------------------------------------------------- Ray, 2026-08-09: "have an easy navigation system at the top, or maybe in the header, where people can select between Albany and Charlotte, colour-coded." The colour coding is free and that is the whole design. Every rule below is written once, in --accent / --accent-deep / --accent-rgb, and the Charlotte pill carries data-market="charlotte" — the bare attribute selector near the top of this file, the same one the homepage market cards use. The pill re-resolves the brand tokens against itself and comes out navy with no second set of rules. There is deliberately no [data-market="charlotte"] .market-nav-pill anywhere and there must never be one: such a rule is proof that a hex got hard-coded instead of tokenised. The two-class selectors are not decoration either. `.header-utility a` above is (0,1,1) and paints every link on the strip muted grey; a bare `.market-nav-pill` is (0,1,0) and loses to it. `.market-nav .market-nav-pill` is (0,2,0), which wins on class count without tying the pill to the strip it happens to sit in today. Sampled off the rendered page rather than computed from the tokens, Albany / Charlotte, each against the ground it actually sits on: the "Your area" label on the #edebe7 strip 6.07:1 / 7.12:1 resting pill ink, --accent-deep on the white pill — note white, not the strip 7.86:1 / 9.17:1 the dot, --accent on the white pill; a graphic, so it owes 3:1 5.74:1 / 6.81:1 selected pill, white on --accent 5.74:1 / 6.81:1 the white dot on that fill 5.74:1 / 6.81:1 selected pill hovered, white on --accent-deep 7.86:1 / 9.17:1 Both markets appear in both columns because both pills are on every page — the figures above are for the pill, not for the page it is on. Nothing here leans on the large-text exemption; the pills are 0.76rem. */ .market-nav { display: flex; align-items: center; gap: 10px; flex: none; } .market-nav-label { font-family: var(--font-display); font-weight: 800; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--header-fg-muted); white-space: nowrap; } .market-nav ul { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } /* A white chip on the cream strip, outlined in the market's own accent. White rather than transparent because the strip is 1.19:1 off white — an outlined pill that shares its ground with the bar reads as a hairline box, and one that sits on its own white field reads as a control. */ .market-nav .market-nav-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 13px; border-radius: var(--radius-pill); border: 1.5px solid rgba(var(--accent-rgb), 0.45); background: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 0.76rem; line-height: 1.2; letter-spacing: 0.01em; color: var(--accent-deep); text-decoration: none; white-space: nowrap; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); } /* The colour chip. --accent, not currentColor: the resting ink is --accent-deep, which is tuned for reading small type and is a full step darker than the brand colour a visitor is being asked to recognise. The ring is the same accent at low alpha, so the dot reads as a swatch with a halo rather than as a full stop. */ .market-nav-pill .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2.5px rgba(var(--accent-rgb), 0.2); transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), scale var(--dur) var(--ease-spring); } /* Filled, not merely outlined. aria-current="true" marks the market of the page you are on — note "true" and not "page", because on /albany-ny/local-moving/ the Albany pill is the current market and not the current page — and a selected state that only thickened a border would be a shade difference on a 1.19:1 ground. White on the accent is the same pairing every button on this site uses. The dot goes white with it: the whole pill is the market colour now, so a red dot on red would only be a hole in it. */ .market-nav .market-nav-pill[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--white); box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.28); } /* No halo on the selected pill, and that is measured rather than tidied. The ring is what gives the resting dot presence against a white pill; over the accent fill the same ring is a 45% lightened accent sitting between a white dot and its ground, and white against THAT measured 2.96:1 Albany and 2.68:1 Charlotte — under the 3:1 a non-text graphic owes its adjacent colour. The dot does not need a field here because the whole pill is one. White straight onto the accent is 5.74:1 / 6.81:1. */ .market-nav .market-nav-pill[aria-current] .dot { background: var(--white); box-shadow: none; } .market-nav .market-nav-pill:hover, .market-nav .market-nav-pill:focus-visible { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.09); color: var(--accent-deep); translate: 0 -1px; } .market-nav .market-nav-pill:hover .dot, .market-nav .market-nav-pill:focus-visible .dot { scale: 1.2; box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), 0.24); } /* The selected pill darkens instead of lightening — it is already filled, so the only move left is inward. --accent-lift was tried first and white on it measures 4.51:1, which is a rounding error away from failing; --accent-deep is 7.86:1 Albany and 9.17:1 Charlotte. */ .market-nav .market-nav-pill[aria-current]:hover, .market-nav .market-nav-pill[aria-current]:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--white); } /* Same reason as the resting selected dot: no light ring over a filled pill. The dot still answers the hover through `scale` inherited from the rule above, so the acknowledgement is there without a halo that would put white against a near-white. */ .market-nav .market-nav-pill[aria-current]:hover .dot, .market-nav .market-nav-pill[aria-current]:focus-visible .dot { background: var(--white); box-shadow: none; } /* Same trap as .market-card-cta: the global focus ring is 3px of --accent, and on a pill already filled with --accent that is an invisible ring. The header ink is 18.58:1 Albany / 17.34:1 Charlotte against the fill it hugs. */ .market-nav .market-nav-pill[aria-current]:focus-visible { outline-color: var(--header-fg); } /* 92px logo + 12px top + 12px bottom is 116px, so --header-h still sets the bar height rather than the padding doing it — which is what keeps scroll-padding-top honest. */ .header-bar { display: flex; align-items: center; gap: var(--space-md); min-height: var(--header-h); padding-block: 12px; transition: min-height var(--dur) var(--ease-out); } /* --- the shrink, in one place --- Three properties move together and they are all cheap: a min-height, a max-height and the logo's own height. No layout thrash on scroll either — app.js flips .is-stuck once, off an IntersectionObserver on a 1px sentinel, not off a scroll handler. */ .site-header.is-stuck .header-bar { min-height: var(--header-h-stuck); } .site-header.is-stuck .header-utility { max-height: 0; opacity: 0; } .site-header.is-stuck .brand-full img { height: var(--brand-h-stuck); } /* --- the selector on a phone ---------------------------------------------- The utility strip is display: none below 900px, and the reason is written above it: an address, opening hours and an email wrapped to four lines of small grey text and pushed the headline off the first screen. All of that is in the footer. None of it applies to a market selector, which is not in the footer, is not repeated anywhere else, and is the one control on the strip the client actually asked for. So the strip comes back below 900px carrying ONLY the selector. The two information spans are the direct children of the container, and they are the part that was too heavy for a phone; the