/* ============================================================ art && code — style.css ============================================================ This stylesheet creates a dark "hacker terminal" aesthetic with: - A nearly black background with subtle blue undertones - Bright green (#00ff41) as the primary accent color (like Matrix) - Cyan (#00d4ff) as a secondary accent for code explanations - Scanline overlay to simulate a CRT monitor effect - Glowing borders and buttons for a futuristic feel - JetBrains Mono for all code/technical text - Space Grotesk for readable commentary text The layout uses CSS Flexbox throughout — no CSS Grid needed here. COLOR SCHEME SUMMARY: ───────────────────── Background: #0a0a0f (very dark blue-black) Panel bg: #0d1117 (slightly lighter, for contrast) Borders: #1a1f2e (subtle dark blue-gray) Text: #e0e0e0 (light gray, easy on the eyes) Accent: #00ff41 (bright green — active lines, buttons) Cyan: #00d4ff (code explanations, function names) Purple: #b388ff (Python keywords) Orange: #ff9100 (string literals) Red: #ff5252 (numbers) ============================================================ */ /* ──────────────────────────────────────────────────────────── CSS CUSTOM PROPERTIES (Variables) ──────────────────────────────────────────────────────────── These variables are defined on :root (the element) so they're available everywhere. Using var(--name) keeps colors/fonts consistent and makes theming easy. If you want to change the color scheme, just edit these values and the entire site updates automatically. ──────────────────────────────────────────────────────────── */ :root { /* Background colors — from darkest to slightly lighter */ --bg-deep: #0a0a0f; /* Main page background */ --bg-panel: #0d1117; /* Code panel background */ --bg-panel-alt: #0b0e13; /* Art panel background (slightly different) */ /* Border and glow colors */ --border: #1a1f2e; /* Subtle borders between panels */ --border-glow: #00ff4120; /* Green glow on hover (20 = 12.5% opacity via hex alpha) */ /* Text colors */ --text-primary: #e0e0e0; /* Main readable text */ --text-dim: #5a6270; /* Dimmed text (line numbers, labels) */ --text-accent: #00ff41; /* Bright green for active/important elements */ --text-accent-dim: #00cc3380; /* Dimmed green (80 = 50% opacity) */ /* Syntax highlighting colors — used in .syn-* classes */ --code-green: #00ff41; /* Active line glow */ --code-cyan: #00d4ff; /* Function names, code explanations */ --code-purple: #b388ff; /* Python keywords (def, if, for, etc.) */ --code-orange: #ff9100; /* String literals */ --code-red: #ff5252; /* Numbers */ /* Font stacks — with fallbacks for systems that don't have Google Fonts */ --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-sans: 'Space Grotesk', system-ui, sans-serif; /* Layout measurements — used in height calculations */ --header-height: 52px; --footer-height: 32px; } /* ──────────────────────────────────────────────────────────── GLOBAL RESET ──────────────────────────────────────────────────────────── box-sizing: border-box makes padding/border count INSIDE the element's width/height (instead of adding to it). This prevents layout surprises and is standard practice. ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; /* No scrollbars on the page itself — each panel scrolls independently */ background: var(--bg-deep); color: var(--text-primary); font-family: var(--font-sans); } /* ──────────────────────────────────────────────────────────── SCANLINE OVERLAY ──────────────────────────────────────────────────────────── Creates thin horizontal lines across the entire screen, simulating an old CRT/TV monitor effect. HOW IT WORKS: - position: fixed + inset: 0 makes it cover the full viewport - z-index: 9999 puts it on top of everything - pointer-events: none means clicks pass through it - The repeating-linear-gradient creates alternating bands: 2px transparent, then 2px very slightly dark (3% opacity) - The result is barely visible horizontal lines ──────────────────────────────────────────────────────────── */ .scanlines { position: fixed; inset: 0; /* Shorthand for top:0 right:0 bottom:0 left:0 */ z-index: 9999; pointer-events: none; /* Don't block mouse clicks */ background: repeating-linear-gradient( 0deg, /* Horizontal lines (0° = top to bottom) */ transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, /* Very subtle dark line */ rgba(0, 0, 0, 0.03) 4px /* Each "scanline" is 4px total (2px clear + 2px dark) */ ); } /* ──────────────────────────────────────────────────────────── HEADER ──────────────────────────────────────────────────────────── The top bar of the page. Uses flexbox to spread the logo (left) and controls (right) apart with space-between. The gradient background gives it a subtle 3D look. ──────────────────────────────────────────────────────────── */ .site-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; /* Logo left, buttons right */ padding: 0 20px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #0f1219 0%, var(--bg-deep) 100%); z-index: 10; position: relative; /* Needed for z-index to work */ } /* Logo and tagline sit side by side, aligned at their text baselines */ .header-left { display: flex; align-items: baseline; /* Aligns text baselines, not centers */ gap: 14px; /* Space between logo and tagline */ } /* The "{ art && code }" logo text */ .logo { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.5px; /* Slightly tighter spacing for a compact look */ } /* The curly braces in the logo are green */ .logo-bracket { color: var(--text-accent); font-weight: 300; } /* The && in the logo is cyan */ .logo-amp { color: var(--code-cyan); font-weight: 300; } /* "where algorithms become art" subtitle */ .tagline { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; /* ALL CAPS */ } /* Container for the play/pause and restart buttons */ .header-controls { display: flex; align-items: center; gap: 10px; } /* Individual control button style (play/pause, restart in header) */ .btn-control { background: transparent; border: 1px solid var(--border); color: var(--text-accent); /* Green icon */ font-size: 0.9rem; width: 32px; height: 32px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; /* Smooth hover effect */ } /* Hover effect: brighter border + subtle green glow */ .btn-control:hover { border-color: var(--text-accent); background: rgba(0, 255, 65, 0.08); box-shadow: 0 0 10px var(--border-glow); } /* ──────────────────────────────────────────────────────────── SPLIT VIEW (Main layout) ──────────────────────────────────────────────────────────── The main content area uses flexbox to place the code panel and art panel side by side. The height is calculated to fill the viewport minus the header and footer. ──────────────────────────────────────────────────────────── */ .split-view { display: flex; /* calc() subtracts header and footer heights from the full viewport height */ height: calc(100vh - var(--header-height) - var(--footer-height)); } /* ──────────────────────────────────────────────────────────── CODE PANEL (Left side) ──────────────────────────────────────────────────────────── Takes up 48% of the width. Uses flex-direction: column to stack its children vertically: 1. Panel header (terminal dots + filename) 2. Search bar (hidden by default) 3. Code body (phase nav + scrollable code) ──────────────────────────────────────────────────────────── */ .code-panel { width: 48%; display: flex; flex-direction: column; /* Stack children vertically */ border-right: 1px solid var(--border); background: var(--bg-panel); position: relative; overflow: hidden; /* Prevent content from spilling out */ } /* Terminal-style header bar at the top of the code panel */ .panel-header { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, 0.3); /* Slightly darker than the panel */ flex-shrink: 0; /* Don't let this shrink when space is tight */ } /* The three colored dots (macOS window controls look) */ .terminal-dots { display: flex; gap: 5px; } .dot { width: 9px; height: 9px; border-radius: 50%; } /* 50% radius = perfect circle */ .dot-red { background: #ff5f56; } /* Close button */ .dot-yellow { background: #ffbd2e; } /* Minimize button */ .dot-green { background: #27c93f; } /* Maximize button */ /* Filename display (e.g., "mil_fal.py") */ .panel-title { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); flex: 1; /* Takes up remaining space */ } /* Operation counter (e.g., "1500 / 3203") */ .op-counter { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); } /* ──────────────────────────────────────────────────────────── SEARCH BAR ──────────────────────────────────────────────────────────── Hidden by default with display:none. When the user presses Cmd+F, JavaScript adds class "open" which sets display:flex. Contains: search icon, text input, result count, nav buttons. ──────────────────────────────────────────────────────────── */ .search-bar { display: none; /* Hidden until Cmd+F is pressed */ align-items: center; gap: 6px; padding: 5px 14px; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, 0.4); } /* When "open" class is added by JS, the search bar becomes visible */ .search-bar.open { display: flex; } .search-icon { font-size: 0.75rem; opacity: 0.5; } /* The text input where you type your search query */ .search-bar input { flex: 1; /* Expand to fill available space */ background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 3px; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem; padding: 4px 8px; outline: none; /* Remove default blue focus outline */ min-width: 0; /* Allow input to shrink in flex context */ } /* Green glow when the search input is focused */ .search-bar input:focus { border-color: var(--text-accent-dim); box-shadow: 0 0 6px var(--border-glow); } /* "3 / 15" match count display */ .search-results { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); white-space: nowrap; /* Prevent text from wrapping */ } /* Up/down/close buttons in the search bar */ .search-nav { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 0.75rem; width: 24px; height: 24px; cursor: pointer; border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: all 0.1s; padding: 0; } .search-nav:hover { border-color: var(--text-accent-dim); color: var(--text-primary); } /* Yellow highlight on search matches within code lines */ .search-match { background: rgba(255, 200, 0, 0.25); border-radius: 2px; outline: 1px solid rgba(255, 200, 0, 0.4); } /* The currently selected/focused search match is brighter */ .search-match.current { background: rgba(255, 200, 0, 0.5); outline: 1px solid rgba(255, 200, 0, 0.8); } /* ──────────────────────────────────────────────────────────── CODE BODY (Phase nav sidebar + code scroll area) ──────────────────────────────────────────────────────────── This flex container holds the phase navigation sidebar on the left and the scrollable code area on the right. position:relative is needed for the floating scroll buttons. ──────────────────────────────────────────────────────────── */ .code-body { flex: 1; /* Fill remaining vertical space */ display: flex; /* Side-by-side layout */ min-height: 0; /* Required for flex children to scroll properly */ position: relative; /* Anchor for the floating scroll buttons */ } /* ──────────────────────────────────────────────────────────── QUICK-SCROLL BUTTONS ──────────────────────────────────────────────────────────── Three small floating buttons (▲ ▬ ▼) positioned on the right edge of the code area. They let you quickly jump to the top, middle, or bottom of the source code. They're semi-transparent by default and become fully visible on hover, so they don't distract from the code. ──────────────────────────────────────────────────────────── */ .scroll-buttons { position: absolute; /* Float over the code area */ right: 10px; top: 50%; transform: translateY(-50%); /* Center vertically */ display: flex; flex-direction: column; /* Stack buttons vertically */ gap: 4px; z-index: 5; /* Above code lines, below search bar */ opacity: 0.3; /* Semi-transparent by default */ transition: opacity 0.2s; } /* Fully visible when hovering over the button group */ .scroll-buttons:hover { opacity: 1; } /* Individual scroll button style */ .btn-scroll { width: 24px; height: 24px; background: rgba(0, 0, 0, 0.6); /* Dark background so text is readable */ border: 1px solid var(--border); color: var(--text-accent); /* Green icon */ font-size: 0.6rem; cursor: pointer; border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; } .btn-scroll:hover { border-color: var(--text-accent); background: rgba(0, 255, 65, 0.1); } /* ──────────────────────────────────────────────────────────── PHASE NAVIGATION SIDEBAR ──────────────────────────────────────────────────────────── A narrow sidebar on the left side of the code body showing clickable phase names (e.g., "hull outline", "engine pods"). Clicking a phase jumps playback to that section. The active phase has a green left border and green text. ──────────────────────────────────────────────────────────── */ .phase-nav { width: 110px; flex-shrink: 0; /* Don't let it shrink */ overflow-y: auto; /* Scrollable if too many phases */ border-right: 1px solid var(--border); background: rgba(0, 0, 0, 0.2); padding: 4px 0; } /* Custom thin scrollbar for the phase nav (WebKit browsers) */ .phase-nav::-webkit-scrollbar { width: 3px; } .phase-nav::-webkit-scrollbar-track { background: transparent; } .phase-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* Individual phase button */ .phase-btn { display: block; width: 100%; text-align: left; background: transparent; border: none; border-left: 2px solid transparent; /* Invisible left border (becomes green when active) */ color: var(--text-dim); font-family: var(--font-mono); font-size: 0.6rem; padding: 5px 8px; cursor: pointer; transition: all 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Show "..." if the text is too long */ } .phase-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.03); } /* The currently active phase gets a green left border indicator */ .phase-btn.active { color: var(--text-accent); border-left-color: var(--text-accent); background: rgba(0, 255, 65, 0.05); } /* ──────────────────────────────────────────────────────────── CODE SCROLL AREA ──────────────────────────────────────────────────────────── The main scrollable area showing Python source code lines. Each line is a flex row with a line number and code content. ──────────────────────────────────────────────────────────── */ .code-scroll { flex: 1; /* Take up remaining width */ overflow-y: auto; /* Vertical scrollbar when needed */ overflow-x: hidden; /* No horizontal scrollbar */ position: relative; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.65; /* Space between lines */ } /* Each line of source code */ .code-line { display: flex; /* Line number + content side by side */ padding: 0 14px; white-space: pre; /* Preserve spaces and indentation */ transition: background 0.15s, opacity 0.3s; position: relative; /* Needed for the ::before glow bar */ min-height: 1.65em; /* Even empty lines take up space */ } /* ACTIVE LINE — the line currently being "executed" Gets a subtle green background to highlight it. */ .code-line.active { background: rgba(0, 255, 65, 0.08); } /* The green glow bar on the left edge of the active line. Uses a CSS pseudo-element (::before) to draw a thin green bar without adding extra HTML elements. */ .code-line.active::before { content: ''; /* Required for pseudo-elements to render */ position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--text-accent); box-shadow: 0 0 8px var(--text-accent); /* Green glow effect */ } /* Lines that have already been "executed" — full opacity */ .code-line.executed { opacity: 1; } /* FUTURE LINES — lines that haven't been reached yet. They're heavily dimmed to create a "code materializing" effect. As playback progresses, lines transition from .future to .executed. */ .code-line.future { opacity: 0.2; } /* PHASE HIGHLIGHT — highlights the function currently being drawn. When the commentary says "Drawing the hull...", the draw_hull() function body gets this cyan-tinted background so you can see which code is responsible for what's on screen. */ .code-line.phase-highlight { background: rgba(0, 212, 255, 0.06); opacity: 1; /* Override .future opacity */ } /* Line numbers within a phase-highlighted block get cyan color */ .code-line.phase-highlight .line-num { color: var(--code-cyan); opacity: 0.7; } /* When a line is BOTH active AND phase-highlighted, the active green wins */ .code-line.active.phase-highlight { background: rgba(0, 255, 65, 0.08); } /* MATRIX RAIN-IN ANIMATION ──────────────────────────────────────── When a line of code first "executes", each character drops in from above with a Matrix-style effect. This is achieved by: 1. JavaScript wraps each character in a with a staggered animation-delay 2. The CSS animation moves each char from 20px above to its position 3. Characters flash white, then green, then settle to their normal color 4. After the animation, JS replaces the char spans with syntax-highlighted HTML */ .code-line.rain-in .code-char { animation: charDrop 0.15s ease-out forwards; /* "forwards" keeps the end state */ } @keyframes charDrop { 0% { transform: translateY(-20px); opacity: 0; color: #fff; } /* Start: above, invisible, white */ 60% { color: var(--text-accent); } /* Mid: flash green */ 100% { transform: translateY(0); opacity: 1; } /* End: in position, visible, normal color */ } /* Line numbers (e.g., " 42") — fixed width, right-aligned, dimmed */ .line-num { display: inline-block; width: 3.5em; /* Enough for 4-digit line numbers */ text-align: right; color: var(--text-dim); margin-right: 1.2em; /* Gap between number and code */ user-select: none; /* Can't select line numbers (would mess up copy-paste) */ opacity: 0.4; flex-shrink: 0; /* Don't let line numbers shrink */ } /* Active line's number is green and brighter */ .code-line.active .line-num { color: var(--text-accent); opacity: 0.8; } /* The actual code content (everything after the line number) */ .line-content { flex: 1; min-width: 0; /* Allow text truncation in flex context */ } /* SYNTAX HIGHLIGHTING CLASSES These are applied by the highlightLine() function in script.js. Each class colors a different type of Python token. */ .syn-kw { color: var(--code-purple); } /* Keywords: def, if, for, return, etc. */ .syn-fn { color: var(--code-cyan); } /* Function names after "def" */ .syn-str { color: var(--code-orange); } /* String literals: "hello", '#ff0000' */ .syn-comment { color: #546e7a; font-style: italic; } /* Comments: # this is a comment */ .syn-num { color: var(--code-red); } /* Numbers: 42, 3.14 */ .syn-builtin { color: #80cbc4; } /* Built-in functions: range, len, print */ /* ──────────────────────────────────────────────────────────── ART PANEL (Right side) ──────────────────────────────────────────────────────────── Contains the canvas (where the drawing appears) and the commentary section below it. Uses flex-direction:column so the canvas is on top and commentary is on the bottom. ──────────────────────────────────────────────────────────── */ .art-panel { flex: 1; /* Take up remaining width (52%) */ display: flex; flex-direction: column; background: var(--bg-panel-alt); min-width: 0; /* Prevent flex overflow */ } /* Canvas wrapper — centers the canvas and adds a subtle radial gradient background (slightly lighter in the center) to make the artwork feel like it's floating in space. */ .canvas-wrap { flex: 1; /* Take up as much space as possible */ display: flex; align-items: center; /* Center canvas vertically */ justify-content: center; /* Center canvas horizontally */ padding: 12px; min-height: 0; /* Required for flex children to respect max-height */ background: radial-gradient(ellipse at center, #141820 0%, #0a0a0f 70%); } /* The canvas element itself */ #drawCanvas { max-width: 100%; max-height: 100%; border-radius: 4px; /* Double shadow: a close dark shadow + a distant blue glow */ box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 100, 255, 0.04); } /* ──────────────────────────────────────────────────────────── COMMENTARY SECTION ──────────────────────────────────────────────────────────── Sits below the canvas. Shows three pieces of information: 1. Phase label (green, uppercase, e.g., "HULL OUTLINE") 2. Art description (white, what's being drawn) 3. Code explanation (cyan, what the Python code is doing) Plus playback controls at the bottom. ──────────────────────────────────────────────────────────── */ .commentary { padding: 12px 20px 10px; border-top: 1px solid var(--border); /* Gradient background: darker at top, lighter at bottom */ background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 100%); min-height: 80px; transition: opacity 0.3s; } /* Phase label (e.g., "ENGINE PODS") — green monospace text */ .commentary-phase { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--text-accent); text-transform: uppercase; /* Always displayed in ALL CAPS */ letter-spacing: 2px; margin-bottom: 4px; transition: color 0.3s; } /* Art description (e.g., "Drawing the main hull...") */ .commentary-text { font-family: var(--font-sans); /* Readable sans-serif font */ font-size: 0.82rem; color: var(--text-primary); line-height: 1.45; margin-bottom: 6px; transition: opacity 0.25s; /* Fade transition when commentary changes */ } /* Code explanation (e.g., "A for loop generates 24 vertices...") Styled in cyan with a left border accent, like a blockquote. */ .commentary-code { font-family: var(--font-mono); font-size: 0.72rem; color: var(--code-cyan); line-height: 1.4; margin-bottom: 8px; padding: 5px 8px; background: rgba(0, 212, 255, 0.04); /* Very subtle cyan tint */ border-left: 2px solid var(--code-cyan); border-radius: 0 3px 3px 0; /* Rounded corners on right side only */ transition: opacity 0.25s; min-height: 1.2em; } /* When there's no code explanation, hide the element entirely */ .commentary-code:empty { display: none; } /* ──────────────────────────────────────────────────────────── PLAYBACK CONTROLS (Scrub bar area) ──────────────────────────────────────────────────────────── A horizontal row of controls at the bottom of the commentary: ◀◀ ▶ ▶▶ ═══════════════════════○═══ − 1x + ↺ ──────────────────────────────────────────────────────────── */ .commentary-controls { display: flex; align-items: center; gap: 10px; width: 100%; } /* Play/Pause button — round, larger than other buttons */ .btn-scrub-play { background: transparent; border: 1px solid var(--border); color: var(--text-accent); font-size: 0.85rem; width: 30px; height: 30px; flex-shrink: 0; cursor: pointer; border-radius: 50%; /* Perfect circle */ display: flex; align-items: center; justify-content: center; transition: all 0.15s; } /* Hover effect for play and scrub buttons */ .btn-scrub-play:hover, .btn-scrub:hover { border-color: var(--text-accent); background: rgba(0, 255, 65, 0.08); box-shadow: 0 0 10px var(--border-glow); } /* Step forward/backward buttons (◀◀ and ▶▶) */ .btn-scrub { background: transparent; border: 1px solid var(--border); color: var(--text-accent); font-size: 0.6rem; width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; letter-spacing: -2px; /* Tighter spacing for the double-arrow characters */ } /* Speed buttons (− and +) — slightly smaller than step buttons */ .speed-btn { font-size: 0.85rem; letter-spacing: 0; /* Override the -2px from .btn-scrub */ width: 24px; height: 24px; } /* Reset button (↺) — slightly separated from speed controls */ .reset-btn { font-size: 1rem; margin-left: 8px; /* Extra space to visually separate from speed controls */ width: 28px; height: 28px; } /* Speed label (e.g., "1x", "4x", "max") */ .speed-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-accent); min-width: 2.5em; /* Prevent layout shift when "max" vs "1x" */ text-align: center; flex-shrink: 0; } /* SCRUB SLIDER (Range Input) ──────────────────────────────────────── Custom-styled HTML range input that acts as a timeline scrubber. The default browser range input is ugly, so we restyle every part: - The track (the bar you slide along) - The thumb (the draggable circle) We need separate rules for WebKit (Chrome/Safari) and Firefox because they use different pseudo-elements for range inputs. */ /* Base range input styles */ .commentary-controls input[type="range"] { -webkit-appearance: none; /* Remove default browser styling */ appearance: none; flex: 1; /* Expand to fill available space */ min-width: 0; /* Allow shrinking in flex */ height: 6px; border-radius: 3px; background: var(--border); /* Dark track background */ outline: none; cursor: pointer; } /* WebKit (Chrome, Safari, Edge) — the slider track */ .commentary-controls input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--border); } /* WebKit — the draggable thumb (circle) */ .commentary-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; /* Perfect circle */ background: var(--text-accent); /* Bright green */ border: 2px solid var(--bg-deep); box-shadow: 0 0 8px var(--text-accent); /* Green glow */ margin-top: -5px; /* Center the thumb on the track (track is 6px, thumb is 16px) */ cursor: grab; transition: transform 0.1s, box-shadow 0.1s; } /* Thumb grows slightly on hover */ .commentary-controls input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 14px var(--text-accent); } /* Thumb grows more while being dragged */ .commentary-controls input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.3); } /* Firefox — the slider track */ .commentary-controls input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); } /* Firefox — the draggable thumb */ .commentary-controls input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text-accent); border: 2px solid var(--bg-deep); box-shadow: 0 0 8px var(--text-accent); cursor: grab; } /* Firefox — the filled portion of the track (left of thumb) */ .commentary-controls input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; /* Green-to-cyan gradient for the "completed" portion */ background: linear-gradient(90deg, var(--text-accent), var(--code-cyan)); } /* ──────────────────────────────────────────────────────────── FOOTER ──────────────────────────────────────────────────────────── Simple centered text at the bottom of the page. ──────────────────────────────────────────────────────────── */ .site-footer { height: var(--footer-height); display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--border); } .site-footer p { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-dim); letter-spacing: 1px; } /* ──────────────────────────────────────────────────────────── CUSTOM SCROLLBAR (for the code scroll area) ──────────────────────────────────────────────────────────── WebKit browsers (Chrome, Safari, Edge) support custom scrollbar styling. We make it thin and dark to match the theme. Firefox uses its own scrollbar-width/scrollbar-color properties. ──────────────────────────────────────────────────────────── */ .code-scroll::-webkit-scrollbar { width: 5px; } .code-scroll::-webkit-scrollbar-track { background: transparent; } .code-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ──────────────────────────────────────────────────────────── RESPONSIVE LAYOUT ──────────────────────────────────────────────────────────── On screens narrower than 900px (tablets, phones), the side-by-side layout switches to a vertical stack: - Code panel goes on top (limited to 40% of viewport height) - Art panel goes below it - The tagline is hidden to save space ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .split-view { flex-direction: column; } .code-panel { width: 100%; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); } .tagline { display: none; } .gallery-grid { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────── GALLERY PAGE ──────────────────────────────────────────────────────────── The gallery landing page shows artwork cards in a responsive grid. Uses the same dark theme as the playback page. ──────────────────────────────────────────────────────────── */ .gallery-page { overflow-y: auto; } .gallery-main { max-width: 1100px; margin: 0 auto; padding: 40px 24px; min-height: calc(100vh - var(--header-height) - var(--footer-height)); } .gallery-hero { text-align: center; margin-bottom: 48px; } .gallery-subtitle { font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-dim); letter-spacing: 0.5px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .gallery-card { display: block; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .gallery-card:hover { border-color: var(--text-accent); box-shadow: 0 0 20px var(--border-glow), 0 0 40px rgba(0, 255, 65, 0.06); transform: translateY(-2px); } .card-thumb { width: 100%; aspect-ratio: 6 / 7; overflow: hidden; background: var(--bg-deep); display: flex; align-items: center; justify-content: center; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; } .card-info { padding: 16px 18px; border-top: 1px solid var(--border); } .card-title { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; color: var(--text-accent); margin-bottom: 6px; } .card-desc { font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-primary); line-height: 1.4; margin-bottom: 10px; } .card-stats { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); display: flex; gap: 6px; } /* ──────────────────────────────────────────────────────────── GALLERY BACK LINK (on playback page) ──────────────────────────────────────────────────────────── */ .gallery-back { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-accent); text-decoration: none; border: 1px solid var(--border); padding: 4px 10px; border-radius: 4px; transition: all 0.15s; margin-right: 10px; flex-shrink: 0; } .gallery-back:hover { border-color: var(--text-accent); background: rgba(0, 255, 65, 0.08); box-shadow: 0 0 10px var(--border-glow); }