(belt-and-braces if the parent injects one). */ body.learn-home > .lc-home, body.learn-about > .lc-home, body.learn-businesses > .lc-home, body.learn-careers > .lc-home, body.learn-news > .lc-home, body.learn-awards > .lc-home, body.learn-contact > .lc-home, body.learn-impact > .lc-home, body.learn-anti-corruption > .lc-home, body.learn-privacy > .lc-home { max-width: none; width: 100%; } .lc-home { margin: 0; padding: 0; color: var(--ink); font-family: var(--font-thai); font-size: 14px; line-height: 1.65; background: var(--paper); } /* Home page background override */ body.learn-home .lc-home { background: var(--ink-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .lc-home img { max-width: 100%; display: block; } .lc-home a { color: inherit; text-decoration: none; } .lc-home button { font: inherit; cursor: pointer; } .lc-home blockquote { margin: 0; } /* ---------- Reveal animation ---------- */ .lc-home [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .lc-home [data-reveal].is-in { opacity: 1; transform: none; } /* Slide-in from left variant */ .lc-home [data-reveal-slide] { opacity: 0; transform: translateX(-80px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); will-change: opacity, transform; } .lc-home [data-reveal-slide].is-in { opacity: 1; transform: none; } /* Slide-in from right variant */ .lc-home [data-reveal-right] { opacity: 0; transform: translateX(80px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .lc-home [data-reveal-right].is-in { opacity: 1; transform: none; } /* Fade-down variant (drops in from above) */ .lc-home [data-reveal-down] { opacity: 0; transform: translateY(-24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .lc-home [data-reveal-down].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lc-home [data-reveal], .lc-home [data-reveal-slide], .lc-home [data-reveal-right], .lc-home [data-reveal-down], .lc-home .lc-section__title--hero .lc-word { opacity: 1; transform: none; transition: none; } .lc-home .lc-section__title--hero .lc-accent::after { transform: scaleX(1); transition: none; } } /* ---------- Common pieces ---------- */ .lc-eyebrow { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-size: 10.8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(6px); } .lc-eyebrow--on-dark { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); } .lc-accent { color: var(--brand); } .lc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: 0.01em; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); } .lc-btn span { transition: transform 0.3s var(--ease); } .lc-btn:hover span { transform: translateX(4px); } .lc-btn--primary { background: transparent; color: var(--brand); border: 2px solid var(--brand); } .lc-btn--primary:hover { background: var(--brand); color: #fff; box-shadow: 0 14px 30px rgba(40, 121, 185, 0.3); transform: translateY(-2px); } .lc-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .lc-btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .lc-btn--on-dark { background: transparent; color: #fff; border: 2px solid #fff; } .lc-btn--on-dark:hover { background: #fff; color: var(--brand); transform: translateY(-2px); } /* ---------- NAV ---------- */ .lc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 0px var(--gutter); background: rgba(255, 255, 255, 0.0); transform: translateY(0); transition: transform 0.45s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease); will-change: transform; } .lc-nav.is-hidden { transform: translateY(-100%); } .lc-nav.is-scrolled { background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 0 var(--line); } .lc-nav__logo { display: inline-flex; align-items: center; line-height: 0; } .lc-nav__logo img { height: 84px; width: auto; display: block; transition: opacity 0.3s var(--ease); } .lc-nav__logo:hover img { opacity: 0.85; } .lc-nav__links { display: flex; align-items: center; gap: 4px; } .lc-nav__links > a:not(.lc-nav__cta) { font-family: var(--font-display); font-size: 12.6px; font-weight: 500; color: var(--ink); opacity: 0.8; padding: 6px 14px; border-radius: 999px; background: transparent; transition: opacity 0.2s, background 0.2s, color 0.2s; } .lc-nav__links > a:not(.lc-nav__cta):hover { opacity: 1; } .lc-nav__links > a.is-active:not(.lc-nav__cta), .lc-nav__links .lc-nav__group-toggle.is-active { background: rgba(40, 121, 185, 0.10); color: var(--brand); opacity: 1; } .lc-nav__links .lc-nav__cta { padding: 10px 18px; border-radius: 999px; background: var(--brand); color: #fff; opacity: 1; margin-left: 16px; font-family: var(--font-display); font-size: 12.6px; font-weight: 500; transition: background 0.2s; } .lc-nav__links .lc-nav__cta:hover { background: var(--brand-3); } .lc-nav__links .lc-lang { margin-left: 16px; } /* ---------- Nav group + mega menu ---------- */ .lc-nav__group { position: relative; } .lc-nav__links .lc-nav__group-toggle { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; padding: 6px 14px; margin: 0; height: auto; line-height: inherit; letter-spacing: inherit; border-radius: 999px; font-family: var(--font-display); font-size: 12.6px; font-weight: 500; color: var(--ink); opacity: 0.8; cursor: pointer; transition: opacity 0.2s, background 0.2s, color 0.2s; -webkit-appearance: none; appearance: none; text-transform: none; } .lc-nav__links .lc-nav__group-toggle:hover { opacity: 1; } .lc-nav__chevron { display: inline-block; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transform-origin: center; transition: transform 0.3s var(--ease); } .lc-nav__group.is-open .lc-nav__chevron { transform: rotate(225deg) translate(-2px, -2px); } /* Mega panel — opens beneath the toggle, full-width feel via wide max-width */ .lc-mega { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(-8px); width: min(960px, 92vw); background: #fff; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(7, 45, 84, 0.18), 0 8px 24px rgba(7, 45, 84, 0.08); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s; z-index: 50; } .lc-nav__group.is-open .lc-mega, .lc-nav__group:hover .lc-mega { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; visibility: visible; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0s; } /* Invisible bridge so hover doesn't drop while crossing the gap to the panel */ .lc-mega::before { content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 22px; } .lc-mega__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; padding: 28px; } .lc-mega__col { padding: 0 20px; border-right: 1px solid var(--line); } .lc-mega__col:last-child { border-right: 0; } /* Feature column (left) — light surface to match the other columns */ .lc-mega__col--feature { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; margin: -28px 0 -28px -28px; border-radius: 16px 0 0 16px; border-right: 1px solid var(--line); color: var(--ink); background: var(--paper-2); text-decoration: none; transition: transform 0.4s var(--ease), background 0.4s var(--ease); } .lc-mega__col--feature:hover { transform: translateY(-2px); background: #eaf3fb; } /* Circular arrow CTA in bottom-right of the feature card to signal clickability */ .lc-mega__col--feature::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(40,121,185,0.1); border: 1px solid rgba(40,121,185,0.25); /* arrow icon as inline SVG, brand-blue so it reads on the light surface */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; transition: transform 0.35s var(--ease), background-color 0.35s, border-color 0.35s; } .lc-mega__col--feature:hover::after { transform: translateX(4px) rotate(-12deg); background-color: rgba(40,121,185,0.18); border-color: rgba(40,121,185,0.45); } .lc-mega__eyebrow { display: inline-block; font-size: 9.9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--brand); margin-bottom: 14px; } .lc-mega__col--feature h4 { font-family: var(--font-display); font-size: 19.8px; line-height: 1.3; font-weight: 700; margin: 0 0 12px; color: var(--ink); } .lc-mega__col--feature p { margin: 0 0 18px; font-size: 11.7px; line-height: 1.65; color: var(--muted); } .lc-mega__more { /* Reserve right padding so the inline label doesn't sit underneath the circular arrow icon at the bottom-right of the card. */ padding-right: 60px; font-family: var(--font-display); font-weight: 600; font-size: 11.7px; color: var(--brand); letter-spacing: 0.02em; } /* Section heading inside non-feature columns */ .lc-mega__heading { font-family: var(--font-display); font-size: 9.9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--brand); margin: 0 0 6px; opacity: 0.85; } /* A heading that follows a link starts a new sub-group — add space above it so it separates from the previous group, while staying tight to its own link. */ .lc-mega__link + .lc-mega__heading { margin-top: 18px; } /* Each linked row */ .lc-mega__link { position: relative; display: block; padding: 10px 38px 10px 12px; margin: 0 -12px; border-radius: 10px; text-decoration: none; transition: background 0.2s var(--ease), transform 0.2s var(--ease); } /* Arrow on the right to signal the row is a link */ .lc-mega__link::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) translateX(-3px); width: 16px; height: 16px; opacity: 0.35; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .lc-mega__link:hover { background: var(--paper-2); } .lc-mega__link:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } .lc-mega__link strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 12.6px; color: var(--ink); margin-bottom: 2px; } .lc-mega__link span { display: block; font-size: 10.8px; line-height: 1.5; color: var(--ink-soft); } .lc-mega__link:hover strong { color: var(--brand); } @media (max-width: 1100px) { .lc-mega { width: min(820px, 92vw); } .lc-mega__inner { grid-template-columns: 1.2fr 1fr 1fr; } } /* Language switcher (dropdown with flag) */ .lc-lang { position: relative; display: inline-flex; align-items: center; } .lc-lang__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; line-height: 0; transition: background 0.25s var(--ease); } .lc-lang__toggle:hover { background: rgba(11,15,26,0.06); } .lc-lang__current svg, .lc-lang__item svg { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(11,15,26,0.08); } .lc-lang__menu { position: absolute; top: calc(100% + 8px); right: 0; margin: 0; padding: 6px; list-style: none; min-width: 160px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); z-index: 50; } .lc-lang.is-open .lc-lang__menu { opacity: 1; transform: none; pointer-events: auto; } .lc-lang__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: transparent; border-radius: 10px; font-family: var(--font-thai); font-size: 12.6px; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; transition: background 0.2s; } .lc-lang__item:hover { background: var(--paper-2); } .lc-lang__item.is-active { background: var(--paper-3); font-weight: 600; } /* Disabled language option (English — coming soon) */ .lc-lang__item.is-disabled, .lc-lang__item:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ---------- Mobile burger button (hidden on desktop) ---------- */ .lc-nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--ink); align-items: center; justify-content: center; border-radius: 8px; position: relative; z-index: 50; transition: background 0.2s var(--ease); } .lc-nav__burger:hover { background: rgba(0,0,0,0.05); } .lc-nav__burger-bars { position: relative; display: block; width: 22px; height: 14px; } .lc-nav__burger-bars::before, .lc-nav__burger-bars::after, .lc-nav__burger-bars span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease); } .lc-nav__burger-bars::before { top: 0; } .lc-nav__burger-bars span { top: 6px; } .lc-nav__burger-bars::after { top: 12px; } /* X state when nav is open */ .lc-nav.is-menu-open .lc-nav__burger-bars::before { top: 6px; transform: rotate(45deg); } .lc-nav.is-menu-open .lc-nav__burger-bars span { opacity: 0; } .lc-nav.is-menu-open .lc-nav__burger-bars::after { top: 6px; transform: rotate(-45deg); } /* Mobile-only CTA that lives outside the slide-out panel (next to the burger). Hidden on desktop — the desktop CTA inside .lc-nav__links handles that case. */ .lc-nav__cta--mobile { display: none; } /* Panel header (logo + close) — mobile slide-out panel only; hidden on desktop */ .lc-nav__panel-head { display: none; } @media (max-width: 900px) { /* When the slide-out panel is open, paint a solid white surface across the top bar so the logo / burger / Join us float on a clean strip. */ .lc-nav.is-menu-open, .lc-nav.is-menu-open.is-scrolled { background: #fff; box-shadow: 0 1px 0 var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Logo and burger must sit above the slide-out panel (z 45) so they stay visible — Chrome will paint them on top of the panel when the menu is open thanks to z-index 50. */ .lc-nav__logo, .lc-nav__burger { position: relative; z-index: 50; } .lc-nav__burger { display: inline-flex; margin-left: 8px; } /* When the panel is open, its own header (logo + X) takes over — hide the bar's logo + burger + floating CTA so nothing overlaps. */ .lc-nav.is-menu-open .lc-nav__logo, .lc-nav.is-menu-open .lc-nav__burger, .lc-nav.is-menu-open .lc-nav__cta--mobile { opacity: 0; pointer-events: none; } /* Panel header strip: logo left, close button right */ .lc-nav__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .lc-nav__panel-logo img { height: 30px; width: auto; display: block; } .lc-nav__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--paper-2); color: var(--ink); cursor: pointer; transition: background 0.2s var(--ease); } .lc-nav__close:hover { background: var(--paper-3); } .lc-nav__close svg { width: 20px; height: 20px; } .lc-nav .lc-nav__cta--mobile, .lc-nav.is-scrolled .lc-nav__cta--mobile { display: inline-block; margin-left: auto; padding: 8px 16px; font-size: 11.7px; position: relative; z-index: 50; /* Match the desktop CTA pill: solid brand fill, white text */ background: var(--brand); color: #fff; border-radius: 999px; font-family: var(--font-display); font-weight: 500; transition: background 0.2s; } .lc-nav .lc-nav__cta--mobile:hover { background: var(--brand-3); color: #fff; } /* When the mobile CTA is visible, the burger no longer needs auto margin */ .lc-nav__cta--mobile + .lc-nav__burger { margin-left: 8px; } .lc-nav__burger { margin-left: 0; } /* Slide-out panel with nav links + lang switcher */ .lc-nav__links { position: fixed; top: 0; right: 0; height: 100vh; width: min(82vw, 360px); padding: 18px 20px 32px; background: #fff; box-shadow: -8px 0 28px rgba(0,0,0,0.08); flex-direction: column; align-items: stretch; gap: 6px; transform: translateX(100%); transition: transform 0.35s var(--ease); overflow-y: auto; z-index: 45; } .lc-nav.is-menu-open .lc-nav__links { transform: translateX(0); } .lc-nav__links > a:not(.lc-nav__cta) { padding: 14px 18px; font-size: 14.4px; opacity: 1; border-radius: 12px; } .lc-nav__links > a.is-active:not(.lc-nav__cta) { background: rgba(40, 121, 185, 0.10); color: var(--brand); } /* Hide the in-panel CTA on mobile since the floating CTA handles it */ .lc-nav__links .lc-nav__cta:not(.lc-nav__cta--mobile) { display: none; } /* Mega menu collapses to an accordion in the slide-out panel */ .lc-nav__group { position: static; } .lc-nav__links .lc-nav__group-toggle { display: flex; justify-content: space-between; width: 100%; padding: 14px 18px; font-size: 14.4px; opacity: 1; border-radius: 12px; } .lc-mega { position: static; transform: none; width: 100%; max-height: 0; overflow: hidden; padding: 0; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transition: max-height 0.35s var(--ease); } .lc-nav__group.is-open .lc-mega { max-height: 1200px; transform: none; } .lc-nav__group:hover .lc-mega { max-height: 0; } .lc-nav__group.is-open:hover .lc-mega { max-height: 1200px; } .lc-mega__inner { grid-template-columns: 1fr; gap: 0; /* Indent the submenu so it reads as content nested under "เกี่ยวกับเรา", with a thin guide line on the left. */ margin-left: 18px; padding: 4px 0 12px 16px; border-left: 2px solid var(--line); } .lc-mega__col { padding: 14px 4px; border-right: 0; border-bottom: 1px dashed var(--line); /* Rise-up + fade entrance, staggered per column when the group opens. */ opacity: 0; transform: translateY(18px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .lc-nav__group.is-open .lc-mega__col { opacity: 1; transform: none; } .lc-nav__group.is-open .lc-mega__col:nth-child(1) { transition-delay: 0.08s; } .lc-nav__group.is-open .lc-mega__col:nth-child(2) { transition-delay: 0.18s; } .lc-nav__group.is-open .lc-mega__col:nth-child(3) { transition-delay: 0.28s; } .lc-mega__col:last-child { border-bottom: 0; } .lc-mega__col--feature { margin: 4px 0 14px; border-radius: 14px; padding: 22px 24px; } .lc-mega__col--feature h4 { font-size: 16.2px; } .lc-mega__heading { font-size: 14.4px; letter-spacing: 0; text-transform: none; font-weight: 600; opacity: 1; margin-bottom: 10px; } .lc-lang { margin-top: 16px; align-self: flex-start; } /* In the slide-out panel, open the language dropdown upward and anchor it to the left so it stays inside the panel instead of being clipped. */ .lc-lang__menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; transform: translateY(6px); } .lc-lang.is-open .lc-lang__menu { transform: none; } /* Backdrop overlay — sits between page content and the slide-out panel, blurs the visible page behind it, and is clickable to close the menu. */ .lc-nav::after { content: ""; position: fixed; inset: 0; background: rgba(11, 15, 26, 0.35); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); z-index: 44; } .lc-nav.is-menu-open::after { opacity: 1; pointer-events: auto; } /* Remove the blue focus ring from the burger / X button on tap */ .lc-nav__burger:focus, .lc-nav__burger:focus-visible { outline: 0; box-shadow: none; } } /* ---------- 1. HERO ---------- */ .lc-hero { position: relative; min-height: 85vh; padding: 140px var(--gutter) 60px; display: flex; align-items: center; overflow: hidden; background-color: #e9f2fb; background-image: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(244,249,253,0.75) 40%, rgba(233,242,251,0.85) 100%), url("../images/hero.webp"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } .lc-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .lc-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 60%, #fff 100%); z-index: 1; pointer-events: none; } .lc-hero__orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; animation: lcFloat 16s var(--ease) infinite alternate; } .lc-hero__orb--a { width: 520px; height: 520px; left: -120px; top: -140px; background: radial-gradient(circle, #fff 0%, transparent 70%); opacity: 0.8; } .lc-hero__orb--b { display: none; } @keyframes lcFloat { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(40px, 30px, 0) scale(1.08); } } .lc-hero__grid { display: none; } .lc-hero__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; } .lc-hero__title { font-family: var(--font-display); font-size: var(--hero-title-size) !important; line-height: 1.2; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 24px; color: var(--ink); } .lc-hero__title-accent { display: inline-block; color: var(--brand); background: linear-gradient(92deg, var(--brand) 0%, var(--brand-2) 25%, var(--accent) 50%, var(--brand-2) 75%, var(--brand) 100%); background-size: 300% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lcGradientShift 6s ease-in-out infinite; will-change: background-position; } @supports not (-webkit-background-clip: text) { .lc-hero__title-accent { background: none; color: var(--brand); -webkit-text-fill-color: currentColor; } } @keyframes lcGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .lc-hero__title-accent { animation: none; } } .lc-hero__sub { max-width: 640px; font-size: clamp(16.2px, 1.3vw, 19.8px); color: var(--brand); margin: 0 0 20px; font-weight: 500; } .lc-hero__sub em { display: block; margin-top: 4px; color: var(--muted); font-style: italic; font-weight: 400; font-size: 0.9em; } .lc-hero__body { max-width: 620px; margin: 0 0 36px; color: var(--ink-soft); font-size: 15.3px; } .lc-hero__cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 64px; } .lc-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 28px 0 0; list-style: none; max-width: 720px; border-top: 1px solid var(--line); } .lc-hero__stats li { display: flex; flex-direction: column; gap: 4px; } .lc-stat__num { font-family: var(--font-display); font-size: clamp(25.2px, 3.1vw, 39.6px); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .lc-stat__label { font-size: 11.7px; color: var(--brand); letter-spacing: 0.04em; } /* ---------- Section head ---------- */ .lc-section__head { max-width: 960px; margin: 0 auto 64px; text-align: center; padding: 0 var(--gutter); } .lc-section__title { font-family: var(--font-display); font-size: clamp(30.6px, 5vw, 64.8px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 20px; color: var(--ink); } .lc-section__sub { font-size: clamp(14.4px, 1.2vw, 17.1px); color: var(--ink-soft); margin: 0; max-width: 640px; margin-inline: auto; } .lc-section__head--light .lc-section__title, .lc-section__head--light .lc-section__sub { color: #fff; } .lc-section__head--light .lc-eyebrow { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); } .lc-section__cta { display: flex; justify-content: center; margin-top: 60px; } /* Hero-style section head (big thin uppercase title, left-aligned) */ .lc-section__head--hero { max-width: var(--max); margin: 0 auto 96px; padding: 0 var(--gutter); text-align: center; display: grid; grid-template-columns: 1fr; gap: 8px; justify-items: center; } .lc-section__title--hero { font-family: var(--font-display); /* Floor kept high + !important so the Uncode parent (h2 rules / small vw inside its wrappers) can't shrink this section title on WordPress. */ font-size: clamp(40px, 3.6vw, 46px) !important; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; color: var(--ink); display: block; } /* Override default reveal behaviour on this title — we animate per word */ .lc-home [data-reveal].lc-section__title--hero { opacity: 1; transform: none; } .lc-section__title--hero .lc-word { display: inline-block; vertical-align: baseline; transform: translateY(40%); opacity: 0; transition: transform 0.9s var(--ease), opacity 0.9s var(--ease); transition-delay: calc(var(--word-index, 0) * 120ms); will-change: transform, opacity; } .lc-section__title--hero .lc-word > i { font-style: inherit; } .lc-section__title--hero.is-in .lc-word { transform: translateY(0); opacity: 1; } .lc-section__title--hero .lc-accent { font-weight: 600; color: var(--brand); position: relative; display: inline-block; } .lc-section__title--hero .lc-accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--brand), #39a9ff); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); transition-delay: calc(var(--word-index-last, 0) * 120ms + 400ms); } .lc-section__title--hero.is-in .lc-accent::after { transform: scaleX(1); } .lc-section__head--hero .lc-eyebrow--below { justify-self: center; margin: 24px 0 18px; } .lc-section__head--hero .lc-section__sub { margin: 0 auto; max-width: 640px; } /* ---------- 2. JOURNEY ---------- */ .lc-journey { padding: 120px 0; background: var(--paper); } .lc-journey__grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } @media (max-width: 900px) { .lc-journey__grid { grid-template-columns: 1fr; } } .lc-card { position: relative; display: flex; flex-direction: column; padding: 0 28px 26px; background: var(--paper-2); border-radius: var(--radius-lg); border: 1px solid transparent; overflow: hidden; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease); } /* When the whole card is a link, keep text colors/decoration neutral */ a.lc-card { text-decoration: none; color: inherit; } .lc-card__media { order: 0; margin: 0 -28px 20px; aspect-ratio: 10 / 7; overflow: hidden; background: #e5edf5; } .lc-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.7s var(--ease); } .lc-card:hover .lc-card__media img { transform: scale(1.04); } .lc-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #008eff 0%, #0062ff 100%); opacity: 0; transition: opacity 0.5s var(--ease); z-index: 0; } .lc-card > * { position: relative; z-index: 1; } .lc-card:hover { transform: translateY(calc(var(--_journey-ty, 0px) - 8px)); box-shadow: none; background: #142335; color: #fff; border-color: transparent; } /* Scroll-linked slide-up. JS sets --journey-progress (0..1) on the grid and --journey-stagger (0,1,2) per card. Stagger varies the start offset so cards rise in a wave. */ .lc-card--journey { --_journey-ty: calc((1 - var(--journey-progress, 0)) * (140px + var(--journey-stagger, 0) * 140px)); transform: translateY(var(--_journey-ty)); opacity: calc(0.15 + 0.85 * var(--journey-progress, 0)); } @media (prefers-reduced-motion: reduce) { .lc-card--journey { --_journey-ty: 0px; transform: none; opacity: 1; } } .lc-card:hover::before { opacity: 0.22; } .lc-card:hover .lc-card__brands { color: var(--accent); } .lc-card__index { display: none; } .lc-card__icon { display: none; } .lc-card__tag { order: 2; display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--brand); line-height: 1.2; margin: 0 0 4px; transition: color 0.4s; } .lc-card__title { order: 3; display: inline-block; font-family: var(--font-display); font-size: 12.6px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); margin: 0 0 12px; transition: color 0.4s; } .lc-card__lead { order: 4; font-size: 15.3px; font-weight: 600; margin: 0 0 8px; line-height: 1.4; } .lc-card__body { order: 5; color: inherit; opacity: 0.82; margin: 0; font-size: 13.5px; line-height: 1.65; } .lc-card__brands { order: 6; font-family: var(--font-display); font-size: 11.7px; letter-spacing: 0.04em; color: var(--brand); margin: 0 0 24px; padding-top: 20px; border-top: 1px solid var(--line); transition: color 0.4s, border-color 0.4s; } .lc-card:hover .lc-card__title { color: rgba(255,255,255,0.7); } .lc-card:hover .lc-card__tag { color: var(--accent); } .lc-card:hover .lc-card__brands { color: var(--accent); border-color: rgba(255,255,255,0.18); } /* ---------- 3. PROOF ---------- */ .lc-proof { position: relative; padding: 120px 0; color: #fff; background: #003057; overflow: hidden; } .lc-proof { --lc-mx: 0; --lc-my: 0; } .lc-proof::before { content: ""; position: absolute; top: -4%; right: -3%; bottom: -4%; width: 63%; background-image: url("../images/The-Proof.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; pointer-events: none; transform: translate3d(calc(var(--lc-mx) * -18px), calc(var(--lc-my) * -14px), 0) scale(1.06); transition: transform 0.8s var(--ease); will-change: transform; } .lc-proof::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #003057 0%, #003057 40%, rgba(0, 48, 87, 0.85) 55%, rgba(0, 48, 87, 0.4) 75%, rgba(0, 48, 87, 0) 100%); z-index: 1; pointer-events: none; } .lc-proof__bg { position: absolute; inset: 0; background: radial-gradient(600px 500px at 20% 30%, rgba(40,121,185,0.45), transparent 70%), radial-gradient(500px 400px at 80% 70%, rgba(107,75,255,0.35), transparent 70%), linear-gradient(180deg, #06233c 0%, #0b2e4f 100%); z-index: 0; mix-blend-mode: multiply; } .lc-proof > * { position: relative; z-index: 2; } /* Slightly smaller headline for this section than the global default */ .lc-proof .lc-section__title { font-size: clamp(27px, 3.6vw, 44px); } @media (max-width: 900px) { .lc-proof::before { width: 100%; opacity: 0.35; } .lc-proof::after { width: 100%; background: linear-gradient(180deg, rgba(20,60,92,0.85) 0%, rgba(20,60,92,0.6) 100%); } } /* Featured full-width stat (2.5M) above the 3-col row */ .lc-proof__featured { max-width: var(--max); margin: 0 auto 56px; padding: 0 var(--gutter) 48px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.12); } .lc-proof__featured .lc-proof__label, .lc-proof__featured .lc-proof__body { margin-left: auto; margin-right: auto; } .lc-proof__featured .lc-proof__label { font-size: 14.4px; margin-bottom: 6px; } .lc-proof__featured .lc-proof__body { max-width: 520px; } .lc-proof__num--xl { font-size: clamp(64.8px, 9.9vw, 180px); margin-bottom: 16px; } .lc-proof__grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 28px; } @media (max-width: 900px) { .lc-proof__grid { grid-template-columns: 1fr; } } .lc-proof__cell { border-left: 1px solid rgba(255,255,255,0.12); padding-left: 24px; } .lc-proof__num { font-family: var(--font-display); font-size: clamp(50.4px, 5.4vw, 115.2px); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 12px; color: #fff; background: linear-gradient(160deg, #fff 10%, var(--accent) 60%, var(--brand-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not (-webkit-background-clip: text) { .lc-proof__num { background: none; color: #fff; -webkit-text-fill-color: currentColor; } } .lc-proof__label { font-family: var(--font-display); font-size: 12.6px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin: 0 0 8px; opacity: 0.9; } .lc-proof__body { margin: 0; color: rgba(255,255,255,0.72); font-size: 13.5px; } /* ---------- 4. VOICES ---------- */ .lc-voices { padding: 120px 0; background: var(--paper-2); } .lc-voices__masonry { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .lc-voice { position: relative; padding: 34px 32px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 0; display: flex; flex-direction: column; /* Scroll-linked entrance — JS sets --voice-progress (0..1) on the parent grid; each card uses a directional --_voice-tx/--_voice-ty offset so it travels in from a different side. */ --_voice-amt: calc((1 - var(--voice-progress, 0)) * 1); --_voice-tx: 0px; --_voice-ty: 0px; transform: translate(var(--_voice-tx), var(--_voice-ty)); opacity: calc(0.15 + 0.85 * var(--voice-progress, 0)); transition: box-shadow 0.5s var(--ease); } .lc-voice--from-right { --_voice-tx: calc(var(--_voice-amt) * 180px); } .lc-voice--from-left { --_voice-tx: calc(var(--_voice-amt) * -180px); } .lc-voice--from-bottom { --_voice-ty: calc(var(--_voice-amt) * 140px); } .lc-voice--from-top { --_voice-ty: calc(var(--_voice-amt) * -140px); } /* Respect reduced-motion: skip the scroll-driven slide entirely so the cards render in place at full opacity without any transform churn. */ @media (prefers-reduced-motion: reduce) { .lc-voice, .lc-voice--from-right, .lc-voice--from-left, .lc-voice--from-bottom, .lc-voice--from-top { --_voice-amt: 0; --_voice-tx: 0px; --_voice-ty: 0px; transform: none !important; opacity: 1 !important; } } .lc-voice--student { grid-column: span 5; } .lc-voice--parent { grid-column: span 7; background: #246192; color: #fff; } .lc-voice--enterprise { grid-column: span 12; } @media (max-width: 900px) { .lc-voice--student, .lc-voice--parent, .lc-voice--enterprise { grid-column: 1 / -1; } } .lc-voice__media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; background: var(--paper-3); } .lc-voice__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Enterprise card is full-width — cap the 4:3 media height so it doesn't dominate the row while keeping the image on top. */ .lc-voice--enterprise .lc-voice__media { aspect-ratio: auto; height: 280px; } @media (max-width: 900px) { .lc-voice--enterprise .lc-voice__media { aspect-ratio: 4 / 3; height: auto; } } .lc-voice__tag { align-self: flex-start; font-family: var(--font-display); font-size: 9.9px; letter-spacing: 0.22em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--paper-3); color: var(--ink); margin-bottom: 22px; } .lc-voice--parent .lc-voice__tag { background: rgba(255,255,255,0.14); color: #fff; } /* Tag overlaid on the media image, pinned top-left */ .lc-voice__media .lc-voice__tag { position: absolute; top: 14px; left: 14px; margin: 0; z-index: 2; background: rgba(255, 255, 255, 0.92); color: var(--brand); backdrop-filter: blur(4px); box-shadow: 0 4px 12px -4px rgba(7, 51, 92, 0.35); } .lc-voice--parent .lc-voice__media .lc-voice__tag { background: rgba(255, 255, 255, 0.92); color: var(--brand); } .lc-voice blockquote { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 25.2px); line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 32px; flex: 1; } .lc-voice blockquote::before { content: "“"; display: block; font-size: 64.8px; line-height: 0.4; color: var(--brand); margin-bottom: 4px; } .lc-voice--parent blockquote::before { color: var(--accent); } .lc-voice figcaption { display: flex; align-items: center; gap: 14px; font-size: 12.6px; line-height: 1.4; } .lc-voice figcaption strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; } .lc-voice figcaption em { font-style: normal; color: var(--muted); } .lc-voice--parent figcaption em { color: rgba(255,255,255,0.6); } .lc-voice__avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #39a9ff); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14.4px; flex-shrink: 0; } /* ---------- 5. JOIN ---------- */ .lc-join { position: relative; padding: 120px var(--gutter); background: linear-gradient(120deg, var(--brand-3) 0%, var(--brand) 45%, #034775 100%); color: #fff; overflow: hidden; } /* Thin diagonal pinstripes texture */ .lc-join::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 26px ); mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%); pointer-events: none; } /* Floating glowing orbs behind the content */ .lc-join__orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .lc-join__orb { position: absolute; border-radius: 50%; filter: blur(8px); opacity: 0.5; animation: lcJoinFloat 14s ease-in-out infinite; } .lc-join__orb--a { width: 320px; height: 320px; top: -80px; left: -60px; background: radial-gradient(circle at 30% 30%, rgba(122,195,234,0.55), transparent 70%); } .lc-join__orb--b { width: 260px; height: 260px; bottom: -60px; right: 8%; background: radial-gradient(circle at 30% 30%, rgba(255,216,100,0.4), transparent 70%); animation-delay: -5s; } .lc-join__orb--c { width: 200px; height: 200px; top: 30%; right: 40%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 70%); animation-delay: -9s; } @keyframes lcJoinFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -24px) scale(1.08); } 66% { transform: translate(-20px, 18px) scale(0.96); } } .lc-join__inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: clamp(40px, 6vw, 88px); } @media (max-width: 880px) { /* Single column; flatten the text column so the CTA can reorder below the image card. */ .lc-join__inner { display: flex; flex-direction: column; gap: 28px; } .lc-join__col--text { display: contents; } .lc-join__title { order: 1; } .lc-join__body { order: 2; } .lc-join__col--card { order: 3; } .lc-join__cta { order: 4; align-self: stretch; justify-content: center; } } /* Animated pulse dot inside the eyebrow */ .lc-join .lc-eyebrow--on-dark { display: inline-flex; align-items: center; gap: 9px; } .lc-join__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #ffd864); box-shadow: 0 0 0 0 rgba(255,216,100,0.7); animation: lcJoinPulse 2.2s ease-out infinite; } @keyframes lcJoinPulse { 0% { box-shadow: 0 0 0 0 rgba(255,216,100,0.7); } 70% { box-shadow: 0 0 0 12px rgba(255,216,100,0); } 100% { box-shadow: 0 0 0 0 rgba(255,216,100,0); } } .lc-join__title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; margin: 18px 0 20px; } .lc-join__highlight { position: relative; color: var(--accent, #ffd864); white-space: nowrap; } .lc-join__body { font-size: 16.2px; opacity: 0.9; max-width: 520px; margin: 0 0 36px; } .lc-join__cta { align-self: flex-start; } /* Glass card holding an image (right column) */ .lc-join__col--card { position: relative; padding: 10px; border-radius: var(--radius-lg, 24px); background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); } .lc-join__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-lg, 24px) - 10px); aspect-ratio: 4 / 3; } /* Eyebrow overlaid on the card, pinned top-right */ .lc-join__eyebrow { position: absolute; top: 24px; right: 24px; z-index: 2; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; } @media (prefers-reduced-motion: reduce) { .lc-join__orb, .lc-join__pulse { animation: none; } } /* ---------- 6. PURPOSE ---------- */ .lc-purpose { position: relative; padding: 120px 0; background: #f3f5f8; overflow: hidden; isolation: isolate; } .lc-purpose::before { content: ""; position: absolute; inset: 0; background-image: url("../images/Drive-the-Future.webp"); background-size: contain; background-position: top center; background-repeat: no-repeat; opacity: 0.5; z-index: -2; } .lc-purpose::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243,245,248,0.55) 0%, rgba(243,245,248,0.85) 60%, #f3f5f8 100%); z-index: -1; } .lc-purpose__pillars { max-width: var(--max); margin: 0 auto 80px; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .lc-purpose__pillars { grid-template-columns: 1fr; } } .lc-pillar { position: relative; padding: 32px 28px; background: #ffffff; border: 1px solid rgba(40,121,185,0.12); border-radius: 24px; overflow: hidden; isolation: isolate; box-shadow: 0 8px 24px rgba(11,15,26,0.04); /* Scroll-linked slide-in from the right. The JS sets --pillar-progress (0..1) on the parent grid and --pillar-stagger (0,1,2) per card. Stagger is reversed so the rightmost card travels the shortest path and the leftmost card travels furthest — they "fan in" together. */ --_offset: calc((1 - var(--pillar-progress, 0)) * (120px + (2 - var(--pillar-stagger, 0)) * 80px)); transform: translateX(var(--_offset)); opacity: calc(0.15 + 0.85 * var(--pillar-progress, 0)); transition: border-color 0.45s, box-shadow 0.45s, background 0.45s; } @media (prefers-reduced-motion: reduce) { .lc-pillar { transform: none; opacity: 1; } } /* Top accent gradient bar that animates on hover */ .lc-pillar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 50%, var(--accent) 100%); transform: scaleX(0.2); transform-origin: left; transition: transform 0.6s var(--ease); } /* Soft brand glow that grows on hover */ .lc-pillar::after { content: ""; position: absolute; bottom: -100px; right: -100px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(40,121,185,0.08) 0%, transparent 70%); transition: transform 0.6s var(--ease), opacity 0.6s; z-index: -1; } .lc-pillar:hover { border-color: rgba(40,121,185,0.28); box-shadow: 0 28px 60px rgba(40,121,185,0.16); } .lc-pillar:hover::before { transform: scaleX(1); } .lc-pillar:hover::after { transform: scale(1.3); } /* Oversized watermark icon — sits behind the text in the top-right of the card as a faint brand-blue graphic (not a small badge). */ .lc-pillar__icon { position: absolute; top: 18px; right: 16px; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; color: var(--brand); opacity: 0.1; pointer-events: none; z-index: -1; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); } .lc-pillar__icon svg { width: 100%; height: 100%; } .lc-pillar:hover .lc-pillar__icon { opacity: 0.16; transform: scale(1.06) rotate(-4deg); } .lc-pillar h3 { font-family: var(--font-display); font-size: 19.8px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); } .lc-pillar__lead { margin: 0 0 12px; color: var(--brand); font-weight: 600; font-family: var(--font-display); font-size: 13.5px; } .lc-pillar p:last-child { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.75; } .lc-purpose__impact { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 48px; padding-bottom: 48px; } @media (max-width: 900px) { .lc-purpose__impact { grid-template-columns: repeat(2, 1fr); } } .lc-impact { display: flex; flex-direction: column; gap: 8px; } .lc-impact__num { font-family: var(--font-display); font-size: clamp(28.8px, 3.2vw, 46.8px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .lc-impact__num em { font-style: normal; font-size: 0.55em; color: var(--muted); font-weight: 600; margin-left: 4px; } .lc-impact__sup { font-size: 1em; vertical-align: baseline; color: var(--brand); margin-left: 2px; } .lc-impact__label { font-size: 14px; color: var(--brand); } /* ---------- FOOTER ---------- */ .lc-footer { position: relative; padding: 56px var(--gutter) 20px; background: radial-gradient(circle at left top, rgb(26, 40, 62), rgb(8, 86, 135) 100%); color: rgba(255,255,255,0.78); overflow: hidden; } .lc-footer::before, .lc-footer::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .lc-footer::before { width: 340px; height: 340px; right: -110px; bottom: -170px; background: radial-gradient(circle at 30% 30%, #4ea3e0 0%, #2879b9 60%, transparent 75%); opacity: 0.55; filter: blur(2px); } .lc-footer::after { width: 520px; height: 520px; right: -30px; bottom: -420px; background: radial-gradient(circle at 30% 30%, #83c8ff 0%, #cce8ff4f 60%, transparent 75%); opacity: 0.45; filter: blur(2px); } .lc-footer__inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; /* Desktop: 3 link columns in one row; brand spans full width below, centered. */ grid-template-columns: repeat(3, 1fr); gap: 40px 48px; align-items: flex-start; } /* Brand column drops to its own full-width row, centered. */ .lc-footer__col--brand { grid-column: 1 / -1; text-align: center; margin-top: 16px; } .lc-footer__col--brand .lc-footer__logo { display: flex; justify-content: center; } .lc-footer__col--brand .lc-footer__address { margin-left: auto; margin-right: auto; } .lc-footer__heading { margin: 0 0 12px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0; color: #fff; } .lc-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0px; } .lc-footer__list a { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.72); transition: color 0.2s, padding-left 0.25s var(--ease); } .lc-footer__list a:hover { color: #fff; padding-left: 4px; } .lc-footer__logo { display: inline-flex; align-items: center; line-height: 0; margin-bottom: 14px; } .lc-footer__logo img { height: 135px; width: auto; display: block; transition: opacity 0.3s var(--ease); } .lc-footer__logo:hover img { opacity: 0.85; } .lc-footer__company { margin: 0 0 8px; font-family: var(--font-display); font-size: 12.6px; font-weight: 700; color: #fff; line-height: 1.45; } .lc-footer__address { margin: 0 0 8px; font-size: 11.7px; line-height: 1.6; color: rgba(255,255,255,0.72); font-style: normal; max-width: 360px; } .lc-footer__phone { margin: 0; font-size: 11.7px; color: rgba(255,255,255,0.72); } .lc-footer__phone a { color: rgba(255,255,255,0.72); transition: color 0.2s; } .lc-footer__phone a:hover { color: #fff; } .lc-footer__bottom { position: relative; z-index: 1; max-width: var(--max); margin: 32px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); } .lc-footer__copy { margin: 0; font-size: 10.8px; color: rgba(255,255,255,0.45); } @media (max-width: 1100px) { .lc-footer__inner { gap: 32px 40px; } .lc-footer__col--brand { padding-left: 0; } } @media (max-width: 560px) { /* mobile: 2 columns. */ .lc-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .lc-footer__heading { font-size: 15px; } .lc-footer__list a { font-size: 14px; } /* Brand column spans both columns at the bottom, centered. */ .lc-footer__col--brand { grid-column: 1 / -1; text-align: center; } .lc-footer__logo { justify-content: center; } .lc-footer__address { max-width: none; } } /* ---------- BANNER SLIDER (home, between hero and journey) ---------- */ /* Full-width band — gradient wash spans the viewport edge-to-edge. Inner content stays constrained to the design grid via .lc-banner__inner. */ .lc-banners { position: relative; padding: 0; background: radial-gradient(1200px 600px at 90% 30%, rgba(177,215,240,0.32), transparent 60%), linear-gradient(135deg, #f1f6fc 0%, #e7f0f9 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; } .lc-banners__track { position: relative; width: 100%; margin: 0; min-height: 460px; } .lc-banner { position: absolute; inset: 0; opacity: 0; /* Idle (off-screen right) — incoming slide enters from here. */ transform: translateX(60px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none; } .lc-banner.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; } /* Outgoing slide explicitly slides off to the left while fading. */ .lc-banner.is-leaving { opacity: 0; transform: translateX(-60px); pointer-events: none; } .lc-banner__inner { display: grid; grid-template-columns: 1fr 1.35fr; align-items: stretch; gap: 32px; height: 100%; max-width: var(--max); margin: 0 auto; padding: 80px var(--gutter); } .lc-banner__body { align-self: start; max-width: 540px; } .lc-banner__title { font-family: var(--font-display); font-size: clamp(19.8px, 2.2vw, 30.6px); line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; color: var(--ink); margin: 0 0 20px; } .lc-banner__sub { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 28px; } .lc-banner__cta { display: inline-flex; align-items: center; gap: 16px; padding: 12px 16px 12px 24px; border-radius: 999px; background: transparent; color: var(--brand); border: 1.5px solid var(--brand); font-family: var(--font-display); font-weight: 600; font-size: 12.6px; text-decoration: none; transition: background 0.3s var(--ease), color 0.3s, border-color 0.3s, transform 0.3s var(--ease); } .lc-banner__cta:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-2px); } .lc-banner__cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(40,121,185,0.12); transition: background 0.3s, transform 0.3s var(--ease); } .lc-banner__cta:hover .lc-banner__cta-arrow { background: rgba(255,255,255,0.22); transform: translateX(2px); } .lc-banner__media { display: flex; align-items: center; justify-content: center; height: 100%; align-self: stretch; } .lc-banner__media img { width: 100%; height: 100%; max-height: 440px; object-fit: contain; object-position: center center; } /* Arrows */ .lc-banners__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; z-index: 2; } .lc-banners__arrow:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-50%) scale(1.06); } .lc-banners__arrow--prev { left: 24px; } .lc-banners__arrow--next { right: 24px; } /* Dots — sit inside the band, near the bottom */ .lc-banners__dots { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 8px; } .lc-banners__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(0,0,0,0.18); cursor: pointer; transition: background 0.25s, width 0.25s; } .lc-banners__dot:hover { background: rgba(0,0,0,0.32); } .lc-banners__dot.is-active { width: 28px; background: var(--brand); } @media (max-width: 900px) { .lc-banners__track { min-height: 760px; } .lc-banner__inner { grid-template-columns: 1fr; padding: 32px 0 80px; gap: 28px; } .lc-banner__body { padding: 0 var(--gutter); text-align: right; } .lc-banner__title, .lc-banner__sub { text-align: left; } .lc-banner__media { order: -1; width: 100%; padding: 0; } .lc-banner__media img { width: 100%; max-width: 100%; max-height: 420px; object-fit: contain; } .lc-banners__arrow { display: none; } } /* ---------- Lightbox (gallery viewer) ---------- */ .lc-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 32px; /* The lightbox is appended to , OUTSIDE .lc-home, so the --font-* design tokens don't cascade in here — set the family explicitly to keep it consistent with the rest of the site. */ font-family: "Prompt", system-ui, sans-serif; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--ease, ease), visibility 0s linear 0.35s; } .lc-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s var(--ease), visibility 0s linear 0s; } .lc-lightbox__backdrop { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); cursor: zoom-out; } .lc-lightbox__figure { position: relative; margin: 0; max-width: min(1200px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: scale(0.96); transition: opacity 0.4s var(--ease) 0.05s, transform 0.4s var(--ease) 0.05s; } .lc-lightbox.is-open .lc-lightbox__figure { opacity: 1; transform: none; } .lc-lightbox__img { max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); object-fit: contain; background: #000; /* Gentle cross-fade when stepping between images (is-swapping is toggled by the JS just before/after the src swap). */ transition: opacity 0.22s var(--ease, ease); } .lc-lightbox__figure.is-swapping .lc-lightbox__img, .lc-lightbox__figure.is-swapping .lc-lightbox__caption { opacity: 0; } .lc-lightbox__caption { color: var(--ink-soft, #5a6172); font-family: "Prompt", system-ui, sans-serif; font-size: 12.6px; font-weight: 400; letter-spacing: 0.01em; text-align: center; max-width: 80ch; transition: opacity 0.22s var(--ease, ease); } .lc-lightbox__caption:empty { display: none; } .lc-lightbox__close, .lc-lightbox__nav { position: absolute; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(11, 15, 26, 0.10); color: var(--ink); cursor: pointer; box-shadow: 0 8px 24px rgba(11, 15, 26, 0.10); transition: background 0.2s, transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s; z-index: 1; } .lc-lightbox__close:hover, .lc-lightbox__nav:hover { background: #fff; border-color: rgba(40, 121, 185, 0.35); color: var(--brand); box-shadow: 0 12px 32px rgba(11, 15, 26, 0.14); } .lc-lightbox__close { top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; font-size: 23.4px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .lc-lightbox__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; font-size: 19.8px; display: inline-flex; align-items: center; justify-content: center; } .lc-lightbox__nav--prev { left: 24px; } .lc-lightbox__nav--next { right: 24px; } .lc-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); } @media (max-width: 700px) { .lc-lightbox { padding: 16px; } .lc-lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 19.8px; } .lc-lightbox__nav { width: 44px; height: 44px; font-size: 16.2px; } .lc-lightbox__nav--prev { left: 8px; } .lc-lightbox__nav--next { right: 8px; } } @media (prefers-reduced-motion: reduce) { .lc-lightbox__backdrop, .lc-lightbox__figure { animation: none; } } /* ============================================================ HERO BANNER — top-of-page image slider (16:9 / mobile 4:3) ============================================================ */ .lc-herobanner { position: relative; /* small margin around the banner + breathing room before next section */ padding: 92px clamp(16px, 4vw, 48px) clamp(40px, 6vw, 72px); margin: 0 auto; } .lc-herobanner__viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; /* slightly rounded corners */ box-shadow: 0 24px 60px -28px rgba(7, 51, 92, 0.35); background: var(--paper, #eef2f6); } .lc-herobanner__track { position: absolute; inset: 0; } .lc-herobanner__slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transform: scale(1.02); transition: opacity 0.7s var(--ease, ease), transform 0.9s var(--ease, ease), visibility 0s linear 0.7s; } .lc-herobanner__slide.is-active { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 0.7s var(--ease, ease), transform 0.9s var(--ease, ease), visibility 0s; z-index: 1; } .lc-herobanner__img { width: 100%; height: 100%; object-fit: cover; display: block; } .lc-herobanner__img--mobile { display: none; } /* Controls row — arrows flanking the dots, below the image */ .lc-herobanner__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; } /* Arrows */ .lc-herobanner__arrow { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(40, 121, 185, 0.1); color: var(--brand, #2879b9); font-size: 21.6px; line-height: 1; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease; } .lc-herobanner__arrow:hover { background: var(--brand, #2879b9); color: #fff; transform: scale(1.06); } /* Dots — matches CEO slider dot UI */ .lc-herobanner__dots { display: inline-flex; align-items: center; gap: 12px; } .lc-herobanner__dot { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; background: rgba(40, 121, 185, 0.3); cursor: pointer; transition: background 0.25s ease, width 0.25s ease; } .lc-herobanner__dot:hover { background: rgba(40, 121, 185, 0.5); } .lc-herobanner__dot.is-active { width: 28px; background: var(--brand, #2879b9); } @media (max-width: 760px) { .lc-herobanner { padding: 76px 14px 32px; } .lc-herobanner__viewport { aspect-ratio: 4 / 3; /* mobile 4:3 */ border-radius: 14px; } .lc-herobanner__img--desktop { display: none; } .lc-herobanner__img--mobile { display: block; } .lc-herobanner__controls { gap: 14px; margin-top: 10px; } .lc-herobanner__arrow { width: 36px; height: 36px; font-size: 19.8px; } } @media (prefers-reduced-motion: reduce) { .lc-herobanner__slide { transition: opacity 0.3s ease, visibility 0s; transform: none; } .lc-herobanner__slide.is-active { transform: none; } }