/* ============================================================ БРИФ-РЕДАКТОР — стили (светлая тема, Manrope, в языке сайта) ============================================================ */ /* Manrope вариативный (200–800) со своего домена — не с Google: тот render-blocking и в РФ придушен. Дублируется здесь, потому что brief.html грузит только brief.css. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ ТОКЕНЫ. Держим одну линию с css/style.css портфолио — раньше бриф ушёл в собственную систему (свои имена --soft/--soft-2, свои радиусы 7–14px, ноль тёмной темы), и из-за этого выглядел мягче и чужероднее сайта. Имена и значения ниже совпадают со style.css один в один, чтобы бриф, портфолио и графический редактор жили в одной системе. ============================================================ */ :root { --ink: #202020; --bg: #ffffff; --muted: #6b6b70; --line: rgba(32,32,32,.12); /* волосяные линии как на сайте */ --line-2: rgba(32,32,32,.07); --surface: #ffffff; /* было --soft-2 */ --surface-2: #f4f4f6; /* было --soft; значение подтянуто к style.css */ --soft: var(--surface-2); /* псевдонимы: полфайла ещё зовёт старые имена */ --soft-2: var(--surface); /* Акцент БРИФА — цвет, который дизайнер выбирает под конкретный бриф. Не путать с --accent портфолио (цвет проекта). Переопределяется инлайн из js/brief.js; по умолчанию просто чернила, чтобы ничего не пестрило. */ --accent: var(--ink); /* Цвет подкраски фона. Отдельно от --accent: пока дизайнер не выбрал цвет брифа, --accent равен чернилам, и заливка фона им дала бы серую муть. Поэтому по умолчанию красим свечением бренда, а js/brief.js переопределяет --tint на выбранный цвет вместе с --accent. */ --tint: rgb(var(--glow-rgb)); /* Подпись XMB: голубоватое свечение. В брифе его не было вовсе — теперь это состояние фокуса, а не украшение. */ --glow-rgb: 127,178,255; --wave-line: 138,144,156; /* R,G,B нитей фон-волны (js/wave.js) */ --glass-a: rgba(222,222,224,0.6); /* стекло секций — значения из .panel сайта */ --glass-b: rgba(150,150,154,0.34); --font: "Manrope", "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.22,.61,.36,1); /* Радиус 5px — фирменная «квадратная» геометрия HUD-пилюли и кнопок сайта. Один радиус на всё; 10px оставлен для редких крупных поверхностей. */ --rad: 5px; --rad-s: 5px; --rad-lg: 10px; /* Типографическая шкала вместо двадцати разных кеглей вразнобой */ --fz-mono: 11px; /* служебный слой: номера, счётчики, капс */ --fz-xs: 12px; --fz-sm: 13px; --fz-md: 14px; --fz-lg: 17px; --fz-q: 23px; /* вопрос клиенту — крупно и лёгким весом */ --fz-h: 30px; /* Опора на 500/600 как в портфолио; 200 — для крупных вопросов */ --fw-thin: 200; --fw-reg: 400; --fw-med: 500; --fw-bold: 600; --tap: 44px; /* минимальная цель под палец */ --focus: 0 0 0 1px rgba(var(--glow-rgb),.55), 0 0 18px -2px rgba(var(--glow-rgb),.6); } /* Тёмная тема. Механика ровно как на сайте: атрибут data-theme="dark" на , светлая — без атрибута. Раньше brief.html был жёстко объявлен светлым, и клиент, пришедший с тёмного сайта, получал удар белым экраном. */ :root[data-theme="dark"] { --ink: #E8ECF2; /* мягко-белый, не чистый #fff */ --bg: #0B0E14; /* почти-чёрный с синевой, не #000 */ --muted: #AEB9C9; --line: rgba(232,236,242,.16); --line-2: rgba(232,236,242,.08); --surface: #141A24; --surface-2: #10151d; --wave-line: 110,118,140; /* светло-серые нити на тёмном — как в style.css */ --glass-a: rgba(40,42,48,0.62); --glass-b: rgba(22,23,27,0.46); } /* Живой фон сайта. Слои: .fscene (подкраска акцентом) → #wave (волна) → контент. */ #wave { position: fixed; inset: 0; z-index: 1; pointer-events: none; } :root[data-theme="dark"] #wave { opacity: .5; } * { box-sizing: border-box; margin: 0; padding: 0; } /* hidden обязан прятать. Без этого правила атрибут молча проигрывает любому display у класса — на этом уже словили две кнопки отправки разом. */ [hidden] { display: none !important; } /* тонкая минималистичная полоса прокрутки — как на сайте */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 42%, transparent); background-clip: padding-box; } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; font-weight: 400; line-height: 1.45; } #app { min-height: 100%; } input, textarea, button { font-family: inherit; color: inherit; } textarea { resize: vertical; } ::placeholder { color: color-mix(in srgb, var(--muted) 62%, transparent); } a { color: inherit; } /* Уважаем системную настройку — в портфолио это соблюдается трижды, в брифе не было ни разу */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--rad-s); border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease), opacity .16s, transform .12s; white-space: nowrap; } .btn:hover { background: var(--surface-2); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--focus); } .btn--primary { background: var(--accent); color: var(--bg); } /* осветляем вуалью: brightness на тёмном акценте почти не двигает цвет */ .btn--primary:hover { background: linear-gradient(rgba(255,255,255,0.16) 0 0), var(--accent); } .btn--ghost { border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); } .btn--big { height: 52px; padding: 0 28px; font-size: 16px; border-radius: var(--rad); } .ico { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--bg); border-radius: var(--rad); cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted); position: relative; transition: background .14s, border-color .14s, color .14s; } /* Кнопка рисуется 32px, но пальцем ловится как 44px — норма тач-цели. Раньше эти кнопки были 28px, а крестик удаления цвета вообще 18px. */ .ico::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: var(--tap); height: var(--tap); transform: translate(-50%,-50%); } .ico:hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); } .ico:focus-visible { outline: none; box-shadow: var(--focus); } .ico--del:hover { border-color: #c0392b; color: #c0392b; background: color-mix(in srgb, #c0392b 8%, var(--bg)); } .bicon { display: block; } /* ============================================================ ВЕРХНЯЯ ПАНЕЛЬ ============================================================ */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 22px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid var(--line); } .topbar__l { display: flex; align-items: baseline; gap: 10px; } .brand { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .brand__sub { font-size: 13px; color: var(--muted); } .topbar__r { display: flex; align-items: center; gap: 8px; } /* ============================================================ КОНСТРУКТОР: палитра + холст ============================================================ */ .wrap { display: grid; grid-template-columns: 264px 1fr; align-items: start; } .palette { position: sticky; top: 60px; align-self: start; height: calc(100vh - 60px); overflow: auto; padding: 18px 16px; border-right: 1px solid var(--line); background: var(--soft-2); } .palette__t { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 2px 4px 10px; } .palette__list { display: flex; flex-direction: column; gap: 7px; } .pal { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; cursor: pointer; transition: border-color .14s, background .14s, transform .1s; } .pal:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); background: var(--surface); transform: translateX(2px); } .pal:active { transform: translateX(0) translateY(1px); } .pal__ic { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--soft); color: var(--ink); font-size: 17px; } .pal__tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .pal__tx b { font-weight: 600; font-size: 14px; } .pal__tx i { font-style: normal; font-size: 11.5px; color: var(--muted); } .pal--sec { margin-top: 12px; border-style: dashed; } .pal--sec .pal__ic { background: var(--ink); color: var(--bg); } .palette__hint { margin: 16px 4px 0; font-size: 12px; color: var(--muted); line-height: 1.5; } .canvas { padding: 26px clamp(16px, 4vw, 60px) 120px; max-width: 920px; } /* лист брифа (шапка) */ .sheet { margin-bottom: 18px; } .sheet__title { width: 100%; border: none; background: transparent; padding: 4px 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; outline: none; border-bottom: 1px solid transparent; transition: border-color .15s; } .sheet__title:focus { border-bottom-color: var(--line); } .sheet__intro { width: 100%; border: 1px solid var(--line-2); background: var(--soft-2); border-radius: var(--rad-s); padding: 10px 12px; margin-top: 12px; font-size: 14.5px; color: var(--muted); outline: none; transition: border-color .15s; } .sheet__intro:focus { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } .sheet__designer { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .sheet__designer input { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; font-size: 13.5px; outline: none; } .sheet__designer > input { flex: 1 1 220px; } .tg { display: inline-flex; align-items: center; gap: 0; flex: 1 1 220px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .tg span { padding: 0 9px; background: var(--soft); color: var(--muted); align-self: stretch; display: flex; align-items: center; font-size: 14px; border-right: 1px solid var(--line); } .tg input { border: none !important; flex: 1; } /* секция */ .bx-section { border: 1px solid var(--line); border-radius: var(--rad); margin-bottom: 16px; background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .bx-section.is-active { border-color: color-mix(in srgb, var(--ink) 28%, transparent); box-shadow: 0 1px 0 var(--line-2), inset 3px 0 0 var(--ink); } .sec__head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line-2); background: var(--soft-2); } .sec__num { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); border-radius: 50%; font-size: 12px; font-weight: 700; } .sec__title { flex: 1; border: none; background: transparent; font-size: 16px; font-weight: 600; outline: none; padding: 4px 2px; } .sec__tools { display: flex; gap: 5px; } .sec__body { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 14px; } .sec__empty { border: 1px dashed var(--line); border-radius: var(--rad-s); padding: 16px; text-align: center; color: var(--muted); font-size: 13px; } /* блок-редактор */ .bx-block { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: var(--rad-s); padding: 11px 12px; background: var(--surface); transition: border-color .14s, box-shadow .14s, opacity .14s; } .bx-block:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } .bx-block.is-drag { opacity: .4; } .bx-block.drop-mark { box-shadow: 0 -2px 0 var(--ink); } .bx-grip { cursor: grab; color: var(--muted); font-size: 15px; line-height: 1.4; user-select: none; padding-top: 2px; } .bx-grip:active { cursor: grabbing; } .bx-type { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; } .bx-type i { font-style: normal; } .bx-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-right: 96px; } .bx-label { border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 15px; font-weight: 600; padding: 3px 0; outline: none; } .bx-label:focus { border-bottom-color: var(--ink); } .bx-help { border: none; background: transparent; font-size: 12.5px; color: var(--muted); padding: 1px 0; outline: none; } .bx-tools { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 2px; } .req { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-right: 4px; cursor: pointer; user-select: none; } .req input { accent-color: var(--ink); } /* варианты (radio/checkbox) */ .opts { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } .opt { display: flex; align-items: center; gap: 8px; } .opt__mk { color: var(--muted); width: 14px; text-align: center; } .opt__in { flex: 1; border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 9px; font-size: 13.5px; outline: none; } .opt__in:focus { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } .addopt { align-self: flex-start; border: none; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 2px; font-weight: 600; } .addopt:hover { color: var(--ink); } .mini { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 4px; } .mini input[type=checkbox] { accent-color: var(--ink); } .mini .steps { width: 46px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; } /* визуальный выбор (редактор) */ .vis { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .vopt { display: flex; align-items: center; gap: 9px; } .vopt__pic { width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--soft); font-size: 18px; } .vopt__pic img { width: 100%; height: 100%; object-fit: cover; } .vopt__f { flex: 1; display: flex; flex-direction: column; gap: 5px; } .vopt__f input { border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 9px; font-size: 13px; outline: none; } .vopt__f input:focus { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } /* слайдер (редактор) */ .scaleed { display: flex; align-items: center; gap: 9px; margin-top: 2px; flex-wrap: wrap; } .scaleed input { border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 9px; font-size: 13.5px; outline: none; flex: 1 1 130px; } .scaleed__ar { color: var(--muted); } .ph { border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 9px; font-size: 13px; outline: none; margin-top: 2px; } .empty { color: var(--muted); padding: 40px 0; text-align: center; } /* ============================================================ ЗАПОЛНЕНИЕ (клиент) ============================================================ */ .fillpage, .viewpage .ro, .ro { max-width: 760px; margin: 0 auto; } .fillpage { padding: 48px clamp(18px, 5vw, 40px) 120px; } /* фон-картинка брифа (за формой) + светлая подложка для читаемости */ .fbg { position: fixed; inset: 0; z-index: 0; background-position: center; background-size: cover; background-repeat: no-repeat; } .fbg::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.82); } /* z-index 2, а не 1: на 1 теперь живёт канвас волны, иначе текст ушёл бы под неё */ .fillpage, .returns { position: relative; z-index: 2; } .fhead { margin-bottom: 30px; } .fhead h1 { font-size: clamp(26px, 5vw, 36px); font-weight: 700; letter-spacing: -0.02em; } .fhead p { color: var(--muted); margin-top: 10px; font-size: 15.5px; } .fhead__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .fhead__logo { max-height: 46px; max-width: 170px; width: auto; object-fit: contain; display: block; } .fhead__name { font-size: 15px; font-weight: 600; color: var(--muted); } .fsec { margin-top: 34px; } .fsec__t { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .fsec__t span { width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg); border-radius: 50%; font-size: 12px; } .fl { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--rad); padding: 15px 18px; background: var(--surface); transition: border-color .15s, box-shadow .15s; } .fl__h { margin-bottom: 11px; } .fl__lab { display: block; font-size: 15.5px; font-weight: 600; } .fl__help { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; } .rq { color: #c0392b; margin-left: 3px; } .fin { width: 100%; border: 1px solid var(--line); border-radius: var(--rad-s); padding: 11px 13px; font-size: 15px; outline: none; background: var(--surface); transition: border-color .15s, box-shadow .15s; } .fin:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(32,32,32,.06); } .fin--date { max-width: 220px; } .fl.is-bad { border-color: #e0a3a3; box-shadow: 0 0 0 3px rgba(192,57,43,.06); } .fl.is-bad .fin, .fl.is-bad .choices, .fl.is-bad .vgrid { border-color: #e0a3a3; border-radius: var(--rad-s); } .choices { display: flex; flex-direction: column; gap: 8px; } .choice { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: var(--rad-s); padding: 11px 14px; cursor: pointer; font-size: 15px; transition: border-color .14s, background .14s; } .choice:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); background: var(--soft-2); } .choice input { accent-color: var(--ink); width: 17px; height: 17px; } .choice:has(input:checked) { border-color: var(--ink); background: var(--surface-2); } /* визуальный выбор (клиент) */ .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .vtile { position: relative; border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: var(--surface); cursor: pointer; padding: 0; text-align: left; transition: border-color .14s, transform .12s, box-shadow .14s; } .vtile:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); } .vtile__img { display: block; aspect-ratio: 4/3; background: var(--soft); } .vtile__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .vtile__cap { display: block; padding: 9px 12px; font-size: 13.5px; font-weight: 600; } .vtile__mk { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); background: rgba(0,0,0,.18); box-shadow: 0 0 0 1px rgba(0,0,0,.1); transition: background .14s; } .vtile.is-sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); } .vtile.is-sel .vtile__mk { background: var(--ink); } .vtile.is-sel .vtile__mk::after { content: "✓"; color: var(--bg); font-size: 12px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* слайдер (клиент) */ .scale { display: flex; align-items: center; gap: 14px; } .scale__p { font-size: 13.5px; color: var(--muted); flex: 0 0 auto; max-width: 34%; } .scale__p--r { text-align: right; } .scale__r { flex: 1; accent-color: var(--ink); height: 4px; } .ferr { color: #c0392b; font-size: 14px; margin: 4px 0 14px; } #fillform > .btn--big { margin-top: 8px; } /* финал — возврат брифа */ .returns { padding: 0 clamp(18px, 5vw, 40px) 90px; } .returns__card { max-width: 760px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--rad); padding: 26px; background: var(--soft-2); } .returns__ok { font-size: 20px; font-weight: 700; color: #1c7a43; margin-bottom: 6px; } .returns__card p { color: var(--muted); font-size: 14.5px; } .returns__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; } .returns__link input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; color: var(--muted); background: var(--surface); } .returns__note { font-size: 12px !important; color: var(--muted) !important; margin-top: 8px; } .returns__status { font-size: 14px; margin: 2px 0; } .returns__status.is-ok { color: #1c7a43; font-weight: 600; } .returns__status.is-bad { color: #c0392b; } .returns__manual { margin-top: 14px; } .returns__manual > summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; user-select: none; } .returns__manual > summary::-webkit-details-marker { display: none; } .returns__manual > summary::before { content: "▸ "; } .returns__manual[open] > summary::before { content: "▾ "; } .returns__manual[open] > summary { margin-bottom: 6px; } /* ============================================================ ПРОСМОТР ОТВЕТА (read-only) ============================================================ */ .viewpage .topbar--view { margin-bottom: 0; } .ro { padding: 40px clamp(18px, 5vw, 40px) 100px; } .ro-head h1 { font-size: clamp(24px, 4.5vw, 32px); font-weight: 700; letter-spacing: -0.02em; } .ro-by { color: var(--muted); margin-top: 6px; } .ro-sec { margin-top: 30px; } .ro-sec h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; } .ro-sec h2 span { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg); border-radius: 50%; font-size: 11px; } .ro-fl { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line-2); } .ro-q { font-size: 14px; font-weight: 600; color: var(--ink); } .ro-a { font-size: 15px; } .ro-val { white-space: pre-wrap; } .ro-list { margin: 0; padding-left: 18px; } .ro-empty { color: var(--muted); font-style: italic; } .ro-scale { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); } .ro-scale__bar { position: relative; flex: 1; height: 4px; background: var(--line); border-radius: 3px; } .ro-scale__dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); transform: translate(-50%,-50%); } .ro-scale__n { font-size: 12px; color: var(--muted); } /* ============================================================ МОДАЛКА / ТОСТ ============================================================ */ .modal { position: fixed; inset: 0; z-index: 60; display: none; } .modal.is-open { display: block; } .modal__back { position: absolute; inset: 0; background: rgba(20,20,20,.34); backdrop-filter: blur(2px); } .modal__box { position: relative; max-width: 520px; margin: 12vh auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.16); animation: pop .18s var(--ease); } @keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } .modal__box h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; } .modal__box p { color: var(--muted); font-size: 14px; margin-bottom: 14px; } .modal__x { position: absolute; top: 14px; right: 14px; border: none; background: transparent; font-size: 16px; color: var(--muted); cursor: pointer; } .modal__link input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); background: var(--soft-2); } .modal__btns { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; } .tpls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; max-height: 50vh; overflow: auto; } .tpl { display: flex; align-items: center; gap: 8px; } .tpl__open { flex: 1; text-align: left; border: 1px solid var(--line); border-radius: 9px; padding: 11px 14px; background: var(--surface); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .14s, border-color .14s; } .tpl__open:hover { background: var(--soft); border-color: color-mix(in srgb, var(--ink) 28%, transparent); } .muted { color: var(--muted); font-size: 14px; } .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 80; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); } .fatal { max-width: 520px; margin: 18vh auto; text-align: center; padding: 0 20px; } .fatal h2 { font-size: 22px; margin-bottom: 10px; } .fatal p { color: var(--muted); margin-bottom: 22px; } /* ============================================================ НОВЫЕ БЛОКИ — конструктор ============================================================ */ .hintbox { font-size: 12.5px; color: var(--muted); background: var(--soft-2); border: 1px dashed var(--line); border-radius: 8px; padding: 7px 10px; margin-top: 2px; } .bx-grip { touch-action: none; } .bx-block.dragging { opacity: .35; } body.is-dragblock { cursor: grabbing; user-select: none; } .drop-line { height: 0; border-top: 2px solid var(--ink); margin: 4px 0; border-radius: 2px; position: relative; } .drop-line::before { content: ""; position: absolute; left: -3px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); } /* note-блок (конструктор) */ .bx-block--note { background: var(--soft-2); } .note-ed { width: 100%; border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; outline: none; resize: vertical; } .note-ed:focus { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } /* слайдеры (редактор) */ .sled { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; } .slrow { display: flex; align-items: center; gap: 8px; } .slrow input { flex: 1 1 120px; border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 9px; font-size: 13.5px; outline: none; min-width: 0; } .slrow input:focus { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } /* ============================================================ НОВЫЕ БЛОКИ — заполнение (клиент) ============================================================ */ .slfill .scale + .scale { margin-top: 12px; } /* да / нет */ .yn { display: flex; gap: 10px; } .yn__b { flex: 0 0 auto; min-width: 96px; height: 44px; border: 1px solid var(--line); border-radius: var(--rad-s); background: var(--surface); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .14s, background .14s, color .14s; } .yn__b:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } .yn__b.is-sel { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* рейтинг / звёзды */ .rate { display: flex; gap: 4px; } .rate__s { border: none; background: transparent; cursor: pointer; font-size: 28px; line-height: 1; color: color-mix(in srgb, var(--ink) 20%, transparent); transition: color .12s, transform .12s; padding: 0; } .rate__s:hover { transform: scale(1.12); } .rate__s.is-on { color: var(--ink); } /* динамические строки: ссылки / референсы / конкуренты */ .rows { display: flex; flex-direction: column; gap: 8px; } .lk-row, .ref-row, .comp-row { display: flex; align-items: center; gap: 8px; } .comp-row .fin:first-child { flex: 0 0 38%; } .ref-th { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--soft); display: flex; align-items: center; justify-content: center; } .ref-th img { width: 100%; height: 100%; object-fit: cover; } .rowx { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 13px; } .rowx:hover { border-color: #e7b4b4; color: #c0392b; background: #fdf3f3; } .addrow { align-self: flex-start; border: 1px dashed var(--line); background: var(--soft-2); color: var(--muted); border-radius: 8px; padding: 8px 13px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .addrow:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); color: var(--ink); } /* палитра / цвета */ .pal2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pal2__col { border: 1px solid var(--line); border-radius: var(--rad-s); padding: 12px; } .pal2__h { font-size: 13px; font-weight: 700; margin-bottom: 9px; color: var(--muted); } .pal2__sw { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; min-height: 36px; } .sw { position: relative; } .sw input[type=color] { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0; background: none; cursor: pointer; } .sw input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; } .sw input[type=color]::-webkit-color-swatch { border: none; border-radius: 6px; } .sw__x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 10px; line-height: 1; cursor: pointer; } .sw__x:hover { color: #c0392b; border-color: #e7b4b4; } /* приоритеты (ранжирование) */ .rankf { display: flex; flex-direction: column; gap: 8px; } .rankrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--rad-s); padding: 11px 12px; background: var(--surface); transition: border-color .14s, box-shadow .14s; } .rankrow.dragging { opacity: .5; border-color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.08); } .rankrow__h { cursor: grab; color: var(--muted); touch-action: none; font-size: 15px; user-select: none; } .rankrow__h:active { cursor: grabbing; } .rankrow__t { flex: 1; font-size: 15px; font-weight: 600; } .rankrow__btns { display: flex; gap: 5px; } .rankf__hint { font-size: 12px; color: var(--muted); margin-top: 2px; } /* контакты */ .cnt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cnt .fin { width: 100%; } /* note (заполнение) */ .fnote { border-left: 3px solid var(--ink); background: var(--soft-2); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 26px 0 4px; } .fnote__h { font-size: 16px; font-weight: 700; } .fnote__t { font-size: 14px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; } /* ============================================================ НОВЫЕ БЛОКИ — просмотр ответа (read-only) ============================================================ */ .ro-stars { color: var(--ink); letter-spacing: 1px; font-size: 16px; } .ro-stars__off { color: color-mix(in srgb, var(--ink) 20%, transparent); } .ro-rank { margin: 0; padding-left: 20px; } .ro-rank li { padding: 1px 0; } .ro-pal { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 3px 0; font-size: 13.5px; color: var(--muted); } .ro-sw { width: 22px; height: 22px; border-radius: 6px; display: inline-block; border: 1px solid rgba(0,0,0,.12); } .ro-cnt { font-size: 14.5px; padding: 1px 0; } .ro-cnt b { font-weight: 600; color: var(--ink); } .ro-refs { display: flex; flex-wrap: wrap; gap: 8px; } .ro-ref img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; } .ro-note { border-left: 3px solid var(--ink); padding: 6px 14px; margin: 8px 0; background: var(--soft-2); border-radius: 0 8px 8px 0; } .ro-note__h { font-weight: 700; } .ro-note__t { font-size: 13.5px; color: var(--muted); white-space: pre-wrap; } /* ============================================================ АДАПТИВ ============================================================ */ @media (max-width: 820px) { .wrap { grid-template-columns: 1fr; } .palette { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); display: block; } .palette__list { flex-direction: row; flex-wrap: wrap; } .pal { width: auto; flex: 1 1 150px; } .palette__hint { display: none; } .canvas { padding-top: 18px; } .topbar { padding: 0 14px; height: 56px; } .topbar__r .btn { padding: 0 11px; font-size: 13px; } .brand__sub { display: none; } .bx-main { padding-right: 0; } .bx-type { position: static; margin-bottom: 4px; } .pal2 { grid-template-columns: 1fr; } .cnt { grid-template-columns: 1fr; } } /* ============================================================ ЛОГОТИП ДИЗАЙНЕРА / ДИАПАЗОН ДАТ / ПЕРЕТАСКИВАНИЕ ПАЛИТРЫ ============================================================ */ .sheet__logo { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .logo-prev { width: 58px; height: 40px; flex: 0 0 58px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); display: flex; align-items: center; justify-content: center; overflow: hidden; } .logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-prev i { font-style: normal; font-size: 11px; color: var(--muted); } .sheet__logo-hint { font-size: 12px; color: var(--muted); } .sheet__theme { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .theme-color { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; } .theme-color input[type=color] { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: var(--surface); cursor: pointer; } .theme-bg { display: inline-flex; align-items: center; gap: 8px; } .bg-prev { width: 50px; height: 34px; flex: 0 0 50px; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); display: flex; align-items: center; justify-content: center; overflow: hidden; } .bg-prev img { width: 100%; height: 100%; object-fit: cover; } .bg-prev i { font-style: normal; font-size: 10px; color: var(--muted); } .btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; } .btn--sm input[type=file] { display: none; } .daterange { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .daterange .fin--date { max-width: 180px; } .daterange__sep { color: var(--muted); } .pal { touch-action: none; } /* ============================================================ ПАЛИТРА: СВОРАЧИВАНИЕ + ТУЛТИПЫ ============================================================ */ .palette__t { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pal-toggle { width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--muted); font-size: 12px; line-height: 1; } .pal-toggle:hover { background: var(--soft); border-color: color-mix(in srgb, var(--ink) 28%, transparent); color: var(--ink); } .wrap.is-palcollapsed { grid-template-columns: 72px 1fr; } .palette.is-collapsed { padding: 14px 9px; overflow: visible; } .palette.is-collapsed .palette__t { justify-content: center; margin-bottom: 12px; } .palette.is-collapsed .palette__hint { display: none; } .palette.is-collapsed .palette__list { gap: 6px; } .palette.is-collapsed .pal { justify-content: center; padding: 9px 0; position: relative; } .palette.is-collapsed .pal__tx { display: none; } .palette.is-collapsed .pal--sec { margin-top: 10px; } .palette.is-collapsed .pal::after { content: attr(data-tip); position: absolute; left: calc(100% + 11px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--bg); padding: 6px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 40; box-shadow: 0 6px 18px rgba(0,0,0,.18); } .palette.is-collapsed .pal::before { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: -1px; border: 6px solid transparent; border-right-color: var(--ink); opacity: 0; transition: opacity .12s; z-index: 40; } .palette.is-collapsed .pal:hover::after, .palette.is-collapsed .pal:hover::before { opacity: 1; } /* ============================================================ ДА/НЕТ ГРУППОЙ ============================================================ */ .yned { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; } .ynedrow { display: flex; align-items: center; gap: 8px; } .ynedrow input { flex: 1; border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 9px; font-size: 13.5px; outline: none; min-width: 0; } .ynedrow input:focus { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } .yn2 { display: flex; flex-direction: column; gap: 10px; } .yn2row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .yn2row:not(:last-child) { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); } .yn2q { font-size: 15px; font-weight: 500; flex: 1 1 auto; } .ro-yn li { padding: 1px 0; } /* ============================================================ ЛЕТЯЩИЙ КЛОН ПРИ ПЕРЕТАСКИВАНИИ ============================================================ */ .drag-ghost { position: fixed !important; left: 0; top: 0; z-index: 100; margin: 0 !important; pointer-events: none; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: var(--rad-s); box-shadow: 0 20px 44px rgba(0,0,0,.22); transform: rotate(-1.8deg) scale(1.02); opacity: .97; max-height: 240px; overflow: hidden; cursor: grabbing; } /* ============================================================ ЭТОТ ИЛИ ТОТ (пары) + ЗОЛОТОЙ ШАБЛОН ============================================================ */ .pairs { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; } .paired { display: grid; grid-template-columns: 18px 1fr auto 1fr 28px; gap: 9px; align-items: start; } .paired__n { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 10px; display: flex; align-items: center; justify-content: center; margin-top: 16px; } .pairside { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pairside .vopt__pic { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--soft); font-size: 18px; } .pairside .vopt__pic img { width: 100%; height: 100%; object-fit: cover; } .pairside input { border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 8px; font-size: 12.5px; outline: none; min-width: 0; } .pairside input:focus { border-color: color-mix(in srgb, var(--ink) 28%, transparent); } .paired__vs { align-self: center; color: var(--muted); font-size: 12px; margin-top: 16px; } .pairsf { display: flex; flex-direction: column; gap: 16px; } .pairrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } .pairrow__or { color: var(--muted); font-size: 13px; } .ptile { border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: var(--surface); cursor: pointer; padding: 0; text-align: left; transition: border-color .14s, box-shadow .14s, transform .12s; } .ptile:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); } .ptile .vtile__img { aspect-ratio: 4/3; background: var(--soft); display: block; } .ptile .vtile__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ptile .vtile__cap { display: block; padding: 8px 11px; font-size: 13px; font-weight: 600; } .ptile.is-sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); } .golden-btn { width: 100%; margin: 6px 0 4px; } .modal__sub { font-size: 12px; color: var(--muted); margin: 14px 0 8px; } /* ============================================================ ПЕЧАТЬ / PDF ============================================================ */ #print { display: none; } @media print { body { background: var(--surface); } body > #app, body > #modal, body > #toast { display: none !important; } body.is-printing > #print { display: block; } #print { padding: 0; } .ro--print { max-width: none; padding: 0; } .ro--print .ro-head h1 { font-size: 24px; } .ro--print .ro-sec { margin-top: 22px; break-inside: avoid; } .ro--print .ro-fl { break-inside: avoid; } a { color: #000; text-decoration: underline; } } /* ============================================================ КЛИЕНТСКАЯ СТРАНИЦА — РЕДИЗАЙН (в духе XMB-сайта) чинит: бренд-идентичность, иерархию, прогресс, закреплённый CTA ============================================================ */ /* Сцена-фон: два мягких свечения акцентом на почти пустом поле — как .bg-tint сайта. Подложка теперь на токенах, а не на захардкоженном #fcfcfc, иначе в тёмной теме получалась белая простыня под тёмным текстом. */ .fscene { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(115% 80% at 16% -8%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 58%), radial-gradient(120% 85% at 102% 4%, color-mix(in srgb, var(--tint) 18%, transparent), transparent 54%), var(--bg); transition: background .7s var(--ease); /* как .bg-tint сайта при смене проекта */ } .fbg::after { background: color-mix(in srgb, var(--bg) 78%, transparent); } .fillpage { max-width: 720px; padding: 0 clamp(18px, 5vw, 40px) 150px; } /* ВЕРХНЯЯ ПИЛЮЛЯ — перекликается с HUD сайта. Прогресс здесь СЕГМЕНТАМИ, а не сплошной полосой. Причина не вкусовая: в контролируемом эксперименте SurveyMonkey полоса прогресса СВЕРХУ ухудшала доходимость по сравнению с её отсутствием, а процентная шкала, ползущая в начале медленно, повышала отвал (Conrad & Couper: 19.9% против 11.3%). Дискретные сегменты «сколько глав из пяти» этой ловушки лишены — они читаются как место в оглавлении, а не как «сколько процентов осталось». */ .fbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; margin: 0 calc(-1 * clamp(18px, 5vw, 40px)); padding: 11px clamp(18px, 5vw, 40px); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(11px) saturate(1.3); -webkit-backdrop-filter: blur(11px) saturate(1.3); border-bottom: 1px solid var(--line-2); } .fbar__l { display: flex; align-items: center; gap: 9px; font-weight: var(--fw-med); font-size: var(--fz-sm); letter-spacing: -0.01em; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; } .fbar__l img { max-height: 22px; max-width: 116px; object-fit: contain; display: block; } .fbar__mid { flex: 1; min-width: 40px; } .fbar__track { display: flex; gap: 4px; height: 3px; } .fbar__track i { flex: 1; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); transition: background .25s var(--ease), box-shadow .25s var(--ease); } .fbar__track i.is-done { background: color-mix(in srgb, var(--accent) 46%, transparent); } .fbar__track i.is-active { background: var(--accent); box-shadow: 0 0 10px -1px rgba(var(--glow-rgb),.7); } /* Кнопка смены темы — как .hud__theme на сайте: солнце в светлой, луна в тёмной */ .fbar__thm { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--rad); background: transparent; color: var(--ink); cursor: pointer; position: relative; transition: border-color .16s var(--ease), background .16s var(--ease); } .fbar__thm::after { content: ""; position: absolute; inset: 50% auto auto 50%; /* тач-цель 44px */ width: var(--tap); height: var(--tap); transform: translate(-50%,-50%); } .fbar__thm svg { opacity: .8; } .fbar__thm:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); } .fbar__thm:hover svg { opacity: 1; } .fbar__thm:focus-visible { outline: none; box-shadow: var(--focus); } .fbar__thm .thm-moon { display: none; } .fbar__thm.is-on .thm-sun { display: none; } .fbar__thm.is-on .thm-moon { display: block; } /* Счётчик — служебный слой моноширинным, как в XMB-интерфейсе */ .fbar__r { font-size: var(--fz-sm); font-weight: var(--fw-reg); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ШАПКА. Вес 200 вместо 700: в портфолио вариативный Manrope тянется от 200, и лёгкий крупный текст — половина его характера. Бриф этот диапазон не использовал вообще, опираясь на 600–700, и потому выглядел плотнее сайта. */ .fillpage > .fhead { margin: 46px 0 6px; } .fhead__brand { margin-bottom: 24px; } .fhead__logo { max-height: 42px; max-width: 180px; } .fhead__name { font-size: var(--fz-md); font-weight: var(--fw-med); color: var(--muted); } /* Трекинг -0.03em. Был -0.05 — это ниже пола в -0.04, за которым буквы слипаются и крупный текст читается зажатым, а не «дизайнерским». Свечения на заголовках нет: оно осталось единственно как состояние фокуса. Декоративное свечение — ровно тот штамп, от которого уходим. */ .fhead h1 { font-size: clamp(34px, 6.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: var(--fw-thin); } /* Светлый текст на тёмном теряет воспринимаемый вес, и чинить это надо по трём осям сразу, а не одной. Раньше вес наоборот уводился вниз до 200, и в тёмной теме текст истончался до нечитаемости. */ :root[data-theme="dark"] .fhead h1 { font-weight: 300; letter-spacing: -0.022em; } :root[data-theme="dark"] .fl__lab { font-weight: 300; letter-spacing: -0.015em; line-height: 1.3; } :root[data-theme="dark"] .fin, :root[data-theme="dark"] .fhead p { font-weight: 400; } .fhead h1::after { content: ""; display: block; width: 40px; height: 2px; background: var(--accent); margin-top: 20px; } .fhead p { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 48ch; margin-top: 18px; font-weight: 300; } /* СЕКЦИЯ — глава. Номер моноширинным в служебном слое, а не белой цифрой в залитом квадрате: заливка возвращает вид «карточки», от которого уходим. */ .fsec { margin-top: 54px; } .fsec__t { display: flex; align-items: baseline; gap: 12px; font-size: var(--fz-sm); font-weight: var(--fw-med); letter-spacing: -0.01em; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--line-2); padding: 0 0 13px; margin-bottom: 4px; } .fsec__t span { width: auto; height: auto; flex: 0 0 auto; border-radius: 0; background: none; font-size: var(--fz-sm); font-weight: var(--fw-reg); color: var(--muted); letter-spacing: 0; } /* В режиме креста название главы несёт ось сверху, поэтому заголовок внутри секции — дубль. Убираем: подпись, повторяющая навигацию, это шум. */ .fillpage.is-cross .fsec__t { display: none; } /* ============================================================ КРЕСТ — каркас, а не отделка. Стекло, свечение заголовков и капсовые подписи отсюда УБРАНЫ намеренно. Разбор показал, что «тёмное + стекло + свечение» — предсказуемый ответ на запрос «консольное меню», а глассморфизм как материал всей страницы вообще числится в антипаттернах. Подпись портфолио не в поверхности: она в кресте, в волне, в пустоте и в движении по осям. Поверхность у сайта как раз тихая — белое, чернила, волосяные линии. Вся смелость потрачена в одном месте: переход между главами. ============================================================ */ /* Ось глав — горизонталь, как ряд категорий XMB. Это и есть навигация. */ .frail { display: flex; align-items: baseline; gap: clamp(16px, 2.6vw, 34px); overflow-x: auto; scrollbar-width: none; padding: 0 0 14px; border-bottom: 1px solid var(--line-2); margin: 0 0 clamp(26px, 5vh, 48px); } .frail::-webkit-scrollbar { display: none; } .frail button { flex: 0 0 auto; border: 0; background: none; padding: 4px 0; cursor: pointer; font-family: inherit; font-size: clamp(15px, 1.5vw, 18px); font-weight: 300; letter-spacing: -0.02em; color: var(--muted); white-space: nowrap; transition: color .2s var(--ease), font-weight .2s var(--ease); } .frail button:hover { color: var(--ink); } .frail button.is-on { color: var(--ink); font-weight: var(--fw-med); } .frail button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; } .frail button[disabled] { opacity: .38; cursor: default; } /* Одна глава на экран. Остальные не «display:none» через переход, а сразу скрыты: завязывать видимость на transition нельзя — на скрытых вкладках и в headless-рендере переход не срабатывает, и глава уезжает пустой. */ .fillpage.is-cross .fsec { display: none; margin: 0; } .fillpage.is-cross .fsec.is-active { display: block; } /* ЕДИНСТВЕННЫЙ эффект на странице: глава влетает сбоку, вопросы приходят ступенькой — ровно как колонки XMB на загрузке сайта. Направление задаёт JS через data-dir, чтобы «назад» ехало назад, а не всегда справа. */ @keyframes fsecInR { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } } @keyframes fsecInL { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } } @keyframes flIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .fillpage.is-cross .fsec.is-active { animation: fsecInR .34s var(--ease); } .fillpage.is-cross[data-dir="back"] .fsec.is-active { animation-name: fsecInL; } .fillpage.is-cross .fsec.is-active .fl { animation: flIn .34s var(--ease) backwards; } .fillpage.is-cross .fsec.is-active .fl:nth-child(1) { animation-delay: .05s; } .fillpage.is-cross .fsec.is-active .fl:nth-child(2) { animation-delay: .10s; } .fillpage.is-cross .fsec.is-active .fl:nth-child(3) { animation-delay: .15s; } .fillpage.is-cross .fsec.is-active .fl:nth-child(4) { animation-delay: .20s; } .fillpage.is-cross .fsec.is-active .fl:nth-child(n+5) { animation-delay: .24s; } /* ПОЛЕ. Ни рамок, ни заливок, ни теней — вопрос крупный и лёгкий, ответ пишется прямо в строку. Коробка вокруг поля мгновенно возвращает вид типовой формы, поэтому её здесь нет ни у одного элемента ввода. */ .fl { border: none; background: transparent; border-radius: 0; padding: 26px 0 0; margin: 0; } .fl + .fl { border-top: 1px solid var(--line-2); } .fl__h { margin-bottom: 14px; } .fl__lab { display: block; font-size: var(--fz-q); font-weight: var(--fw-thin); letter-spacing: -0.025em; line-height: 1.25; color: var(--ink); } .fl__help { font-size: var(--fz-xs); color: var(--muted); margin-top: 5px; } .fin { border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 8px 0; font-size: 15px; font-weight: 300; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } /* Фокус — свечением, а не рамкой. Это подпись XMB, и в брифе её не было. */ .fin:focus { outline: none; border-bottom-color: rgba(var(--glow-rgb),.9); box-shadow: 0 1px 12px -2px rgba(var(--glow-rgb),.55); } .fl.is-bad { box-shadow: none; } .fl.is-bad .fin { border-bottom-color: #c0392b; box-shadow: none; } .fl.is-bad .choices, .fl.is-bad .vgrid { border-color: #c0392b; } /* ВАРИАНТЫ — плашки-чипы. Высота держится не меньше тач-нормы: раньше часть целей была 18–34px, попасть пальцем в них было лотереей. */ /* flex-direction обязателен явно: ранний слой файла ставит column, и без перебивки чипы вытягивались в столбик во всю ширину. */ .choices { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; border: none; } .choice { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 10px 15px; border: 1px solid var(--line); border-radius: var(--rad); background: transparent; color: var(--muted); font-size: var(--fz-md); font-weight: var(--fw-reg); cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease); } .choice:hover { border-color: var(--ink); color: var(--ink); } .choice:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--bg); font-weight: var(--fw-med); box-shadow: 0 0 20px -4px rgba(var(--glow-rgb),.65); } /* Родная точка/галка не нужна — состояние несёт сама плашка */ .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice:focus-within { box-shadow: var(--focus); } .yn__b.is-sel { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 0 20px -4px rgba(var(--glow-rgb),.6); } .vtile.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px rgba(var(--glow-rgb),.75); } .vtile.is-sel .vtile__mk { background: var(--accent); color: var(--bg); } .ptile.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px rgba(var(--glow-rgb),.75); } .fnote { border-left-color: var(--accent); } /* ШКАЛА ХАРАКТЕРА — сегменты вместо ползунка. Ползунок убран доказательно: он даёт больше пропусков, дольше заполняется и повышает отвал, а тут ещё и дорожка была 4px, с полюсами по бокам, съедавшими 70% ширины экрана. Теперь полюса стоят НАД шкалой, а делений пять и каждое — полноценная тач-цель. */ /* .scale в раннем слое — flex-строка под старую раскладку «полюс — дорожка — полюс». Для сегментов нужен блок, иначе полюса и деления встают в одну строку и всё сжимается. */ .slfill { display: block; } .scale { display: block; margin: 0 0 22px; } .scale:last-child { margin-bottom: 0; } .segs { display: flex; flex-direction: row; gap: 5px; } .segs button { flex: 1; height: var(--tap); border: 1px solid var(--line); border-radius: var(--rad); background: transparent; color: color-mix(in srgb, var(--muted) 55%, transparent); font-size: var(--fz-sm); cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease); } .segs button:hover { border-color: var(--ink); color: var(--ink); } .segs button.is-sel { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; box-shadow: 0 0 22px -4px rgba(var(--glow-rgb),.7); } .segs button:focus-visible { outline: none; box-shadow: var(--focus); } .segpol { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fz-xs); color: var(--muted); margin-bottom: 8px; } /* НИЖНЯЯ ЗАКРЕП-ПАНЕЛЬ — CTA всегда под рукой */ .factions { position: sticky; bottom: 0; z-index: 18; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 36px calc(-1 * clamp(18px, 5vw, 40px)) 0; padding: 15px clamp(18px, 5vw, 40px); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(11px) saturate(1.2); -webkit-backdrop-filter: blur(11px) saturate(1.2); border-top: 1px solid var(--line-2); } /* «Назад» слева, «Дальше» справа — порядок движения по оси */ .factions #fback { order: 1; } .factions__note { order: 2; } .factions #fnext { order: 3; margin-left: auto; } @media (max-width: 560px) { .factions__note { order: 3; flex: 1 1 100%; } .factions #fnext { flex: 1 1 auto; } } #fillform > .factions > .btn--big { margin-top: 0; } .factions .btn--big { background: var(--accent); border-color: var(--accent); color: var(--bg); border-radius: var(--rad); letter-spacing: -0.02em; /* квадратная пилюля, как .card__view сайта */ box-shadow: 0 0 28px -8px rgba(var(--glow-rgb),.7); } .factions .btn--big:hover { background: var(--accent); transform: translateY(-1px); filter: none; } .factions__note { font-size: var(--fz-xs); color: var(--muted); line-height: 1.45; flex: 1 1 200px; } .ferr { font-weight: var(--fw-med); color: #c0392b; } @media (max-width: 560px) { .fbar__l { max-width: 50%; } .fhead h1 { font-size: clamp(28px, 8vw, 38px); } .factions { gap: 10px; } .factions .btn--big { flex: 1 1 100%; } } /* Блок «ВИЗАРД» (одна секция на экран) удалён вместе с мёртвым JS: разметка с кнопками #fnext/#fback никогда не рисовалась, класс is-wizard не вешался, то есть весь путь был недостижим. Возвращать его и не планируем — формат «один вопрос/шаг на экран» проиграл в юзабилити-тесте по всем метрикам (оценка удобства 57 против 76, ошибок 83 против 21). */ /* ============================================================ ПРОСМОТР ОТВЕТА — в языке сайта (редакционный документ, монохром + акцент) ============================================================ */ .topbar--view { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(11px) saturate(1.3); -webkit-backdrop-filter: blur(11px) saturate(1.3); border-bottom: 1px solid var(--line-2); } .topbar--view .brand { font-weight: var(--fw-bold); letter-spacing: -.01em; } .ro { padding: 46px clamp(18px,5vw,40px) 110px; } .ro-head h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.06; letter-spacing: -.04em; font-weight: var(--fw-thin); text-wrap: balance; } .ro-head h1::after { content: ""; display: block; width: 40px; height: 2px; background: var(--accent); margin-top: 18px; } .ro-by { color: var(--muted); margin-top: 16px; font-size: var(--fz-md); } .ro-sec { margin-top: 46px; } .ro-sec h2 { display: flex; align-items: baseline; gap: 12px; font-size: var(--fz-sm); font-weight: var(--fw-med); text-transform: none; letter-spacing: -.01em; color: var(--ink); padding-bottom: 13px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; } .ro-sec h2 span { width: auto; height: auto; flex: 0 0 auto; border-radius: 0; background: none; font-size: var(--fz-sm); font-weight: var(--fw-reg); color: var(--muted); letter-spacing: 0; } .ro-fl { gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line-2); } /* Вопрос в отчёте — моноширинным капсом: сразу отделяет вопрос от ответа без рамок и заливок, и держит тот же служебный слой, что счётчики. */ .ro-q { font-size: var(--fz-sm); font-weight: var(--fw-reg); color: var(--muted); } .ro-a { font-size: 16px; line-height: 1.55; color: var(--ink); font-weight: 300; } /* ============================================================ БРИФ КАК БЛАНК — анатомия печатной формы в языке портфолио. ------------------------------------------------------------ Разбор структуры бланков (накладная SAR, анкета Aldenaire, бланк заявки университета) дал приёмы, которых у нас не было: 1. ПАСПОРТ ДОКУМЕНТА сверху: что это, от кого, номер, дата — моно, капсом, по краям кадра. Бланк сообщает, что он такое, до первого вопроса. 2. ШИРИНА ПОЛЯ = ОЖИДАЕМАЯ ДЛИНА ОТВЕТА. Главное, что мы теряли: web-форма даёт всем полям одинаковую полную ширину и тем самым выбрасывает подсказку объёма. Название — короткое, описание — во всю строку, дата — узкая. 3. МАТРИЦА там, где много пунктов делят одну шкалу: полюса встают колонками, строки выравниваются между собой, и клиент сравнивает свои же ответы, чего в отдельных блоках не происходит. 4. ПЕРЕЧНИ В СТРОКУ, а не стопкой — всё меню видно разом. 5. НОТАЦИЯ: главы 01–06, вопросы 01.2 — чтобы на них ссылаться в переписке. 6. ИДЕНТИФИКАЦИЯ компактным блоком, а не главой на весь экран. Оформление при этом целиком из портфолио: состояние несёт свечение --glow-rgb, служебный слой моноширинный (как подсказки клавиш внизу сайта), структуру держат линейки, а не коробки, иерархия строится отношением размеров, как активный пункт XMB. ============================================================ */ .fillpage.is-page { max-width: 880px; margin: 0 auto clamp(40px, 8vh, 90px); padding: 0 clamp(16px, 4vw, 48px); position: relative; z-index: 2; counter-reset: chap; } /* ── ПАСПОРТ ДОКУМЕНТА ───────────────────────────────────────── */ .fillpage.is-page > .fbar { position: sticky; top: 0; z-index: 20; margin: 0 0 clamp(26px, 4vw, 44px); display: flex; align-items: center; gap: 14px; padding: 14px 0 12px; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(11px) saturate(1.2); -webkit-backdrop-filter: blur(11px) saturate(1.2); border: 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .fillpage.is-page .fbar__l { font: inherit; color: var(--ink); font-weight: 500; } .fillpage.is-page .fbar__l img { max-height: 22px; max-width: 130px; } .fillpage.is-page .fbar__mid { flex: 1; } .fillpage.is-page .fbar__r { font: inherit; color: var(--muted); } .fillpage.is-page .fbar__thm { width: 26px; height: 26px; flex: 0 0 26px; border-color: var(--line); } /* ── ШАПКА: тип документа и вступление ───────────────────────── */ .fillpage.is-page > .fhead { margin: 0 0 clamp(10px, 1.6vw, 16px); padding: 0; background: none; border: 0; } .fillpage.is-page .fhead__brand { margin-bottom: 20px; } .fillpage.is-page .fhead__logo { max-height: 44px; max-width: 180px; } .fillpage.is-page .fhead h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; } .fillpage.is-page .fhead h1::after { display: none; } .fillpage.is-page .fhead p { font-size: 15px; line-height: 1.6; margin-top: 14px; max-width: 54ch; color: var(--muted); font-weight: var(--fw-reg); } /* ── ГЛАВА — разделитель, а не карточка ──────────────────────── */ .fillpage.is-page form { counter-reset: none; } .fillpage.is-page .fsec { display: block; margin: 0; padding: clamp(30px, 4.6vw, 52px) 0 0; counter-increment: chap; counter-reset: qn; } .fillpage.is-page .fsec__t { display: flex; align-items: baseline; gap: 13px; margin: 0 0 clamp(4px, 1vw, 10px); padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--ink); font-size: clamp(19px, 2vw, 25px); font-weight: 700; letter-spacing: -.028em; line-height: 1.1; color: var(--ink); text-transform: none; } .fillpage.is-page .fsec__t span { flex: 0 0 auto; width: auto; height: auto; background: none; border-radius: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; color: rgb(var(--glow-rgb)); } /* ── ВОПРОС: нотация 01.2 в жёлобе, подпись обычным весом ────── */ .fillpage.is-page .fl { position: relative; counter-increment: qn; border: 0; background: none; padding: clamp(17px, 2vw, 23px) 0 0 clamp(38px, 4.2vw, 54px); } .fillpage.is-page .fl + .fl { border-top: 1px solid var(--line-2); } .fillpage.is-page .fl::before { content: counter(chap, decimal-leading-zero) "." counter(qn); position: absolute; left: 0; top: clamp(21px, 2.3vw, 27px); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; color: color-mix(in srgb, var(--muted) 66%, transparent); } .fillpage.is-page .fl__h { margin-bottom: 11px; } .fillpage.is-page .fl__lab, :root[data-theme="dark"] .fillpage.is-page .fl__lab { display: block; font-size: clamp(16px, 1.4vw, 18px); font-weight: var(--fw-med); letter-spacing: -.015em; line-height: 1.35; color: var(--ink); } .fillpage.is-page .fl__help { font-size: var(--fz-sm); margin-top: 5px; color: var(--muted); } /* ── ПОЛЕ: полоса-бланк, не коробка. Фокус — свечением XMB ───── */ .fillpage.is-page .fin, :root[data-theme="dark"] .fillpage.is-page .fin { font-size: 16px; font-weight: var(--fw-reg); padding: 11px 13px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 0; border-bottom: 1px solid var(--line); border-radius: 3px 3px 0 0; transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); } .fillpage.is-page .fin:focus { background: color-mix(in srgb, rgb(var(--glow-rgb)) 9%, transparent); border-bottom-color: rgb(var(--glow-rgb)); box-shadow: 0 2px 20px -10px rgba(var(--glow-rgb), .95); } /* ── ШИРИНА = ОЖИДАЕМАЯ ДЛИНА ОТВЕТА ─────────────────────────── */ .fillpage.is-page .fl[data-type="text"]:has(input.fin) .fin { max-width: 36ch; } .fillpage.is-page .fl[data-type="text"]:has(textarea.fin) .fin { max-width: none; } .fillpage.is-page .fl[data-type="date"] .fin { max-width: 17ch; } .fillpage.is-page .fl[data-type="links"] .fin { max-width: 48ch; } .fillpage.is-page .fl[data-type="links"] .lk-row { max-width: 56ch; } /* ── ИДЕНТИФИКАЦИЯ: компактный блок, а не глава на экран ─────── */ .fillpage.is-page .fl[data-type="contacts"] .cnt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-width: 56ch; } /* ── МАТРИЦА ХАРАКТЕРА: полюса колонками, строки выровнены ───── */ .fillpage.is-page .fl[data-type="sliders"] .slfill { display: block; } .fillpage.is-page .fl[data-type="sliders"] .scale { display: grid; grid-template-columns: minmax(84px, 17%) minmax(0, 1fr) minmax(84px, 17%); align-items: center; gap: clamp(10px, 1.6vw, 20px); margin: 0; padding: 8px 0; } .fillpage.is-page .fl[data-type="sliders"] .scale + .scale { border-top: 1px solid var(--line-2); } .fillpage.is-page .fl[data-type="sliders"] .segpol { display: contents; margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:first-child { grid-column: 1; grid-row: 1; line-height: 1.35; } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:last-child { grid-column: 3; grid-row: 1; line-height: 1.35; text-align: right; } .fillpage.is-page .fl[data-type="sliders"] .segs { grid-column: 2; grid-row: 1; gap: 4px; } .fillpage.is-page .fl[data-type="sliders"] .segs button { height: 40px; border-radius: 3px; font-size: 0; border-color: var(--line-2); background: color-mix(in srgb, var(--ink) 4%, transparent); } .fillpage.is-page .fl[data-type="sliders"] .segs button::after { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; margin: 0 auto; background: var(--ink); opacity: .34; transition: all .2s var(--ease); } .fillpage.is-page .fl[data-type="sliders"] .segs button:hover::after { opacity: .7; transform: scale(1.2); } .fillpage.is-page .fl[data-type="sliders"] .segs button.is-sel { background: color-mix(in srgb, rgb(var(--glow-rgb)) 12%, transparent); border-color: rgb(var(--glow-rgb)); box-shadow: 0 0 22px -8px rgba(var(--glow-rgb), .9); } .fillpage.is-page .fl[data-type="sliders"] .segs button.is-sel::after { width: 12px; height: 12px; opacity: 1; background: rgb(var(--glow-rgb)); box-shadow: 0 0 0 4px color-mix(in srgb, rgb(var(--glow-rgb)) 30%, transparent); } /* ── ПЕРЕЧНИ В СТРОКУ ────────────────────────────────────────── */ .fillpage.is-page .choices { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .fillpage.is-page .choice { border-radius: 20px; padding: 10px 16px; } /* ── ОТПРАВКА ────────────────────────────────────────────────── */ .fillpage.is-page > .factions { position: static; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: clamp(30px, 4vw, 48px) 0 0; padding: clamp(20px, 2.6vw, 28px) 0 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--ink); } .fillpage.is-page > .factions .btn--big { height: 52px; padding: 0 30px; font-size: 15px; border-radius: 4px; box-shadow: none; } .fillpage.is-page > .factions .factions__note { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.6; } .fillpage.is-page .ferr { margin: clamp(14px, 2vw, 20px) 0 0; } /* ── Телефон: матрица распускается, поля во всю ширину ───────── */ @media (max-width: 680px) { .fillpage.is-page .fl { padding-left: 30px; } .fillpage.is-page .fl[data-type="text"]:has(input.fin) .fin, .fillpage.is-page .fl[data-type="links"] .fin { max-width: none; } .fillpage.is-page .fl[data-type="contacts"] .cnt { grid-template-columns: minmax(0, 1fr); } .fillpage.is-page .fl[data-type="sliders"] .scale { grid-template-columns: minmax(0, 1fr); gap: 7px; } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:first-child, .fillpage.is-page .fl[data-type="sliders"] .segpol > span:last-child { grid-column: 1; text-align: left; } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:first-child { grid-row: 1; } .fillpage.is-page .fl[data-type="sliders"] .segs { grid-column: 1; grid-row: 2; } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:last-child { grid-row: 3; } } /* --- ЛИСТ И ПОЛЯ — исправление двух собственных регрессий ------------- 1. Переписывая слой на анатомию бланка, я снёс подложку вместе со старым слоем, и текст снова оказался прямо на волне. Возвращаю сплошной лист: на сайте текст всегда лежит на поверхности, волна идёт ЗА ней. 2. Поля были серыми залитыми плитами — приём бумажного бланка, взятый буквально. В языке портфолио заливок нет: там волосяная линия, прозрачность и свечение как состояние. Строка ответа снова строка, многострочное поле — рамка-волосок с тем же радиусом 5px, что у кнопок и HUD-пилюли сайта. Ощущение «пишешь на бланке» держит линейка под строкой, а не серый прямоугольник. */ .fillpage.is-page { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-top: clamp(14px, 3vh, 34px); padding: 0 clamp(20px, 4vw, 54px) clamp(30px, 4vw, 46px); } /* Липкая шапка живёт внутри листа и кроется его же поверхностью */ .fillpage.is-page > .fbar { margin: 0 calc(-1 * clamp(20px, 4vw, 54px)) clamp(26px, 4vw, 44px); padding: 14px clamp(20px, 4vw, 54px) 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); border-radius: 12px 12px 0 0; } /* Строка ответа — линейка, а не плита */ .fillpage.is-page .fin, :root[data-theme="dark"] .fillpage.is-page .fin { background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 0; padding: 10px 2px; } /* Многострочное — рамка-волосок и радиус сайта, без заливки */ .fillpage.is-page textarea.fin, :root[data-theme="dark"] .fillpage.is-page textarea.fin { border: 1px solid var(--line); border-radius: var(--rad); padding: 12px 14px; } .fillpage.is-page .fin:focus, :root[data-theme="dark"] .fillpage.is-page .fin:focus { background: transparent; border-color: rgb(var(--glow-rgb)); border-bottom-color: rgb(var(--glow-rgb)); box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--glow-rgb)) 15%, transparent); } /* Деления шкалы — тоже без серой заливки, только контур */ .fillpage.is-page .fl[data-type="sliders"] .segs button { background: transparent; border: 1px solid var(--line-2); } .fillpage.is-page .fl[data-type="sliders"] .segs button:hover { border-color: color-mix(in srgb, var(--ink) 34%, transparent); } .fillpage.is-page .fl[data-type="sliders"] .segs button.is-sel { background: color-mix(in srgb, rgb(var(--glow-rgb)) 10%, transparent); border-color: rgb(var(--glow-rgb)); } /* --- Зашитые светлые цвета на клиентской странице --------------------- Ранние слои файла держат цвета намертво (var(--surface), var(--muted), var(--surface-2)) — они писались, когда тёмной темы не было вовсе. На тёмном листе это даёт не «плоховато видно», а нечитаемое: замер показал у кнопки «＋ ещё ссылка» контраст 1.79:1, а у крестика — чисто белый фон. Это уже третий случай той же болезни (до этого «Назад» и ореол кнопки), поэтому чиню семейством, а не по одной кнопке. Правки нарочно ограничены .fillpage — конструктор трогать нельзя, он живёт своей вёрсткой. */ .fillpage .rowx { background: transparent; border: 1px solid var(--line); color: var(--muted); } .fillpage .rowx:hover { border-color: #c0392b; color: #c0392b; background: color-mix(in srgb, #c0392b 8%, transparent); } .fillpage .addrow, .fillpage .addopt { background: transparent; border: 1px dashed var(--line); color: var(--muted); border-radius: var(--rad); padding: 8px 13px; font-size: var(--fz-sm); } .fillpage .addrow:hover, .fillpage .addopt:hover { color: var(--ink); border-color: var(--ink); } .fillpage .choice:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .fillpage .choice:has(input:checked) { background: color-mix(in srgb, rgb(var(--glow-rgb)) 12%, transparent); border-color: rgb(var(--glow-rgb)); color: var(--ink); } /* Панель ошибки и подсветка незаполненного — тоже на токенах */ .fillpage .fl.is-bad .fin { border-bottom-color: #c0392b; } .fillpage .ferr { color: #c0392b; } /* ============================================================ ГРАФИК ЗАПОЛНЕНИЯ + КНОПКИ + СРОКИ И КОНТАКТЫ ------------------------------------------------------------ 1. График справа: стопка нитей, разгорающаяся снизу вверх, как волна на сайте. Не полоса процентов — та же графика, что фон портфолио, только работает измерителем. Меняется на каждом проценте. На узком экране прячется: место там дороже. 2. Кнопки-варианты были пилюлями с радиусом 20px — чужая геометрия. У сайта всё квадратное: HUD-пилюля 5px, кнопки 3-5px. Возвращаем радиус сайта и выравниваем высоту всех кнопок по 40px, чтобы ряд читался одной строкой, а не лесенкой. 3. Расстояния: между линейкой-разделителем и первой кнопкой воздуха не хватало, ряд лип к линии. Разведено. ============================================================ */ /* ── ГРАФИК ─────────────────────────────────────────────────── */ .fgauge { position: fixed; z-index: 5; right: clamp(14px, 3vw, 40px); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 16px; align-items: flex-start; pointer-events: none; user-select: none; } @media (min-width: 1180px) { .fgauge { display: flex; } } .fgauge__num { display: flex; align-items: baseline; gap: 3px; color: var(--ink); } .fgauge__num b { font-size: 34px; font-weight: 200; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .fgauge__num i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); } /* нити: 26 штук, как порядков у волны сайта */ .fgauge__bars { display: flex; flex-direction: column; gap: 4px; width: 60px; } .fgauge__bars span { display: block; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background .35s var(--ease), box-shadow .35s var(--ease), width .35s var(--ease); width: 34%; } .fgauge__bars span.is-on { width: 100%; background: rgb(var(--glow-rgb)); box-shadow: 0 0 10px -1px rgba(var(--glow-rgb), .8); } .fgauge__bars span.is-edge { width: 68%; background: color-mix(in srgb, rgb(var(--glow-rgb)) 55%, transparent); } .fgauge__chs { display: flex; flex-direction: column; gap: 7px; } .gch { display: flex; align-items: baseline; gap: 8px; max-width: 150px; } .gch i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: color-mix(in srgb, var(--muted) 60%, transparent); } .gch b { font-size: 11.5px; font-weight: var(--fw-reg); color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gch.is-part i, .gch.is-part b { color: var(--ink); } .gch.is-full i { color: rgb(var(--glow-rgb)); } .gch.is-full b { color: var(--ink); font-weight: var(--fw-med); } /* ── КНОПКИ: геометрия сайта, одна высота ───────────────────── */ .fillpage .choice, .fillpage .yn__b, .fillpage .addrow, .fillpage .addopt { min-height: 40px; border-radius: var(--rad); padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fz-md); line-height: 1; } .fillpage .choices { gap: 9px; margin-top: 2px; } /* выбранный — контур и подсветка, без тяжёлого ореола */ .fillpage .choice:has(input:checked) { box-shadow: none; } .fillpage .yn__b.is-sel { box-shadow: none; border-color: rgb(var(--glow-rgb)); background: color-mix(in srgb, rgb(var(--glow-rgb)) 12%, transparent); color: var(--ink); } /* воздух между линейкой-разделителем и рядом кнопок */ .fillpage.is-page .fl:has(.choices) .fl__h, .fillpage.is-page .fl:has(.yn2) .fl__h { margin-bottom: 14px; } .fillpage .rowx { min-height: 36px; width: 36px; border-radius: var(--rad); } /* ── СРОКИ: подписи над полями, а не два голых календаря ────── */ .fillpage .daterange { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-end; } .dr__f { display: flex; flex-direction: column; gap: 6px; } .dr__f > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .dr__f .fin--date { max-width: 17ch; } .dr__note { flex: 1 0 100%; margin: 2px 0 0; font-size: var(--fz-sm); color: var(--muted); line-height: 1.5; } /* ── КОНТАКТЫ: подписи над полями ───────────────────────────── */ .fillpage .cnt__f { display: flex; flex-direction: column; gap: 6px; } .fillpage .cnt__f > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* Геометрия кнопок: предыдущее правило .fillpage.is-page .choice било мой селектор по специфичности, и пилюля 20px оставалась. Пилюля — чужая геометрия: у сайта всё квадратное (HUD-пилюля 5px, кнопки 3-5px). */ .fillpage.is-page .choice, .fillpage.is-page .yn__b, .fillpage.is-page .addrow, .fillpage.is-page .addopt { border-radius: var(--rad); min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fz-md); line-height: 1; } .fillpage.is-page .choices { gap: 9px; } .fillpage.is-page .rowx { min-height: 36px; width: 36px; border-radius: var(--rad); } /* ============================================================ РУЧКА РЕСАЙЗА, КНОПКА И ПОДПИСЬ XMB ------------------------------------------------------------ 1. Диагональные насечки в правом нижнем углу многострочных полей — нативная ручка ресайза. Спрятать её нельзя, можно только выключить сам ресайз; чтобы поле при этом не жало текст, оно растёт само (autoGrow в js/brief.js). 2. Кнопка отправки была плитой во всю строку. У сайта кнопки другие: небольшие, с контуром, радиус 5px, заливка приходит на наведении вместе со свечением. Возвращаем эту грамматику. 3. Больше PS3: на сайте выбранный пункт меню помечает стрелка-курсор с градиентом, гаснущим к хвосту. Здесь она помечает вопрос, который заполняют сейчас, номер вопроса загорается акцентом, а подпись получает лёгкое свечение — ровно как активная строка XMB. ============================================================ */ /* 1. Поле растёт само, ручка не нужна */ .fillpage.is-page textarea.fin { resize: none; overflow: hidden; min-height: 56px; } /* 2. Кнопка отправки — геометрия и поведение кнопок сайта */ .fillpage.is-page > .factions .btn--big { height: 42px; padding: 0 22px; width: auto; font-size: var(--fz-md); font-weight: 600; border-radius: var(--rad); background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; transition: background .18s var(--ease), color .18s var(--ease), box-shadow .22s var(--ease); } .fillpage.is-page > .factions .btn--big:hover { background: var(--ink); color: var(--bg); box-shadow: 0 0 26px -6px rgba(var(--glow-rgb), .85); } .fillpage.is-page > .factions { gap: 20px; } /* 3. Стрелка-курсор XMB на активном вопросе */ .fillpage.is-page .fl { --gutter: clamp(38px, 4.2vw, 54px); padding-left: var(--gutter); } .fillpage.is-page .fl::after { content: ""; position: absolute; left: calc(var(--gutter) - 17px); top: clamp(21px, 2.3vw, 27px); width: 11px; height: 14px; clip-path: polygon(100% 50%, 0 0, 0 100%); background: linear-gradient(to left, var(--ink) 0%, color-mix(in srgb, var(--ink) 45%, transparent) 55%, transparent 100%); opacity: 0; transform: translateX(-5px); pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); } .fillpage.is-page .fl.is-focus::after { opacity: 1; transform: none; } .fillpage.is-page .fl.is-focus::before { color: rgb(var(--glow-rgb)); } .fillpage.is-page .fl.is-focus .fl__lab { text-shadow: 0 0 24px rgba(var(--glow-rgb), .32); transition: text-shadow .25s var(--ease); } /* ============================================================ КОНСТРУКТОР — цвета на токены. ------------------------------------------------------------ Ранние слои файла писались, когда тёмной темы не было вовсе, и держат цвета намертво. В тёмной теме это давало не «плоховато», а белые плашки с белым текстом. Замер контраста ДО правки: кнопка блока в палитре 1.19:1 плашка блока 1.19:1 вступление брифа 1.79:1 «＋ вариант» 2.59:1 «обяз.» 3.36:1 подсказка блока 4.31:1 Норма AA для мелкого текста — 4.5:1. Это только цвета: вёрстка конструктора остаётся прежней, её перестройка — отдельная работа, её нельзя делать вслепую. ============================================================ */ .pal, .bx-block, .bx-section, .tpl__open { background: var(--surface); color: var(--ink); } .pal:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); border-color: var(--line); } .bx-block:hover { border-color: color-mix(in srgb, var(--ink) 26%, transparent); } .bx-section.is-active { border-color: color-mix(in srgb, var(--ink) 30%, transparent); box-shadow: inset 3px 0 0 var(--ink); } .pal__ic { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } .pal__tx i { color: var(--muted); } .sheet__intro { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); border-color: var(--line); } .sheet__intro:focus { border-color: color-mix(in srgb, var(--ink) 34%, transparent); } .sheet__title, .sec__title, .bx-label { color: var(--ink); } .bx-help, .req, .mini, .addopt, .opt__mk, .bx-grip, .bx-type, .palette__hint, .palette__t { color: var(--muted); } .addopt:hover { color: var(--ink); } .opt__in, .vopt__f input, .slrow input, .ynedrow input, .ph, .note-ed, .sheet__designer input, .tg input { background: color-mix(in srgb, var(--ink) 4%, transparent); border-color: var(--line); color: var(--ink); } .opt__in:focus, .vopt__f input:focus, .slrow input:focus, .ynedrow input:focus, .ph:focus, .note-ed:focus, .sheet__designer input:focus { border-color: color-mix(in srgb, var(--ink) 36%, transparent); } .tg span { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); border-color: var(--line); } .ico { background: transparent; border-color: var(--line); color: var(--muted); } .ico:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--ink); color: var(--ink); } .vopt__pic, .logo-prev { background: color-mix(in srgb, var(--ink) 7%, transparent); border-color: var(--line); } .hintbox { background: color-mix(in srgb, var(--ink) 4%, transparent); border-color: var(--line); color: var(--muted); } .modal__box { background: var(--surface); color: var(--ink); border-color: var(--line); } .modal__link input, .returns__link input { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); border-color: var(--line); } .muted, .modal__sub { color: var(--muted); } .sec__head { background: color-mix(in srgb, var(--ink) 4%, transparent); border-color: var(--line-2); } .sec__empty { border-color: var(--line); color: var(--muted); } /* ============================================================ ШКАЛА ТОЧКАМИ, ТИШЕ КНОПКИ, НАТИВНЫЕ ЦВЕТА ------------------------------------------------------------ 1. Деления шкалы были рядом коробок с рамками — блок кнопок, выпадающий из строя волосяных линий. В референсе, с которого всё началось, это точки на одной нити. Коробки убраны: нить проходит насквозь, деления — точки, выбранное разгорается. 2. Кнопки-варианты и «＋ ещё» были обведены и штрихованы. Убираем обводку у «＋ ещё» совсем (это действие, а не объект) и делаем варианты тише: тоньше граница, меньше кегль. 3. Нативные контролы (календарь, скроллбар) рисовались браузером в светлой палитре поверх тёмной темы — отсюда белые иконки календаря. Лечится color-scheme на корне. ============================================================ */ /* 1. ШКАЛА — точки на нити, без коробок */ .fillpage.is-page .fl[data-type="sliders"] .segs { position: relative; gap: 0; } .fillpage.is-page .fl[data-type="sliders"] .segs::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: var(--line); pointer-events: none; } .fillpage.is-page .fl[data-type="sliders"] .segs button { border: 0; background: transparent; box-shadow: none; height: 44px; border-radius: 0; position: relative; } .fillpage.is-page .fl[data-type="sliders"] .segs button::after { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; margin: 0 auto; background: var(--ink); opacity: .38; transition: all .22s var(--ease); } .fillpage.is-page .fl[data-type="sliders"] .segs button:hover::after { opacity: .8; transform: scale(1.25); } .fillpage.is-page .fl[data-type="sliders"] .segs button.is-sel { background: transparent; border: 0; box-shadow: none; } .fillpage.is-page .fl[data-type="sliders"] .segs button.is-sel::after { width: 15px; height: 15px; opacity: 1; background: rgb(var(--glow-rgb)); box-shadow: 0 0 0 5px color-mix(in srgb, rgb(var(--glow-rgb)) 22%, transparent), 0 0 18px -2px rgba(var(--glow-rgb), .85); } /* 2. КНОПКИ ТИШЕ */ .fillpage.is-page .choice { min-height: 36px; padding: 0 14px; font-size: var(--fz-sm); font-weight: var(--fw-reg); border-color: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--muted); background: transparent; } .fillpage.is-page .choice:hover { border-color: color-mix(in srgb, var(--ink) 42%, transparent); color: var(--ink); background: transparent; } .fillpage.is-page .choice:has(input:checked) { border-color: rgb(var(--glow-rgb)); color: var(--ink); background: color-mix(in srgb, rgb(var(--glow-rgb)) 10%, transparent); font-weight: var(--fw-med); } .fillpage.is-page .choices { gap: 7px; } /* «＋ ещё» — это действие, а не объект: без рамки и штриховки */ .fillpage.is-page .addrow, .fillpage.is-page .addopt { border: 0; background: transparent; padding: 0; min-height: 30px; color: var(--muted); font-size: var(--fz-sm); font-weight: var(--fw-med); } .fillpage.is-page .addrow:hover, .fillpage.is-page .addopt:hover { color: rgb(var(--glow-rgb)); background: transparent; border: 0; } /* крестик строки — тоже тише */ .fillpage.is-page .rowx { border-color: color-mix(in srgb, var(--ink) 16%, transparent); color: color-mix(in srgb, var(--muted) 78%, transparent); } /* 3. НАТИВНЫЕ КОНТРОЛЫ В ТЕМУ */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } .fillpage.is-page .fin::placeholder { color: color-mix(in srgb, var(--muted) 62%, transparent); } /* Быстрый выбор срока — тихие текстовые кнопки рядом с календарём */ .fillpage.is-page .dr__quick { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; flex: 1 0 100%; } .fillpage.is-page .dr__quick button { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font); font-size: var(--fz-sm); color: var(--muted); border-bottom: 1px dashed color-mix(in srgb, var(--ink) 26%, transparent); transition: color .16s var(--ease), border-color .16s var(--ease); } .fillpage.is-page .dr__quick button:hover { color: var(--ink); border-bottom-color: var(--ink); } .fillpage.is-page .dr__quick button.is-sel { color: rgb(var(--glow-rgb)); border-bottom-color: rgb(var(--glow-rgb)); } /* ============================================================ ПАЛИТРА БЛОКОВ — меню, а не список коробок. Было: каждый пункт в рамке, иконка в серой плитке — коробки в коробках, ноль иерархии. У сайта меню устроено иначе: иконка стоит голой и разгорается на выборе, а активный пункт помечает стрелка-курсор с градиентом, гаснущим к хвосту. Та же грамматика, что уже стоит на вопросах клиентской страницы. Свёрнутый режим не трогаем: там ::before занят стрелкой тултипа. ============================================================ */ .palette__t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .palette:not(.is-collapsed) .palette__list { gap: 0; } .palette:not(.is-collapsed) .pal { border: 0; background: transparent; border-radius: 0; padding: 10px 8px 10px 21px; position: relative; transform: none; transition: background .16s var(--ease); } .palette:not(.is-collapsed) .pal + .pal { border-top: 1px solid var(--line-2); } .palette:not(.is-collapsed) .pal::before { content: ""; position: absolute; left: 4px; top: 50%; margin-top: -6px; width: 9px; height: 12px; clip-path: polygon(100% 50%, 0 0, 0 100%); background: linear-gradient(to left, var(--ink) 0%, color-mix(in srgb, var(--ink) 45%, transparent) 55%, transparent 100%); opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); } .palette:not(.is-collapsed) .pal:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); transform: none; } .palette:not(.is-collapsed) .pal:hover::before { opacity: 1; transform: none; } .palette:not(.is-collapsed) .pal__ic { background: transparent; width: 22px; height: 22px; flex: 0 0 22px; color: var(--muted); transition: color .16s var(--ease); } .palette:not(.is-collapsed) .pal:hover .pal__ic { color: rgb(var(--glow-rgb)); } .palette:not(.is-collapsed) .pal__tx b { font-size: 13.5px; font-weight: var(--fw-med); letter-spacing: -.01em; } .palette:not(.is-collapsed) .pal__tx i { font-size: 11px; color: var(--muted); } .palette:not(.is-collapsed) .pal--sec { margin-top: 14px; border-top: 1px solid var(--line); border-bottom: 0; padding-top: 14px; } .palette:not(.is-collapsed) .pal--sec .pal__ic { background: transparent; color: var(--ink); font-size: 16px; } .palette__hint { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; line-height: 1.7; } /* ============================================================ ВЕРХНЯЯ ПАНЕЛЬ — по образцу HUD сайта. Было: четыре одинаковые обведённые кнопки в ряд — интерфейс любой админки, узнаётся мгновенно. У портфолио на этом месте ОДНА пилюля с сегментами: контур 1px чернилами, радиус 5px, сегменты разделены вертикальными линейками того же цвета, активный залит чернилами (так устроен переключатель RU/EN). Переносим ровно это. Бренд слева уходит в служебный слой: имя обычным весом, приписка моношрифтом капсом — как подписи в HUD и подсказки клавиш внизу. ============================================================ */ .topbar { height: 52px; padding: 0 18px; } .topbar__l { align-items: baseline; gap: 9px; } .topbar .brand { font-size: 14px; font-weight: var(--fw-med); letter-spacing: -.01em; } .topbar .brand__sub { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* Пилюля действий */ .topbar__r { gap: 0; height: 30px; align-items: stretch; border: 1px solid var(--ink); border-radius: var(--rad); overflow: hidden; background: transparent; } .topbar__r .btn { height: auto; border: 0; border-radius: 0; background: transparent; padding: 0 14px; font-size: 12.5px; font-weight: var(--fw-med); letter-spacing: -.005em; color: var(--ink); transition: background .16s var(--ease), color .16s var(--ease); } .topbar__r .btn + .btn { border-left: 1px solid var(--ink); } .topbar__r .btn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); } /* Главное действие — залитый сегмент, как активный язык в HUD */ .topbar__r .btn--primary { background: var(--ink); color: var(--bg); } .topbar__r .btn--primary:hover { background: var(--ink); color: var(--bg); box-shadow: inset 0 0 24px -6px rgba(var(--glow-rgb), .9); } .topbar__r .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--glow-rgb)); } /* ============================================================ НЕПРОЗРАЧНЫЕ КАРТОЧКИ + БЕЗ ЖИВОГО ФОНА (по просьбе) ------------------------------------------------------------ 1. Волна убрана: за брифом она мешала читать и просвечивала сквозь полупрозрачные поля карточек. Фон — ровная поверхность. 2. Карточки и их внутренние поля переведены со сквозных color-mix(...transparent) на плотные токены, чтобы ничего не просвечивало ни в конструкторе, ни на клиентской странице. ============================================================ */ #wave { display: none; } body { background: var(--bg); } /* Секции и блоки — плотный лист */ .bx-section, .bx-block { background: var(--surface); } .sec__head { background: var(--surface-2); } .sec__empty { background: var(--surface); } /* Поля ввода внутри карточек — сплошная подложка, не просвет */ .opt__in, .vopt__f input, .slrow input, .ynedrow input, .ph, .note-ed, .sheet__intro, .sheet__designer input, .tg input, .bx-help, .bx-label { background: var(--surface-2); } .bx-help, .bx-label { background: transparent; } /* эти живут прямо на карточке, подложка не нужна */ .pal__ic, .vopt__pic, .logo-prev, .hintbox { background: var(--surface-2); } .tg span { background: var(--surface-2); } /* Клиентскую страницу здесь не заливаем: её лист и так сплошной (var(--surface)), волны за ним больше нет. Свой ровный бордюр поля клиентской страницы получают в слое правок ниже. */ /* ============================================================ КЛИЕНТСКИЙ ЛИСТ — правки арт-директора (7 пунктов). ------------------------------------------------------------ 1) стрелки у вопросов → убрать совсем 2) подсветка блока при вводе → снять ореол, тихий контур 3) ширина текстового поля → уже, читается как коробка 4) пустая верхняя панель → несёт удостоверение + счётчик (JS) 5) ширина поля ссылки → уже 6) торчащие линии у палитры → убрать ящики, столбцы в общий строй 7) блок «дата» → ровные поля-коробки, пресеты-чипы Приём общий: поле ответа = аккуратная коробка-волосок с радиусом сайта (5px); фокус меняет только цвет контура — без заливки, ореола и стрелок. Так исчезают разом и «торчащие линии», и «подсветка блока», а ширина поля читается намеренной, а не случайной. ============================================================ */ /* 1. Стрелка-курсор у вопроса — убрать; номер держим нейтральным */ .fillpage.is-page .fl::after { content: none; } .fillpage.is-page .fl.is-focus .fl__lab { text-shadow: none; } .fillpage.is-page .fl::before, .fillpage.is-page .fl.is-focus::before { color: color-mix(in srgb, var(--muted) 66%, transparent); } /* жёлоб больше не держит стрелку — только номер, поэтому уже */ .fillpage.is-page .fl { --gutter: clamp(30px, 3.4vw, 44px); } /* 2. Поле ответа — ровная коробка-волосок, фокус без ореола */ .fillpage.is-page .fin, :root[data-theme="dark"] .fillpage.is-page .fin { background: transparent; border: 1px solid var(--line); border-radius: var(--rad); padding: 10px 13px; } .fillpage.is-page .fin:focus, :root[data-theme="dark"] .fillpage.is-page .fin:focus { background: transparent; border-color: color-mix(in srgb, var(--ink) 48%, transparent); box-shadow: none; } /* Ширина полей — во всю ширину блока (по правке: узкие поля тянем как широкие текстовые). Дата остаётся компактной — это пикер, а не строка. */ .fillpage.is-page .fl[data-type="text"]:has(input.fin) .fin { max-width: none; } .fillpage.is-page .fl[data-type="text"]:has(textarea.fin) .fin { max-width: none; } .fillpage.is-page textarea.fin { max-width: none; } .fillpage.is-page .fl[data-type="links"] .fin { max-width: none; } .fillpage.is-page .fl[data-type="links"] .lk-row { max-width: none; } .fillpage.is-page .fl[data-type="budget"] .fin { max-width: none; } .fillpage.is-page .fl[data-type="date"] .fin, .fillpage.is-page .dr__f .fin--date { max-width: 20ch; } /* 4. Верхняя полоса: подпись счётчика в служебном моно-слое */ .fillpage.is-page .fbar__cap { color: var(--muted); } .fillpage.is-page .fbar__r { display: inline-flex; align-items: baseline; gap: 7px; } .fillpage.is-page #fcount { color: var(--ink); font-weight: 500; } /* 6. Палитра «нравится / бесит» — не два бордюрных ящика с торчащими линиями, а два столбца в общем строе: моно-заголовок, образцы в ряд, добавление — тихое действие */ .fillpage.is-page .pal2 { gap: clamp(18px, 3vw, 36px); } .fillpage.is-page .pal2__col { border: 1px solid var(--line); border-radius: var(--rad); padding: 12px 14px 10px; background: transparent; } .fillpage.is-page .pal2__h { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .fillpage.is-page .pal2__sw { min-height: 0; margin-bottom: 8px; } /* 7. Блок «дата»: ряд ровных полей, подписи моно-капсом, пресеты — тихие чипы (контур + радиус сайта), а не пунктирные ссылки */ .fillpage.is-page .daterange { align-items: flex-end; gap: 14px 22px; } .fillpage.is-page .dr__f > span, .fillpage.is-page .cnt__f > span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .fillpage.is-page .dr__quick { gap: 8px; margin-top: 4px; } .fillpage.is-page .dr__quick button { border: 1px solid var(--line); border-radius: var(--rad); padding: 7px 12px; font-family: var(--font); font-size: var(--fz-sm); color: var(--muted); background: transparent; transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease); } .fillpage.is-page .dr__quick button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 42%, transparent); background: transparent; } .fillpage.is-page .dr__quick button.is-sel { color: var(--ink); border-color: rgb(var(--glow-rgb)); background: color-mix(in srgb, rgb(var(--glow-rgb)) 10%, transparent); } .fillpage.is-page .dr__note { color: var(--muted); } /* ============================================================ ПРАВКИ ПО ФИДБЕКУ: точки вместо сегментов, номера в строку, заголовок меньше, верхняя полоса убрана, подсветка «вы здесь». ============================================================ */ /* ── ШКАЛА — снова ТОЧКИ, но оформленные аккуратно ────────────── По правке: «верни к точкам, просто оформи аккуратнее». Прежняя беда была в том, что нить шла сквозь всю строку и торчала за крайние точки. Теперь нить рисует КАЖДАЯ точка — отрезок к следующей (center→center), а у последней его нет. Значит линия живёт строго между первой и последней точкой и нигде не торчит. Полюса — над шкалой. */ .fillpage.is-page .fl[data-type="sliders"] .scale { display: block; grid-template-columns: none; padding: 10px 0 16px; } .fillpage.is-page .fl[data-type="sliders"] .segpol { display: flex; justify-content: space-between; gap: 14px; margin: 0 0 12px; font-family: var(--font); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.35; } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:first-child, .fillpage.is-page .fl[data-type="sliders"] .segpol > span:last-child { grid-column: auto; grid-row: auto; } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:last-child { text-align: right; } .fillpage.is-page .fl[data-type="sliders"] .segs { display: flex; gap: 0; position: relative; grid-column: auto; grid-row: auto; } .fillpage.is-page .fl[data-type="sliders"] .segs::before { content: none; } .fillpage.is-page .fl[data-type="sliders"] .segs button { flex: 1; height: 40px; position: relative; appearance: none; -webkit-appearance: none; border: 0; background: transparent; box-shadow: none; border-radius: 0; font-size: 0; cursor: pointer; } /* нить: от центра этой точки до центра следующей; у последней — нет */ .fillpage.is-page .fl[data-type="sliders"] .segs button:not(:last-child)::before { content: ""; position: absolute; left: 50%; right: -50%; top: 50%; height: 1px; background: var(--line); transform: translateY(-50%); pointer-events: none; } /* сама точка — одинаковая у всех, ровно по центру деления */ .fillpage.is-page .fl[data-type="sliders"] .segs button::after { content: ""; position: absolute; left: 50%; top: 50%; margin: 0; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--muted); opacity: 1; /* сплошной, не полупрозрачный */ transition: width .18s var(--ease), height .18s var(--ease), background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } /* ВАЖНО: transform обязан нести translate(-50%,-50%) в КАЖДОМ состоянии. Старые слои оставили :hover { transform: scale(1.25) } без сдвига — на ховере точка теряла центрирование и уезжала вбок. Возвращаем translate. */ .fillpage.is-page .fl[data-type="sliders"] .segs button:hover::after { background: var(--ink); opacity: 1; transform: translate(-50%, -50%) scale(1.15); } .fillpage.is-page .fl[data-type="sliders"] .segs button.is-sel::after { width: 14px; height: 14px; opacity: 1; background: rgb(var(--glow-rgb)); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px color-mix(in srgb, rgb(var(--glow-rgb)) 20%, transparent), 0 0 16px -2px rgba(var(--glow-rgb), .85); } /* ── ЦИФРА ГЛАВЫ — В СТРОКУ с заголовком ──────────────────────── По правке: «зачем цифры ушли выше заголовков» — вернуть на место. Моно, двузначная, выровнена по центру строки (не подстрочным индексом), спокойный вес. */ .fillpage.is-page .fsec__t { flex-direction: row; align-items: center; gap: 11px; } .fillpage.is-page .fsec__t span { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: none; color: color-mix(in srgb, var(--muted) 88%, transparent); } /* ── ЗАГОЛОВОК ЛИСТА — меньше, строка описания уже ────────────── По правке: заголовок был крупноват и спорил с верхней полосой. Полоса убрана, заголовок остаётся один и в меру. */ .fillpage.is-page .fhead h1 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; } .fillpage.is-page .fhead p { max-width: 48ch; } /* ── ВЕРХНЯЯ ПОЛОСА УБРАНА ────────────────────────────────────── Дублировала и название (с большим заголовком), и прогресс (со шкалой сбоку). Тему переключает маленькая кнопка в углу листа; листу возвращаем поле сверху, которое раньше держала полоса. */ .fillpage.is-page { padding-top: clamp(26px, 4vw, 44px); } .fillpage.is-page .fthm { position: absolute; top: clamp(16px, 2.4vw, 22px); right: clamp(16px, 3vw, 26px); z-index: 20; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--rad); background: transparent; color: var(--muted); cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease); } .fillpage.is-page .fthm:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 40%, transparent); } /* ── ОГЛАВЛЕНИЕ СБОКУ — «вы здесь», без подсветки по заполненности ─ По правке: один пункт светился «непонятно почему» (он был частично заполнен). Убираем это; подсвечиваем только текущую по прокрутке. */ .gch.is-part i, .gch.is-part b, .gch.is-full i, .gch.is-full b { color: var(--muted); font-weight: var(--fw-reg); } .gch.is-cur i { color: rgb(var(--glow-rgb)); } .gch.is-cur b { color: var(--ink); font-weight: var(--fw-med); } /* ============================================================ КАТЕГОРИИ — номер в квадрате, блоки разделены, внутри без линий. ------------------------------------------------------------ По правке: нумерацию категорий обвести в квадрат — ровно как кнопку переключения темы (контур 1px, радиус 5px, 30×30); блоки категорий разделить аккуратно одной линией; убрать разделители между вопросами ВНУТРИ категории. Нотация вопросов (01.1 в жёлобе) не трогается — квадрат только у номера категории. ============================================================ */ /* Номер категории — в обведённом квадрате, как кнопка темы */ .fillpage.is-page .fsec__t { align-items: center; gap: 13px; border-bottom: 0; padding-bottom: 0; } .fillpage.is-page .fsec__t span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--rad); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); } /* Блоки категорий — разделены одной чистой линией + воздухом; прежний жирный подчёрк под заголовком снят, чтобы не двоить линии */ .fillpage.is-page .fsec { border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 46px); } /* Внутри категории между вопросами разделителей нет — только воздух */ .fillpage.is-page .fl + .fl { border-top: 0; } /* ============================================================ БЛОКИ КАТЕГОРИЙ — отдельные карточки на общем фоне. ------------------------------------------------------------ По правке: разделить категории на конкретные блоки (О компании, Аудитория, …), но тем же фоном — НЕ единым полотном. Лист перестаёт быть одной подложкой: фон уходит на страницу, а шапка и каждая глава становятся своей карточкой того же цвета, разделённой воздухом. Квадрат номера встаёт в колонку нотации — левым краем и шириной как номера вопросов под ним; ведущий ноль в нумерации убран. ============================================================ */ /* Контейнер — не подложка, а колонка; фон виден за карточками */ .fillpage.is-page { --gutter: 30px; background: transparent; border: 0; border-radius: 0; padding: clamp(8px, 1.6vw, 16px) clamp(14px, 4vw, 46px) clamp(40px, 8vh, 90px); } /* Шапка и каждая глава — отдельные карточки того же цвета */ .fillpage.is-page .fhead, .fillpage.is-page .fsec { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px); margin: 0 0 clamp(12px, 1.8vw, 18px); } .fillpage.is-page .fhead { position: relative; } .fillpage.is-page .fhead h1 { padding-right: 42px; } /* место под кнопку темы в углу */ /* Квадрат номера категории — в колонке нотации: левый край и ширина как у номеров вопросов, тот же контур/радиус, что у кнопки темы */ .fillpage.is-page .fsec__t { display: flex; flex-direction: row; align-items: center; gap: 12px; padding-left: 0; min-height: 30px; } .fillpage.is-page .fsec__t span { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--gutter); height: var(--gutter); border: 1px solid var(--line); border-radius: var(--rad); font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); text-transform: none; } /* Ведущий ноль убран: категории «1…9», вопросы «1.1» */ .fillpage.is-page .fl { --gutter: 30px; } .fillpage.is-page .fl::before { content: counter(chap) "." counter(qn); } /* Отправка — без верхней линии-подложки, просто под блоками */ .fillpage.is-page > .factions { border-top: 0; padding-top: clamp(6px, 1vw, 12px); margin-top: clamp(4px, 1vw, 10px); } /* ============================================================ РЕФЕРЕНСЫ — загрузка файлов/скринов + ссылки. ------------------------------------------------------------ По правке: к референсам добавить загрузку небольших файлов/скринов. Без бэкенда: файл сжимается в JPEG-превью (data-URL) и уходит прямо в ответ; ссылка остаётся запасным путём. ============================================================ */ .fillpage.is-page .fl[data-type="refs"] .fin { max-width: none; } .fillpage.is-page .fl[data-type="refs"] .rows { display: flex; flex-direction: column; gap: 10px; } .fillpage.is-page .fl[data-type="refs"] .ref-row { display: flex; align-items: center; gap: 8px; } .fillpage.is-page .fl[data-type="refs"] .ref-row .fin { flex: 1; } .fillpage.is-page .fl[data-type="refs"] .addrow { align-self: flex-start; } /* Загруженные превью */ .fillpage.is-page .ref-imgs { display: flex; flex-wrap: wrap; gap: 10px; } .fillpage.is-page .ref-imgs:empty { display: none; } .fillpage.is-page .ref-th2 { position: relative; width: 96px; height: 96px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: var(--surface-2); } .fillpage.is-page .ref-th2 img { width: 100%; height: 100%; object-fit: cover; display: block; } .fillpage.is-page .ref-th2__x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; min-height: 0; border-radius: 50%; border: 1px solid var(--line); padding: 0; background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--ink); font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Кнопка загрузки — пунктирная зона, тихое действие */ .fillpage.is-page .ref-upl { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: var(--rad); padding: 10px 16px; color: var(--muted); font-size: var(--fz-sm); font-weight: var(--fw-med); transition: color .16s var(--ease), border-color .16s var(--ease); } .fillpage.is-page .ref-upl:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 50%, transparent); } .fillpage.is-page .ref-or { font-size: var(--fz-sm); color: var(--muted); margin: 0; } .fillpage.is-page .ref-lim { font-size: var(--fz-sm); color: #c0392b; } /* ============================================================ ВЫРАВНИВАНИЕ И ШИРИНЫ (по правке): 1) подномера вопросов — под квадрат номера категории; 2) контакты — во всю ширину блока; 3) однострочный свободный текст — уже. ============================================================ */ /* 1. «1.1/1.2» центрируем в жёлобе — под цифрой квадрата (у неё тоже по центру), а не прижатыми к левому краю, откуда «вышли за квадрат» */ .fillpage.is-page .fl::before { width: var(--gutter); text-align: center; } /* 2. Контакты — во всю ширину блока, как текстовые поля (был max-width 56ch, оттого блок «сдвинут влево» с пустотой справа) */ .fillpage.is-page .fl[data-type="contacts"] .cnt { max-width: none; } /* 3. Однострочные текстовые поля — уже: свободный ответ в одну строку не нужен во всю ширину. Многострочные, ссылки и контакты остаются широкими */ .fillpage.is-page .fl[data-type="text"]:has(input.fin) .fin { max-width: 48ch; } .fillpage.is-page .fl[data-type="budget"] .fin { max-width: 26ch; } /* ============================================================ ВЫРАВНИВАНИЕ ТЕКСТА + ПОЛЮСА ШКАЛЫ ПО БОКАМ (по правке). ============================================================ */ /* 1. Левый край текста вопроса = левый край текста заголовка категории. Категория: [квадрат 30][gap 12][заголовок]. Вопрос теперь тоже [номер в колонке 30][gap 12][текст]. Номер остаётся в своей колонке шириной с квадрат (::before width = var(--gutter)); текст сдвигается на квадрат+gap, совпадая с заголовком. */ .fillpage.is-page .fl { padding-left: calc(var(--gutter) + 12px); } /* 2. Шкала: подписи-полюса СЛЕВА и СПРАВА от точек. Колонки полюсов — фиксированной доли (minmax 80px/19%), поэтому средняя колонка с точками ВСЕГДА одной ширины, как бы ни были длинны подписи. */ .fillpage.is-page .fl[data-type="sliders"] .scale { display: grid; grid-template-columns: minmax(80px, 19%) minmax(0, 1fr) minmax(80px, 19%); align-items: center; column-gap: clamp(12px, 2vw, 22px); padding: 6px 0 12px; } .fillpage.is-page .fl[data-type="sliders"] .segpol { display: contents; font-family: var(--font); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.3; } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:first-child { grid-column: 1; grid-row: auto; text-align: left; color: var(--muted); } .fillpage.is-page .fl[data-type="sliders"] .segpol > span:last-child { grid-column: 3; grid-row: auto; text-align: right; color: var(--muted); } .fillpage.is-page .fl[data-type="sliders"] .segs { grid-column: 2; grid-row: auto; margin: 0; } /* Узкий экран: по бокам не помещается — полюса встают над точками */ @media (max-width: 600px) { .fillpage.is-page .fl[data-type="sliders"] .scale { display: block; padding: 6px 0 14px; } .fillpage.is-page .fl[data-type="sliders"] .segpol { display: flex; justify-content: space-between; gap: 14px; margin: 0 0 10px; } .fillpage.is-page .fl[data-type="sliders"] .segs { grid-column: auto; } } /* ============================================================ ШИРИНА ПОЛЕЙ ПО СТРОКЕ-ССЫЛКЕ, КНОПКИ УЖЕ, ИКОНКА ТЕМЫ (по правке). ============================================================ */ /* 3. Крестики-удаления уже (36 → 30px) */ .fillpage .rowx { width: 30px; min-height: 30px; flex: 0 0 30px; } /* 1. Однострочный текст (и бюджет — он тоже type=text) шириной как поле- ссылка: кончается там же, где крестик, т.е. 100% − крестик(30) − зазор(8) */ .fillpage.is-page .fl[data-type="text"]:has(input.fin) .fin { max-width: calc(100% - 38px); } /* 2. Даты — поля во всю доступную ширину (тоже как текст), пресеты уходят на свою строку под полями */ .fillpage.is-page .fl[data-type="date"] .dr__f { flex: 1 1 0; min-width: 130px; } .fillpage.is-page .fl[data-type="date"] .fin--date { max-width: none; width: 100%; } .fillpage.is-page .fl[data-type="date"] .dr__quick { flex-basis: 100%; } /* 4. Кнопки-варианты — уже (меньше горизонтального поля, высоту не трогаем) */ .fillpage.is-page .choice { padding-inline: 13px; } /* 5. Иконка смены темы — как в HUD портфолио. Правила показа солнца/луны были на старом классе .fbar__thm (кнопка теперь .fthm), из-за чего показывались ОБЕ иконки разом. Переносим на .fthm: светлая тема — солнце, тёмная (.is-on) — луна. */ .fillpage.is-page .fthm .thm-moon { display: none; } .fillpage.is-page .fthm.is-on .thm-sun { display: none; } .fillpage.is-page .fthm.is-on .thm-moon { display: block; }