Website style guide

0. Hard rules (site-wide)

0.1 One screen per fold

Every fold on every page must fit one screen at 1440×800. With the 80–84px site header a section's content gets about 716px, and no section may be taller than 800px. Measure every new or changed section at 1440×800 before shipping; anything taller gets cut, split or redesigned. On phones (390 wide) aim for one screen too, using scroll-snap rows or tap-to-reveal instead of long stacks.

0.2 Highlight panel: the standard way to highlight key information

Use template-parts/site/highlight-panel.php (CSS css/highlight-panel.css, loaded site-wide) for any short list of key points. 2–6 short lines, one optional punchline, one panel per fold. Do not invent new callout boxes.

get_template_part( 'template-parts/site/highlight-panel', null, array(
	'lines'     => array( 'No more surprise bills.', 'No more paying for empty rooms.', ... ),
	'punchline' => 'The goal isn’t more work for you. It’s fewer surprises.',
	'cols'      => 2, // or 1
) );

1. Fonts

Count of rendered text elements on the Hanna page: Averta CY 400 ×62, 700 ×41, 600 ×20, 500 ×1; Plus Jakarta Sans 700 ×9, 500 ×2, 600 ×1. Note: Averta CY only ships Semibold and Bold, so "400" and "600" Averta text look the same weight; real contrast comes from 700.

2. Type scale

Sizes scale fluidly between the two widths (tokens --r-h1: clamp(40px, 3.2vw, 56px), --r-h2: clamp(32px, 2.6vw, 44px), --r-h3: clamp(24px, 1.8vw, 30px), --r-body: 16px → 18px at ≥1920, --r-lead: 18px → 20px, --r-lh: 1.7, --r-cap: 14px).

3. Colours

3.1 Text and surfaces

3.2 Brand / accent colours

3.3 Story card accents (one colour per card)

3.4 Energy Loss type colours (cards tint 4–6%, bar track 8%, bar fill 100%)

3.5 Accent-word rule

• Each card has one accent colour. Use it for the card's 1px border (50% opacity), the icon badge tint, the accent words in the subtitle, the bold .cs-semi phrases in its body, and the 3px quote-block rule. Never mix two accent colours inside one card.
• Accent words keep the same size and weight as the surrounding text (subtitle 600, body emphasis 700); only the colour changes.
• One accent phrase per subtitle (2–4 words, usually the payoff: "Not The Cause", "Found", "The Waste", "Operational Visibility").
• Headings: hero H1 and section H2 may colour their final phrase (periwinkle in the hero, green for "Smarter"). Body copy stays #3B3F59.

4. Components (live on /style-guide/ with the real classes)

5. Spacing, radius, borders, shadows

