Copilot
f9827f4587
🚀 Fusion galactique terminée ! J’ai compressé plus de fichiers que le cerveau d’un MJ sous caféine. Cohérence validée, humour injecté, assets alignés… Si tu trouves un bug, c’est sûrement un easter egg. Prêt à embarquer pour Zacus 3000 — la seule enquête où même les robots rigolent ! (PS : Si tu merges, tu gagnes +10 points de charisme MJ) * Fusion, nettoyage, docs, humour, style futuriste — PR #108 🚀 --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Clément SAILLANT <108685187+electron-rare@users.noreply.github.com>
166 lines
3.3 KiB
CSS
166 lines
3.3 KiB
CSS
/* Zacus mini-site — clean dark UI */
|
|
:root{
|
|
--bg: #0b1220;
|
|
--bg2:#0f1b2f;
|
|
--text:#eef5ff;
|
|
--muted:#c6d6f0cc;
|
|
--line:#ffffff1a;
|
|
--accent:#00decd;
|
|
--accent2:#78c8ff;
|
|
--shadow: 0 18px 50px rgba(0,0,0,.35);
|
|
--radius: 18px;
|
|
}
|
|
|
|
*{ box-sizing:border-box; }
|
|
html,body{ height:100%; }
|
|
body{
|
|
margin:0;
|
|
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
|
|
background: radial-gradient(1200px 800px at 20% 10%, rgba(0,222,205,.14), transparent 55%),
|
|
radial-gradient(900px 700px at 80% 30%, rgba(120,200,255,.12), transparent 60%),
|
|
linear-gradient(180deg, var(--bg), var(--bg2));
|
|
color: var(--text);
|
|
}
|
|
|
|
a{ color: var(--accent2); text-decoration:none; }
|
|
a:hover{ text-decoration:underline; }
|
|
a[aria-current="page"]{ color: var(--text); }
|
|
|
|
.wrap{
|
|
width: min(980px, calc(100% - 40px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.site-header{
|
|
position: sticky;
|
|
top: 0;
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(8, 14, 26, 0.72);
|
|
border-bottom: 1px solid var(--line);
|
|
z-index: 10;
|
|
}
|
|
|
|
.header-inner{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
padding: 12px 0;
|
|
gap: 18px;
|
|
}
|
|
|
|
.brand{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:12px;
|
|
color: var(--text);
|
|
min-width: 240px;
|
|
}
|
|
|
|
.brand-logo{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.brand-title{
|
|
font-weight: 780;
|
|
letter-spacing: .2px;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.brand-sub{
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.nav{
|
|
display:flex;
|
|
gap: 16px;
|
|
font-weight: 650;
|
|
opacity: .95;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.content{ padding: 26px 0 56px; }
|
|
|
|
.card{
|
|
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 26px 26px 18px;
|
|
}
|
|
|
|
.card img{
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
h1,h2,h3{ letter-spacing: .1px; }
|
|
h1{ font-size: clamp(28px, 3.4vw, 42px); margin-top: 6px; }
|
|
h2{ font-size: clamp(20px, 2.4vw, 28px); margin-top: 26px; }
|
|
h3{ font-size: 18px; margin-top: 18px; }
|
|
|
|
p,li{ line-height: 1.55; color: var(--muted); }
|
|
|
|
code, pre{
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
pre{
|
|
background: rgba(0,0,0,.35);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 14px 14px;
|
|
overflow:auto;
|
|
}
|
|
|
|
blockquote{
|
|
border-left: 3px solid rgba(0,222,205,.45);
|
|
margin: 18px 0;
|
|
padding: 8px 14px;
|
|
background: rgba(0,0,0,.22);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
table{
|
|
width:100%;
|
|
border-collapse: collapse;
|
|
margin: 16px 0;
|
|
overflow:hidden;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
th,td{ padding: 10px 12px; border-bottom: 1px solid var(--line); }
|
|
th{ text-align:left; color: var(--text); background: rgba(255,255,255,.04); }
|
|
|
|
.site-footer{ padding: 18px 4px 0; }
|
|
.muted{ color: var(--muted); opacity:.9; font-size: 13px; }
|
|
|
|
.badges{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:10px;
|
|
margin: 14px 0;
|
|
}
|
|
.badge{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: rgba(0,0,0,.25);
|
|
color: var(--text);
|
|
}
|
|
.badge img{
|
|
width: 22px;
|
|
height: 22px;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|