/* ОСНОВА: материал, цвет, шрифт. Каркас — в каркас.css, компоновка — в оболочка.css, детали — в части.css, небо — в звёзды.css. ═══ ИЗ ЧЕГО СДЕЛАНО ПРИЛОЖЕНИЕ ═══ Одна мысль, из которой выведено всё остальное: НОЧНОЕ НЕБО, А ПОВЕРХ НЕГО СТРАНИЦЫ ПЕРГАМЕНТА С ЗОЛОЧЁНЫМ ОБРЕЗОМ. Не «карточки на картинке», а вещь из двух материалов. Отсюда каждое решение ниже: — Пергамент тёплый (#F7EFE0), а не белый и не голубой. Тёплое на холодном ночном — это свеча в тёмной комнате. Холодная панель на холодном небе выглядит вставкой из чужого макета. — Надписи на пергаменте цвета сепии с золотом (#3B2C10). Это не «тёмно-серый», это чернила: тёплые, как сама страница. — Золото здесь не цвет, а фольга. Поэтому у него всегда есть блик: заголовок залит растяжкой от светлой фольги к глубокому золоту, у кнопки сверху светлая грань, у каждой страницы слева золочёный обрез, гаснущий книзу. — ЗОЛОЧЁНЫЙ ОБРЕЗ — примета всего приложения. Полоска слева у каждой страницы, яркая вверху и сходящая на нет внизу: так ловит свет позолота на срезе книжного блока. Она стоит на кнопках, карточках, полях, вести — и связывает их в один предмет крепче любого цвета. — Значки все одного золота, разной формы. Шесть разных цветов на одном экране — конфетти, а не набор. Раздел узнаётся по рисунку значка, и экран остаётся спокойным. ┌─ роль ──────────────────┬─ цвет ───┬────────────────────────┐ │ край неба │ #060B14 │ ночь │ │ небо, где идёт текст │ #0E1B2E │ полночь │ │ светлое пятно вверху │ #1E4A78 │ сумерки, под заголовком│ │ страницы │ #F7EFE0 │ пергамент │ │ надписи на страницах │ #3B2C10 │ сепия │ │ подписи на страницах │ #7A6437 │ сепия светлее │ │ золото │ #C9A24A │ метки, отметки, обрез │ │ фольга │ #F2DCA4 │ блик, заголовок │ │ текст поверх неба │ #E8EEF6 │ лёд │ └─────────────────────────┴──────────┴────────────────────────┘ ПРО ЯРКОСТЬ ПЯТНА. Светлое пятно неба поднято под шапку и заголовок: заголовок крупный и золотой, ему хватает 3 к 1. Ниже, где идёт текст, небо уже глубокое — там буквы держат 13 к 1. Проверка в конце `проверка-приложения.mjs` мерит каждый цвет против той поверхности, на которой он лежит на самом деле. ШРИФТЫ. Cormorant — заголовки и числа: у него узкая, чуть старинная форма, от которой цифра «21» выглядит выгравированной, а не набранной. Manrope — всё остальное: текст, кнопки, подписи. Пара взята с сайта автора, чтобы приложение и сайт были одним делом, а не двумя разными. */ :root{ /* ── небо ── */ --край:#060B14; --фон-ярчайший:#1E4A78; /* пятно под шапкой и заголовком */ --фон-2:#123458; --фон-читаемый:#0E1B2E; /* здесь идёт текст поверх неба */ --фон-4:#0A121F; /* ── пергамент: всё, что лежит поверх неба ── */ --лист:rgba(247,239,224,.95); --лист-нажат:#FFFAF0; --лист-плотный:#F7EFE0; --лист-край:rgba(59,44,16,.16); /* хайрлайн по краю страницы */ --на-светлом:#3B2C10; /* чернила */ --на-светлом-тихое:#7A6437; --нить-светлая:rgba(59,44,16,.16); /* ── золото ── */ --награда:#C9A24A; --награда-ярче:#F2DCA4; /* фольга */ --награда-глубже:#8C6B2A; --награда-тихий:rgba(201,162,74,.14); --фольга:linear-gradient(150deg, #F7E7BC 0%, #E3C583 26%, #C9A24A 52%, #EBD59C 74%, #B98F35 100%); /* ── текст поверх самого неба ── */ --письмо:#E8EEF6; --подпись:#C9A24A; --тихое:#93A6BB; --нить:rgba(201,162,74,.32); --нить-едва:rgba(232,238,246,.16); /* Шесть разделов одним золотом: значки различаются формой, а не цветом. Оттенки оставлены как точки настройки — если когда-нибудь понадобится развести разделы по теплоте, менять надо здесь, и нигде больше. */ --шампань:#8C6B2A; --шампань-фон:rgba(201,162,74,.13); --шампань-край:rgba(201,162,74,.34); --персик:#8C6B2A; --персик-фон:rgba(201,162,74,.13); --персик-край:rgba(201,162,74,.34); --мята:#8C6B2A; --мята-фон:rgba(201,162,74,.13); --мята-край:rgba(201,162,74,.34); --лаванда:#8C6B2A; --лаванда-фон:rgba(201,162,74,.13); --лаванда-край:rgba(201,162,74,.34); --небо:#8C6B2A; --небо-фон:rgba(201,162,74,.13); --небо-край:rgba(201,162,74,.34); --туман:#7A6437; --туман-фон:rgba(122,100,55,.10); --туман-край:rgba(122,100,55,.26); /* Тень длинная и тёплая, с золотым свечением у самого края: страница лежит на небе, а не наклеена на него */ --тень:0 18px 40px -18px rgba(3,7,14,.85), 0 2px 10px rgba(3,7,14,.45), 0 0 0 .5px rgba(201,162,74,.20); --тень-мягкая:0 10px 26px -14px rgba(3,7,14,.7), 0 0 0 .5px rgba(201,162,74,.16); /* ── размеры ── Шаг 4px, всё кратно. Скругление одно на всё, кроме кнопки: разнобой радиусов — первое, от чего интерфейс выглядит собранным наспех. */ --поле:22px; --скругление:22px; --скругление-кнопки:999px; --касание:52px; --переход:280ms; --плавно:cubic-bezier(.22,.61,.36,1); } *{margin:0;padding:0;box-sizing:border-box} /* Правило с display:block перебивает встроенное правило браузера для скрытых элементов. Без этой строки атрибут hidden не работает. */ [hidden]{display:none!important} html{ background:var(--край); /* Горизонтальной прокрутки в приложении быть не должно ни на одном экране */ overflow-x:hidden; -webkit-text-size-adjust:100%; } body{ /* Тьма по краям, светлое голубое пятно посередине. Ярче --фон-ярчайший середина не становится: на светлее буквы плывут. Ощущение «светло-светло-голубого» добирает свечение из css/звёзды.css, поверх этой заливки. */ background: radial-gradient(118% 74% at 50% 11%, var(--фон-ярчайший) 0%, var(--фон-2) 15%, var(--фон-читаемый) 34%, var(--фон-4) 62%, var(--край) 100%); background-attachment:fixed; background-repeat:no-repeat; color:var(--письмо); font-family:"Manrope",-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.72; letter-spacing:.002em; min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased; /* Выделение текста двойным нажатием мешает: приложение листают пальцем. Поля ввода исключены ниже. */ -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } textarea,input{-webkit-user-select:text;user-select:text} /* --- ТИПОГРАФИКА --- Шкала: 40 / 26 / 16 / 14. Четыре размера на всё приложение — пятый появляется там, где не додумали иерархию. */ /* Метка над заголовком: где мы находимся. Прописные в разрядку, золотом. Она не украшение: на экране без неё человек не понимает, куда попал, пока не дочитает заголовок. */ .метка{ font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif; font-size:14px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--подпись); line-height:1.35; } /* Заголовок экрана залит фольгой: растяжка от светлого золота к глубокому, обрезанная по буквам. Плоское золото выглядит краской, растяжка — металлом, который ловит свет. */ h1{ font-family:"Cormorant",Georgia,serif; font-size:clamp(34px, 10.5vw, 44px); line-height:1.02; font-weight:500; letter-spacing:.005em; margin:16px 0 18px; background:var(--фольга); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* Если браузер не умеет обрезать фон по буквам — а старый вебвью не умеет, — заголовок остаётся просто золотым, а не пропадает */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ h1{ background:none; color:var(--награда-ярче); -webkit-text-fill-color:currentColor; } } h1 i{display:block;font-style:italic;font-weight:400} /* Второй уровень: вопрос теста, заголовок задания, название теста. Cormorant и здесь — он держит длинную строку лучше гротеска и не спорит с заголовком, потому что мельче и не золотой. */ h2{ font-family:"Cormorant",Georgia,serif; font-size:26px; line-height:1.16; font-weight:600; letter-spacing:.004em; color:var(--письмо); margin:0 0 14px; } p{margin:0 0 16px} p:last-child{margin-bottom:0} b{font-weight:700} /* Пояснение под вопросом, подсказка про диктовку, счётчик шагов */ .тише{ font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif; font-size:14px; line-height:1.5; color:var(--тихое); } /* Внутри страниц пергамента тихий текст тоже сепия: ледяной на пергаменте не виден вовсе */ .крупная .тише,.карточка .тише,.тест-строка .тише, .весть .тише,.счёт .тише{color:var(--на-светлом-тихое)} /* Видимая рамка при ходьбе по приложению клавиатурой */ :focus-visible{outline:2px solid var(--награда-ярче);outline-offset:3px}