/* ============================================================
ls-system.css — Leads-Sniper "neo-brutalist sticker-card" SKIN
for Javed IT Solution. Loaded LAST (overrides style.css etc.).
Strategy: re-point the existing design tokens (light theme only)
+ add signature component chrome. Content / JS / structure untouched.
Dark & hacker themes keep their own look (phase 2).
============================================================ */
/* ---------- Bengali numerals: Sabbir Sorolota (digits + ৳ only) ---------- */
@font-face{
font-family:'Sabbir Sorolota';
src:url('assets/fonts/SabbirSorolota-num.woff2') format('woff2');
unicode-range:U+09E6-09EF,U+09F2-09F3,U+09F9;
font-weight:400 900; font-display:swap;
}
/* ---------- Global flat rules (all themes — neo-brutalist has no blur) ---------- */
.navbar,.glass-card,.hero,.about,.contact,*{
/* kill frosted glass everywhere */
}
*{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
:where(svg){ width:1em; height:1em; flex:0 0 auto; }
/* ---------- Lenis smooth-scroll base (required) ---------- */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
/* ============================================================
LIGHT THEME re-skin (guarded so dark/hacker stay intact)
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* ---- TOKEN RE-POINT (propagates through ~1100 var() usages) ---- */
--color-accent:#297acc;
--color-accent-hover:#090a0a;
--color-accent-light:#c8e1fa;
--color-accent-glow:#befabe;
--color-bg-primary:#ffffff;
--color-bg-secondary:#ffffff;
--color-bg-tertiary:#f3f6f3;
--color-text-primary:#090a0a;
--color-text-secondary:#3e4042;
--color-text-tertiary:#787c7f;
--color-text-inverse:#ffffff;
/* glass tokens -> solid sticker surface */
--glass-bg:#ffffff;
--glass-bg-hover:#ffffff;
--glass-border:#090a0a; /* used as a COLOR -> black hairline */
--glass-blur:none;
--glass-shadow:4px 4px 0 0 #090a0a;
--glass-shadow-elevated:8px 8px 0 0 #090a0a;
--glass-radius:1.5rem;
--glass-radius-lg:1.5rem;
--glass-radius-pill:1.875rem;
/* typography: Bengali (Hind Siliguri) + Poppins Latin + Sabbir digits */
--font-primary:'Sabbir Sorolota','Poppins','Hind Siliguri','Noto Sans Bengali',sans-serif;
--font-bangla:'Sabbir Sorolota','Hind Siliguri','Poppins','Noto Sans Bengali',sans-serif;
/* neutralise negative tracking (breaks Bengali matra) */
--ls-tighter:0; --ls-tight:0; --ls-normal:0;
--lh-heading:1.25; --lh-bangla:1.7;
/* one site easing (easeOutQuad) */
--ease-default:cubic-bezier(.25,.46,.45,.94);
--ease-smooth:cubic-bezier(.25,.46,.45,.94);
/* pastel accent set */
--p-green:#befabe; --p-blue:#c8e1fa; --p-purple:#f0d1ff; --p-orange:#ffd6c2; --p-yellow:#fff1b8;
}
/* everything below is light-theme only */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
& body{ color:#3e4042; background:#fff; }
& h1,& h2,& h3,& h4,& h5,& h6{ color:#090a0a; font-weight:700; letter-spacing:0; }
& strong{ color:#090a0a; font-weight:600; }
& a{ color:#297acc; } & a:hover{ color:#090a0a; }
/* numerals helper */
& .bn-num,& .about__stat-number,& .service-card__price,& .testimonial-card__stars,
& .sp-price-card__price,& .sp-sidebar__price-highlight{ font-family:var(--font-num,'Sabbir Sorolota','Hind Siliguri',sans-serif); }
/* ---------- NAVBAR -> floating white pill ---------- */
& .navbar{
position:fixed; top:1.25rem; left:50%; transform:translateX(-50%);
width:calc(100% - 1.5rem); max-width:1224px; z-index:300 !important;
background:#fff !important; border:1px solid #090a0a !important;
border-radius:2.25rem !important; box-shadow:4px 4px 0 0 #090a0a !important;
padding:.55rem .9rem !important;
}
& .navbar.is-scrolled{ box-shadow:4px 4px 0 0 #090a0a !important; background:#fff !important; }
/* ALWAYS visible — never hide on scroll (leads-sniper keeps the pill nav pinned) */
& .navbar.is-hidden{ transform:translateX(-50%) translateY(0) !important; }
& .navbar__link,& .navbar__links a{ color:#090a0a; font-weight:600; }
& .navbar__link:hover{ color:#090a0a; opacity:.55; }
/* mega dropdown -> bordered white card with pastel tiles */
& .navbar__dropdown,& #services-mega-dropdown,& .mega-dropdown{
background:#fff !important; border:1px solid #090a0a !important;
border-radius:1.25rem !important; box-shadow:8px 8px 0 0 #090a0a !important;
}
& .mobile-menu__panel,& .mobile-menu{ background:#fff !important; }
/* ---------- BUTTONS ---------- */
& .btn{ border-radius:1.875rem !important; font-weight:600; letter-spacing:0;
transition:background-color .2s var(--ease-default),color .2s var(--ease-default),
box-shadow .2s var(--ease-default),transform .2s var(--ease-default); }
& .btn--primary,& .magnetic-btn.btn--primary{
background:#090a0a !important; color:#fff !important; border:1px solid #090a0a !important; }
& .btn--primary:hover{ background:#fff !important; color:#090a0a !important; }
& .btn--secondary,& .btn--ghost{
background:#fff !important; color:#090a0a !important; border:1px solid #090a0a !important; box-shadow:none !important; }
& .btn--secondary:hover,& .btn--ghost:hover{ background:#090a0a !important; color:#fff !important; }
& .btn--small,& .btn--sm{ padding:.55rem 1.1rem !important; }
/* ---------- CARDS (generic glass card -> sticker) ---------- */
& .glass-card{
background:#fff !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:4px 4px 0 0 #090a0a !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
& .glass-card:hover{ box-shadow:8px 8px 0 0 #090a0a !important; transform:translate(-2px,-2px); }
/* ---------- HERO -> mint panel, no animated gradient/blobs ---------- */
& .hero{ background:#befabe !important; min-height:100svh; position:relative;
border-radius:0 0 1.5rem 1.5rem; overflow:hidden; }
& .hero__gradient,& .hero__blob,& .hero__blob--1,& .hero__blob--2,& .hero__blob--3{ display:none !important; }
& .hero__heading,& .hero h1{ color:#090a0a !important; -webkit-text-fill-color:#090a0a !important;
background:none !important; font-weight:700; }
& .hero__heading .gradient-text,& .hero__heading [class*="gradient"]{
background:none !important; -webkit-text-fill-color:#090a0a !important; color:#090a0a !important; }
& .hero__description,& .hero__subtitle{ color:#1f2421 !important; }
/* wave dividers / decorative blobs off (flat panels instead) */
& .wave-divider,& .about__decor,& .about__decor-blob,& .contact__decor,& .contact__decor-blob,
& [class*="decor-blob"]{ display:none !important; }
/* ---------- ABOUT photo: flat black frame, kill ring/glow ---------- */
& .about__photo,& .about__photo-wrapper{
background:#fff !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:4px 4px 0 0 #090a0a !important; padding:0 !important; }
& .about__photo-wrapper::before,& .about__photo-wrapper::after,
& .about__photo::before,& .about__photo::after{ display:none !important; }
& .about__profile-card{ background:#befabe !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:4px 4px 0 0 #090a0a !important; }
& .about__highlight{ background:#fff !important; border:1px solid #090a0a !important;
border-radius:1rem !important; box-shadow:2px 2px 0 0 #090a0a !important; }
& .about__status-dot{ background:#00b94a !important; }
/* ---------- SERVICE CARDS (17) — pastel rotation + sticker ---------- */
& .service-card{
background:#befabe !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:4px 4px 0 0 #090a0a !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important;
transition:box-shadow .2s var(--ease-default),transform .2s var(--ease-default); }
& .service-card:hover{ box-shadow:8px 8px 0 0 #090a0a !important; transform:translate(-2px,-2px); }
& .service-card:nth-child(5n+2){ background:#c8e1fa !important; }
& .service-card:nth-child(5n+3){ background:#f0d1ff !important; }
& .service-card:nth-child(5n+4){ background:#ffd6c2 !important; }
& .service-card:nth-child(5n+5){ background:#fff1b8 !important; }
& .service-card__icon{ background:#fff !important; border:1px solid #090a0a !important;
border-radius:50% !important; box-shadow:2px 2px 0 0 #090a0a !important; }
& .service-card__title{ color:#090a0a !important; }
/* ---------- TESTIMONIAL CARDS (11) ---------- */
& .testimonial-card{
background:#fff !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:4px 4px 0 0 #090a0a !important; }
& .testimonial-card__glow{ display:none !important; }
& .testimonial-card__stars{ color:#090a0a !important; }
/* ---------- FORMS (mail-window) ---------- */
/* Only the OUTER mail-window / sidebar cards get the neubrutalist card border.
The inner .contact__form (.mail-body) is the body of the mail-window — it must
NOT get its own nested border/offset-shadow (that was the "broken email preview"). */
& .contact .glass-card{ background:#fff !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:8px 8px 0 0 #090a0a !important; }
& .contact__form.mail-body{ background:transparent !important; border:none !important;
border-radius:0 !important; box-shadow:none !important; }
/* skin form fields — but NEVER the inline .mail-subject-input (it stays borderless) */
& input:not(.mail-subject-input),& textarea,& select{ border:1px solid #c6c9cc !important; border-radius:.5rem !important; background:#fff !important; }
& input:not(.mail-subject-input):focus,& textarea:focus,& select:focus{ border-color:#090a0a !important; }
/* ---------- BADGES / EYEBROWS / PILLS ---------- */
& .section-label,& .about__badge,& [class*="eyebrow"],& .badge{
background:#f0d1ff !important; color:#090a0a !important; border:1px solid #090a0a !important;
border-radius:2rem !important; font-weight:600; box-shadow:2px 2px 0 0 #090a0a !important; }
/* ---------- FOOTER -> black rounded panel ---------- */
& .footer{ background:#090a0a !important; color:#c6c9cc !important; border-radius:1.5rem;
margin:.5rem; }
& .footer h1,& .footer h2,& .footer h3,& .footer h4{ color:#fff !important; }
& .footer a,& .footer__link{ color:#c6c9cc !important; }
& .footer a:hover,& .footer__link:hover{ color:#befabe !important; opacity:1; }
/* developer credit */
& .ls-dev-credit{ text-align:center; color:#c6c9cc; font-size:.8125rem; padding:.75rem 0 0; }
& .ls-dev-credit a{ color:#c6c9cc; font-weight:600; }
& .ls-dev-credit a:hover{ color:#befabe; }
/* ============================================================
SERVICE PAGES (sp-* ) signature skin
============================================================ */
/* the WHOLE first screen (behind fixed navbar → breadcrumb → hero) is ONE
mint panel, rounded at the bottom — identical to the home page .hero. */
& .sp-herowrap{ background:#befabe !important; border-radius:0 0 1.5rem 1.5rem; }
& .sp-hero{ background:transparent !important; }
& .sp-hero__gradient{ display:none !important; }
& .sp-hero__title{ color:#090a0a !important; -webkit-text-fill-color:#090a0a !important; background:none !important; }
& .sp-hero__icon{ background:#fff !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:4px 4px 0 0 #090a0a !important; }
& .sp-breadcrumb{ border:1px solid #090a0a; border-radius:99px; box-shadow:2px 2px 0 0 #090a0a;
display:inline-flex; background:#fff; }
& .sp-problem,& .sp-solution,& .sp-section,& .sp-price-card,& .sp-sidebar__card,
& .sp-related-card,& .sp-cta-block{
background:#fff !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:4px 4px 0 0 #090a0a !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
& .sp-price-card--popular{ background:#befabe !important; box-shadow:8px 8px 0 0 #090a0a !important; }
& .sp-price-card__badge,& .sp-price-card__badge--popular{ background:#090a0a !important; color:#fff !important;
border-radius:1.5rem !important; }
& .sp-step__num{ background:#090a0a !important; color:#fff !important; border-radius:50% !important;
font-family:var(--font-num,'Sabbir Sorolota',sans-serif); }
& .sp-audience__tag{ background:#fff1b8 !important; border:1px solid #090a0a !important;
border-radius:99px !important; color:#090a0a !important; }
& .sp-faq__item{ background:#befabe !important; border:1px solid #090a0a !important;
border-radius:1rem !important; box-shadow:4px 4px 0 0 #090a0a !important; }
& .sp-related-card:hover{ box-shadow:8px 8px 0 0 #090a0a !important; transform:translate(-2px,-2px); }
& .sp-sticky-cta{ background:#090a0a !important; border:1px solid #090a0a; }
}
/* hover lifts also under reduced specificity for buttons w/ shadow */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .service-card,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .glass-card{ will-change:transform; }
/* ============================================================
PASS 2 — refinements
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* flatten every gradient / shimmer heading to flat ink (leads-sniper = flat) */
& .shimmer-text,& .section-heading,& .apple-display,& .gradient-text,
& [class*="gradient-text"],& [class*="shimmer"],& .hero__heading,
& .trust-stat__number,& .stat__number,& .about__stat-number,& [class*="stat__number"]{
background:none !important; background-image:none !important;
-webkit-text-fill-color:#090a0a !important; color:#090a0a !important;
-webkit-background-clip:border-box !important; background-clip:border-box !important;
animation:none !important; }
/* navbar CTA -> black pill (was accent blue) */
& .navbar__cta{ background:#090a0a !important; color:#fff !important;
border:1px solid #090a0a !important; border-radius:1.875rem !important; box-shadow:none !important; }
& .navbar__cta:hover{ background:#fff !important; color:#090a0a !important; }
/* buttons: flat, no glow */
& .btn,& .magnetic-btn{ box-shadow:none !important; }
& .btn--primary:hover{ box-shadow:none !important; }
/* services grid: 3-col desktop */
& .services__grid{ grid-template-columns:repeat(3,1fr) !important; gap:1.5rem !important; }
/* text sub-headings/descriptions: strip accidental black border+box from token re-point */
& .section-subheading,& .section-subhead,& .apple-subhead,& .hero__description,
& .services__subtitle,& .about__subtitle,& .leadership__subtitle,& .contact__subtitle,
& .testimonials__subtitle,& p.section-subtitle{
border:none !important; box-shadow:none !important; background:transparent !important; }
}
/* ============================================================
PASS 3 — footer + decorative cleanup
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* kill all decorative gradient/mesh/glow layers */
& .footer__glow-blobs,& .pre-footer-cta__mesh,& .leadership__decor,
& .footer__divider-animated,& [class*="__mesh"],& [class*="glow-blob"],
& [class*="__aurora"],& [class*="__orb"],& [class*="__decor"],
& [class*="__glow"],& [class*="__blob"],& .hero__gradient{ display:none !important; }
/* footer -> flat black rounded floating panel */
& .footer,& .footer.premium-footer{ background:#090a0a !important; background-image:none !important;
border-radius:1.5rem !important; margin:.5rem !important; overflow:hidden; }
& .footer__heading,& .footer__logo-text{ color:#fff !important; }
& .footer__tagline,& .footer__newsletter-desc,& .footer__nav-list a,& .footer__contact-list{ color:#c6c9cc !important; }
& .footer__nav-list a:hover{ color:#befabe !important; }
& .footer__social-icon{ background:#1b211b !important; border:1px solid #ffffff33 !important; color:#fff !important; }
& .footer__newsletter-input{ background:#1b211b !important; border:1px solid #ffffff33 !important; color:#fff !important; }
& .footer__newsletter-btn{ background:#befabe !important; color:#090a0a !important; border:1px solid #090a0a !important; }
/* pre-footer CTA -> mint sticker banner */
& .pre-footer-cta{ background:#befabe !important; background-image:none !important;
border:1px solid #090a0a !important; border-radius:1.5rem !important; box-shadow:8px 8px 0 0 #090a0a !important; }
& .pre-footer-cta h2,& .pre-footer-cta h3,& .pre-footer-cta__text,
& .pre-footer-cta__content,& .pre-footer-cta__content *{ color:#090a0a !important; -webkit-text-fill-color:#090a0a !important; }
& .pre-footer-cta__icon{ background:#fff !important; border:1px solid #090a0a !important; color:#090a0a !important; box-shadow:2px 2px 0 0 #090a0a !important; }
& .pre-footer-cta .btn--primary{ background:#090a0a !important; border:1px solid #090a0a !important; }
& .pre-footer-cta .btn--primary,& .pre-footer-cta .btn--primary *{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
}
/* responsive grids (mobile 2-col, never single) */
@media(max-width:991px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .services__grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:560px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .services__grid{ grid-template-columns:repeat(2,1fr) !important; gap:1rem !important; }
}
/* ============================================================
PASS 4 — viewport balance + specific bug fixes
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* ---- HERO: center content in one viewport (no top-heavy / empty bottom) ---- */
& .hero{ display:flex !important; flex-direction:column !important;
align-items:center !important; justify-content:center !important; text-align:center !important;
min-height:100svh; position:relative; padding:7.5rem 1.5rem 5rem !important; }
& .hero__container{ margin:auto 0 !important; max-width:920px; width:100%;
display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
& .hero__ctas{ justify-content:center; }
& .hero__scroll-indicator{ position:absolute !important; bottom:1.4rem; left:50% !important;
transform:translateX(-50%) !important; margin:0 !important; }
/* ---- NAVBAR hover = leads-sniper authentic: simple opacity fade to .5 (no pill, no underline) ---- */
& .navbar__links > li > .navbar__link{
background:transparent !important; border-radius:0 !important;
transition:opacity .2s var(--ease-default) !important; }
& .navbar__links > li > .navbar__link:hover{
opacity:.5 !important; background:transparent !important; color:#090a0a !important; }
& .navbar__link::after{ display:none !important; } /* kill old underline accent */
/* ---- LEADERSHIP / Founder's message ---- */
/* kill ring around photo + corner radial glows */
& .founder-msg__photo-frame{ border:1px solid #090a0a !important; border-radius:1.25rem !important;
box-shadow:4px 4px 0 0 #090a0a !important; padding:0 !important; }
& .founder-msg__photo-frame::before,& .founder-msg__corner{ display:none !important; }
& .founder-msg__card{ border-radius:1.5rem !important; box-shadow:4px 4px 0 0 #090a0a !important;
border:1px solid #090a0a !important; }
& .founder-msg__quote{ color:#bcdfbc !important; }
& .founder-msg__role{ color:#787c7f !important; }
& .founder-msg__sign-name,& .founder-msg__text .accent{ color:#090a0a !important; }
& .founder-msg__verify{ background:#fff1b8 !important; border:1px solid #090a0a !important; color:#090a0a !important; }
/* the 3 action buttons -> consistent neo-brutalist pills */
& .founder-msg__actions{ gap:.75rem !important; }
& .founder-msg__btn{ border:1px solid #090a0a !important; border-radius:1.875rem !important;
box-shadow:none !important; font-weight:600 !important; padding:.7rem 1.4rem !important;
transition:background-color .2s var(--ease-default),color .2s var(--ease-default),
box-shadow .2s var(--ease-default),transform .2s var(--ease-default) !important; }
& .founder-msg__btn--call{ background:#090a0a !important; color:#fff !important; }
& .founder-msg__btn--wa{ background:#befabe !important; color:#090a0a !important; }
& .founder-msg__btn--mail{ background:#fff !important; color:#090a0a !important; }
& .founder-msg__btn:hover{ transform:translate(-2px,-2px) !important; box-shadow:3px 3px 0 0 #090a0a !important; }
& .founder-msg__btn--call:hover{ background:#fff !important; color:#090a0a !important; }
& .founder-msg__btn--wa:hover,& .founder-msg__btn--mail:hover{ background:#090a0a !important; color:#fff !important; }
/* ---- CONTACT: stop boxes from colliding (offset shadows need clearance) ---- */
& .contact__grid{ gap:2.25rem !important; align-items:start !important; }
& .contact__info-card,& .contact__social,& .contact__trust-badges,
& .response-time__inner,& .contact__form-wrap{ margin-bottom:1.75rem !important; }
& .contact__info-card,& .contact__social,& .contact__trust-badges{
border:1px solid #090a0a !important; border-radius:1.5rem !important;
box-shadow:4px 4px 0 0 #090a0a !important; background:#fff !important; }
& .response-time__inner{ border:1px solid #090a0a !important; border-radius:99px !important;
box-shadow:2px 2px 0 0 #090a0a !important; display:inline-flex; background:#fff1b8 !important; }
& .mail-window__shimmer{ display:none !important; }
}
/* ============================================================
PASS 5 — SIGNATURE SCROLL: sticky-stacking service cards
(leads-sniper effect: each card pins, the next scrolls up and
covers it — pure CSS position:sticky, all same top)
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* ancestors must not clip sticky */
& .services,& .services__grid,& .services__container,& .container{ overflow:visible !important; }
/* grid container -> vertical flow of sticky ROWS (3-col kept inside each row) */
& .services__grid{
display:block !important; grid-template-columns:none !important; gap:0 !important;
max-width:1180px !important; margin-left:auto !important; margin-right:auto !important;
}
/* fallback before ls-motion.js wraps rows (or if JS off): plain 3-col grid */
& .services__grid:not([data-stacked]){
display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:1.5rem !important;
}
/* each row = a sticky 3-col band that opaquely covers the row beneath it */
& .svc-row{
position:sticky !important; top:6.25rem;
display:grid !important; grid-template-columns:repeat(3,1fr); gap:1.5rem;
background:#ffffff; padding:1.25rem 0 1.5rem;
}
& .svc-row > .service-card{ position:static !important; margin:0 !important; height:100%; }
}
/* mobile: dissolve rows -> uniform 2-col grid, sticky OFF */
@media(max-width:991px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .services__grid{
display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:1rem !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .svc-row{ display:contents !important; }
}
/* ============================================================
PASS 6 — exact leads-sniper hovers + mega-dropdown fix
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* CARD HOVER = subtle lift only. !important defeats the JS 3D-tilt inline transform. */
& .glass-card,& .service-card,& .testimonial-card{
transition:box-shadow .2s var(--ease-default),transform .2s var(--ease-default) !important; }
/* leads-sniper authentic: card does NOT move; only the hard offset shadow grows */
& .glass-card:hover,& .service-card:hover,& .testimonial-card:hover{
transform:none !important; box-shadow:8px 8px 0 0 #090a0a !important; }
& .service-card:hover .service-card__icon{ transform:none !important; } /* no -3deg rotate */
/* MEGA-DROPDOWN: outer = full-screen overlay -> MUST stay transparent (was wrongly white) */
& #services-mega-dropdown,& .services-mega-dropdown{
background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; }
& .services-mega-dropdown__backdrop{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; pointer-events:none !important; }
/* the actual card = __container */
& .services-mega-dropdown__container{
background:#ffffff !important; border:1px solid #090a0a !important;
border-radius:1.5rem !important; box-shadow:8px 8px 0 0 #090a0a !important; }
/* dropdown items: clean mint hover, sticker icon chip; NO pill-padding from nav rule */
& .smd-item{ border-radius:.9rem !important; transition:background-color .2s var(--ease-default) !important; }
& .smd-item:hover{ background:#eafbea !important; }
& .smd-item [class*="icon"]{ border:1px solid #090a0a !important; border-radius:.7rem !important;
box-shadow:2px 2px 0 0 #090a0a !important; background:#fff !important; }
}
/* ============================================================
PASS 7 — deck depth on sticky rows (scroll-driven) + Lottie band
============================================================ */
@supports (animation-timeline: view()){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .svc-row{
animation: jit-row-stack linear both;
animation-timeline: view();
animation-range: exit 8% exit 92%;
transform-origin: 50% 0%;
}
@keyframes jit-row-stack{
to{ transform: scale(.95) translateY(-8px); filter: brightness(.96); }
}
}
@media(max-width:991px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .svc-row{ animation:none !important; }
}
/* ---- Lottie capability band (leads-sniper-style animated objects) ---- */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
& .ls-cap{ padding:clamp(3rem,6vw,5rem) 1.5rem; }
& .ls-cap__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
max-width:1180px; margin:1.5rem auto 0; }
& .ls-cap__card{ background:#fff; border:1px solid #090a0a; border-radius:1.5rem;
box-shadow:4px 4px 0 0 #090a0a; padding:1.5rem 1.25rem; text-align:center;
transition:box-shadow .2s var(--ease-default); }
& .ls-cap__card:hover{ box-shadow:8px 8px 0 0 #090a0a; }
& .ls-cap__card:nth-child(2){ background:#c8e1fa; }
& .ls-cap__card:nth-child(3){ background:#f0d1ff; }
& .ls-cap__card:nth-child(4){ background:#ffd6c2; }
& .ls-cap__card:nth-child(1){ background:#befabe; }
& .ls-lottie{ width:100%; max-width:160px; aspect-ratio:1; margin:0 auto .75rem;
background:#fff; border:1px solid #090a0a; border-radius:1rem; box-shadow:2px 2px 0 0 #090a0a; }
& .ls-cap__title{ font-weight:700; color:#090a0a; font-size:1.05rem; margin:.25rem 0; }
& .ls-cap__desc{ color:#3e4042; font-size:.9rem; line-height:1.5; }
}
@media(max-width:991px){ :root:not([data-theme="_x1"]):not([data-theme="_x2"]) .ls-cap__grid{ grid-template-columns:repeat(2,1fr) !important; } }
/* ============================================================
PASS 8 — SERVICES = leads-sniper FULL-SCREEN product stack
Each .ls-product = a 100vh sticky "slide"; inner .ls-product__card
= the pastel box. As the next slide scrolls up to cover the current,
GSAP (ls-motion.js) scales the covered card to .8 + fades it — the
exact leads-sniper IX2 stacking effect. Kept ON for mobile too.
============================================================ */
.ls-products{ max-width:none; margin:0; padding:0 .5rem; } /* near-full viewport width (leads-sniper) */
/* let the card stack span nearly the full viewport; keep the section HEADER centered */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .services{ padding-left:.25rem !important; padding-right:.25rem !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .services__header{ max-width:920px; margin-left:auto !important; margin-right:auto !important; padding-left:1rem; padding-right:1rem; }
.ls-product{ height:100vh; min-height:560px; position:sticky; top:0;
/* clear the floating pill navbar + leave a small breathing gap below it,
and trim the card a touch so it never tucks under the nav */
padding-top:6.75rem; padding-bottom:1.25rem; display:flex; align-items:stretch; }
.ls-product__card{ width:100%; height:100%; background:#befabe; border:1px solid #090a0a;
border-radius:1.5rem; box-shadow:4px 4px 0 0 #090a0a;
padding:clamp(1.5rem,3vh,3rem) clamp(1.75rem,5vw,5.5rem); display:grid;
grid-template-columns:1.05fr .95fr; gap:clamp(1.75rem,5vw,6rem);
align-items:center; align-content:center; transform-origin:50% 42%;
will-change:transform,opacity; }
.ls-product:nth-child(6n+2) .ls-product__card{ background:#c8e1fa; }
.ls-product:nth-child(6n+3) .ls-product__card{ background:#ffd6c2; }
.ls-product:nth-child(6n+4) .ls-product__card{ background:#fff1b8; }
.ls-product:nth-child(6n+5) .ls-product__card{ background:#f0d1ff; }
.ls-product:nth-child(6n+6) .ls-product__card{ background:#d7f5df; }
.ls-product__visual{ background:#fff; border:1px solid #090a0a; border-radius:1rem;
box-shadow:2px 2px 0 0 #090a0a; padding:clamp(1rem,2vh,1.75rem) clamp(1.25rem,2.5vw,2rem);
display:flex; align-items:center; justify-content:center; align-self:center; }
.ls-product__visual svg{ width:100%; height:auto; max-height:min(46vh,430px); display:block; }
.ls-product__body{ align-self:center; }
.ls-product__icon{ width:5rem; height:5rem; background:#fff; border:1px solid #090a0a;
border-radius:50%; box-shadow:4px 4px 0 0 #090a0a; display:grid; place-items:center; margin-bottom:1.25rem; }
.ls-product__icon svg{ width:2.2rem; height:2.2rem; color:#090a0a; }
.ls-product__title{ font-size:clamp(1.6rem,3vw,2.5rem); font-weight:700; color:#090a0a; margin:0 0 .7rem; line-height:1.25; }
.ls-product__desc{ color:#3e4042; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.6; margin:0 0 1.25rem; max-width:52ch; }
.ls-product__meta{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.ls-product__meta:empty{ display:none; }
.ls-product__price{ font-family:'Sabbir Sorolota','Hind Siliguri',sans-serif; font-weight:700; color:#090a0a; font-size:1.3rem; }
.ls-product__tag{ background:#fff; border:1px solid #090a0a; border-radius:99px; padding:.3rem 1rem; font-size:.85rem; font-weight:600; color:#090a0a; box-shadow:2px 2px 0 0 #090a0a; }
.ls-product__ctas{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.ls-product__link{ color:#090a0a !important; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .2rem; position:relative;
transition:color .2s cubic-bezier(.25,.46,.45,.94); }
/* animated underline that grows in from the left on hover */
.ls-product__link::after{ content:""; position:absolute; left:.2rem; right:auto; bottom:.28rem; height:2px; width:0; background:#297acc; transition:width .25s cubic-bezier(.25,.46,.45,.94); }
.ls-product__link:hover{ color:#297acc !important; opacity:1; }
.ls-product__link:hover::after{ width:calc(100% - 1.7rem); }
.ls-product__link svg{ width:1.1em; height:1.1em; transition:transform .2s cubic-bezier(.25,.46,.45,.94); }
.ls-product__link:hover svg{ transform:translateX(4px); }
/* tablet & mobile: KEEP the full-screen stack (user asked), stack the 2 columns */
@media(max-width:900px){
.ls-product{ height:auto; min-height:100svh; padding-top:5.75rem; padding-bottom:1.25rem; }
.ls-product__card{ grid-template-columns:1fr; gap:1.25rem; padding:clamp(1.25rem,4.5vw,2rem); }
.ls-product__visual{ order:-1; }
.ls-product__visual svg{ max-height:200px; }
.ls-product__icon{ width:3.75rem; height:3.75rem; margin-bottom:.85rem; }
}
@media(max-width:560px){
.ls-product__visual svg{ max-height:158px; }
.ls-product__ctas{ gap:.7rem; width:100%; }
.ls-product__cta{ width:100%; text-align:center; }
.ls-product__link{ width:100%; justify-content:center; }
}
/* ============================================================
PASS 9 — UNIFIED PREMIUM BUTTON SYSTEM (leads-sniper neo-brutalist)
One clean, tactile scheme everywhere. Two styles only, both with a hard
offset "sticker" shadow that LIFTS on hover and PRESSES on click:
• SOLID = black bg / white text + blue hard-shadow
→ hover: fills accent-blue, black shadow, lifts (-2,-2)
• OUTLINE = white bg / black text + black hard-shadow
→ hover: fills black, blue shadow, lifts (-2,-2)
Also gives bare CTAs (.ls-product__cta) the padding + inline-flex they
were missing (the "broken pill" bug). Nested text/arrow colours forced too.
Loaded last + !important to defeat older style.css / hero button layers.
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* ---- shared chrome for every real button (fixes bare CTAs that had no
padding/inline-flex, e.g. .ls-product__cta — the "broken" pill) ---- */
& .btn,& .btn--pill,& .service-card__btn,& .form_button,
& .navbar__cta,& .ls-product__cta,& .footer__newsletter-btn{
display:inline-flex !important; align-items:center; justify-content:center; gap:.55rem;
border-radius:1.875rem !important; border:1.5px solid #090a0a !important;
font-family:var(--font-primary); font-weight:600 !important; font-size:.95rem !important;
line-height:1 !important; letter-spacing:0 !important; text-shadow:none !important;
white-space:nowrap; cursor:pointer; text-decoration:none;
-webkit-text-fill-color:currentColor;
transition:transform .18s var(--ease-default),box-shadow .18s var(--ease-default),
background-color .2s var(--ease-default),color .2s var(--ease-default),
border-color .2s var(--ease-default) !important; }
/* comfortable padding for the main text CTAs (compact/icon buttons keep their own below) */
& .btn,& .btn--pill,& .service-card__btn,& .form_button,& .ls-product__cta{
padding:.9rem 1.9rem !important; }
/* ---- SOLID / PRIMARY (rest: black + blue hard-shadow → hover: blue fill + black shadow, lifts) ---- */
& .btn--primary,& .btn--fly,& .navbar__cta,& .hero__ctas .btn--primary,
& .pre-footer-cta .btn--primary,& .ls-product__cta,& .contact__form .btn--primary{
background:#090a0a !important; color:#fff !important; border-color:#090a0a !important;
box-shadow:3px 3px 0 0 var(--color-accent) !important; }
& .btn--primary *,& .navbar__cta *,& .hero__ctas .btn--primary *,& .ls-product__cta *,
& .btn--fly *,& .pre-footer-cta .btn--primary *{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
& .btn--primary:hover,& .btn--fly:hover,& .navbar__cta:hover,& .hero__ctas .btn--primary:hover,
& .pre-footer-cta .btn--primary:hover,& .ls-product__cta:hover,& .contact__form .btn--primary:hover{
background:var(--color-accent) !important; color:#fff !important; border-color:#090a0a !important;
transform:translate(-2px,-2px); box-shadow:5px 5px 0 0 #090a0a !important; }
& .btn--primary:hover *,& .navbar__cta:hover *,& .hero__ctas .btn--primary:hover *,
& .ls-product__cta:hover *,& .btn--fly:hover *,& .pre-footer-cta .btn--primary:hover *{
color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* ---- OUTLINE / SECONDARY / GHOST (rest: white + black shadow → hover: fills black + blue shadow, lifts) ---- */
& .btn--secondary,& .btn--ghost,& .btn--outline,& .hero__ctas .btn--secondary,& .service-card__btn{
background:#fff !important; color:#090a0a !important; border-color:#090a0a !important;
box-shadow:3px 3px 0 0 #090a0a !important; }
& .btn--secondary *,& .btn--ghost *,& .hero__ctas .btn--secondary *,& .service-card__btn *{
color:#090a0a !important; -webkit-text-fill-color:#090a0a !important; }
& .btn--secondary:hover,& .btn--ghost:hover,& .btn--outline:hover,
& .hero__ctas .btn--secondary:hover,& .service-card__btn:hover{
background:#090a0a !important; color:#fff !important; border-color:#090a0a !important;
transform:translate(-2px,-2px); box-shadow:5px 5px 0 0 var(--color-accent) !important; }
& .btn--secondary:hover *,& .btn--ghost:hover *,& .hero__ctas .btn--secondary:hover *,
& .service-card__btn:hover *{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* ---- compact / icon-adjacent buttons keep a tighter footprint ---- */
& .navbar__cta{ padding:.6rem 1.35rem !important; font-size:.9rem !important;
box-shadow:2px 2px 0 0 var(--color-accent) !important; }
& .navbar__cta:hover{ box-shadow:3px 3px 0 0 #090a0a !important; }
& .btn--small,& .btn--sm{ padding:.62rem 1.25rem !important; font-size:.85rem !important; }
& .footer__newsletter-btn{ padding:.72rem 1.4rem !important;
background:#befabe !important; color:#090a0a !important; box-shadow:3px 3px 0 0 #090a0a !important; }
& .footer__newsletter-btn *{ color:#090a0a !important; -webkit-text-fill-color:#090a0a !important; }
& .footer__newsletter-btn:hover{ background:#090a0a !important; color:#fff !important;
transform:translate(-2px,-2px); box-shadow:5px 5px 0 0 var(--color-accent) !important; }
& .footer__newsletter-btn:hover *{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* arrows / icons inside buttons inherit the button's text colour + stay correctly sized */
& .btn svg,& .btn__arrow,& .navbar__cta svg,& .ls-product__cta svg,& .service-card__btn svg,
& .form_button svg,& .footer__newsletter-btn svg{
color:inherit !important; width:1.05em; height:1.05em; flex:0 0 auto; }
/* firm, consistent press feedback (neo-brutalist "click-in") */
& .btn:active,& .ls-product__cta:active,& .navbar__cta:active,& .service-card__btn:active,
& .btn--secondary:active,& .btn--primary:active,& .footer__newsletter-btn:active{
transform:translate(2px,2px) !important; box-shadow:1px 1px 0 0 #090a0a !important; }
}
/* ============================================================
PASS 10 — SERVICE PAGE hero = 2-column (content + SVG visual)
left = icon chip + title + hook + CTAs; right = relevant SVG in a frame.
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
& .sp-hero{ padding:clamp(1.25rem,3.5vh,2.75rem) 1.25rem clamp(2rem,4vh,3.25rem) !important; text-align:left !important; }
& .sp-hero__container{ max-width:1200px; margin:0 auto; display:grid;
grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
& .sp-hero__content{ text-align:left; }
& .sp-hero__icon{ animation:none !important; margin-bottom:1.25rem !important; }
& .sp-hero__title{ text-align:left !important; font-size:clamp(1.8rem,3.4vw,2.9rem) !important; }
& .sp-hero__hook{ margin:0 0 1.75rem 0 !important; text-align:left !important; max-width:none !important; }
& .sp-hero__ctas{ justify-content:flex-start !important; }
& .sp-hero__visual{ background:#fff; border:1px solid #090a0a; border-radius:1rem;
box-shadow:4px 4px 0 0 #090a0a; padding:1.25rem 1.5rem; display:flex;
align-items:center; justify-content:center; }
& .sp-hero__visual svg{ width:100%; height:auto; max-height:330px; display:block; }
/* restore proper icon sizes on service pages (the :where(svg) 1em safety net shrinks them) */
& .sp-hero__icon{ color:#090a0a; }
& .sp-hero__icon svg{ width:2.2rem !important; height:2.2rem !important; }
& .sp-problem__icon svg,& .sp-solution__icon svg{ width:1.9rem !important; height:1.9rem !important; }
& .sp-section__label svg{ width:1.15em !important; height:1.15em !important; }
& .sp-checklist li svg,& .sp-audience__tag svg,& .sp-step__icon svg,
& .sp-sidebar__card svg,& .sp-related-card svg{ width:1.15em !important; height:1.15em !important; }
}
@media(max-width:860px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero__container{
grid-template-columns:1fr !important; text-align:center; gap:1.5rem; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero__visual{ order:-1; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero__content,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero__title,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero__hook{ text-align:center !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero__ctas{ justify-content:center !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero__visual svg{ max-height:220px; }
}
/* ============================================================
PASS 11 — Navbar dropdown TILE cards + All-Services page grid
============================================================ */
.ls-navtiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1.6rem; }
.ls-navtile{ display:flex; flex-direction:column; align-items:center; gap:.7rem; text-decoration:none;
background:#befabe; border:1px solid #090a0a; border-radius:1rem; box-shadow:2px 2px 0 0 #090a0a;
padding:.85rem .85rem 1rem; color:#090a0a; text-align:center;
transition:box-shadow .2s cubic-bezier(.25,.46,.45,.94),transform .2s cubic-bezier(.25,.46,.45,.94); }
.ls-navtile:hover{ box-shadow:5px 5px 0 0 #090a0a; transform:translate(-2px,-2px); }
.ls-navtile:nth-child(2){ background:#c8e1fa; }
.ls-navtile:nth-child(3){ background:#ffd6c2; }
.ls-navtile:nth-child(4){ background:#fff1b8; }
.ls-navtile:nth-child(5){ background:#f0d1ff; }
.ls-navtile:nth-child(6){ background:#d7f5df; }
/* BIG animated motion-graphic banner on top of each tile (replaces the old tiny icon) */
.ls-navtile__art{ width:100%; height:clamp(80px,8.5vw,102px); background:#fff; border:1.5px solid #090a0a;
border-radius:.85rem; box-shadow:2px 2px 0 0 #090a0a; display:flex; align-items:center; justify-content:center;
overflow:hidden; padding:.35rem .5rem; flex:0 0 auto; }
.ls-navtile__art svg{ width:100%; height:100%; display:block; }
.ls-navtile:hover .ls-navtile__art{ box-shadow:3px 3px 0 0 #090a0a; }
.ls-navtile__name{ font-weight:700; font-size:.95rem; line-height:1.3; color:#090a0a; }
.ls-navtile--all{ grid-column:1/-1; flex-direction:row; justify-content:center; gap:1rem; background:#090a0a !important; padding:.9rem 1.4rem; }
.ls-navtile--all .ls-navtile__name{ color:#fff; font-size:1.05rem; }
.ls-navtile__art--all{ width:2.9rem; height:2.9rem; flex:0 0 auto; padding:.3rem; }
.all-services{ padding:clamp(2rem,5vw,4rem) 1rem clamp(3rem,7vw,5rem); }
.asv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1180px; margin:0 auto; }
.asv-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; text-decoration:none;
background:#befabe; border:1px solid #090a0a; border-radius:1.25rem; box-shadow:4px 4px 0 0 #090a0a;
padding:1.75rem; color:#090a0a;
transition:box-shadow .2s cubic-bezier(.25,.46,.45,.94),transform .2s cubic-bezier(.25,.46,.45,.94); }
.asv-card:hover{ box-shadow:8px 8px 0 0 #090a0a; transform:translate(-2px,-2px); }
.asv-card:nth-child(6n+2){ background:#c8e1fa; }
.asv-card:nth-child(6n+3){ background:#ffd6c2; }
.asv-card:nth-child(6n+4){ background:#fff1b8; }
.asv-card:nth-child(6n+5){ background:#f0d1ff; }
.asv-card:nth-child(6n+6){ background:#d7f5df; }
.asv-card__icon{ width:3.5rem; height:3.5rem; background:#fff; border:1px solid #090a0a; border-radius:50%;
box-shadow:2px 2px 0 0 #090a0a; display:grid; place-items:center; margin-bottom:.35rem; }
.asv-card__icon svg{ width:1.7rem !important; height:1.7rem !important; color:#090a0a; }
.asv-card__title{ font-size:1.15rem; font-weight:700; color:#090a0a; margin:0; line-height:1.3; }
.asv-card__desc{ font-size:.94rem; color:#3e4042; line-height:1.5; margin:0; flex:1; }
.asv-card__link{ font-weight:600; color:#090a0a; margin-top:.4rem; }
@media(max-width:900px){ .asv-grid,.ls-navtiles{ grid-template-columns:repeat(2,1fr); } }
/* ============================================================
PASS 12 — SERVICE PAGE overhaul
• right sidebar removed → main content is full width, single column
• kill the box-in-box nesting (.sp-section was a card wrapping .sp-problem
which is ALSO a card → broken overlapping boxes). .sp-section is now a
plain spacing wrapper; only the real cards inside keep their chrome.
• problem / solution = big hero-style panels: text one side, LARGE animated
scene the other, alternating (problem=text-left/scene-right on warm panel,
solution=scene-left/text-right on green panel).
• "who is this for" tags → big, colourful sticker chips (were tiny).
• mega-dropdown dropped below the floating pill nav (was tucked under it).
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* ---- full-width single column ---- */
& .sp-content{ max-width:1200px; }
& .sp-grid{ grid-template-columns:1fr !important; gap:0 !important; }
& .sp-sidebar{ display:none !important; } /* right column removed */
/* ---- .sp-section = spacing wrapper only (NO card chrome → no nested boxes) ---- */
& .sp-section{
background:transparent !important; border:0 !important; box-shadow:none !important;
border-radius:0 !important; padding:0 !important; overflow:visible !important;
margin:0 0 clamp(2.5rem,6vw,4.5rem) !important; }
/* ---- PROBLEM / SOLUTION → hero-style coloured panels ---- */
& .sp-problem,& .sp-solution{
display:block !important; border:1.5px solid #090a0a !important; border-radius:1.5rem !important;
box-shadow:6px 6px 0 0 #090a0a !important; overflow:visible !important;
padding:clamp(1.5rem,3.4vw,2.85rem) !important; }
& .sp-problem{ background:#ffd6c2 !important; } /* warm = the pain */
& .sp-solution{ background:#d7f5df !important; } /* green = the fix */
& .sp-problem::before,& .sp-solution::before{ display:none !important; } /* kill old glass top-bar */
& .sp-problem:hover,& .sp-solution:hover{
transform:none !important; border-color:#090a0a !important; box-shadow:9px 9px 0 0 #090a0a !important; }
/* the animated scene sits in a WHITE frame so it pops off the coloured panel */
& .sp-problem .wd-scene,& .sp-solution .wd-scene{ background:#fff !important; }
& .sp-problem .wd-scene-cap,& .sp-solution .wd-scene-cap{ background:#fff !important; }
/* bigger, hero-weight titles on the two story panels */
& .sp-problem .sp-section__title,& .sp-solution .sp-section__title{
font-size:clamp(1.4rem,2.9vw,2.15rem) !important; line-height:1.28 !important; margin-bottom:1rem !important; }
/* ---- the 2-column split: balanced columns, big scene, comfortable gap ---- */
& .wd-split{ grid-template-columns:1fr 1fr !important; gap:clamp(1.4rem,3.2vw,2.75rem) !important;
align-items:center !important; margin-top:1.4rem !important; }
/* ---- "WHO IS THIS FOR" chips → big colourful sticker buttons ---- */
& .sp-audience{ gap:clamp(.65rem,1.5vw,1rem) !important; margin-top:1.5rem !important; }
& .sp-audience__tag{
padding:.85rem 1.55rem !important; font-size:clamp(1rem,1.5vw,1.15rem) !important;
font-weight:700 !important; border:1.5px solid #090a0a !important; border-radius:99px !important;
box-shadow:3px 3px 0 0 #090a0a !important; color:#090a0a !important;
transition:transform .18s var(--ease-default),box-shadow .18s var(--ease-default),
background-color .2s var(--ease-default),color .2s var(--ease-default) !important; }
& .sp-audience__tag:hover{ transform:translate(-2px,-2px) !important;
box-shadow:5px 5px 0 0 #090a0a !important; background:#090a0a !important; color:#fff !important; }
& .sp-audience__tag:nth-child(6n+1){ background:#befabe !important; }
& .sp-audience__tag:nth-child(6n+2){ background:#c8e1fa !important; }
& .sp-audience__tag:nth-child(6n+3){ background:#f0d1ff !important; }
& .sp-audience__tag:nth-child(6n+4){ background:#ffd6c2 !important; }
& .sp-audience__tag:nth-child(6n+5){ background:#fff1b8 !important; }
& .sp-audience__tag:nth-child(6n+6){ background:#d7f5df !important; }
/* ---- mega dropdown: drop it clear of the floating pill navbar ---- */
& .services-mega-dropdown__container{ top:6rem !important; }
}
/* problem/solution stack on tablet & phone — scene ALWAYS on top so it reads first */
@media(max-width:820px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split--rev{
grid-template-columns:1fr !important; gap:1.15rem !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split__stage,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split--rev .wd-split__stage{ order:-1 !important; }
}
/* ============================================================
PASS 13 — MOBILE MENU → premium neo-brutalist sheet (scroll-safe)
Bigger sticker tap-targets + a service quick-grid so phone users can
reach every service page straight from the nav. Panel scrolls natively
(Lenis is OFF on touch) with overscroll containment.
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
& .mobile-menu__backdrop{ background:rgba(9,10,10,.5) !important; }
& .mobile-menu__panel{
background:#fff !important; border:1.5px solid #090a0a !important; border-radius:1.5rem !important;
box-shadow:8px 8px 0 0 #090a0a !important; width:min(92%,430px) !important;
margin-block:auto; max-height:none; overflow:visible;
padding:1.85rem 1.2rem 1.4rem !important; text-align:left !important; }
& .mobile-menu__close{ background:#ffd6c2 !important; color:#090a0a !important; border:1.5px solid #090a0a !important;
border-radius:50% !important; box-shadow:2px 2px 0 0 #090a0a !important; width:2.4rem !important; height:2.4rem !important; }
& .mobile-menu__close:hover{ background:#090a0a !important; color:#fff !important; transform:rotate(90deg); }
& .mobile-menu__links{ gap:.55rem !important; margin-top:.4rem !important; }
& .mobile-menu__link{ display:flex !important; align-items:center; gap:.6rem; justify-content:flex-start;
font-size:1.05rem !important; font-weight:700 !important; color:#090a0a !important;
background:#f3f6f3 !important; border:1.5px solid #090a0a !important; border-radius:.9rem !important;
box-shadow:2px 2px 0 0 #090a0a !important; padding:.72rem 1rem !important;
transition:transform .16s var(--ease-default),box-shadow .16s var(--ease-default),background-color .2s !important; }
& .mobile-menu__link:hover,& .mobile-menu__link:active{ background:#befabe !important; color:#090a0a !important;
transform:translate(-2px,-2px); box-shadow:4px 4px 0 0 #090a0a !important; }
/* services quick-grid inside the sheet */
& .mobile-menu__services{ margin-top:1.1rem; padding-top:1rem; border-top:1.5px dashed #090a0a; }
& .mobile-menu__services-title{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.1em;
text-transform:uppercase; color:#787c7f; margin:0 0 .7rem .2rem; }
& .mobile-menu__services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
& .mm-svc{ display:flex; align-items:center; text-align:center; justify-content:center; min-height:3.15rem;
font-size:.82rem; font-weight:700; line-height:1.25; color:#090a0a; text-decoration:none;
background:#befabe; border:1.5px solid #090a0a; border-radius:.8rem; box-shadow:2px 2px 0 0 #090a0a;
padding:.55rem .5rem; transition:transform .16s var(--ease-default),box-shadow .16s var(--ease-default); }
& .mm-svc:hover,& .mm-svc:active{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 0 #090a0a; }
& .mm-svc:nth-child(6n+2){ background:#c8e1fa; }
& .mm-svc:nth-child(6n+3){ background:#f0d1ff; }
& .mm-svc:nth-child(6n+4){ background:#ffd6c2; }
& .mm-svc:nth-child(6n+5){ background:#fff1b8; }
& .mm-svc:nth-child(6n+6){ background:#d7f5df; }
& .mm-svc--all{ grid-column:1/-1; background:#090a0a !important; color:#fff !important; }
& .mobile-menu__cta{ display:flex !important; justify-content:center; margin-top:1.1rem !important; width:100%; }
/* mobile theme switcher — neubrutalist sticker segmented control */
& .mobile-menu__theme{ margin-top:1.1rem; padding-top:1rem; border-top:1.5px dashed #090a0a; }
& .mobile-menu__theme-title{ color:#787c7f; }
& #theme-switcher-mobile{ background:#f3f6f3 !important; border:1.5px solid #090a0a !important; border-radius:.8rem !important; box-shadow:2px 2px 0 0 #090a0a !important; padding:3px !important; }
& #theme-switcher-mobile .navbar__theme-btn{ border-radius:.55rem !important; color:#090a0a !important; }
& #theme-switcher-mobile .navbar__theme-btn.active{ background:#befabe !important; color:#090a0a !important; box-shadow:none !important; }
}
/* ============================================================
PASS 14 — viewport-fit stories · clean mobile nav · bigger
dropdown motion-graphics · impressive footer (no hard divider)
============================================================ */
/* ---- (A) PROBLEM & SOLUTION each fill ~one viewport (desktop/tablet) ---- */
@media (min-width: 821px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(> .sp-problem),
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(> .sp-solution){
min-height:100svh; display:flex; flex-direction:column; justify-content:center;
margin:0 !important; padding-block:clamp(1rem,3vh,2.5rem) !important;
}
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(> .sp-problem) .sp-problem,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(> .sp-solution) .sp-solution{
width:100%; padding:clamp(1.35rem,2.6vw,2.4rem) !important; }
/* keep the whole story (title + copy + big scene) inside the screen */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-problem .sp-section__title,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-solution .sp-section__title{
font-size:clamp(1.3rem,2.4vw,1.95rem) !important; margin-bottom:.6rem !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split{ align-items:center !important; margin-top:.9rem !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split__copy p{ margin-bottom:.6rem !important; font-size:.98rem !important; line-height:1.65 !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split__stage .wd-scene{
max-height:56svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:clamp(.6rem,1.4vw,1.1rem) !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split__stage .wd-scene svg{
width:100%; height:auto; max-height:47svh; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-scene-cap{ margin-top:.5rem !important;
padding:.4rem .7rem !important; font-size:.78rem !important; }
}
/* ---- (B) MOBILE NAVBAR → clean leads-sniper style (logo + lang + hamburger) ---- */
@media (max-width: 900px){
/* hide ONLY the desktop switcher inside the navbar pill — the mobile-menu copy
(#theme-switcher-mobile) must stay visible so phones can switch theme */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__controls .navbar__theme-switcher,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__search-btn{ display:none !important; }
/* full-width margin-pill on mobile — MUST cancel the desktop translateX(-50%)
(left/right symmetric now), else the whole bar shifts half its width to the left
and drags the hamburger off-screen */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar.is-scrolled,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar.is-hidden{ padding:.5rem .7rem !important; top:.75rem !important;
left:.5rem !important; right:.5rem !important; width:auto !important; transform:none !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__controls{ gap:.5rem !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__hamburger{
display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px;
width:2.7rem; height:2.7rem; padding:0; background:#befabe !important; border:1.5px solid #090a0a !important;
border-radius:.75rem !important; box-shadow:2px 2px 0 0 #090a0a !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__hamburger:active{
transform:translate(2px,2px); box-shadow:1px 1px 0 0 #090a0a !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__hamburger-line{
width:1.2rem; height:2.5px; background:#090a0a; border-radius:2px; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__hamburger.is-active{ background:#ffd6c2 !important; }
/* keep the little lang pill compact so it never crowds the hamburger */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__lang-toggle{ padding:.3rem .55rem !important; }
}
/* The skin forces .navbar__cta { display:inline-flex } at ALL widths (spec 0-4-0),
overriding the base ≤1024 hide — so on phones the CTA showed, overflowed the pill
and pushed the hamburger off-screen. Re-hide it on mobile (menu already has a CTA). */
@media (max-width: 1024px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .navbar__cta{ display:none !important; }
}
/* ---- (C) NAVBAR mega-dropdown motion graphics: LARGER + livelier ---- */
.ls-navtiles{ gap:1rem; padding:1.35rem; }
.ls-navtile{ padding:.9rem .9rem 1.05rem; gap:.75rem; }
/* Only the 6 service tiles get the tall art box — NOT the wide "সব সার্ভিস দেখুন"
row, whose small square icon (.ls-navtile__art--all) was being blown up to
134px by this !important rule and inflating the whole row's height. */
.ls-navtile:not(.ls-navtile--all) .ls-navtile__art{ height:clamp(104px,10.5vw,134px) !important; padding:.45rem .65rem !important; }
.ls-navtile__art--all{ width:2.6rem !important; height:2.6rem !important; flex:0 0 auto; padding:.3rem !important; }
.ls-navtile__art svg{ transition:transform .28s cubic-bezier(.25,.46,.45,.94); }
.ls-navtile:hover .ls-navtile__art svg{ transform:scale(1.05); }
.ls-navtile__name{ font-size:1rem !important; }
/* never let the (now taller) dropdown spill past the screen — scroll inside if needed */
.services-mega-dropdown__container{ max-width:1160px !important;
max-height:calc(100svh - 6.75rem); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
/* ---- (D) FOOTER → impressive dark panel: relevant drifting brand aura,
digital dot-grid, NO hard divider line ---- */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
& .footer,& .footer.premium-footer{
background:#0c0e0e !important; background-image:none !important;
position:relative; overflow:hidden; border-radius:1.75rem !important; margin:.6rem !important;
box-shadow:0 -1px 0 rgba(255,255,255,.04) inset; }
/* soft brand glow + faint digital dot-grid, layered UNDER content */
& .footer::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
background:
radial-gradient(130% 70% at 50% -8%, rgba(190,250,190,.12), transparent 62%),
radial-gradient(rgba(255,255,255,.045) 1.4px, transparent 1.5px);
background-size:100% 100%, 26px 26px; }
& .footer .container,& .footer .relative-z{ position:relative; z-index:2; }
/* re-enable the decorative glow blobs as slow soft-drifting brand orbs (no blur filter) */
& .footer__glow-blobs{ display:block !important; position:absolute; inset:0; z-index:1; overflow:hidden;
pointer-events:none; border-radius:inherit; }
& .footer__glow-blobs .blob{ display:block !important; position:absolute; border-radius:50%; filter:none !important; }
& .footer__glow-blobs .blob--accent{ width:min(42vw,460px); height:min(42vw,460px); left:-10%; top:-34%;
background:radial-gradient(circle,rgba(190,250,190,.42),transparent 66%); animation:ftr-drift-a 20s ease-in-out infinite; }
& .footer__glow-blobs .blob--purple{ width:min(38vw,420px); height:min(38vw,420px); right:-8%; top:-22%;
background:radial-gradient(circle,rgba(200,225,250,.36),transparent 66%); animation:ftr-drift-b 26s ease-in-out infinite; }
& .footer__glow-blobs .blob--teal{ width:min(40vw,440px); height:min(40vw,440px); left:32%; bottom:-46%;
background:radial-gradient(circle,rgba(240,209,255,.30),transparent 68%); animation:ftr-drift-c 30s ease-in-out infinite; }
/* NO hard divider — replace with a soft, edge-faded hairline above the bottom bar */
& .footer__divider-animated{ display:none !important; }
& .footer__bottom{ border:0 !important; margin-top:1.75rem !important; padding-top:1.4rem !important; position:relative; }
& .footer__bottom::before{ content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,transparent); }
/* premium chrome */
& .footer__heading{ color:#fff !important; position:relative; padding-bottom:.35rem; }
& .footer__heading::after{ content:''; position:absolute; left:0; bottom:0; width:1.6rem; height:3px;
border-radius:2px; background:#befabe; }
& .footer__nav-list a,& .footer__contact-list a,& .contact-mini-link{ transition:color .2s,transform .2s; }
& .footer__nav-list a:hover,& .footer__contact-list a:hover{ color:#befabe !important; transform:translateX(3px); }
& .footer__social-icon{ background:#161a16 !important; border:1.5px solid #ffffff2a !important; color:#fff !important;
border-radius:.7rem !important; transition:transform .2s,background-color .2s,border-color .2s; }
& .footer__social-icon:hover{ background:#befabe !important; color:#090a0a !important; border-color:#befabe !important;
transform:translateY(-3px); }
& .footer__back-to-top{ background:#161a16 !important; border:1.5px solid #ffffff2a !important; color:#fff !important;
border-radius:99px !important; padding:.5rem 1.1rem !important; transition:transform .2s,background-color .2s; }
& .footer__back-to-top:hover{ background:#befabe !important; color:#090a0a !important; transform:translateY(-2px); }
& .footer__logo-text strong{ color:#fff !important; }
}
@keyframes ftr-drift-a{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(6%,8%); } }
@keyframes ftr-drift-b{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-7%,5%); } }
@keyframes ftr-drift-c{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(5%,-7%); } }
@media (prefers-reduced-motion: reduce){
.footer__glow-blobs .blob{ animation:none !important; }
}
/* problem/solution: on phones keep natural height (one-viewport rule is desktop) */
@media (max-width: 820px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(> .sp-problem),
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(> .sp-solution){
min-height:0; }
}
/* ============================================================
PASS 15 — breadcrumb/nav overlap · box spacing · sticky-CTA out ·
UNIFY every page's problem/solution into ONE box (like web-dev) ·
drop clutter accents · mobile-menu scroll · responsive
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* ---- (1) BREADCRUMB: pill chrome belongs on __inner, not the padded outer
wrapper (that made a giant pill overlapping the floating nav) ---- */
& .sp-breadcrumb{ display:block !important; border:0 !important; box-shadow:none !important;
background:transparent !important; width:100%; max-width:1200px; margin:0 auto; align-self:stretch; text-align:left; overflow:visible;
padding:6.75rem 1.25rem 0 !important; }
& .sp-breadcrumb__inner{ display:inline-flex !important; flex-wrap:nowrap; align-items:center; max-width:100%;
border:1.5px solid #090a0a !important; border-radius:99px !important;
box-shadow:2px 2px 0 0 #090a0a !important; background:#fff !important; padding:.4rem .55rem !important; }
/* ---- (2) BOX SPACING: never let the stat band touch the first section ---- */
& .wd-statband,& section[aria-label="Key numbers"]{ padding-bottom:0 !important; }
& .sp-content{ padding-top:clamp(1.75rem,4vw,3rem) !important; }
/* ---- (3) STICKY / STACK bottom CTA bar: removed ---- */
& .sp-sticky-cta,& #stickyCtaBar{ display:none !important; }
/* ---- (5) drop the tiny "useless" decorative label loops ---- */
& .wd-accent,& .sp-section__label .wd-accent{ display:none !important; }
/* ============================================================
(4) UNIFY PROBLEM / SOLUTION → ONE coloured box on every page.
Pages vary: web-dev wraps the split inside .sp-problem (already a panel
from PASS 12); the other 16 pages put .sp-problem/.sp-solution as a text
COLUMN inside a bespoke *-split / sp-splitscene grid. So: make that grid
the panel, and strip the mismatched card off the inner text column.
Detection is robust via the always-present .sp-problem__icon / __solution__icon.
============================================================ */
/* the split GRID that holds the story = the ONE panel (warm=problem, green=solution) */
& [class*="split"]:has(.sp-problem__icon),
& .sp-splitscene:has(.sp-scene-cap--problem),
& .sp-splitscene:has(.sp-splitscene__stage--problem){
background:#ffd6c2 !important; border:1.5px solid #090a0a !important; border-radius:1.5rem !important;
box-shadow:6px 6px 0 0 #090a0a !important; padding:clamp(1.35rem,2.6vw,2.4rem) !important;
gap:clamp(1.35rem,3vw,2.6rem) !important; align-items:center !important; overflow:visible !important; }
& [class*="split"]:has(.sp-solution__icon),
& .sp-splitscene:has(.sp-scene-cap--solution),
& .sp-splitscene:has(.sp-splitscene__stage--solution){
background:#d7f5df !important; border:1.5px solid #090a0a !important; border-radius:1.5rem !important;
box-shadow:6px 6px 0 0 #090a0a !important; padding:clamp(1.35rem,2.6vw,2.4rem) !important;
gap:clamp(1.35rem,3vw,2.6rem) !important; align-items:center !important; overflow:visible !important; }
/* strip the card off the text COLUMN living inside a split (keep web-dev's wrapper panel) */
& [class*="split"] > .sp-problem,& [class*="split"] > .sp-solution{
background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
/* the sub-elements __copy/__stage must NOT be mistaken for the grid panel */
& [class*="split__"]:has(.sp-problem__icon),& [class*="split__"]:has(.sp-solution__icon),
& [class*="__copy"]:has(.sp-problem__icon),& [class*="__copy"]:has(.sp-solution__icon){
background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
}
/* extend the one-viewport rule to the bespoke pages too (desktop) — with
top clearance so the story is centred BELOW the floating nav (never under it) */
@media (min-width: 821px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(.sp-problem__icon),
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(.sp-solution__icon){
min-height:100svh; display:flex; flex-direction:column; justify-content:center;
margin:0 !important; padding-top:6rem !important; padding-bottom:1.5rem !important; }
/* cap ALL scene stages so the story fits one screen */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) [class*="split__stage"] svg,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) [class*="scene-frame"] svg,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-splitscene__stage svg,
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .wd-split__stage .wd-scene svg{
max-height:44svh; width:100%; height:auto; }
}
@media (max-width: 820px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(.sp-problem__icon),
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section:has(.sp-solution__icon){ min-height:0; }
}
/* ---- (8) MOBILE MENU scroll: the whole overlay scrolls (reliable on touch) ---- */
@media (max-width: 1024px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu{
align-items:flex-start !important; justify-content:center !important;
overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
padding:4.75rem 1rem 2.5rem !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu__backdrop{ position:fixed !important; inset:0 !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu__panel{
max-height:none !important; margin:auto !important; }
}
/* ---- (7) service pages mobile polish ---- */
@media (max-width: 640px){
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) [class*="split"]:has(.sp-problem__icon),
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) [class*="split"]:has(.sp-solution__icon){
padding:1.15rem !important; gap:1rem !important; border-radius:1.15rem !important; box-shadow:4px 4px 0 0 #090a0a !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-content{ padding-left:16px !important; padding-right:16px !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero{ padding-left:16px !important; padding-right:16px !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-breadcrumb{ padding:5.75rem 1rem .5rem !important; overflow:visible !important; display:flex !important; justify-content:center !important; max-width:100vw !important; box-sizing:border-box; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-breadcrumb__inner{ display:flex !important; min-width:0; max-width:calc(100vw - 2rem) !important; box-sizing:border-box; flex-wrap:nowrap !important; border-radius:16px !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-breadcrumb__current{ flex:0 1 auto !important; min-width:0 !important; max-width:45vw !important; }
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-section__title{ font-size:clamp(1.25rem,5.5vw,1.6rem) !important; }
}
/* ============================================================
PASS 16 — UNIVERSAL problem/solution "one box" (covers EVERY page
variant, no matter the bespoke class names). Model:
• the SCENE column is always some `…__stage` element.
• the GRID = the element that has a direct `…__stage` child.
• that grid IS the coloured box — UNLESS an .sp-problem/.sp-solution
already wraps the scene (web-dev / website-security), in which case
the wrapper is the box (PASS 12) and the inner grid goes transparent.
• any .sp-problem/.sp-solution that does NOT itself contain the scene
(a header block or a bare text column) loses its PASS-12 card.
============================================================ */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]){
/* strip PASS-12 card from non-wrapper problem/solution (header or text column) */
& .sp-problem:not(:has([class*="stage"])):not(:has([class*="scene"])),
& .sp-solution:not(:has([class*="stage"])):not(:has([class*="scene"])){
background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
/* the GRID = element whose DIRECT children include BOTH a scene-stage column AND
a text column (…__copy | .sp-problem | .sp-solution). This pins the real 2-col
grid and ignores stray class-less wrappers. Inside a problem section = warm box */
& .sp-section:has(.sp-problem__icon) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)){
background:#ffd6c2 !important; border:1.5px solid #090a0a !important; border-radius:1.5rem !important;
box-shadow:6px 6px 0 0 #090a0a !important; padding:clamp(1.35rem,2.6vw,2.4rem) !important;
gap:clamp(1.35rem,3vw,2.6rem) !important; align-items:center !important; overflow:visible !important; }
/* …inside a solution section = green box */
& .sp-section:has(.sp-solution__icon) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)){
background:#d7f5df !important; border:1.5px solid #090a0a !important; border-radius:1.5rem !important;
box-shadow:6px 6px 0 0 #090a0a !important; padding:clamp(1.35rem,2.6vw,2.4rem) !important;
gap:clamp(1.35rem,3vw,2.6rem) !important; align-items:center !important; overflow:visible !important; }
/* pattern 1: sp-problem/solution WRAPS the scene → wrapper is the box (PASS 12),
so the inner grid must be transparent (no box-in-box) */
& .sp-problem:has([class*="stage"]) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)),
& .sp-solution:has([class*="stage"]) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)){
background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
/* The animated motion-graphic must sit TRANSPARENT inside the one coloured box —
the stage column AND the SVG's own card (.wd-scene / .ad-scene-frame / *-stage …)
drop their background/border/shadow so there is no redundant white box around it.
(Fixes: web-dev & app-dev problem/solution scenes showing a jarring white box.) */
& .sp-section:has(.sp-problem__icon) [class*="stage"],
& .sp-section:has(.sp-solution__icon) [class*="stage"],
& .sp-section:has(.sp-problem__icon) *:has(> svg[data-mg-scene]),
& .sp-section:has(.sp-solution__icon) *:has(> svg[data-mg-scene]){
background:transparent !important; border:0 !important; box-shadow:none !important; }
}
/* ============================================================
PASS 17 — DARK + HACKER THEME for the leads-sniper (brutalist)
system. Many .ls-product* / .ls-navtile* / .asv-card* rules are
UNSCOPED, so their light pastel + #fff + #090a0a colours leak into
dark/hacker as harsh bright boxes. This block re-skins the whole
system from ONE place. Base rules use !important, so these do too.
Each theme carries its own --ls-* palette; the override rules read
whichever is active, so one rule set themes both.
============================================================ */
[data-theme="dark"]{
/* neutral cool-slate ramp — no clashing blue/purple; unified ink with the
main --color-text ramp; offset-shadow neutral (reads as a clean cut edge) */
--ls-card:#1B1D26; --ls-card-2:#232631; --ls-card-3:#2C303C;
--ls-frame:#0A0B10; --ls-line:#4A5060; --ls-line-soft:#333844;
--ls-ink:#F5F6F8; --ls-ink-dim:#A7ABB4; --ls-sh:4px 4px 0 0 #363B46;
}
[data-theme="hacker"]{
--ls-card:#0c140c; --ls-card-2:#0a120f; --ls-card-3:#0e160e;
--ls-frame:#050a05; --ls-line:rgba(0,255,65,.45); --ls-line-soft:rgba(0,255,65,.22);
--ls-ink:#c9ffd6; --ls-ink-dim:#5fbf78; --ls-sh:4px 4px 0 0 rgba(0,255,65,.18);
}
/* ---------- Home service cards (.ls-product) ---------- */
[data-theme="dark"] .ls-product__card, [data-theme="hacker"] .ls-product__card,
[data-theme="dark"] .ls-product:nth-child(6n+2) .ls-product__card, [data-theme="hacker"] .ls-product:nth-child(6n+2) .ls-product__card,
[data-theme="dark"] .ls-product:nth-child(6n+3) .ls-product__card, [data-theme="hacker"] .ls-product:nth-child(6n+3) .ls-product__card,
[data-theme="dark"] .ls-product:nth-child(6n+4) .ls-product__card, [data-theme="hacker"] .ls-product:nth-child(6n+4) .ls-product__card,
[data-theme="dark"] .ls-product:nth-child(6n+5) .ls-product__card, [data-theme="hacker"] .ls-product:nth-child(6n+5) .ls-product__card,
[data-theme="dark"] .ls-product:nth-child(6n+6) .ls-product__card, [data-theme="hacker"] .ls-product:nth-child(6n+6) .ls-product__card{
background:var(--ls-card) !important; border-color:var(--ls-line) !important; color:var(--ls-ink) !important;
}
[data-theme="dark"] .ls-product__visual, [data-theme="hacker"] .ls-product__visual,
[data-theme="dark"] .ls-product__icon, [data-theme="hacker"] .ls-product__icon{
background:var(--ls-frame) !important; border-color:var(--ls-line) !important;
}
[data-theme="dark"] .ls-product__icon svg, [data-theme="hacker"] .ls-product__icon svg{ color:var(--ls-ink) !important; }
[data-theme="dark"] .ls-product__title, [data-theme="hacker"] .ls-product__title,
[data-theme="dark"] .ls-product__price, [data-theme="hacker"] .ls-product__price{ color:var(--ls-ink) !important; }
[data-theme="dark"] .ls-product__desc, [data-theme="hacker"] .ls-product__desc{ color:var(--ls-ink-dim) !important; }
[data-theme="dark"] .ls-product__tag, [data-theme="hacker"] .ls-product__tag{
background:var(--ls-card-2) !important; border-color:var(--ls-line) !important; color:var(--ls-ink) !important; box-shadow:2px 2px 0 0 var(--ls-line) !important;
}
[data-theme="dark"] .ls-product__link, [data-theme="hacker"] .ls-product__link{ color:var(--color-accent) !important; }
/* ---------- Navbar mega-dropdown tiles (.ls-navtile) ---------- */
[data-theme="dark"] .services-mega-dropdown__container,
[data-theme="hacker"] .services-mega-dropdown__container{
background:var(--ls-card) !important; border-color:var(--ls-line) !important;
}
[data-theme="dark"] .ls-navtile, [data-theme="hacker"] .ls-navtile,
[data-theme="dark"] .ls-navtile:nth-child(2),[data-theme="hacker"] .ls-navtile:nth-child(2),
[data-theme="dark"] .ls-navtile:nth-child(3),[data-theme="hacker"] .ls-navtile:nth-child(3),
[data-theme="dark"] .ls-navtile:nth-child(4),[data-theme="hacker"] .ls-navtile:nth-child(4),
[data-theme="dark"] .ls-navtile:nth-child(5),[data-theme="hacker"] .ls-navtile:nth-child(5),
[data-theme="dark"] .ls-navtile:nth-child(6),[data-theme="hacker"] .ls-navtile:nth-child(6){
background:var(--ls-card-2) !important; border-color:var(--ls-line) !important; color:var(--ls-ink) !important;
}
[data-theme="dark"] .ls-navtile__art, [data-theme="hacker"] .ls-navtile__art{
background:var(--ls-frame) !important; border-color:var(--ls-line) !important;
}
[data-theme="dark"] .ls-navtile__name, [data-theme="hacker"] .ls-navtile__name{ color:var(--ls-ink) !important; }
[data-theme="dark"] .ls-navtile:hover, [data-theme="hacker"] .ls-navtile:hover{ box-shadow:var(--ls-sh) !important; }
[data-theme="hacker"] .ls-navtile--all{ background:#00ff41 !important; }
[data-theme="hacker"] .ls-navtile--all .ls-navtile__name{ color:#04140a !important; }
/* ---------- All-services grid cards (.asv-card) ---------- */
[data-theme="dark"] .asv-card, [data-theme="hacker"] .asv-card,
[data-theme="dark"] .asv-card:nth-child(6n+2),[data-theme="hacker"] .asv-card:nth-child(6n+2),
[data-theme="dark"] .asv-card:nth-child(6n+3),[data-theme="hacker"] .asv-card:nth-child(6n+3),
[data-theme="dark"] .asv-card:nth-child(6n+4),[data-theme="hacker"] .asv-card:nth-child(6n+4),
[data-theme="dark"] .asv-card:nth-child(6n+5),[data-theme="hacker"] .asv-card:nth-child(6n+5),
[data-theme="dark"] .asv-card:nth-child(6n+6),[data-theme="hacker"] .asv-card:nth-child(6n+6){
background:var(--ls-card) !important; border-color:var(--ls-line) !important; color:var(--ls-ink) !important;
}
[data-theme="dark"] .asv-card:nth-child(3n+2),[data-theme="hacker"] .asv-card:nth-child(3n+2){ background:var(--ls-card-2) !important; }
[data-theme="dark"] .asv-card:nth-child(3n+3),[data-theme="hacker"] .asv-card:nth-child(3n+3){ background:var(--ls-card-3) !important; }
[data-theme="dark"] .asv-card__icon, [data-theme="hacker"] .asv-card__icon{
background:var(--ls-frame) !important; border-color:var(--ls-line) !important;
}
[data-theme="dark"] .asv-card__title, [data-theme="hacker"] .asv-card__title{ color:var(--ls-ink) !important; }
[data-theme="dark"] .asv-card__desc, [data-theme="hacker"] .asv-card__desc{ color:var(--ls-ink-dim) !important; }
[data-theme="dark"] .asv-card__link, [data-theme="hacker"] .asv-card__link{ color:var(--color-accent) !important; }
/* ---------- Service-page problem/solution scene (dark/hacker twin of PASS 16) ---------- */
/* (a) header/text-only problem-solution blocks carry no card */
[data-theme="dark"] .sp-problem:not(:has([class*="stage"])):not(:has([class*="scene"])),
[data-theme="dark"] .sp-solution:not(:has([class*="stage"])):not(:has([class*="scene"])),
[data-theme="hacker"] .sp-problem:not(:has([class*="stage"])):not(:has([class*="scene"])),
[data-theme="hacker"] .sp-solution:not(:has([class*="stage"])):not(:has([class*="scene"])){
background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
/* (b) the 2-col grid IS the box … */
[data-theme="dark"] .sp-section:has(.sp-problem__icon) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)),
[data-theme="dark"] .sp-section:has(.sp-solution__icon) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)),
[data-theme="hacker"] .sp-section:has(.sp-problem__icon) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)),
[data-theme="hacker"] .sp-section:has(.sp-solution__icon) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)){
background:var(--ls-card) !important; border:1.5px solid var(--ls-line) !important; box-shadow:6px 6px 0 0 var(--ls-line) !important;
}
/* (c) …UNLESS an .sp-problem/.sp-solution wraps the scene → the wrapper is the box, inner grid transparent */
[data-theme="dark"] .sp-problem:has([class*="stage"]) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)),
[data-theme="dark"] .sp-solution:has([class*="stage"]) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)),
[data-theme="hacker"] .sp-problem:has([class*="stage"]) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)),
[data-theme="hacker"] .sp-solution:has([class*="stage"]) *:has(> [class*="stage"]):has(> :is([class*="copy"],.sp-problem,.sp-solution)){
background:transparent !important; border:0 !important; box-shadow:none !important;
}
[data-theme="dark"] .sp-problem:has([class*="stage"]),
[data-theme="dark"] .sp-solution:has([class*="stage"]),
[data-theme="hacker"] .sp-problem:has([class*="stage"]),
[data-theme="hacker"] .sp-solution:has([class*="stage"]){
background:var(--ls-card) !important; border:1.5px solid var(--ls-line) !important; box-shadow:6px 6px 0 0 var(--ls-line) !important;
}
/* (d) the SVG's own frame + stage stay transparent on dark/hacker too */
[data-theme="dark"] .sp-section:has(.sp-problem__icon) [class*="stage"],
[data-theme="dark"] .sp-section:has(.sp-solution__icon) [class*="stage"],
[data-theme="dark"] .sp-section:has(.sp-problem__icon) *:has(> svg[data-mg-scene]),
[data-theme="dark"] .sp-section:has(.sp-solution__icon) *:has(> svg[data-mg-scene]),
[data-theme="hacker"] .sp-section:has(.sp-problem__icon) [class*="stage"],
[data-theme="hacker"] .sp-section:has(.sp-solution__icon) [class*="stage"],
[data-theme="hacker"] .sp-section:has(.sp-problem__icon) *:has(> svg[data-mg-scene]),
[data-theme="hacker"] .sp-section:has(.sp-solution__icon) *:has(> svg[data-mg-scene]){
background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* ============================================================================
BRUTALIST RECOLOR — DARK + HACKER THEMES (layout untouched; color only)
Wins cascade: parent [0,3,0] + nested `& .x` [0,2,0] = [0,5,0] > universal [0,4,0]
Skips (handled in PASS 17): .ls-product*, .ls-navtile*, .asv-card*, problem/solution scene-box
============================================================================ */
/* ========================= DARK THEME ========================= */
:root[data-theme="dark"]:not([data-theme="_x1"]):not([data-theme="_x2"]) {
/* ── DARK color tokens — re-declared here (specificity 0-4-0) so they BEAT
the shared light-skin token block (0-3-0) WITHOUT excluding dark from
the skin (that skin also carries the LAYOUT — navbar pill, radii,
spacing — which MUST stay identical to light). Only COLOR tokens here;
radius / font / easing / pastel tokens are deliberately left shared. ── */
--color-accent:#0A84FF;
--color-accent-hover:#409CFF;
--color-accent-light:rgba(10,132,255,.14);
--color-accent-glow:rgba(10,132,255,.38);
--color-bg-primary:#0E0F14;
--color-bg-secondary:#141620;
--color-bg-tertiary:#1C1F29;
--color-text-primary:#F5F6F8;
--color-text-secondary:#A7ABB4;
--color-text-tertiary:#7C808A;
--color-text-inverse:#FFFFFF;
--glass-bg:#1B1D26;
--glass-bg-hover:#232631;
--glass-border:#4A5060;
--glass-shadow:4px 4px 0 0 #363B46;
--glass-shadow-elevated:8px 8px 0 0 #363B46;
/* ── Globals the light-skin sets as LITERALS (not tokens) → repaint dark.
!important because the shared skin is itself !important-heavy and its
comma-list heading rule otherwise wins the specificity tie. Gradient
headings (.section-heading) keep their -webkit-text-fill gradient. ── */
& body { background:#0E0F14 !important; color:#F5F6F8; }
& h1, & h2, & h3, & h4, & h5, & h6 { color:#F5F6F8 !important; }
& strong { color:#F5F6F8 !important; }
& a { color:#0A84FF; }
& a:hover { color:#409CFF; }
/* ── Footer (light-skin literals → dark; layout untouched) ── */
& .footer__logo-text strong, & .footer__heading, & .footer__bottom strong { color:#F5F6F8 !important; }
& .footer__logo-text span, & .footer__tagline, & .footer__newsletter-desc,
& .magnetic-link, & .contact-mini-link, & .footer__bottom, & .footer__bottom p,
& .footer__bottom-badge, & .footer__back-to-top { color:#A7ABB4 !important; }
& .footer__newsletter-privacy { color:#7C808A !important; }
& .magnetic-link:hover, & a.contact-mini-link:hover, & .footer__back-to-top:hover { color:#0A84FF !important; }
& .footer__heading::after { background:#0A84FF !important; }
& .footer__social-icon { background:#1C1F29 !important; border-color:#4A5060 !important; color:#A7ABB4 !important; }
& .footer__social-icon:hover { background:#0A84FF !important; border-color:#0A84FF !important; color:#fff !important; }
& .footer__social-icon[aria-label="GitHub"]:hover { background:#6E7681 !important; border-color:#6E7681 !important; }
& .contact-mini-link .icon-wrap { background:#1C1F29 !important; border-color:#4A5060 !important; color:#0A84FF !important; }
& a.contact-mini-link:hover .icon-wrap { background:#0A84FF !important; color:#fff !important; border-color:#0A84FF !important; }
/* Breadcrumb inner pill (skin leaves a hard-coded white gradient) → dark */
& .sp-breadcrumb__inner { background:#1B1D26 !important; border-color:#4A5060 !important; }
& .sp-breadcrumb__inner::before { background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent) !important; }
/* ══ Skin surfaces the light-skin paints white/mint/black but the recolor
missed — repaint dark. LAYOUT (pill shape, radii, positions) comes from
the shared skin and is untouched; only COLOR changes here. ══ */
/* Navbar floating pill → dark (skin = white pill) */
& .navbar, & .navbar.is-scrolled {
background:#1B1D26 !important; border-color:#4A5060 !important;
box-shadow:4px 4px 0 0 #363B46 !important;
}
& .navbar__link, & .navbar__links a { color:#F5F6F8 !important; }
& .navbar__link:hover { color:#F5F6F8 !important; opacity:.6; }
& .navbar__dropdown, & #services-mega-dropdown, & .mega-dropdown {
background:#1B1D26 !important; border-color:#4A5060 !important; box-shadow:8px 8px 0 0 #363B46 !important;
}
& .mobile-menu__panel, & .mobile-menu { background:#0A0B10 !important; }
/* Hero → flat dark (skin = mint #befabe panel) */
& .hero { background:#0E0F14 !important; }
& .sp-herowrap { background:#0E0F14 !important; }
& .sp-herowrap > .sp-breadcrumb, & .sp-herowrap > .sp-hero { background:transparent !important; }
& .hero__description, & .hero__subtitle { color:#A7ABB4 !important; }
/* Flattened gradient / shimmer headings + stat numbers → light ink
(mirrors the skin's flatten list so nothing stays near-black on dark) */
& .shimmer-text, & .section-heading, & .apple-display, & .gradient-text,
& [class*="gradient-text"], & [class*="shimmer"], & .hero__heading, & .hero h1,
& .trust-stat__number, & .stat__number, & .about__stat-number, & [class*="stat__number"] {
-webkit-text-fill-color:#F5F6F8 !important; color:#F5F6F8 !important;
}
/* Contact form / white sticker cards inside contact → dark */
& .contact .glass-card, & .contact__form { background:#1B1D26 !important; border-color:#4A5060 !important; }
/* Pre-footer CTA copy → light */
& .pre-footer-cta__content, & .pre-footer-cta__content * {
color:#F5F6F8 !important; -webkit-text-fill-color:#F5F6F8 !important;
}
/* Mega-dropdown container (skin paints via #id, 1-3-0) → dark */
& .services-mega-dropdown__container {
background:#1B1D26 !important; border-color:#4A5060 !important;
}
/* Stray inline-ink bits the flatten list missed → light/visible */
& .accent, & .founder-msg__sign-name, & .founder-msg__sign-role {
color:#F5F6F8 !important; -webkit-text-fill-color:#F5F6F8 !important;
}
/* Button labels follow their button's own colour (not the flattened black ink) */
& .btn span, & .btn__text, & .btn__label, & .btn--secondary *, & .btn--ghost * {
-webkit-text-fill-color:currentColor !important;
}
/* --- Contact section shell --- */
& .contact { background: #0A0B10 !important; }
/* --- Response-time pill --- */
& .response-time__inner {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
color: #A7ABB4 !important;
}
/* --- Mail-window (contact form) --- */
& .contact__form-wrap.mail-window {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .contact__form-wrap.mail-window:hover {
border-color: var(--color-accent) !important;
box-shadow: 6px 6px 0 0 #363B46 !important;
}
& .mail-header {
background: #0A0B10 !important;
border-color: #4A5060 !important;
}
& .mail-title { color: #A7ABB4 !important; }
& .mail-actions { color: #7C808A !important; }
& .mail-field-row { border-color: #4A5060 !important; }
& .mail-field-label { color: #A7ABB4 !important; }
& .mail-recipient {
background: rgba(10, 132, 255, .12) !important;
color: #409CFF !important;
}
& .mail-subject-input { color: #F5F6F8 !important; }
& .mail-subject-input::placeholder { color: #7C808A !important; }
/* --- Glass inputs --- */
& .glass-input input,
& .glass-input select,
& .glass-input textarea {
background: #0A0B10 !important;
border-color: #4A5060 !important;
color: #F5F6F8 !important;
}
& .glass-input input::placeholder,
& .glass-input textarea::placeholder { color: #7C808A !important; }
& .glass-input label { color: #A7ABB4 !important; }
& .glass-input input:hover,
& .glass-input select:hover,
& .glass-input textarea:hover {
background: #1B1D26 !important;
border-color: #5A6070 !important;
}
& .glass-input input:focus,
& .glass-input select:focus,
& .glass-input textarea:focus {
background: #0A0B10 !important;
border-color: var(--color-accent) !important;
box-shadow: 0 0 0 3px rgba(10, 132, 255, .18), 0 0 0 1px var(--color-accent) !important;
}
& .glass-input:focus-within label { color: var(--color-accent) !important; }
& .glass-input select option {
background: #1B1D26 !important;
color: #F5F6F8 !important;
}
/* --- Sidebar / social cards --- */
& .premium-sidebar-card,
& .premium-social-card {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .premium-sidebar-card:hover,
& .premium-social-card:hover {
border-color: #5A6070 !important;
box-shadow: 6px 6px 0 0 #363B46 !important;
}
& .info-card__header { border-color: #4A5060 !important; }
& .info-card__header h3,
& .premium-social-card h3 { color: #F5F6F8 !important; }
/* --- Status badge (keep green semantic) --- */
& .status-badge {
background: rgba(63, 185, 80, .14) !important;
border-color: rgba(63, 185, 80, .35) !important;
color: #56d364 !important;
}
/* --- Interactive / location tiles --- */
& .interactive-tile,
& .location-tile {
background: #0A0B10 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .interactive-tile:hover {
background: #1B1D26 !important;
border-color: var(--tile-hover-color, var(--color-accent)) !important;
box-shadow: 6px 6px 0 0 #363B46, 0 0 0 1px var(--tile-hover-color, var(--color-accent)) !important;
}
& .interactive-tile:active { box-shadow: 3px 3px 0 0 #363B46 !important; }
& .contact__info-icon {
background: #2C303C !important;
color: #A7ABB4 !important;
}
& .interactive-tile:hover .contact__info-icon {
background: var(--tile-hover-color, var(--color-accent)) !important;
color: #ffffff !important;
box-shadow: 0 0 0 1px var(--tile-hover-color, var(--color-accent)) !important;
}
& .contact__info-text strong { color: #A7ABB4 !important; }
& .contact__info-text a,
& .contact__info-text span { color: #F5F6F8 !important; }
& .interactive-tile:hover .contact__info-text a {
color: var(--tile-hover-color, var(--color-accent)) !important;
}
& .tile-arrow { color: var(--tile-hover-color, var(--color-accent)) !important; }
/* --- Social bento (brand hovers keep brand colors) --- */
& .social-bento {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
color: #A7ABB4 !important;
}
& .social-bento svg path { color: #A7ABB4 !important; fill: currentColor !important; }
& .social-bento:hover,
& .social-bento:hover svg path { color: #fff !important; }
/* brand hover bg kept as-is from base (fb/li/gh/yt) */
/* --- Trust badges --- */
& .contact__trust-badges {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .trust-badge-item {
background: #0A0B10 !important;
border-color: #4A5060 !important;
color: #A7ABB4 !important;
}
& .trust-badge-item:hover {
background: #1B1D26 !important;
border-color: var(--color-accent) !important;
box-shadow: 3px 3px 0 0 var(--color-accent) !important;
color: var(--color-accent) !important;
}
& .trust-badge-item:active { background: rgba(10, 132, 255, .10) !important; }
/* --- Pre-footer CTA (footer stays dark; keep this dark too) --- */
& .pre-footer-cta {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .pre-footer-cta:hover {
border-color: #5A6070 !important;
box-shadow: 6px 6px 0 0 #363B46 !important;
}
& .pre-footer-cta__text p { color: #A7ABB4 !important; }
& .pre-footer-cta__icon {
background: rgba(10, 132, 255, .10) !important;
border-color: rgba(10, 132, 255, .22) !important;
}
/* --- Newsletter input (in dark footer — keep readable on dark) --- */
& .footer__newsletter-input-wrap {
background: #1B1D26 !important;
border-color: #4A5060 !important;
}
& .footer__newsletter-input-wrap:hover { border-color: #5A6070 !important; }
& .footer__newsletter-input-wrap:focus-within {
border-color: var(--color-accent) !important;
box-shadow: 0 0 0 3px rgba(10, 132, 255, .14) !important;
}
& .footer__newsletter-input { color: #fff !important; }
& .footer__newsletter-input::placeholder { color: #7C808A !important; }
/* newsletter btn keeps accent-blue base; fine on dark */
/* ============================================================
SERVICE-PAGE brutalist panels — collapse pastels → 2-3 tints
============================================================ */
& .sp-hero {
background: #1B1D26 !important;
color: #F5F6F8 !important;
}
& .sp-hero__title { color: #F5F6F8 !important; -webkit-text-fill-color: #F5F6F8 !important; }
& .sp-hero__icon,
& .sp-hero__visual {
background: #0A0B10 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .sp-breadcrumb {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 2px 2px 0 0 #363B46 !important;
}
& .sp-problem,
& [class*='split']:has(.sp-problem__icon) {
background: #2C303C !important; /* warm-tint stand-in */
border-color: #4A5060 !important;
box-shadow: 6px 6px 0 0 #363B46 !important;
}
& .sp-solution,
& [class*='split']:has(.sp-solution__icon) {
background: #232631 !important; /* cool-tint stand-in */
border-color: #4A5060 !important;
box-shadow: 6px 6px 0 0 #363B46 !important;
}
& .sp-step__num {
background: var(--color-accent) !important;
color: #ffffff !important;
}
& .sp-audience__tag {
background: #232631 !important;
border-color: #4A5060 !important;
box-shadow: 3px 3px 0 0 #363B46 !important;
color: #F5F6F8 !important;
}
& .sp-audience__tag:hover {
background: var(--color-accent) !important;
color: #ffffff !important;
box-shadow: 5px 5px 0 0 #363B46 !important;
}
& .sp-price-card,
& .sp-related-card,
& .sp-sidebar__card,
& .sp-cta-block {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .sp-related-card:hover { box-shadow: 8px 8px 0 0 #363B46 !important; }
& .sp-price-card--popular {
background: #232631 !important;
border-color: var(--color-accent) !important;
box-shadow: 8px 8px 0 0 #363B46 !important;
}
& .sp-price-card__badge,
& .sp-sticky-cta {
background: var(--color-accent) !important;
color: #ffffff !important;
}
& .sp-faq__item {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .wd-scene-cap {
background: #0A0B10 !important;
}
/* ============================================================
HOME/GLOBAL brutalist cards — collapse pastels → 2-3 tints
============================================================ */
& .glass-card {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .glass-card:hover { box-shadow: 8px 8px 0 0 #363B46 !important; }
& .service-card,
& .service-card:nth-child(2),
& .service-card:nth-child(3),
& .service-card:nth-child(4),
& .service-card:nth-child(5) {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .service-card:nth-child(3n+2) { background: #232631 !important; }
& .service-card:nth-child(3n) { background: #2C303C !important; }
& .service-card:hover { box-shadow: 8px 8px 0 0 #363B46 !important; }
& .service-card__icon {
background: #0A0B10 !important;
border-color: #4A5060 !important;
box-shadow: 2px 2px 0 0 #363B46 !important;
}
& .service-card__title { color: #F5F6F8 !important; }
& .about__profile-card {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .about__highlight {
background: #0A0B10 !important;
border-color: #4A5060 !important;
box-shadow: 2px 2px 0 0 #363B46 !important;
}
& .ls-cap__card,
& .ls-cap__card:nth-child(2),
& .ls-cap__card:nth-child(3),
& .ls-cap__card:nth-child(4) {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .ls-cap__card:nth-child(3n+2) { background: #232631 !important; }
& .ls-cap__card:nth-child(3n) { background: #2C303C !important; }
& .ls-cap__card:hover { box-shadow: 8px 8px 0 0 #363B46 !important; }
& .ls-cap__title { color: #F5F6F8 !important; }
& .testimonial-card {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .testimonial-card__stars { color: #F5F6F8 !important; }
& .founder-msg__photo-frame,
& .founder-msg__card {
border-color: #4A5060 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
}
& .founder-msg__verify {
background: #2C303C !important;
border-color: #4A5060 !important;
color: #F5F6F8 !important;
}
& .founder-msg__btn { border-color: #4A5060 !important; }
& .founder-msg__btn:hover { box-shadow: 3px 3px 0 0 #363B46 !important; }
& .founder-msg__btn--call {
background: var(--color-accent) !important;
color: #ffffff !important;
}
& .founder-msg__btn--wa {
background: #232631 !important;
color: #F5F6F8 !important;
}
& .founder-msg__btn--mail {
background: #1B1D26 !important;
color: #F5F6F8 !important;
}
/* --- Buttons --- */
/* SOLID CTAs → accent fill, white label; hover BRIGHTENS with a glow (never a dark box) */
& .btn--primary,
& .btn--fly,
& .ls-product__cta,
& .contact__form .btn--primary {
background: var(--color-accent) !important;
color: #ffffff !important;
border-color: var(--color-accent) !important;
box-shadow: 3px 3px 0 0 #363B46 !important;
}
& .btn--primary:hover,
& .btn--fly:hover,
& .ls-product__cta:hover,
& .contact__form .btn--primary:hover {
background: var(--color-accent) !important;
box-shadow: 4px 4px 0 0 #363B46, 0 0 24px rgba(10,132,255,.55) !important;
transform: translate(-2px,-2px);
}
/* OUTLINE / SECONDARY → dark card, light label; hover fills accent (never black) */
& .btn--secondary,
& .service-card__btn,
& .btn--ghost,
& .btn--outline {
background: #1B1D26 !important;
color: #F5F6F8 !important;
border-color: #4A5060 !important;
box-shadow: 3px 3px 0 0 #363B46 !important;
}
& .btn--secondary:hover,
& .service-card__btn:hover,
& .btn--ghost:hover,
& .btn--outline:hover {
background: var(--color-accent) !important;
color: #ffffff !important;
border-color: var(--color-accent) !important;
box-shadow: 5px 5px 0 0 #363B46, 0 0 22px rgba(10,132,255,.35) !important;
transform: translate(-2px,-2px);
}
& .btn--fly *, & .ls-product__cta *, & .contact__form .btn--primary *,
& .btn--secondary:hover *, & .service-card__btn:hover *, & .btn--ghost:hover *, & .btn--outline:hover * {
-webkit-text-fill-color: currentColor !important;
}
& .footer__newsletter-btn { background: var(--color-accent) !important; color:#ffffff !important; border-color: var(--color-accent) !important; }
& .footer__newsletter-btn * { -webkit-text-fill-color:#ffffff !important; }
& .footer__newsletter-btn:hover { box-shadow: 0 0 18px rgba(10,132,255,.5) !important; }
/* --- Bare inputs (global) --- */
& input:not(.mail-subject-input),
& textarea,
& select {
background: #0A0B10 !important;
border-color: #4A5060 !important;
color: #F5F6F8 !important;
}
& input:not(.mail-subject-input):focus,
& textarea:focus,
& select:focus { border-color: var(--color-accent) !important; }
& .mail-subject-input{ background:transparent !important; border:none !important; box-shadow:none !important; }
/* --- Nav shell: keep the base translucent glass (so the service-page hero bg
shows through the navbar); only recolor the brutalist CTA + hamburger --- */
& .navbar__link,
& .navbar__links a { color: #F5F6F8 !important; }
& .navbar__cta {
background: var(--color-accent) !important;
border-color: var(--color-accent) !important;
color: #ffffff !important;
box-shadow: 2px 2px 0 0 #363B46 !important;
}
& .navbar__cta:hover {
background: #409CFF !important;
color: #0E0F14 !important;
box-shadow: 3px 3px 0 0 #363B46, 0 0 18px rgba(10,132,255,.5) !important;
}
& .navbar__hamburger {
background: #232631 !important;
border-color: #4A5060 !important;
box-shadow: 2px 2px 0 0 #363B46 !important;
}
& .navbar__hamburger:active { box-shadow: 1px 1px 0 0 #363B46 !important; }
& .navbar__hamburger.is-active { background: #2C303C !important; }
& .navbar__hamburger-line { background: #F5F6F8 !important; }
/* --- Mobile menu --- */
& .mobile-menu__panel {
background: #0A0B10 !important;
border-color: #4A5060 !important;
box-shadow: 8px 8px 0 0 #363B46 !important;
}
& .mobile-menu__close {
background: #2C303C !important;
border-color: #4A5060 !important;
box-shadow: 2px 2px 0 0 #363B46 !important;
color: #F5F6F8 !important;
}
& .mobile-menu__close:hover {
background: var(--color-accent) !important;
color: #ffffff !important;
}
& .mobile-menu__services { border-top-color: #4A5060 !important; }
& .mobile-menu__services-title { color: #A7ABB4 !important; }
& .mobile-menu__link {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 2px 2px 0 0 #363B46 !important;
color: #F5F6F8 !important;
}
& .mobile-menu__link:hover,
& .mobile-menu__link:active {
background: #232631 !important;
box-shadow: 4px 4px 0 0 #363B46 !important;
color: #F5F6F8 !important;
}
/* mm-svc: collapse 6 pastel rotations → 2 tints */
& .mm-svc {
background: #1B1D26 !important;
border-color: #4A5060 !important;
box-shadow: 2px 2px 0 0 #363B46 !important;
color: #F5F6F8 !important;
}
& .mm-svc:nth-child(2n) { background: #232631 !important; }
& .mm-svc:hover,
& .mm-svc:active { box-shadow: 4px 4px 0 0 #363B46 !important; }
& .mm-svc--all {
background: var(--color-accent) !important;
color: #ffffff !important;
}
/* mobile theme switcher → dark */
& .mobile-menu__theme { border-top-color:#4A5060 !important; }
& #theme-switcher-mobile { background:#1B1D26 !important; border-color:#4A5060 !important; box-shadow:3px 3px 0 0 #363B46 !important; }
& #theme-switcher-mobile .navbar__theme-btn { color:#A7ABB4 !important; }
& #theme-switcher-mobile .navbar__theme-btn.active { background:var(--color-accent) !important; color:#ffffff !important; }
}
/* ========================= HACKER THEME ========================= */
:root[data-theme="hacker"]:not([data-theme="_x1"]):not([data-theme="_x2"]) {
/* ══ HACKER (Matrix/terminal) — premium phosphor-green re-skin.
Same architecture as the dark fix: re-declare COLOR tokens here (0-4-0
beats the shared light-skin token block 0-3-0) + override the skin's
LITERAL/!important rules (navbar, hero, headings, footer, contact) with
green. LAYOUT (pill nav, radii, spacing) comes from the shared skin and
is untouched. Radius/font/pastel tokens deliberately left shared. ══ */
--color-accent:#00FF41;
--color-accent-hover:#33FF6B;
--color-accent-light:rgba(0,255,65,.14);
--color-accent-glow:rgba(0,255,65,.42);
--color-bg-primary:#060A06;
--color-bg-secondary:#0C140C;
--color-bg-tertiary:#0F1A0F;
--color-text-primary:#C6FFD4;
--color-text-secondary:#6FCF88;
--color-text-tertiary:#4C8A60;
--color-text-inverse:#04120A;
--glass-bg:#0C140C;
--glass-bg-hover:#0F1A0F;
--glass-border:rgba(0,255,65,.24);
--glass-shadow:4px 4px 0 0 rgba(0,255,65,.20);
--glass-shadow-elevated:8px 8px 0 0 rgba(0,255,65,.20);
/* globals the light-skin sets as literals → phosphor green */
& body { background:#060A06 !important; color:#C6FFD4; }
& h1, & h2, & h3, & h4, & h5, & h6 { color:#C6FFD4 !important; }
& strong { color:#7CFF9C !important; }
& a { color:#00FF41; }
& a:hover { color:#33FF6B; }
/* navbar floating pill → dark green (skin = white pill) */
& .navbar, & .navbar.is-scrolled {
background:#0C140C !important; border-color:rgba(0,255,65,.32) !important;
box-shadow:4px 4px 0 0 rgba(0,255,65,.18) !important;
}
& .navbar__link, & .navbar__links a { color:#C6FFD4 !important; }
& .navbar__link:hover { color:#00FF41 !important; opacity:1; }
& .navbar__dropdown, & #services-mega-dropdown, & .mega-dropdown, & .services-mega-dropdown__container {
background:#0C140C !important; border-color:rgba(0,255,65,.32) !important; box-shadow:8px 8px 0 0 rgba(0,255,65,.18) !important;
}
& .mobile-menu__panel, & .mobile-menu { background:#050A05 !important; }
/* hero → dark (skin paints it mint #befabe) */
& .hero { background:#060A06 !important; }
& .sp-herowrap { background:#060A06 !important; }
& .sp-herowrap > .sp-breadcrumb, & .sp-herowrap > .sp-hero { background:transparent !important; }
& .hero__description, & .hero__subtitle { color:#6FCF88 !important; }
/* flattened gradient/shimmer headings + stat numbers → phosphor green */
& .shimmer-text, & .section-heading, & .apple-display, & .gradient-text,
& [class*="gradient-text"], & [class*="shimmer"], & .hero__heading, & .hero h1,
& .trust-stat__number, & .stat__number, & .about__stat-number, & [class*="stat__number"] {
-webkit-text-fill-color:#C6FFD4 !important; color:#C6FFD4 !important;
}
/* footer (light-skin literals → green) */
& .footer__logo-text strong, & .footer__heading, & .footer__bottom strong { color:#C6FFD4 !important; }
& .footer__logo-text span, & .footer__tagline, & .footer__newsletter-desc,
& .magnetic-link, & .contact-mini-link, & .footer__bottom, & .footer__bottom p,
& .footer__bottom-badge, & .footer__back-to-top { color:#6FCF88 !important; }
& .footer__newsletter-privacy { color:#4C8A60 !important; }
& .magnetic-link:hover, & a.contact-mini-link:hover, & .footer__back-to-top:hover { color:#00FF41 !important; }
& .footer__heading::after { background:#00FF41 !important; }
& .footer__social-icon { background:#0C140C !important; border-color:rgba(0,255,65,.28) !important; color:#6FCF88 !important; }
& .footer__social-icon:hover { background:#00FF41 !important; border-color:#00FF41 !important; color:#04120A !important; }
& .contact-mini-link .icon-wrap { background:#0C140C !important; border-color:rgba(0,255,65,.28) !important; color:#00FF41 !important; }
& a.contact-mini-link:hover .icon-wrap { background:#00FF41 !important; color:#04120A !important; border-color:#00FF41 !important; }
/* contact form / white sticker cards → dark green */
& .contact .glass-card, & .contact__form { background:#0C140C !important; border-color:rgba(0,255,65,.28) !important; }
/* pre-footer CTA copy + stray inline-ink → green */
& .pre-footer-cta__content, & .pre-footer-cta__content * { color:#C6FFD4 !important; -webkit-text-fill-color:#C6FFD4 !important; }
& .accent, & .founder-msg__sign-name, & .founder-msg__sign-role { color:#7CFF9C !important; -webkit-text-fill-color:#7CFF9C !important; }
& .btn span, & .btn__text, & .btn__label, & .btn--secondary *, & .btn--ghost * { -webkit-text-fill-color:currentColor !important; }
/* Section-label pills → green (skin paints them pastel lilac/mint) */
& .section-label {
background:rgba(0,255,65,.10) !important; border:1px solid rgba(0,255,65,.35) !important;
color:#00FF41 !important; -webkit-text-fill-color:#00FF41 !important; box-shadow:none !important;
}
/* Breadcrumb inner pill (skin leaves a hard-coded white gradient) → green */
& .sp-breadcrumb__inner { background:#0C140C !important; border:1px solid rgba(0,255,65,.3) !important; }
& .sp-breadcrumb__inner::before { background:linear-gradient(90deg,transparent,rgba(0,255,65,.10),transparent) !important; }
/* --- Contact section shell --- */
& .contact { background: #050a05 !important; }
/* --- Response-time pill --- */
& .response-time__inner {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
color: #5fbf78 !important;
}
/* --- Mail-window (contact form) --- */
& .contact__form-wrap.mail-window {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .contact__form-wrap.mail-window:hover {
border-color: #00ff41 !important;
box-shadow: 6px 6px 0 0 rgba(0, 255, 65, .18) !important;
}
& .mail-header {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
}
& .mail-title { color: #5fbf78 !important; }
& .mail-actions { color: #5fbf78 !important; }
& .mail-field-row { border-color: rgba(0, 255, 65, .4) !important; }
& .mail-field-label { color: #5fbf78 !important; }
& .mail-recipient {
background: rgba(0, 255, 65, .12) !important;
color: #00ff41 !important;
}
& .mail-subject-input { color: #c9ffd6 !important; }
& .mail-subject-input::placeholder { color: #3f7a4f !important; }
/* --- Glass inputs --- */
& .glass-input input,
& .glass-input select,
& .glass-input textarea {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
color: #c9ffd6 !important;
}
& .glass-input input::placeholder,
& .glass-input textarea::placeholder { color: #3f7a4f !important; }
& .glass-input label { color: #5fbf78 !important; }
& .glass-input input:hover,
& .glass-input select:hover,
& .glass-input textarea:hover {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .6) !important;
}
& .glass-input input:focus,
& .glass-input select:focus,
& .glass-input textarea:focus {
background: #050a05 !important;
border-color: #00ff41 !important;
box-shadow: 0 0 0 3px rgba(0, 255, 65, .18), 0 0 0 1px #00ff41 !important;
}
& .glass-input:focus-within label { color: #00ff41 !important; }
& .glass-input select option {
background: #0c140c !important;
color: #c9ffd6 !important;
}
/* --- Sidebar / social cards --- */
& .premium-sidebar-card,
& .premium-social-card {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .premium-sidebar-card:hover,
& .premium-social-card:hover {
border-color: rgba(0, 255, 65, .6) !important;
box-shadow: 6px 6px 0 0 rgba(0, 255, 65, .18) !important;
}
& .info-card__header { border-color: rgba(0, 255, 65, .4) !important; }
& .info-card__header h3,
& .premium-social-card h3 { color: #c9ffd6 !important; }
/* --- Status badge --- */
& .status-badge {
background: rgba(0, 255, 65, .12) !important;
border-color: rgba(0, 255, 65, .4) !important;
color: #00ff41 !important;
}
/* --- Interactive / location tiles --- */
& .interactive-tile,
& .location-tile {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .interactive-tile:hover {
background: #0c140c !important;
border-color: #00ff41 !important;
box-shadow: 6px 6px 0 0 rgba(0, 255, 65, .18), 0 0 0 1px #00ff41 !important;
}
& .interactive-tile:active { box-shadow: 3px 3px 0 0 rgba(0, 255, 65, .18) !important; }
& .contact__info-icon {
background: #0c140c !important;
color: #5fbf78 !important;
}
& .interactive-tile:hover .contact__info-icon {
background: #00ff41 !important;
color: #04140a !important;
box-shadow: 0 0 0 1px #00ff41 !important;
}
& .contact__info-text strong { color: #5fbf78 !important; }
& .contact__info-text a,
& .contact__info-text span { color: #c9ffd6 !important; }
& .interactive-tile:hover .contact__info-text a { color: #00ff41 !important; }
& .tile-arrow { color: #00ff41 !important; }
/* --- Social bento --- */
& .social-bento {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
color: #5fbf78 !important;
}
& .social-bento svg path { color: #5fbf78 !important; fill: currentColor !important; }
& .social-bento:hover,
& .social-bento:hover svg path { color: #04140a !important; }
& .social-bento--fb:hover,
& .social-bento--li:hover,
& .social-bento--gh:hover,
& .social-bento--yt:hover {
background: #00ff41 !important;
border-color: #00ff41 !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .5) !important;
}
/* --- Trust badges --- */
& .contact__trust-badges {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .trust-badge-item {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
color: #5fbf78 !important;
}
& .trust-badge-item:hover {
background: #0c140c !important;
border-color: #00ff41 !important;
box-shadow: 3px 3px 0 0 rgba(0, 255, 65, .18) !important;
color: #00ff41 !important;
}
& .trust-badge-item:active { background: rgba(0, 255, 65, .08) !important; }
/* --- Pre-footer CTA --- */
& .pre-footer-cta {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .pre-footer-cta:hover {
border-color: rgba(0, 255, 65, .6) !important;
box-shadow: 6px 6px 0 0 rgba(0, 255, 65, .18) !important;
}
& .pre-footer-cta__text p { color: #5fbf78 !important; }
& .pre-footer-cta__icon {
background: rgba(0, 255, 65, .08) !important;
border-color: rgba(0, 255, 65, .3) !important;
}
/* --- Footer stays dark; only green-tint newsletter input + accents --- */
& .footer__heading::after { background: #00ff41 !important; }
& .footer a:hover,
& .footer__link:hover,
& .footer__nav-list a:hover,
& .footer__contact-list a:hover { color: #00ff41 !important; }
& .footer__social-icon:hover {
background: #00ff41 !important;
border-color: #00ff41 !important;
color: #04140a !important;
}
& .footer__back-to-top:hover {
background: #00ff41 !important;
color: #04140a !important;
}
& .footer__newsletter-input-wrap {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .3) !important;
}
& .footer__newsletter-input-wrap:hover { border-color: rgba(0, 255, 65, .5) !important; }
& .footer__newsletter-input-wrap:focus-within {
border-color: #00ff41 !important;
box-shadow: 0 0 0 3px rgba(0, 255, 65, .18) !important;
}
& .footer__newsletter-input { color: #c9ffd6 !important; }
& .footer__newsletter-input::placeholder { color: #3f7a4f !important; }
& .footer__newsletter-btn {
background: #00ff41 !important;
color: #04140a !important;
}
& .footer__newsletter-btn:hover { background: #33ff6a !important; }
/* ============================================================
SERVICE-PAGE brutalist panels
============================================================ */
& .sp-hero {
background: #0c140c !important;
color: #c9ffd6 !important;
}
& .sp-hero__title { color: #c9ffd6 !important; -webkit-text-fill-color: #c9ffd6 !important; }
& .sp-hero__icon,
& .sp-hero__visual {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .sp-breadcrumb {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18) !important;
}
& .sp-problem,
& [class*='split']:has(.sp-problem__icon) {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 6px 6px 0 0 rgba(0, 255, 65, .18) !important;
}
& .sp-solution,
& [class*='split']:has(.sp-solution__icon) {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 6px 6px 0 0 rgba(0, 255, 65, .18) !important;
}
& .sp-step__num {
background: #00ff41 !important;
color: #04140a !important;
}
& .sp-audience__tag {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 3px 3px 0 0 rgba(0, 255, 65, .18) !important;
color: #c9ffd6 !important;
}
& .sp-audience__tag:hover {
background: #00ff41 !important;
color: #04140a !important;
box-shadow: 5px 5px 0 0 rgba(0, 255, 65, .18) !important;
}
& .sp-price-card,
& .sp-related-card,
& .sp-sidebar__card,
& .sp-cta-block,
& .sp-faq__item {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .sp-related-card:hover { box-shadow: 8px 8px 0 0 rgba(0, 255, 65, .18) !important; }
& .sp-price-card--popular {
background: #0c140c !important;
border-color: #00ff41 !important;
box-shadow: 8px 8px 0 0 rgba(0, 255, 65, .3) !important;
}
& .sp-price-card__badge,
& .sp-sticky-cta {
background: #00ff41 !important;
color: #04140a !important;
}
& .wd-scene-cap {
background: #050a05 !important;
}
/* ============================================================
HOME/GLOBAL brutalist cards
============================================================ */
& .glass-card {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .glass-card:hover { box-shadow: 8px 8px 0 0 rgba(0, 255, 65, .18) !important; }
& .service-card,
& .service-card:nth-child(2),
& .service-card:nth-child(3),
& .service-card:nth-child(4),
& .service-card:nth-child(5) {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .service-card:hover { box-shadow: 8px 8px 0 0 rgba(0, 255, 65, .18) !important; }
& .service-card__icon {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18) !important;
}
& .service-card__title { color: #c9ffd6 !important; }
& .about__profile-card {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .about__highlight {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18) !important;
}
& .ls-cap__card,
& .ls-cap__card:nth-child(2),
& .ls-cap__card:nth-child(3),
& .ls-cap__card:nth-child(4) {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .ls-cap__card:hover { box-shadow: 8px 8px 0 0 rgba(0, 255, 65, .18) !important; }
& .ls-cap__title { color: #c9ffd6 !important; }
& .testimonial-card {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .testimonial-card__stars { color: #00ff41 !important; }
& .founder-msg__photo-frame,
& .founder-msg__card {
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
}
& .founder-msg__verify {
background: rgba(0, 255, 65, .08) !important;
border-color: rgba(0, 255, 65, .4) !important;
color: #c9ffd6 !important;
}
& .founder-msg__btn { border-color: rgba(0, 255, 65, .4) !important; }
& .founder-msg__btn:hover { box-shadow: 3px 3px 0 0 rgba(0, 255, 65, .18) !important; }
& .founder-msg__btn--call {
background: #00ff41 !important;
color: #04140a !important;
}
& .founder-msg__btn--wa {
background: #0c140c !important;
color: #c9ffd6 !important;
}
& .founder-msg__btn--mail {
background: #0c140c !important;
color: #c9ffd6 !important;
}
/* --- Buttons --- */
/* SOLID CTAs → green fill, dark label; hover BRIGHTENS with a green glow */
& .btn--primary,
& .btn--fly,
& .ls-product__cta,
& .contact__form .btn--primary {
background: #00ff41 !important;
color: #04140a !important;
border-color: #00ff41 !important;
box-shadow: 3px 3px 0 0 rgba(0, 255, 65, .18) !important;
}
& .btn--primary:hover,
& .btn--fly:hover,
& .ls-product__cta:hover,
& .contact__form .btn--primary:hover {
background: #33FF6B !important;
color: #04140a !important;
box-shadow: 4px 4px 0 0 rgba(0,255,65,.25), 0 0 24px rgba(0,255,65,.5) !important;
transform: translate(-2px,-2px);
}
/* OUTLINE / SECONDARY → dark card, green label; hover fills green */
& .btn--secondary,
& .service-card__btn,
& .btn--ghost,
& .btn--outline {
background: #0c140c !important;
color: #c9ffd6 !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 3px 3px 0 0 rgba(0, 255, 65, .18) !important;
}
& .btn--secondary:hover,
& .service-card__btn:hover,
& .btn--ghost:hover,
& .btn--outline:hover {
background: #00ff41 !important;
color: #04140a !important;
border-color: #00ff41 !important;
box-shadow: 5px 5px 0 0 rgba(0, 255, 65, .3) !important;
transform: translate(-2px,-2px);
}
& .btn--fly *, & .ls-product__cta *, & .contact__form .btn--primary *,
& .btn--secondary:hover *, & .service-card__btn:hover *, & .btn--ghost:hover *, & .btn--outline:hover * {
-webkit-text-fill-color: currentColor !important;
}
& .footer__newsletter-btn { background:#00ff41 !important; color:#04140a !important; border-color:#00ff41 !important; }
& .footer__newsletter-btn * { -webkit-text-fill-color:#04140a !important; }
& .footer__newsletter-btn:hover { background:#33FF6B !important; box-shadow:0 0 18px rgba(0,255,65,.5) !important; }
/* --- Bare inputs (global) --- */
& input:not(.mail-subject-input),
& textarea,
& select {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
color: #c9ffd6 !important;
}
& input:not(.mail-subject-input):focus,
& textarea:focus,
& select:focus { border-color: #00ff41 !important; }
& .mail-subject-input{ background:transparent !important; border:none !important; box-shadow:none !important; }
/* --- Nav shell: keep base translucent glass; recolor CTA + hamburger only --- */
& .navbar__link,
& .navbar__links a { color: #c9ffd6 !important; }
& .navbar__cta {
background: #00ff41 !important;
border-color: #00ff41 !important;
color: #04140a !important;
box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18) !important;
}
& .navbar__cta:hover {
background: #33FF6B !important;
color: #04140a !important;
box-shadow: 3px 3px 0 0 rgba(0, 255, 65, .18), 0 0 18px rgba(0,255,65,.5) !important;
}
& .navbar__hamburger {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18) !important;
}
& .navbar__hamburger:active { box-shadow: 1px 1px 0 0 rgba(0, 255, 65, .18) !important; }
& .navbar__hamburger.is-active { background: rgba(0, 255, 65, .15) !important; }
& .navbar__hamburger-line { background: #00ff41 !important; }
/* --- Mobile menu --- */
& .mobile-menu__panel {
background: #050a05 !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 8px 8px 0 0 rgba(0, 255, 65, .18) !important;
}
& .mobile-menu__close {
background: rgba(0, 255, 65, .12) !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18) !important;
color: #c9ffd6 !important;
}
& .mobile-menu__close:hover {
background: #00ff41 !important;
color: #04140a !important;
}
& .mobile-menu__services { border-top-color: rgba(0, 255, 65, .4) !important; }
& .mobile-menu__services-title { color: #5fbf78 !important; }
& .mobile-menu__link {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18) !important;
color: #c9ffd6 !important;
}
& .mobile-menu__link:hover,
& .mobile-menu__link:active {
background: rgba(0, 255, 65, .12) !important;
box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important;
color: #c9ffd6 !important;
}
/* mm-svc: collapse 6 pastel rotations → flat green-tint */
& .mm-svc {
background: #0c140c !important;
border-color: rgba(0, 255, 65, .4) !important;
box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18) !important;
color: #c9ffd6 !important;
}
& .mm-svc:hover,
& .mm-svc:active { box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18) !important; }
& .mm-svc--all {
background: #00ff41 !important;
color: #04140a !important;
}
/* mobile theme switcher → green */
& .mobile-menu__theme { border-top-color:rgba(0,255,65,.3) !important; }
& #theme-switcher-mobile { background:#0C140C !important; border-color:rgba(0,255,65,.4) !important; box-shadow:3px 3px 0 0 rgba(0,255,65,.18) !important; }
& #theme-switcher-mobile .navbar__theme-btn { color:#6FCF88 !important; }
& #theme-switcher-mobile .navbar__theme-btn.active { background:#00ff41 !important; color:#04140a !important; }
}