/** * Headwaters: public styles. * * Palette carried over from the previous system, where every token was measured * against WCAG AA rather than eyeballed: * --hw-primary #0e6ba8 5.70:1 --hw-muted #4b5563 7.56:1 * --hw-danger #b91c1c 6.47:1 --hw-success #12694a 6.68:1 * * The [hidden] guard is first because a previous release shipped fixed-position * overlays with display:flex toggled by the hidden attribute, [hidden] is only * a UA rule, so any author display beats it, and the result was an invisible * full-page layer swallowing every click. */ /* ─── Foundation ─────────────────────────────────────────────────────── Every public component carries `hw-root`, so a new one inherits the design tokens by adding one word rather than by somebody remembering to extend a selector list. The first version scoped these to four class names and three later components got none of them, on those pages `var(--hw-ink)` resolved to nothing, color fell through to the theme, and the form was unreadable. */ .hw-root { /* Light. Contrast measured, not eyeballed: primary 5.70:1 · muted 7.56:1 · danger 6.47:1 · success 6.68:1 */ /* * Industry, on the public side. Steel is the DEFAULT accent only: * HW_Brand overwrites --hw-primary and its two relatives with the * chapter's own color, which is a shipped feature and the reason this * restyle changes the geometry and the type rather than hard-coding a * hue. A chapter that never picked a color gets steel. */ --hw-primary: #5980a6; --hw-primary-soft: #eef6ff; --hw-primary-dark: #416180; --hw-on-primary: #fff; /* Red stays red. The design brief sanctions the exception, and the emergency control on the console is the reason it exists. */ --hw-danger: #b3261e; --hw-danger-soft: #fbeceb; /* Mono, including the semantic colors. See the note in admin.css: the brief asks for the accent ramp where green used to be. */ --hw-warn: var(--hw-muted); --hw-warn-soft: transparent; --hw-success: var(--hw-primary-dark); --hw-success-soft: var(--hw-primary-soft); --hw-ink: #1d1f20; --hw-muted: #5d5d60; --hw-line: #c8c9ca; --hw-line-soft: #dcdddf; /* Cards are line drawings here too, so the "surface" is the ground and only lifted things paint over it. */ --hw-surface: transparent; --hw-toast-ink: #fff; --hw-field-line: #767b80; --hw-surface-2: #e9e9ea; --hw-surface-lift: #f7f7f8; --hw-field-bg: #f7f7f8; --hw-bg: transparent; --hw-shadow: none; --hw-radius: 0px; --hw-tap: 44px; --hw-font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --hw-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: light; font-family: var(--hw-font-body); font-size: 16px; line-height: 1.6; color: var(--hw-ink); /* * The component paints its own page. * * In light mode this is transparent and the theme shows through, which is * what you want. In dark mode it is not optional: the cards carry their own * dark surface but the space between them: the heading, the intro line, * the step tabs: sat directly on the theme's white page with light text on * it. That shipped as an all-but-invisible headline. */ background: var(--hw-bg); max-width: 940px; margin: 0 auto; padding: 20px 16px 64px; box-sizing: border-box; -webkit-text-size-adjust: 100%; } /* Inheriting box-sizing is what lets width:100% and padding coexist. Themes set this inconsistently, so it is set here rather than assumed. */ .hw-root *, .hw-root *::before, .hw-root *::after { box-sizing: inherit; } /* * Dark. * * Not a different design, the same one with the surfaces inverted and the * accents lifted enough to stay legible: primary #6cb8e8 is 6.4:1 on #161b22, * where #0e6ba8 would be 2.1:1. * * Which of the three rules below applies is the administrator's decision, set * in Setup and expressed as a class on : * * no class follow the visitor's device * hw-theme-light always light, whatever the device says * hw-theme-dark always dark * * The default is light, because a chapter's website is almost always light and * a dark form on a light page reads as broken rather than as a preference. */ @media (prefers-color-scheme: dark) { body:not(.hw-theme-light) .hw-root { /* Industry after dark: the same steel, lifted to carry on a dark ground, on near-black rather than blue-black. This is the console's glare mode, read at arm's length in a parking lot at seven in the morning, so the accent goes UP the ramp for contrast, never down. */ --hw-primary: #94bce3; --hw-primary-soft: #1d2d3d; --hw-primary-dark: #b5d9fd; --hw-on-primary: #12181d; --hw-danger: #f0a9a3; --hw-danger-soft: #3a1a17; --hw-warn: #e0bb7f; --hw-warn-soft: #352a15; --hw-success: #8ecbb1; --hw-success-soft: #17322a; --hw-ink: #eceded; --hw-muted: #a9aaac; --hw-line: #3d3f41; --hw-line-soft: #2a2c2e; --hw-surface: transparent; --hw-toast-ink: #16181a; --hw-field-line: #7d858c; --hw-surface-2: #242628; --hw-surface-lift: #202224; --hw-field-bg: #1a1c1e; --hw-bg: #16181a; --hw-shadow: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } } body.hw-theme-dark .hw-root { /* Industry after dark: the same steel, lifted to carry on a dark ground, on near-black rather than blue-black. This is the console's glare mode, read at arm's length in a parking lot at seven in the morning, so the accent goes UP the ramp for contrast, never down. */ --hw-primary: #94bce3; --hw-primary-soft: #1d2d3d; --hw-primary-dark: #b5d9fd; --hw-on-primary: #12181d; --hw-danger: #f0a9a3; --hw-danger-soft: #3a1a17; --hw-warn: #e0bb7f; --hw-warn-soft: #352a15; --hw-success: #8ecbb1; --hw-success-soft: #17322a; --hw-ink: #eceded; --hw-muted: #a9aaac; --hw-line: #3d3f41; --hw-line-soft: #2a2c2e; --hw-surface: transparent; --hw-toast-ink: #16181a; --hw-field-line: #7d858c; --hw-surface-2: #242628; --hw-surface-lift: #202224; --hw-field-bg: #1a1c1e; --hw-bg: #16181a; --hw-shadow: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } /* An explicit per-element choice still wins, either way, the console and the portal set data-theme directly, and some themes set a dark class without setting the media preference. */ .hw-root[data-theme="light"] { --hw-primary: #0e6ba8; --hw-primary-soft: #eaf3fa; --hw-primary-dark: #094f7d; --hw-on-primary: #fff; --hw-danger: #b91c1c; --hw-danger-soft: #fef2f2; --hw-warn: #92400e; --hw-warn-soft: #fffbeb; --hw-success: #12694a; --hw-success-soft: #ecfdf5; --hw-ink: #1f2933; --hw-muted: #4b5563; --hw-line: #d5dae1; --hw-line-soft: #e8ecf1; --hw-surface: #fff; --hw-surface-2: #f6f8fa; --hw-field-bg: #fff; --hw-toast-ink: #fff; --hw-field-line: #767b80; --hw-bg: transparent; --hw-shadow: 0 1px 2px rgba(17, 24, 39, .06); color-scheme: light; } .hw-root[data-theme="dark"] { /* Industry after dark: the same steel, lifted to carry on a dark ground, on near-black rather than blue-black. This is the console's glare mode, read at arm's length in a parking lot at seven in the morning, so the accent goes UP the ramp for contrast, never down. */ --hw-primary: #94bce3; --hw-primary-soft: #1d2d3d; --hw-primary-dark: #b5d9fd; --hw-on-primary: #12181d; --hw-danger: #f0a9a3; --hw-danger-soft: #3a1a17; --hw-warn: #e0bb7f; --hw-warn-soft: #352a15; --hw-success: #8ecbb1; --hw-success-soft: #17322a; --hw-ink: #eceded; --hw-muted: #a9aaac; --hw-line: #3d3f41; --hw-line-soft: #2a2c2e; --hw-surface: transparent; --hw-toast-ink: #16181a; --hw-field-line: #7d858c; --hw-surface-2: #242628; --hw-surface-lift: #202224; --hw-field-bg: #1a1c1e; --hw-bg: #16181a; --hw-shadow: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } /* * The light/dark switch, on the event-day console only. * * It came off the public forms, a visitor flipping the signup form to dark on * a light website is not a preference anybody asked for, and it read as a * fault. The console is a different thing: a tool held in one hand outdoors at * eight in the morning, where glare and darkness are real and the person using * it is the one running the day. The choice lives in localStorage on their own * phone and affects nobody else. */ .hw-console .hw-themetoggle { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 13px; border: 1px solid var(--hw-line); border-radius: 0; background: var(--hw-surface); color: var(--hw-muted); font: inherit; font-size: 14px; cursor: pointer; } /* On a phone there is no free corner: pinned to the top right it lands on the event title. It gives up the corner and sits under the head row, pushed to the right, where it is still out of the way of the roster. */ @media (max-width: 600px) { .hw-console .hw-themetoggle { position: static; align-self: flex-end; margin: 0 0 10px auto; } } .hw-console .hw-themetoggle:hover { color: var(--hw-ink); border-color: var(--hw-primary); } .hw-console .hw-themetoggle:focus-visible { outline: 3px solid var(--hw-primary); outline-offset: 2px; } .hw-console .hw-themetoggle-icon { font-size: 14px; line-height: 1; } /* ─── Form controls ──────────────────────────────────────────────────── Every property a theme is likely to set is set here, including the ones that look redundant. Twenty Twenty-Five gives inputs their own background and a narrow default width; without an explicit background and width the result is a dark box with dark text in it, half the width of the screen. */ .hw-root input[type="text"], .hw-root input[type="email"], .hw-root input[type="tel"], .hw-root input[type="url"], .hw-root input[type="number"], .hw-root input[type="date"], .hw-root input[type="time"], .hw-root input[type="search"], .hw-root input[type="password"], .hw-root select, .hw-root textarea { display: block; width: 100%; max-width: 100%; min-height: var(--hw-tap); margin: 0; padding: 11px 13px; font-family: inherit; /* 16px minimum, or iOS zooms the page when the field is focused. */ font-size: 16px; line-height: 1.45; color: var(--hw-ink); background-color: var(--hw-field-bg); background-image: none; border: 1px solid var(--hw-line); border-radius: 0; box-shadow: none; outline-offset: 2px; -webkit-appearance: none; appearance: none; } .hw-root textarea { min-height: 96px; resize: vertical; } /* The arrow has to be drawn back on after appearance:none, and it has to be drawn in the current color or it disappears in dark mode. */ .hw-root select { padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .hw-root input:focus, .hw-root select:focus, .hw-root textarea:focus { border-color: var(--hw-primary); outline: 3px solid var(--hw-primary); outline-offset: 1px; } .hw-root input::placeholder, .hw-root textarea::placeholder { color: var(--hw-muted); opacity: 1; } .hw-root input[type="checkbox"], .hw-root input[type="radio"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--hw-primary); -webkit-appearance: auto; appearance: auto; } .hw-root input[type="range"] { width: 100%; accent-color: var(--hw-primary); } .hw-root input[type="file"] { max-width: 100%; font-size: 15px; } /* Themes love to restyle these. */ .hw-root button { font-family: inherit; } .hw-root a { color: var(--hw-primary); } /* Headings inside a component are ours, not the theme's, Twenty Twenty-Five renders an h2 at 40px, which clipped the page title on a phone. */ .hw-root h1, .hw-root h2, .hw-root h3, .hw-root h4 { font-family: inherit; color: var(--hw-ink); line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.01em; } .hw-root h1 { font-size: clamp(26px, 6vw, 34px); } .hw-root h2 { font-size: clamp(22px, 5vw, 27px); } .hw-root h3 { font-size: clamp(17px, 4vw, 19px); } .hw-root h4 { font-size: 16px; } .hw-root p { margin: 0 0 12px; color: var(--hw-ink); } /* Cards and panels carry their own surface, so a theme cannot leave them transparent over a background of the opposite brightness. */ .hw-root .hw-fieldset, .hw-root .hw-card, .hw-root .hw-notice, .hw-root .hw-callout { background-color: var(--hw-surface); color: var(--hw-ink); } .hw-root .hw-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--hw-primary); } .hw-check-strong { font-weight: 600; } .hw-checks { display: flex; flex-direction: column; gap: 2px; } .hw-fieldset { border: 1px solid var(--hw-line-soft); border-radius: 0; background: var(--hw-surface); padding: 20px; margin: 0 0 18px; } .hw-fieldset legend { padding: 0 8px; font-size: 17px; font-weight: 700; } .hw-subpanel { margin-top: 12px; padding: 16px; background: var(--hw-surface-2); border-radius: 0; } .hw-notice { padding: 16px 18px; border-radius: 0; border-left: 4px solid var(--hw-primary); background: var(--hw-surface-2); font-size: 15px; } .hw-notice-warn { border-left-color: var(--hw-warn); background: var(--hw-warn-soft); } .hw-callout { padding: 16px 18px; background: var(--hw-surface-2); border-left: 4px solid var(--hw-primary); border-radius: 0; margin-bottom: 24px; } .hw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .hw-hero { text-align: center; margin-bottom: 24px; } .hw-hero-program { font-size: 14px; font-weight: 600; color: var(--hw-primary); text-transform: uppercase; letter-spacing: .06em; margin: 0; } .hw-hero h2 { margin: 6px 0; font-size: 28px; } .hw-hero-where { font-size: 15px; color: var(--hw-muted); margin: 4px 0 0; } .hw-waiver { max-height: 260px; overflow-y: auto; padding: 16px; background: var(--hw-surface-2); border: 1px solid var(--hw-line); border-radius: 0; font-size: 15px; line-height: 1.7; margin-bottom: 14px; } .hw-signature { font-family: Georgia, serif; font-style: italic; font-size: 19px !important; } .hw-orglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 0 16px; max-height: 280px; overflow-y: auto; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--hw-line); border-radius: 0; background: var(--hw-surface-2); } /* Shifts */ .hw-shifts { display: grid; gap: 10px; } .hw-shift { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--hw-line); border-radius: 0; cursor: pointer; } .hw-shift:has(input:checked) { border-color: var(--hw-primary); background: var(--hw-surface-2); } .hw-shift.is-full { opacity: .6; } .hw-root .hw-shift input { width: 22px; height: 22px; accent-color: var(--hw-primary); } .hw-shift-body { display: flex; flex-direction: column; } .hw-shift-name { font-weight: 700; font-size: 16px; } .hw-shift-time { font-size: 14px; color: var(--hw-muted); } .hw-shift-space { font-size: 13px; font-weight: 600; color: var(--hw-primary); } /* Done + check-in */ .hw-done, .hw-checkin-card { text-align: center; padding: 40px 24px; background: var(--hw-surface); border: 1px solid var(--hw-line-soft); border-radius: 0; } /* Stacked full-width buttons here touched edge to edge, so the primary button's top sat exactly on the secondary's bottom border and the two read as one control split by a line. */ .hw-done .hw-btn + .hw-btn, .hw-checkin-card .hw-btn + .hw-btn { margin-top: 10px; } .hw-done-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--hw-success-soft); color: var(--hw-success); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; } /* Hours */ .hw-hours-head { margin-bottom: 20px; } .hw-hours-lifetime { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; margin-top: 14px; } .hw-hours-lifetime > div { text-align: center; padding: 18px 10px; background: var(--hw-surface); border: 1px solid var(--hw-line-soft); border-radius: 0; } .hw-big { display: block; font-size: 30px; font-weight: 800; color: var(--hw-primary); line-height: 1.1; } .hw-small { display: block; font-size: 13px; color: var(--hw-muted); margin-top: 2px; } .hw-monthnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; } .hw-monthnav span { font-size: 18px; font-weight: 700; } .hw-entry { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--hw-line-soft); border-radius: 0; margin-bottom: 8px; background: var(--hw-surface); } .hw-entry-date { font-weight: 700; min-width: 58px; } .hw-entry-body { flex: 1; min-width: 0; } .hw-entry-hours { font-weight: 800; font-size: 18px; } .hw-pill { display: inline-flex; padding: 2px 9px; border-radius: 0; background: var(--hw-surface-2); color: var(--hw-muted); font-size: 13px; font-weight: 600; } .hw-pill-ok { background: var(--hw-success-soft); color: var(--hw-success); } .hw-pill-wait { background: var(--hw-warn-soft); color: var(--hw-warn); } .hw-addhours { margin-top: 24px; padding: 20px; border: 1px solid var(--hw-line-soft); border-radius: 0; background: var(--hw-surface); } /* Event list */ /* * A link inside a sentence is underlined. * * WCAG 1.4.1: color alone may not be the only thing marking a link, and * inside a paragraph our links were exactly that, a blue word among black * ones. Nothing about that looks broken to whoever picked the blue, which * is why it survived a design-system pass that claimed AA. Found by an * automated sweep of a real site, on the two cold pages a volunteer meets * when their personal link has gone stale: the moment they most need to * see where to click. * * Links that are already something else, a button, a tab, a card, say so * with their own shape and keep it. */ .hw-root p a:not([class]), .hw-root .hw-empty a:not([class]), .hw-root .hw-notice a:not([class]), .hw-root .hw-sub a:not([class]), .hw-root li a:not([class]) { text-decoration: underline; text-underline-offset: 2px; } /* * Our lists hold their shape in anybody's theme. * * A theme styles content lists, and it does it with a compound selector: * Divi ships `.entry-content ul { list-style-type: disc; padding: 0 0 23px 1em }`, * which outranks a single class of ours and put bullets and an indent on * every list this plugin renders inside a Divi content area. Invisible on * the test theme, obvious on the real site. These are components, not * prose; a plain

is painted into the gap in the fieldset's top border, and * where it lands is decided by the browser and then argued with by the theme. * Twenty Twenty-Five floats it; others position it absolutely or give it a * transform. The result on this form was "About you" sitting astride the card's * top edge with its descenders clipped off. * * Taking it out of the border entirely: float:none, position:static, full * width, inside the padding, makes it behave like the

it always was, and * removes the browser's and the theme's opinion from the question. The element * stays a because that is what names the group for a screen reader. / .hw-root .hw-fieldset > legend { display: block; / * float:left, and it has to be a float. * * The first attempt at this used float:none;position:static, reasoning that * taking the browser's opinions away would make the legend behave. It does * the opposite: those are the defaults, and a legend at its defaults gets * the special legend layout, painted into the gap in the fieldset's top * border. Measured on the live site afterwards, the legend's top edge was * still exactly the fieldset's top edge. * * Floating it is what opts out of that layout and makes it an ordinary box * inside the content area. Verified in the browser, not reasoned about: * 19px below the border instead of 0. / float: left; position: static; width: 100%; max-width: 100%; padding: 0 0 14px; margin: 0; border: 0; background: none; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--hw-ink); transform: none; } / Whatever follows a float has to clear it. / .hw-root .hw-fieldset > legend + { clear: both; } .hw-root .hw-field { margin-bottom: 16px; } .hw-root .hw-label { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 600; color: var(--hw-ink); } .hw-root .hw-hint { margin: 6px 0 0; font-size: 13.5px; color: var(--hw-muted); line-height: 1.5; } .hw-root .hw-sub { font-size: 13.5px; color: var(--hw-muted); } .hw-root .hw-req { color: var(--hw-danger); } /* Two and three column grids collapse to one on a phone rather than squeezing two 140px inputs side by side. / .hw-root .hw-grid-2, .hw-root .hw-grid-3 { display: grid; gap: 0 16px; } @media (min-width: 620px) { .hw-root .hw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hw-root .hw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } / Buttons: explicit colors both ways, and full width on a phone where a half-width primary action just looks like something went wrong. / .hw-root .hw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--hw-tap); padding: 11px 20px; font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 0; transition: background-color .12s ease, border-color .12s ease; / A long label in a narrow column wraps, and inline-flex centers the text as one box while the LINES inside it still align left, which reads as a broken button ("Sign up, no / account needed" hugging one edge). Centered lines, balanced across the break. / text-align: center; text-wrap: balance; } .hw-root .hw-btn-primary { color: var(--hw-on-primary); background: var(--hw-primary); border-color: var(--hw-primary); } .hw-root .hw-btn-primary:hover { background: var(--hw-primary-dark); border-color: var(--hw-primary-dark); } .hw-root .hw-btn-ghost { color: var(--hw-ink); background: var(--hw-surface); border-color: var(--hw-line); } .hw-root .hw-btn-ghost:hover { border-color: var(--hw-primary); color: var(--hw-primary); } .hw-root .hw-btn-block { width: 100%; } .hw-root .hw-btn-lg { min-height: 52px; font-size: 17px; } .hw-root .hw-btn:disabled { opacity: .55; cursor: not-allowed; } .hw-root .hw-btn:focus-visible { outline: 3px solid var(--hw-primary); outline-offset: 2px; } .hw-root .hw-error { padding: 11px 14px; margin: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--hw-danger); background: var(--hw-danger-soft); border-left: 4px solid var(--hw-danger); border-radius: 0; } .hw-root .hw-field-error { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--hw-danger); } .hw-root .hw-empty { padding: 18px; text-align: center; color: var(--hw-muted); font-size: 14.5px; } .hw-toprow { display: flex; justify-content: flex-end; margin-bottom: 8px; } / ─── Long-form pages ────────────────────────────────────────────────── The hero on a signup or join page is ours. A theme that renders h1 at 48px clipped "Become a Volunteer" against the top of a phone screen. / .hw-root .hw-hero { margin: 0 0 22px; } .hw-root .hw-hero h1, .hw-root .hw-hero h2 { margin-bottom: 8px; } .hw-root .hw-hero-when { font-size: 15.5px; color: var(--hw-muted); margin: 0; } .hw-root .hw-hero-eyebrow { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-primary); } / Notices carry their own surface both ways. / .hw-root .hw-notice { padding: 14px 16px; margin: 0 0 18px; border-radius: 0; border: 1px solid var(--hw-line); border-left: 4px solid var(--hw-primary); } .hw-root .hw-notice-warn { background: var(--hw-warn-soft); color: var(--hw-warn); border-color: var(--hw-warn); } .hw-root .hw-callout { padding: 14px 16px; margin: 0 0 18px; border-radius: 0; background: var(--hw-surface-2); border-left: 4px solid var(--hw-primary); color: var(--hw-ink); } / Checkboxes and radios: the row, not just the box. / .hw-root .hw-check, .hw-root .hw-radio { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; margin-bottom: 9px; border: 1px solid var(--hw-line); border-radius: 0; background: var(--hw-surface); color: var(--hw-ink); cursor: pointer; } .hw-root .hw-check:has(input:checked), .hw-root .hw-radio:has(input:checked) { border-color: var(--hw-primary); background: var(--hw-primary-soft); } .hw-root .hw-check span, .hw-root .hw-radio span { flex: 1; min-width: 0; } .hw-root .hw-check em, .hw-root .hw-radio em { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; color: var(--hw-muted); line-height: 1.5; } / Never leave a hidden element clickable, a fixed overlay with an author display rule beats the UA [hidden] rule, which once cost a whole portal. / .hw-root [hidden] { display: none !important; } / ─── Volunteer photo, on their own link ───────────────────────────── Shares the drop-zone styling with the coordinator console. It is the same control doing the same job, and two of them drifting apart is how one ends up unusable on a phone without anybody noticing. / .hw-vphoto .hw-photo-drop { margin-bottom: 14px; } .hw-vphoto .hw-vphoto-note { margin-top: 12px; font-size: 13.5px; color: var(--hw-muted); } .hw-notice-ok { padding: 12px 14px; border-radius: 0; background: var(--hw-success-soft); color: var(--hw-success); border-left: 4px solid var(--hw-success); margin-bottom: 14px; } / The email-preference block on a volunteer's own account page. / .hw-prefs .hw-checkgroup { margin-bottom: 14px; } .hw-prefs .hw-actions { align-items: center; gap: 12px; } / ─── Kiosk: a tablet at the welcome table ─────────────────────────── / .hw-kiosk { max-width: 640px; margin: 0 auto; padding: 24px 16px; text-align: center; } .hw-kiosk-title { font-size: 30px; margin: 0 0 4px; } .hw-kiosk-sub { font-size: 18px; color: var(--hw-muted); margin: 0 0 20px; } .hw-kiosk-search { width: 100%; padding: 18px 20px; font-size: 26px; text-align: center; border: 2px solid var(--hw-line); border-radius: 0; } .hw-kiosk-search:focus { outline: 3px solid var(--hw-primary); outline-offset: 2px; } .hw-kiosk-results { margin-top: 18px; display: grid; gap: 10px; } / Large targets: this is used standing up, in gloves, often in the rain. / .hw-kiosk-name { min-height: 64px; padding: 16px 20px; font-size: 22px; font-weight: 600; border: 2px solid var(--hw-line); border-radius: 0; background: var(--hw-surface); color: var(--hw-ink); cursor: pointer; } .hw-kiosk-name:hover { border-color: var(--hw-primary); } .hw-kiosk-name.is-in { opacity: .55; cursor: default; } .hw-kiosk-done { font-size: 24px; font-weight: 700; color: var(--hw-success); padding: 20px 0; } .hw-kiosk-none { font-size: 18px; color: var(--hw-muted); } .hw-kiosk-help { margin-top: 24px; color: var(--hw-muted); } / ─── The survey afterwards ────────────────────────────────────────── / .hw-survey { max-width: 560px; } .hw-scale { display: flex; gap: 8px; } .hw-scale-opt { flex: 1; } .hw-scale-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .hw-scale-opt span { display: block; padding: 14px 0; text-align: center; font-size: 18px; font-weight: 600; border: 2px solid var(--hw-line); border-radius: 0; cursor: pointer; } / The dark theme's primary is a light tint, so hardcoded white text on it was 1.99:1; the primary-dark and on-primary pair is stated per theme and passes in both. / .hw-scale-opt input:checked + span { border-color: var(--hw-primary); background: var(--hw-primary-dark, var(--hw-primary)); color: var(--hw-on-primary, #fff); } .hw-scale-opt input:focus-visible + span { outline: 3px solid var(--hw-primary); outline-offset: 2px; } / ─── The health of the river ──────────────────────────────────────── / .hw-watershed { max-width: 760px; } .hw-water-headline { text-align: center; padding: 8px 0 24px; } .hw-water-big { font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: -0.5px; } .hw-water-lede { font-size: 17px; max-width: 60ch; margin: 10px auto 0; color: var(--hw-ink); } .hw-rating-excellent { color: #15803d; } .hw-rating-good { color: #4d7c0f; } .hw-rating-fair { color: #b45309; } .hw-rating-poor { color: var(--hw-danger); } / follows the theme; fixed red text was illegible in dark mode / .hw-pill.hw-rating-excellent { background: #15803d; color: #fff; } .hw-pill.hw-rating-good { background: #4d7c0f; color: #fff; } .hw-pill.hw-rating-fair { background: #b45309; color: #fff; } .hw-pill.hw-rating-poor { background: #b91c1c; color: #fff; } / fixed in both themes on purpose, like .hw-sos: white-on-red is the signal / .hw-water-explain { padding: 20px 0; border-top: 1px solid var(--hw-line); } .hw-water-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } .hw-water-band { padding: 10px 8px; text-align: center; border-radius: 0; background: var(--hw-surface-2, rgba(0,0,0,.03)); } .hw-water-band strong { display: block; font-size: 15px; } .hw-water-band span { font-size: 12px; color: var(--hw-muted); } .hw-water-site { padding: 16px 0; border-top: 1px solid var(--hw-line-soft); color: var(--hw-primary); } .hw-water-site header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hw-water-site h4 { margin: 0; font-size: 18px; color: var(--hw-ink); } .hw-water-site .hw-sub, .hw-water-verdict { color: var(--hw-muted); } .hw-water-verdict { font-size: 15px; margin: 4px 0 0; } .hw-spark { width: 100%; max-width: 320px; height: 60px; display: block; margin: 8px 0; } .hw-water-taxa { list-style: none; margin: 12px 0 0; padding: 0; } .hw-water-taxa li { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr auto; gap: 10px; align-items: center; padding: 4px 0; font-size: 14px; } .hw-taxa-bar { height: 8px; background: var(--hw-line-soft); border-radius: 0; overflow: hidden; } .hw-taxa-bar span { display: block; height: 100%; background: var(--hw-primary); border-radius: 0; } .hw-taxa-pct { color: var(--hw-muted); font-size: 13px; white-space: nowrap; } .hw-water-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--hw-line); color: var(--hw-muted); font-size: 14px; } @media (max-width: 560px) { .hw-water-big { font-size: 34px; } .hw-water-scale { grid-template-columns: repeat(2, 1fr); } .hw-water-taxa li { grid-template-columns: 1fr auto; } .hw-taxa-bar { grid-column: 1 / -1; } } .hw-ec-count { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--hw-primary); } / This year's most generous, first names only. / .hw-leaderboard { margin-top: 26px; } .hw-leaders { list-style: none; margin: 10px 0 0; padding: 0; max-width: 26rem; counter-reset: hw-rank; } .hw-leaders li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hw-line-soft); counter-increment: hw-rank; } .hw-leaders li::before { content: counter(hw-rank); flex: 0 0 1.6em; font-weight: 800; color: var(--hw-muted); font-size: 14px; } .hw-leaders li:nth-child(1)::before, .hw-leaders li:nth-child(2)::before, .hw-leaders li:nth-child(3)::before { color: var(--hw-primary); } .hw-leader-name { flex: 1; font-weight: 600; } .hw-leader-hours { font-variant-numeric: tabular-nums; color: var(--hw-muted); } / ─── My crew, on the console ──────────────────────────────────────── / .hw-crewpick { display: block; width: 100%; margin-bottom: 8px; padding: 16px; font-size: 18px; font-weight: 700; text-align: left; border: 2px solid var(--hw-line); border-radius: 0; background: var(--hw-surface); color: var(--hw-ink); cursor: pointer; } .hw-crewpick:hover { border-color: var(--hw-primary); } .hw-round { display: grid; gap: 6px; } .hw-round-stop { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 0; border: 1px solid var(--hw-line-soft); } .hw-round-stop.is-done { opacity: .6; } .hw-round-stop.is-done .hw-round-mark { color: var(--hw-success); font-weight: 800; } .hw-round-stop.is-here { border-color: var(--hw-primary); background: var(--hw-primary-soft); } .hw-round-stop.is-next { border-color: var(--hw-line); } .hw-round-mark { flex: 0 0 1.2em; text-align: center; font-size: 16px; } .hw-round-name { flex: 1; font-weight: 600; } .hw-crewstatus { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hw-crewstatus button { min-height: 52px; font-size: 15px; font-weight: 700; border-radius: 0; border: 2px solid var(--hw-line); background: var(--hw-surface); color: var(--hw-ink); cursor: pointer; } .hw-crewstatus button:hover { border-color: var(--hw-primary); } .hw-crewstatus [data-crew-status="needs_help"] { border-color: var(--hw-danger); color: var(--hw-danger); } .hw-linklike { border: 0; background: none; padding: 0; color: var(--hw-primary); text-decoration: underline; cursor: pointer; font-size: inherit; } / ─── The public progress board ────────────────────────────────────── / .hw-liveboard { max-width: 680px; } .hw-liveboard-crew { padding: 14px 0; border-bottom: 1px solid var(--hw-line-soft); } .hw-liveboard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .hw-liveboard-head strong { font-size: 17px; } .hw-liveboard-meta { color: var(--hw-muted); font-size: 14px; } .hw-livedots { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .hw-livedot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hw-line); background: var(--hw-surface); } .hw-livedot.is-done { background: var(--hw-success); border-color: var(--hw-success); } .hw-livedot.is-here { background: var(--hw-primary); border-color: var(--hw-primary); box-shadow: 0 0 0 3px var(--hw-primary-soft); } .hw-liveboard-note { margin-top: 16px; color: var(--hw-muted); font-size: 13.5px; } / The pin adjuster: a map only when asked for, never on page load. / .hw-pin-adjust { margin: 14px 0; padding: 12px; border: 1px solid var(--hw-line-soft); border-radius: 0; background: var(--hw-surface); } .hw-pin-map { height: 280px; border-radius: 0; } .hw-pin-row { display: flex; gap: 8px; align-items: baseline; } / The live board's header row: title left, pause control right. / .hw-liveboard-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } / ─── Event picker (signup with several events open) ───────────── / .hw-signup-picker { max-width: 640px; } .hw-pick-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .hw-pick-link { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--hw-line); border-radius: 0; background: var(--hw-surface); color: var(--hw-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; } .hw-pick-link:hover, .hw-pick-link:focus-visible { border-color: var(--hw-primary); box-shadow: var(--hw-shadow); } / min-width:0 or the name refuses to shrink below its longest word, and a row whose button carries a longer label ("Join waiting list" against "Sign up") wraps that button onto a line of its own. One list, two row shapes, decided by a word. The name gives way instead. / .hw-pick-name { font-weight: 650; font-size: 1.05rem; flex: 1 1 auto; min-width: 0; } .hw-pick-meta { display: flex; flex-direction: column; gap: 2px; color: var(--hw-muted); font-size: .9rem; text-align: right; } .hw-pick-cta { flex: 0 0 auto; pointer-events: none; } @media (max-width: 480px) { .hw-pick-meta { text-align: left; flex-basis: 100%; } .hw-pick-cta { flex-basis: 100%; text-align: center; } } / The event card's title is a link now, into that event's own page. It should read as the heading it already was, not as a blue link dropped into a card, so it borrows the ink and takes its underline on hover. / .hw-root .hw-eventcard h3 a.hw-ec-name { color: inherit; text-decoration: none; } .hw-root .hw-eventcard h3 a.hw-ec-name:hover, .hw-root .hw-eventcard h3 a.hw-ec-name:focus-visible { text-decoration: underline; text-underline-offset: 2px; } / A piece of an event given a line of its own, for a builder module that holds several of them. Block, so they stack; margins left to the builder, which is where somebody will want to adjust the spacing. / .hw-root.hw-eventline, .hw-root .hw-eventline { display: block; } / Event-page pieces are token carriers, not components. A fragment must not wear the component's page costume: the 940px measure, the page padding, and above all its own background, which in dark mode painted fifteen small dark pages scattered across a light theme. The tokens still cascade; the box does not. The dark rules repeat the reset at the same specificity the dark costume is applied with, or they lose. / .hw-root.hw-evpiece { max-width: none; margin: 0 0 10px; padding: 0; background: transparent; } span.hw-root.hw-evpiece { display: inline-block; margin: 0 6px 6px 0; } / Pieces live in whatever column the chapter's page gives them, including the narrow ones on pages built before the split was widened. Balanced wrapping keeps a button label from breaking after its first two words and stops a sentence hanging one word ("far.") on a line of its own. / .hw-evpiece .hw-btn { text-wrap: balance; } .hw-evpiece p, .hw-evpiece .hw-sub { text-wrap: pretty; } / * A piece takes the page's colors, and paints nothing. * * These fragments are dropped into the chapter's OWN page by their page * builder, so the surface behind them belongs to the theme and we cannot * know it. Painting our own ground has now failed twice: first as a 940px * dark slab per pill, then as a "snug chip" that the Industry restyle * turned into a row of black boxes on a white page, because the visitor's * operating system was set to dark while the theme was light. * * Inheriting is the only version that cannot be wrong. `color: inherit` * takes the theme's ink, whatever it is, and the border takes currentColor * at low opacity, so a piece reads correctly on a light page, a dark page, * and a page whose colors nobody has thought about yet. / .hw-root.hw-evpiece, body.hw-theme-dark .hw-root.hw-evpiece { background: transparent; color: inherit; padding: 0; } @media (prefers-color-scheme: dark) { body:not(.hw-theme-light) .hw-root.hw-evpiece { background: transparent; color: inherit; padding: 0; } } .hw-evpiece .hw-pill, .hw-evpiece .hw-sub, .hw-evpiece p { color: inherit; } .hw-evpiece .hw-pill { border-color: currentColor; background: transparent; opacity: .85; } / ═══ Industry ══════════════════════════════════════════════════════════ * * The public side of the same system: square corners, hairline frames, * condensed headings, one solid object per view. The corner registration * marks the blueprint style would carry are left off by request, so a * framed object here is a plain square hairline rectangle. / .hw-root h1, .hw-root h2, .hw-root h3, .hw-root h4, .hw-root .hw-hero-when, .hw-root .hw-stat-n, .hw-root .hw-console-tab { font-family: var(--hw-font-heading); font-weight: 600; letter-spacing: .01em; } .hw-root h1, .hw-root h2 { letter-spacing: -.005em; } / Line drawings, not filled blocks. / .hw-root .hw-card, .hw-root .hw-panel, .hw-root .hw-callout, .hw-root .hw-pick-link, .hw-root .hw-console-row, .hw-root .hw-console-stat, .hw-root .hw-done, .hw-root .hw-checkin-card, .hw-root .hw-kiosk { border-radius: 0; } .hw-root .hw-card, .hw-root .hw-panel, .hw-root .hw-console-stat, .hw-root .hw-checkin-card, .hw-root .hw-done { position: relative; background: transparent; border: 1px solid var(--hw-line); box-shadow: none; } / Buttons: square, and only the primary is solid. / .hw-root .hw-btn { border-radius: 0; font-family: var(--hw-font-heading); font-weight: 600; letter-spacing: .02em; border: 1px solid var(--hw-line); background: transparent; color: var(--hw-ink); box-shadow: none; } .hw-root .hw-btn:hover { background: var(--hw-primary-soft); border-color: var(--hw-primary); } .hw-root .hw-btn-primary { background: var(--hw-primary); border-color: var(--hw-primary); color: var(--hw-on-primary); } .hw-root .hw-btn-primary:hover { background: var(--hw-primary-dark); border-color: var(--hw-primary-dark); color: var(--hw-on-primary); } .hw-root .hw-btn-ghost { background: transparent; } / The one control that keeps its own color, and says why in its own rule. / .hw-root .hw-btn-emergency, .hw-root .hw-emergency { background: var(--hw-danger); border-color: var(--hw-danger); color: #fff; border-radius: 0; } / Fields and pills square off with everything else. / .hw-root input, .hw-root select, .hw-root textarea { border-radius: 0; background: var(--hw-field-bg); } .hw-root .hw-pill, .hw-root .hw-chip, .hw-root .hw-tag { border-radius: 0; } / Themed keyboard focus, never the browser's default. / .hw-root a:focus-visible, .hw-root button:focus-visible, .hw-root input:focus-visible, .hw-root select:focus-visible, .hw-root textarea:focus-visible { outline: 2px solid var(--hw-primary); outline-offset: 2px; } .hw-root ::selection { background: var(--hw-primary-soft); } / Tables read as drawn rules. / .hw-root table { border-radius: 0; } .hw-root thead th { font-family: var(--hw-font-heading); letter-spacing: .06em; text-transform: uppercase; font-size: 13px; color: var(--hw-muted); border-bottom: 1px solid var(--hw-ink); } / Console tabs: a drawn rail, and the active one is marked not filled. / .hw-root .hw-console-tab { border-radius: 0; font-family: var(--hw-font-heading); letter-spacing: .04em; } .hw-root .hw-console-tab.is-active { background: var(--hw-primary); border-color: var(--hw-primary); color: var(--hw-on-primary); } / * Photographs are duotoned into the accent, the way the system asks. Kept * to content images inside a Headwaters component: a chapter's own page * photography is theirs and is not recolored by a plugin. / .hw-root .hw-photo img, .hw-root .hw-gallery img { filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; } .hw-root .hw-photo, .hw-root .hw-gallery-item { background: var(--hw-primary-soft); border-radius: 0; } / Flat planes, no gradients: the same rule as the console. / .hw-root .hw-hero, .hw-root .hw-console-head, .hw-root .hw-kiosk-head { background-image: none; border-radius: 0; } / The theme switch squares off with everything else it sits beside. / .hw-console .hw-themetoggle { border-radius: 0; } / Notices are tinted planes, not lozenges. / .hw-root .hw-notice, .hw-root .hw-hint, .hw-root .hw-empty { border-radius: 0; } / ── Every framed object ───────────────────────────────────────────── * * The list below is every framed object a public page can render, given * the one square hairline border the industry look uses. The corner * registration marks are intentionally left off (see the note above). / .hw-root .hw-card, .hw-root .hw-panel, .hw-root .hw-console-stat, .hw-root .hw-checkin-card, .hw-root .hw-done, .hw-root .hw-pick-link, .hw-root .hw-eventcard, .hw-root .hw-entry, .hw-root .hw-fieldset, .hw-root .hw-waiver, .hw-root .hw-addhours, .hw-root .hw-hours-lifetime > , .hw-root .hw-orglist, .hw-root .hw-shift, .hw-root .hw-result, .hw-root .hw-offer-after, .hw-root .hw-subpanel { position: relative; border-radius: 0; background: transparent; border: 1px solid var(--hw-line); box-shadow: none; } /* * Corner registration marks removed by request. Framed objects keep the * square hairline border defined above; the "+" crosshairs that this block * used to draw at each corner are gone from every public page. / / Nothing on a public page is a lozenge. / .hw-root , .hw-root ::before, .hw-root ::after { border-radius: 0; } /* Except the one round thing a thumb finds without looking. / .hw-root .hw-assist-launcher, .hw-assist-launcher { border-radius: 50%; } / And the radio dot, which is a circle because it is a radio. / .hw-root input[type="radio"] { border-radius: 50%; } / Fields are drawn, not filled trays. / .hw-root input, .hw-root select, .hw-root textarea { background: transparent; / A field's only boundary must reach 3 to 1 against its ground; the hairline measured 1.66. --hw-field-line exists for exactly this. / border: 1px solid var(--hw-field-line, #767b80); } .hw-root input:focus, .hw-root select:focus, .hw-root textarea:focus { border-color: var(--hw-primary); } / ── Color discipline ─────────────────────────────────────────────── * * This system is mono: steel and neutrals, with red reserved for genuine * danger. The old palette's green, amber and bright blue survived in a * handful of states, which read as three design systems arguing. / / "On site" is a state, not a success message. The design brief calls this out by name: the check-in state uses the accent ramp, not green. / .hw-root .hw-console-row.is-in { border-color: var(--hw-primary); background: var(--hw-primary-soft); } / The confirmation tick likewise: steel, and square like everything else. / .hw-root .hw-done .hw-tick, .hw-root .hw-checkin-card .hw-tick { background: var(--hw-primary-soft); color: var(--hw-primary-dark); border: 1px solid var(--hw-primary); border-radius: 0; } / A required field is not a hazard. Red on a signup form spends the one color this system reserves for an emergency, on an asterisk. / .hw-root .hw-req { color: var(--hw-muted); } / Chosen options are marked in steel, not in the old bright blue. / .hw-root .hw-choice.is-on, .hw-root .hw-option.is-on, .hw-root label.is-on { border-color: var(--hw-primary); background: var(--hw-primary-soft); } / The unread dot on a console tab: steel, like every other signal here. / .hw-root .hw-console-tab-news.has-unread::after, .hw-root .hw-console-tab-alert.has-open::after { background: var(--hw-primary); } / One solid object per view: in a LIST every row would otherwise carry a filled button and the page becomes a wall of steel blocks. The list's own call to action is outlined; the single page-level primary stays filled. / .hw-root .hw-pick-link .hw-btn-primary, .hw-root .hw-eventcard .hw-btn-primary, .hw-root .hw-console-row .hw-btn-primary { background: transparent; color: var(--hw-primary-dark); border-color: var(--hw-primary); } .hw-root .hw-pick-link .hw-btn-primary:hover, .hw-root .hw-eventcard .hw-btn-primary:hover, .hw-root .hw-console-row .hw-btn-primary:hover { background: var(--hw-primary); color: var(--hw-on-primary); } / Browser defaults, themed. Checkboxes and radios were rendering in the user agent's violet on every signup form. / .hw-root input[type="checkbox"], .hw-root input[type="radio"], .hw-root input[type="range"] { accent-color: var(--hw-primary); } .hw-root a { color: var(--hw-primary-dark); } / Status pills on the public side follow the same mono rule. / .hw-root .hw-pill { border: 1px solid var(--hw-line); background: transparent; color: var(--hw-muted); } .hw-root .hw-pill-ok { border-color: var(--hw-primary); background: var(--hw-primary-soft); color: var(--hw-primary-dark); } / ── Mono, including the semantic colors ──────────────────────────── * * This palette has one accent. "Success" green and "warning" amber were * carried over from the old scheme and kept reappearing in states nobody * had listed: a confirmation tick, an arrived roster row, a status tag. * The design brief settles it by name, saying the check-in "on site" state * uses the accent ramp rather than green, so the tokens themselves now * resolve to steel and neutral. Red is untouched: it is the one color * left that means something on its own, and the emergency control is why. / / A tag needs room to breathe once it has a border round it. / .hw-root .hw-pill, .hw-root .hw-tag, .hw-root .hw-chip { padding: 3px 8px; } / The unread dot squares off with everything else. / .hw-root .hw-console-tab-news.has-unread::after, .hw-root .hw-console-tab-alert.has-open::after { border-radius: 0; } / A button inside a piece inherits like the rest of it. Left on the token palette it took dark-mode ink and went pale-on-white the moment the visitor's OS was dark and the theme was not: a button nobody can read is worse than the slab it replaced. / .hw-evpiece .hw-btn { color: inherit; border-color: currentColor; background: transparent; } .hw-evpiece .hw-btn-primary { background: var(--hw-primary); border-color: var(--hw-primary); color: var(--hw-on-primary); } / ── Event page: the two-column blueprint layout ───────────────────── * * A centered title block over a 1.5fr / 1fr grid: on the left the (duotoned) * photo and the description, on the right a framed, sticky card carrying the * facts and the one solid sign-up button. Square hairline frames, no marks. / .hw-root.hw-eventpage, .hw-root .hw-eventpage { max-width: 980px; margin-inline: auto; } .hw-root .hw-ev-head { text-align: center; margin: 0 0 34px; } / The module-composed page uses [hw_event_summary] rather than the whole * [hw_event] block, so its header carries its own centring and width. / .hw-root.hw-ev-summaryblock { text-align: center; max-width: 980px; margin: 0 auto 30px; } .hw-root.hw-ev-summaryblock .hw-ev-kicker { margin: 0 0 8px; } .hw-root .hw-ev-kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hw-primary-dark); margin: 0 0 8px; } .hw-root .hw-ev-head h1 { font-size: 44px; margin: 0 0 10px; letter-spacing: -.01em; } .hw-root .hw-ev-summary { font-size: 15px; color: var(--hw-muted); margin: 0; } .hw-root .hw-ev-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; } .hw-root .hw-ev-media { margin: 0 0 22px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--hw-line); background: var(--hw-primary-soft); } .hw-root .hw-ev-media img { width: 100%; height: 100%; object-fit: cover; } .hw-root .hw-ev-desc { font-size: 15px; line-height: 1.65; } .hw-root .hw-ev-desc p { margin: 0 0 12px; } .hw-root .hw-ev-desc p:last-child { margin-bottom: 0; } .hw-root .hw-ev-brief { margin-top: 22px; } .hw-root .hw-ev-card { position: sticky; top: 16px; padding: 22px; } .hw-root .hw-ev-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; } .hw-root .hw-ev-facts li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; } .hw-root .hw-ev-facts .hw-ev-ico { flex: none; margin-top: 1px; color: var(--hw-primary-dark); } .hw-root .hw-ev-facts span { color: var(--hw-muted); } .hw-root .hw-ev-facts strong { color: var(--hw-ink); font-weight: 600; } / Stacked, not side by side: in a builder's narrow sidebar column two * buttons in a row wrap their own labels and land at uneven heights. One * per line reads cleanly at any width the card is given. / .hw-root .hw-ev-secondary { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .hw-root .hw-ev-secondary .hw-btn { width: 100%; min-height: 38px; } .hw-root .hw-ev-reassure { font-size: 12px; color: var(--hw-muted); margin: 12px 0 0; line-height: 1.5; } .hw-root .hw-ev-note, .hw-root .hw-ev-contact { font-size: 13px; margin: 12px 0 0; } .hw-root .hw-ev-closed { font-size: 14px; margin: 0; } .hw-root .hw-ev-notopen { display: inline-flex; } @media (max-width: 760px) { .hw-root .hw-ev-cols { grid-template-columns: 1fr; gap: 24px; } .hw-root .hw-ev-card { position: static; } .hw-root .hw-ev-head h1 { font-size: 34px; } } / * The pieces also live inside page-builder columns, and the environment * pass caught Divi's flex rows keeping their columns side by side on a * phone: the event card was squeezed to a character-wide sliver, one * letter per line. A builder column that carries one of our event pieces * takes the full row on a phone; the builder's own stacking handles the * rest of the page. / @media (max-width: 767px) { .et_pb_column:has(.hw-evpiece) { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } / * Divi 5 lays rows out as CSS grid (a four-track sidebar grid with * span rules, in the shipped event layout), so the flex rule above * is not enough there: the grid template and the per-column spans * must both give way, or the card renders one character per line. * Proven against the live theme at 375px. / .et_pb_row:has(.hw-evpiece) { grid-template-columns: minmax(0, 1fr) !important; } .et_pb_row:has(.hw-evpiece) > .et_pb_column { grid-column: auto / span 1 !important; grid-row: auto !important; } } / ── The leader's tour ── One card per tab, pinned to the bottom of the phone so the real panel stays visible behind it. Sits under the toasts and above everything else. / .hw-console-tourline { margin: 10px 0 0; } .hw-tour { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; padding: 0 12px 12px; pointer-events: none; } .hw-tour[hidden] { display: none; } .hw-tour-card { pointer-events: auto; margin: 0 auto; max-width: 520px; padding: 16px 18px; / The last fallback is a literal on purpose: this card mounts on document.body, and the day the token scope is lost again it must fail opaque, not transparent. */ background: var(--hw-surface-lift, var(--hw-field-bg, #fff)); color: var(--hw-ink, #1d1f20); border: 1px solid var(--hw-line, #c8c9ca); border-top: 4px solid var(--hw-primary, #5980a6); box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); } .hw-tour-card h3 { margin: 2px 0 6px; } .hw-tour-card p { margin: 0 0 10px; } .hw-tour-count { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-sub-ink, var(--hw-ink)); margin: 0 0 2px; } .hw-tour-card .hw-actions { margin: 4px 0 0; }