sab.code.lab
1c85091186
Прежняя git-история утрачена при переносе проекта на машину владельца (снапшот без .git). Хэши коммитов в docs/reports/* относятся к утраченной истории. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1363 lines
24 KiB
CSS
1363 lines
24 KiB
CSS
/* ============================================================
|
||
Го-школа «Иго» — современная версия
|
||
Японский минимализм на современный лад: много воздуха,
|
||
крупная типографика, мягкая глубина, одна светлая тема.
|
||
============================================================ */
|
||
|
||
:root {
|
||
--paper: #faf7f1;
|
||
--paper-2: #f2ede3;
|
||
--paper-3: #e9e2d3;
|
||
--surface: #ffffff;
|
||
--ink: #23201b;
|
||
--ink-soft: #6b6154;
|
||
--ink-faint: #a29885;
|
||
--accent: #3d4f7c; /* индиго аи */
|
||
--accent-strong: #2e3d63;
|
||
--accent-soft: #e9ecf5;
|
||
--terra: #c25a33; /* терракота */
|
||
--terra-soft: #f6e8e0;
|
||
--line: #e3dbc9;
|
||
--board: #e6c48a; /* дерево гобана */
|
||
--board-line: #8a6a3f;
|
||
--stone-black: #211e1a;
|
||
--stone-white: #f6f2e8;
|
||
--ok: #4a7a4e;
|
||
--ok-soft: #e4efe2;
|
||
--err: #b0492f;
|
||
--err-soft: #f8e8e2;
|
||
--focus: #2e3d63;
|
||
--star: #c25a33;
|
||
--radius: 18px;
|
||
--radius-sm: 12px;
|
||
--radius-pill: 999px;
|
||
--shadow-sm: 0 1px 2px rgba(35, 32, 27, 0.05), 0 2px 8px rgba(35, 32, 27, 0.04);
|
||
--shadow-md: 0 2px 6px rgba(35, 32, 27, 0.05), 0 12px 32px rgba(35, 32, 27, 0.08);
|
||
--shadow-lg: 0 4px 12px rgba(35, 32, 27, 0.06), 0 24px 64px rgba(35, 32, 27, 0.12);
|
||
--measure: 62ch;
|
||
--font-head: 'PT Serif', 'Georgia', serif;
|
||
--font-body: 'PT Sans', 'Segoe UI', system-ui, sans-serif;
|
||
--font-mono: 'PT Mono', 'SFMono-Regular', Consolas, monospace;
|
||
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
|
||
/* ---------- база ---------- */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--paper);
|
||
color: var(--ink);
|
||
font-family: var(--font-body);
|
||
font-size: 17px;
|
||
line-height: 1.65;
|
||
-webkit-font-smoothing: antialiased;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4 {
|
||
font-family: var(--font-head);
|
||
font-weight: 700;
|
||
line-height: 1.18;
|
||
margin: 0 0 0.5em;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(2.2rem, 5.5vw, 3.6rem);
|
||
}
|
||
h2 {
|
||
font-size: clamp(1.5rem, 3vw, 2.1rem);
|
||
}
|
||
h3 {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
p {
|
||
margin: 0 0 1em;
|
||
}
|
||
|
||
a {
|
||
color: var(--accent);
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 3px;
|
||
}
|
||
a:hover {
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
a:focus-visible,
|
||
button:focus-visible,
|
||
input:focus-visible,
|
||
select:focus-visible,
|
||
[tabindex]:focus-visible {
|
||
outline: 2px solid var(--focus);
|
||
outline-offset: 3px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.container {
|
||
max-width: 1120px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.container--narrow {
|
||
max-width: 720px;
|
||
}
|
||
|
||
/* ---------- шапка: стекло ---------- */
|
||
|
||
.site-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
background: rgba(250, 247, 241, 0.82);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.site-header .container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
min-height: 68px;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 11px;
|
||
font-family: var(--font-head);
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.logo .kanji {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
font-size: 1.05rem;
|
||
line-height: 1;
|
||
color: var(--paper);
|
||
background: var(--stone-black);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.main-nav {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.main-nav ul {
|
||
display: flex;
|
||
gap: 2px;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.main-nav a {
|
||
display: block;
|
||
padding: 9px 16px;
|
||
color: var(--ink-soft);
|
||
text-decoration: none;
|
||
border-radius: var(--radius-pill);
|
||
transition:
|
||
color 0.2s var(--ease),
|
||
background 0.2s var(--ease);
|
||
}
|
||
|
||
.main-nav a:hover {
|
||
color: var(--ink);
|
||
background: var(--paper-2);
|
||
}
|
||
|
||
.main-nav a[aria-current='page'] {
|
||
color: var(--ink);
|
||
background: var(--paper-2);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: none;
|
||
place-items: center;
|
||
width: 42px;
|
||
height: 42px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 50%;
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
cursor: pointer;
|
||
font-size: 1.05rem;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.menu-toggle:hover {
|
||
background: var(--paper-2);
|
||
}
|
||
|
||
/* ---------- кнопки: пилюли ---------- */
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 13px 28px;
|
||
font-family: var(--font-body);
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
line-height: 1.3;
|
||
letter-spacing: 0.01em;
|
||
color: var(--accent-strong);
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-pill);
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
box-shadow: var(--shadow-sm);
|
||
transition:
|
||
transform 0.25s var(--ease),
|
||
box-shadow 0.25s var(--ease),
|
||
background 0.2s,
|
||
border-color 0.2s;
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.btn:active {
|
||
transform: translateY(0);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.btn--primary {
|
||
background: var(--accent);
|
||
color: #fdfcf8;
|
||
border-color: var(--accent);
|
||
box-shadow:
|
||
0 2px 8px rgba(61, 79, 124, 0.3),
|
||
0 8px 24px rgba(61, 79, 124, 0.2);
|
||
}
|
||
|
||
.btn--primary:hover {
|
||
background: var(--accent-strong);
|
||
color: #fdfcf8;
|
||
border-color: var(--accent-strong);
|
||
box-shadow:
|
||
0 4px 12px rgba(61, 79, 124, 0.35),
|
||
0 16px 40px rgba(61, 79, 124, 0.25);
|
||
}
|
||
|
||
.btn--quiet {
|
||
background: transparent;
|
||
box-shadow: none;
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.btn--quiet:hover {
|
||
background: var(--paper-2);
|
||
color: var(--ink);
|
||
box-shadow: none;
|
||
border-color: var(--ink-faint);
|
||
}
|
||
|
||
.btn--danger {
|
||
color: var(--err);
|
||
}
|
||
.btn--danger:hover {
|
||
background: var(--err-soft);
|
||
border-color: var(--err);
|
||
}
|
||
|
||
.btn:disabled,
|
||
.btn[disabled] {
|
||
opacity: 0.45;
|
||
cursor: not-allowed;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.btn--small {
|
||
padding: 8px 18px;
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.btn-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* ---------- бейджи, звёзды ---------- */
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 4px 12px;
|
||
font-size: 0.8rem;
|
||
font-weight: 700;
|
||
border-radius: var(--radius-pill);
|
||
color: var(--ink-soft);
|
||
background: var(--paper-2);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.badge--done {
|
||
color: var(--ok);
|
||
background: var(--ok-soft);
|
||
}
|
||
.badge--accent {
|
||
color: var(--accent-strong);
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.stars {
|
||
color: var(--star);
|
||
letter-spacing: 2px;
|
||
font-size: 0.95rem;
|
||
white-space: nowrap;
|
||
}
|
||
.stars .off {
|
||
color: var(--line);
|
||
}
|
||
|
||
/* ---------- карточки ---------- */
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 28px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.card--link {
|
||
display: block;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
transition:
|
||
transform 0.25s var(--ease),
|
||
box-shadow 0.25s var(--ease),
|
||
border-color 0.2s;
|
||
}
|
||
|
||
.card--link:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
border-color: transparent;
|
||
}
|
||
|
||
/* ---------- формы ---------- */
|
||
|
||
.field {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.field label {
|
||
display: block;
|
||
margin-bottom: 7px;
|
||
font-size: 0.92rem;
|
||
font-weight: 700;
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.field input,
|
||
.field select {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
font: inherit;
|
||
color: var(--ink);
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-sm);
|
||
transition:
|
||
border-color 0.15s,
|
||
box-shadow 0.15s,
|
||
background 0.15s;
|
||
}
|
||
|
||
.field input:hover,
|
||
.field select:hover {
|
||
border-color: var(--ink-faint);
|
||
}
|
||
|
||
.field input:focus,
|
||
.field select:focus {
|
||
border-color: var(--accent);
|
||
background: var(--surface);
|
||
box-shadow: 0 0 0 4px var(--accent-soft);
|
||
outline: none;
|
||
}
|
||
|
||
.field .hint {
|
||
font-size: 0.85rem;
|
||
color: var(--ink-faint);
|
||
margin: 6px 0 0;
|
||
}
|
||
|
||
.field--error input {
|
||
border-color: var(--err);
|
||
background: var(--err-soft);
|
||
}
|
||
|
||
.field--error .error-text {
|
||
display: block;
|
||
margin-top: 6px;
|
||
font-size: 0.85rem;
|
||
color: var(--err);
|
||
}
|
||
|
||
.error-text {
|
||
display: none;
|
||
}
|
||
.field--error .error-text {
|
||
display: block;
|
||
}
|
||
|
||
/* ---------- подвал ---------- */
|
||
|
||
.site-footer {
|
||
margin-top: 96px;
|
||
border-top: 1px solid var(--line);
|
||
padding: 44px 0;
|
||
color: var(--ink-soft);
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.site-footer .container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px 40px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.site-footer nav ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px 22px;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.privacy-note {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* ---------- главная ---------- */
|
||
|
||
.hero {
|
||
position: relative;
|
||
padding: 96px 0 88px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* мягкое свечение вместо иероглифов-обоев */
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -220px;
|
||
right: -140px;
|
||
width: 620px;
|
||
height: 620px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -260px;
|
||
left: -180px;
|
||
width: 560px;
|
||
height: 560px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(closest-side, var(--terra-soft), transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero .container {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: grid;
|
||
grid-template-columns: 1.05fr 1fr;
|
||
gap: 64px;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 0.82rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--terra);
|
||
background: var(--terra-soft);
|
||
padding: 6px 16px;
|
||
border-radius: var(--radius-pill);
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.hero h1 em {
|
||
font-style: normal;
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.hero p.lead {
|
||
font-size: 1.18rem;
|
||
color: var(--ink-soft);
|
||
max-width: 44ch;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.hero-meta {
|
||
display: flex;
|
||
gap: 28px;
|
||
margin-top: 36px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hero-meta .item strong {
|
||
display: block;
|
||
font-family: var(--font-head);
|
||
font-size: 1.5rem;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.hero-meta .item span {
|
||
font-size: 0.88rem;
|
||
color: var(--ink-faint);
|
||
}
|
||
|
||
.hero-figure {
|
||
margin: 0;
|
||
position: relative;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-lg);
|
||
transform: rotate(1.2deg);
|
||
}
|
||
|
||
.hero-figure img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.6s var(--ease);
|
||
}
|
||
|
||
.hero-figure:hover img {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
.hero-figure figcaption {
|
||
position: absolute;
|
||
left: 14px;
|
||
bottom: 14px;
|
||
right: 14px;
|
||
padding: 12px 18px;
|
||
font-size: 0.85rem;
|
||
color: var(--ink);
|
||
background: rgba(250, 247, 241, 0.88);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border-radius: 14px;
|
||
}
|
||
|
||
/* парящий камень-плашка поверх фото */
|
||
.hero-chip {
|
||
position: absolute;
|
||
top: 18px;
|
||
left: -26px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 18px 10px 12px;
|
||
background: var(--surface);
|
||
border-radius: var(--radius-pill);
|
||
box-shadow: var(--shadow-md);
|
||
font-size: 0.88rem;
|
||
font-weight: 700;
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero-chip .dot {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
background: var(--stone-black);
|
||
box-shadow: inset -3px -3px 6px rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.features {
|
||
padding: 72px 0 8px;
|
||
}
|
||
|
||
.section-head {
|
||
display: flex;
|
||
align-items: end;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
margin-bottom: 40px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.section-head .kicker {
|
||
font-size: 0.82rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--terra);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.section-head h2 {
|
||
margin: 0;
|
||
}
|
||
|
||
.section-head p {
|
||
color: var(--ink-soft);
|
||
max-width: 40ch;
|
||
margin: 0;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 22px;
|
||
}
|
||
|
||
.feature-card {
|
||
padding: 32px 28px;
|
||
transition:
|
||
transform 0.25s var(--ease),
|
||
box-shadow 0.25s var(--ease);
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.feature-card .icon {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 16px;
|
||
background: var(--accent-soft);
|
||
color: var(--accent-strong);
|
||
font-family: var(--font-head);
|
||
font-size: 1.4rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.feature-card p {
|
||
color: var(--ink-soft);
|
||
margin: 0;
|
||
font-size: 0.97rem;
|
||
}
|
||
|
||
/* широкая полоса с суми-э — почти во всю ширину, современно */
|
||
.ink-band {
|
||
margin: 72px 0 0;
|
||
}
|
||
|
||
.ink-band figure {
|
||
margin: 0;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-md);
|
||
position: relative;
|
||
}
|
||
|
||
.ink-band img {
|
||
width: 100%;
|
||
height: 320px;
|
||
object-fit: cover;
|
||
object-position: center 42%;
|
||
}
|
||
|
||
.ink-band figcaption {
|
||
position: absolute;
|
||
left: 20px;
|
||
bottom: 20px;
|
||
padding: 10px 18px;
|
||
font-size: 0.85rem;
|
||
color: var(--ink);
|
||
background: rgba(250, 247, 241, 0.88);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.home-strip {
|
||
margin-top: 72px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.15fr;
|
||
gap: 24px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.home-strip .hero-figure {
|
||
transform: none;
|
||
}
|
||
|
||
.home-strip .quote {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 40px;
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
.home-strip blockquote {
|
||
margin: 0 0 14px;
|
||
font-family: var(--font-head);
|
||
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.home-strip cite {
|
||
color: var(--ink-soft);
|
||
font-style: normal;
|
||
font-size: 0.94rem;
|
||
}
|
||
|
||
/* ---------- заголовок страницы ---------- */
|
||
|
||
.page-head {
|
||
padding: 64px 0 36px;
|
||
}
|
||
|
||
.page-head .kicker {
|
||
display: inline-flex;
|
||
font-size: 0.82rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--terra);
|
||
background: var(--terra-soft);
|
||
padding: 5px 14px;
|
||
border-radius: var(--radius-pill);
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.page-head p {
|
||
color: var(--ink-soft);
|
||
max-width: var(--measure);
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
/* ---------- курс ---------- */
|
||
|
||
.course-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
padding-bottom: 48px;
|
||
}
|
||
|
||
.lesson-card {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: flex-start;
|
||
padding: 26px;
|
||
}
|
||
|
||
.lesson-card .lesson-num {
|
||
flex: 0 0 auto;
|
||
display: grid;
|
||
place-items: center;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: var(--board);
|
||
color: var(--stone-black);
|
||
font-family: var(--font-head);
|
||
font-size: 1.2rem;
|
||
border: 2px solid rgba(138, 106, 63, 0.35);
|
||
}
|
||
|
||
.lesson-card h3 {
|
||
margin-bottom: 5px;
|
||
}
|
||
.lesson-card p {
|
||
margin: 0 0 12px;
|
||
color: var(--ink-soft);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.lesson-card .meta {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.lesson-card.is-done {
|
||
border-color: var(--ok);
|
||
}
|
||
|
||
.lesson-card.is-done .lesson-num {
|
||
background: var(--ok-soft);
|
||
border-color: var(--ok);
|
||
color: var(--ok);
|
||
}
|
||
|
||
/* ---------- урок ---------- */
|
||
|
||
.lesson-body {
|
||
max-width: var(--measure);
|
||
padding-bottom: 48px;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.lesson-body h2 {
|
||
margin-top: 2.2em;
|
||
padding-top: 0.8em;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.lesson-body h2:first-of-type {
|
||
border-top: 0;
|
||
margin-top: 1em;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.lesson-body pre {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.92rem;
|
||
line-height: 1.5;
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-sm);
|
||
box-shadow: var(--shadow-sm);
|
||
padding: 20px 22px;
|
||
overflow-x: auto;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.lesson-body .diagram-caption {
|
||
font-size: 0.85rem;
|
||
color: var(--ink-faint);
|
||
margin: -4px 0 24px;
|
||
}
|
||
|
||
.try-it {
|
||
display: grid;
|
||
grid-template-columns: 160px 1fr;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin: 32px 0;
|
||
padding: 22px;
|
||
border: 1.5px dashed var(--accent);
|
||
border-radius: var(--radius);
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.try-it .label {
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--accent-strong);
|
||
margin-bottom: 7px;
|
||
}
|
||
|
||
.try-it p {
|
||
margin: 0;
|
||
font-size: 0.97rem;
|
||
}
|
||
|
||
.try-it .goban-static {
|
||
border-radius: var(--radius-sm);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.lesson-nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-top: 56px;
|
||
padding-top: 28px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
/* ---------- цумэ-го ---------- */
|
||
|
||
.filters {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px 28px;
|
||
align-items: end;
|
||
padding: 22px 26px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.filters .field {
|
||
margin: 0;
|
||
min-width: 170px;
|
||
flex: 1;
|
||
}
|
||
.filters .field:last-child {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.problems-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
gap: 20px;
|
||
padding-bottom: 48px;
|
||
}
|
||
|
||
.problem-card {
|
||
padding: 16px;
|
||
transition:
|
||
transform 0.25s var(--ease),
|
||
box-shadow 0.25s var(--ease);
|
||
}
|
||
|
||
.problem-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.problem-card .thumb {
|
||
border-radius: var(--radius-sm);
|
||
overflow: hidden;
|
||
margin-bottom: 14px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.problem-card .thumb svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.problem-card h3 {
|
||
font-size: 1.05rem;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.problem-card .meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.empty-state {
|
||
padding: 64px 24px;
|
||
text-align: center;
|
||
border: 1.5px dashed var(--line);
|
||
border-radius: var(--radius);
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.empty-state .glyph {
|
||
font-size: 2rem;
|
||
display: block;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* ---------- игра ---------- */
|
||
|
||
.play-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 320px;
|
||
gap: 28px;
|
||
align-items: start;
|
||
padding-bottom: 48px;
|
||
}
|
||
|
||
.board-wrap {
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: 24px;
|
||
padding: 16px;
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
#goban {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
border-radius: 12px;
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
#goban .point {
|
||
cursor: pointer;
|
||
}
|
||
#goban .point:hover .hover-dot {
|
||
opacity: 0.4;
|
||
}
|
||
#goban .hover-dot {
|
||
opacity: 0;
|
||
transition: opacity 0.15s;
|
||
}
|
||
|
||
.play-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
position: sticky;
|
||
top: 92px;
|
||
}
|
||
|
||
.play-panel .card {
|
||
padding: 22px;
|
||
}
|
||
|
||
.play-panel h2 {
|
||
font-size: 0.8rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-faint);
|
||
margin-bottom: 14px;
|
||
padding: 0;
|
||
border: 0;
|
||
font-family: var(--font-body);
|
||
}
|
||
|
||
.settings-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.settings-grid .field {
|
||
margin: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.captures {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.captures .side {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
}
|
||
|
||
.stone-dot {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
flex: 0 0 auto;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.stone-dot.black {
|
||
background: var(--stone-black);
|
||
}
|
||
.stone-dot.white {
|
||
background: var(--stone-white);
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.status-line {
|
||
padding: 14px 18px;
|
||
border-radius: var(--radius-sm);
|
||
background: var(--accent-soft);
|
||
color: var(--accent-strong);
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.hints-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.hints-list li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
padding: 10px 14px;
|
||
background: var(--paper);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.hints-list .coord {
|
||
font-family: var(--font-mono);
|
||
color: var(--accent-strong);
|
||
font-weight: 700;
|
||
}
|
||
.hints-list .score {
|
||
color: var(--ink-faint);
|
||
}
|
||
|
||
/* ---------- прогресс ---------- */
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
margin: 36px 0;
|
||
}
|
||
|
||
.stat-card {
|
||
text-align: center;
|
||
padding: 40px 24px;
|
||
transition:
|
||
transform 0.25s var(--ease),
|
||
box-shadow 0.25s var(--ease);
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.stat-card .value {
|
||
font-family: var(--font-head);
|
||
font-size: clamp(2.4rem, 5vw, 3.4rem);
|
||
line-height: 1;
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.stat-card .label {
|
||
color: var(--ink-soft);
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.progress-track {
|
||
height: 10px;
|
||
background: var(--paper-2);
|
||
border-radius: var(--radius-pill);
|
||
overflow: hidden;
|
||
margin: 12px 0 8px;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
width: 0;
|
||
background: var(--accent);
|
||
border-radius: var(--radius-pill);
|
||
transition: width 0.7s var(--ease);
|
||
}
|
||
|
||
.progress-note {
|
||
font-size: 0.9rem;
|
||
color: var(--ink-faint);
|
||
}
|
||
|
||
/* ---------- кабинет / регистрация ---------- */
|
||
|
||
.auth-card {
|
||
max-width: 440px;
|
||
margin: 72px auto;
|
||
padding: 44px;
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.auth-card h1 {
|
||
font-size: 1.7rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.auth-links {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
text-align: center;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.captcha-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.captcha-box {
|
||
flex: 0 0 180px;
|
||
height: 60px;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--paper-3);
|
||
display: block;
|
||
}
|
||
|
||
.captcha-box svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.logged-in {
|
||
text-align: center;
|
||
}
|
||
|
||
.logged-in .email {
|
||
font-family: var(--font-mono);
|
||
background: var(--paper-2);
|
||
border-radius: var(--radius-pill);
|
||
padding: 8px 18px;
|
||
display: inline-block;
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
/* ---------- анимация появления ---------- */
|
||
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(18px);
|
||
transition:
|
||
opacity 0.6s var(--ease),
|
||
transform 0.6s var(--ease);
|
||
}
|
||
|
||
.reveal.is-visible {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
/* ---------- адаптив ---------- */
|
||
|
||
@media (max-width: 960px) {
|
||
.hero {
|
||
padding: 64px 0 56px;
|
||
}
|
||
.hero .container {
|
||
grid-template-columns: 1fr;
|
||
gap: 40px;
|
||
}
|
||
.hero-chip {
|
||
left: 12px;
|
||
top: -14px;
|
||
}
|
||
.features-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.home-strip {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.play-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.play-panel {
|
||
position: static;
|
||
}
|
||
.course-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.menu-toggle {
|
||
display: grid;
|
||
}
|
||
|
||
.main-nav {
|
||
position: absolute;
|
||
top: 69px;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(250, 247, 241, 0.97);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
border-bottom: 1px solid var(--line);
|
||
display: none;
|
||
}
|
||
|
||
.main-nav.is-open {
|
||
display: block;
|
||
}
|
||
|
||
.main-nav ul {
|
||
flex-direction: column;
|
||
padding: 10px 20px 18px;
|
||
gap: 4px;
|
||
}
|
||
|
||
.main-nav a {
|
||
padding: 13px 14px;
|
||
}
|
||
|
||
.try-it {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.try-it .goban-static {
|
||
max-width: 200px;
|
||
}
|
||
}
|
||
|
||
/* ---------- reduced motion ---------- */
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.001s !important;
|
||
transition-duration: 0.001s !important;
|
||
}
|
||
html {
|
||
scroll-behavior: auto;
|
||
}
|
||
.reveal {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|