1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Hero-Eyebrow-Chip — Should Flag vs Should Pass</title>
6 <style>
7 /* ─── Layout convention: two-column fixture ─────────────────────────
8 Left column = patterns the rule SHOULD flag.
9 Right column = legitimate patterns the rule should NOT flag.
10 Each test case is annotated with a unique <h1> text so the test
11 can match snippets back to expectations.
12 ──────────────────────────────────────────────────────────────── */
13 body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }
14 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
15 .col h2.col-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
16 .case { margin-bottom: 32px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
17 .case p { font-size: 14px; margin: 12px 0 0; color: #64748b; }
18 .case h1 { margin: 0; font-family: 'Inter', sans-serif; line-height: 1.05; }
19
20 /* Hero size used by most cases */
21 .hero { font-size: 88px; font-weight: 600; }
22
23 /* ── FLAG cases ── */
24
25 .eyebrow-classic {
26 text-transform: uppercase;
27 letter-spacing: 0.15em;
28 font-size: 12px;
29 color: #64748b;
30 font-weight: 600;
31 margin: 0 0 16px;
32 }
33
34 .eyebrow-span {
35 display: inline-block;
36 text-transform: uppercase;
37 letter-spacing: 0.16em;
38 font-size: 11px;
39 color: #475569;
40 font-weight: 600;
41 margin: 0 0 16px;
42 }
43
44 .eyebrow-pill {
45 display: inline-block;
46 text-transform: uppercase;
47 letter-spacing: 0.14em;
48 font-size: 12px;
49 background: #f1f5f9;
50 color: #334155;
51 border-radius: 999px;
52 padding: 4px 12px;
53 font-weight: 600;
54 margin: 0 0 16px;
55 }
56
57 .eyebrow-already-uppercase {
58 letter-spacing: 0.18em;
59 font-size: 11px;
60 color: #b45309;
61 font-weight: 700;
62 margin: 0 0 16px;
63 }
64
65 /* ── PASS cases ── */
66
67 .pass-eyebrow-no-tracking {
68 text-transform: uppercase;
69 letter-spacing: normal;
70 font-size: 12px;
71 color: #64748b;
72 font-weight: 600;
73 margin: 0 0 16px;
74 }
75
76 .pass-body-heading {
77 font-size: 24px;
78 font-weight: 600;
79 font-family: 'Inter', sans-serif;
80 margin: 0;
81 }
82
83 .pass-card-caption {
84 text-transform: uppercase;
85 letter-spacing: 0.18em;
86 font-size: 11px;
87 color: #94a3b8;
88 font-weight: 600;
89 margin: 0 0 8px;
90 }
91
92 .pass-bare-hero {
93 font-size: 64px;
94 }
95
96 .pass-h2-above-h1 {
97 font-size: 14px;
98 text-transform: uppercase;
99 letter-spacing: 0.18em;
100 font-weight: 700;
101 color: #475569;
102 margin: 0 0 16px;
103 font-family: 'Inter', sans-serif;
104 }
105
106 .pass-long-uppercase {
107 text-transform: uppercase;
108 letter-spacing: 0.14em;
109 font-size: 12px;
110 color: #475569;
111 font-weight: 600;
112 margin: 0 0 16px;
113 }
114 </style>
115</head>
116<body>
117 <div class="grid">
118
119 <!-- ════════════════════════════════════════════════════════════════
120 LEFT COLUMN: should flag
121 ═══════════════════════════════════════════════════════════════ -->
122 <div class="col" data-col="flag">
123 <h2 class="col-label">Should flag</h2>
124
125 <div class="case">
126 <div class="eyebrow-classic">AI-NATIVE WORKFLOWS</div>
127 <h1 class="hero">Eyebrow Above Hero</h1>
128 <p>Classic uppercase tracked div eyebrow above an 88px hero.</p>
129 </div>
130
131 <div class="case">
132 <span class="eyebrow-span">NEW IN 2026</span>
133 <h1 class="hero">Span Eyebrow Above Hero</h1>
134 <p>Span variant with the same uppercase + tracking + small-size shape.</p>
135 </div>
136
137 <div class="case">
138 <span class="eyebrow-pill">FEATURED</span>
139 <h1 class="hero">Pill Chip Above Hero</h1>
140 <p>Pill-shaped chip with background, border-radius, padding.</p>
141 </div>
142
143 <div class="case">
144 <span class="eyebrow-already-uppercase">NEW</span>
145 <h1 class="hero">Already Uppercase Text</h1>
146 <p>Text typed uppercase, no text-transform, but matching tracking and size.</p>
147 </div>
148
149 <div class="case">
150 <div class="eyebrow-classic">SECTION KICKER</div>
151 <h1 class="pass-body-heading">Body-Sized Heading Below Eyebrow</h1>
152 <p>Eyebrow above a 24px h1. Modern hero h1s use clamp() / vw / var() that jsdom can't resolve, so the rule no longer gates on heading font size — a tracked-caps label above any h1 is the antipattern shape.</p>
153 </div>
154
155 <div class="case">
156 <div class="pass-long-uppercase">A VERY LONG UPPERCASE TABLE OF CONTENTS HEADER</div>
157 <h1 class="hero">Long Uppercase Sentence Above Hero</h1>
158 <p>46-char uppercase tracked label — under the 60-char eyebrow ceiling, so it still reads as an oversized eyebrow.</p>
159 </div>
160 </div>
161
162 <!-- ════════════════════════════════════════════════════════════════
163 RIGHT COLUMN: should pass
164 ═══════════════════════════════════════════════════════════════ -->
165 <div class="col" data-col="pass">
166 <h2 class="col-label">Should pass</h2>
167
168 <div class="case">
169 <div class="pass-eyebrow-no-tracking">UPPERCASE LABEL</div>
170 <h1 class="hero">Eyebrow With Normal Tracking</h1>
171 <p>Uppercase label above a hero but with letter-spacing: normal.</p>
172 </div>
173
174 <div class="case">
175 <div class="pass-card-caption">CARD CAPTION</div>
176 <p>Plain body text below the caption.</p>
177 <h1 class="hero" style="margin-top:32px">Uppercase Caption Far From Hero</h1>
178 <p>Hero exists, but its preceding sibling is a paragraph, not the eyebrow.</p>
179 </div>
180
181 <div class="case">
182 <h1 class="pass-bare-hero">Hero With No Eyebrow</h1>
183 <p>Bare h1 at 64px, nothing above it.</p>
184 </div>
185
186 <div class="case">
187 <h2 class="pass-h2-above-h1">SECTION HEADING</h2>
188 <h1 class="hero">Heading Above Heading</h1>
189 <p>An h2 styled like an eyebrow above an h1 — heading-tag exclusion must skip this.</p>
190 </div>
191
192 </div>
193
194 </div>
195</body>
196</html>