/* ============================================================ * ОБЩЕЕ ОСНОВАНИЕ ВИТРИНЫ: шрифты и палитра. * * Вынесено из index.html 18.08, когда страниц стало больше одной * (появились вход и регистрация). Шрифт объявляется в каждом документе * заново, а цвет продукта должен меняться в одном месте — иначе вход * рано или поздно окажется другого оттенка, чем главная. * * Здесь только основание. Вёрстка у каждой страницы своя: у главной * длинная, с заливками и обводками, у входа — одна форма. * ============================================================ */ /* ============================================================ * Шрифты лежат рядом, а не тянутся со шрифтового сервиса: лишний * внешний запрос — это и задержка, и адрес каждого посетителя, * уехавший третьей стороне. Оба под лицензией OFL, см. fonts/README.md. * * Literata рисовалась для чтения с экрана — ей и набраны заголовки * в продукте про чтение. Golos Text — кириллица родная, не «латиница * с дорисованными буквами»: у «д», «з», «щ» нормальные формы. * * Подмножества раздельные: латиница нужна не ради латинских слов, * а ради кавычек-ёлочек, тире и многоточия — они лежат именно там. * ============================================================ */ @font-face { font-family: 'Golos Text'; src: url('/fonts/golos-text-cyrillic.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Golos Text'; src: url('/fonts/golos-text-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FFFD; } @font-face { font-family: 'Literata'; src: url('/fonts/literata-cyrillic.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Literata'; src: url('/fonts/literata-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FFFD; } /* ============================================================ * Палитра. Сиреневый здесь не украшение, а цвет продукта: тот же, * что в приложении (#7c5cbf), — витрина и занятие должны выглядеть * одним и тем же, а не двумя разными сайтами. Нейтральные тона уведены * в сиреневую сторону: чистый серый рядом с сиреневым читается грязным. * * Второй цвет — тёплая охра (введена 18.08). До неё страница держалась * одним сиреневым и разной его плотностью — честно, но глазу не за что * зацепиться. Медовый пробовали раньше и сняли: он стоял на крупном «141» * и рядом с сиреневым читался чужеродным (замечание 17.08). * ============================================================ */ :root { --ground: #fbf8fd; --ground-deep: #f4ecfa; --band: #f4eefb; --band-2: #e6d8f6; --blob: #ece1fa; --blob-2: #dbc6f2; --surface: #ffffff; --ink: #291f36; --muted: #5d5369; --line: #e6dcef; --accent: #6b46ad; --accent-lift: #8461c6; --accent-soft: #ebe0f9; --accent-soft-2: #d9c6f2; --accent-line: #c9b2ea; --shadow-card: 0 1px 2px rgba(41, 31, 54, 0.06), 0 8px 18px -12px rgba(74, 45, 126, 0.3), 0 26px 50px -30px rgba(74, 45, 126, 0.5); --shadow-lift: 0 2px 6px rgba(41, 31, 54, 0.07), 0 14px 28px -16px rgba(74, 45, 126, 0.32), 0 40px 72px -36px rgba(74, 45, 126, 0.55); /* Тени под большими заливками. У карточек тень говорит «это лежит поверх», у заливки — «это налито под», отсюда отдельные значения. Их два: box-shadow умеет растяжение, drop-shadow (для форм, вырезанных обводкой) — нет, и лишнее число гасит фильтр целиком */ --shadow-wash: 0 20px 42px -30px rgba(74, 45, 126, 0.55); --drop-wash: 0 8px 16px rgba(74, 45, 126, 0.18); /* Заливка зоны. Строго вертикальный: у зон тело и край — разные слои, и при любом наклоне на их стыке был бы шов. Концы прозрачны, чтобы зона не обрывалась горизонтальной линией */ --wash-v: linear-gradient( to bottom, transparent 0%, var(--band) 13%, var(--band-2) 86%, transparent 100% ); --header-bg: rgba(251, 248, 253, 0.86); /* Второй цвет — тёплая охра. Она не спорит с сиреневым, а перекликается с самим каталогом: 109 иллюстраций из 155 лежат в коричнево-жёлтом. Роли разведены жёстко: сиреневый — то, что можно нажать, охра — разметка содержания (эйрбоу секций, номера восьми шагов). Смешивать нельзя: как только охрой будет покрашена кнопка, оба цвета перестанут что-либо значить */ --warm: #8f5014; --warm-lift: #a86118; --warm-soft: #f6ead9; --warm-soft-2: #ecd9bd; --warm-line: #dcbc8e; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ground: #14101b; --ground-deep: #100c17; --band: #1d1628; --band-2: #271d38; --blob: #251c33; --blob-2: #322546; --surface: #221a2d; --ink: #ece5f3; --muted: #a598b3; --line: #342b41; --accent: #b795ee; --accent-lift: #cbb0f7; --accent-soft: #2e2440; --accent-soft-2: #3b2c55; --accent-line: #4b3a68; --warm: #e8ab68; --warm-lift: #f0bb80; --warm-soft: #33261a; --warm-soft-2: #40301f; --warm-line: #5c452c; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 18px -12px rgba(0, 0, 0, 0.6), 0 26px 50px -30px rgba(0, 0, 0, 0.9); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 28px -16px rgba(0, 0, 0, 0.65), 0 40px 72px -36px rgba(0, 0, 0, 0.95); --shadow-wash: 0 20px 42px -30px rgba(0, 0, 0, 0.85); --drop-wash: 0 8px 16px rgba(0, 0, 0, 0.55); --header-bg: rgba(20, 16, 27, 0.86); } } :root[data-theme='dark'] { --ground: #14101b; --ground-deep: #100c17; --band: #1d1628; --band-2: #271d38; --blob: #251c33; --blob-2: #322546; --surface: #221a2d; --ink: #ece5f3; --muted: #a598b3; --line: #342b41; --accent: #b795ee; --accent-lift: #cbb0f7; --accent-soft: #2e2440; --accent-soft-2: #3b2c55; --accent-line: #4b3a68; --warm: #e8ab68; --warm-lift: #f0bb80; --warm-soft: #33261a; --warm-soft-2: #40301f; --warm-line: #5c452c; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 18px -12px rgba(0, 0, 0, 0.6), 0 26px 50px -30px rgba(0, 0, 0, 0.9); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 28px -16px rgba(0, 0, 0, 0.65), 0 40px 72px -36px rgba(0, 0, 0, 0.95); --shadow-wash: 0 20px 42px -30px rgba(0, 0, 0, 0.85); --drop-wash: 0 8px 16px rgba(0, 0, 0, 0.55); --header-bg: rgba(20, 16, 27, 0.86); }