/** * Template Name: HeroBiz * File: variables.css * Description: Easily customize colors, typography, and other repetitive properties used in the template main stylesheet file main.css * * Template URL: https://bootstrapmade.com/herobiz-bootstrap-business-template/ * Author: BootstrapMade.com * License: https://bootstrapmade.com/license/ * * Contents: * 1. HeroBiz template variables * 2. Override default Bootstrap variables * 3. Set color and background class names * * Learn more about CSS variables at https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */ /*-------------------------------------------------------------- # 1. HeroBiz template variables --------------------------------------------------------------*/ :root { /* ── Font ─────────────────────────────────────────────────────────────── ONE family site-wide. --font-default is the only font variable there is. --font-primary (was Source Sans Pro) and --font-secondary (was Poppins) are gone entirely: all 564 references across 39 files were rewritten to --font-default, including 13 in jdjapambe/ — the admin panel never defined these itself but does load this file, so deleting them without rewriting those would have silently dropped the admin's fonts to whatever it inherits. Do not reintroduce a second font variable. Each additional family is a fresh set of woff2 downloads on the critical path; this request went from 28 variants to 3 by removing the other two families. The generic `sans-serif` sitting before the emoji fonts is deliberate — it is Bootstrap 5's stack verbatim; browsers still consult later entries for glyphs the earlier ones lack, so emoji still resolve. */ --font-default: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Colors */ /* The *-rgb color names are simply the RGB converted value of the corresponding color for use in the rgba() function */ /* Default text color */ --color-default: #1a1f24; --color-default-rgb: 26, 31, 36; /* ── Brand hue: BLUE ──────────────────────────────────────────────────── The site ran on a teal/green brand (#0C6B64 and its shades) until this change. Every one of those values is kept in the comment beside its replacement, so the old scheme can be restored by moving one column of numbers back — nothing else in the codebase encodes the hue. #C2300A is a saturated mid-tone blue, NOT a navy. Two earlier passes got this wrong in opposite directions and both are worth recording: #1C3D5A matched the old teal's weight but read as almost-black, and #3576B0 was light enough but greyish and short on contrast headroom. This one is saturated rather than merely light, which is what makes it read as blue at a glance without going pale. CONTRAST IS THE CONSTRAINT HERE. Every filled bar, chip, button and metric strip on this site puts white text on --color-primary, so the colour cannot get much lighter before that text drops below WCAG AA (4.5:1). Measured: white on --color-primary = 5.45:1 (AA at every size) --color-primary on white = 5.45:1 (icons, borders, accents) --color-links on white = 6.79:1 (AA for body-size links) --color-links-hover = 8.08:1 (AAA) The saturation is what buys that headroom: at the same apparent lightness a greyer blue measures nearly a full point lower. Semi-transparent white text on a brand fill has ~0.9 of headroom here — white at .88 alpha is the floor (4.62:1), .85 already fails at 4.41:1. That is why 1index.php defines --on-brand-2 at .9 and uses it for every secondary label on a blue panel. If you lighten --color-primary further, that token has to go up with it, or drop to solid white. --color-links is deliberately NOT --color-primary. --color-primary is tuned for white-on-blue; a link is blue-on-white, where a slightly deeper value reads better against body copy without looking like a different brand. */ /* Defult links color */ --color-links: #A82A08; /* was #0C6B64 */ --color-links-hover: #9A2507; /* was #084a46 */ --color-links-rgb: 168, 42, 8; /* Primay colors */ --color-primary: #C2300A; /* was #0C6B64 */ --color-primary-light: #F3B49C; /* was #6da6a2 */ --color-primary-dark: #9A2507; /* was #084a46 */ --color-primary-rgb: 194, 48, 10; /* was 12, 107, 100 */ --color-primary-light-rgb: 243, 180, 156; /* was 109, 166, 162 */ --color-primary-dark-rgb: 154, 37, 7; /* was 8, 74, 70 */ /* ── Brand support shades ─────────────────────────────────────────────── These four existed already, but only as hex literals scattered through the page stylesheets (#56c9c1 appeared 28 times, #0a3d38 47 times, and so on) — which is exactly why recolouring the site used to mean editing sixty files. They are tokens now so the next hue change is this block alone. --accent pairs with --color-primary in the gradient rules (section heading underlines, card top rules, hover sweeps). Lighter than primary, so a gradient between the two actually reads as a gradient. NEVER put small white text on it — it is 3.0:1 and fails AA; it is for rules, dots and sweeps only. --mid the step between primary and deep, for three-stop gradients and for the middle of a numbered sequence. --deep the darkest step, for the far end of a gradient and for the hue-tinted shadows below. --tint pale fill for icon tiles, soft chips, hover backgrounds. --surface the off-white a whole section sits on, alternating with #fff so consecutive bands separate without a border. NOTE: this exact value is also hardcoded into a wave-divider data URI in 1index.php, because a custom property cannot be interpolated inside url(). Change it there too. */ --color-primary-accent: #F0703F; /* was #56c9c1 — 2.8:1, rules & dots only */ --color-primary-accent-rgb: 240, 112, 63; --color-primary-mid: #D63D10; /* 4.05:1 — fills and gradients, not text */ --color-primary-mid-rgb: 214, 61, 16; --color-primary-deep: #092044; /* was #0a3d38 */ --color-primary-deep-rgb: 9, 32, 68; --color-primary-tint: #FDEEE7; /* was #e8f8f7 */ --color-primary-tint-rgb: 253, 238, 231; --color-primary-surface: #FFF8F4; /* was #f8fffe */ /* ── Neutrals ─────────────────────────────────────────────────────────── The page CSS was writing #111 / #222 / #374151 / #444 / #555 / #666 / #888 / #aaa for what are really four roles, and #e2e8f0 / #f1f5f9 / #f8fafc for three. Named here so a heading and a caption cannot drift to different greys on different sections. */ --color-ink: #16202b; /* headings */ --color-body: #46535f; /* body copy */ --color-muted: #5f6c7b; /* captions, labels, secondary meta. Was #6b7a88 = 4.4:1 on white, just under WCAG AA (Lighthouse color-contrast); #5f6c7b = 5.4:1, same hue. Also written literally into assets/css/critical/*.css — change both together. */ --color-faint: #667380; /* eyebrow labels, disabled text. Was #93a1ad = 2.6:1 (fails WCAG AA at these 10-11px sizes); #667380 = 4.8:1, still a step lighter than --color-muted. Also literal in critical/*.css. */ --color-line: #dfe6ed; /* card and divider borders */ --color-line-soft: #eef2f6; /* list separators inside a card */ --color-surface: #f6f8fb; /* neutral panel fill */ /* ── Elevation & radius ───────────────────────────────────────────────── One ladder, so a card, a chip and a bar cannot each invent their own corner and shadow. The shadows are tinted with the brand hue rather than pure black: a neutral-black shadow on a coloured page reads as grime, a hue-matched one reads as depth. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(9, 32, 68, .10); --shadow-sm: 0 2px 10px rgba(9, 32, 68, .11); --shadow-md: 0 10px 28px rgba(9, 32, 68, .14); --shadow-lg: 0 18px 48px rgba(9, 32, 68, .20); --shadow-brand: 0 10px 30px rgba(var(--color-primary-rgb), .26); /* Secondary colors */ --color-secondary: #485664; --color-secondary-light: #8f9fae; --color-secondary-dark: #3a4753; --color-secondary-rgb: 72, 86, 100; --color-secondary-light-rgb: 143, 159, 174; --color-secondary-dark-rgb: 58, 71, 83; /* General colors */ --color-blue: #0d6efd; --color-blue-rgb: 13, 110, 253; --color-indigo: #6610f2; --color-indigo-rgb: 102, 16, 242; --color-purple: #6f42c1; --color-purple-rgb: 111, 66, 193; --color-pink: #f3268c; --color-pink-rgb: 243, 38, 140; --color-red: #df1529; /* Was "223, 21, 4" - the last digit of the blue channel was dropped, so rgba(var(--color-red-rgb), a) painted #df1504 while var(--color-red) painted #df1529. Two different reds from one token. */ --color-red-rgb: 223, 21, 41; --color-orange: #fd7e14; --color-orange-rgb: 253, 126, 20; --color-yellow: #ffc107; --color-yellow-rgb: 255, 193, 7; --color-green: #059652; --color-green-rgb: 5, 150, 82; --color-teal: #20c997; --color-teal-rgb: 32, 201, 151; --color-cyan: #0dcaf0; --color-cyan-rgb: 13, 202, 240; --color-white: #ffffff; --color-white-rgb: 255, 255, 255; --color-gray: #6c757d; --color-gray-rgb: 108, 117, 125; --color-black: #000000; --color-black-rgb: 0, 0, 0; --color-mcyan: #0880e8; /* Was "58, 160, 188" - not a rounding slip, a different colour entirely (#F0703F vs the #0880e8 above it), left over from an earlier palette. */ --color-mcyan-rgb: 8, 128, 232; /*---New added---*/ --color-basic: #9A2507; /* was #084a46 */ --color-basic-rgb: 154, 37, 7; /* WhatsApp brand green, for the floating chat button (.wa-float). Not a palette colour — it belongs to WhatsApp — but it is here rather than inline so the one place that owns the brand colour is findable. -text is the darker shade for the wordmark: #25d366 on white is about 1.8:1 and unreadable as text. The header bar's WhatsApp button deliberately does NOT use these: it wears the same teal chip as every other icon there. */ --color-whatsapp: #25d366; --color-whatsapp-rgb: 37, 211, 102; --color-whatsapp-text: #1da851; } /*-------------------------------------------------------------- # 2. Override default Bootstrap variables --------------------------------------------------------------*/ :root { --bs-mcyan: var(--color-mcyan); --bs-blue: var(--color-blue); --bs-indigo: var(--color-indigo); --bs-purple: var(--color-purple); --bs-pink: var(--color-pink); --bs-red: var(--color-red); --bs-orange: var(--color-orange); --bs-yellow: var(--color-yellow); --bs-green: var(--color-green); --bs-teal: var(--color-teal); --bs-cyan: var(--color-cyan); --bs-white: var(--color-white); --bs-gray: var(--color-gray); --bs-gray-dark: #343a40; --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; --bs-primary: var(--color-blue); --bs-secondary: var(--color-blue); --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-primary-rgb: var(--color-primary-rgb); --bs-secondary-rgb: var(--color-secondary-rgb); --bs-success-rgb: 25, 135, 84; --bs-info-rgb: 13, 202, 240; --bs-warning-rgb: 255, 193, 7; --bs-danger-rgb: 220, 53, 69; --bs-light-rgb: 248, 249, 250; --bs-dark-rgb: 33, 37, 41; --bs-white-rgb: var(--color-white-rgb); --bs-black-rgb: var(--color-black-rgb); --bs-body-color-rgb: var(--color-default-rgb); --bs-body-bg-rgb: 255, 255, 255; --bs-font-sans-serif: var(--font-default); --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--font-default); --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: var(--color-default); --bs-body-bg: #fff; } /*-------------------------------------------------------------- # 3. Set color and background class names --------------------------------------------------------------*/ /* Fonts — .font-primary and .font-secondary removed. All three utility classes appear ZERO times in any markup on the site, and with a single family the two aliases could only ever have restated the inherited font. .font-default is kept as the one escape hatch for overriding something that sets a different family (Bootstrap gives code/pre/kbd the monospace stack). */ .font-default { font-family: var(--font-default) !important; } /* Text Colors */ .color-default { color: var(--color-default) !important; } .color-links { color: var(--color-links) !important; } .color-links:hover { color: var(--color-links-hover) !important; } .color-primary { color: var(--color-primary) !important; } .color-primary-light { color: var(--color-primary-light) !important; } .color-primary-dark { color: var(--color-primary-dark) !important; } .color-secondary { color: var(--color-secondary) !important; } .color-secondary-light { color: var(--color-secondary-light) !important; } .color-secondary-dark { color: var(--color-secondary-dark) !important; } .color-blue { color: var(--color-blue) !important; } .color-indigo { color: var(--color-indigo) !important; } .color-purple { color: var(--color-purple) !important; } .color-pink { color: var(--color-pink) !important; } .color-red { color: var(--color-red) !important; } .color-orange { color: var(--color-orange) !important; } .color-yellow { color: var(--color-yellow) !important; } .color-green { color: var(--color-green) !important; } .color-teal { color: var(--color-teal) !important; } .color-cyan { color: var(--color-cyan) !important; } .color-white { color: var(--color-white) !important; } .color-gray { color: var(--color-gray) !important; } .color-black { color: var(--color-black) !important; } .color-mcyan { color: var(--color-mcyan) !important; } .color-basic { color: var(--color-basic) !important; } .color-primary-accent { color: var(--color-primary-accent) !important; } .color-primary-deep { color: var(--color-primary-deep) !important; } .color-primary-mid { color: var(--color-primary-mid) !important; } .color-ink { color: var(--color-ink) !important; } .color-body { color: var(--color-body) !important; } .color-muted { color: var(--color-muted) !important; } .color-faint { color: var(--color-faint) !important; } /* Background Colors */ .bg-default { background-color: var(--color-default) !important; } .bg-primary { background-color: var(--color-primary) !important; } .bg-primary-light { background-color: var(--color-primary-light) !important; } .bg-primary-dark { background-color: var(--color-primary-dark) !important; } .bg-secondary { background-color: var(--color-secondary) !important; } .bg-secondary-light { background-color: var(--color-secondary-light) !important; } .bg-secondary-dark { background-color: var(--color-secondary-dark) !important; } .bg-blue { background-color: var(--color-blue) !important; } .bg-indigo { background-color: var(--color-indigo) !important; } .bg-purple { background-color: var(--color-purple) !important; } .bg-pink { background-color: var(--color-pink) !important; } .bg-red { background-color: var(--color-red) !important; } .bg-orange { background-color: var(--color-orange) !important; } .bg-yellow { background-color: var(--color-yellow) !important; } .bg-green { background-color: var(--color-green) !important; } .bg-teal { background-color: var(--color-teal) !important; } .bg-cyan { background-color: var(--color-cyan) !important; } .bg-white { background-color: var(--color-white) !important; } .bg-gray { background-color: var(--color-gray) !important; } .bg-black { background-color: var(--color-black) !important; } .bg-primary-accent { background-color: var(--color-primary-accent) !important; } .bg-primary-deep { background-color: var(--color-primary-deep) !important; } .bg-primary-mid { background-color: var(--color-primary-mid) !important; } .bg-primary-tint { background-color: var(--color-primary-tint) !important; } .bg-primary-surface { background-color: var(--color-primary-surface) !important; } .bg-surface { background-color: var(--color-surface) !important; }