/* ========================================================= 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 — applied 2026-08-20 from the design build spec (documents/ibia-tokens.css in Claude Ops). This block sits BESIDE the framework block above, not in place of it: - The 28 framework blocks read --fw-primary, --fw-bg-grey and that nine-name surface. Renaming them breaks every block. - The rgb triples are in different formats. The framework's are space separated for rgb(var(--x) / a); IBIA's comma separated for rgba(var(--x), a). Each is right for its own callers. The same brand values therefore exist under two sets of names. A colour change has to be made in both. ========================================================= */ :root { /* === COLOUR ========================================================== */ /* All five published colour styles, carried through in full — including ones the current design barely uses, so the option exists later. All five belong in the theme.json palette. */ --fw-navy: #013563; /* "Navy Blue" — most text, primary fill, borders */ --fw-navy-rgb: 1, 53, 99; --fw-green: #A3C362; /* "Light Green" — button fills, outline borders, ACTIVE TAB */ --fw-green-rgb: 163, 195, 98; --fw-green-dark: #658138; /* "Green" — nav link hover + open. NOT the same as --fw-green. Absent from a Homepage-scoped export */ --fw-green-dark-rgb: 101, 129, 56; --fw-turquoise: #9ADBCA; /* "Turquoise" — FEATURED EVENTS */ --fw-turquoise-rgb: 154, 219, 202; --fw-blue-grey: #949FB3; /* "Blue Grey" — list borders, ACTIVE FILTER. Figma also has Blue Grey 3/4/5, same hex */ --fw-blue-grey-rgb: 148, 159, 179; /* Semantic aliases — the two selected-state colours are deliberately different. Tabs are green, filters are blue. Do not unify them. */ --fw-tab-active: var(--fw-green); --fw-filter-active: var(--fw-blue-grey); --fw-featured: var(--fw-turquoise); /* UI colour — NOT FIGMA STYLES */ --fw-white: #FFFFFF; /* page, card, header, footer, dropdown surface */ --fw-control-track: #F5F7FA; /* segmented control background */ --fw-control-border: #E3E7EE; /* segmented control border */ --fw-divider: rgba(var(--fw-blue-grey-rgb), 0.4); /* list item bottom border */ --fw-list-active: rgba(var(--fw-blue-grey-rgb), 0.6); /* list item active fill */ --fw-shadow-colour: rgba(0, 0, 0, 0.3); /* PP RULE — the palette has no error colour and forms need one. Swap if the client supplies a brand value. */ --fw-error: #B4321E; --fw-error-rgb: 180, 50, 30; --fw-success: var(--fw-green-dark); /* === TYPE ============================================================ */ /* Ubuntu, self-hosted. Weights: 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 and H3 all sit on a 1.15 ratio. The px values below are exact. */ --fw-h1-size: 52px; --fw-h1-weight: var(--fw-weight-bold); --fw-h1-line: 59.7px; --fw-h2-size: 30px; --fw-h2-weight: var(--fw-weight-medium); --fw-h2-line: 34.5px; --fw-h3-size: 24px; --fw-h3-weight: var(--fw-weight-medium); --fw-h3-line: 27.6px; --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 A FIGMA STYLE — 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; /* between

inside one body block */ /* There is no H5 style and nothing in the design needs one. */ /* === LAYOUT ========================================================== */ /* NOT FIGMA STYLES — measured from frame geometry across the whole file */ --fw-page: 1440px; --fw-container: 1400px; /* primary — 20px side margin */ --fw-container-narrow: 1320px; /* prose / split — 60px side margin */ --fw-gutter: 40px; /* standard column gap */ --fw-gutter-wide: 80px; /* split section gap */ --fw-gutter-tight: 16px; /* icon to label */ /* Column widths for the 1400 container at a 40px gutter */ --fw-col-2: 680px; --fw-col-3: 440px; --fw-col-4: 320px; /* most common width in the design */ --fw-col-5: 248px; --fw-col-6: 200px; --fw-split-media: 680px; /* split: 680 + 80 gap + 560 = 1320 */ --fw-split-text: 560px; /* theme.json ships with the framework's 1200px container. Change it to 1400 / 1320 or nothing will match the design widths. */ /* === SPACING ========================================================= */ /* The design's vertical spacing is inconsistent (17/18/21/26/31/33/51/58/ 66 all appear once or twice). Normalise to this scale. */ --fw-space-xs: 8px; /* eyebrow to heading */ --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 FIGMA STYLES */ --fw-radius: 4px; /* base — buttons, controls, pop-ups */ --fw-radius-control: 8px; /* segmented control track only */ --fw-radius-accent: 30px; /* brand accent, TOP-RIGHT CORNER ONLY */ --fw-radius-band: 0; /* full-bleed background bands — square */ /* The inner-page title band: navy fading to transparent, left to right. 115px tall (148px on IMO). NOT a flat colour. */ --fw-band-gradient: linear-gradient(to right, #013563, rgba(1, 53, 99, 0)); /* === SHADOW ========================================================== */ --fw-shadow-card: 2px 2px 12px 0 var(--fw-shadow-colour); --fw-shadow-header: 2px 2px 6px 0 var(--fw-shadow-colour); /* NOT A FIGMA STYLE */ /* === COMPONENTS ====================================================== */ /* NOT FIGMA STYLES */ --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 — flush under the header, width fits content per menu, left-aligned to their nav item */ --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. The Figma set (3:63) has 16 variants = 8 default/hover pairs. It is TWO colours x TWO resting states, and hover inverts fill <-> outline. Build it that way, not as 16 classes: .btn--navy navy fill, white text .btn--navy.is-outline white fill, 1px navy border, navy text .btn--green light-green fill, navy text .btn--green.is-outline white fill, 1px light-green border, navy text ...and :hover swaps each to the other resting state. All 16 variants are Ubuntu Medium 16/28. */ --fw-btn-pad-y: 14px; --fw-btn-pad-x: 20px; --fw-btn-border: 1px; --fw-btn-pad-y-compact: 8px; /* header + member area only */ --fw-btn-pad-x-compact: 10px; --fw-icon-social: 20px; --fw-icon-social-gap: 16px; /* === PP RULES ======================================================== */ /* Breakpoints */ --fw-bp-wide: 1440px; --fw-bp-desktop: 1200px; --fw-bp-nav: 1100px; /* below this the nav cannot fit — burger */ --fw-bp-tablet: 768px; --fw-bp-mobile: 480px; /* Focus ring. :focus-visible only, so mouse users never see it. Navy on light surfaces; light green on navy/dark fills, where navy would be invisible. */ --fw-focus-width: 2px; --fw-focus-offset: 2px; --fw-focus-colour: var(--fw-navy); --fw-focus-colour-on-dark: var(--fw-green); /* Disabled. Opacity rather than a fixed grey, so one rule covers all four button styles. */ --fw-disabled-opacity: 0.45; /* Form fields. The design's footer inputs are 29px tall with square corners; 29px is below the 44px minimum touch target and square corners contradict the 4px used on every other control. Built to these instead. */ --fw-input-height: 48px; --fw-input-pad-x: 16px; --fw-input-pad-y: 12px; --fw-input-border: 1px; --fw-input-radius: var(--fw-radius); --fw-input-border-colour: var(--fw-navy); --fw-input-border-focus: var(--fw-navy); --fw-input-border-error: var(--fw-error); --fw-checkbox-size: 16px; /* matches the Figma Check Box component */ } /* --------------------------------------------------------------------------- The brand accent 4px on three corners, 30px on the top right. The signature shape of the site, used widely rather than only where the design happens to show it. Apply to: all imagery, at any size every card and box Do not apply: icon blocks — plain 4px full-bleed background bands — no radius at all A modifier class, never a value retyped per block. "Full-bleed band" is a narrow category: the coloured sections that span the entire 1440px viewport width, edge to edge. A card that fills the 1400px container is NOT one — it sits inside the container and gets the accent like any other card. --------------------------------------------------------------------------- */ .fw-accent { border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius); } .fw-band { border-radius: var(--fw-radius-band); /* square — nothing to sit against */ } .fw-band--title { background: var(--fw-band-gradient); } /* --------------------------------------------------------------------------- Dropdown shadow — no shadow on the top edge A 12px blur spills about 6px in every direction, upward included, and the 2px y-offset does not clear it — so tuning the offset will never remove the top-edge shadow, and shrinking the blur would stop matching the design. Keep the shadow and clip everything above the panel's top edge. `inset(0 ...)` cuts exactly at the top; the negative values let the shadow spill on the other three sides. --------------------------------------------------------------------------- */ .fw-dropdown { background: var(--fw-dropdown-bg); box-shadow: var(--fw-shadow-card); clip-path: inset(0 -20px -20px -20px); }