/* ============================================================ Hair Lab — рисованная тема (studio.css) Две палитры в одном файле: • СИНЯЯ (по умолчанию) — в тон фирменным прайсам • ТЁПЛАЯ — включается классом Чтобы вернуться к тёплой версии: добавьте class="warm" к тегу . ============================================================ */ :root{ /* ---------- ТЁПЛАЯ ПАЛИТРА (активная по умолчанию) ---------- */ --paper: #f3e8d6; --paper-2: #ece0cb; --dark: #244a48; --dark-2: #1d3d3c; --card: #fbf5ea; --card-2: #f6ecdb; --ink: #3c352d; --ink-soft: #6f6052; --on-bg: #6f6052; --on-bg-strong: #3c352d; --on-dark: #f3e8d6; --on-dark-muted: rgba(243,232,214,.78); --stroke: #d9c7ad; --stroke-ink:#3c352d; --terra: #b65336; --terra-deep: #9f422a; --teal: #3a7670; --teal-deep: #2f625e; --gold: #946125; --gold-deep: #7d4f1b; --gold-light: #f0c27c; --blush: #e7b6a0; --stars: #e3a96f; --shadow: 0 14px 30px rgba(60,40,25,.14); --shadow-sm: 0 8px 18px rgba(60,40,25,.12); --glow-1: rgba(227,169,111,.30); --glow-2: rgba(79,146,139,.18); --glow-3: rgba(210,112,80,.14); --hatch-1: rgba(210,112,80,.05); --hatch-2: rgba(79,146,139,.05); /* иллюстрация-герой */ --il-line: #3c352d; --il-paper: #fbf5ea; --il-sky: #bfe0db; --il-sun: #e3a96f; --il-accent: #d27050; --il-hill-a: #cf8f56; --il-hill-b: #4f928b; --il-hill-c: #3a7670; --il-tree2: #244a48; --il-bottle-a:#e7b6a0; /* радиусы */ --r-xl: 30px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --maxw: 1040px; } /* ---------- СИНЯЯ ПАЛИТРА (резервная) — включить: ---------- */ body.blue{ --paper: #1b34cf; --paper-2: #1730bd; --dark: #0e1f7a; --dark-2: #0b1a66; --card: #f6f1e6; --card-2: #efe9da; --ink: #2a2550; --ink-soft: #5b5680; --on-bg: rgba(233,237,255,.86); --on-bg-strong: #ffffff; --on-dark: #eef1ff; --on-dark-muted: rgba(238,241,255,.75); --stroke: #d8cdb5; --stroke-ink:#0c1a63; --terra: #d65aa6; --terra-deep: #b8418a; --teal: #2bb3c9; --teal-deep: #1f8da0; --gold: #6f7bf0; --gold-deep: #5563d8; --gold-light: #ffd24a; --blush: #e7a6cf; --stars: #ffd24a; --shadow: 0 14px 30px rgba(8,16,70,.34); --shadow-sm: 0 8px 18px rgba(8,16,70,.26); --glow-1: rgba(120,150,255,.32); --glow-2: rgba(214,90,166,.20); --glow-3: rgba(43,179,201,.18); --hatch-1: rgba(214,90,166,.06); --hatch-2: rgba(43,179,201,.06); --il-line: #0c1a63; --il-paper: #f6f1e6; --il-sky: #bfe6f2; --il-sun: #f3b0d0; --il-accent: #d65aa6; --il-hill-a: #7b87ef; --il-hill-b: #3f73e0; --il-hill-c: #274fc2; --il-tree2: #16276f; --il-bottle-a:#e7a6cf; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } #top{ scroll-margin-top:100px; } body{ margin:0; color:var(--on-bg); background-color:var(--paper); background-image: radial-gradient(900px 500px at 12% -5%, var(--glow-1), transparent 60%), radial-gradient(800px 600px at 100% 8%, var(--glow-2), transparent 55%), radial-gradient(700px 500px at 50% 120%, var(--glow-3), transparent 60%); font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-weight:600; -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden; position:relative; } /* бумажная зернистость */ body::before{ content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05; mix-blend-mode:multiply; 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .skip-link{ position:fixed; left:16px; top:12px; z-index:7000; padding:10px 16px; border:2px solid var(--stroke-ink); border-radius:999px; background:var(--card); color:var(--ink); font-weight:800; transform:translateY(-160%); transition:transform .18s; } .skip-link:focus{ transform:translateY(0); } /* ---------- Типографика ---------- */ .script{ font-family:"Caveat",cursive; } h1,h2,h3{ font-family:"Comfortaa",cursive; font-weight:700; margin:0; letter-spacing:-.01em; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 18px; } /* контекст светлых карточек — внутри них тёмный текст */ .nav, .feature, .frame, .cat-card, .review, .hero-badge, .btn-ghost, .tabs, .price-card, .modal-inner, .contact-items a, .step, .stat{ color:var(--ink); } /* ============================================================ NAV */ .nav{ position:sticky; top:14px; z-index:1000; margin:14px auto; width:min(calc(100% - 28px), var(--maxw)); display:flex; align-items:center; gap:14px; padding:8px 8px 8px 18px; background:color-mix(in srgb, var(--card) 86%, transparent); border:2px solid var(--stroke-ink); border-radius:999px; box-shadow:var(--shadow-sm); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .nav-brand{ font-family:"Caveat",cursive; font-size:30px; font-weight:700; color:var(--terra); line-height:1; white-space:nowrap; } .nav-links{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; } .nav-links a{ padding:8px 14px; border-radius:999px; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; transition:background .2s,color .2s; } .nav-links a:hover{ background:color-mix(in srgb, var(--terra) 16%, transparent); color:var(--terra-deep); } .nav-cta{ background:var(--terra); color:#fff !important; border:2px solid var(--stroke-ink); box-shadow:2px 2px 0 var(--stroke-ink); padding:8px 16px !important; } .nav-cta:hover{ background:var(--terra-deep) !important; transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--stroke-ink); } .nav-burger{ display:none; font-family:inherit; } @media (max-width:760px){ .nav{ padding:8px 10px; gap:8px; } .nav-brand{ font-size:26px; } .nav-links{ position:absolute; top:calc(100% + 10px); right:0; flex-direction:column; align-items:stretch; gap:6px; background:var(--card); border:2px solid var(--stroke-ink); border-radius:var(--r-lg); padding:10px; box-shadow:var(--shadow); min-width:200px; display:none; } .nav-links.open{ display:flex; } .nav-links a{ text-align:center; } .nav-burger{ display:inline-flex; margin-left:auto; width:42px; height:42px; align-items:center; justify-content:center; border:2px solid var(--stroke-ink); border-radius:50%; background:var(--card); cursor:pointer; font-size:18px; color:var(--ink); } } /* ============================================================ КНОПКИ */ .btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px; font-family:"Nunito",sans-serif; font-weight:800; font-size:15px; white-space:nowrap; cursor:pointer; border:2px solid var(--stroke-ink); transition:transform .15s, box-shadow .15s, background .2s; } .btn svg{ width:18px; height:18px; } .btn-primary{ background:var(--terra); color:#fff; box-shadow:3px 3px 0 var(--stroke-ink); } .btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--stroke-ink); } .btn-ghost{ background:var(--card); color:var(--ink); box-shadow:3px 3px 0 var(--stroke-ink); } .btn-ghost:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--stroke-ink); } /* ============================================================ ЗАГОЛОВКИ СЕКЦИЙ */ .section{ padding:56px 0; } .section-eyebrow{ font-family:"Caveat",cursive; font-size:26px; color:var(--terra); line-height:1; margin-bottom:2px; } .section-title{ font-size:clamp(26px,4vw,38px); margin-bottom:10px; color:var(--on-bg-strong); } .section-head{ margin-bottom:30px; } .section-head.center{ text-align:center; } /* ============================================================ HERO */ .hero{ position:relative; padding:26px 0 10px; } .hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:30px; align-items:center; } .hero-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:2px solid var(--stroke-ink); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:800; box-shadow:var(--shadow-sm); margin-bottom:18px; } .hero-badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--teal); } .hero h1{ font-size:clamp(34px,5.4vw,60px); line-height:1.04; margin-bottom:8px; color:var(--on-bg-strong); } .hero h1 .script{ color:var(--terra); font-size:1.32em; display:inline-block; transform:rotate(-2deg); } .hero-sub{ font-size:17px; color:var(--on-bg); max-width:30em; margin:14px 0 26px; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .hero-art{ position:relative; } .hero-art svg{ width:100%; height:auto; filter:drop-shadow(0 18px 30px rgba(8,16,70,.28)); } @media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; gap:18px; } .hero-art{ order:0; max-width:360px; margin:8px auto 0; } } @media (max-width:560px){ .hero{ padding-top:12px; } .hero-art{ max-width:280px; } .hero-actions .btn{ flex:1 1 150px; justify-content:center; padding-inline:16px; } .hero-rating .rt{ font-size:14px; line-height:1.35; } } /* классы иллюстрации-героя */ .il-sky{ fill:var(--il-sky); } .il-sun{ fill:var(--il-sun); } .il-cloud{ fill:var(--il-paper); } .il-ha{ fill:var(--il-hill-a); } .il-hb{ fill:var(--il-hill-b); } .il-hc{ fill:var(--il-hill-c); } .il-tree{ fill:var(--il-hill-c); } .il-tree2{ fill:var(--il-tree2); } .il-frame{ fill:var(--il-paper); stroke:var(--il-line); } .il-sill{ fill:var(--il-accent); stroke:var(--il-line); } .il-pot{ fill:var(--il-accent); stroke:var(--il-line); } .il-leafA{ fill:var(--il-hill-b); stroke:var(--il-line); } .il-leafB{ fill:var(--il-hill-c); stroke:var(--il-line); } .il-bottleA{ fill:var(--il-bottle-a); stroke:var(--il-line); } .il-bottleB{ fill:var(--il-sky); stroke:var(--il-line); } .il-cap{ fill:var(--il-line); } .il-line2{ stroke:var(--il-line); fill:none; } .il-ring{ stroke:var(--il-accent); fill:none; } .il-stem{ stroke:var(--il-hill-c); fill:none; } .il-blade{ stroke:var(--il-accent); } /* ============================================================ ПРЕИМУЩЕСТВА */ .feature-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .feature-row.four{ grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ .feature-row.four{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .feature-row.four{ grid-template-columns:1fr; } } .feature{ background:var(--card); border:2px solid var(--stroke-ink); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); } .feature .ic{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-bottom:14px; border:2px solid var(--stroke-ink); } .feature .ic svg{ width:26px; height:26px; stroke:currentColor; } .ic-1{ color:var(--terra); background:color-mix(in srgb, var(--terra) 16%, transparent); } .ic-2{ color:var(--teal); background:color-mix(in srgb, var(--teal) 16%, transparent); } .ic-3{ color:var(--gold); background:color-mix(in srgb, var(--gold) 20%, transparent); } .feature h3{ font-size:18px; margin-bottom:6px; } .feature p{ margin:0; font-size:14px; color:var(--ink-soft); } @media (max-width:760px){ .feature-row{ grid-template-columns:1fr; } } /* ============================================================ РАМКИ ПОД ФОТО */ .photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .photo-grid.four{ grid-template-columns:repeat(4,1fr); } @media (max-width:980px){ .photo-grid.four{ grid-template-columns:1fr 1fr; } } @media (max-width:820px){ .photo-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .photo-grid, .photo-grid.four{ grid-template-columns:1fr; } } .frame{ background:var(--card); border:2px solid var(--stroke-ink); border-radius:var(--r-lg); padding:12px; box-shadow:var(--shadow); transition:transform .2s; } .frame:nth-child(odd){ transform:rotate(-1.2deg); } .frame:nth-child(even){ transform:rotate(1.2deg); } .frame:hover{ transform:rotate(0) translateY(-4px); } .frame-photo{ position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:1/1; border:2px dashed var(--stroke); background:repeating-linear-gradient(135deg, var(--hatch-1) 0 14px, var(--hatch-2) 14px 28px); display:flex; align-items:center; justify-content:center; } .frame-photo.tall{ aspect-ratio:3/4; } .frame-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .frame-ph{ text-align:center; padding:18px; color:var(--ink-soft); } .frame-ph svg{ width:64px; height:64px; opacity:.5; margin-bottom:8px; } .frame-ph small{ font-size:12px; opacity:.8; display:block; } .frame-cap{ padding:12px 8px 6px; } .frame-cap .name{ font-family:"Comfortaa",cursive; font-weight:700; font-size:18px; } .frame-cap .role{ font-size:13px; color:var(--terra-deep); font-weight:800; } .frame-cap .role.teal{ color:var(--teal-deep); } /* компактные секции */ .section-tight{ padding:42px 0; } /* компактная команда — круглые портреты */ .team{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:760px; margin:0 auto; } @media (max-width:680px){ .team{ grid-template-columns:1fr 1fr; gap:18px; } } .member{ text-align:center; } .member .ava{ position:relative; width:100%; max-width:150px; aspect-ratio:1/1; margin:0 auto 12px; border-radius:50%; overflow:hidden; border:3px solid var(--stroke-ink); box-shadow:var(--shadow-sm); background:repeating-linear-gradient(135deg, var(--hatch-1) 0 12px, var(--hatch-2) 12px 24px); display:flex; align-items:center; justify-content:center; transition:transform .2s; } .member:hover .ava{ transform:translateY(-4px); } .member .ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .member .ava .ph{ color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px; } .member .ava .ph svg{ width:38px; height:38px; opacity:.5; } .member .ava .ph small{ font-size:9px; opacity:.7; } .member .name{ font-family:"Comfortaa",cursive; font-weight:700; font-size:17px; } .member .role{ font-size:12.5px; font-weight:800; color:var(--terra-deep); } .member .role.teal{ color:var(--teal-deep); } /* компактная галерея студии — тайлы с подписью поверх */ .studio-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; } .shot{ position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; border:2px solid var(--stroke-ink); box-shadow:var(--shadow-sm); background:repeating-linear-gradient(135deg, var(--hatch-1) 0 12px, var(--hatch-2) 12px 24px); display:flex; align-items:center; justify-content:center; } .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .shot .ph{ color:var(--ink-soft); text-align:center; padding:10px; } .shot .ph svg{ width:34px; height:34px; opacity:.5; } .shot .ph small{ display:block; font-size:10px; opacity:.7; margin-top:5px; } .shot .cap{ position:absolute; left:0; right:0; bottom:0; padding:18px 12px 9px; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(transparent, rgba(20,15,10,.6)); } /* ============================================================ УСЛУГИ / ХАБ */ .price-hub{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; } .cat-card.wide{ grid-column:1 / -1; } .cat-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 30px; flex:1; } @media (max-width:760px){ .price-hub{ grid-template-columns:1fr; } .cat-cols{ grid-template-columns:1fr; } } /* компактные плашки процедур */ .proc{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:9px; flex:1; align-content:flex-start; } .proc li{ border:2px solid var(--stroke-ink); border-radius:999px; padding:8px 15px; font-size:13px; font-weight:800; color:var(--ink); background:var(--card-2); line-height:1; } .proc.terra li{ background:color-mix(in srgb, var(--terra) 14%, var(--card)); } .proc.teal li{ background:color-mix(in srgb, var(--teal) 14%, var(--card)); } .proc.gold li{ background:color-mix(in srgb, var(--gold) 18%, var(--card)); } .cat-card{ display:flex; flex-direction:column; background:var(--card); border:2px solid var(--stroke-ink); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s; } .cat-card:hover{ transform:translateY(-4px); box-shadow:0 22px 38px rgba(8,16,70,.32); } .cat-top{ padding:20px 20px 16px; color:#fff; position:relative; overflow:hidden; } .cat-top.terra{ background:linear-gradient(150deg,var(--terra),var(--terra-deep)); } .cat-top.teal{ background:linear-gradient(150deg,var(--teal),var(--teal-deep)); } .cat-top.gold{ background:linear-gradient(150deg,var(--gold),var(--gold-deep)); } .cat-top .ic{ width:46px; height:46px; background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.6); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; } .cat-top .ic svg{ width:24px; height:24px; } .cat-top h3{ color:#fff; font-size:21px; } .cat-body{ padding:18px 20px; flex:1; display:flex; flex-direction:column; } .cat-list{ list-style:none; margin:0 0 16px; padding:0; flex:1; } .cat-list li{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px dashed var(--stroke); font-size:14px; } .cat-list li:first-child{ border-top:none; } .cat-list .price{ font-weight:800; color:var(--terra-deep); white-space:nowrap; } .cat-card .btn{ width:100%; justify-content:center; } /* ============================================================ ОТЗЫВЫ */ .reviews-scroll{ display:flex; gap:18px; overflow-x:auto; padding:6px 2px 18px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .reviews-scroll::-webkit-scrollbar{ height:8px; } .reviews-scroll::-webkit-scrollbar-thumb{ background:var(--blush); border-radius:999px; } .review{ flex:0 0 320px; scroll-snap-align:start; background:var(--card); border:2px solid var(--stroke-ink); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; } .review:nth-child(3n){ background:var(--card-2); } .review-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .review-avatar{ width:46px; height:46px; border-radius:50%; flex:0 0 46px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:#fff; border:2px solid var(--stroke-ink); } .review-name{ font-weight:800; font-size:15px; } .review-date{ font-size:12px; color:var(--ink-soft); } .review-stars{ color:var(--stars); font-size:16px; letter-spacing:2px; margin-bottom:8px; } .review-text{ font-size:14px; color:var(--ink-soft); line-height:1.55; } /* ============================================================ КАРТА / КОНТАКТЫ */ .map-card{ border-radius:var(--r-lg); overflow:hidden; border:2px solid var(--stroke-ink); box-shadow:var(--shadow); } .map-card iframe{ display:block; width:100%; height:420px; border:0; } .addr-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; } /* ============================================================ FOOTER */ .footer{ background:var(--dark); color:var(--on-dark); text-align:center; padding:42px 18px 36px; margin-top:30px; border-top:3px solid var(--stroke-ink); } .footer .script{ font-size:38px; color:var(--gold-light); line-height:1; } .footer p{ margin:8px 0 0; font-size:13px; color:var(--on-dark-muted); } /* ============================================================ FAB */ .contact-menu{ position:fixed; bottom:24px; right:20px; z-index:5000; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; } .contact-main{ background:var(--terra); color:#fff; border:2px solid var(--stroke-ink); border-radius:999px; padding:14px 24px; font-family:"Nunito",sans-serif; font-weight:800; font-size:15px; cursor:pointer; box-shadow:3px 3px 0 var(--stroke-ink); transition:transform .2s, box-shadow .2s; pointer-events:auto; } .contact-main:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--stroke-ink); } .contact-items{ display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(10px); pointer-events:none; transition:all .25s ease; } .contact-items.open{ opacity:1; transform:translateY(0); pointer-events:auto; } .contact-items a{ display:flex; align-items:center; gap:10px; background:var(--card); color:var(--ink); border:2px solid var(--stroke-ink); padding:10px 16px; border-radius:999px; font-size:14px; font-weight:800; box-shadow:var(--shadow-sm); } .contact-items a:hover{ background:var(--card-2); } .contact-items img, .contact-items svg{ width:18px; height:18px; flex:0 0 18px; } /* ============================================================ FAQ */ .faq-section{ background:var(--paper-2); } .faq-list{ max-width:820px; margin:0 auto; display:grid; gap:12px; } .faq-list details{ background:var(--card); color:var(--ink); border:2px solid var(--stroke-ink); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:0 18px; } .faq-list summary{ cursor:pointer; list-style:none; padding:18px 34px 18px 0; font-family:"Comfortaa",cursive; font-weight:700; position:relative; } .faq-list summary::-webkit-details-marker{ display:none; } .faq-list summary::after{ content:"+"; position:absolute; right:0; top:14px; font-size:26px; color:var(--terra); } .faq-list details[open] summary::after{ content:"−"; } .faq-list details p{ margin:0 0 18px; color:var(--ink-soft); } /* ============================================================ МОДАЛКА */ .modal-overlay{ position:fixed; inset:0; background:color-mix(in srgb, var(--dark) 94%, transparent); display:none; align-items:center; justify-content:center; z-index:6000; } .modal-overlay.open{ display:flex; } .modal-inner{ position:relative; max-width:96%; max-height:90vh; } .modal-inner img{ max-width:100%; max-height:82vh; border-radius:var(--r-md); border:3px solid var(--card); } .modal-close,.modal-nav{ position:absolute; background:var(--card); color:var(--ink); border:2px solid var(--stroke-ink); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; } .modal-close{ top:-16px; right:-16px; width:40px; height:40px; font-size:24px; } .modal-nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:28px; } .modal-prev{ left:-8px; } .modal-next{ right:-8px; } @media (max-width:560px){ .modal-prev{ left:6px; } .modal-next{ right:6px; } } /* ============================================================ РЕЙТИНГ В ГЕРОЕ */ .hero-rating{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; } .hero-rating .stars{ color:var(--stars); font-size:18px; letter-spacing:2px; } .hero-rating .rt{ font-size:13px; font-weight:800; color:var(--on-bg); } .hero-rating .rt b{ color:var(--on-bg-strong); } /* ============================================================ ПОЛОСА СТАТИСТИКИ */ .stats-band{ padding:10px 0 0; } .stats{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--card); border:2px solid var(--stroke-ink); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; } .stat{ padding:22px 16px; text-align:center; border-left:2px dashed var(--stroke); } .stat:first-child{ border-left:none; } .stat .num{ font-family:"Comfortaa",cursive; font-weight:700; font-size:clamp(24px,3vw,34px); color:var(--terra-deep); line-height:1; } .stat .lbl{ font-size:12.5px; color:var(--ink-soft); font-weight:700; margin-top:8px; line-height:1.3; } @media (max-width:620px){ .stats{ grid-template-columns:1fr; } .stat{ border-left:none; border-top:2px dashed var(--stroke); } .stat:first-child{ border-top:none; } } /* ============================================================ КАК МЫ РАБОТАЕМ (шаги) */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:36px; } @media (max-width:760px){ .steps{ grid-template-columns:1fr; gap:24px; } } .step{ position:relative; background:var(--card); border:2px solid var(--stroke-ink); border-radius:var(--r-lg); padding:26px 22px 22px; box-shadow:var(--shadow-sm); } .step .n{ position:absolute; top:-17px; left:22px; width:38px; height:38px; border-radius:50%; background:var(--terra); color:#fff; border:2px solid var(--stroke-ink); display:flex; align-items:center; justify-content:center; font-family:"Comfortaa",cursive; font-weight:700; box-shadow:2px 2px 0 var(--stroke-ink); } .step:nth-child(2) .n{ background:var(--teal); } .step:nth-child(3) .n{ background:var(--gold); } .step h3{ font-size:18px; margin:6px 0 6px; } .step p{ margin:0; font-size:14px; color:var(--ink-soft); } /* ============================================================ ПЕРКИ СТУДИИ (чипсы) */ .perks{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; } .perk{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:2px solid var(--stroke-ink); border-radius:999px; padding:8px 15px; font-size:13px; font-weight:800; color:var(--ink); box-shadow:var(--shadow-sm); } .perk svg{ width:16px; height:16px; color:var(--terra); flex:0 0 16px; } /* ============================================================ ТЁМНАЯ CTA-ПОЛОСА */ .cta-band{ background:var(--dark); color:var(--on-dark); padding:60px 18px; text-align:center; border-top:3px solid var(--stroke-ink); border-bottom:3px solid var(--stroke-ink); position:relative; overflow:hidden; } .cta-band .section-eyebrow{ color:var(--gold-light); } .cta-band h2{ color:#fff; font-size:clamp(26px,4.4vw,40px); margin:2px 0 10px; } .cta-band p{ color:var(--on-dark-muted); max-width:34em; margin:0 auto 26px; font-size:16px; } .cta-band .hero-actions{ justify-content:center; } .cta-band .btn-ghost{ background:var(--card); color:var(--ink); } .cta-band .deco{ position:absolute; opacity:.16; pointer-events:none; } .cta-band .deco.l{ left:-30px; bottom:-20px; width:160px; transform:rotate(-12deg); } .cta-band .deco.r{ right:-26px; top:-24px; width:150px; transform:rotate(18deg); } /* ============================================================ ДОСТУПНОСТЬ / АНИМАЦИЯ */ a:focus-visible, button:focus-visible{ outline:3px solid var(--terra); outline-offset:3px; border-radius:8px; } @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } .hero-art{ animation:floaty 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } html{ scroll-behavior:auto; } .hero-art{ animation:none; } .reveal{ opacity:1; transform:none; } } /* утилиты */ .center{ text-align:center; } .muted{ color:var(--on-bg); } .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform:none; }