feat(articles): visual upgrades — timeline, callouts, cards, severity pills
Add 4 reusable CSS article components and apply them across 6 cornerstone articles: CSS (input.css): - article-timeline: horizontal phase diagram with numbered cards, collapses to vertical on mobile - article-callout (warning/tip/info): left-bordered callout boxes with icon and title - article-cards: 2-col grid of accent-topped cards (success/failure/neutral/established/growth/emerging) - severity: inline pill badges (high/medium-high/medium/low-medium/low) for risk tables Articles updated: - padel-hall-build-guide-en + padel-halle-bauen-de: ASCII code block → timeline HTML; 3 bold/blockquote warnings → callout boxes; success/failure patterns → 4 cards - padel-hall-investment-risks-en + padel-halle-risiken-de: risk overview table severity → pills; personal guarantee section → callout; risk management section → 4 cards - padel-hall-location-guide-en + padel-standort-analyse-de: market maturity paragraphs → 3 stage cards Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
@@ -570,6 +570,270 @@
|
||||
@apply px-4 pb-4 text-slate-dark;
|
||||
}
|
||||
|
||||
/* ── Article Timeline (phase/process diagrams) ── */
|
||||
.article-timeline {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin: 1.5rem 0 2rem;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.article-timeline__phase {
|
||||
flex: 1;
|
||||
min-width: 130px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
/* Connecting line between phases */
|
||||
.article-timeline__phase + .article-timeline__phase::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: calc(-50% + 22px);
|
||||
right: calc(50% + 22px);
|
||||
height: 2px;
|
||||
background: #CBD5E1;
|
||||
z-index: 0;
|
||||
}
|
||||
.article-timeline__phase + .article-timeline__phase::after {
|
||||
content: '›';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: calc(-50% + 18px);
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
color: #94A3B8;
|
||||
z-index: 1;
|
||||
}
|
||||
.article-timeline__num {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: #0F172A;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.article-timeline__card {
|
||||
margin-top: 0.75rem;
|
||||
background: #F8FAFC;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 0.875rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.article-timeline__title {
|
||||
font-weight: 700;
|
||||
font-size: 0.8125rem;
|
||||
color: #0F172A;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.25rem;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.article-timeline__subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: #64748B;
|
||||
margin-bottom: 0.375rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.article-timeline__meta {
|
||||
font-size: 0.6875rem;
|
||||
color: #94A3B8;
|
||||
line-height: 1.4;
|
||||
}
|
||||
/* Mobile: vertical timeline */
|
||||
@media (max-width: 600px) {
|
||||
.article-timeline {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
overflow-x: visible;
|
||||
}
|
||||
.article-timeline__phase {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
min-width: auto;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.article-timeline__phase + .article-timeline__phase::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(-0.375rem);
|
||||
left: 21px;
|
||||
right: auto;
|
||||
width: 2px;
|
||||
height: 0.75rem;
|
||||
background: #CBD5E1;
|
||||
}
|
||||
.article-timeline__phase + .article-timeline__phase::after {
|
||||
content: '›';
|
||||
position: absolute;
|
||||
top: calc(-0.3rem);
|
||||
left: 15px;
|
||||
font-size: 0.9rem;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.article-timeline__card {
|
||||
margin-top: 0;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
}
|
||||
.article-timeline__num {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Article Callout Boxes ── */
|
||||
.article-callout {
|
||||
display: flex;
|
||||
gap: 0.875rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.article-callout::before {
|
||||
font-size: 1.1rem;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.article-callout__body {
|
||||
flex: 1;
|
||||
}
|
||||
.article-callout__title {
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.375rem;
|
||||
display: block;
|
||||
}
|
||||
.article-callout p {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.article-callout--warning {
|
||||
background: #FFFBEB;
|
||||
border-color: #D97706;
|
||||
color: #78350F;
|
||||
}
|
||||
.article-callout--warning::before {
|
||||
content: '⚠';
|
||||
color: #D97706;
|
||||
}
|
||||
.article-callout--warning .article-callout__title {
|
||||
color: #92400E;
|
||||
}
|
||||
.article-callout--tip {
|
||||
background: #F0FDF4;
|
||||
border-color: #16A34A;
|
||||
color: #14532D;
|
||||
}
|
||||
.article-callout--tip::before {
|
||||
content: '💡';
|
||||
}
|
||||
.article-callout--tip .article-callout__title {
|
||||
color: #166534;
|
||||
}
|
||||
.article-callout--info {
|
||||
background: #EFF6FF;
|
||||
border-color: #1D4ED8;
|
||||
color: #1E3A5F;
|
||||
}
|
||||
.article-callout--info::before {
|
||||
content: 'ℹ';
|
||||
color: #1D4ED8;
|
||||
}
|
||||
.article-callout--info .article-callout__title {
|
||||
color: #1E40AF;
|
||||
}
|
||||
|
||||
/* ── Article Cards (2-col comparison grid) ── */
|
||||
.article-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.article-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.article-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E2E8F0;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.article-card__accent {
|
||||
height: 4px;
|
||||
}
|
||||
.article-card--success .article-card__accent { background: #16A34A; }
|
||||
.article-card--failure .article-card__accent { background: #EF4444; }
|
||||
.article-card--neutral .article-card__accent { background: #1D4ED8; }
|
||||
.article-card--established .article-card__accent { background: #0F172A; }
|
||||
.article-card--growth .article-card__accent { background: #1D4ED8; }
|
||||
.article-card--emerging .article-card__accent { background: #16A34A; }
|
||||
.article-card__inner {
|
||||
padding: 1rem 1.125rem;
|
||||
}
|
||||
.article-card__title {
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
color: #0F172A;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-display);
|
||||
display: block;
|
||||
}
|
||||
.article-card__body {
|
||||
font-size: 0.8125rem;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Severity Pills (risk table badges) ── */
|
||||
.severity {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.severity--high {
|
||||
background: #FEE2E2;
|
||||
color: #991B1B;
|
||||
}
|
||||
.severity--medium-high {
|
||||
background: #FEF3C7;
|
||||
color: #92400E;
|
||||
}
|
||||
.severity--medium {
|
||||
background: #FEF9C3;
|
||||
color: #713F12;
|
||||
}
|
||||
.severity--low-medium {
|
||||
background: #ECFDF5;
|
||||
color: #065F46;
|
||||
}
|
||||
.severity--low {
|
||||
background: #F0FDF4;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
/* Inline HTMX loading indicator for search forms.
|
||||
Opacity is handled by HTMX's built-in .htmx-indicator CSS.
|
||||
This class only adds positioning and the spin animation. */
|
||||
|
||||
Reference in New Issue
Block a user