/** * ============================================================ * BIDCORP GROUP — DESIGN TOKENS * Extracted from Adobe XD design system (March 2026) * ============================================================ * * Source: XD CSS export + visual analysis of prototype screens * Usage: Import this file first in your project stylesheet. * All values are used via var() references in style.css * ============================================================ */ :root { /* ---------------------------------------------------------- * COLOUR PALETTE * Primary brand colours extracted from XD colour styles * ---------------------------------------------------------- */ /* Core brand — navy / dark purple (primary brand colour) */ --color-brand-primary: #1F1346; /* Deep navy — headlines, nav bg, footer */ --color-brand-primary-alt: #110541; /* Deeper variant — hero overlays */ --color-brand-secondary: #184A87; /* Mid blue — accents, links, CTA hover */ --color-brand-dark-grey: #262626; /* Dark grey — body text, secondary text */ /* Accent colours — used for section highlights, data viz, tags */ --color-accent-green: #79BF43; /* Bidcorp green — primary CTA buttons */ --color-accent-teal: #93C9BB; /* Teal — ESG/sustainability sections */ --color-accent-blue: #8AB4D1; /* Sky blue — investor section accents */ --color-accent-amber: #E2A44A; /* Amber — warnings, highlights */ --color-accent-coral: #F18E82; /* Coral/salmon — ESG social pillar */ --color-accent-yellow: #F2CE66; /* Yellow — data callouts, badges */ /* Neutrals */ --color-white: #FFFFFF; --color-off-white: #F2F2F2; /* Page background, section alternates */ --color-grey-light: #BBBDBF; /* Borders, dividers, disabled states */ --color-grey-dark: #4B4B4B; /* Body text, secondary text */ /* Semantic aliases */ --color-text-primary: #1F1346; /* All primary text */ --color-text-body: #4B4B4B; /* Body copy */ --color-text-muted: #BBBDBF; /* Captions, labels, metadata */ --color-text-inverse: #FFFFFF; /* Text on dark backgrounds */ --color-text-link: #184A87; /* Hyperlinks */ --color-text-link-hover: #79BF43; /* Link hover state */ --color-bg-page: #F2F2F2; /* Default page background */ --color-bg-white: #FFFFFF; /* Card / panel backgrounds */ --color-bg-dark: #1F1346; /* Dark section backgrounds (footer, hero) */ --color-bg-dark-alt: #110541; /* Deeper dark (hero overlay) */ --color-bg-section-alt: #F2F2F2; /* Alternating section bg */ --color-border: #BBBDBF; /* Default border colour */ --color-border-light: #E8E8E8; /* Subtle card borders */ --color-border-navy: #110541; /* Navy border for investor tiles */ /* Section-specific colour associations (from design screens) */ --color-section-investors: #184A87; /* Investor centre — blue */ --color-section-esg: #93C9BB; /* ESG/Sustainability — teal */ --color-section-news: #79BF43; /* News & Stories — green */ --color-section-careers: #E2A44A; /* Careers — amber */ /* ---------------------------------------------------------- * TYPOGRAPHY — FONT FAMILIES * Two fonts: Comfortaa (display/headings) + Lato (body/UI) * Both available on Google Fonts * ---------------------------------------------------------- */ --font-display: 'Comfortaa', cursive; /* H1–H4, hero headlines, brand text */ --font-body: 'Lato', sans-serif; /* Body copy, UI labels, nav, buttons */ /* Google Fonts import string (add to HTML ): * */ /* ---------------------------------------------------------- * TYPOGRAPHY — TYPE SCALE * Scale extracted directly from XD character styles * ---------------------------------------------------------- */ --text-xs: 0.6875rem; /* Small labels, captions, legal — 11px */ --text-sm: 0.8125rem; /* Body copy small, nav items, metadata — 13px */ --text-base: 1rem; /* Default body copy — 16px */ --text-md: 1.1875rem; /* Lead paragraphs, card intro text — 19px */ --text-lg: 1.4375rem; /* Section subheadings — 23px */ --text-xl: clamp(1.375rem, 2vw, 1.55rem); /* H4 headings — 22–28px */ --text-2xl: clamp(1.5rem, 2.5vw, 2.0625rem); /* H3 headings — 24–33px */ --text-3xl: clamp(1.75rem, 3vw, 2.3rem); /* H2 section headings — 28–40px */ --text-4xl: clamp(2rem, 3.5vw, 3rem); /* H1 page headings — 32–48px */ --text-5xl: clamp(2.5rem, 5vw, 3.875rem); /* Hero display headings — 40–62px */ --text-6xl: clamp(3.75rem, 6vw, 5rem); /* Optional — for larger hero text if needed */ /* ---------------------------------------------------------- * TYPOGRAPHY — LINE HEIGHTS * Matched to XD line-spacing values * ---------------------------------------------------------- */ --leading-xs: 1.18; /* For xs text — tight */ --leading-sm: 1.23; /* For sm text */ --leading-base: 1.625; /* For body copy — generous, readable */ --leading-md: 1.3; /* For md lead text */ --leading-lg: 1.4; /* For lg subheadings */ --leading-xl: 1.25; /* For xl headings */ --leading-2xl: 1.3; /* For 2xl headings */ --leading-3xl: 1.2; /* For 3xl headings */ --leading-4xl: 1.15; /* For 4xl page headings */ --leading-5xl: 1.1; /* For 5xl hero display */ --leading-6xl: 1.0; /* For 6xl max hero display */ /* ---------------------------------------------------------- * TYPOGRAPHY — FONT WEIGHTS * ---------------------------------------------------------- */ --weight-light: 300; --weight-normal: 400; --weight-semibold: 600; --weight-bold: 700; /* ---------------------------------------------------------- * SPACING SCALE * Based on layout proportions observed in prototype screens * ---------------------------------------------------------- */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Section vertical padding (desktop) */ --section-padding-y: 80px; --section-padding-y-sm: 48px; /* Container max-widths */ --container-max: 1640px; --container-content: 900px; /* Narrower for editorial content */ --container-padding-x: clamp(1.5rem, 5vw, 6rem); /* Fluid horizontal padding */ /* ---------------------------------------------------------- * BORDER RADIUS * Clean, modern — minimal rounding observed in design * ---------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* Pills, tags */ /* ---------------------------------------------------------- * SHADOWS * Subtle elevation — design uses clean, card-based surfaces * ---------------------------------------------------------- */ --shadow-sm: 0 1px 4px rgba(17, 5, 65, 0.06); --shadow-md: 0 4px 16px rgba(17, 5, 65, 0.10); --shadow-lg: 0 8px 32px rgba(17, 5, 65, 0.14); --shadow-card: 0 2px 12px rgba(17, 5, 65, 0.08); /* ---------------------------------------------------------- * TRANSITIONS * ---------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ---------------------------------------------------------- * LAYOUT — GRID & NAV * Observed from homepage and interior page layouts * ---------------------------------------------------------- */ --nav-height: 68px; /* Sticky header height */ --nav-bg: #FFFFFF; --nav-bg-scroll: #FFFFFF; /* Stays white on scroll */ --nav-border: #E8E8E8; --grid-columns: 12; --grid-gap: 24px; /* ---------------------------------------------------------- * COMPONENT TOKENS — BUTTONS * Primary (green CTA), Secondary (outline), Ghost * ---------------------------------------------------------- */ /* Primary button — green, used for main CTAs */ --btn-primary-bg: #79BF43; --btn-primary-bg-hover: #65a835; --btn-primary-text: #FFFFFF; --btn-primary-radius: var(--radius-sm); /* Pill shape observed in XD */ /* Secondary button — dark navy outline */ --btn-secondary-bg: transparent; --btn-secondary-border: #1F1346; --btn-secondary-text: #1F1346; --btn-secondary-hover-bg: #1F1346; --btn-secondary-hover-text: #FFFFFF; /* Icon CTA — circular dark button with arrow (seen in prototype) */ --btn-icon-bg: #1F1346; --btn-icon-bg-hover: #184A87; --btn-icon-size: 40px; /* ---------------------------------------------------------- * COMPONENT TOKENS — CARDS * ---------------------------------------------------------- */ --card-bg: #FFFFFF; --card-border: #E8E8E8; --card-radius: var(--radius-lg); --card-shadow: var(--shadow-card); --card-padding: var(--space-8); /* ---------------------------------------------------------- * COMPONENT TOKENS — NAVIGATION * ---------------------------------------------------------- */ --nav-link-color: #1F1346; --nav-link-hover: #184A87; --nav-link-active: #79BF43; --nav-link-size: var(--text-sm); --nav-link-weight: var(--weight-bold); --nav-link-font: var(--font-body); /* ---------------------------------------------------------- * COMPONENT TOKENS — SECTION TABS * Divisional tabs (Australasia / UK / Europe / Emerging Markets) * Observed as horizontal tab bar with navy active state * ---------------------------------------------------------- */ --tab-bg: #FFFFFF; --tab-active-bg: #1F1346; --tab-active-text: #FFFFFF; --tab-inactive-text: #4B4B4B; --tab-border: #1F1346; /* ---------------------------------------------------------- * COMPONENT TOKENS — FOOTER * Dark navy footer with white text, email signup * ---------------------------------------------------------- */ --footer-bg: #1F1346; --footer-text: rgba(255, 255, 255, 0.75); --footer-heading: #FFFFFF; --footer-link: rgba(255, 255, 255, 0.65); --footer-link-hover: #79BF43; --footer-border: rgba(255, 255, 255, 0.12); /* ---------------------------------------------------------- * COMPONENT TOKENS — STAT / METRIC CALLOUTS * Large financial figures (R18.7bn, 26,000 etc.) * Observed in divisional tabs section * ---------------------------------------------------------- */ --stat-number-font: var(--font-body); --stat-number-weight: var(--weight-bold); --stat-number-size: var(--text-3xl); --stat-label-size: var(--text-sm); --stat-label-color: var(--color-text-body); /* ---------------------------------------------------------- * COMPONENT TOKENS — PUBLICATION / REPORT CARDS * Cards used in "Key publications" section * ---------------------------------------------------------- */ --pub-card-bg: #FFFFFF; --pub-card-radius: var(--radius-lg); --pub-card-shadow: var(--shadow-md); --pub-card-img-radius: var(--radius-md); /* ---------------------------------------------------------- * COMPONENT TOKENS — INVESTOR CENTRE GRID * Dark navy tiled grid: Investor calendar, Share price, etc. * ---------------------------------------------------------- */ --investor-tile-bg: #1F1346; --investor-tile-text: #FFFFFF; --investor-tile-border: rgba(255, 255, 255, 0.1); --investor-tile-accent: #79BF43; /* ---------------------------------------------------------- * Z-INDEX SCALE * ---------------------------------------------------------- */ --z-base: 0; --z-above: 10; --z-nav: 100; --z-overlay: 200; --z-modal: 300; --z-tipoffs: 400; /* Tip-offs button — always on top */ /* ---------------------------------------------------------- * LAYOUT — HEADER * ---------------------------------------------------------- */ --ticker-height: 36px; /* Share price ticker bar — sits above the main header */ --header-height: var(--nav-height); /* eyebrow removed — header is nav bar only */ /* ---------------------------------------------------------- * COLOURS — ADDITIONAL * ---------------------------------------------------------- */ /* Light blue tint used in tip-offs country item hover */ --color-blue-light: #e8f2fc; /* ---------------------------------------------------------- * OVERLAY BACKGROUNDS * Pre-mixed rgba values — CSS custom properties cannot be used * inside rgba(), so these provide token-accessible overlay tints * based on --color-brand-primary-alt (#110541 = rgb 17, 5, 65) * ---------------------------------------------------------- */ --overlay-dark-70: rgba(17, 5, 65, 0.70); /* Modal backdrop */ --overlay-dark-95: rgba(17, 5, 65, 0.95); /* Search overlay */ --overlay-dark-90: rgba(17, 5, 65, 0.90); /* Hero overlay start */ --overlay-dark-65: rgba(17, 5, 65, 0.65); /* Hero overlay mid */ /* ── REGIONAL DIVISION COLOURS ───────────────────────────────────── Used for division-specific UI: timeline, globe, region cards, stat highlights, and any other division-coded elements. ──────────────────────────────────────────────────────────────── */ --color-division-australasia: #004278; --color-division-uk: #7BBF44; --color-division-europe: #2189AA; --color-division-emerging: #FD644E; }