/* ============ TusaPlay landing — светлая тема (в тон приложению) ============ * Палитра синхронизирована с app/src/ui/theme.js (LIGHT + GAME_COLORS). * Каждая страница игры задаёт свой --game-* через inline-стиль на . */ :root { --bg: #E5EDD3; /* шалфейная подложка */ --bg-soft: #EEF3E2; --card: #FFFFFF; --card-soft: #F3F7EA; --primary: #4C712A; /* зелёный CTA */ --primary-d: #3B5A20; --accent: #CA4924; /* терракота */ --text: #22331A; --dim: #5C6B49; --border: #D3DDBE; --ok: #3E8752; /* фирменные цвета игр */ --spy: #CA4924; --guess: #DD9414; --sketch: #2E8FA3; --timer: #7B5EA7; --alias: #C2506E; /* акцент текущей страницы (переопределяется на страницах игр) */ --game: var(--primary); --game-soft: #F3F7EA; --r-s: 12px; --r-m: 16px; --r-l: 20px; --r-xl: 28px; --shadow-card: 0 6px 20px rgba(14, 20, 8, 0.07); --shadow-btn: 0 4px 14px rgba(14, 20, 8, 0.16); --maxw: 1080px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--accent); } .accent { color: var(--accent); } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: clamp(48px, 8vw, 92px) 0; } /* ============ nav ============ */ .nav { position: sticky; top: 0; z-index: 20; background: rgba(229, 237, 211, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 12px; } .nav__icon { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); } .nav__logo { font-size: 18px; font-weight: 800; letter-spacing: 0.4px; color: var(--text); } .nav__logo b { color: var(--accent); } .nav__links { margin-left: auto; display: flex; gap: 22px; align-items: center; } .nav__links a { font-weight: 600; font-size: 15px; color: var(--dim); } .nav__links a:hover { color: var(--accent); } .nav__cta { background: var(--primary); color: #fff !important; padding: 8px 16px; border-radius: 99px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-btn); } .nav__cta:hover { background: var(--primary-d); } @media (max-width: 640px) { .nav__links a:not(.nav__cta) { display: none; } } /* ============ hero ============ */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(28px, 5vw, 64px); padding: clamp(40px, 7vw, 84px) 0 clamp(36px, 5vw, 64px); } @media (max-width: 820px) { .hero { grid-template-columns: 1fr; text-align: center; } } .hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--primary); background: var(--card); border: 1px solid var(--border); padding: 6px 14px; border-radius: 99px; margin-bottom: 18px; } .hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .hero h1 { margin: 0 0 18px; font-size: clamp(38px, 6.4vw, 66px); font-weight: 800; line-height: 1.03; letter-spacing: -0.5px; } .hero__text { margin: 0 auto; max-width: 480px; font-size: clamp(16px, 2vw, 19px); font-weight: 400; color: var(--dim); } @media (max-width: 820px) { .hero__text { margin: 0 auto; } } .hero__actions { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 820px) { .hero__actions { justify-content: center; } } .hero__visual { position: relative; display: flex; justify-content: center; } .hero__phone { width: clamp(230px, 28vw, 300px); border-radius: 34px; border: 8px solid #1c2414; background: #1c2414; box-shadow: 0 30px 60px rgba(20, 30, 12, 0.28); transform: rotate(3deg); } .hero__cards { position: absolute; left: -6%; bottom: -4%; width: clamp(120px, 15vw, 170px); filter: drop-shadow(0 14px 22px rgba(20, 30, 12, 0.28)); animation: float 6s ease-in-out infinite; } @keyframes float { 0%,100%{transform:translateY(0) rotate(-8deg);} 50%{transform:translateY(-12px) rotate(-4deg);} } /* ============ buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 99px; font-weight: 700; font-size: 16px; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; } .btn--primary { background: var(--game); color: #fff; box-shadow: var(--shadow-btn); } .btn--primary:hover { transform: translateY(-2px); color: #fff; filter: brightness(1.05); } .btn--ghost { background: var(--card); color: var(--text); border-color: var(--border); } .btn--ghost:hover { color: var(--text); border-color: var(--game); } /* ============ store buttons ============ */ .stores { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 820px) { .stores { justify-content: center; } } .store { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-m); padding: 10px 16px 10px 12px; box-shadow: var(--shadow-card); position: relative; transition: transform .15s, box-shadow .15s; } .store:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,20,8,.12); color: var(--text); } .store__logo { width: 34px; height: 34px; flex: none; color: var(--text); } .store__head { display: flex; flex-direction: column; line-height: 1.1; } .store__kicker { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); } .store__name { font-size: 16px; font-weight: 800; color: var(--text); } .store__ribbon { position: absolute; top: -8px; right: -8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 99px; letter-spacing: .4px; } /* ============ section heading ============ */ .head { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 5vw, 52px); } .head__kicker { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--game); } .head h2 { margin: 8px 0 12px; font-size: clamp(28px, 4.4vw, 42px); font-weight: 800; letter-spacing: -0.4px; } .head p { margin: 0; font-size: 17px; color: var(--dim); } /* ============ games grid ============ */ .games { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .game-card { --c: var(--primary); display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-l); padding: 24px 22px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; color: var(--text); transition: transform .16s, box-shadow .16s, border-color .16s; } .game-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); } .game-card:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 14px 30px rgba(14,20,8,.13); color: var(--text); } .game-card__ico { width: 52px; height: 52px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 26px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); } .game-card__badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); } .game-card h3 { margin: 0; font-size: 21px; font-weight: 800; } .game-card p { margin: 0; font-size: 14.5px; color: var(--dim); line-height: 1.5; } .game-card__more { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--c); display: inline-flex; align-items: center; gap: 6px; } .game-card:hover .game-card__more { gap: 10px; } .game-card--spy { --c: var(--spy); } .game-card--guess { --c: var(--guess); } .game-card--sketch { --c: var(--sketch); } .game-card--timer { --c: var(--timer); } .game-card--alias { --c: var(--alias); } /* ============ feature band (light card section) ============ */ .band { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; } .feature { display: flex; flex-direction: column; gap: 10px; } .feature__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--game-soft); color: var(--game); } .feature h3 { margin: 0; font-size: 18px; font-weight: 800; } .feature p { margin: 0; font-size: 15px; color: var(--dim); } /* ============ steps ============ */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; counter-reset: step; } .step { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-l); padding: 26px 22px; box-shadow: var(--shadow-card); position: relative; } .step__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--game); color: #fff; font-weight: 800; font-size: 15px; margin-bottom: 14px; } .step h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; } .step p { margin: 0; font-size: 15px; color: var(--dim); } /* ============ online split ============ */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 64px); } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } } .split__copy h2 { margin: 0 0 14px; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.4px; } .split__copy p { margin: 0 0 18px; font-size: 17px; color: var(--dim); } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--border); color: var(--text); } .chip b { color: var(--game); } /* ============ phone strip ============ */ .shots { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } .shot { width: clamp(150px, 20vw, 210px); border-radius: 26px; border: 7px solid #1c2414; background: #1c2414; box-shadow: 0 22px 44px rgba(20, 30, 12, 0.24); } .shot:nth-child(odd) { transform: rotate(-2.5deg); } .shot:nth-child(even) { transform: rotate(2deg) translateY(10px); } /* ============ CTA band ============ */ .cta-band { text-align: center; } .cta-band h2 { margin: 0 0 10px; font-size: clamp(28px, 4.4vw, 44px); font-weight: 800; } .cta-band p { margin: 0 0 24px; font-size: 17px; color: var(--dim); } /* ============ footer ============ */ .footer { background: var(--card); border-top: 1px solid var(--border); padding: 40px 0 28px; } .footer__inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; } .footer__brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17px; } .footer__brand img { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); } .footer__brand b { color: var(--accent); } .footer__col { display: flex; flex-direction: column; gap: 9px; } .footer__col h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); font-weight: 700; } .footer__col a { font-size: 15px; color: var(--text); font-weight: 500; } .footer__col a:hover { color: var(--accent); } .footer__note { width: 100%; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--dim); text-align: center; } /* ============ breadcrumbs (game pages) ============ */ .crumbs { font-size: 14px; color: var(--dim); padding-top: 22px; } .crumbs a { color: var(--dim); font-weight: 600; } .crumbs a:hover { color: var(--game); } /* ============ game page hero ============ */ .gh { padding: clamp(30px, 5vw, 56px) 0 clamp(36px, 5vw, 64px); } .gh__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(28px, 5vw, 60px); } @media (max-width: 820px) { .gh__grid { grid-template-columns: 1fr; text-align: center; } } .gh__badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--game); background: var(--game-soft); padding: 7px 16px; border-radius: 99px; margin-bottom: 16px; } .gh h1 { margin: 0 0 16px; font-size: clamp(34px, 5.6vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -0.5px; } .gh__lead { margin: 0 auto 24px; max-width: 480px; font-size: 18px; color: var(--dim); } @media (max-width: 820px){ .gh__phone-wrap{ display:flex; justify-content:center; } } .prose { max-width: 720px; margin: 0 auto; } .prose h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; margin: 0 0 12px; letter-spacing: -0.3px; } .prose h3 { font-size: 20px; font-weight: 800; margin: 26px 0 6px; } .prose p { font-size: 17px; color: var(--text); margin: 0 0 14px; } .prose ul { padding-left: 20px; } .prose li { font-size: 17px; margin: 6px 0; } .faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq details { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-m); padding: 16px 20px; } .faq summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq details[open] summary { color: var(--game); margin-bottom: 8px; } .faq p { margin: 0; color: var(--dim); font-size: 16px; }