/* ========================================================================== Поздравления от Батоныча — V3 Две темы: ночь (по умолчанию) и день. Все цвета — через семантические токены, поэтому тема переключается одним атрибутом data-theme на . ========================================================================== */ /* -------------------------------------------------------------------------- 1. ТОКЕНЫ -------------------------------------------------------------------------- */ :root{ color-scheme:dark; /* фон и поверхности */ --bg:#120A04; --bg-2:#1B1007; --surface-a:rgba(70,43,21,.72); --surface-b:rgba(28,17,8,.72); --surface-hover:rgba(199,154,76,.16); --line:rgba(199,154,76,.24); --line-strong:rgba(199,154,76,.45); /* текст на фоне страницы */ --text:#FBF4E6; --text-2:#E7DAC0; --text-3:#C3AE87; /* бумага (карточки, письмо) — одинакова в обеих темах */ --paper-1:#F7EEDA; --paper-2:#E9DABB; --paper-3:#DCC9A1; --ink:#1E1105; --ink-2:#3A2714; --ink-3:#655031; /* акценты */ --brass:#C79A4C; --brass-lit:#F0CE8B; --accent-text:#E8BE73; --btn-1:#F3D293; --btn-2:#BE8C38; --btn-ink:#2A1806; --glow-a:rgba(215,148,54,.40); --glow-b:rgba(126,52,22,.34); --glow-op:.5; --img-dim:.30; --noise-op:.055; --noise-blend:overlay; --shadow-card:0 22px 46px -22px rgba(0,0,0,.8); --shadow-paper:0 26px 60px -24px rgba(0,0,0,.72); --display:"Bitter",Georgia,"Iowan Old Style","Times New Roman",serif; --text-font:"Golos Text","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif; --r-s:10px; --r-m:16px; --r-l:24px; --gut:20px; --ease:cubic-bezier(.22,.61,.36,1); } [data-theme="day"]{ color-scheme:light; --bg:#F1E5CD; --bg-2:#E8DABB; --surface-a:rgba(255,252,245,.94); --surface-b:rgba(246,236,215,.94); --surface-hover:rgba(138,94,30,.08); --line:rgba(110,76,30,.26); --line-strong:rgba(110,76,30,.5); --text:#201306; --text-2:#3E2C17; --text-3:#6A5231; --paper-1:#FFFAEF; --paper-2:#F7EDD8; --paper-3:#EDE0C4; --brass:#8E6222; --brass-lit:#7A5117; --accent-text:#8A5A16; --btn-1:#D9A94F; --btn-2:#9B6A21; --btn-ink:#FFF7E7; --glow-a:rgba(224,176,88,.32); --glow-b:rgba(190,132,70,.22); --glow-op:.55; --img-dim:.14; --noise-op:.05; --noise-blend:multiply; --shadow-card:0 18px 38px -20px rgba(74,45,14,.45); --shadow-paper:0 24px 54px -24px rgba(74,45,14,.42); } /* -------------------------------------------------------------------------- 2. БАЗА -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#120A04} html[data-theme="day"]{background:#F1E5CD} body{ margin:0;background:var(--bg);color:var(--text-2); font-family:var(--text-font);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* подложка: гарантирует фон, даже если внешняя оболочка сбрасывает body */ .page{position:relative;min-height:100vh;background:var(--bg); transition:background .35s var(--ease),color .35s var(--ease)} img{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit} :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:8px} h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--text);margin:0; line-height:1.1;letter-spacing:-.012em} h1{font-size:clamp(34px,8.6vw,72px);font-weight:700;line-height:1.03} h2{font-size:clamp(27px,6.2vw,44px)} h3{font-size:clamp(20px,4.6vw,26px)} p{margin:0} .lede{font-size:clamp(17px,4.2vw,20px);line-height:1.5;color:var(--text-2)} .tag{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)} .tag::before{content:"";width:24px;height:1px;background:currentColor;opacity:.55} .wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut)} .narrow{max-width:880px} section{position:relative} .band{padding-block:clamp(60px,12vw,120px)} .band--tight{padding-block:clamp(42px,8vw,78px)} .head{max-width:32ch} .head h2{margin-top:14px} .head p{margin-top:16px;max-width:46ch} @media(min-width:900px){ .head--split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;max-width:none} .head--split p{margin-top:0;padding-bottom:6px} } .rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)} .note{margin-top:22px;font-size:15px;color:var(--text-3)} /* свет и фактура */ .glow{position:absolute;inset:0;pointer-events:none;overflow:hidden} .glow::before,.glow::after{content:"";position:absolute;border-radius:50%;filter:blur(90px); opacity:var(--glow-op)} .glow::before{width:62vw;height:62vw;left:-18vw;top:-10vw; background:radial-gradient(circle,var(--glow-a),transparent 68%); animation:drift 26s var(--ease) infinite alternate} .glow::after{width:52vw;height:52vw;right:-16vw;bottom:-14vw; background:radial-gradient(circle,var(--glow-b),transparent 68%); animation:drift 34s var(--ease) infinite alternate-reverse} @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5%,-6%,0) scale(1.14)}} .noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--noise-op); mix-blend-mode:var(--noise-blend); 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} /* -------------------------------------------------------------------------- 3. ШАПКА -------------------------------------------------------------------------- */ .site-head{ position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;gap:13px; padding:11px var(--gut);padding-top:max(11px,env(safe-area-inset-top)); border-bottom:1px solid transparent; transition:background .3s var(--ease),border-color .3s var(--ease); } .site-head.stuck{ background:var(--bg); background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--line); } .brandmark{flex:none;display:grid;place-items:center;border-radius:50%;overflow:hidden; background:#F8F1E0;box-shadow:0 0 0 1px var(--line-strong),0 6px 18px rgba(0,0,0,.28)} .brandmark img{width:100%;height:100%;object-fit:cover} .site-head .brandmark{width:48px;height:48px} .brandname{font-family:var(--display);font-size:17px;font-weight:600;color:var(--text);line-height:1.1} .brandname small{display:block;font-family:var(--text-font);font-size:11.5px;font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-top:3px} .head-tools{margin-left:auto;display:flex;align-items:center;gap:12px} .site-nav{display:none;align-items:center;gap:28px;font-size:15.5px} .site-nav a{color:var(--text-2);text-decoration:none;position:relative;padding-block:6px} .site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--brass);transition:right .3s var(--ease)} .site-nav a:hover::after{right:0} .site-nav .btn{padding:11px 20px;min-height:0;font-size:15.5px} @media(min-width:960px){.site-nav{display:flex}} .theme-toggle{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center; color:var(--text-2);border:1px solid var(--line);background:var(--surface-a); transition:color .25s,border-color .25s,transform .2s var(--ease)} .theme-toggle:hover{color:var(--accent-text);border-color:var(--line-strong)} .theme-toggle:active{transform:scale(.94)} .theme-toggle svg{width:21px;height:21px} .theme-toggle .sun{display:none} [data-theme="day"] .theme-toggle .sun{display:block} [data-theme="day"] .theme-toggle .moon{display:none} /* -------------------------------------------------------------------------- 4. КНОПКИ -------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:58px;padding:16px 30px;border-radius:999px; font-size:17px;font-weight:600;text-decoration:none;color:var(--btn-ink); position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(168deg,var(--btn-1),var(--btn-2)); box-shadow:0 14px 30px -14px rgba(140,90,20,.8); transition:transform .15s var(--ease),box-shadow .25s var(--ease),filter .25s; } .btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%); background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.45) 50%,transparent 72%); transition:transform .75s var(--ease)} .btn:hover{filter:brightness(1.06);box-shadow:0 18px 38px -16px rgba(140,90,20,.9)} .btn:hover::after{transform:translateX(120%)} .btn:active{transform:translateY(1px) scale(.993)} .btn--ghost{background:var(--surface-a);color:var(--text);border:1px solid var(--line-strong); box-shadow:none} .btn--ghost:hover{filter:none;border-color:var(--brass);background:var(--surface-b)} .btn--quiet{background:none;box-shadow:none;color:var(--ink-3);min-height:48px;padding:12px 10px; text-decoration:underline;text-underline-offset:4px;font-weight:500;font-size:16px} .btn--quiet:hover{filter:none;color:var(--ink)} .btn--block{width:100%} /* -------------------------------------------------------------------------- 5. ГЛАВНЫЙ ЭКРАН (всегда светлый текст на затемнённом фото) -------------------------------------------------------------------------- */ .hero{min-height:100svh;display:grid;align-items:end;position:relative;overflow:hidden; padding-block:120px clamp(38px,9vw,84px);background:#120A04} .hero__media{position:absolute;inset:-6% 0 0;z-index:0} .hero__media img{width:100%;height:106%;object-fit:cover;object-position:53% 36%; will-change:transform} .hero__media::after{content:"";position:absolute;inset:0; background: radial-gradient(78% 52% at 22% 34%,rgba(255,190,92,.20),transparent 62%), linear-gradient(to top,rgba(9,5,2,.985) 2%,rgba(11,6,3,.93) 24%,rgba(14,8,4,.5) 56%,rgba(18,11,5,.52) 100%)} .hero__rays{position:absolute;inset:-25%;z-index:1;pointer-events:none; background:linear-gradient(102deg,transparent 40%,rgba(255,206,128,.13) 47%,rgba(255,228,170,.05) 53%,transparent 61%); animation:rays 22s ease-in-out infinite alternate} @keyframes rays{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(4%,-2%,0)}} .motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,225,175,.6); animation:mote linear infinite} @keyframes mote{0%{transform:translate3d(0,20px,0);opacity:0}14%{opacity:.85} 82%{opacity:.5}100%{transform:translate3d(22px,-140px,0);opacity:0}} .hero__inner{position:relative;z-index:2;width:100%;padding-inline:var(--gut)} .hero .tag{color:#F0CE8B} .hero h1{color:#FFF8EA;margin-top:16px;max-width:15ch;text-shadow:0 4px 30px rgba(0,0,0,.7)} .hero .lede{margin-top:20px;max-width:34ch;color:#EFE2C8;text-shadow:0 2px 16px rgba(0,0,0,.55)} .hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:24px} .plate{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px; font-size:14.5px;color:#F2E6CC;background:rgba(26,15,6,.55); border:1px solid rgba(240,206,139,.42);backdrop-filter:blur(8px)} .plate b{font-weight:600;color:#F6D79A} .plate .dot{width:7px;height:7px;border-radius:50%;background:#F6D79A; box-shadow:0 0 10px 2px rgba(246,215,154,.55);animation:pulse 3.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1)}} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero__cta .btn{flex:1 1 240px;--btn-1:#F3D293;--btn-2:#BE8C38;color:#2A1806} .hero__cta .btn--ghost{background:rgba(24,14,6,.5);color:#F6EEDC;border-color:rgba(240,206,139,.45)} .hero__micro{margin-top:18px;font-size:14.5px;color:#D2BF9B} @media(min-width:900px){ .hero__cta .btn{flex:0 0 auto} .hero__inner{max-width:1240px;margin-inline:auto} } /* -------------------------------------------------------------------------- 6. БУМАГА -------------------------------------------------------------------------- */ .paper{position:relative;color:var(--ink-2);border-radius:var(--r-m); background: radial-gradient(120% 90% at 6% -10%,#FFF8E8,transparent 62%), linear-gradient(158deg,var(--paper-1) 0%,var(--paper-2) 64%,var(--paper-3) 100%); box-shadow:var(--shadow-paper),0 1px 0 rgba(255,255,255,.55) inset} .paper h2,.paper h3{color:var(--ink)} .story{display:grid;gap:22px} .story__text{padding:clamp(26px,5.4vw,44px)} .story__quote{font-family:var(--display);font-weight:500;font-size:clamp(21px,5vw,29px); line-height:1.34;color:var(--ink)} .story__quote::first-letter{float:left;font-size:2.8em;line-height:.85;padding:6px 12px 0 0; color:#8A5A16;font-weight:700} .story__text p+p{margin-top:18px} .story__sig{margin-top:22px;font-size:14.5px;color:var(--ink-3);font-style:italic} .figure{position:relative;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-paper)} .figure img{width:100%;height:100%;object-fit:cover;object-position:50% 16%; transition:transform 1.2s var(--ease)} .figure:hover img{transform:scale(1.03)} .figure figcaption{position:absolute;inset:auto 0 0;padding:56px 18px 16px;font-size:14.5px; color:#F2E6CC;background:linear-gradient(to top,rgba(8,4,2,.94),rgba(8,4,2,.5) 60%,transparent)} @media(max-width:899px){.story .figure img{aspect-ratio:3/4}} @media(min-width:900px){ .story{grid-template-columns:1.18fr .82fr;gap:30px;align-items:stretch} .story .figure{min-height:100%} .story .figure img{height:100%} } /* -------------------------------------------------------------------------- 7. ТРИ ШАГА -------------------------------------------------------------------------- */ .steps{display:grid;gap:14px;margin-top:34px} .stepcard{position:relative;padding:26px 22px 24px;border-radius:var(--r-m);overflow:hidden; background:linear-gradient(165deg,var(--surface-a),var(--surface-b)); border:1px solid var(--line);box-shadow:var(--shadow-card)} .stepcard::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease); background:radial-gradient(90% 80% at 12% 0%,var(--surface-hover),transparent 62%)} .stepcard:hover::before{opacity:1} .stepcard svg{width:38px;height:38px;color:var(--accent-text);position:relative} .stepcard h3{margin-top:16px;font-size:21px;position:relative} .stepcard p{margin-top:8px;font-size:16px;color:var(--text-2);position:relative} .stepcard .idx{position:absolute;top:20px;right:22px;font-family:var(--display);font-size:15px; color:var(--text-3)} @media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:18px}} /* -------------------------------------------------------------------------- 8. ТАРИФЫ -------------------------------------------------------------------------- */ .cards{display:grid;gap:16px;margin-top:36px} @media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr);gap:18px}} .card{position:relative;text-align:left;width:100%;padding:28px 24px 24px;border-radius:var(--r-m); color:var(--ink-2);overflow:hidden;isolation:isolate;display:flex;flex-direction:column; background:linear-gradient(158deg,var(--paper-1) 0%,var(--paper-2) 66%,var(--paper-3) 100%); box-shadow:var(--shadow-card);border:1px solid rgba(110,76,30,.28); transition:transform .22s var(--ease),box-shadow .3s var(--ease),border-color .3s} .card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s var(--ease); background:radial-gradient(80% 60% at 50% 0%,rgba(255,226,166,.8),transparent 70%)} .card:hover{transform:translateY(-5px);border-color:rgba(142,98,34,.55)} .card:hover::before{opacity:1} .card__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px} .card h3{font-size:23px;color:var(--ink)} .card .dur{margin-top:6px;font-size:14px;color:var(--ink-3);letter-spacing:.03em} .card .price{font-family:var(--display);font-weight:600;font-size:clamp(25px,5.6vw,31px); color:#3E2409;white-space:nowrap} .card .desc{margin-top:14px;font-size:16px;color:var(--ink-2);max-width:38ch} .card ul{margin:14px 0 0;padding:0;list-style:none;font-size:15px;color:#55401F; display:flex;flex-wrap:wrap;gap:6px 8px} .card ul li{padding:5px 12px;border-radius:999px;background:rgba(110,76,30,.1); border:1px solid rgba(110,76,30,.2)} .card .pick{margin-top:22px;align-self:stretch;min-height:52px;border-radius:999px; display:grid;place-items:center;font-weight:600;font-size:16.5px;color:#FBF2DE; background:linear-gradient(170deg,#553517,#33200C);transition:background .25s var(--ease),color .25s} .card:hover .pick{background:linear-gradient(170deg,#6A431C,#3F280F)} .card.is-active{border-color:#8E6222;box-shadow:0 0 0 2px rgba(142,98,34,.85),var(--shadow-card)} .card.is-active .pick{background:linear-gradient(170deg,#EFCB85,#BE8C38);color:#2C1A06} .card__badge{position:absolute;top:0;left:24px;transform:translateY(-50%);opacity:0; font-size:12.5px;font-weight:600;letter-spacing:.05em;padding:4px 14px;border-radius:999px; color:#2B1A06;background:linear-gradient(170deg,#F3D394,#C4933D);transition:opacity .25s} .card.is-active .card__badge{opacity:1} .card--premium{background: radial-gradient(70% 55% at 88% 6%,rgba(255,219,160,.6),transparent 62%), linear-gradient(158deg,#FFF6E2,#EBD9B4 66%,#DCC69B); border-color:rgba(142,98,34,.45)} .card--premium .ribbon{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:#7A4F17;margin-bottom:12px} .card--premium .ribbon::before{content:"";width:16px;height:1px;background:#8E6222} .card__bun{position:absolute;right:18px;bottom:94px;width:86px;border-radius:50%; box-shadow:0 12px 26px -8px rgba(0,0,0,.45);border:2px solid rgba(255,248,232,.8)} @media(min-width:820px){ .card--premium{grid-column:span 3;flex-direction:row;align-items:center;gap:34px;padding:32px} .card--premium .card__body{flex:1} .card--premium .pick{align-self:auto;margin-top:0;min-width:250px;padding-inline:32px} .card__bun{position:static;width:136px;flex:none} } /* -------------------------------------------------------------------------- 9. БУДУЩИЕ ФОРМАТЫ -------------------------------------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .chip{padding:10px 17px;border-radius:999px;font-size:15.5px;color:var(--text-2); border:1px solid var(--line);background:var(--surface-a); transition:border-color .25s,color .25s,background .25s} .chip:hover{border-color:var(--line-strong);color:var(--text)} /* -------------------------------------------------------------------------- 10. ПИСЬМО / КОНФИГУРАТОР -------------------------------------------------------------------------- */ .order{overflow:hidden} .order__bg{position:absolute;inset:0;z-index:0} .order__bg img{width:100%;height:100%;object-fit:cover;opacity:var(--img-dim)} .order__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 100%); background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 34%, color-mix(in srgb,var(--bg) 88%,transparent) 70%,var(--bg) 100%)} .order .wrap{position:relative;z-index:2} .letter{max-width:760px;margin:32px auto 0;padding:clamp(24px,5.4vw,44px)} .progress{display:flex;align-items:center;gap:5px;margin-bottom:8px} .progress i{flex:1;height:3px;border-radius:2px;background:rgba(110,76,30,.22)} .progress i.on{background:linear-gradient(90deg,#B07F2C,#E0B264)} .progress i.cur{box-shadow:0 0 8px rgba(176,127,44,.7)} .progress__label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3); margin-bottom:22px} .q{animation:qin .42s var(--ease) both} @keyframes qin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .q h3{font-size:clamp(23px,5.4vw,32px);line-height:1.16;color:var(--ink)} .help{margin-top:12px;font-size:16.5px;color:var(--ink-3);max-width:48ch} .field{display:block;margin-top:24px} .field>span{display:block;font-size:14.5px;font-weight:500;color:var(--ink-3);margin-bottom:8px} input[type=text],input[type=password],input[type=date],textarea{ width:100%;padding:15px 16px;font:inherit;font-size:17px;color:var(--ink); background:#FFFDF6;border:1px solid rgba(110,76,30,.32);border-radius:12px;min-height:56px; transition:border-color .2s,box-shadow .2s} input::placeholder,textarea::placeholder{color:#8E7551} textarea{min-height:128px;resize:vertical;line-height:1.55} input:focus,textarea:focus{outline:none;border-color:#8E6222;box-shadow:0 0 0 3px rgba(142,98,34,.25)} .pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .pill{padding:12px 22px;min-height:50px;border-radius:999px;font-size:16px;color:var(--ink-2); border:1px solid rgba(110,76,30,.32);background:rgba(255,253,246,.8);transition:all .2s var(--ease)} .pill:hover{border-color:#8E6222} .pill.on{background:linear-gradient(170deg,#553517,#33200C);color:#FBF2DE;border-color:#33200C} .hint{display:flex;gap:13px;align-items:center;margin-top:24px;padding:14px 16px;border-radius:12px; background:rgba(110,76,30,.1);border-left:3px solid rgba(142,98,34,.75);font-size:15.5px;color:var(--ink-2)} .hint img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 10%;flex:none; box-shadow:0 0 0 1px rgba(110,76,30,.3)} .err{margin-top:12px;font-size:15px;color:#8A2A19;font-weight:500} .navrow{display:flex;align-items:center;gap:12px;margin-top:30px;flex-wrap:wrap} .navrow .btn{flex:1 1 200px} .chosen{margin-top:20px;padding:20px;border-radius:14px;display:flex;justify-content:space-between; align-items:center;gap:18px;background:rgba(110,76,30,.09);border:1px dashed rgba(110,76,30,.42)} .chosen b{font-family:var(--display);font-size:21px;color:var(--ink);display:block} .chosen span{font-size:14.5px;color:var(--ink-3)} .chosen .p{font-family:var(--display);font-size:23px;color:#3E2409;white-space:nowrap} .sum .row{display:flex;justify-content:space-between;gap:18px;padding:13px 0; border-bottom:1px dotted rgba(110,76,30,.38);font-size:16.5px} .sum .row span{color:var(--ink-3);flex:none} .sum .row b{font-weight:600;text-align:right;color:var(--ink)} .sum .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px} .sum .total .v{font-family:var(--display);font-weight:600;font-size:clamp(28px,7vw,36px);color:#3E2409} .pays{display:grid;gap:12px;margin-top:20px} @media(min-width:620px){.pays{grid-template-columns:repeat(2,1fr)}} .pay{text-align:left;padding:18px;border-radius:14px;border:1px solid rgba(110,76,30,.32); background:rgba(255,253,246,.8);color:var(--ink);font-size:17px;font-weight:500;min-height:70px; transition:all .2s var(--ease)} .pay small{display:block;font-size:14px;font-weight:400;color:var(--ink-3);margin-top:4px} .pay:hover{border-color:#8E6222} .pay.on{border-color:#8E6222;box-shadow:0 0 0 3px rgba(142,98,34,.28);background:#FFFDF6} .done{text-align:center;padding:16px 0 8px} .done .seal{width:110px;height:110px;margin:0 auto 22px;border-radius:50%;overflow:hidden; background:#FBF4E2;box-shadow:0 0 0 1px rgba(110,76,30,.35);animation:seal .6s var(--ease) both} .done .seal img{width:100%;height:100%;object-fit:cover} @keyframes seal{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}} .done .oid{margin-top:20px;font-family:var(--display);font-size:26px;letter-spacing:.16em;color:#3E2409} .done .help{margin-inline:auto} /* -------------------------------------------------------------------------- 11. ДОВЕРИЕ · ОТЗЫВЫ · FAQ · ПОДВАЛ -------------------------------------------------------------------------- */ .trust{display:grid;gap:14px;margin-top:34px} @media(min-width:860px){.trust{grid-template-columns:repeat(3,1fr);gap:18px}} .tcard{padding:26px 22px;border-radius:var(--r-m);border:1px solid var(--line); background:linear-gradient(165deg,var(--surface-a),var(--surface-b));box-shadow:var(--shadow-card)} .tcard h3{font-size:20px} .tcard p{margin-top:10px;font-size:16px;color:var(--text-2)} .slots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px} @media(min-width:760px){.slots{grid-template-columns:repeat(4,1fr);gap:16px}} .slot{aspect-ratio:9/16;border-radius:var(--r-m);display:grid;place-items:center;text-align:center; padding:18px;border:1px dashed var(--line-strong);color:var(--text-3);font-size:14px; background:linear-gradient(165deg,var(--surface-a),var(--surface-b))} .slot svg{width:26px;height:26px;margin:0 auto 10px;opacity:.75} .acc{margin-top:32px;border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative; font-family:var(--display);font-weight:500;font-size:19px;color:var(--text);transition:color .2s} .acc summary::-webkit-details-marker{display:none} .acc summary:hover{color:var(--accent-text)} .acc summary::after,.acc summary::before{content:"";position:absolute;right:8px;top:50%; background:var(--brass);transition:transform .3s var(--ease),opacity .3s} .acc summary::after{width:15px;height:1.6px;transform:translateY(-50%)} .acc summary::before{width:1.6px;height:15px;right:14.7px;transform:translateY(-50%)} .acc details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0} .acc .ans{padding:0 0 22px;font-size:16.5px;color:var(--text-2);max-width:62ch; animation:qin .3s var(--ease) both} .easter{display:flex;align-items:center;gap:16px;margin-top:32px;font-size:15px;color:var(--text-3)} .easter img{width:58px;height:58px;border-radius:50%;object-fit:cover; box-shadow:0 0 0 1px var(--line-strong)} .site-foot{padding:clamp(48px,9vw,80px) 0 130px;text-align:center;position:relative; border-top:1px solid var(--line)} .site-foot .brandmark{width:86px;height:86px;margin:0 auto 20px} .site-foot h3{font-size:23px} .site-foot .t{margin-top:10px;font-size:16px;color:var(--text-3);max-width:36ch;margin-inline:auto} .foot-links{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;margin-top:26px;font-size:15.5px} .foot-links a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line); padding-bottom:2px;transition:color .2s,border-color .2s} .foot-links a:hover{color:var(--accent-text);border-color:var(--brass)} .site-foot .cp{margin-top:28px;font-size:13px;color:var(--text-3);opacity:.8} /* -------------------------------------------------------------------------- 12. НИЖНЯЯ КНОПКА И АНИМАЦИИ -------------------------------------------------------------------------- */ .sticky{position:fixed;inset:auto 0 0;z-index:90;padding:12px var(--gut); padding-bottom:max(12px,env(safe-area-inset-bottom)); background:var(--bg); background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(12px);border-top:1px solid var(--line); transform:translateY(130%);transition:transform .35s var(--ease)} .sticky.show{transform:none} .sticky__hint{display:block;text-align:center;font-size:12.5px;color:var(--text-3);margin-top:8px} @media(min-width:960px){.sticky{display:none}} .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} .rv:nth-child(2){transition-delay:.08s} .rv:nth-child(3){transition-delay:.16s} .rv:nth-child(4){transition-delay:.24s} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .rv{opacity:1;transform:none} } /* -------------------------------------------------------------------------- 13. РЕКВИЗИТЫ ОПЛАТЫ -------------------------------------------------------------------------- */ .pay.is-off{opacity:.45;cursor:not-allowed;background:rgba(110,76,30,.06)} .pay.is-off:hover{border-color:rgba(110,76,30,.32)} .pay-box{margin-top:22px;border:1px solid rgba(110,76,30,.28);border-radius:14px; background:rgba(255,253,246,.7);overflow:hidden} .pay-row{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center; padding:14px 16px;border-bottom:1px solid rgba(110,76,30,.16)} .pay-row:last-child{border-bottom:0} .pay-row span{grid-column:1;font-size:14px;color:var(--ink-3)} .pay-row b{grid-column:1;font-size:17px;font-weight:600;color:var(--ink);word-break:break-all;line-height:1.35} .pay-row b.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.01em} .pay-row--sum b{font-family:var(--display);font-size:25px} .copy{grid-column:2;grid-row:1 / span 2;align-self:center;white-space:nowrap; padding:10px 16px;min-height:44px;border-radius:999px;font-size:14.5px;font-weight:600; color:var(--ink);border:1px solid rgba(110,76,30,.38);background:rgba(255,255,255,.7); transition:all .2s var(--ease)} .copy:hover{border-color:#8E6222;background:#FFFDF6} .copy.is-copied{background:linear-gradient(170deg,#EFCB85,#BE8C38);border-color:#8E6222;color:#2C1A06} /* BATONYCH PAYMENT PROOF V1 */ .proof-upload{margin-top:18px;padding:16px;border:1px solid rgba(122,77,28,.18);border-radius:16px;background:rgba(255,253,246,.72)} .proof-upload input[type=file]{display:block;width:100%;margin-top:8px;padding:12px;border:1px dashed rgba(122,77,28,.35);border-radius:12px;background:#fffdf7;color:var(--ink);font:inherit} .proof-upload input[type=file]::file-selector-button{border:0;border-radius:10px;padding:10px 14px;margin-right:12px;background:var(--ink);color:#fff;font:inherit;font-weight:700;cursor:pointer} /* Phase 2: заметка в карточке тарифа и состояние «витрина недоступна» */ .card__note{margin-top:12px;font-size:14.5px;color:var(--ink-3);font-style:italic} .cards__error{grid-column:1/-1;padding:28px 24px;border-radius:var(--r-m);text-align:center; border:1px dashed var(--line-strong);background:linear-gradient(165deg,var(--surface-a),var(--surface-b))} .cards__error b{display:block;font-family:var(--display);font-size:21px;color:var(--text)} .cards__error p{margin:12px auto 20px;max-width:52ch;font-size:16px;color:var(--text-2)} /* Phase 2.5: галерея примеров 9:16 */ .showcase{display:grid;gap:14px;margin-top:32px;grid-template-columns:repeat(2,1fr)} @media(min-width:760px){.showcase{grid-template-columns:repeat(4,1fr);gap:16px}} /* на телефоне — горизонтальная лента с прилипанием */ @media(max-width:559px){ .showcase{display:flex;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);gap:12px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .showcase::-webkit-scrollbar{display:none} .showcase>*{flex:0 0 68%;scroll-snap-align:center} } .showcase--empty{grid-template-columns:1fr;display:grid} .vcard{margin:0;display:flex;flex-direction:column;gap:10px} .vcard__frame{position:relative;aspect-ratio:9/16;border-radius:var(--r-m);overflow:hidden; background:linear-gradient(165deg,var(--surface-a),var(--surface-b)); border:1px solid var(--line);box-shadow:var(--shadow-card)} .vcard__poster,.vcard__player{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vcard__player{z-index:3;background:#0B0603;opacity:0;transition:opacity .25s var(--ease)} .vcard.is-live .vcard__player{opacity:1} .vcard.is-live .vcard__play{opacity:0;pointer-events:none} .vcard__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;height:100%; background:linear-gradient(to top,rgba(8,4,2,.55),rgba(8,4,2,.1));transition:opacity .25s var(--ease)} .vcard__play svg{width:58px;height:58px;fill:#2A1806;padding:16px;border-radius:50%; background:linear-gradient(168deg,var(--btn-1),var(--btn-2)); box-shadow:0 10px 26px -10px rgba(0,0,0,.6);transition:transform .2s var(--ease)} .vcard__play:hover svg{transform:scale(1.06)} .vcard__badge{position:absolute;top:12px;left:12px;z-index:2;font-size:12.5px;font-weight:600; padding:5px 12px;border-radius:999px;color:#2B1A06; background:linear-gradient(170deg,#F3D394,#C4933D)} .vcard figcaption b{display:block;font-family:var(--display);font-size:16.5px;color:var(--text);line-height:1.25} .vcard figcaption span{display:block;margin-top:4px;font-size:14px;color:var(--text-3)} /* Phase 2.5.1: живое превью и комментарии */ .vcard__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1; opacity:0;transition:opacity .35s var(--ease);background:#0B0603} .vcard.is-preview .vcard__video,.vcard.is-live .vcard__video{opacity:1} .vcard.is-live .vcard__video{z-index:3} .vcard__poster{z-index:2;transition:opacity .35s var(--ease)} .vcard.is-preview .vcard__poster,.vcard.is-live .vcard__poster{opacity:0} .vcard__play{z-index:4} .vcard.is-live .vcard__play{opacity:0;pointer-events:none} .vcard__badge{z-index:5} .vcomments{display:flex;flex-direction:column;gap:8px} .vcomments__view{min-height:52px} .vcomments__item{font-size:14px;line-height:1.45;color:var(--text-2); animation:qin .35s var(--ease) both} .vcomments__item b{color:var(--text);font-weight:600} .vcomments__item span{display:block;margin-top:2px;word-break:break-word} .vcomments__star{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px; color:#2B1A06;background:linear-gradient(170deg,#F3D394,#C4933D)} .vcomments__count{display:block;margin-top:4px;font-size:12.5px;font-style:normal;color:var(--text-3)} .vcomments__empty{font-size:14px;color:var(--text-3);margin:0} .vcomments__open,.vcomments__cancel{align-self:flex-start;font-size:14px;color:var(--accent-text); padding:6px 0;border-bottom:1px solid transparent} .vcomments__open:hover,.vcomments__cancel:hover{border-color:currentColor} .vcomments__form{display:flex;flex-direction:column;gap:8px} .vcomments__form input[type=text],.vcomments__form textarea{min-height:0;padding:10px 12px;font-size:16px; border-radius:10px} .vcomments__form textarea{min-height:64px} .vcomments__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .vcomments__row{display:flex;align-items:center;gap:12px} .vcomments__send{min-height:44px;padding:10px 20px;font-size:15px} .vcomments__err{margin:0;font-size:13.5px;color:#C4553F;min-height:0} @media(prefers-reduced-motion:reduce){.vcard__video{transition:none}} /* Hotfix: у карточек без обложки заставкой служит ранний кадр самого ролика */ .vcard:not(.is-preview):not(.is-live) .vcard__video{opacity:1} .vcard__frame{background:#1A1008} /* ========================================================================== Визуальное обновление: угли по всей странице и живой Батоныч ========================================================================== */ /* Искры печи. Фиксированный слой под контентом, но над фоном секций: z-index держим ниже шапки и нижней кнопки, клики не перехватываем. */ .embers{position:fixed;inset:0;width:100%;height:100%;z-index:2; pointer-events:none;mix-blend-mode:screen;opacity:.85} [data-theme="day"] .embers{opacity:.4;mix-blend-mode:multiply} @media(prefers-reduced-motion:reduce){.embers{display:none}} /* Блок «Написать Батонычу»: текст слева, персонаж справа */ .order__head{display:grid;gap:26px;align-items:center;position:relative;z-index:2} @media(min-width:900px){ .order__head{grid-template-columns:1.15fr .85fr;gap:40px} } .order__note{margin-top:14px;font-size:15.5px;color:var(--text-3);max-width:40ch} .batonych{margin:0;display:flex;justify-content:center} .batonych__frame{ position:relative;width:min(300px,72vw);aspect-ratio:560/1074; border-radius:200px 200px 26px 26px;overflow:hidden; background:radial-gradient(90% 70% at 50% 18%,#FFF7E6,#F2E5C9 62%,#E4D2AE); box-shadow:0 0 0 1px var(--line-strong),0 30px 60px -28px rgba(0,0,0,.8), 0 0 90px -20px rgba(226,150,60,.45); } /* тёплое свечение печи за фигурой */ .batonych__frame::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 45% at 50% 96%,rgba(240,170,70,.35),transparent 70%)} .batonych__still,.batonych__anim{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 12%} /* белый фон исходников превращаем в кремовый вместе с рамкой */ .batonych__still,.batonych__anim{mix-blend-mode:multiply} .batonych__anim{opacity:0;transition:opacity .6s var(--ease)} .batonych.is-alive .batonych__anim{opacity:1} .batonych.is-alive .batonych__still{opacity:0;transition:opacity .6s var(--ease)} @media(max-width:899px){ .batonych__frame{width:min(240px,60vw)} .order__head{gap:18px} } /* Фон блока письма стал светлее и глубже — текст читаем поверх него */ .order__bg img{opacity:calc(var(--img-dim) + .06)} /* Комментарии: раскрытый список и два раздельных действия */ .vcomments__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px} .vcomments__all,.vcomments__open{align-self:flex-start;font-size:14px;color:var(--accent-text); padding:6px 0;border-bottom:1px solid transparent} .vcomments__all:hover,.vcomments__open:hover{border-color:currentColor} .vcomments__all[aria-expanded="true"]{color:var(--text-2)} /* высота ограничена: страница не вытягивается, внутри своя прокрутка */ .vcomments__list{display:flex;flex-direction:column;gap:10px;max-height:226px;overflow-y:auto; padding:12px 14px;border-radius:12px;background:var(--surface-a);border:1px solid var(--line); -webkit-overflow-scrolling:touch;overscroll-behavior:contain;animation:qin .3s var(--ease) both} .vcomments__list::-webkit-scrollbar{width:6px} .vcomments__list::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px} .vcomments__row-item{font-size:14px;line-height:1.45;color:var(--text-2)} .vcomments__row-item b{color:var(--text);font-weight:600} .vcomments__row-item span{display:block;margin-top:2px;word-break:break-word} @media(max-width:559px){ .vcomments__list{max-height:190px;padding:10px 12px} .vcomments__actions{gap:6px 14px} .vcomments__all,.vcomments__open{font-size:14.5px;padding:8px 0} } /* ========================================================================== Сообщество пекарни: лучший комментарий, опрос, идеи, лента ========================================================================== */ .hub{display:grid;gap:16px;margin-top:32px} @media(min-width:900px){.hub{grid-template-columns:repeat(3,1fr);align-items:start}} .hub__card{padding:24px 22px;border-radius:var(--r-m);border:1px solid var(--line); background:linear-gradient(165deg,var(--surface-a),var(--surface-b));box-shadow:var(--shadow-card)} .hub__card h3{font-size:20px} .hub__hint{margin-top:10px;font-size:15px;color:var(--text-3)} .hub__badge{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px; color:#2B1A06;background:linear-gradient(170deg,#F3D394,#C4933D)} .hub__quote{margin:14px 0 0;font-family:var(--display);font-size:18.5px;line-height:1.4; color:var(--text);word-break:break-word} .hub__quote::before{content:"«"} .hub__quote::after{content:"»"} .hub__by{margin-top:12px;font-size:14px;color:var(--text-3)} .hub__msg{margin-top:10px;font-size:14px;min-height:1px;color:var(--text-3)} .hub__msg.is-error{color:#C4553F} .hub__msg.is-ok{color:var(--accent-text)} /* опрос */ .poll{display:flex;flex-direction:column;gap:9px;margin-top:16px} .poll__option{text-align:left;padding:13px 16px;min-height:50px;border-radius:12px;font-size:15.5px; color:var(--text);border:1px solid var(--line);background:var(--surface-a); transition:border-color .2s var(--ease),transform .15s var(--ease)} .poll__option:hover{border-color:var(--line-strong)} .poll__option:active{transform:translateY(1px)} .poll__option:disabled{opacity:.6} .poll__result{position:relative;display:flex;align-items:center;gap:10px;padding:12px 16px; border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-a); font-size:15px;color:var(--text-2)} .poll__result.is-mine{border-color:var(--brass)} .poll__bar{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(199,154,76,.35),rgba(199,154,76,.12)); transition:width .6s var(--ease)} .poll__label,.poll__percent{position:relative} .poll__percent{margin-left:auto;font-family:var(--display);color:var(--text)} /* идеи читателей */ .hub__ideas{margin-top:26px} .hub__ideas-list{display:grid;gap:10px;margin-top:14px} @media(min-width:760px){.hub__ideas-list{grid-template-columns:repeat(2,1fr)}} .hub__idea-item{padding:14px 16px;border-radius:12px;font-size:14.5px;color:var(--text-2); background:var(--surface-a);border:1px solid var(--line)} .hub__idea-item.is-featured{border-color:var(--brass)} .hub__idea-item b{color:var(--text)} .hub__idea-item i{font-style:normal;font-size:12.5px;color:var(--text-3);margin-left:8px} .hub__idea-item span{display:block;margin-top:6px;word-break:break-word} .hub__liked{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px; color:#2B1A06;background:linear-gradient(170deg,#F3D394,#C4933D);margin-left:8px} /* лента сообщества */ .feed{margin-top:30px} .feed__title{font-size:19px} .feed__list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px} .feed__item{display:flex;gap:12px;padding:12px 14px;border-radius:12px;font-size:14.5px; color:var(--text-2);border:1px solid transparent;transition:background .2s var(--ease)} .feed__item:hover{background:var(--surface-a);border-color:var(--line)} .feed__icon{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%; font-size:13px;color:var(--accent-text);background:rgba(199,154,76,.16)} .feed__item b{display:block;color:var(--text);font-weight:600;font-size:15px} .feed__item span{display:block;margin-top:3px;color:var(--text-3);word-break:break-word} .feed__item--best-comment .feed__icon{color:#2B1A06;background:linear-gradient(170deg,#F3D394,#C4933D)} @media(max-width:559px){ .hub__card{padding:20px 18px} .feed__item{padding:10px 12px;font-size:14px} } /* ========================================================================== Фокус в поле на телефоне: без автоматического зума -------------------------------------------------------------------------- iOS Safari приближает страницу, когда шрифт поля меньше 16px, и после этого вся вёрстка оказывается шире экрана — появляется горизонтальная прокрутка. Лечится не запретом зума (это ломает доступность), а тем, что у всех текстовых полей шрифт не меньше 16px. Правило намеренно жёсткое (!important) и стоит в конце файла: любое новое компактное поле, где кто-то поставит 14–15px, не сможет вернуть проблему. Пинч-зум при этом полностью сохраняется: user-scalable и maximum-scale мы не трогаем. ========================================================================== */ input, textarea, select, button, .poll__option, .pill, .pay { /* поле не может быть шире своего контейнера даже в гибком макете */ max-width: 100%; min-width: 0; box-sizing: border-box; } @media (max-width: 900px) { input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=url], input[type=date], input[type=datetime-local], input[type=month], input[type=time], input[type=file], input:not([type]), textarea, select { font-size: 16px !important; line-height: 1.4; } /* компактная форма комментария остаётся визуально мелкой за счёт отступов, а не за счёт шрифта */ .vcomments__form input[type=text], .vcomments__form textarea { padding: 11px 12px; } } /* Никакой элемент не должен растягивать страницу по горизонтали. Это подстраховка, а не заметание проблемы под ковёр: конкретные виновники (шрифт поля и отсутствие min-width) исправлены выше. */ html, body { max-width: 100%; } .wrap, .letter, .hub, .hub__card, .vcomments, .vcomments__form { min-width: 0; }