/* ============================================================ Portfolio Franck Bernero Deux axes indépendants : thème (clair/sombre) × cadrage (cadré/plein) ============================================================ */ :root { --accent: #F90B3E; --skew: -8deg; --tr: 400ms cubic-bezier(0.22, 1, 0.36, 1); --tr-slow: 500ms cubic-bezier(0.22, 1, 0.36, 1); } /* --- Thème : couleurs uniquement ------------------------------ */ [data-theme="dark"] { --bg: #0D0D0D; --surface: #1A1A1A; --line: #454545; --text: #FFFFFF; --dim: rgba(255, 255, 255, 0.55); --body: rgba(255, 255, 255, 0.82); --anno: rgba(255, 255, 255, 0.32); --vig-o: 1; --glow: 0 0 28px rgba(255, 255, 255, 0.16); --glow-h: rgba(255, 255, 255, 0.22); --hov-x: 0px; --hov-line: transparent; --dim-thumb: 0.5; } [data-theme="light"] { --bg: #FFFFFF; --surface: #F2F2F2; --line: #454545; --text: #0D0D0D; --dim: rgba(13, 13, 13, 0.55); --body: rgba(13, 13, 13, 0.85); --anno: rgba(69, 69, 69, 0.62); --vig-o: 0; --glow: none; --glow-h: rgba(0, 0, 0, 0); --hov-x: -4px; --hov-line: #454545; --dim-thumb: 0.55; } /* --- Cadrage : géométrie uniquement --------------------------- */ [data-frame="framed"] { --hero-t: 108px; --hero-r: 48px; --hero-b: 132px; --hero-l: 260px; --idx-w: 168px; --h1: 28px; --anno-r: 72px; --ink: var(--text); --ink-dim: var(--dim); --ink-anno: var(--anno); --ink-line: var(--line); } [data-frame="full"] { --hero-t: 132px; --hero-r: 0px; --hero-b: 0px; --hero-l: 0px; --idx-w: 380px; --h1: 44px; --anno-r: 340px; --ink: #FFFFFF; --ink-dim: rgba(255, 255, 255, 0.72); --ink-anno: rgba(255, 255, 255, 0.5); --ink-line: rgba(255, 255, 255, 0.45); } /* ============================================================ Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: Archivo, "Helvetica Neue", Arial, sans-serif; transition: background-color var(--tr), color var(--tr); overflow: hidden; } body.is-detail { overflow: auto; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(249, 11, 62, 0.6); color: #FFFFFF; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } img, video { display: block; max-width: 100%; } .u-hidden { display: none !important; } .u-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ Navigation ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; height: 108px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; z-index: 40; pointer-events: none; } .nav > * { pointer-events: auto; } .brand { display: flex; align-items: center; gap: 10px; } .brand__mark { font-family: Anton, Impact, sans-serif; font-size: 22px; letter-spacing: -0.02em; color: var(--text); } .brand__text { display: flex; flex-direction: column; gap: 3px; } /* Baseline — forme A (Anton) et forme B (Space Mono). Une seule est visible, pilotée par data-baseline sur . */ .baseline { color: var(--dim); line-height: 1; } .baseline--a { font-family: Anton, Impact, sans-serif; font-size: 12px; letter-spacing: 0.02em; } .baseline--b { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.22em; } [data-baseline="a"] .baseline--b, [data-baseline="b"] .baseline--a { display: none; } /* --- Sceau (hanko) -------------------------------------------- */ .seal { position: relative; display: grid; place-items: center; background: var(--accent); /* contours très légèrement irréguliers : encré à la main */ clip-path: polygon(2% 1%, 99% 0%, 100% 97%, 3% 100%, 0% 48%); flex: none; } .seal__glyph { font-family: Anton, Impact, sans-serif; color: #FFFFFF; line-height: 1; transform: translateY(0.5px); } .seal--nav { width: 14px; height: 14px; } .seal--nav .seal__glyph { font-size: 8px; } .seal--col { width: 22px; height: 22px; } .seal--col .seal__glyph { font-size: 12px; } /* --- Filtres --------------------------------------------------- */ .filters { display: flex; gap: 28px; } .filter { background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.15em; color: var(--dim); border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms; } .filter:hover { color: var(--text); } .filter[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); } /* --- Actions --------------------------------------------------- */ .nav__end { display: flex; align-items: center; gap: 22px; } .nav__contact { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.15em; color: var(--dim); transition: color 200ms; } .nav__contact:hover { color: var(--text); } .toggle { width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 1px solid var(--line); cursor: pointer; color: var(--dim); transition: color 200ms, border-color 200ms; } .toggle:hover { color: var(--text); border-color: var(--text); } .toggle svg { width: 13px; height: 13px; fill: currentColor; } /* ============================================================ Vitrine — hero ============================================================ */ .stage { position: fixed; inset: 0; } .hero { position: absolute; top: var(--hero-t); right: var(--hero-r); bottom: var(--hero-b); left: var(--hero-l); background: var(--surface); overflow: hidden; cursor: pointer; z-index: 5; border: 0; padding: 0; width: auto; transition: inset var(--tr); } .hero__layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 400ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .hero__layer.is-on { opacity: 1; } .hero__vignette { position: absolute; inset: 0; pointer-events: none; opacity: var(--vig-o); transition: opacity var(--tr); background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.34) 100%), linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 45%); } .hero__hint { position: absolute; right: 20px; bottom: 16px; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.62); opacity: 0; transition: opacity 250ms; } .hero:hover .hero__hint, .hero:focus-visible .hero__hint { opacity: 1; } /* ============================================================ Vitrine — rail incliné ============================================================ */ .rail { position: absolute; top: calc((var(--hero-t) + 100% - var(--hero-b)) / 2); right: 34px; transform: translateY(-50%); width: 264px; height: min(560px, calc(100% - var(--hero-t) - var(--hero-b) - 20px)); z-index: 20; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); transition: top var(--tr), opacity var(--tr); } .rail::-webkit-scrollbar { display: none; } .rail__inner { display: flex; flex-direction: column; gap: 14px; padding: 40% 0; } .thumb { position: relative; flex: none; height: 104px; scroll-snap-align: center; background: none; border: 0; padding: 0; cursor: pointer; transform: skewY(var(--skew)); transition: transform 200ms, opacity 200ms, box-shadow 200ms; opacity: var(--dim-thumb); filter: saturate(0.25); } .thumb__media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: skewY(calc(var(--skew) * -1)) scale(1.18); } .thumb__num { position: absolute; top: 50%; right: 8px; transform: translateY(-50%) skewY(calc(var(--skew) * -1)); writing-mode: vertical-rl; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.28em; color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .thumb:hover { opacity: 0.85; filter: saturate(0.6); transform: skewY(var(--skew)) translateX(var(--hov-x)) scale(1.03); box-shadow: 0 0 0 1px var(--hov-line), 0 0 24px var(--glow-h); } .thumb[aria-current="true"] { opacity: 1; filter: none; box-shadow: 0 0 0 1px var(--accent), var(--glow); } /* ============================================================ Vitrine — signature (rakkan) : colonne + sceau ============================================================ */ .rakkan { position: absolute; left: 26px; bottom: 48px; z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 60%; transition: left var(--tr); } .rakkan__col { writing-mode: vertical-rl; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.3em; color: var(--ink-anno); white-space: nowrap; max-height: 46vh; overflow: hidden; transition: color var(--tr); } /* ============================================================ Vitrine — index et titre ============================================================ */ .caption { position: absolute; left: 72px; bottom: 48px; width: var(--idx-w); z-index: 25; transition: width var(--tr); } .caption__index { display: flex; align-items: baseline; gap: 6px; font-family: Anton, Impact, sans-serif; line-height: 0.86; color: var(--ink); } .caption__cur { font-size: 100px; letter-spacing: -0.03em; } .caption__tot { font-size: 20px; color: var(--ink-dim); } .caption__rule { width: 40px; height: 1px; background: var(--ink-line); margin: 14px 0 12px; } .caption__title { font-family: Anton, Impact, sans-serif; font-size: var(--h1); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); transition: font-size var(--tr); } .caption__meta { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--ink-dim); } /* ============================================================ Annotation technique (données réelles du projet) ============================================================ */ .anno { position: absolute; top: var(--hero-t); right: var(--anno-r); z-index: 25; writing-mode: vertical-rl; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.24em; color: var(--ink-anno); transition: right var(--tr), color var(--tr); } /* ============================================================ Vue projet ============================================================ */ .detail { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity var(--tr-slow), visibility var(--tr-slow); } .detail.is-open { opacity: 1; visibility: visible; } .detail__close { position: fixed; top: 30px; right: 44px; z-index: 70; width: 38px; height: 38px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color 200ms, background 200ms; } .detail__close:hover { border-color: var(--accent); } .detail__close svg { width: 13px; height: 13px; stroke: currentColor; } .detail__head { max-width: 1200px; margin: 0 auto; padding: 140px 48px 0; } .detail__title { font-family: Anton, Impact, sans-serif; font-size: clamp(40px, 7vw, 92px); line-height: 0.94; letter-spacing: -0.03em; margin: 0; } .detail__meta { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--dim); margin-top: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .blocks { max-width: 1200px; margin: 0 auto; padding: 0 48px 160px; } /* --- Blocs ----------------------------------------------------- */ .b { margin-top: 88px; } .b--space-s { margin-top: 48px; } .b--space-m { margin-top: 120px; } .b--space-l { margin-top: 240px; } .b__ph { width: 100%; background: var(--surface); background-size: cover; background-position: center; } .b--duo, .b--trio { display: grid; gap: 16px; } .b--duo { grid-template-columns: 1fr 1fr; } .b--trio { grid-template-columns: repeat(3, 1fr); } .b__cap { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--anno); margin-top: 10px; } /* Texte éditorial */ .b--text { display: grid; grid-template-columns: 120px minmax(0, 460px); gap: 28px 40px; } .b__label { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--dim); padding-top: 4px; } .b__body { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; } .b__body + .b__body { margin-top: 12px; } /* Citation */ .b--quote blockquote { margin: 0; max-width: 18ch; font-family: Anton, Impact, sans-serif; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.02em; } .b--quote cite { display: block; margin-top: 20px; font-family: "Space Mono", monospace; font-size: 10px; font-style: normal; letter-spacing: 0.2em; color: var(--dim); } /* Crédits */ .b--credits dl { display: grid; grid-template-columns: 200px 1fr; gap: 12px 40px; margin: 0; max-width: 640px; border-top: 1px solid var(--line); padding-top: 26px; } .b--credits dt { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--dim); } .b--credits dd { margin: 0; font-size: 14px; } /* --- Galerie --------------------------------------------------- */ .gal { position: relative; } .gal__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; } .gal__track::-webkit-scrollbar { display: none; } .gal__item { flex: none; width: min(78%, 860px); scroll-snap-align: center; background: var(--surface); background-size: cover; background-position: center; } .gal__bar { display: flex; align-items: center; gap: 18px; margin-top: 16px; } .gal__btn { width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color 200ms; } .gal__btn:hover { border-color: var(--accent); } .gal__btn svg { width: 12px; height: 12px; stroke: currentColor; } .gal__count { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--dim); } /* --- Vidéo : lecture complète, avec son ----------------------- */ .vid { position: relative; background: #000; overflow: hidden; } .vid__el { width: 100%; height: 100%; display: block; } .vid__cover { position: absolute; inset: 0; background-size: cover; background-position: center; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; transition: opacity 300ms; } .vid__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)); } .vid.is-playing .vid__cover { opacity: 0; pointer-events: none; } .vid__play { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px 26px 16px 22px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); color: #FFFFFF; font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.2em; transition: background 200ms, border-color 200ms; } .vid__cover:hover .vid__play { background: var(--accent); border-color: var(--accent); } .vid__play svg { width: 11px; height: 13px; fill: currentColor; } .vid__dur { position: absolute; bottom: 18px; right: 20px; z-index: 2; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.8); } .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ============================================================ Séquence d'entrée ============================================================ */ @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes slide { from { opacity: 0; transform: translateX(24px) skewY(var(--skew)); } to { opacity: var(--dim-thumb); transform: skewY(var(--skew)); } } @keyframes bloom { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } } .is-intro .hero { animation: bloom 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } .is-intro .thumb { animation: slide 500ms cubic-bezier(0.22, 1, 0.36, 1) both; } .is-intro .caption, .is-intro .rakkan { animation: rise 400ms 700ms cubic-bezier(0.22, 1, 0.36, 1) both; } .is-intro .nav, .is-intro .anno { animation: rise 300ms 900ms ease both; } /* ============================================================ Responsive — sous 900px : plus de rail, plus de gouttière ============================================================ */ .mobile { display: none; } @media (max-width: 900px) { body { overflow: auto; } .stage, .rail, .rakkan, .caption, .anno, .hero { display: none; } .nav { position: sticky; height: 72px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--line); } .nav__contact { display: none; } .filters { gap: 18px; } .filter { font-size: 10px; letter-spacing: 0.1em; } .mobile { display: block; padding: 24px 20px 100px; } .card { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin-bottom: 40px; cursor: pointer; } .card__media { width: 100%; aspect-ratio: 3 / 2; background: var(--surface); background-size: cover; background-position: center; } .card__num { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--dim); margin-top: 12px; } .card__title { font-family: Anton, Impact, sans-serif; font-size: 26px; letter-spacing: -0.02em; margin: 6px 0 4px; color: var(--text); } .card__meta { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--dim); } .detail__head { padding: 90px 20px 0; } .detail__close { top: 16px; right: 16px; } .blocks { padding: 0 20px 100px; } .b { margin-top: 56px; } .b--duo, .b--trio { grid-template-columns: 1fr; } .b--text { grid-template-columns: 1fr; gap: 10px; } .b--credits dl { grid-template-columns: 1fr; gap: 4px 0; } .b--credits dd { margin-bottom: 14px; } .gal__item { width: 88%; } } /* ============================================================ Accessibilité — mouvement réduit ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ Contact Même langage que la vue projet : un panneau, pas une page. Le sceau ouvre le bloc, comme il termine la colonne ailleurs. ============================================================ */ .contact { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: grid; place-items: center; padding: 40px; opacity: 0; visibility: hidden; transition: opacity var(--tr-slow), visibility var(--tr-slow); } .contact.is-open { opacity: 1; visibility: visible; } .contact__close { position: absolute; top: 30px; right: 44px; width: 38px; height: 38px; display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color 200ms; } .contact__close:hover { border-color: var(--accent); } .contact__close svg { width: 13px; height: 13px; stroke: currentColor; } .contact__inner { width: 100%; max-width: 620px; } .contact__seal { margin-bottom: 34px; } .contact__lead { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0 0 38px; max-width: 46ch; } .contact__mail { display: inline-block; font-family: Anton, Impact, sans-serif; font-size: clamp(26px, 5vw, 54px); line-height: 1; letter-spacing: -0.02em; color: var(--text); border-bottom: 2px solid transparent; transition: color 200ms, border-color 200ms; word-break: break-word; } .contact__mail:hover { color: var(--accent); border-bottom-color: var(--accent); } .contact__facts { display: grid; grid-template-columns: 170px 1fr; gap: 10px 32px; margin: 54px 0 0; padding-top: 26px; border-top: 1px solid var(--line); } .contact__facts dt { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--dim); } .contact__facts dd { margin: 0; font-size: 14px; color: var(--body); } @media (max-width: 900px) { .contact { place-items: start; padding: 90px 20px 60px; } .contact__close { top: 16px; right: 16px; } .contact__facts { grid-template-columns: 1fr; gap: 4px 0; } .contact__facts dd { margin-bottom: 14px; } }