/* WOOF School — лендинг (/woof-school/) и поддержка (/woof-school/support/). Страницы идут вне шаблона фонда, поэтому здесь и сброс, и типографика. Различия двух страниц скоупятся классом на : .woof-land / .woof-sup */ :root{ --cream:#F9F8F4; --white:#fff; --green:#2C4525; --green-soft:#42593C; --orange:#E8703C; --orange-dark:#D45E2B; --pastel-green:#DCEAD3; --pastel-pink:#F5DAD8; --pastel-peach:#FADEC9; --pastel-grey:#E8E8E8; --note:#FCF3CA; --footer-bg:#DEDEDE; --ink:#1A1A1A; --ink-2:#5C5C5C; --radius-l:32px; --radius-m:20px; --wrap:1280px; } *{box-sizing:border-box} body{ margin:0; background:var(--cream); color:var(--ink); font-family:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; } /* height:auto обязателен: у картинок проставлены атрибуты width/height (защита от прыжков вёрстки), без сброса высота берётся из атрибута и картинка растягивается */ img{max-width:100%;height:auto;display:block} a{color:inherit} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} /* ---------- Хедер ---------- */ /* sticky + blur: шапка остаётся доступной на длинной странице, но не давит фоном */ .hdr-shell{ position:sticky;top:0;z-index:50;padding:14px 0 10px; background:linear-gradient(180deg,var(--cream) 58%,rgba(249,248,244,0)); } .hdr{ display:flex;align-items:center;gap:28px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid rgba(44,69,37,.08); border-radius:999px; padding:10px 12px 10px 22px; box-shadow:0 6px 24px rgba(56,40,20,.06); } .hdr__brand{display:flex;align-items:center;gap:16px;text-decoration:none;flex-shrink:0} .hdr__logo{height:42px;width:auto;flex-shrink:0} .hdr__div{width:1px;height:34px;background:rgba(44,69,37,.16);flex-shrink:0} .hdr__lock{display:flex;flex-direction:column;justify-content:center} .hdr__name-row{display:flex;align-items:center;gap:10px} .hdr__name{font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.1} /* метка раздела: страница поддержки отличается от лендинга без смены логотипа */ .hdr__tag{ background:var(--pastel-green);color:var(--green); font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; padding:5px 11px;border-radius:20px; } .hdr__sub{ font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:#7A8875;line-height:1.2;margin-top:4px; } .hdr__nav{display:flex;gap:30px;margin-left:auto;align-items:center} .hdr__nav a{ position:relative;text-decoration:none;font-size:15px;font-weight:600; color:#2E3329;white-space:nowrap;padding:6px 0; } .hdr__nav a::after{ content:'';position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--orange);border-radius:2px;transition:right .22s ease; } .hdr__nav a:hover{color:var(--orange)} .hdr__nav a:hover::after{right:0} .hdr__cta{gap:8px} .hdr__cta svg{width:15px;height:15px;fill:currentColor} /* ---------- Кнопки ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; border:0;cursor:pointer;text-decoration:none; font-family:inherit;font-weight:700;font-size:15px; padding:14px 28px;border-radius:40px; transition:background .18s,color .18s,border-color .18s; } .btn_primary{background:var(--orange);color:#fff} .btn_primary:hover{background:var(--orange-dark)} .btn_ghost{background:transparent;color:var(--ink);border:1px solid rgba(26,26,26,.25)} .btn_ghost:hover{border-color:var(--ink)} .btn_sm{padding:11px 24px} /* ---------- Первый экран ---------- */ .hero{ position:relative;overflow:hidden; border-radius:var(--radius-l); display:grid;align-items:center; } .woof-land .hero{ background: radial-gradient(120% 90% at 100% 15%, #FBEEDC 0%, rgba(251,238,220,0) 60%), radial-gradient(90% 80% at 0% 0%, #E8EFDD 0%, rgba(232,239,221,0) 55%), radial-gradient(70% 60% at 12% 100%, #F1CFC6 0%, rgba(241,207,198,0) 60%), linear-gradient(120deg,#F1F3E6 0%,#FBF6EC 45%,#F7E5D2 100%); padding:72px 64px; grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px; min-height:640px; } .woof-sup .hero{ background: radial-gradient(80% 90% at 0% 20%, #F9DFDA 0%, rgba(249,223,218,0) 62%), radial-gradient(80% 90% at 100% 90%, #E3EDDA 0%, rgba(227,237,218,0) 60%), linear-gradient(105deg,#F8E3DD 0%,#FAF4EC 52%,#EAEEDF 100%); padding:64px; grid-template-columns:minmax(0,1fr) 300px;gap:40px; min-height:520px; } .hero__eyebrow{ font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--green);margin-bottom:24px; } .hero__title{margin:0 0 24px;font-size:76px;line-height:1.02;font-weight:700;letter-spacing:-.03em} .woof-sup .hero__title{margin-bottom:22px;font-size:72px;line-height:1.03} .hero__text{margin:0 0 32px;font-size:19px;line-height:1.55;max-width:520px;color:#26261F} .woof-sup .hero__text{max-width:600px} .hero__btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px} .hero__note{font-size:13px;color:var(--ink-2);max-width:520px} .hero__art{position:relative;height:600px} /* рамка телефона рисуется CSS: исходники — чистые скриншоты без корпуса */ .phone{ background:#1D1D1F;padding:8px;border-radius:44px; box-shadow:0 24px 60px rgba(56,40,20,.22); } .phone img{border-radius:36px;width:100%} .hero__phone{position:absolute;width:52%} .hero__phone_1{left:-2%;top:20px;transform:rotate(-9deg);width:47%} .hero__phone_2{left:16%;top:140px;transform:rotate(-3deg);width:45%;z-index:2} .hero__phone_3{right:-2%;top:70px;transform:rotate(6deg);width:50%;z-index:3} .hero__dot{ position:absolute;right:-20px;top:-30px;width:190px;height:190px;border-radius:50%; background:#F6DFA0;opacity:.85; } .hero__badge{ position:absolute;right:2%;bottom:110px;z-index:4; width:150px;height:150px;border-radius:50%; background:var(--green);color:#fff; display:flex;align-items:center;justify-content:center;text-align:center; font-weight:700;font-size:17px;line-height:1.25;padding:0 18px; } .hero__circle{width:260px;height:260px;border-radius:50%;justify-self:center;overflow:hidden} .hero__circle img{width:100%;height:100%;object-fit:cover} /* ---------- Секции ---------- */ .sec{padding:56px 0} .sec__head{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:start;margin-bottom:36px} .sec__title{margin:0;font-size:52px;line-height:1.05;font-weight:700;letter-spacing:-.02em} .sec__lead{margin:8px 0 0;font-size:16px;color:var(--ink-2);line-height:1.55} /* ---------- Лендинг ---------- */ /* Короткие преимущества */ .pills{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .pill{ background:var(--white);border-radius:var(--radius-m); padding:22px 16px;text-align:center;font-weight:700;font-size:15px; } /* Возможности */ .feats{display:grid;grid-template-columns:1fr 1fr;gap:24px} .feat{ position:relative;overflow:hidden; border-radius:var(--radius-l);padding:36px 36px 0; min-height:620px; } .feat_green{background:var(--pastel-green)} .feat_pink{background:var(--pastel-pink)} .feat_peach{background:var(--pastel-peach)} .feat_grey{background:var(--pastel-grey)} .feat__title{margin:0 0 16px;font-size:26px;font-weight:700;letter-spacing:-.01em} .feat__text{margin:0;font-size:16px;line-height:1.55;max-width:400px;color:#33332C} .feat__pic{ position:absolute;right:4%;bottom:-160px;width:44%; transform:rotate(-7deg); } .feat_pink .feat__pic,.feat_grey .feat__pic{right:6%;transform:rotate(5deg)} /* Живая забота */ .care{ position:relative;overflow:hidden; background:var(--pastel-green);border-radius:var(--radius-l); padding:64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center; } .care__eyebrow{ font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--green);margin-bottom:20px; } .care__title{margin:0 0 20px;font-size:56px;line-height:1.05;font-weight:700;letter-spacing:-.02em} .care__text{margin:0 0 28px;font-size:17px;line-height:1.6;max-width:480px;color:#2B2B24} .care__tags{display:flex;gap:12px;flex-wrap:wrap} .care__tag{background:var(--white);border-radius:40px;padding:10px 20px;font-weight:700;font-size:14px} .care__grid{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:520px} .care__grid img{width:100%;height:100%;object-fit:cover;border-radius:20px} .care__grid img:first-child{grid-row:span 2} .care__blob{ position:absolute;left:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%; background:#F1CFC6;z-index:0; } .care__text-col,.care__grid{position:relative;z-index:1} /* Как начать */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .step{background:var(--white);border-radius:var(--radius-m);padding:32px 28px 36px} .step__num{ width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px; margin-bottom:36px; } .step__title{margin:0 0 12px;font-size:20px;font-weight:700} .step__text{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)} /* Скачивание */ .dl{ background:var(--green);border-radius:var(--radius-l);color:#fff; padding:56px;display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:center; } .dl__eyebrow{ font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:#E9A88A;margin-bottom:12px; } .dl__title{margin:0 0 14px;font-size:56px;line-height:1.05;font-weight:700;letter-spacing:-.02em} .dl__text{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.82);max-width:600px} .stores{display:flex;flex-direction:column;gap:14px} .store{ display:flex;align-items:center;gap:14px; background:#111;border:1px solid rgba(255,255,255,.28);border-radius:14px; padding:12px 22px;color:#fff;text-decoration:none; transition:transform .18s,border-color .18s; } .store:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.6)} .store__icon{width:32px;height:32px;flex-shrink:0} .store__icon svg{width:100%;height:100%;display:block} .store__txt{display:flex;flex-direction:column;line-height:1.15} .store__small{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)} .store__name{font-weight:700;font-size:19px;letter-spacing:-.01em} /* Документы */ .docs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .doc{ background:var(--white);border-radius:var(--radius-m);padding:30px 30px 26px; text-decoration:none;color:inherit;display:flex;flex-direction:column;justify-content:space-between; min-height:150px;transition:transform .18s,box-shadow .18s; } .doc:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(56,40,20,.08)} .doc__title{font-size:19px;font-weight:700;letter-spacing:-.01em} .doc__link{color:var(--orange);font-weight:700;font-size:14px;margin-top:28px} /* ---------- Поддержка ---------- */ /* Темы помощи */ .topics{display:grid;grid-template-columns:1fr 1fr;gap:24px} .topic{border-radius:var(--radius-l);padding:34px 36px 38px;min-height:210px} .topic_white{background:var(--white)} .topic_peach{background:var(--pastel-peach)} .topic_green{background:var(--pastel-green)} .topic_pink{background:var(--pastel-pink)} .topic__title{margin:0 0 16px;font-size:26px;font-weight:700;letter-spacing:-.01em} .topic__text{margin:0 0 18px;font-size:16px;line-height:1.55;color:#33332C} .topic__link{font-weight:700;font-size:15px;color:var(--green);text-decoration:underline;text-underline-offset:3px} .topic__link:hover{color:var(--orange)} /* Связаться */ .contact{ background:var(--green);border-radius:var(--radius-l);color:#fff; padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start; } .contact__eyebrow{ font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:#E9A88A;margin-bottom:12px; } .contact__title{margin:0 0 10px;font-size:56px;line-height:1.05;font-weight:700;letter-spacing:-.02em} .contact__mail{display:inline-block;font-weight:700;font-size:17px;margin-bottom:18px} .contact__text{margin:0 0 28px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.82);max-width:520px} .contact__card{background:var(--green-soft);border-radius:24px;padding:32px} .contact__card-title{margin:0 0 18px;font-size:19px;font-weight:700} .contact__list{margin:0;padding-left:20px} .contact__list li{margin-bottom:14px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.9)} .contact__note{ background:var(--note);color:#33301E;border-radius:16px;padding:20px 22px; font-size:15px;line-height:1.5;margin-top:24px; } /* Частые вопросы */ .faq{display:flex;flex-direction:column;gap:16px} .faq__item{background:var(--white);border-radius:var(--radius-m);padding:22px 28px} .faq__item summary{ cursor:pointer;font-weight:700;font-size:18px;list-style:none; display:flex;align-items:center;gap:12px; } .faq__item summary::-webkit-details-marker{display:none} .faq__item summary::before{content:'▶';font-size:11px;color:var(--ink);transition:transform .15s} .faq__item[open] summary::before{transform:rotate(90deg)} .faq__answer{margin:16px 0 4px;font-size:16px;line-height:1.6;color:#33332C} .faq__answer a{color:inherit} /* Ссылки внизу */ .links{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .link-card{ background:var(--white);border-radius:var(--radius-m);padding:30px; text-decoration:none;color:inherit;display:flex;flex-direction:column;justify-content:space-between; min-height:150px;transition:transform .18s,box-shadow .18s; } .link-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(56,40,20,.08)} .link-card__title{font-size:19px;font-weight:700;letter-spacing:-.01em} .link-card__go{color:var(--orange);font-weight:700;font-size:14px;margin-top:28px} /* ---------- Футер ---------- */ .ftr{background:var(--footer-bg);border-radius:var(--radius-l) var(--radius-l) 0 0;margin-top:48px;padding:56px 0 64px} .ftr__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} .ftr__title{font-size:18px;font-weight:800;margin:0 0 14px} .ftr__text{margin:0;font-size:15px;line-height:1.55;color:#3D3D3D;max-width:420px} .ftr a{color:#3D3D3D} .ftr__link{display:block;font-size:15px;margin-bottom:4px} /* ---------- Адаптив ---------- */ @media (max-width:1100px){ .hero{grid-template-columns:1fr;min-height:0} .woof-land .hero{padding:48px 40px;grid-template-columns:1fr;min-height:0} .woof-sup .hero{padding:44px 40px;grid-template-columns:1fr;min-height:0} .hero__title{font-size:56px} .woof-sup .hero__title{font-size:52px} .hero__art{height:440px;margin-top:16px} .hero__circle{justify-self:start} .feats{grid-template-columns:1fr} .care{grid-template-columns:1fr;padding:48px} .care__grid{height:420px} .dl{grid-template-columns:1fr;padding:44px} .docs{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr} .topics{grid-template-columns:1fr} .contact{grid-template-columns:1fr;padding:44px} .links{grid-template-columns:1fr} .sec__head{grid-template-columns:1fr} .hdr__nav{display:none} } @media (max-width:640px){ .wrap{padding:0 16px} .hdr{padding:8px 8px 8px 14px;gap:12px} .hdr__logo{height:34px} .hdr__div{display:none} .hdr__brand{gap:10px} /* на телефоне названию не хватает места — оно наезжает на кнопку, оставляем логотип + CTA */ .hdr__lock{display:none} .hdr__cta{margin-left:auto} .hero{border-radius:24px} .woof-land .hero,.woof-sup .hero{padding:32px 20px} .hero__title,.woof-sup .hero__title{font-size:38px} .hero__text{font-size:16px} .hero__btns .btn,.hero .btn{width:100%} .hero__art{height:320px} .hero__badge{width:110px;height:110px;font-size:14px;bottom:60px} .hero__dot{width:120px;height:120px} .hero__circle{width:200px;height:200px;justify-self:center;margin-top:8px} .sec{padding:36px 0} .sec__title{font-size:34px} .care__title,.dl__title,.contact__title{font-size:34px} .pills{grid-template-columns:1fr 1fr;gap:12px} .steps{grid-template-columns:1fr} .docs{grid-template-columns:1fr} .feat{padding:28px 24px 0;min-height:520px} .feat__pic{width:60%;right:2%;bottom:-120px} .phone{padding:6px;border-radius:34px} .phone img{border-radius:28px} .care{padding:32px 20px} .care__grid{grid-template-columns:1fr 1fr;height:360px} .dl{padding:32px 20px} .topic{padding:28px 24px} .contact{padding:32px 20px} .contact__card{padding:24px 20px} .ftr__grid{grid-template-columns:1fr;gap:28px} }