119 lines
3.4 KiB
CSS
119 lines
3.4 KiB
CSS
/* ================================================================
|
|
assets/styles/app.css
|
|
Variables CSS globales — Accessibles partout sur le site
|
|
================================================================ */
|
|
|
|
/* ── VARIABLES GLOBALES ────────────────────────────────────────── */
|
|
:root {
|
|
/* Couleurs principales */
|
|
--violet: #7C3AED;
|
|
--violet-light: #A78BFA;
|
|
--violet-glow: rgba(124, 58, 237, 0.18);
|
|
|
|
/* Backgrounds de navigation */
|
|
--nav-bg-light: rgba(255, 255, 255, 0.5);
|
|
--nav-bg-dark: rgba(12, 10, 18, 0.4);
|
|
--nav-bg-light-so: rgba(255, 255, 255, 0.82);
|
|
--nav-bg-dark-so: rgba(12, 10, 18, 0.8);
|
|
|
|
/* Couleurs de texte */
|
|
--text-light: #1a1625;
|
|
--text-dark: #ede9f6;
|
|
--muted-light: #6b7280;
|
|
--muted-dark: #9ca3af;
|
|
|
|
/* Couleurs de bordure */
|
|
--border-light: rgba(0, 0, 0, 0.08);
|
|
--border-dark: rgba(255, 255, 255, 0.08);
|
|
|
|
/* Backgrounds des éléments pilule */
|
|
--pill-bg-light: rgba(124, 58, 237, 0.08);
|
|
--pill-bg-dark: rgba(124, 58, 237, 0.20);
|
|
|
|
/* Effets de blur */
|
|
--blur-sm: 8px;
|
|
--blur-md: 25px;
|
|
|
|
/* Durées de transition */
|
|
--duration-fast: 0.15s; /* Transforms rapides */
|
|
--duration-normal: 0.2s; /* Animations standard */
|
|
--duration-medium: 0.25s; /* Animations moyennes */
|
|
--duration-slow: 0.4s; /* Changements de thème */
|
|
}
|
|
|
|
/* ── RESET MINIMAL ─────────────────────────────────────────────── */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── STYLES GLOBAUX ────────────────────────────────────────────── */
|
|
html, body {
|
|
min-height: 100vh;
|
|
font-family: 'DM Sans', sans-serif;
|
|
transition: background var(--duration-slow) ease;
|
|
}
|
|
|
|
body {
|
|
background-image: url('../images/bg-light.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
padding-top: 72px;
|
|
}
|
|
|
|
[data-theme="dark"] body {
|
|
background-image: url('../images/bg-dark.png');
|
|
}
|
|
|
|
|
|
|
|
/* ── STYLES POUR LE LIEN COPIABLE ──────────────────────────────── */
|
|
.copy-link {
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: var(--violet);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 6px;
|
|
transition: background var(--duration-fast), color var(--duration-fast);
|
|
position: relative;
|
|
}
|
|
|
|
[data-theme="dark"] .copy-link {
|
|
color: var(--violet-light);
|
|
}
|
|
|
|
.copy-link:hover {
|
|
background: var(--pill-bg-light);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
[data-theme="dark"] .copy-link:hover {
|
|
background: var(--pill-bg-dark);
|
|
}
|
|
|
|
.copy-link.copied {
|
|
color: #10b981;
|
|
animation: pulse-copied var(--duration-normal);
|
|
}
|
|
|
|
@keyframes pulse-copied {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
/* ── STYLES POUR LE LIEN ──────────────────────────────── */
|
|
|
|
a {
|
|
color: var(--violet);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast);
|
|
}
|
|
[data-theme="dark"] a {
|
|
color: var(--violet-light);
|
|
}
|
|
a:hover{
|
|
text-decoration: underline;
|
|
}
|