Skip to content

Commit 33ef356

Browse files
NickCollectNickCollect
committed
move hero crt to right column; revert to system font stack
- relocate the crt monitor (and its three light layers) from bottom-center to the upper-right column of the hero, vertically aligned with the display headline - crt now flows naturally inside the title row's flex column instead of being absolutely positioned to the hero bottom - light layers (corecast / uplight / floorpool) re-anchored to the column so the glow follows the crt - drop google fonts cdn (instrument serif / inter / noto serif sc / jetbrains mono); revert to the original system stack: pingfang sc / sf pro / noto sans sc for sans, sf mono for mono - redefine .font-display to system sans at weight 800 so headline punch is preserved without a serif
1 parent b4cfcb6 commit 33ef356

3 files changed

Lines changed: 82 additions & 95 deletions

File tree

‎src/components/Hero.astro‎

Lines changed: 73 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,6 @@ const finalLine = isZh ? '让字幕成为桥梁_' : 'SUBTITLES AS A BRIDGE_';
1919
<div class="absolute inset-0 bg-grid opacity-60 pointer-events-none"></div>
2020
<div class="absolute inset-0 vignette-top pointer-events-none"></div>
2121

22-
<!-- Light layers — phosphor cone reaching up the hero -->
23-
<div class="crt-light-layer" aria-hidden="true">
24-
<div class="crt-uplight"></div>
25-
<div class="crt-floorpool"></div>
26-
<div class="crt-corecast"></div>
27-
</div>
28-
2922
<!-- Yellow corner mark -->
3023
<div class="absolute top-24 left-5 sm:left-8 lg:left-12 flex items-center gap-3 z-10">
3124
<span class="inline-block w-2 h-2 rounded-full bg-signal-yellow animate-pulse"></span>
@@ -41,19 +34,55 @@ const finalLine = isZh ? '让字幕成为桥梁_' : 'SUBTITLES AS A BRIDGE_';
4134
</div>
4235

4336
<!-- Main content -->
44-
<div class="relative z-[5] max-w-[1400px] w-full mx-auto px-5 sm:px-8 lg:px-12 pt-32 pb-[26rem]">
45-
46-
<!-- Display lockup -->
47-
<div class="word-reveal">
48-
<h1 class="font-display text-display text-bone leading-[0.92] tracking-tightest">
49-
<span class="word"><span>{t('home.hero.line1')}</span></span>
50-
<br/>
51-
<span class="word"><span class="font-display-italic text-signal-yellow">{t('home.hero.line2')}</span></span>
52-
</h1>
37+
<div class="relative z-[5] max-w-[1400px] w-full mx-auto px-5 sm:px-8 lg:px-12 pt-32 pb-32">
38+
39+
<!-- Title row: display lockup on left, CRT (with its own light) on right -->
40+
<div class="grid lg:grid-cols-12 gap-8 items-center">
41+
<div class="lg:col-span-7 word-reveal">
42+
<h1 class="font-display text-display text-bone leading-[0.92] tracking-tightest">
43+
<span class="word"><span>{t('home.hero.line1')}</span></span>
44+
<br/>
45+
<span class="word"><span class="font-display-italic text-signal-yellow">{t('home.hero.line2')}</span></span>
46+
</h1>
47+
</div>
48+
49+
<!-- CRT slot: contains both the monitor body and its own light halo -->
50+
<div class="lg:col-span-5 hidden lg:flex relative justify-center items-center min-h-[280px]" aria-hidden="true">
51+
<!-- Light layers — emanate from this column, scoped to the CRT -->
52+
<div class="crt-light-layer">
53+
<div class="crt-uplight"></div>
54+
<div class="crt-floorpool"></div>
55+
<div class="crt-corecast"></div>
56+
</div>
57+
<!-- CRT body itself -->
58+
<div class="crt-stage">
59+
<div class="crt-body">
60+
<div class="crt-vents"></div>
61+
<div class="crt-screen-recess">
62+
<div class="crt-screen">
63+
<div class="crt-text" id="crtText">
64+
<span class="ts">[ MONTAGESUBS / TTY0 ]</span>
65+
<span class="line" id="crtLine1"></span>
66+
<span class="line" id="crtLine2"></span>
67+
<span class="line" id="crtLine3"></span>
68+
<span class="line" id="crtLine4"></span>
69+
<span class="line" id="crtLine5"><span class="cursor" id="crtCursor"></span></span>
70+
</div>
71+
<div class="crt-screen-vignette"></div>
72+
<div class="crt-scanlines"></div>
73+
<div class="crt-scanbeam"></div>
74+
<div class="crt-boot-line" id="crtBootLine"></div>
75+
</div>
76+
</div>
77+
<div class="crt-led"></div>
78+
<div class="crt-label">MONTAGE-CRT 14"</div>
79+
</div>
80+
</div>
81+
</div>
5382
</div>
5483

5584
<!-- Subhead row -->
56-
<div class="reveal mt-12 grid lg:grid-cols-12 gap-8 items-end">
85+
<div class="reveal mt-16 grid lg:grid-cols-12 gap-8 items-end">
5786
<div class="lg:col-span-5">
5887
<p class="font-display-italic text-2xl sm:text-3xl text-bone-dim leading-snug">
5988
“{t('home.hero.serif')}”
@@ -80,37 +109,12 @@ const finalLine = isZh ? '让字幕成为桥梁_' : 'SUBTITLES AS A BRIDGE_';
80109
</div>
81110

82111
<!-- Scroll cue -->
83-
<div class="absolute bottom-8 left-5 sm:left-8 lg:left-12 hidden md:flex items-center gap-3 reveal">
112+
<div class="mt-20 hidden md:flex items-center gap-3 reveal">
84113
<span class="font-mono text-[10px] text-bone-mute uppercase tracking-[0.22em]">{t('home.hero.scroll')}</span>
85114
<span class="block w-12 h-px bg-bone/30"></span>
86115
</div>
87116
</div>
88117

89-
<!-- CRT monitor — anchored at hero bottom, scrolls away with the page -->
90-
<div class="crt-stage" aria-hidden="true">
91-
<div class="crt-body">
92-
<div class="crt-vents"></div>
93-
<div class="crt-screen-recess">
94-
<div class="crt-screen">
95-
<div class="crt-text" id="crtText">
96-
<span class="ts">[ MONTAGESUBS / TTY0 ]</span>
97-
<span class="line" id="crtLine1"></span>
98-
<span class="line" id="crtLine2"></span>
99-
<span class="line" id="crtLine3"></span>
100-
<span class="line" id="crtLine4"></span>
101-
<span class="line" id="crtLine5"><span class="cursor" id="crtCursor"></span></span>
102-
</div>
103-
<div class="crt-screen-vignette"></div>
104-
<div class="crt-scanlines"></div>
105-
<div class="crt-scanbeam"></div>
106-
<div class="crt-boot-line" id="crtBootLine"></div>
107-
</div>
108-
</div>
109-
<div class="crt-led"></div>
110-
<div class="crt-label">MONTAGE-CRT 14"</div>
111-
</div>
112-
</div>
113-
114118
</section>
115119

116120
<style is:global>
@@ -121,33 +125,31 @@ const finalLine = isZh ? '让字幕成为桥梁_' : 'SUBTITLES AS A BRIDGE_';
121125
--crt-phosphor-pale: #FEF9C3;
122126
}
123127

124-
/* Light layers — anchored to hero, NOT fixed; scroll naturally with the page */
128+
/* Light layers — anchored to the CRT column; bleed outward into the surrounding hero */
125129
.hero-stage .crt-light-layer {
126130
position: absolute;
127-
left: 0; right: 0; bottom: 0;
128-
height: 100%;
131+
inset: 0;
129132
z-index: 1;
130133
pointer-events: none;
134+
overflow: visible;
131135
}
132136

