/* ========================================================================== Atlas Sport — homepage Paired with atlas-home.php / atlas-home.js The page is one continuous flow: each section opens on the colour the previous one closed with, and boundaries are curves (.atlas-hm__curve), never straight rules. Mobile-first; the desktop layout starts at 993px, matching the theme. ========================================================================== */ .atlas-hm, .atlas-hm *, .atlas-hm *::before, .atlas-hm *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- Breaking out of Shoptimizer's page wrappers header.php leaves #content > .shoptimizer-archive > .col-full open and footer.php closes them, so the page renders inside the theme's 1170px container. The hero video, the curves, the marquee and the 3D band all have to reach the viewport edges, so neutralise the container the same way the theme's own Canvas templates do. .archive-header keeps its box (only the breadcrumb is removed, in PHP) so WooCommerce notices still have somewhere to render. -------------------------------------------------------------------------- */ .atlas-home-page .site-content .shoptimizer-archive .col-full { max-width: none; padding: 0; } .atlas-home-page .site-content .shoptimizer-archive { margin-bottom: 0; } .atlas-home-page .archive-header { padding: 0; } .atlas-home-page .content-area { width: 100%; clear: both; } .atlas-hm { --hm-green-dark: #0f5c30; --hm-green: #177a3c; --hm-green-mid: #2f7d34; --hm-green-light: #4c9a3f; --hm-lime: #7ac943; --hm-ink: #2e3733; --hm-ink-soft: #1c3d27; --hm-muted: #68746c; --hm-hairline: #eceee9; width: 100%; /* Blobs and curves bleed sideways and must not widen the page. `hidden` would make this a scroll container, which silently kills the sticky before/after column in section 11 — `clip` clips without scrolling and leaves the vertical axis visible, so the 3D laptop still overhangs. */ overflow-x: hidden; background: #fff; color: var(--hm-ink); font-family: 'Open Sans', Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* Shoptimizer also puts overflow-x:hidden on itself. Whether that breaks sticky depends on overflow propagating to the viewport, which is fiddly — swapping both to `clip` settles it either way. Old browsers keep `hidden` and lose only the sticky column; nothing else changes for them. */ @supports (overflow-x: clip) { .atlas-hm { overflow-x: clip; } body.atlas-home-page { overflow-x: clip; } } .atlas-hm section { position: relative; } .atlas-hm ul { margin: 0; padding: 0; list-style: none; } .atlas-hm li::before { content: none !important; } .atlas-hm__svg { display: block; width: 100%; height: 100%; } .atlas-hm__inner { max-width: 1472px; margin: 0 auto; } /* --- shared type --------------------------------------------------------- */ .atlas-hm__h2 { margin: 0 0 8px; text-align: center; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--hm-ink); } .atlas-hm__h2 span { color: var(--hm-green-light); } .atlas-hm__h2--alone { margin-bottom: 22px; } .atlas-hm__sub { margin: 0 auto 24px; max-width: 640px; text-align: center; font-size: 16px; line-height: 1.55; color: var(--hm-muted); } /* --- curved transitions -------------------------------------------------- */ /* A wide, shallow ellipse in the PREVIOUS section's end colour, bleeding down into this one — that is what removes every straight boundary. */ .atlas-hm__curve { position: absolute; top: -1px; left: -8%; width: 116%; height: 40px; pointer-events: none; border-radius: 0 0 50% 50% / 0 0 100% 100%; } .atlas-hm__curve--counters { background: #f3f9ed; } .atlas-hm__curve--gallery { background: #fff; } .atlas-hm__curve--testimonials { background: #fff; } .atlas-hm__curve--statement { background: #f6faf2; } .atlas-hm__curve--products { background: #eaf4e0; } .atlas-hm__curve--map { background: #fff; } .atlas-hm__curve--p3dtop { background: #f2f8ec; } .atlas-hm__curve--why { background: #f1f7ea; } .atlas-hm__curve--p3dbottom { top: auto; bottom: -1px; height: 48px; background: #f7fbf4; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } /* --- decorative blobs ---------------------------------------------------- */ /* Kept fully INSIDE their section: a blob that overflows gets painted over by the next section's background, which reads as a hard cut. */ .atlas-hm__blob { position: absolute; display: block; pointer-events: none; } .atlas-hm__blob--a1 { z-index: 0; left: -110px; bottom: 12px; width: 320px; height: 210px; border-radius: 52% 48% 46% 54% / 60% 56% 44% 40%; background: #eaf4e0; opacity: .8; } .atlas-hm__blob--a2 { display: none; } .atlas-hm__blob--s1 { display: none; } /* ========================================================================== 1. hero ========================================================================== */ .atlas-hm__hero { position: relative; height: 430px; overflow: hidden; background: #0d2c19; } .atlas-hm__herovideo { position: absolute; inset: 0; } /* Sized to cover, then scaled a further 20%: controls=0 still lets YouTube paint its title bar and branding in the top and bottom strips of the frame, and over-scaling pushes those strips outside the section's crop. pointer-events:none keeps hover chrome from ever being triggered. */ .atlas-hm__herovideo iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; transform: translate(-50%, -50%) scale(1.2); border: 0; pointer-events: none; } /* Two veils: a vertical wash plus a pool behind the copy, so the headline holds up over bright frames of the footage. */ .atlas-hm__heroveil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,26,14,.52) 0%, rgba(6,26,14,.46) 45%, rgba(6,26,14,.80) 100%); } .atlas-hm__heropool { position: absolute; inset: 0; background: radial-gradient(ellipse 82% 44% at 50% 50%, rgba(4,20,11,.60) 0%, rgba(4,20,11,.32) 58%, rgba(4,20,11,0) 100%); } .atlas-hm__heroinner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 24px; } .atlas-hm__herotitle { margin: 0; font-size: 27px; font-weight: 800; line-height: 1.32; letter-spacing: -.02em; color: #fff; text-align: center; text-wrap: balance; text-shadow: 0 2px 5px rgba(0,0,0,.55), 0 6px 24px rgba(0,0,0,.45); } .atlas-hm__rotator { color: #8fe05a; text-shadow: 0 2px 5px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.45); } /* ========================================================================== 2. despre noi ========================================================================== */ .atlas-hm__about { background: linear-gradient(180deg, #fff 0%, #fbfdf8 60%, #f3f9ed 100%); padding: 44px 22px 40px; overflow: hidden; } /* Both sit above the section's decorative blobs. */ .atlas-hm__abouthead, .atlas-hm__aboutgrid { position: relative; z-index: 2; } .atlas-hm__abouttitle { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--hm-green-dark); } .atlas-hm__aboutlead { margin: 12px 0 22px; font-size: 16px; line-height: 1.6; color: #5b6a61; text-wrap: pretty; } .atlas-hm__aboutvideo { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #eef2ef; box-shadow: 0 16px 32px rgba(12,100,54,.16); } .atlas-hm__aboutvideo img { display: block; width: 100%; height: 100%; object-fit: cover; } .atlas-hm__badges { position: relative; z-index: 3; display: flex; align-items: center; margin-top: -30px; padding: 14px 4px; border-radius: 14px; background: #fff; box-shadow: 0 12px 26px rgba(60,90,50,.12); } .atlas-hm__badges > div { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-left: 1px solid var(--hm-hairline); } .atlas-hm__badges > div:first-child { border-left: 0; } .atlas-hm__badgeicon { flex: 0 0 auto; width: 21px; height: 21px; color: var(--hm-green); } .atlas-hm__badgetext { display: flex; flex-direction: column; min-width: 0; } .atlas-hm__badgetext strong { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--hm-ink-soft); } .atlas-hm__badgetext span { font-size: 11px; line-height: 1.3; color: #7b8880; } .atlas-hm__features { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; } .atlas-hm__features li { display: flex; align-items: center; gap: 14px; margin: 0; /* the theme puts a few px under every li */ padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(60,90,50,.07); } .atlas-hm__featicon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--hm-green); color: #fff; } .atlas-hm__featicon .atlas-hm__svg { width: 22px; height: 22px; } .atlas-hm__feattext { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 1px solid #e8ece6; } .atlas-hm__feattext strong { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--hm-ink-soft); } .atlas-hm__feattext span { font-size: 13px; line-height: 1.45; color: #6b7871; text-wrap: pretty; } /* ========================================================================== 3. counters ========================================================================== */ .atlas-hm__counters { z-index: 1; background: linear-gradient(180deg, #f3f9ed 0%, #fbfdf8 46%, #fff 100%); padding: 60px 22px 40px; } .atlas-hm__countergrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .atlas-hm__counter { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 14px 20px; border: 1px solid var(--hm-hairline); border-radius: 14px; background: #fbfdf9; } .atlas-hm__counter img { display: block; width: 44px; height: 44px; object-fit: contain; margin-bottom: 12px; } .atlas-hm__counternum { display: flex; align-items: baseline; justify-content: center; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--hm-green-mid); } .atlas-hm__plus { color: var(--hm-lime); } .atlas-hm__countertitle { margin: 10px 0 0; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--hm-ink); } .atlas-hm__counterdesc { margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: var(--hm-muted); text-wrap: pretty; } /* ========================================================================== 4. video gallery (coverflow) ========================================================================== */ .atlas-hm__gallery { background: #fff; padding: 60px 0 40px; overflow: hidden; } .atlas-hm__vg { position: relative; margin-top: 22px; } .atlas-hm__vgviewport { position: relative; height: 300px; perspective: 1400px; } .atlas-hm__vgstage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .atlas-hm__vgcard { position: absolute; left: 50%; top: 50%; width: min(300px, 78vw); aspect-ratio: 4 / 3; cursor: pointer; transform: translate(-50%, -50%); transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease; } .atlas-hm__vgmedia { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #eef2ef; box-shadow: 0 14px 34px rgba(12,30,20,.16); transition: box-shadow .4s ease; } .atlas-hm__vgcard.is-active .atlas-hm__vgmedia { box-shadow: 0 0 0 3px #61CE70, 0 22px 46px rgba(12,100,54,.22), 0 0 34px rgba(97,206,112,.38); } .atlas-hm__vgmedia img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.97); transition: filter .4s ease; } .atlas-hm__vgcard.is-active .atlas-hm__vgmedia img { filter: none; } /* Side cards recede by fading toward the white page. */ .atlas-hm__vgcard:not(.is-active) .atlas-hm__vgmedia::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.42); } .atlas-hm__vgplay { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; background: #61CE70; box-shadow: 0 8px 22px rgba(0,0,0,.30); transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease; } .atlas-hm__vgplay::before { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #07140d; } .atlas-hm__vgcard.is-active .atlas-hm__vgplay { opacity: 1; transform: translate(-50%, -50%) scale(1); } .atlas-hm__vgcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 18px 14px; background: linear-gradient(transparent, rgba(5,11,7,.88)); } .atlas-hm__vgloc { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #61CE70; margin-bottom: 2px; } .atlas-hm__vgname { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; color: #fff; } .atlas-hm__vgiframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 16px; background: #000; } /* --- arrows + dots (shared with the testimonial carousel) --- */ .atlas-hm__arrow { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: #0C6436; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(12,100,54,.28); transition: background .25s ease, transform .15s ease; } .atlas-hm__arrow:hover { background: #0a542d; } .atlas-hm__arrow:active { transform: scale(.92); } .atlas-hm__arrow .atlas-hm__svg { width: 20px; height: 20px; } .atlas-hm__arrow--prev, .atlas-hm__arrow--next { position: absolute; top: calc(50% - 21px); z-index: 20; } .atlas-hm__arrow--prev { left: 10px; } .atlas-hm__arrow--next { right: 10px; } .atlas-hm__dots { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; } .atlas-hm__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #cfd6d2; cursor: pointer; transition: background .25s ease, transform .25s ease; } .atlas-hm__dot.is-active { background: #0C6436; transform: scale(1.25); } /* ========================================================================== 5. testimonials ========================================================================== */ .atlas-hm__testimonials { background: linear-gradient(180deg, #fff 0%, #fbfdf8 58%, #f6faf2 100%); padding: 60px 22px 40px; } .atlas-hm__tcviewport { overflow: hidden; } .atlas-hm__tctrack { display: flex; --per-view: 1; --index: 0; transform: translateX(calc(var(--index) * -100% / var(--per-view))); transition: transform .5s ease; } .atlas-hm__tcslide { flex: 0 0 calc(100% / var(--per-view)); max-width: calc(100% / var(--per-view)); padding: 10px 8px; } .atlas-hm__tccard { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 22px 26px; border: 1px solid #e6e8ea; border-radius: 14px; background: #fff; box-shadow: 0 6px 24px rgba(12,100,54,.06); } .atlas-hm__quote { display: block; font: 400 52px/.5 Georgia, 'Times New Roman', serif; color: #0C6436; opacity: .18; margin-bottom: 18px; } .atlas-hm__tccard p { margin: 0 0 20px; flex: 1 0 auto; font-size: 15px; font-style: italic; line-height: 1.7; color: #515962; text-wrap: pretty; } .atlas-hm__tcname { font-size: 17px; font-weight: 700; line-height: 1.3; color: #0C6436; margin-bottom: 4px; } .atlas-hm__tcrole { font-size: 13px; font-weight: 500; line-height: 1.4; color: #1a9956; } .atlas-hm__tcnav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; } .atlas-hm__tcnav .atlas-hm__dots { margin-top: 0; } /* ========================================================================== 6. statement ========================================================================== */ .atlas-hm__statement { background: linear-gradient(180deg, #f6faf2 0%, #f1f7ea 55%, #eaf4e0 100%); padding: 60px 22px 44px; overflow: hidden; } .atlas-hm__statementinner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .atlas-hm__statementicon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: var(--hm-green); color: #fff; } .atlas-hm__statementicon .atlas-hm__svg { width: 31px; height: 31px; } .atlas-hm__statementinner p { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; color: var(--hm-ink-soft); text-wrap: pretty; } /* Three highlighted phrases; 800 against the paragraph's 600 so they carry weight as well as colour. */ .atlas-hm__statementinner p span { color: var(--hm-green-mid); font-weight: 800; } /* ========================================================================== 7. products (WooCommerce) ========================================================================== */ .atlas-hm__products { background: linear-gradient(180deg, #eaf4e0 0%, #f7fbf3 42%, #fff 100%); padding: 60px 0 40px; overflow: hidden; } .atlas-hm__products .atlas-hm__h2 { margin: 0 20px 24px; } .atlas-hm__woo { padding: 0 20px; } /* Woo's own grid, restyled to match the mockup cards. */ .atlas-hm__woo ul.products { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } .atlas-hm__woo ul.products li.product { width: auto !important; margin: 0 !important; padding: 0; float: none !important; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hm-hairline); border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(60,90,50,.08); transition: box-shadow .18s ease; } .atlas-hm__woo ul.products li.product:hover { box-shadow: 0 16px 32px rgba(60,90,50,.14); } .atlas-hm__woo ul.products li.product img { display: block; width: 100%; height: auto; margin: 0; } .atlas-hm__woo ul.products li.product .woocommerce-loop-product__title { padding: 14px 14px 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--hm-ink); } .atlas-hm__woo ul.products li.product .price { display: none; } .atlas-hm__woo ul.products li.product .button, .atlas-hm__woo ul.products li.product .added_to_cart { display: flex; align-items: center; justify-content: center; margin: 12px 14px 16px; padding: 12px; border-radius: 9px; background: #43a047; color: #fff; font-size: 14px; font-weight: 700; } .atlas-hm__woo ul.products li.product .button:hover { background: #3d9241; } /* .mobile-scroll on the shortcode: swipe rail instead of a grid. */ @media (max-width: 640px) { .atlas-hm__woo ul.products.mobile-scroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; } .atlas-hm__woo ul.products.mobile-scroll li.product { flex: 0 0 auto; width: 250px; scroll-snap-align: start; } } /* ========================================================================== 8. map ========================================================================== */ .atlas-hm__map { background: linear-gradient(180deg, #fff 0%, #fbfdf8 62%, #f2f8ec 100%); padding: 60px 22px 40px; } .atlas-hm__mapimg img { display: block; width: 100%; height: auto; } .atlas-hm__stats { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; } .atlas-hm__stats > div { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; } .atlas-hm__statvalue { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--hm-green-mid); } .atlas-hm__statlabel { font-size: 13px; font-weight: 500; line-height: 1.35; color: #5a675f; } /* ========================================================================== 9. proiectare 3D ========================================================================== */ /* No overflow here: on desktop the laptop is pulled 110px above the section's top edge and clipping it cuts the screen off. The blobs and curves are clipped by .atlas-hm__p3dbg instead, which is exactly the section's box. */ .atlas-hm__p3d { position: relative; padding: 60px 24px 56px; background: linear-gradient(180deg, #f2f8ec 0%, #fff 45%, #fdfefb 80%, #f7fbf4 100%); } .atlas-hm__p3dbg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .atlas-hm__p3dbg > span { position: absolute; display: block; } .atlas-hm__p3dfield { left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(160deg, #eef6e6 0%, #e4f0d8 60%, #d9ebc9 100%); } .atlas-hm__p3dwash { inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.90) 40%, rgba(255,255,255,.96) 62%, rgba(244,249,239,.9) 100%); } .atlas-hm__p3dtint { display: none; } .atlas-hm__blob--p1 { left: -110px; bottom: 20px; width: 260px; height: 150px; border-radius: 52% 48% 46% 54% / 60% 56% 44% 40%; background: #e4f0d5; opacity: .8; } .atlas-hm__blob--p2 { display: none; } .atlas-hm__p3ddevice { position: relative; z-index: 1; height: 250px; margin: 24px 0 0; filter: drop-shadow(0 20px 30px rgba(24,44,20,.16)); } .atlas-hm__p3ddevice img { display: block; width: 100%; height: 100%; object-fit: contain; } .atlas-hm__p3dcopy { position: relative; z-index: 2; display: flex; flex-direction: column; } .atlas-hm__p3dtitle { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--hm-ink); white-space: nowrap; } .atlas-hm__p3dtitle span { color: var(--hm-green-light); } .atlas-hm__p3dcopy p { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: #54615a; text-wrap: pretty; } .atlas-hm__cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; padding: 11px 11px 11px 26px; border: 0; border-radius: 999px; background: #5aa845; color: #fff; font-family: inherit; font-size: 19px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 12px 24px rgba(63,154,61,.26); transition: background-color .18s ease; } .atlas-hm__cta:hover { background: #4f9a3c; } .atlas-hm__ctaicon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; } .atlas-hm__ctaicon .atlas-hm__svg { width: 19px; height: 19px; } /* Mobile order: title + text, laptop, CTA. */ .atlas-hm__p3d { display: flex; flex-direction: column; } .atlas-hm__p3dbg { order: 0; } .atlas-hm__p3dcopy { order: 1; } .atlas-hm__p3ddevice { order: 2; } /* ========================================================================== 10. client logos ========================================================================== */ .atlas-hm__clients { background: linear-gradient(180deg, #f7fbf4 0%, #fbfdf8 46%, #f1f7ea 100%); padding: 48px 0 44px; overflow: hidden; } .atlas-hm__marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } .atlas-hm__marqueetrack { display: flex; width: max-content; align-items: center; animation: atlas-hm-scroll 64s linear infinite; } .atlas-hm__marquee:hover .atlas-hm__marqueetrack { animation-play-state: paused; } @keyframes atlas-hm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .atlas-hm__logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 20px; } .atlas-hm__logo img { max-height: 52px; width: auto; max-width: 120px; object-fit: contain; opacity: .82; transition: opacity .25s ease, transform .25s ease; } .atlas-hm__logo:hover img { opacity: 1; transform: scale(1.08); } /* ========================================================================== 11. de ce Atlas Sport — reasons + before/after ========================================================================== */ .atlas-hm__why { background: linear-gradient(180deg, #f1f7ea 0%, #fbfdf8 40%, #fff 100%); padding: 60px 22px 44px; overflow: hidden; } .atlas-hm__whytitle { position: relative; z-index: 2; margin: 0 auto 22px; text-align: center; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--hm-ink); } .atlas-hm__whytitle span { color: var(--hm-green-light); } .atlas-hm__whygrid { position: relative; z-index: 2; display: flex; flex-direction: column; } /* --- before / after --- */ .atlas-hm__ba { order: 1; } .atlas-hm__bastage { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #eef2ef; box-shadow: 0 16px 32px rgba(12,100,54,.16); } .atlas-hm__baslide { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .atlas-hm__baslide.is-active { opacity: 1; } .atlas-hm__baslide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The "before" image is clipped from the right; the handle sets --split. */ .atlas-hm__baclip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); } .atlas-hm__balabel { position: absolute; top: 12px; z-index: 3; padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase; } .atlas-hm__balabel--before { left: 12px; background: rgba(8,26,14,.62); color: #fff; } .atlas-hm__balabel--after { right: 12px; background: #61CE70; color: #07140d; } .atlas-hm__bahandle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); z-index: 3; width: 2px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.35); pointer-events: none; } .atlas-hm__baknob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--hm-green-dark); box-shadow: 0 5px 14px rgba(0,0,0,.26); } .atlas-hm__baknob .atlas-hm__svg { width: 19px; height: 19px; } /* Hand drifts side to side to advertise the drag. */ .atlas-hm__bahand { position: absolute; top: calc(50% + 58px); left: 50%; width: 48px; height: 48px; animation: atlas-hm-hand 2.6s ease-in-out infinite; filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)); } @keyframes atlas-hm-hand { 0%, 100% { transform: translate(-50%, -50%); } 30% { transform: translate(calc(-50% - 10px), -50%); } 65% { transform: translate(calc(-50% + 10px), -50%); } } .atlas-hm__barange { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; } .atlas-hm__bacaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; margin-top: 14px; } .atlas-hm__batitle { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--hm-ink-soft); } .atlas-hm__baloc { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--hm-green-light); } .atlas-hm__badots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; } .atlas-hm__badot { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: #cfd6d2; cursor: pointer; transition: background .25s ease, transform .25s ease; } .atlas-hm__badot.is-active { background: #0C6436; transform: scale(1.25); } /* --- the ten reasons --- */ .atlas-hm__reasons { order: 2; position: relative; max-height: 320px; margin-top: 30px; padding-right: 10px; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: #c9d8c0 transparent; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 86%, transparent 100%); } .atlas-hm__reason { display: flex; flex-direction: column; gap: 5px; padding: 15px 0; border-bottom: 1px solid #e6ece0; } .atlas-hm__reasonhead { display: flex; align-items: baseline; gap: 9px; } .atlas-hm__reasonnum { font-size: 13px; font-weight: 700; line-height: 1; color: var(--hm-lime); } .atlas-hm__reasondash { font-size: 13px; line-height: 1; color: #a9b6ac; } .atlas-hm__reasonhead h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--hm-ink-soft); } .atlas-hm__reason p { margin: 0 0 0 34px; font-size: 14px; line-height: 1.55; color: var(--hm-muted); text-wrap: pretty; } /* ========================================================================== modal ========================================================================== */ .atlas-hm__modal { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; padding: 20px; } .atlas-hm__modal[hidden] { display: none; } .atlas-hm__backdrop { position: absolute; inset: 0; background: rgba(24,44,20,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .atlas-hm__dialog { position: relative; width: 560px; max-width: 100%; max-height: 100%; overflow: auto; padding: 36px 30px 34px; border-radius: 20px; background: #fff; box-shadow: 0 40px 90px rgba(20,40,16,.34); } .atlas-hm__close { position: absolute; right: 18px; top: 18px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #f2f5ef; color: #3d4a42; cursor: pointer; } .atlas-hm__close:hover { background: #e7ebe3; } .atlas-hm__close .atlas-hm__svg { width: 19px; height: 19px; } .atlas-hm__dialog h3 { margin: 0 0 8px; padding-right: 40px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--hm-ink); } .atlas-hm__dialog > p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: #5a675f; } .atlas-hm__form input[type="text"], .atlas-hm__form input[type="email"], .atlas-hm__form input[type="tel"], .atlas-hm__form textarea, .atlas-hm__form select { width: 100%; padding: 13px 15px; border: 1px solid #e0e6db; border-radius: 12px; background: #fbfcfa; font-family: inherit; font-size: 15px; color: #3c4a41; } .atlas-hm__form textarea { min-height: 110px; resize: vertical; } .atlas-hm__form input:focus, .atlas-hm__form textarea:focus { outline: none; border-color: #bcd6b3; } .atlas-hm__form p { margin: 0 0 14px; } .atlas-hm__form label { display: block; font-size: 14px; font-weight: 600; color: #46524b; } .atlas-hm__form input[type="submit"] { width: 100%; padding: 15px 20px; border: 0; border-radius: 12px; background: #5aa845; color: #fff; font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; } .atlas-hm__form input[type="submit"]:hover { background: #4f9a3c; } /* ========================================================================== Desktop (≥993px) ========================================================================== */ @media (min-width: 993px) { .atlas-hm__h2 { font-size: 46px; line-height: 1.1; } .atlas-hm__h2--alone { margin-bottom: 22px; } .atlas-hm__sub { margin-bottom: 40px; font-size: 19px; line-height: 1.6; } .atlas-hm__sub--wide { max-width: none; white-space: nowrap; } .atlas-hm__curve { left: -6%; width: 112%; height: 70px; } .atlas-hm__curve--gallery, .atlas-hm__curve--testimonials, .atlas-hm__curve--map { height: 60px; } .atlas-hm__curve--p3dbottom { height: 86px; } /* --- 1. hero --- */ .atlas-hm__hero { height: 600px; } .atlas-hm__heroveil { background: linear-gradient(180deg, rgba(6,26,14,.52) 0%, rgba(6,26,14,.44) 45%, rgba(6,26,14,.78) 100%); } .atlas-hm__heropool { background: radial-gradient(ellipse 60% 46% at 50% 50%, rgba(4,20,11,.62) 0%, rgba(4,20,11,.34) 55%, rgba(4,20,11,0) 100%); } .atlas-hm__heroinner { padding: 0 96px; } .atlas-hm__herotitle { max-width: 1400px; font-size: 56px; line-height: 1.24; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 8px 34px rgba(0,0,0,.45); } /* --- 2. despre noi --- */ .atlas-hm__about { padding: 80px 64px 36px; } .atlas-hm__aboutgrid { display: flex; align-items: center; gap: 70px; } .atlas-hm__aboutcopy { flex: 1 1 0; min-width: 0; } .atlas-hm__aboutmedia { flex: 0 0 auto; width: 760px; } .atlas-hm__abouttitle { font-size: 60px; line-height: 1.05; } /* No max-width: the lead runs the full section so it stays on one line. */ .atlas-hm__aboutlead { margin: 16px 0 34px; font-size: 20px; } .atlas-hm__blob--a1 { left: -150px; bottom: 14px; width: 520px; height: 300px; } .atlas-hm__blob--a2 { display: block; z-index: 0; right: -120px; bottom: 22px; width: 420px; height: 260px; border-radius: 56% 44% 52% 48% / 62% 50% 50% 38%; background: #eef6e6; opacity: .75; } .atlas-hm__aboutvideo { border-radius: 20px; box-shadow: 0 26px 54px rgba(12,100,54,.18); } .atlas-hm__badges { margin-top: -58px; padding: 18px 10px; border-radius: 16px; box-shadow: 0 16px 34px rgba(60,90,50,.13); } .atlas-hm__badges > div { gap: 13px; padding: 0 24px; } .atlas-hm__badgeicon { width: 28px; height: 28px; } .atlas-hm__badgetext strong { font-size: 16px; } .atlas-hm__badgetext span { font-size: 14px; line-height: 1.35; } /* The icon, not the text, used to set the row height — at 66px it padded each card out to 94px. 52px lets the two-line text define the row. */ .atlas-hm__features { gap: 8px; } .atlas-hm__features li { gap: 18px; margin: 0; padding: 12px 24px 12px 16px; border-radius: 16px; box-shadow: 0 6px 20px rgba(60,90,50,.07); } .atlas-hm__featicon { width: 52px; height: 52px; } .atlas-hm__featicon .atlas-hm__svg { width: 24px; height: 24px; } .atlas-hm__feattext { gap: 4px; padding-left: 18px; } .atlas-hm__feattext strong { font-size: 22px; } .atlas-hm__feattext span { font-size: 16px; line-height: 1.5; } /* --- 3. counters --- */ /* Top padding stays clear of the 70px curve bleeding down from "Despre noi". */ .atlas-hm__counters { padding: 72px 64px 68px; } .atlas-hm__counters .atlas-hm__h2--alone { margin-bottom: 22px; } .atlas-hm__sub { margin-bottom: 46px; } .atlas-hm__countergrid { grid-template-columns: repeat(4, 1fr); gap: 28px; } .atlas-hm__counter { padding: 34px 24px 30px; border-radius: 16px; } .atlas-hm__counter img { width: 60px; height: 60px; margin-bottom: 18px; } .atlas-hm__counternum { font-size: 52px; } .atlas-hm__countertitle { margin-top: 14px; font-size: 20px; } .atlas-hm__counterdesc { margin-top: 9px; font-size: 16px; line-height: 1.6; } /* --- 4. gallery --- */ .atlas-hm__gallery { padding: 56px 0 36px; } .atlas-hm__gallery .atlas-hm__h2--alone { margin-bottom: 22px; } .atlas-hm__sub { margin-bottom: 34px; } /* The cards project to ~300px tall, so a 600px stage left ~105px of dead air above and below them. 400px keeps ~50px for the shadow and the tilt and brings the whole section under 600px. */ .atlas-hm__vgviewport { height: 400px; perspective: 2200px; } .atlas-hm__vgcard { width: 520px; } .atlas-hm__vgplay { width: 96px; height: 96px; } .atlas-hm__vgplay::before { border-width: 16px 0 16px 26px; } .atlas-hm__vgcaption { padding: 52px 26px 22px; } .atlas-hm__vgloc { font-size: 13px; margin-bottom: 3px; } .atlas-hm__vgname { font-size: 22px; } .atlas-hm__arrow { width: 48px; height: 48px; } .atlas-hm__arrow .atlas-hm__svg { width: 22px; height: 22px; } .atlas-hm__arrow--prev { left: 56px; } .atlas-hm__arrow--next { right: 56px; } /* --- 5. testimonials --- */ /* Top padding clears the 60px curve bleeding down from the gallery. */ .atlas-hm__testimonials { padding: 72px 64px 68px; } .atlas-hm__testimonials .atlas-hm__h2 { margin-bottom: 44px; } .atlas-hm__tctrack { --per-view: 3; } .atlas-hm__tcslide { padding: 10px 12px; } .atlas-hm__tccard { padding: 34px 30px 30px; } .atlas-hm__quote { font-size: 60px; margin-bottom: 20px; } .atlas-hm__tccard p { margin-bottom: 24px; font-size: 16px; } .atlas-hm__tcname { font-size: 18px; margin-bottom: 5px; } .atlas-hm__tcrole { font-size: 14px; } .atlas-hm__tcnav { gap: 18px; margin-top: 30px; } /* --- 6. statement --- */ .atlas-hm__statement { padding: 96px 64px 84px; } .atlas-hm__statementinner { flex-direction: row; align-items: center; text-align: left; gap: 48px; max-width: 1300px; } .atlas-hm__statementicon { width: 96px; height: 96px; } .atlas-hm__statementicon .atlas-hm__svg { width: 44px; height: 44px; } .atlas-hm__statementinner p { font-size: 34px; line-height: 1.45; } .atlas-hm__blob--s1 { display: block; right: -160px; top: 34px; width: 480px; height: 280px; border-radius: 56% 44% 52% 48% / 62% 50% 50% 38%; background: #e2efd4; opacity: .65; } /* --- 7. products --- */ .atlas-hm__products { padding: 96px 64px 68px; } .atlas-hm__products .atlas-hm__h2 { margin: 0 0 44px; } .atlas-hm__woo { padding: 0; } .atlas-hm__woo ul.products { grid-template-columns: repeat(4, 1fr); gap: 28px; } .atlas-hm__woo ul.products li.product { border-radius: 16px; box-shadow: 0 10px 26px rgba(60,90,50,.08); } .atlas-hm__woo ul.products li.product .woocommerce-loop-product__title { padding: 20px 20px 0; font-size: 19px; min-height: 72px; } .atlas-hm__woo ul.products li.product .button { margin: 16px 20px 22px; padding: 14px 16px; border-radius: 10px; font-size: 16px; } /* --- 8. map --- */ .atlas-hm__map { padding: 96px 64px 68px; } .atlas-hm__mapgrid { display: flex; align-items: center; gap: 56px; } .atlas-hm__mapimg { flex: 1 1 auto; min-width: 0; } .atlas-hm__stats { flex: 0 0 auto; flex-direction: column; justify-content: flex-start; width: 320px; gap: 26px; margin-top: 0; } .atlas-hm__stats > div { align-items: flex-start; gap: 4px; padding-left: 22px; border-left: 4px solid #6cbb45; text-align: left; } .atlas-hm__statvalue { font-size: 44px; } .atlas-hm__statlabel { font-size: 17px; line-height: 1.4; } /* --- 9. proiectare 3D --- */ .atlas-hm__p3d { display: block; height: 520px; padding: 0; background: linear-gradient(180deg, #f2f8ec 0%, #f2f8ec 8%, #fbfdf8 46%, #fdfefb 78%, #f7fbf4 100%); } .atlas-hm__p3dfield { left: auto; right: 0; top: 0; bottom: 0; width: 78%; height: auto; background: linear-gradient(160deg, #eef6e6 0%, #e4f0d8 42%, #dcedcd 72%, rgba(233,243,222,0) 100%); } .atlas-hm__p3dwash { background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 30%, rgba(255,255,255,.86) 40%, rgba(255,255,255,.58) 55%, rgba(255,255,255,.30) 74%, rgba(255,255,255,.20) 100%); } .atlas-hm__p3dtint { display: block; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 34%, rgba(232,243,222,.55) 100%); } .atlas-hm__blob--p1 { left: -150px; bottom: 26px; width: 400px; height: 240px; opacity: .85; } .atlas-hm__blob--p2 { display: block; left: -80px; bottom: 34px; width: 230px; height: 130px; border-radius: 56% 44% 52% 48% / 62% 50% 50% 38%; background: #d6e9c2; opacity: .75; } /* Laptop breaks out of the band's top edge. */ .atlas-hm__p3ddevice { position: absolute; right: 0; top: -110px; z-index: 3; width: 820px; height: 610px; margin: 0; filter: drop-shadow(0 40px 60px rgba(24,44,20,.20)); pointer-events: none; } .atlas-hm__p3dcopy { position: absolute; inset: 0; z-index: 2; justify-content: center; width: 680px; height: 100%; padding-left: 88px; pointer-events: none; } .atlas-hm__p3dtitle { font-size: 52px; line-height: 1.05; } .atlas-hm__p3dcopy p { margin-top: 26px; max-width: 520px; font-size: 22px; } .atlas-hm__cta { align-self: flex-start; gap: 22px; margin-top: 38px; padding: 13px 13px 13px 34px; font-size: 23px; box-shadow: 0 14px 28px rgba(63,154,61,.28); pointer-events: auto; } .atlas-hm__ctaicon { width: 46px; height: 46px; } .atlas-hm__ctaicon .atlas-hm__svg { width: 22px; height: 22px; } /* --- 10. clients --- */ .atlas-hm__clients { padding: 76px 0 72px; } .atlas-hm__clients .atlas-hm__h2--alone { margin-bottom: 22px; } .atlas-hm__sub { margin-bottom: 44px; } .atlas-hm__marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .atlas-hm__marqueetrack { animation-duration: 90s; } .atlas-hm__logo { height: 74px; padding: 0 34px; } .atlas-hm__logo img { max-height: 74px; max-width: 170px; } .atlas-hm__dialog { padding: 36px 38px 34px; } .atlas-hm__dialog h3 { font-size: 28px; } } /* --- 11. de ce Atlas Sport (desktop) --- */ @media (min-width: 993px) { .atlas-hm__why { padding: 96px 64px 84px; } /* One line from ~1400px up: at a flat 60px the headline needs 1451px and wraps on a 1440 laptop. 3.6vw keeps it single-row and still reaches the design's 60px on wide screens. */ .atlas-hm__whytitle { max-width: 1472px; margin-bottom: 52px; font-size: clamp(44px, 3.6vw, 60px); line-height: 1.12; letter-spacing: -.025em; } .atlas-hm__whygrid { flex-direction: row; align-items: flex-start; gap: 72px; } .atlas-hm__reasons { order: 1; flex: 1 1 0; min-width: 0; max-height: 430px; margin-top: 0; padding-right: 14px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 88%, transparent 100%); } .atlas-hm__reason { gap: 6px; padding: 20px 0; } .atlas-hm__reasonhead { gap: 12px; } .atlas-hm__reasonnum { font-size: 16px; letter-spacing: .02em; } .atlas-hm__reasondash { font-size: 16px; } .atlas-hm__reasonhead h3 { font-size: 21px; } .atlas-hm__reason p { margin-left: 46px; font-size: 16px; line-height: 1.6; } /* Sticky, so the comparison stays put while the list is read. */ .atlas-hm__ba { order: 2; flex: 0 0 auto; width: 720px; position: sticky; top: 40px; } .atlas-hm__bastage { border-radius: 18px; box-shadow: 0 22px 46px rgba(12,100,54,.18); } .atlas-hm__balabel { top: 18px; padding: 7px 15px; font-size: 12px; } .atlas-hm__balabel--before { left: 18px; } .atlas-hm__balabel--after { right: 18px; } .atlas-hm__bahandle { width: 3px; box-shadow: 0 0 12px rgba(0,0,0,.35); } .atlas-hm__baknob { width: 64px; height: 64px; box-shadow: 0 6px 18px rgba(0,0,0,.28); } .atlas-hm__baknob .atlas-hm__svg { width: 26px; height: 26px; } .atlas-hm__bahand { top: calc(50% + 70px); width: 70px; height: 70px; animation-name: atlas-hm-hand-lg; } @keyframes atlas-hm-hand-lg { 0%, 100% { transform: translate(-50%, -50%); } 30% { transform: translate(calc(-50% - 14px), -50%); } 65% { transform: translate(calc(-50% + 14px), -50%); } } .atlas-hm__bacaption { gap: 8px; margin-top: 18px; } .atlas-hm__batitle { font-size: 26px; } .atlas-hm__baloc { font-size: 21px; } .atlas-hm__badots { gap: 9px; margin-top: 16px; } .atlas-hm__badot { width: 22px; height: 22px; } .atlas-hm__h2--alone { margin-bottom: 40px; } } /* 993–1400px: the laptop crowds the copy at the narrow end of the range. */ @media (min-width: 993px) and (max-width: 1400px) { .atlas-hm__about, .atlas-hm__counters, .atlas-hm__testimonials, .atlas-hm__statement, .atlas-hm__products, .atlas-hm__map { padding-left: 32px; padding-right: 32px; } .atlas-hm__aboutgrid { gap: 40px; } .atlas-hm__aboutmedia { width: 520px; } .atlas-hm__abouttitle { font-size: 46px; } .atlas-hm__h2 { font-size: 38px; } .atlas-hm__herotitle { font-size: 44px; } .atlas-hm__vgcard { width: 400px; } .atlas-hm__vgviewport { height: 500px; } .atlas-hm__statementinner p { font-size: 26px; } .atlas-hm__p3d { height: 460px; } .atlas-hm__p3ddevice { width: 620px; height: 470px; top: -80px; } .atlas-hm__p3dcopy { width: 560px; padding-left: 40px; } .atlas-hm__p3dtitle { font-size: 40px; } .atlas-hm__p3dcopy p { font-size: 18px; } .atlas-hm__sub--wide { white-space: normal; } .atlas-hm__why { padding-left: 32px; padding-right: 32px; } .atlas-hm__whytitle { font-size: 42px; } .atlas-hm__whygrid { gap: 40px; } .atlas-hm__ba { width: 520px; } } @media (prefers-reduced-motion: reduce) { .atlas-hm *, .atlas-hm__marqueetrack { transition: none !important; animation: none !important; } }