1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Italic-Serif-Display — 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>/<h2>/<blockquote>
11 text so the test 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
19 /* ── FLAG cases ── */
20
21 /* 1: Fraunces 88px italic — the Lumina hero pattern */
22 .hero-fraunces {
23 font-family: 'Fraunces', Georgia, serif;
24 font-style: italic;
25 font-size: 88px;
26 font-weight: 400;
27 line-height: 1.05;
28 margin: 0;
29 }
30
31 /* 2: Recoleta 64px italic */
32 .hero-recoleta {
33 font-family: 'Recoleta', serif;
34 font-style: italic;
35 font-size: 64px;
36 font-weight: 400;
37 margin: 0;
38 }
39
40 /* 3: Playfair Display 72px italic */
41 .hero-playfair {
42 font-family: 'Playfair Display', serif;
43 font-style: italic;
44 font-size: 72px;
45 font-weight: 500;
46 margin: 0;
47 }
48
49 /* 4: Unknown serif primary, but generic `serif` fallback in stack */
50 .hero-unknown-serif {
51 font-family: 'CustomSerifFace', serif;
52 font-style: italic;
53 font-size: 56px;
54 font-weight: 400;
55 margin: 0;
56 }
57
58 /* ── PASS cases ── */
59
60 /* a: italic, but sans-serif primary (Karla) — italic display in a sans is rare and usually intentional */
61 .pass-sans-italic {
62 font-family: 'Karla', sans-serif;
63 font-style: italic;
64 font-size: 64px;
65 font-weight: 600;
66 margin: 0;
67 }
68
69 /* b: serif at 88px, but font-style: normal */
70 .pass-roman-serif {
71 font-family: 'Fraunces', Georgia, serif;
72 font-style: normal;
73 font-size: 88px;
74 font-weight: 600;
75 margin: 0;
76 }
77
78 /* c: italic serif blockquote at 24px (genuine pull quote, not a hero) */
79 .pass-pull-quote {
80 font-family: 'Fraunces', Georgia, serif;
81 font-style: italic;
82 font-size: 24px;
83 font-weight: 400;
84 margin: 0;
85 color: #334155;
86 }
87
88 /* d: roman h1 with an italic <em> inside — v1 explicitly does NOT flag this */
89 .pass-roman-h1-em-italic {
90 font-family: 'Inter', sans-serif;
91 font-style: normal;
92 font-size: 72px;
93 font-weight: 600;
94 margin: 0;
95 }
96 .pass-roman-h1-em-italic em {
97 font-family: 'Fraunces', Georgia, serif;
98 font-style: italic;
99 font-weight: 400;
100 }
101
102 /* e: italic serif h2 at 32px — under the 48px hero threshold */
103 .pass-italic-serif-32 {
104 font-family: 'Fraunces', Georgia, serif;
105 font-style: italic;
106 font-size: 32px;
107 font-weight: 400;
108 margin: 0;
109 }
110
111 /* f: baseline-clean h1 — sans-serif roman */
112 .pass-h1-sans-roman {
113 font-family: 'Inter', sans-serif;
114 font-style: normal;
115 font-size: 64px;
116 font-weight: 700;
117 margin: 0;
118 }
119 </style>
120</head>
121<body>
122 <div class="grid">
123
124 <!-- ════════════════════════════════════════════════════════════════
125 LEFT COLUMN: should flag
126 ═══════════════════════════════════════════════════════════════ -->
127 <div class="col" data-col="flag">
128 <h2 class="col-label">Should flag</h2>
129
130 <div class="case">
131 <h1 class="hero-fraunces">Fraunces 88px italic</h1>
132 <p>The Lumina hero pattern: oversized Fraunces italic display.</p>
133 </div>
134
135 <div class="case">
136 <h1 class="hero-recoleta">Recoleta 64px italic</h1>
137 <p>Recoleta italic at 64px, generic serif fallback.</p>
138 </div>
139
140 <div class="case">
141 <h1 class="hero-playfair">Playfair 72px italic</h1>
142 <p>Playfair Display italic at hero scale.</p>
143 </div>
144
145 <div class="case">
146 <h1 class="hero-unknown-serif">Unknown Serif Generic Fallback</h1>
147 <p>Primary font unknown to the detector, but the stack ends in generic serif.</p>
148 </div>
149 </div>
150
151 <!-- ════════════════════════════════════════════════════════════════
152 RIGHT COLUMN: should pass
153 ═══════════════════════════════════════════════════════════════ -->
154 <div class="col" data-col="pass">
155 <h2 class="col-label">Should pass</h2>
156
157 <div class="case">
158 <h1 class="pass-sans-italic">Sans Italic Display</h1>
159 <p>Italic at hero scale, but in a sans-serif face.</p>
160 </div>
161
162 <div class="case">
163 <h1 class="pass-roman-serif">Roman Serif Display</h1>
164 <p>Fraunces at 88px, but font-style is normal (not italic).</p>
165 </div>
166
167 <div class="case">
168 <blockquote class="pass-pull-quote">Italic Serif Pull Quote</blockquote>
169 <p>Italic serif at 24px is a legitimate pull-quote pattern, not a hero.</p>
170 </div>
171
172 <div class="case">
173 <h1 class="pass-roman-h1-em-italic">Inline Em Inside <em>Roman</em></h1>
174 <p>Roman h1 with an inline italic em — v1 deliberately does not flag this.</p>
175 </div>
176
177 <div class="case">
178 <h2 class="pass-italic-serif-32">Italic Serif at 32px</h2>
179 <p>Italic serif h2 below the 48px hero threshold.</p>
180 </div>
181
182 <div class="case">
183 <h1 class="pass-h1-sans-roman">h1 Sans-Serif Roman</h1>
184 <p>Baseline-clean control: sans-serif, roman, hero scale.</p>
185 </div>
186 </div>
187
188 </div>
189</body>
190</html>