/* ========================================================= PP framework — sitewide non-block rules. THIS FILE CARRIES NO DESIGN. The starter is deliberately unstyled: layout, typography and colour come from theme.json, and the visual design comes from the build's own Figma / Claude Design work. Only two things belong here: 1. The brand variable surface, so per-block CSS has one place to read from. Values mirror theme.json. 2. The handful of core block-library defaults we have to restore, because inc/setup.php dequeues `wp-block-library` and those defaults then vanish. What must NOT go here: per-page styling, section rhythm, decorative treatments, bullet styles. The LCT original reached 922 lines because Contact, Clients, Accommodation and Airport page rules were added to it, along with a client-specific readable-measure cap. Page furniture belongs in the block that renders it; brand design belongs in the build's own stylesheet. ========================================================= */ /* --------------------------------------------------------- Brand variables. Mirrors theme.json's palette. Editors pick by preset name in the sidebar; block CSS reads these. Rebranding a site means changing these nine values and the matching palette in theme.json, and nothing else. IBIA brand values, set 2026-08-18 from the Figma design (reference-ibia-figma): navy, light green, turquoise, blue grey. The -rgb triples exist so a colour can be used at partial alpha — rgb(var(--fw-primary-rgb) / 0.85) — and stay swappable. --------------------------------------------------------- */ :root { --fw-primary: #013563; --fw-secondary: #A3C362; --fw-accent: #9ADBCA; --fw-link: #013563; --fw-highlight: #949FB3; --fw-grey: #767676; --fw-light-grey: #D9D9D9; --fw-bg-grey: #F2F2F2; --fw-white: #FFFFFF; --fw-primary-rgb: 1 53 99; --fw-secondary-rgb: 163 195 98; --fw-accent-rgb: 154 219 202; --fw-link-rgb: 1 53 99; --fw-light-grey-rgb: 217 217 217; } /* --------------------------------------------------------- Restored core defaults. `wp-block-library` is dequeued, so these stop existing. Each one is here because something breaks without it, not because it looks better. --------------------------------------------------------- */ /* Alignment classes core would otherwise provide. */ .has-text-align-left { text-align: left; } .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } /* Core resets these on the block-library stylesheet; without it the browser default indent applies and list markers sit outside the content column. */ .entry-content ul, .entry-content ol { padding-left: 1.25em; } .entry-content ul { list-style: disc; } .entry-content ol { list-style: decimal; } /* Core's `* { font: inherit }` reset removes these; put them back so bold and italic in editor content still render as bold and italic. */ strong, b { font-weight: bolder; } em, i { font-style: italic; } /* Images should never overflow their container. */ img, svg, video { max-width: 100%; height: auto; } /* Horizontal-overflow safety net. Stops one wide element forcing the whole page to scroll sideways on mobile. */ html, body { overflow-x: clip; } /* Figures carry a browser default margin that fights block spacing. */ figure { margin: 0; } /* ========================================================= IBIA design tokens. Source: documents/ibia-tokens.css in Claude Ops, generated by Monica on 2026-08-17 from Figma lHuQW59hag21IJVb9Xt2tD page 0:1, with the reasoning in ibia-design-handover.md. Why this sits BESIDE the framework block above rather than replacing it: - The 28 framework blocks read --fw-primary, --fw-bg-grey and the rest of that nine-name surface. Renaming them would break every block. - The two sets use different rgb triple formats. The framework's are space separated for rgb(var(--x) / a); IBIA's are comma separated for rgba(var(--x), a). Each is correct for its own callers, so both are kept. The framework block above carries the SAME five brand values under its own names. If a colour changes, change it in both places or the two drift apart. Values marked NOT IN FIGMA VARIABLES were read off layers. Values marked PROVISIONAL are not in the design at all and need a decision from the designer. ========================================================= */ :root { /* --- Brand colour (published Figma variables) --------- */ --fw-navy: #013563; --fw-navy-rgb: 1, 53, 99; --fw-green: #A3C362; /* Figma "Light Green" — button fills, outline borders */ --fw-green-rgb: 163, 195, 98; --fw-green-dark: #658138; /* Figma "Green" — NAV LINK HOVER. Not used on the Homepage, so a Homepage-scoped export misses it. */ --fw-green-dark-rgb: 101, 129, 56; --fw-blue-grey: #949FB3; /* Figma has this 4x as Blue Grey / 3 / 4 / 5 — one value */ --fw-blue-grey-rgb: 148, 159, 179; --fw-turquoise: #9ADBCA; /* bound on the events component 787:2846 — confirm its role */ --fw-turquoise-rgb: 154, 219, 202; /* --- UI colour (NOT IN FIGMA VARIABLES) --------------- */ --fw-control-track: #F5F7FA; /* segmented control background */ --fw-control-border: #E3E7EE; /* segmented control border */ --fw-divider: rgba(var(--fw-blue-grey-rgb), 0.4); --fw-list-active: rgba(var(--fw-blue-grey-rgb), 0.6); --fw-shadow-colour: rgba(0, 0, 0, 0.3); /* --- Type --------------------------------------------- */ /* Ubuntu, self-hosted in assets/fonts. 300/400/500/700. No italics. */ --fw-font: 'Ubuntu', system-ui, -apple-system, sans-serif; --fw-weight-light: 300; --fw-weight-regular: 400; --fw-weight-medium: 500; --fw-weight-bold: 700; /* H1/H2 line height is UNRESOLVED: the Figma variable says lineHeight 100 (= 100%), but the design renders as `normal` (~1.2 for Ubuntu). Set to 1 to match the token; confirm against the screenshot with the designer. */ --fw-h1-size: 52px; --fw-h1-weight: var(--fw-weight-bold); --fw-h1-line: 1; /* SEE NOTE ABOVE */ --fw-h2-size: 30px; --fw-h2-weight: var(--fw-weight-medium); --fw-h2-line: 1; /* SEE NOTE ABOVE */ --fw-h3-size: 24px; /* PROVISIONAL — no H3 exists in the design */ --fw-h3-weight: var(--fw-weight-medium); --fw-h3-line: 1.25; /* PROVISIONAL */ --fw-h4-size: 20px; --fw-h4-weight: var(--fw-weight-medium); --fw-h4-line: 30px; --fw-body-size: 16px; --fw-body-weight: var(--fw-weight-light); --fw-body-line: 28px; --fw-lead-size: 18px; /* NOT IN FIGMA VARIABLES — news category items */ --fw-lead-weight: var(--fw-weight-light); --fw-lead-line: 28px; --fw-small-size: 14px; --fw-small-weight: var(--fw-weight-regular); --fw-small-line: 24px; --fw-para-gap: 10px; /* --- Layout (measured from frame geometry) ------------ */ --fw-page: 1440px; --fw-container: 1400px; /* primary — 32 sections use it */ --fw-container-narrow: 1320px; /* prose / split — 9 sections use it */ --fw-gutter: 40px; --fw-gutter-wide: 80px; --fw-gutter-tight: 16px; --fw-col-2: 680px; --fw-col-3: 440px; --fw-col-4: 320px; /* most common width in the design, 117 uses */ --fw-col-5: 248px; --fw-col-6: 200px; --fw-split-media: 680px; /* 680 + 80 gap + 560 = 1320 */ --fw-split-text: 560px; /* --- Spacing scale ------------------------------------ */ --fw-space-xs: 8px; --fw-space-sm: 16px; --fw-space-md: 20px; --fw-space-lg: 30px; /* stack gap inside a content block */ --fw-space-xl: 40px; --fw-space-2xl: 60px; --fw-space-3xl: 80px; /* section to section */ /* --- Radius (NOT IN FIGMA VARIABLES) ------------------ */ --fw-radius: 4px; --fw-radius-control: 8px; /* segmented control track only */ --fw-radius-accent: 30px; /* brand accent, TOP-RIGHT CORNER ONLY */ /* About section feature image: border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius); Confirm whether this applies to all feature images or only that one. */ /* --- Shadow ------------------------------------------- */ --fw-shadow-card: 2px 2px 12px 0 var(--fw-shadow-colour); --fw-shadow-header: 2px 2px 6px 0 var(--fw-shadow-colour); /* NOT IN FIGMA VARIABLES */ /* --- Component metrics (NOT IN FIGMA VARIABLES) ------- */ --fw-header-height: 96px; --fw-footer-height: 362px; /* design height; not fixed in build */ --fw-nav-gap: 24px; --fw-nav-caret-gap: 6px; --fw-nav-caret-w: 9px; --fw-nav-caret-h: 4px; --fw-nav-search-gap: 10px; --fw-nav-search-icon: 14px; --fw-nav-colour: var(--fw-navy); --fw-nav-colour-hover: var(--fw-green-dark); --fw-nav-colour-open: var(--fw-green-dark); --fw-nav-open-pad-y: 10px; /* Dropdown panels (header set 178:69). Flat white, flush under the header. No radius, no shadow, no border — QUERY: nothing separates the panel from a white page behind it. Width fits content per menu, left-aligned. */ --fw-dropdown-bg: var(--fw-white); --fw-dropdown-pad-x: 18px; --fw-dropdown-pad-top: 16px; --fw-dropdown-pad-btm: 19px; --fw-dropdown-item-gap: 40px; /* Buttons: TWO colours x TWO resting states, hover inverts fill/outline. That covers all 16 Figma variants. */ --fw-btn-pad-y: 14px; --fw-btn-pad-x: 20px; --fw-btn-border: 1px; /* Compact — header and member area only. The design uses three different weights across these at one size; confirm one before building. */ --fw-btn-pad-y-compact: 8px; --fw-btn-pad-x-compact: 10px; --fw-icon-social: 20px; --fw-icon-social-gap: 16px; }