/* * EA: VISION & SOUND — Shared Stylesheet * Jasper Simionato | Neocities * * Structure: * 1. Custom Properties (design tokens + per-week colours) * 2. Reset & Base * 3. Typography * 4. Layout utilities * 5. Map page (index.html) * 6. Week page components * 7. Navigation chrome * 8. Utility / animation */ /* ================================================================ 1. CUSTOM PROPERTIES ================================================================ */ :root { /* Palette — dark editorial */ --bg: #0e0f11; --bg-raised: #14161a; --bg-card: #191c21; --border: rgba(255,255,255,0.08); --border-hi: rgba(255,255,255,0.18); /* Text */ --text: #dde3d8; /* warm off-white for body */ --text-dim: #8a9585; --text-faint:#909a8d; /* Accent (overridden by .wk-XX) */ --accent: #7fff7f; --accent-dim: rgba(127,255,127,0.12); --accent-glow: rgba(127,255,127,0.25); /* Typography */ --font-body: 'Lora', Georgia, 'Times New Roman', serif; --font-ui: 'Share Tech Mono', 'Courier New', monospace; --font-head: 'Cormorant Garamond', Georgia, serif; /* Spacing */ --gap: 1.5rem; --col: 720px; /* max reading column */ --map-scale: 1; /* set by map.js on resize */ /* Transitions */ --t: 0.2s ease; } /* ── Per-week accent colours ───────────────────────────────────── */ /* Used as on week pages, and as class on .node elements on the map */ .wk-01 { --accent:#ff6b35; --accent-dim:rgba(255,107,53,0.1); --accent-glow:rgba(255,107,53,0.3); } .wk-02 { --accent:#00d4ff; --accent-dim:rgba(0,212,255,0.1); --accent-glow:rgba(0,212,255,0.3); } .wk-03 { --accent:#ff3dff; --accent-dim:rgba(255,61,255,0.1); --accent-glow:rgba(255,61,255,0.3); } .wk-04 { --accent:#ffdd00; --accent-dim:rgba(255,221,0,0.1); --accent-glow:rgba(255,221,0,0.3); } .wk-05 { --accent:#7fff00; --accent-dim:rgba(127,255,0,0.1); --accent-glow:rgba(127,255,0,0.3); } .wk-06 { --accent:#ff007f; --accent-dim:rgba(255,0,127,0.1); --accent-glow:rgba(255,0,127,0.3); } .wk-07 { --accent:#00ffff; --accent-dim:rgba(0,255,255,0.1); --accent-glow:rgba(0,255,255,0.3); } .wk-08 { --accent:#ff9500; --accent-dim:rgba(255,149,0,0.1); --accent-glow:rgba(255,149,0,0.3); } .wk-09 { --accent:#bf00ff; --accent-dim:rgba(191,0,255,0.1); --accent-glow:rgba(191,0,255,0.3); } .wk-10 { --accent:#00ff8c; --accent-dim:rgba(0,255,140,0.1); --accent-glow:rgba(0,255,140,0.3); } .wk-11 { --accent:#ff4444; --accent-dim:rgba(255,68,68,0.1); --accent-glow:rgba(255,68,68,0.3); } .wk-12 { --accent:#c8a96e; --accent-dim:rgba(200,169,110,0.1); --accent-glow:rgba(200,169,110,0.3);} /* ================================================================ 2. RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 19px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.75; min-height: 100dvh; /* Subtle noise texture via SVG data URI — adds grain without a file */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); } img { display: block; max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; transition: opacity var(--t); } a:hover { opacity: 0.75; } ::selection { background: var(--accent); color: var(--bg); } /* ================================================================ 3. TYPOGRAPHY ================================================================ */ h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; } .mono { font-family: var(--font-ui); } /* Week number badge — large decorative element on week pages */ .week-badge { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.5em; } .week-badge::before { content: ''; display: inline-block; width: 2em; height: 1px; background: var(--accent); opacity: 0.5; } /* ================================================================ 4. LAYOUT UTILITIES ================================================================ */ .container { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: 1.5rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ================================================================ 5. MAP PAGE (index.html) ================================================================ */ /* ── Stage wrapper — scales to fit viewport ── */ #map-viewport { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* The 1200×900 logical stage. JS sets --map-scale. */ #map-stage { position: relative; width: 1200px; height: 900px; transform: scale(var(--map-scale)); transform-origin: center center; /* GPU-hint so the scale doesn't repaint the whole DOM */ will-change: transform; flex-shrink: 0; } /* SVG road lines, sits beneath everything */ #map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } /* Road path styles — single thin dotted line, no glow layer */ .road-line { stroke: rgba(255,255,255,0.1); stroke-width: 1; fill: none; stroke-dasharray: 4 9; /* 4px dot · 9px gap */ } /* On hover: week accent colour marches toward the node */ .road-line.hovered { stroke: var(--accent); filter: drop-shadow(0 0 3px var(--accent-glow)); } /* ── Centre node ── */ #centre-node { position: absolute; /* centred in the 1200×900 stage */ left: 600px; top: 450px; transform: translate(-50%, -50%); z-index: 10; text-align: center; pointer-events: none; } #centre-node .site-title { font-family: var(--font-head); font-size: 2.2rem; font-weight: 300; letter-spacing: 0.08em; color: var(--text); white-space: nowrap; } #centre-node .site-sub { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--text-dim); margin-top: 0.35em; } #centre-node .site-ring { position: absolute; inset: -28px; border-radius: 50%; border: 1px solid var(--border); animation: pulse-ring 4s ease-in-out infinite; } /* ── Week nodes ── */ .node { position: absolute; /* anchor point is node centre */ transform: translate(-50%, -50%); z-index: 5; text-decoration: none; display: block; } .node-inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transition: transform var(--t); } .node:hover .node-inner, .node:focus .node-inner { transform: scale(1.08); } .node:focus { outline: none; } .node:focus-visible .node-dot { box-shadow: 0 0 0 3px var(--accent); } /* The glowing dot */ .node-dot { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.06em; box-shadow: 0 0 14px var(--accent-glow), inset 0 0 8px var(--accent-dim); transition: box-shadow var(--t), background var(--t); } .node:hover .node-dot { background: var(--accent-dim); box-shadow: 0 0 28px var(--accent-glow), inset 0 0 12px var(--accent-dim); } /* Week label below dot */ .node-label { font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.12em; text-align: center; max-width: 90px; line-height: 1.3; white-space: nowrap; } /* Theme phrase — tiny italic under label */ .node-theme { font-family: var(--font-body); font-style: italic; font-size: 0.75rem; color: var(--text-faint); text-align: center; max-width: 90px; line-height: 1.3; } /* ── Map sidebar navigation ── */ #map-nav { position: fixed; top: 50%; right: 1.5rem; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; gap: 3px; } .map-nav-pill { display: block; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-faint); padding: 3px 10px; border-radius: 2px; border: 1px solid transparent; text-align: right; white-space: nowrap; transition: color var(--t), border-color var(--t), background var(--t); } .map-nav-pill:hover { color: var(--accent); border-color: var(--border); background: var(--bg-raised); opacity: 1; } /* ── Map header ── */ #map-header { position: fixed; top: 1.25rem; left: 1.5rem; z-index: 100; pointer-events: none; } #map-header .site-name { font-family: var(--font-head); font-size: 1.1rem; color: var(--text-dim); letter-spacing: 0.06em; } #map-header .author-name { font-family: var(--font-ui); font-size: 0.62rem; color: var(--text-faint); letter-spacing: 0.12em; margin-top: 0.2em; } /* ── Map footer hint ── */ #map-hint { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--text-faint); z-index: 100; white-space: nowrap; animation: fade-out-hint 1s 5s ease forwards; } /* ── Audio toggle button On the MAP page it floats fixed at top-right. On WEEK pages it sits inline inside .topnav-right — we override the fixed position there via .page-topnav #audio-btn */ #audio-btn { position: fixed; top: 1.25rem; right: 1.5rem; z-index: 200; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 2px; color: var(--text-dim); cursor: pointer; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.1em; padding: 6px 12px; display: flex; align-items: center; gap: 0.5em; transition: color var(--t), border-color var(--t); } /* Inside the topnav on week pages — inline, not fixed */ .page-topnav #audio-btn { position: static; top: auto; right: auto; } #audio-btn:hover { color: var(--text); border-color: var(--border-hi); } #audio-btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } #audio-btn.playing { color: var(--accent); border-color: var(--accent); } /* ================================================================ 6. WEEK PAGE COMPONENTS ================================================================ */ /* ── Week page layout ── */ .week-page { /* Extra top/bottom breathing room */ padding-top: 6rem; padding-bottom: 8rem; } /* ── Week page header ── */ .week-header { margin-bottom: 3.5rem; border-bottom: 1px solid var(--border); padding-bottom: 2rem; } .week-header .week-badge { margin-bottom: 0.75rem; } .week-header h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 300; color: var(--text); } /* Accent bar under the title */ .week-header h1::after { content: ''; display: block; width: 2.5rem; height: 2px; background: var(--accent); margin-top: 0.6rem; } .week-meta { font-family: var(--font-ui); font-size: 0.68rem; color: var(--text-faint); letter-spacing: 0.1em; margin-top: 1rem; } /* ── Entry block (each journal paragraph) ── */ .entry-block { margin-bottom: 2.5rem; padding-left: 1.25rem; border-left: 2px solid var(--accent-dim); /* subtle left colour strip */ position: relative; } .entry-block::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 0; background: var(--accent); transition: height 0.6s ease; } .entry-block:hover::before { height: 100%; } .entry-block p { color: var(--text); font-size: 1rem; /* 17px base */ line-height: 1.8; } /* ── Section heading (optional, for grouping) ── */ .section-label { font-family: var(--font-ui); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 1.5rem; margin-top: 3rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } /* ── Image block ── */ .image-block { margin: 2.5rem 0; } .image-block figure { margin: 0; } .image-block img { width: 100%; border-radius: 2px; border: 1px solid var(--border); /* slight desaturation for editorial cohesion */ filter: saturate(0.85) brightness(0.92); transition: filter var(--t); } .image-block img:hover { filter: saturate(1) brightness(1); } .image-block figcaption { font-family: var(--font-ui); font-size: 0.65rem; color: var(--text); letter-spacing: 0.08em; padding: 0.5rem 0 0; border-top: 1px solid var(--border); margin-top: 0.35rem; } /* colour stripe above caption */ .image-block figcaption::before { content: ''; display: inline-block; width: 1.5em; height: 2px; background: var(--accent); vertical-align: middle; margin-right: 0.6em; margin-bottom: 1px; } /* ── External link card ── */ .link-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--bg-raised); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 2px; margin: 1.25rem 0; text-decoration: none; color: var(--text); transition: background var(--t), border-color var(--t); } .link-card:hover { background: var(--bg-card); opacity: 1; } .link-card-icon { flex-shrink: 0; font-family: var(--font-ui); font-size: 0.75rem; color: var(--accent); margin-top: 0.1rem; line-height: 1; } .link-card-body { min-width: 0; } .link-card-title { font-size: 0.88rem; color: var(--text); font-family: var(--font-body); margin-bottom: 0.2rem; line-height: 1.4; } .link-card-url { font-family: var(--font-ui); font-size: 0.62rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; letter-spacing: 0.04em; } /* ── Video embed ── */ .video-wrap { margin: 2rem 0; border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: 2px; overflow: hidden; background: #000; } .video-wrap iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: none; } .video-caption { font-family: var(--font-ui); font-size: 0.62rem; color: var(--text-faint); letter-spacing: 0.08em; padding: 0.4rem 0.75rem; background: var(--bg-raised); } /* ================================================================ 7. NAVIGATION CHROME ================================================================ */ /* ── Week page top nav ── */ .page-topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.5rem; background: rgba(14,15,17,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .topnav-site { font-family: var(--font-head); font-size: 0.95rem; color: var(--text-dim); letter-spacing: 0.05em; text-decoration: none; } .topnav-site:hover { color: var(--text); opacity: 1; } .topnav-right { display: flex; align-items: center; gap: 0.75rem; } /* ── Week page bottom footer nav ── */ .week-footnav { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; } .footnav-prev, .footnav-next { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-dim); text-decoration: none; display: flex; align-items: center; gap: 0.4em; transition: color var(--t); } .footnav-prev:hover, .footnav-next:hover { color: var(--accent); opacity: 1; } .footnav-prev { justify-content: flex-start; } .footnav-next { justify-content: flex-end; } .footnav-map { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.15em; color: var(--text-faint); text-decoration: none; text-align: center; text-transform: uppercase; padding: 4px 12px; border: 1px solid var(--border); border-radius: 2px; transition: border-color var(--t), color var(--t); } .footnav-map:hover { border-color: var(--border-hi); color: var(--text); opacity: 1; } /* ================================================================ 8. UTILITY / ANIMATION ================================================================ */ /* Pulsing glow ring on centre node */ @keyframes pulse-ring { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.05); opacity: 0.7; } } /* Dot pulse on week nodes */ @keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 10px var(--accent-glow); } 50% { box-shadow: 0 0 24px var(--accent-glow), 0 0 48px var(--accent-dim); } } .node-dot { animation: dot-pulse 3s ease-in-out infinite; } /* SVG road draw-in on load — JS removes animation after it finishes */ .road-line { stroke-dashoffset: 2000; animation: draw-road 1.2s ease forwards; } @keyframes draw-road { to { stroke-dashoffset: 0; } } /* Marching-ant animation played while a node is hovered */ .road-line.hovered { animation: march-dash 0.7s linear infinite !important; } @keyframes march-dash { /* One dash+gap cycle = 13px — offset steps backward each loop */ to { stroke-dashoffset: -13; } } /* Hint fade out */ @keyframes fade-out-hint { to { opacity: 0; pointer-events: none; } } /* Fade in on load */ .fade-in { animation: fade-in 0.6s ease both; } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Week page entry blocks — staggered fade in */ .entry-block { animation: fade-in 0.5s ease both; } .entry-block:nth-child(2) { animation-delay: 0.05s; } .entry-block:nth-child(3) { animation-delay: 0.10s; } .entry-block:nth-child(4) { animation-delay: 0.15s; } .entry-block:nth-child(5) { animation-delay: 0.20s; } /* ── Responsive ── */ @media (max-width: 640px) { #map-nav { display: none; } /* sidebar too tight on phone */ .week-footnav { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .footnav-map { grid-column: 1 / -1; order: -1; } }