Mode clair / sombre et thèmes de saison
This commit is contained in:
parent
da05adede1
commit
17cf2c8380
19 changed files with 3563 additions and 0 deletions
132
assets/css/effects.css
Normal file
132
assets/css/effects.css
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
/* effects.css : thème yb2026 (base : handoff/theme-assets/effects.css, design v3) */
|
||||
:root {
|
||||
--bg:#0a0a0a; --card:#101010; --ph:#141414; --ink:#f5f5f0; --lime:#d3fd50;
|
||||
--bg-rgb:10,10,10; --ink-rgb:245,245,240; --lime-rgb:211,253,80;
|
||||
--blend-ink:#f5f5f0; /* titre en mix-blend-mode: difference */
|
||||
--gut:44px; color-scheme:dark;
|
||||
}
|
||||
/* Mode clair : papier, encre presque noire, accent chartreuse profond (contraste 5:1) */
|
||||
html[data-theme="light"] {
|
||||
--bg:#f3f2ed; --card:#ffffff; --ph:#e7e6e0; --ink:#111111; --lime:#4a7300;
|
||||
--bg-rgb:243,242,237; --ink-rgb:17,17,17; --lime-rgb:74,115,0;
|
||||
--blend-ink:#ffffff; --cursor-blend:normal; color-scheme:light;
|
||||
}
|
||||
@media (max-width:1024px) { :root { --gut:30px; } }
|
||||
@media (max-width:720px) { :root { --gut:20px; } }
|
||||
::selection { background:var(--lime); color:var(--bg); }
|
||||
.has-custom-cursor, .has-custom-cursor * { cursor:none !important; }
|
||||
body.no-scroll { overflow:hidden; }
|
||||
html { background-color:var(--bg); }
|
||||
|
||||
/* Grain filmique */
|
||||
body::after { content:''; position:fixed; inset:0; z-index:96; pointer-events:none; opacity:.05;
|
||||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
||||
|
||||
/* Barre de progression + nav */
|
||||
/* Barre dessinée en ombre interne (pas en fond) : Safari iOS teinte ses barres avec le fond des éléments fixés en haut */
|
||||
.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:60; box-shadow:inset 0 2px 0 var(--lime); transform:scaleX(0); transform-origin:left; pointer-events:none; }
|
||||
.site-nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:transform .5s cubic-bezier(.2,.8,.2,1);
|
||||
background:rgba(var(--bg-rgb), .55); backdrop-filter:blur(14px); border-bottom:1px solid rgba(var(--ink-rgb), .07); }
|
||||
|
||||
/* Rail */
|
||||
.section-rail [data-rail-target] { color:rgba(var(--ink-rgb), .35); transition:color .3s; }
|
||||
.section-rail [data-rail-target]::after { content:''; display:inline-block; width:5px; height:5px; margin-left:9px; border-radius:50%; background:rgba(var(--ink-rgb), .25); transition:background .3s, box-shadow .3s; }
|
||||
.section-rail .is-active { color:var(--lime); }
|
||||
.section-rail .is-active::after { background:var(--lime); box-shadow:0 0 10px rgba(var(--lime-rgb), .8); }
|
||||
|
||||
/* Reveals */
|
||||
[data-reveal] { opacity:0; transform:translateY(48px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
|
||||
[data-reveal].is-in { opacity:1; transform:none; }
|
||||
|
||||
/* Hero : titre révélé ligne par ligne (chaque ligne dans un wrapper overflow:hidden) */
|
||||
@keyframes yb-line-up { from { transform:translateY(115%); } to { transform:none; } }
|
||||
.line-mask { overflow:hidden; }
|
||||
.line-mask > * { animation:yb-line-up 1.05s cubic-bezier(.2,.8,.2,1) backwards; }
|
||||
.line-mask:nth-child(2) > * { animation-delay:.14s; }
|
||||
.line-mask:nth-child(3) > * { animation-delay:.28s; }
|
||||
@keyframes yb-arrow { 0%,100% { transform:none; } 50% { transform:translateX(9px); } }
|
||||
.scroll-hint__arrow { display:inline-block; animation:yb-arrow 1.6s ease-in-out infinite; }
|
||||
|
||||
/* Wipe */
|
||||
/* Rideau masqué (visibility) au repos : sinon Safari iOS garde sa couleur pour ses barres haut et bas */
|
||||
.yb-wipe { position:fixed; inset:0; z-index:9990; background:var(--lime); display:flex; align-items:center; justify-content:center;
|
||||
transform:translateY(100%); visibility:hidden; transition:transform .45s cubic-bezier(.7,0,.3,1), visibility 0s .45s; pointer-events:none; }
|
||||
.yb-wipe.is-covering { transform:none; visibility:visible; transition:transform .45s cubic-bezier(.7,0,.3,1), visibility 0s; }
|
||||
html.is-entering .yb-wipe { transform:none; visibility:visible; transition:none; }
|
||||
html:not(.is-entering) .yb-wipe:not(.is-covering) { transform:translateY(-100%); visibility:hidden; transition:transform .55s cubic-bezier(.7,0,.3,1), visibility 0s .55s; }
|
||||
.yb-wipe__label { font:700 16px 'JetBrains Mono',monospace; color:var(--bg); letter-spacing:.3em; }
|
||||
|
||||
/* Marquee */
|
||||
@keyframes yb-mq { to { transform:translateX(-50%); } }
|
||||
.marquee { overflow:hidden; }
|
||||
.marquee-track { display:flex; width:max-content; white-space:nowrap; animation:yb-mq 16s linear infinite; }
|
||||
.marquee-track--reverse { animation-direction:reverse; }
|
||||
|
||||
/* Divers */
|
||||
@keyframes yb-spin { to { transform:rotate(360deg); } }
|
||||
.spin-circle { width:52px; height:52px; border:1px dashed var(--lime); border-radius:50%; animation:yb-spin 12s linear infinite; }
|
||||
@keyframes yb-pulse { 50% { opacity:.35; } }
|
||||
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); animation:yb-pulse 2s infinite; }
|
||||
.card-img img { filter:grayscale(.35) contrast(1.05); transition:filter .4s, transform .5s; }
|
||||
.card:hover .card-img img { filter:none; transform:scale(1.04); }
|
||||
.outline-lime { color:transparent; -webkit-text-stroke:2px var(--lime); }
|
||||
|
||||
/* Menu mobile */
|
||||
[data-menu] { position:fixed; inset:0; z-index:48; background:rgba(var(--bg-rgb), .96); backdrop-filter:blur(18px);
|
||||
display:flex; flex-direction:column; justify-content:center; padding:90px 24px 40px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
|
||||
[data-menu].is-open { opacity:1; visibility:visible; }
|
||||
[data-menu-toggle] { display:none; }
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width:1100px) {
|
||||
.site-nav__links { display:none; }
|
||||
[data-menu-toggle] { display:flex; white-space:nowrap; }
|
||||
.hero__vertical-label, .hero__aside { display:none; }
|
||||
}
|
||||
@media (max-width:720px) {
|
||||
.section-rail { display:none; }
|
||||
.hero__title { font-size:min(16.5vw,145px); }
|
||||
.hero__content { left:var(--gut); right:var(--gut); bottom:84px; }
|
||||
/* Travaux : plus de section sticky, piste en scroll-snap natif = fluide au doigt */
|
||||
#travaux { height:auto !important; }
|
||||
#travaux .works-sticky { position:static; height:auto; padding:110px 0 60px; }
|
||||
.works-track { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; width:auto !important; gap:20px; padding:0 var(--gut); scrollbar-width:none; }
|
||||
.works-track::-webkit-scrollbar { display:none; }
|
||||
.works-track .card { width:84vw; scroll-snap-align:center; }
|
||||
.works-track .card-img { height:52vw; }
|
||||
.grid-auto { grid-template-columns:1fr !important; }
|
||||
.article__meta { position:static; width:100%; }
|
||||
}
|
||||
@media (pointer:coarse) { .card-img img { filter:none; } }
|
||||
/* Animations inconditionnelles (choix de Yasser : son système active « réduire les animations »
|
||||
et il veut voir le site animé). Seul ?ybstatic=1 → html.yb-static fige tout, pour les captures. */
|
||||
html.yb-static *, html.yb-static *::before, html.yb-static *::after { animation:none !important; transition:none !important; }
|
||||
html.yb-static [data-reveal] { opacity:1; transform:none; }
|
||||
html.yb-static .yb-wipe { display:none; }
|
||||
|
||||
/* Curseur custom (cursor.js) : point accent qui s'étire en index, puis la main apparaît autour du doigt */
|
||||
.yb-cursor { position:fixed; left:0; top:0; z-index:9999; pointer-events:none; }
|
||||
.yb-cursor__dot { position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:6px; background:var(--lime);
|
||||
mix-blend-mode:var(--cursor-blend,difference);
|
||||
transition:width .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1), margin .22s cubic-bezier(.2,.8,.2,1), border-radius .22s, opacity .18s .1s; }
|
||||
.yb-cursor__hand { position:absolute; left:-12.5px; top:-2px; width:34px; height:38px; opacity:0;
|
||||
transform-origin:12.5px 2px; transform:scale(.3) rotate(10deg);
|
||||
filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
|
||||
transition:opacity .16s, transform .3s cubic-bezier(.2,.8,.2,1); }
|
||||
.yb-cursor__hand svg { display:block; overflow:visible; }
|
||||
.yb-cursor.is-hand .yb-cursor__dot { width:7px; height:17px; margin:-1px 0 0 -3.5px; border-radius:3.5px; opacity:0; }
|
||||
.yb-cursor.is-hand .yb-cursor__hand { opacity:1; transform:scale(1) rotate(-8deg); transition:opacity .18s .08s, transform .34s .04s cubic-bezier(.3,1.4,.5,1); }
|
||||
.yb-cursor__label { position:absolute; left:16px; top:-11px; font:700 11px 'JetBrains Mono',monospace; color:var(--bg); background:var(--lime);
|
||||
padding:4px 9px; border-radius:3px; white-space:nowrap; opacity:0; transform:scale(.6); transform-origin:left center; transition:opacity .18s, transform .18s, left .25s; }
|
||||
.yb-cursor.is-hand .yb-cursor__label { left:30px; }
|
||||
.yb-hand-spark { transform-box:fill-box; transform-origin:center; animation:yb-spark 1.2s ease-in-out infinite; }
|
||||
@keyframes yb-spark { 50% { transform:scale(.4) rotate(45deg); opacity:.5; } }
|
||||
|
||||
/* Roue des projets et articles : le point s'ouvre en loupe, centre de la lentille sur la souris */
|
||||
.yb-cursor__loupe { position:absolute; left:-14px; top:-14px; width:34px; height:34px; opacity:0;
|
||||
transform-origin:14px 14px; transform:scale(.35) rotate(-40deg); filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
|
||||
transition:opacity .16s, transform .3s cubic-bezier(.2,.8,.2,1); }
|
||||
.yb-cursor__loupe svg { display:block; overflow:visible; }
|
||||
.yb-cursor.is-loupe .yb-cursor__dot { width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:10px; opacity:0; }
|
||||
.yb-cursor.is-loupe .yb-cursor__loupe { opacity:1; transform:none; transition:opacity .18s .06s, transform .36s .03s cubic-bezier(.3,1.4,.5,1); }
|
||||
.yb-cursor.is-loupe .yb-cursor__label { left:32px; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue