/* * EIEV Brand System — global design overrides * Font stack : Kanit (headings/UI) · Arial (body) · Noto Sans Arabic (RTL) * Colors : var(--eiev-dark) · #D1131F · #00893D · var(--eiev-gold-dark) · #3A3F57 · #00ADBB * Load order : must be included LAST in so it cascades over style.css */ /* ───────────────────────────────────────── 1. BRAND CUSTOM PROPERTIES ───────────────────────────────────────── */ :root { --eiev-black : var(--eiev-dark); --eiev-red : #D1131F; --eiev-green : #00893D; --eiev-gold : var(--eiev-gold-dark); --eiev-slate : #3A3F57; --eiev-teal : #00ADBB; --eiev-gold-warm: var(--eiev-sand); --eiev-sand : #BF9B6F; } /* ───────────────────────────────────────── 2. TYPOGRAPHY — body · Arial ───────────────────────────────────────── */ body, p, li, td, th, input, textarea, select, label, .lead, .caption, blockquote, .navbar-nav li > a, .nav-link, .dropdown-item { font-family: Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; } /* ───────────────────────────────────────── 3. TYPOGRAPHY — headings · Kanit ───────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .section-title, .section-heading, .page-title, .entry-title, .widget-title, .card-title, .modal-title { font-family: var(--font-body); letter-spacing: -0.01em; } /* ───────────────────────────────────────── 4. TYPOGRAPHY — UI elements · Kanit ───────────────────────────────────────── */ .btn, button:not(.ba-accordion button):not(.ba-swatch):not(.ba-color-tabs button):not(.ba-filter-bar button):not(.ba-nav__toggle), .ctabtn, .nav-link, .navbar-brand, .menu-lang-item, .nav-link-font, .dark-highlight, .badge, .tag { font-family: var(--font-body); } /* ───────────────────────────────────────── 5. TYPOGRAPHY — Arabic / RTL · Noto Sans Arabic ───────────────────────────────────────── */ :lang(ar), :lang(ar) body, :lang(ar) p, :lang(ar) li, :lang(ar) span, :lang(ar) a, [dir="rtl"] { font-family: 'Noto Sans Arabic', Arial, sans-serif; } :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4, :lang(ar) h5, :lang(ar) h6, :lang(ar) .btn, :lang(ar) button, :lang(ar) .nav-link, :lang(ar) .ctabtn { font-family: 'Noto Sans Arabic', Arial, sans-serif; letter-spacing: 0; } /* ───────────────────────────────────────── 6. TYPOGRAPHY — Chinese (Simplified) · Noto Sans SC ───────────────────────────────────────── */ :lang(zh), :lang(zh) body, :lang(zh) p, :lang(zh) li, :lang(zh) span, :lang(zh) a { font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; } :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4, :lang(zh) h5, :lang(zh) h6, :lang(zh) .btn, :lang(zh) button, :lang(zh) .nav-link, :lang(zh) .ctabtn { font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; letter-spacing: 0; } /* ───────────────────────────────────────── 7. TYPOGRAPHY — Russian · Noto Sans (Cyrillic) ───────────────────────────────────────── */ :lang(ru), :lang(ru) body, :lang(ru) p, :lang(ru) li, :lang(ru) span, :lang(ru) a { font-family: 'Noto Sans', Arial, sans-serif; } :lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(ru) h4, :lang(ru) h5, :lang(ru) h6, :lang(ru) .btn, :lang(ru) button, :lang(ru) .nav-link, :lang(ru) .ctabtn { font-family: 'Noto Sans', Arial, sans-serif; letter-spacing: 0; } /* ───────────────────────────────────────── 8. COLOR — brand red accent (#D1131F) Covers hover states & underlines that style.css previously set to #b11d11 ───────────────────────────────────────── */ .navbar-nav li > a:before, .navbar-nav li > a:after { background-color: var(--eiev-red) !important; } a:hover, a:focus { color: var(--eiev-red); } /* Preserve gold links in nav/dropdown — don't let the above override them */ .navbar-nav li > a:hover, .navbar-nav li.active > a, .dropdown-menu a:hover, .menu-lang-item:hover, .nav-link-font:hover, .dark-highlight { color: var(--eiev-gold) !important; } /* ───────────────────────────────────────── 9. BUTTONS — brand gold as primary ───────────────────────────────────────── */ .btn-primary, .ctabtn { background-color: var(--eiev-gold) !important; border-color: var(--eiev-gold) !important; color: #fff !important; font-family: var(--font-body); letter-spacing: .08em; text-transform: uppercase; } .btn-primary:hover, .ctabtn:hover { background-color: #7d5a28 !important; border-color: #7d5a28 !important; } /* Sticky header gold stripe */ .stick { background-color: var(--eiev-gold) !important; } /* ───────────────────────────────────────── 10. NAV — Kanit + gold active state ───────────────────────────────────────── */ .navbar-nav li > a, .nav-link-font { font-family: var(--font-body); font-weight: 600; letter-spacing: .04em; } /* ───────────────────────────────────────── 11. FOOTER — ensure brand compliance ───────────────────────────────────────── */ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, .footer h1, .footer h2, .footer h3 { font-family: var(--font-body); } /* ───────────────────────────────────────── 12. SECTION / PAGE TITLES — Kanit + tight ───────────────────────────────────────── */ .promo-zoom-titles h1, .promo-zoom-titles h2, .promo-zoom-titles h3 { font-family: var(--font-body); letter-spacing: -.02em; } /* ───────────────────────────────────────── 13. SHARED HERO v2 DESIGN Brand-assets hero style applied to timing, superequus, tracking, photofinish. Class added to each hero
: .eiev-hero-v2 ───────────────────────────────────────── */ /* UAE flag left stripe */ .eiev-hero-v2::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 10; background: linear-gradient(to bottom, #00893D 0% 33%, #fff 33% 66%, #D1131F 66% 100%); } /* Large ghost page-title behind the content */ .eiev-hv2-ghost { position: absolute; bottom: -.1em; right: -.02em; font-family: var(--font-body); font-size: clamp(100px, 16vw, 220px); font-weight: 900; line-height: 1; pointer-events: none; user-select: none; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); letter-spacing: -.05em; text-transform: uppercase; z-index: 1; white-space: nowrap; } /* Two-column hero layout */ .eiev-hv2-layout { display: grid; grid-template-columns: 1fr min(360px, 32%); gap: 44px; align-items: end; position: relative; z-index: 5; } /* Floating glass card (right column) */ .eiev-hv2-card { background: rgba(255,255,255,.9); color: var(--eiev-dark); border-radius: 4px; padding: 26px 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 32px 80px rgba(0,0,0,.4); animation: eivHv2Float 8s ease-in-out infinite; align-self: center; } @keyframes eivHv2Float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Meter bar */ .eiev-hv2-meter { height: 4px; border-radius: 99px; background: rgba(29,29,27,.1); overflow: hidden; margin-bottom: 14px; } .eiev-hv2-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00893D, var(--eiev-gold-dark), #D1131F); width: 0; animation: eivHv2Load 1.4s .6s ease forwards; } @keyframes eivHv2Load { to { width: 82%; } } /* Card body text */ .eiev-hv2-card-desc { font-size: 13px; line-height: 1.6; color: #5a5148; margin: 0 0 14px; font-family: Arial, Helvetica, sans-serif; } /* Stats row */ .eiev-hv2-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; border-top: 1px solid rgba(29,29,27,.1); padding-top: 14px; margin-top: 6px; } .eiev-hv2-stats span { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #7a7068; font-family: var(--font-body); } .eiev-hv2-stats strong { display: block; font-family: var(--font-body); font-size: 20px; font-weight: 900; color: var(--eiev-gold-dark); letter-spacing: -.03em; line-height: 1; margin-bottom: 2px; } /* Scroll indicator (replaces per-page variants) */ .eiev-hv2-scroll { position: absolute; left: 50%; bottom: 28px; z-index: 10; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.38); pointer-events: none; } .eiev-hv2-scroll::after { content: ''; width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(var(--eiev-gold-rgb),.55), transparent); animation: eivHv2Scroll 2s ease-in-out infinite; } @keyframes eivHv2Scroll { 0%,100% { opacity:1; transform:scaleY(1); } 50% { opacity:.3; transform:scaleY(.4); } } /* h1 stroke accent — outline word in hero headings */ .eiev-h1-stroke { -webkit-text-stroke: 1px rgba(228,184,77,.4); color: transparent; } /* Hide card on narrow screens */ @media (max-width: 900px) { .eiev-hv2-layout { grid-template-columns: 1fr; } .eiev-hv2-card { display: none; } .eiev-hv2-ghost { font-size: clamp(80px, 20vw, 140px); } } @media (prefers-reduced-motion: reduce) { .eiev-hv2-card { animation: none !important; } .eiev-hv2-meter span, .eiev-hv2-scroll::after { animation: none !important; } } /* ───────────────────────────────────────── 14. BRAND ASSETS PAGE — don't touch (already fully styled with its own .ba-* scoped rules) ───────────────────────────────────────── */ .eiev-brand-assets-page, .eiev-brand-assets-page * { /* intentionally left empty — scoped styles handle it */ } /* ───────────────────────────────────────── 15. GEO PATTERN ACCENTS Subtle brand-pattern watermarks for white / near-white sections. Add one of these classes to any light- background container to get a soft corner decoration: .eiev-geo-accent — leaf + triangles .eiev-geo-accent--b — hatched lines + waves .eiev-geo-accent--c — dots + topographic ───────────────────────────────────────── */ .eiev-geo-accent, .eiev-geo-accent--b, .eiev-geo-accent--c { position: relative; overflow: hidden; isolation: isolate; /* creates compositing boundary — patterns blend with this element's background, not the page background */ } /* top-right corner pattern */ .eiev-geo-accent::after, .eiev-geo-accent--b::after, .eiev-geo-accent--c::after { content: ''; position: absolute; top: 0; right: 0; width: 380px; height: 380px; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.065; pointer-events: none; mix-blend-mode: multiply; z-index: -1; /* behind content within the isolated context */ } /* bottom-left accent — slightly smaller, softer */ .eiev-geo-accent::before, .eiev-geo-accent--b::before, .eiev-geo-accent--c::before { content: ''; position: absolute; bottom: 0; left: 0; width: 260px; height: 260px; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.04; pointer-events: none; mix-blend-mode: multiply; z-index: -1; } /* Variant A — geometric triangles tiled across full section (::after suppressed) */ .eiev-geo-accent::after { background-image: none; } .eiev-geo-accent::before { background-image: url('../img/brand-assets/geo1.webp'); inset: 0; width: 100%; height: 100%; background-repeat: repeat; background-size: 220px 220px; opacity: 0.055; } /* Variant B — hatched diagonal lines (top-right) + wave lines (bottom-left) */ .eiev-geo-accent--b::after { background-image: url('../img/brand-assets/geo4.webp'); } .eiev-geo-accent--b::before { background-image: url('../img/brand-assets/geo3.webp'); } /* Variant C — dotted circles (top-right) + topographic contour (bottom-left) */ .eiev-geo-accent--c::after { background-image: url('../img/brand-assets/geo5.webp'); } .eiev-geo-accent--c::before { background-image: url('../img/brand-assets/geo6.webp'); } /* ───────────────────────────────────────── GLOBAL READABILITY FLOOR — 14px minimum text size (all screens) No text renders below 14px anywhere. max(14px, 1em) is a true floor: any leaf already ≥14px keeps its size, so the type hierarchy / ratios are preserved and only sub-14px text (labels, chips, meta, captions, fine print) is lifted to 14px. !important is required to override the per-component inline