@font-face { font-family: "Monoton"; src: url("fonts/monoton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Saira"; src: url("fonts/saira.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: "Outfit"; src: url("fonts/outfit.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* Color system adapted from dashron.com/posts/dashron-v5-full-synthwave (colors/gradients/effects are not copyrightable; the two non-free display fonts used there, Razor and Newake, were replaced with the free Google Font Monoton). */ :root { --color-primary: #ff0066; --color-secondary: #ff2975; --color-accent: #3e024b; --color-white: #ffffff; --color-text-primary: rgba(255, 255, 255, 0.95); --color-text-secondary: rgba(255, 255, 255, 0.75); --color-link: #ff6b9d; --color-link-hover: #ff88b3; --color-background-start: #0f0209; --color-background-end: #770092; --color-border: #8a2255; --color-border-hover: #ee55bb; --color-neon-subtle: #e0316885; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 130px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; overflow-x: hidden; background: #000000; color: var(--color-text-primary); font-family: "Outfit", sans-serif; } main { position: relative; z-index: 4; } /* Real Winamp UI via webamp.org, main window only, hovers top-right in the hero, just under the navbar. */ #webamp-mount { position: fixed; top: 108px; right: 24px; width: 275px; height: 116px; z-index: 20; } /* Webamp renders its actual window into its own #webamp root, appended to , positioned absolute (i.e. relative to the document, so it drifts away on scroll). Force it to track the viewport instead, like the mount point above. */ #webamp { position: fixed !important; top: 0 !important; left: 0 !important; } #bg { position: fixed; inset: 0; z-index: 0; } #bg canvas { display: block; } /* CRT scanline overlay */ .scanline-overlay { background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.08) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03)); background-size: 100% 3px, 3px 100%; pointer-events: none; position: fixed; inset: 0; z-index: 5; } /* Film grain / noise texture */ .noise-texture { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.04; pointer-events: none; position: fixed; inset: 0; z-index: 6; } /* Hero: brand wordmark, neon glow text, Monoton in place of the licensed Razor font */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; padding: 130px 24px 0; } .brand-text { font-family: "Monoton", cursive; font-size: clamp(1.6rem, 6vw, 4rem); color: var(--color-white); text-transform: uppercase; letter-spacing: 0.02em; text-align: center; max-width: 100%; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), 2px 3px 20px rgba(255, 0, 255, 0.85), 3px 2px 3px rgba(0, 0, 255, 0.85), 0 0 7px var(--color-white), 0 0 21px var(--color-neon-subtle); } /* Hero call-to-action, stacked under the wordmark. */ .cta-book { font-family: "Saira", sans-serif; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; color: var(--color-white); padding: 14px 34px; border-radius: 999px; background: rgba(255, 0, 102, 0.14); transition: background 0.2s, transform 0.2s; } .cta-book:hover, .cta-book:focus-visible { background: rgba(255, 0, 102, 0.3); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .cta-book { transition: background 0.2s; } .cta-book:hover, .cta-book:focus-visible { transform: none; } } /* Nav */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; padding: 16px 32px; background: linear-gradient(to bottom, #07001a 0%, #07001a 50%, #450a2f 80%, #95134b 100%); } /* JS mark on its own row, links centered below it, always (desktop included) - both rows simply center themselves via align-items. */ .nav-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .nav-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 34px; } /* Used on /lab/, which keeps its own separate theme */ .mark { font-family: "Saira", sans-serif; font-weight: 900; font-size: 1.2rem; text-decoration: none; color: var(--color-white, #fff); letter-spacing: 0.05em; } /* Metallic chrome nav-link text with a neon glow duplicate behind it */ .metal-link { font-family: "Saira", sans-serif; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; text-decoration: none; position: relative; background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #859ee2 51%, #d5ebfb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: text-shadow 0.2s; } .metal-link::after { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; background: none; color: transparent; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), 2px 3px 20px rgba(255, 0, 255, 0.85), 3px 2px 3px rgba(0, 0, 255, 0.85); } .metal-link:hover::after { text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), 2px 3px 20px rgba(255, 0, 255, 0.85), 3px 2px 3px rgba(0, 0, 255, 0.85), 0 0 7px var(--color-white), 0 0 21px var(--color-neon-subtle); } .wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; } .section { position: relative; z-index: 4; padding: 64px 24px; } .section-title { font-size: 1.8rem; margin: 0 0 32px; display: inline-block; } .exp-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 16px; } .exp-item { display: grid; grid-template-columns: 150px 1fr 1.3fr; gap: 16px; padding: 16px 22px; border-radius: 4px; background: rgba(5, 2, 8, 0.72); backdrop-filter: blur(3px); align-items: baseline; } .exp-period { color: var(--color-link); font-size: 0.82rem; font-family: "Saira", sans-serif; } .exp-role { font-weight: 600; font-family: "Saira", sans-serif; font-size: 0.92rem; } .exp-desc { color: var(--color-text-secondary); font-size: 0.9rem; } .exp-edu { color: var(--color-text-secondary); font-size: 0.85rem; margin: 0; } .project-links { display: flex; flex-direction: column; gap: 16px; } .project-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border-radius: 4px; background: rgba(5, 2, 8, 0.72); backdrop-filter: blur(3px); color: var(--color-white); text-decoration: none; transition: transform 0.2s; } .project-card:hover { transform: translateY(-2px); } .project-name { font-family: "Saira", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--color-link); } .project-card:hover .project-name { color: var(--color-link-hover); } .project-desc { color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.55; max-width: 60ch; } /* One tile: photo and text share the same card, border and background. */ .contact-card { display: flex; align-items: stretch; gap: 24px; padding: 24px; border-radius: 4px; background: rgba(5, 2, 8, 0.72); backdrop-filter: blur(3px); max-width: 560px; overflow: hidden; } .contact-portrait-col { display: flex; flex-direction: column; gap: 12px; width: 200px; flex: none; } .contact-portrait-wrap { position: relative; flex: 1; border-radius: 4px; overflow: hidden; } .contact-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .contact-portrait-pixel { image-rendering: pixelated; opacity: 1; object-position: 47% 47%; transition: opacity 0.6s ease; } .contact-portrait-real { opacity: 0; transform: scale(1.02); transition: opacity 0.6s ease; } .contact-portrait-wrap:hover .contact-portrait-pixel { opacity: 0; } .contact-portrait-wrap:hover .contact-portrait-real { opacity: 1; } .social-links { display: flex; gap: 14px; justify-content: center; } .social-links a { color: var(--color-text-secondary); display: flex; transition: color 0.2s; } .social-links a:hover { color: var(--color-link); } @media (prefers-reduced-motion: reduce) { .contact-portrait-pixel, .contact-portrait-real { transition: none; } } .contact-info { display: flex; flex-direction: column; gap: 4px; } .contact-name { font-family: "Saira", sans-serif; font-weight: 700; font-size: 1.2rem; margin: 0; } .contact-role { color: var(--color-text-secondary); font-size: 0.9rem; margin: 0 0 12px; } .contact-email, .contact-phone { color: var(--color-link); text-decoration: none; font-weight: 600; } .contact-email:hover, .contact-phone:hover { color: var(--color-link-hover); } .contact-phone { margin-top: 2px; } .contact-address { font-style: normal; color: var(--color-text-secondary); font-size: 0.88rem; line-height: 1.6; margin-top: 16px; } @media (max-width: 700px) { .exp-item { grid-template-columns: 1fr; gap: 6px; } .contact-card { flex-direction: column; } .contact-portrait-col { width: 100%; } .contact-portrait-wrap { height: 200px; } .nav { padding: 14px 16px; } .nav-links { gap: 14px; } .metal-link { font-size: 0.8rem; } #webamp-mount { top: 108px; right: 12px; transform: scale(0.85); transform-origin: top right; } } @media (max-width: 1100px) { .brand-text { font-size: clamp(1.2rem, 5.2vw, 2.6rem); letter-spacing: 0; } .hero { padding-top: 170px; } } /* Reusable neon box: glow-only border, no fill needed */ .neon-box { border: 0; box-shadow: 0 0 5px 1px var(--color-white), 0 0 10px 4px var(--color-primary), inset 0 0 5px 1px var(--color-white), inset 0 0 10px 4px var(--color-primary); } @media (prefers-reduced-motion: reduce) { .scanline-overlay, .noise-texture { display: none; } } /* --- Lab view: boot sequence + demo uploader, rendered as white, translucent content on the existing synthwave mask (loaded via the client-side router or a direct visit to /lab/). --- */ @font-face { font-family: "Share Tech Mono"; src: url("fonts/share-tech-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } .term-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); font-family: "Outfit", sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--color-text-primary); } .term-status { display: flex; align-items: center; gap: 8px; } .term-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-link); box-shadow: 0 0 8px 2px var(--color-link); animation: term-blink 1.2s ease-in-out infinite; } @keyframes term-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .term-home { color: var(--color-text-primary); text-decoration: none; opacity: 0.8; } .term-home:hover { opacity: 1; text-shadow: 0 0 8px var(--color-link); } .term-main { position: relative; z-index: 4; max-width: 720px; margin: 0 auto; padding: 140px 24px 80px; font-family: "Outfit", sans-serif; } .boot-log { margin: 0 0 32px; font-size: 0.85rem; line-height: 1.7; color: var(--color-text-secondary); white-space: pre-wrap; min-height: 90px; } .boot-log .cursor { display: inline-block; width: 8px; background: var(--color-text-primary); animation: term-blink 0.8s step-end infinite; } .term-panel { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(8, 4, 14, 0.92); box-shadow: 0 0 30px -8px rgba(255, 107, 157, 0.35), inset 0 0 40px rgba(255, 255, 255, 0.02); border-radius: 4px; padding: 32px; opacity: 0; transition: opacity 0.6s ease; } .term-panel.is-visible { opacity: 1; } .term-title { margin: 0 0 8px; font-size: 1.8rem; letter-spacing: 0.06em; color: var(--color-white); text-shadow: 0 0 14px rgba(255, 107, 157, 0.6); } .term-user { margin: 0 0 28px; font-size: 0.75rem; opacity: 0.65; letter-spacing: 0.05em; } .term-block { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .term-block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } .term-subtitle { margin: 0 0 16px; font-size: 0.85rem; letter-spacing: 0.08em; opacity: 0.85; } .term-list { list-style: none; margin: 0; padding: 0; } .term-list li { border-top: 1px solid rgba(255, 255, 255, 0.1); } .term-link { display: block; padding: 14px 4px; color: var(--color-text-primary); text-decoration: none; font-size: 0.95rem; transition: padding-left 0.15s ease, text-shadow 0.15s ease; } .term-link:hover { text-shadow: 0 0 10px var(--color-link); padding-left: 12px; } .term-empty { margin: 0; opacity: 0.55; font-size: 0.85rem; } .upload-form { display: flex; flex-direction: column; gap: 14px; } .upload-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.7rem; letter-spacing: 0.06em; opacity: 0.85; } .upload-field input[type="text"], .upload-field input[type="file"] { font-family: inherit; font-size: 0.9rem; color: var(--color-text-primary); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 3px; padding: 10px 12px; outline: none; } .upload-field input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.35); } .upload-field input[type="text"]:focus, .upload-field input[type="file"]:focus { border-color: var(--color-link); box-shadow: 0 0 12px -2px rgba(255, 107, 157, 0.5); } .upload-field input[type="file"]::file-selector-button { font-family: inherit; color: var(--color-text-primary); background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; padding: 4px 10px; margin-right: 10px; cursor: pointer; } .term-btn { align-self: flex-start; font-family: inherit; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--color-white); background: rgba(255, 107, 157, 0.1); border: 1px solid var(--color-link); border-radius: 3px; padding: 10px 22px; cursor: pointer; transition: box-shadow 0.2s ease, background 0.2s ease; } .term-btn:hover:not(:disabled) { background: rgba(255, 107, 157, 0.2); box-shadow: 0 0 14px -2px var(--color-link); text-shadow: 0 0 8px var(--color-link); } .term-btn:disabled { opacity: 0.5; cursor: wait; } .upload-status { margin: 0; font-size: 0.8rem; min-height: 1em; opacity: 0.9; } .upload-status.is-error { color: #ff6a6a; } .upload-status.is-ok { color: #6affa0; } .upload-status.is-busy { opacity: 0.7; } .demo-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .demo-item .term-link { flex: 1; } .demo-delete { font-family: inherit; font-size: 0.7rem; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.4); background: transparent; border: none; cursor: pointer; padding: 8px; flex: none; } .demo-delete:hover { color: #ff6a6a; text-shadow: 0 0 8px #ff6a6a; }