Setting the file. One moment. 34.9
Academic
(opens in a new tab)
references/styles/academic.html
HTML·172 lines·6 KB
16 content: 访谈反思 / 学术总结 / 长视频拆解
17-->
18<!doctype html>
19<html lang="zh-CN">
20 <head>
21 <meta charset="utf-8" />
22 <title>style · academic</title>
23 <style>
24 /* preview wrapper — NOT part of the card fragment */
25 html,
26 body {
27 margin: 0;
28 padding: 0;
29 background: #0a0c12;
30 font-family: ui-sans-serif, system-ui, sans-serif;
31 }
32 .stage {
33 position: relative;
34 width: 1920px;
35 height: 1080px;
36 transform-origin: top left;
37 transform: scale(0.5);
38 overflow: hidden;
39 }
40 .card-host {
41 position: absolute;
42 left: 0;
43 top: 0;
44 width: 1920px;
45 height: 1080px;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="stage">
51 <div class="card-host">
52 <div class="card" data-card-id="ref-academic">
53 <style>
54 .card[data-card-id="ref-academic"] .root {
55 --bg: #f1ead8;
56 --ink: #1a1d2b;
57 --muted: #5b5749;
58 --accent: #2557a7;
59 --accent2: #c14d2c;
60 --font-head: ui-serif, "Songti SC", "Times New Roman", serif;
61 --font-body: ui-serif, "Songti SC", "Times New Roman", serif;
62 --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
63
64 width: 100%;
65 height: 100%;
66 position: relative;
67 overflow: hidden;
68 background-color: var(--bg);
69 background-image:
70 linear-gradient(rgba(91, 87, 73, 0.2) 1px, transparent 1px),
71 linear-gradient(90deg, rgba(91, 87, 73, 0.2) 1px, transparent 1px),
72 radial-gradient(120% 80% at 50% 0%, #fff8e9 0%, transparent 60%);
73 background-size:
74 28px 28px,
75 28px 28px,
76 100% 100%;
77 padding: 32px 40px;
78 box-sizing: border-box;
79 display: flex;
80 flex-direction: column;
81 justify-content: center;
82 gap: 16px;
83 color: var(--ink);
84 font-family: var(--font-body);
85 }
86 .card[data-card-id="ref-academic"] .meta {
87 display: flex;
88 align-items: baseline;
89 gap: 14px;
90 }
91 .card[data-card-id="ref-academic"] .kicker {
92 padding: 7px 14px;
93 background: var(--accent);
94 color: #fff;
95 font: 700 16px/1 var(--font-mono);
96 letter-spacing: 0.16em;
97 }
98 .card[data-card-id="ref-academic"] .time {
99 font: 15px/1 var(--font-mono);
100 color: var(--muted);
101 letter-spacing: 0.1em;
102 }
103 .card[data-card-id="ref-academic"] .title {
104 margin: 0;
105 font: 700 92px/1.05 var(--font-head);
106 color: var(--ink);
107 letter-spacing: 0.01em;
108 display: inline;
109 background: linear-gradient(
110 transparent 62%,
111 rgba(37, 87, 167, 0.2) 62%,
112 rgba(37, 87, 167, 0.2) 92%,
113 transparent 92%
114 );
115 -webkit-box-decoration-break: clone;
116 box-decoration-break: clone;
117 padding: 0 8px;
118 }
119 .card[data-card-id="ref-academic"] .detail {
120 margin: 0;
121 font: 30px/1.5 var(--font-body);
122 color: var(--muted);
123 max-width: 94%;
124 }
125 .card[data-card-id="ref-academic"] .hl {
126 background: linear-gradient(transparent 60%, rgba(37, 87, 167, 0.25) 60%);
127 padding: 0 4px;
128 }
129 .card[data-card-id="ref-academic"] .quote {
130 align-self: flex-start;
131 padding: 10px 18px;
132 border: 1.5px dashed var(--accent2);
133 color: var(--accent2);
134 font: italic 600 24px/1 var(--font-head);
135 transform: rotate(-1deg);
136 }
137 </style>
138
139 <div class="root">
140 <div class="meta">
141 <span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
142 >TAKEAWAY</span
143 >
144 <span class="time">00:18 → 00:46</span>
145 </div>
146
147 <h2
148 class="title"
149 data-anim="kinetic-chars"
150 data-anim-at="0.25"
151 data-anim-duration="0.55"
152 data-anim-stagger="0.04"
153 data-anim-pattern="pop"
154 >
155 <span class="char">少</span><span class="char">即</span><span class="char">是</span>
156 <span class="char">多</span>
157 </h2>
158
159 <p class="detail" data-anim="fade-in" data-anim-at="0.7" data-anim-duration="0.45">
160 复杂的解释往往是<span class="hl">未经压缩的思考</span
161 >。当你能用最少的词说清最重要的点时， 你也就真正想明白了这件事。
162 </p>
163
164 <div class="quote" data-anim="scale-pop" data-anim-at="1.05" data-anim-duration="0.5">
165 "Compression is comprehension."
166 </div>
167 </div>
168 </div>
169 </div>
170 </div>
171 </body>
172</html>