zabudko-ruandClaude Opus 5.5
3489e0b816
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
133 lines
9.4 KiB
HTML
133 lines
9.4 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Barev — словесный знак</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,800&family=Fraunces:ital,opsz,wght,SOFT,WONK@1,9..144,900,100,1&family=Unbounded:wght@800&family=Noto+Sans+Armenian:wght@700&family=Shrikhand&family=Big+Shoulders+Display:wght@900&family=Fredoka:wght@700&family=Onest:wght@400;600&display=block" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--plum: #4A1028; --pink: #F6C3D3; --cream: #FBF6EE; --yellow: #F7DA6E;
|
||
--green: #A8C38A; --green-ink: #1F3311; --blue: #BCD0F2; --blue-ink: #12264D; --apricot: #F3A04F;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; background: var(--cream); color: var(--plum); font-family: Onest, system-ui, sans-serif; }
|
||
main { max-width: 1240px; margin: 0 auto; padding: 40px 20px 60px; }
|
||
h1 { font: italic 800 44px/1 Rubik, sans-serif; letter-spacing: -0.03em; margin: 0 0 6px; }
|
||
.lede { margin: 0 0 28px; color: #6b4a57; max-width: 62ch; }
|
||
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
|
||
.v { background: #fff; border-radius: 28px; padding: 18px; display: grid; grid-template-columns: 1fr 1fr 160px; grid-template-rows: auto 190px auto; gap: 12px; }
|
||
.tile span, .tile b, .avatar span, .avatar b { white-space: nowrap; }
|
||
.v header { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; }
|
||
.v header b { font-size: 20px; font-weight: 600; }
|
||
.v header span { font-size: 14px; color: #6b4a57; }
|
||
.tile { border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||
.avatar { width: 160px; height: 160px; border-radius: 50%; align-self: center; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||
.note { grid-column: 1 / -1; font-size: 13px; color: #6b4a57; margin: -4px 4px 0; }
|
||
|
||
/* 1 — Rubik: слово с сайта */
|
||
.w1 { font: italic 800 96px/0.9 Rubik; padding-right: 10px; letter-spacing: -0.055em; }
|
||
.v1 .light { background: var(--cream); color: var(--plum); }
|
||
.v1 .dark { background: var(--plum); color: var(--pink); }
|
||
.v1 .avatar { background: var(--plum); color: var(--pink); font: italic 800 96px/1 Rubik; letter-spacing: -0.05em; padding-right: 6px; }
|
||
|
||
/* 2 — Fraunces: мягкая антиква, точка-абрикос */
|
||
.w2 { font-family: Fraunces; font-style: italic; font-weight: 900; font-size: 96px; line-height: 1; letter-spacing: -0.035em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
|
||
.w2 i { font-style: normal; color: var(--apricot); }
|
||
.v2 .light { background: var(--cream); color: var(--plum); }
|
||
.v2 .dark { background: #2b0a18; color: var(--cream); }
|
||
.v2 .avatar { background: var(--apricot); color: var(--plum); font-family: Fraunces; font-style: italic; font-weight: 900; font-size: 92px; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; padding-bottom: 8px; }
|
||
|
||
/* 3 — Unbounded + армянское Բարև: двуязычный знак */
|
||
.w3 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
|
||
.w3 .lat { font: 800 66px/1 Unbounded; letter-spacing: -0.04em; }
|
||
.w3 .arm { font: 700 32px/1 'Noto Sans Armenian'; letter-spacing: 0.02em; opacity: .75; padding-left: 3px; }
|
||
.v3 .light { background: var(--cream); color: var(--plum); }
|
||
.v3 .dark { background: var(--plum); color: var(--yellow); }
|
||
.v3 .avatar { background: var(--yellow); color: var(--plum); flex-direction: column; gap: 2px; }
|
||
.v3 .avatar .a1 { font: 800 34px/1 Unbounded; letter-spacing: -0.04em; }
|
||
.v3 .avatar .a2 { font: 700 19px/1 'Noto Sans Armenian'; opacity: .7; }
|
||
|
||
/* 4 — Shrikhand: сочная наклейка с тенью */
|
||
.w4 { font: 400 86px/1 Shrikhand; padding: 0 12px 10px 0; letter-spacing: -0.01em; color: var(--yellow); text-shadow: 4px 4px 0 var(--plum), 5px 5px 0 var(--plum); -webkit-text-stroke: 2px var(--plum); paint-order: stroke fill; }
|
||
.v4 .light { background: var(--pink); }
|
||
.v4 .dark { background: var(--plum); }
|
||
.v4 .dark .w4 { text-shadow: 4px 4px 0 #000, 5px 5px 0 #000; -webkit-text-stroke: 2px #2b0a18; }
|
||
.v4 .avatar { background: var(--pink); }
|
||
.v4 .avatar span { font: 400 78px/1 Shrikhand; color: var(--yellow); -webkit-text-stroke: 2px var(--plum); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--plum); padding: 0 6px 10px 0; }
|
||
|
||
/* 5 — Big Shoulders: бирка для ключей */
|
||
.w5 { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 18px; border-radius: 999px; background: var(--green); color: var(--green-ink); }
|
||
.w5::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 3px var(--green-ink); }
|
||
.w5 b { font: 900 76px/0.9 'Big Shoulders Display'; letter-spacing: 0.06em; text-transform: uppercase; }
|
||
.v5 .light { background: var(--cream); }
|
||
.v5 .dark { background: var(--plum); }
|
||
.v5 .avatar { background: var(--green); color: var(--green-ink); }
|
||
.v5 .avatar b { font: 900 46px/0.9 'Big Shoulders Display'; letter-spacing: 0.04em; }
|
||
|
||
/* 6 — Fredoka: «привет» в облачке чата */
|
||
.w6 { position: relative; display: inline-block; padding: 8px 30px 18px; border-radius: 40px 40px 40px 10px; background: var(--blue); color: var(--blue-ink); font: 700 80px/1 Fredoka; white-space: nowrap; letter-spacing: -0.02em; }
|
||
.w6 i { font-style: normal; display: inline-block; transform: translateY(-4px) rotate(-8deg); color: #B8235A; }
|
||
.v6 .light { background: var(--cream); }
|
||
.v6 .dark { background: var(--blue-ink); }
|
||
.v6 .dark .w6 { background: var(--pink); color: var(--plum); }
|
||
.v6 .avatar { background: var(--blue); }
|
||
.v6 .avatar span { padding: 6px 16px 12px; border-radius: 28px 28px 28px 6px; background: #fff; color: var(--blue-ink); font: 700 42px/1 Fredoka; }
|
||
|
||
@media (max-width: 900px) { .v { grid-template-columns: 1fr; grid-template-rows: auto; } .tile { height: 170px; } .avatar { justify-self: center; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<h1>Barev</h1>
|
||
<p class="lede">Шесть вариантов словесного знака. В каждом: на светлом, на тёмном и круг аватара Telegram.</p>
|
||
<div class="grid">
|
||
<section class="v v1">
|
||
<header><b>1 · Rubik</b><span>слово с сайта</span></header>
|
||
<div class="tile light"><span class="w1">Barev</span></div>
|
||
<div class="tile dark"><span class="w1">Barev</span></div>
|
||
<div class="avatar">B</div>
|
||
<p class="note">Тот же жирный курсив, что огромное «Barev» на главной: сайт, бот и приложение выглядят одной семьёй.</p>
|
||
</section>
|
||
<section class="v v2">
|
||
<header><b>2 · Fraunces</b><span>тёплая антиква</span></header>
|
||
<div class="tile light"><span class="w2">Barev<i>.</i></span></div>
|
||
<div class="tile dark"><span class="w2">Barev<i>.</i></span></div>
|
||
<div class="avatar">B<i style="font-style:normal">.</i></div>
|
||
<p class="note">Мягкий курсив с засечками, точка абрикосового цвета. Звучит как «здравствуйте», а не как «привет».</p>
|
||
</section>
|
||
<section class="v v3">
|
||
<header><b>3 · Unbounded + Բարև</b><span>двуязычный</span></header>
|
||
<div class="tile light"><span class="w3"><span class="lat">Barev</span><span class="arm">Բարև</span></span></div>
|
||
<div class="tile dark"><span class="w3"><span class="lat">Barev</span><span class="arm">Բարև</span></span></div>
|
||
<div class="avatar"><span class="a1">Barev</span><span class="a2">Բարև</span></div>
|
||
<p class="note">Латиница и армянская запись одного слова. Сразу понятно, что клуб про Армению.</p>
|
||
</section>
|
||
<section class="v v4">
|
||
<header><b>4 · Shrikhand</b><span>наклейка</span></header>
|
||
<div class="tile light"><span class="w4">Barev</span></div>
|
||
<div class="tile dark"><span class="w4">Barev</span></div>
|
||
<div class="avatar"><span>B</span></div>
|
||
<p class="note">Сочная наклейка с тенью, как магнит на холодильник. Самый заметный вариант в списке чатов.</p>
|
||
</section>
|
||
<section class="v v5">
|
||
<header><b>5 · Big Shoulders</b><span>бирка для ключей</span></header>
|
||
<div class="tile light"><span class="w5"><b>Barev</b></span></div>
|
||
<div class="tile dark"><span class="w5"><b>Barev</b></span></div>
|
||
<div class="avatar"><b>BAREV</b></div>
|
||
<p class="note">Узкие буквы на бирке с дырочкой — ключи от новой квартиры. Про переезд и заселение.</p>
|
||
</section>
|
||
<section class="v v6">
|
||
<header><b>6 · Fredoka</b><span>облачко чата</span></header>
|
||
<div class="tile light"><span class="w6">barev<i>!</i></span></div>
|
||
<div class="tile dark"><span class="w6">barev<i>!</i></span></div>
|
||
<div class="avatar"><span>barev</span></div>
|
||
<p class="note">Строчные буквы в облачке сообщения: клуб, который отвечает в Telegram. Самый дружелюбный.</p>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
</html>
|