.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --teal-900:#09252C; --teal-800:#1B3A4B; --teal-700:#1F4550; --blue-700:#28468D; --sky-400:#54B8DF; --sky-ink:#26769E; --script:#54B8DF; --cyan-300:#54DADF; --mint-200:#C0F2D7; --lime-200:#EBF982; --coral-500:#EF865B; --coral-soft:#F7AE8B; --mist-100:#B0CCD0; --fog-50:#F0F7F8; --ink:#0F333C; --ink-dim:#4C6F78; --on-dark:#E4F1F4; --on-dark-dim:#9FC0C8; --white:#FFFFFF; --line-light:#D8E7EA; --line-dark:rgba(255,255,255,0.14); --glass:rgba(255,255,255,0.05); --cta-ink:#0B3040; --foot-text:#C6D3F2; --foot-dim:#A9BAE6; --result-text:#D8E2FA; --font-body:Ubuntu; --font-script:Caveat; --r-sm:8px; --r-md:10px; --r-lg:25px; --r-pill:999px; --wrap:1200px; --head-h:82px; --stack:20px; --fs-body:17px; --sec-y:clamp(76px,8.5vw,128px); --col-gap:clamp(36px,5vw,80px); --head-gap:clamp(40px,4.5vw,64px); --gut:clamp(20px,5vw,48px); --card-pad:clamp(26px,3.5vw,44px); --fs-h1:clamp(2.4rem,5.2vw,3.9rem); --fs-h1-inner:clamp(2.1rem,3.9vw,3.05rem); --fs-h2:clamp(1.9rem,3.6vw,2.9rem); --fs-h3:clamp(1.15rem,1.7vw,1.4rem); --fs-lead:clamp(1.05rem,1.5vw,1.28rem); --fs-stat:clamp(3.4rem,7vw,5.2rem); --fs-line:clamp(1.6rem,2.4vw,2rem); --fs-cta:clamp(1.5rem,2.5vw,2.1rem); } /* Start custom CSS *//* ========================================================================== Altron Middle East: site-wide CSS for Elementor -------------------------------------------------------------------------- Goes into Elementor > Custom Code (or Site Settings > Custom CSS), loaded on every page. It holds only what V4 global classes cannot express: child .elementor-kit-8s, pseudo-elements, the hero veil and a few aspect-ratio queries. Everything else is a global class (03-classes.css) or a variable (01-variables.json). The colour and size tokens are the variables, read here as var(--label). ========================================================================== */ /* The TCC child theme sets body and h1-h6 from PulseBRAND tokens, which on this site are still the starter defaults (purple, Inter, Archivo). Point them at the Altron values so the theme layer agrees with Elementor. html:root outranks the theme's own :root block whatever order the two load in. The proper fix is to set these in PulseBRAND; this keeps the site right until then. */ html:root { --tcc-color-primary: var(--sky-400); --tcc-color-accent: var(--lime-200); --tcc-color-ink: var(--ink); --tcc-color-ink-muted: var(--ink-dim); --tcc-color-ground: var(--white); --tcc-color-ground-alt: var(--fog-50); --tcc-color-line: var(--line-light); --tcc-font-heading: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --tcc-font-body: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --tcc-radius-md: var(--r-md); --tcc-radius-lg: var(--r-lg); } :root { --grad-citrus: linear-gradient(45deg, var(--cyan-300), var(--lime-200)); --grad-ocean: linear-gradient(45deg, var(--blue-700), var(--cyan-300), var(--sky-400)); --grad-mint: linear-gradient(45deg, var(--mint-200), var(--cyan-300)); --ease: cubic-bezier(.16,1,.3,1); } body { font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :focus-visible { outline: 3px solid var(--sky-400); outline-offset: 3px; border-radius: 4px; } :is(h1,h2,h3) { text-wrap: balance; } /* ---------- the signature sentence ---------- Ubuntu light headline, the key words BOLD, the payoff in Caveat. In the editor: select the words and press Bold for Ubuntu 700, press Italic for the Caveat script phrase. Nothing else to remember. */ :is(h1,h2,h3,p) :is(b,strong) { font-weight: 700; } :is(h1,h2,h3,p,li) em { font-family: var(--font-script), cursive; font-style: normal; font-weight: 700; font-size: 1.16em; line-height: .95; color: var(--script); display: inline-block; } /* the one exception: the closing panel is sky-400, so a sky script would vanish */ .am-cta-panel em, .am-sub-band em { color: var(--teal-900); } /* ---------- buttons: the circled chevron before every label ---------- */ .am-btn::before { /* one currentColor disc, masked down to a 2px ring plus the chevron, so the ring always matches the label colour on every button variant */ content: ""; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 11px 11px no-repeat, radial-gradient(circle, transparent 9.5px, #000 10px); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 11px 11px no-repeat, radial-gradient(circle, transparent 9.5px, #000 10px); } /* ---------- text link: chevron after, nudges on hover ---------- */ .am-tlink::after { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .18s var(--ease); } .am-tlink:hover::after { transform: translateX(4px); } .am-sec--deep .am-tlink, .am-sec--deep-2 .am-tlink { color: var(--cyan-300); } /* ---------- icons inside tiles and lists ---------- */ .am-ic svg { width: 50%; height: 50%; } .am-ic--bare svg { width: 100%; height: 100%; } .am-check svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; color: var(--sky-ink); } .am-check--dark svg { color: var(--cyan-300); } /* checklist ticks drawn here, so a checklist is plain paragraphs to edit */ .am-check:not(:has(svg))::before, .am-li::before { content: ""; width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; background: var(--sky-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } .am-li::before { width: 15px; height: 15px; } .am-check--dark::before { background: var(--cyan-300); } .am-cap-head svg { color: var(--cyan-300); } .am-cap-head::-webkit-details-marker { display: none; } /* the mint tick before every .am-tick line, so a list is plain text to edit */ .am-tick::before { content: ""; width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A4B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px 10px no-repeat, var(--grad-mint); } /* ---------- hero ---------- The photograph is full-bleed; the veil carries the copy over it. The ramp is solid under the copy and gone before the subject and the viewfinder. Measured worst-pixel contrast for white type: 10.7:1 to 16:1. */ .am-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--teal-900) 0%, var(--teal-900) 33%, rgba(9,37,44,.94) 43%, rgba(9,37,44,.64) 52%, rgba(9,37,44,.18) 59%, rgba(9,37,44,0) 64%), linear-gradient(180deg, rgba(6,26,32,.62) 0%, rgba(6,26,32,0) 20%); } @media (min-width:1025px) and (max-width:1200px) { .am-hero::before { background: linear-gradient(90deg, var(--teal-900) 0%, var(--teal-900) 41%, rgba(9,37,44,.95) 53%, rgba(9,37,44,.68) 63%, rgba(9,37,44,.22) 72%, rgba(9,37,44,0) 79%), linear-gradient(180deg, rgba(6,26,32,.62) 0%, rgba(6,26,32,0) 20%); } .am-hero { min-height: min(84vh,700px); } .am-hero--inner { min-height: min(66vh,520px); } } /* stacked: the photograph becomes a band, the copy sits on solid teal below */ @media (max-width:1024px) { .am-hero::before { inset: 0 0 auto 0; height: min(84vw,400px); background: linear-gradient(180deg, rgba(6,26,32,.66) 0%, rgba(6,26,32,.10) 26%, rgba(9,37,44,.32) 56%, rgba(9,37,44,.78) 80%, rgba(9,37,44,.97) 93%, var(--teal-900) 99%); } .am-hero--inner::before { height: min(80vw,340px); } .am-hero--inner .am-hero-media { height: min(80vw,340px); object-position: 50% 28%; } } /* Once the panel is wider in proportion than the 16:9 frame, `cover` scales by WIDTH and eats the height. Past that point draw the frame at its own ratio, pinned right; the teal fills the rest. Triggered on aspect ratio, not width. The inner hero is short, so it is pinned from 1025px up. */ @media (min-width:1025px) and (min-aspect-ratio:1636/1000), (min-width:1566px) { .am-hero .am-hero-media { left: auto; width: auto; max-width: none; height: 100%; object-position: center; } } @media (min-width:1025px) { .am-hero--inner .am-hero-media { left: auto; width: auto; max-width: none; height: 100%; object-position: center; } .am-hero--inner .am-hero-inner { padding-top: calc(var(--head-h) + 44px); padding-bottom: 60px; } } /* V4 wraps an image; make the wrapper fill the hero too */ .am-hero .am-hero-media img { width: 100%; height: 100%; object-fit: inherit; object-position: inherit; } /* ---------- header ---------- */ /* body raises it above Elementor's own .elementor .am-head rule, which sets transparent */ body .am-head.is-stuck, body .am-head.is-open { background: var(--teal-900); box-shadow: 0 6px 26px rgba(9,37,44,.28); } .am-logo svg, .am-logo img { width: 100%; height: auto; display: block; } /* signed-in editors: sit the fixed header below the WordPress admin bar */ body.admin-bar .am-head { top: 32px; } @media (max-width:782px) { body.admin-bar .am-head { top: 46px; } } /* nothing hides under the fixed header when the editor scrolls to an anchor */ html { scroll-padding-top: calc(var(--head-h) + 16px); } /* ---------- Services dropdown (added 20 Oct 2026) ---------- After v4's .altme-nav__grp. Opens on hover (mouse) and on keyboard focus, so it works with no script; 05-site.js adds .is-open on click when it has the dropdown code. The caret is drawn here. */ .am-nav-top::after { content: ""; width: 13px; height: 13px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .22s var(--ease); } /* Hello Elementor's reset.css turns every