/* ============================================================ ENDEAVOUR 7 AVIATION LTD — DESIGN SYSTEM CSS Version 1.0 | May 2026 ============================================================ HOW TO LOAD THIS FILE IN WORDPRESS / ELEMENTOR ------------------------------------------------ There are two ways to include this as a site-wide stylesheet. METHOD 1 — CHILD THEME (recommended for production) Add the following to your child theme's functions.php file. This loads the CSS file as a proper enqueued stylesheet, which is the correct WordPress method and survives theme updates: function e7_design_system_styles() { wp_enqueue_style( 'e7-design-system', get_stylesheet_directory_uri() . '/css/e7-design-system.css', array(), '1.0.0' ); } add_action( 'wp_enqueue_scripts', 'e7_design_system_styles' ); Then place this file at: /wp-content/themes/YOUR-CHILD-THEME/css/e7-design-system.css METHOD 2 — ELEMENTOR CUSTOM CSS (quickest, no code access needed) In the WordPress dashboard: Elementor → Settings → Custom CSS Paste the entire contents of this file into that field and save. This applies site-wide to every page built with Elementor. Note: this field has a character limit on some setups — if it truncates, use Method 1 instead. METHOD 3 — WORDPRESS CUSTOMISER Dashboard → Appearance → Customise → Additional CSS Paste the entire file contents. Works site-wide but is theme- dependent and will be lost if you switch themes. Not recommended for production — use Method 1. USAGE NOTES ----------- All design tokens are CSS custom properties (variables) defined on :root and are therefore available globally to every element on every page. Reference them in Elementor's Custom CSS fields on individual sections, containers, and widgets using: var(--e7-token-name) Example — applying the hero gradient to an Elementor container: selector { background: var(--e7-grad-hero); } Example — applying gold text to a heading widget: selector { color: var(--e7-gold); } Responsive font scaling is automatic. The @media blocks below override the font-size tokens at each breakpoint. Any element using var(--e7-size-*) tokens will scale correctly on all devices without additional rules. ============================================================ */ /* ------------------------------------------------------------ 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS) ------------------------------------------------------------ */ :root { /* --- Colour: Core Brand --- */ --e7-navy-deep: #0D1B2E; /* Primary dark — headers, hero bg, navbar */ --e7-navy-mid: #1A2E4A; /* Section backgrounds, cards on dark */ --e7-navy-light: #2C3E50; /* Body text on light, sub-headers */ --e7-gold: #C9A84C; /* Primary accent — CTAs, dividers, highlights */ --e7-gold-dark: #A8893A; /* Gold hover/pressed states */ --e7-gold-pale: rgba(201,168,76,0.08); /* Trace gold for subtle tints */ /* --- Colour: Neutrals --- */ --e7-ivory: #F5F3EF; /* Page background */ --e7-ivory-mid: #EAE7E0; /* Alternate section bg */ --e7-stone: #E8E5DF; /* Borders, dividers, input strokes */ --e7-slate: #6B7A8D; /* Secondary text, captions, labels */ --e7-white: #FFFFFF; --e7-black: #0A0F15; /* --- Colour: Functional --- */ --e7-link: #1B4F72; /* Links on dark bg */ --e7-success: #0F6E56; /* Availability, confirmed states */ --e7-error: #7B2D2D; /* Errors, required fields */ /* --- Gradients: Hero / Header (dark) --- */ --e7-grad-hero: linear-gradient(135deg, #0D1B2E 0%, #1A2E4A 60%, #0D1B2E 100%); --e7-grad-atlantic: linear-gradient(160deg, #0D1B2E 0%, #1A2E4A 45%, #2C3E50 100%); --e7-grad-squadron: linear-gradient(135deg, #0D1B2E 0%, #1A2E4A 50%, #1B3A28 100%); --e7-grad-gold-horizon: linear-gradient(160deg, #0D1B2E 0%, #1A2E4A 70%, #2A2210 100%); --e7-grad-gilded-base: linear-gradient(180deg, #0D1B2E 0%, #0D1B2E 60%, #1E1A0D 100%); --e7-grad-pilots-dusk: linear-gradient(120deg, #0A1520 0%, #14253A 40%, #0D1B2E 75%, #1A2435 100%); /* --- Gradients: Section Body (light) --- */ --e7-grad-ivory: linear-gradient(180deg, #F5F3EF 0%, #EAE7E0 100%); --e7-grad-linen: linear-gradient(180deg, #FFFFFF 0%, #F5F3EF 100%); --e7-grad-mist: linear-gradient(160deg, #F5F3EF 0%, #EDF3F7 100%); --e7-grad-parchment: linear-gradient(180deg, #FBF9F4 0%, #F0EDE4 100%); --e7-grad-gold-whisper: linear-gradient(135deg, #F5F3EF 0%, #F0EBD8 100%); --e7-grad-sky-neutral: linear-gradient(160deg, #EDF3F7 0%, #F5F3EF 100%); --e7-grad-gilt-crown: linear-gradient(180deg, #F8F4EB 0%, #F5F3EF 100%); /* --- Typography: Family --- */ --e7-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* --- Typography: Size Scale (desktop) --- */ --e7-size-display: 64px; --e7-size-h1: 48px; --e7-size-h2: 36px; --e7-size-h3: 28px; --e7-size-h4: 22px; --e7-size-h5: 18px; --e7-size-lead: 20px; --e7-size-body: 16px; --e7-size-small: 14px; --e7-size-micro: 12px; --e7-size-overline: 11px; --e7-size-nav: 15px; --e7-size-cta: 15px; /* --- Typography: Weight --- */ --e7-weight-light: 300; --e7-weight-regular: 400; --e7-weight-medium: 500; --e7-weight-semibold: 600; --e7-weight-bold: 700; /* --- Typography: Line Height --- */ --e7-lh-display: 1.05; --e7-lh-heading: 1.2; --e7-lh-lead: 1.5; --e7-lh-body: 1.75; /* --- Typography: Letter Spacing --- */ --e7-ls-display: -0.03em; --e7-ls-heading: -0.02em; --e7-ls-overline: 0.12em; --e7-ls-nav: 0.01em; /* --- Spacing Scale --- */ --e7-space-xs: 4px; --e7-space-sm: 8px; --e7-space-md: 16px; --e7-space-lg: 24px; --e7-space-xl: 40px; --e7-space-2xl: 64px; --e7-space-3xl: 96px; --e7-space-4xl: 128px; /* --- Layout --- */ --e7-container: 1200px; --e7-container-text: 760px; --e7-radius-sm: 4px; --e7-radius-md: 8px; --e7-radius-lg: 12px; --e7-radius-pill: 100px; /* --- Transitions --- */ --e7-transition: 200ms ease; } /* ------------------------------------------------------------ 2. RESPONSIVE BREAKPOINTS Overrides token values at each breakpoint. Elements using var(--e7-size-*) tokens scale automatically — no per-component breakpoint rules needed. ------------------------------------------------------------ */ /* Tablet (≤1024px) */ @media (max-width: 1024px) { :root { --e7-size-display: 48px; --e7-size-h1: 38px; --e7-size-h2: 30px; --e7-size-h3: 24px; --e7-size-h4: 20px; --e7-size-h5: 17px; --e7-size-lead: 18px; --e7-space-3xl: 72px; --e7-space-4xl: 96px; } } /* Mobile (≤640px) */ @media (max-width: 640px) { :root { --e7-size-display: 36px; --e7-size-h1: 30px; --e7-size-h2: 24px; --e7-size-h3: 20px; --e7-size-h4: 18px; --e7-size-h5: 16px; --e7-size-lead: 17px; --e7-size-body: 15px; --e7-space-2xl: 48px; --e7-space-3xl: 56px; --e7-space-4xl: 72px; } } /* ------------------------------------------------------------ 3. BASE & RESET ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--e7-font); font-size: var(--e7-size-body); font-weight: var(--e7-weight-regular); line-height: var(--e7-lh-body); color: var(--e7-navy-light); background-color: var(--e7-ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--e7-gold-dark); text-decoration: none; transition: color var(--e7-transition); } a:hover { color: var(--e7-gold); } /* ------------------------------------------------------------ 4. TYPOGRAPHY — ELEMENT STYLES ------------------------------------------------------------ */ /* Display headline */ .e7-display { font-family: var(--e7-font); font-size: var(--e7-size-display); font-weight: var(--e7-weight-semibold); line-height: var(--e7-lh-display); letter-spacing: var(--e7-ls-display); } /* Headings */ h1, .e7-h1 { font-size: var(--e7-size-h1); font-weight: var(--e7-weight-semibold); line-height: var(--e7-lh-heading); letter-spacing: var(--e7-ls-heading); } h2, .e7-h2 { font-size: var(--e7-size-h2); font-weight: var(--e7-weight-semibold); line-height: var(--e7-lh-heading); letter-spacing: var(--e7-ls-heading); } h3, .e7-h3 { font-size: var(--e7-size-h3); font-weight: var(--e7-weight-medium); line-height: 1.3; letter-spacing: -0.01em; } h4, .e7-h4 { font-size: var(--e7-size-h4); font-weight: var(--e7-weight-medium); line-height: 1.35; } h5, .e7-h5 { font-size: var(--e7-size-h5); font-weight: var(--e7-weight-medium); line-height: 1.4; } h6, .e7-h6 { font-size: var(--e7-size-body); font-weight: var(--e7-weight-semibold); line-height: 1.4; letter-spacing: 0.01em; text-transform: uppercase; } /* Lead / intro paragraph */ .e7-lead { font-size: var(--e7-size-lead); font-weight: var(--e7-weight-light); line-height: var(--e7-lh-lead); color: var(--e7-slate); } /* Body */ p, .e7-body { font-size: var(--e7-size-body); font-weight: var(--e7-weight-regular); line-height: var(--e7-lh-body); } /* Small / caption */ .e7-small { font-size: var(--e7-size-small); font-weight: var(--e7-weight-regular); line-height: 1.5; color: var(--e7-slate); } /* Micro / fine print */ .e7-micro { font-size: var(--e7-size-micro); font-weight: var(--e7-weight-regular); line-height: 1.5; color: var(--e7-slate); opacity: 0.8; } /* Overline / eyebrow label */ .e7-overline { font-size: var(--e7-size-overline); font-weight: var(--e7-weight-semibold); letter-spacing: var(--e7-ls-overline); text-transform: uppercase; color: var(--e7-gold); display: block; margin-bottom: var(--e7-space-sm); } /* Accent / pull quote */ .e7-accent { font-size: var(--e7-size-h4); font-weight: var(--e7-weight-light); font-style: italic; line-height: 1.45; color: var(--e7-navy-mid); border-left: 2px solid var(--e7-gold); padding-left: var(--e7-space-lg); } /* Colour helpers */ .e7-gold-text { color: var(--e7-gold); } .e7-slate-text { color: var(--e7-slate); } .e7-white-text { color: var(--e7-white); } .e7-navy-text { color: var(--e7-navy-deep); } /* Stat number */ .e7-stat-number { font-size: var(--e7-size-h1); font-weight: var(--e7-weight-bold); line-height: 1; letter-spacing: -0.03em; color: var(--e7-gold); font-feature-settings: 'tnum' 1; } .e7-stat-label { font-size: var(--e7-size-small); font-weight: var(--e7-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--e7-slate); margin-top: var(--e7-space-xs); } /* ------------------------------------------------------------ 5. BACKGROUND UTILITY CLASSES Apply these directly to Elementor containers via: Advanced → CSS Classes field ------------------------------------------------------------ */ /* Solid backgrounds */ .e7-bg-navy { background-color: var(--e7-navy-deep); } .e7-bg-navy-mid { background-color: var(--e7-navy-mid); } .e7-bg-ivory { background-color: var(--e7-ivory); } .e7-bg-white { background-color: var(--e7-white); } .e7-bg-gold { background-color: var(--e7-gold); } /* Dark hero gradient backgrounds */ .e7-bg-hero { background: var(--e7-grad-hero); } .e7-bg-atlantic { background: var(--e7-grad-atlantic); } .e7-bg-squadron { background: var(--e7-grad-squadron); } .e7-bg-gold-horizon { background: var(--e7-grad-gold-horizon); } .e7-bg-gilded-base { background: var(--e7-grad-gilded-base); } .e7-bg-pilots-dusk { background: var(--e7-grad-pilots-dusk); } /* Light section gradient backgrounds */ .e7-bg-ivory-grad { background: var(--e7-grad-ivory); } .e7-bg-linen { background: var(--e7-grad-linen); } .e7-bg-mist { background: var(--e7-grad-mist); } .e7-bg-parchment { background: var(--e7-grad-parchment); } .e7-bg-gold-whisper { background: var(--e7-grad-gold-whisper); } .e7-bg-sky-neutral { background: var(--e7-grad-sky-neutral); } .e7-bg-gilt-crown { background: var(--e7-grad-gilt-crown); } /* Auto text colour correction for dark containers */ .e7-bg-navy h1, .e7-bg-navy h2, .e7-bg-navy h3, .e7-bg-navy h4, .e7-bg-navy h5, .e7-bg-navy h6, .e7-bg-hero h1, .e7-bg-hero h2, .e7-bg-hero h3, .e7-bg-atlantic h1, .e7-bg-atlantic h2, .e7-bg-squadron h1, .e7-bg-squadron h2, .e7-bg-gold-horizon h1, .e7-bg-gold-horizon h2, .e7-bg-gilded-base h1, .e7-bg-gilded-base h2, .e7-bg-pilots-dusk h1, .e7-bg-pilots-dusk h2 { color: var(--e7-white); } .e7-bg-navy p, .e7-bg-navy .e7-lead, .e7-bg-hero p, .e7-bg-hero .e7-lead, .e7-bg-atlantic p, .e7-bg-atlantic .e7-lead, .e7-bg-squadron p, .e7-bg-squadron .e7-lead, .e7-bg-gold-horizon p, .e7-bg-gold-horizon .e7-lead, .e7-bg-gilded-base p, .e7-bg-gilded-base .e7-lead, .e7-bg-pilots-dusk p, .e7-bg-pilots-dusk .e7-lead { color: rgba(255, 255, 255, 0.75); } /* ------------------------------------------------------------ 6. COMPONENTS ------------------------------------------------------------ */ /* --- Buttons --- */ .e7-btn { display: inline-flex; align-items: center; gap: var(--e7-space-sm); font-family: var(--e7-font); font-size: var(--e7-size-cta); font-weight: var(--e7-weight-medium); letter-spacing: 0.02em; padding: 14px 28px; border-radius: var(--e7-radius-md); border: 1.5px solid transparent; cursor: pointer; transition: all var(--e7-transition); text-decoration: none; white-space: nowrap; } .e7-btn--primary { background: var(--e7-gold); color: var(--e7-navy-deep); border-color: var(--e7-gold); } .e7-btn--primary:hover { background: var(--e7-gold-dark); border-color: var(--e7-gold-dark); color: var(--e7-navy-deep); } .e7-btn--ghost { background: transparent; color: var(--e7-white); border-color: rgba(255, 255, 255, 0.4); } .e7-btn--ghost:hover { border-color: var(--e7-gold); color: var(--e7-gold); } .e7-btn--ghost-dark { background: transparent; color: var(--e7-navy-deep); border-color: var(--e7-stone); } .e7-btn--ghost-dark:hover { border-color: var(--e7-navy-deep); } .e7-btn--sm { font-size: var(--e7-size-small); padding: 10px 20px; } /* --- Badge / tag --- */ .e7-badge { display: inline-block; font-size: var(--e7-size-micro); font-weight: var(--e7-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--e7-radius-pill); background: rgba(201, 168, 76, 0.12); color: var(--e7-gold-dark); border: 1px solid rgba(201, 168, 76, 0.25); } .e7-badge--dark { background: rgba(201, 168, 76, 0.15); color: var(--e7-gold); border-color: rgba(201, 168, 76, 0.3); } .e7-badge--neutral { background: var(--e7-stone); color: var(--e7-slate); border-color: transparent; } /* --- Card --- */ .e7-card { background: var(--e7-white); border: 1px solid var(--e7-stone); border-radius: var(--e7-radius-lg); padding: var(--e7-space-xl); transition: box-shadow var(--e7-transition); } .e7-card:hover { box-shadow: 0 8px 32px rgba(13, 27, 46, 0.08); } .e7-card--dark { background: var(--e7-navy-mid); border-color: rgba(255, 255, 255, 0.08); color: var(--e7-white); } .e7-card--accented { border-top: 3px solid var(--e7-gold); } /* --- Gold rule divider --- */ .e7-rule { border: none; border-top: 1px solid var(--e7-stone); margin-block: var(--e7-space-xl); } .e7-rule--gold { border: none; border-top: 2px solid var(--e7-gold); width: 48px; margin-inline: 0; margin-block: var(--e7-space-xl); } /* --- Gold hero rule (short accent bar) --- */ .e7-hero-rule { width: 40px; height: 2px; background: var(--e7-gold); display: block; margin-block: var(--e7-space-lg); border: none; } /* --- Navigation links --- */ .e7-nav { font-size: var(--e7-size-nav); font-weight: var(--e7-weight-medium); letter-spacing: var(--e7-ls-nav); color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color var(--e7-transition); } .e7-nav:hover { color: var(--e7-gold); } .e7-nav--active { color: var(--e7-gold); } /* --- Form inputs --- */ .e7-input { width: 100%; font-family: var(--e7-font); font-size: var(--e7-size-body); font-weight: var(--e7-weight-regular); color: var(--e7-navy-light); background: var(--e7-white); border: 1px solid var(--e7-stone); border-radius: var(--e7-radius-md); padding: 12px 16px; outline: none; transition: border-color var(--e7-transition); appearance: none; } .e7-input:focus { border-color: var(--e7-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12); } .e7-input::placeholder { color: var(--e7-slate); opacity: 0.7; } .e7-label { display: block; font-size: var(--e7-size-small); font-weight: var(--e7-weight-medium); color: var(--e7-navy-light); margin-bottom: 6px; letter-spacing: 0.01em; } /* --- Testimonial block --- */ .e7-testimonial { padding: var(--e7-space-xl); background: var(--e7-grad-ivory); border-radius: var(--e7-radius-lg); border: 1px solid var(--e7-stone); } .e7-testimonial__quote { font-size: var(--e7-size-lead); font-weight: var(--e7-weight-light); font-style: italic; line-height: 1.6; color: var(--e7-navy-light); margin-bottom: var(--e7-space-md); } .e7-testimonial__author { font-size: var(--e7-size-small); font-weight: var(--e7-weight-medium); color: var(--e7-slate); } /* ============================================================ END OF FILE ============================================================ */ /* ============================================================ ENDEAVOUR 7 AVIATION LTD — DESIGN SYSTEM ADDITIONS Version 1.1 | May 2026 ============================================================ Append this file to e7-design-system.css, or load as a separate stylesheet after it. Adds five component groups ported from the Opyx Digital design system, re-tokened with E7 fonts, colours, spacing, and naming convention: 7. Shadow Scale 8. Section Wrappers & Container 9. Layout Grids 10. Footer 11. Utility Classes ============================================================ */ /* ------------------------------------------------------------ 7. SHADOW SCALE Consistent depth tokens for cards, modals, and elevated UI. Use --e7-shadow-* wherever box-shadow is needed rather than writing ad-hoc values. ------------------------------------------------------------ */ :root { --e7-shadow-sm: 0 1px 4px rgba(13, 27, 46, 0.08); /* Subtle lift — default cards */ --e7-shadow-md: 0 4px 16px rgba(13, 27, 46, 0.10); /* Hover state, dropdowns */ --e7-shadow-lg: 0 8px 32px rgba(13, 27, 46, 0.14); /* Modals, overlays */ --e7-shadow-gold: 0 8px 32px rgba(201, 168, 76, 0.18); /* Gold-accented highlight */ --e7-shadow-feature: 0 0 0 3px rgba(201, 168, 76, 0.14), 0 20px 40px rgba(13, 27, 46, 0.16); /* Featured cards, hero CTAs */ } /* ------------------------------------------------------------ 8. SECTION WRAPPERS & CONTAINER Standard vertical padding + centred content width. Usage in Elementor: Section element → Advanced → CSS Classes → e7-section Inner container → Advanced → CSS Classes → e7-container This decouples background colour (applied via e7-bg-* classes on the section) from layout (applied via e7-section and e7-container). ------------------------------------------------------------ */ /* Standard section vertical rhythm */ .e7-section { padding: var(--e7-space-3xl) 0; position: relative; box-sizing: border-box; } /* Tighter section — use for secondary/supporting sections */ .e7-section--sm { padding: var(--e7-space-2xl) 0; } /* Inner content container — limits width, centres horizontally */ .e7-container { max-width: var(--e7-container); /* 1200px from tokens */ margin-left: auto; margin-right: auto; padding-left: var(--e7-space-xl); /* 40px gutters */ padding-right: var(--e7-space-xl); box-sizing: border-box; } /* Narrow container for text-heavy sections (long copy, blog) */ .e7-container--text { max-width: var(--e7-container-text); /* 760px from tokens */ margin-left: auto; margin-right: auto; padding-left: var(--e7-space-xl); padding-right: var(--e7-space-xl); box-sizing: border-box; } /* Subtle gold radial glow — for hero and key dark sections */ .e7-section--glow::after { content: ''; position: absolute; top: -180px; right: -180px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(201, 168, 76, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; } .e7-section--glow > * { position: relative; z-index: 1; } /* Responsive section padding overrides */ @media (max-width: 1024px) { .e7-section { padding: var(--e7-space-2xl) 0; } .e7-section--sm { padding: var(--e7-space-xl) 0; } .e7-container, .e7-container--text { padding-left: var(--e7-space-lg); padding-right: var(--e7-space-lg); } } @media (max-width: 640px) { .e7-section { padding: var(--e7-space-2xl) 0; } .e7-container, .e7-container--text { padding-left: var(--e7-space-md); padding-right: var(--e7-space-md); } } /* ------------------------------------------------------------ 9. LAYOUT GRIDS Reusable CSS Grid classes for multi-column content. Apply to an Elementor container element via CSS Classes. Usage: Two equal columns: e7-grid-2 Two (wide left): e7-grid-2--wide-left Two (wide right): e7-grid-2--wide-right Three columns: e7-grid-3 Four columns: e7-grid-4 Auto-fill responsive: e7-grid-auto Flex row: e7-flex-row Centred block: e7-block-center ------------------------------------------------------------ */ /* 50 / 50 */ .e7-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7-space-2xl); /* 64px — generous for premium feel */ align-items: start; } /* Content left, image/visual right (wider left) */ .e7-grid-2--wide-left { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--e7-space-2xl); align-items: center; } /* Image/visual left, content right (wider right) */ .e7-grid-2--wide-right { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--e7-space-2xl); align-items: center; } /* Three equal columns — service cards, feature highlights */ .e7-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e7-space-lg); /* 24px — tighter for card grids */ align-items: start; } /* Four equal columns — stats, icon blocks */ .e7-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e7-space-lg); } /* Auto-fill — wraps at 280px min column width; use for blog cards */ .e7-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e7-space-lg); } /* Flex row — inline items, e.g. trust logos, badge rows */ .e7-flex-row { display: flex; align-items: center; gap: var(--e7-space-md); flex-wrap: wrap; } /* Centred narrow block — for intro copy above a grid */ .e7-block-center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; } /* Grid responsive collapse */ @media (max-width: 1024px) { .e7-grid-2, .e7-grid-2--wide-left, .e7-grid-2--wide-right { grid-template-columns: 1fr; gap: var(--e7-space-xl); } .e7-grid-3 { grid-template-columns: 1fr 1fr; } .e7-grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .e7-grid-3, .e7-grid-4 { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ 10. FOOTER Full footer structure: top row (logo + link columns), bottom bar (legal / legal links). HTML structure expected: ------------------------------------------------------------ */ .e7-footer { background: var(--e7-navy-deep); /* #0D1B2E — deepest navy */ border-top: 1px solid rgba(201, 168, 76, 0.15); /* Trace gold top rule */ padding: var(--e7-space-3xl) 0 var(--e7-space-2xl); } /* Top row: brand left, link columns right */ .e7-footer__top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--e7-space-2xl); border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: var(--e7-space-xl); gap: var(--e7-space-2xl); } /* Brand block: logo + tagline */ .e7-footer__brand { flex-shrink: 0; max-width: 240px; } .e7-footer__logo { font-family: var(--e7-font); font-size: var(--e7-size-h5); /* 18px */ font-weight: var(--e7-weight-semibold); letter-spacing: var(--e7-ls-nav); color: var(--e7-white); text-decoration: none; display: block; margin-bottom: var(--e7-space-sm); transition: color var(--e7-transition); } .e7-footer__logo:hover { color: var(--e7-gold); } /* Gold rule under logo — uses existing component */ .e7-footer__logo-rule { width: 32px; height: 2px; background: var(--e7-gold); display: block; margin-bottom: var(--e7-space-md); border: none; } .e7-footer__tagline { font-family: var(--e7-font); font-size: var(--e7-size-small); /* 14px */ font-weight: var(--e7-weight-regular); color: rgba(255, 255, 255, 0.35); /* Muted — decorative only */ line-height: 1.6; margin: 0; } /* Link columns wrapper */ .e7-footer__links { display: flex; gap: var(--e7-space-2xl); /* 64px between columns */ flex-shrink: 1; } /* Individual link column */ .e7-footer__col h4 { font-family: var(--e7-font); font-size: var(--e7-size-overline); /* 11px — matches existing overline token */ font-weight: var(--e7-weight-semibold); letter-spacing: var(--e7-ls-overline); /* 0.12em */ text-transform: uppercase; color: var(--e7-gold); /* Gold column headers — on-brand */ margin-bottom: var(--e7-space-md); margin-top: 0; } .e7-footer__col a { display: block; font-family: var(--e7-font); font-size: var(--e7-size-small); /* 14px */ font-weight: var(--e7-weight-regular); color: rgba(255, 255, 255, 0.45); /* Low-key resting state */ text-decoration: none; margin-bottom: var(--e7-space-sm); /* 8px between links */ transition: color var(--e7-transition); line-height: 1.4; } .e7-footer__col a:hover { color: rgba(255, 255, 255, 0.85); /* Brighten on hover — not full white */ } /* Bottom bar: company legal left, policy links right */ .e7-footer__bottom { display: flex; justify-content: space-between; align-items: center; font-family: var(--e7-font); font-size: var(--e7-size-micro); /* 12px */ font-weight: var(--e7-weight-regular); color: rgba(255, 255, 255, 0.22); /* Very muted — legal text */ gap: var(--e7-space-lg); flex-wrap: wrap; } .e7-footer__bottom-links { display: flex; gap: var(--e7-space-lg); } .e7-footer__bottom-links a { font-family: var(--e7-font); font-size: var(--e7-size-micro); color: rgba(255, 255, 255, 0.22); text-decoration: none; transition: color var(--e7-transition); } .e7-footer__bottom-links a:hover { color: rgba(255, 255, 255, 0.55); } /* Footer responsive */ @media (max-width: 1024px) { .e7-footer__links { gap: var(--e7-space-xl); /* Tighten column gap on tablet */ } } @media (max-width: 767px) { .e7-footer__top { flex-direction: column; gap: var(--e7-space-xl); } .e7-footer__brand { max-width: 100%; } .e7-footer__links { flex-direction: column; gap: var(--e7-space-lg); width: 100%; } .e7-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--e7-space-sm); } .e7-footer__bottom-links { gap: var(--e7-space-md); } } /* ------------------------------------------------------------ 11. UTILITY CLASSES Text colour, alignment, spacing, and max-width helpers. Apply directly via CSS Classes field in Elementor. All use !important to override Elementor widget defaults. ------------------------------------------------------------ */ /* --- Text colour --- */ .e7-text-gold { color: var(--e7-gold) !important; } .e7-text-white { color: var(--e7-white) !important; } .e7-text-slate { color: var(--e7-slate) !important; } .e7-text-navy { color: var(--e7-navy-deep) !important; } /* --- Text alignment --- */ .e7-text-center { text-align: center !important; } .e7-text-left { text-align: left !important; } .e7-text-right { text-align: right !important; } /* --- Margin top --- */ .e7-mt-xs { margin-top: var(--e7-space-xs) !important; } /* 4px */ .e7-mt-sm { margin-top: var(--e7-space-sm) !important; } /* 8px */ .e7-mt-md { margin-top: var(--e7-space-md) !important; } /* 16px */ .e7-mt-lg { margin-top: var(--e7-space-lg) !important; } /* 24px */ .e7-mt-xl { margin-top: var(--e7-space-xl) !important; } /* 40px */ .e7-mt-2xl{ margin-top: var(--e7-space-2xl)!important; } /* 64px */ /* --- Margin bottom --- */ .e7-mb-xs { margin-bottom: var(--e7-space-xs) !important; } .e7-mb-sm { margin-bottom: var(--e7-space-sm) !important; } .e7-mb-md { margin-bottom: var(--e7-space-md) !important; } .e7-mb-lg { margin-bottom: var(--e7-space-lg) !important; } .e7-mb-xl { margin-bottom: var(--e7-space-xl) !important; } .e7-mb-2xl{ margin-bottom: var(--e7-space-2xl)!important; } /* --- Max-width content constrain --- */ .e7-max-sm { max-width: 480px; } /* Short intros, sub-headings */ .e7-max-md { max-width: 640px; } /* Standard paragraph widths */ .e7-max-lg { max-width: 780px; } /* Wide body text */ /* --- Horizontal rule accent (short gold bar) --- */ /* Complements existing .e7-rule--gold; this version is a block utility */ .e7-hr { border: none; border-bottom: 2px solid var(--e7-gold); margin: 0 0 var(--e7-space-lg) 0; width: 48px; } .e7-hr--full { width: 100%; border-bottom: 1px solid var(--e7-stone); } /* --- Callout / note box --- */ .e7-note { padding: var(--e7-space-md) var(--e7-space-lg); background: var(--e7-gold-pale); border: 1px solid rgba(201, 168, 76, 0.20); border-left: 3px solid var(--e7-gold); border-radius: var(--e7-radius-md); font-family: var(--e7-font); font-size: var(--e7-size-small); color: var(--e7-navy-light); line-height: var(--e7-lh-body); } /* --- Visually hidden (screen reader only) --- */ .e7-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ============================================================ END OF ADDITIONS ============================================================ */