Website Design & Technology

Design system

The visual language is built on a small set of design tokens — a navy and silver palette drawn from the RCG crest, a warm accent reserved for calls to action, a serif display face paired with a sans-serif body face, and a square-cornered geometry with offset shadows. Because every colour, size and spacing step is a CSS custom property, the palette can be re-themed from the admin panel without rewriting stylesheets.

Responsive layout

Layouts use CSS grid and flexbox with fluid type scales, so headings and spacing interpolate smoothly between a small phone and a wide desktop rather than jumping at fixed breakpoints. Wide content such as tables and program grids scrolls inside its own container so the page body never scrolls sideways.

Navigation

The mobile menu is built to be reliable rather than clever: it opens and closes from the hamburger and the close control, closes on an outside click, on Escape, and after navigation, traps focus while open, locks background scroll, and restores focus to the trigger on close.

Content management

Content is stored relationally, with structure and ordering separated from words. Every translatable entity has its own translation table keyed by language, and a missing translation falls back to the default language at query time — so a partially translated site still renders complete pages.

Media pipeline

Uploads are checked by real MIME type rather than file extension, decoded to confirm they are readable images, and then used to generate a WebP twin and narrower widths. Templates serve these through a picture element with lazy loading and explicit dimensions, which keeps layout shift low.

Accessibility

The markup is semantic, headings run in order, form controls carry real labels, focus states are visible, colour contrast is checked against the palette, and animation is suppressed for visitors who prefer reduced motion.

Built by Instacode Solutions.