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

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

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

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

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -8,7 +8,7 @@
<meta name="theme-color" content="#070a0f" /> <meta name="theme-color" content="#070a0f" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
<script src="/js/theme.js" defer></script> <script src="/js/theme.js" defer></script>
<script src="/js/i18n.js" defer></script> <script src="/js/i18n.js" defer></script>
<script>document.addEventListener("click",function(e){var t=e.target.closest?e.target.closest(".site-nav"):null;if(t){var n=document.getElementById("nav-toggle");if(n)n.checked=false}})</script> <script>document.addEventListener("click",function(e){var t=e.target.closest?e.target.closest(".site-nav"):null;if(t){var n=document.getElementById("nav-toggle");if(n)n.checked=false}})</script>

View file

@ -25,7 +25,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
<link rel="stylesheet" href="/css/zfprobe.css?v=14" /> <link rel="stylesheet" href="/css/zfprobe.css?v=14" />
</head> </head>
<body> <body>

View file

@ -25,7 +25,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
<link rel="stylesheet" href="/css/zfprobe.css?v=14" /> <link rel="stylesheet" href="/css/zfprobe.css?v=14" />
</head> </head>
<body> <body>

View file

@ -119,7 +119,7 @@
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="me" href="https://piaille.fr/@zektyc" /> <link rel="me" href="https://piaille.fr/@zektyc" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
<script src="/js/theme.js" defer></script> <script src="/js/theme.js" defer></script>
<script src="/js/components.js?v=6" defer></script> <script src="/js/components.js?v=6" defer></script>
<script src="/js/i18n.js?v=3" defer></script> <script src="/js/i18n.js?v=3" defer></script>

View file

@ -11,7 +11,7 @@
<title>Privacy Policy · Zektyc</title> <title>Privacy Policy · Zektyc</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<div class="legal-disclaimer">Disclaimer: only the version written in the French language is legally binding. Any translation, regardless of the language, is provided solely as a courtesy and has no legal value.</div> <div class="legal-disclaimer">Disclaimer: only the version written in the French language is legally binding. Any translation, regardless of the language, is provided solely as a courtesy and has no legal value.</div>

View file

@ -11,7 +11,7 @@
<title>Politique de confidentialité · Zektyc</title> <title>Politique de confidentialité · Zektyc</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<div class="legal-disclaimer">Avertissement : seule la version rédigée en langue française fait foi juridiquement. Toute traduction, quelle qu'en soit la langue, n'est fournie qu'à titre de courtoisie et n'a aucune valeur juridique.</div> <div class="legal-disclaimer">Avertissement : seule la version rédigée en langue française fait foi juridiquement. Toute traduction, quelle qu'en soit la langue, n'est fournie qu'à titre de courtoisie et n'a aucune valeur juridique.</div>

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -11,7 +11,7 @@
<title>Terms of Service · Zektyc</title> <title>Terms of Service · Zektyc</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<div class="legal-disclaimer">Disclaimer: only the version drafted in the French language is legally binding. Any translation, in whatever other language, is provided as a courtesy only and has no legal value.</div> <div class="legal-disclaimer">Disclaimer: only the version drafted in the French language is legally binding. Any translation, in whatever other language, is provided as a courtesy only and has no legal value.</div>

View file

@ -11,7 +11,7 @@
<title>Conditions Générales d'Utilisation · Zektyc</title> <title>Conditions Générales d'Utilisation · Zektyc</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<div class="legal-disclaimer">Avertissement : seule la version rédigée en langue française fait foi juridiquement. Toute traduction, quelle qu'en soit la langue, n'est fournie qu'à titre de courtoisie et n'a aucune valeur juridique.</div> <div class="legal-disclaimer">Avertissement : seule la version rédigée en langue française fait foi juridiquement. Toute traduction, quelle qu'en soit la langue, n'est fournie qu'à titre de courtoisie et n'a aucune valeur juridique.</div>

View file

@ -7,7 +7,7 @@
<title>Zenyth Browser · Zektyc</title> <title>Zenyth Browser · Zektyc</title>
<meta name="description" content="Zenyth Browser : Firefox durci anti-fingerprinting. Résiste aux sondes ZFP/ZPD. Paquet RPM prêt à installer." /> <meta name="description" content="Zenyth Browser : Firefox durci anti-fingerprinting. Résiste aux sondes ZFP/ZPD. Paquet RPM prêt à installer." />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
<link rel="stylesheet" href="/css/zenyth.css?v=1" /> <link rel="stylesheet" href="/css/zenyth.css?v=1" />
</head> </head>
<body> <body>

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -17,7 +17,7 @@
<meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="fr_FR" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
<style> <style>
.stats-grid { .stats-grid {
display: grid; display: grid;

View file

@ -19,7 +19,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
</head> </head>
<body> <body>
<header id="h"></header> <header id="h"></header>

View file

@ -17,7 +17,7 @@
<meta property="og:locale:alternate" content="en_US" /> <meta property="og:locale:alternate" content="en_US" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/style.css?v=7" /> <link rel="stylesheet" href="/css/style.css?v=8" />
<style> <style>
.stats-grid { .stats-grid {
display: grid; display: grid;