.elementor-kit-242{--e-global-color-primary:#1B2D45;--e-global-color-secondary:#263B55;--e-global-color-text:#111827;--e-global-color-accent:#3B5092;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Plus Jakarta Sans";--e-global-typography-secondary-font-size:14px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:400;--e-global-typography-3671614-font-family:"Plus Jakarta Sans";--e-global-typography-3671614-font-weight:700;--e-global-typography-52cbd12-font-family:"DM Sans";--e-global-typography-52cbd12-font-weight:400;--e-global-typography-4aa9109-font-family:"JetBrains Mono";--e-global-typography-4aa9109-font-weight:400;background-color:#1B2D45;}.elementor-kit-242 button,.elementor-kit-242 input[type="button"],.elementor-kit-242 input[type="submit"],.elementor-kit-242 .elementor-button{background-color:#3B5092;font-family:"Plus Jakarta Sans", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#FFFFFF59;border-radius:6px 6px 6px 6px;padding:14px 24px 14px 24px;}.elementor-kit-242 button:hover,.elementor-kit-242 button:focus,.elementor-kit-242 input[type="button"]:hover,.elementor-kit-242 input[type="button"]:focus,.elementor-kit-242 input[type="submit"]:hover,.elementor-kit-242 input[type="submit"]:focus,.elementor-kit-242 .elementor-button:hover,.elementor-kit-242 .elementor-button:focus{background-color:#2E3F78;}.elementor-kit-242 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;}}
/* Start custom CSS *//* ============================================
STELIA NORTH AMERICA — ELEMENTOR CSS
Paste into: Elementor → Site Settings → Custom CSS
============================================ */
/* ============================================
FONTS — paste into Theme → Custom Code →
============================================
============================================ */
/* ============================================
1. DESIGN TOKENS
============================================ */
:root {
--accent-blue: #3D5AFE;
--text-primary: #1B2D45;
--text-body: #3A4658;
--text-light: #5B6677;
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;
}
/* ============================================
2. GLOBAL / BODY
============================================ */
body {
background-color: #1B2D45;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 80px 80px;
}
a[href^="tel"] { color: inherit; }
/* ============================================
3. SECTION BACKGROUNDS
Apply to outer Section/Container
============================================ */
.stelia-bg-white { background-color: #FFFFFF; }
.stelia-bg-light { background-color: #F5F7FA; }
.stelia-bg-cream { background-color: #E9E3D8; }
.stelia-bg-navy { background-color: #1B2D45; }
.stelia-bg-navy-deep { background-color: #131F30; }
/* ============================================
4. HERO
============================================ */
.hero-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #5BD27E;
box-shadow: 0 0 0 0 rgba(91, 210, 126, 0.5);
animation: hero-pulse 2s ease-in-out infinite;
}
@keyframes hero-pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(91, 210, 126, 0.5); }
50% { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(91, 210, 126, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(91, 210, 126, 0); }
}
.hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(40px, 6vw, 84px);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.03em;
color: #FFFFFF;
margin: 0 0 28px 0;
}
.hero-italic-steel {
font-style: italic;
font-weight: 300;
color: #CDD4DE;
}
.hero-italic-green {
font-style: italic;
font-weight: 300;
color: #8899BB;
}
/* ============================================
5. LOGO GRID
============================================ */
.logo-grid-wrap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
width: 100%;
}
.logo-grid-wrap img {
background: white;
border-radius: 12px;
padding: 12px;
width: 100%;
height: 60px;
object-fit: contain;
display: block;
}
.logo-eyebrow { white-space: nowrap; }
/* ============================================
6. EYEBROW
============================================ */
.stelia-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-blue);
margin: 0 0 24px 0;
}
.stelia-eyebrow.on-dark {
color: #A3B1C4;
}
/* ============================================
7. HEADINGS (H2)
============================================ */
.stelia-h2 {
font-family: var(--font-heading);
font-size: clamp(30px, 3.4vw, 52px);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 24px 0;
}
.stelia-h2.on-dark { color: #FFFFFF; }
/* ============================================
8. BODY / PARAGRAPH TEXT
============================================ */
.stelia-body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
color: var(--text-body);
margin: 0 0 18px 0;
}
.stelia-body.on-dark { color: #CDD4DE; }
/* 15px — right-column section descriptions */
.stelia-section-body {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
color: var(--text-body);
margin: 0 0 18px 0;
}
.stelia-section-body.on-dark { color: #A3B1C4; }
/* ============================================
9. BUTTONS
============================================ */
/* Filled navy — "About Us" */
.stelia-btn-primary .elementor-button {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding: 14px 26px !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
white-space: nowrap;
border: 0;
border-radius: 6px !important;
background-color: #263B55 !important;
color: #FFFFFF !important;
transition: all 0.25s ease;
}
.stelia-btn-primary .elementor-button:hover {
background-color: #2E4A6B !important;
transform: translateY(-1px);
}
/* Accent blue — "Contact", "See all openings" */
.stelia-btn-accent .elementor-button {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding: 14px 26px !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
border: 0;
border-radius: 6px !important;
background-color: #3B5092 !important;
color: #FFFFFF !important;
transition: all 0.25s ease;
}
.stelia-btn-accent .elementor-button:hover {
background-color: #4A63A8 !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(59,80,146,0.35);
}
/* Ghost underline on light — "For Suppliers" */
.stelia-btn-ghost .elementor-button {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 0 0 4px 0 !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #3B5092 !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid currentColor !important;
border-radius: 0 !important;
transition: gap 0.2s ease;
}
.stelia-btn-ghost .elementor-button:hover {
gap: 14px;
background: transparent !important;
}
/* Ghost on dark backgrounds */
.stelia-btn-ghost-dark .elementor-button {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 0 0 4px 0 !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #FFFFFF !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.5) !important;
border-radius: 0 !important;
transition: gap 0.2s ease;
}
.stelia-btn-ghost-dark .elementor-button:hover {
gap: 14px;
background: transparent !important;
color: #FFFFFF !important;
}
/* Arrow icons */
.stelia-btn-primary .elementor-button-icon svg,
.stelia-btn-accent .elementor-button-icon svg,
.stelia-btn-ghost .elementor-button-icon svg,
.stelia-btn-ghost-dark .elementor-button-icon svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
/* FA icon sizing */
.stelia-btn-primary .elementor-button-icon i,
.stelia-btn-accent .elementor-button-icon i,
.stelia-btn-ghost .elementor-button-icon i,
.stelia-btn-ghost-dark .elementor-button-icon i {
font-size: 12px;
vertical-align: middle;
line-height: 1;
}
/* Text link with arrow — inline use */
.stelia-link-arrow {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-blue);
border-bottom: 1.5px solid var(--accent-blue);
padding-bottom: 2px;
text-decoration: none;
}
.stelia-link-arrow:hover { opacity: 0.75; }
/* CTA row wrapper */
.stelia-cta-row {
display: flex;
align-items: center;
gap: 24px;
margin-top: 40px;
}
/* ============================================
10. ABOUT — floating card over image
============================================ */
.stelia-float-card > .elementor-widget-container {
background: #FFFFFF;
padding: 20px 24px;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.stamp {
width: 48px;
min-width: 48px;
height: 48px;
background: #3B5092;
border-radius: 50%;
display: grid;
place-items: center;
color: #FFFFFF;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 800;
}
.card-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: #1B2D45;
}
.card-subtext {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6B7280;
margin-top: 4px;
}
/* ============================================
11. ABOUT — numbered bullet points
============================================ */
.stelia-point {
display: flex;
gap: 24px;
padding: 20px 0;
border-top: 1px solid #E5E7EB;
}
.stelia-point:last-child {
border-bottom: 1px solid #E5E7EB;
}
.stelia-point-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent-blue);
padding-top: 3px;
min-width: 28px;
flex-shrink: 0;
}
.stelia-point-title {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.stelia-point-body {
font-size: 14px;
color: var(--text-light);
line-height: 1.6;
}
/* ============================================
12. CAPABILITIES GRID (02)
============================================ */
#capabilities,
.stelia-capabilities {
background: #E9E3D8;
}
.stelia-cap-grid {
overflow: hidden !important;
gap: 1px !important;
}
.stelia-cap-cell {
background: #FFFFFF !important;
padding: 36px 32px !important;
min-height: 280px !important;
position: relative !important;
}
@media (max-width: 767px) {
.stelia-cap-cell { min-height: 0 !important; padding: 28px 24px !important; }
}
/* Used inside HTML widget */
.stelia-cap-num {
position: absolute;
top: 28px;
right: 28px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: #7B8FA8;
letter-spacing: 0.1em;
}
.stelia-cap-icon {
width: 52px;
height: 52px;
border-radius: 10px;
background: rgba(59,80,146,0.08);
display: flex;
align-items: center;
justify-content: center;
color: #3B5092;
margin-bottom: 12px;
font-size: 20px;
}
.stelia-cap-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: #1B2D45;
margin-top: 8px;
}
.stelia-cap-desc {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: #374151;
margin-top: 8px;
}
/* ============================================
13. PROGRAMS GRID (03)
============================================ */
.stelia-programs {
background-color: #1B2D45;
}
.stelia-programs-grid {
gap: 24px !important;
}
@media (max-width: 1024px) {
.stelia-programs .stelia-programs-grid.stelia-programs-grid,
.elementor-element .stelia-programs-grid.stelia-programs-grid {
grid-template-columns: 1fr !important;
}
}
.stelia-programs-card {
position: relative !important;
border-radius: 16px !important;
overflow: hidden !important;
aspect-ratio: 4 / 3 !important;
min-height: 380px !important;
min-width: 0 !important; /* allow card to shrink below its aspect-ratio intrinsic width — prevents mobile overflow */
isolation: isolate !important;
}
/* Gradient overlay — sits on top of background image */
.stelia-programs-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(19,31,48,0.15) 0%,
rgba(19,31,48,0.45) 50%,
rgba(19,31,48,0.95) 100%
);
z-index: 1;
}
/* All inside HTML widget */
.stelia-prog-tag {
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
padding: 8px 14px;
background: rgba(59,80,146,0.85);
backdrop-filter: blur(8px);
border-radius: 6px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #FFFFFF;
}
.stelia-prog-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #7B8FA8;
margin-bottom: 8px;
}
.stelia-prog-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.015em;
color: #FFFFFF;
margin: 0 0 22px;
}
.stelia-prog-stat {
padding: 12px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
gap: 4px;
min-height: 64px;
}
/* Two stats side-by-side */
.stelia-prog-stats {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px;
}
/* Stack the two stats on phones so neither gets clipped */
@media (max-width: 767px) {
.stelia-prog-stats { grid-template-columns: 1fr !important; }
/* Drop the 4:3 ratio on phones — combined with min-height it forces the
card ~507px wide and overflows the screen. Let it be full-width instead. */
.stelia-programs-card {
aspect-ratio: auto !important;
width: 100% !important;
max-width: 100% !important;
min-height: 420px !important;
}
}
.stelia-prog-stat-n {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 19px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
color: #FFFFFF;
}
.stelia-prog-stat-l {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.3;
color: #A3B1C4;
}
/* ============================================
13b. FACILITIES (04)
============================================ */
.stelia-facility {
background-color: #E4E7EC;
}
/* Outer grid — big hero left, two stacked cards right */
.stelia-facility-grid {
display: grid !important;
grid-template-columns: 1.5fr 1fr !important;
gap: 24px !important;
}
@media (max-width: 900px) {
.stelia-facility-grid { grid-template-columns: 1fr !important; }
}
/* ---- LEFT: photo hero with gradient + label overlay ---- */
.stelia-facility-hero {
position: relative !important;
border-radius: 16px !important;
overflow: hidden !important;
min-height: 460px !important;
isolation: isolate !important;
}
.stelia-facility-hero .stelia-facility-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.stelia-facility-hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 40%, rgba(19,31,48,0.92));
}
.stelia-facility-overlay {
position: absolute;
left: 32px;
right: 32px;
bottom: 32px;
z-index: 2;
color: #FFFFFF;
}
.stelia-facility-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #A3B1C4;
margin-bottom: 8px;
}
.stelia-facility-hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(24px, 2.4vw, 36px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: #FFFFFF;
margin: 0 0 6px;
}
.stelia-facility-hero-text {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
line-height: 1.6;
color: #A3B1C4;
max-width: 38ch;
margin: 0;
}
/* ---- RIGHT: two stat cards stacked ---- */
.stelia-facility-aside {
display: grid !important;
grid-template-rows: 1fr 1fr !important;
gap: 24px !important;
}
.stelia-facility-card {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 18px 32px;
display: flex;
flex-direction: column;
height: 100%;
}
/* Second card — dark variant */
.stelia-facility-card.is-dark {
background: #263B55;
border: none;
color: #FFFFFF;
}
.stelia-facility-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(40px, 4.5vw, 60px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 0.95;
color: #1B2D45;
margin-top: 14px;
}
.stelia-facility-card.is-dark .stelia-facility-num { color: #FFFFFF; }
.stelia-facility-num small {
font-size: 0.5em;
font-weight: 600;
color: #3B5092;
margin-left: 8px;
}
.stelia-facility-card.is-dark .stelia-facility-num small { color: #6B83BF; }
.stelia-facility-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: #263B55;
max-width: 22ch;
margin-top: 14px;
}
.stelia-facility-card.is-dark .stelia-facility-label { color: #A3B1C4; font-weight: 500; }
.stelia-facility-desc {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
line-height: 1.6;
color: #6B7280;
margin-top: auto;
padding-top: 18px;
}
.stelia-facility-card.is-dark .stelia-facility-desc { color: #7B8FA8; }
/* ============================================
14. FOOTER (fully-native Elementor build)
============================================ */
/* Section — navy background + decorative grid overlay */
.stelia-footer-section {
background: #131F30 !important;
position: relative;
overflow: hidden;
padding: clamp(64px, 7vw, 104px) 0 36px !important;
}
.stelia-footer-section::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .4;
background-image:
linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 80px 80px;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
/* Inner container — keeps every widget above the grid */
.stelia-footer-inner {
position: relative;
z-index: 1;
max-width: 1280px;
}
/* Top row — five columns + divider */
.stelia-footer-top {
display: grid !important;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr !important;
gap: 48px !important;
padding-bottom: 56px !important;
border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 1080px) {
.stelia-footer-top { grid-template-columns: 1fr 1fr 1fr !important; }
.stelia-footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
.stelia-footer-top { grid-template-columns: 1fr !important; gap: 32px !important; padding-bottom: 40px !important; }
}
/* Brand blurb (Text Editor) */
.stelia-footer-blurb {
font-family: 'DM Sans', sans-serif;
font-size: 14px; line-height: 1.7;
color: #A3B1C4 !important; max-width: 30ch;
}
/* Certification pills (Button widgets) */
.stelia-footer-cert { display: flex; gap: 12px; flex-wrap: wrap; }
/* Wrapper is just a container — no border/padding so it doesn't stack with the button */
.stelia-footer-badge {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.stelia-footer-badge,
.stelia-footer-badge .elementor-button {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: .1em !important;
color: #A3B1C4 !important;
fill: #A3B1C4 !important;
}
.stelia-footer-badge .elementor-button {
padding: 6px 12px !important;
border-radius: 4px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: transparent !important;
}
/* Column heading (Heading widget) */
.stelia-footer-heading,
.stelia-footer-heading .elementor-heading-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 11px !important; font-weight: 800 !important;
letter-spacing: 2px !important; text-transform: uppercase !important;
color: #A3B1C4 !important;
margin: 0 0 22px !important;
}
/* Link columns (WordPress Menu or Icon List widget) */
.stelia-footer-link ul,
.stelia-footer-link .elementor-icon-list-items { gap: 12px; }
.stelia-footer-link a,
.stelia-footer-link .elementor-item,
.stelia-footer-link .elementor-icon-list-text {
font-family: 'DM Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #A3B1C4 !important;
padding: 6px 0 !important;
transition: color .2s;
}
.stelia-footer-link a:hover,
.stelia-footer-link .elementor-item:hover { color: #fff !important; }
/* Contact block (Text Editor) */
.stelia-footer-contact {
font-family: 'DM Sans', sans-serif;
font-size: 13px; line-height: 1.7;
color: #A3B1C4 !important; max-width: 30ch;
}
.stelia-footer-phone {
font-family: 'JetBrains Mono', monospace;
font-size: 13px; letter-spacing: .05em;
color: #A3B1C4 !important;
}
.stelia-footer-phone a { color: inherit; text-decoration: none; }
/* Bottom bar */
.stelia-footer-bottom {
display: flex !important;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 26px;
}
.stelia-footer-legal { display: flex; gap: 24px; align-items: center; }
.stelia-footer-meta,
.stelia-footer-meta a,
.stelia-footer-meta .elementor-item {
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
letter-spacing: .08em !important;
color: #7B8FA8 !important;
}
.stelia-footer-legal a:hover,
.stelia-footer-legal .elementor-item:hover { color: #fff !important; }
@media (max-width: 767px) {
.stelia-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ============================================
15. STORY / TIMELINE (About page — section 01)
============================================ */
.stelia-timeline {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid #E5E7EB;
}
.stelia-timeline-row {
display: grid !important;
grid-template-columns: 160px 32px 1fr !important;
gap: 48px !important;
padding: 44px 0 !important;
border-bottom: 1px solid #E5E7EB !important;
align-items: start !important;
}
.stelia-timeline-year { padding-top: 6px; }
.stelia-timeline-index {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.1em;
color: #3B5092;
}
.stelia-timeline-year-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 44px;
font-weight: 700;
color: #1B2D45;
letter-spacing: -0.02em;
line-height: 1;
margin-top: 12px;
}
/* Middle column: the connecting vertical rule + dot */
.stelia-timeline-rule {
position: relative;
align-self: stretch;
display: flex;
justify-content: center;
}
.stelia-timeline-rule::before {
content: "";
position: absolute;
top: 0;
bottom: -44px; /* bridges the row padding so the line is continuous */
width: 1px;
background: #E5E7EB;
}
.stelia-timeline-row:last-child .stelia-timeline-rule::before { bottom: 0; }
.stelia-timeline-dot {
position: relative;
margin-top: 18px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #FFFFFF;
border: 2px solid #3B5092;
z-index: 1;
}
.stelia-timeline-body { padding-top: 12px; }
.stelia-timeline-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
font-weight: 700;
color: #1B2D45;
letter-spacing: -0.01em;
line-height: 1.2;
}
.stelia-timeline-desc {
margin-top: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 15px;
color: #374151;
line-height: 1.65;
max-width: 64ch;
}
@media (max-width: 1080px) {
.stelia-timeline-row { grid-template-columns: 120px 24px 1fr !important; gap: 24px !important; }
.stelia-timeline-year-num { font-size: 32px; }
}
@media (max-width: 767px) {
.stelia-timeline-row { grid-template-columns: 1fr !important; gap: 8px !important; padding: 28px 0 !important; }
.stelia-timeline-rule { display: none !important; }
.stelia-timeline-year { padding-top: 0; }
.stelia-timeline-year-num { font-size: 28px; margin-top: 4px; }
.stelia-timeline-body { padding-top: 0; }
}
/* ============================================
16. MISSION & VALUES (About page — section 02)
============================================ */
.stelia-values,
.stelia-values > .e-con-inner,
.stelia-values > .elementor-container {
background-color: #1B2D45 !important;
}
/* 2×2 grid. The 1px gap reveals the hairline background below,
and each cell paints navy over it — so the gaps read as dividers. */
.stelia-values-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1px !important;
padding: 0 !important; /* kill Elementor's default container padding so the hairlines meet the border */
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
@media (max-width: 767px) {
.stelia-values-grid { grid-template-columns: 1fr !important; }
}
.stelia-values-cell {
background: #1B2D45 !important;
padding: 56px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important; /* stack from the top — don't spread the widgets */
gap: 0 !important; /* spacing comes from the margins below, not a flex gap */
}
/* Neutralise Elementor's per-widget margins so the margins below control the rhythm */
.stelia-values-cell > .elementor-element,
.stelia-values-cell .elementor-widget { margin: 0 !important; }
@media (max-width: 767px) {
.stelia-values-cell { padding: 32px !important; }
}
/* Number — JetBrains Mono kicker (Heading or Text widget) */
.stelia-values-num,
.stelia-values-num .elementor-heading-title,
.stelia-values-num .elementor-widget-container {
font-family: 'JetBrains Mono', monospace !important;
font-size: 12px !important;
letter-spacing: 0.12em !important;
color: #7B8FA8 !important;
}
.stelia-values-num { margin: 0 !important; }
/* Title — Heading widget */
.stelia-values-title,
.stelia-values-title .elementor-heading-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 28px !important;
font-weight: 700 !important;
color: #FFFFFF !important;
letter-spacing: -0.015em !important;
line-height: 1.2 !important;
margin-top: 28px;
}
.stelia-values-title { margin: 28px 0 0 !important; max-width: 22ch; }
/* Description — Text Editor widget */
.stelia-values-desc,
.stelia-values-desc .elementor-widget-container,
.stelia-values-desc p {
font-family: 'DM Sans', sans-serif !important;
font-size: 15px !important;
color: #A3B1C4 !important;
line-height: 1.7 !important;
margin-top: 18px;
}
/* ============================================
17. FOR SUPPLIERS — document library
Built from NATIVE Elementor widgets (no HTML widget),
so the client edits/adds documents in the visual editor.
Each row = a linked Container holding:
Heading .stelia-doc-ref · Heading .stelia-doc-title ·
Heading .stelia-doc-type · Icon .stelia-doc-arrow
Selectors target both the Elementor widget wrappers AND
plain spans (so the preview file renders identically).
============================================ */
/* Section background (light) */
.stelia-docs { background-color: #F5F7FA; }
/* Parent Container — the white card holding all rows */
.stelia-doc-list {
background: #FFFFFF !important;
border: 1px solid #E5E7EB !important;
border-radius: 16px !important;
overflow: hidden !important;
}
/* Row = a Container with a Link set to the file. Flex lines the widgets up. */
.stelia-doc {
display: flex !important;
align-items: center !important;
gap: 24px !important;
padding: 22px 30px !important;
border-top: 1px solid #E5E7EB;
text-decoration: none !important;
transition: background 0.2s ease;
}
.stelia-doc:first-child { border-top: 0; }
.stelia-doc:hover { background: #F5F7FA; }
/* neutralise Elementor's default per-widget margins inside the row */
.stelia-doc > .elementor-element,
.stelia-doc > .elementor-widget { margin: 0 !important; }
/* --- Ref: the mono "coordinate" (Heading widget) --- */
.stelia-doc-ref { flex: 0 0 200px; }
.stelia-doc-ref,
.stelia-doc-ref .elementor-heading-title {
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #7B8FA8 !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* --- Title (Heading widget) --- */
.stelia-doc-title { flex: 1 1 auto; }
.stelia-doc-title,
.stelia-doc-title .elementor-heading-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
line-height: 1.35 !important;
color: #1B2D45 !important;
margin: 0 !important;
}
/* --- File-type pill (Heading widget). margin-left pushes it + the icon right --- */
.stelia-doc-type { flex: 0 0 auto; margin-left: auto !important; }
.stelia-doc-type,
.stelia-doc-type .elementor-heading-title {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #3B5092 !important;
margin: 0 !important;
}
/* the pill chrome wraps the text element */
span.stelia-doc-type,
.stelia-doc-type .elementor-heading-title {
display: inline-block;
background: rgba(59,80,146,0.08);
border: 1px solid rgba(59,80,146,0.18);
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
}
/* Excel form — green (system --success family) */
.stelia-doc-type.is-xls,
.stelia-doc-type.is-xls .elementor-heading-title { color: #247A4A !important; }
span.stelia-doc-type.is-xls,
.stelia-doc-type.is-xls .elementor-heading-title {
background: rgba(36,122,74,0.08);
border-color: rgba(36,122,74,0.20);
}
/* --- Download disc (Icon widget, FA "download") --- */
.stelia-doc-arrow { flex: 0 0 auto; }
span.stelia-doc-arrow,
.stelia-doc-arrow .elementor-icon {
width: 38px !important;
height: 38px !important;
border-radius: 50%;
border: 1px solid #E5E7EB;
display: flex !important;
align-items: center;
justify-content: center;
color: #3B5092 !important;
transition: all 0.2s ease;
}
.stelia-doc:hover span.stelia-doc-arrow,
.stelia-doc:hover .stelia-doc-arrow .elementor-icon {
background: #3B5092;
border-color: #3B5092;
color: #FFFFFF !important;
transform: translateY(2px);
}
/* preview icon (inline svg, stroked) */
.stelia-doc-arrow > svg {
width: 15px; height: 15px;
fill: none; stroke: currentColor; stroke-width: 1.6;
}
/* live Elementor icon (FA glyph, filled) */
.stelia-doc-arrow .elementor-icon svg { width: 15px; height: 15px; fill: currentColor; }
.stelia-doc-arrow .elementor-icon i { font-size: 15px; color: inherit; }
@media (max-width: 767px) {
.stelia-doc {
flex-wrap: wrap;
padding: 18px 20px !important;
gap: 6px 14px !important;
}
.stelia-doc-ref { flex: 1 1 100%; order: 1; }
.stelia-doc-title { flex: 1 1 auto; order: 2; }
.stelia-doc-type { order: 3; margin-left: auto !important; }
.stelia-doc-arrow { order: 4; }
}
/* ============================================
18. PRODUCTS — category bands + product cards
============================================ */
.stelia-products { background-color: #F5F7FA; }
/* category header — "01 / Aeronautics / ————" */
.stelia-cat-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 34px; }
.stelia-cat-num { font-family: var(--font-mono); font-size: 13px; color: #3B5092; letter-spacing: .1em; margin: 0; }
.stelia-cat-title { font-family: var(--font-heading); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; color: #1B2D45; margin: 0; }
.stelia-cat-rule { flex: 1; height: 1px; background: #E5E7EB; }
/* card grid */
.stelia-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 24px; }
/* one product card (the whole card is a link) */
.stelia-prod { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.stelia-prod:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(19,31,48,.14); }
/* image well + badge */
.stelia-prod-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #263B55; }
.stelia-prod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stelia-prod-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,31,48,0) 55%, rgba(19,31,48,.35) 100%); z-index: 1; pointer-events: none; }
.stelia-prod-badge { position: absolute; top: 16px; left: 16px; z-index: 2; margin: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(59,80,146,.85); backdrop-filter: blur(8px); padding: 6px 11px; border-radius: 6px; }
/* body + title + capability list */
.stelia-prod-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.stelia-prod-title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: #1B2D45; margin: 0 0 18px; }
/* caps list top-aligns under the title (NO margin-top:auto) so every
description starts at the same height; cards stay equal height via the grid */
.stelia-prod-caps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.stelia-prod-caps li { position: relative; padding-left: 20px; font-family: var(--font-body); font-size: 14px; color: #374151; line-height: 1.5; }
.stelia-prod-caps li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #3B5092; border-radius: 1px; }
@media (max-width: 767px) { .stelia-prod-grid { grid-template-columns: 1fr; } }/* End custom CSS */