/* Fabricum landing — токены из приложения. Две темы: data-theme на (auto по prefers-color-scheme + ручной тумблер, см. theme.js). */ :root { --bg: #FBF8F2; --bg-glow: rgba(232, 120, 46, 0.14); --ink: #241E16; --sub: #6F655A; --panel: #F4EDDF; --panel-2: #ECE3D0; --border: #E6DCC7; --accent: #E8782E; --accent-ink: #141313; --phone: #141313; --shadow: rgba(58, 46, 30, 0.28); --stage: #F4EDDF; --stage-2: #ECE3D0; } html[data-theme="dark"] { --bg: #0B0B0D; --bg-glow: rgba(232, 120, 46, 0.14); --ink: #EDE3D0; --sub: #9A978F; --panel: #141317; --panel-2: #1C1B20; --border: #2A2A2E; --accent: #E8782E; --accent-ink: #141313; --phone: #000; --shadow: rgba(0, 0, 0, 0.55); /* Сцены под мокапами заметно светлее фона — тёмные скрины должны читаться */ --stage: #201F26; --stage-2: #282631; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; } /* Тёплый glow снизу — как в маркетинговых слайдах */ .glow { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 50% 108%, var(--bg-glow), transparent 70%); z-index: 0; } .wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* ── Header ── */ header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; } .brand img { width: 30px; height: 30px; } #theme-toggle { border: 1px solid var(--border); background: var(--panel); color: var(--ink); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; /* фоллбек до подмены глифа на svg из theme.js */ cursor: pointer; transition: background 0.2s; } #theme-toggle:hover { background: var(--panel-2); } /* ── Hero ── */ .hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding: 56px 0 72px; } .hero h1 { font-size: clamp(38px, 5.4vw, 58px); line-height: 1.12; letter-spacing: -0.5px; } .hero h1 .accent { color: var(--accent); } .hero .tagline { margin-top: 20px; font-size: 20px; color: var(--sub); max-width: 34em; } .hero .cta { margin-top: 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* Бейдж App Store по канону Apple: чёрный в светлой теме, белый в тёмной */ .store-badge { display: inline-flex; align-items: center; gap: 11px; padding: 9px 20px 9px 16px; border-radius: 13px; background: #000; color: #fff; text-decoration: none; line-height: 1.12; } html[data-theme="dark"] .store-badge { background: #fff; color: #000; } .store-badge .sb-apple { width: 26px; height: 26px; fill: currentColor; flex: none; } .sb-text { display: flex; flex-direction: column; text-align: left; } .sb-text small { font-size: 12px; font-weight: 400; letter-spacing: 0.1px; } .sb-text b { font-size: 21px; font-weight: 600; letter-spacing: -0.2px; margin-top: 1px; } .cta .note { font-size: 14px; color: var(--sub); } /* Дисклеймер-строка сразу под шапкой */ .hero-legal { margin: -6px 0 4px; font-size: 13px; text-align: center; } .hero-legal a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--border); } .hero-legal a:hover { color: var(--ink); } /* ── Телефон ── */ .phone { background: var(--phone); border-radius: 12.5% / 5.8%; padding: 3.4%; box-shadow: 0 30px 70px var(--shadow); aspect-ratio: 1320 / 2868; overflow: hidden; } .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 9% / 4.2%; display: block; } .hero .phone { max-width: 320px; margin: 0 auto; } /* ── Sections ── */ section { padding: 56px 0; } .kicker { color: var(--accent); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; } h2 { font-size: clamp(30px, 4vw, 42px); margin-top: 10px; letter-spacing: -0.4px; } .lead { margin-top: 14px; font-size: 19px; color: var(--sub); max-width: 38em; } /* Двухколоночные фичи */ .feature { display: grid; grid-template-columns: 1fr 0.62fr; gap: 56px; align-items: center; } .feature.reverse { grid-template-columns: 0.62fr 1fr; } .feature.reverse .copy { order: 2; } .feature.reverse .phone-stage { order: 1; } .feature .phone { max-width: 260px; margin: 0 auto; } /* Тиры архива */ .tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; } .tier { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 22px; } .tier h3 { font-size: 19px; } .tier p { margin-top: 8px; font-size: 15px; color: var(--sub); } /* Галерея превью */ .gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(240px, 62vw); gap: 26px; overflow-x: auto; padding: 30px 6px 42px; scroll-snap-type: x mandatory; scrollbar-width: none; } .gallery::-webkit-scrollbar { display: none; } .gallery .phone { scroll-snap-align: center; } .gallery .phone:nth-child(even) { transform: translateY(20px); } /* Футер */ footer { border-top: 1px solid var(--border); padding: 34px 0 46px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--sub); font-size: 14px; } footer a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--border); } footer a:hover { color: var(--ink); } footer nav { display: flex; gap: 22px; } /* ── Мобильная раскладка ── */ @media (max-width: 780px) { .hero { grid-template-columns: 1fr; padding: 30px 0 50px; text-align: center; } .hero .tagline { margin-inline: auto; } /* Узкие экраны: бейдж и примечание в столбик — рядом им тесно */ .hero .cta { flex-direction: column; align-items: center; gap: 14px; } .hero .phone { max-width: 250px; transform: none; } /* Все контентные секции на мобиле — по левому краю, как #archive/#tour */ .feature, .feature.reverse { grid-template-columns: 1fr; gap: 30px; } /* В одну колонку: всегда сначала текст, затем иллюстрация */ .feature.reverse .copy { order: 1; } .feature.reverse .phone-stage { order: 2; } .tiers { grid-template-columns: 1fr; } section { padding: 42px 0; } } /* ── Юридические страницы (/tos, /pp) ── */ .doc { max-width: 760px; margin: 0 auto; padding: 24px 0 80px; } .doc h1 { font-size: clamp(30px, 4.4vw, 40px); letter-spacing: -0.4px; margin-bottom: 6px; } .doc .updated { color: var(--sub); font-size: 14px; margin-bottom: 28px; } .doc h2 { font-size: 22px; margin: 34px 0 10px; } .doc p { margin: 12px 0; color: var(--ink); } .doc li { margin: 8px 0 8px 22px; color: var(--ink); } .doc hr { border: none; border-top: 1px solid var(--border); margin: 30px 0; } .doc a { color: var(--accent); } .doc .lang-switch { margin-bottom: 26px; font-size: 14px; color: var(--sub); } .doc .lang-switch a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--border); margin-right: 12px; } .doc .lang-switch a.on { color: var(--accent); border-color: var(--accent); } /* ── Header controls: язык + тема ── */ .controls { display: flex; align-items: center; gap: 14px; } .lang-nav { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 21px; padding: 4px; } .lang-nav a { padding: 5px 12px; border-radius: 15px; font-size: 13px; font-weight: 600; color: var(--sub); text-decoration: none; } .lang-nav a.on { background: var(--accent); color: var(--accent-ink); } /* Иконка приложения тёмная — тонкая рамка отделяет её от фона в обеих темах */ .brand img { border-radius: 22.5%; border: 1px solid var(--border); } /* ── Подложка под телефон: решает «тёмный мокап на тёмном фоне» ── Кремовая (light) / тёплая панель + амбер-глоу (dark) сцена за рамкой. */ .phone-stage { background: radial-gradient(80% 70% at 50% 100%, var(--bg-glow), transparent 72%), var(--stage); border: 1px solid var(--border); border-radius: 26px; padding: 26px; overflow: hidden; } .phone-stage .phone { box-shadow: 0 18px 44px var(--shadow); margin: 0 auto; width: 100%; } .hero-stage { width: 100%; max-width: 380px; margin: 0 auto; padding: 30px; } .hero-stage .phone { max-width: 300px; border-radius: 12.5% / 5.8%; } .feature .phone-stage { width: 100%; max-width: 320px; margin: 0 auto; padding: 26px; } .feature .phone-stage .phone { max-width: 250px; } /* Частичный мокап: видна верхняя часть, низ уходит под кромку сцены */ .phone.partial { aspect-ratio: auto; height: 100%; border-radius: 34px 34px 0 0; padding: 3.2% 3.2% 0; } .phone.partial img { border-radius: 26px 26px 0 0; object-position: top; } .tour-shot { height: 340px; padding: 22px 22px 0; } /* ── Лента 9 мокапов ── */ .tour { display: grid; grid-auto-flow: column; grid-auto-columns: min(320px, 78vw); gap: 22px; overflow-x: auto; padding: 28px 6px 34px; scroll-snap-type: x mandatory; scrollbar-width: none; } .tour::-webkit-scrollbar { display: none; } .tour-card { scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--border); border-radius: 26px; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease; } .tour-card:hover { transform: translateY(-4px); border-color: var(--accent); } .tour-card .tour-shot { border: none; border-radius: 0; background: radial-gradient(80% 70% at 50% 100%, var(--bg-glow), transparent 72%), var(--stage-2); } .tour-card .phone.partial { max-width: 210px; margin: 22px auto 0; } .tour-copy { padding: 18px 20px 22px; } .tour-copy .kicker { font-size: 12px; } .tour-copy h3 { font-size: 20px; margin: 6px 0 8px; } .tour-copy p { font-size: 14px; color: var(--sub); } /* ── Архив: extras (Year search + Layout) ── */ .arch-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .extra { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 22px; } .extra h3 { font-size: 19px; margin-bottom: 12px; } .extra p { font-size: 15px; color: var(--sub); } .ys-row { display: flex; gap: 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); } .ys-row:last-child { border-bottom: none; } .ys-row code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 700; color: var(--accent); background: var(--panel-2); border-radius: 6px; padding: 2px 8px; min-width: 96px; text-align: center; } .ys-row span { font-size: 14px; color: var(--sub); } .extra .tour-shot { margin-top: 16px; height: 240px; } .extra .phone.partial { max-width: 190px; margin: 0 auto; } @media (max-width: 780px) { .controls { gap: 8px; } .lang-nav a { padding: 4px 9px; } .arch-extras { grid-template-columns: 1fr; } #tour h2 { text-align: left; } } .brand, .brand:visited { text-decoration: none; color: var(--ink); } /* Анти-скрапинг email: без JS адрес собирает CSS из data-атрибутов; theme.js заменяет его копируемым текстом и рабочим mailto. */ .eml::after { content: attr(data-u) "\0040" attr(data-d); } .eml.eml-js::after { content: none; }