/* ========================================================================== Yeda Li — landing styles Mobile-first · RTL (logical properties only) · BEM Colors & type per Yeda_li_Brand Guidelines (Dec 2024) ========================================================================== */ /* --- tokens ------------------------------------------------------------ */ :root { /* primary */ --c-white: #ffffff; --c-sky: #00b9ff; --c-ultra: #010f95; /* secondary */ --c-saffron: #f5c042; --c-red: #eb3e4e; --c-purple: #9f5fa6; --c-mint: #2cb992; --c-teal: #007c90; /* derived */ --c-ink: #1b2150; /* body text on light */ --c-ink-soft: #4a5076; --c-bg-soft: #f1f2fb; /* lavender tint, like brand-book cards */ --c-ultra-deep: #000a66; /* darker ultramarine for gradients */ --font: "Rubik", system-ui, sans-serif; --radius-card: 24px; --radius-pill: 999px; --shadow-soft: 0 8px 30px rgba(1, 15, 149, 0.10); --shadow-lift: 0 18px 50px rgba(1, 15, 149, 0.18); --container: 1180px; --gutter: clamp(20px, 5vw, 48px); --header-h: 64px; --arc-h: clamp(120px, 15vw, 210px); /* hero wave height */ } @media (min-width: 768px) { :root { --header-h: 76px; } } /* --- base -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { position: relative; /* anchor for the absolutely-positioned bee */ margin: 0; font-family: var(--font); font-weight: 400; line-height: 1.6; color: var(--c-ink); background: var(--c-white); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } :focus-visible { outline: 3px solid var(--c-sky); outline-offset: 3px; border-radius: 4px; } /* numbers / phones inside RTL text */ [dir="ltr"] { unicode-bidi: isolate; } /* --- buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border-radius: var(--radius-pill); font-family: var(--font); font-size: 1.06rem; font-weight: 600; /* Rubik SemiBold — brand button style */ text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; will-change: transform; } .btn--sm { padding: 10px 22px; font-size: 0.95rem; } .btn--lg { padding: 19px 40px; font-size: 1.18rem; } .btn--primary { background: var(--c-saffron); color: var(--c-ultra); box-shadow: 0 6px 22px rgba(245, 192, 66, 0.45); } .btn--primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 32px rgba(245, 192, 66, 0.6); } .btn--primary:active { transform: translateY(-1px) scale(0.99); } .btn--ghost { background: transparent; color: var(--c-ultra); border-color: rgba(1, 15, 149, 0.25); } .btn--ghost:hover { border-color: var(--c-ultra); background: rgba(1, 15, 149, 0.04); transform: translateY(-3px); } /* ========================================================================== preloader (shown only when , set inline in head) ========================================================================== */ .preloader { display: none; } .has-preloader .preloader { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: linear-gradient(180deg, var(--c-ultra) 0%, var(--c-ultra-deep) 100%); transition: opacity 0.45s ease, visibility 0.45s ease; } .has-preloader .preloader--done { opacity: 0; visibility: hidden; pointer-events: none; } .preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } .preloader__bee { width: 84px; height: auto; animation: preloader-bob 1.2s ease-in-out infinite alternate; } .preloader__net { width: min(260px, 64vw); height: auto; } .preloader__edge { stroke-dasharray: 80; stroke-dashoffset: 80; animation: preloader-edge 0.4s ease-out forwards; animation-delay: calc(0.12s + var(--i) * 0.13s); } .preloader__node { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: preloader-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--i) * 0.14s); } .preloader__robot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: preloader-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 1s; } .preloader__label { color: rgba(255, 255, 255, 0.92); font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; } @keyframes preloader-bob { from { translate: 0 0; } to { translate: 0 -10px; } } @keyframes preloader-edge { to { stroke-dashoffset: 0; } } @keyframes preloader-pop { to { transform: scale(1); } } /* ========================================================================== section: header ========================================================================== */ /* plain header — scrolls away with the page (not sticky by design) */ .header { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 60; background: transparent; } .header__inner { max-width: var(--container); margin-inline: auto; height: var(--header-h); padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .header__logo { height: 44px; width: auto; } .header__nav { display: none; gap: clamp(18px, 3vw, 36px); } .header__link { text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--c-ultra); position: relative; } .header__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -6px; height: 3px; border-radius: var(--radius-pill); background: var(--c-saffron); scale: 0 1; transition: scale 0.25s ease; } .header__link:hover::after { scale: 1 1; } @media (min-width: 900px) { .header__nav { display: flex; } .header__logo { height: 52px; } } /* ========================================================================== section: hero ========================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block-start: calc(var(--header-h) + clamp(20px, 4vh, 48px)); padding-block-end: calc(var(--arc-h) + clamp(28px, 4vh, 56px)); padding-inline: var(--gutter); background: radial-gradient(1200px 600px at 80% -10%, rgba(0, 185, 255, 0.10), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(159, 95, 166, 0.08), transparent 60%), var(--c-white); overflow: clip; } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin-inline: auto; display: grid; gap: clamp(40px, 6vh, 64px); align-items: center; } @media (min-width: 920px) { .hero__inner { grid-template-columns: 1.04fr 0.96fr; } } .hero__content { display: flex; flex-direction: column; align-items: flex-start; text-align: start; } .hero__logo { width: clamp(110px, 18vw, 150px); height: auto; margin-block-end: clamp(20px, 4vh, 36px); } .hero__title { font-size: clamp(1.9rem, 2.6vw + 1rem, 3.4rem); font-weight: 600; /* Rubik SemiBold — brand headline style */ line-height: 1.18; color: var(--c-ultra); text-wrap: balance; max-width: 17ch; } .hero__title-accent { position: relative; white-space: nowrap; } /* saffron brush-line under the accent words */ .hero__title-accent::after { content: ""; position: absolute; inset-inline: -2%; inset-block-end: 0.04em; height: 0.22em; background: var(--c-saffron); border-radius: var(--radius-pill); z-index: -1; opacity: 0.85; } .hero__subtitle { margin-block-start: clamp(16px, 2.5vh, 24px); font-size: clamp(1.02rem, 0.7vw + 0.85rem, 1.22rem); color: var(--c-ink-soft); max-width: 44ch; } /* price chip — value visible at first glance (also the bee's landing pad) */ .hero__price { display: inline-flex; align-items: center; gap: 10px; margin-block-start: clamp(18px, 3vh, 28px); padding: 10px 20px; border-radius: var(--radius-pill); background: rgba(245, 192, 66, 0.16); border: 1.5px solid var(--c-saffron); color: var(--c-ultra); font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.25rem); font-weight: 500; } .hero__price strong { font-weight: 700; } .hero__price-spark { width: 18px; height: 18px; color: var(--c-saffron); flex: 0 0 auto; } .hero__cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: clamp(20px, 3vh, 30px); } /* trust numbers — big saffron counters on the dark wave (count up on reveal) */ .hero__trust { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: clamp(18px, 3vw, 46px); display: flex; justify-content: center; gap: clamp(34px, 8vw, 110px); } .hero__trust-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .hero__trust-num { font-size: clamp(2rem, 2.6vw + 1rem, 3.4rem); font-weight: 600; /* Rubik SemiBold */ color: var(--c-saffron); line-height: 1.05; font-variant-numeric: tabular-nums; /* steady width while counting up */ } .hero__trust-label { font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.1rem); font-weight: 500; color: var(--c-white); } /* --- photo collage ------------------------------------------------------ */ .hero__visual { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 24px); align-items: start; max-width: 560px; margin-inline: auto; } .hero-card { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--c-bg-soft); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; will-change: transform; } .hero-card img, .hero-card video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .hero-card--main { grid-column: 1 / -1; rotate: -2.5deg; } .hero-card--side { rotate: 3deg; } .hero-card--video { rotate: -1.5deg; } .hero-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 26px 60px rgba(1, 15, 149, 0.24); z-index: 3; } .hero-card__tag { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; padding: 6px 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.94); color: var(--c-ultra); font-size: 0.85rem; font-weight: 600; box-shadow: 0 4px 14px rgba(1, 15, 149, 0.16); } .hero-card__play { position: absolute; inset: 0; display: grid; place-items: center; } .hero-card__play svg { width: clamp(40px, 5vw, 54px); height: auto; filter: drop-shadow(0 6px 16px rgba(1, 15, 149, 0.4)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .hero-card--video:hover .hero-card__play svg { transform: scale(1.12); } /* confetti parallax layer */ .hero__confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .confetti { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); width: var(--s); height: var(--s); rotate: var(--r, 0deg); opacity: 0.95; } /* fewer floating bits on small screens — calmer & cheaper */ @media (max-width: 767px) { .confetti--lg-only { display: none; } } /* dark wave — bridge into the pain section */ .hero__arc { position: absolute; z-index: 1; inset-block-end: 0; inset-inline: -15%; height: var(--arc-h); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--c-ultra); } /* ========================================================================== the bee mascot (rests in the hero; flies between sections on desktop) ========================================================================== */ .bee { position: absolute; z-index: 40; width: clamp(76px, 10vw, 130px); inset-inline-end: clamp(3%, 6vw, 10%); inset-block-start: calc(var(--header-h) + clamp(8px, 3vh, 40px)); pointer-events: none; } /* JS switches the bee to pure transform positioning for the flight path. Physical left/top on purpose: GSAP x/y coordinates are physical too. */ .bee--js { inset: auto; left: 0; top: 0; } /* during the pinned box scene the bee lives INSIDE the scene element */ .bee--in-scene { position: absolute; inset: auto; left: 0; top: 0; z-index: 40; } .bee__rig { will-change: transform; } .bee__img { width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(1, 15, 149, 0.18)); } /* ========================================================================== section: pain-solution ========================================================================== */ .pain { position: relative; background: linear-gradient(180deg, var(--c-ultra) 0%, var(--c-ultra-deep) 100%); color: var(--c-white); padding: clamp(40px, 8vh, 90px) var(--gutter) clamp(72px, 12vh, 130px); text-align: center; } .pain__inner { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } .pain__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; text-wrap: balance; color: var(--c-white); } .pain__text { margin-block-start: clamp(16px, 3vh, 26px); font-size: clamp(1rem, 0.9vw + 0.85rem, 1.2rem); color: rgba(255, 255, 255, 0.92); max-width: 56ch; } .pain__points { display: grid; gap: 14px; margin-block-start: clamp(28px, 5vh, 44px); width: 100%; max-width: 560px; text-align: start; } .pain__point { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-card); font-weight: 500; color: var(--c-white); backdrop-filter: blur(4px); transition: background-color 0.3s ease, transform 0.3s ease; } .pain__point:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-2px); } .pain__point-icon { flex: 0 0 auto; width: 30px; height: 30px; } .pain__quote { margin-block-start: clamp(32px, 6vh, 52px); font-size: clamp(1.1rem, 1.4vw + 0.85rem, 1.5rem); font-weight: 500; color: var(--c-saffron); max-width: 34ch; text-wrap: balance; } .pain__quote-spark { display: block; font-size: 1.4em; margin-block-end: 6px; } /* ========================================================================== section: how-it-works ========================================================================== */ /* compact: heading + all three steps fit a single desktop screen */ .how { padding: clamp(44px, 7vh, 72px) var(--gutter); background: var(--c-white); } .how__inner { max-width: var(--container); margin-inline: auto; text-align: center; } .how__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; color: var(--c-ultra); text-wrap: balance; } .how__sub { margin-block-start: 10px; font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.3rem); color: var(--c-ink-soft); } .how__steps { display: grid; gap: clamp(28px, 4.5vh, 40px); margin-block-start: clamp(28px, 4.5vh, 44px); text-align: start; } @media (min-width: 880px) { .how__steps { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); } } .step { position: relative; display: flex; flex-direction: column; padding-block-start: 26px; /* room for the floating number badge */ } .step__num { position: absolute; inset-block-start: 0; inset-inline-start: 18px; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.25rem; font-weight: 700; color: var(--c-ultra); box-shadow: var(--shadow-soft); } .step__num--saffron { background: var(--c-saffron); } .step__num--sky { background: var(--c-sky); } .step__num--mint { background: var(--c-mint); } .step__media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; } .step__media img { width: 100%; aspect-ratio: 3 / 4; /* moderately tall... */ max-height: 42vh; /* ...but the whole block must fit one 1080p screen */ object-fit: cover; } .step:hover .step__media { transform: translateY(-6px); box-shadow: var(--shadow-lift); } .step__title { margin-block-start: 14px; font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem); font-weight: 600; color: var(--c-ultra); } .step__text { margin-block-start: 6px; font-size: 0.98rem; color: var(--c-ink-soft); max-width: 40ch; } /* watch-the-video CTA under the steps */ .how__cta { display: flex; justify-content: center; margin-block-start: clamp(24px, 4vh, 40px); } .video-btn { gap: 12px; } .video-btn__icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-ultra); color: var(--c-white); flex: 0 0 auto; } .video-btn__icon svg { width: 15px; height: 15px; margin-inline-start: 2px; /* optical centering of the play triangle */ } .video-btn__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(1, 15, 149, 0.4); animation: play-pulse 2.2s ease-out infinite; } @keyframes play-pulse { to { box-shadow: 0 0 0 14px rgba(1, 15, 149, 0); } } /* ========================================================================== section: whats-in-the-box ========================================================================== */ .box { padding: clamp(56px, 9vh, 90px) var(--gutter); background: var(--c-bg-soft); } /* desktop: the section gets pinned, so its content must fit one screen */ @media (min-width: 1024px) { .box { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(32px, 5vh, 56px); } } .box__inner { width: 100%; max-width: var(--container); margin-inline: auto; text-align: center; } .box__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; color: var(--c-ultra); text-wrap: balance; } .box__sub { margin-block-start: 10px; font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.3rem); color: var(--c-ink-soft); } .box__stage { display: grid; gap: clamp(28px, 5vh, 44px); margin-block-start: clamp(28px, 5vh, 48px); align-items: center; } /* --- unpacking scene --------------------------------------------------- */ .box__scene { position: relative; width: min(340px, 80vw); margin-inline: auto; } .box__illu { width: 76%; margin-inline: auto; } /* flying items: hidden on mobile, absolutely slotted on desktop */ .box-fly { display: none; } .box__items { display: grid; gap: 16px; text-align: start; } @media (min-width: 640px) and (max-width: 1023px) { .box__items { grid-template-columns: repeat(2, 1fr); } } /* desktop: text column (inline-start) + pinned scene (inline-end) */ @media (min-width: 1024px) { .box__stage { grid-template-columns: minmax(320px, 0.9fr) 1.1fr; column-gap: clamp(36px, 5vw, 80px); } .box__stage { margin-block-start: 20px; } .box__items { grid-column: 1; grid-row: 1; /* explicit: auto-placement would push it to row 2 */ align-self: center; } /* one card at a time, swapped by the scroll timeline. Scoped to .box--pinned (set by JS) so the no-JS page stays a plain list. */ .box--pinned .box__items { position: relative; min-height: 430px; /* room for the photo card */ } /* vertical centering via GSAP yPercent (it owns transforms and would drop a CSS translate), so: top 50% here + yPercent -50 in script.js */ .box--pinned .box-item { position: absolute; inset-inline: 0; inset-block-start: 50%; } .box__scene { grid-column: 2; grid-row: 1; width: 100%; max-width: 500px; aspect-ratio: 1.15 / 1; margin-inline: auto; } .box__illu { position: absolute; inset-block-end: 0; inset-inline-start: 50%; translate: -50% 0; width: 58%; } [dir="rtl"] .box__illu { translate: 50% 0; } .box-fly { display: block; position: absolute; left: var(--fx); /* physical on purpose: GSAP transforms are physical */ top: var(--fy); width: var(--fw, 96px); filter: drop-shadow(0 8px 18px rgba(1, 15, 149, 0.18)); } } /* big tinted part card: photo of the child with the part + its role */ .box-item { display: flex; flex-direction: column; overflow: hidden; background: #e3f4ff; /* soft sky tint from the brand blue */ border-radius: var(--radius-card); box-shadow: var(--shadow-soft); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .box-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .box-item__media img { width: 100%; aspect-ratio: 16 / 9; max-height: 240px; /* the pinned card + scene must fit one screen */ object-fit: cover; } .box-item__body { padding: 18px 22px 22px; } .box-item__title { font-size: 1.2rem; font-weight: 600; color: var(--c-ultra); } .box-item__text { margin-block-start: 6px; font-size: 1rem; color: var(--c-ink); } /* ========================================================================== section: quiz ========================================================================== */ .quiz { padding: clamp(64px, 10vh, 110px) var(--gutter); background: var(--c-white); } .quiz__inner { max-width: 720px; margin-inline: auto; text-align: center; } .quiz__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; color: var(--c-ultra); text-wrap: balance; } .quiz__sub { margin-block-start: 10px; font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.3rem); color: var(--c-ink-soft); } .quiz__card { margin-block-start: clamp(26px, 4vh, 40px); padding: clamp(22px, 4vw, 36px); background: var(--c-bg-soft); border-radius: 28px; box-shadow: var(--shadow-soft); text-align: start; } .quiz__top { display: flex; align-items: flex-end; gap: 14px; } .quiz__bee { width: 72px; height: auto; flex: 0 0 auto; } .quiz__bubble { position: relative; flex: 1; background: var(--c-white); border-radius: 20px; padding: 16px 20px; box-shadow: var(--shadow-soft); } /* speech tail pointing at the bee */ .quiz__bubble::before { content: ""; position: absolute; inset-inline-start: -6px; inset-block-end: 20px; width: 14px; height: 14px; background: var(--c-white); rotate: 45deg; } .quiz__question { font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem); font-weight: 600; color: var(--c-ultra); } .quiz__answers { margin-block-start: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .quiz__answer { padding: 16px 18px; border-radius: var(--radius-pill); border: 2px solid rgba(1, 15, 149, 0.18); background: var(--c-white); font-family: var(--font); font-size: 1.05rem; font-weight: 600; color: var(--c-ultra); cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .quiz__answer:hover { border-color: var(--c-sky); background: rgba(0, 185, 255, 0.07); transform: translateY(-2px); } /* question swap: fade + slide */ .quiz__question, .quiz__answers { transition: opacity 0.18s ease, translate 0.18s ease; } .quiz__card--swap .quiz__question, .quiz__card--swap .quiz__answers { opacity: 0; translate: 0 8px; } .quiz__footer { display: flex; justify-content: space-between; align-items: center; margin-block-start: 22px; } .quiz__dots { display: flex; gap: 8px; } .quiz__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(1, 15, 149, 0.15); transition: background-color 0.25s ease; } .quiz__dot--active { background: var(--c-saffron); } .quiz__restart { border: none; background: none; font-family: var(--font); font-size: 0.95rem; font-weight: 500; color: var(--c-ink-soft); cursor: pointer; } .quiz__restart:hover { color: var(--c-ultra); } /* ========================================================================== section: pricing ========================================================================== */ .pricing { padding: clamp(64px, 10vh, 110px) var(--gutter); background: linear-gradient(180deg, var(--c-white) 0%, var(--c-bg-soft) 100%); } .pricing__inner { max-width: var(--container); margin-inline: auto; text-align: center; } .pricing__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; color: var(--c-ultra); text-wrap: balance; } /* ========================================================================== pricing v6 — два пакета карточками + строка-подписка (минимализм) ========================================================================== */ /* два пакета в ряд; mobile-first — в столбик, популярный первым (он первый в DOM). На десктопе популярный справа (RTL), обычный слева. */ .plans { display: grid; gap: 20px; margin-block-start: clamp(36px, 6vh, 64px); text-align: start; } @media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; /* популярная чуть крупнее — центрируем по высоте */ gap: 24px; } } /* карточка пакета — белая, скруглённая, мягкая тень, воздух */ .plan { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 34px) clamp(24px, 3vw, 32px); background: var(--c-white); border: 1.5px solid rgba(1, 15, 149, 0.10); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } /* популярный — ультрамариновая рамка, чуть крупнее, заметнее */ .plan--featured { border: 2.5px solid var(--c-ultra); box-shadow: var(--shadow-lift); background: radial-gradient(120% 80% at 100% 0, rgba(0, 185, 255, 0.07), transparent 60%), var(--c-white); } @media (min-width: 760px) { .plan--featured { padding-block: clamp(34px, 4vw, 46px); /* визуально крупнее обычного */ } } /* бейдж «הכי פופולרי» */ .plan__badge { position: absolute; inset-block-start: -14px; inset-inline-end: 24px; padding: 5px 18px; background: var(--c-saffron); color: var(--c-ultra); border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-soft); } .plan__name { font-size: clamp(1.15rem, 1.4vw + 0.8rem, 1.4rem); font-weight: 600; color: var(--c-ultra); } .plan__tagline { margin-block-start: 8px; font-size: 0.96rem; line-height: 1.45; color: var(--c-ink-soft); } /* цена крупно */ .plan__price { margin-block-start: 16px; font-size: clamp(2.4rem, 2vw + 1.6rem, 3.1rem); font-weight: 700; line-height: 1; color: var(--c-ultra); } /* список галочками — чистый, без лишних линий */ .plan__list { display: grid; gap: 11px; margin-block: 20px 26px; font-size: 0.98rem; line-height: 1.4; color: var(--c-ink); } .plan__list li { position: relative; padding-inline-start: 30px; } .plan__list li::before { content: "✓"; position: absolute; inset-inline-start: 0; inset-block-start: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 185, 255, 0.16); color: var(--c-ultra); font-size: 0.72rem; font-weight: 700; } /* у популярного — жёлтые галочки, чтобы перекликались с кнопкой */ .plan--featured .plan__list li::before { background: var(--c-saffron); } /* кнопка прижата к низу — обе карточки выровнены */ .plan__buy { margin-block-start: auto; align-self: stretch; text-align: center; } /* ===== строка-подписка под пакетами — компактная, второстепенная ===== */ .plan-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block-start: 20px; padding: 18px clamp(20px, 3vw, 28px); background: var(--c-bg-soft); border: 1px solid rgba(1, 15, 149, 0.08); border-radius: var(--radius-pill); text-align: start; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .plan-sub__text { flex: 1 1 240px; min-width: 0; } .plan-sub__title { font-size: 1rem; font-weight: 600; color: var(--c-ultra); } .plan-sub__desc { margin-block-start: 3px; font-size: 0.88rem; line-height: 1.4; color: var(--c-ink-soft); } .plan-sub__price { font-size: 1.5rem; font-weight: 700; color: var(--c-ultra); margin-inline-start: auto; } .plan-sub__buy { flex: 0 0 auto; padding-block: 9px; padding-inline: 22px; font-size: 0.92rem; } /* на узком экране подписка-полоса аккуратно в столбик */ @media (max-width: 520px) { .plan-sub { border-radius: var(--radius-card); } .plan-sub__price { margin-inline-start: 0; } .plan-sub__buy { flex: 1 1 100%; text-align: center; } } /* trust strip — a proper element, not a fine-print disclaimer */ .pricing__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 56px); margin-block-start: clamp(30px, 5vh, 48px); } .pricing__trust-item { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1rem, 0.4vw + 0.92rem, 1.15rem); font-weight: 600; /* Rubik SemiBold */ color: var(--c-ultra); } .pricing__trust-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; } .pricing__trust-icon svg { width: 25px; height: 25px; } .pricing__trust-icon--saffron { background: var(--c-saffron); color: var(--c-ultra); } .pricing__trust-icon--sky { background: var(--c-sky); color: var(--c-ultra); } .pricing__trust-icon--mint { background: var(--c-mint); color: var(--c-ultra); } .pricing__trust-icon--ultra { background: var(--c-ultra); color: var(--c-white); } .pricing__note { margin-block-start: 18px; font-size: 0.9rem; color: var(--c-ink-soft); } /* quiz recommendation highlight — пчёлка подсвечивает рекомендованный пакет (карточку .plan или строку-подписку .plan-sub) */ .plan--highlight, .plan-sub--highlight { border-color: var(--c-sky) !important; box-shadow: 0 0 0 5px rgba(0, 185, 255, 0.22), var(--shadow-lift); } /* ========================================================================== section: projects-gallery ========================================================================== */ .projects { padding: clamp(64px, 10vh, 110px) var(--gutter); background: var(--c-white); } .projects__inner { max-width: var(--container); margin-inline: auto; text-align: center; } .projects__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; color: var(--c-ultra); text-wrap: balance; } .projects__sub { margin-block-start: 10px; font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.3rem); color: var(--c-ink-soft); } .projects__grid { display: grid; gap: clamp(18px, 2.5vw, 28px); margin-block-start: clamp(28px, 5vh, 48px); text-align: start; } @media (min-width: 640px) { .projects__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .projects__grid { grid-template-columns: repeat(3, 1fr); } } .project-card { display: flex; flex-direction: column; } .project-card__media { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; } .project-card__media video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .project-card:hover .project-card__media { transform: translateY(-6px); box-shadow: var(--shadow-lift); } .project-card__play { position: absolute; inset: 0; display: grid; place-items: center; } .project-card__play svg { width: 46px; height: 46px; filter: drop-shadow(0 6px 16px rgba(1, 15, 149, 0.4)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .project-card:hover .project-card__play svg { transform: scale(1.14); } .project-card__tag { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 600; color: var(--c-ultra); background: var(--c-white); box-shadow: 0 4px 14px rgba(1, 15, 149, 0.18); } .project-card__tag--sky { background: #d3f1ff; } .project-card__tag--purple { background: #efdff1; } .project-card__tag--mint { background: #d8f4ea; } .project-card__tag--red { background: #fde0e3; } .project-card__tag--teal { background: #d2ecef; } .project-card__tag--saffron { background: #fdeec8; } .project-card__name { margin-block-start: 14px; font-size: 1.15rem; font-weight: 600; color: var(--c-ultra); } .project-card__text { margin-block-start: 4px; font-size: 0.95rem; color: var(--c-ink-soft); } /* ========================================================================== section: iceberg (light sky above → deep ultramarine below) ========================================================================== */ .iceberg { padding: clamp(64px, 10vh, 110px) var(--gutter) clamp(80px, 12vh, 140px); background: linear-gradient( 180deg, var(--c-white) 0%, #e9f7ff 18%, #79c7f2 34%, #1e64b8 56%, var(--c-ultra) 78%, var(--c-ultra-deep) 100% ); } .iceberg__inner { max-width: var(--container); margin-inline: auto; text-align: center; } .iceberg__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; color: var(--c-ultra); text-wrap: balance; } .iceberg__sub { margin-block-start: 10px; font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.3rem); color: var(--c-ink-soft); } .iceberg__stage { display: grid; gap: clamp(24px, 4vw, 56px); margin-block-start: clamp(32px, 5vh, 52px); align-items: start; text-align: start; } @media (min-width: 880px) { .iceberg__stage { grid-template-columns: 0.9fr 1.1fr; } } /* --- scene -------------------------------------------------------------- */ .iceberg__scene { position: relative; margin-inline: auto; display: none; } @media (min-width: 880px) { /* stretch to the levels column: the berg's tip-to-tail spans the list */ .iceberg__scene { display: block; grid-column: 2; grid-row: 1; align-self: stretch; min-height: 640px; width: 100%; } } .iceberg__svg { position: absolute; inset-block: 0; inset-inline-start: 50%; translate: -50% 0; height: 100%; width: auto; /* barely-there bobbing, like it floats */ animation: berg-sway 7s ease-in-out infinite alternate; transform-origin: 50% 30%; } [dir="rtl"] .iceberg__svg { translate: 50% 0; } @keyframes berg-sway { from { transform: rotate(-0.7deg) translateY(0); } to { transform: rotate(0.7deg) translateY(3px); } } /* the water line bobs in counter-phase (negative delay = half period) */ .iceberg__waterline { animation: water-bob 7s ease-in-out -3.5s infinite alternate; } @keyframes water-bob { from { transform: translateY(0); } to { transform: translateY(2.5px); } } /* invisible anchor: the page bee parks here while "diving" */ .iceberg__dive-spot { position: absolute; inset-block-start: 46%; inset-inline-start: 58%; width: 56px; height: 40px; pointer-events: none; } /* bubbles travel WITH the bee (inside its rig), underwater only */ .bee__bubbles { position: absolute; inset-block-start: -4px; inset-inline-start: 55%; width: 44px; height: 30px; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .bee.is-underwater .bee__bubbles { opacity: 1; } .bee__bubble { position: absolute; inset-block-end: 0; left: var(--x); /* physical: keyframe translate is physical */ opacity: 0; animation: bubble-rise var(--t) ease-in var(--d) infinite; } .bee__bubble circle { fill: rgba(255, 255, 255, 0.22); stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.2; } @keyframes bubble-rise { 0% { translate: 0 0; opacity: 0; } 14% { opacity: 0.9; } 55% { translate: 4px -36px; } 100% { translate: -3px -68px; opacity: 0; } } /* underwater: still recognisably YELLOW, just muted and translucent — like seen through water (smooth both ways). The translucency lives in filter: opacity() because GSAP keeps an inline `opacity` on the img. */ .bee .bee__img { transition: filter 0.7s ease; } .bee.is-underwater .bee__img { filter: drop-shadow(0 10px 24px rgba(1, 15, 149, 0.3)) saturate(0.75) brightness(0.95) blur(0.3px) opacity(0.85); } /* translucent water sheet above the diver, below the labels */ .iceberg__water { position: absolute; inset-inline: -18%; inset-block-start: 29.5%; /* matches the SVG water line */ inset-block-end: -8%; z-index: 2; background: linear-gradient(180deg, rgba(0, 185, 255, 0.25) 0%, rgba(1, 15, 149, 0.35) 100%); pointer-events: none; /* feathered edges — no hard rectangle over the gradient background */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%); mask-composite: intersect; } /* --- levels ------------------------------------------------------------- */ .iceberg__levels { display: grid; gap: 14px; } @media (min-width: 880px) { .iceberg__levels { grid-column: 1; grid-row: 1; } } .iceberg__zone-label { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.06em; color: var(--c-teal); } .iceberg__zone-label--deep { margin-block-start: 18px; color: #9fdcff; } .iceberg__level { padding: 14px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-soft); } .iceberg__level-title { font-size: 1.08rem; font-weight: 600; color: var(--c-ultra); } .iceberg__level-text { margin-block-start: 2px; font-size: 0.93rem; color: var(--c-ink-soft); } /* deep levels: glassy cards on the dark water */ .iceberg__level--deep { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(4px); box-shadow: none; } .iceberg__level--deep .iceberg__level-title { color: var(--c-white); } .iceberg__level--deep .iceberg__level-text { color: rgba(255, 255, 255, 0.78); } .iceberg__motto { margin-block-start: clamp(32px, 5vh, 48px); font-size: clamp(1.15rem, 1.2vw + 0.9rem, 1.6rem); font-weight: 600; color: var(--c-saffron); } /* ========================================================================== section: faq ========================================================================== */ .faq { padding: clamp(64px, 10vh, 110px) var(--gutter); background: var(--c-white); } .faq__inner { max-width: 820px; margin-inline: auto; } .faq__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; color: var(--c-ultra); text-align: center; text-wrap: balance; } .faq__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 24px; } .faq__tab { padding: 10px 22px; border: 2px solid rgba(1, 15, 149, 0.15); border-radius: var(--radius-pill); background: var(--c-white); font-family: var(--font); font-size: 0.98rem; font-weight: 600; color: var(--c-ink-soft); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .faq__tab--active { background: var(--c-ultra); border-color: var(--c-ultra); color: var(--c-white); } .faq__panel { display: grid; gap: 12px; margin-block-start: 26px; } .faq__panel[hidden] { display: none; } .faq__item { background: var(--c-bg-soft); border-radius: 18px; padding: 4px 20px; } .faq__q { position: relative; padding-block: 14px; padding-inline-end: 36px; font-size: 1.05rem; font-weight: 600; color: var(--c-ultra); cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; position: absolute; inset-inline-end: 6px; inset-block-start: 50%; translate: 0 -50%; font-size: 1.5rem; font-weight: 500; color: var(--c-sky); transition: rotate 0.25s ease; } .faq__item[open] .faq__q::after { rotate: 45deg; } .faq__a { padding-block: 0 16px; color: var(--c-ink-soft); } /* ========================================================================== section: lead-form (final block) ========================================================================== */ .contact { padding: clamp(64px, 10vh, 110px) var(--gutter) clamp(80px, 12vh, 130px); background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-white) 100%); } .contact__inner { max-width: 1020px; margin-inline: auto; text-align: center; } .contact__title { font-size: clamp(1.7rem, 3vw + 0.8rem, 3rem); font-weight: 600; line-height: 1.25; color: var(--c-ultra); text-wrap: balance; } .contact__sub { margin-block-start: 10px; font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.3rem); color: var(--c-ink-soft); } .contact__card { margin-block-start: clamp(26px, 4vh, 40px); background: var(--c-white); border-radius: 28px; box-shadow: var(--shadow-lift); text-align: start; overflow: hidden; display: grid; } /* photo column: on top on mobile, beside the form on desktop */ @media (min-width: 860px) { .contact__card { grid-template-columns: 1.05fr 0.95fr; } .contact__main { grid-column: 1; grid-row: 1; } .contact__media { grid-column: 2; grid-row: 1; } } .contact__media { position: relative; min-height: 230px; } .contact__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; } .contact__slide--active { opacity: 1; } .contact__slide img, .contact__slide picture { width: 100%; height: 100%; object-fit: cover; display: block; } .contact__main { padding: clamp(20px, 3.5vw, 32px); } .contact__form { display: grid; gap: 14px; } .contact__form[hidden] { display: none; } .contact__row { display: grid; gap: 14px; } @media (min-width: 560px) { .contact__row { grid-template-columns: 1fr 1fr; } } .contact__field { display: grid; gap: 6px; } .contact__label { font-size: 0.95rem; font-weight: 600; color: var(--c-ultra); } .contact__optional { font-weight: 400; color: var(--c-ink-soft); } .contact__input { padding: 11px 14px; border: 2px solid rgba(1, 15, 149, 0.14); border-radius: 14px; font-family: var(--font); font-size: 1rem; color: var(--c-ink); background: var(--c-white); transition: border-color 0.2s ease; width: 100%; } .contact__input:focus { outline: none; border-color: var(--c-sky); } .contact__input--invalid, .contact__input--invalid:focus { border-color: var(--c-red); } .contact__textarea { resize: vertical; min-height: 96px; } .contact__types { border: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .contact__types .contact__label { margin-inline-end: 4px; } .contact__type input { position: absolute; opacity: 0; pointer-events: none; } .contact__type span { display: inline-block; padding: 9px 22px; border: 2px solid rgba(1, 15, 149, 0.18); border-radius: var(--radius-pill); font-size: 0.98rem; font-weight: 600; color: var(--c-ink-soft); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .contact__type input:checked + span { background: var(--c-ultra); border-color: var(--c-ultra); color: var(--c-white); } .contact__type input:focus-visible + span { outline: 3px solid var(--c-sky); outline-offset: 2px; } .contact__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--c-ink-soft); } .contact__consent input { width: 18px; height: 18px; margin-block-start: 2px; accent-color: var(--c-ultra); flex: 0 0 auto; } .contact__consent a { color: var(--c-ultra); font-weight: 600; } .contact__error { padding: 10px 16px; border-radius: 12px; background: rgba(235, 62, 78, 0.1); color: #b3202f; font-size: 0.95rem; font-weight: 500; } .contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 4px; } .contact__success { text-align: center; padding-block: 18px; } .contact__success-spark { display: block; font-size: 2rem; color: var(--c-saffron); } .contact__success-title { margin-block-start: 8px; font-size: 1.4rem; font-weight: 600; color: var(--c-ultra); } .contact__success-text { margin-block-start: 6px; color: var(--c-ink-soft); } /* ========================================================================== video lightbox (reusable via [data-video-id]) ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; } .lightbox[hidden] { display: none; } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 5, 40, 0.85); opacity: 0; transition: opacity 0.25s ease; } .lightbox--open .lightbox__backdrop { opacity: 1; } .lightbox__body { position: relative; width: min(960px, 96vw); opacity: 0; transform: scale(0.94) translateY(12px); transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); } .lightbox--open .lightbox__body { opacity: 1; transform: none; } .lightbox__frame { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; } .lightbox__close { position: absolute; inset-block-start: -48px; inset-inline-end: 0; display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: var(--c-white); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .lightbox__close svg { width: 18px; height: 18px; } .lightbox__close:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.08); } body.no-scroll { overflow: hidden; } /* ========================================================================== quick-buy: section CTAs, sticky bar, popup with the moved pricing core ========================================================================== */ .quick-buy-row { display: flex; justify-content: center; margin-block-start: clamp(28px, 4vh, 44px); } /* --- sticky bottom bar --------------------------------------------------- */ .buybar { position: fixed; z-index: 70; inset-block-end: 0; inset-inline: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; padding: 10px var(--gutter); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 -6px 30px rgba(1, 15, 149, 0.14); translate: 0 110%; transition: translate 0.35s cubic-bezier(0.32, 0.9, 0.4, 1); } .buybar--visible { translate: 0 0; } .buybar__text { font-size: 0.98rem; font-weight: 600; color: var(--c-ultra); } /* lift the WhatsApp fab above the bar while it is shown */ body.has-buybar .whatsapp-fab { inset-block-end: 88px; } /* --- popup ---------------------------------------------------------------- */ .buybox { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; } .buybox[hidden] { display: none; } .buybox__backdrop { position: absolute; inset: 0; background: rgba(0, 5, 40, 0.8); opacity: 0; transition: opacity 0.25s ease; } .buybox--open .buybox__backdrop { opacity: 1; } .buybox__panel { position: relative; width: min(1240px, 96vw); max-height: 90vh; overflow-y: auto; padding: clamp(20px, 3.5vw, 36px); background: var(--c-bg-soft); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(24px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.32, 1.2, 0.4, 1); } .buybox--open .buybox__panel { opacity: 1; transform: none; } /* mobile: full-width bottom sheet */ @media (max-width: 639px) { .buybox { padding: 0; align-items: end; } .buybox__panel { width: 100vw; max-height: 92vh; border-radius: 24px 24px 0 0; transform: translateY(60px); } } .buybox__title { font-size: clamp(1.3rem, 1.4vw + 1rem, 1.8rem); font-weight: 600; color: var(--c-ultra); text-align: center; padding-inline: 44px; /* clear of the close button */ } .buybox__slot { margin-block-start: 6px; text-align: center; } /* denser pricing inside the popup so short screens need little scrolling */ .buybox .plans { gap: 16px; margin-block-start: 12px; } .buybox .plan { padding: 22px 20px; } .buybox .plan--featured { padding-block: 24px; } .buybox .plan__price { font-size: 2.1rem; } .buybox .plan__list { margin-block: 14px 18px; gap: 9px; } .buybox .plan-sub { margin-block-start: 14px; } .buybox .pricing__trust { gap: 18px; margin-block-start: 18px; } .buybox .pricing__trust-icon { width: 36px; height: 36px; } .buybox .pricing__trust-icon svg { width: 20px; height: 20px; } .buybox .pricing__trust-item { font-size: 0.92rem; } .buybox .pricing__note { margin-block-start: 12px; } /* thin, quiet scrollbar for the panel */ .buybox__panel { scrollbar-width: thin; scrollbar-color: rgba(1, 15, 149, 0.3) transparent; } .buybox__panel::-webkit-scrollbar { width: 6px; } .buybox__panel::-webkit-scrollbar-thumb { background: rgba(1, 15, 149, 0.3); border-radius: 3px; } .buybox__close { position: sticky; inset-block-start: 0; float: inline-end; display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(1, 15, 149, 0.08); color: var(--c-ultra); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; z-index: 2; } .buybox__close svg { width: 18px; height: 18px; } .buybox__close:hover { background: rgba(1, 15, 149, 0.16); transform: scale(1.08); } /* ========================================================================== "what's in the kit" popup — full details, photos, complete list ========================================================================== */ .kitbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; } .kitbox[hidden] { display: none; } .kitbox__backdrop { position: absolute; inset: 0; background: rgba(0, 5, 40, 0.8); opacity: 0; transition: opacity 0.25s ease; } .kitbox--open .kitbox__backdrop { opacity: 1; } .kitbox__panel { position: relative; width: min(720px, 96vw); max-height: 90vh; overflow-y: auto; padding: clamp(22px, 3.5vw, 36px); background: var(--c-bg-soft); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(24px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.32, 1.2, 0.4, 1); scrollbar-width: thin; scrollbar-color: rgba(1, 15, 149, 0.3) transparent; } .kitbox__panel::-webkit-scrollbar { width: 6px; } .kitbox__panel::-webkit-scrollbar-thumb { background: rgba(1, 15, 149, 0.3); border-radius: 3px; } .kitbox--open .kitbox__panel { opacity: 1; transform: none; } @media (max-width: 639px) { .kitbox { padding: 0; align-items: end; } .kitbox__panel { width: 100vw; max-height: 92vh; border-radius: 24px 24px 0 0; transform: translateY(60px); } } .kitbox__close { position: sticky; inset-block-start: 0; float: inline-end; display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(1, 15, 149, 0.08); color: var(--c-ultra); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; z-index: 2; } .kitbox__close svg { width: 18px; height: 18px; } .kitbox__close:hover { background: rgba(1, 15, 149, 0.16); transform: scale(1.08); } .kitbox__title { font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem); font-weight: 600; color: var(--c-ultra); padding-inline-end: 44px; /* clear of the close button */ } /* photo placeholders — TODO: real product photos */ .kitbox__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-block-start: 18px; } .kitbox__photo { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; background: repeating-linear-gradient(135deg, rgba(0, 185, 255, 0.1) 0 12px, rgba(0, 185, 255, 0.04) 12px 24px); border: 1px dashed rgba(1, 15, 149, 0.2); color: var(--c-ink-soft); font-size: 0.82rem; font-weight: 600; } .kitbox__lead { margin-block-start: 18px; font-size: 1rem; line-height: 1.55; color: var(--c-ink); } .kitbox__cols { display: grid; gap: 18px 28px; margin-block-start: 20px; } @media (min-width: 560px) { .kitbox__cols { grid-template-columns: 1fr 1fr; } } .kitbox__sub { font-size: 1rem; font-weight: 700; color: var(--c-ultra); margin-block-end: 10px; } .kitbox__list { display: grid; gap: 9px; font-size: 0.95rem; color: var(--c-ink-soft); } .kitbox__list li { position: relative; padding-inline-start: 26px; } .kitbox__list li::before { content: "✓"; position: absolute; inset-inline-start: 0; inset-block-start: 1px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--c-saffron); color: var(--c-ultra); font-size: 0.68rem; font-weight: 700; } .kitbox__cta { margin-block-start: 24px; text-align: center; } /* ========================================================================== floating WhatsApp button ========================================================================== */ .whatsapp-fab { position: fixed; z-index: 50; inset-block-end: 22px; inset-inline-end: 22px; width: 58px; height: 58px; display: grid; place-items: center; background: #25d366; border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; } .whatsapp-fab svg { width: 32px; height: 32px; } .whatsapp-fab:hover { transform: scale(1.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } /* ========================================================================== motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }