Survolez-moi
Cette card utilise .glass-hover — le fond devient translucide avec un flou de 12 px au survol.
Design System
Design System
La grammaire visuelle du site : tokens, composants et motion.
Cette page documente toutes les décisions de design utilisées sur eldev.fr. Chaque token est cliquable pour être copié.
Fondations
Les tokens CSS qui définissent les couleurs, la typographie et l'espacement.
Palette
Typographie
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
LABEL UPPERCASE
Espacement & breakpoints
Texture
Un grain fractalNoise SVG 200×200 est superposé en body::before avec mix-blend-mode: overlay et opacity: 0.06. Adaptatif dark/light, neutralisé sur les éléments interactifs via pointer-events: none.
Composants
Les éléments d'interface réutilisés à travers le site.
Boutons
Classes : .btn.btn-primary, .btn.btn-outline. Les deux affichent un halo lumineux qui suit le curseur à l'intérieur du bouton. La variante primaire est aussi magnétique : elle se déplace légèrement vers le curseur au survol.
Lien CTA
Classe : .cta-link. Le soulignement apparaît, l'icône se translate, et le lien est magnétique : il s'incline vers le curseur au survol.
Labels & numérotation
Label de section
01 02 03 10
Classes : .label (majuscules espacées), .num (chiffres accent), .card-line (barre accent 30 %).
Cards & glass-hover
Card statique
Même mise en page, sans effet glass — pour comparer.
Classe : .glass-hover. S'associe à .num + .card-line.
Toasts
Copié — --accent
Erreur de validation
Classe : .toast.visible avec modificateur .success ou .error. Rendus statiques ici pour référence — en production ils s'animent depuis la droite.
Grilles responsives
.grid-2
01
02
.grid-3
01
02
03
.grid-4
01
02
03
04
.grid-5
01
02
03
04
05
Classe .grid combinée avec .grid-2 à .grid-5. Au-dessus de 1100 px, .grid-5 devient 4 colonnes ; sous 900 px, tous passent à 2 colonnes ; sous 640 px, tous à 1 colonne.
Liens dans le texte
Voici un paragraphe avec un lien inline. Utilisé dans les réponses FAQ, l'intro de la page Contact et les mentions légales. Au survol, le soulignement devient plus opaque — un autre exemple pour montrer l'effet.
Classe : .rich-text. Ajoute un soulignement accent semi-transparent sur les <a> avec text-underline-offset: 2px.
Liens sociaux
Classe : .social-link. 32×32 px, couleur --text-muted au repos, --accent au survol. Les variantes --codeur et --malt utilisent fill: var(--bg) pour l'icône interne.
Highlight
Un travail soigné, des résultats concrets.
Classe : .highlight. Applique color: var(--accent) et font-family: var(--font-serif) en italique, pour mettre en valeur un mot dans un titre.
Accordéon
Quels services propose ELDEV ?
10 expertises : développement web, e-commerce, apps mobiles, IA, design UI/UX, WordPress, apps bureau, hébergement, maintenance, conseil ERP.
Quels sont les délais typiques ?
Un site vitrine : 2–4 semaines. Une application sur mesure : 6–12 semaines selon le périmètre.
Le code est-il livré clé en main ?
Oui, tout le code source est versionné sur Git et transféré à la livraison. Aucun verrou propriétaire.
Utilise <details> / <summary> natifs. L'attribut aria-expanded est synchronisé en JS au changement d'état. Icône + pivote à 45° à l'ouverture. En production dans FaqSection.astro avec les classes .faq-item / .faq-question.
Formulaires
Champs de saisie utilisés sur la page Contact.
Le formulaire live utilise les mêmes styles dans src/components/ContactPage.astro. Validation animée : check accent au valide (.field-valid), pulse rouge à l'erreur (.field-invalid). Le textarea s'auto-redimensionne jusqu'à 12 lignes. Un service pré-rempli via ?service= déclenche un flash accent (.field-prefilled-flash).
État d'erreur .field-invalid
Le champ ajoute .field-invalid et aria-invalid="true". Le message .field-error est rendu sous le champ via aria-live="polite".
Motion
Animations d'entrée et effets de révélation. Respecte `prefers-reduced-motion`.
Stagger d'entrée .stagger
01
02
03
04
Révélation de texte .reveal-text
Animation de révélation
Fondu vers le haut fadeUp keyframes
Bloc fondu
Navigation
Header, footer et sélecteur de langue, présents sur toutes les pages. Tous utilisent --glass-bg pour leur effet de fond translucide.
Header .header
Position fixe en haut, transparent flouté. Le menu hamburger s'active sous 768px avec focus trap et fermeture au clavier (Escape).
Footer .footer
Position sticky en bas, expose les toggles thème / curseur splash et le sélecteur de langue.