Radius: photo 40 · slider card 32 · story / Why it Matters card 28 · Facility card, Energy Loss cards, usage card 24 · sidebar card ≈23 · report card 18 · bar tracks 16 · Facility rows 15 · quote block 0 12 12 0 · pills, buttons, icon badges 100 (full). Borders: 1px everywhere (accent @ 50% on story cards, navy @ 12% hairlines, #DCE0E9, #E1E3EF, #EBEBEB); 3px quote rule; 4px slider-subtitle rule. Shadows: none on cards. The only shadow is on bar fills: 0 3px 24px 4px rgba(13,23,88,.08).

6. Responsive rules

Sticky sidebar on short screens (≥ 1200 wide): .csd-side__sticky uses top: calc(var(--csd-head) + 8px) and max-height: calc(100vh − var(--csd-head) − 16px), with a hidden scrollbar. Sizes inside are capped with min(…, vh) so everything fits. At height ≤ 1100 the report card turns horizontal (small image beside the text); at ≤ 700 the check pills are hidden; at ≤ 560 the report image is hidden. html, body use overflow-x: clip (not hidden) so sticky keeps working. Measured: 1366×650 sidebar pinned at 96–475px.

7. Approved Hanna standards (Oct 2026)

Approved by Peter on the Hanna page (/case-studies/the-hanna-agri-sports/, commits 105d3fe → f233017). Hanna gets them through per-slug defaults (opti_cs_slug_defaults() in inc/case-studies.php). The other case studies are not changed yet. Values below are copied from css/ov-concepts.css, css/fold-preview.css, css/fb-logo-preview.css and css/case-studies.css.

7.1 Stat tiles (overview option B)

Markup: opti_cs_stat_tiles_html( $cs ) → .ov-hero › .ov-bar + .ov-b › three .ov-b__t.ov--g|b|o. CSS: css/ov-concepts.css.

Green ring fix: the savings ring is an inline SVG, not a CSS conic-gradient (the gradient rendered soft and off-colour). viewBox 0 0 28 28, r=11, stroke width 4; track #469E7E at stroke-opacity .3 (stronger than the old #E3EEE9); arc #469E7E, stroke-linecap:round, stroke-dasharray = 2πr × % / 100, rotated −90° so it starts at 12 o'clock. It sits in the same fixed 32px icon box as the ROI and loss icons, so all three tiles line up.

7.2 Energy Loss: 2×2 grid in one fold (.cs-fold-b, ≥ 1200px)

7.3 Sidebar title (bolder)

.csd-side__title: Averta CY 700, #0F1E28, letter-spacing -0.5px (size unchanged, min(clamp(19px, 1.41vw, 27px), 3.1vh)). The report text .csd-side__report .csd-side__text uses Averta CY 600 #0F1E28, so the sidebar matches the page headings.

7.4 Smarter Energy Usage stats (inline)

7.5 Facility Background card

Keep Peter's original card, row design and icons. Only the sizing is compact (css/case-studies.css): card padding 24 (28 at ≥1920), header badge 40×40 with gap 12, title 22px / 1.25 / -0.4px, divider margin 18 0, rows min-height 60, padding 10 52 10 18, radius 14, gap 10; label 13px / 600 #555967; value 16px / 700 #202231 (17 at ≥1920); row icons 22×22, right 16, vertically centred.

Client logo (Logo C): the client's logo replaces the Organization row icon. Files: images/case-studies/<slug>/<org>-logo.png (transparent PNG, ≥ 2× display size), found by opti_cs_org_logo(). CSS (css/fb-logo-preview.css): that row gets .hanna-item--logo with padding-right 120; the logo is absolute, right 14, vertically centred, height 38px, width auto.

7.6 Photos

• Always use the highest-res source. Check the Figma frame's image fills first (Figma MCP download_assets → rawImages); Hanna's arena photo was 2752×1316 in Figma vs 1024×490 in the theme.
• Export at 2× the display size for retina (Hanna story photo: 2048×704 for a ~980px slot).
• Crop out baked-in dark/black bands rather than hiding them with object-fit.
• Light sharpen only: Lanczos resize, then an unsharp mask of about radius 1, amount 40%, threshold 3. No visible halos. JPEG quality around 88, progressive.
• Naming: photo-N.jpg original, photo-N-crop.jpg band removed, photo-N-sharp.jpg high-res final.

7.7 Sticky sidebar

• html, body { overflow-x: clip !important; overflow-y: visible !important; }. Never overflow-x: hidden: it makes body a scroll container and breaks position: sticky.
• Height-based sizing: .csd-side__sticky { top: calc(var(--csd-head) + 8px); max-height: calc(100vh - var(--csd-head) - 16px); overflow-y: auto; } with a hidden scrollbar, inner sizes capped with min(clamp(…), …vh), and step-downs at height ≤ 1100 / 700 / 560 (see §6).

8. Lessons learned / tips for other pages

1. Concepts first. Always show concepts or previews (query toggles such as ?preview=… / ?fb=…, or a concept page) and get Peter's approval before applying anything live.
2. Keep his original design, colours and icons. Only adjust sizing and positioning.
3. No muted recolours. Use the brand hexes in §3 as they are, not greyed or desaturated versions.
4. Test at a laptop viewport of about 1366×650, not just 1920×1080.
5. Rebuild from the current Figma frames (file OLiQG7hifZbC5eBuGzxqhq), never from old templates.
6. Check fit within one fold where possible (e.g. the Energy Loss 2×2 grid).
7. Use the preview-toggle + per-slug-defaults pattern: each concept sits behind a toggle (preview pages are noindex); once approved, add it to opti_cs_slug_defaults() for that slug only. Then confirm the other pages' HTML is byte-identical before and after.
8. Roll out to one page first (Hanna), fine-tune it, then roll out to the rest.
9. Watch for Figma typos (e.g. "SmartSence") and fix them in the copy, not just copy them.
10. Keep Sense-style roomy spacing (§5): don't cram to fit; compact sizing only where a fold target needs it.

9. Overview cards (/case-studies/)

Approved Oct 2026. Markup: template-parts/case-study/card.php. CSS: css/ov-cards-preview.css (loaded on the overview page; body.cs-ov-cards). Figma reference: overview card node 5009:11300 (27px icon beside a 27px number on a 490px card).

Hover state (.cs-card__hover, absolute overlay filling the card, same radius). The whole card is the link.

Note: Figma has no explicit hover variant; the hover spec follows Peter's approved screenshot. Figma reuses three descriptions (Two Hills = Grande Cache, Respol = Provost, Kent = Meaford).