/* 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.16.0 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); /* 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); --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-skip:var(--wp--custom--layer--skip); } /* derive the hairline from the ink so a theme only sets one colour */ @supports (color:color-mix(in srgb,red 50%,white)){ :root{--line:color-mix(in srgb,var(--ink) 17%,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); --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); --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); --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)} :root[data-hc="1"],:root[data-thr="dark"][data-hc="1"]{ --line:color-mix(in srgb,var(--ink) 40%,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; } img{max-width:100%;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='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%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 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)} .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--hdr-h)} /* 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:.6rem} @media (min-width:1024px){.hdr-end{gap:1.45rem}} .mark{font-family:var(--disp);font-weight:800;font-size:1.12rem;line-height:1.05; text-decoration:none;display:flex;align-items:center;min-height:44px} .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 1.15rem;min-height:44px;cursor:pointer; display:inline-flex;align-items:center;gap:.6rem; } .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} .nav,.nav.open{display:flex;flex-direction:row;align-items:center; position:static;inset:auto;height:auto; background:none;padding:0;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. */ .nav a[aria-current]{color:inherit;text-decoration:underline; text-decoration-color:var(--yellow);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,.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. */ .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{ text-decoration:underline;text-decoration-color:var(--yellow); text-decoration-thickness:3px;text-underline-offset:.2em; } /* ---------------------------------------------------------------- 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 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(--card); display:grid;place-items:center;overflow:hidden; font-family:var(--disp);font-weight:800;color:var(--ink-soft); font-size:calc(var(--mark-size,56px) * .5);line-height:1; } .logo-mark img{width:100%;height:100%;object-fit:contain;padding:6px} .logo-mark.lg{--mark-size:clamp(72px,11vw,104px)} /* over the photograph the tile has to stay light or a dark logo disappears into it */ .win .logo-mark{border-color:#eef1ef4a;background:var(--on-navy)} /* ---------------------------------------------------------------- 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. */ .field,.gate .login-username,.gate .login-password{display:grid;gap:.4rem;margin:0 0 1.25rem} /* 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} /* 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} .in::placeholder{color:var(--ink-soft);opacity:.75} .in: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)} .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)} .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