/** * GrainCorp Store Finder - frontend styles. * * Palette is defined once as custom properties, and every rule below reads * a colour through one of these tokens rather than a hardcoded hex value. * --gcsf-primary and --gcsf-accent are the two a site owner actually sets, * on the Settings screen ("Brand colours") - GCSF_Shortcode::render() * writes them out as an inline style on the .gcsf element itself, which * overrides the fallback values below for any theme/site that has * configured its own brand. The values here only apply if that setting is * ever missing entirely (a very old cached page, a direct API read, etc). */ .gcsf { --gcsf-primary: #1b2340; /* A lighter tint of whatever --gcsf-primary actually is, computed automatically so gradients/hovers stay on-brand even when a site sets a completely different primary colour - not a second colour a site owner has to separately keep in sync. */ --gcsf-primary-light: color-mix(in srgb, var(--gcsf-primary) 78%, white); --gcsf-accent: #d4af37; --gcsf-text: #333333; --gcsf-text-muted: #6b7280; --gcsf-border: #e2e4e9; --gcsf-card-bg: #f4f5f7; --gcsf-white: #ffffff; /* * Type scale. * * Five deliberate steps, in px so nothing inherits the theme's inflated * fluid root size. Every rule below uses one of these tokens and never a * one-off value, which is what keeps the UI visually consistent: * * xs uppercase micro-labels, badges, buttons, distance, hours meta * sm secondary body text: addresses, counters, radio labels, hours * md primary interactive text: search field, filter headings, actions * lg store names * xl the results section heading */ --gcsf-fs-xs: 13px; --gcsf-fs-sm: 14px; --gcsf-fs-md: 15px; --gcsf-fs-lg: 17px; --gcsf-fs-xl: 21px; --gcsf-fs-icon: 19px; box-sizing: border-box; color: var(--gcsf-text); width: 100%; /* Keep the theme's typeface; control only the sizing. */ font-family: inherit; font-size: var(--gcsf-fs-md); line-height: 1.5; /* * Breathing room below the whole locator, so whatever the theme places * next (a footer, another block) doesn't sit flush against the map - * a popup card that runs to the very bottom edge of the map (its * "bottom crop") would otherwise look like it collides with that next * section rather than simply being clipped by the map's own edge. */ margin-bottom: 40px; } .gcsf *, .gcsf *::before, .gcsf *::after { box-sizing: inherit; } /* * Form controls do not inherit font-family by default, so they would fall back * to the browser UI font and look foreign next to the theme's type. * * Only font-family is reset here. Setting font-size in this rule would give it * higher specificity than the component rules below (.gcsf button beats * .gcsf-card__stv), so a