/* ===================================================================== BASE — Fondations communes à TOUTES les pages --------------------------------------------------------------------- Ce fichier ne dessine aucune section : il pose le socle. 1. Les @font-face (polices locales) 2. Les variables de design (:root) — couleurs, typo, découpes 3. Le reset et les styles des éléments HTML nus (html, body, a, h1…) 4. La règle d'accessibilité "prefers-reduced-motion" ORDRE DE CHARGEMENT (important, la cascade en dépend) : base.css -> layout.css -> components.css -> .css Chaque page HTML charge ces 4 niveaux dans cet ordre. Si tu changes une couleur ou une police, c'est ICI et nulle part ailleurs : tout le reste du site lit les variables de :root. ===================================================================== */ /* ===================================================================== PORTFOLIO ANZIZ DAHALANI — DIRECTION ARTISTIQUE "HEIST" Inspiration libre : UI de jeu japonais type "voleurs fantômes" (aucun logo, personnage ou asset du jeu n'est utilisé — uniquement une grammaire visuelle originale : palette, formes, typographie). --------------------------------------------------------------------- DECISIONS DE STYLE PRINCIPALES --------------------------------------------------------------------- 1. PALETTE — Noir profond dominant (--bg), blanc cassé pour le texte (--text-primary) et un ECARLATE signature (--red) employé EN APLATS (blocs pleins, bandes, fond de nav active, pastilles) et non comme simple filet décoratif. Aucun dégradé doux : uniquement des aplats francs, des dégradés à ARRETS NETS (hard stops) et des trames demi-teintes (halftone) — voir --halftone. 2. FORMES — Angles vifs : --radius-lg / --radius-md sont forcés à 0 pour supprimer d'un coup tout arrondi "corporate" hérité. Bordures épaisses (3px), découpes diagonales en clip-path (coins coupés, parallélogrammes), bandes "déchirées" entre les sections. 3. COLLAGE — Superposition d'éléments légèrement pivotés (-4deg à +2deg) et décalés, avec des OMBRES PORTEES DURES (offset, flou = 0) pour l'effet papier découpé / scrapbook. 4. TYPOGRAPHIE — Barlow Condensed 700/900 (condensée, très grasse) pour les titres, boutons, menus et éléments visuels forts : capitales, interligne serré (0.92), inclinés et soulignés d'un aplat rouge. Atkinson Hyperlegible 400/700 pour le texte courant, les paragraphes et les formulaires — police dessinée pour la lisibilité, elle garde les contenus longs confortables malgré le graphisme chargé. Effet de contour (-webkit-text-stroke) et ombre dure (sans flou) sur les titres majeurs. Détail des @font-face en tête de fichier. 5. MOUVEMENT — Transitions courtes (.12s à .2s) sur des courbes SECHES (--ease-snap / --ease-hard, pas d'ease-in-out mou), balayage diagonal "flash" au survol des boutons et des cartes, et apparition des sections au scroll (translation + rotation qui se redresse). 6. CONTRASTE / LISIBILITE — Règle appliquée partout : - texte courant = blanc cassé sur noir (~17:1) - sur un APLAT ROUGE on n'utilise QUE du blanc cassé (~4.6:1, AA) ou du noir en gros caractères gras (>=24px, ~4.2:1, AA large) - jamais de petit texte noir sur rouge Les zones de texte long (paragraphes, formulaire) restent sur fond noir ou blanc plein, jamais sur une trame. 7. CLIP-PATH vs OMBRE — Un clip-path rogne aussi les ombres portées. Chaque bloc choisit donc SOIT une découpe diagonale, SOIT une ombre dure décalée, jamais les deux (voir .project-card vs .card). 8. MOTIFS P5 — titres en « lettre anonyme » (lettres découpées, cf. layout.css + script.js), éclats irréguliers (--cut-jag) pour les boutons et le menu, étoiles (--star) en autocollants, rayons rouges en fond (body::before) et volet rouge/noir à l'ouverture de page. ===================================================================== */ /* ===================================================================== POLICES LOCALES (WOFF2, auto-hébergées dans /fonts) --------------------------------------------------------------------- Aucune requête vers Google Fonts : les fichiers sont servis depuis le projet (sous-ensemble « latin », qui couvre l'intégralité des caractères français : accents, ligature œ, guillemets, tiret cadratin). font-display:swap → le texte reste lisible avec la police de repli pendant le chargement, jamais de texte invisible (pas de FOIT). HIERARCHIE - Atkinson Hyperlegible 400/700 : texte courant, paragraphes, formulaires. Police conçue pour la lisibilité (formes de lettres différenciées), repli Arial. - Barlow Condensed 700/900 : titres, boutons, menus et éléments visuels forts. Condensée et très grasse, repli Impact. ===================================================================== */ @font-face{ font-family:'Atkinson Hyperlegible'; src:url('../fonts/atkinson-hyperlegible-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Atkinson Hyperlegible'; src:url('../fonts/atkinson-hyperlegible-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'Barlow Condensed'; src:url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'Barlow Condensed'; src:url('../fonts/barlow-condensed-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; } :root{ /* — Palette — */ --bg:#080808; /* noir profond dominant */ --bg-mid:#101010; /* aplat légèrement relevé (cartes projets) */ --surface-alt:#141414; --ink:#050505; /* noir d'impression (texte sur aplats clairs) */ --border:#f2ede3; /* les bordures sont désormais blanc cassé */ --red:#da1d26; /* écarlate signature */ --red-deep:#a8121a; --red-soft:rgba(218,29,38,.16); --red-softer:rgba(218,29,38,.07); --red-border:rgba(218,29,38,.55); --green:#25e07a; /* — Texte (valeurs pensées pour un fond noir) — */ --text-primary:#f7f4ec; /* blanc cassé */ --text-secondary:#ded8cc; --text-muted:#aaa496; --text-faint:#8b8375; /* — Angles vifs : plus aucun arrondi global — */ --radius-lg:0px; --radius-md:0px; /* — Typographie — */ /* Titres / boutons / menus — condensée grasse, repli Impact */ --font-head:'Barlow Condensed', Impact, sans-serif; /* Texte courant / paragraphes / formulaires — repli Arial */ --font-body:'Atkinson Hyperlegible', Arial, sans-serif; --sidebar-w:276px; /* — Courbes d'animation sèches (pas d'ease-in-out mou) — */ --ease-snap:cubic-bezier(.2,.9,.15,1); --ease-hard:cubic-bezier(.85,0,.15,1); /* — Trame demi-teintes (halftone) réutilisable — */ --halftone:radial-gradient(circle at center, rgba(247,244,236,.18) 1.1px, transparent 1.2px); --halftone-size:9px 9px; /* — Découpes réutilisables — */ --cut-corners:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); --cut-slant:polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%); /* Éclat irrégulier « menu P5 » : aucun côté parallèle */ --cut-jag:polygon(3% 4%, 100% 0, 96% 100%, 0 88%); --cut-jag-alt:polygon(0 0, 97% 10%, 100% 92%, 4% 100%); /* Étoile à 5 branches (décor) */ --star:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } *{box-sizing:border-box;margin:0;padding:0;} html{ scroll-behavior:smooth; background:var(--bg); /* clip (et non hidden) : contient les débordements des éléments pivotés sans casser le position:sticky de la sidebar */ overflow-x:clip; } body{ /* transparent : le décor fixe (body::before) se peint entre le fond noir de et le contenu */ background:transparent; color:var(--text-secondary); font-family:var(--font-body); line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased; } /* ===================================================================== DECOR P5 — calque fixe derrière tout le site Rayons rouges partant du coin haut droit (conic-gradient), deux bandes obliques bordeaux et la trame demi-teintes. Teintes volontairement sombres : le texte posé directement dessus garde un contraste AA (text-faint ~4.8:1 sur la zone la plus claire). Calque position:fixed plutôt que background-attachment:fixed : le navigateur le compose une fois, sans le repeindre à chaque scroll. ===================================================================== */ body::before{ content:""; position:fixed;inset:0;z-index:-1; pointer-events:none; background: var(--halftone) 0 0 / var(--halftone-size), linear-gradient(118deg, transparent 0 58%, rgba(218,29,38,.16) 58% 63%, transparent 63% 66%, rgba(218,29,38,.10) 66% 79%, transparent 79%), repeating-conic-gradient(from -8deg at 100% 0%, rgba(218,29,38,.09) 0 5deg, transparent 5deg 12deg); } /* ===================================================================== TRANSITION D'ENTRÉE — volet rouge / noir qui balaie l'écran Pur CSS : couvre la page dès le premier rendu puis sort par la droite en .45s. Désactivé en mouvement réduit et à l'impression. ===================================================================== */ body::after{ content:""; position:fixed;inset:-10% -25%;z-index:500; pointer-events:none; background:linear-gradient(112deg, var(--red) 0 44%, var(--ink) 44% 52%, var(--text-primary) 52% 54%, var(--red) 54%); animation:p5-wipe .45s var(--ease-hard) .08s forwards; } @keyframes p5-wipe{ to{transform:translateX(130%) skewX(-14deg);visibility:hidden;} } @media print{ body::after,body::before{display:none;} } a{color:inherit;text-decoration:none;} ul{list-style:none;} img{max-width:100%;display:block;} /* Tous les titres passent en condensée grasse, capitales, serrées */ h1,h2,h3{ font-family:var(--font-head); font-weight:900; /* graisse maximale de Barlow Condensed */ color:var(--text-primary); text-transform:uppercase; /* titres toujours en capitales */ letter-spacing:.01em; line-height:.92; /* interligne serré demandé */ } .icon{width:20px;height:20px;flex-shrink:0;} .icon svg{width:100%;height:100%;} /* ===================================================================== ACCESSIBILITE — Lien d'évitement Premier élément focusable de chaque page. Invisible tant qu'il n'a pas le focus ; au Tab il descend en haut à gauche et permet de sauter les 6 liens de la sidebar pour atteindre directement le contenu. Pas de display:none ni de visibility:hidden : ces deux propriétés le rendraient non focusable, donc inutile. ===================================================================== */ .skip-link{ position:absolute; top:-100px;left:14px;z-index:200; background:var(--red); color:var(--text-primary); /* 4.6:1 — AA */ border:3px solid var(--border); padding:13px 22px; font-family:var(--font-head);font-weight:700; font-size:16px;letter-spacing:.08em;text-transform:uppercase; transition:top .13s var(--ease-snap); } .skip-link:focus{top:14px;outline:none;box-shadow:6px 6px 0 var(--ink);} /* ===================================================================== ACCESSIBILITE — Focus clavier visible :focus-visible ne se déclenche qu'à la navigation clavier : la souris ne déclenche donc aucun contour. Le contour est doublé (rouge + blanc cassé) pour rester visible aussi bien sur le fond noir que sur les aplats rouges des boutons. ===================================================================== */ a:focus-visible, button:focus-visible, .btn:focus-visible, .link-btn:focus-visible, .connect-item:focus-visible, .nav-link:focus-visible{ outline:3px solid var(--text-primary); outline-offset:3px; box-shadow:0 0 0 6px var(--red); } /* ===================================================================== ACCESSIBILITE — Mouvement réduit Si l'utilisateur a demandé "moins d'animations" dans son système, on coupe toutes les transitions et on affiche les sections sans apparition progressive (rien ne reste piégé en opacity:0). ===================================================================== */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } .js-reveal .section, .js-reveal footer{opacity:1;transform:none;} body::after{display:none;} } /* ===================================================================== ACCESSIBILITE — Texte réservé aux lecteurs d'écran Précise un lien sans alourdir l'affichage (ex. « Code source » -> « Code source de House of Orga (GitHub, nouvel onglet) »). ===================================================================== */ .sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }