/* Theme Name: Downtown Arnprior Description: The block theme for the downtown Arnprior business hub. Every template is a thin shell around one PHP pattern, because the eighteen page designs are bespoke and a pattern is a PHP file. See docs/decisions/0002. Version: 0.81.2 Author: Kingsbury Creative Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.2 Text Domain: dta */ /* ---------------------------------------------------------------- THE FOUR STEPS 620 two columns 800 tablet 1000 desktop And two that are not free to move: 1024 the nav drawer, and system.js watches this exact number with matchMedia. Change one without the other and the body stays scroll-locked when the window grows. 1180 the nav gap, and it is contentSize in theme.json. Nothing else. There were nineteen, because eighteen page designs each solved "wide enough for two columns" against their own ruler: 600, 620 and 640 all meant the same thing, and so did 860, 900, 940, 960 and 980. The numbers are written down in theme.json under custom.step as well, which is where a person looks for a design value. They are repeated here because @media cannot read a custom property: the query is evaluated before the cascade, so var() in a media condition is not a thing. Two copies, and this comment is the reason they have to be kept in step by hand. ----------------------------------------------------------------- */ /* ---------------------------------------------------------------- TOKENS theme.json is the design system. Every colour, type size and spacing value lives there and nowhere else. This block only gives them the short names the design was written against, so the CSS ported from design/system.css reads as it was written. If you are about to type a hex into this file, put it in theme.json instead and alias it here. ---------------------------------------------------------------- */ :root{ --paper:var(--wp--preset--color--paper); --paper-2:var(--wp--preset--color--paper-2); --ink:var(--wp--preset--color--ink); --ink-soft:var(--wp--preset--color--ink-soft); --yellow:var(--wp--preset--color--yellow); --card:var(--wp--preset--color--card); --danger:var(--wp--preset--color--danger); /* Open, closing soon and closed are green, yellow and grey. The colour is never the only carrier: the badge says the words as well. */ --open:var(--wp--preset--color--open); --line:var(--wp--custom--line); --line-heavy:var(--wp--custom--line-heavy); /* The navy bands are the header, the drawer, the footer, the join board and every inverted section. They keep the same palette in light, dark and high contrast on purpose: the signboard does not change colour when the page does. */ --navy:var(--wp--preset--color--navy); --on-navy:var(--wp--preset--color--on-navy); --on-navy-line:var(--wp--custom--on-navy-line); --photo-ink:var(--wp--preset--color--photo-ink); --disp:var(--wp--preset--font-family--display); --body:var(--wp--preset--font-family--body); --t-s:var(--wp--preset--font-size--s); --t-b:var(--wp--preset--font-size--b); --t-m:var(--wp--preset--font-size--m); --t-l:var(--wp--preset--font-size--l); --t-xl:var(--wp--preset--font-size--xl); --gut:var(--wp--preset--spacing--gut); --band:var(--wp--preset--spacing--band); /* the space under a heading, scaled to the same vw term the type itself uses. A fixed rem here is why the gap under a name reads fine on a phone and broken on a desktop: the heading grows, the gap does not. */ --sp-3xs:var(--wp--custom--space--tight); --sp-2xs:var(--wp--custom--space--snug); --sp-xs:var(--wp--custom--space--open); --sp-s:var(--wp--custom--space--wide); /* The step the scale never had. It ran 3xs, 2xs, xs, s and then jumped straight to --band, so anything that needed "a new section starts here, but not a new band" reached for a hardcoded rem value instead. */ --sp-m:var(--wp--custom--space--mid); --hdr-h:var(--wp--custom--header-height); /* Where a sticky sub-bar parks. The header is fixed and hides itself on the way down the page, so a bar parked at --hdr-h leaves an empty 62px strip with the page scrolling through it. system.js puts .hdr-away on the html element whenever the header is out, and this drops to zero. */ --stick-top:var(--hdr-h); /* the layer scale. Nothing on this site sets a z-index that is not one of these five. Leaflet is why: it hard-codes up to 800 on its own panes, which beat a header at 50. */ --z-map:var(--wp--custom--layer--map); --z-sticky:var(--wp--custom--layer--sticky); --z-hdr:var(--wp--custom--layer--header); --z-nav:var(--wp--custom--layer--nav); --z-find:var(--wp--custom--layer--find); --z-skip:var(--wp--custom--layer--skip); } /* derive the hairline from the ink so a theme only sets one colour. --line-heavy is the same hairline with enough of it to read as the edge of an object rather than as a rule between two. Measured at 390px: the owner form's shut section bars sit at 1.10:1 against the page they sit on, so the only thing making four of them four things is this border, and at 17% it was 1.38:1 and doing none of that work. The percentages are not a taste: each one is the smallest that puts the painted edge over 3:1 against the surface it edges, which is what WCAG asks of a boundary somebody has to see to tell one control from the next. Measured off the painted pixels in all four themes by the probe in #180, not read off these declarations, because alpha over an unknown backdrop is exactly what a computed value will not tell you. */ @supports (color:color-mix(in srgb,red 50%,white)){ :root{--line:color-mix(in srgb,var(--ink) 17%,transparent); --line-heavy:color-mix(in srgb,var(--ink) 52%,transparent)} } /* the display-options bar sets these attributes; the head script restores them from localStorage before first paint so nothing flashes */ html[data-fs="1"]{font-size:112.5%} html[data-fs="2"]{font-size:125%} /* The three other theme states. Their palettes live in theme.json under settings.custom, same as every other colour on the site. */ :root[data-thr="dark"]{ --paper:var(--wp--custom--dark--paper); --paper-2:var(--wp--custom--dark--paper-2); --ink:var(--wp--custom--dark--ink); --ink-soft:var(--wp--custom--dark--ink-soft); --line:var(--wp--custom--dark--line); --line-heavy:var(--wp--custom--dark--line-heavy); --card:var(--wp--custom--dark--card); /* The light danger red is #a3271b and it measures 1.97:1 against the dark card, so a field marked wrong in dark mode was marked in a colour nobody could see. Same failure as the focus ring, found the same way. */ --danger:var(--wp--custom--dark--danger); } :root[data-hc="1"]{ --paper:var(--wp--custom--contrast--paper); --paper-2:var(--wp--custom--contrast--paper-2); --ink:var(--wp--custom--contrast--ink); --ink-soft:var(--wp--custom--contrast--ink-soft); --line:var(--wp--custom--contrast--line); --line-heavy:var(--wp--custom--contrast--line-heavy); --card:var(--wp--custom--contrast--card); } :root[data-thr="dark"][data-hc="1"]{ --paper:var(--wp--custom--dark-contrast--paper); --paper-2:var(--wp--custom--dark-contrast--paper-2); --ink:var(--wp--custom--dark-contrast--ink); --ink-soft:var(--wp--custom--dark-contrast--ink-soft); --line:var(--wp--custom--dark-contrast--line); --line-heavy:var(--wp--custom--dark-contrast--line-heavy); --card:var(--wp--custom--dark-contrast--card); --danger:var(--wp--custom--dark-contrast--danger); } @supports (color:color-mix(in srgb,red 50%,white)){ :root[data-thr="dark"]{--line:color-mix(in srgb,var(--ink) 18%,transparent); --line-heavy:color-mix(in srgb,var(--ink) 40%,transparent)} :root[data-hc="1"],:root[data-thr="dark"][data-hc="1"]{ --line:color-mix(in srgb,var(--ink) 40%,transparent); --line-heavy:color-mix(in srgb,var(--ink) 55%,transparent)} } /* ---------------------------------------------------------------- BASE ---------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--body);font-size:var(--t-b);line-height:1.65; overflow-x:clip; } /* height:auto or a browser honours the width and height attributes WordPress writes on every uploaded image, and squashes the picture the moment max-width has to do anything. */ img{max-width:100%;height:auto;display:block} a{color:inherit} /* A link that leaves this site says so and opens in its own tab, so the page somebody was reading is still there when they come back. The hook is the target attribute and not the href: matching the href means writing the site's domain into this file, and it is a different domain on a laptop than it is on the real one. Drawn as a mask rather than a character or a coloured image, so it takes whatever colour the link is. That matters in three places at once: the navy footer, dark mode, and both contrast modes. */ :root{--icon-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6' /%3E %3Cpath d='M10 14 21 3' /%3E %3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' /%3E%3C/svg%3E")} a[target="_blank"]::after{content:"";display:inline-block;width:.72em;height:.72em; margin-left:.34em;vertical-align:-.02em;background:currentColor; -webkit-mask:var(--icon-out) center/contain no-repeat; mask:var(--icon-out) center/contain no-repeat} h1,h2,h3{margin:0;font-family:var(--disp);font-weight:800;line-height:1.06;letter-spacing:-.01em} /* balance keeps a two-line headline from leaving one orphan word. Ignored where unsupported, which costs nothing. */ h1,h2,h3,.lede,.kick{text-wrap:balance} p{margin:0 0 1em;text-wrap:pretty} ::selection{background:var(--yellow);color:var(--ink)} /* The focus ring, and it is two rings on purpose. One colour cannot do this. The ring has to read on paper, on the navy bands, over a photograph and on a yellow button, and the brightness windows those demand do not overlap: navy needs a light ring and yellow needs a dark one. There is no single value that clears 3:1 against both. This rule used to be one ink outline. --ink and --navy are the same hex in light mode, so a keyboard user tabbing into the footer got an outline at 1:1 against the band behind it, which is to say nothing at all. Measured on /contact/, not noticed by looking. So: ink outside, paper inside, the inner ring filling the gap the offset opens. Those two are opposite ends of the palette in all four theme states, so whichever one loses its contrast against the thing behind it, the other one has it. Same trick the browser's own default ring uses. */ :focus-visible{ outline:3px solid var(--ink); outline-offset:3px; box-shadow:0 0 0 3px var(--paper); } /* anything an in-page link points at clears the sticky header */ :target,[id]{scroll-margin-top:calc(var(--hdr-h) + 1rem)} .wrap{width:min(100% - (var(--gut)*2),1160px);margin-inline:auto} .skip{position:absolute;left:-999px} .skip:focus{left:.5rem;top:.5rem;z-index:var(--z-skip);background:var(--ink);color:var(--paper); padding:0 1.1rem;min-height:44px;display:inline-flex;align-items:center} /* small caps label, used sparingly */ .kick{ font-weight:700;font-size:var(--t-s);text-transform:uppercase; letter-spacing:.12em;color:var(--ink-soft); } /* ---------------------------------------------------------------- DISPLAY OPTIONS : text size, contrast, colours ---------------------------------------------------------------- */ /* This started as six pills in a band above the header, which put roughly a hundred pixels of chrome before any of the words on every page. Then it was one button in that band, which is a whole strip across the site for one control and looked it. It is a button in the header now, beside the menu, and the panel drops out of the header rather than pushing the page down. The band is gone. The button says Aa. It was a faders icon and it did not survive being 18px on a navy ground: three tracks with knobs is a shape you decipher, and the people most likely to want this button are the ones least able to do that at that size. Two letters in the display face read at a glance and say the thing the panel mostly does. */ .dispbtn{ background:none;color:var(--on-navy);border:1px solid #eef1ef55;border-radius:4px; width:44px;height:44px;flex:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:background .15s,color .15s,border-color .15s; } .dispbtn-aa{font-family:var(--disp);font-weight:800;font-size:1.02rem;line-height:1; letter-spacing:-.01em} /* The on-navy fill. Shared with the drawer's close button and the ghost button: everything drawn transparent on navy fills the same way. Was three identical blocks. */ .dispbtn:hover,.dispbtn[aria-expanded="true"],.navx:hover,.ghost:hover{ background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)} /* ---- the search panel behind the magnifier (#45) ---- Its own layer above the drawer, because the magnifier sits outside the drawer and either can be open. A dialog rather than a dropdown: at 390 a dropdown is a dropdown that covers the page anyway, and this way the same markup is the same thing at every width. */ .findbtn{ background:none;color:var(--on-navy);border:1px solid #eef1ef55;border-radius:4px; width:44px;height:44px;flex:none;cursor:pointer;text-decoration:none; display:inline-flex;align-items:center;justify-content:center; transition:background .15s,color .15s,border-color .15s; } .findbtn:hover,.findbtn:focus-visible{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)} .findbtn .icon{width:20px;height:20px} /* THE ACCOUNT CORNER. #194. It takes .findbtn wholesale rather than restating it, so the three buttons in this row are one size by construction and not by three sets of numbers agreeing. What is left here is the parts a magnifier does not have: a summary has a marker, a details needs somewhere to hang its panel from, and there is a dot. */ .navacct{position:relative;flex:none} .navacctbtn{position:relative} .navacct > summary{list-style:none} .navacct > summary::-webkit-details-marker{display:none} /* Signed in, and readable without opening anything. Yellow because that is what this site uses for "live", the same as the sale card's rule and the pressed pill. Against the navy bar it measures 8.6:1, and it carries a ring of the bar's own colour so it reads as a badge rather than as a speck of dust on the screen. */ .navacct-dot{ position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%; background:var(--yellow);box-shadow:0 0 0 2px var(--navy); } .navacctbtn:hover .navacct-dot,.navacct > summary:focus-visible .navacct-dot{box-shadow:0 0 0 2px var(--on-navy)} /* The panel. Right-aligned to the button, because it is the last thing in the row and a left-aligned panel would run off the screen on a phone. Its own z-index sits above the bar; the bar does not clip it, which was checked rather than assumed, because a container with a z-index traps everything inside it at that container's place in the paint order. */ .navacct-menu{ position:absolute;top:calc(100% + .5rem);right:0;z-index:var(--z-nav); min-width:15rem;padding:.35rem; background:var(--card);color:var(--ink); border:1px solid var(--line);border-radius:8px; box-shadow:0 18px 50px #16283e40; } .navacct-who{ margin:0;padding:.55rem .7rem .5rem;font-size:var(--t-s);color:var(--ink-soft); border-bottom:1px solid var(--line); } .navacct-who b{color:var(--ink)} .navacct-menu a{ display:flex;align-items:center;min-height:44px;padding:0 .7rem; color:var(--ink);text-decoration:none;border-radius:5px;font-weight:700; font-size:var(--t-s); } .navacct-menu a:hover,.navacct-menu a:focus-visible{background:var(--paper-2)} .navacct-out{border-top:1px solid var(--line);margin-top:.3rem;color:var(--ink-soft)} /* THE WASH SLIDER, in the sale form. #164. A range and a preview, and the preview is the real card's own rules on a smaller box so what it shows is what gets drawn. The slider's minimum is the floor measured off the photograph, which is why there is no "too light" error anywhere: the control cannot express one. */ .owash{margin:var(--sp-s) 0 0} .owash-row{display:flex;align-items:center;gap:.9rem;margin:.2rem 0 var(--sp-xs)} .owash-slider{flex:1 1 auto;min-width:0;height:44px;accent-color:var(--navy);cursor:pointer} .owash-num{flex:none;min-width:4ch;font-weight:700;font-variant-numeric:tabular-nums} .owash-eye{max-width:26rem;min-height:9rem} .owash-eye h3{font-size:var(--t-m)} .find{ position:fixed;inset:0;z-index:var(--z-find); background:#101824b8; display:flex;justify-content:center; padding:calc(var(--gut)*.75) var(--gut) var(--gut); overscroll-behavior:contain; } @supports (color:color-mix(in srgb,red 50%,white)){ .find{background:color-mix(in srgb,var(--photo-ink) 72%,transparent)} } /* No backdrop-filter. It was here and it tore: Chromium re-samples the blurred backdrop when anything above it repaints, and the row highlight repaints on every pointer move, which drew diagonal banding across the whole panel. The scrim is already 72% opaque and the sheet on top of it is not transparent at all, so the blur was buying almost nothing. */ .find[hidden]{display:none} /* the page underneath does not scroll while the sheet is open */ .find-open,.find-open body{overflow:hidden} .find-sheet{ width:min(100%,42rem);max-height:100%;align-self:flex-start; display:flex;flex-direction:column; background:var(--card);color:var(--ink); border:1px solid var(--line);border-radius:6px; /* The yellow rule the header already draws under itself. One property, and it is the difference between a white card that could belong to any site and a panel that belongs to this one. */ border-top:3px solid var(--yellow); box-shadow:0 18px 50px #16283e40;overflow:hidden; /* its own stacking context, so a row lighting up under the pointer repaints inside the sheet. translateZ(0) was here as a layer hint and came out again: it computes to a flat 2D matrix, so it was promoting nothing and only saying it did. */ isolation:isolate; } @media (min-width:700px){ .find-sheet{margin-top:6vh} } /* It used to appear. An animation rather than a transition, because the panel goes from display:none to shown and a transition has nothing to run from. Short: this is in the way of somebody who came here to type. */ @keyframes find-scrim{from{opacity:0}to{opacity:1}} @keyframes find-sheet{from{opacity:0;transform:translateY(-.55rem)}to{opacity:1;transform:none}} .find:not([hidden]){animation:find-scrim .13s ease-out} .find:not([hidden]) .find-sheet{animation:find-sheet .18s cubic-bezier(.2,.7,.3,1)} @media (prefers-reduced-motion:reduce){ .find:not([hidden]),.find:not([hidden]) .find-sheet{animation:none} } /* Proximity and whitespace, deliberately. This panel is the one place on the site somebody arrives having already decided to do something, so the field gets room around it rather than the tightest box it fits in. */ .find-top{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem; border-bottom:1px solid var(--line)} .find-mark{display:flex;color:var(--ink-soft)} .find-in{ flex:1;min-width:0;border:0;background:none;color:var(--ink); font:inherit;font-size:var(--t-m);min-height:52px;padding:0 .2rem; } /* L12 in the session 22 audit wanted a focus ring back on this. Two tries at it both looked like a bug rather than an indicator: the sheet clips its own overflow for the rounded corners and this row is flush to the edge, so an outline on the row or on the bare input inside it is cut off on three sides and draws as a heavy dark bar across the divider. The audit rates it low on the grounds that the caret is a conforming indicator for a text field under WCAG 2.4.7, and M6's announcement layer was the real gap on this control. Left as it is on purpose, with a screenshot behind the decision rather than an argument. */ .find-in:focus{outline:none} .find-in::placeholder{color:var(--ink-soft)} /* the browser's own clear button, which sits under ours */ .find-in::-webkit-search-cancel-button{display:none} .find-x{ background:none;border:1px solid var(--line);border-radius:4px;color:var(--ink-soft); width:40px;height:40px;flex:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; } .find-x:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .find-body{overflow:auto;overscroll-behavior:contain;padding:.9rem 0 1.1rem} /* Two groups are further apart than two rows inside one group, and a hairline between them says so twice. That difference is the whole of why a list can be scanned instead of read. */ .find-grp{padding:.9rem 0} .find-grp + .find-grp{border-top:1px solid var(--line)} /* The same yellow rule the register on the shops page draws under a group letter. Four groups used to run into one another because the headings and the rows shared a left edge and nothing separated them. */ .find-grp h3{ font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--ink-soft);margin:0 1.1rem .75rem;padding:0 0 .4rem; border-bottom:2px solid var(--yellow); } /* Wide enough for the group name to have its own column, which is what the shops page does with its letters, and the reason four groups read as four things there. Not a phone: 9rem out of a 390 screen is most of the row. */ @media (min-width:560px){ .find-grp{ display:grid;grid-template-columns:10rem 1fr;gap:0 1.4rem;align-items:start; padding:1rem 1.1rem 1rem 0; } .find-grp h3{margin:0 0 0 1.1rem;padding:.6rem 0 .4rem} .find-hit{padding:.7rem .9rem;border-radius:4px} .find-chips{padding:0} } .find-hit{ display:flex;align-items:center;gap:1rem; padding:.75rem 1.1rem;text-decoration:none;color:inherit; } .find-hit-i{display:flex;color:var(--ink-soft);flex:none} .find-hit-i .icon{width:1.15rem;height:1.15rem} .find-hit-t{display:grid;min-width:0} .find-hit b{font-family:var(--disp);font-weight:800;font-size:var(--t-b);line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .find-hit span{font-size:var(--t-s);color:var(--ink-soft); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The letters that actually matched, in the site's yellow. Solid rather than a wash, and it carries its own navy: a translucent yellow over the card is a different colour in dark mode and the text on it stops being legible. Yellow with navy on it reads the same in both, which is why the fixed pair is the right answer here and not a shortcut. */ .find-hit mark{ background:var(--yellow);color:var(--navy); border-radius:2px;padding:0 .08em; } /* one highlight for the pointer and the arrow keys both, so there is never a row that looks picked and a different row that Enter would open */ .find-hit.on{background:var(--paper-2)} .find-hit.on .find-hit-i{color:var(--ink)} .find-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.1rem} .find-chip{ font:inherit;font-size:var(--t-s);cursor:pointer; background:none;color:var(--ink-soft); border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;min-height:36px; } .find-chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .find-say{padding:1.1rem;color:var(--ink-soft);margin:0;max-width:46ch} .find-say b{display:block;font-family:var(--disp);color:var(--ink)} .find-foot{ display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin:0; padding:.5rem 1rem;border-top:1px solid var(--line); font-size:.72rem;color:var(--ink-soft); } .find-foot kbd{ font:inherit;border:1px solid var(--line);border-radius:3px; padding:0 .3rem;margin-right:.25rem; } /* no keyboard hints on a phone, which has no keyboard and needs the room. Off by default and switched on at the breakpoint, never the other way round: this site is min-width only. */ .find-foot{display:none} @media (min-width:700px){ .find-foot{display:flex} } /* The panel hangs off the header, which is sticky and therefore already a containing block, so this needs no wrapper of its own. The insets repeat what .wrap does, because the panel has to line up with the page's right edge and not the window's. */ .disp{ display:none;position:absolute;top:100%;z-index:var(--z-hdr); left:max(var(--gut),calc((100% - 1160px) / 2)); right:max(var(--gut),calc((100% - 1160px) / 2)); background:var(--card);color:var(--ink); border:1px solid var(--line);border-top:0;border-radius:0 0 4px 4px; padding:.85rem;box-shadow:0 12px 26px #16283e2e; } .disp.open{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem} /* On a phone the pills wrap, and a label that wraps with them ends up in the middle of a row belonging to the group above it. Each label takes its own line, so the panel reads as three labelled groups rather than one bag. */ .disp b{font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em; color:var(--ink-soft);flex-basis:100%} /* wide enough for the pills to sit on one line, so the panel stops spanning the page and becomes what it looks like: a drop-down under its button */ @media (min-width:800px){ .disp{left:auto} .disp b{flex-basis:auto} } /* .abtn is one of the pill family. Its base, sizes, hover and pressed fill all live under BUTTONS AND PILLS below. */ /* ---------------------------------------------------------------- HEADER : painted signboard. Navy stays navy in every theme. ---------------------------------------------------------------- */ /* Fixed, and it slides out of the way going down the page and comes back the moment you go up. Rob's call, taking Sembr's marketing nav as the shape. Fixed rather than sticky, and that is the fix as much as the behaviour: sticky was declared here and did nothing. Scrolled with a real wheel, the header left the top of the screen on every page of this site. Fixed cannot be quietly defeated by an ancestor the way sticky can. The transform is what moves it, not top, so it is one composited property and the paint does not thrash. Reduced motion gets a header that never hides at all rather than one that jumps. */ .hdr{ position:fixed;top:0;left:0;right:0;z-index:var(--z-hdr); background:var(--navy);color:var(--on-navy);border-bottom:2px solid var(--yellow); transform:translateY(0); transition:transform 360ms cubic-bezier(.4,0,.2,1); } .hdr.is-hidden{transform:translateY(-100%)} @media (prefers-reduced-motion:reduce){ .hdr{transition:none} .hdr.is-hidden{transform:none} } /* Everything that parks under the header has to travel with it. The class goes on the html element rather than the header so a sticky bar four sections down the page can see it. Same 360ms and same curve, so the two move as one thing instead of one chasing the other. */ :root.hdr-away{--stick-top:0px} .ctl,.filt,.rail,.reads,.prev,.grp-lab,.mon-lab{ transition:top 360ms cubic-bezier(.4,0,.2,1); } @media (prefers-reduced-motion:reduce){ :root.hdr-away{--stick-top:var(--hdr-h)} .ctl,.filt,.rail,.reads,.prev,.grp-lab,.mon-lab{transition:none} } /* The header is out of the flow now, so the page has to start below it. Plus 2px, because --hdr-h is the min-height of the row inside and the yellow rule sits outside that: measured, the header occupies 62px and a 60px spacer left the weather band's first two pixels under it forever. */ .wp-site-blocks{padding-top:calc(var(--hdr-h) + 2px)} /* Base is the narrowest phone, so the gaps start tight and open up rather than starting comfortable and overflowing. Measured at 320: the wordmark, the two tool buttons and the menu button wanted 402px inside 285px, and .hdr-end ran 100px past the right edge on every page. min-width:0 on the flex children is what lets the wordmark give ground instead of forcing it. */ .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:.5rem; min-height:var(--hdr-h)} .hdr-in > *{min-width:0} @media (min-width:420px){.hdr-in{gap:1rem}} /* the nav, the display-options button and the menu button travel together at the right-hand end, so .hdr-in stays two children and space-between works */ .hdr-end{display:flex;align-items:center;gap:.35rem;flex:none} @media (min-width:420px){.hdr-end{gap:.6rem}} /* Six links and two icon buttons at one gap read as eight things in a row, which is what made 1024 to 1180 feel packed. The tools are their own pair now. The hairline that separates them from the links is on .nav, down in the desktop block below, because .nav's own padding is set there and a later rule of equal specificity wins whatever this one says. */ @media (min-width:1024px){.hdr-end{gap:.5rem}} /* "Downtown" and the Arnprior span are two flex items, and neither can shrink, so at 320 to 380 the name ran under the search button. Wrapping stacks them on two lines when the row is short and puts them back on one from about 390. */ .mark{font-family:var(--disp);font-weight:800;font-size:.94rem;line-height:1.05; text-decoration:none;display:flex;flex-wrap:wrap;align-content:center;min-height:44px} @media (min-width:420px){.mark{font-size:1.12rem}} .mark span{color:var(--yellow)} /* the menu button, and the close button that replaces it when open */ .navbtn{ font-family:var(--body);font-weight:700;font-size:var(--t-s);letter-spacing:.06em; text-transform:uppercase;background:none;color:var(--on-navy);border:1px solid #eef1ef55; border-radius:4px;padding:0 .8rem;min-width:44px;min-height:44px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; } /* The word goes on the narrowest screens and the icon carries the button. The button keeps its name for a screen reader either way: aria-label is on it in header.php, so this is only about what is drawn. */ .navbtn-t{display:none} @media (min-width:420px){ .navbtn{padding:0 1.15rem} .navbtn-t{display:inline} } .navbtn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round} /* ---- the drawer ---- Covers the whole screen including the header, so there is never a half-lit page behind it. Items sit at the bottom left, which is where a thumb already is on a phone. */ /* display:none can't transition, so the drawer stays display:flex always and hides through transform/visibility instead -- fixed positioning takes it out of flow either way, so an always-present drawer costs nothing when it is not open. No opacity: a fade is exactly as see-through as it sounds for the length of the transition, and this drawer already covers the whole screen specifically so nothing shows through it -- a fade would work against the one thing it is for. Transform only, so it is opaque throughout and reads as a physical drawer sliding down rather than a thing materializing. visibility flips at the end of the close transition (the 0s duration, .28s delay) rather than with it, so a hidden drawer still cannot be tabbed into or read by a screen reader one frame after it looks gone. Opening reverses the delay to zero, so it becomes interactive the instant it starts moving. */ .nav{ display:flex;flex-direction:column;justify-content:flex-end; position:fixed;inset:0;z-index:var(--z-nav); background:var(--navy);color:var(--on-navy); padding:var(--gut); padding-bottom:max(var(--gut),env(safe-area-inset-bottom)); height:100vh; height:100dvh; /* dvh second: old browsers keep vh */ overflow:auto;overscroll-behavior:contain; visibility:hidden;pointer-events:none;transform:translateY(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s linear .32s; } .nav.open{ visibility:visible;pointer-events:auto;transform:translateY(0); transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s; } @media (prefers-reduced-motion:reduce){.nav{transition:visibility 0s linear .01s;transform:none}} .nav::before{ /* the yellow rule the header had */ content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--yellow); } /* Room between the items, not just around the words. A drawer on a phone is thumbed at speed and the rules were 60px apart, which is close enough that the wrong one gets hit. */ .nav a{ display:flex;align-items:center;min-height:74px;text-decoration:none; font-family:var(--disp);font-weight:700; font-size:clamp(1.75rem,8vw,2.6rem);line-height:1.1; border-bottom:1px solid var(--on-navy-line); } .nav a:first-child{border-top:1px solid var(--on-navy-line)} .nav a:hover,.nav a:focus-visible{color:var(--yellow)} .nav a[aria-current]{color:var(--yellow)} /* close sits top right of the drawer, thumb-reachable and obvious */ .navx{ position:absolute;top:calc(var(--gut) - .3rem);right:calc(var(--gut) - .3rem); width:52px;height:52px;border-radius:50%; background:none;border:1px solid #eef1ef55;color:var(--on-navy);cursor:pointer; display:none;align-items:center;justify-content:center; } .nav.open .navx{display:flex} .navx svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round} /* the hover is the shared on-navy fill, up with .dispbtn */ .nav-foot{margin-top:1.6rem;font-size:var(--t-s);color:#eef1ef9e} /* Seven items plus the wordmark need more room than five did, so the drawer holds on until 1024 rather than 920. Adding the display-options button put the row 8px over its own wrap at exactly 1024; tightening the nav's tracking took it back under, so this stays at 1024 rather than becoming a fifteenth breakpoint. Checked at 1024, 1060, 1100 and up: no overflow and no horizontal scroll anywhere. */ @media (min-width:1024px){ .navbtn,.navx{display:none} /* padding-right and the hairline are the group break between the pages and the two tools. On .nav rather than on a wrapper because .nav is already a 44px flex row that ends at the last link, so the rule is the right height without anything being added to the markup for it. */ .nav,.nav.open{display:flex;flex-direction:row;align-items:center; position:static;inset:auto;height:auto; background:none;padding:0 1.1rem 0 0;margin-right:.85rem; border-right:1px solid var(--on-navy-line); gap:1.45rem;overflow:visible;z-index:auto; visibility:visible;pointer-events:auto;transform:none;transition:none} .nav::before{display:none} /* .02em, not .04em. Seven uppercase items and a button filled the row, and tracking is the cheapest thing in it to give back. Measured, halving it returns 17px across the whole nav, not the forty I guessed, which is still enough to let the row go back to fitting at 1024. */ .nav a,.nav a:first-child{border:0;font-family:var(--body);font-weight:700;font-size:var(--t-s); letter-spacing:.02em;text-transform:uppercase;min-height:44px;white-space:nowrap} /* A real underline rather than a box-shadow along the bottom edge. The link's box is 44px tall for the thumb, so an inset shadow drew a thick yellow bar down at the bottom of that box with a gap between it and the word. This is the same underline the breadcrumbs use on hover, and it hugs the text. Not colour alone: colour is not a signal on its own for anyone who cannot see it. */ /* Thickness and offset only. The colour, the solid rule and the underline itself come from the shared block up in "the yellow underline". This one is thinner and sits much lower on purpose: it is a nav marker under a word, not a rule under a heading. */ .nav a[aria-current]{color:inherit;text-decoration-thickness:2px; text-underline-offset:.42em} .nav-foot{display:none} } @media (min-width:1180px){.nav,.nav.open{gap:1.9rem}} /* ---------------------------------------------------------------- BUTTONS AND PILLS ---------------------------------------------------------------- */ .cta{ display:inline-flex;align-items:center;justify-content:center;min-height:52px; font-weight:700;font-size:var(--t-s);letter-spacing:.06em;text-transform:uppercase; text-decoration:none;padding:0 1.6rem;background:var(--ink);color:var(--paper); border:0;border-radius:6px;margin-top:1.6rem;transition:background .15s; font-family:var(--body);cursor:pointer;text-align:center; } /* the hover has to come from the ink token, not from a fixed navy. A hardcoded #0e1c2e is invisible in dark mode, where the button is already light with dark type on it, and it breaks high contrast the same way. Mixing toward the paper reads as pressed into the page and stays legible in all four themes. The literal is the fallback and is correct in the default one. */ .cta:hover{background:#0e1c2e} .cta:active{background:#0a1524} @supports (color:color-mix(in srgb,red 50%,white)){ .cta:hover{background:color-mix(in srgb,var(--ink) 86%,var(--paper))} .cta:active{background:color-mix(in srgb,var(--ink) 74%,var(--paper))} } .cta.yellow{background:var(--yellow);color:var(--navy)} .cta.yellow:hover{background:#e5a51f} .cta.yellow:active{background:#d2960f} /* the literals above are the fallback. Mixing toward the navy keeps the pressed look in all four themes, the same as the ink button does. The hero and the statement band used to each declare this again. */ @supports (color:color-mix(in srgb,red 50%,white)){ .cta.yellow:hover{background:color-mix(in srgb,var(--yellow) 88%,var(--navy))} .cta.yellow:active{background:color-mix(in srgb,var(--yellow) 76%,var(--navy))} } /* ---- the pill family ---- One base for every pill on the site: the display options (.abtn), the read-more link (.more), the category rows (.cats), the shop page's action row (.state .acts a) and the visit map's layer toggles (.lbtn). Each site keeps only its own sizes and spacing. This was five near-identical bases and six identical ink fills. */ .abtn,.more,.cats a,.cats button,.cats span,.state .acts a,.lbtn{ font-family:var(--body);font-weight:700;font-size:var(--t-s);color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:999px; text-decoration:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:background .15s,color .15s,border-color .15s; } /* the display options run smaller than the pill's t-s */ .abtn{font-size:.82rem;min-height:44px;min-width:44px;padding:0 .9rem} /* the two toggles darken their edge on hover and fill when pressed; the plain links fill straight away */ .abtn:hover,.lbtn:hover{border-color:var(--ink)} .abtn[aria-pressed="true"],.lbtn[aria-pressed="true"], .more:hover,.cats a:hover,.cats button:hover, .cats [aria-current],.cats [aria-pressed="true"], .state .acts a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} .more{letter-spacing:.05em;text-transform:uppercase;padding:0 1.25rem;min-height:46px; white-space:nowrap} /* pill link rows: shop categories, filters */ .cats{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem} .cats a,.cats button{letter-spacing:.03em;padding:0 1.15rem;min-height:44px} /* segmented control: two or three exclusive options */ .seg{display:flex;border:1px solid var(--line);border-radius:999px;background:var(--card);overflow:hidden} .seg button{ font-family:var(--body);font-weight:700;font-size:var(--t-s);color:var(--ink); background:none;border:0;min-height:46px;padding:0 1.05rem;cursor:pointer;white-space:nowrap; transition:background .15s,color .15s; } .seg button + button{border-left:1px solid var(--line)} .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)} /* ---------------------------------------------------------------- SECTIONS ---------------------------------------------------------------- */ .band{padding:var(--band) 0} .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.9rem} .hd h2{font-size:var(--t-l);max-width:20ch} .hd .kick{display:block;margin-bottom:var(--sp-3xs)} /* alternate band: notice-board grey */ .on{background:var(--paper-2);border-block:1px solid var(--line)} /* breadcrumb line above a page title */ .crumb{font-size:var(--t-s);color:var(--ink-soft);padding:.9rem 0 0} .crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);text-decoration:none} .crumb a:hover{color:var(--ink)} .crumb span[aria-hidden]{padding:0 .45rem} /* ---- the yellow underline ---- The one hover on this site: whatever names a place you can go gets the 3px yellow rule under it. Every hover underline lives in this list and the pages declare none of their own; it was thirteen identical blocks. The always-on underlines (.rail a.link, .p-site, .gate .aside a, .hrow.now dt) stay at their sites: same rule, different trigger, and two of them differ in offset. */ /* EVERY YELLOW UNDERLINE ON THE SITE, HOVER OR ALWAYS ON, IN ONE PLACE. Rob spotted the tell: a small heading cut its yellow line around the descenders and a big one did not. The reason was that the hover list here had been given text-decoration-skip-ink:none and the five always-on rules had not, because each of those carried its own copy of the same four declarations at its own site. One underline, two behaviours, sometimes on the same page. The file's own comment already said this started as thirteen identical blocks; it was five more than anybody thought. The rule breaks around descenders, with clear space either side of the stem. That is skip-ink on its default, and it is Rob's call: a rule driven straight through a y or a g looks like an overlap, and the gap around the stem is what makes it look drawn on purpose. The first fix here went the other way, forcing the rule solid, which made every heading consistent in the wrong direction. Offset is the only thing that legitimately differs per site, so it is the only thing left at the call sites below. */ .crumb a:hover,.ev:hover h3,.qa > summary:hover h3, a.item:hover h3,.item a:hover h3,.tries a:hover b, .row:hover h3,.door:hover h2,.tn:hover h2, .eb:hover h3,.shop-offer:hover h3,.kind:hover h3, .note:hover h3,.dr:hover h2,.names li a:hover, .nav a[aria-current],.hrow.now dt,.rail a.link,.p-site,.gate .aside a{ text-decoration:underline;text-decoration-color:var(--yellow); text-decoration-thickness:3px;text-underline-offset:.2em; } /* The display headings pull the rule in closer. At a 48px headline .2em put it 9.6px below its own words and 1px above the next line, so it read as belonging to the line underneath. A rule should sit nearer the thing it underlines than the thing it does not. Body-size links keep .2em above, where .14em would sit on the baseline. */ .ev:hover h3,.qa > summary:hover h3,a.item:hover h3,.item a:hover h3, .row:hover h3,.door:hover h2,.tn:hover h2,.eb:hover h3, .shop-offer:hover h3,.kind:hover h3,.note:hover h3,.dr:hover h2{ text-underline-offset:.14em; } /* ROOM FOR THAT UNDERLINE TO LAND IN. Measured, session 35, on a three-line offer headline Rob sent: the rule drawn under line one was ending 1.8px BELOW the bottom of its own line box, which puts it inside line two. On a one-line heading nothing shows. On a multi-line one the headline looks struck through. The arithmetic. The baseline sits about 0.8em below the top of the text, the rule starts 0.2em under that and is 3px thick, and half the leading sits above the text. Solve for the line box that contains all of it and everything cancels to: line-height must be at least font-size + 6px. The +8px here is that minimum with 2px to spare. Written as calc rather than a ratio because the answer is a fixed number of pixels, not a proportion: a 48px headline needs 1.13, a 20px one needs 1.3, and a single ratio cannot be right for both. Every heading in the list above failed this at both 390 and 1280, by 3.6px to 4.8px. The only one that passed was the breadcrumb, which runs at body leading. The leading goes on the heading, never on the hover: changing line-height on hover would reflow the card under the pointer. */ .ev h3,.qa > summary h3,a.item h3,.item a h3,.tries a b, .row h3,.door h2,.tn h2,.eb h3,.shop-offer h3,.kind h3, .note h3,.dr h2,.names li a{line-height:calc(1em + 8px)} /* ---------------------------------------------------------------- PAGE HEADS Nine of these, one per page design, each with its own class and its own type scale, all doing the same job: a crumb, a kicker, a headline and sometimes a lede. The nine repeated the same three rules with the numbers nudged, so changing the crumb meant editing nine places and finding out later which one was missed. Three grounds, because three of them really are different: paper, navy, and a photograph. Everything above the ground is written once, here. Four of the nine are gone entirely: the shops, news, one notice and about pages are the plain head with a modifier. What is left on .season, .post, .win, .vhead and .hero is only the part that is theirs: the market strip, the date set big, the photograph and its scrim, and the home page's taller poster. ---------------------------------------------------------------- */ .phead .kick{display:block;margin:var(--sp-3xs) 0} .phead h1{font-size:clamp(2.4rem,1.7rem + 3.2vw,4.4rem)} .phead h1 em{font-style:normal;color:var(--ink-soft)} .phead .lede{font-size:var(--t-m);line-height:1.45;max-width:34ch;margin:.9rem 0 0} /* ---- on paper ---- The navy and photograph heads put their padding on an inner element, because they have a background to bleed and the inner is what holds it off the edge. A paper head has no such thing, so the padding sits on the head itself. */ .phead-plain{padding:calc(var(--band)*.7) 0 calc(var(--band)*.5)} .phead-plain .lede{color:var(--ink-soft)} .phead-tint{background:var(--paper-2);border-bottom:1px solid var(--line)} .phead-rule{border-bottom:1px solid var(--line)} /* one notice, at reading measure, with its body starting straight after */ .phead-narrow{width:min(100% - (var(--gut)*2),42rem);margin-inline:auto;padding-bottom:0} .phead-sm h1{font-size:clamp(2.1rem,1.55rem + 2.6vw,3.5rem);max-width:20ch} /* ---- on navy ---- The join head and the members head are this same signboard, so the band itself is written once. Their own type lives at their sites. */ .phead-navy,.jhead,.ihead{background:var(--navy);color:var(--on-navy);border-bottom:2px solid var(--yellow)} .phead-navy .crumb,.phead-navy .crumb a{color:#eef1efb5} .phead-navy .crumb a:hover{color:#fff} .phead-navy .kick{color:var(--yellow)} .phead-navy h1{color:#fff} @supports (color:color-mix(in srgb,red 50%,white)){ .phead-navy .crumb,.phead-navy .crumb a{color:color-mix(in srgb,var(--on-navy) 71%,transparent)} } /* ---- over a photograph ---- The shadows are not decoration. Six photographs by six people have six exposures, and a white headline on a bright sky is the one thing a scrim alone cannot promise. */ .phead-photo{position:relative;background:var(--photo-ink);color:var(--on-navy);overflow:clip} .phead-photo .crumb,.phead-photo .crumb a{color:#eef1efc4} .phead-photo .crumb a:hover{color:#fff} .phead-photo .kick{color:var(--yellow);text-shadow:0 1px 4px #101824cc} .phead-photo h1{color:#fff;text-shadow:0 2px 8px #101824e6,0 1px 2px var(--photo-ink)} .phead-photo .lede{color:#eef1efe6;text-shadow:0 1px 4px #101824cc} /* no featured image: the shadows come off, because over flat ink they read as a smudge rather than as depth */ .phead-bare .kick,.phead-bare h1,.phead-bare .lede{text-shadow:none} /* ---------------------------------------------------------------- DIRECTORY ROWS : the register ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- EVENT ROWS : the notice board ---------------------------------------------------------------- */ .ev{ display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2xs) 1.2rem;align-items:baseline; border-top:1px solid var(--line);padding:1.35rem 0; text-decoration:none; } .ev-date{ font-family:var(--disp);font-weight:800;font-size:var(--t-m);line-height:1; white-space:nowrap; } .ev-date small{display:block;font-family:var(--body);font-weight:700;font-size:var(--t-s); text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-top:var(--sp-2xs)} .ev h3{font-size:var(--t-m)} .ev .d{grid-column:2;color:var(--ink-soft);font-size:var(--t-b);margin:0;max-width:58ch} .ev .flag{grid-column:2;font-weight:700;font-size:var(--t-s);text-transform:uppercase; letter-spacing:.08em;color:var(--ink-soft);justify-self:start} @media (min-width:800px){.ev{grid-template-columns:8.5rem 1fr}} /* ---------------------------------------------------------------- Q & A : native disclosure, no JavaScript A
is keyboard accessible, findable by browser search in modern browsers, and works with JS off. It replaces the old always-open block and the hand-rolled toggles. ---------------------------------------------------------------- */ .faq{border-top:1px solid var(--line)} .qa{border-bottom:1px solid var(--line)} .qa > summary{ list-style:none;cursor:pointer;display:grid;position:relative; grid-template-columns:1fr 2rem;gap:1rem;align-items:start; padding:1.25rem 0;min-height:44px; } .qa > summary::-webkit-details-marker{display:none} .qa > summary :is(h2,h3){font-size:var(--t-m);max-width:30ch} /* The plus that turns into a minus. The prototype drew it with a inside the summary. That does not survive an editor: wpautop wraps a lone span in a

and the marker drops out of the summary's grid. Drawn from the summary's own pseudo-elements instead, so the accordion works from the simplest markup anybody could type, which is

Question

. */ .qa > summary::before,.qa > summary::after{ content:"";position:absolute;right:0;top:50%;width:20px;height:2px; background:var(--ink);transform:translateY(-50%);transition:transform .18s ease; } .qa > summary::after{transform:translateY(-50%) rotate(90deg)} .qa[open] > summary::after{transform:translateY(-50%) rotate(0)} .qa .a{padding:0 0 1.35rem;max-width:62ch} .qa .a p{margin:0 0 .8em} .qa .a p:last-child{margin:0} /* The answer used to sit in a second column on a wide screen, pulled level with the question by a negative margin. It cost a dead left column, squeezed the answer to about forty characters, and once the disclosure got its slide the negative margin was clipped by the overflow. The answer now runs under its question at every width, which is also what it does on a phone. Give the question more room before it wraps and that is the whole difference. */ @media (min-width:1000px){ .qa > summary h3{max-width:44ch} } /* the answer slides rather than snapping. Height cannot be animated from 0 to auto without interpolate-size, so the whole thing sits behind @supports: browsers without it open instantly, which is what they did before, and nothing is unreadable either way. */ @supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords} .qa::details-content{ block-size:0;overflow:hidden; transition:block-size .3s ease,content-visibility .3s allow-discrete; } .qa[open]::details-content{block-size:auto} } @media (prefers-reduced-motion:reduce){ /* the marker is drawn on the summary itself now; this rule named the .mk span it used to live in, so reduced motion stopped reaching it */ .qa > summary::before,.qa > summary::after{transition:none} .qa::details-content{transition:none} } /* ---------------------------------------------------------------- NEWS ITEMS ---------------------------------------------------------------- */ .news{display:grid;gap:1.2rem} @media (min-width:800px){.news{grid-template-columns:1fr 1fr;gap:2.5rem}} @media (min-width:1000px){.news{grid-template-columns:repeat(3,1fr)}} .item{border-top:1px solid var(--line);padding:1.2rem 0 1.35rem} /* the date label is shared with the pinned notice on the news page */ .item time,.pin-note time{font-weight:700;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)} .item h3{font-size:var(--t-m);margin:.55rem 0 .5rem} .item p{color:var(--ink-soft);margin:0} /* the whole card is often the link, so kill the underline on the element itself as well as on any anchor inside it */ a.item,.item a{text-decoration:none} /* ---------------------------------------------------------------- THE STATEMENT BAND Says plainly what something is, and backs it with a short ledger of facts. The contact page uses it to say what the group is not, because everyone assumes Chamber of Commerce. The home page uses it to ask the shops to get listed. One band, one function that prints it, dta_statement(). The two had drifted to two layouts, two ledgers and two type scales. Full bleed, on the photograph ink rather than the navy. The join band was inset for a while because it was navy and the footer is navy, so the bottom of the home page was fifteen hundred pixels of one colour. A different dark solves that without giving up the full width. It takes a photograph if the page has a featured image and reads as a flat band if it does not, which is what both pages do today. ---------------------------------------------------------------- */ .statement{position:relative;background:var(--photo-ink);color:var(--on-navy);overflow:clip} .statement-in{position:relative;padding:var(--band) 0;max-width:44rem} .statement h2{color:#fff;font-size:var(--t-l);max-width:18ch;text-shadow:0 2px 6px #101824d9} .statement h2 em{font-style:normal;color:var(--yellow)} .statement p{color:#eef1efe0;max-width:46ch;margin:1rem 0 0;text-shadow:0 1px 3px #101824cc} .statement .cta{margin-top:1.6rem} /* the photograph, and the wash that guarantees a value behind the text */ .statement-bg{position:absolute;inset:0} .statement-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%} .statement-bg::after{content:"";position:absolute;inset:0;background: linear-gradient(82deg,#101824f0 0%,#101824cc 46%,#10182466 78%,#10182422 100%)} @supports (color:color-mix(in srgb,red,blue)){ .statement-bg::after{background:linear-gradient(82deg, color-mix(in srgb,var(--photo-ink) 94%,transparent) 0%, color-mix(in srgb,var(--photo-ink) 80%,transparent) 46%, color-mix(in srgb,var(--photo-ink) 40%,transparent) 78%, color-mix(in srgb,var(--photo-ink) 13%,transparent) 100%)} } /* High contrast drops the photograph rather than dimming it further. A picture behind text is the first thing to go when somebody has asked for contrast. */ :root[data-hc="1"] .statement-bg img{display:none} :root[data-hc="1"] .statement-bg::after{background:var(--photo-ink)} .statement-cr{position:absolute;right:.9rem;bottom:.6rem;font-size:.7rem;color:#eef1ef8c} /* No featured image: the text drops its shadows, which over flat ink read as a smudge rather than as depth. */ .statement-bare .kick,.statement-bare h2,.statement-bare p{text-shadow:none} /* ---- the ledger ---- A short list of plain facts under a heading. It was written three times, once for the join board, once for the contact page's band and once for the detail pages, with three different column widths and the same everything else. One list now; the dark bands change two colours. */ .facts{margin:0;border-top:1px solid var(--line)} .facts .drow{display:grid;grid-template-columns:6.8rem 1fr;border-bottom:1px solid var(--line);align-items:baseline} @media (min-width:620px){.facts .drow{grid-template-columns:8.5rem 1fr}} .facts .drow:last-child{border-bottom:0} .facts dt{font-weight:700;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.08em;padding:.85rem 0} .facts dd{margin:0;font-size:var(--t-b);padding:.85rem 0} /* on navy or over a photograph */ .facts-dark{border-top-color:var(--on-navy-line);margin-top:1.8rem} .facts-dark .drow{border-bottom-color:var(--on-navy-line)} .facts-dark dt{color:var(--yellow)} /* a value that is only a link is a tap target, not prose. Give it the full 44px without pushing the row open. */ .facts dd > a:only-child{display:inline-flex;align-items:center;min-height:44px;margin:-.7rem 0} /* a heading that introduces a bordered list needs its own air, or it sits on the rule. Measured: this was at -1px before. */ .listhead{font-size:var(--t-m);margin:0 0 .95rem} /* ---------------------------------------------------------------- THE YELLOW RULE : two widths, and only two A short note beside the text gets 4px. A block that carries its own headline gets 6px, because a hairline beside 3rem type reads as an accident. Four separate widths had grown across the pages for the same three jobs; these are the ones that survived. ---------------------------------------------------------------- */ /* a small aside: a caveat, a "we are still checking this" */ .sidenote{ font-size:var(--t-s);color:var(--ink-soft); border-left:4px solid var(--yellow); padding:.35rem 0 .35rem 1.05rem;margin:1.5rem 0 0;max-width:58ch; } .sidenote p{margin:0 0 .55em} .sidenote p:last-child{margin:0} /* a tinted panel that summarises what is under it */ .panel{ background:var(--paper-2);border-left:4px solid var(--yellow); padding:1.3rem clamp(1.15rem,4vw,1.5rem) 1.4rem;margin:2rem 0 2.4rem; } /* a block whose own headline is the point */ .feature-rule{border-left:6px solid var(--yellow);padding-left:clamp(1.1rem,3vw,2.2rem)} /* ---------------------------------------------------------------- THE LOGO MARK A business's sign or logo, wherever it appears on a public page. One box, one set of rules, so eighteen logos of eighteen different shapes and qualities still line up. Contained, never cropped, on a neutral tile so a transparent PNG and a white JPG look alike. Falls back to the first letter of the name when there is no file, which there often will not be. ---------------------------------------------------------------- */ .logo-mark{ width:var(--mark-size,56px);height:var(--mark-size,56px);flex:none; border:1px solid var(--line);border-radius:4px;background:var(--on-navy); display:grid;place-items:center;overflow:hidden; font-family:var(--disp);font-weight:800; color:color-mix(in srgb,var(--navy) 75%,var(--on-navy)); font-size:calc(var(--mark-size,56px) * .5);line-height:1; } /* #166. Artwork drawn in white is invisible on the light plate, measured at about 1.1:1, and the tile just looks broken. The shop picks light or dark and the default comes from dta_logo_ink(), which measures the file. The navy is the same fixed pair as the plate above: both sides of this are fixed-palette colours, so neither flips with the theme and the contrast holds in light and dark. */ .logo-mark[data-ground="dark"]{background:var(--navy);border-color:#eef1ef4a} .logo-mark img{width:100%;height:100%;object-fit:contain;padding:6px} /* #181. A logo you cannot see through arrived with a background of its own, so it takes the tile edge to edge and the plate behind it never shows. The 6px above is breathing room for artwork floating on a plate WE chose; on a file that brought its own it reads as a picture shrunk inside a box for no reason. Still contained and still never cropped, so a wide one letterboxes rather than losing its ends. Which of the three grounds a file gets is measured, not asked: the alpha channel is walked and the mere presence of one does not count, because a PNG saved out of anything carries a channel whether it uses it or not. See dta_logo_ground(). */ .logo-mark[data-ground="own"] img{padding:0} .logo-mark.lg{--mark-size:clamp(72px,11vw,104px)} /* A FIXED LIGHT PLATE IN BOTH THEMES, not the surface colour. This tile used to take var(--card), which is white in light and navy in dark, and the comment above promised that a transparent PNG and a white JPG would look alike on it. In dark mode they did not: a shop whose logo is a white JPG got a white square, the shop next to it with a transparent PNG got navy with its dark ink vanishing into it, and the same shop looked like two different shops depending on the reader's theme. Every platform that hosts other people's logos landed here for the same reason. Google Play refuses transparent icons because they take the colour of whatever is behind them, Apple fills alpha with black, and LinkedIn plates transparent company logos onto white in dark mode. A shop has one logo, made for white paper, and there is no second file to ask them for. --on-navy is that plate and it already existed: the rule below this one has been using it over the photograph bands since long before dark mode, for exactly this reason. It is now the rule rather than the exception, so the line below only has the border left to say. The fallback letter takes a fixed navy mixed back toward the plate, because --ink-soft is light in dark mode and was already unreadable on the tiles over photographs. */ .win .logo-mark{border-color:#eef1ef4a} /* ---------------------------------------------------------------- FORMS : big targets, plain labels, one column ---------------------------------------------------------------- */ /* wp_login_form prints its own p.login-username and p.login-password boxes and nothing can put .field or .in on them from outside, so core's class names ride along here rather than getting a wholesale copy of these rules down at the members gate. */ /* A CONTAINER THAT SETS A GAP OWNS THE SPACING INSIDE IT. Measured, session 35. .field says gap:.4rem, which is 6px, and the help text under a label is a

, and p carries margin:0 0 1em from the base rules. So the real distance from the help line to the box below it was 6 + 15 = 21px, a number nobody chose and nobody wrote down. Between two whole questions it was 20px. Two different questions sat closer together than the parts of one question, which is proximity telling the eye the opposite of the truth, and it is why the forms read as crowded. The same doubling hit the directory rows: a.row sets gap:2px and p.meta brought 15px, so the address line sat 17px under the shop name instead of against it. The fix is the rule, not the numbers: inside anything that manages its own spacing with gap, children do not bring their own block margins. Found with a probe that walked every grid and column flex on ten pages looking for a child with a margin; it found seven, and these are the ones that showed. */ .field > *,.gate .login-username > *,.gate .login-password > *, .row > *,.note > *,.p-row > *{margin-block:0} /* margin-bottom is --sp-s, the step above the one used inside a field, so the gap between two questions is always bigger than any gap within one. It was a flat 1.25rem, which at a wide screen lost that race. */ .field,.gate .login-username,.gate .login-password{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem;margin:0 0 var(--sp-s)} /* A display value silently beats the hidden attribute, and .field sets one. Without this line, hiding a field with hidden does nothing and says nothing. Fifth time on this project. */ .field[hidden]{display:none} /* A .field holding prose rather than a question. Its rows are paragraphs, and paragraphs want reading space, not the 6px that separates a label from its box. This exists because the join form had three stacked help paragraphs carrying inline margins of .6rem, hand-tuning around the base p margin that the gap was already fighting. An inline style is the one thing no rule can beat, so it is the one place a spacing scale cannot reach. */ .fieldnote{gap:var(--sp-2xs)} /* The small-caps label. Also the shop page's hours ledger, the join form's day column and the forecast drawer's day names, which are the same label on other ledgers: one rule, not five. */ .field label,.field .lab,.gate .login-username label,.gate .login-password label, .hrow dt,.wday,.nowfc-when{font-weight:700;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.08em} .field .help{font-size:var(--t-s);color:var(--ink-soft)} .in,.gate .login-username input,.gate .login-password input{ font-family:var(--body);font-size:var(--t-b);color:var(--ink); background:var(--card);border:1px solid var(--ink-soft);border-radius:4px; padding:.6rem .9rem;min-height:52px;width:100%; } textarea.in{min-height:9rem;line-height:1.55;resize:vertical} /* grows with what is typed, where the browser can do it */ @supports (field-sizing:content){ textarea.in{field-sizing:content;max-height:26rem} } select.in{cursor:pointer} /* SHOW WHAT YOU TYPED. #185, and pw.js is what puts this in the page. Inside the box rather than under it, because under it the button is one more thing in a column of questions and reads as one of them. THE ROOM ON THE RIGHT IS THE WHOLE RULE. Without it the last characters of a long password type underneath the button, which was measured rather than noticed: the probe read 14px of padding where the button starts 326px in. The gate's own box is styled as `.gate .login-password input`, two classes and an element, so a plain `.pw-wrap input` loses to it however late it sits in the file. Hence the second selector. Specificity, not order. The button is a full 44px tall like every other target here, and it is underlined text rather than an eye, because an eye means "show" to people who already know it means show. */ .pw-wrap{position:relative;display:block} .pw-wrap > input,.gate .login-password .pw-wrap > input{padding-right:5.5rem} .pw-see{ position:absolute;right:.35rem;top:50%;transform:translateY(-50%); min-height:44px;padding:0 .75rem;border:0;background:none;cursor:pointer; font:inherit;font-size:var(--t-s);font-weight:700;color:var(--ink-soft); text-decoration:underline;text-underline-offset:3px; } .pw-see:hover{color:var(--ink)} .pw-see:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:2px} .in::placeholder{color:var(--ink-soft);opacity:.75} .in:focus-visible{border-color:var(--ink)} /* Chrome paints an autofilled field in its own colours and its own font, and its rules carry !important, so the only way in is the inset shadow for the background and text-fill-color for the letters. Without this a saved password turns the field pale blue on a page that has no blue in it. What is deliberately NOT here is a font rule. Before the first click lands anywhere on the document, Chrome paints a filled value at roughly its own default input size and the type visibly grows once you click. That is not reachable from CSS: measured in DevTools, the computed font on this input is Atkinson at 18.832px both before and after the click, identical, while the paint differs. Longhands and the font shorthand were both tried and both did nothing, which is what a paint-time override looks like from the cascade. Other sites carry the same override and do not show it because they style inputs near Chrome's own ~13px; this one asks for 18.8px, so the same gap is visible. Leave it. */ .in:-webkit-autofill, .gate .login-username input:-webkit-autofill, .gate .login-password input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 100px var(--card) inset; box-shadow:0 0 0 100px var(--card) inset; caret-color:var(--ink); } .in:-webkit-autofill:focus-visible, .gate .login-username input:-webkit-autofill:focus-visible, .gate .login-password input:-webkit-autofill:focus-visible{border-color:var(--ink)} /* ---------------------------------------------------------------- THE MAP : Leaflet, theme-aware tiles, pulsing pins ---------------------------------------------------------------- */ /* isolation opens a stacking context without needing a position, so Leaflet's hard-coded panes (400) and controls (800) are measured against each other inside here and never against the header. The positioned z-index is the fallback for anything without isolation. */ .lmap{ height:clamp(340px,44vw,500px);border-radius:4px;background:var(--paper-2); position:relative;z-index:var(--z-map);isolation:isolate; } .lmap .leaflet-container{font-family:var(--body)} .pin{display:block;width:15px;height:15px;background:var(--yellow); border:2px solid var(--ink);border-radius:50%;position:relative} .pin .ring{position:absolute;inset:-7px;border:2px solid var(--yellow); border-radius:50%;animation:ping 2.8s ease-out infinite;opacity:0} @keyframes ping{0%{transform:scale(.5);opacity:.9}70%{transform:scale(1.15);opacity:0}100%{opacity:0}} .leaflet-popup-content-wrapper{border-radius:4px;color:var(--navy)} .leaflet-popup-content b{font-family:var(--disp);font-size:1.05rem} .leaflet-popup-content span{color:#43536a;font-size:.85rem;display:block;margin-top:.15rem} .leaflet-popup-content .pop-name{display:inline-block;font-family:var(--disp);font-weight:800; font-size:1.05rem;color:var(--navy);text-decoration:underline;text-decoration-color:#f7b32b; text-decoration-thickness:3px;text-underline-offset:.22em;padding:.1rem 0 .15rem} .leaflet-popup-content .pop-name:hover{text-decoration-color:var(--navy)} .map-cap{display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap; border-top:1px solid var(--line);padding:.65rem 0;font-size:var(--t-s);color:var(--ink-soft)} .map-cap b{color:var(--ink)} /* the OSM and CARTO credit, moved off the map and into the caption. Required by ODbL and by CARTO's terms; it is not decoration. */ .map-credline,.map-dir{margin:.5rem 0 1rem} .map-cred{font-size:.78rem;color:var(--ink-soft);opacity:.85} .map-cred a{color:inherit;text-decoration:underline;text-underline-offset:.15em} .map-cred a:hover{color:var(--ink)} /* album mount: a print under four flat black corners. The one licensed piece of skeuomorphism; do not re-embellish the corners. */ .mount{position:relative;display:inline-block;line-height:0} .mount img{display:block;max-width:100%;width:auto;height:auto; border:10px solid #f8f8f4;box-shadow:0 3px 14px #0a0f1440} .pc{position:absolute;width:clamp(30px,3.8vw,44px);height:clamp(30px,3.8vw,44px); overflow:visible;filter:drop-shadow(1px 1px 2px #0a0f1440)} .pc path{fill:#12161d} :root[data-thr="dark"] .pc path{fill:#0b0e13} .pc.tl{top:-6px;left:-6px} .pc.tr{top:-6px;right:-6px;transform:rotate(90deg)} .pc.br{bottom:-6px;right:-6px;transform:rotate(180deg)} .pc.bl{bottom:-6px;left:-6px;transform:rotate(270deg)} /* carousel / pager arrows */ .arrb{background:none;border:0;cursor:pointer;padding:0;color:var(--ink); font-size:1.7rem;line-height:1;min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;transition:transform .15s} .arrb:hover{transform:translateX(2px)} .arrb.prev:hover{transform:translateX(-2px)} .arrb.pause{font-size:var(--t-s);font-weight:700;text-transform:uppercase;letter-spacing:.08em; min-width:auto;padding-inline:.4rem;margin-left:auto} .arrb.pause:hover{transform:none} /* ---------------------------------------------------------------- FOOTER ---------------------------------------------------------------- */ .ft{background:var(--navy);color:var(--on-navy);padding:var(--band) 0 2rem;border-top:1px solid var(--on-navy-line)} .ft-grid{display:grid;gap:2.2rem} @media (min-width:1000px){.ft-grid{grid-template-columns:1.3fr 1fr 1fr}} .ft h2{font-size:clamp(2.2rem,8vw,4.6rem);line-height:1;margin-bottom:2rem} .ft h2 span{color:var(--yellow)} .ft h3{font-weight:700;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.11em; color:var(--yellow);margin:0 0 .6rem;font-family:var(--body)} .ft a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--on-navy)} /* The way in. It goes first in the column and it is the only footer link that opens a door rather than a page. No underline and no weight on it: Rob's call, session 36, after seeing it with both. Its position is what marks it. */ .ft a:hover{color:var(--yellow)} .ft address{font-style:normal;color:#eef1efc9;line-height:1.7} .ft-note{margin-top:1rem;color:#eef1efc9} @supports (color:color-mix(in srgb,red 50%,white)){ .ft address,.ft-note{color:color-mix(in srgb,var(--on-navy) 79%,transparent)} } .fine{border-top:1px solid var(--on-navy-line);margin-top:2.4rem;padding-top:1.3rem; font-size:var(--t-s);color:#eef1efb0;line-height:1.8} /* Centred on a desktop only. Rob's call. On a phone these two lines wrap to four and centred wrapped text is harder to read than ragged right, so the small screen keeps the left edge everything else on the page is lined up on. */ @media (min-width:1000px){ .fine{text-align:center} .legal{justify-content:center;text-align:center} } /* ---- back to top ---- Under the legal line, centred, quiet. A link and not a button so it works with scripts off, and it is the last thing in the footer because that is where somebody who has read to the bottom is. */ .totop{display:flex;width:fit-content;align-items:center;gap:.5rem; margin:1.6rem auto 0;min-height:44px;padding:0 1rem; font-size:var(--t-s);font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:#eef1efb5;text-decoration:none;border:1px solid var(--on-navy-line); border-radius:999px;transition:color .15s,border-color .15s} .totop:hover,.totop:focus-visible{color:#fff;border-color:#eef1ef6b} .totop svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} @supports (color:color-mix(in srgb,red 50%,white)){ .totop{color:color-mix(in srgb,var(--on-navy) 71%,transparent)} } .legal{display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:center; border-top:1px solid var(--on-navy-line);margin-top:1.4rem;padding-top:1.1rem; font-size:.75rem;color:#eef1efb0} .legal nav{display:flex;gap:1.6rem} .legal a{display:inline-flex;align-items:center;min-height:44px;color:#eef1efd8;text-decoration:none} .legal a:hover{color:var(--yellow)} /* ---------------------------------------------------------------- ERROR AND EMPTY PAGES One layout, different copy. 404, 403, 500, 503 and no-results all use it, so a stranger who hits any of them lands somewhere that looks like the site and offers a way out. ---------------------------------------------------------------- */ /* The column that pins the thin footer to the bottom goes on .wp-site-blocks and not on the body. A block theme wraps the whole template in that div, so the body's only flex child is the wrapper and `main` is a grandchild: putting the column on the body leaves main with nothing to fill and the footer floating fifty pixels short of the bottom on any screen taller than the content. Ported from a prototype that had no wrapper, found by measuring the footer instead of reading it. */ .errpage .wp-site-blocks{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} /* On a phone these are one column, and centring them in the leftover height put each page's heading at a different distance from the header depending on how many links it offered. Start them all at the same place instead, and only centre once the layout is two columns and the block is short enough for centring to mean something. */ /* grid, not flex: a flex item would have to be told to fill, and a width on .lost beats the gutter .wrap sets and drops the type onto the page edge. align-content does the same job with nothing to undo. */ .errpage main{flex:1;display:grid;align-content:start;padding:clamp(2.2rem,6vw,3rem) 0} @media (min-width:1000px){ .errpage main{align-content:center;padding:clamp(3rem,7vw,4.5rem) 0} } .lost{display:grid;gap:2.2rem} @media (min-width:1000px){.lost{grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}} .lost h1{font-size:clamp(2.3rem,1.6rem + 3.2vw,4.2rem);max-width:14ch;margin-top:.5rem} .lost h1 em{font-style:normal;color:var(--ink-soft)} .lost .say{font-size:var(--t-m);line-height:1.45;max-width:34ch;margin:1.1rem 0 0;color:var(--ink-soft)} .tries{margin:0;border-top:2px solid var(--ink)} .tries a{display:grid;grid-template-columns:1fr auto;gap:.2rem 1.2rem;align-items:center; border-bottom:1px solid var(--line);padding:.95rem 0;text-decoration:none} .tries b{font-family:var(--disp);font-weight:800;font-size:var(--t-m);line-height:1.15} .tries span{grid-column:1;color:var(--ink-soft);font-size:var(--t-s)} /* the column has to be stated: a definite grid-row alone gets this placed before the auto items and it lands in column 1 */ .tries em{grid-row:1 / span 2;grid-column:2;font-style:normal;font-size:1.4rem;color:var(--ink-soft)} .tries a:hover em{color:var(--ink)} /* search results, grouped by what the thing is (#45). The register's own group heading is reused rather than a second one written. */ .hits{display:grid;gap:2.2rem} .hits .grp-lab{margin-bottom:0} .hits .tries{border-top:0} .thin{background:var(--navy);color:#eef1efb0;border-top:2px solid var(--yellow);font-size:var(--t-s)} .thin-in{display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:center;padding:.9rem 0} .thin a{display:inline-flex;align-items:center;min-height:44px;color:#eef1efd8;text-decoration:none} .thin a:hover{color:var(--yellow)} /* ---------------------------------------------------------------- MOTION : gentle. Gated on .js and reduced-motion. ---------------------------------------------------------------- */ .js .rise{opacity:0;transform:translateY(14px)} @media (prefers-reduced-motion:reduce){ .js .rise{opacity:1;transform:none} .pin .ring{animation:none} *{transition:none!important} } /* ================================================================ PAGES Everything above is the shared system, ported from design/system.css. Everything below is one page's own CSS, ported from that page's