/* ========================================================= Roman. — feuille de style partagée (index.html + info.html) Toute la typo, les couleurs et les styles vivent ici. Il n'y a que 2 styles de texte dans tout le site : - Inter 14px → style par défaut, hérité par tout (nav, footer, paragraphes...), défini une seule fois sur html/body. - Times New Roman 17px ("SERIF") → logo + titres de projet, défini une seule fois sur ".logo, .item h2". ========================================================= */ /* ---- Typographie & espacements ---- */ :root { --font-family: "Inter", ui-sans-serif, system-ui, sans-serif; --font-serif: "Times New Roman", Times, serif; /* style "SERIF" */ --font-weight-base: 300; --gutter: 24px; --gutter-lg: 40px; /* couleurs par défaut (thème sombre, utilisé par index.html) */ --bg: #000; --fg: #fff; --muted: #8a8a8a; --line: #1a1a1a; --placeholder: #2b2b2b; /* rectangles gris à la place des images */ --highlight: #fff3a3; /* jaune pâle du stabilo (texte entre ) */ } /* ---- Thème clair (utilisé par info.html via ) ---- */ body[data-theme="light"] { --bg: #f5f5f5; --fg: #111110; --muted: #6b6b63; --line: #dcdcd4; } /* ---- Reset de base ---- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-family); font-size: 14px; line-height: 22px; font-weight: var(--font-weight-base); -webkit-font-smoothing: antialiased; } .wrap { max-width: 1600px; margin: 0 auto; padding: 0 var(--gutter); } /* ---- Style "SERIF" : logo + titres de projet ---- */ .logo, .item h2, .signature { font-family: var(--font-serif); font-size: 17px; font-weight: 400; letter-spacing: 0.015em; } .logo a { color: inherit; text-decoration: none; } .contact { text-align: left; color: var(--muted); margin: 0; } .signature { text-align: center; color: var(--fg); /* blanc sur Work (thème sombre), #111110 sur Info (thème clair) */ margin: 100px 0 0; padding-bottom: 60px; } /* ---- Transition de page (fade + slide, easing decimalstudios.com) ---- */ .page { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease-out, transform 0.8s ease-in-out; } .page.is-visible { opacity: 1; transform: translateY(0); } .page.is-leaving { opacity: 0; transform: translateY(-24px); } /* ---- En-tête ---- */ header.site { position: sticky; top: 0; z-index: 10; background: var(--bg); } header.site .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; } nav.main ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; } @media (max-width: 400px) { nav.main ul { gap: 16px; } } nav.main span { color: var(--muted); padding-bottom: 2px; cursor: default; } nav.main span.active { border-bottom: 1px solid #8a8a8a; } /* soulignement animé partagé : nav (.nav-link) et lien de contact (.contact a), même easing que .link-secondary de decimalstudios.com */ nav.main .nav-link, .contact a { position: relative; display: inline-block; color: var(--muted); text-decoration: none; padding-bottom: 2px; } nav.main .nav-link::before, .contact a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform-origin: 0; transform: scaleX(0) translateZ(0); transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } nav.main .nav-link:hover::before, nav.main .nav-link.is-active::before, .contact a:hover::before { transform: scaleX(1) translateZ(0); } /* ---- Hero (commun aux deux pages) ---- */ .hero { padding-top: clamp(60px, 12vw, 160px); padding-bottom: 40px; } .hero p { color: var(--muted); max-width: 48ch; margin: 0; } .hero p + p { margin-top: 20px; } /* info.html : texte à gauche, image à droite (grille 12 colonnes comme Work) ; en mobile l'image passe sous le texte */ .info-layout { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter-lg); align-items: start; padding-top: clamp(60px, 12vw, 160px); } .info-layout .hero { grid-column: 1 / span 5; padding-top: 0; } .info-img { grid-column: 8 / span 5; margin: 0; } .info-img img { display: block; width: 100%; height: auto; } @media (max-width: 767px) { .info-layout { column-gap: 12px; } .info-layout .hero { grid-column: 1 / -1; } .info-img { grid-column: 1 / -1; margin-top: 24px; } } /* info.html : le contenu principal fait au moins 1000px de haut (le .wrap du header n'est pas concerné) */ body[data-page="info"] main .wrap { min-height: 1000px; display: flex; flex-direction: column; } /* le "31" se colle en bas du bloc min-height (avec 100px d'air au minimum) */ body[data-page="info"] .info-layout { padding-bottom: 100px; } body[data-page="info"] .signature { margin-top: auto; } /* Effet stabilo : le texte entre est invisible par défaut. Quand le script ajoute .is-on, le surlignage jaune pâle se trace de gauche à droite comme un coup de marqueur (le fond grandit de 0% à 100% de la largeur, et suit les retours à la ligne l'un après l'autre). .is-erasing l'efface dans le même sens. (pas de gras : on reste dans les 2 styles de texte) */ b { font-weight: inherit; padding: 0 2px; background-image: linear-gradient(var(--highlight), var(--highlight)); background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%; } b.is-on { background-size: 100% 100%; transition: background-size 1.4s cubic-bezier(0.4, 0, 0.2, 1); } b.is-erasing { background-position: 100% 0; background-size: 0% 100%; transition: background-size 0.9s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 767px) { .hero { padding-bottom: 24px; } } /* ========================================================= index.html — grille de projets ========================================================= */ .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter-lg); row-gap: 100px; padding-top: 80px; padding-bottom: 140px; } .item { display: flex; flex-direction: column; } .thumb { position: relative; width: 100%; background: var(--placeholder); overflow: hidden; } .thumb::before { content: ""; display: block; padding-top: calc(100% / var(--ratio)); } .thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Facade "clic pour lancer la vidéo" : juste une image cliquable, aucun élément d'interface YouTube tant qu'on n'a pas cliqué */ .yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--placeholder); cursor: pointer; display: block; } .yt-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .item h2 { margin: 24px 0 6px; } .item .client { color: var(--muted); margin: 0; } /* mise en colonnes irrégulière, écho de la grille asymétrique du site source */ .item.c-half { grid-column: span 6; } .item.c-wide { grid-column: span 9; } .item.c-third { grid-column: span 4; } .item.c-third-offset { grid-column: 8 / span 4; } .item.c-half-offset { grid-column: 7 / span 6; } .item.c-full { grid-column: span 12; } @media (max-width: 1024px) { .item.c-wide { grid-column: span 10; } .item.c-half-offset { grid-column: 7 / span 6; } } @media (max-width: 767px) { .work-grid { column-gap: 12px; row-gap: 56px; padding-top: 48px; padding-bottom: 90px; } /* écho du comportement mobile de decimalstudios.com/work : les blocs ne passent pas tous en pleine largeur — certains restent plus étroits, et les "offset" gardent leur décalage vers la droite */ .item.c-full, .item.c-wide { grid-column: 1 / span 12; } .item.c-half, .item.c-third { grid-column: 1 / span 9; } .item.c-half-offset { grid-column: 5 / span 8; } .item.c-third-offset { grid-column: 6 / span 7; } }