/*══════════════════════════════════════════════════════ LUMION — Medialogic MENA | global.css TABLE OF CONTENTS 1. CSS Custom Properties (Design Tokens) 2. Page-Specific Color Overrides 3. Reset & Base 4. Navbar 5. Mobile Nav 6. Palette Buttons 7. Scroll-Video Mask (SVM) Sections 8. Sticky Title Wrappers (LV / LP) 9. Content Section Grid 10. Cards (3-up product) 11. Testimonials 12. Accordion + Video (CWL) 13. Logo Carousel 14. Gallery Grid 15. Cloud Feature Cards 16. Link Grid (3-tile) 17. Blog Section 18. Footer 19. Scroll Reveal Utility 20. Responsive ══════════════════════════════════════════════════════*/ /* ─── 1. DESIGN TOKENS ─────────────────────────────── */ :root { /* Brand */ --navy: #2b4f82; --navy-dark: #1d3460; --accent: #b8d6ed; --accent-rgb: 184, 214, 237; /* Page-level tokens — overridden per page (see section 2) */ --page-primary: var(--navy); --page-secondary: var(--accent); /* Navbar */ --nav-h: 64px; --nav-bg: #2b4f82; /* Typography */ --font: 'DM Sans', sans-serif; /* Spacing */ --section-py: 72px; --container: 1300px; --container-wide: 1440px; } /* ─── 2. PAGE-SPECIFIC COLOR OVERRIDES ─────────────── */ /* Usage: add data-page="architectural" to or */ [data-page="architectural"], [data-page="lumion-view"] { --page-primary: #66263D; --page-secondary: #DB99B5; } [data-page="landscape"]{ --page-primary: #145A46; --page-secondary: #A3D9C4; } [data-page="tips-guides"]{ --page-primary: #4f7d38; --page-secondary: #e5ffcf; } [data-page="interior"] { --page-primary: #4A3B2B; --page-secondary: #FAE5A3; } [data-page="cloud"] { --page-primary: #212124; --page-secondary: #FFFFFF; } /* Home / Lumion Pro default uses :root values */ /* ─── 3. RESET & BASE ──────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--font); background: #fff; color: #fff; overflow-x: clip; -webkit-font-smoothing: antialiased; max-width: 100vw; } /* Container helpers */ .container { max-width: var(--container); margin: 0 auto; padding: 0 40px; } .container--wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 40px; } /* ─── 4. NAVBAR ────────────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 200; background: var(--page-primary); transition: background .3s, opacity .35s, transform .35s; border-bottom: 1px solid rgba(255,255,255,.08); } .navbar.scrolled { background: var(--page-primary); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.15); } .navbar.nav-hidden { opacity: 0; pointer-events: none; transform: translateY(-6px); } .nav-inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 40px; } .nav-left { display: flex; align-items: center; } .nav-center{ display: flex; justify-content: center; } .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; color: rgba(255,255,255,.78); text-decoration: none; cursor: pointer; font-size: 14.5px; font-weight: 400; padding: 8px 14px; background: none; border: none; font-family: var(--font); transition: color .15s; white-space: nowrap; } .nav-link:hover, .nav-item.mega-open > .nav-link { color: #fff; } /* Mega menu */ .mega { position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--page-primary); border-top: 1px solid rgb(255, 255, 255); z-index: 190; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .2s, transform .2s; } .nav-item.mega-open .mega { opacity: 1; pointer-events: all; transform: translateY(0); } .mega-inner { max-width: 1200px; margin: 0 auto; padding: 36px 40px 44px; display: grid; grid-template-columns: 1fr 1fr 1px 1fr; gap: 0 40px; } .mega-lbl { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 20px; } .mega-lbl.col12 { grid-column: 1/3; } .mega-lbl.col4 { grid-column: 4; } .mega-sols { grid-column: 1/3; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; } .mega-div { grid-column: 3; background: rgba(255,255,255,.1); width: 1px; } .mega-tools { grid-column: 4; display: flex; flex-direction: column; } .mega-item { display: block; text-decoration: none; color: inherit; padding-bottom: 2px; } .mega-inner[style*="grid-template-columns:1fr 1fr 1fr 1fr"] .mega-item { margin-bottom: 8px; } .mega-item__t { font-size: 15px; font-weight: 600; color: var(--page-secondary); margin-bottom: 6px; transition: color .15s; } .mega-item:hover .mega-item__t { color: #fff; } .mega-item__d { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.5; } .tool-link { display: block; text-decoration: none; color: rgba(255,255,255,.82); font-size: 18px; font-weight: 300; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .15s, padding-left .15s; } .tool-link:last-child { border: none; } .tool-link:hover { color: #fff; padding-left: 6px; } .tool-cta { color: var(--page-secondary) !important; } .logo-svg { width: 108px; height: auto; fill: var(--page-secondary); display: block; } .btn-login { color: rgba(255,255,255,.78); text-decoration: none; font-size: 14.5px; font-weight: 400; padding: 8px 14px; background: none; border: none; font-family: var(--font); cursor: pointer; transition: color .15s; } .btn-login:hover { color: #fff; } .btn-start { color: rgba(255,255,255,.88); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border: none; background: none; transition: color .15s; white-space: nowrap; } .btn-start:hover { color: #fff; } /* Burger */ .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; } .burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; } /* ─── 5. MOBILE NAV ────────────────────────────────── */ .mob-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--page-primary); z-index: 300; display: flex; flex-direction: column; padding: 60px 0 0; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); overflow-y: auto; } .mob-nav.open { transform: translateX(0); } .mob-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: rgba(255,255,255,.7); font-size: 26px; cursor: pointer; line-height: 1; z-index: 2; padding: 6px; } .mob-item { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,.08); } .mob-link { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 400; color: rgba(255,255,255,.88); text-decoration: none; padding: 14px 24px; background: none; border: none; font-family: var(--font); cursor: pointer; text-align: left; transition: color .15s; } .mob-link:hover { color: #fff; } a.mob-link { border-bottom: 1px solid rgba(255,255,255,.08); } .mob-arrow { flex-shrink: 0; transition: transform .25s ease; } .mob-item.mob-open .mob-arrow { transform: rotate(180deg); } .mob-sub { height: 0; overflow: hidden; background: rgba(0,0,0,.12); transition: height .3s cubic-bezier(.4,0,.2,1); } .mob-sub-link { display: block; font-size: 14px; color: rgba(255,255,255,.7); text-decoration: none; padding: 11px 24px 11px 36px; border-bottom: 1px solid rgba(255,255,255,.05); transition: color .15s; } .mob-sub-link:last-child { border-bottom: none; padding-bottom: 14px; } .mob-sub-link:hover { color: #fff; } .mob-sub-divider { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3); padding: 12px 24px 4px 36px; } .mob-sub-accent { color: var(--page-secondary) !important; } .mob-nav-bottom { margin-top: auto; padding: 20px 24px 36px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); } .mob-cta-btn { display: block; text-align: center; text-decoration: none; color: #fff; font-size: 15px; font-weight: 600; padding: 13px 20px; border-radius: 6px; border: 1.5px solid rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.12); transition: background .2s; } .mob-cta-btn:hover { background: rgba(var(--accent-rgb),.25); } .mob-nav > .mob-item:first-child .mob-link:first-child, .mob-nav > a.mob-link:first-child { padding-top: 14px; } /* ─── 6. PALETTE BUTTONS ───────────────────────────── */ .pbtn { position: relative; display: inline-block; text-decoration: none; font-family: var(--font); cursor: pointer; flex-shrink: 0; } .pbtn-inner { position: relative; overflow: hidden; padding: 0 26px; height: 46px; border-radius: 5px; border: 1.5px solid var(--accent); display: inline-flex; align-items: center; justify-content: center; min-width: 130px; background: rgba(var(--accent-rgb),.15); } .pbtn-text, .pbtn-clone { display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 700; color: #fff; letter-spacing: .01em; white-space: nowrap; z-index: 2; transition: transform .28s cubic-bezier(.4,0,.2,1); } .pbtn-text { position: absolute; inset: 0; transform: translateY(0%); } .pbtn-clone { position: absolute; top: 100%; left: 0; right: 0; height: 100%; transform: translateY(0%); pointer-events: none; } .pbtn:hover .pbtn-text { transform: translateY(-100%); } .pbtn:hover .pbtn-clone { transform: translateY(-100%); } .pbtn-bg { position: absolute; inset: 0; z-index: 1; background: rgba(var(--accent-rgb),.15); transition: background .25s; } .pbtn:hover .pbtn-bg { background: rgba(var(--accent-rgb),.35); } /* Ghost */ .pbtn-ghost .pbtn-inner { background: transparent; } .pbtn-ghost .pbtn-bg { background: transparent; } .pbtn-ghost:hover .pbtn-bg { background: rgba(255,255,255,.1); } /* Dark (on white bg) */ .pbtn-dark .pbtn-inner { border-color: var(--navy); background: var(--navy); } .pbtn-dark .pbtn-bg { background: var(--navy); } .pbtn-dark:hover .pbtn-bg { background: var(--navy-dark); } /* Dark ghost */ .pbtn-dark-ghost .pbtn-inner { border-color: var(--navy); background: transparent; } .pbtn-dark-ghost .pbtn-text, .pbtn-dark-ghost .pbtn-clone { color: var(--navy); } .pbtn-dark-ghost .pbtn-bg { background: transparent; } .pbtn-dark-ghost:hover .pbtn-bg { background: rgba(43,79,130,.08); } /* ─── 7. SCROLL-VIDEO MASK (SVM) ───────────────────── */ .svm-section { position: relative; height: 250vh; } .svm-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .svm-sticky::before { content: ''; position: absolute; inset: 0; z-index: 0; } .svm-section--light .svm-sticky::before { background: #fff; } .svm-section--dark .svm-sticky::before { background: var(--navy); } .svm-video-wrap { position: absolute; inset: 0; z-index: 2; --svm-y: 160%; clip-path: ellipse(95% 60% at 50% var(--svm-y)); will-change: clip-path; } .svm-video-wrap video { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .svm-text-dark { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; z-index: 3; text-align: center; } .svm-text-dark .svm-eyebrow { font-size: 14px; font-weight: 600; color: var(--navy); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; opacity: .7; } .svm-text-dark h3 { font-size: clamp(32px,4vw,60px); font-weight: 700; color: var(--navy); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 24px; } .svm-text-dark p { font-size: 17px; color: rgba(43,79,130,.7); margin-bottom: 36px; max-width: 480px; } .svm-text-white { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; z-index: 5; text-align: center; --svm-y: 160%; clip-path: ellipse(95% 60% at 50% var(--svm-y)); pointer-events: none; } .svm-text-white.clickable { pointer-events: all; } .svm-text-white .svm-eyebrow { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; } .svm-text-white h3 { font-size: clamp(32px,4vw,60px); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -.025em; margin-bottom: 24px; } .svm-text-white p { font-size: 17px; color: rgba(255,255,255,.9); margin-bottom: 36px; max-width: 480px; } .svm-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ─── 8. STICKY TITLE WRAPPERS ─────────────────────── */ .lv-title-wrap, .lp-title-wrap { position: relative; height: 200vh; } .lv-title-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #fff; z-index: 4; } .lv-title-sticky h3 { font-size: clamp(40px,6vw,72px); font-weight: 700; color: var(--navy); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 16px; } .lv-title-sticky p { font-size: 17px; color: rgba(43,79,130,.55); font-weight: 400; } .lp-title-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #2b5486; z-index: 4; } .lp-title-sticky h3 { font-size: clamp(40px,6vw,72px); font-weight: 700; color: #b8d6ed; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 16px; } .lp-title-sticky p { font-size: 17px; color: rgba(184,214,237,.55); font-weight: 400; } /* ─── 9. CONTENT SECTION GRID ──────────────────────── */ .lv-content-section { position: relative; z-index: 6; background: #fff; } .lp-content-section { position: relative; z-index: 6; background: #2b5486; padding-bottom: 0; } .lv-content-inner { max-width: 1300px; margin: 0 auto; padding: 72px 40px 80px; display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; } .lv-text h4 { font-size: clamp(32px,4vw,52px); font-weight: 700; color: var(--navy); letter-spacing: -.025em; line-height: 1.1; margin-bottom: 28px; } .lv-text p { font-size: 15px; color: #444; line-height: 1.7; margin-bottom: 18px; } .lv-text p b { color: var(--navy); } .lv-text a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .lv-ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; } .lv-media { border-radius: 10px; overflow: hidden; position: relative; } .lv-media video { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 10px; } .lv-caption { font-size: 13px; color: rgba(184,214,237,.6); margin-top: 10px; line-height: 1.4; } .lv-text--light h4 { color: #b8d6ed; } /* ─── 10. CARDS (3-up product) ──────────────────────── */ .cards-section { background: #fff; padding: 64px 0 80px; position: relative; z-index: 5; } .cards-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .cards-head { text-align: center; margin-bottom: 72px; } .cards-head h2 { font-size: clamp(28px,3vw,44px); font-weight: 700; color: var(--navy); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 16px; } .cards-head p { font-size: 16px; color: rgba(43,79,130,.6); line-height: 1.6; max-width: 540px; margin: 0 auto; } .cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; } .card { display: flex; flex-direction: column; opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; } .card.vis { opacity: 1; transform: translateY(0); } .card[data-i="1"] { transition-delay: .1s; } .card[data-i="2"] { transition-delay: .2s; } .card-img { position: relative; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; margin-bottom: 20px; background: #f0f4f8; } .card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .card-title { font-size: 18px; font-weight: 600; color: var(--navy); margin-bottom: 10px; letter-spacing: -.01em; } .card-desc { font-size: 14px; color: #333; line-height: 1.65; flex: 1; margin-bottom: 24px; } .card-desc p { margin-bottom: 8px; } .card-desc a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; } .card-desc a:hover { opacity: .7; } .card-btn { display: inline-block; text-decoration: none; font-family: var(--font); cursor: pointer; } .card-btn-inner { position: relative; overflow: hidden; height: 40px; padding: 0 22px; border-radius: 5px; border: 1.5px solid var(--navy); background: var(--navy); display: inline-flex; align-items: center; justify-content: center; min-width: 140px; } .card-btn-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; z-index: 2; transform: translateY(0%); transition: transform .28s cubic-bezier(.4,0,.2,1); } .card-btn-clone { position: absolute; top: 100%; left: 0; right: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; z-index: 2; transform: translateY(0%); transition: transform .28s cubic-bezier(.4,0,.2,1); pointer-events: none; } .card-btn:hover .card-btn-text { transform: translateY(-100%); } .card-btn:hover .card-btn-clone { transform: translateY(-100%); } .card-btn-bg { position: absolute; inset: 0; z-index: 1; background: var(--navy); transition: background .25s; } .card-btn:hover .card-btn-bg { background: var(--navy-dark); } /* ─── 11. TESTIMONIALS ─────────────────────────────── */ .testi-section { background: var(--navy); padding: 72px 0; position: relative; z-index: 5; } .testi-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; } .testi-title { text-align: center; font-size: clamp(28px,3vw,42px); font-weight: 600; color: #fff; letter-spacing: -.02em; margin-bottom: 60px; } .testi-slider { position: relative; overflow: hidden; } .testi-track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); } .testi-slide { min-width: 100%; display: flex; align-items: center; gap: 80px; padding: 0 80px; } .testi-author { display: flex; flex-direction: column; align-items: center; gap: 16px; flex-shrink: 0; min-width: 200px; } .testi-photo { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.2); } .testi-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%); } .testi-name { font-size: 16px; font-weight: 600; color: #fff; text-align: center; } .testi-role { font-size: 14px; color: rgba(255,255,255,.6); text-align: center; } .testi-body { flex: 1; } .testi-quote { font-size: clamp(16px,1.6vw,20px); font-weight: 400; color: rgba(255,255,255,.88); line-height: 1.7; margin-bottom: 24px; } .testi-link { color: #fff; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .testi-link:hover { opacity: .7; } .testi-prev, .testi-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: rgba(255,255,255,.6); font-size: 28px; padding: 10px; transition: color .2s; z-index: 2; } .testi-prev { left: 0; } .testi-next { right: 0; } .testi-prev:hover, .testi-next:hover { color: #fff; } .testi-dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; } .testi-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; border: none; transition: background .2s; } .testi-dot.active { background: #fff; } /* ─── 12. ACCORDION + VIDEO (CWL) ─────────────────── */ .cwl-section { background: #2b5486; padding: 72px 0 80px; position: relative; z-index: 6; } .cwl-inner { max-width: 1300px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; } .cwl-title { font-size: clamp(28px,3.5vw,48px); font-weight: 700; color: #b8d6ed; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 20px; } .cwl-desc { font-size: 15px; color: rgba(184,214,237,.7); line-height: 1.65; margin-bottom: 40px; } .cwl-item { border-bottom: 1px solid rgba(184,214,237,.2); } .cwl-header { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; padding: 22px 0; text-align: left; font-family: var(--font); gap: 16px; } .cwl-item-title { font-size: clamp(17px,1.6vw,22px); font-weight: 500; color: #b8d6ed; transition: color .2s; line-height: 1.3; } .cwl-header:hover .cwl-item-title { color: #fff; } .cwl-item--open .cwl-item-title { color: #fff; } .cwl-arrow { flex-shrink: 0; transition: transform .3s cubic-bezier(.4,0,.2,1); } .cwl-item--open .cwl-arrow { transform: rotate(180deg); } .cwl-body { overflow: hidden; height: 0; opacity: 0; transition: height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease; } .cwl-body p { font-size: 14.5px; color: rgba(184,214,237,.82); line-height: 1.7; margin-bottom: 14px; padding-top: 4px; } .cwl-body p:last-child { margin-bottom: 20px; } .cwl-body b { color: #fff; } .cwl-links { display: flex; gap: 24px; flex-wrap: wrap; padding: 4px 0 20px; } .cwl-links a { color: #b8d6ed; font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(184,214,237,.4); padding-bottom: 1px; transition: border-color .2s, color .2s; } .cwl-links a:hover { color: #fff; border-bottom-color: #fff; } .cwl-right { position: sticky; top: calc(var(--nav-h) + 24px); border-radius: 10px; overflow: hidden; background: #1d3460; aspect-ratio: 16/9; align-self: start; } .cwl-video-stage { position: relative; width: 100%; height: 100%; } .cwl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; } .cwl-video--active { opacity: 1; } /* ─── 13. LOGO CAROUSEL ────────────────────────────── */ .logos-section { background: #f3f3f3; padding: 56px 0 64px; position: relative; z-index: 5; } .logos-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; text-align: center; } .logos-title { font-size: clamp(24px,3vw,40px); font-weight: 700; color: #2b5486; letter-spacing: -.02em; margin-bottom: 16px; } .logos-sub { font-size: 15px; color: rgba(43,79,130,.6); line-height: 1.6; max-width: 560px; margin: 0 auto 48px; } .logos-track-wrap{ display: flex; align-items: center; gap: 16px; } .logos-viewport { flex: 1; overflow: hidden; position: relative; } .logos-viewport::before, .logos-viewport::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .logos-viewport::before { left: 0; background: linear-gradient(to right,#f3f3f3,transparent); } .logos-viewport::after { right: 0; background: linear-gradient(to left, #f3f3f3,transparent); } .logos-track { display: flex; align-items: center; transition: transform .4s cubic-bezier(.4,0,.2,1); } .logo-item { flex: 0 0 auto; width: 200px; height: 100px; display: flex; align-items: center; justify-content: center; padding: 0 24px; text-decoration: none; transition: opacity .2s; } .logo-item:hover { opacity: .6; } .logo-item img { max-width: 100%; max-height: 44px; object-fit: contain; filter: grayscale(100%); transition: filter .2s; display: block; } .logo-item:hover img { filter: grayscale(0%); } .logos-prev, .logos-next { background: none; border: none; cursor: pointer; color: #2b5486; font-size: 28px; padding: 8px; opacity: .5; transition: opacity .2s; flex-shrink: 0; } .logos-prev:hover, .logos-next:hover { opacity: 1; } .logos-prev:disabled, .logos-next:disabled { opacity: .2; cursor: default; } .logos-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; } .logos-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(43,79,130,.25); border: none; cursor: pointer; transition: background .2s; } .logos-dot.active { background: #2b5486; } /* ─── 14. GALLERY GRID ─────────────────────────────── */ .gallery-section { background: #fff; padding: 64px 0 60px; position: relative; z-index: 5; } .gallery-container { max-width: 1440px; margin: 0 auto; padding: 0 40px; } .gallery-title { font-size: clamp(24px,3vw,40px); font-weight: 700; color: #2b5486; letter-spacing: -.02em; margin-bottom: 16px; } .gallery-sub { font-size: 15px; color: #555; line-height: 1.65; max-width: 680px; margin-bottom: 56px; } .gallery-sub a { color: #2b5486; text-decoration: underline; text-underline-offset: 2px; } .gallery-row { display: flex; gap: 20px; margin-bottom: 20px; } .gallery-row--reverse { flex-direction: row-reverse; } .gallery-col { position: relative; } .gallery-col--small{ flex: 1; } .gallery-col--large{ flex: 1.77; } .gallery-img { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: #e8edf2; } .gallery-col--small .gallery-img { aspect-ratio: 1/1; } .gallery-col--large .gallery-img { aspect-ratio: 16/9; } .gallery-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .55s cubic-bezier(.25,.46,.45,.94); } .gallery-img:hover img { transform: scale(1.06); } .gallery-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; font-size: 13px; color: rgba(255,255,255,.85); background: linear-gradient(transparent,rgba(0,0,0,.45)); opacity: 0; transition: opacity .3s; pointer-events: none; } .gallery-img:hover .gallery-label { opacity: 1; } /* ─── 15. CLOUD FEATURE CARDS ──────────────────────── */ .cloud-cards-section { background: #fff; padding: 64px 0 72px; position: relative; z-index: 5; } .cloud-cards-inner { max-width: 1300px; margin: 0 auto; padding: 0 40px; } .cloud-cards-title { font-size: clamp(24px,3vw,42px); font-weight: 700; color: #2b5486; letter-spacing: -.02em; margin-bottom: 48px; line-height: 1.15; } .cloud-cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; } .cloud-card { display: flex; flex-direction: column; } .cloud-card-img { position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; margin-bottom: 18px; background: #f0f4f8; } .cloud-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .cloud-card:hover .cloud-card-img img { transform: scale(1.04); } .cloud-card-title { font-size: 16px; font-weight: 600; color: #2b5486; margin-bottom: 8px; } .cloud-card-desc { font-size: 14px; color: #555; line-height: 1.65; } /* ─── 16. LINK GRID (3-tile) ───────────────────────── */ .link-grid-section { position: relative; z-index: 5; } .link-grid { display: grid; grid-template-columns: repeat(3,1fr); } .lg-tile { display: block; text-decoration: none; padding: 64px 40px 48px; border-right: 1px solid rgba(255,255,255,.12); transition: background .25s; position: relative; } .lg-tile:last-child { border-right: none; } .lg-tile--dark { background: #2b5486; } .lg-tile--dark:hover { background: #1d3a60; } .lg-tile--mid { background: #2b5486; } .lg-tile--mid:hover { background: #1d3a60; } .lg-tile--light { background: #a8c4e0; } .lg-tile--light:hover { background: #8ab0d0; } .lg-tile-inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 320px; } .lg-tile-title { font-size: clamp(22px,2.5vw,36px); font-weight: 700; color: #b8d6ed; line-height: 1.15; margin-bottom: 20px; letter-spacing: -.02em; } .lg-tile--light .lg-tile-title { color: #1a3258; } .lg-tile-desc { font-size: 15px; color: rgba(184,214,237,.75); line-height: 1.6; } .lg-tile--light .lg-tile-desc { color: rgba(26,50,88,.7); } .lg-tile-arrow { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(184,214,237,.5); display: flex; align-items: center; justify-content: center; margin-top: 40px; transition: border-color .2s, transform .25s; } .lg-tile--light .lg-tile-arrow { border-color: rgba(26,50,88,.35); } .lg-tile:hover .lg-tile-arrow { border-color: rgba(184,214,237,.9); transform: translateX(4px); } .lg-tile--light:hover .lg-tile-arrow { border-color: rgba(26,50,88,.7); } .lg-tile-arrow svg { display: block; } .lg-tile-arrow path { stroke: #b8d6ed; } .lg-tile--light .lg-tile-arrow path { stroke: #1a3258; } /* ─── 17. BLOG SECTION ─────────────────────────────── */ .blog-section { background: #fff; padding: 64px 0 72px; position: relative; z-index: 5; } .blog-container { max-width: 1300px; margin: 0 auto; padding: 0 40px; } .blog-title { font-size: clamp(22px,2.8vw,36px); font-weight: 700; color: #2b5486; letter-spacing: -.02em; margin-bottom: 48px; } .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; } .blog-card { display: block; text-decoration: none; color: inherit; } .blog-card-img { width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; margin-bottom: 16px; background: #e8edf2; position: relative; } .blog-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .blog-card:hover .blog-card-img img { transform: scale(1.04); } .blog-card-meta { font-size: 13px; color: #888; margin-bottom: 8px; } .blog-card-title { font-size: clamp(15px,1.4vw,19px); font-weight: 600; color: #2b5486; line-height: 1.35; transition: color .15s; } .blog-card:hover .blog-card-title { color: #1d3a60; } /* ─── 18. FOOTER ───────────────────────────────────── */ .footer { background: #2b5486; color: #fff; font-family: var(--font); } .footer-cta { padding: 72px 40px 0; } .footer-cta-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-bottom: 60px; } .footer-cta h3 { font-size: clamp(28px,3.5vw,52px); font-weight: 700; color: var(--page-secondary); letter-spacing: -.025em; line-height: 1.1; } .footer-cta-right p { font-size: 15px; color: var(--page-secondary); line-height: 1.65; margin-bottom: 28px; } .footer-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; } .footer-cta-divider { max-width: calc(1300px + 80px); margin: 0 auto; border: none; border-top: 1px solid rgba(184,214,237,.15); } .footer-nav { padding: 60px 40px 40px; } .footer-nav-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; } .footer-col { display: flex; flex-direction: column; } .footer-logo { margin-bottom: 20px; } .footer-dist-badge { font-size: 11px; font-weight: 500; color: var(--page-secondary); letter-spacing: .05em; text-transform: uppercase; margin-top: 10px; } .footer-contact-block { font-size: 13.5px; color:var(--page-secondary); line-height: 1.9; margin-bottom: 20px; } .footer-contact-block a { color: var(--page-secondary); text-decoration: none; } .footer-contact-block a:hover { text-decoration: underline; } .footer-social { display: flex; gap: 16px; } .footer-social a { color: rgba(184,214,237,.6); transition: color .2s; display: flex; align-items: center; } .footer-social a:hover { color: #fff; } .footer-col-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(184,214,237,.55); margin-bottom: 14px; } .footer-link { font-size: 14px; color: rgba(184,214,237,.75); text-decoration: none; padding: 5px 0; line-height: 1.4; transition: color .15s; } .footer-link:hover { color: #fff; } .footer-newsletter { margin-top: 4px; } .footer-email-input { width: 100%; padding: 11px 14px; margin-bottom: 12px; margin-top: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(184,214,237,.3); border-radius: 5px; color: #fff; font-size: 14px; font-family: var(--font); outline: none; transition: border-color .2s; } .footer-email-input::placeholder { color: rgba(184,214,237,.5); } .footer-email-input:focus { border-color: rgba(184,214,237,.7); } .footer-check-label { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: rgba(184,214,237,.65); line-height: 1.5; margin-bottom: 14px; cursor: pointer; } .footer-checkbox { margin-top: 2px; accent-color: #b8d6ed; flex-shrink: 0; } .footer-check-label a { color: #b8d6ed; text-decoration: underline; } .footer-submit { padding: 11px 28px; background: rgba(184,214,237,.2); border: 1.5px solid rgba(184,214,237,.5); border-radius: 5px; color: #fff; font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background .2s, border-color .2s; align-self: flex-start; } .footer-submit:hover { background: rgba(184,214,237,.35); border-color: #b8d6ed; } .footer-bottom { background: #1d3460; padding: 18px 40px; } .footer-bottom-inner { max-width: 1300px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .footer-bottom-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .footer-bottom-links a { font-size: 12.5px; color: rgba(184,214,237,.55); text-decoration: none; transition: color .15s; } .footer-bottom-links a:hover { color: #b8d6ed; } .footer-bottom-links span { font-size: 12.5px; color: rgba(184,214,237,.4); } .footer-bottom-right { font-size: 12.5px; color: rgba(184,214,237,.5); display: flex; gap: 6px; align-items: center; } /* ─── 19. SCROLL REVEAL ────────────────────────────── */ .scroll-reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease; } .scroll-reveal.sr-visible { opacity: 1; transform: translateY(0); } /* ─── 20. RESPONSIVE ───────────────────────────────── */ @media (max-width: 1280px) { .hero-vid-wrap { inset: 80px 0 0 560px; } } @media (max-width: 1100px) { .hero-vid-wrap { inset: 80px 0 0 460px; } .hero-content { padding-left: 56px; } } @media (max-width: 900px) { .hero-vid-wrap { inset: 80px 0 0 360px; } .hero-content { padding-left: 40px; max-width: 380px; } .cards-grid { grid-template-columns: 1fr 1fr; } .testi-slide { gap: 40px; padding: 0 50px; } .lv-content-inner { grid-template-columns: 1fr; gap: 48px; } .cwl-inner { grid-template-columns: 1fr; gap: 40px; } .cwl-right { position: static; } .cloud-cards-grid { grid-template-columns: 1fr 1fr; } .link-grid { grid-template-columns: 1fr; } .lg-tile { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); } .gallery-row, .gallery-row--reverse { flex-direction: column; } .gallery-col--small, .gallery-col--large { flex: none; width: 100%; } .gallery-col--small .gallery-img { aspect-ratio: 16/9; } .footer-nav-inner { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-cta-inner { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-left .nav-link { display: none; } .burger { display: flex; } .nav-inner { padding: 0 16px; } .hero { height: 100svh; min-height: 500px; } .hero-vid-wrap { inset: 0; opacity: .55; } .hero-vid-wrap .hero-mask { display: none; } .hero-content { padding: 0 20px 80px; padding-top: 0; max-width: 100%; width: 100%; } .hero-title { font-size: clamp(36px,10vw,56px); } .hero-desc { font-size: 15px; max-width: 100%; } .hero-scroll { left: 20px; } .hero-ctas { flex-direction: column; align-items: flex-start; gap: 10px; } .svm-section { height: 200vh; } .svm-text-dark h3, .svm-text-white h3 { font-size: clamp(22px,6vw,36px); } .svm-ctas { flex-direction: column; align-items: center; gap: 10px; } .lv-content-inner { padding: 60px 20px 80px; grid-template-columns: 1fr; gap: 36px; } .lv-ctas { flex-direction: column; align-items: flex-start; gap: 10px; } .lv-title-sticky h3 { font-size: clamp(32px,8vw,52px); } .lp-title-sticky h3 { font-size: clamp(32px,8vw,52px); } .cards-grid { grid-template-columns: 1fr; } .cards-container, .blog-container, .cloud-cards-inner, .cwl-inner, .logos-inner, .gallery-container { padding: 0 20px; } .cards-section, .blog-section, .cwl-section, .cloud-cards-section, .gallery-section { padding: 60px 0 80px; } .testi-slide { flex-direction: column; gap: 28px; padding: 0 16px; text-align: center; } .testi-inner { padding: 0 20px; } .testi-prev { left: 0; } .testi-next { right: 0; } .cloud-cards-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .gallery-row { gap: 12px; margin-bottom: 12px; } .blog-grid { grid-template-columns: 1fr; } .logo-item { width: 160px; } .link-grid { grid-template-columns: 1fr; } .lg-tile { padding: 40px 20px 36px; } .lg-tile-inner{ min-height: 220px; } .footer-cta { padding: 48px 20px 0; } .footer-cta-inner { gap: 32px; } .footer-nav { padding: 40px 20px; } .footer-nav-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-bottom{ padding: 16px 20px; } .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; } .footer-bottom-links { flex-wrap: wrap; gap: 12px; } } @media (max-width: 520px) { .cloud-cards-grid { grid-template-columns: 1fr; } .footer-nav-inner { grid-template-columns: 1fr; } .footer-cta-btns { flex-direction: column; } .testi-prev, .testi-next { display: none; } .pbtn-inner { min-width: 100px; } } /* ─── PRODUCT MEGA MENU ──────────────────────────────── */ .mega-product { display: flex !important; gap: 0; grid-template-columns: none !important; padding: 28px 32px !important; } .mega-product-left { flex: 0 0 340px; display: flex; flex-direction: column; gap: 4px; } .mega-product-left .mega-lbl { margin-bottom: 12px; } .mega-product-left .mega-item { margin-bottom: 4px; } .mega-product-div { width: 1px; background: rgba(255,255,255,.1); margin: 0 32px; align-self: stretch; } .mega-product-right { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .mega-product-link { display: block; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.75); text-decoration: none; padding: 6px 0; transition: color .15s; } .mega-product-link:hover { color: #fff; } .mega-product-link:first-child { color: #fff; font-weight: 600; } /* "New" badge */ .mega-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: rgba(255,255,255,.15); color: #fff; padding: 2px 7px; border-radius: 20px; vertical-align: middle; margin-left: 6px; line-height: 1.5; }