/* Theme Name: EOSV Theme URI: https://eosv.org Description: EO Silicon Valley — child theme of Hello Elementor. Includes all brand colors, typography, button and header styles. Author: EO Silicon Valley Template: hello-elementor Version: 1.3.0 Text Domain: eosv */ /* ═══════════════════════════════════════════════════════════════ CSS CUSTOM PROPERTIES Reference in Elementor → Dynamic values, or widget Custom CSS ═══════════════════════════════════════════════════════════════ */ :root { /* — Backgrounds — */ --eosv-bg: #F9F8F6; /* Site Settings → Global Colors → Background */ --eosv-surface: #FFFFFF; /* Global Colors → Secondary */ --eosv-warm-cream: #FAF6EF; /* Global Colors → Custom: Warm Cream */ /* — Text — */ --eosv-text: #1C1C1C; /* Global Colors → Text */ --eosv-navy: #0E2036; /* Global Colors → Secondary Text */ --eosv-navy-list: #182E4B; /* Global Colors → Custom: Navy List */ --eosv-slate: #4A4A4A; /* Global Colors → Custom: Slate */ --eosv-body: #5A656E; /* Global Colors → Custom: Body Text */ /* — Brand / Accent — */ --eosv-coral: #C04A2C; /* Global Colors → Primary */ --eosv-coral-bright: #EF5B36; /* Global Colors → Accent */ --eosv-coral-hover: #D44F2E; /* Hover state only — not mapped to Elementor */ /* — Borders & Dividers — */ --eosv-border-warm: #E4DDD3; /* Global Colors → Custom: Border Warm */ --eosv-border-light: #E5E2DA; /* Global Colors → Custom: Border Light */ /* — Font families — */ --eosv-font-serif: 'Fraunces', Georgia, serif; --eosv-font-sans: 'Roboto', system-ui, sans-serif; } /* ═══════════════════════════════════════════════════════════════ FONT VARIATION SETTINGS Elementor doesn't expose variable-font axes natively. These apply the correct axes globally without per-widget CSS. Fraunces: SOFT 0 = crisp/high-contrast, WONK 1 = alternate letterforms Roboto: wdth 100 = standard width (prevents condensed rendering) ═══════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-family: var(--eosv-font-serif); font-variation-settings: "SOFT" 0, "WONK" 1; } body, p, li, a, span, label, input, textarea, button, select, .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li, .elementor-button__text, .elementor-nav-menu__item-title, .elementor-nav-menu a { font-family: var(--eosv-font-sans); font-variation-settings: "wdth" 100; } /* ═══════════════════════════════════════════════════════════════ PAGE DEFAULTS ═══════════════════════════════════════════════════════════════ */ body { background-color: var(--eosv-bg); color: var(--eosv-text); } /* ═══════════════════════════════════════════════════════════════ HEADER — Transparent → Solid on scroll ─────────────────────────────────────────────────────────────── IMPORTANT: Elementor's sticky header renders as:
The .eosv-scrolled class is added to #masthead (NOT to
). All descendant selectors must use #masthead as the ancestor. Background works with both ".e-header" and "#masthead" as fallbacks. ═══════════════════════════════════════════════════════════════ */ /* ─── Background transition ─── */ .e-header, #masthead { background: transparent !important; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; border-bottom: 1px solid transparent; } .e-header.eosv-scrolled, #masthead.eosv-scrolled { background: rgba(249, 248, 246, 0.96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--eosv-border-light) !important; box-shadow: 0 1px 0 0 var(--eosv-border-light); } /* ─── Nav links Elementor Nav Menu widget uses .elementor-item on tags (not .elementor-nav-menu__item-title) ─── */ #masthead .elementor-item { color: rgba(255, 255, 255, 0.85) !important; transition: color 0.25s ease !important; } #masthead.eosv-scrolled .elementor-item { color: var(--eosv-navy) !important; } #masthead .elementor-nav-menu .elementor-item:hover, #masthead .elementor-nav-menu .elementor-item:focus, #masthead .elementor-nav-menu .elementor-item:active, #masthead .elementor-nav-menu .elementor-item-active { color: var(--eosv-coral-bright) !important; } /* ─── Hamburger toggle icon ─── */ #masthead .elementor-menu-toggle { color: rgba(255, 255, 255, 0.85) !important; transition: color 0.25s ease !important; } #masthead.eosv-scrolled .elementor-menu-toggle { color: var(--eosv-navy) !important; } /* ─── Member Login text link (Text Editor widget, right-side section) Set CSS ID "eosv-login" on that widget: Elementor → Advanced → CSS ID ─── */ #masthead .elementor-widget-text-editor a { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; transition: color 0.25s ease !important; } #masthead.eosv-scrolled .elementor-widget-text-editor a { color: var(--eosv-navy) !important; } #masthead .elementor-widget-text-editor a:hover { color: var(--eosv-coral-bright) !important; } /* ─── Apply / Join button — HOME PAGE header only Set CSS ID "eosv-apply-btn" on the button widget in the home page header. Do NOT set this ID in header2 — header2 button style is unchanged. Ghost (white outline) on transparent; navy fill on scroll. ─── */ #eosv-apply-btn .elementor-button { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.55) !important; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important; } #eosv-apply-btn .elementor-button:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.85) !important; } #masthead.eosv-scrolled #eosv-apply-btn .elementor-button { background: var(--eosv-navy) !important; color: #fff !important; border-color: var(--eosv-navy) !important; } #masthead.eosv-scrolled #eosv-apply-btn .elementor-button:hover { background: var(--eosv-navy-list) !important; border-color: var(--eosv-navy-list) !important; } /* ─── Nav login / apply items Hidden in the desktop horizontal nav — only appear in the mobile dropdown ─── */ @media (min-width: 1025px) { .elementor-nav-menu .nav-login, .elementor-nav-menu .nav-apply { display: none !important; } } /* Dropdown styling for those items */ .elementor-nav-menu .nav-login a { color: var(--eosv-navy) !important; font-size: 13px !important; letter-spacing: 0.1em !important; } .elementor-nav-menu .nav-apply a { display: inline-block !important; background: var(--eosv-coral-bright) !important; color: #fff !important; border-radius: 9999px !important; padding: 10px 24px !important; font-weight: 500 !important; margin-top: 8px !important; margin-bottom: 24px !important; } .elementor-nav-menu .nav-apply a:hover { background: var(--eosv-coral-hover) !important; } /* ═══════════════════════════════════════════════════════════════ LOGO SWAP IDs set via Elementor → Advanced → CSS ID on each Image widget: Light logo (hero state) → CSS ID: eosv-logo-light Dark logo (scrolled) → CSS ID: eosv-logo-dark eosv-scrolled is on #masthead — must be the ancestor selector. ═══════════════════════════════════════════════════════════════ */ #eosv-logo-dark { display: none !important; } #masthead.eosv-scrolled #eosv-logo-light { display: none !important; } #masthead.eosv-scrolled #eosv-logo-dark { display: block !important; } /* ═══════════════════════════════════════════════════════════════ BUTTONS Add CSS Class in widget → Advanced → CSS Classes ═══════════════════════════════════════════════════════════════ */ /* Shared baseline */ .elementor-button { border-radius: 9999px !important; font-family: var(--eosv-font-sans) !important; font-variation-settings: "wdth" 100 !important; font-weight: 500 !important; letter-spacing: 0.35px !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } /* eosv-btn-primary — coral fill */ .elementor-button.eosv-btn-primary { background: var(--eosv-coral-bright) !important; color: #fff !important; border: none !important; } .elementor-button.eosv-btn-primary:hover { background: var(--eosv-coral-hover) !important; } /* eosv-btn-outline — navy outline (on light backgrounds) */ .elementor-button.eosv-btn-outline { background: transparent !important; color: var(--eosv-navy) !important; border: 1px solid var(--eosv-navy) !important; } .elementor-button.eosv-btn-outline:hover { background: var(--eosv-navy) !important; color: #fff !important; } /* eosv-btn-ghost — white outline (on dark/image backgrounds) */ .elementor-button.eosv-btn-ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; } .elementor-button.eosv-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.75) !important; background: rgba(255, 255, 255, 0.05) !important; } /* eosv-btn-coral-outline — coral outline */ .elementor-button.eosv-btn-coral-outline { background: transparent !important; color: var(--eosv-coral-bright) !important; border: 1px solid var(--eosv-coral-bright) !important; } .elementor-button.eosv-btn-coral-outline:hover { background: var(--eosv-coral-bright) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════ PILLS / BADGES CSS Class: eosv-pill + optional modifier ═══════════════════════════════════════════════════════════════ */ .eosv-pill { display: inline-block; background: var(--eosv-warm-cream); color: var(--eosv-navy-list); font-family: var(--eosv-font-sans); font-variation-settings: "wdth" 100; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 14px; border-radius: 9999px; white-space: nowrap; } .eosv-pill-coral { background: rgba(239, 91, 54, 0.08); color: var(--eosv-coral-bright); } .eosv-pill-navy { background: rgba(14, 32, 54, 0.06); color: var(--eosv-navy); } .eosv-pill-grey { background: #EFEFEF; color: var(--eosv-navy); } /* ═══════════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════════ */ .eosv-card { background: var(--eosv-surface); border: 1px solid var(--eosv-border-warm); border-radius: 20px; } /* ═══════════════════════════════════════════════════════════════ EYEBROW LABELS CSS Class: eosv-eyebrow or eosv-eyebrow-coral ═══════════════════════════════════════════════════════════════ */ .eosv-eyebrow { font-family: var(--eosv-font-sans); font-variation-settings: "wdth" 100; font-size: 12px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; color: var(--eosv-slate); } .eosv-eyebrow-coral { font-weight: 600; letter-spacing: 2.64px; color: var(--eosv-coral-bright); } /* ═══════════════════════════════════════════════════════════════ SECTION BACKGROUNDS CSS Class on Section/Container widget → Advanced → CSS Classes ═══════════════════════════════════════════════════════════════ */ .eosv-section-cream { background-color: var(--eosv-bg) !important; } .eosv-section-white { background-color: var(--eosv-surface) !important; } .eosv-section-coral { background-color: var(--eosv-coral) !important; } .eosv-section-navy { background-color: var(--eosv-navy) !important; } .eosv-section-dark { background-color: #1C1C1C !important; } /* ═══════════════════════════════════════════════════════════════ ICON LIST (Elementor Icon List widget) ═══════════════════════════════════════════════════════════════ */ .elementor-icon-list-items { padding-left: 0 !important; margin-left: 0 !important; } .elementor-icon-list-icon i, .elementor-icon-list-icon svg { color: var(--eosv-coral-bright) !important; fill: var(--eosv-coral-bright) !important; } .elementor-icon-list-text { color: var(--eosv-navy-list); font-size: 14px; line-height: 1.43; } /* ═══════════════════════════════════════════════════════════════ HTML BULLET LISTS (inside Text Editor widgets) ═══════════════════════════════════════════════════════════════ */ .elementor-widget-text-editor ul, .elementor-widget-text-editor ol { padding-left: 1.25em !important; margin-left: 0 !important; list-style-position: outside !important; } .elementor-widget-text-editor ul li::marker { color: var(--eosv-coral-bright) !important; } .elementor-widget-text-editor ol li::marker { color: var(--eosv-coral-bright) !important; font-weight: 600 !important; } /* ═══════════════════════════════════════════════════════════════ NESTED TABS Active state: aria-selected="true" (not .e-active) Tab titles default to flex-row — we override to flex-column so the optional .tab-sub subtitle renders below the main label. ═══════════════════════════════════════════════════════════════ */ .e-n-tabs .e-n-tabs-heading { border-bottom: 1px solid var(--eosv-border-light); gap: 0; } .e-n-tabs .e-n-tab-title { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 2px solid transparent !important; border-radius: 0; padding: 20px 32px !important; min-width: 180px !important; background: transparent !important; transition: border-color 0.2s ease; } .e-n-tabs .e-n-tab-title[aria-selected="true"] { border-bottom: 2px solid var(--eosv-coral-bright) !important; } /* Title text wrapper */ .e-n-tabs .e-n-tab-title .e-n-tab-title-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px; font-family: var(--eosv-font-sans); font-variation-settings: "wdth" 100; font-size: 15px; font-weight: 500; color: var(--eosv-body); } .e-n-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text { color: var(--eosv-navy); } /* Optional subtitle span: subtitle text */ .e-n-tabs .e-n-tab-title .tab-sub { display: block !important; width: 100% !important; font-size: 12px !important; font-weight: 400 !important; color: #9A9A9A !important; text-transform: none !important; letter-spacing: 0 !important; } .e-n-tabs .e-n-tab-title[aria-selected="true"] .tab-sub { color: var(--eosv-coral-bright) !important; } /* ═══════════════════════════════════════════════════════════════ STICKY SIDEBAR CSS Class: eosv-sticky-sidebar on the sidebar Container widget. Requires no overflow:hidden on any ancestor container. ═══════════════════════════════════════════════════════════════ */ .eosv-sticky-sidebar { position: sticky !important; top: 112px !important; align-self: start !important; } /* ═══════════════════════════════════════════════════════════════ ELEMENTOR FORM Selectors verified against actual rendered HTML: - Inputs/textarea → .elementor-field-textual - Select element → .elementor-select-wrapper > select - Elementor caret → .select-caret-down-wrapper (hidden) ═══════════════════════════════════════════════════════════════ */ /* Labels */ .elementor-form .elementor-field-label { font-family: var(--eosv-font-sans) !important; font-variation-settings: "wdth" 100 !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.25em !important; text-transform: uppercase !important; color: var(--eosv-slate) !important; margin-bottom: 8px !important; } /* Text / email / tel / url / textarea */ .elementor-form .elementor-field-textual { border: none !important; border-bottom: 1px solid #DDD9D1 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; padding: 12px 0 !important; color: var(--eosv-navy) !important; font-family: var(--eosv-font-sans) !important; font-variation-settings: "wdth" 100 !important; font-size: 15px !important; line-height: 1.4 !important; width: 100% !important; transition: border-color 0.2s ease !important; } .elementor-form .elementor-field-textual:focus { outline: none !important; border-bottom-color: var(--eosv-navy) !important; box-shadow: none !important; background: transparent !important; } .elementor-form .elementor-field-textual::placeholder { color: #BBB7B0 !important; opacity: 1; } /* Select wrapper */ .elementor-form .elementor-select-wrapper { background: transparent !important; background-color: transparent !important; border: none !important; border-bottom: 1px solid #DDD9D1 !important; box-shadow: none !important; border-radius: 0 !important; } .elementor-form .elementor-select-wrapper::before, .elementor-form .elementor-select-wrapper::after { display: none !important; } .elementor-form .select-caret-down-wrapper { display: none !important; } /* Select element */ .elementor-form .elementor-select-wrapper select { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; padding: 12px 0 !important; color: var(--eosv-navy) !important; font-family: var(--eosv-font-sans) !important; font-variation-settings: "wdth" 100 !important; font-size: 15px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; width: 100% !important; } /* Textarea */ .elementor-form .elementor-field-type-textarea .elementor-field-textual { resize: none !important; min-height: 96px !important; } /* Field group spacing */ .elementor-form .elementor-field-group { padding-bottom: 24px !important; margin-bottom: 0 !important; } /* Form wrapper */ .elementor-form-fields-wrapper { background: transparent !important; } /* Submit button */ .elementor-form .elementor-button { border-radius: 9999px !important; color: #fff !important; border: none !important; font-family: var(--eosv-font-sans) !important; font-variation-settings: "wdth" 100 !important; font-weight: 500 !important; font-size: 18px !important; padding: 24px 36px !important; letter-spacing: 0.35px !important; transition: background 0.2s ease !important; box-shadow: none !important; } /* Required asterisk */ .elementor-form .elementor-field-label .elementor-required { color: var(--eosv-coral-bright); margin-left: 2px; } /* Validation error */ .elementor-form .elementor-field.elementor-field-invalid { border-bottom-color: var(--eosv-coral) !important; } .elementor-form .elementor-message.elementor-message-danger { color: var(--eosv-coral); font-size: 12px; font-family: var(--eosv-font-sans); font-variation-settings: "wdth" 100; } /* Success message */ .elementor-form .elementor-message.elementor-message-success { color: var(--eosv-navy); font-size: 14px; font-family: var(--eosv-font-sans); font-variation-settings: "wdth" 100; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — Mobile (≤ 767px) Elementor mobile breakpoint ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Mobile header: always use the scrolled (solid) state */ #masthead { background: rgba(249, 248, 246, 0.96) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--eosv-border-light) !important; box-shadow: 0 1px 0 0 var(--eosv-border-light) !important; } /* Nav links and login always navy on mobile */ #masthead .elementor-item { color: var(--eosv-navy) !important; } #masthead .elementor-nav-menu .elementor-item:hover, #masthead .elementor-nav-menu .elementor-item:active, #masthead .elementor-nav-menu .elementor-item-active { color: var(--eosv-coral-bright) !important; } #masthead .elementor-menu-toggle { color: var(--eosv-navy) !important; } #masthead .elementor-widget-text-editor a { color: var(--eosv-navy) !important; } /* Dark logo always visible on mobile */ #eosv-logo-light { display: none !important; } #eosv-logo-dark { display: block !important; } /* Prevent Chrome/Safari auto-zoom on input focus (requires ≥ 16px) */ .elementor-form .elementor-field-textual, .elementor-form .elementor-select-wrapper select, .elementor-form textarea { font-size: 16px !important; } /* Force labels visible — Elementor sometimes clips them on mobile */ .elementor-form .elementor-field-label { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; height: auto !important; width: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; font-size: 10px !important; white-space: normal !important; } /* Strip mobile browser native form chrome */ .elementor-form input, .elementor-form select, .elementor-form textarea { -webkit-appearance: none !important; appearance: none !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Full-width field groups */ .elementor-form .elementor-field-group { width: 100% !important; float: none !important; } /* Form submit button: full width on mobile */ .elementor-form .elementor-button { width: 100% !important; padding: 18px 24px !important; } /* Sidebar: release sticky on mobile — layout stacks */ .eosv-sticky-sidebar { position: relative !important; top: auto !important; } /* ── Tabs on mobile: all titles together at top, content below ── Force the heading block before the content panel regardless of what order Elementor's own mobile CSS applies. */ .e-n-tabs { display: flex !important; flex-direction: column !important; } .e-n-tabs { display: flex !important; flex-direction: column !important; } .e-n-tabs .e-n-tabs-heading { order: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-bottom: 1px solid var(--eosv-border-light) !important; border-top: none !important; scrollbar-width: none !important; height: auto !important; min-height: 0 !important; padding-left: 20px !important; padding-right: 20px !important; } .e-n-tabs .e-n-tabs-heading::-webkit-scrollbar { display: none !important; } .e-n-tabs .e-n-tabs-content { order: 1 !important; /* Remove any top margin/padding that could cause positional jump */ margin-top: 0 !important; } .e-n-tabs .e-n-tab-title { flex: 0 0 33.333% !important; width: 33.333% !important; min-width: unset !important; white-space: normal !important; word-break: break-word !important; padding: 12px 10px 12px 10px !important; border-top: none !important; border-right: none !important; border-bottom: 2px solid transparent !important; /* All tabs get a left border — transparent on tab 1, grey on 2 & 3. Keeps the box model identical so text starts at the same x position. */ border-left: 1px solid transparent !important; margin: 0 !important; box-sizing: border-box !important; justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; } .e-n-tabs .e-n-tab-title[aria-selected="true"] { border-bottom-color: var(--eosv-coral-bright) !important; } /* Grey divider on 2nd and 3rd tabs only */ .e-n-tabs .e-n-tab-title:nth-child(2), .e-n-tabs .e-n-tab-title:nth-child(3) { border-left-color: var(--eosv-border-light) !important; } .e-n-tabs .e-n-tab-title .e-n-tab-title-text { width: 100% !important; font-size: 13px !important; line-height: 1.2 !important; align-items: flex-start !important; text-align: left !important; } .e-n-tabs .e-n-tab-title .tab-sub { width: 100% !important; font-size: 11px !important; line-height: 1.2 !important; padding-top: 4px !important; margin-top: 0 !important; text-align: left !important; } /* If Elementor switches Nested Tabs to accordion on mobile */ .e-n-tabs .e-n-accordion-item-title { border: none !important; border-bottom: 1px solid var(--eosv-border-light) !important; border-left: 3px solid transparent !important; padding: 16px 20px !important; background: transparent !important; font-family: var(--eosv-font-sans) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--eosv-body) !important; } .e-n-tabs .e-n-accordion-item-title[aria-expanded="true"] { color: var(--eosv-navy) !important; border-left-color: var(--eosv-coral-bright) !important; } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — Tablet (768px – 1024px) Hamburger nav active; right-side Apply button visible; Member Login text link hidden (elementor-hidden-tablet). ═══════════════════════════════════════════════════════════════ */ @media (min-width: 768px) and (max-width: 1024px) { /* Apply button: reduce size slightly for smaller header */ #eosv-apply-btn .elementor-button { font-size: 13px !important; padding: 10px 20px !important; } /* Tab titles: tighter horizontal layout */ .e-n-tabs .e-n-tab-title { padding: 16px 20px !important; min-width: 140px !important; } .e-n-tabs .e-n-tab-title .e-n-tab-title-text { font-size: 13px; } /* Sticky sidebar: slightly lower top offset for tablet header height */ .eosv-sticky-sidebar { top: 88px !important; } /* Form: force single-column layout */ .elementor-form .elementor-field-group { width: 100% !important; float: none !important; } /* Form submit button: full width on tablet */ .elementor-form .elementor-button { width: 100% !important; padding: 20px 32px !important; } } /* ═══════════════════════════════════════════════════════════════ POPUP TYPOGRAPHY OVERRIDES (JS Fail-safes) ═══════════════════════════════════════════════════════════════ */ /* Director Name - Force Fraunces 40px White */ #bio-name, #bio-name .elementor-widget-container, #bio-name .elementor-heading-title { font-family: var(--eosv-font-serif) !important; font-size: 40px !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -0.9px !important; color: #FFFFFF !important; font-variation-settings: "SOFT" 0, "WONK" 1 !important; } /* All other fields - Force Roboto */ #bio-role, #bio-role .elementor-widget-container, #bio-company, #bio-company .elementor-widget-container, #bio-since, #bio-since .elementor-widget-container, #bio-bio, #bio-bio .elementor-widget-container { font-family: var(--eosv-font-sans) !important; font-variation-settings: "wdth" 100 !important; } .director-data { display: none !important; } /* ═══════════════════════════════════════════════════════════════ POPUP CAROUSEL ARROWS ═══════════════════════════════════════════════════════════════ */ .eosv-dir-nav { position: absolute; top: 500px; /* Vertically centers the arrows */ transform: translateY(-50%); background: transparent; /* Background color of the button */ background-color: transparent; border: 0px solid var(--eosv-border-light); border-radius: 50%; /* Makes them perfect circles */ width: 48px; /* Button width */ height: 48px; /* Button height */ box-shadow: 0 4px 12px rgba(0,0,0,0.08); cursor: pointer; z-index: 9999; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; /* Arrow icon size */ transition: all 0.2s ease-in-out; } .eosv-dir-nav:hover { background: transparent; background-color: transparent; color: var(--eosv-coral-bright); } .eosv-dir-nav:focus { background: transparent; background-color: transparent; } /* Positioning the Left/Right arrows on Desktop */ #eosv-prev-dir { left: 12px; /* Pulls it halfway outside the left edge of the popup */ } #eosv-next-dir { right: 12px; /* Pulls it halfway outside the right edge */ } /* Mobile & Tablet Positioning */ @media (max-width: 767px) { #eosv-prev-dir { left: 10px; /* Pushes it slightly inside the popup on small screens */ opacity: 0.85; /* Makes them slightly see-through on mobile */ } #eosv-next-dir { right: 10px; opacity: 0.85; } } /* ═══════════════════════════════════════════════════════════════ DIRECTOR CARD HOVER INTERACTIONS (Image Only) ═══════════════════════════════════════════════════════════════ */ /* 1. Add the pointer finger to the whole card */ .eosv-director-trigger { cursor: pointer !important; } /* 2. Set the baseline transition speed for the image */ .eosv-director-trigger img { transition: transform 0.4s ease, box-shadow 0.4s ease !important; will-change: transform, box-shadow; /* Hardware acceleration for smooth animation */ } /* 3. On Hover: Lift the image, add the shadow, and zoom slightly */ .eosv-director-trigger:hover img { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important; } /* ═══════════════════════════════════════════════════════════════ POST CONTENT WIDGET (Frontend Gutenberg Blocks) Maps backend editor styles to the live Elementor Post Content ═══════════════════════════════════════════════════════════════ */ /* ─── Headings ─── */ .elementor-widget-theme-post-content h1, .elementor-widget-theme-post-content h2, .elementor-widget-theme-post-content h3, .elementor-widget-theme-post-content h4, .elementor-widget-theme-post-content h5, .elementor-widget-theme-post-content h6, .elementor-widget-theme-post-content .wp-block-heading { font-family: var(--eosv-font-serif) !important; font-variation-settings: "SOFT" 0, "WONK" 1 !important; color: var(--eosv-navy); margin-top: 1.5em; margin-bottom: 0.5em; } /* ─── Paragraphs & Body Text ─── */ .elementor-widget-theme-post-content p, .elementor-widget-theme-post-content .wp-block-paragraph, .elementor-widget-theme-post-content li { font-family: var(--eosv-font-sans) !important; font-variation-settings: "wdth" 100 !important; color: var(--eosv-text); line-height: 1.6; } /* ─── Lists & Coral Bullets ─── */ .elementor-widget-theme-post-content ul, .elementor-widget-theme-post-content ol, .elementor-widget-theme-post-content .wp-block-list { padding-left: 1.25em !important; margin-left: 0 !important; } .elementor-widget-theme-post-content ul li::marker, .elementor-widget-theme-post-content .wp-block-list:not(ol) li::marker { color: var(--eosv-coral-bright) !important; } .elementor-widget-theme-post-content ol li::marker, .elementor-widget-theme-post-content .wp-block-list[nodeName="OL"] li::marker { color: var(--eosv-coral-bright) !important; font-weight: 600 !important; } /* ─── Blockquotes ─── */ .elementor-widget-theme-post-content .wp-block-quote, .elementor-widget-theme-post-content blockquote { border-left: 4px solid var(--eosv-coral-bright) !important; padding-left: 1.25rem !important; margin-left: 0 !important; font-family: var(--eosv-font-serif) !important; font-variation-settings: "SOFT" 0, "WONK" 1 !important; font-size: 1.25rem !important; color: var(--eosv-navy) !important; font-style: normal !important; background: transparent !important; } /* ─── Links ─── */ .elementor-widget-theme-post-content a { color: var(--eosv-coral-bright); text-decoration: none; transition: all 0.2s ease; } .elementor-widget-theme-post-content a:hover { color: var(--eosv-coral-hover); text-decoration: underline; } /* Remove browser focus ring from Elementor Tabs */ .e-n-tab-title:focus, .e-n-tab-title:focus-visible, .e-n-tab-title:active { outline: none !important; box-shadow: none !important; }