feat(web): SEO/social cards, security headers, PWA icons, FAQ, status, get-involved, captions

This commit is contained in:
vjrj 2026-07-15 12:10:30 +02:00
parent a719e9c172
commit a3697e6b3e
19 changed files with 358 additions and 16 deletions

View file

@ -196,3 +196,59 @@ h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--green-dark); }
.hero-shot { order: -1; }
.pillars { grid-template-columns: 1fr; }
}
/* --- About link + text links --- */
.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
/* --- Status / beta --- */
.status {
display: flex;
gap: 1rem;
align-items: flex-start;
background: var(--white);
border: 1px solid var(--outline);
border-inline-start: 4px solid var(--green);
border-radius: var(--radius);
padding: 1.2rem 1.4rem;
}
.status h2 { font-size: 1.2rem; margin: 0 0 .3rem; }
.status p { margin: 0; color: #2c3826; }
.badge-beta {
background: var(--green); color: #fff; font-weight: 700; font-size: .8rem;
padding: .25rem .7rem; border-radius: 999px; flex-shrink: 0; margin-top: .15rem;
}
/* --- Screenshot captions + RTL note --- */
.phone-fig { margin: 0; text-align: center; max-width: 232px; }
.phone-fig figcaption { margin-top: .7rem; font-size: .9rem; color: var(--muted); }
.rtl-note {
display: flex; gap: 1.4rem; align-items: center; justify-content: center;
margin-top: 2rem; background: var(--container); border-radius: var(--radius);
padding: 1.4rem clamp(1rem, 4vw, 2rem);
}
.phone-sm { width: 150px; max-width: 40vw; flex-shrink: 0; }
.rtl-note h3 { margin: 0 0 .3rem; color: var(--green-dark); }
.rtl-note p { margin: 0; }
/* --- FAQ --- */
.faq dl { margin: 0; }
.faq dt { font-weight: 700; margin-top: 1rem; color: var(--title); }
.faq dd { margin: .2rem 0 0; color: #2c3826; }
/* --- Get involved --- */
.collab-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 1rem 0 1.4rem;
}
.collab-grid article {
background: var(--white); border: 1px solid var(--outline);
border-radius: var(--radius); padding: 1.2rem;
}
.collab-grid h3 { margin: 0 0 .4rem; font-size: 1.1rem; color: var(--green-dark); }
.collab-grid p { margin: 0; color: #2c3826; }
.collab-grid a { text-decoration: none; }
@media (max-width: 640px) {
.collab-grid { grid-template-columns: 1fr; }
.rtl-note { flex-direction: column; text-align: center; }
}