Maxim Dolgolyov
77e4dffb43
Закладывает уникальный визуальный язык и engine'ы для редизайна Физики 8. CSS: - phys8-design-system.css (12 КБ): 3 темы (thermal/electric/spectrum), тематические hero-палитры, watermarks, animations (thermal-shift, electric-pulse, spectrum-drift, wm-breathe/flicker/rotate, noise overlay), staggered fade-in для виджетов, soft elevation на карточках, monospace для физ. величин, topic-aware progress bars, mobile responsive (≤768px), prefers-reduced-motion. - phys8-interactives.css (10 КБ): .p8-draggable + .p8-droptarget с hover-effects, .p8-palette (для circuit-builder), .p8-scrubber, .p8-readout табло, .p8-tooltip, .p8-sandbox canvas wrapper, .p8-thermometer + .p8-compass-needle SVG-композиции, glow-utility. JS: - phys8-anim.js (6 КБ): easing-функции (quad/cubic/expo/back/elastic/ bounce/spring), tween-engine с onUpdate/onComplete, raf-wrapper, oscillate, stagger, onVisible (IntersectionObserver). Экспорт P8Anim. - phys8-drag.js (12 КБ): универсальный drag-engine. P8Drag.attach() для DOM/SVG, P8Drag.attachCanvas() для логических объектов с hit-test, P8Drag.attachPalette() для drag-from-palette-to-drop, constraints (lockX/Y, bounds, snap-to-grid), touch + mouse + pointer. - phys8-helpers.js (18 КБ): тематические хелперы. P8Helpers.thermal (tempColor 0-1, heatFlowArrow, molecule, thermometerSVG, convectionCellParticles), .em (chargeSVG, circuitComponent для battery/resistor/lamp/ammeter/voltmeter/switch, fieldLineFrom), .optics (rayLine, lensSVG converging/diverging, mirrorPlane), .svg utils (el, create, linearGradient, radialGradient, gradientArrow, labeledText). Линковка (redesign_p8_phase0.cjs): - 2 CSS-link после katex CDN - 3 JS-link после phys.js/xp.js - body class p8-theme-thermal/electric/spectrum на ch1/ch2/ch3 - hub и lab — без темы (нейтральный пурпурный brand)
360 lines
12 KiB
CSS
360 lines
12 KiB
CSS
/* phys8-design-system.css
|
|
* Уникальный визуальный язык «Физики 8» — 3 тематических темы.
|
|
* Применяется на physics_8_hub.html, physics_8_ch1/ch2/ch3.html, physics_8_lab.html.
|
|
*
|
|
* Тематика:
|
|
* Ch1 «жар» — угольный/оранжевый/жёлтый, дышащий градиент
|
|
* Ch2 «искра» — индиго/бирюза/голубой, electric pulse
|
|
* Ch3 «спектр» — глубокий синий/радуга/персик, dispersion shift
|
|
*/
|
|
|
|
/* === Глобальные тематические переменные === */
|
|
:root {
|
|
--p8-brand: #7c3aed;
|
|
--p8-brand-d: #5b21b6;
|
|
--p8-brand-l: #c4b5fd;
|
|
--p8-brand-soft: #ede9fe;
|
|
--p8-ink: #0f172a;
|
|
--p8-text: #1e293b;
|
|
--p8-muted: #64748b;
|
|
--p8-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
|
|
--p8-display: 'Unbounded', 'Outfit', system-ui, sans-serif;
|
|
--p8-body: 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
html.dark {
|
|
--p8-ink: #f1f5f9;
|
|
--p8-text: #e2e8f0;
|
|
--p8-muted: #94a3b8;
|
|
}
|
|
|
|
/* === Тема Ch1 «жар» — Тепловые явления === */
|
|
body.p8-theme-thermal {
|
|
--th-deep: #0f172a;
|
|
--th-mid: #f97316;
|
|
--th-warm: #facc15;
|
|
--th-glow: rgba(249, 115, 22, .35);
|
|
--th-soft: #fff7ed;
|
|
--th-card: #fffbf5;
|
|
}
|
|
html.dark body.p8-theme-thermal {
|
|
--th-soft: #1a0f05;
|
|
--th-card: #1f1408;
|
|
}
|
|
|
|
/* === Тема Ch2 «искра» — Электромагнитные явления === */
|
|
body.p8-theme-electric {
|
|
--el-deep: #1e1b4b;
|
|
--el-mid: #06b6d4;
|
|
--el-cool: #7dd3fc;
|
|
--el-glow: rgba(6, 182, 212, .35);
|
|
--el-soft: #ecfeff;
|
|
--el-card: #f0fbff;
|
|
}
|
|
html.dark body.p8-theme-electric {
|
|
--el-soft: #061226;
|
|
--el-card: #081530;
|
|
}
|
|
|
|
/* === Тема Ch3 «спектр» — Световые явления === */
|
|
body.p8-theme-spectrum {
|
|
--sp-deep: #0c0a3a;
|
|
--sp-mid-r: #ef4444;
|
|
--sp-mid-y: #facc15;
|
|
--sp-mid-g: #22c55e;
|
|
--sp-mid-b: #3b82f6;
|
|
--sp-mid-v: #a855f7;
|
|
--sp-warm: #fb7185;
|
|
--sp-glow: rgba(168, 85, 247, .30);
|
|
--sp-soft: #fdf2f8;
|
|
--sp-card: #fff5fa;
|
|
}
|
|
html.dark body.p8-theme-spectrum {
|
|
--sp-soft: #0d0a1f;
|
|
--sp-card: #110d27;
|
|
}
|
|
|
|
/* === Hero (заменяет .hdr на главах) === */
|
|
.p8-hero {
|
|
position: relative;
|
|
padding: 48px 28px 38px;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
font-family: var(--p8-display);
|
|
border-bottom: 2px solid rgba(255,255,255,.16);
|
|
}
|
|
.p8-theme-thermal .p8-hero {
|
|
background:
|
|
radial-gradient(circle at 78% 18%, var(--th-glow), transparent 55%),
|
|
linear-gradient(125deg, var(--th-deep) 0%, var(--th-mid) 60%, var(--th-warm) 100%);
|
|
background-size: 220% 220%, 100% 100%;
|
|
animation: p8-thermal-shift 14s ease-in-out infinite;
|
|
}
|
|
.p8-theme-electric .p8-hero {
|
|
background:
|
|
radial-gradient(circle at 22% 30%, var(--el-glow), transparent 50%),
|
|
linear-gradient(115deg, var(--el-deep) 0%, var(--el-mid) 65%, var(--el-cool) 100%);
|
|
animation: p8-electric-pulse 5s ease-in-out infinite;
|
|
}
|
|
.p8-theme-spectrum .p8-hero {
|
|
background:
|
|
linear-gradient(115deg,
|
|
var(--sp-deep) 0%,
|
|
var(--sp-mid-r) 20%,
|
|
var(--sp-mid-y) 38%,
|
|
var(--sp-mid-g) 55%,
|
|
var(--sp-mid-b) 72%,
|
|
var(--sp-mid-v) 88%,
|
|
var(--sp-warm) 100%);
|
|
background-size: 240% 100%;
|
|
animation: p8-spectrum-drift 18s linear infinite;
|
|
}
|
|
|
|
@keyframes p8-thermal-shift {
|
|
0%, 100% { background-position: 0% 50%, 0 0; }
|
|
50% { background-position: 100% 50%, 0 0; }
|
|
}
|
|
@keyframes p8-electric-pulse {
|
|
0%, 100% { filter: brightness(1) saturate(1); }
|
|
35% { filter: brightness(1.12) saturate(1.18); }
|
|
60% { filter: brightness(0.96) saturate(1.06); }
|
|
}
|
|
@keyframes p8-spectrum-drift {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 200% 50%; }
|
|
}
|
|
|
|
/* === Hero watermark (тематический SVG-символ справа) === */
|
|
.p8-hero-wm {
|
|
position: absolute;
|
|
right: -24px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: clamp(180px, 32vw, 360px);
|
|
aspect-ratio: 1;
|
|
opacity: .18;
|
|
color: #fff;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.p8-hero-wm svg { width: 100%; height: 100%; fill: currentColor; }
|
|
|
|
/* Анимация дыхания watermark */
|
|
.p8-theme-thermal .p8-hero-wm { animation: p8-wm-breathe 6s ease-in-out infinite; }
|
|
.p8-theme-electric .p8-hero-wm { animation: p8-wm-flicker 3.2s ease-in-out infinite; }
|
|
.p8-theme-spectrum .p8-hero-wm { animation: p8-wm-rotate 40s linear infinite; }
|
|
@keyframes p8-wm-breathe { 0%,100% { opacity: .15; transform: translateY(-50%) scale(1); } 50% { opacity: .22; transform: translateY(-50%) scale(1.06); } }
|
|
@keyframes p8-wm-flicker { 0%,100% { opacity: .18; } 30% { opacity: .26; } 33% { opacity: .12; } 36% { opacity: .24; } 50% { opacity: .18; } }
|
|
@keyframes p8-wm-rotate { 0% { transform: translateY(-50%) rotate(0); } 100% { transform: translateY(-50%) rotate(360deg); } }
|
|
|
|
/* === Hero content === */
|
|
.p8-hero-inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
.p8-hero-eyebrow {
|
|
display: inline-block;
|
|
padding: 5px 12px;
|
|
background: rgba(255,255,255,.18);
|
|
border-radius: 99px;
|
|
font-size: .72rem;
|
|
font-weight: 700;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 14px;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.p8-hero-title {
|
|
font-family: var(--p8-display);
|
|
font-size: clamp(1.8rem, 4vw, 2.6rem);
|
|
font-weight: 900;
|
|
letter-spacing: -.02em;
|
|
line-height: 1.05;
|
|
margin: 0 0 10px;
|
|
text-shadow: 0 2px 16px rgba(0,0,0,.18);
|
|
}
|
|
.p8-hero-sub {
|
|
font-size: clamp(.92rem, 1.4vw, 1.05rem);
|
|
opacity: .92;
|
|
max-width: 640px;
|
|
font-family: var(--p8-body);
|
|
font-weight: 500;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* === Live header indicator (маячок в углу хедера) === */
|
|
.p8-hero-meter {
|
|
position: absolute;
|
|
top: 22px;
|
|
right: 28px;
|
|
z-index: 2;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 12px;
|
|
background: rgba(0,0,0,.28);
|
|
backdrop-filter: blur(8px);
|
|
border-radius: 99px;
|
|
font-family: var(--p8-mono);
|
|
font-size: .76rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
letter-spacing: .04em;
|
|
}
|
|
.p8-hero-meter::before {
|
|
content: '';
|
|
width: 8px; height: 8px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
box-shadow: 0 0 0 0 currentColor;
|
|
animation: p8-meter-pulse 1.4s ease-out infinite;
|
|
}
|
|
@keyframes p8-meter-pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.65); }
|
|
70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
|
|
}
|
|
|
|
/* === Section watermarks (тематические SVG на правой стороне каждой секции) === */
|
|
.p8-sec-wm {
|
|
position: absolute;
|
|
right: -28px;
|
|
top: 8%;
|
|
width: clamp(140px, 22vw, 240px);
|
|
aspect-ratio: 1;
|
|
color: var(--p8-brand);
|
|
opacity: .07;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
z-index: 0;
|
|
}
|
|
.p8-theme-thermal .p8-sec-wm { color: var(--th-mid); }
|
|
.p8-theme-electric .p8-sec-wm { color: var(--el-mid); }
|
|
.p8-theme-spectrum .p8-sec-wm { color: var(--sp-mid-v); }
|
|
.p8-sec-wm svg { width: 100%; height: 100%; fill: currentColor; }
|
|
|
|
/* === Hover-resonance — SVG/canvas в виджетах === */
|
|
.wg svg, .wg canvas {
|
|
transition: filter .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
|
|
}
|
|
.wg:hover svg,
|
|
.wg:hover canvas {
|
|
filter: drop-shadow(0 6px 20px rgba(0,0,0,.10));
|
|
}
|
|
.p8-theme-thermal .wg:hover svg { filter: drop-shadow(0 6px 20px var(--th-glow)); }
|
|
.p8-theme-electric .wg:hover svg { filter: drop-shadow(0 6px 20px var(--el-glow)); }
|
|
.p8-theme-spectrum .wg:hover svg { filter: drop-shadow(0 6px 20px var(--sp-glow)); }
|
|
|
|
/* === Staggered fade-in для виджетов === */
|
|
@keyframes p8-wg-fade-in {
|
|
from { opacity: 0; transform: translateY(14px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
.sec.active .wg {
|
|
animation: p8-wg-fade-in .45s cubic-bezier(.16,1,.3,1) backwards;
|
|
}
|
|
.sec.active .wg:nth-of-type(1) { animation-delay: .03s; }
|
|
.sec.active .wg:nth-of-type(2) { animation-delay: .10s; }
|
|
.sec.active .wg:nth-of-type(3) { animation-delay: .17s; }
|
|
.sec.active .wg:nth-of-type(4) { animation-delay: .24s; }
|
|
.sec.active .wg:nth-of-type(5) { animation-delay: .31s; }
|
|
.sec.active .wg:nth-of-type(6) { animation-delay: .38s; }
|
|
.sec.active .wg:nth-of-type(7) { animation-delay: .45s; }
|
|
|
|
/* === Soft elevation на карточках (2 уровня) === */
|
|
.wg {
|
|
box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 8px 20px rgba(15,23,42,.04);
|
|
transition: box-shadow 350ms cubic-bezier(.16,1,.3,1), transform 350ms cubic-bezier(.16,1,.3,1);
|
|
}
|
|
.wg:hover {
|
|
box-shadow: 0 4px 10px rgba(15,23,42,.07), 0 18px 36px rgba(15,23,42,.10);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* === Typography rhythm: моноширинный для физических величин === */
|
|
.p8-num, .p8-unit, .p8-mono, var.p8-var,
|
|
.tinp[type="number"], input[type="number"].tinp {
|
|
font-family: var(--p8-mono);
|
|
letter-spacing: -.01em;
|
|
}
|
|
.p8-num { font-weight: 700; color: var(--p8-ink); }
|
|
.p8-unit { color: var(--p8-muted); font-weight: 600; font-size: .92em; }
|
|
|
|
/* === Topic-aware progress bars === */
|
|
.p8-theme-thermal .hp-fill,
|
|
.p8-theme-thermal .po-fill,
|
|
.p8-theme-thermal .ch-prog-fill {
|
|
background: linear-gradient(90deg, var(--th-mid), var(--th-warm));
|
|
}
|
|
.p8-theme-electric .hp-fill,
|
|
.p8-theme-electric .po-fill,
|
|
.p8-theme-electric .ch-prog-fill {
|
|
background: linear-gradient(90deg, var(--el-mid), var(--el-cool));
|
|
}
|
|
.p8-theme-spectrum .hp-fill,
|
|
.p8-theme-spectrum .po-fill,
|
|
.p8-theme-spectrum .ch-prog-fill {
|
|
background: linear-gradient(90deg, var(--sp-mid-b), var(--sp-mid-v), var(--sp-warm));
|
|
background-size: 200% 100%;
|
|
animation: p8-spectrum-drift 8s linear infinite;
|
|
}
|
|
|
|
/* === Mobile responsiveness === */
|
|
@media (max-width: 768px) {
|
|
.p8-hero { padding: 34px 18px 26px; }
|
|
.p8-hero-wm { width: clamp(120px, 38vw, 200px); right: -16px; opacity: .12; }
|
|
.p8-hero-meter { top: 14px; right: 16px; font-size: .68rem; padding: 5px 9px; }
|
|
.p8-sec-wm { width: clamp(80px, 28vw, 140px); right: -16px; opacity: .05; }
|
|
}
|
|
|
|
/* === Animated noise overlay (микро-шум на hero) === */
|
|
.p8-hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
radial-gradient(circle 1px at 25% 30%, rgba(255,255,255,.10) 0, transparent 1px),
|
|
radial-gradient(circle 1px at 75% 60%, rgba(255,255,255,.08) 0, transparent 1px),
|
|
radial-gradient(circle 1px at 50% 80%, rgba(255,255,255,.06) 0, transparent 1px),
|
|
radial-gradient(circle 1px at 15% 75%, rgba(255,255,255,.09) 0, transparent 1px),
|
|
radial-gradient(circle 1px at 85% 20%, rgba(255,255,255,.07) 0, transparent 1px);
|
|
background-size: 80px 80px;
|
|
opacity: .6;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.p8-theme-thermal .p8-hero::after { animation: p8-noise-thermal 8s linear infinite; }
|
|
.p8-theme-electric .p8-hero::after { animation: p8-noise-electric 4s linear infinite; }
|
|
.p8-theme-spectrum .p8-hero::after { animation: p8-noise-spectrum 12s linear infinite; }
|
|
@keyframes p8-noise-thermal { 0% { background-position: 0 0; } 100% { background-position: 80px -160px; } }
|
|
@keyframes p8-noise-electric { 0% { background-position: 0 0; } 100% { background-position: -120px 80px; } }
|
|
@keyframes p8-noise-spectrum { 0% { background-position: 0 0; } 100% { background-position: 80px 80px; } }
|
|
|
|
/* === Focus-visible для accessibility === */
|
|
.btn:focus-visible,
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
.wg [tabindex]:focus-visible {
|
|
outline: 2px solid var(--p8-brand);
|
|
outline-offset: 2px;
|
|
border-radius: 9px;
|
|
}
|
|
.p8-theme-thermal :focus-visible { outline-color: var(--th-mid); }
|
|
.p8-theme-electric :focus-visible { outline-color: var(--el-mid); }
|
|
.p8-theme-spectrum :focus-visible { outline-color: var(--sp-mid-v); }
|
|
|
|
/* === Reduced motion === */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.p8-hero,
|
|
.p8-hero-wm,
|
|
.p8-hero-meter::before,
|
|
.p8-hero::after,
|
|
.sec.active .wg,
|
|
.p8-theme-spectrum .ch-prog-fill {
|
|
animation: none !important;
|
|
}
|
|
.wg, .wg svg, .wg canvas { transition: none !important; }
|
|
}
|