/* ============================================================
aziBase.css — Azimuth Consultancy Design System
Version 2.0
TOKEN ARCHITECTURE
─────────────────────────────────────────────────────────
All visual decisions live here as CSS custom properties.
Every other stylesheet consumes these tokens — never
raw hex values. To retheme the entire site, change
values in this file only.
LOAD ORDER
─────────────────────────────────────────────────────────
1. bootstrap.css (grid / reset)
2. aziBase.css ← this file
3. aziNavBar.css
4. aziFooter.css
5. aziHero.css
6. aziLandingPage.css
7. aziPageLayouts.css
8. aziProductPages.css
9. aziLogin.css
10. aziInputs.css
11. aziPortal.css
============================================================ */
/* ============================================================
1. COLOUR FOUNDATIONS
Raw named colours — referenced only inside this block.
Nothing outside :root should use these names.
============================================================ */
:root {
/* ── Neutrals ─────────────────────────────────────────── */
--white: #ffffff;
--black: #000000;
--gray-50: #f9f9f9;
--gray-100: #f5f5f5;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
/* ── Navy family (dark backgrounds) ──────────────────── */
--_navy: #071828; /* navbar, footer, darkest hero */
--_navy-mid: #0B2540; /* hero gradient mid, hw card hdr */
--_navy-hero: #0D2E50; /* pages hero background */
/* ── Primary teal (interactive, software, links) ─────── */
--_teal: #028CC5;
--_teal-h: #0270A0; /* hover state */
--_teal-bg: #E0F4FC; /* tints, icon backgrounds */
--_teal-lt: #7DCFEE; /* hero text accent, stat numbers */
/* ── Secondary teal (hardware differentiation) ───────── */
--_hw: #349E8C;
--_hw-h: #277A6C; /* hover state */
--_hw-bg: #E0F5F0; /* tints, icon backgrounds */
--_hw-lt: #7DD4C4; /* hero accent on hw pages */
/* ── Status colours ──────────────────────────────────── */
--_green: #1A7F4B; /* success / active / upgrade */
--_green-bg: #E6F5EE;
--_amber: #B45309; /* expiring / warning (text only)*/
--_amber-bg: #FEF3C7;
--_steel: #446478; /* release / neutral-destructive */
--_steel-bg: #EDF0F3;
/* ============================================================
2. SEMANTIC DESIGN TOKENS
These are the names every stylesheet uses.
Change a value here → changes everywhere.
============================================================ */
/* ── Brand palette (mapped from foundations) ─────────── */
--color-navy: var(--_navy);
--color-navy-mid: var(--_navy-mid);
--color-navy-hero: var(--_navy-hero);
/* Primary interactive colour — change this one line to
retheme all links, buttons, card accents, nav borders */
--color-primary: var(--_teal);
--color-primary-h: var(--_teal-h);
--color-primary-bg: var(--_teal-bg);
--color-primary-lt: var(--_teal-lt);
/* Hardware accent — differentiates hardware across all pages */
--color-hw: var(--_hw);
--color-hw-h: var(--_hw-h);
--color-hw-bg: var(--_hw-bg);
--color-hw-lt: var(--_hw-lt);
/* Status */
--color-success: var(--_green);
--color-success-bg: var(--_green-bg);
--color-warning: var(--_amber);
--color-warning-bg: var(--_amber-bg);
--color-neutral: var(--_steel); /* release / non-alarming destructive */
--color-neutral-bg: var(--_steel-bg);
/* ── Surfaces & page ─────────────────────────────────── */
--color-bg-page: #F2F5F7; /* body background */
--color-bg-surface: var(--white); /* cards, panels */
--color-bg-tinted: #F2F5F7; /* alternating sections */
--color-border: #D8E2EA; /* card borders, dividers */
--color-border-hover: #B8D8E8; /* card border on hover — light teal */
/* ── Text ───────────────────────────────────────────── */
--color-text-primary: var(--_navy); /* headings, strong values */
--color-text-body: #3A4A57; /* paragraph copy */
--color-text-muted: #6B7F8D; /* labels, captions, secondary */
/* ── Shadows ─────────────────────────────────────────── */
--shadow-soft: 0 2px 8px rgba(7, 24, 40, 0.06);
--shadow-medium: 0 5px 18px rgba(7, 24, 40, 0.10);
--shadow-strong: 0 8px 28px rgba(7, 24, 40, 0.16);
/* ============================================================
3. TYPOGRAPHY
============================================================ */
--font-heading: 'Raleway', sans-serif; /* weight 300/400/500/600 */
--font-body: 'Source Sans 3', sans-serif; /* weight 300/400/600 */
/* ============================================================
4. NAVBAR TOKENS (consumed by aziNavBar.css)
============================================================ */
--nav-bg: var(--color-navy);
--nav-border: var(--color-primary); /* bottom rule */
--nav-link: rgba(255, 255, 255, 0.62);
--nav-link-hover: var(--white);
--nav-link-active: var(--color-primary);
--nav-mobile-bg: var(--_navy-mid);
--nav-mobile-border: var(--color-border);
--nav-dropdown-bg: var(--color-navy);
--nav-dropdown-border: var(--color-primary);
/* ============================================================
5. FOOTER TOKENS (consumed by aziFooter.css)
============================================================ */
--footer-bg: var(--color-navy);
--footer-border-top: var(--color-primary); /* 2px top rule */
--footer-text: rgba(255, 255, 255, 0.32);
--footer-heading: var(--color-primary);
--footer-link: rgba(255, 255, 255, 0.36);
--footer-link-hover: var(--color-primary);
--footer-brand-primary: rgba(255, 255, 255, 0.90);
--footer-brand-accent: var(--color-primary-lt);
--footer-divider: rgba(255, 255, 255, 0.08);
/* ============================================================
6. HERO TOKENS (consumed by aziHero.css)
============================================================ */
--hero-bg-dark: var(--color-navy);
--hero-bg-pages: var(--color-navy-hero);
--hero-gradient-mid: #0B3A5C; /* home hero gradient */
--hero-mesh-color: var(--color-primary-lt);/* SVG mesh stroke */
--hero-mesh-opacity: 0.12;
--hero-eyebrow: var(--color-primary-lt);
--hero-title: var(--white);
--hero-title-accent: var(--color-primary-lt);
--hero-subtitle: rgba(255, 255, 255, 0.50);
--hero-stat-number: var(--color-primary-lt);
--hero-stat-label: rgba(255, 255, 255, 0.33);
--hero-stat-divider: rgba(255, 255, 255, 0.10);
/* Pages hero (Services, Products, etc.) */
--hero-pages-eyebrow: var(--color-primary);
--hero-pages-subtitle: rgba(160, 215, 230, 0.75);
/* Hardware pages hero override */
--hero-hw-eyebrow: var(--color-hw-lt);
--hero-hw-mesh: var(--color-hw-lt);
/* ============================================================
7. CARD TOKENS (consumed by all layout files)
============================================================ */
/* Base card */
--card-bg: var(--color-bg-surface);
--card-border: var(--color-border);
--card-radius: 8px;
--card-shadow: var(--shadow-soft);
--card-shadow-hover: var(--shadow-medium);
/* Primary (teal) card accent */
--card-accent-primary: var(--color-primary);
--card-hover-primary: var(--color-primary);
--card-icon-bg-primary: var(--color-primary-bg);
--card-icon-primary: var(--color-primary);
/* Hardware (hw-teal) card accent */
--card-accent-hw: var(--color-hw);
--card-hover-hw: var(--color-hw);
--card-icon-bg-hw: var(--color-hw-bg);
--card-icon-hw: var(--color-hw);
/* Status card accents */
--card-accent-success: var(--color-success);
--card-accent-warning: var(--color-warning);
--card-accent-neutral: var(--color-neutral);
/* Enquiry / banner bands */
--band-primary-bg: var(--color-primary-bg);
--band-primary-border: rgba(2, 140, 197, 0.20);
--band-hw-bg: var(--color-hw-bg);
--band-hw-border: rgba(52, 158, 140, 0.20);
/* ============================================================
8. BUTTON TOKENS (consumed by aziBase.css button rules)
============================================================ */
/* Primary — teal filled */
--btn-primary-bg: var(--color-primary);
--btn-primary-hover: var(--color-primary-h);
--btn-primary-text: var(--white);
/* Hardware — hw-teal filled */
--btn-hw-bg: var(--color-hw);
--btn-hw-hover: var(--color-hw-h);
--btn-hw-text: var(--white);
/* Outline primary */
--btn-outline-primary-border: var(--color-primary);
--btn-outline-primary-text: var(--color-primary);
--btn-outline-primary-hover-bg: var(--color-primary);
/* Outline hardware */
--btn-outline-hw-border: var(--color-hw);
--btn-outline-hw-text: var(--color-hw);
--btn-outline-hw-hover-bg: var(--color-hw);
/* Ghost (on dark backgrounds) */
--btn-ghost-border: rgba(255, 255, 255, 0.36);
--btn-ghost-text: var(--white);
--btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
/* Status buttons */
--btn-success-bg: var(--color-success);
--btn-success-text: var(--white);
--btn-neutral-bg: var(--color-neutral); /* Release — not alarming */
--btn-neutral-text: var(--white);
/* ============================================================
9. PORTAL TOKENS (consumed by aziPortal.css)
============================================================ */
--portal-nav-bg: var(--color-bg-surface);
--portal-nav-border: var(--color-border);
--portal-nav-link: var(--color-text-body);
--portal-nav-active-border: var(--color-primary);
--portal-nav-active-text: var(--color-primary);
--portal-nav-active-bg: var(--color-primary-bg);
--portal-nav-hover-text: var(--color-primary);
--portal-nav-hover-bg: var(--color-primary-bg);
--portal-avatar-border: var(--color-primary);
--portal-avatar-bg: var(--color-primary-bg);
--portal-avatar-icon: var(--color-primary);
--portal-summary-accent: var(--color-primary); /* top stripe */
--portal-stat-primary: var(--color-primary);
--portal-stat-warning: var(--color-warning);
--portal-filter-active-bg: var(--color-primary-bg);
--portal-filter-active-text: var(--color-primary-h);
--portal-filter-active-border:var(--color-primary);
/* License card status stripes */
--lic-stripe-active: var(--color-primary);
--lic-stripe-expiring: var(--color-warning);
--lic-stripe-expired: var(--color-neutral);
/* Badge colours */
--badge-active-text: var(--color-success);
--badge-active-bg: var(--color-success-bg);
--badge-expiring-text: var(--color-warning);
--badge-expiring-bg: var(--color-warning-bg);
--badge-expired-text: var(--color-neutral);
--badge-expired-bg: var(--color-neutral-bg);
/* ============================================================
10. INPUT / FORM TOKENS (consumed by aziInputs.css)
============================================================ */
--input-border: var(--color-border);
--input-radius: 4px;
--input-bg: var(--white);
--input-text: var(--color-text-primary);
--input-icon: #B0BEC5;
--input-focus-border: var(--color-primary);
/* Auth card accent — same as primary, isolate so it's
easy to diverge if needed */
--auth-accent: var(--color-primary);
--auth-icon-bg: var(--color-primary-bg);
--auth-icon-color: var(--color-primary);
--auth-h2: var(--color-primary);
--auth-link: var(--color-primary);
--auth-stripe: var(--color-primary);
/* Form feedback */
--form-success: var(--color-success);
--form-error: #CC0000;
/* ============================================================
11. LAYOUT
============================================================ */
--content-width: 1140px;
--content-width-narrow: 960px;
}
/* ============================================================
GOOGLE FONTS IMPORT
Ensure this also appears in Site.Master :
============================================================ */
/* ============================================================
GLOBAL RESETS & BASE STYLES
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-color: var(--color-bg-page);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-text-primary);
line-height: 1.25;
margin-top: 0;
}
p { margin-top: 0; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-h); }
img { max-width: 100%; height: auto; display: block; }
/* ============================================================
LAYOUT
============================================================ */
.container {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 20px;
}
.container-narrow {
max-width: var(--content-width-narrow);
margin: 0 auto;
padding: 0 20px;
}
/* Section wrappers — alternate surface/tinted */
.section-white { background: var(--color-bg-surface); padding: 60px 0; }
.section-tinted { background: var(--color-bg-tinted); padding: 56px 0; }
/* Horizontal rule */
.section-divider {
border: none;
border-top: 1px solid var(--color-border);
margin: 0;
}
/* ============================================================
TYPOGRAPHY UTILITIES
============================================================ */
.eyebrow {
display: block;
font-family: var(--font-heading);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.6rem;
}
.section-title {
font-family: var(--font-heading);
font-size: 1.45rem;
font-weight: 300;
letter-spacing: 0.02em;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
}
.section-subtitle {
font-size: 0.88rem;
color: var(--color-text-muted);
font-weight: 300;
line-height: 1.65;
margin-bottom: 1.75rem;
}
.text-muted { color: var(--color-text-muted); }
.text-body { color: var(--color-text-body); }
/* Card system moved to aziCards.css */
/* Enquiry bands moved to aziCards.css */
.enquiry-band.primary {
background: var(--band-primary-bg);
border-color: var(--band-primary-border);
}
.enquiry-band.hw {
background: var(--band-hw-bg);
border-color: var(--band-hw-border);
}
.enquiry-band h4 {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 3px;
}
.enquiry-band.primary h4 { color: var(--color-primary-h); }
.enquiry-band.hw h4 { color: var(--color-hw-h); }
.enquiry-band p {
font-size: 0.78rem;
font-weight: 300;
color: var(--color-text-body);
margin: 0;
}
/* ============================================================
BUTTON — BASE
============================================================ */
.btn {
font-family: var(--font-heading);
display: inline-block;
padding: 8px 22px;
font-size: 0.82rem;
font-weight: 500;
border-radius: 4px;
border: none;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
letter-spacing: 0.07em;
text-transform: uppercase;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
text-align: center;
}
.btn-sm {
padding: 6px 15px 4px;
font-size: 0.73rem;
}
/* Filled — primary teal */
.btn-primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn-primary:hover {
background: var(--btn-primary-hover);
color: var(--btn-primary-text);
}
/* Account-related actions — Login, Register, ForgotPassword, SetPassword, portal.
Identical appearance to btn-primary; kept as a separate class so account
buttons can be restyled independently if needed in future. */
.btn-account {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn-account:hover {
background: var(--btn-primary-hover);
color: var(--btn-primary-text);
}
/* Portal licence actions */
.btn-green {
background: var(--color-success);
color: #fff;
}
.btn-green:hover { background: #155f38; color: #fff; }
.btn-steel {
background: var(--color-neutral);
color: #fff;
}
.btn-steel:hover { background: #354e5e; color: #fff; }
/* Filled — hardware teal */
.btn-hw {
background: var(--btn-hw-bg);
color: var(--btn-hw-text);
}
.btn-hw:hover {
background: var(--btn-hw-hover);
color: var(--btn-hw-text);
}
/* Outline — primary teal */
.btn-outline-primary {
background: transparent;
color: var(--btn-outline-primary-text);
border: 1px solid var(--btn-outline-primary-border);
}
.btn-outline-primary:hover {
background: var(--btn-outline-primary-hover-bg);
color: var(--white);
}
/* Outline — hardware teal */
.btn-outline-hw {
background: transparent;
color: var(--btn-outline-hw-text);
border: 1px solid var(--btn-outline-hw-border);
}
.btn-outline-hw:hover {
background: var(--btn-outline-hw-hover-bg);
color: var(--white);
}
/* Ghost — for use on dark/hero backgrounds */
.btn-ghost {
background: transparent;
color: var(--btn-ghost-text);
border: 1px solid var(--btn-ghost-border);
}
.btn-ghost:hover {
background: var(--btn-ghost-hover-bg);
color: var(--btn-ghost-text);
}
/* Status buttons */
.btn-success {
background: var(--btn-success-bg);
color: var(--btn-success-text);
}
.btn-neutral {
background: var(--btn-neutral-bg);
color: var(--btn-neutral-text);
}
/* Text link */
.btn-link {
background: none;
border: none;
padding: 0;
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
cursor: pointer;
}
.btn-link::after { content: ' →'; }
.btn-link:hover { color: var(--color-primary-h); text-decoration: underline; }
/* ============================================================
FORM MESSAGES
============================================================ */
.form-message {
font-size: 0.9rem;
margin-top: 12px;
line-height: 1.4;
}
.form-message.success { color: var(--form-success); }
.form-message.error { color: var(--form-error); }
/* ============================================================
STATUS BADGES (portal license cards)
============================================================ */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-family: var(--font-heading);
font-size: 0.65rem;
font-weight: 600;
}
.badge-active { color: var(--badge-active-text); background: var(--badge-active-bg); }
.badge-expiring { color: var(--badge-expiring-text); background: var(--badge-expiring-bg); }
.badge-expired { color: var(--badge-expired-text); background: var(--badge-expired-bg); }
/* ============================================================
RESPONSIVE HELPERS
============================================================ */
@media (max-width: 768px) {
.section-white,
.section-tinted { padding: 44px 0; }
.section-title { font-size: 1.2rem; }
.btn:not(.btn-link):not(.btn-sm) {
width: 100%;
max-width: 300px;
}
.hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
.hide-desktop { display: none !important; }
}
/* ============================================================
BUTTON — GHOST BORDER WEIGHT + ARROW LINK VARIANT
Added to match approved Default.aspx design.
============================================================ */
/* Ghost border updated to 1.5px to match approved design */
.btn-ghost { border-width: 1.5px; }
/* Arrow text link — "See all services →" style */
.btn-link-arrow {
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
display: inline-block;
transition: color 0.2s ease;
}
.btn-link-arrow::after { content: ' →'; }
.btn-link-arrow:hover { color: var(--color-primary-h); }