/* Футер сайта. Источник — макет synq-footer-v11.html из задачи в Notion «Новый футер сайта: поставить и задеплоить». Врезает его в страницы scripts/build-footer.mjs; здесь только стили. ЧЕМ ОТЛИЧАЕТСЯ ОТ МАКЕТА (правки одноразовые, при v12 повторить): 1. Изоляция. В макете футер — вся страница, поэтому токены жили в :root, а сброс полей стоял на `*`. Здесь футер живёт внизу чужой страницы со своей системой стилей: токены и сброс заведены на .sqf-scope (и на .f-modal — модалка-заглушка открывается в , вне футера). Правила `html,body`, `::selection` убраны совсем, `a`/`button`/`.num` заведены под оба корня. 2. Имена. .footer-scope → .sqf-scope, .footer → .sqf, .footer-inner → .sqf-inner: на страницах сайта класс .footer уже занят старым футером (83 правила в landing-*.css), и наш подвал подхватывал бы чужие стили. Классы .f-* уникальны, их не трогали. 3. Демо-обвязка убрана: шапка с тумблером темы, превью телефона и правила правила демо-обвязки (.phone, .demo-, .theme-) в проект не едут. Шрифты не объявляем: Raleway, Inter и Radio Canada уже подключены страницами сайта и страницей Studio из /marketing/assets. */ .sqf-scope,.f-modal{--gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB; --gray-400:#9CA3AF; --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151; --gray-800:#1F2937; --gray-900:#111827; --violet-50:#F5F0FF; --violet-100:#EDE5FF; --violet-300:#A87BFF; --violet-500:#7B2ABF; --violet-600:#5A0FA0; --white:#ffffff; --color-text: var(--gray-900); --color-text-secondary: var(--gray-500); --color-border: var(--gray-200); --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --radius-4:4px; --radius-8:8px; --radius-12:12px; --radius-16:16px; --radius-full:9999px; --font-2xs:10px; --font-xs:12px; --font-sm:13px; --font-base:14px; --font-md:16px; --font-lg:18px; --font-xl:24px; --font-2xl:32px; --font-3xl:40px; --dur-fast:150ms; --dur-normal:200ms; --dur-slow:300ms; --z-dropdown:10; --font-ui:'Raleway',sans-serif; --font-content:'Inter',sans-serif; --font-numbers:'Radio Canada',sans-serif; --ease-out: cubic-bezier(0.16,1,0.3,1); --container-max: 1240px; /* тёмная поверхность продукта: synq-mobile-dark-ds-v1_2 */ --s-page:#131320; --s-card:#1C1C2C; --s-raised:#26263A; --t1:#F1F1F6; --t2:#B8B6C6; --t3:#807E92; --bd1:rgba(190,190,225,0.10); --bd2:rgba(190,190,225,0.16); --fill-control:#232335; --fill-control-hi:#2C2C42; --acc:#8B54E6; --acc-hi:#C6A5FF; --acc-bg:rgba(198,165,255,0.16); --tile-violet:rgba(198,165,255,0.18); --scrim:rgba(0,0,0,.62); --plate-light:#F6F3FC;} .sqf-scope[data-theme="dark"],.f-modal[data-theme="dark"]{--f-plate: var(--s-page); --f-card-bg: var(--s-card); --f-card-line: var(--bd1); --f-card-bg-hover: var(--s-raised); --f-text: var(--t1); --f-text-dim: var(--t2); --f-text-faint: #8E8CA0; --f-line: var(--bd1); --f-menu-bg: var(--s-raised); --f-accent: var(--acc-hi); --f-btn: var(--acc); --f-btn-hover: #9A63F0; --f-brand-tint: var(--tile-violet); --f-chip-bg: var(--fill-control); --f-chip-hover: var(--acc-bg); --f-ghost-hover: var(--fill-control); --f-lit: rgba(241,241,246,0.95); --f-lit-soft: rgba(198,165,255,0.45); --f-glow: rgba(198,165,255,0.12); --f-scrim: var(--scrim);} .sqf-scope[data-theme="light"],.f-modal[data-theme="light"]{--f-plate: var(--plate-light); --f-card-bg: var(--white); --f-card-line: #E7E2F2; --f-card-bg-hover: var(--white); --f-text: var(--gray-900); --f-text-dim: var(--gray-500); --f-text-faint: var(--gray-500); --f-line: var(--gray-200); --f-menu-bg: var(--white); --f-accent: var(--violet-500); --f-brand-tint: var(--violet-100); --f-chip-bg: var(--violet-50); --f-chip-hover: var(--violet-100); --f-ghost-hover: var(--gray-50); --f-lit: rgba(123,42,191,0.85); --f-lit-soft: rgba(123,42,191,0.30); --f-glow: rgba(123,42,191,0.07); --f-btn: var(--violet-500); --f-btn-hover: var(--violet-600); --f-scrim: rgba(31,22,48,0.42);} .sqf-scope,.sqf-scope *,.sqf-scope *::before,.sqf-scope *::after,.f-modal,.f-modal *,.f-modal *::before,.f-modal *::after{box-sizing:border-box;margin:0;padding:0;} .sqf-scope a,.f-modal a{text-decoration:none;color:inherit;} .sqf-scope button,.f-modal button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;} .sqf-scope .num{font-family:var(--font-numbers);font-weight:inherit;font-feature-settings:"tnum";} .sqf-scope{container-type:inline-size;background:var(--f-plate);} .sqf-scope .sqf{background:var(--f-plate); color:var(--f-text); padding:var(--space-10) var(--space-6) var(--space-6); transition:background var(--dur-slow) var(--ease-out);} .sqf-scope .sqf-inner{max-width:var(--container-max);margin:0 auto;} .sqf-scope .f-bento{display:grid;grid-template-columns:1fr;gap:var(--space-3);} .sqf-scope .f-card{position:relative;isolation:isolate; background:var(--f-card-bg); border:1px solid var(--f-card-line); border-radius:var(--radius-16); padding:var(--space-6); display:flex;flex-direction:column;min-width:0;} .sqf-scope .f-card > *:not(.f-lit-in):not(.f-lit-edge){position:relative;z-index:1;} .sqf-scope[data-theme="light"] .f-card{border-color:transparent; box-shadow:0 1px 2px rgba(80,50,130,0.05), 0 14px 30px -20px rgba(80,50,130,0.30);} .sqf-scope .f-lit-in,.sqf-scope .f-lit-edge{position:absolute;inset:0;pointer-events:none; border-radius:inherit;opacity:0;will-change:opacity; transition:opacity 380ms var(--ease-out);} .sqf-scope .is-lit .f-lit-in,.sqf-scope .is-lit .f-lit-edge{transition-duration:620ms;} .sqf-scope .f-lit-in{z-index:0; background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%), var(--f-glow), transparent 66%);} .sqf-scope .f-lit-edge{z-index:2;padding:1px; background:radial-gradient(210px circle at var(--mx,50%) var(--my,50%), var(--f-lit), var(--f-lit-soft) 42%, transparent 76%); filter:drop-shadow(0 0 7px var(--f-lit-soft)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;} .sqf-scope .is-lit .f-lit-in{opacity:1;} .sqf-scope .is-lit .f-lit-edge{opacity:1;} .sqf-scope .f-cta{position:relative;isolation:isolate;} .sqf-scope .f-cta > *:not(.f-lit-in):not(.f-lit-edge){position:relative;z-index:1;} .sqf-scope .f-cta .f-lit-edge{background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.92), rgba(255,255,255,0.28) 42%, transparent 76%);} .sqf-scope .f-cta--ghost .f-lit-edge{background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%), var(--f-lit), var(--f-lit-soft) 42%, transparent 76%);} .sqf-scope .f-card--brand{background:linear-gradient(160deg, var(--f-brand-tint) 0%, var(--f-card-bg) 62%);} .sqf-scope .f-brand-top{display:inline-flex;align-items:center;gap:var(--space-3); align-self:flex-start;border-radius:var(--radius-12);} .sqf-scope .f-brand-top .f-wordmark{transition:color var(--dur-normal) var(--ease-out);} .sqf-scope .f-logo{width:36px;height:36px;flex-shrink:0;display:block;} .sqf-scope .f-wordmark{font-family:var(--font-ui);font-weight:800;font-size:var(--font-lg); letter-spacing:-0.02em;color:var(--f-text);white-space:nowrap;} .sqf-scope .f-manifest{font-family:var(--font-ui);font-weight:800; font-size:var(--font-xl);line-height:1.14;letter-spacing:-0.025em; color:var(--f-text); margin-top:var(--space-5); max-width:16ch;overflow-wrap:anywhere;} .sqf-scope .f-partner{display:inline-flex;align-items:center;gap:var(--space-2); align-self:flex-start;margin-top:var(--space-5); padding:var(--space-2) var(--space-4) var(--space-2) var(--space-3); border:1px solid var(--f-card-line); border-radius:var(--radius-full); font-family:var(--font-ui);font-weight:600;font-size:var(--font-xs); color:var(--f-text-dim);} .sqf-scope .f-meta-logo{display:block;flex-shrink:0;} .sqf-scope .f-legal-note{margin-top:var(--space-4); font-size:var(--font-xs);line-height:1.6;color:var(--f-text-faint);} .sqf-scope .f-social-label{margin-top:var(--space-6); font-family:var(--font-ui);font-weight:700;font-size:var(--font-2xs); letter-spacing:0.12em;text-transform:uppercase;color:var(--f-text-faint);} .sqf-scope .f-socials{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-3);} .sqf-scope .f-social{display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--radius-12); background:var(--f-chip-bg); color:var(--f-text-dim); transition:background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);} .sqf-scope .f-social svg{display:block;} .sqf-scope .f-head{width:100%;display:flex;align-items:center;justify-content:space-between; gap:var(--space-3);text-align:left;min-height:24px;} .sqf-scope .f-head-title{font-family:var(--font-ui);font-weight:700;font-size:var(--font-base); color:var(--f-text);letter-spacing:-0.01em;} .sqf-scope .f-chev{display:none;width:20px;height:20px;color:var(--f-text-faint);flex-shrink:0; transition:transform var(--dur-slow) var(--ease-out);} .sqf-scope .f-body{display:grid;grid-template-rows:1fr;} .sqf-scope .f-body-inner{overflow:hidden;} .sqf-scope .f-links{display:flex;flex-direction:column;padding-top:var(--space-4);} .sqf-scope .f-link{display:inline-flex;align-items:center;gap:var(--space-2); align-self:flex-start;padding:var(--space-2) 0; font-size:var(--font-base);color:var(--f-text-dim); border-radius:var(--radius-4); transition:color var(--dur-normal) var(--ease-out),transform var(--dur-normal) var(--ease-out);} .sqf-scope .f-contacts{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);} .sqf-scope .f-cta{display:flex;align-items:center;gap:var(--space-3); min-height:56px;padding:var(--space-3) var(--space-4); border-radius:var(--radius-12); border:1px solid transparent; transition:background var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);} .sqf-scope .f-cta svg{display:block;flex-shrink:0;} .sqf-scope .f-cta-txt{min-width:0;display:flex;flex-direction:column;gap:1px;} .sqf-scope .f-cta-title{font-family:var(--font-ui);font-weight:700;font-size:var(--font-base);line-height:1.25;} .sqf-scope .f-cta-sub{font-size:var(--font-xs);line-height:1.3;opacity:0.72;word-break:break-all;} .sqf-scope .f-cta--primary{background:var(--f-btn);color:var(--white);} .sqf-scope .f-cta--ghost{border-color:var(--f-card-line);color:var(--f-text);} .f-modal{position:fixed;inset:0;z-index:60; display:flex;align-items:center;justify-content:center; padding:var(--space-6); opacity:0;pointer-events:none; transition:opacity 200ms var(--ease-out);} .f-modal.is-open{opacity:1;pointer-events:auto;} .f-modal__scrim{position:absolute;inset:0; background:var(--f-scrim); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);} .f-modal__card{position:relative; width:100%;max-width:400px; background:var(--f-card-bg); border:1px solid var(--f-card-line); border-radius:var(--radius-16); padding:var(--space-6); color:var(--f-text); box-shadow:0 24px 60px -24px rgba(0,0,0,0.6); transform:translateY(10px) scale(0.97); transition:transform 200ms var(--ease-out);} .f-modal.is-open .f-modal__card{transform:none;transition-duration:320ms;} .f-modal[data-theme="light"] .f-modal__card{border-color:transparent; box-shadow:0 24px 60px -26px rgba(80,50,130,0.45);} .f-modal__ic{width:40px;height:40px;border-radius:var(--radius-12); display:flex;align-items:center;justify-content:center; background:var(--f-chip-bg);color:var(--f-accent); margin-bottom:var(--space-4);} .f-modal__ic svg{display:block;} .f-modal__title{font-family:var(--font-ui);font-weight:800;font-size:var(--font-lg); letter-spacing:-0.02em;line-height:1.25;} .f-modal__body{margin-top:var(--space-3); font-size:var(--font-base);line-height:1.6;color:var(--f-text-dim);} .f-modal__body b{color:var(--f-text);font-weight:600;} .f-modal__actions{margin-top:var(--space-5); display:flex;flex-direction:column;gap:var(--space-2);} .f-modal__btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2); min-height:48px;padding:var(--space-3) var(--space-4); border-radius:var(--radius-12); font-family:var(--font-ui);font-weight:700;font-size:var(--font-base); border:1px solid transparent; transition:background var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), transform var(--dur-fast) var(--ease-out);} .f-modal__btn svg{display:block;flex-shrink:0;} .f-modal__btn--primary{background:var(--f-btn);color:var(--white);} .f-modal__btn--ghost{border-color:var(--f-card-line);color:var(--f-text-dim);} .f-modal__btn:active{transform:scale(0.98);} @media (hover:hover){ .f-modal__btn--primary:hover{background:var(--f-btn-hover);} .f-modal__btn--ghost:hover{background:var(--f-ghost-hover);color:var(--f-text);} } .f-modal__btn:focus-visible{outline:2px solid var(--f-accent);outline-offset:3px;} .f-modal--sheet{align-items:flex-end;padding:0;} .f-modal--sheet .f-modal__card{max-width:none; border-radius:var(--radius-16) var(--radius-16) 0 0; border-bottom:none; padding:var(--space-6) var(--space-5) var(--space-8); transform:translateY(100%);} .f-modal--sheet.is-open .f-modal__card{transform:none;} @media (prefers-reduced-motion:reduce){ .f-modal__card{transition:none;transform:none;} } .sqf-scope .f-bottom{margin-top:var(--space-6);padding-top:var(--space-5); border-top:1px solid var(--f-line); display:flex;flex-direction:column;gap:var(--space-4);} .sqf-scope .f-legal-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);} .sqf-scope .f-legal-link{font-size:var(--font-xs);color:var(--f-text-faint);padding:var(--space-2) 0; transition:color var(--dur-normal) var(--ease-out);} .sqf-scope .f-bottom-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);} .sqf-scope .f-copy{font-size:var(--font-xs);color:var(--f-text-faint);} .sqf-scope .f-lang{position:relative;} .sqf-scope .f-lang-btn{display:inline-flex;align-items:center;gap:var(--space-2); padding:var(--space-2) var(--space-3);min-height:40px; border:1px solid var(--f-card-line);border-radius:var(--radius-full); font-family:var(--font-ui);font-weight:600;font-size:var(--font-sm); color:var(--f-text-dim); transition:background var(--dur-normal) var(--ease-out),color var(--dur-normal) var(--ease-out);} .sqf-scope .f-lang-btn svg{flex-shrink:0;} .sqf-scope .f-lang-caret{transition:transform var(--dur-normal) var(--ease-out);} .sqf-scope .f-lang.is-open .f-lang-caret{transform:rotate(180deg);} .sqf-scope .f-lang-menu{position:absolute;right:0;bottom:calc(100% + var(--space-2)); min-width:200px;padding:var(--space-2); background:var(--f-menu-bg); border:1px solid var(--f-card-line);border-radius:var(--radius-12); box-shadow:0 10px 25px rgba(0,0,0,0.18); z-index:var(--z-dropdown); display:flex;flex-direction:column;gap:2px; opacity:0;transform:translateY(6px);pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);} .sqf-scope .f-lang.is-open .f-lang-menu{opacity:1;transform:translateY(0);pointer-events:auto;transition-duration:220ms;} .sqf-scope .f-lang-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3); width:100%;min-height:40px;padding:var(--space-2) var(--space-3); border-radius:var(--radius-8);font-size:var(--font-base);color:var(--f-text-dim); text-align:left; transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);} .sqf-scope .f-lang-opt.is-active{color:var(--f-accent);font-weight:600;} .sqf-scope .f-lang-opt .f-check{width:16px;height:16px;opacity:0;flex-shrink:0;} .sqf-scope .f-lang-opt.is-active .f-check{opacity:1;} .sqf-scope .f-cta svg{transition:transform var(--dur-normal) var(--ease-out);} .sqf-scope .f-social:active,.sqf-scope .f-cta:active{transform:scale(0.97);} .sqf-scope .f-lang-btn:active{transform:scale(0.98);} @media (hover:hover){ .sqf-scope .f-link:hover{color:var(--f-text);transform:translateX(2px);} .sqf-scope .f-brand-top:hover .f-wordmark{color:var(--f-accent);} .sqf-scope .f-cta:hover svg{transform:translateX(2px);} .sqf-scope .f-legal-link:hover{color:var(--f-text);} .sqf-scope .f-social:hover{background:var(--f-chip-hover);color:var(--f-text);transform:translateY(-2px);} .sqf-scope .f-cta--primary:hover{background:var(--f-btn-hover);} .sqf-scope .f-cta--ghost:hover{background:var(--f-ghost-hover);border-color:var(--f-text-faint);} .sqf-scope .f-lang-btn:hover{background:var(--f-card-bg-hover);color:var(--f-text);} .sqf-scope .f-lang-opt:hover{background:var(--f-plate);color:var(--f-text);} } .sqf-scope .f-brand-top:focus-visible,.sqf-scope .f-link:focus-visible,.sqf-scope .f-legal-link:focus-visible,.sqf-scope .f-social:focus-visible,.sqf-scope .f-cta:focus-visible,.sqf-scope .f-lang-btn:focus-visible,.sqf-scope .f-lang-opt:focus-visible,.sqf-scope .f-head:focus-visible{outline:2px solid var(--f-accent);outline-offset:3px;border-radius:var(--radius-4);} .js .sqf-scope .f-reveal{opacity:0;transform:translateY(14px);} .js .sqf-scope .f-reveal.is-in{opacity:1;transform:none; transition:opacity 560ms var(--ease-out),transform 640ms var(--ease-out);} @container (min-width:640px){ .sqf-scope .f-head{pointer-events:none;} } @container (min-width:640px) and (max-width:979px){ .sqf-scope .f-bento{grid-template-columns:1fr 1fr;} .sqf-scope .f-card--brand{grid-column:1 / -1;} } @container (min-width:980px){ .sqf-scope .sqf{padding:var(--space-12) var(--space-6) var(--space-6);} .sqf-scope .f-bento{grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:min-content;} .sqf-scope .f-card--brand{grid-row:1 / span 2;} .sqf-scope .f-card--brand .f-social-label{margin-top:auto;padding-top:var(--space-8);} .sqf-scope .f-manifest{font-size:var(--font-3xl);max-width:13ch;line-height:1.08;} .sqf-scope .f-bottom{margin-top:var(--space-8); flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-8);} .sqf-scope .f-bottom .f-legal-links{order:2;} .sqf-scope .f-bottom-row{order:1;gap:var(--space-5);} } @container (max-width:639px){ .sqf-scope .sqf{padding:var(--space-8) var(--space-4) var(--space-5);} .sqf-scope .f-card{padding:var(--space-5);} .sqf-scope .f-card--acc{padding-top:var(--space-2);padding-bottom:var(--space-2);} .sqf-scope .f-card--acc .f-head{min-height:48px;} .sqf-scope .f-card--acc .f-chev{display:block;} .sqf-scope .f-card--acc .f-body{grid-template-rows:0fr;transition:grid-template-rows 240ms var(--ease-out);} .sqf-scope .f-card--acc.is-open .f-body{grid-template-rows:1fr;transition-duration:320ms;} .sqf-scope .f-card--acc.is-open .f-chev{transform:rotate(180deg);} .sqf-scope .f-card--acc .f-links{padding-bottom:var(--space-3);} .sqf-scope .f-manifest{font-size:var(--font-xl);max-width:14ch;} .sqf-scope .f-legal-links{gap:var(--space-1) var(--space-4);} .sqf-scope .f-legal-link{padding:var(--space-3) 0;} .sqf-scope .f-socials{gap:var(--space-6);} } @media (prefers-reduced-motion:reduce){ .sqf-scope,.sqf-scope *,.sqf-scope *::before,.sqf-scope *::after,.f-modal,.f-modal *,.f-modal *::before,.f-modal *::after{animation-duration:0.001ms !important;transition-duration:0.001ms !important;} .js .sqf-scope .f-reveal{opacity:1;transform:none;} .sqf-scope .f-lit-in,.sqf-scope .f-lit-edge{display:none;} }