133-
/* CRT stage — anchored absolutely at hero bottom, scrolls naturally */
137+
/* CRT stage — flows naturally inside the flex column, scrolls with the page */
134138
.hero-stage .crt-stage {
135-
position: absolute;
136-
left: 50%; bottom: 3rem;
137-
transform: translateX(-50%);
139+
position: relative;
138140
width: 360px; height: 280px;
139141
z-index: 2;
140142
pointer-events: none;
141143
opacity: var(--crt-visible, 0);
142144
transition: opacity 0.6s ease;
143145
}
144146

145-
/* Bright phosphor "core" right behind the screen — illuminates the page */
147+
/* Bright phosphor "core" — tight halo right behind the screen */
146148
.hero-stage .crt-corecast {
147149
position: absolute;
148-
left: 50%; bottom: calc(3rem + 100px);
150+
left: 50%; top: 50%;
149151
width: 720px; height: 520px;
150-
transform: translate(-50%, 50%) scale(var(--glow-scale, 0));
152+
transform: translate(-50%, -50%) scale(var(--glow-scale, 0));
151153
background: radial-gradient(ellipse 60% 55% at 50% 50%,
152154
rgba(254, 243, 199, 0.55) 0%,
153155
rgba(250, 204, 21, 0.32) 18%,
@@ -164,45 +166,42 @@ const finalLine = isZh ? '让字幕成为桥梁_' : 'SUBTITLES AS A BRIDGE_';
164166
50% { filter: blur(2px) brightness(1.05); }
165167
}
166168

167-
/* Upward light cone reaching the hero text */
169+
/* Larger ambient cone — bleeds left into the title area */
168170
.hero-stage .crt-uplight {
169171
position: absolute;
170-
left: 50%; bottom: 0;
171-
width: 1300px;
172-
height: 100%;
173-
transform: translateX(-50%) scale(var(--glow-scale, 0));
174-
transform-origin: bottom center;
172+
left: 50%; top: 50%;
173+
width: 1200px; height: 800px;
174+
transform: translate(-50%, -50%) scale(var(--glow-scale, 0));
175175
background:
176-
radial-gradient(ellipse 42% 65% at 50% 100%,
177-
rgba(253, 224, 71, 0.28) 0%,
178-
rgba(245, 158, 11, 0.16) 18%,
179-
rgba(180, 83, 9, 0.08) 38%,
180-
rgba(120, 53, 15, 0.03) 60%,
181-
transparent 82%);
176+
radial-gradient(ellipse 50% 50% at 50% 50%,
177+
rgba(253, 224, 71, 0.22) 0%,
178+
rgba(245, 158, 11, 0.12) 20%,
179+
rgba(180, 83, 9, 0.05) 45%,
180+
transparent 70%);
182181
mix-blend-mode: screen;
183182
pointer-events: none;
184183
transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
185-
filter: blur(3px);
184+
filter: blur(8px);
186185
animation: crt-uplight-breathe 5.2s ease-in-out infinite;
187186
}
188187
@keyframes crt-uplight-breathe {
189188
0%, 100% { opacity: 0.92; }
190189
50% { opacity: 1.04; }
191190
}
192191

193-
/* Floor pool — light spilling on the desk surface */
192+
/* Soft pool below the CRT — like reflected light on a surface */
194193
.hero-stage .crt-floorpool {
195194
position: absolute;
196-
left: 50%; bottom: calc(3rem - 30px);
197-
width: 720px; height: 130px;
195+
left: 50%; top: calc(50% + 160px);
196+
width: 600px; height: 110px;
198197
transform: translateX(-50%) scale(var(--glow-scale, 0));
199198
background: radial-gradient(ellipse 50% 50% at 50% 50%,
200-
rgba(253, 224, 71, 0.38) 0%,
201-
rgba(245, 158, 11, 0.18) 30%,
202-
rgba(180, 83, 9, 0.06) 60%,
203-
transparent 80%);
199+
rgba(253, 224, 71, 0.32) 0%,
200+
rgba(245, 158, 11, 0.14) 35%,
201+
rgba(180, 83, 9, 0.05) 65%,
202+
transparent 82%);
204203
mix-blend-mode: screen;
205-
filter: blur(10px);
204+
filter: blur(12px);
206205
transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
207206
}
208207

