riric/zektyc
Watch
1
0
Fork
You've already forked zektyc
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(vitrine): palette chaude papier/encre + accent rouille, fini le noir pur

Browse source 
Le monochrome noir/blanc type « template IA » est remplacé par une
identité plus humaine : papier chaud (#faf8f3) / encre (#201b14), un
accent rouille unique (cohérent avec les tags ambre existants), serif
éditorial pour les titres (sans webfont externe), hero sans grille
technique (halo chaud organique) et micro-labels dé-shoutés (héros,
contact, team) sans uppercase ni letter-spacing agressif. Les blocs
team/tor qui codaient du blanc en dur passent sur les variables (ils
cassaient en thème clair). Cache style.css v7→v8 sur les 21 pages.
This commit is contained in:
riricdev 2026-09-06 13:14:30 +02:00
commit aa68a97fd3
22 changed files with 66 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

86
public/css/style.css
View file

@ -1,28 +1,29 @@
:root {
--bg: #ffffff;
--bg-soft: #f5f5f5;
--bg: #faf8f3;
--bg-soft: #f0ede4;
--bg-card: #ffffff;
--border: rgba(0, 0, 0, 0.1);
--text: #000000;
--text-muted: #555555;
--accent: #000000;
--accent-strong: #000000;
--accent-soft: rgba(0, 0, 0, 0.06);
--radius: 16px;
--border: rgba(63, 53, 39, 0.13);
--text: #201b14;
--text-muted: #6f675a;
--accent: #b5461f;
--accent-strong: #963a17;
--accent-soft: rgba(181, 70, 31, 0.08);
--radius: 14px;
--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
--font-head: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
--font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}
[data-theme="dark"] {
--bg: #000000;
--bg-soft: #0a0a0a;
--bg-card: #111111;
--border: rgba(255, 255, 255, 0.1);
--text: #ffffff;
--text-muted: #999999;
--accent: #ffffff;
--accent-strong: #ffffff;
--accent-soft: rgba(255, 255, 255, 0.06);
--bg: #14110d;
--bg-soft: #191511;
--bg-card: #1f1b15;
--border: rgba(244, 238, 226, 0.1);
--text: #f3efe6;
--text-muted: #b6ac9a;
--accent: #e07e4a;
--accent-strong: #ec9465;
--accent-soft: rgba(224, 126, 74, 0.1);
}
* {
@ -225,10 +226,8 @@ a:hover {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
background: radial-gradient(55% 45% at 50% 18%, var(--accent-soft) 0%, transparent 72%),
radial-gradient(32% 28% at 82% 68%, var(--accent-soft) 0%, transparent 70%);
pointer-events: none;
}
@ -238,22 +237,22 @@ a:hover {
.hero-badge {
display: inline-block;
font-size: 0.8rem;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
letter-spacing: 0.01em;
color: var(--text);
background: var(--accent-soft);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.35rem 1rem;
margin-bottom: 1.75rem;
margin-bottom: 1.25rem;
}
.hero h1 {
font-family: var(--font-head);
font-size: clamp(2rem, 5.5vw, 3.6rem);
line-height: 1.15;
font-weight: 800;
font-weight: 700;
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
}
@ -325,6 +324,7 @@ a:hover {
.projects h2,
.contact h2,
.faq h2 {
font-family: var(--font-head);
font-size: clamp(1.4rem, 3vw, 1.9rem);
margin-bottom: 1rem;
}
@ -398,7 +398,8 @@ a:hover {
}
.faq-item h3 {
font-size: 1.05rem;
font-family: var(--font-head);
font-size: 1.1rem;
margin-bottom: 0.4rem;
}
@ -408,7 +409,8 @@ a:hover {
}
.card h3 {
font-size: 1.1rem;
font-family: var(--font-head);
font-size: 1.18rem;
margin-bottom: 0.6rem;
color: var(--text);
}
@ -457,9 +459,8 @@ a:hover {
}
.contact-label {
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.82rem;
letter-spacing: 0.02em;
color: var(--text-muted);
}
@ -544,6 +545,7 @@ a.contact-value:hover {
}
.legal h1 {
font-family: var(--font-head);
font-size: clamp(1.5rem, 4vw, 2rem);
margin-bottom: 0.4rem;
}
@ -555,11 +557,13 @@ a.contact-value:hover {
}
.legal h2 {
font-family: var(--font-head);
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
margin: 2rem 0 0.6rem;
}
.legal h3 {
font-family: var(--font-head);
font-size: 1.02rem;
margin: 1.25rem 0 0.4rem;
}
@ -863,8 +867,8 @@ a.contact-value:hover {
}
.team-card {
background: var(--card-bg, rgba(255,255,255,0.03));
border: 1px solid rgba(255,255,255,0.08);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 2rem 1.5rem;
text-align: center;
@ -872,7 +876,7 @@ a.contact-value:hover {
}
.team-card:hover {
border-color: rgba(255,255,255,0.15);
border-color: var(--text-muted);
}
.team-avatar {
@ -880,13 +884,14 @@ a.contact-value:hover {
height: 120px;
border-radius: 50%;
object-fit: contain;
border: 2px solid rgba(255,255,255,0.1);
border: 2px solid var(--border);
margin-bottom: 1rem;
background: var(--bg, #000);
aspect-ratio: 1 / 1;
}
.team-card h2 {
font-family: var(--font-head);
font-size: 1.3rem;
margin: 0 0 0.3rem;
}
@ -894,9 +899,8 @@ a.contact-value:hover {
.team-role {
font-size: 0.85rem;
font-weight: 600;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
letter-spacing: 0.02em;
margin: 0 0 0.75rem;
}
@ -919,8 +923,8 @@ a.contact-value:hover {
text-align: center;
padding: 1.5rem;
margin: 2rem 0;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
}