/* ============================================================ listography · vaporwave desktop Palette : presence/templates/vaporwave/overflow-dark.html (violet nuit, bevels Win95 sombres, grille néon, horizon rose) ============================================================ */ :root { --pink: #ff9ed8; --cyan: #8be9fd; --lav: #c8a2ff; --mint: #a7f3d8; --cream: #f6f2ff; --face: #231a3d; /* face des fenêtres */ --face2: #1b1334; /* panneaux enfoncés */ --chip: #2e2350; --sunk: #120c26; /* le plus creux (fonds de piste) */ --hi: #4f3d78; /* arête claire du biseau */ --lo: #15102b; --shadow: #08050f; /* arête sombre du biseau */ --ink: #ece6ff; --dim: #a695cf; --font: "Segoe UI", Tahoma, system-ui, sans-serif; --mono: "Courier New", ui-monospace, monospace; --gap: 22px; --tb: 34px; /* hauteur barre des tâches */ } [data-accent="pink"] { --k: var(--pink); } [data-accent="cyan"] { --k: var(--cyan); } [data-accent="lav"] { --k: var(--lav); } [data-accent="mint"] { --k: var(--mint); } * { box-sizing: border-box; } html { scroll-padding-top: 16px; } body { margin: 0; padding: 30px 26px calc(var(--tb) + 34px); font-family: var(--font); color: var(--ink); background: #0a0618; position: relative; /* `clip` et pas `hidden` : `hidden` ferait de un conteneur de défilement et tuerait le scroll composité (molette saccadée). */ overflow-x: clip; } /* Fond et grille : deux calques fixes, hors du flux, promus sur le GPU. Rien à repeindre pendant le scroll — c'est le compositeur qui travaille. */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; transform: translateZ(0); will-change: transform; } /* dégradé violet + halo rose à l'horizon */ body::before { z-index: -2; background: radial-gradient(120% 80% at 50% 120%, rgba(255, 158, 216, 0.28), transparent 70%), radial-gradient(140% 90% at 50% 0%, #2a1850 0%, #150d2e 46%, #0a0618 100%); } /* grille en perspective, néon */ body::after { z-index: -1; background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(139, 233, 253, 0.5) 38px 39px), repeating-linear-gradient(0deg, transparent 0 38px, rgba(200, 162, 255, 0.42) 38px 39px); mask: linear-gradient(180deg, transparent 34%, #000 100%); -webkit-mask: linear-gradient(180deg, transparent 34%, #000 100%); filter: drop-shadow(0 0 4px rgba(139, 233, 253, 0.5)); opacity: 0.55; } .desk { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; } /* ===== la fenêtre ===== */ .win { background: var(--face); border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 rgba(255, 255, 255, 0.08), 8px 8px 0 rgba(0, 0, 0, 0.45), 0 30px 70px -24px rgba(0, 0, 0, 0.85); padding: 3px; } .titlebar { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 9px; background: linear-gradient(90deg, var(--pink), var(--lav) 60%, var(--cyan)); color: #1a1030; position: relative; z-index: 3; } .titlebar b { font-size: 12px; letter-spacing: 0.18em; font-weight: 700; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-btns { margin-left: auto; display: flex; gap: 4px; } .tb-btns span, .tb-btns button { width: 20px; height: 18px; display: grid; place-items: center; padding: 0; font: inherit; font-size: 11px; line-height: 1; color: var(--ink); background: var(--face); border: 1px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); box-shadow: inset -1px -1px 0 var(--lo); cursor: pointer; } .tb-btns button:hover { background: var(--chip); color: var(--cream); } .tb-btns button:active { border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); box-shadow: inset 1px 1px 0 var(--lo); } .tb-btns button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; } .win-body { border: 2px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); background: linear-gradient(160deg, #221a3c, #171029); padding: 14px 16px 16px; position: relative; } /* replié / fermé */ .win.is-min > .win-body { display: none; } .win.is-closed { display: none; } /* ===== sélecteur de langue (haut à droite) ===== */ .langbar { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 10px; } .lang { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-decoration: none; color: var(--dim); background: var(--face); padding: 5px 11px; border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); box-shadow: inset -1px -1px 0 var(--lo), 3px 3px 0 rgba(0, 0, 0, 0.45); } .lang:hover { color: var(--cream); background: var(--chip); } .lang.is-on { color: #1a1030; background: linear-gradient(90deg, var(--pink), var(--lav) 70%, var(--cyan)); border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.25); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45); cursor: default; } .lang:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ===== en-tête : welcome + profil ===== */ .stack { display: flex; flex-direction: column; gap: var(--gap); margin-bottom: var(--gap); } .welcome .win-body { display: flex; align-items: center; gap: 10px; padding: 13px 16px; } .led { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #5cf0bd; color: #5cf0bd; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 8px 1px currentColor; } .welcome-text { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--cream); text-shadow: 1.5px 0 var(--pink), -1.5px 0 var(--cyan); animation: chroma 4s steps(1) infinite; } @keyframes chroma { 0%, 90%, 100% { text-shadow: 1.5px 0 var(--pink), -1.5px 0 var(--cyan); } 92% { text-shadow: -3px 0 var(--cyan), 3px 0 var(--pink); } 95% { text-shadow: 2px 0 var(--lav), -2px 1px var(--pink); } } .clock { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: 0.1em; white-space: nowrap; } .profile { overflow: visible; } .profile .win-body { overflow: visible; padding: 16px 18px 18px; } .kanji { position: absolute; right: 14px; top: 8px; writing-mode: vertical-rl; font-weight: 900; font-size: clamp(44px, 8vw, 84px); line-height: 0.8; color: var(--lav); opacity: 0.16; pointer-events: none; user-select: none; text-shadow: 2px 2px 0 rgba(139, 233, 253, 0.4); } .profile-text { position: relative; z-index: 2; max-width: 100%; } .profile.has-art .profile-text { max-width: 62%; } .profile.has-art .win-body { min-height: 200px; } .handle { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: 0.05em; margin: 0; color: var(--cream); text-shadow: 1.5px 0 var(--pink), -1.5px 0 var(--cyan); } .meta { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.08em; margin-top: 5px; } .meta b { color: var(--lav); font-weight: 600; } .bio { font-size: 14px; line-height: 1.55; color: var(--cream); margin: 13px 0 0; border-left: 3px solid var(--pink); padding-left: 14px; text-shadow: 0 0 18px rgba(255, 158, 216, 0.18); } .links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; background: var(--chip); padding: 4px 9px; border: 1px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); box-shadow: inset -1px -1px 0 var(--lo); } .chip a { color: var(--cyan); text-decoration: none; } .chip:hover { background: #3a2c64; } .chip:hover a { color: var(--pink); text-shadow: 0 0 10px rgba(255, 158, 216, 0.6); } /* personnage qui déborde à droite (optionnel : `character:` dans profile.md) */ .art { position: absolute; bottom: 0; right: -18px; z-index: 5; height: 240px; width: auto; display: block; pointer-events: none; filter: saturate(1.05) drop-shadow(0 0 20px rgba(200, 162, 255, 0.5)) drop-shadow(8px 12px 14px rgba(8, 4, 20, 0.6)); } /* ===== la grille de listes (masonry en colonnes) ===== */ .grid { column-count: 3; column-gap: var(--gap); } .grid > .win { break-inside: avoid; margin-bottom: var(--gap); display: inline-block; width: 100%; } /* une fenêtre « agrandie » sort du flux colonne et prend toute la largeur */ .grid > .win.is-max { column-span: all; display: block; } .grid > .win.is-max .items { column-count: 2; column-gap: 24px; } .list-title { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 2px; color: var(--k, var(--lav)); text-transform: lowercase; text-shadow: 0 0 12px color-mix(in srgb, var(--k, var(--lav)) 45%, transparent); } .list-title::before { content: "▸ "; opacity: 0.6; } .stamp { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--dim); letter-spacing: 0.1em; margin-bottom: 10px; opacity: 0.75; } .stamp::after { content: " ∞"; opacity: 0.5; } .sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 16px 0 7px; padding-bottom: 4px; border-bottom: 1px dashed rgba(166, 149, 207, 0.28); } .sub:first-child { margin-top: 4px; } .items { list-style: none; margin: 0; padding: 0; } .items li { position: relative; padding: 3px 0 3px 15px; font-size: 13.3px; line-height: 1.5; color: var(--ink); } .items li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; background: var(--k, var(--lav)); box-shadow: 0 0 8px 0 var(--k, var(--lav)); } .items li:hover::before { background: var(--pink); box-shadow: 0 0 10px 0 var(--pink); } .items b { color: var(--cream); font-weight: 700; } .items i { color: var(--k, var(--lav)); font-style: italic; } .items s { color: var(--dim); opacity: 0.7; } .dash { color: var(--dim); } .items a, .para a, .note a { color: var(--cyan); text-decoration: none; border-bottom: 1px dotted currentColor; } .items a:hover, .para a:hover, .note a:hover { color: var(--pink); text-shadow: 0 0 10px rgba(255, 158, 216, 0.6); } code { font-family: var(--mono); font-size: 0.9em; background: var(--sunk); border: 1px solid var(--lo); padding: 0 4px; color: var(--mint); } .para { font-size: 13.3px; line-height: 1.6; color: var(--ink); margin: 8px 0; } .note { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--dim); background: var(--face2); border: 2px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); box-shadow: inset 1px 1px 0 var(--lo); padding: 8px 10px; margin: 12px 0; } .note::before { content: "! "; color: var(--pink); font-weight: 700; } /* galeries d'images */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 7px; margin: 10px 0; } .gallery .thumb, .items .thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); box-shadow: inset -1px -1px 0 var(--lo); background: var(--sunk); transition: transform 0.14s ease, filter 0.14s ease; } .gallery .thumb:hover { transform: scale(1.06); filter: saturate(1.2); position: relative; z-index: 2; } .items .thumb { display: inline-block; width: 54px; aspect-ratio: 1; vertical-align: middle; margin-right: 6px; } /* ===== barre des tâches ===== */ .taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--tb); display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--face); border-top: 2px solid var(--hi); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55); } .tb-start { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; padding: 4px 10px; color: #1a1030; background: linear-gradient(90deg, var(--pink), var(--lav)); border: 1px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45); flex: none; } .tasks { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--chip) transparent; flex: 1; min-width: 0; } .task { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--dim); background: var(--face2); padding: 4px 9px; border: 1px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); box-shadow: inset -1px -1px 0 var(--lo); cursor: pointer; white-space: nowrap; } .task:hover { color: var(--cream); background: var(--chip); } .task.is-off { border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); box-shadow: inset 1px 1px 0 var(--lo); color: var(--pink); opacity: 0.75; } .task:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; } .tb-clock { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: 0.08em; padding: 4px 8px; border: 1px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); box-shadow: inset 1px 1px 0 var(--lo); background: var(--sunk); } .foot { margin-top: 8px; text-align: center; font-family: var(--mono); font-size: 9.5px; color: var(--dim); opacity: 0.55; letter-spacing: 0.08em; } /* ===== responsive ===== */ @media (max-width: 1100px) { .grid { column-count: 2; } } @media (max-width: 720px) { body { padding: 18px 14px calc(var(--tb) + 26px); } .grid { column-count: 1; } .grid > .win.is-max .items { column-count: 1; } .profile.has-art .profile-text { max-width: 100%; } .profile.has-art .win-body { min-height: 0; padding-top: 62px; } .art { height: 168px; right: -6px; bottom: auto; top: -46px; opacity: 0.92; } .kanji { opacity: 0.1; } .tb-start { display: none; } .tb-clock { display: none; } } @media (prefers-reduced-motion: reduce) { .welcome-text { animation: none; text-shadow: 1px 0 var(--pink), -1px 0 var(--cyan); } .gallery .thumb { transition: none; } } @media print { body::before, body::after, .taskbar, .tb-btns, .langbar, .art { display: none; } .win { box-shadow: none; break-inside: avoid; } }