‎src/styles/global.css‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
/* ============================================================
22
MontageSubs — Global Styles
3-
Editorial × Engineering, dark, single-accent yellow.
3+
Dark, single-accent yellow. System fonts only.
44
============================================================ */
55

6-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;700&display=swap');
7-
86
@tailwind base;
97
@tailwind components;
108
@tailwind utilities;
@@ -24,7 +22,7 @@
2422
html {
2523
background: var(--ink);
2624
color: var(--bone);
27-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', sans-serif;
25+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
2826
-webkit-font-smoothing: antialiased;
2927
-moz-osx-font-smoothing: grayscale;
3028
text-rendering: optimizeLegibility;
@@ -50,18 +48,18 @@
5048
@layer components {
5149
/* ───────── Type system ───────── */
5250
.font-display {
53-
font-family: 'Instrument Serif', 'Noto Serif SC', Georgia, serif;
54-
font-weight: 400;
51+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
52+
font-weight: 800;
5553
font-style: normal;
5654
}
5755
.font-display-italic {
58-
font-family: 'Instrument Serif', 'Noto Serif SC', Georgia, serif;
56+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
5957
font-style: italic;
60-
font-weight: 400;
58+
font-weight: 800;
6159
}
6260

6361
.micro-label {
64-
font-family: 'JetBrains Mono', monospace;
62+
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
6563
font-size: 11px;
6664
letter-spacing: 0.18em;
6765
text-transform: uppercase;

‎tailwind.config.mjs‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export default {
2626
},
2727
fontFamily: {
2828
sans: [
29-
'Inter',
3029
'-apple-system',
3130
'BlinkMacSystemFont',
3231
'"Segoe UI"',
@@ -35,15 +34,7 @@ export default {
3534
'"Microsoft YaHei"',
3635
'sans-serif',
3736
],
38-
serif: [
39-
'"Instrument Serif"',
40-
'"Noto Serif SC"',
41-
'Georgia',
42-
'"Songti SC"',
43-
'serif',
44-
],
4537
mono: [
46-
'"JetBrains Mono"',
4738
'ui-monospace',
4839
'SFMono-Regular',
4940
'"SF Mono"',
@@ -88,8 +79,8 @@ export default {
8879
color: theme('colors.signal.yellow'),
8980
'&:hover': { color: theme('colors.signal.yellow-soft') },
9081
},
91-
h1: { color: theme('colors.bone.DEFAULT'), fontFamily: 'Instrument Serif, serif', fontWeight: '400' },
92-
h2: { color: theme('colors.bone.DEFAULT'), fontFamily: 'Instrument Serif, serif', fontWeight: '400' },
82+
h1: { color: theme('colors.bone.DEFAULT'), fontWeight: '800' },
83+
h2: { color: theme('colors.bone.DEFAULT'), fontWeight: '800' },
9384
h3: { color: theme('colors.bone.DEFAULT') },
9485
h4: { color: theme('colors.bone.DEFAULT') },
9586
strong: { color: theme('colors.bone.DEFAULT') },
@@ -98,7 +89,6 @@ export default {
9889
backgroundColor: theme('colors.ink.700'),
9990
padding: '0.2em 0.4em',
10091
borderRadius: '0.25rem',
101-
fontFamily: 'JetBrains Mono, monospace',
10292
},
10393
blockquote: {
10494
borderLeftColor: theme('colors.signal.yellow'),

0 commit comments

Comments
 (0)