/* ============================================================ Kiavash Samadi — "Sky Log (YVR)" The page is the live sky over Vancouver. Color tokens are written live by js/sky.js as the sun moves; a discrete data-sky (+ data-wx) on switches structure at state boundaries. This stylesheet ships a correct static page for no-JS visitors (DAY by default, NIGHT under prefers-color-scheme: dark), then JS enhances. ============================================================ */ :root { /* live color tokens — DAY anchor as the no-JS default */ --sky-top: #F4F1E9; --sky-bottom: #EDE8DB; --text: #26231B; --text-soft: #6A6353; --text-faint: #6F6852; --accent: #8A5B22; --line: #DDD6C4; --elev: #FFFDF6; /* decorative knobs — overridden per data-sky below */ --stars-op: 0; --con-op: 0; --glow-color: rgba(255, 244, 214, 0.55); --glow-y: 8%; --glow-size: 78vmax; --spot-color: transparent; --grain-op: 0.03; --name-glow: 0 0 0 rgba(0, 0, 0, 0); /* weather ink — dark marks on light skies; flipped in the dark states */ --wx-ink: rgba(70, 79, 98, 0.75); --wx-flake: rgba(92, 103, 124, 0.85); --rain-op: 0.34; --snow-op: 0.55; --fog-mid: rgba(128, 133, 144, 0.34); --fog-low: rgba(128, 133, 144, 0.16); /* terminal palette (a console is always dark) */ --term-bg: #0c111b; --term-text: #d6dbe6; --term-dim: #6b7187; --term-accent: #7fd6c4; --term-prompt: #7aa2f7; --font-sans: "Fraunces", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --maxw: 38rem; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* no-JS dark fallback — the live sky at night */ @media (prefers-color-scheme: dark) { :root:not([data-sky]) { --sky-top: #070B14; --sky-bottom: #0C1424; --text: #E7EEF4; --text-soft: #93A4B4; --text-faint: #8497AF; --accent: #7FD6C4; --line: #1B2A44; --elev: #0E1626; --stars-op: 1; --con-op: 0.55; --grain-op: 0.05; --glow-color: rgba(150, 180, 230, 0.14); --glow-y: 16%; --glow-size: 36vmax; --spot-color: rgba(150, 220, 185, 0.10); --name-glow: 0 0 26px rgba(127, 214, 196, 0.20); --wx-ink: rgba(190, 208, 226, 0.62); --wx-flake: rgba(235, 242, 250, 0.9); --rain-op: 0.3; --snow-op: 0.5; --fog-mid: rgba(206, 210, 216, 0.28); --fog-low: rgba(206, 210, 216, 0.12); } } /* decorative knobs per sky state (JS sets data-sky) */ :root[data-sky="day"] { --glow-color: rgba(255, 243, 202, 0.95); --glow-y: 6%; --glow-size: 68vmax; } :root[data-sky="dawn"] { --stars-op: 0.12; --glow-color: rgba(232, 168, 184, 0.78); --glow-y: 82%; --glow-size: 60vmax; } :root[data-sky="golden"] { --glow-color: rgba(248, 166, 60, 0.9); --glow-y: 90%; --glow-size: 56vmax; } :root[data-sky="blue"] { --stars-op: 0.5; --con-op: 0.18; --glow-color: rgba(120, 150, 220, 0.35); --glow-y: 88%; --glow-size: 60vmax; --spot-color: rgba(150, 200, 230, 0.08); --wx-ink: rgba(190, 208, 226, 0.62); --wx-flake: rgba(235, 242, 250, 0.9); --rain-op: 0.3; --snow-op: 0.5; --fog-mid: rgba(206, 210, 216, 0.28); --fog-low: rgba(206, 210, 216, 0.12); } :root[data-sky="night"] { --stars-op: 1; --con-op: 0.55; --grain-op: 0.05; --glow-color: rgba(150, 180, 230, 0.14); --glow-y: 16%; --glow-size: 36vmax; --spot-color: rgba(150, 220, 185, 0.10); --name-glow: 0 0 26px rgba(127, 214, 196, 0.20); --wx-ink: rgba(190, 208, 226, 0.62); --wx-flake: rgba(235, 242, 250, 0.9); --rain-op: 0.3; --snow-op: 0.5; --fog-mid: rgba(206, 210, 216, 0.28); --fog-low: rgba(206, 210, 216, 0.12); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } ::selection { background: var(--accent); color: var(--sky-bottom); } body { font-family: var(--font-sans); background: var(--sky-bottom); color: var(--text); line-height: 1.6; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.5rem; overflow-x: hidden; transition: background-color 0.8s var(--ease), color 0.8s var(--ease); } /* smooth live drift; snap while scrubbing the dial */ .scene__sky, .scene__glow, .scene__spot { transition: background 0.8s var(--ease); } .starfield, .scene__grain, .scene__rain, .scene__fog, .constellation { transition: opacity 0.8s var(--ease); } .greeting, .name, .tagline, .blurb, .links a, .hint, .colophon, .station, .station__chip, .dial, .dial__live { transition: color 0.8s var(--ease), border-color 0.8s var(--ease); } :root[data-scrub] * { transition: none !important; } /* ============================================================ Scene — the sky, bottom to top ============================================================ */ .scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .scene__sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); } /* sun / moon glow — position tracks the sun's height */ .scene__glow { position: absolute; inset: 0; background: radial-gradient(var(--glow-size) var(--glow-size) at var(--glow-x, 50%) var(--glow-y), var(--glow-color), transparent 56%); transition: background 0.8s var(--ease); } :root[data-sky="golden"] .scene__glow { animation: glow-breathe 30s ease-in-out infinite; } @keyframes glow-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* starfield — three parallax layers; box-shadows injected by JS */ .starfield { position: absolute; inset: 0; opacity: var(--stars-op); } .stars { position: absolute; inset: 0; color: rgba(214, 225, 245, 0.92); } .stars::after { content: ""; position: absolute; top: 0; left: 0; width: var(--star-size, 1px); height: var(--star-size, 1px); border-radius: 50%; box-shadow: var(--star-shadow, none); } .stars--far { --star-size: 1px; } .stars--mid { --star-size: 1.6px; animation: twinkle 5s ease-in-out infinite 0.6s; } .stars--near { --star-size: 2.2px; animation: twinkle 6.5s ease-in-out infinite 1.4s; } @keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* the hidden cat constellation (Felis) — lit at night */ .constellation { position: absolute; top: clamp(2rem, 8vh, 6rem); right: clamp(1rem, 6vw, 5rem); width: clamp(170px, 24vw, 280px); height: auto; opacity: var(--con-op); } .constellation__ring { fill: none; stroke: #bfe4da; stroke-width: 0.5; stroke-dasharray: 2 6; opacity: 0.18; } .constellation__line { stroke: #bfe4da; stroke-width: 0.5; opacity: 0.3; } .constellation__whisker { stroke: #bfe4da; stroke-width: 0.5; opacity: 0.18; } .constellation__star { fill: #bfe4da; } .constellation__eye { fill: var(--accent); animation: twinkle 3.2s ease-in-out infinite; } .constellation__eye--2 { animation-delay: 1.6s; } .constellation__label { fill: #bfe4da; opacity: 0.55; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.35em; } .constellation__sublabel { fill: #bfe4da; opacity: 0.4; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.22em; } /* rain — real slanted streaks. The streak shape is an SVG mask (so the ink stays theme-aware via the solid background), scrolled by exactly one tile for a seamless, jitter-free fall. */ .scene__rain { position: absolute; inset: 0; opacity: 0; background: var(--wx-ink); --rain-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='150'%3E%3Cg stroke='white' stroke-width='1.1' stroke-linecap='round'%3E%3Cline x1='12' y1='8' x2='16' y2='30'/%3E%3Cline x1='38' y1='28' x2='42' y2='50'/%3E%3Cline x1='22' y1='62' x2='26' y2='84'/%3E%3Cline x1='48' y1='90' x2='52' y2='112'/%3E%3Cline x1='8' y1='114' x2='12' y2='136'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: var(--rain-mask); mask-image: var(--rain-mask); -webkit-mask-size: 58px 150px; mask-size: 58px 150px; -webkit-mask-repeat: repeat; mask-repeat: repeat; animation: rain 0.8s linear infinite; transition: opacity 0.8s var(--ease); } :root[data-wx="rain"] .scene__rain { opacity: var(--rain-op); } /* a second, distant sheet of rain — smaller, slower, fainter (depth) */ .scene__rain--far { -webkit-mask-size: 38px 100px; mask-size: 38px 100px; animation: rain-far 1.25s linear infinite; } :root[data-wx="rain"] .scene__rain--far { opacity: calc(var(--rain-op) * 0.45); } :root[data-wx="snow"] .scene__rain { opacity: var(--snow-op); background: none; background-image: radial-gradient(var(--wx-flake) 1px, transparent 1.6px); background-size: 46px 46px; -webkit-mask-image: none; mask-image: none; animation: snow 8s linear infinite; } :root[data-wx="snow"] .scene__rain--far { opacity: calc(var(--snow-op) * 0.5); background-image: radial-gradient(var(--wx-flake) 0.8px, transparent 1.3px); background-size: 30px 30px; animation: snow-far 11s linear infinite; } @keyframes rain { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 150px; mask-position: 0 150px; } } @keyframes rain-far { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 100px; mask-position: 0 100px; } } /* flakes sway gently on the way down (mid keyframe bows the path) */ @keyframes snow { from { background-position: 0 0; } 50% { background-position: -9px 23px; } to { background-position: -46px 46px; } } @keyframes snow-far { from { background-position: 0 0; } 50% { background-position: -4px 15px; } to { background-position: -30px 30px; } } /* sunbeam — a shaft of light that slides across the page through the day (its x tracks the real sun's azimuth, set by js/sky.js) */ .scene__beam { position: absolute; top: -12%; bottom: -12%; left: var(--beam-x, 50%); width: 30vw; transform: translateX(-50%) skewX(-14deg); background: linear-gradient(90deg, transparent, var(--glow-color) 50%, transparent); opacity: 0; transition: opacity 1.2s var(--ease), left 2s var(--ease), background 0.8s var(--ease); } :root[data-sky="day"] .scene__beam { opacity: 0.55; } :root[data-sky="golden"] .scene__beam { opacity: 0.4; } /* shooting stars at night — spawned into .scene__meteors by main.js */ .scene__meteors { position: absolute; inset: 0; overflow: hidden; } .meteor { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #eaf2ff; box-shadow: 0 0 6px 1px rgba(220, 235, 255, 0.85); animation: meteor var(--dur, 0.9s) linear forwards; } .meteor::after { content: ""; position: absolute; right: 1px; top: 50%; width: var(--len, 90px); height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(220, 235, 255, 0.75)); } .meteor--wish { box-shadow: 0 0 9px 2px rgba(230, 240, 255, 0.95); } @keyframes meteor { from { opacity: 0; transform: translate(0, 0) rotate(var(--ang, 25deg)); } 12% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx, 320px), var(--dy, 150px)) rotate(var(--ang, 25deg)); } } /* fog — a drifting veil over the scenery (never over text). Oversized so the sideways drift never exposes an edge. */ .scene__fog { position: absolute; inset: -8%; opacity: 0; background: linear-gradient(180deg, transparent 20%, var(--fog-mid) 55%, var(--fog-low) 100%); animation: fog-drift 26s ease-in-out infinite alternate; transition: opacity 0.8s var(--ease); } :root[data-wx="fog"] .scene__fog { opacity: 1; } /* low fog banks drifting the other way — two layers read as weather, not tint */ .scene__fog::after { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 24% at 28% 70%, var(--fog-mid), transparent 70%), radial-gradient(48% 20% at 76% 48%, var(--fog-low), transparent 72%); animation: fog-drift-2 44s ease-in-out infinite alternate; } @keyframes fog-drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } } @keyframes fog-drift-2 { from { transform: translateX(4%); } to { transform: translateX(-4%); } } /* overcast borrows a whisper of the veil — flat light, faint haze */ :root[data-wx="overcast"] .scene__fog { opacity: 0.35; } /* overcast + fog mute the sun itself */ :root[data-wx="overcast"] .scene__glow, :root[data-wx="fog"] .scene__glow { opacity: 0.35; } /* cursor spotlight — a flashlight in the dark (dark states only) */ .scene__spot { position: absolute; inset: 0; background: radial-gradient(260px 260px at var(--mx, 50%) var(--my, 32%), var(--spot-color), transparent 72%); } /* faint film grain */ .scene__grain { position: absolute; inset: 0; opacity: var(--grain-op); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ Station strip — the instrument bezel ============================================================ */ .station { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.2rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); pointer-events: none; } .station__chip { pointer-events: auto; font: inherit; text-transform: uppercase; color: var(--text-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.6rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.8s var(--ease), border-color 0.2s var(--ease); } .station__chip:hover { border-color: var(--accent); color: var(--accent); } .station__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (max-width: 560px) { .station__loc { display: none; } } /* ============================================================ Hero ============================================================ */ .hero { position: relative; z-index: 1; max-width: var(--maxw); width: 100%; } .hero > * { animation: rise-in 0.8s var(--ease) both; } .greeting { animation-delay: 0.05s; } .name { animation-delay: 0.15s; } .tagline { animation-delay: 0.30s; } .blurb { animation-delay: 0.44s; } .links { animation-delay: 0.58s; } .hint { animation-delay: 0.70s; } .colophon { animation-delay: 0.80s; } @keyframes rise-in { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* at night the lines "type on" like a log. Keyed to data-entrance — chosen once at boot — so state changes (first light, blue hour) never replay the entrance mid-visit. */ :root[data-entrance="log"] .hero > * { animation: type-on 0.55s var(--ease) both; } @keyframes type-on { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } .greeting { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.07em; color: var(--accent); margin-bottom: 1.5rem; } .greeting::after { content: "_"; margin-left: 0.15em; animation: caret 1.1s steps(1) infinite; } @keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* night log timestamps (pure CSS prefix; DOM copy stays clean) */ :root[data-sky="night"] [data-log]::before, :root[data-sky="blue"] [data-log]::before { content: attr(data-ts) " "; font-family: var(--font-mono); font-size: 0.82em; color: var(--text-faint); } .name { font-size: clamp(2.6rem, 7.5vw, 4.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; margin-bottom: 1.2rem; color: var(--text); filter: drop-shadow(var(--name-glow)); } .tagline { font-size: clamp(1.08rem, 2.4vw, 1.28rem); line-height: 1.55; color: var(--text); font-weight: 400; margin-bottom: 1.4rem; } .felfel-name { color: var(--accent); font-style: italic; } .blurb { font-size: 1.02rem; line-height: 1.75; color: var(--text-soft); max-width: 34rem; margin-bottom: 2.25rem; } /* ---------- Links ---------- */ .links { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-bottom: 3rem; position: relative; } .links a { color: var(--text); text-decoration: none; font-size: 0.96rem; font-weight: 400; letter-spacing: 0.01em; position: relative; padding-bottom: 3px; } .links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--line); transform-origin: left; transition: background 0.2s var(--ease); } /* a second bar sweeps in on hover/focus — the underline "draws" itself */ .links a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .links a:hover { color: var(--accent); } .links a:hover::before, .links a:focus-visible::before { transform: scaleX(1); } /* ---------- Terminal hint ---------- */ .hint { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: color 0.2s var(--ease); } .hint:hover { color: var(--text-soft); } .hint__key { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border: 1px solid var(--text); border-radius: 6px; background: var(--text); color: var(--sky-bottom); font-size: 0.85rem; line-height: 1; } /* ---------- Colophon ---------- */ .colophon { margin-top: 3.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 34rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-faint); transition: border-color 0.8s var(--ease); } .colophon .paw-static { opacity: 0.85; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } /* ============================================================ Time dial — scrub the sky ============================================================ */ .dial { position: fixed; left: 50%; bottom: 1.3rem; transform: translateX(-50%); z-index: 25; width: min(320px, 84vw); display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--font-mono); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; border-radius: 8px; } .dial:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; } .dial__track { position: relative; height: 22px; } .dial__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); } .dial__ticks { position: absolute; left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%); background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24)); opacity: 0.7; } .dial__marker { position: absolute; top: 50%; left: var(--pos, 50%); width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--sky-bottom), 0 0 12px 2px var(--glow-color); transition: box-shadow 0.8s var(--ease), background 0.8s var(--ease); } .dial[data-marker="moon"] .dial__marker { background: var(--text); box-shadow: inset -4px -2px 0 0 var(--sky-bottom), 0 0 0 3px var(--sky-bottom), 0 0 8px rgba(150, 200, 230, 0.4); } /* coarse real moon phase — the inset sky-shadow bites the disc where it's dark (waxing from the left, waning mirrored; full = clean disc). Set via data-moon by js/sky.js; only meaningful while the moon marker is up. */ .dial[data-marker="moon"][data-moon="new"] .dial__marker { background: var(--sky-bottom); box-shadow: inset 0 0 0 1px var(--text), 0 0 0 3px var(--sky-bottom), 0 0 8px rgba(150, 200, 230, 0.4); } .dial[data-marker="moon"][data-moon="waxing"] .dial__marker { box-shadow: inset 6px 0 0 0 var(--sky-bottom), 0 0 0 3px var(--sky-bottom), 0 0 8px rgba(150, 200, 230, 0.4); } .dial[data-marker="moon"][data-moon="quarter"] .dial__marker { box-shadow: inset 7px 0 0 0 var(--sky-bottom), 0 0 0 3px var(--sky-bottom), 0 0 8px rgba(150, 200, 230, 0.4); } .dial[data-marker="moon"][data-moon="full"] .dial__marker { box-shadow: 0 0 0 3px var(--sky-bottom), 0 0 11px 1px rgba(150, 200, 230, 0.5); } .dial[data-marker="moon"][data-moon="waning"] .dial__marker { box-shadow: inset -6px 0 0 0 var(--sky-bottom), 0 0 0 3px var(--sky-bottom), 0 0 8px rgba(150, 200, 230, 0.4); } /* sunrise / sunset marks — the dial reads as a real instrument: you can see where day begins and ends before you scrub. Positioned by --pos like the marker. */ .dial__tick { position: absolute; top: 50%; left: var(--pos, 50%); width: 1px; height: 7px; transform: translate(-50%, -50%); background: var(--accent); opacity: 0.55; pointer-events: none; transition: background 0.8s var(--ease); } .dial__tick[hidden] { display: none; } .dial__labels { display: flex; justify-content: space-between; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--text-faint); } .dial__live { align-self: center; margin-top: 0.15rem; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0.22rem 0.7rem; cursor: pointer; transition: color 0.8s var(--ease), border-color 0.2s var(--ease); } .dial__live:hover { color: var(--accent); border-color: var(--accent); } .dial__live:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .dial__live.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: live-pulse 2s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @media (max-width: 560px) { .dial { width: 90vw; } } /* ============================================================ Terminal (easter-egg console; always dark) ============================================================ */ .terminal { position: fixed; top: 16vh; left: 50%; width: min(680px, 92vw); height: min(440px, 70vh); background: var(--term-bg); border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); z-index: 100; display: flex; flex-direction: column; overflow: hidden; font-family: var(--font-mono); } .terminal[hidden] { display: none; } .terminal--opening { animation: term-in 0.22s var(--ease) both; } .terminal--dragging { user-select: none; } @keyframes term-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .terminal__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.85rem; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); cursor: grab; user-select: none; } .terminal--dragging .terminal__bar { cursor: grabbing; } .terminal__dot { width: 13px; height: 13px; border-radius: 50%; border: none; padding: 0; cursor: pointer; position: relative; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 1; color: transparent; transition: filter 0.15s var(--ease); } .terminal__dot--red { background: #ff5f57; } .terminal__dot--amber { background: #febc2e; } .terminal__dot--green { background: #28c840; } .terminal__bar:hover .terminal__dot--red { color: #7a0a00; } .terminal__bar:hover .terminal__dot--amber { color: #7a5200; } .terminal__bar:hover .terminal__dot--green { color: #006500; } .terminal__dot:hover { filter: brightness(1.08); } .terminal__dot--red::after { content: "\00d7"; } .terminal__dot--amber::after { content: "\2212"; } .terminal__dot--green::after { content: "\002b"; } .terminal__dot::after { font-size: 9px; } .terminal__title { margin-left: 0.5rem; color: var(--term-dim); font-size: 0.78rem; } .terminal--min { height: auto !important; } .terminal--min .terminal__body, .terminal--min .terminal__prompt { display: none; } .terminal--min .terminal__bar { cursor: pointer; } .terminal--max { width: min(960px, 95vw); height: min(660px, 88vh); } .terminal__body { flex: 1; overflow-y: auto; padding: 0.9rem 1rem; font-size: 0.85rem; line-height: 1.55; color: var(--term-text); } .terminal__body::-webkit-scrollbar { width: 8px; } .terminal__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; } .terminal__line { white-space: pre-wrap; word-break: break-word; } .terminal__line--cmd { color: var(--term-text); } .terminal__line--cmd .term-ps1 { color: var(--term-prompt); margin-right: 0.5rem; } .term-accent { color: var(--term-accent); } .term-dim { color: var(--term-dim); } .term-link { color: var(--term-prompt); text-decoration: underline; } .term-link:hover { color: var(--term-accent); } .terminal__prompt { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-top: 1px solid rgba(255,255,255,0.06); } .terminal__ps1 { color: var(--term-prompt); font-size: 0.85rem; white-space: nowrap; } .terminal__input { flex: 1; background: none; border: none; outline: none; color: var(--term-text); font-family: var(--font-mono); font-size: 0.85rem; caret-color: var(--term-accent); } /* ============================================================ Easter eggs (unchanged behavior) ============================================================ */ .felfel-rain { position: fixed; top: -60px; font-size: 2rem; z-index: 90; pointer-events: none; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(110vh) rotate(360deg); } } .felfel-walk { position: fixed; left: 0; bottom: 1.6rem; z-index: 95; pointer-events: none; will-change: transform; animation: felfel-stroll 5.2s linear forwards; } .felfel-walk__cat { display: inline-block; font-size: 2.2rem; transform-origin: bottom center; animation: felfel-bob 0.42s ease-in-out infinite; } @keyframes felfel-stroll { from { transform: translateX(-14vw); } to { transform: translateX(114vw); } } @keyframes felfel-bob { 0%, 100% { transform: translateY(0) scaleX(-1); } 50% { transform: translateY(-5px) scaleX(-1); } } .paw { position: fixed; pointer-events: none; z-index: 80; font-size: 0.95rem; opacity: 0.55; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); animation: paw-fade 1.4s ease-out forwards; } @keyframes paw-fade { from { opacity: 0.55; } to { opacity: 0; } } .felfel-name { display: inline-block; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .felfel-name.purr { animation: purr 0.5s var(--ease); } @keyframes purr { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-2px) rotate(-2.5deg); } 40% { transform: translateX(2px) rotate(2.5deg); } 60% { transform: translateX(-1.5px) rotate(-1.5deg); } 80% { transform: translateX(1.5px) rotate(1.5deg); } } .float-note { position: fixed; z-index: 96; pointer-events: none; font-size: 1.05rem; font-family: var(--font-mono); color: var(--accent); white-space: nowrap; animation: float-rise 1s ease-out forwards; } @keyframes float-rise { from { opacity: 1; transform: translate(-50%, 0) scale(0.7); } to { opacity: 0; transform: translate(-50%, -42px) scale(1.05); } } /* ============================================================ Résumé — the print stays calm paper while the sky moves ============================================================ */ .resume-body { display: block; place-items: unset; padding: 3rem 1.25rem 4rem; } .resume { /* fixed paper palette — legibility beats theming, in every sky */ --text: #26231B; --text-soft: #5c5647; --text-faint: #8a8474; --accent: #8A5B22; --line: #e3dcc9; --elev: #fffdf6; position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; padding: 2.6rem 2.6rem 3.2rem; background: #FFFDF6; color: var(--text); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 6px; box-shadow: 0 18px 56px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.06); animation: rise 0.6s var(--ease) both; transition: background 0.8s var(--ease); } :root[data-sky="night"] .resume, :root[data-sky="blue"] .resume { background: #F3EDE0; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .resume { padding: 1.8rem 1.4rem 2.4rem; } } .resume__nav { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; } .resume__back { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-soft); text-decoration: none; } .resume__back:hover { color: var(--accent); } .resume__actions { display: flex; align-items: center; gap: 0.9rem; } .resume__print { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-soft); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.8rem; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); } .resume__print:hover { border-color: var(--accent); color: var(--accent); } /* compact sky chip — cycles day → night → live */ .sky-chip { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.6rem; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); } .sky-chip:hover { border-color: var(--accent); color: var(--accent); } .resume__head { margin-bottom: 1.5rem; } .resume__name { font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; } .resume__role { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--accent); margin-top: 0.4rem; } .resume__contact { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; } .resume__contact a { color: var(--text-soft); text-decoration: none; } .resume__contact a:hover { color: var(--accent); } .resume__summary { font-size: 1.02rem; color: var(--text-soft); line-height: 1.72; padding: 1.25rem 0; margin-bottom: 0.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .resume__section { margin-top: 2.25rem; } .resume__h2 { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint); margin-bottom: 1.25rem; } .job { margin-bottom: 1.75rem; } .job__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .job__title { font-size: 1.1rem; font-weight: 600; } .job__meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft); text-align: right; } .job__sub { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint); margin-top: 0.15rem; margin-bottom: 0.6rem; } .job__points { list-style: none; display: grid; gap: 0.5rem; } .job__points li { position: relative; padding-left: 1.1rem; font-size: 0.98rem; color: var(--text-soft); line-height: 1.55; } .job__points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .job__points strong { color: var(--text); font-weight: 600; } .skills { display: grid; gap: 0.7rem; } .skills__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; align-items: baseline; } .skills__row dt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); } .skills__row dd { font-size: 0.96rem; color: var(--text-soft); } @media (max-width: 540px) { .skills__row { grid-template-columns: 1fr; gap: 0.15rem; } .job__meta { text-align: left; } } /* ============================================================ The Plate Archive (photos.html) — prints on the light table by day, luminous plates in the dark by night. One design, every sky. ============================================================ */ .archive-body { display: block; place-items: unset; padding: 4.5rem 1.5rem 5rem; } .archive { position: relative; z-index: 1; max-width: 52rem; margin: 0 auto; width: 100%; } .archive__nav { margin-bottom: 2.5rem; } .archive__back { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-soft); text-decoration: none; } .archive__back:hover { color: var(--accent); } .archive__head { margin-bottom: 3.5rem; } .archive__kicker { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.8rem; } .archive__title { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; color: var(--text); } .archive__standfirst { margin-top: 0.9rem; font-size: 1.05rem; line-height: 1.7; color: var(--text-soft); max-width: 34rem; } .archive__empty { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text-faint); padding: 2rem 0; } .archive__empty[hidden] { display: none; } /* the plates — a single editorial column, a photo essay not a grid */ .plates { display: flex; flex-direction: column; gap: 4.5rem; max-width: 52rem; } .plate__frame { background: var(--elev); padding: 10px; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.12); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.8s var(--ease), border-color 0.8s var(--ease); } :root[data-sky="night"] .plate__frame, :root[data-sky="blue"] .plate__frame { box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35), 0 0 28px rgba(150, 200, 230, 0.07); } .plate__frame img { display: block; width: 100%; height: auto; border-radius: 2px; cursor: zoom-in; } @media (hover: hover) { .plate__frame:hover { transform: translateY(-2px); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.2); } :root[data-sky="night"] .plate__frame:hover, :root[data-sky="blue"] .plate__frame:hover { box-shadow: 0 20px 56px rgba(0, 0, 0, 0.45), 0 0 34px rgba(150, 200, 230, 0.1); } } .plate__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; } .plate__no { color: var(--text-faint); } .plate__loc { color: var(--text-soft); text-decoration: none; transition: color 0.2s var(--ease); } .plate__loc::before { content: "\2316 "; } a.plate__loc:hover { color: var(--accent); } .plate__meta { color: var(--text-faint); } .plate__blurb { flex-basis: 100%; margin-top: 0.5rem; font-family: var(--font-sans); font-size: 0.98rem; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.7; color: var(--text-soft); max-width: 36rem; } /* "developing" scroll reveal — gated on html.js so no-JS shows sharp plates */ html.js .plate { opacity: 0; filter: blur(10px); transform: translateY(14px); transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 0.9s var(--ease); } html.js .plate.is-developed { opacity: 1; filter: blur(0); transform: none; } @media (prefers-reduced-motion: reduce) { html.js .plate { opacity: 1; filter: none; transform: none; } } /* the lightbox — the darkroom. Near-black always, so it reads its own console (always-dark) tokens, never the sky's day-dark text. */ .lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; border: none; padding: 0; margin: 0; background: transparent; align-items: center; justify-content: center; } .lightbox[open] { display: flex; } .lightbox::backdrop { background: rgba(4, 6, 10, 0.93); } .lightbox__stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 92vw; margin: 0; } .lightbox__img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 2px; } .lightbox__caption { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--term-text); text-align: center; } .lightbox__ctl { position: fixed; z-index: 1; min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; background: transparent; border: none; cursor: pointer; font-family: var(--font-mono); line-height: 1; color: var(--term-dim); transition: color 0.2s var(--ease); } .lightbox__ctl:hover, .lightbox__ctl:focus-visible { color: var(--term-accent); } .lightbox__ctl:focus-visible { outline: 2px solid var(--term-accent); outline-offset: 2px; } .lightbox__close { top: 0.6rem; right: 0.8rem; font-size: 2rem; } .lightbox__prev { left: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 2.6rem; } .lightbox__next { right: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 2.6rem; } @media (max-width: 560px) { .plates { gap: 3rem; } .plate__frame { padding: 6px; } .lightbox__img { max-height: 72vh; } .lightbox__prev { left: 0.2rem; } .lightbox__next { right: 0.2rem; } } /* ---------- Mobile pass ---------- */ @media (max-width: 560px) { /* keep Felis clear of the station strip and out of the hero's way */ .constellation { width: clamp(120px, 34vw, 160px); top: 3.4rem; right: 0.8rem; } :root[data-sky="night"] { --con-op: 0.4; } :root[data-sky="blue"] { --con-op: 0.13; } /* reserve room so the fixed dial never overlaps the colophon */ .hero { padding-bottom: 6rem; } } @media (max-width: 480px) { .resume-body { padding: 1.25rem 0.6rem 2.5rem; } .resume { padding: 1.5rem 1.1rem 2rem; } .resume__print { padding: 0.35rem 0.6rem; } } /* fatter dial + no iOS focus-zoom on touch devices */ @media (pointer: coarse) { .dial__track { height: 34px; } .dial__marker { width: 16px; height: 16px; } .terminal__input { font-size: 16px; } } /* Print: pure black-on-white paper */ @media print { .resume { --text: #111; --text-soft: #333; --text-faint: #666; --accent: #1a6b48; --line: #ccc; padding: 0; max-width: 100%; background: #fff; box-shadow: none; border: none; animation: none; } .no-print, .scene, .station, .dial, .lightbox { display: none !important; } body { background: #fff; padding: 0; } a { color: #111 !important; text-decoration: none; } .job { break-inside: avoid; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }