/* ==========================================================================
Hopkinsville Solid Waste Enterprise — design system
Ported from the approved v7 homepage mockup (design/hswe-homepage-mockup.html).
Two layers:
1. Token layer — overrides Kadence's --global-* variables so Kadence's own
components (buttons, links, headings, block editor palette) adopt the
HSWE palette automatically instead of being fought with overrides.
2. Component layer — the homepage sections from the mockup, prefixed .hswe-
to guarantee no collision with Kadence or core block classes.
Specificity note: the token block uses html:root (0,1,1) rather than :root
(0,1,0) so it beats Kadence's inline dynamic CSS regardless of which order
the two end up in .
========================================================================== */
/* --------------------------------------------------------- 1. TOKEN LAYER */
html:root {
/* HSWE palette */
--hswe-navy: #031c2f;
--hswe-navy2: #0a2e44;
--hswe-blue: #14415a;
--hswe-blue-lt: #e9f0f4;
--hswe-green: #44632b;
--hswe-green-lt:#eaf0e0;
--hswe-gold: #f4b41a;
--hswe-ink: #1c2733;
--hswe-muted: #5a6a7a;
--hswe-bg: #f5f8fb;
--hswe-card: #ffffff;
--hswe-line: #dde6ee;
--hswe-green-soft: #a9c58c; /* light green used on dark grounds (hero, footer) */
--hswe-radius: 14px;
--hswe-wrap: 1120px;
/* Map onto Kadence's semantic palette slots so the theme + editor inherit */
--global-palette1: #14415a; /* Accent -> cart steel */
--global-palette2: #44632b; /* Accent alt -> green */
--global-palette3: #031c2f; /* Strongest text -> navy */
--global-palette4: #1c2733; /* Strong text -> ink */
--global-palette5: #5a6a7a; /* Medium text -> muted */
--global-palette6: #93a3b3; /* Subtle text */
--global-palette7: #f5f8fb; /* Subtle background */
--global-palette8: #e9f0f4; /* Lighter background-> steel tint */
--global-palette9: #ffffff; /* White */
--global-palette10: #f4b41a; /* Accent complement -> gold */
/* Typography: bold condensed headings + highly readable body */
--global-heading-font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
--global-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
body {
background: var(--hswe-bg);
color: var(--hswe-ink);
font-family: var(--global-body-font-family);
line-height: 1.6;
}
h1, h2, h3, h4, .hswe-disp {
font-family: var(--global-heading-font-family);
letter-spacing: .3px;
}
a { color: var(--hswe-green); }
.hswe-wrap {
max-width: var(--hswe-wrap);
margin: 0 auto;
padding: 0 22px;
}
/* ------------------------------------------------- 2. KADENCE HEADER/BRAND */
/* The mockup's logo is a placeholder photograph. Per the build instruction we
use a clean text treatment until the real artwork arrives: site title in
condensed navy caps, tagline in green. Swapping in a logo later is a
customizer change, not a code change. */
.site-header { border-bottom: 1px solid var(--hswe-line); }
/* Kadence sets `.site-branding .site-title` and `.site-description` from the
customizer at (0,2,0) as INLINE css. At equal specificity the later rule wins,
and inline-vs-enqueued order is not guaranteed — so these carry an extra
ancestor class (0,3,0) to be deterministic rather than lucky. Same reasoning
as the palette block above. */
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a {
font-family: var(--global-heading-font-family);
font-size: 20px;
font-weight: 800;
line-height: 1.05;
text-transform: uppercase;
color: var(--hswe-navy);
max-width: 250px;
letter-spacing: .3px;
}
.site-header .site-branding .site-description {
display: block;
color: var(--hswe-green);
font-weight: 600;
font-size: 11px;
letter-spacing: .5px;
text-transform: uppercase;
margin-top: 2px;
}
/* --- Header seal ----------------------------------------------------------
Mockup `.logo`: 58px circle, object-fit cover, 16px gap, vertically centred
beside the two-line brand block.
The mockup's 2px grey ring is deliberately NOT reproduced. That border existed
to contain an opaque square JPEG placeholder inside a circle. The real asset is
a transparent PNG whose artwork is already circular, so the ring would draw a
floating grey outline around the seal rather than frame anything — and the
brief for this step is to use the artwork as-is, without added framing.
`border-radius`/`object-fit` are kept but are effectively no-ops on a square
transparent source: they cost nothing and keep the rule faithful if a
non-square asset is ever swapped in.
Specificity: Kadence's inline `.site-branding a.brand img` is (0,2,2); these
selectors are (0,4,2) and (0,3,1), so they win without !important. */
.site-header .site-branding a.brand img.custom-logo {max-width:none;width:auto;height:56px;flex:none;}
.site-header .site-branding a.brand {
display: flex;
align-items: center;
gap: 16px;
}
.header-navigation .menu > .menu-item > a {
font-weight: 600;
font-size: 13.5px;
border-radius: 8px;
padding: 8px 10px;
color: var(--hswe-ink);
}
.header-navigation .menu > .menu-item > a:hover,
.header-navigation .menu > .current-menu-item > a {
background: var(--hswe-blue-lt);
color: var(--hswe-green);
}
/* --- Contact CTA -----------------------------------------------------------
Mirrors the mockup's `nav.main a.cta` (green fill, white text, 8px radius,
#364f22 on hover).
The class is attached to the menu ITEM in WordPress (_menu_item_classes on
the Contact item), never to a positional selector — :last-child / :nth-child
would silently move to the wrong link the moment the menu is reordered or a
page is added.
── Specificity (corrected in Step 22) ────────────────────────────────────
Kadence colours top-level desktop nav links from INLINE css using the
.main-navigation shape, NOT .header-navigation:
.main-navigation .primary-menu-container > ul > li.menu-item > a (0,3,3)
... > a:hover (0,4,3)
... li.menu-item.current-menu-item > a (0,4,3)
The Step 20 selectors below (.header-navigation .menu > .hswe-nav-cta > a,
(0,3,1)) tie on class count but lose on element count, so Kadence won the
`color` declaration while the unopposed `background` still applied — a green
pill with grey --global-palette5 label. The desktop rules therefore mirror
Kadence's own selector shape and add .hswe-nav-cta, which wins every state:
normal li.menu-item.hswe-nav-cta > a (0,4,3) > (0,3,3)
hover ... > a:hover / :focus / :focus-visible (0,5,3) > (0,4,3)
current li.menu-item.current-menu-item.hswe-nav-cta > a (0,5,3) > (0,4,3)
The DRAWER rules already won in Step 20 — Kadence's drawer selectors are
`.mobile-navigation ul li > a` (0,1,3) and `... li.current-menu-item > a`
(0,2,3), both beaten on class count by (0,3,1)/(0,4,1). They are kept as-is
and only extended to cover :visited and :focus.
Still no !important anywhere.
-------------------------------------------------------------------------- */
/* Shared base — colour, fill and radius for both navigations. */
.header-navigation .menu > .hswe-nav-cta > a,
.header-navigation .menu > .hswe-nav-cta > a:visited,
.mobile-navigation .menu > .hswe-nav-cta > a,
.mobile-navigation .menu > .hswe-nav-cta > a:visited {
background: var(--hswe-green);
color: #fff;
border-radius: 8px;
}
.header-navigation .menu > .hswe-nav-cta > a:hover,
.header-navigation .menu > .hswe-nav-cta > a:focus,
.header-navigation .menu > .hswe-nav-cta.current-menu-item > a,
.mobile-navigation .menu > .hswe-nav-cta > a:hover,
.mobile-navigation .menu > .hswe-nav-cta > a:focus,
.mobile-navigation .menu > .hswe-nav-cta.current-menu-item > a {
background: #364f22;
color: #fff;
}
/* Desktop — must outrank Kadence's inline .main-navigation rules (see above).
The label is direct text in the ; Kadence adds no inner label span here,
so colouring the anchor is sufficient. */
.main-navigation .primary-menu-container > ul > li.menu-item.hswe-nav-cta > a,
.main-navigation .primary-menu-container > ul > li.menu-item.hswe-nav-cta > a:visited {
background: var(--hswe-green);
color: #fff;
border-radius: 8px;
}
.main-navigation .primary-menu-container > ul > li.menu-item.hswe-nav-cta > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.hswe-nav-cta > a:focus,
.main-navigation .primary-menu-container > ul > li.menu-item.hswe-nav-cta > a:focus-visible,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item.hswe-nav-cta > a,
.main-navigation .primary-menu-container > ul > li.menu-item.hswe-nav-cta > a[aria-current="page"] {
background: #364f22;
color: #fff;
}
/* Belt and braces: if a theme update ever wraps the label in an inner element,
colour it too rather than silently regressing to an inherited grey. */
.header-navigation .menu > .hswe-nav-cta > a *,
.mobile-navigation .menu > .hswe-nav-cta > a *,
.main-navigation .primary-menu-container > ul > li.menu-item.hswe-nav-cta > a * {
color: inherit;
}
/* In Kadence's mobile drawer the links are full-width rows on a dark panel with
a hairline divider. Left as-is the CTA would read as just another row, so it
is pulled in to sit as a discrete green button: the divider is removed and it
gets its own breathing room. */
.mobile-navigation .menu > .hswe-nav-cta > a {
border-bottom: 0;
margin: 12px 0;
text-align: center;
font-weight: 700;
}
/* ------------------------------------------------------------- 3. TOP BAR */
.hswe-topbar {
background: var(--hswe-navy);
color: #cfe0f4;
font-size: 13.5px;
}
.hswe-topbar .hswe-wrap {
display: flex; justify-content: space-between; align-items: center;
gap: 14px; flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px;
}
.hswe-topbar strong { color: #fff; }
.hswe-topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.hswe-topbar-right { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
/* Facebook icon — icon only, per the brief (topbar + footer strip) */
.hswe-fb-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: #1877f2; flex: none;
}
/* The mockup used `color:#fff !important` here to beat `.topbar a`. Ported as
specificity instead: (0,2,0) beats both `.hswe-topbar a` and `.site-footer a`
at (0,1,1), so the glyph stays white in both placements with no !important
anywhere in this stylesheet. */
.hswe-topbar .hswe-fb-icon,
.hswe-footer-credit .hswe-fb-icon { color: #fff; }
.hswe-fb-icon:hover { background: #3b8bf5; }
.hswe-fb-icon svg { display: block; }
/* ---------------------------------------------------------- 4. GOLD BAND */
.hswe-alert {
background: var(--hswe-gold);
color: #3d2e00;
font-weight: 600;
font-size: 14.5px;
}
.hswe-alert .hswe-wrap {
display: flex; gap: 10px; align-items: center;
padding-top: 9px; padding-bottom: 9px;
}
.hswe-alert a { color: #3d2e00; text-decoration: underline; font-weight: 700; }
/* ---------------------------------------------------------------- 5. HERO */
.hswe-hero {
color: #fff;
position: relative;
overflow: hidden;
background: linear-gradient(130deg, #02141f 0%, var(--hswe-navy) 30%, var(--hswe-navy2) 55%, #14415a 78%, #173f4a 100%);
background-size: 220% 220%;
animation: hswe-heroshift 26s ease-in-out infinite alternate;
}
@keyframes hswe-heroshift {
from { background-position: 0% 0%; }
to { background-position: 100% 100%; }
}
.hswe-glow {
position: absolute; pointer-events: none; z-index: 1;
width: 640px; height: 640px; right: -160px; bottom: -260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(68,99,43,.32) 0%, rgba(20,65,90,.14) 45%, transparent 70%);
filter: blur(60px);
animation: hswe-glowbreathe 18s ease-in-out infinite alternate;
}
@keyframes hswe-glowbreathe {
from { transform: translate(0,0) scale(1); opacity: .75; }
to { transform: translate(-70px,-40px) scale(1.18); opacity: 1; }
}
/* Both animations stop for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
.hswe-hero, .hswe-glow { animation: none; }
}
/* Two columns again as of Step 40.
---------------------------------------------------------------------------
History, because this rule has now moved twice:
Before Step 39 it was `1.05fr .95fr` with the lookup card on the right, and
`align-items` was left at its default of stretch. That default was the Step 38
defect: the 853px card dragged the 440px text column out to 753px and the hero
to 989px tall. Step 39 moved the card to /my-pickup-day/ and collapsed this to
one column, which left a 1076px column holding a short H1, a lede and a button,
475px tall and reading half empty.
Step 40 restored the original `1.05fr .95fr` (recovered from the Step 39
comment, which is the only place the ratio survived) and put the three fact
cards in the right column where the lookup card used to be.
Step 40 REVISED keeps that grid exactly and changes only what sits in the
right column: three task tiles instead of three facts. The ratio is unchanged
because the tiles want the same slot the lookup card and the fact cards wanted.
`align-items: center` is set EXPLICITLY, never left at stretch. Centre rather
than start because that is what the approved design did: the lookup card
carried `align-self: center` in the same slot, so the right column has always
floated against the middle of the text block rather than hanging from the top.
Centre also keeps the tile stack optically tied to the headline now that the
left column is shorter by one button. Stretch would make each tile grow to an
equal share of the left column's height, which is the 989px Step 38 defect in
a new costume.
NO height or min-height here on purpose: the height is an outcome, not an
input. Scoped to `.hswe-hero .hswe-wrap`, never bare `.hswe-wrap`, which is the
shared 1120px centring wrapper used by ten other prefixed selectors. */
.hswe-hero .hswe-wrap {
display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px;
align-items: center;
padding: 64px 22px 72px; position: relative; z-index: 2;
}
.hswe-hero h1 {
font-size: 52px; font-weight: 800; line-height: 1.02;
text-transform: uppercase; color: #fff; margin: 0;
}
.hswe-hero h1 span { color: #a9c58c; }
.hswe-hero .hswe-lede {
/* Bottom margin was 26px, to clear the CTA button. The button is gone as of
Step 40 revised and the office line follows directly, so it tightens. */
margin: 18px 0 16px; font-size: 17.5px; color: #d7e5f5; max-width: 34em;
}
/* Quiet office line under the lede. Deliberately the lowest-contrast text in the
hero: it is a fallback for people the tiles do not serve, not a fourth link. */
.hswe-hero .hswe-heroffice {
margin: 0; font-size: 14.5px; color: rgba(255,255,255,.62); max-width: 34em;
}
/* 5b. HERO TASK TILES ------------------------------------------------------
The hero's right column: the things residents actually arrive wanting to do.
Replaces `.hswe-mini`, which held the three hero facts and was DELETED here in
Step 40 revised along with `.hswe-herocta` (section 11.9) -- both were
hero-only, used in no page content and in no other theme file, so neither is
left behind as a dead rule.
Tiles 2 onward are rendered from hswe_form_links() by hswe_hero_tiles(); this
stylesheet does not know or care which is which, or HOW MANY. Only
`.is-primary` is special-cased, and that is tile 1.
COUNT-AGNOSTIC ON PURPOSE, and Step 46 relied on that when a fourth tile was
added: `.hswe-tiles` is a bare auto-row grid with no `repeat(n)`, no row count
and no height, and `.hswe-tile` sets `min-height` (a floor) not `height`.
Nothing here had to change to take a fourth tile. Do not introduce a fixed row
count or a fixed height.
The whole is the target, not the title inside it, so the hit area and the
focus ring are the tile. */
.hswe-tiles { display: grid; gap: 11px; }
.hswe-tile {
display: grid; grid-template-columns: 26px 1fr 16px;
align-items: center; gap: 14px;
min-height: 44px; /* touch target floor, never smaller */
padding: 15px 18px;
border-radius: var(--hswe-radius);
background: rgba(255,255,255,.075);
border: 1px solid rgba(255,255,255,.15);
color: #fff; text-decoration: none;
transition: background .16s ease, border-color .16s ease;
}
/* Tile 1. The site green makes it unmistakably the primary of the three. */
.hswe-tile.is-primary { background: var(--hswe-green); border-color: var(--hswe-green); }
.hswe-tile b {
display: block;
font-family: var(--global-heading-font-family);
font-size: 19px; font-weight: 700; line-height: 1.1;
text-transform: uppercase; letter-spacing: .2px;
}
.hswe-tile small {
display: block; margin-top: 3px;
font-family: var(--global-body-font-family);
font-size: 13.5px; font-weight: 400; line-height: 1.35;
color: rgba(255,255,255,.75);
text-transform: none;
}
/* Icons are inline SVG, NEVER emoji: the top bar phone emoji was invisible on
this same navy (Step 36), and the registry's `icon` field is emoji, so these
tiles supply their own artwork from hswe_hero_tile_svg(). Same stroke
treatment as the .hswe-ic service card icons. */
.hswe-tile__ic svg {
display: block; width: 26px; height: 26px;
fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* The second colour. One detail per icon carries .is-accent; everything else
inherits currentColor from the tile. */
.hswe-tile__ic .is-accent { stroke: var(--hswe-green-soft); }
/* On the green tile the mint accent would sit too close to its own ground, so
it lightens rather than losing the two-colour reading. */
.hswe-tile.is-primary .hswe-tile__ic .is-accent { stroke: #dfe9d0; }
.hswe-tile__chev svg {
display: block; width: 16px; height: 16px;
fill: none; stroke: currentColor;
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
opacity: .55; transition: transform .16s ease, opacity .16s ease;
}
/* Hover and keyboard focus are BOTH visible, and both apply to the whole tile.
The primary's hover green is #364f22, the same one the site's green buttons
have always used, so the two never drift. */
.hswe-tile:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.hswe-tile.is-primary:hover { background: #364f22; border-color: #364f22; }
.hswe-tile:hover .hswe-tile__chev svg { transform: translateX(3px); opacity: 1; }
.hswe-tile:focus-visible {
outline: 3px solid var(--hswe-gold); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.hswe-tile, .hswe-tile__chev svg { transition: none; }
.hswe-tile:hover .hswe-tile__chev svg { transform: none; }
}
/* ------------------------------------------------------- 6. LOOKUP CARD */
/* Anchor landing offset for #collection-day-lookup. Step 39 moved the card off
the home page onto /my-pickup-day/, so the anchor now lives there and the id
is still unique site-wide; the FAQ links to the page, not to the anchor.
MEASURED, not assumed: this site has NO sticky or fixed header. Kadence's
sticky header is off (`header_sticky` and `header_mobile_sticky` are both
false), the `kadence-sticky-header` class never appears in the rendered
markup, and this stylesheet contains no `position:fixed` / `position:sticky`
rule at all. The topbar, #masthead and the gold band all scroll away
normally, so the height that would overlap the anchor is 0px.
0px overlap + 16px breathing room = 16px.
If Kadence's sticky header is ever switched on, the sticky row is the main
header (`.site-main-header-inner-wrap`, `min-height:80px`) -- raise this to
96px at the same time. */
#collection-day-lookup {
scroll-margin-top: 16px;
}
.hswe-lookup {
background: #fff; color: var(--hswe-ink);
border-radius: var(--hswe-radius);
box-shadow: 0 18px 50px rgba(4,20,45,.35);
padding: 26px 26px 22px; align-self: center;
}
.hswe-lookup h2 {
font-size: 26px; color: var(--hswe-navy); text-transform: uppercase; margin: 0;
}
.hswe-lookup .hswe-sub { color: var(--hswe-muted); font-size: 14px; margin: 4px 0 16px; }
.hswe-lookup select,
.hswe-lookup button {
width: 100%; font-size: 16px; padding: 13px 14px;
border-radius: 10px; border: 1.5px solid var(--hswe-line);
font-family: inherit;
}
.hswe-lookup select { background: #fbfdff; margin-bottom: 12px; color: var(--hswe-ink); }
.hswe-lookup button {
background: var(--hswe-green); border-color: var(--hswe-green);
color: #fff; font-weight: 700; cursor: pointer;
}
.hswe-lookup button:hover { background: #364f22; }
.hswe-result {
display: none; margin-top: 16px;
border-top: 1px dashed var(--hswe-line); padding-top: 16px;
}
.hswe-result.is-visible { display: block; }
.hswe-result .hswe-row { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
.hswe-badge {
flex: none; width: 44px; height: 44px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-family: var(--global-heading-font-family);
font-weight: 800; font-size: 15px; color: #fff;
text-transform: uppercase; line-height: 1;
}
.hswe-badge.b1 { background: var(--hswe-blue); }
.hswe-badge.b2 { background: var(--hswe-green); }
.hswe-result b { font-size: 15.5px; }
.hswe-result small { color: var(--hswe-muted); display: block; font-size: 13px; line-height: 1.45; }
.hswe-fineprint { margin-top: 12px; font-size: 11.5px; color: #93a3b3; }
/* ---- 6b. TYPE-AHEAD LOOKUP (Step 38, moved Step 39) -----------------------
A combobox over the real 702-street route data. As of Step 39 the card lives
on ONE page — HSWE_SCHEDULE_PATH, /my-pickup-day/ — not in the home hero, and
there is exactly one instance of it on the site.
The no-JavaScript answer is no longer inside the card. It is now section 4 of
that page, the permanently visible garbage-day-to-bulk-week table
(.hswe-bulkweek below). Same rule applies to it, harder: never hide it with
script, never set `display` on it from CSS. If the script fails to load, that
table is the whole feature.
The [hidden] guard below is load-bearing. #hswe-result and #hswe-suggest are
toggled by the script via the `hidden` property, which the UA implements as
display:none -- and ANY author `display` value on these classes would
silently beat it, leaving the empty panel on screen forever. Nothing in this
block sets `display` on them; the guard makes that explicit so a later edit
cannot reintroduce the bug.
Anchor offset: the card carries #collection-day-lookup and its
scroll-margin-top:16px (section 6 above), so a #collection-day-lookup jump
lands with the input clear of the viewport edge. */
.hswe-lookup__result[hidden],
.hswe-lookup__suggest[hidden] { display: none; }
.hswe-lookup__label {
display: block; margin-bottom: 6px;
font-size: 13px; font-weight: 600; color: var(--hswe-navy);
}
/* Anchor for the absolutely positioned suggestion list. */
.hswe-lookup__field { position: relative; margin-bottom: 12px; }
.hswe-lookup__input {
width: 100%; padding: 13px 14px;
border: 1.5px solid var(--hswe-line); border-radius: 10px;
background: #fbfdff; color: var(--hswe-ink); font-family: inherit;
/* 16px floor is deliberate: iOS Safari zooms the viewport on focus for any
form control under 16px, which throws the whole hero off-centre. */
font-size: 16px; line-height: 1.3;
}
.hswe-lookup__input::placeholder { color: #93a3b3; }
.hswe-lookup__input:focus {
outline: 2px solid var(--hswe-blue); outline-offset: 1px;
border-color: var(--hswe-blue);
}
.hswe-lookup__suggest {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
/* Above the hero glow (z-index 1) and the hero wrap (z-index 2); the list
overhangs the card and must not be clipped by either. */
z-index: 20;
margin: 0; padding: 4px; list-style: none;
background: var(--hswe-card);
border: 1.5px solid var(--hswe-line);
border-radius: var(--hswe-radius);
box-shadow: 0 14px 34px rgba(4,20,45,.22);
/* Eight 44px rows plus padding, then scroll. */
max-height: 376px; overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.hswe-lookup__option {
display: flex; align-items: center;
/* 44px is the tap-target floor, not a suggestion -- this list is used almost
entirely on phones. */
min-height: 44px; padding: 10px 12px;
border-radius: 8px; cursor: pointer;
font-size: 15px; line-height: 1.3; color: var(--hswe-ink);
}
/* Keyboard highlight and pointer hover are one shared state, so arrowing down
and mousing over never disagree about what is selected. */
.hswe-lookup__option:hover,
.hswe-lookup__option.is-active {
background: var(--hswe-green-lt); color: var(--hswe-navy);
}
.hswe-lookup__help {
margin: 10px 0 0;
font-size: 12.5px; line-height: 1.45; color: var(--hswe-muted);
}
.hswe-lookup__result {
margin-top: 16px; padding-top: 16px;
border-top: 1px dashed var(--hswe-line);
}
/* Step 45: the answer panel's own left rule is gone. Each service section now
carries its own coloured rule, and a green wrapper rule outside a green
garbage rule outside a blue bulk rule read as a mistake. The no-match panel
has no inner sections, so it keeps the treatment where it still does work. */
.hswe-lookup__answer--none { border-left: 3px solid var(--hswe-gold); padding-left: 12px; }
.hswe-lookup__street {
margin: 0 0 2px;
font-size: 13px; font-weight: 600; letter-spacing: .02em;
text-transform: uppercase; color: var(--hswe-muted);
}
/* The answer, in two separate paragraphs.
---------------------------------------------------------------------------
Step 39 defect 1. This used to be ONE sentence — `Bulk item week 1,
the 1st and 3rd weeks of each month.` — styled with a `.hswe-lookup__week strong`
rule that made the strong `display:block` at 27px. The block broke the sentence
in half and left the second line starting on an orphan comma:
BULK ITEM WEEK 1
, the 1st and 3rd weeks of each month.
The script now emits two paragraphs and no `` at all. Style these by
CLASS only. Do not reintroduce an element selector like
`.hswe-lookup__answer strong` — that is precisely what caused the defect, and
the no-match panel below does legitimately contain a ``. */
.hswe-lookup__weeknum {
/* Step 45: font-family and text-transform deleted here, and set explicitly in
section 6d below, so the day line and the week line cannot drift apart
again. This rule kept the panel's old single-line look; the two-section
panel supersedes its size and weight. */
margin: 0 0 2px;
line-height: 1.05; color: var(--hswe-navy);
}
.hswe-lookup__weekwhen {
margin: 0 0 10px;
font-size: 15.5px; font-weight: 400; line-height: 1.35; color: var(--hswe-ink);
}
.hswe-lookup__note,
.hswe-lookup__pending {
margin: 0 0 8px;
font-size: 13px; line-height: 1.45; color: var(--hswe-muted);
}
.hswe-lookup__pending:last-child { margin-bottom: 0; }
.hswe-lookup__answer--none p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--hswe-muted); }
.hswe-lookup__answer--none p:first-child { font-size: 15px; color: var(--hswe-ink); }
@media (max-width: 560px) {
/* With the on-screen keyboard up, a phone leaves roughly half the viewport
visible. Cap the list to that rather than the eight-row 376px, so the
bottom options stay reachable instead of sitting under the keyboard. */
.hswe-lookup__suggest { max-height: 50vh; }
}
/* ---- 6c. MY PICKUP DAY PAGE (Step 39, relaid out Step 40) -----------------
/my-pickup-day/ only. No form rail: the page has one job.
Step 39 built this as five stacked full-bleed .hswe-sect blocks, each holding
a 720px .hswe-wrap. That was 5 x 46px x 2 = 460px of section padding alone,
in a narrow column inside a wide container, and the page measured 2182px.
Step 40 collapses it to ONE .hswe-sect containing a two-column grid at the
site-standard width, with the blocks inside each column spaced by margin.
Content width is the shared `.hswe-wrap` default: 1120px max-width minus
2 x 22px padding = 1076px. The 720px inline override is gone.
Column split: left is "find your week" (the lookup card, then the garbage-day
table), right is "what to know" (September 1, setting out, what counts, green
waste). Ratio 1.1fr 1fr, matching .hswe-cgrid on the Contact page.
MOBILE ORDER IS SOURCE ORDER. Below 920px the grid becomes one column and the
two column divs stack in document order, which gives exactly:
lookup card, garbage day table, September 1, setting out, what counts,
green waste.
The tool and the table come before the rules on a phone because the left
column is first in the markup. No `order` property is used, so nothing can
silently diverge between the visual order and the reading order.
Nothing in this block sets `display` on .hswe-bulkweek, .hswe-btable or
.hswe-wk. That table is the manual path and the no-JavaScript floor, the only
way a visitor with no working script gets an answer. It is permanently visible
by construction, in a column exactly as it was in a stack. */
.hswe-sched__grid {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px;
align-items: start;
}
/* Blocks inside a column are spaced by margin, since the five section paddings
they used to get are gone. */
.hswe-sched__find > * + * { margin-top: 30px; }
.hswe-sched__know > * + * { margin-top: 26px; }
/* The card was designed against the navy hero. On this page it sits on the pale
interior background, where an 18px/50px drop shadow at 35% reads as dirt. */
.hswe-sched .hswe-lookup {
box-shadow: 0 6px 20px rgba(4,20,45,.10);
border: 1px solid var(--hswe-line);
}
/* The right column is roughly 470px wide at desktop, so the three fact cards
stack there rather than sitting three abreast as they do in the home hero
strip. Dividers become top borders to match the new stacking direction. */
.hswe-sched__know .hswe-factstrip { grid-template-columns: 1fr; }
.hswe-sched__know .hswe-cell { border-left: 0; border-top: 1px solid var(--hswe-line); }
.hswe-sched__know .hswe-cell:first-child { border-top: 0; }
/* Headings inside the columns sit tighter than a full section heading would. */
.hswe-sched__grid h2 { margin-top: 0; }
.hswe-sched__block .hswe-lead { margin-bottom: 14px; }
/* Three fact cards, same visual pattern as the home hero stat strip: same
.hswe-cell children, same dividers, wrapped in a card instead of a full-bleed
band because it sits in a column rather than across the page.
Step 43 corrected the old wording here, which said "this column is 720px, not
1120px". That stopped being true in Step 40, when /my-pickup-day/ became a two
column grid at the standard width and this strip landed in a roughly 470px
column. Comment only; the rule below never changed. */
.hswe-factstrip {
display: grid; grid-template-columns: repeat(3,1fr);
background: var(--hswe-card);
border: 1px solid var(--hswe-line); border-radius: var(--hswe-radius);
overflow: hidden; margin-top: 4px;
}
/* Section 4, the manual path. */
.hswe-bulkweek__wed {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px;
}
.hswe-bulkweek__wed h3 {
font-size: 15px; color: var(--hswe-navy); text-transform: uppercase;
margin: 0 0 8px; letter-spacing: .3px;
}
.hswe-bulkweek__wed ul {
margin: 0; padding-left: 18px;
font-size: 14px; line-height: 1.55; color: #33465a;
}
.hswe-bulkweek__wed > div {
background: var(--hswe-card); border: 1px solid var(--hswe-line);
border-radius: 10px; padding: 16px 18px;
}
/* Section 2. Time-sensitive: this whole block becomes wrong-headed the moment
September 1, 2026 passes. Kept as one self-contained wp:html block with one
class so it can be lifted out in a single edit — do not weave it into the
surrounding sections. */
.hswe-sept1 {
background: #fdf6e3; border: 1px solid #f0dca8;
border-left: 5px solid var(--hswe-gold); border-radius: 10px;
padding: 18px 22px; color: #4a3c17;
}
/* (0,2,1) so it beats `.hswe-sect h2` (0,1,1, 30px) further down the file. */
.hswe-sect .hswe-sept1 h2 { font-size: 22px; margin: 0 0 8px; }
.hswe-sept1 p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.hswe-sept1 p:last-child { margin-bottom: 0; }
.hswe-sept1 b { color: #3a2f10; }
/* One column below the site's main breakpoint. The two column divs then stack in
document order: find (lookup, table) first, know (September 1, setting out,
what counts, green waste) second. */
@media (max-width: 920px) {
.hswe-sched__grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 700px) {
.hswe-factstrip { grid-template-columns: 1fr; }
.hswe-bulkweek__wed { grid-template-columns: 1fr; }
}
/* -------------------------------------------------------- 7. QUICK STRIP */
.hswe-strip { background: #fff; border-bottom: 1px solid var(--hswe-line); }
.hswe-strip .hswe-wrap {
display: grid; grid-template-columns: repeat(3,1fr); gap: 0; padding: 0 22px;
}
.hswe-cell {
padding: 20px 18px; border-left: 1px solid var(--hswe-line);
font-size: 13.5px; color: var(--hswe-muted);
}
.hswe-cell:first-child { border-left: 0; }
.hswe-cell b { display: block; color: var(--hswe-navy); font-size: 15px; margin-bottom: 2px; }
/* ----------------------------------------------------------- 8. SECTIONS */
.hswe-pad { padding: 58px 0; }
.hswe-kicker {
color: var(--hswe-green); font-weight: 700; font-size: 13px;
letter-spacing: 2px; text-transform: uppercase;
}
.hswe-sec {
font-size: 36px; color: var(--hswe-navy);
text-transform: uppercase; margin: 4px 0 8px;
}
.hswe-secsub { color: var(--hswe-muted); max-width: 46em; margin-bottom: 30px; }
/* services cards
---------------------------------------------------------------------------
Each card carries a colour identity drawn only from the existing palette
(Step 25): Residential = blue, Commercial = navy, Roll-Off = green. The
identity is expressed three ways that must always agree — the 4px top bar,
the icon tile, and the heading — driven by ONE per-card variable pair so a
future fourth service is a two-line addition rather than six overrides.
--hswe-accent the card's line colour (bar, glyph, heading)
--hswe-accent-lt the matching light tint used as the hover background
Commercial's tile is a NAVY GLYPH ON THE LIGHT-BLUE TILE, not a solid navy
tile. The mockup's tiles are uniformly light-tinted; a filled navy tile
would read three times heavier than its two neighbours and break the row.
Navy on #e9f0f4 is ~13:1, so the glyph is comfortably legible.
--------------------------------------------------------------------------- */
.hswe-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.hswe-card {
/* default identity = blue, so an unmodified card still renders correctly */
--hswe-accent: var(--hswe-blue);
--hswe-accent-lt: var(--hswe-blue-lt);
position: relative; /* containing block for the accent bar
AND for the stretched-link overlay */
background: var(--hswe-card); border: 1px solid var(--hswe-line);
border-radius: var(--hswe-radius); padding: 24px 22px;
transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s;
display: flex; flex-direction: column;
cursor: pointer; /* the whole card is the click target */
}
.hswe-card.is-blue { --hswe-accent: var(--hswe-blue); --hswe-accent-lt: var(--hswe-blue-lt); }
.hswe-card.is-green { --hswe-accent: var(--hswe-green); --hswe-accent-lt: var(--hswe-green-lt); }
/* Navy card borrows the LIGHT BLUE tint — navy has no light partner in the
palette, and inventing one would mean a new hex value. */
.hswe-card.is-navy { --hswe-accent: var(--hswe-navy); --hswe-accent-lt: var(--hswe-blue-lt); }
/* 4px top accent bar. Pulled out by 1px on three sides so it caps the card's
own 1px border instead of floating inside it. */
.hswe-card::before {
content: ""; position: absolute;
top: -1px; left: -1px; right: -1px; height: 4px;
background: var(--hswe-accent);
border-radius: var(--hswe-radius) var(--hswe-radius) 0 0;
}
.hswe-ic {
width: 52px; height: 52px; border-radius: 12px; background: var(--hswe-accent-lt);
display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.hswe-ic svg {
width: 28px; height: 28px; stroke: var(--hswe-accent); fill: none;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.hswe-card h3 {
font-size: 21px; color: var(--hswe-accent);
text-transform: uppercase; margin: 0;
}
.hswe-card p { font-size: 14px; color: var(--hswe-muted); margin: 6px 0 14px; flex: 1; }
/* The arrow link deliberately keeps the site link blue rather than taking the
accent: at 14px bold it is normal-size text for WCAG, and --hswe-green on
white is 4.28:1 — under the 4.5:1 floor. The 21px bold heading IS large
text (3:1 floor), so it can carry the accent safely. */
.hswe-card a { font-weight: 700; font-size: 14px; text-decoration: none; }
/* Hover / keyboard focus: lift, tint, underline the arrow. :focus-within so a
keyboard user tabbing to the stretched link gets the same affordance. */
.hswe-card:hover,
.hswe-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(3,28,47,.16);
background: var(--hswe-accent-lt);
border-color: var(--hswe-accent);
}
.hswe-card:hover a,
.hswe-card:focus-within a { text-decoration: underline; }
/* Reduced motion: keep every colour cue, drop only the movement. */
@media (prefers-reduced-motion: reduce) {
.hswe-card { transition: none; }
.hswe-card:hover,
.hswe-card:focus-within { transform: none; }
}
/* Stretched link — the existing "Residential services ->" anchor grows an
overlay covering the whole card, so the card is one big link WITHOUT
nesting the heading and paragraph inside an . */
.hswe-cardlink::after {
content: ""; position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border-radius: var(--hswe-radius);
}
/* Focus ring is drawn on the overlay, so it frames the whole card. */
.hswe-cardlink:focus-visible::after {
outline: 3px solid var(--hswe-accent);
outline-offset: 3px;
}
.hswe-cardlink:focus-visible { outline: none; }
/* holidays */
.hswe-hols { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.hswe-hol {
background: #fff; border: 1px solid var(--hswe-line); border-radius: 10px;
padding: 14px 18px; display: flex; justify-content: space-between;
align-items: center; font-size: 14.5px;
}
.hswe-hol b { color: var(--hswe-navy); }
.hswe-hol span { color: var(--hswe-muted); font-size: 13px; }
/* about — restored to the mockup's two-column layout (Step 21) */
.hswe-about .hswe-wrap {
display: grid;
grid-template-columns: auto 1fr;
gap: 34px;
align-items: center;
}
/* Mockup `.about .seal`. The 5px white ring and soft shadow are reproduced
exactly as specified. Note the visual differs slightly from the mockup by
design: the mockup's seal was an opaque JPEG so the disc read as filled, while
the real asset is transparent, so the page background shows through inside the
ring. No background was added — the artwork is used as-is. */
.hswe-about .hswe-seal {width:290px;height:auto;flex:0 0 auto;}
.hswe-about blockquote {
font-family: var(--global-heading-font-family);
font-size: 30px; font-weight: 700; color: var(--hswe-navy);
text-transform: uppercase; line-height: 1.15; margin: 0; padding: 0; border: 0;
}
.hswe-about p { color: var(--hswe-muted); margin-top: 10px; max-width: 52em; font-size: 15px; }
/* contact */
.hswe-contact { background: #fff; border-top: 1px solid var(--hswe-line); }
.hswe-contact .hswe-wrap {
display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px;
padding-top: 54px; padding-bottom: 54px;
}
.hswe-contact h3 { font-size: 21px; color: var(--hswe-navy); text-transform: uppercase; margin: 0 0 10px; }
.hswe-contact ul { list-style: none; font-size: 14.5px; color: var(--hswe-muted); margin: 0; padding: 0; }
.hswe-contact li { margin-bottom: 9px; }
.hswe-contact li b { color: var(--hswe-ink); }
.hswe-formlinks a {
display: block; background: #edf2e4; border: 1px solid #cfe0f4;
border-radius: 9px; padding: 11px 14px; margin-bottom: 9px;
font-weight: 600; font-size: 14px; text-decoration: none;
}
.hswe-formlinks a:hover { background: #e2ecd3; }
/* Map container. Keeps the placeholder's exact footprint — same 180px minimum
height, same 1px border, same corner radius — so swapping the hatched
placeholder for a live iframe does not shift the layout. The hatch is kept as
the background: it shows through while the iframe is still loading, then is
covered by the map. Padding drops to 0 so the map reaches the rounded edge,
and overflow is clipped so the iframe's square corners are rounded with it. */
.hswe-map {
background: repeating-linear-gradient(45deg,#eef3f8,#eef3f8 12px,#e6edf5 12px,#e6edf5 24px);
border: 1px solid var(--hswe-line); border-radius: var(--hswe-radius);
display: flex; align-items: stretch; justify-content: center;
color: var(--hswe-muted); font-size: 13.5px; min-height: 180px;
text-align: center; padding: 0; overflow: hidden;
}
/* width:100% + max-width:100% keeps the frame inside its grid column at phone
widths, so the page never gains a horizontal scrollbar. */
.hswe-map iframe {
display: block;
width: 100%;
max-width: 100%;
/* .hswe-map is a flex container, and a flex item defaults to min-width:auto,
which can refuse to shrink below its content width and push the page into
horizontal scroll on narrow phones. min-width:0 is the standard release
valve; with max-width:100% it guarantees the frame tracks its column. */
min-width: 0;
min-height: 180px;
height: 100%;
border: 0;
flex: 1 1 auto;
}
/* Address caption under the map. The map supplements the address, it never
replaces it. */
.hswe-map-addr {
margin-top: 8px;
font-size: 13px;
color: var(--hswe-muted);
line-height: 1.45;
}
.hswe-map-addr b { color: var(--hswe-ink); }
/* ------------------------------------------- 9. FACEBOOK BAND ABOVE FOOTER */
.hswe-fb-band {background:#14415a;color:#fff;}
.hswe-fb-band .hswe-wrap {
display: flex; align-items: center; justify-content: space-between;
gap: 22px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px;
}
.hswe-fb-band h2 {
font-family: var(--global-heading-font-family);
font-size: 27px; font-weight: 800; text-transform: uppercase;
line-height: 1.1; color: #fff; margin: 0;
}
.hswe-fb-band p { font-size: 14.5px; color: #ccdbe6; max-width: 44em; margin: 6px 0 0; }
.hswe-fb-band .hswe-go {
flex: none; display: inline-flex; align-items: center; gap: 10px;
background: #fff; color: #1877f2; font-weight: 800; font-size: 15.5px;
padding: 13px 22px; border-radius: 10px; text-decoration: none;
}
.hswe-fb-band .hswe-go:hover { background: #eef2f5; }
/* ------------------------------------------- 10a. FOOTER MAIN (three columns) */
/* Navy footer area sitting between the Facebook band and the thin base strip.
Navy comes from the palette token, never a literal hex. */
.hswe-footer-main {
background: var(--hswe-navy);
color: #9fb6d2;
border-top: 1px solid rgba(255,255,255,.08);
}
.hswe-footer-main .hswe-wrap {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: 36px;
padding-top: 44px;
padding-bottom: 44px;
}
.hswe-footer-main h2 {
font-family: var(--global-heading-font-family);
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
color: #fff;
margin: 0 0 12px;
}
.hswe-footer-seal {width:auto;height:62px;border-radius:10px;display:block;margin-bottom:14px;background:#fff;padding:8px 12px;box-sizing:content-box;}
.hswe-footer-org {
font-family: var(--global-heading-font-family);
font-size: 20px;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
color: #fff;
}
.hswe-footer-motto {
color: var(--hswe-green-soft);
font-weight: 600;
font-size: 12px;
letter-spacing: .5px;
text-transform: uppercase;
margin-top: 6px;
}
.hswe-footer-main ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.75; }
.hswe-footer-main li { margin-bottom: 2px; }
.hswe-footer-main a { color: #cfe0f4; text-decoration: none; }
.hswe-footer-main a:hover { color: #fff; text-decoration: underline; }
.hswe-footer-main .hswe-footer-hours { margin-top: 10px; font-size: 13.5px; color: #9fb6d2; }
.hswe-footer-main .hswe-footer-hours b { color: #fff; display: block; }
/* -------------------------------------------------------------- 10. FOOTER */
.site-footer { background: var(--hswe-navy); color: #9fb6d2; font-size: 13px; }
.site-footer a { color: #fff; }
.hswe-footer-credit {
display: flex; justify-content: space-between; align-items: center;
gap: 14px; flex-wrap: wrap; width: 100%;
}
.hswe-footer-credit b { color: #fff; }
.hswe-footer-credit .hswe-fb-icon {
background: rgba(255,255,255,.14);
}
.hswe-footer-credit .hswe-fb-icon:hover { background: #1877f2; }
/* --------------------------------------------------- 11. INTERIOR PAGES */
/* 11.0 Container reset.
Kadence boxes page content: `.content-container.site-container` caps width at
1290px, `.entry-content-wrap` adds 2rem padding, `.content-area` adds 5rem
margins, and the entry carries a card shadow. The interior mockups are
full-bleed — .hswe-jump has a white band and .hswe-sect a divider that both
run edge to edge — so those wrappers are neutralised on interior pages only.
Centring is then handled by .hswe-wrap (1120px), exactly as on the homepage.
Specificity: each of Kadence's rules is (0,1,0) or (0,2,0); these are one
class higher via the .hswe-interior body class, so no !important. */
.hswe-interior .content-area { margin-top: 0; margin-bottom: 0; }
.hswe-interior .content-container.site-container { max-width: none; padding-left: 0; padding-right: 0; }
.hswe-interior .entry-content-wrap { padding: 0; }
.hswe-interior .entry.single-entry { box-shadow: none; background: transparent; }
.hswe-interior .entry-content > *:last-child { margin-bottom: 0; }
/* 11.1 Page hero — rendered by hswe_page_hero(), shared by all eight pages.
Same gradient + animation as the homepage hero, shorter. Motion respects
prefers-reduced-motion through the shared rule in section 5. */
.hswe-pagehero {
color: #fff;
position: relative;
overflow: hidden;
background: linear-gradient(130deg, #02141f 0%, var(--hswe-navy) 40%, var(--hswe-navy2) 70%, #14415a 100%);
background-size: 220% 220%;
animation: hswe-heroshift 26s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .hswe-pagehero { animation: none; } }
.hswe-pagehero .hswe-wrap { padding-top: 44px; padding-bottom: 48px; position: relative; z-index: 2; }
.hswe-pagehero h1 { font-size: 44px; font-weight: 800; text-transform: uppercase; line-height: 1.05; color: #fff; margin: 0; }
.hswe-pagehero p { margin-top: 10px; color: #d7e5f5; max-width: 46em; font-size: 16px; }
.hswe-crumbs { font-size: 13px; color: #9fb6d2; margin-bottom: 10px; }
.hswe-crumbs a { color: #cfe0f4; text-decoration: none; }
/* 11.2 In-page jump navigation */
.hswe-jump { background: #fff; border-bottom: 1px solid var(--hswe-line); }
.hswe-jump .hswe-wrap { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.hswe-jump a {
font-size: 13.5px; font-weight: 600; color: var(--hswe-muted);
padding: 7px 12px; border-radius: 99px; border: 1px solid var(--hswe-line); text-decoration: none;
}
.hswe-jump a:hover { background: var(--hswe-blue-lt); color: var(--hswe-green); border-color: #cfe0f4; }
/* 11.3 Sections */
.hswe-sect { padding: 46px 0; border-bottom: 1px solid var(--hswe-line); }
.hswe-sect:last-of-type { border-bottom: 0; }
.hswe-sect h2 { font-size: 30px; color: var(--hswe-navy); text-transform: uppercase; margin: 0 0 6px; }
.hswe-sect .hswe-lead { color: var(--hswe-muted); max-width: 52em; margin-bottom: 22px; font-size: 15px; }
/* 11.3b Container permit page.
Step 43 put this page on the STANDARD wrap, the same 1120px (1076px of
content) every other interior page uses. That stays. The 720px reading column
it launched with is gone and must not come back: a narrow column on a large
monitor is a skinny tower with acres of margin.
Step 44 changed what fills the width. The apply action was at the BOTTOM of
the page, below the fold, and the four facts were a bland bordered list with
dead space under them. Both are now one card at the TOP of the right column:
heading, the green button, the new-tab line, a rule, then the four facts as
compact rows. The bottom band is gone. The card carries the page.
Every selector below is scoped to a .hswe-permit* class. NOTHING here modifies
.hswe-wrap, .hswe-panel, .hswe-ctaduo or any other shared class, and there are
no importance flags anywhere in this file. */
.hswe-permit__row { display: grid; gap: 40px; align-items: start; }
.hswe-permit__row + .hswe-permit__row { margin-top: 44px; }
/* Row 2, two equal columns. */
.hswe-permit__row--even { grid-template-columns: 1fr 1fr; }
/* Row 1, roughly 55/45. Written as 55fr 45fr so the ratio is the rule rather
than something to divide out of decimals.
PLACEMENT, and it is deliberate. The card is FIRST in the markup, because
that is the order a phone must read: apply, then who needs it. On desktop the
card belongs on the right, so the two children are placed explicitly into
columns rather than left to document order. Explicit grid placement rather
than `order`, because `order` moves the visual position without moving the
tab order, and this card holds the page's only button. */
.hswe-permit__row--intro { grid-template-columns: 55fr 45fr; }
.hswe-permit__row--intro > .hswe-permit__block { grid-column: 1; grid-row: 1; }
.hswe-permit__row--intro > .hswe-permit__card { grid-column: 2; grid-row: 1; }
/* Measure control. The base `.hswe-sect .hswe-lead` cap is 52em, far wider than
these columns need: at 55% of 1076px a 15px paragraph would run to about 76
characters. 34em lands near 65, which is the target. (0,3,0) so it beats the
(0,2,0) base on specificity rather than on source order. */
.hswe-permit .hswe-permit__block .hswe-lead { max-width: 34em; }
/* The apply card. Chrome is the shared .hswe-panel, reused as is, so this card
and the form page rail panels cannot drift apart. Everything below only sets
what a panel does not already say. */
.hswe-permit .hswe-permit__card h2 {
font-size: 22px; color: var(--hswe-navy); text-transform: uppercase;
margin: 0 0 14px;
}
/* The button fills the card. It is the one action on the page, so it is sized
as the primary rather than as a button that happens to be green. */
.hswe-permit__card .hswe-ctaduo { margin-top: 0; }
.hswe-permit__card .hswe-ctaduo a {
flex: 1; justify-content: center;
font-size: 16px; padding: 15px 22px;
}
/* The new-tab line. Permanently visible: never hide it with script, never
collapse it behind a toggle, and never set `display` on
.hswe-permit__fallback. */
.hswe-permit__card .hswe-permit__fallback {
margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hswe-muted);
}
/* The four facts, secondary to the button by design: smaller, muted, and below
a rule so they read as supporting detail rather than as a second list of
things to do. */
.hswe-permit__facts {
list-style: none; margin: 18px 0 0; padding: 16px 0 0;
border-top: 1px solid var(--hswe-line);
}
.hswe-permit__facts li {
position: relative; padding: 5px 0 5px 18px;
font-size: 13.5px; line-height: 1.45; color: var(--hswe-muted);
}
.hswe-permit__facts li::before {
content: ""; position: absolute; left: 0; top: 11px;
width: 7px; height: 7px; border-radius: 50%; background: var(--hswe-green);
}
@media (max-width: 920px) {
/* One column. The explicit placement above is released so the children fall
back to DOCUMENT order, which puts the card first: apply, who needs it,
have ready, what happens. That is the required phone order, achieved by
markup order rather than by shuffling. */
.hswe-permit__row--intro,
.hswe-permit__row--even { grid-template-columns: 1fr; gap: 30px; }
.hswe-permit__row--intro > .hswe-permit__block,
.hswe-permit__row--intro > .hswe-permit__card { grid-column: auto; grid-row: auto; }
}
/* 11.4 Two-column split */
.hswe-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* 11.5 Panel */
.hswe-panel { background: #fff; border: 1px solid var(--hswe-line); border-radius: var(--hswe-radius); padding: 22px 24px; }
.hswe-panel h3 { font-size: 19px; color: var(--hswe-navy); text-transform: uppercase; margin: 0 0 6px; }
.hswe-panel p { font-size: 14px; color: var(--hswe-muted); }
.hswe-panel .hswe-tag {
display: inline-block; background: var(--hswe-green-lt); color: var(--hswe-green);
font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px;
}
/* 11.6 Tick / cross rule lists */
.hswe-rules { list-style: none; margin: 0; padding: 0; }
.hswe-rules li {
position: relative; padding: 10px 0 10px 34px;
border-bottom: 1px dashed var(--hswe-line); font-size: 14.5px; color: #33465a;
}
.hswe-rules li:last-child { border-bottom: 0; }
.hswe-rules li::before {
content: "✓"; position: absolute; left: 4px; top: 9px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--hswe-green-lt); color: var(--hswe-green);
font-weight: 800; font-size: 12px;
display: flex; align-items: center; justify-content: center;
}
.hswe-rules li.hswe-no::before { content: "✕"; background: #fdecea; color: #c0392b; }
/* 11.7 Data table */
.hswe-btable {
width: 100%; border-collapse: collapse; background: #fff;
border: 1px solid var(--hswe-line); border-radius: var(--hswe-radius);
overflow: hidden; font-size: 14.5px;
}
.hswe-btable th {
background: var(--hswe-navy); color: #fff; text-align: left; padding: 12px 16px;
font-family: var(--global-heading-font-family); font-size: 16px;
letter-spacing: .5px; text-transform: uppercase;
}
.hswe-btable td { padding: 12px 16px; border-top: 1px solid var(--hswe-line); color: #33465a; }
.hswe-btable td b { color: var(--hswe-navy); }
.hswe-wk {
display: inline-block; background: var(--hswe-blue-lt); color: var(--hswe-blue);
font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 6px;
}
/* 11.8 Callout */
.hswe-callout {
background: var(--hswe-blue-lt); border: 1px solid #cfe0f4;
border-left: 5px solid var(--hswe-blue); border-radius: 10px;
padding: 16px 20px; font-size: 14.5px; color: #26405c; margin-top: 18px;
}
.hswe-callout b { color: var(--hswe-navy); }
/* 11.9 Paired call-to-action buttons
REMOVED in Step 40 revised: every `.hswe-herocta` selector that used to share
this block, plus the two hero-only overrides that followed it
(`margin-top:30px` and the larger font/padding). That class was the single CTA
button in the home hero; the hero is a task launcher now and tile 1 goes to
the same destination, so the button and its rules have no user left anywhere
in the theme or in any page content. Checked before deleting, same as the
Step 29 `.hswe-formembed.is-centered` removal.
`.hswe-ctaduo` is untouched and still carries the Residential and Commercial
button pairs. The green and its hover live here and are also what the primary
hero tile matches, so the two still cannot drift. */
.hswe-ctaduo { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hswe-ctaduo a {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 700; font-size: 15px; padding: 13px 22px;
border-radius: 10px; text-decoration: none;
}
.hswe-ctaduo a.hswe-g { background: var(--hswe-green); color: #fff; }
.hswe-ctaduo a.hswe-g:hover { background: #364f22; }
.hswe-ctaduo a.hswe-o { background: #fff; border: 2px solid var(--hswe-navy); color: var(--hswe-navy); }
.hswe-ctaduo a.hswe-o:hover { background: var(--hswe-blue-lt); }
/* 11.10 FAQ accordion (FAQ page only) */
.hswe-faq details {
background: #fff; border: 1px solid var(--hswe-line);
border-radius: 12px; margin-bottom: 10px; overflow: hidden;
}
.hswe-faq summary {
cursor: pointer; list-style: none; padding: 16px 20px;
font-weight: 700; color: var(--hswe-navy); font-size: 15.5px;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.hswe-faq summary::-webkit-details-marker { display: none; }
.hswe-faq summary::after { content: "+"; font-size: 22px; color: var(--hswe-green); font-weight: 400; flex: none; }
.hswe-faq details[open] summary::after { content: "−"; } /* U+2212 MINUS SIGN, not an en dash. It is drawn to match the "+" it
alternates with above, so the open and closed states line up at the
same width and height. An en dash is punctuation pressed into service
as an operator and does not align. */
.hswe-faq details[open] summary { border-bottom: 1px solid var(--hswe-line); }
.hswe-faq .hswe-a { padding: 14px 20px 18px; font-size: 14.5px; color: #33465a; }
.hswe-faq .hswe-a a { font-weight: 600; }
/* 11.11 Team grid (About page only) */
/* Step 67: switched from CSS grid to flex + centered wrap. Seven cards do not
divide evenly into 4 or 2 columns, so a plain grid leaves a trailing row
pinned to the left with empty space beside it. Flex with justify-content:
center closes that gap by centering whatever is left on the last row,
whether it is three cards or one, at every breakpoint below. */
.hswe-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.hswe-tcard {
background: #fff; border: 1px solid var(--hswe-line);
border-radius: var(--hswe-radius); padding: 22px; text-align: center;
flex: 0 1 calc(25% - 12px);
}
.hswe-tcard .hswe-av {
width: 64px; height: 64px; border-radius: 50%;
background: var(--hswe-blue-lt); color: var(--hswe-blue);
font-family: var(--global-heading-font-family); font-weight: 800; font-size: 24px;
display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.hswe-tcard b { display: block; color: var(--hswe-navy); font-size: 16px; }
.hswe-tcard span { font-size: 13px; color: var(--hswe-muted); }
/* 11.12 Contact grid + form links (Contact page only) */
/* Step 31: back to the original 1.1fr 1fr. Step 27 widened this to 1.2fr to
give the embedded form room; the form has moved to /general-contact/ and
Contact is a directory again, so the original ratio is correct once more. */
.hswe-cgrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
/* Step 29: 70/30 form + right rail, used by the dedicated form pages.
A SEPARATE class from .hswe-cgrid on purpose — that one is the Contact
page's own 1.2fr/1fr layout and must not move. Two grids, two jobs. */
.hswe-fgrid { display: grid; grid-template-columns: 7fr 3fr; gap: 18px; }
.hswe-flinks a {
display: flex; align-items: center; gap: 10px;
background: #fff; border: 1px solid var(--hswe-line); border-radius: 12px;
padding: 16px 18px; margin-bottom: 10px;
font-weight: 700; font-size: 15px; color: var(--hswe-navy); text-decoration: none;
}
.hswe-flinks a:hover { border-color: #a9c58c; background: var(--hswe-blue-lt); color: #a9c58c; }
.hswe-flinks small { display: block; font-weight: 400; color: var(--hswe-muted); font-size: 12.5px; margin-top: 2px; }
/* Step 31: the BASE sizing above is the original roomy card, which is what the
Contact page directory wants back. Step 27 had tightened the base itself
because at that moment the only cards on the site were in a narrow column;
the Step 29 rail still needs that tight version, so the tightened values
moved HERE, scoped to the rail, instead of staying global.
(0,2,1) vs the base (0,1,1) — wins on the cascade, no !important. */
.hswe-flinks.is-tight a { padding: 10px 14px; margin-bottom: 8px; font-size: 14px; }
.hswe-flinks.is-tight small { font-size: 12px; }
/* 11.13 Top bar phone glyph — full-strength white, matching the Facebook mark. */
.hswe-topbar .hswe-phone-icon {
display: inline-flex; align-items: center; justify-content: center;
color: #fff; opacity: 1; vertical-align: middle; margin-right: 2px;
}
.hswe-topbar .hswe-phone-icon svg { display: block; }
/* ------------------------------------------------------- 12. RESPONSIVE */
@media (max-width: 920px) {
.hswe-hero .hswe-wrap { grid-template-columns: 1fr; padding-top: 44px; }
.hswe-hero h1 { font-size: 40px; }
.hswe-strip .hswe-wrap { grid-template-columns: 1fr 1fr; }
.hswe-cell { border-left: 0; border-top: 1px solid var(--hswe-line); }
.hswe-cards { grid-template-columns: 1fr 1fr; }
.hswe-hols { grid-template-columns: 1fr 1fr; }
.hswe-contact .hswe-wrap { grid-template-columns: 1fr; }
/* Mockup: the About block stacks and centres at this breakpoint. */
.hswe-about .hswe-wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; }
/* Footer: three columns -> two, so the address column keeps its line lengths. */
.hswe-footer-main .hswe-wrap { grid-template-columns: 1fr 1fr; gap: 30px; }
/* Interior page components (mockup breakpoints). */
.hswe-duo { grid-template-columns: 1fr; }
.hswe-pagehero h1 { font-size: 34px; }
.hswe-tcard { flex-basis: calc(50% - 8px); }
.hswe-cgrid { grid-template-columns: 1fr; }
/* Form first, rail beneath it — DOM order already puts the form first. */
.hswe-fgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.hswe-cards, .hswe-hols, .hswe-strip .hswe-wrap { grid-template-columns: 1fr; }
.hswe-hero h1 { font-size: 34px; }
.hswe-sec { font-size: 30px; }
/* Footer: single column, stacked in source order (brand, contact, site). */
.hswe-footer-main .hswe-wrap { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 36px; }
}
/* --------------------------------------------------------- 12. FORM EMBEDS */
/* JotForm script embed (Step 26). The script injects a self-resizing iframe,
so the height is never set here — only the width is constrained.
Step 27: margin is 0, not `0 auto`. The embed now lives INSIDE a .hswe-cgrid
column, where centring would float it away from its own heading; flush left
is what lines it up with the h2 above it. max-width is kept as a cap for any
future full-width placement — in the Contact column the column is narrower,
so it never binds.
Step 27 also RETIRED the `padding-bottom:46px` rule that lived here. It
existed only because the embed used to be its own top-level block outside
.hswe-sect and had to supply its own bottom padding. It is inside the
section now and inherits that padding, so the rule would have doubled the
gap. Do not reintroduce it without moving the embed back out. */
.hswe-formembed{max-width:760px;margin:0}
.hswe-formembed iframe{display:block;width:100%;border:0}
/* REMOVED in Step 29: `.hswe-formembed.is-centered{margin-left:auto;margin-right:auto}`.
Step 28 added it to centre the lone form on /roll-off-quote/. Step 29 gave
that page a 70/30 grid, so the form is flush left in its own column and the
modifier had no remaining user anywhere — checked across all posts, theme
files and options before deleting. Recorded here so its absence reads as a
decision rather than an oversight. If a future single-column form page
needs centring, reinstate this rule; do NOT add `auto` to the base
.hswe-formembed rule, which Step 27 set to margin:0 deliberately. */
/* ---- 6d. RESULT PANEL, TWO SERVICE SECTIONS (Step 45) ---------------------
Treatment 1, picked 2026-08-06. The panel answers two questions that run on
different rhythms, so it renders two sections: garbage above bulk items.
That order is deliberate. Garbage day is what residents ring the office
about, so it comes first, straight after the street name.
Values below are measured and contrast checked. Do not substitute your own.
EACH SECTION CARRIES THREE SIGNALS: the heading word, the coloured left rule
and the tint. Colour alone would leave a colour blind visitor looking at two
identical grey panels, and green against blue is one of the common
confusions. NEVER remove the heading word to save space.
Body text is dark navy on a pale tint, never coloured text on a coloured
fill, which keeps every line above 12 to 1. The only coloured text is the
small uppercase label, and both label colours clear 4.5 to 1 on their own
tint. CHANGE A TINT AND YOU MUST RECHECK ITS LABEL.
Two colours are banned in here. The site gold #f4b41a is the alert bar
colour: a resident would read their own street as a warning. White on the
site green #44632b measures 4.29 to 1 and fails at this text size, which is
why the design tints rather than fills.
font-family and text-transform are set explicitly below. The legacy
.hswe-lookup__weeknum rule in section 6b used to impose the heading font and
uppercase, which would have rendered "WEEK 1" in condensed caps beside a
sentence-case "Every Tuesday". Those two declarations were deleted there and
are pinned here so the pair cannot drift apart again. Both lines are the same
kind of answer and must look like it.
The --unknown lines carry the office number instead of an answer and KEEP
THEIR SECTION'S NORMAL COLOUR. No red, no warning styling, no icon. Somebody
on a street we have no data for has not done anything wrong. */
.hswe-lookup__svc { padding: 13px 15px; border-radius: 9px; border-left: 5px solid; margin-bottom: 11px; }
.hswe-lookup__svc:last-child { margin-bottom: 0; }
.hswe-lookup__svc--garbage { background: #eef3e7; border-left-color: #44632b; }
.hswe-lookup__svc--garbage .hswe-lookup__svclabel { color: #33491f; }
.hswe-lookup__svc--bulk { background: var(--hswe-blue-lt); border-left-color: var(--hswe-blue); }
.hswe-lookup__svc--bulk .hswe-lookup__svclabel { color: var(--hswe-blue); }
.hswe-lookup__svclabel { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
letter-spacing: 1px; font-size: 13px; font-weight: 700; margin: 0 0 3px; }
.hswe-lookup__day, .hswe-lookup__weeknum { font-family: inherit; text-transform: none;
font-size: 25px; font-weight: 700; line-height: 1.15; margin: 0; }
.hswe-lookup__weekwhen { font-size: 14.5px; margin: 5px 0 0; }
.hswe-lookup__svcnote { font-size: 12.5px; margin: 6px 0 0; }
.hswe-lookup__day--unknown, .hswe-lookup__weeknum--unknown { font-size: 17px; font-weight: 600; }
/* Address block labels ("Cox Mill Rd. (2903 to 3501)") WRAP, never truncate.
The range is the part that tells a resident whether the row is theirs and it
sits at the end, exactly where an ellipsis would eat it. Nothing in this file
sets nowrap or text-overflow; these are guards so a later edit cannot
introduce a clipped label. */
.hswe-lookup__option, .hswe-lookup__street, .hswe-lookup__day { overflow-wrap: break-word; }
.hswe-lookup__option { flex-wrap: wrap; }
/* ---- 6e. GARBAGE HALF OF THE MANUAL PATH (Step 45) ------------------------
Step 45 gave the lookup a garbage day as well as a bulk week. The manual path
in .hswe-bulkweek answered only the bulk half, so these two lines were ADDED
above the table. Nothing in that section was replaced: the table, both
Wednesday route lists, the Week 1 note and the September 1 date are untouched
and stay exactly where Step 40 put them.
Placed above the table on purpose. Garbage day is what a resident asks first,
and the table is a consequence of it, so the rule has to be read before the
grid that derives from it.
Same standing rule as the rest of section 4: nothing here sets `display`, and
these lines are readable with no JavaScript at all. They are part of the floor,
not decoration on top of it. Do not hide, collapse or defer them. */
.hswe-garbday {
margin: 0 0 6px;
font-size: 15.5px; line-height: 1.5; color: var(--hswe-ink);
}
.hswe-garbday b { color: var(--hswe-navy); font-weight: 700; }
.hswe-garbday__call {
margin: 0 0 14px;
font-size: 14px; line-height: 1.5; color: var(--hswe-muted);
}
/* Step 69: bottom-align duo panel buttons (Roll-Off page only) */
.page-id-8 .hswe-duo .hswe-panel { display: flex; flex-direction: column; }
.page-id-8 .hswe-duo .hswe-panel > :last-child { margin-top: auto; }