/* ======================================================================== Leadnox brand layer — loaded after style.css Dark (night) + light (day) themes, driven by `.lightmode` on . Section effects adapted from 21st.dev patterns: glowing-orb hero · blur-out-up text · blurred marquee · border beam · 3D tilt card · spotlight card · shine sweep · bento grid · magnetic CTA ======================================================================== */ /* ---------------- 01. Theme tokens ---------------- */ :root { --lx-indigo: #4F46E5; --lx-violet: #7C3AED; --lx-purple: #C82AEF; --lx-gradient: linear-gradient(100deg, #4F46E5 0%, #7C3AED 35%, #C82AEF 70%, #8B5CF6 100%); /* night (default) */ --lx-surface: rgba(255, 255, 255, 0.045); --lx-surface-solid: #100E18; --lx-card-bg: #100E18; --lx-section-tint: transparent; --lx-border: rgba(255, 255, 255, 0.10); --lx-border-strong: rgba(200, 42, 239, 0.42); --lx-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.9); --lx-orb-opacity: 0.5; --lx-glow-tint: rgba(200, 42, 239, 0.16); --lx-panel-blur: rgba(10, 8, 14, 0.97); --lx-hairline: rgba(255, 255, 255, 0.07); } /* Day theme. Surfaces carry a soft lavender gradient (as in the Marko reference) so every section still reads as a distinct block on a light page instead of dissolving into flat white. */ body.lightmode { --lx-surface: rgba(124, 58, 237, 0.06); --lx-surface-solid: #FFFFFF; --lx-card-bg: linear-gradient(158deg, #FFFFFF 0%, #F4E8FD 100%); --lx-section-tint: linear-gradient(180deg, rgba(200, 42, 239, 0.045), rgba(79, 70, 229, 0.05)); --lx-border: rgba(124, 58, 237, 0.20); --lx-border-strong: rgba(200, 42, 239, 0.55); --lx-shadow: 0 22px 50px -28px rgba(79, 70, 229, 0.42); --lx-orb-opacity: 0.34; --lx-glow-tint: rgba(200, 42, 239, 0.14); --lx-panel-blur: rgba(255, 255, 255, 0.98); --lx-hairline: rgba(124, 58, 237, 0.18); --secondary: #FFFAFA; --primary: #16121F; --text-color: #55506B; background-color: var(--secondary); } /* Alternate sections get a faint tinted band so the page has rhythm in daylight rather than one continuous white sheet. */ body.lightmode main > .section:nth-of-type(even) { background-image: var(--lx-section-tint); border-top: 1px solid var(--lx-hairline); border-bottom: 1px solid var(--lx-hairline); } /* ---------------- 02. Global cleanups ---------------- */ /* Kill the template's tiled grid-line background in BOTH themes */ body::before { display: none !important; content: none !important; } /* Remove the little circle-dot markers above section headings */ .sub-heading > i, .lx-eyebrow > i { display: none !important; } .sub-heading { gap: 0 !important; } /* No scroll-progress bar */ #lx-progress { display: none !important; } /* ---------------- 03. Fluid cursor canvas ---------------- Sits behind ALL page content so text and cards stay legible. Light mode multiplies so the ink tints the page instead of glowing. */ #fluid-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: 0.5; transition: opacity 0.4s ease; } body.lightmode #fluid-canvas { opacity: 0.42; mix-blend-mode: multiply; } header, main, footer, aside { position: relative; z-index: 2; } header { z-index: 20; } aside { z-index: 30; } /* Content surfaces stay opaque so smoke never washes out text */ .card, .lx-stat-card, .lx-h3-card, .lx-bento-card, .lx-panel, .form-layout, .contact-title { background: var(--lx-card-bg) !important; backdrop-filter: none; } /* ---------------- 04. Header / navigation ---------------- */ .navbar-nav { flex-wrap: nowrap !important; align-items: center; } .navbar-nav .nav-link { font-size: 14.5px; white-space: nowrap; padding: 8px 9px !important; } .navbar-collapse { flex: 1 1 auto; min-width: 0; } @media (min-width: 1400px) { .navbar-nav .nav-link { font-size: 15.5px; padding: 8px 13px !important; } } /* Header CTA stays compact so the menu never wraps */ .navbar-action-container .btn-accent { padding: 6px 6px 6px 20px; } .navbar-action-container .btn-accent .icon-circle { width: 38px; height: 38px; } .lx-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; white-space: nowrap; } .lx-logo img { height: 42px; width: auto; } .lx-wordmark { font-weight: 800; font-size: 1.35rem; letter-spacing: 0.11em; color: var(--primary); line-height: 1; } .lx-wordmark em { font-style: normal; background: var(--lx-gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lx-grad-shift 6s ease-in-out infinite; } .logo-container-footer .lx-logo img { height: 50px; } /* Day / night toggle */ .lx-theme-btn { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; border: 1px solid var(--lx-border); background: var(--lx-surface); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.3s ease, transform 0.3s ease; } .lx-theme-btn:hover { border-color: var(--lx-border-strong); transform: rotate(-18deg); } .lx-theme-btn i { font-size: 15px; transition: opacity 0.35s ease, transform 0.45s ease; } .lx-theme-btn .lx-icon-sun { position: absolute; opacity: 0; transform: scale(0.4) rotate(-90deg); } body.lightmode .lx-theme-btn .lx-icon-sun { opacity: 1; transform: scale(1) rotate(0); color: var(--lx-purple); } body.lightmode .lx-theme-btn .lx-icon-moon { opacity: 0; transform: scale(0.4) rotate(90deg); } /* The template pins these to width:30% each, which squeezes the menu onto a second line — size them to their content instead. */ .navbar-action-container { width: auto !important; flex: 0 0 auto; gap: 0.7rem; align-items: center; display: flex; } .logo-container-header { width: auto !important; flex: 0 0 auto; flex-direction: row !important; } .logo-container-header img { width: auto !important; } .navbar-action-container .btn-title, .navbar-action-container .btn-title span { white-space: nowrap; } /* ---------------- Nav: sliding pill + rich dropdowns ---------------- Ported from a framer-motion nav. The pill is framer's `layoutId` shared element done in CSS: one absolutely positioned node whose transform and width transition to whichever item is hovered, so it appears to glide between them instead of fading in place. Driven by initNavPill(). */ .navbar-nav { position: relative; } .navbar-nav .nav-item { position: relative; z-index: 1; } .lx-nav-pill { position: absolute; top: 50%; left: 0; width: var(--pill-w, 0); height: var(--pill-h, 34px); transform: translate(var(--pill-x, 0), -50%); border-radius: 99px; background: var(--lx-glow-tint); border: 1px solid var(--lx-border); opacity: 0; pointer-events: none; z-index: 0; transition: transform 0.38s cubic-bezier(0.4, 1.25, 0.35, 1), width 0.38s cubic-bezier(0.4, 1.25, 0.35, 1), height 0.38s cubic-bezier(0.4, 1.25, 0.35, 1), opacity 0.22s ease; } .navbar-nav.is-pill-on .lx-nav-pill { opacity: 1; } /* First reveal should fade in place, not fly in from the left. */ .lx-nav-pill.no-slide { transition: opacity 0.22s ease; } /* Chevrons flip when their menu is open or hovered. */ .nav-link .fa-angle-down { transition: transform 0.3s ease; font-size: 0.8em; } .nav-item:hover > .nav-link .fa-angle-down, .nav-item.show > .nav-link .fa-angle-down { transform: rotate(180deg); } /* Panels */ .dropdown-menu { border-radius: 16px !important; border: 1px solid var(--lx-border) !important; background: var(--lx-panel-blur) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--lx-shadow); padding: 0.6rem !important; } .lx-drop-rich { min-width: 20rem; } .lx-drop-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem; border-radius: 11px; text-decoration: none; transition: background 0.28s ease; } .lx-drop-item:hover { background: var(--lx-surface); } .lx-drop-icon { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--lx-border); border-radius: 9px; color: var(--primary); font-size: 0.9rem; transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease; } .lx-drop-item:hover .lx-drop-icon { background: var(--lx-gradient); border-color: transparent; color: #fff; } .lx-drop-text { display: flex; flex-direction: column; line-height: 1.35; } .lx-drop-label { font-size: 0.9rem; font-weight: 600; color: var(--primary); } .lx-drop-desc { font-size: 0.76rem; color: var(--text-color); transition: color 0.28s ease; } .lx-drop-item:hover .lx-drop-desc { color: var(--primary); } /* Desktop: open dropdowns on hover so the parent link stays clickable (Services goes straight to the all-services page). */ @media (min-width: 992px) { /* display toggling cannot transition, so the panel stays laid out and is hidden with visibility/opacity instead. */ .lx-hover-drop > .dropdown-menu { display: block; visibility: hidden; opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top center; transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.4, 1.25, 0.35, 1), visibility 0s linear 0.22s; margin-top: 0; } .lx-hover-drop > .dropdown-menu.lx-mega { display: grid; } .lx-hover-drop:hover > .dropdown-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s, 0s, 0s; } .lx-hover-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } .lx-hover-drop { position: relative; } } /* Mobile: hamburger sits last, next to the theme toggle */ @media (max-width: 991px) { .navbar-container { align-items: center; } .nav-btn { order: 3; margin-left: 0.5rem; } .navbar-action-container { order: 2; margin-left: auto; } .lx-wordmark { font-size: 1.15rem; letter-spacing: 0.08em; } .lx-logo img { height: 36px; } .lx-theme-btn { width: 38px; height: 38px; flex-basis: 38px; } } /* ---------------- 05. Shared text / gradient ---------------- */ .lx-gradient-text { background: var(--lx-gradient); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lx-grad-shift 7s ease-in-out infinite; } @keyframes lx-grad-shift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } .lx-eyebrow, .sub-heading span { color: var(--lx-purple); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } /* ---------------- 06. Hero (21st.dev: glowing orb + grain) ---------------- */ .lx-hero { position: relative; overflow: hidden; } .lx-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--lx-orb-opacity); pointer-events: none; animation: lx-orb-float 14s ease-in-out infinite alternate; } .lx-orb-1 { width: 480px; height: 480px; top: -140px; right: -80px; background: radial-gradient(circle, rgba(200,42,239,0.55), transparent 65%); } .lx-orb-2 { width: 420px; height: 420px; bottom: -160px; left: -120px; background: radial-gradient(circle, rgba(79,70,229,0.5), transparent 65%); animation-delay: -7s; } .lx-orb-3 { width: 300px; height: 300px; top: 30%; left: 38%; background: radial-gradient(circle, rgba(124,58,237,0.35), transparent 65%); animation-duration: 18s; } @keyframes lx-orb-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, -50px, 0) scale(1.12); } } /* Hero video plate: a rounded, inset panel of footage behind the hero copy, adapted from a Tailwind/React hero block into this site's vanilla stack. The clip is dark violet aerial footage, so rather than inverting it in day mode (which would drag the brand hues toward green) each theme sets its own scrim and opacity, keeping the headline legible either way. */ .lx-hero-video { position: absolute; /* Starts BELOW the fixed nav (as in the Marko reference) so the header floats over the page background, not over this dark plate. That is what lets the logo and the right-hand controls follow the page theme and stay legible in day mode. */ inset: var(--lx-nav-h, 5.5rem) 0.4rem 0.4rem; border-radius: 28px; overflow: hidden; /* Same still as the video poster, so the panel is never blank: it covers the load gap, a blocked autoplay, and the reduced-motion case where the video element is removed entirely. */ background: #050507 url("../image/hero-aerial-poster.webp") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.06); pointer-events: none; z-index: 0; --lx-video-op: 0.75; } /* Once frames are actually rendering, drop the still. Leaving it behind a translucent video ghosts frame one over everything that follows. */ .lx-hero-video.is-playing { background-image: none; } /* Two players are stacked so the loop point can crossfade rather than cut. */ .lx-hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s linear; } .lx-hero-video video.is-front { opacity: var(--lx-video-op); } /* Scrim: darkens the left side, where the headline sits, and feathers the bottom edge into the section below. */ .lx-hero-video::after { content: ""; position: absolute; inset: 0; background: /* Corner vignette. The source clip carries a generator watermark in the bottom right, and masking it costs nothing here, where the layout is empty, versus upscale-cropping a 720p plate. */ radial-gradient(ellipse 26% 30% at 97% 90%, rgba(5, 5, 7, 0.99) 40%, rgba(5, 5, 7, 0.7) 68%, transparent 100%), linear-gradient(100deg, rgba(5, 5, 7, 0.94) 0%, rgba(5, 5, 7, 0.72) 38%, rgba(5, 5, 7, 0.18) 68%, rgba(5, 5, 7, 0.05) 100%), linear-gradient(to bottom, rgba(5, 5, 7, 0.55) 0%, transparent 22%, transparent 62%, rgba(5, 5, 7, 0.85) 100%); } /* Day mode keeps the hero as a DARK panel floating on the light page, the way the Marko reference does. Washing the plate out to white made the footage invisible, so instead the hero becomes its own dark context: the theme tokens are re-pointed at their night values for everything inside it, and the copy flips to light. */ body.lightmode .lx-hero-home { /* The template's own `.keep-dark` (on the hero element) re-points its token set to the night values, which is what keeps the buttons and copy correct. These are the Leadnox brand-layer tokens it does not know about. */ --lx-card-bg: rgba(255, 255, 255, 0.06); --lx-surface: rgba(255, 255, 255, 0.06); --lx-surface-solid: rgba(255, 255, 255, 0.06); --lx-border: rgba(255, 255, 255, 0.14); --lx-border-strong: rgba(200, 42, 239, 0.5); --lx-hairline: rgba(255, 255, 255, 0.10); --lx-glow-tint: rgba(200, 42, 239, 0.20); } body.lightmode .lx-hero-home .lx-stat-card { backdrop-filter: blur(14px); } @media (min-width: 992px) { .lx-hero-video { inset: var(--lx-nav-h, 5.5rem) 0.5rem 0.5rem; border-radius: 44px; } } @media (max-width: 767px) { .lx-hero-video { inset: 5.5rem 0.25rem 0.25rem; border-radius: 20px; } /* Portrait viewports crop the 16:9 plate hard, and copy runs the full width rather than sitting in a left column, so the scrim becomes an even wash instead of a left-weighted one. */ .lx-hero-video { --lx-video-op: 0.62; } .lx-hero-video::after { background: radial-gradient(ellipse 34% 22% at 97% 92%, rgba(5, 5, 7, 0.99) 40%, rgba(5, 5, 7, 0.7) 70%, transparent 100%), linear-gradient(to bottom, rgba(5, 5, 7, 0.72) 0%, rgba(5, 5, 7, 0.62) 45%, rgba(5, 5, 7, 0.78) 78%, rgba(5, 5, 7, 0.92) 100%); } } /* Glow horizon: layered blurred arcs that converge into a glowing line at the top edge of the hero. Adapted from a framer-motion 21st.dev component into pure CSS so it fits this site's vanilla stack; gated on prefers-reduced-motion rather than JS so there is no hidden-tab risk (the unconditional base state below is already the fully-formed, fully visible look — the animation only ever runs on top of it). */ .lx-glow-horizon { position: absolute; top: 0; left: 0; right: 0; height: 46%; min-height: 260px; overflow: hidden; pointer-events: none; isolation: isolate; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.85) 22%, transparent 94%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.85) 22%, transparent 94%); } .lx-glow-arc { position: absolute; left: 50%; bottom: 100%; width: 150%; aspect-ratio: 3 / 1; border-radius: 50%; transform: translate(-50%, 42%); } .lx-glow-arc-black { background: #000; filter: blur(60px); opacity: 0.9; } .lx-glow-arc-indigo { background: #4922E5; filter: blur(36px); opacity: 0.42; width: 140%; } .lx-glow-arc-purple { background: #A558FB; filter: blur(42px); opacity: 0.32; width: 132%; } .lx-glow-arc-white { background: #fff; opacity: 0.3; width: 118%; filter: blur(6px); box-shadow: 0 -4px 34px 0 rgba(255, 255, 255, 0.45); } body.lightmode .lx-glow-arc-black { opacity: 0.12; } body.lightmode .lx-glow-arc-indigo { opacity: 0.32; } body.lightmode .lx-glow-arc-purple { opacity: 0.26; } body.lightmode .lx-glow-arc-white { opacity: 0.6; } @media (prefers-reduced-motion: no-preference) { .lx-glow-horizon { opacity: 0; animation: lx-glow-in 2s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .lx-glow-arc-indigo { animation: lx-glow-slide 2s cubic-bezier(0.16, 1, 0.3, 1) 0s backwards; } .lx-glow-arc-black { animation: lx-glow-slide 2s cubic-bezier(0.16, 1, 0.3, 1) 0s backwards; } .lx-glow-arc-purple { animation: lx-glow-slide 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards; } } @keyframes lx-glow-in { from { opacity: 0; filter: blur(15px); transform: translateY(-30%) scaleY(1.4); } to { opacity: 1; filter: blur(0); transform: translateY(0) scaleY(1); } } @keyframes lx-glow-slide { from { transform: translate(-50%, 30%); } to { transform: translate(-50%, 42%); } } .lx-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); } body.lightmode .lx-grain::after { opacity: 0.22; } .lx-hero-home { min-height: 92vh; display: flex; align-items: center; padding: 10rem 0 5rem 0; } .lx-hero-home .hero-container { width: 100%; } .lx-hero-kicker { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1.1rem; border: 1px solid var(--lx-border-strong); border-radius: 100px; background: var(--lx-glow-tint); color: var(--primary); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; align-self: flex-start; } .lx-hero-kicker i { color: var(--lx-purple); } .lx-hero-title { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.08; font-weight: 800; color: var(--primary); } .lx-hero-sub { max-width: 640px; font-size: 1.05rem; } /* Hero words: blur-out-up (21st.dev). Deliberately a TRANSITION, not an animation: a transition always lands on its final value even if the tab never paints it, so the headline can never be left invisible. The hidden start state is only applied once JS has armed the element, so with JS off the text simply shows. */ .lx-word { display: inline-block; } .lx-words.is-armed .lx-word { opacity: 0; filter: blur(10px); transform: translateY(0.45em); transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.68, 0.24, 1); } .lx-words.is-armed .lx-word.is-in { opacity: 1; filter: blur(0); transform: none; } /* ---------------- 07. Section reveal (21st.dev: blur reveal) ---------------- The hidden start state only applies once JS marks the document ready, so a script failure leaves the page fully readable instead of blank. */ body.lx-js .lx-reveal { opacity: 0; filter: blur(14px); transform: translateY(26px); transition: opacity 0.85s ease, filter 0.85s ease, transform 0.85s cubic-bezier(0.22, 0.68, 0.24, 1); } body.lx-js .lx-reveal.is-in { opacity: 1; filter: blur(0); transform: none; } body.lx-js .lx-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.05s cubic-bezier(0.22, 0.68, 0.24, 1); } body.lx-js .lx-wipe.is-in { clip-path: inset(0 0 0 0); } /* ---------------- 08. Stat cards + border beam (21st.dev) ---------------- */ .lx-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 991px) { .lx-stat-row { grid-template-columns: repeat(2, 1fr); } } .lx-stat-card { position: relative; border: 1px solid var(--lx-border); border-radius: 18px; padding: 1.6rem 1.4rem; overflow: hidden; box-shadow: var(--lx-shadow); } .lx-stat-value { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 800; color: var(--primary); white-space: nowrap; } .lx-stat-label { color: var(--text-color); font-size: 0.9rem; margin: 0; } .lx-beam { position: relative; } .lx-beam::before { content: ""; position: absolute; inset: -140%; background: conic-gradient(from 0deg, transparent 0deg, var(--lx-purple) 26deg, var(--lx-indigo) 46deg, transparent 76deg); animation: lx-beam-spin 5.5s linear infinite; z-index: 0; opacity: 0.85; } .lx-beam::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--lx-card-bg); z-index: 0; } .lx-beam > * { position: relative; z-index: 1; } .lx-beam:nth-child(2n)::before { animation-duration: 7s; animation-direction: reverse; } .lx-beam:nth-child(3n)::before { animation-duration: 8.5s; } @keyframes lx-beam-spin { to { transform: rotate(1turn); } } /* ---------------- 09. Spotlight card (21st.dev) ---------------- */ .lx-spot { position: relative; overflow: hidden; } .lx-spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(320px circle at var(--lx-mx, 50%) var(--lx-my, 50%), var(--lx-glow-tint), transparent 65%); z-index: 0; } .lx-spot:hover::before { opacity: 1; } .lx-spot > * { position: relative; z-index: 1; } /* ---------------- 10. 3D tilt card (21st.dev) ---------------- */ .lx-tilt { transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.24, 1), box-shadow 0.35s ease, border-color 0.35s ease; will-change: transform; } .lx-tilt:hover { box-shadow: 0 40px 90px -40px rgba(124, 58, 237, 0.55); border-color: var(--lx-border-strong); } .lx-tilt-inner { transform: translateZ(38px); } /* ---------------- 11. Shine sweep (bento / location cards) ---------------- */ .lx-shine { position: relative; overflow: hidden; } .lx-shine::after { content: ""; position: absolute; top: 0; left: -70%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.12), transparent); transform: skewX(-18deg); transition: left 0.75s cubic-bezier(0.22, 0.68, 0.24, 1); pointer-events: none; z-index: 2; } body.lightmode .lx-shine::after { background: linear-gradient(100deg, transparent, rgba(124,58,237,0.13), transparent); } .lx-shine:hover::after { left: 125%; } /* ---------------- 12. Marquee (21st.dev: blurred marquee) ---------------- */ .lx-marquee { overflow: hidden; padding: 1.2rem 0; border-top: 1px solid var(--lx-hairline); border-bottom: 1px solid var(--lx-hairline); -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); } .lx-marquee-track { display: flex; gap: 3.2rem; width: max-content; animation: lx-marquee-scroll 34s linear infinite; } .lx-marquee:hover .lx-marquee-track { animation-play-state: paused; } .lx-marquee-item { display: inline-flex; align-items: center; gap: 0.8rem; white-space: nowrap; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-color); } .lx-marquee-item i { color: var(--lx-purple); font-size: 0.55rem; } @keyframes lx-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------------- 13. Magnetic CTA + gradient ring ---------------- */ .lx-magnetic { transition: transform 0.25s cubic-bezier(0.22, 0.68, 0.24, 1); } .lx-pulse { position: relative; } .lx-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--lx-gradient); background-size: 200% auto; opacity: 0.35; filter: blur(9px); z-index: -1; animation: lx-grad-shift 5s ease-in-out infinite; } /* ---------------- 14. Mega dropdown ---------------- */ .dropdown-menu.lx-mega { min-width: 560px; display: none; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; padding: 1.2rem 1.4rem; background: var(--lx-panel-blur) !important; backdrop-filter: blur(14px); border: 1px solid var(--lx-border-strong); border-radius: 16px; box-shadow: var(--lx-shadow); } .dropdown-menu.lx-mega.show { display: grid; } .lx-mega-group-title { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lx-purple); font-weight: 700; padding: 0.5rem 1rem 0.3rem 1rem; } .dropdown-menu.lx-mega .dropdown-item { font-size: 0.9rem; } @media (max-width: 1200px) { .dropdown-menu.lx-mega { min-width: 420px; } } .dropdown-menu { background: var(--lx-panel-blur) !important; border: 1px solid var(--lx-border); } /* ---------------- 15. Content sections ---------------- */ .lx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; /* Start, not stretch: forcing a landscape photo to fill a 1000px column kept only ~40% of its width and sliced the subject. The image column is sticky instead (below), so it stays beside the copy the whole way down without dead space and without a brutal crop. */ align-items: start; } @media (max-width: 991px) { /* Single column: nothing to stick to. */ .lx-split { grid-template-columns: 1fr; gap: 2rem; align-items: start; } .lx-split-img, .lx-illus { position: static; } .lx-split-img img, .lx-illus img { height: auto; max-height: 24rem; } } /* Image reveal: clip-path wipe on scroll */ .lx-split-img { border-radius: 22px; overflow: hidden; border: 1px solid var(--lx-border); box-shadow: var(--lx-shadow); clip-path: inset(0 0 0 0); position: sticky; top: 2rem; /* nav is in flow now, no bar to clear */ align-self: start; } .lx-split-img img { width: 100%; /* Tall enough to hold its own beside a long column, shallow enough to keep roughly 60% of the frame's width. */ height: clamp(22rem, 46vh, 34rem); object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.22, 0.68, 0.24, 1); } .lx-split-img:hover img { transform: scale(1.05); } /* Service illustration panels (SVG). The art is drawn portrait and keeps its subject in the middle band, so filling the column crops gracefully. */ .lx-illus { border-radius: 22px; overflow: hidden; border: 1px solid var(--lx-border); box-shadow: var(--lx-shadow); background: #0B0912; position: sticky; top: 6.5rem; align-self: start; } .lx-illus img { width: 100%; height: clamp(22rem, 46vh, 34rem); object-fit: cover; object-position: center; display: block; } .lx-prose p { margin-bottom: 1rem; } .lx-prose p:last-child { margin-bottom: 0; } .lx-h3-card { border: 1px solid var(--lx-border); border-radius: 18px; padding: 1.8rem; height: 100%; display: flex; flex-direction: column; gap: 0.8rem; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .lx-h3-card:hover { transform: translateY(-6px); border-color: var(--lx-border-strong); box-shadow: var(--lx-shadow); } .lx-h3-card h3, .lx-h3-card h4 { font-size: 1.15rem; color: var(--primary); margin: 0; } .lx-h3-card p { font-size: 0.95rem; margin: 0; } .lx-card-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--lx-glow-tint); color: var(--lx-purple); font-size: 1.15rem; transition: transform 0.45s cubic-bezier(0.22, 0.68, 0.24, 1), background 0.35s ease; } .lx-h3-card:hover .lx-card-icon, .card-service:hover .lx-card-icon { transform: rotate(-8deg) scale(1.1); background: var(--lx-gradient); color: #FFFFFF; } /* ---------------- 3D coverflow (home services section) ------------- Ported from a React coverflow carousel. Five cards on a shared perspective stage: the centre one flat and nearest, its neighbours pushed out, scaled down and rotated away, with an ambient blur of the active photo behind everything. Positions are applied by initCoverflow() in leadnox.js; the offsets scale off the card width so the same geometry works at every breakpoint. */ .lx-cf { position: relative; border-radius: 28px; overflow: hidden; padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.5rem); background: #0B0912; isolation: isolate; } /* Ambient backdrop: the active photo, heavily blurred and dimmed. */ .lx-cf-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .lx-cf-bg-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: brightness(0.22) blur(32px); transition: opacity 0.6s ease; } .lx-cf-bg-veil { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(11,9,18,0.30) 0%, rgba(11,9,18,0.94) 100%); } /* Stage */ .lx-cf-stage { position: relative; z-index: 2; height: clamp(24rem, 52vw, 31.25rem); display: flex; align-items: center; justify-content: center; perspective: 1400px; } .lx-cf-card { position: absolute; width: clamp(13.5rem, 26vw, 20.625rem); /* 216px -> 330px */ height: clamp(20rem, 40vw, 31.25rem); /* 320px -> 500px */ border-radius: 18px; overflow: hidden; background: #171120; border: 1px solid rgba(255, 255, 255, 0.12); transform-origin: center center; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.8s ease; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); cursor: pointer; /* Without JS the first card still shows, flat and readable. */ opacity: 0; } .lx-cf-card.is-center { opacity: 1; z-index: 30; cursor: default; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(200, 42, 239, 0.28); } .lx-cf-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lx-cf-veil { position: absolute; inset: 0; z-index: 1; /* Heavier through the lower half: the title and body sit there, and a bright patch of photo behind them washed the text out. */ background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 20%, rgba(11,9,18,0.55) 42%, rgba(11,9,18,0.88) 60%, rgba(11,9,18,0.97) 78%, rgba(11,9,18,0.99) 100%); } /* Card content. Only the centre card shows it, exactly as in the source. */ .lx-cf-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; padding: 1.15rem 1.1rem 1.35rem; opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .lx-cf-card.is-center .lx-cf-body { opacity: 1; transform: none; pointer-events: auto; } .lx-cf-main { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-top: auto; width: 100%; } .lx-cf .lx-cf-main h3 { margin: 0; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 800; line-height: 1.15; color: #fff; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95); } .lx-cf-rule { width: 34px; height: 2px; border-radius: 2px; margin: 0.35rem 0 0.25rem; background: var(--lx-gradient); box-shadow: 0 0 8px rgba(200, 42, 239, 0.7); } .lx-cf .lx-cf-main p { margin: 0 0 0.6rem; font-size: 0.8rem; line-height: 1.45; color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); /* Descriptions vary in length; clamp so every card reads the same height. */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .lx-cf-logos { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-bottom: 0.75rem; font-size: 1.05rem; color: #fff; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); } .lx-cf-cta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--lx-gradient); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 16px rgba(200, 42, 239, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .lx-cf-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 22px rgba(200,42,239,0.5); } .lx-cf-cta i { font-size: 0.7rem; } /* Arrows sit against the panel edges. */ .lx-cf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .lx-cf-arrow:hover { background: var(--lx-gradient); border-color: transparent; transform: translateY(-50%) scale(1.06); } .lx-cf-arrow:focus-visible { outline: 2px solid var(--lx-purple); outline-offset: 3px; } .lx-cf-prev { left: clamp(0.5rem, 2vw, 1.5rem); } .lx-cf-next { right: clamp(0.5rem, 2vw, 1.5rem); } .lx-cf-dots { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: clamp(1.25rem, 3vw, 2rem); } .lx-cf-dot { height: 8px; width: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.25); cursor: pointer; transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .lx-cf-dot.is-active { width: 28px; background: var(--lx-purple); box-shadow: 0 0 10px rgba(200, 42, 239, 0.7); } .lx-cf-dot:focus-visible { outline: 2px solid var(--lx-purple); outline-offset: 3px; } /* No JS, or reduced motion: fall back to a readable single card. */ .lx-cf:not(.is-live) .lx-cf-card:not(.is-center) { display: none; } @media (prefers-reduced-motion: reduce) { .lx-cf-card, .lx-cf-body { transition: none; } } .lx-carousel-cta { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--lx-hairline); } .lx-carousel-cta p { max-width: 44rem; margin: 0; font-size: 1.02rem; text-align: center; } @media (prefers-reduced-motion: reduce) { .lx-carousel-card { transition: none; } .lx-carousel-word { opacity: 1; filter: none; transform: none; } } .lx-quote { border-left: 3px solid var(--lx-purple); background: var(--lx-glow-tint); border-radius: 0 16px 16px 0; padding: 1.4rem 1.7rem; color: var(--primary); font-size: 1.02rem; } .lx-chip-row { display: flex; flex-wrap: wrap; gap: 0.7rem; } .lx-chip { padding: 0.45rem 1rem; border-radius: 100px; border: 1px solid var(--lx-border); background: var(--lx-surface); color: var(--primary); font-size: 0.85rem; transition: border-color 0.3s ease, transform 0.3s ease; } .lx-chip:hover { border-color: var(--lx-border-strong); transform: translateY(-3px); } .lx-chip i { color: var(--lx-purple); margin-right: 0.4rem; } /* ---------------- 16. Bento locations grid ---------------- Gradient panel with the icon tile floating half outside the left edge. The tile is a sibling of the card, not a child: the card keeps `overflow: hidden` for its shine sweep, which would otherwise clip it. */ .lx-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } @media (max-width: 991px) { .lx-bento { grid-template-columns: 1fr; } } .lx-bento-item { position: relative; padding-left: 2.7rem; /* room for the tile's overhang */ } .lx-bento-item > .lx-card-icon { position: absolute; left: 0; top: 2.6rem; z-index: 2; width: 5.4rem; height: 5.4rem; border-radius: 22px; font-size: 1.55rem; background: #FFFFFF; color: var(--lx-purple); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 7px rgba(200, 42, 239, 0.07), 0 14px 34px -10px rgba(200, 42, 239, 0.45); transition: transform 0.45s cubic-bezier(0.22, 0.68, 0.24, 1), box-shadow 0.4s ease; } .lx-bento-item:hover > .lx-card-icon { transform: translateY(-4px) rotate(-6deg); box-shadow: 0 0 0 9px rgba(200, 42, 239, 0.10), 0 18px 42px -10px rgba(200, 42, 239, 0.6); } .lx-bento-card { /* The global surface rule sets `background: var(--lx-card-bg) !important`, so the panel gradient is set through that token rather than fought. */ --lx-card-bg: linear-gradient(115deg, #17131F 0%, #1B1430 48%, #2A1642 100%); border: 1px solid var(--lx-border); border-radius: 26px; padding: 2.4rem 2.2rem 2.4rem 4.4rem; height: 100%; position: relative; overflow: hidden; transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; } /* Mirror the sweep on the second card so the pair reads as a set. */ .lx-bento-item:nth-child(even) .lx-bento-card { --lx-card-bg: linear-gradient(295deg, #17131F 0%, #1B1430 48%, #2A1642 100%); } .lx-bento-item:hover .lx-bento-card { border-color: var(--lx-border-strong); transform: translateY(-4px); box-shadow: var(--lx-shadow); } .lx-bento-card h3 { color: var(--primary); margin: 0 0 0.6rem; font-size: 1.6rem; } .lx-bento-card > p { margin: 0 0 1.1rem; font-size: 0.95rem; line-height: 1.65; color: var(--text-color); } body.lightmode .lx-bento-card { --lx-card-bg: linear-gradient(115deg, #F7F6F9 0%, #F2EBFB 52%, #E7D8FA 100%); border-color: rgba(124, 58, 237, 0.14); } body.lightmode .lx-bento-item:nth-child(even) .lx-bento-card { --lx-card-bg: linear-gradient(295deg, #F7F6F9 0%, #F2EBFB 52%, #E7D8FA 100%); } @media (max-width: 575px) { /* Too narrow for an overhang. The tile moves fully inside the card rather than going static, which would leave it floating above the panel. */ .lx-bento-item { padding-left: 0; } .lx-bento-item > .lx-card-icon { left: 1.6rem; top: 1.6rem; width: 4rem; height: 4rem; font-size: 1.2rem; border-radius: 18px; } .lx-bento-card { padding: 6.4rem 1.6rem 1.8rem; } } .lx-loc-cloud { display: flex; flex-wrap: wrap; gap: 0.35rem 0; } .lx-loc-cloud a { color: var(--text-color); font-size: 0.85rem; text-decoration: none; transition: color 0.25s ease; } .lx-loc-cloud a:hover { color: var(--lx-purple); } .lx-loc-cloud a:not(:last-child)::after { content: "·"; margin: 0 0.55rem; color: var(--lx-purple); opacity: 0.55; } /* ---------------- 17. Footer ---------------- */ .lx-footer-locations { border-top: 1px solid var(--lx-hairline); padding-top: 1.6rem; margin-top: 0.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media (max-width: 767px) { .lx-footer-locations { grid-template-columns: 1fr; } } .lx-footer-locations h4 { font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--lx-purple); margin-bottom: 0.7rem; } /* ---------------- 18. Inner page hero ---------------- */ .lx-inner-hero { position: relative; padding: 11rem 0 5rem 0; overflow: hidden; } .lx-inner-hero .breadcrumb { justify-content: flex-start; } .lx-inner-hero h1 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.12; max-width: 900px; } .lx-inner-hero .lx-hero-sub { max-width: 780px; } /* ---------------- 19. Light-mode contrast repairs ---------------- */ body.lightmode .card, body.lightmode .lx-stat-card, body.lightmode .lx-h3-card, body.lightmode .lx-bento-card { box-shadow: 0 18px 44px -28px rgba(31, 25, 60, 0.30); } body.lightmode .title-heading, body.lightmode h1, body.lightmode h2, body.lightmode h3, body.lightmode h4, body.lightmode h5, body.lightmode h6 { color: var(--primary); } body.lightmode p, body.lightmode .lx-stat-label { color: var(--text-color); } body.lightmode .lx-marquee-item { color: #6A6383; } body.lightmode .breadcrumb .current-page { color: var(--text-color); } body.lightmode .check-list li { color: var(--text-color); } body.lightmode .footer-list a, body.lightmode .contact-list li, body.lightmode .copyright, body.lightmode .legal-link { color: var(--text-color); } /* Footer follows the theme: light plate + dark type in day mode */ body.lightmode .bg-footer { background-image: radial-gradient(at top left, #EDE4FB, #FBFAFD 55%); } body.lightmode footer .lx-wordmark, body.lightmode footer h2, body.lightmode footer h3, body.lightmode footer h4 { color: var(--primary); } body.lightmode footer p, body.lightmode footer .footer-list a, body.lightmode footer .contact-list li, body.lightmode footer .copyright, body.lightmode footer .legal-link, body.lightmode footer .lx-loc-cloud a { color: var(--text-color); } body.lightmode footer .footer-list a:hover, body.lightmode footer .lx-loc-cloud a:hover { color: var(--lx-purple); } body.lightmode footer .social-item { color: var(--primary); } /* ---------------- 20. Reduced motion ---------------- */ @media (prefers-reduced-motion: reduce) { .lx-orb, .lx-marquee-track, .lx-pulse::after, .lx-gradient-text, .lx-wordmark em, .lx-beam::before { animation: none !important; } .lx-word { animation-duration: 0.01s; } .lx-reveal, .lx-wipe { transition: none; opacity: 1; filter: none; transform: none; clip-path: none; } } /* ---------------- 18. Rhythm & alignment pass ---------------- Consolidated spacing/alignment optimization, patterned on current 21st.dev section conventions: fluid section padding, tight eyebrow -> heading -> lead groups, readable lead measure, and a brand CTA band instead of the template's leftover stock-photo banner. Loaded after style.css, so plain rules here override it by order. */ /* Fluid vertical rhythm: 120px on desktop easing to ~72px on phones. Fixed 120px reads as a chasm on a 375px viewport. */ .section { padding: clamp(4.5rem, 4vw + 3rem, 7.5rem) 20px; } .lx-hero-home { padding: clamp(7.5rem, 16vh, 10rem) 0 clamp(3.25rem, 7vh, 5rem) 0; } .lx-inner-hero { padding: clamp(8rem, 15vh, 11rem) 0 clamp(3.25rem, 7vh, 5rem) 0; } .bg-footer { padding-top: clamp(4.5rem, 8vw, 7.5rem); } /* Header groups: the eyebrow belongs to its heading (list-style proximity), so the stack tightens from a uniform 20px to 12px between eyebrow and title. Browsers without :has() simply keep the template's 20px. */ main div.gspace-2:has(> .sub-heading) { gap: 12px 12px; } main div.gspace-2:has(> .sub-heading) > p { margin-top: 6px; } /* Lead paragraphs under section headings: cap at a readable measure (~65ch) instead of 75% of a 1280px container. Headings keep the wide container; only body copy narrows. */ p.heading-container-medium { max-width: min(100%, 46rem); } /* Stat row joins the same 20px gutter grid every other card row uses. */ .lx-stat-row { gap: 1.25rem; } /* Card interiors: one padding family across the board (bento already sits at 2.2-2.4rem). */ .lx-h3-card { padding: 2rem; } /* ---- CTA band: brand panel, not the template's stock-photo banner ---- */ .guide-banner { background-image: radial-gradient(ellipse 60% 90% at 85% 10%, rgba(200, 42, 239, 0.16), transparent 70%), radial-gradient(ellipse 55% 90% at 10% 95%, rgba(79, 70, 229, 0.20), transparent 70%), linear-gradient(120deg, #14101E 0%, #1A1230 55%, #241238 100%); background-attachment: scroll; /* `fixed` janks on scroll + iOS */ padding: clamp(4rem, 7vw, 6.5rem) clamp(1.5rem, 4vw, 4rem); border-color: var(--lx-border-strong); } .guide-banner::before { display: none; } /* old scrim for the stock photo */ .guide-content { max-width: min(100%, 46rem); gap: 1.6rem; } .guide-content h3 { color: #F7F5FC; } .guide-content p { color: rgba(244, 242, 250, 0.78); } body.lightmode .guide-banner { background-image: radial-gradient(ellipse 60% 90% at 85% 10%, rgba(200, 42, 239, 0.10), transparent 70%), radial-gradient(ellipse 55% 90% at 10% 95%, rgba(79, 70, 229, 0.12), transparent 70%), linear-gradient(120deg, #FBFAFE 0%, #F3ECFC 55%, #EADAF9 100%); border-color: rgba(124, 58, 237, 0.22); } body.lightmode .guide-content h3 { color: var(--primary); } body.lightmode .guide-content p { color: var(--text-color); } @media (max-width: 767px) { .guide-content { max-width: 100%; } } /* ---------------- 19. Notch navigation (sticky) ---------------- Ported from a React "adaptive notch navigation bar". Only the CENTER menu is a notch: a dark island carved into the top edge of the viewport, joined to the edge by concave corner fillets. The component draws those fillets as SVG "wings"; here they are radial-gradient pseudo-elements, which need no extra DOM and inherit the notch color for free. The logo and the right-hand controls are deliberately NOT notched, so they carry no island background and follow the page theme. `keep-dark` sits on the menu island itself (not the header) so only that island stays dark in day mode, the way the reference renders dark notches on a light page. */ header.lx-notch { --lx-notch-bg: #0E0B17; --lx-wing: 18px; position: fixed; top: 0; left: 0; right: 0; z-index: 60; } header.lx-notch .navbar-wrapper { padding: 0; } header.lx-notch .navbar { background: transparent; border: none; border-radius: 0; padding: 0; } @media (min-width: 992px) { header.lx-notch .navbar-container { position: relative; align-items: flex-start; } /* ---- Logo: no island. A soft, theme-aware plate keeps the wordmark legible while it floats over whatever scrolls beneath it. ---- */ /* Logo sits in a pill that matches the Free Audit button: same surface, radius, accent border and purple glow, reusing the button's own tokens so the two stay in sync if the theme changes. */ header.lx-notch .logo-container-header { display: flex; align-items: center; align-self: center; margin: 12px 0 0 30px; padding: 8px 22px; border-radius: 100px; background-color: var(--accent-color-4); box-shadow: var(--box-shadow-top-left); transition: box-shadow 0.6s, transform 0.35s ease; } body.lightmode header.lx-notch .logo-container-header { border: 1px solid var(--accent-color); } header.lx-notch .logo-container-header:hover { box-shadow: var(--box-shadow-top-left-wide); } /* ---- Center menu: the notch. ---- */ header.lx-notch .navbar-collapse { position: absolute; left: 50%; top: 0; transform: translateX(-50%); flex: none; width: auto; min-width: 0; background: var(--lx-notch-bg); height: 66px; display: flex; align-items: center; padding: 0 20px; border-radius: 0 0 26px 26px; } header.lx-notch .navbar-collapse::before { content: ""; position: absolute; right: 100%; top: 0; width: var(--lx-wing); height: var(--lx-wing); background: radial-gradient(circle at 0 100%, transparent calc(var(--lx-wing) - 0.5px), var(--lx-notch-bg) var(--lx-wing)); } header.lx-notch .navbar-collapse::after { content: ""; position: absolute; left: 100%; top: 0; width: var(--lx-wing); height: var(--lx-wing); background: radial-gradient(circle at 100% 100%, transparent calc(var(--lx-wing) - 0.5px), var(--lx-notch-bg) var(--lx-wing)); } /* Dropdown panels hang off a taller bar now; close the hover gap. */ header.lx-notch .lx-hover-drop::after { height: 26px; } /* ---- Right controls: no island either. The toggle and the CTA already carry their own shapes, so they only need breathing room. ---- */ header.lx-notch .navbar-action-container { height: 66px; margin-right: 30px; padding: 0; } } /* The menu island keeps night styling in BOTH modes by design (the user's call: the dark notch is part of the brand look, like the dark hero plate). `keep-dark` on the markup re-points the template tokens; these are the Leadnox brand-layer tokens it does not know about, so the pill, dropdown panels and hairlines inside the island stay correct in day mode. */ body.lightmode header.lx-notch .navbar-collapse { --lx-surface: rgba(255, 255, 255, 0.045); --lx-border: rgba(255, 255, 255, 0.10); --lx-border-strong: rgba(200, 42, 239, 0.42); --lx-glow-tint: rgba(200, 42, 239, 0.16); --lx-panel-blur: rgba(10, 8, 14, 0.97); --lx-hairline: rgba(255, 255, 255, 0.07); --lx-card-bg: #100E18; --lx-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.9); } /* Mobile / tablet: the site map lives in the slide-in sidebar, so there is no notch to draw. The bar returns to the template's floating rounded style, still fixed to the top. */ @media (max-width: 991px) { header.lx-notch .navbar-wrapper { padding: 14px 16px 0; } header.lx-notch .navbar { background: var(--lx-card-bg); border: 1px solid var(--lx-border); border-radius: 22px; padding: 10px 18px; } /* The sidebar must stack above the fixed bar. */ aside { z-index: 70; } } /* ---------------- 20. Alignment & breathing room ---------------- One gutter for every full-width band, so panel edges and section content land on the same vertical axis. Auditing services.html found four different gutters on a single page (0, 20px, 42px, 45px), which is what made the page read as misaligned. */ :root { --lx-gutter: clamp(1.25rem, 3vw, 2.5rem); } .section, .section-guide, .section-footer, .section-banner, .section-partner { padding-left: var(--lx-gutter); padding-right: var(--lx-gutter); } .lx-hero-home .hero-container, .lx-inner-hero .hero-container { padding-left: var(--lx-gutter); padding-right: var(--lx-gutter); } /* Panels that sit inside an already-guttered band must not add a second one. */ .guide-banner > .hero-container, .bg-footer > .hero-container { padding-left: 0; padding-right: 0; } /* ---- Body copy: 18px with no declared line-height inherits a ~1.2 default, which is what made paragraphs feel cramped. ---- */ p { line-height: 1.75; } .lx-prose p, .check-list li, .lx-h3-card p, .card p { line-height: 1.75; } .check-list li { margin-bottom: 0.65rem; } h1, h2, h3, h4, .title-heading { text-wrap: balance; } p { text-wrap: pretty; } /* ---- CTA band: the copy was capped at 46rem inside a full-width panel, leaving the right half empty. Side by side on wide screens instead. ---- */ @media (min-width: 992px) { .guide-content { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(2rem, 5vw, 4.5rem); max-width: 100%; } .guide-content > .d-flex.flex-column { max-width: 44rem; } .guide-content > .d-flex.align-items-center { flex: none; } } /* ---- The notch nav is transparent between its islands, so page content scrolled visibly through the gaps and collided with the menu. A soft scrim mutes what passes underneath without filling the gaps in. ---- */ header.lx-notch::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 118px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, var(--secondary) 42%, transparent 100%); } /* Anchor jumps must clear the fixed nav. */ html { scroll-padding-top: 7rem; } @media (max-width: 991px) { header.lx-notch::before { height: 96px; } } /* Blog post byline strip. */ .lx-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--lx-hairline); font-size: 0.9rem; color: var(--text-color); } .lx-post-meta i { margin-right: 0.4rem; } /* ---------------- 21. Blog listing (BLOG-SYSTEM-GUIDE.md §3) ---------------- Tokens taken from the guide. Cards carry NO photographs by design: the thumbnail is a CSS gradient with a text label, which keeps the listing fast and on-brand. Colours are mapped onto the theme tokens so the grid works in both day and night. */ .blog-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 48px; } .blog-filter-pill { padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; border: 2px solid var(--lx-border); background: var(--lx-card-bg); color: var(--text-color); cursor: pointer; transition: all 0.2s; } .blog-filter-pill:hover { border-color: var(--lx-border-strong); color: var(--primary); } .blog-filter-pill.active { background: var(--lx-gradient); border-color: transparent; color: #fff; } .blog-filter-pill:focus-visible { outline: 2px solid var(--lx-purple); outline-offset: 3px; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 64px; } @media (max-width: 991px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { background: var(--lx-card-bg); border-radius: 20px; overflow: hidden; border: 1px solid var(--lx-border); display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s, opacity .2s; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--lx-shadow); border-color: var(--lx-border-strong); } /* The card thumb is the post's own photograph. It used to be a gradient plate with the headline printed on it, which repeated the title sitting directly underneath it. */ .blog-card-thumb { height: 200px; overflow: hidden; background: var(--lx-surface); } .blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(0.22, 0.68, 0.24, 1); } .blog-card:hover .blog-card-thumb img { transform: scale(1.045); } .blog-card-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; flex: 1; } .blog-card-meta { display: flex; align-items: center; gap: 12px; } .blog-cat-pill { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; } .pill-ads { background: rgba(124, 92, 245, 0.16); color: #a78bfa; } .pill-seo { background: rgba(16, 185, 129, 0.16); color: #34d399; } .pill-ai { background: rgba(249, 115, 22, 0.16); color: #fb923c; } .pill-strategy { background: rgba(56, 189, 248, 0.16); color: #38bdf8; } .pill-social { background: rgba(34, 197, 94, 0.16); color: #4ade80; } body.lightmode .pill-ads { background: rgba(124, 92, 245, 0.12); color: #6d3fe0; } body.lightmode .pill-seo { background: rgba(16, 185, 129, 0.12); color: #0f7a5a; } body.lightmode .pill-ai { background: rgba(249, 115, 22, 0.12); color: #b45309; } body.lightmode .pill-strategy { background: rgba(56, 189, 248, 0.14); color: #0369a1; } body.lightmode .pill-social { background: rgba(34, 197, 94, 0.14); color: #15803d; } .blog-read-time { font-size: 12px; color: var(--text-color); } .blog-card-title { font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--primary); text-decoration: none; transition: color .25s ease; } .blog-card-title:hover { color: var(--lx-purple); } .blog-card-excerpt { font-size: 14.5px; line-height: 1.7; color: var(--text-color); margin: 0; } .blog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--lx-hairline); } .blog-author { font-size: 13px; color: var(--text-color); } .blog-read-link { font-size: 13px; font-weight: 700; color: var(--lx-purple); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .blog-read-link i { font-size: 11px; transition: transform .25s ease; } .blog-read-link:hover i { transform: translateX(3px); } /* Content pillars */ .pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } @media (max-width: 767px) { .pillar-grid { grid-template-columns: 1fr; } } .pillar-card { border-radius: 20px; padding: 2rem; border: 1px solid var(--lx-border); } .pillar-card.dark { background: linear-gradient(150deg, #14101E 0%, #241238 100%); } .pillar-card.light { background: var(--lx-card-bg); } .pillar-card.dark h3 { color: #fff; } .pillar-card h3 { margin: 0 0 1.1rem; font-size: 1.3rem; color: var(--primary); } .pillar-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pillar-topic-tag { font-size: 0.8rem; padding: 0.4rem 0.85rem; border-radius: 100px; border: 1px solid var(--lx-border); color: var(--text-color); } .pillar-card.dark .pillar-topic-tag { border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.82); } /* Ported post pages carry their own