32a23cdc3e
- Added essential project files including package.json, tsconfig, and Vite configuration. - Created initial components and chapters for the application structure. - Implemented ESLint configuration for code quality and consistency. - Included .gitignore files to exclude build artifacts and dependencies. - Added README for project documentation and setup instructions. - Integrated a sample video and favicon for the application.
565 lines
12 KiB
CSS
565 lines
12 KiB
CSS
/* =========================================================
|
||
Chapter 06 · 第三部分 · 去 AI 味
|
||
light 主题 · hero → 反面教材 grid + 红斜线 → 字体黑名单 / 替代
|
||
========================================================= */
|
||
|
||
.aa {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
font-family: var(--f-sans);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* —— 顶部 eyebrow —— */
|
||
.aa__eyebrow {
|
||
position: absolute;
|
||
top: 56px;
|
||
left: 96px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
font-family: var(--f-mono);
|
||
font-size: 16px;
|
||
letter-spacing: 0.32em;
|
||
text-transform: uppercase;
|
||
color: var(--fg-mute);
|
||
z-index: 4;
|
||
}
|
||
.aa__eyebrow-num {
|
||
font-family: var(--f-serif);
|
||
font-size: 28px;
|
||
letter-spacing: 0;
|
||
color: var(--accent);
|
||
font-style: italic;
|
||
}
|
||
.aa__eyebrow-bar {
|
||
width: 36px;
|
||
height: 1px;
|
||
background: var(--line-mid);
|
||
}
|
||
.aa__eyebrow-bar--long { width: 96px; }
|
||
.aa__eyebrow-text { color: var(--fg); letter-spacing: 0.18em; }
|
||
.aa__eyebrow-mute { color: var(--fg-faint); font-size: 13px; }
|
||
|
||
/* —— 通用 prompt 源标签子部件 —— */
|
||
.aa__src-bracket { color: var(--accent); font-weight: 600; }
|
||
.aa__src-label { color: var(--fg); font-weight: 600; letter-spacing: 0.22em; }
|
||
.aa__src-sep { color: var(--fg-faint); }
|
||
.aa__src-line { color: var(--accent); font-weight: 600; }
|
||
.aa__src-mute { color: var(--fg-mute); }
|
||
|
||
/* ===================== Scene HERO ===================== */
|
||
|
||
.aa__hero {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 140px 140px 120px;
|
||
text-align: center;
|
||
gap: 32px;
|
||
}
|
||
|
||
.aa__hero-title {
|
||
font-family: var(--f-serif);
|
||
font-weight: 400;
|
||
font-size: 168px;
|
||
line-height: 1.05;
|
||
margin: 0;
|
||
}
|
||
.aa__hero-em {
|
||
font-style: italic;
|
||
color: var(--accent);
|
||
position: relative;
|
||
}
|
||
.aa__hero-em::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 4%;
|
||
right: 4%;
|
||
bottom: 8px;
|
||
height: 6px;
|
||
background: var(--accent);
|
||
opacity: 0.22;
|
||
transform-origin: left;
|
||
animation: aaUnderline 1100ms 360ms cubic-bezier(.2,.8,.2,1) backwards;
|
||
}
|
||
@keyframes aaUnderline {
|
||
from { transform: scaleX(0); opacity: 0; }
|
||
to { transform: scaleX(1); opacity: 0.22; }
|
||
}
|
||
|
||
.aa__hero-sub {
|
||
font-family: var(--f-serif);
|
||
font-size: 36px;
|
||
line-height: 1.4;
|
||
color: var(--fg-soft);
|
||
margin: 0;
|
||
max-width: 1100px;
|
||
}
|
||
.aa__hero-sub em {
|
||
font-style: italic;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.aa__excerpt {
|
||
width: 100%;
|
||
max-width: 1100px;
|
||
background: var(--bg-2);
|
||
border: 1px solid var(--line-mid);
|
||
border-left: 3px solid var(--accent);
|
||
border-radius: 2px;
|
||
padding: 18px 28px 22px;
|
||
text-align: left;
|
||
margin-top: 12px;
|
||
}
|
||
.aa__excerpt-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--f-mono);
|
||
font-size: 13px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--fg-mute);
|
||
margin-bottom: 10px;
|
||
}
|
||
.aa__excerpt-body {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
}
|
||
.aa__excerpt-gt {
|
||
font-family: var(--f-mono);
|
||
font-size: 28px;
|
||
color: var(--accent);
|
||
}
|
||
.aa__excerpt-text {
|
||
font-family: var(--f-mono);
|
||
font-size: 22px;
|
||
line-height: 1.5;
|
||
color: var(--fg);
|
||
}
|
||
.aa__excerpt-text em {
|
||
font-style: normal;
|
||
color: var(--accent);
|
||
background: linear-gradient(180deg, transparent 70%, oklch(0.860 0.060 60 / 0.6) 70%);
|
||
padding: 0 2px;
|
||
}
|
||
|
||
/* ===================== Scene GRID ===================== */
|
||
|
||
.aa__grid-scene {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 140px 100px 90px;
|
||
gap: 32px;
|
||
}
|
||
|
||
.aa__grid-cap {
|
||
font-family: var(--f-serif);
|
||
font-size: 32px;
|
||
font-style: italic;
|
||
color: var(--fg-soft);
|
||
text-align: center;
|
||
}
|
||
|
||
.aa__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 28px;
|
||
width: 100%;
|
||
max-width: 1480px;
|
||
}
|
||
|
||
.aa__grid-slot {
|
||
animation: aaGridIn 720ms cubic-bezier(.2,.8,.2,1) backwards;
|
||
}
|
||
@keyframes aaGridIn {
|
||
from { opacity: 0; transform: translateY(28px) scale(0.94); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
|
||
.aa__bad {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--bg-2);
|
||
border: 1px solid var(--line-mid);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
transition: filter 600ms, opacity 600ms;
|
||
}
|
||
.aa__bad.is-slashed {
|
||
filter: grayscale(0.55) brightness(0.92);
|
||
opacity: 0.78;
|
||
}
|
||
|
||
.aa__bad-canvas {
|
||
position: relative;
|
||
height: 220px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background:
|
||
repeating-linear-gradient(45deg,
|
||
oklch(0.180 0.014 60 / 0.025) 0 6px,
|
||
transparent 6px 12px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* —— 反面教材 1：紫粉蓝渐变 —— */
|
||
.aa__bad-gradient {
|
||
position: absolute;
|
||
inset: 14px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, #a78bfa 0%, #f0abfc 35%, #67e8f9 70%, #fda4af 100%);
|
||
box-shadow: 0 12px 36px -10px oklch(0.6 0.18 320 / 0.4);
|
||
}
|
||
|
||
/* —— 反面教材 2：Emoji 滥用 —— */
|
||
.aa__bad-emoji {
|
||
display: flex;
|
||
gap: 12px;
|
||
font-size: 44px;
|
||
line-height: 1;
|
||
filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.15));
|
||
}
|
||
|
||
/* —— 反面教材 3：左侧色条卡 —— */
|
||
.aa__bad-leftbar {
|
||
position: relative;
|
||
width: 220px;
|
||
height: 130px;
|
||
background: white;
|
||
border-radius: 14px;
|
||
display: flex;
|
||
align-items: stretch;
|
||
overflow: hidden;
|
||
box-shadow: 0 16px 28px -10px oklch(0.180 0.014 60 / 0.18);
|
||
}
|
||
.aa__bad-leftbar-stripe {
|
||
width: 8px;
|
||
background: linear-gradient(to bottom, #6366f1, #a855f7);
|
||
}
|
||
.aa__bad-leftbar-body {
|
||
flex: 1;
|
||
padding: 18px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.aa__bad-leftbar-t {
|
||
width: 60%;
|
||
height: 14px;
|
||
background: oklch(0.4 0.04 280);
|
||
border-radius: 4px;
|
||
}
|
||
.aa__bad-leftbar-l {
|
||
width: 90%;
|
||
height: 8px;
|
||
background: oklch(0.85 0.02 280);
|
||
border-radius: 4px;
|
||
}
|
||
.aa__bad-leftbar-l--short { width: 60%; }
|
||
|
||
/* —— 反面教材 4：烂大街字体 —— */
|
||
.aa__bad-font {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
align-items: center;
|
||
font-size: 22px;
|
||
color: var(--fg);
|
||
}
|
||
.aa__bad-font span:first-child { font-weight: 600; font-size: 26px; }
|
||
|
||
/* —— 反面教材 5：data slop —— */
|
||
.aa__bad-data {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, auto);
|
||
gap: 18px 32px;
|
||
font-family: var(--f-mono);
|
||
font-size: 22px;
|
||
color: var(--fg);
|
||
}
|
||
.aa__bad-data > div {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.aa__bad-data span {
|
||
color: oklch(0.6 0.18 320);
|
||
font-size: 20px;
|
||
}
|
||
.aa__bad-data b {
|
||
font-family: var(--f-serif);
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-size: 28px;
|
||
color: var(--fg);
|
||
}
|
||
|
||
/* —— 反面教材 6：复杂 SVG —— */
|
||
.aa__bad-svg {
|
||
width: 130px;
|
||
height: 130px;
|
||
filter: drop-shadow(0 6px 12px oklch(0.6 0.18 320 / 0.35));
|
||
}
|
||
|
||
/* —— 红斜杠 —— */
|
||
.aa__bad-slash {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 360ms;
|
||
}
|
||
.aa__bad.is-slashed .aa__bad-slash {
|
||
opacity: 1;
|
||
}
|
||
.aa__bad-slash-line {
|
||
display: block;
|
||
width: 130%;
|
||
height: 5px;
|
||
background: var(--crimson);
|
||
transform: rotate(-18deg) scaleX(0);
|
||
transform-origin: left;
|
||
border-radius: 1px;
|
||
box-shadow:
|
||
0 0 12px oklch(0.560 0.200 22 / 0.6),
|
||
0 0 24px oklch(0.560 0.200 22 / 0.25);
|
||
animation-fill-mode: forwards;
|
||
}
|
||
.aa__bad.is-slashed .aa__bad-slash-line {
|
||
animation: aaSlash 520ms cubic-bezier(.6,-0.05,.2,1.2) forwards;
|
||
}
|
||
@keyframes aaSlash {
|
||
from { transform: rotate(-18deg) scaleX(0); }
|
||
to { transform: rotate(-18deg) scaleX(1); }
|
||
}
|
||
|
||
/* 错开每张卡的斜线触发节奏 */
|
||
.aa__grid-slot:nth-child(1) .aa__bad-slash-line { animation-delay: 80ms; }
|
||
.aa__grid-slot:nth-child(2) .aa__bad-slash-line { animation-delay: 180ms; }
|
||
.aa__grid-slot:nth-child(3) .aa__bad-slash-line { animation-delay: 280ms; }
|
||
.aa__grid-slot:nth-child(4) .aa__bad-slash-line { animation-delay: 380ms; }
|
||
.aa__grid-slot:nth-child(5) .aa__bad-slash-line { animation-delay: 480ms; }
|
||
.aa__grid-slot:nth-child(6) .aa__bad-slash-line { animation-delay: 580ms; }
|
||
|
||
.aa__bad-foot {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 14px 18px 16px;
|
||
border-top: 1px solid var(--line-mid);
|
||
background: var(--bg);
|
||
}
|
||
.aa__bad-en {
|
||
font-family: var(--f-mono);
|
||
font-size: 13px;
|
||
letter-spacing: 0.28em;
|
||
text-transform: uppercase;
|
||
color: var(--fg-faint);
|
||
}
|
||
.aa__bad-cn {
|
||
font-family: var(--f-serif);
|
||
font-size: 26px;
|
||
color: var(--fg);
|
||
}
|
||
|
||
.aa__grid-verdict {
|
||
font-family: var(--f-serif);
|
||
font-size: 32px;
|
||
color: var(--fg-soft);
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
.aa__grid-verdict em {
|
||
font-style: italic;
|
||
color: var(--accent);
|
||
}
|
||
.aa__grid-verdict-mark {
|
||
font-family: var(--f-serif);
|
||
font-style: italic;
|
||
font-size: 36px;
|
||
color: var(--crimson);
|
||
}
|
||
|
||
/* ===================== Scene FONTS ===================== */
|
||
|
||
.aa__fonts-scene {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 130px 100px 90px;
|
||
gap: 32px;
|
||
}
|
||
|
||
.aa__fonts-head {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
text-align: center;
|
||
}
|
||
.aa__fonts-num {
|
||
font-family: var(--f-mono);
|
||
font-size: 14px;
|
||
letter-spacing: 0.32em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
}
|
||
.aa__fonts-title {
|
||
font-family: var(--f-serif);
|
||
font-weight: 400;
|
||
font-size: 64px;
|
||
line-height: 1.15;
|
||
color: var(--fg);
|
||
margin: 0;
|
||
}
|
||
.aa__fonts-title em {
|
||
font-style: italic;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.aa__fonts-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 36px;
|
||
width: 100%;
|
||
max-width: 1480px;
|
||
}
|
||
|
||
.aa__fonts-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--bg-2);
|
||
border: 1px solid var(--line-mid);
|
||
border-radius: 4px;
|
||
padding: 22px 28px 26px;
|
||
}
|
||
.aa__fonts-col--ban {
|
||
border-top: 3px solid var(--crimson);
|
||
}
|
||
.aa__fonts-col--alt {
|
||
border-top: 3px solid var(--accent);
|
||
box-shadow: 0 16px 28px -18px oklch(0.700 0.170 42 / 0.35);
|
||
}
|
||
|
||
.aa__fonts-col-tag {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--f-mono);
|
||
font-size: 14px;
|
||
letter-spacing: 0.24em;
|
||
text-transform: uppercase;
|
||
color: var(--fg-mute);
|
||
padding-bottom: 14px;
|
||
margin-bottom: 14px;
|
||
border-bottom: 1px dashed var(--line-mid);
|
||
}
|
||
.aa__fonts-col-mark {
|
||
font-family: var(--f-serif);
|
||
font-style: italic;
|
||
font-size: 22px;
|
||
color: var(--crimson);
|
||
}
|
||
.aa__fonts-col-mark--ok {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.aa__fonts-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.aa__fonts-row {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.2fr auto;
|
||
gap: 16px;
|
||
align-items: center;
|
||
padding: 8px 4px;
|
||
animation: aaFontIn 540ms cubic-bezier(.2,.8,.2,1) backwards;
|
||
}
|
||
@keyframes aaFontIn {
|
||
from { opacity: 0; transform: translateX(-12px); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
.aa__fonts-row-name {
|
||
font-size: 28px;
|
||
color: var(--fg);
|
||
}
|
||
.aa__fonts-row-sample {
|
||
font-size: 24px;
|
||
color: var(--fg-soft);
|
||
}
|
||
.aa__fonts-row-tag {
|
||
font-family: var(--f-mono);
|
||
font-size: 12px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--fg-faint);
|
||
}
|
||
|
||
.aa__fonts-row-strike {
|
||
position: absolute;
|
||
left: -4px;
|
||
right: -4px;
|
||
top: 50%;
|
||
height: 2px;
|
||
background: var(--crimson);
|
||
transform-origin: left;
|
||
transform: translateY(-50%) scaleX(0);
|
||
animation: aaRowStrike 520ms cubic-bezier(.6,-0.05,.2,1.2) forwards;
|
||
opacity: 0.85;
|
||
}
|
||
.aa__fonts-row--ban:nth-child(1) .aa__fonts-row-strike { animation-delay: 480ms; }
|
||
.aa__fonts-row--ban:nth-child(2) .aa__fonts-row-strike { animation-delay: 580ms; }
|
||
.aa__fonts-row--ban:nth-child(3) .aa__fonts-row-strike { animation-delay: 680ms; }
|
||
.aa__fonts-row--ban:nth-child(4) .aa__fonts-row-strike { animation-delay: 780ms; }
|
||
.aa__fonts-row--ban:nth-child(5) .aa__fonts-row-strike { animation-delay: 880ms; }
|
||
@keyframes aaRowStrike {
|
||
to { transform: translateY(-50%) scaleX(1); }
|
||
}
|
||
|
||
.aa__fonts-foot {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
font-family: var(--f-mono);
|
||
font-size: 14px;
|
||
letter-spacing: 0.24em;
|
||
text-transform: uppercase;
|
||
color: var(--fg-mute);
|
||
}
|
||
.aa__fonts-foot span:last-child {
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
.aa__fonts-foot-dot {
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 50%;
|
||
background: var(--fg-faint);
|
||
flex: none;
|
||
}
|