/* XISTENZ homepage — "distilled glitch". Rebuilt from mockups/distilled-glitch.html. Self-contained: the homepage does not link base.css (that's for project pages). Ambient mode is toggled by a class on (set pre-paint in the head) rather than on .site, so a returning visitor's OFF choice never flashes the effect. */ :root { color-scheme: dark; /* unxpctd palette on a violet-biased near-black */ --void: #131318; --panel: #1c1c25; --panel-2: #232230; --edge: #2e2d3a; --ink: #edeaf4; --dim: #a09aae; --faint: #6d6880; --blue: #2d00f7; --indigo: #6a00f4; --violet: #8900f2; --cerise: #e500a4; --magenta: #f20089; --signal: #ffb600; /* reserved: LIVE + member lock only */ --gradient: linear-gradient(105deg, #2d00f7 0%, #8900f2 45%, #f20089 100%); --font-display: 'Avenir Next Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--void); } .site { min-height: 100vh; background: var(--void); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; overflow-x: hidden; position: relative; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); position: relative; z-index: 1; } /* ---------- topbar ---------- */ .topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--dim); border-bottom: 1px solid var(--edge); } .topbar .brand { color: inherit; text-decoration: none; } .topbar .brand b { color: var(--ink); font-weight: 700; } .topbar .brand:hover b { color: var(--cerise); } /* Site navigation is two links' worth of chrome, so it is not a nav bar: the brand goes home and one ABOUT link sits beside the ambient toggle (decision #7). If a third and fourth destination ever appear, this is where they go. */ .topnav { display: flex; align-items: center; gap: 1rem; } .topnav a { color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 150ms ease, border-color 150ms ease; } .topnav a:hover, .topnav a:focus-visible { color: var(--ink); border-bottom-color: var(--cerise); } .topnav a:focus-visible { outline: 2px solid var(--cerise); outline-offset: 3px; } .ambient-toggle { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; color: var(--dim); background: none; border: 1px solid var(--edge); padding: 0.45em 0.9em; cursor: pointer; transition: border-color 150ms ease, color 150ms ease; } .ambient-toggle:hover, .ambient-toggle:focus-visible { border-color: var(--cerise); color: var(--ink); } .ambient-toggle:focus-visible { outline: 2px solid var(--cerise); outline-offset: 2px; } .ambient .ambient-toggle { border-color: var(--magenta); color: var(--magenta); } /* ---------- hero ---------- */ .hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); } .hero h1 { font-family: var(--font-display); font-weight: 900; font-stretch: condensed; font-size: clamp(3.6rem, 14vw, 11rem); line-height: 0.88; letter-spacing: -0.03em; text-transform: uppercase; position: relative; display: inline-block; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* static chromatic aberration — the signature. Reads glitch while perfectly still. */ .hero h1::before, .hero h1::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; background: none; -webkit-text-fill-color: currentColor; } .hero h1::before { color: var(--magenta); transform: translate(-4px, 3px); opacity: 0.55; } .hero h1::after { color: var(--indigo); transform: translate(4px, -3px); opacity: 0.65; } .hero .callsign { font-family: var(--font-mono); font-size: clamp(0.7rem, 1.8vw, 0.85rem); letter-spacing: 0.28em; text-transform: uppercase; color: var(--cerise); margin-top: 1.4rem; } .hero .intro { max-width: 34em; margin-top: 1.2rem; color: var(--dim); font-size: 1.05rem; text-wrap: pretty; } .hero .intro a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cerise); text-underline-offset: 3px; } .hero .intro a:hover { color: var(--cerise); } /* ---------- registry grid ---------- */ .registry { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.4rem; padding-bottom: 1rem; } .card { position: relative; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 70%); border: 1px solid var(--edge); padding: 2.2rem 1.8rem 1.6rem; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 200ms ease, transform 200ms ease; } a.card:hover, a.card:focus-visible { border-color: var(--cerise); transform: translateY(-2px); } a.card:focus-visible { outline: 2px solid var(--cerise); outline-offset: 2px; } /* index chip: accession number in the registry, newest first */ .card .index { position: absolute; top: -1px; left: -1px; background: var(--gradient); color: var(--void); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; padding: 0.5em 1.1em; } .card h2 { font-family: var(--font-display); font-weight: 900; font-stretch: condensed; font-size: 1.7rem; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; margin-top: 0.9rem; transition: text-shadow 200ms ease; } /* hover-only aberration — interference on contact, never at rest */ a.card:hover h2 { text-shadow: -2px 1px 0 rgba(242, 0, 137, 0.55), 2px -1px 0 rgba(106, 0, 244, 0.6); } .card .meta { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cerise); margin-top: 0.5rem; } .card .desc { color: var(--dim); font-size: 0.95rem; margin-top: 0.9rem; flex-grow: 1; } .card .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; } .tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--edge); padding: 0.35em 0.8em; transition: color 150ms ease, border-color 150ms ease; } a.card:hover .tag { border-color: var(--violet); color: var(--ink); } .card .foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--edge); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; } .status { color: var(--faint); } .status::before { content: '●'; margin-right: 0.6em; font-size: 0.7em; vertical-align: 1px; } .status.live { color: var(--signal); } .status.active { color: var(--magenta); } .status.stable { color: var(--violet); } .status.wip { color: var(--dim); } .card .foot .go { color: var(--faint); transition: color 150ms ease; } a.card:hover .foot .go { color: var(--cerise); } /* scan-line: sweeps once on hover, then rests */ .scan { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--cerise), transparent); opacity: 0; pointer-events: none; } a.card:hover .scan { animation: scan-sweep 700ms ease-out 1; } @keyframes scan-sweep { 0% { top: 0; opacity: 0; } 15% { opacity: 0.9; } 85% { opacity: 0.9; } 100% { top: 100%; opacity: 0; } } /* ---------- locked (members) cards ---------- */ .card.locked { cursor: default; } .card.locked h2 { color: var(--ink); } .card.locked:hover { border-color: var(--signal); } .card.locked .status { color: var(--signal); } .lockbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.2rem; padding: 0.6rem 0.9rem; border: 1px dashed rgba(255, 182, 0, 0.45); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); } .lockbar a { color: var(--signal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .lockbar a:hover { color: var(--ink); } /* ---------- access strip ---------- */ .access { margin: 3.5rem 0 1rem; border: 1px solid var(--edge); background: linear-gradient(160deg, var(--panel-2), var(--panel)); padding: clamp(1.6rem, 4vw, 2.6rem); position: relative; overflow: hidden; } .access::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient); } .access h2 { font-family: var(--font-display); font-weight: 900; font-stretch: condensed; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.01em; } .access p { color: var(--dim); max-width: 38em; margin-top: 0.6rem; } .access form { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; max-width: 34rem; } .access input[type="email"] { flex: 1 1 14rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); background: var(--void); border: 1px solid var(--edge); padding: 0.8em 1em; transition: border-color 150ms ease; } .access input[type="email"]::placeholder { color: var(--faint); } .access input[type="email"]:focus { outline: none; border-color: var(--cerise); box-shadow: 0 0 0 3px rgba(229, 0, 164, 0.15); } .access button { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: #fff; background: var(--gradient); border: none; padding: 0.8em 1.6em; cursor: pointer; transition: filter 150ms ease, transform 150ms ease; } .access button:hover { filter: brightness(1.15) saturate(1.1); transform: translateY(-1px); } .access button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .access .note { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 1rem; } .access .status-line { color: var(--cerise); } .access .sent { display: none; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--signal); margin-top: 1.2rem; } .access.dispatched .sent { display: block; } .access.dispatched form { opacity: 0.35; pointer-events: none; } .access .err { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--magenta); margin-top: 1.2rem; } .access .err[hidden] { display: none; } /* ---------- footer ---------- */ footer { margin-top: 4rem; padding: 2.5rem 0 3rem; border-top: 1px solid var(--edge); text-align: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; } footer p + p { margin-top: 0.6rem; } footer a { color: var(--dim); text-decoration: underline; text-underline-offset: 4px; transition: color 150ms ease; } footer a:hover { color: var(--cerise); } footer .stamp { opacity: 0.55; font-size: 0.6rem; margin-top: 1.2rem; } /* ========================================================= AMBIENT MODE — everything below only exists when opted in. The class lives on , set before paint. This is the old always-on chaos, quarantined behind the toggle. ========================================================= */ .vhs, .bleed { display: none; } .ambient .vhs { display: block; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent 0px, rgba(255, 255, 255, 0.028) 1px, transparent 2px, transparent 4px); pointer-events: none; z-index: 10; animation: vhs-track 0.12s infinite; } @keyframes vhs-track { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } } .ambient .bleed { display: block; position: fixed; inset: 0; background: radial-gradient(ellipse at 18% 25%, rgba(106, 0, 244, 0.10) 0%, transparent 50%), radial-gradient(ellipse at 82% 70%, rgba(242, 0, 137, 0.10) 0%, transparent 50%); pointer-events: none; z-index: 9; animation: bleed-pulse 7s ease-in-out infinite; } @keyframes bleed-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .ambient .hero h1 { animation: title-stutter 8s steps(1) infinite; } @keyframes title-stutter { 0%, 93%, 100% { transform: translate(0, 0); filter: none; } 94% { transform: translate(-4px, 1px) scaleX(1.01); filter: saturate(1.6); } 95% { transform: translate(5px, -1px) scaleX(0.99); filter: saturate(2) contrast(1.2); } 96% { transform: translate(-2px, 0) scaleX(1); filter: saturate(1.3); } 97% { transform: translate(0, 0); filter: none; } } /* ---------- reduced motion: everything stops, ambient loses meaning ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .ambient-toggle { display: none; } } @media (max-width: 640px) { .card { padding: 2rem 1.3rem 1.3rem; } .access form { flex-direction: column; } .access button { width: 100%; } }