/* * marketing-overrides.css * * The admin app's Tailwind v4 globals.css (loaded app-wide in the root layout) * ships a "preflight" base reset. On marketing routes that reset leaks in and * fights the ported theme (main.css). Bootstrap's own reboot in main.css wins * for most elements (it is unlayered, beating Tailwind's @layer base), but a few * preflight rules have no theme counterpart and silently break the design. * * This file — loaded AFTER main.css on marketing routes only — re-asserts the * theme's expected base for those specific cases. Each rule documents the live * antstudija.lt computed value it restores. Keep this list minimal and add to it * only when a leak is confirmed against the live site. */ /* Hero media: the theme lets the hero image/video overflow their masked wrapper * (live computed max-width: none → img renders 1024x480, clipped to the diagonal * mask). Tailwind preflight forces `img,video { max-width: 100% }`, which shrinks * the media to the column width and collapses its height, so the absolutely- * positioned mobile headline overflows onto white. Restore the theme behaviour. */ .section-hero .img-wrapper .hero-img, .section-hero .video-wrapper video { max-width: none; } /* Swiper slide stretch guard (testimonials / coaches / instagram carousels). * The theme's swiper-wrapper is `display:flex; align-items:stretch`. When Swiper * works, slides are `position:absolute` so stretch never applies and each card is * its own content height (live: 358/238/316px etc.). But if Swiper drops into a * half-initialised state on a window resize, the slides revert to in-flow flex * items and `align-items:stretch` blows every card up to the (mis-measured, ~732px+) * wrapper height — the giant empty testimonial cards. `align-self:flex-start` * makes a slide refuse to stretch even as an in-flow flex item, so cards stay * content-height in every Swiper state. Visually identical to live in the normal * (absolute) case; only prevents the broken-state blow-up. */ .section-testimonials .swiper-slide, .section-coaches .swiper-slide, .section-instagram .swiper-slide { align-self: flex-start; } /* Bootstrap vs Tailwind ".collapse" clash. Tailwind v4 generates every utility * whose token appears anywhere in scanned source, and "collapse" qualifies, so * globals.css ships `.collapse { visibility: collapse }` (@layer utilities). * Bootstrap's navbar markup (`class="collapse navbar-collapse"`) never declares * `visibility`, so the Tailwind utility was the only declaration and hid the * ENTIRE desktop navbar (nav links + LT/EN switcher) — visibility inherits. * Bootstrap handles collapse states purely via `display`, with visibility at * its default `visible`; restore that on marketing routes. This rule is * unlayered, so it beats the @layer utility regardless of order. */ .collapse { visibility: visible; } /* --------------------------------------------------------------------------- * Homepage "ANT" watermark (live parity). * Live: body.home carries a fixed-attachment background of the outlined ANT * letterform (main.css:26623-26637). Our has no per-route class, so the * homepage wraps its sections in .home-watermark and this block replicates the * body.home rules verbatim (asset paths resolved to /site/...). With * background-attachment:fixed the positioning area is the viewport, so a * wrapper div paints identically to the body background. */ .home-watermark { background-image: url("/site/images/bg/ant-watermark-mobile-gray.svg"); background-attachment: fixed; background-repeat: no-repeat; background-size: calc(100% - 0.75rem); background-position: 0.375rem 0.375rem; } @media (min-width: 992px) { .home-watermark { background-size: contain; background-image: url("/site/images/bg/ant-watermark.svg"); background-position: top center; } } @media (min-width: 1600px) { .home-watermark { background-size: cover; } } /* --------------------------------------------------------------------------- * Coaches carousel (native scroll-snap replacement for the theme Swiper — * see src/components/marketing/home/coaches-carousel.tsx for why). * * Live geometry (theme main.js homeCoachesSwiper + main.css .section-coaches): * slide 10rem/<576 and 15rem/≥576 with 12px gaps; 3 per container from 768px * (16px gaps), 3 from 992px (20px gaps), 4 from 1400px (24px gaps) — with the * next card "peeking" past the .container edge (live: swiper overflow:visible * inside a viewport-wide overflow-hidden). * * --coach-cw = Bootstrap .container INNER width per breakpoint (max-width * minus the 2×0.75rem gutters): 516/696/936/1116/1296px. The full-bleed * scroller's inline padding centres that width, so card edges align with the * .container exactly like live, and overscan shows the peek. */ .section-coaches .coaches-scroller { --coach-cw: 100%; --coach-gap: 0.75rem; /* 12px, live spaceBetween <768 */ display: flex; gap: var(--coach-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; /* live carousel shows no scrollbar */ padding-inline: max(0.75rem, calc((100% - var(--coach-cw)) / 2)); scroll-padding-inline: max(0.75rem, calc((100% - var(--coach-cw)) / 2)); cursor: grab; /* live coaches Swiper runs grabCursor: true */ } .section-coaches .coaches-scroller::-webkit-scrollbar { display: none; } /* Active mouse drag (coaches-carousel.tsx pointer handlers): relax snap so * direct scrollLeft writes track the pointer 1:1, show the grabbing cursor, * and stop text/image selection. Snap re-engages when the class drops after * the release settle. */ .section-coaches .coaches-scroller.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; } .section-coaches .coaches-scroller .coach-slide { flex: 0 0 auto; width: 10rem; /* live .swiper-slide <576 */ scroll-snap-align: start; } @media (min-width: 576px) { .section-coaches .coaches-scroller { --coach-cw: 516px; } .section-coaches .coaches-scroller .coach-slide { width: 15rem; /* live .swiper-slide 576-767 */ } } @media (min-width: 768px) { .section-coaches .coaches-scroller { --coach-cw: 696px; --coach-gap: 1rem; /* live spaceBetween 768+ */ } .section-coaches .coaches-scroller .coach-slide { /* live slidesPerView: 3 */ width: calc((var(--coach-cw) - 2 * var(--coach-gap)) / 3); } } @media (min-width: 992px) { .section-coaches .coaches-scroller { --coach-cw: 936px; --coach-gap: 1.25rem; /* live spaceBetween 992+ */ } } @media (min-width: 1200px) { .section-coaches .coaches-scroller { --coach-cw: 1116px; } } @media (min-width: 1400px) { .section-coaches .coaches-scroller { --coach-cw: 1296px; --coach-gap: 1.5rem; /* live spaceBetween 1400+ */ } .section-coaches .coaches-scroller .coach-slide { /* live slidesPerView: 4 */ width: calc((var(--coach-cw) - 3 * var(--coach-gap)) / 4); } } /* The carousel prev/next are real