/* ============================================== MASTER CSS — EL-TRANSLATIONS (2026 SYSTEM) Build: Clean + Stable + Responsive (No random gutters) Elementor Pro + custom.css token system Global Colors (CONFIRMED): - Primary : #111827 - Secondary : #2D368F - Text : #374151 - Accent : #0000FF Custom colors: - Section BG: #F3F5FF - White : #FFFFFF Requires: - Header container class: .smart-header - Logo widget wrapper class: .site-logo - Mega dropdown containers class: .mega-dropdown - Optional: button class .eltra-btn ============================================== */ /* ============================================== 1) TOKENS (Single source of truth) - Pulls from Elementor globals first (safe fallbacks) - Option A: Separate Elementor font families: Latin -> "Helvetica Now Display" Greek -> "Helvetica Neue LT W1G" ============================================== */ /* Default (Latin-based languages) */ :root{ /* Elementor global colors (fallbacks match your setup) */ --el-primary: var(--e-global-color-primary, #111827); --el-secondary: var(--e-global-color-secondary, #2D368F); --el-text: var(--e-global-color-text, #374151); --el-accent: var(--e-global-color-accent, #0000FF); /* Brand semantics */ --brand-ink: var(--el-primary); --brand-support: var(--el-secondary); --brand-accent: var(--el-accent); --brand-accent-h: #0000CC; --brand-accent-soft: #4D4DFF; /* Ink scale */ --ink-900: var(--el-primary); --ink-700: var(--el-text); --ink-600: #4B5563; --ink-400: #9CA3AF; /* Surfaces */ --surface: var(--e-global-color-white, #FFFFFF); --surface-soft: #F3F5FF; /* Borders & Shadows */ --border-1: rgba(17,24,39,.12); --shadow-1: 0 10px 26px rgba(0,0,0,.10); --shadow-2: 0 28px 90px rgba(0,0,0,.18); /* Content width */ --content-width: 1290px; /* Page padding system */ --page-pad: 0rem; --page-pad-tablet: 0rem; --page-pad-mobile: 1rem; /* Motion */ --dur-fast: .25s; --dur: .45s; --ease: cubic-bezier(.2,.9,.2,1); /* Header */ --hdr-blur: 16px; --hdr-glass: rgba(255,255,255,.90); --hdr-border: rgba(0,0,0,.06); --hdr-pad-y: 1rem; --hdr-pad-y-scrolled: .625rem; /* Nav */ --nav-pad-y: .75rem; --nav-pad-y-scrolled: .5rem; --nav-line: 1.2; --nav-line-scrolled: 1.1; /* Mega */ --megaTop: 96px; --mega-w: 1290px; --mega-pad: 1.625rem; --mega-radius: 1.375rem; --mega-border: rgba(0,0,0,.12); --mega-bg: rgba(255,255,255,.995); /* Gradients */ --brand-grad: linear-gradient(90deg, var(--brand-support) 0%, var(--brand-accent) 50%, var(--brand-support) 100%); /* Fonts (Latin default) */ --font-display: "Helvetica Now Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-text: "Helvetica Now Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Greek override (requires ) */ html[lang="el"]{ --font-display: "Helvetica Neue LT W1G", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-text: "Helvetica Neue LT W1G", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Optional: also catch explicit Greek spans inside mixed pages */ :lang(el){ font-family: "Helvetica Neue LT W1G", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Responsive page padding */ @media (max-width: 1024px){ :root{ --page-pad: var(--page-pad-tablet); } } @media (max-width: 767px){ :root{ --page-pad: var(--page-pad-mobile); } } /* ============================================== 2) BASE RESET / GLOBAL CONSISTENCY ============================================== */ html, body{ margin: 0 !important; padding: 0 !important; width: 100% !important; overflow-x: hidden !important; } html{ scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ font-family: var(--font-text); color: var(--ink-700); line-height: 1.6; text-rendering: geometricPrecision; background: var(--surface); } /* Headings */ h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); color: var(--ink-900); } /* Links */ a{ color: var(--brand-accent); text-decoration: none; transition: color var(--dur-fast) ease; } a:hover{ color: var(--brand-accent-h); } /* Focus ring */ :focus-visible{ outline: 2px solid rgba(0,0,255,.35); outline-offset: 2px; } /* ============================================== 3) ELEMENTOR GUTTER CONTROL ============================================== */ :root{ --container-default-padding-top: 0px; --container-default-padding-right: 0px; --container-default-padding-bottom: 0px; --container-default-padding-left: 0px; } .e-con > .e-con-inner{ max-width: var(--content-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--page-pad) !important; padding-right: var(--page-pad) !important; } .e-con--full > .e-con-inner, .e-con--boxed > .e-con-inner{ width: 100% !important; } .e-con, .elementor-section, .elementor-container{ overflow: visible; } /* ============================================== 4) SMART HEADER ============================================== */ .smart-header{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999; background: transparent !important; box-shadow: none !important; border-bottom: 0 !important; padding-top: var(--hdr-pad-y) !important; padding-bottom: var(--hdr-pad-y) !important; transition: padding var(--dur-fast) ease-in-out, box-shadow var(--dur-fast) ease-in-out, border-color var(--dur-fast) ease-in-out; } .smart-header::before{ content:""; position:absolute; inset:0; z-index:-1; background: var(--hdr-glass); border-bottom: 1px solid var(--hdr-border); -webkit-backdrop-filter: blur(var(--hdr-blur)); backdrop-filter: blur(var(--hdr-blur)); opacity: 0; transition: opacity var(--dur-fast) ease-in-out; } .smart-header.is-scrolled{ padding-top: var(--hdr-pad-y-scrolled) !important; padding-bottom: var(--hdr-pad-y-scrolled) !important; box-shadow: var(--shadow-1) !important; } .smart-header.is-scrolled::before{ opacity: 1; } .smart-header .e-con-inner{ padding-top: 0 !important; padding-bottom: 0 !important; } .smart-header .site-logo{ display: flex; align-items: center; height: 2.75rem; } .smart-header .site-logo img{ height: 2.75rem !important; width: auto !important; transform-origin: left center; transition: transform var(--dur-fast) cubic-bezier(.22,1,.36,1); will-change: transform; } .smart-header.is-scrolled .site-logo img{ transform: scale(.94); } .smart-header .elementor-nav-menu a{ padding-top: var(--nav-pad-y) !important; padding-bottom: var(--nav-pad-y) !important; line-height: var(--nav-line) !important; } .smart-header.is-scrolled .elementor-nav-menu a{ padding-top: var(--nav-pad-y-scrolled) !important; padding-bottom: var(--nav-pad-y-scrolled) !important; line-height: var(--nav-line-scrolled) !important; } .smart-header .elementor-button, .smart-header .elementor-button *{ transform: none !important; } @media (max-width: 767px){ .smart-header{ padding-top: .75rem !important; padding-bottom: .75rem !important; } .smart-header.is-scrolled{ padding-top: .625rem !important; padding-bottom: .625rem !important; } .smart-header .site-logo img, .smart-header.is-scrolled .site-logo img{ transform: scale(1) !important; } } /* ============================================== 5) MEGA MENU ============================================== */ .smart-header .mega-dropdown{ position: fixed !important; top: calc(var(--megaTop) + .5rem) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(var(--mega-w), calc(100vw - 3rem)) !important; max-width: var(--mega-w) !important; z-index: 9998 !important; background: var(--mega-bg) !important; border: 1px solid var(--mega-border) !important; border-radius: var(--mega-radius) !important; box-shadow: var(--shadow-2) !important; padding: var(--mega-pad) !important; overflow: hidden !important; color: var(--ink-900) !important; } .smart-header .mega-dropdown a{ font-family: var(--font-display); font-weight: 500 !important; color: var(--ink-900) !important; text-decoration: none !important; display: inline-flex !important; width: fit-content !important; max-width: max-content !important; } .smart-header .mega-dropdown p, .smart-header .mega-dropdown .elementor-widget-text-editor{ font-family: var(--font-text); font-weight: 400 !important; color: rgba(17,24,39,.62) !important; } .smart-header .mega-dropdown a{ position: relative; } .smart-header .mega-dropdown a::after{ content:""; position:absolute; left:0; bottom:-.125rem; width:100%; height:.0625rem; background: var(--brand-grad); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) cubic-bezier(.22,1,.36,1); } .smart-header .mega-dropdown a:hover::after{ transform: scaleX(1); } .smart-header .mega-dropdown a:hover{ color: var(--brand-accent) !important; } @media (max-width: 767px){ .smart-header .mega-dropdown{ width: calc(100vw - 1.25rem) !important; max-width: none !important; padding: 1.125rem 1rem !important; border-radius: 1rem !important; } } /* ============================================== 6) MOBILE STICKY CTA ============================================== */ .mobile-sticky-cta{ position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-height: 5.625rem; z-index: 9999; pointer-events: none; touch-action: pan-y; opacity: 0; transform: translateY(110%); transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease; } .mobile-sticky-cta.is-visible{ opacity: 1; transform: translateY(0); } .mobile-sticky-cta a, .mobile-sticky-cta button{ pointer-events: auto; touch-action: manipulation; } /* ============================================== 7) ELTRA BUTTON (Circle Arrow) ============================================== */ .eltra-btn .elementor-button, .eltra-btn .elementor-button-content-wrapper{ background: transparent !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: .75rem; } .eltra-btn .elementor-button-text{ color: var(--ink-900) !important; font-weight: 600 !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; transition: color var(--dur-fast) ease; } .eltra-btn .elementor-button-icon{ background-color: var(--ink-900) !important; color: #fff !important; width: 2rem; height: 2rem; font-size: .875rem; border-radius: 50%; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease; } .eltra-btn .elementor-button:hover .elementor-button-text{ color: var(--brand-accent) !important; } .eltra-btn .elementor-button:hover .elementor-button-icon{ background-color: var(--brand-accent) !important; transform: rotate(45deg); } .eltra-btn .elementor-button:hover .elementor-button-icon i, .eltra-btn .elementor-button:hover .elementor-button-icon svg{ color: #fff !important; fill: #fff !important; } /* ========================================= MOBILE FINAL PASS ========================================= */ @media (max-width: 767px){ :root{ --page-pad: 1rem; } .e-con > .e-con-inner{ padding-left: var(--page-pad) !important; padding-right: var(--page-pad) !important; } .e-con .e-con > .e-con-inner{ padding-left: 0 !important; padding-right: 0 !important; } body{ --first-section-offset: 5.25rem; } main.site-content, #content, .site-content{ padding-top: var(--first-section-offset); } .smart-header .mega-dropdown{ width: calc(100vw - (var(--page-pad) * 2)) !important; left: 50% !important; transform: translateX(-50%) !important; } .eltra-btn .elementor-button-icon{ width: 2.25rem !important; height: 2.25rem !important; } } @media (max-width: 767px){ .smart-header .elementor-nav-menu--main .elementor-item{ font-weight: 500 !important; letter-spacing: -0.01em !important; } } /* ========================================= MOBILE/TABLET HEADER — FORCE TRANSPARENT ON TOP ========================================= */ @media (max-width: 1024px){ .smart-header{ background: transparent !important; box-shadow: none !important; border-bottom: 0 !important; } .smart-header .e-con, .smart-header .e-con-inner, .smart-header .elementor-container, .smart-header .elementor-section, .smart-header .elementor-column{ background: transparent !important; box-shadow: none !important; } .smart-header::before{ opacity: 0 !important; } .smart-header.is-scrolled{ box-shadow: var(--shadow-1) !important; border-bottom: 1px solid var(--hdr-border) !important; } .smart-header.is-scrolled::before{ opacity: 1 !important; } } @media (max-width: 1024px){ .smart-header.elementor-sticky--effects{ background: transparent !important; } } /* ========================================= HARD LOCK — Prevent uppercase buttons ========================================= */ .elementor-widget-button .elementor-button, .elementor-widget-form .elementor-button{ text-transform: none !important; }