frontend: refonte éditoriale v2 (typo géante, brush, tuiles à filet)
Aligne Ka·Stats sur la nouvelle DA lou-ka/vrai-prix : héro typographique sans bande teintée, .hl converti en souligné brush SVG bleu Québec, chips du héro transformées en ligne de données mono + filets, tuiles KPI/indicateurs/records à filet (zéro boîte), cartes de graphique et studio en hairline au lieu de l ombre décalée dure. CSS pur, aucun changement d app.js/charts.js. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +66 −0
modified
public/styles.css
+66 −0
@@ -347,3 +347,69 @@ figure.viz-card { margin-left: 0; margin-right: 0; } | ||
| 347 | 347 | .hero { padding-top: var(--sp-6); } |
| 348 | 348 | .viz-data .tbl-wrap { max-height: 260px; } |
| 349 | 349 | } |
| 350 | + | |
| 351 | +/* ============================================================================= | |
| 352 | + KA ÉDITORIAL v2 (2026-08-25) — aligné sur la refonte lou-ka / vrai-prix : | |
| 353 | + typo géante, soulignés « brush » SVG, tuiles à filet (zéro boîte), cartes | |
| 354 | + de graphique en hairline. Bloc volontairement en FIN de fichier : il | |
| 355 | + surcharge la v1 « boîtes + ombres dures » sans toucher au markup (app.js). | |
| 356 | + ========================================================================== */ | |
| 357 | +:root { --hairline: rgba(20, 24, 20, 0.14); --hairline-strong: rgba(20, 24, 20, 0.6); } | |
| 358 | + | |
| 359 | +/* .hl : la pastille tournée devient un souligné brush (bleu Québec) */ | |
| 360 | +.hl { | |
| 361 | + background: transparent; color: inherit; border-radius: 0; transform: none; | |
| 362 | + position: relative; display: inline-block; padding: 0 0.06em; z-index: 0; | |
| 363 | +} | |
| 364 | +.hl::after { | |
| 365 | + content: ""; position: absolute; left: -3%; right: -3%; bottom: 0.05em; height: 0.34em; | |
| 366 | + z-index: -1; transform: rotate(-0.6deg); | |
| 367 | + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M5 17 C 60 8, 118 21, 168 13 S 258 10, 295 15' fill='none' stroke='%23095797' stroke-width='11' stroke-linecap='round' opacity='.35'/%3E%3C/svg%3E") no-repeat center / 100% 100%; | |
| 368 | +} | |
| 369 | + | |
| 370 | +/* héros : composition typographique pleine page, plus de bande teintée */ | |
| 371 | +.hero { background: var(--paper); border-bottom: 1px solid var(--hairline-strong); padding: 72px 0 52px; } | |
| 372 | +.hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.045em; max-width: 1000px; } | |
| 373 | +.page-head, .site-head { background: var(--paper); border-bottom: 1px solid var(--hairline-strong); } | |
| 374 | + | |
| 375 | +/* chips du héros → ligne de données vivantes (mono + filets) */ | |
| 376 | +.hero-chips { gap: 0; row-gap: 10px; align-items: baseline; } | |
| 377 | +.hero-chips .chip { | |
| 378 | + border: 0; border-radius: 0; background: transparent; min-height: 0; | |
| 379 | + padding: 0 14px 0 0; margin-right: 14px; border-right: 1px solid var(--hairline); | |
| 380 | + font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); | |
| 381 | +} | |
| 382 | +.hero-chips .chip:last-child { border-right: 0; margin-right: 0; padding-right: 0; } | |
| 383 | +.hero-chips .chip-accent { | |
| 384 | + color: var(--accent-deep); font-weight: 700; text-transform: uppercase; | |
| 385 | + font-size: 10.5px; letter-spacing: 0.16em; border-right-color: var(--hairline-strong); | |
| 386 | +} | |
| 387 | +@media (max-width: 640px) { | |
| 388 | + .hero-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-right: -16px; padding-right: 16px; } | |
| 389 | + .hero-chips::-webkit-scrollbar { display: none; } | |
| 390 | +} | |
| 391 | + | |
| 392 | +/* période : bande discrète à filet */ | |
| 393 | +.period-bar { background: transparent; border-bottom: 1px solid var(--hairline); } | |
| 394 | +.pill { border-color: var(--hairline-strong); border-width: 1px; background: transparent; } | |
| 395 | +.pill.active { background: var(--ink); border-color: var(--ink); } | |
| 396 | + | |
| 397 | +/* cartes : hairline discrète au lieu de l'encre 1.5px + ombre décalée */ | |
| 398 | +.card { border: 1px solid var(--hairline-strong); box-shadow: none; } | |
| 399 | +.card-hover:hover { transform: none; box-shadow: none; } | |
| 400 | +.viz-card { border: 1px solid var(--hairline-strong); box-shadow: none; } | |
| 401 | +.studio.card, .studio { border: 1px solid var(--hairline-strong); box-shadow: none; } | |
| 402 | + | |
| 403 | +/* KPI, indicateurs, records, jauges : tuiles magazine à filet, zéro boîte */ | |
| 404 | +.kpi.card, .kpi { border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: transparent; box-shadow: none; padding: 14px 2px 0; } | |
| 405 | +.kpi-grid { gap: 24px 30px; } | |
| 406 | +.kpi-value { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.03em; } | |
| 407 | +.ind-card.card, .ind-card { border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: transparent; box-shadow: none; padding: 14px 2px 0; } | |
| 408 | +.rec-card.card, .rec-card { border: 0; border-top: 3px solid var(--accent); border-left: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 14px 2px 0; } | |
| 409 | +.ind-grid, .rec-grid { gap: 24px 30px; } | |
| 410 | +.viz-gauge.card, .viz-gauge { box-shadow: none; } | |
| 411 | + | |
| 412 | +/* chips & résumés statistiques : filets légers */ | |
| 413 | +.chip { border-width: 1px; border-color: var(--hairline-strong); background: transparent; } | |
| 414 | +.chip-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } | |
| 415 | +.viz-stat { background: transparent; border-color: var(--hairline); } | |
| 350 | 416 | |