/* ========================================================================= Design system — portfolio Tahir Aboukhassib Minimaliste : fond blanc dominant, un seul accent sombre, une seule police, cartes à bords fins, aucune icône/illustration "stock". Les animations sont volontairement discrètes (opacité + petit décalage), jamais décoratives : elles servent à guider la lecture, pas à faire joli. Tout est désactivé sous prefers-reduced-motion. ========================================================================= */ :root { --color-bg: #ffffff; --color-bg-alt: #f7f7f6; --color-fg: #141414; --color-fg-muted: #5c5c5c; --color-fg-soft: #8a8a8a; --color-border: #e3e3e1; --color-border-strong: #c9c9c6; --color-accent: #141414; --color-accent-contrast: #ffffff; --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 6px; --max-width: 1120px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; /* Animation */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 0.18s; --dur-mid: 0.3s; --dur-slow: 0.6s; --shadow-hover: 0 1px 2px rgba(20, 20, 20, 0.04), 0 12px 28px -18px rgba(20, 20, 20, 0.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* La nav est sticky : décale les ancres pour ne pas passer dessous. */ scroll-padding-top: 5.5rem; } html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-2); letter-spacing: -0.01em; } h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 700; } h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 var(--space-2); color: var(--color-fg-muted); } a { color: var(--color-fg); text-decoration: none; } a.link-underline { text-decoration: underline; text-underline-offset: 3px; transition: opacity var(--dur-fast) var(--ease-out); } a.link-underline:hover { opacity: 0.6; } /* `ol` inclus : la frise (TimelineList) est une liste ordonnée et affichait sinon les puces natives « 1. 2. 3. » en double des index « 01 02 03 ». */ ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; } /* Anneau de focus visible au clavier uniquement (accessibilité). */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-3); } .section { padding: var(--space-6) 0; } .section--tight { padding: var(--space-5) 0; } .section-heading { margin-bottom: var(--space-4); } .eyebrow { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-soft); margin-bottom: var(--space-1); } /* ---------- Révélation au scroll ---------- `js-anim` n'est posé sur que si le JS est actif, que IntersectionObserver existe et que l'utilisateur n'a pas demandé moins d'animations. Sans cette classe, tout le contenu s'affiche normalement : aucun risque de page blanche si le script échoue. */ /* La liste de sélecteurs ci-dessous est dupliquée dans wwwroot/js/site.js (constante REVEAL_SELECTOR) : masquer via CSS dès le premier rendu évite tout flash « visible puis caché ». Garder les deux listes synchronisées. */ html.js-anim .reveal, html.js-anim .section-heading, html.js-anim .card, html.js-anim .banner-dark, html.js-anim .about-intro, html.js-anim .contact-form-wrapper, html.js-anim .badge-row--lg, html.js-anim .filter-row, html.js-anim .project-detail__body > * { opacity: 0; transform: translateY(14px); } html.js-anim .is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms), transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--color-accent); font-size: 0.95rem; font-weight: 600; cursor: pointer; background: transparent; transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); transition-duration: 0.06s; } .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; } .btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); } .btn--primary:hover { opacity: 0.88; box-shadow: var(--shadow-hover); } .btn--ghost { color: var(--color-fg); border-color: var(--color-border); } .btn--ghost:hover { border-color: var(--color-accent); } .btn--on-dark { border-color: var(--color-accent-contrast); color: var(--color-accent-contrast); } .btn--on-dark:hover { background: rgba(255, 255, 255, 0.08); box-shadow: none; } .btn--on-dark.btn--primary { background: var(--color-accent-contrast); color: var(--color-accent); } .btn--on-dark.btn--primary:hover { background: var(--color-accent-contrast); opacity: 0.9; } /* ---------- Cards (composant unique réutilisé partout) ---------- */ .card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); background: var(--color-bg); transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); } /* Seules les cartes cliquables se soulèvent : le mouvement signale l'action. */ a.card:hover, .card.card--link:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--shadow-hover); } a.card:active, .card.card--link:active { transform: translateY(-1px); transition-duration: 0.08s; } /* Les cartes non cliquables restent sobres : simple renforcement du trait. */ .card:not(a):not(.card--link):hover { border-color: var(--color-border-strong); } .card + .card { margin-top: 0; } /* ---------- Badges (texte, pas d'icônes stock) ---------- */ .badge { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: var(--color-fg-muted); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .badge-row--lg .badge:hover { border-color: var(--color-border-strong); color: var(--color-fg); } /* ---------- Grids ---------- */ .grid { display: grid; gap: var(--space-3); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ---------- Dark banner (CTA) ---------- */ .banner-dark { background: var(--color-accent); color: var(--color-accent-contrast); border-radius: var(--radius); padding: var(--space-4); text-align: center; } .banner-dark h2, .banner-dark p { color: var(--color-accent-contrast); } .banner-dark p { opacity: 0.75; } .banner-dark .btn-row { margin-top: var(--space-3); } .btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; } /* ---------- Utility ---------- */ .text-center { text-align: center; } .text-muted { color: var(--color-fg-muted); } .mt-0 { margin-top: 0; } .stack-lg > * + * { margin-top: var(--space-4); } .stack-md > * + * { margin-top: var(--space-3); } .stack-sm > * + * { margin-top: var(--space-1); } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-2); } .field label { font-size: 0.85rem; font-weight: 600; } .field input, .field textarea { font-family: inherit; font-size: 0.95rem; padding: 0.7rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-fg); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .field input:hover, .field textarea:hover { border-color: var(--color-border-strong); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.07); } .field textarea { resize: vertical; min-height: 120px; } .field-message { font-size: 0.8rem; color: #b3261e; } .form-status { padding: 0.85rem 1rem; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: var(--space-2); animation: status-in var(--dur-mid) var(--ease-out); } @keyframes status-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .form-status--success { background: #eef7ee; color: #1e5e2a; border: 1px solid #cfe8cf; } .form-status--error { background: #fbeceb; color: #8a2620; border: 1px solid #f1c9c6; } /* ---------- Blazor error boundary (conservé, restylé sobrement) ---------- */ .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--radius); } .blazor-error-boundary::after { content: "Une erreur est survenue."; } #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; } /* ---------- Accessibilité : respect de prefers-reduced-motion ---------- On neutralise tout mouvement, y compris le scroll fluide et les décalages de révélation, sans jamais masquer de contenu. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.js-anim .reveal, html.js-anim .section-heading, html.js-anim .card, html.js-anim .banner-dark, html.js-anim .about-intro, html.js-anim .contact-form-wrapper, html.js-anim .badge-row--lg, html.js-anim .filter-row, html.js-anim .project-detail__body > * { opacity: 1; transform: none; } .btn:hover, a.card:hover, .card.card--link:hover { transform: none; } }