/* BUILD 1.7.2 — 2026-07-26 */ /* ===================================================================== SAT — Subl Al-Takamul · Elementor widgets stylesheet Converted from Lovable (element-sync-studio) by 180D Agency. Tailwind size reference: text-3xl=30 4xl=36 5xl=48 6xl=60 7xl=72 ===================================================================== */ :root { /* Brand palette — Lovable BLUE theme (HSL→HEX, exact, src/styles.css) */ --sat-bg: #265778; /* 204 52% 31% */ --sat-fg: #EDEFF2; /* 220 18% 94% */ --sat-card: #23455C; /* 204 45% 25% */ --sat-primary: #DCDFE5; /* 220 14% 88% — light silver */ --sat-primary-fg: #173245; /* 204 50% 18% */ --sat-accent: #3582B6; /* 204 55% 46% */ --sat-accent-fg: #123349; /* 204 60% 18% */ --sat-secondary: #356482; /* 204 42% 36% */ --sat-petrol: #265778; /* 204 52% 31% */ --sat-petrol-glow: #2F83BC; /* 204 60% 46% */ --sat-silver: #C1C5CD; /* 220 10% 78% */ --sat-silver-bright: #E8EAED; /* 220 14% 92% */ --sat-steel: #C6CAD2; /* 220 12% 80% */ --sat-ink: #E8EAEE; /* 220 15% 92% */ --sat-muted: #3F6883; /* 204 35% 38% */ --sat-muted-fg: #CBCFD8; /* 220 14% 82% */ --sat-border: #56788F; /* 204 25% 45% */ --sat-input: #4B728B; /* 204 30% 42% */ --sat-destructive: #E14747; /* 0 72% 58% */ /* Lovable forces every icon to hsl(220 10% 16%) site-wide */ --sat-icon: #25272D; /* RGB triplets for alpha compositing */ --sat-bg-rgb: 38, 87, 120; --sat-card-rgb: 35, 69, 92; --sat-primary-rgb: 220, 223, 229; --sat-accent-rgb: 53, 130, 182; --sat-petrol-rgb: 38, 87, 120; --sat-petrol-glow-rgb: 47, 131, 188; --sat-border-rgb: 86, 120, 143; --sat-silver-rgb: 193, 197, 205; --sat-muted-rgb: 63, 104, 131; /* deep shadow tint = hsl(204 60% 10%) — Lovable's shadow colour, not black */ --sat-shadow-rgb: 10, 29, 41; /* highlight tint = hsl(220 20% 98%) */ --sat-hi-rgb: 249, 250, 251; /* Fonts — Manrope (display) + Inter (body), as Lovable */ --sat-font: "Inter", system-ui, -apple-system, sans-serif; --sat-font-display: "Manrope", system-ui, -apple-system, sans-serif; --sat-radius: 0.75rem; --sat-radius-lg: 1rem; --sat-radius-xl: 1.5rem; --sat-gradient-brand: linear-gradient(to right, var(--sat-primary), var(--sat-accent)); } /* ===================================================================== 0. Global blue canvas — Lovable's body background is hsl(204 52% 31%) (#265778). Without this the theme's white shows through any translucent SAT section (competencies strip greys out, a white strip appears above the footer). ===================================================================== */ html, body { background-color: var(--sat-bg) !important; } body { color: var(--sat-fg); } /* Elementor / Hello theme content wrappers that can introduce a light base */ .elementor-section-wrap, .elementor, .e-con, .e-con-inner, .site-main, .page-content, .content-area, main#content, #content, #primary, .elementor-widget-wrap, .elementor-element { background-color: transparent; } body.elementor-page #content, body.elementor-page .site-main, body.elementor-page .page-content, body.elementor-page .elementor { background-color: var(--sat-bg); } /* ===================================================================== 1. Horizontal-scroll defense baseline ===================================================================== */ [class^="sat-"], [class*=" sat-"], [class^="sat-"] *, [class*=" sat-"] *, [class^="sat-"] *::before, [class*=" sat-"] *::before, [class^="sat-"] *::after, [class*=" sat-"] *::after { box-sizing: border-box; } .sat-section, .sat-hero, .sat-page-hero, .sat-cta, .sat-footer, .sat-header, .sat-contact, .sat-form { max-width: 100%; overflow-x: hidden; overflow-x: clip; } [class^="sat-"][class*="-grid"] > *, [class^="sat-"][class*="-row"] > *, .sat-form-row > *, .sat-contact-grid > *, .sat-form-field { min-width: 0; max-width: 100%; } [class^="sat-"] img, [class*=" sat-"] img, [class^="sat-"] iframe, [class*=" sat-"] iframe, [class^="sat-"] svg, [class*=" sat-"] svg { max-width: 100%; } [class^="sat-"] img, [class*=" sat-"] img, [class^="sat-"] iframe, [class*=" sat-"] iframe { height: auto; } [class^="sat-"] img.sat-cover { height: 100%; } [class^="sat-"] input, [class^="sat-"] textarea, [class^="sat-"] select, [class^="sat-"] button { max-width: 100%; } [class^="sat-"] input[type="text"], [class^="sat-"] input[type="email"], [class^="sat-"] input[type="tel"], [class^="sat-"] textarea, [class^="sat-"] select { width: 100%; } [class^="sat-"] p, [class^="sat-"] a, [class^="sat-"] span, [class^="sat-"] li, [class^="sat-"] [class*="email"], [class^="sat-"] [class*="phone"] { overflow-wrap: anywhere; word-break: break-word; } .sat-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ===================================================================== 2. Typography baseline ===================================================================== */ [class^="sat-"], [class*=" sat-"] { font-family: var(--sat-font); } [class^="sat-"] h1, [class^="sat-"] h2, [class^="sat-"] h3, [class^="sat-"] h4, [class^="sat-"] h5, [class^="sat-"] h6 { font-family: var(--sat-font-display); letter-spacing: -0.02em; line-height: 1.1; margin: 0; } [class^="sat-"] p { line-height: 1.65; margin: 0; } [class^="sat-"] ul { margin: 0; padding: 0; list-style: none; } .sat-section { color: var(--sat-fg); background: var(--sat-bg); } /* ===================================================================== 3. Lovable utility classes (verbatim gradients/effects) ===================================================================== */ .sat-metallic { background: linear-gradient(135deg, #DCDFE5 0%, #F3F4F7 25%, #B9BDC6 50%, #F9FAFB 75%, #D3D7DE 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 2px rgba(var(--sat-shadow-rgb), 0.25); } .sat-petrol-text { background: linear-gradient(120deg, #F3F4F7 0%, #B0B5BF 40%, #F9FAFB 70%, #C6CAD2 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sat-shimmer 6s ease-in-out infinite; text-shadow: 0 1px 2px rgba(var(--sat-shadow-rgb), 0.2); } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .sat-metallic, .sat-petrol-text { color: var(--sat-silver-bright); } } .sat-glass { background: linear-gradient(135deg, rgba(61,110,143,0.60) 0%, rgba(36,79,107,0.70) 100%); border: 1px solid rgba(232,234,238,0.25); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 rgba(var(--sat-hi-rgb),0.18), 0 12px 32px -16px rgba(var(--sat-shadow-rgb),0.40); } .sat-metal { position: relative; background: linear-gradient(180deg, rgba(56,105,138,0.55) 0%, rgba(37,78,106,0.60) 100%); border: 1px solid rgba(232,234,238,0.22); background-clip: padding-box; box-shadow: 0 1px 0 rgba(var(--sat-hi-rgb),0.15) inset, 0 8px 24px -16px rgba(var(--sat-shadow-rgb),0.40); } .sat-blueprint { background-image: linear-gradient(rgba(var(--sat-hi-rgb), 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--sat-hi-rgb), 0.08) 1px, transparent 1px); background-size: 48px 48px; } .sat-petrol-band { background: radial-gradient(ellipse at 20% 0%, rgba(65,146,200, 0.35) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(var(--sat-hi-rgb), 0.12) 0%, transparent 55%), linear-gradient(135deg, #244F6B 0%, #265778 50%, #2A6084 100%); } .sat-card-petrol { position: relative; isolation: isolate; border: 1px solid rgba(var(--sat-petrol-glow-rgb), 0.35); transition: border-color .4s, box-shadow .4s, transform .5s cubic-bezier(0.16,1,0.3,1); } .sat-card-petrol:hover { border-color: rgba(var(--sat-petrol-glow-rgb), 0.7); box-shadow: 0 0 32px rgba(var(--sat-petrol-glow-rgb), 0.35); } /* ===================================================================== 4. Keyframes (replicated from Lovable) ===================================================================== */ @keyframes sat-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes sat-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes sat-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes sat-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } } .sat-pulse-dot { animation: sat-pulse 2s ease-in-out infinite; } .sat-float { animation: sat-float 6s ease-in-out infinite; } /* ===================================================================== 5. Reveal-on-scroll (+ editor-preview fix) ===================================================================== */ .sat-reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); } .sat-reveal.sat-revealed { opacity: 1; transform: translateY(0); } .elementor-editor-active .sat-reveal, body.elementor-editor-preview .sat-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .sat-reveal, .sat-petrol-text, .sat-float, .sat-pulse-dot { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } } /* ===================================================================== 6. Layout helpers ===================================================================== */ .sat-container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .sat-container { padding-inline: 1.5rem; } } @media (min-width: 1024px){ .sat-container { padding-inline: 2rem; } } .sat-container-narrow { max-width: 64rem; } .sat-section { position: relative; padding-block: 6rem; } @media (min-width: 640px) { .sat-section { padding-block: 8rem; } } .sat-eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: #000; } /* Inner-page heroes use the light silver eyebrow (AboutHero / ContactHero) */ .sat-page-hero .sat-eyebrow { color: var(--sat-primary); } .sat-eyebrow-rule { display: inline-flex; align-items: center; gap: 0.75rem; } .sat-eyebrow-rule .sat-rule { height: 1px; width: 2rem; } .sat-rule-l { background: linear-gradient(to right, transparent, var(--sat-primary)); } .sat-rule-r { background: linear-gradient(to left, transparent, var(--sat-primary)); } .sat-h2 { font-size: 1.875rem; font-weight: 700; line-height: 1.15; } @media (min-width: 640px) { .sat-h2 { font-size: 2.25rem; } } @media (min-width: 1024px){ .sat-h2 { font-size: 3rem; } } .sat-lead { margin-top: 1.75rem; font-size: 1rem; line-height: 1.65; color: var(--sat-muted-fg); } @media (min-width: 640px) { .sat-lead { font-size: 1.125rem; } } /* ===================================================================== 7. Icons — universal svg/i container ===================================================================== */ [class^="sat-"][class*="-icon"], [class*=" sat-"][class*="-icon"] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } [class^="sat-"][class*="-icon"] svg { width: 1.25rem; height: 1.25rem; display: block; color: inherit; fill: none; stroke: currentColor; } /* Per-component colour — Lovable pins every icon to hsl(220 10% 16%) */ .sat-svc-icon, .sat-feat-icon, .sat-info-icon, .sat-lic-icon, .sat-comp-icon, .sat-sg-icon, .sat-lic-titlebox-icon { color: var(--sat-icon); } [class^="sat-"][class*="-icon"] i { font-size: 1.1rem; color: inherit; line-height: 1; } /* ===================================================================== 8. Buttons — theme-proof primary (gradient primary→accent) ===================================================================== */ .sat-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--sat-font); font-weight: 600; font-size: 0.875rem; line-height: 1.2; padding: 0.875rem 1.75rem; border-radius: 9999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .2s ease, background .3s ease, border-color .3s ease, color .3s ease; } .sat-btn svg { width: 1rem; height: 1rem; } /* Lovable's single site button: @utility btn-glass — light-blue glass pill, * dark text, subtle black gradient wash. Both the primary and the secondary * hero buttons use it in the source, so both variants render identically. */ a.sat-btn.sat-btn-primary, a.sat-btn.sat-btn-primary:link, a.sat-btn.sat-btn-primary:visited, button.sat-btn.sat-btn-primary, .sat-btn.sat-btn-primary[class], a.sat-btn.sat-btn-outline, a.sat-btn.sat-btn-outline:link, a.sat-btn.sat-btn-outline:visited, button.sat-btn.sat-btn-outline, .sat-btn.sat-btn-outline[class] { color: #1F2228 !important; background: linear-gradient(135deg, rgba(18,20,23,0.18) 0%, rgba(18,20,23,0) 55%, rgba(18,20,23,0.22) 100%), linear-gradient(180deg, #729BB6 0%, #46799B 100%) !important; border: 1px solid rgba(232,234,237,0.45) !important; box-shadow: inset 0 1px 0 rgba(var(--sat-hi-rgb),0.35), inset 0 -1px 0 rgba(20,24,31,0.15), 0 10px 22px -12px rgba(14,18,27,0.55); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); text-decoration: none !important; } a.sat-btn.sat-btn-primary:hover, button.sat-btn.sat-btn-primary:hover, .sat-btn.sat-btn-primary[class]:hover, a.sat-btn.sat-btn-outline:hover, button.sat-btn.sat-btn-outline:hover, .sat-btn.sat-btn-outline[class]:hover { filter: brightness(1.06); transform: translateY(-1px); color: #1F2228 !important; box-shadow: inset 0 1px 0 rgba(var(--sat-hi-rgb),0.4), inset 0 -1px 0 rgba(20,24,31,0.2), 0 16px 28px -12px rgba(14,18,27,0.6); } .sat-btn.sat-btn-primary *, .sat-btn.sat-btn-primary svg, .sat-btn.sat-btn-outline *, .sat-btn.sat-btn-outline svg { color: #1F2228 !important; } .sat-btn-lg { padding: 1rem 2rem; } .sat-btn-block { width: 100%; } .sat-btn-ghost { background: transparent; color: var(--sat-primary); padding: 0; border: 0; font-weight: 600; box-shadow: none; } .sat-btn-ghost:hover { gap: 0.75rem; color: var(--sat-fg); } /* ===================================================================== 9. Header ===================================================================== */ .sat-header { position: sticky; top: 0; z-index: 50; background: rgba(var(--sat-bg-rgb), 0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(var(--sat-border-rgb), 0.6); } .sat-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 5rem; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .sat-header-inner { padding-inline: 1.5rem; } } @media (min-width: 1024px){ .sat-header-inner { padding-inline: 2rem; } } .sat-header-logo img { height: 3.5rem; width: auto; object-fit: contain; display: block; } @media (min-width: 640px) { .sat-header-logo img { height: 4rem; } } .sat-header-nav { display: none; align-items: center; gap: 0.25rem; } .sat-nav-link { position: relative; border-radius: 9999px; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: var(--sat-muted-fg); text-decoration: none; transition: color .3s; white-space: nowrap; } .sat-nav-link:hover { color: var(--sat-fg); } .sat-nav-link.is-active { color: var(--sat-primary-fg); } .sat-nav-link.is-active::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; z-index: -1; background: linear-gradient(135deg, var(--sat-primary), var(--sat-accent)); } .sat-header-actions { display: flex; align-items: center; gap: 0.5rem; } .sat-header-cta { display: none; white-space: nowrap; border-radius: 9999px; border: 1px solid var(--sat-border); background: rgba(var(--sat-card-rgb), 0.4); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--sat-fg); text-decoration: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: border-color .3s; } .sat-header-cta:hover { border-color: rgba(var(--sat-primary-rgb), 0.6); } .sat-header-burger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: transparent; cursor: pointer; border: 1px solid rgba(var(--sat-border-rgb), 0.6); border-radius: 9999px; color: var(--sat-fg); } .sat-header-burger:hover, .sat-header-burger:focus { background: rgba(255,255,255,0.04); } .sat-header-burger svg { width: 1.1rem; height: 1.1rem; } .sat-header-burger-close { display: none; } .sat-header.is-open .sat-header-burger-open { display: none; } .sat-header.is-open .sat-header-burger-close { display: inline-flex; } .sat-header-mobile { display: none; border-top: 1px solid rgba(var(--sat-border-rgb), 0.6); background: rgba(var(--sat-bg-rgb), 0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .sat-header.is-open .sat-header-mobile { display: block; } .sat-header-mobile-inner { max-width: 80rem; margin-inline: auto; display: flex; flex-direction: column; padding: 1rem; gap: 0.25rem; } .sat-header-mobile a, .sat-header-mobile a:link, .sat-header-mobile a:visited { display: block; border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--sat-muted-fg) !important; text-decoration: none !important; } .sat-header-mobile a.is-active { background: rgba(var(--sat-primary-rgb), 0.2); color: var(--sat-fg) !important; } .sat-header-mobile a:hover, .sat-header-mobile a:focus { color: var(--sat-fg) !important; background: rgba(255,255,255,0.04) !important; } .sat-header-mobile-cta { margin-top: 0.5rem; text-align: center; border-radius: 9999px; background: linear-gradient(to right, var(--sat-primary), var(--sat-accent)); padding: 0.75rem 1.25rem; font-weight: 600; color: var(--sat-primary-fg) !important; text-decoration: none !important; } /* dropdowns */ .sat-has-dropdown { position: relative; } .sat-dropdown { list-style: none; } @media (min-width: 1024px) { .sat-header-nav { display: flex; } .sat-header-cta { display: inline-flex; } .sat-header-burger { display: none; } .sat-nav-toggle { display: inline-flex; align-items: center; gap: 0.25rem; background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--sat-muted-fg); padding: 0.5rem 1.25rem; border-radius: 9999px; } .sat-nav-toggle:hover { color: var(--sat-fg); } .sat-dropdown { position: absolute; top: 100%; left: 0; min-width: 12rem; padding: 0.5rem; background: rgba(var(--sat-card-rgb), 0.97); border: 1px solid rgba(var(--sat-border-rgb), 0.6); border-radius: 0.75rem; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; z-index: 60; } .sat-has-dropdown:hover > .sat-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .sat-dropdown a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; color: var(--sat-muted-fg); text-decoration: none; } .sat-dropdown a:hover { color: var(--sat-fg); background: rgba(255,255,255,0.04); } } /* ===================================================================== 10. HERO SLIDER (crossfade · 6.5s · indicator dots) ===================================================================== */ .sat-hero { position: relative; height: 80vh; min-height: 560px; overflow: hidden; background: var(--sat-bg); } @media (min-width: 640px) { .sat-hero { height: 100vh; min-height: 100svh; } } .sat-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; background-size: cover; background-position: center; background-repeat: no-repeat; /* Every slide is stacked at inset:0, so the LAST one in source order sits on * top and swallowed the clicks meant for the visible slide's buttons and * dots. Hidden slides must not receive pointer events, and the visible one * needs to be raised above its siblings. */ pointer-events: none; z-index: 1; } .sat-hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; } /* Belt and braces: anything interactive inside the live slide stays clickable even if a theme resets pointer-events further down the tree. */ .sat-hero-slide.is-active .sat-hero-inner, .sat-hero-slide.is-active .sat-hero-actions, .sat-hero-slide.is-active .sat-hero-actions .sat-btn, .sat-hero-slide.is-active .sat-hero-dots, .sat-hero-slide.is-active .sat-hero-dot { pointer-events: auto; } .sat-hero-ov1 { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--sat-bg), rgba(var(--sat-bg-rgb),0.85) 40%, rgba(var(--sat-bg-rgb),0.3)); } .sat-hero-ov2 { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--sat-bg), transparent 50%, rgba(var(--sat-bg-rgb),0.4)); } .sat-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; } .sat-hero-inner { position: relative; z-index: 3; height: 100%; max-width: 80rem; margin-inline: auto; display: flex; align-items: center; padding: 6rem 1rem 4rem; } @media (min-width: 640px) { .sat-hero-inner { padding: 10rem 1.5rem 6rem; } } @media (min-width: 1024px){ .sat-hero-inner { padding-inline: 2rem; } } .sat-hero-content { width: 100%; max-width: 42rem; } .sat-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-border-rgb), 0.6); background: rgba(var(--sat-card-rgb), 0.4); padding: 0.375rem 1rem; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .sat-hero-eyebrow .sat-dot { height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: var(--sat-primary); } .sat-hero-eyebrow span:last-child { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: var(--sat-muted-fg); } .sat-hero-title { margin-top: 1.5rem; font-size: 2.25rem; font-weight: 800; line-height: 1.05; } @media (min-width: 640px) { .sat-hero-title { font-size: 3.75rem; } } @media (min-width: 1024px){ .sat-hero-title { font-size: 4.5rem; } } .sat-hero-title span { display: block; } .sat-hero-sub { margin-top: 1.75rem; max-width: 36rem; font-size: 1rem; line-height: 1.65; color: var(--sat-muted-fg); } @media (min-width: 640px) { .sat-hero-sub { font-size: 1.125rem; } } .sat-hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .sat-hero-dots { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 0.5rem; } .sat-hero-actions { position: relative; z-index: 4; } @media (min-width: 640px) { .sat-hero-dots { bottom: 2rem; } } .sat-hero-dot { height: 0.25rem; width: 1.5rem; border: 0; padding: 0; cursor: pointer; border-radius: 9999px; background: var(--sat-border); transition: all .3s; } .sat-hero-dot.is-active { width: 3rem; background: var(--sat-primary); } /* ===================================================================== 11. Competencies strip ===================================================================== */ .sat-comp { position: relative; border-block: 1px solid rgba(var(--sat-border-rgb),0.6); background: linear-gradient(rgba(var(--sat-card-rgb),0.3), rgba(var(--sat-card-rgb),0.3)), var(--sat-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .sat-comp-grid { max-width: 80rem; margin-inline: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 1rem; } @media (min-width:640px){ .sat-comp-grid { padding-inline: 1.5rem; } } @media (min-width:1024px){ .sat-comp-grid { grid-template-columns: repeat(4,minmax(0,1fr)); padding-inline: 2rem; } } .sat-comp-item { display: flex; align-items: center; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid rgba(var(--sat-border-rgb),0.6); } @media (min-width:1024px){ .sat-comp-item { padding: 2rem; border-bottom: 0; } .sat-comp-item:not(:last-child){ border-right: 1px solid rgba(var(--sat-border-rgb),0.6); } } .sat-comp-icon { position: relative; display: grid; place-items: center; height: 3rem; width: 3rem; flex-shrink: 0; border-radius: 0.5rem; background: linear-gradient(180deg, var(--sat-card) 0%, var(--sat-bg) 100%); border: 1px solid rgba(var(--sat-border-rgb), 0.6); } .sat-comp-icon svg { width: 1.4rem; height: 1.4rem; } .sat-comp-num { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } .sat-comp-label { font-size: 1rem; font-weight: 600; color: var(--sat-fg); } /* ===================================================================== 12. About (split) + value chips ===================================================================== */ .sat-about-grid { max-width: 80rem; margin-inline: auto; display: grid; gap: 3rem; padding-inline: 1rem; } @media (min-width:640px){ .sat-about-grid { padding-inline: 1.5rem; } } @media (min-width:1024px){ .sat-about-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; padding-inline: 2rem; } } .sat-about-media { position: relative; } .sat-about-media .sat-frame { overflow: hidden; border-radius: var(--sat-radius-xl); } .sat-about-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; } .sat-about-badge { position: absolute; bottom: -1.5rem; right: -1.5rem; border-radius: var(--sat-radius); padding: 1.25rem; } @media (max-width:639px){ .sat-about-badge { display: none; } } .sat-about-badge-num { font-size: 1.875rem; font-weight: 700; } .sat-about-badge-lbl { margin-top: 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--sat-muted-fg); } .sat-corner { position: absolute; height: 8rem; width: 8rem; pointer-events: none; } .sat-corner-tl { left: -1.5rem; top: -1.5rem; border-left: 2px solid rgba(var(--sat-primary-rgb),0.6); border-top: 2px solid rgba(var(--sat-primary-rgb),0.6); } .sat-corner-br { bottom: -1.5rem; right: -1.5rem; border-bottom: 2px solid rgba(var(--sat-primary-rgb),0.6); border-right: 2px solid rgba(var(--sat-primary-rgb),0.6); } .sat-about-body { margin-top: 1.5rem; font-size: 1rem; line-height: 1.65; color: var(--sat-muted-fg); } .sat-about-chips { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 28rem; } .sat-chip { border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--sat-fg); } .sat-chip .sat-chip-mark { color: var(--sat-primary); margin-right: 0.5rem; } /* ===================================================================== 13. Services (home) — petrol-border cards ===================================================================== */ .sat-cards { margin-top: 4rem; display: grid; gap: 1.25rem; } @media (min-width:640px){ .sat-cards { grid-template-columns: 1fr 1fr; } } @media (min-width:1024px){ .sat-cards-3 { grid-template-columns: repeat(3,1fr); } } .sat-svc-card { position: relative; height: 100%; overflow: hidden; border-radius: var(--sat-radius-xl); background: linear-gradient(to bottom, rgba(var(--sat-card-rgb),0.8), rgba(var(--sat-bg-rgb),0.6)); padding: 1.75rem; } .sat-svc-card:hover { transform: translateY(-0.25rem); } .sat-svc-iconbox { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 0.75rem; background: linear-gradient(135deg, rgba(var(--sat-primary-rgb),0.3), rgba(var(--sat-accent-rgb),0.2)); box-shadow: 0 0 0 1px rgba(var(--sat-primary-rgb),0.3) inset; } .sat-svc-iconbox svg { width: 1.4rem; height: 1.4rem; } .sat-svc-num { margin-top: 0.5rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.3em; color: var(--sat-muted-fg); } .sat-svc-title { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--sat-fg); } .sat-svc-desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.65; color: var(--sat-muted-fg); } .sat-svc-link { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-primary-rgb),0.4); background: linear-gradient(to right, rgba(var(--sat-primary-rgb),0.15), rgba(var(--sat-accent-rgb),0.1)); padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sat-primary); text-decoration: none; transition: all .3s; } .sat-svc-link:hover { background: linear-gradient(to right, var(--sat-primary), var(--sat-accent)); color: var(--sat-primary-fg); } .sat-svc-link svg { width: 0.7rem; height: 0.7rem; } /* ===================================================================== 14. PROJECTS — 3D fan / arc carousel ===================================================================== */ .sat-proj-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; } .sat-proj-mobile { margin-top: 2.5rem; display: grid; gap: 1.25rem; } @media (min-width:768px){ .sat-proj-mobile { display: none; } } a.sat-proj-mcard, a.sat-proj-mcard:link, a.sat-proj-mcard:visited, a.sat-proj-mcard:hover, a.sat-proj-mcard:focus { color: var(--sat-fg); text-decoration: none; } .sat-proj-mcard { position: relative; overflow: hidden; border-radius: var(--sat-radius-xl); border: 1px solid rgba(var(--sat-primary-rgb),0.25); background: rgba(var(--sat-card-rgb),0.9); } .sat-proj-mcard .sat-proj-mimg { position: relative; aspect-ratio: 16/10; overflow: hidden; } .sat-proj-mcard img { width: 100%; height: 100%; object-fit: cover; } .sat-proj-mcard .sat-proj-mov { position: absolute; inset: 0; background: linear-gradient(to top, var(--sat-bg), transparent); } .sat-proj-mchip { position: absolute; left: 0.75rem; top: 0.75rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-primary-rgb),0.4); background: rgba(var(--sat-bg-rgb),0.7); padding: 0.25rem 0.625rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sat-primary); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sat-proj-mbody { padding: 1.25rem; } .sat-proj-mbody h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.2; color: var(--sat-fg); } .sat-proj-mbody p { margin-top: 0.5rem; font-size: 0.75rem; color: var(--sat-muted-fg); } .sat-proj-mmeta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.6875rem; color: var(--sat-muted-fg); } .sat-proj-mmeta span { display: inline-flex; align-items: center; gap: 0.25rem; } .sat-proj-mmeta svg { width: 0.8rem; height: 0.8rem; color: var(--sat-primary); } .sat-proj-desktop { position: relative; margin-top: 4rem; display: none; user-select: none; perspective: 1800px; } @media (min-width:768px){ .sat-proj-desktop { display: block; } } .sat-proj-arc { pointer-events: none; position: absolute; left: 50%; top: 50%; z-index: -10; height: 140%; width: 150%; transform: translate(-50%,-20%); border-radius: 50%; background: linear-gradient(to bottom, rgba(var(--sat-primary-rgb),0.25), rgba(var(--sat-accent-rgb),0.1) 50%, transparent); filter: blur(64px); } .sat-proj-plate { pointer-events: none; position: absolute; left: 50%; bottom: 0; z-index: -10; height: 420px; width: 140%; transform: translate(-50%,50%); border-radius: 50%; background: linear-gradient(to bottom, rgba(var(--sat-petrol-rgb),0.4), var(--sat-bg)); } .sat-proj-stage { position: relative; margin-inline: auto; display: flex; height: 520px; width: 100%; max-width: 64rem; align-items: center; justify-content: center; } @media (min-width:640px){ .sat-proj-stage { height: 600px; } } .sat-proj-card-btn { position: absolute; top: 50%; left: 50%; transform-origin: bottom center; background: transparent; border: 0; padding: 0; cursor: pointer; transition: transform .7s cubic-bezier(0.16,1,0.3,1), opacity .7s cubic-bezier(0.16,1,0.3,1); } .sat-proj-card { position: relative; height: 420px; width: 260px; overflow: hidden; border-radius: 28px; border: 1px solid rgba(var(--sat-border-rgb),0.6); background: var(--sat-card); box-shadow: 0 20px 50px -20px rgba(var(--sat-shadow-rgb),0.6); } @media (min-width:640px){ .sat-proj-card { height: 480px; width: 300px; } } .sat-proj-card-btn.is-active .sat-proj-card { border-color: rgba(var(--sat-primary-rgb),0.6); box-shadow: 0 30px 80px -20px rgba(var(--sat-primary-rgb),0.5), 0 0 60px -10px rgba(var(--sat-primary-rgb),0.4); } .sat-proj-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .sat-proj-card-btn:hover img { transform: scale(1.05); } .sat-proj-card-ov { position: absolute; inset: 0; background: linear-gradient(to top, var(--sat-bg), rgba(var(--sat-bg-rgb),0.3) 50%, transparent); } .sat-proj-card-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to top right, rgba(var(--sat-primary-rgb),0.2), transparent, rgba(var(--sat-accent-rgb),0.1)); mix-blend-mode: overlay; } .sat-proj-card-btn.is-active .sat-proj-card-glow { opacity: 1; } .sat-proj-card-chip { position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-primary-rgb),0.4); background: rgba(var(--sat-bg-rgb),0.7); padding: 0.25rem 0.625rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sat-primary); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sat-proj-card-chip svg { width: 0.75rem; height: 0.75rem; } .sat-proj-card-body { position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem; text-align: left; } .sat-proj-card-cat { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-primary); } .sat-proj-card-title { margin-top: 0.625rem; font-size: 1.125rem; font-weight: 700; line-height: 1.2; color: var(--sat-fg); } .sat-proj-card-meta { margin-top: 0.75rem; display: none; align-items: center; gap: 0.75rem; font-size: 0.6875rem; color: var(--sat-muted-fg); } .sat-proj-card-btn.is-active .sat-proj-card-meta { display: flex; } .sat-proj-card-meta span { display: inline-flex; align-items: center; gap: 0.25rem; } .sat-proj-card-meta svg { width: 0.8rem; height: 0.8rem; color: var(--sat-primary); } .sat-proj-card-link { margin-top: 1rem; display: none; align-items: center; gap: 0.5rem; border-radius: 9999px; background: linear-gradient(to right, var(--sat-primary), var(--sat-accent)); padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sat-primary-fg); text-decoration: none; width: fit-content; } .sat-proj-card-btn.is-active .sat-proj-card-link { display: inline-flex; } .sat-proj-card-link svg { width: 0.7rem; height: 0.7rem; } /* fallback grid before JS ready */ .sat-proj-stage:not(.is-ready) { flex-wrap: wrap; gap: 1.25rem; height: auto; } .sat-proj-stage:not(.is-ready) .sat-proj-card-btn { position: relative; top: auto; left: auto; transform: none !important; opacity: 1 !important; } .sat-proj-controls { position: relative; z-index: 10; margin-top: 2rem; display: flex; align-items: center; justify-content: center; gap: 1.25rem; } .sat-proj-nav { display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-primary-rgb),0.3); background: rgba(var(--sat-card-rgb),0.6); color: var(--sat-primary); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: all .3s; } .sat-proj-nav:hover { border-color: var(--sat-primary); background: rgba(var(--sat-primary-rgb),0.15); } .sat-proj-dots { display: flex; gap: 0.5rem; } .sat-proj-dot { height: 0.375rem; width: 1.25rem; border: 0; padding: 0; cursor: pointer; border-radius: 9999px; background: var(--sat-border); transition: all .3s; } .sat-proj-dot.is-active { width: 2.5rem; background: var(--sat-primary); } /* ===================================================================== 15. Advantages / Mission-Vision / Stats — metal cards ===================================================================== */ .sat-feat-grid { margin-top: 4rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1.5rem; } .sat-feat-grid > * { flex: 1 1 100%; min-width: 0; } @media (min-width:1024px){ /* 3 cards -> thirds; 2 cards -> two centred columns; 1 card -> a single centred column. flex-basis does the centring that a fixed 3-col grid could not (the Competitive Advantages section now ships two cards). */ .sat-feat-grid > * { flex: 0 1 calc((100% - 3rem) / 3); } .sat-feat-grid > *:first-child:nth-last-child(2), .sat-feat-grid > *:first-child:nth-last-child(2) ~ * { flex: 0 1 calc((100% - 1.5rem) / 2); max-width: 32rem; } .sat-feat-grid > *:first-child:last-child { flex: 0 1 32rem; } } .sat-feat-card { position: relative; height: 100%; overflow: hidden; border-radius: var(--sat-radius-xl); padding: 2rem; } .sat-feat-num { font-size: 3.75rem; font-weight: 800; line-height: 1; opacity: 0.2; } .sat-feat-iconbox { margin-top: 1rem; display: grid; place-items: center; height: 3.5rem; width: 3.5rem; border-radius: 0.75rem; background: linear-gradient(135deg, rgba(var(--sat-primary-rgb),0.3), rgba(var(--sat-accent-rgb),0.2)); box-shadow: 0 0 0 1px rgba(var(--sat-primary-rgb),0.3) inset; } .sat-feat-iconbox svg { width: 1.6rem; height: 1.6rem; } .sat-feat-title { margin-top: 1.75rem; font-size: 1.25rem; font-weight: 700; color: var(--sat-fg); } .sat-feat-title-lg { font-size: 1.5rem; } .sat-feat-desc { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.65; color: var(--sat-muted-fg); } .sat-feat-cta { margin-top: 4rem; text-align: center; } .sat-stats-grid { margin-top: 3.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (min-width:1024px){ .sat-stats-grid { grid-template-columns: repeat(4,1fr); } } .sat-stat-card { border-radius: var(--sat-radius-xl); padding: 2rem; text-align: center; } .sat-stat-num { font-size: 2.25rem; font-weight: 800; } @media (min-width:640px){ .sat-stat-num { font-size: 3rem; } } .sat-stat-lbl { margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } /* ===================================================================== 16. Contact CTA banner ===================================================================== */ .sat-cta-card { position: relative; overflow: hidden; border-radius: var(--sat-radius-xl); padding: 2.5rem; } @media (min-width:640px){ .sat-cta-card { padding: 4rem; } } .sat-cta-card .sat-cta-glow { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--sat-primary-rgb),0.15), transparent, rgba(var(--sat-accent-rgb),0.15)); } .sat-cta-inner { position: relative; display: grid; gap: 2rem; } @media (min-width:640px){ .sat-cta-inner { grid-template-columns: 1fr auto; align-items: center; } } .sat-cta-title { margin-top: 1.25rem; font-size: 1.875rem; font-weight: 700; line-height: 1.15; } @media (min-width:640px){ .sat-cta-title { font-size: 2.25rem; } } .sat-cta-sub { margin-top: 1.25rem; max-width: 36rem; font-size: 1rem; color: var(--sat-muted-fg); } /* ===================================================================== 17. Page hero (inner) ===================================================================== */ .sat-page-hero { position: relative; height: 45vh; min-height: 320px; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } @media (min-width:640px){ .sat-page-hero { height: 60vh; min-height: 460px; } } @media (max-width:767px){ .sat-page-hero { background-attachment: scroll; } } .sat-page-hero-ov { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--sat-bg-rgb),0.7), rgba(var(--sat-bg-rgb),0.6) 50%, var(--sat-bg)); } .sat-page-hero-grid { position: absolute; inset: 0; opacity: 0.4; } .sat-page-hero-inner { position: relative; height: 100%; max-width: 80rem; margin-inline: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 6rem 1rem 3rem; } .sat-page-hero.is-center .sat-page-hero-inner { justify-content: center; } @media (min-width:640px){ .sat-page-hero-inner { padding: 10rem 1.5rem 5rem; } } @media (min-width:1024px){ .sat-page-hero-inner { padding-inline: 2rem; } } .sat-page-hero-title { margin-top: 1rem; max-width: 48rem; font-size: 2.25rem; font-weight: 800; line-height: 1.1; } @media (min-width:640px){ .sat-page-hero-title { font-size: 3.75rem; } } @media (min-width:1024px){ .sat-page-hero-title { font-size: 4.5rem; } } .sat-page-hero-sub { margin-top: 1.75rem; max-width: 42rem; font-size: 1rem; color: var(--sat-muted-fg); } @media (min-width:640px){ .sat-page-hero-sub { font-size: 1.125rem; } } /* ===================================================================== 18. Our Story / Founder split ===================================================================== */ .sat-split { max-width: 80rem; margin-inline: auto; display: grid; gap: 3rem; padding-inline: 1rem; } @media (min-width:640px){ .sat-split { padding-inline: 1.5rem; } } @media (min-width:1024px){ .sat-split { grid-template-columns: repeat(12,1fr); gap: 4rem; padding-inline: 2rem; align-items: center; } } .sat-split-media { overflow: hidden; border-radius: var(--sat-radius-xl); width: 100%; } /* Mobile: fill the section width with a landscape crop so the image reads properly; portrait 4/5 only kicks in once the split becomes two columns. */ .sat-split-media img { width: 100%; aspect-ratio: 16/11; object-fit: cover; object-position: center; display: block; } @media (min-width:768px){ .sat-split-media img { aspect-ratio: 4/3; } } @media (min-width:1024px){ .sat-split-media img { aspect-ratio: 4/5; } } .sat-col-5 { grid-column: span 5; } .sat-col-7 { grid-column: span 7; } .sat-order-1 { order: 1; } .sat-order-2 { order: 2; } .sat-story-quote { margin-top: 2.5rem; border-radius: var(--sat-radius-xl); padding: 2rem; } .sat-story-quote-text { font-size: 1.875rem; font-weight: 700; line-height: 1.3; } @media (min-width:640px){ .sat-story-quote-text { font-size: 2.25rem; } } .sat-story-quote-by { margin-top: 1rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } .sat-founder-role { margin-top: 0.5rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } /* ===================================================================== 19. Licenses ===================================================================== */ .sat-lic-grid { margin-top: 4rem; display: grid; gap: 1.5rem; } @media (min-width:640px){ .sat-lic-grid { grid-template-columns: 1fr 1fr; } } @media (min-width:1024px){ .sat-lic-grid { grid-template-columns: repeat(4,1fr); } } .sat-lic-card { position: relative; height: 100%; border-radius: var(--sat-radius-xl); padding: 1.75rem; background: linear-gradient(180deg, rgba(49,88,114,0.70), rgba(34,73,98,0.75)); border: 1px solid rgba(232,234,237,0.25); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 0 rgba(var(--sat-hi-rgb),0.18), 0 14px 32px -18px rgba(var(--sat-shadow-rgb),0.5); transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s, border-color .4s; } .sat-lic-card:hover { transform: translateY(-6px); border-color: rgba(232,234,237,0.5); box-shadow: 0 22px 48px -20px rgba(var(--sat-shadow-rgb),0.55), 0 0 28px rgba(232,234,237,0.2); } .sat-lic-top { display: flex; align-items: flex-start; justify-content: space-between; } .sat-lic-iconbox { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 0.75rem; border: 1px solid rgba(var(--sat-primary-rgb),0.3); background: linear-gradient(135deg, rgba(var(--sat-primary-rgb),0.25), rgba(var(--sat-accent-rgb),0.15)); } .sat-lic-iconbox svg { width: 1.4rem; height: 1.4rem; } .sat-lic-badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-primary-rgb),0.35); background: rgba(var(--sat-primary-rgb),0.1); padding: 0.25rem 0.625rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--sat-primary); } .sat-lic-badge svg { width: 0.7rem; height: 0.7rem; } .sat-lic-title { margin-top: 2rem; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--sat-fg); } .sat-lic-code { margin-top: 0.25rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } .sat-lic-auth { position: relative; margin-top: 1.5rem; overflow: hidden; border-radius: 0.75rem; border: 1px solid rgba(var(--sat-primary-rgb),0.2); background: rgba(var(--sat-primary-rgb),0.05); padding: 0.75rem 1rem; } .sat-lic-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .sat-lic-auth-lbl { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sat-primary); } .sat-lic-auth-lbl svg { width: 0.8rem; height: 0.8rem; } .sat-lic-scan { position: absolute; inset: 0; pointer-events: none; width: 50%; background: linear-gradient(90deg, transparent, rgba(var(--sat-petrol-glow-rgb),0.35) 50%, transparent); animation: sat-scan 2.6s ease-in-out infinite; mix-blend-mode: multiply; } .sat-lic-btn { margin-top: 1.5rem; width: 100%; } .sat-lic-titlebox { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; } .sat-lic-titlebox-icon { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 0.75rem; border: 1px solid rgba(var(--sat-primary-rgb),0.4); background: rgba(var(--sat-primary-rgb),0.1); color: var(--sat-primary); } /* ===================================================================== 20. Services grid (services page) — metal cards ===================================================================== */ .sat-sg-card { position: relative; height: 100%; overflow: hidden; border-radius: var(--sat-radius-xl); padding: 2rem; transition: transform .5s; } .sat-sg-card:hover { transform: translateY(-0.25rem); } .sat-sg-top { display: flex; align-items: center; justify-content: space-between; } .sat-sg-num { font-size: 2.25rem; font-weight: 800; opacity: 0.2; } .sat-sg-title { margin-top: 1.75rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--sat-fg); } .sat-sg-desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.65; color: var(--sat-muted-fg); } /* ===================================================================== 21. Profile flipbook — real page-turn book (pdf.js + StPageFlip) ===================================================================== */ .sat-flip-sec { position: relative; padding-block: 5rem; } @media (min-width:640px){ .sat-flip-sec { padding-block: 7rem; } } .sat-flip-bp { position: absolute; inset: 0; opacity: 0.06; pointer-events: none; } .sat-flip-inner { position: relative; max-width: 90rem; margin-inline: auto; } .sat-flip-head { text-align: center; max-width: 42rem; margin-inline: auto; margin-bottom: 2.5rem; } .sat-flip-lead { margin-inline: auto; } .sat-flip { position: relative; width: 100%; } .sat-flip.is-fs { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sat-bg); padding: 1.5rem; } /* toolbar pill */ .sat-flip-toolbar { margin: 0 auto 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; max-width: 48rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-primary-rgb),0.25); background: rgba(var(--sat-card-rgb),0.6); padding: 0.5rem 1rem; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .sat-flip-btn { display: inline-flex; height: 2.25rem; align-items: center; gap: 0.5rem; justify-content: center; border-radius: 9999px; border: 1px solid rgba(var(--sat-primary-rgb),0.3); background: rgba(var(--sat-bg-rgb),0.4); color: var(--sat-primary); cursor: pointer; padding: 0 0.65rem; font-family: inherit; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; transition: background .25s, border-color .25s; } .sat-flip-btn.sat-flip-prev, .sat-flip-btn.sat-flip-next { width: 2.25rem; padding: 0; } .sat-flip-btn:hover { border-color: var(--sat-primary); background: rgba(var(--sat-primary-rgb),0.15); } .sat-flip-btn svg { width: 0.95rem; height: 0.95rem; } .sat-flip-counter { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } .sat-flip-counter svg { width: 0.9rem; height: 0.9rem; color: var(--sat-primary); } .sat-flip-count { color: var(--sat-fg); } .sat-flip-divider { display: none; width: 1px; height: 1.25rem; background: var(--sat-border); margin-inline: 0.25rem; } @media (min-width:640px){ .sat-flip-divider { display: block; } .sat-flip-fs-label { display: inline; } } .sat-flip-fs-label { display: none; } .sat-flip-pdf { display: inline-flex; height: 2.25rem; align-items: center; gap: 0.5rem; white-space: nowrap; border-radius: 9999px; padding: 0 1rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; color: var(--sat-primary-fg); background: var(--sat-gradient-brand); transition: transform .25s; } .sat-flip-pdf:hover { transform: scale(1.04); } .sat-flip-pdf svg { width: 0.9rem; height: 0.9rem; } /* book stage */ .sat-flip-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 360px; } .sat-flip-glow { position: absolute; inset: 0; z-index: -1; margin-inline: auto; max-width: 80rem; border-radius: 40px; background: linear-gradient(to right, rgba(var(--sat-primary-rgb),0.3), rgba(var(--sat-accent-rgb),0.2), rgba(var(--sat-primary-rgb),0.3)); opacity: 0.5; filter: blur(64px); pointer-events: none; } .sat-flip-book { position: relative; } .sat-flip-book .stf__parent { margin-inline: auto; } .sat-flip-book img, .sat-flip-book canvas { max-width: none; } .sat-flip-pg { background: #fff; overflow: hidden; border: 1px solid rgba(var(--sat-primary-rgb),0.15); } .sat-flip-canvas { display: block; width: 100%; height: 100%; } .sat-flip-loading { display: flex; gap: 0.25rem; align-items: center; justify-content: center; } .sat-flip-skel { display: block; width: 200px; height: 283px; border-radius: 2px; border: 1px solid rgba(var(--sat-primary-rgb),0.15); background: rgba(var(--sat-muted-rgb),0.4); animation: float-soft 1.4s ease-in-out infinite; } @keyframes float-soft { 0%,100%{ opacity:.5 } 50%{ opacity:.8 } } .sat-flip-empty { border-radius: var(--sat-radius-xl); border: 1px dashed rgba(var(--sat-border-rgb),0.8); padding: 3rem; text-align: center; color: var(--sat-muted-fg); } /* ===================================================================== 22. Contact form / info / map ===================================================================== */ .sat-contact { padding-block: 5rem; } .elementor-widget-sat-contact-form, .sat-contact, .sat-form-card, .sat-contact form { max-width: 100%; overflow-x: hidden; overflow-x: clip; } .sat-form-wrap { max-width: 48rem; margin-inline: auto; padding-inline: 1rem; } .sat-form-card { position: relative; overflow: hidden; border-radius: var(--sat-radius-xl); padding: 2rem; } @media (min-width:640px){ .sat-form-card { padding: 2.5rem; } } .sat-form-blur { position: absolute; right: -5rem; top: -5rem; height: 16rem; width: 16rem; border-radius: 9999px; background: rgba(var(--sat-primary-rgb),0.1); filter: blur(64px); } .sat-form-h { position: relative; font-size: 1.5rem; font-weight: 700; color: var(--sat-fg); } .sat-form-p { position: relative; margin-top: 0.5rem; font-size: 0.875rem; color: var(--sat-muted-fg); } .sat-form-alert { position: relative; margin-top: 1.5rem; display: flex; align-items: center; gap: 0.5rem; border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; } .sat-form-alert svg { width: 1.1rem; height: 1.1rem; } .sat-form-alert-success { border: 1px solid rgba(var(--sat-primary-rgb),0.45); background: rgba(var(--sat-primary-rgb),0.14); color: var(--sat-fg); } .sat-form-alert-error { border: 1px solid rgba(225,71,71,0.45); background: rgba(225,71,71,0.12); color: #FFE3E3; } .sat-form { position: relative; margin-top: 1.5rem; } .sat-form-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0,1fr); } @media (min-width:640px){ .sat-form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } .sat-form-field { margin-bottom: 1.25rem; } .sat-form-field label { display: block; margin-bottom: 0.5rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } .sat-form-field .sat-req { color: var(--sat-primary); margin-left: 0.25rem; } .sat-form-field input, .sat-form-field textarea, .sat-form-field select { width: 100%; max-width: 100%; border-radius: 0.5rem; border: 1px solid var(--sat-border); background: rgba(var(--sat-shadow-rgb),0.22); color: var(--sat-fg); padding: 0.75rem 1rem; font: inherit; font-size: 0.875rem; transition: border-color .3s; } .sat-form-field textarea { min-height: 8rem; resize: vertical; } .sat-form-field input:focus, .sat-form-field textarea:focus, .sat-form-field select:focus { outline: 0; border-color: var(--sat-primary); } /* The native dropdown list is painted by the OS: without an explicit dark background the light option text rendered white-on-white and vanished. */ .sat-form-field select { color-scheme: dark; background-color: #1B3F57; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sat-fg) 50%), linear-gradient(135deg, var(--sat-fg) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; } .sat-form-field select option, .sat-form-field select optgroup { background-color: #1B3F57; color: #EDEFF2; } [dir="rtl"] .sat-form-field select { background-position: 18px calc(50% + 2px), 23px calc(50% + 2px); padding-right: 1rem; padding-left: 2.5rem; } .sat-form-submit { margin-top: 2rem; } .sat-info-grid { margin-top: 2.5rem; display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); } @media (min-width:640px){ .sat-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (min-width:1024px){ .sat-info-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } } .sat-info-card { display: flex; height: 100%; align-items: center; gap: 1rem; border-radius: var(--sat-radius); padding: 1.25rem; transition: transform .3s; text-decoration: none; } .sat-info-card:hover { transform: translateY(-2px); } .sat-info-iconbox { display: grid; place-items: center; height: 3rem; width: 3rem; flex-shrink: 0; border-radius: 0.5rem; background: linear-gradient(135deg, rgba(var(--sat-primary-rgb),0.3), rgba(var(--sat-accent-rgb),0.2)); box-shadow: 0 0 0 1px rgba(var(--sat-primary-rgb),0.3) inset; } .sat-info-iconbox svg { width: 1.2rem; height: 1.2rem; } .sat-info-lbl { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } .sat-info-val { margin-top: 0.125rem; font-size: 0.875rem; font-weight: 600; color: var(--sat-fg); overflow-wrap: anywhere; } .sat-map-frame { overflow: hidden; border-radius: var(--sat-radius-xl); } .sat-map-frame iframe { height: 420px; width: 100%; border: 0; display: block; filter: contrast(1.02) saturate(1.05); } /* ===================================================================== 23. Footer ===================================================================== */ .sat-footer { position: relative; margin-top: 0; overflow: hidden; border-top: 1px solid rgba(var(--sat-primary-rgb),0.25); } .sat-footer-top-line { position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(var(--sat-primary-rgb),0.7), transparent); } .sat-footer-grid { position: relative; max-width: 80rem; margin-inline: auto; display: grid; gap: 2.5rem; padding: 4rem 1rem; } @media (min-width:640px){ .sat-footer-grid { padding-inline: 1.5rem; } } @media (min-width:1024px){ .sat-footer-grid { grid-template-columns: repeat(4,1fr); padding-inline: 2rem; } } .sat-footer-brand { display: flex; align-items: center; gap: 0.75rem; } .sat-footer-brand img { height: 3.5rem; width: 3.5rem; object-fit: contain; } .sat-footer-brand-name { font-size: 1.125rem; font-weight: 700; } .sat-footer-brand-sub { font-size: 0.625rem; letter-spacing: 0.25em; color: var(--sat-muted-fg); } .sat-footer-desc { margin-top: 1rem; font-size: 0.875rem; line-height: 1.65; color: var(--sat-muted-fg); } .sat-footer-h { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sat-fg); } .sat-footer-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: var(--sat-muted-fg); } .sat-footer-list a { color: var(--sat-muted-fg); text-decoration: none; transition: color .3s; } .sat-footer-list a:hover { color: var(--sat-fg); } .sat-footer-contact { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; color: var(--sat-muted-fg); } .sat-footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; } .sat-footer-contact svg { width: 1rem; height: 1rem; margin-top: 0.15rem; flex-shrink: 0; } /* Footer glyphs stay white on the petrol band — doubled class beats the universal icon rule and any theme colour. */ .sat-footer .sat-footer-contact.sat-footer-contact svg, .sat-footer .sat-footer-contact.sat-footer-contact i, .sat-footer .sat-footer-contact.sat-footer-contact li > svg { color: #FFF; stroke: #FFF; } .sat-footer .sat-footer-contact.sat-footer-contact a:hover svg { color: var(--sat-silver-bright); stroke: var(--sat-silver-bright); } .sat-footer-contact a { color: var(--sat-muted-fg); text-decoration: none; } .sat-footer-contact a:hover { color: var(--sat-fg); } .sat-footer-bar { position: relative; border-top: 1px solid rgba(var(--sat-border-rgb),0.6); } .sat-footer-bar-inner { max-width: 80rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1.5rem 1rem; font-size: 0.75rem; color: var(--sat-muted-fg); } @media (min-width:640px){ .sat-footer-bar-inner { flex-direction: row; padding-inline: 1.5rem; } } @media (min-width:1024px){ .sat-footer-bar-inner { padding-inline: 2rem; } } .sat-footer-slogan { letter-spacing: 0.1em; } .sat-agency-link { color: var(--sat-primary); text-decoration: none; } .sat-agency-link:hover { text-decoration: underline; } /* ===================================================================== 25. SPACING OVERRIDES — beat theme / Elementor heading & list resets. Elementor/themes apply `.elementor-widget-container h1..h6 { margin:0 }` and `ul { margin:0 }` at a higher specificity than a single class, which was silently eating our card/footer spacing. Doubling the class name (.x.x) raises specificity above those resets without needing !important. ===================================================================== */ /* Card icon → title (and title → number) gaps */ .sat-svc-title.sat-svc-title { margin-top: 1.75rem; } .sat-feat-title.sat-feat-title { margin-top: 2rem; } .sat-sg-title.sat-sg-title { margin-top: 2rem; } .sat-lic-title.sat-lic-title { margin-top: 2rem; } .sat-info-val.sat-info-val { margin-top: 0.35rem; } .sat-proj-card-title.sat-proj-card-title { margin-top: 0.75rem; } .sat-comp-num.sat-comp-num { margin-bottom: 0.4rem; } /* Section heading rhythm: eyebrow → H2 → lead/subtitle */ .sat-h2.sat-h2 { margin-top: 1.5rem; } .sat-lead.sat-lead { margin-top: 2rem; } .sat-hero-sub.sat-hero-sub { margin-top: 2rem; } .sat-cta-title.sat-cta-title { margin-top: 1.5rem; } .sat-cta-sub.sat-cta-sub { margin-top: 1.5rem; } .sat-page-hero-title.sat-page-hero-title { margin-top: 1.5rem; } .sat-page-hero-sub.sat-page-hero-sub { margin-top: 2rem; } /* Footer: heading → list/contact gap (force, themes reset ul/h4 margins) */ .sat-footer .sat-footer-h.sat-footer-h { margin: 0 0 1.5rem; } .sat-footer .sat-footer-list.sat-footer-list { margin: 0; padding: 0; list-style: none; } .sat-footer .sat-footer-contact.sat-footer-contact { margin: 0; padding: 0; list-style: none; } .sat-footer .sat-footer-desc.sat-footer-desc { margin-top: 1.25rem; } .sat-footer .sat-footer-list li { margin: 0; } /* ===================================================================== 26. Projects Stack (Portfolio) — sticky scroll-stack (desktop only). Cards sit on top of one another; on scroll each one pins at a slightly lower offset so the previous card's top edge peeks out behind it. Mobile = plain vertical list (no sticky). Pure CSS, no JS. ===================================================================== */ .sat-stack-sec { position: relative; padding-block: 5rem; } /* sticky must not be clipped by an ancestor — keep this section/wrap visible */ .sat-stack-sec, .sat-stack-wrap, .sat-stack-list { overflow: visible; } .elementor-widget-sat-projects-stack, .elementor-widget-sat-projects-stack > .elementor-widget-container { overflow: visible; } @media (min-width:640px){ .sat-stack-sec { padding-block: 7rem; } } .sat-stack-bp { position: absolute; inset: 0; opacity: 0.05; pointer-events: none; } .sat-stack-wrap { position: relative; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; } @media (min-width:640px){ .sat-stack-wrap { padding-inline: 1.5rem; } } @media (min-width:1024px){ .sat-stack-wrap { padding-inline: 2rem; } } .sat-stack-head { text-align: center; margin-bottom: 3rem; } .sat-stack-lead { margin-inline: auto; max-width: 42rem; } .sat-stack-list { display: flex; flex-direction: column; gap: 1.5rem; } .sat-stack-card { overflow: hidden; border-radius: 28px; border: 1px solid rgba(var(--sat-primary-rgb),0.25); background: linear-gradient(180deg, rgba(56,105,138,0.92) 0%, rgba(37,78,106,0.95) 100%); box-shadow: 0 30px 80px -30px rgba(var(--sat-shadow-rgb),0.7); } .sat-stack-grid { display: grid; gap: 0; } .sat-stack-media { position: relative; overflow: hidden; aspect-ratio: 16/10; } .sat-stack-media img { height: 100%; width: 100%; object-fit: cover; transition: transform .7s ease; } .sat-stack-card:hover .sat-stack-media img { transform: scale(1.05); } .sat-stack-media-ov { position: absolute; inset: 0; mix-blend-mode: overlay; background: linear-gradient(to top right, rgba(var(--sat-primary-rgb),0.2), transparent 50%, rgba(var(--sat-accent-rgb),0.1)); } .sat-stack-num, .sat-stack-loc { position: absolute; display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-primary-rgb),0.4); padding: 0.375rem 0.75rem; font-size: 11px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sat-stack-num { left: 1rem; top: 1rem; color: var(--sat-primary); background: rgba(var(--sat-bg-rgb),0.7); text-transform: uppercase; letter-spacing: 0.08em; } .sat-stack-loc { left: 1rem; bottom: 1rem; color: var(--sat-fg); background: rgba(var(--sat-card-rgb),0.75); border-color: rgba(var(--sat-primary-rgb),0.3); } .sat-stack-num svg, .sat-stack-loc svg { width: 0.85rem; height: 0.85rem; color: var(--sat-primary); } .sat-stack-body { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; padding: 1.5rem; } @media (min-width:640px){ .sat-stack-body { padding: 2rem; } } .sat-stack-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; color: var(--sat-primary); } .sat-stack-title { margin-top: 0.75rem; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--sat-silver-bright); } @media (min-width:640px){ .sat-stack-title { font-size: 1.875rem; } } .sat-stack-desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--sat-muted-fg); } .sat-stack-stats { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.5rem; } .sat-stack-stat { border-radius: 0.5rem; border: 1px solid rgba(var(--sat-primary-rgb),0.2); background: rgba(var(--sat-bg-rgb),0.4); padding: 0.625rem; } .sat-stack-stat dt { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sat-muted-fg); } .sat-stack-stat dd { margin: 0.125rem 0 0; font-size: 0.8rem; font-weight: 600; color: var(--sat-fg); } .sat-stack-btn { align-self: flex-start; } .sat-stack-spacer { display: none; } @media (min-width:768px){ .sat-stack-grid { grid-template-columns: repeat(12,minmax(0,1fr)); } .sat-stack-media { grid-column: span 7 / span 7; aspect-ratio: auto; min-height: 440px; } .sat-stack-body { grid-column: span 5 / span 5; } /* sticky scroll-stack: each wrapper pins; later cards cover earlier ones */ .sat-stack-list { display: block; } .sat-stack-sticky { position: -webkit-sticky; position: sticky; margin-bottom: 2.5rem; } .sat-stack-sticky:last-of-type { margin-bottom: 0; } .sat-stack-spacer { display: block; height: 45vh; } } /* ===================================================================== 27. Preloader — full-screen intro, Lovable Preloader.tsx. Client request: the progress-bar line is removed and the logo is large. Rendered once (sitewide) from the Theme Builder header template. ===================================================================== */ .sat-preloader { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: var(--sat-bg); transition: opacity .7s ease, visibility .7s ease; } .sat-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .sat-preloader-bp { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; } .sat-preloader-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, transparent 50%, var(--sat-bg)); } .sat-preloader-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: 1.5rem; text-align: center; } .sat-preloader-logo { width: auto; max-width: 90vw; height: auto; display: block; animation: sat-preloader-logo 1.8s ease-in-out infinite; } @keyframes sat-preloader-logo { 0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 12px rgba(var(--sat-shadow-rgb),0.35)); } 50% { transform: scale(1.05); filter: drop-shadow(0 8px 24px rgba(var(--sat-shadow-rgb),0.55)); } } /* Never trap the Elementor editor canvas behind the overlay */ body.elementor-editor-active .sat-preloader, body.elementor-editor-preview .sat-preloader { position: relative; inset: auto; min-height: 320px; z-index: 1; opacity: 1 !important; visibility: visible !important; } @media (prefers-reduced-motion: reduce) { .sat-preloader-logo { animation: none; } } /* ===================================================================== 28. Split-media overlay (About → "Our Company" image). ===================================================================== */ .sat-split-media { position: relative; } .sat-media-ov { position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; background: linear-gradient(to top, rgba(var(--sat-shadow-rgb),0.72) 0%, rgba(var(--sat-shadow-rgb),0.34) 45%, rgba(var(--sat-shadow-rgb),0.14) 100%), linear-gradient(135deg, rgba(38,87,120,0.55) 0%, rgba(35,69,92,0.30) 55%, transparent 100%); } .sat-split-media, .sat-about-media .sat-frame, .sat-frame { position: relative; } /* ===================================================================== 29. Header social icon (links to the Social page) ===================================================================== */ .sat-header-social { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--sat-border); background: rgba(var(--sat-card-rgb),0.4); color: var(--sat-fg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-decoration: none; transition: border-color .3s, background .3s, color .3s; } @media (min-width:640px){ .sat-header-social { height: 2.75rem; width: 2.75rem; } } .sat-header-social svg { width: 1.05rem; height: 1.05rem; } .sat-header-social.sat-header-social-icon { color: var(--sat-fg); } .sat-header-social:hover { border-color: rgba(var(--sat-primary-rgb),0.6); background: rgba(var(--sat-primary-rgb),0.15); color: var(--sat-primary); } /* ===================================================================== 30. Social page — tile grid (Lovable SocialPage.tsx) ===================================================================== */ .sat-social-sec { position: relative; display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 5rem 0; } @media (min-width:640px){ .sat-social-sec { padding-block: 7rem; } } .sat-social-bp { position: absolute; inset: 0; opacity: 0.2; pointer-events: none; } .sat-social-wrap { position: relative; max-width: 56rem; text-align: center; } .sat-social-title { margin-top: 1rem; font-size: 2.25rem; font-weight: 800; line-height: 1.1; } @media (min-width:640px){ .sat-social-title { font-size: 3rem; } } @media (min-width:1024px){ .sat-social-title { font-size: 3.75rem; } } .sat-social-lead { margin-inline: auto; max-width: 36rem; } .sat-social-grid { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width:640px){ .sat-social-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } .sat-social-card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; border-radius: var(--sat-radius-xl); padding: 1.5rem; text-decoration: none; color: var(--sat-fg); transition: transform .3s ease, border-color .3s ease; } .sat-social-card:hover { transform: translateY(-4px); border-color: rgba(232,234,237,0.5); } .sat-social-badge { display: grid; place-items: center; height: 3.5rem; width: 3.5rem; flex-shrink: 0; border-radius: 9999px; color: #FFF; box-shadow: 0 10px 22px -12px rgba(var(--sat-shadow-rgb),0.6); transition: transform .3s ease; } .sat-social-card:hover .sat-social-badge { transform: scale(1.1); } /* white glyph on the brand-coloured badge — beats the universal icon rule */ .sat-social-badge.sat-social-icon, .sat-social-badge.sat-social-icon svg, .sat-social-badge.sat-social-icon i { color: #FFF; } .sat-social-badge svg { width: 1.5rem; height: 1.5rem; } .sat-social-lbl { font-size: 0.875rem; font-weight: 600; } /* ===================================================================== 31. Project detail page (Lovable ProjectDetailPage.tsx) ===================================================================== */ .sat-pd { display: block; } /* -- hero -- */ .sat-pd-hero { position: relative; overflow: hidden; } .sat-pd-hero-media { position: absolute; inset: 0; } .sat-pd-hero-media img { height: 100%; width: 100%; object-fit: cover; object-position: center; display: block; } .sat-pd-hero-ov1, .sat-pd-hero-ov2, .sat-pd-hero-grid { position: absolute; inset: 0; pointer-events: none; } .sat-pd-hero-ov1 { background: linear-gradient(to right, rgba(var(--sat-shadow-rgb),0.85) 0%, rgba(var(--sat-shadow-rgb),0.65) 50%, rgba(var(--sat-shadow-rgb),0.35) 100%); } .sat-pd-hero-ov2 { background: linear-gradient(to top, var(--sat-bg) 0%, transparent 55%, transparent 100%); } .sat-pd-hero-grid { opacity: 0.4; } .sat-pd-hero-inner { position: relative; max-width: 80rem; margin-inline: auto; padding: 5rem 1rem 4rem; } @media (min-width:640px){ .sat-pd-hero-inner { padding: 8rem 1.5rem 6rem; } } @media (min-width:1024px){ .sat-pd-hero-inner { padding: 10rem 2rem 8rem; } } .sat-pd-hero-box { display: flex; flex-direction: column; align-items: flex-start; max-width: 48rem; } .sat-pd-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.24em; color: var(--sat-silver); text-decoration: none; transition: color .3s; } .sat-pd-back:hover { color: var(--sat-silver-bright); } .sat-pd-back svg { width: 0.9rem; height: 0.9rem; } .sat-pd-chip { display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-border-rgb),0.6); background: rgba(var(--sat-card-rgb),0.45); padding: 0.375rem 1rem; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .sat-pd-chip .sat-dot { height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: var(--sat-silver); } .sat-pd-chip span:last-child { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: var(--sat-silver); } .sat-pd-title { margin-top: 1.5rem; font-size: 2.25rem; font-weight: 800; line-height: 1.05; } @media (min-width:640px){ .sat-pd-title { font-size: 3.75rem; } } @media (min-width:1024px){ .sat-pd-title { font-size: 4.5rem; } } .sat-pd-lead { margin-top: 1.5rem; max-width: 42rem; font-size: 1rem; line-height: 1.7; color: var(--sat-silver); } @media (min-width:640px){ .sat-pd-lead { font-size: 1.125rem; } } .sat-pd-loc { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; border-radius: 9999px; border: 1px solid rgba(var(--sat-border-rgb),0.6); background: rgba(var(--sat-card-rgb),0.45); padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; color: var(--sat-silver); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .sat-pd-loc svg { width: 0.9rem; height: 0.9rem; } .sat-pd-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; width: 100%; } @media (min-width:640px){ .sat-pd-actions { flex-direction: row; width: auto; } } .sat-pd-actions .sat-btn { justify-content: center; } /* -- overview + facts -- */ .sat-pd-ov { position: relative; padding-block: 3.5rem; border-block: 1px solid rgba(var(--sat-primary-rgb),0.2); background: linear-gradient(rgba(var(--sat-card-rgb),0.25), rgba(var(--sat-card-rgb),0.25)); } @media (min-width:640px){ .sat-pd-ov { padding-block: 5rem; } } .sat-pd-ov-grid { max-width: 80rem; margin-inline: auto; display: grid; gap: 2rem; padding-inline: 1rem; } @media (min-width:640px){ .sat-pd-ov-grid { padding-inline: 1.5rem; } } @media (min-width:1024px){ .sat-pd-ov-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; padding-inline: 2rem; } } .sat-pd-works { margin-top: 2rem; display: grid; gap: 0.75rem; grid-template-columns: minmax(0,1fr); } @media (min-width:640px){ .sat-pd-works { grid-template-columns: repeat(2,minmax(0,1fr)); } } .sat-pd-work { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--sat-radius); padding: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--sat-fg); } .sat-pd-work-icon { display: inline-flex; } .sat-pd-work-icon svg { width: 1rem; height: 1rem; } .sat-pd-facts { display: grid; gap: 0.75rem; grid-template-columns: minmax(0,1fr); align-content: start; } @media (min-width:480px){ .sat-pd-facts { grid-template-columns: repeat(2,minmax(0,1fr)); } } .sat-pd-fact { border-radius: var(--sat-radius-xl); padding: 1rem; min-width: 0; } .sat-pd-fact-icon { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; margin-bottom: 0.75rem; border-radius: 9999px; background: rgba(var(--sat-shadow-rgb),0.12); } .sat-pd-fact-icon svg { width: 1.05rem; height: 1.05rem; } .sat-pd-fact dt { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sat-muted-fg); } .sat-pd-fact dd { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 700; color: var(--sat-fg); overflow-wrap: anywhere; } /* -- bottom CTA -- */ .sat-pd-cta { position: relative; padding-block: 4rem; } @media (min-width:640px){ .sat-pd-cta { padding-block: 5rem; } } .sat-pd-cta-actions { margin-top: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; } @media (min-width:640px){ .sat-pd-cta-actions { flex-direction: row; } } .sat-pd-cta-actions .sat-btn { justify-content: center; } /* ===================================================================== 32. Projects — "view all" link + stack card action row ===================================================================== */ .sat-proj-viewall { white-space: nowrap; align-self: flex-end; } .sat-stack-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .sat-stack-actions .sat-btn { flex: 1 1 auto; justify-content: center; } @media (min-width:640px){ .sat-stack-actions .sat-btn { flex: 0 0 auto; } } a.sat-stack-media { display: block; text-decoration: none; } /* Social page heading block */ .sat-social-head { text-align: center; } /* Behaviour-only hooks (JS selectors) — declared so the coverage check is clean */ .sat-counter { font: inherit; color: inherit; } .sat-flip-fs { cursor: pointer; } .sat-proj-prev, .sat-proj-next { cursor: pointer; } /* ===================================================================== 33. Map caption row (Lovable Map.tsx — address + "Open in Google Maps") ===================================================================== */ .sat-map-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; } .sat-map-title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--sat-fg); } .sat-map-title svg { width: 1rem; height: 1rem; color: var(--sat-primary); flex-shrink: 0; } .sat-map-link { white-space: nowrap; } /* Section leads sit centred under a centred heading */ .sat-lead.sat-lead { max-width: 42rem; } /* ===================================================================== 34. Centred section head — eyebrow, H2 AND the description under it. A class instead of inline styles so theme resets can't win, and so the lead inherits the centring rather than relying on per-widget markup. ===================================================================== */ .sat-sec-head.sat-sec-head { max-width: 48rem; margin-inline: auto; text-align: center; } .sat-sec-head.sat-sec-head > *, .sat-sec-head.sat-sec-head .sat-h2, .sat-sec-head.sat-sec-head .sat-lead, .sat-sec-head.sat-sec-head p { text-align: center; } .sat-sec-head.sat-sec-head .sat-lead { margin-inline: auto; max-width: 42rem; } .sat-sec-head.sat-sec-head .sat-eyebrow-rule { justify-content: center; } /* the project-detail CTA head is a container, so it may run wider */ .sat-container.sat-sec-head.sat-sec-head { max-width: 64rem; } /* ===================================================================== 35. In-place form notice (AJAX submit — no page reload) ===================================================================== */ .sat-form-live { position: relative; margin-top: 1.5rem; } .sat-form-live[hidden] { display: none; } .sat-form-live-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; font-size: 0.9rem; line-height: 1; } .sat-form-live-text { flex: 1 1 auto; } .sat-form-alert-pending { border: 1px solid rgba(var(--sat-border-rgb),0.7); background: rgba(var(--sat-shadow-rgb),0.22); color: var(--sat-muted-fg); } /* ===================================================================== 36. Project card typography — colour safety net. Two things bit the project titles on mobile: 1. the mobile carousel card is an , so its

inherited the theme's link colour (blue) instead of the site's light grey; 2. the gradient titles rely on background-clip:text — where that is unsupported or overridden the text falls back to whatever colour the cascade last set, which on a link is again blue. Below: links inside project cards never take the theme's colour, and on mobile the project name is a flat light grey rather than a clipped gradient, so it can never resolve to blue. ===================================================================== / .sat-stack-card a, .sat-stack-card a:link, .sat-stack-card a:visited, .sat-proj-mcard a, .sat-proj-mcard a:link, .sat-proj-mcard a:visited, .sat-proj-card a, .sat-proj-card a:link, .sat-proj-card a:visited { color: inherit; } .sat-stack-title.sat-stack-title, .sat-proj-mbody h3, .sat-proj-card-title.sat-proj-card-title { color: var(--sat-silver-bright); -webkit-text-fill-color: currentColor; } @media (max-width: 767px) { / Flat light grey on small screens — no background-clip involved at all. */ .sat-stack-title.sat-stack-title, .sat-stack-title.sat-petrol-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sat-silver-bright); -webkit-text-fill-color: var(--sat-silver-bright); animation: none; text-shadow: none; } }