/* ============================================================ jjt.kz landing v2 — заманауи полировка + GSAP анимация күйлері style.min.css-тен КЕЙІН жүктеледі: тек override, ешнәрсе қайталанбайды. style.min.css-ке тиіспейміз (source жоқ). ============================================================ */ /* ---------- 1. Токендер ---------- */ :root { --blue-tint: #f2f7fc; --radius-lg: 16px; --shadow-1: 0 1px 2px rgba(16, 42, 77, .06), 0 4px 16px rgba(16, 42, 77, .08); --shadow-2: 0 8px 30px rgba(37, 99, 172, .16); --ease-out-strong: cubic-bezier(.23, 1, .32, 1); } /* ---------- 1b. Қос скроллбарды жою ---------- style.min.css-те .wrapper{overflow-x:hidden} бар — CSS ережесі бойынша бір ось hidden болса, екіншісі автоматты auto болады → wrapper өз скроллбарын шығарады (терезенікіне қоса). y-осьті ашық түрде жабамыз. */ .wrapper { overflow-y: hidden; /* ескі браузер: скроллбарсыз кесу */ overflow-y: clip; /* заманауи: скролл-контейнер мүлде құрылмайды */ } /* ---------- 2. Лого-интро (шымылдық) ---------- html.js-intro класын -тегі inline-гейт қосады: тек бірінші кіру + prefers-reduced-motion емес кезде. */ #intro { display: none; } html.js-intro #intro { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: var(--blue); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* GSAP жүктелмесе — шымылдық 3с-те өзін өзі жояды (GSAP келгенде animation:none етеді) */ animation: jjt-intro-fail .4s ease-out 3s forwards; } html.js-intro #intro .intro-logo { width: min(220px, 40vw); opacity: 0; /* GSAP-сыз fallback: лого жәй ғана fade-in болады */ animation: jjt-intro-logo .6s var(--ease-out-strong) .15s forwards; } @keyframes jjt-intro-fail { to { opacity: 0; visibility: hidden; } } @keyframes jjt-intro-logo { to { opacity: 1; } } /* ---------- 3. Hero бастапқы жасырын күйлер (FOUC қорғанысымен) ---------- Тек html.js-anim астында; JS істемей қалса 3.5с-те CSS өзі ашады. */ html.js-anim .hero .title, html.js-anim .hero .container > :not(.title):not(.btn), html.js-anim .hero-bg, html.js-anim .scroll-hint, html.js-anim #header { opacity: 0; animation: jjt-auto-reveal .5s var(--ease-out-strong) 3.5s forwards; } @keyframes jjt-auto-reveal { to { opacity: 1; } } /* ---------- 4. Headline сөз-маскалары (JS split кейін қолданады) ---------- */ .hero .title .w-mask { display: inline-block; overflow: hidden; vertical-align: top; } .hero .title .w { display: inline-block; } /* ---------- 5. Hero фоны: ::before → нақты div (GSAP-target болу үшін) ---------- */ .hero::before { content: none; } .hero-bg { position: absolute; top: 70px; left: 0; width: 100%; height: 100%; z-index: 0; opacity: .1; pointer-events: none; background-image: url("../img/logo/logo-mini-blue.png"); background-position: 50% 0; background-repeat: no-repeat; background-size: contain; -webkit-transform: rotate(15deg) scale(1.3); -ms-transform: rotate(15deg) scale(1.3); transform: rotate(15deg) scale(1.3); } @media (min-width: 991px) { /* бұрын top:-170px/height:1000px еді — логоның жоғарғы шеті қиылып қалатын; енді hero ішіне толық сыяды, header-ден сәл төмен */ .hero-bg { background-image: url("../img/logo/logo-big-blue.png"); opacity: 1; top: 50px; height: calc(100% - 80px); background-position: center; -webkit-transform: none; -ms-transform: none; transform: none; } } /* лого-бөлшек канвасы (hero-particles.js, desktop + mobile): іске қосылғанда статикалық суретті алмастырады */ .hero-canvas { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-bg.has-canvas { background-image: none; } .hero-bg.has-canvas .hero-canvas { display: block; } /* mobile-да канвас қосылғанда: айналдырылған кіші сулы-белгі орнына таза contain-орналасқан толық лого (бөлшектер жақсы көрінуі үшін) */ @media (max-width: 990.98px) { .hero-bg.has-canvas { top: 0; height: 100%; opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } /* ---------- 6. Hero атмосферасы: блобтар + grain ---------- filter:blur қолданылмайды (қымбат) — градиенттің өзі жұмсақ. */ .hero-blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; } .hero-blob.-a { width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; top: -8%; left: -10%; background: radial-gradient(closest-side, rgba(50, 128, 227, .16), rgba(50, 128, 227, 0) 70%); } .hero-blob.-b { width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; bottom: -6%; right: -8%; background: radial-gradient(closest-side, rgba(37, 99, 172, .13), rgba(37, 99, 172, 0) 70%); } /* статикалық grain — анимацияланбайды (paint үнемдеу) */ .hero::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- 7. Scroll-hint ---------- */ .scroll-hint { position: absolute; bottom: 26px; left: 50%; margin-left: -13px; z-index: 1; width: 26px; height: 42px; border: 2px solid rgba(37, 99, 172, .35); border-radius: 14px; pointer-events: none; } .scroll-hint span { position: absolute; top: 8px; left: 50%; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--blue); animation: jjt-scroll-hint 1.7s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes jjt-scroll-hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(15px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } /* ---------- 8. Hero CTA: контурдан градиент-fill-ге ---------- */ .hero .btn.btn-border-blue { background-image: linear-gradient(135deg, var(--blue) 0%, var(--blue-hover) 100%); color: var(--white); border-color: rgba(0, 0, 0, 0); /* 2px ені сақталады — layout shift жоқ */ border-radius: 12px; padding: 14px 28px; transition: transform .16s var(--ease-out-strong), filter .16s ease; } .hero .btn.btn-border-blue:hover { background-image: linear-gradient(135deg, var(--blue) 0%, var(--blue-hover) 100%); color: var(--white); } @media (hover: hover) and (pointer: fine) { .hero .btn.btn-border-blue:hover { transform: translateY(-2px); filter: brightness(1.08); } } .hero .btn.btn-border-blue:active { transform: scale(.97); } .hero .btn.btn-border-blue:focus-visible { outline: 3px solid rgba(50, 128, 227, .45); outline-offset: 2px; } /* ---------- 9. Батырмалардың жалпы полировкасы (landing-те ғана жүктеледі) ---------- */ .btn { border-radius: 12px; transition: transform .16s var(--ease-out-strong), background-color .2s ease, color .2s ease; } .btn:active { transform: scale(.97); } .btn:focus-visible { outline: 3px solid rgba(50, 128, 227, .45); outline-offset: 2px; } /* ---------- 10. Header ауысуын жұмсарту (main.js өзгеріссіз) ---------- Ақ фон+көлеңке псевдо-қабатта — тек opacity анимацияланады. */ @media (min-width: 991px) { header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--white); box-shadow: 0 2px 16px rgba(37, 99, 172, .10); opacity: 0; transition: opacity .25s ease; z-index: -1; /* header fixed+z-index → өз stacking context-і бар, контент үстінде қалады */ } /* базалық desktop фон transparent — snap болмас үшін .white-bg фонын да transparent етеміз */ header.white-bg { background: rgba(0, 0, 0, 0); box-shadow: none; } header.white-bg::before { opacity: 1; } } /* ---------- 11. Секция ырғағы: кезектесетін көгілдір жолақтар ---------- */ #opportunity, #gallery, #package { background: var(--blue-tint); padding-bottom: 60px; } @media (min-width: 768px) { #opportunity, #gallery, #package { padding-bottom: 80px; } } /* ---------- 12. Карточкалар: радиус, жұмсақ көлеңке, hover-lift ---------- */ .opportunity .list .card .box { border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } .package .card { border-radius: var(--radius-lg); background: var(--white); position: relative; } .requirement .card { border-radius: var(--radius-lg); } @media (hover: hover) and (pointer: fine) { /* opportunity: GSAP .card-ты анимациялайды, hover .box-та → transform конфликті жоқ */ .opportunity .list .card .box { transition: transform .2s var(--ease-out-strong); position: relative; } .opportunity .list .card .box::after, .package .card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; box-shadow: var(--shadow-2); opacity: 0; transition: opacity .2s ease; pointer-events: none; } .opportunity .list .card:hover .box { transform: translateY(-4px); } .opportunity .list .card:hover .box::after { opacity: 1; } /* package: transform-transition тек reveal аяқталған соң (.is-revealed) — әйтпесе GSAP scroll-reveal transition-мен қақтығысады */ .package .card.is-revealed { transition: transform .2s var(--ease-out-strong); } .package .card.is-revealed:hover { transform: translateY(-4px); } .package .card:hover::after { opacity: 1; } } /* ортаңғы пакетті ерекшелеу — дәл 3 карточка болғанда ғана қолданылады */ .package .section-body .card:nth-child(2):nth-last-child(2) { background: linear-gradient(180deg, var(--blue-tint), var(--white) 55%); box-shadow: var(--shadow-1); } .package .card .price { color: var(--blue); } /* ---------- 13. Типографика және UX ұсақ-түйектері ---------- */ .title { text-wrap: balance; } ::selection { background: var(--blue); color: var(--white); } /* anchor-сілтемелер fixed header астына түспейді */ html { scroll-padding-top: 90px; scroll-behavior: smooth; } /* ---------- 14. Hero-дағы қос CTA ---------- */ .hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .hero .hero-actions .btn { margin: 0; min-width: 0; padding: 14px 28px; } .btn-ghost { border: 2px solid rgba(37, 99, 172, .35); border-radius: 12px; color: var(--blue); background: transparent; text-transform: uppercase; font-weight: 600; text-decoration: none; } @media (min-width: 991px) { .hero .hero-actions { justify-content: flex-start; } } /* ---------- 14a. Hero-тэглайн: заголовок астындағы кіші сұр дескриптор ---------- .hero .container балалары арасында тұрғандықтан landing-anim.js оны автоматты түрде subtitle тобына қосып, GSAP-пен заголовоктан кейін ашады (JS-ті түзетпейді). */ .hero-tagline { margin: -8px 0 18px; /* заголовокқа жақын, сипаттамаға дейін тыныс */ font-size: 15px; font-weight: 500; letter-spacing: .04em; color: rgba(0, 0, 0, .5); } /* ---------- 14b. Жоба туралы: мақсат-лид + бағыт-карточкалар ---------- */ /* settings-тен келетін «Мақсаты…» мәтіні — лид-абзац стилінде */ .about .section-header > :not(.title) { max-width: 700px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: rgba(0, 0, 0, .72); text-align: center; } .direction-eyebrow { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(37, 99, 172, .65); margin: 0 0 18px; } /* JJT 5.0 категориялары */ .category-title { text-align: center; font-size: 24px; font-weight: 700; color: var(--blue); margin: 0 0 6px; } .category-sub { text-align: center; font-size: 15px; color: rgba(0, 0, 0, .6); margin: 0 0 24px; } .category-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 980px; margin: 0 auto; } @media (min-width: 991px) { .category-cards { grid-template-columns: repeat(4, 1fr); gap: 18px; } .category-title { font-size: 30px; } } .category-card { background: var(--white); border: 1px solid rgba(37, 99, 172, .12); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 24px 16px; text-align: center; } .category-badge { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); margin-bottom: 14px; } .category-name { font-size: 16px; font-weight: 700; color: var(--blue); margin: 0; line-height: 1.35; } @media (hover: hover) and (pointer: fine) { .category-card { transition: transform .2s var(--ease-out-strong); } .category-card:hover { transform: translateY(-4px); } .category-card:hover .category-badge { background: var(--blue); color: var(--white); transition: background-color .2s ease, color .2s ease; } } /* ---------- 14c. Мүмкіндіктер-карточкаларының ішкі дизайны ---------- */ /* check-circle белгісі — blade-ге тимей, таза CSS-пен */ .opportunity .list .card .box::before { content: ""; display: block; width: 30px; height: 30px; margin-bottom: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23f2f7fc' stroke='%232563AC' stroke-width='1.8'/%3E%3Cpath d='m8 12.2 2.6 2.6L16 9.5' stroke='%232563AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .opportunity .list .card .box h4 { font-size: 17px; margin-bottom: 8px; } .opportunity .list .card .box .text, .opportunity .list .card .box p { color: rgba(0, 0, 0, .7); line-height: 1.6; } @media (min-width: 991px) { .opportunity .list .card .box h4 { font-size: 20px; } .opportunity .list .card .box .text { font-size: 16px; } } /* ---------- 14d. Спикерлер: үздіксіз marquee-лента ---------- */ /* JS marquee-режимде linear қозғалыс керек (Swiper inline ease-ті жеңу үшін !important) */ .speakers-marquee .swiper-wrapper { transition-timing-function: linear !important; } /* ---------- 15. Стат-жолақ ---------- */ .stats { padding-top: 40px; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--white); border: 1px solid rgba(37, 99, 172, .12); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 22px 18px; text-align: center; } .stat-value { font-family: "Druk Wide Cyr", "Montserrat", sans-serif; font-size: 34px; line-height: 1.1; color: var(--blue); } @media (min-width: 991px) { .stat-value { font-size: 44px; } } .stat-label { margin-top: 8px; font-size: 14px; color: rgba(0, 0, 0, .62); } /* ---------- 16. ЖЖТ жолы (таймлайн) ---------- */ .joly .section-header { text-align: center; } .joly-track { position: relative; max-width: 680px; margin: 0 auto; } .joly-line { position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: rgba(37, 99, 172, .15); border-radius: 2px; } /* прогресс-сызық: GSAP scrub scaleY 0→1 (transform-only) */ .joly-line-progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--blue); border-radius: inherit; transform: scaleY(0); transform-origin: top center; } .joly-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 36px; } .joly-step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; } .joly-num { position: relative; /* сызықтың үстінде тұрады */ width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 2px solid rgba(37, 99, 172, .3); color: var(--blue); font-family: "Druk Wide Cyr", "Montserrat", sans-serif; font-size: 20px; display: flex; align-items: center; justify-content: center; } .joly-title { font-size: 20px; font-weight: 700; color: var(--blue); margin: 14px 0 8px; } .joly-body .text { line-height: 1.6; } /* ---------- 18. FAQ ---------- */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { background: var(--white); border: 1px solid rgba(37, 99, 172, .14); border-radius: var(--radius-lg); } .faq-item + .faq-item { margin-top: 12px; } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 600; font-size: 16px; color: var(--black); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:focus-visible { outline: 3px solid rgba(50, 128, 227, .45); outline-offset: 2px; border-radius: var(--radius-lg); } .faq-chevron { flex: 0 0 auto; color: var(--blue); transition: transform .2s var(--ease-out-strong); } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-answer { padding: 0 22px 18px; font-size: 15px; line-height: 1.65; color: rgba(0, 0, 0, .72); } @media (hover: hover) and (pointer: fine) { .faq-item summary:hover { color: var(--blue); } } /* ---------- 19. CTA-жолақ ---------- */ .cta-band { position: relative; overflow: hidden; margin-top: 60px; padding: 64px 0; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-hover) 100%); text-align: center; } .cta-band .title { color: var(--white); margin-bottom: 10px; } .cta-band-sub { color: rgba(255, 255, 255, .85); font-size: 18px; margin: 0 0 26px; } .cta-band-btn { display: inline-block; min-width: 0; /* .btn базасындағы min-width:100% жойылады — контент еніндей */ background: var(--white); color: var(--blue); border: 0; border-radius: 12px; padding: 16px 36px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: transform .16s var(--ease-out-strong), filter .16s ease; } .cta-band-btn:hover { background: var(--white); color: var(--blue); } @media (hover: hover) and (pointer: fine) { .cta-band-btn:hover { transform: translateY(-2px); filter: brightness(1.05); } } .cta-band-btn:active { transform: scale(.97); } .cta-band-note { margin: 22px 0 0; font-size: 14px; color: rgba(255, 255, 255, .75); } .cta-band-note a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .cta-band-blob { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); } .cta-band-blob.-a { width: 380px; height: 380px; top: -160px; left: -80px; } .cta-band-blob.-b { width: 320px; height: 320px; bottom: -140px; right: -60px; } /* ---------- 19b. Mobile compact-pass: телефонда бәрі ықшамырақ ---------- */ @media (max-width: 767px) { .section { padding-top: 44px; } #opportunity, #gallery, #package { padding-bottom: 44px; } .section-header { margin-bottom: 22px; } /* hero: биіктік пен масштаб кішірейеді */ .hero { min-height: 84vh; } .hero .title.title-xl { font-size: 28px; } .hero-tagline { font-size: 13px; margin: -4px 0 16px; letter-spacing: .03em; text-align: center; } .hero .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; } .hero .hero-actions .btn { text-align: center; padding: 13px 20px; font-size: 14px; } /* стат-плиткалар */ .stats { padding-top: 32px; } .stats-grid { gap: 12px; } .stat { padding: 16px 12px; border-radius: 12px; } .stat-value { font-size: 26px; } .stat-label { font-size: 12px; margin-top: 6px; } /* about */ .about .section-header > :not(.title) { font-size: 14px; } .category-title { font-size: 20px; } .category-sub { font-size: 13px; margin-bottom: 18px; } .category-card { padding: 18px 12px; } .category-badge { width: 44px; height: 44px; margin-bottom: 10px; } .category-name { font-size: 13px; } /* ЖЖТ жолы */ .joly-step { grid-template-columns: 44px 1fr; gap: 14px; } .joly-num { width: 44px; height: 44px; font-size: 16px; } .joly-line { left: 21px; } .joly-steps { gap: 26px; } .joly-title { font-size: 17px; margin: 10px 0 6px; } .joly-body .text { font-size: 14px; } /* мүмкіндіктер / пікірлер / faq */ .opportunity .list .card .box { padding: 18px 16px; } .opportunity .list .card .box h4 { font-size: 16px; } .faq-item summary { padding: 15px 16px; font-size: 15px; } .faq-answer { padding: 0 16px 15px; font-size: 14px; } /* пакеттер */ .package .card .price { font-size: 22px; } /* CTA-жолақ */ .cta-band { padding: 44px 0; margin-top: 44px; } .cta-band-sub { font-size: 15px; } .cta-band-btn { padding: 14px 26px; font-size: 14px; } } /* ---------- 20. Reduced motion ---------- Иесінің шешімімен әдейі еленбейді — брендтік анимация барлық қолданушыға көрсетіледі. Қайтару керек болса, git-тарихтан осы секцияның бұрынғы @media (prefers-reduced-motion: reduce) блоктарын қалпына келтір. */