/* ============================================================ Theme tokens. Dark is the default (:root); light overrides under [data-theme="light"]. The data-theme attribute is set before first paint by the inline script in each page's . ============================================================ */ :root { color-scheme: dark; --bg: #080b15; --bg-gradient: radial-gradient(circle at top left, rgba(255, 158, 194, 0.16), transparent 24%), radial-gradient(circle at bottom right, rgba(116, 225, 207, 0.16), transparent 24%), linear-gradient(135deg, #05070f 0%, #0b1020 50%, #10172c 100%); --surface: rgba(20, 25, 40, 0.82); --surface-strong: #151b2d; --surface-subtle: rgba(255, 255, 255, 0.05); --gradient-base: rgba(15, 24, 37, 0.95); --header-bg: rgba(8, 11, 21, 0.7); --overlay: linear-gradient(135deg, rgba(8, 11, 21, 0.95), rgba(24, 29, 49, 0.95)); --text: #faf6ff; --muted: #b6b4c8; --accent: #9a8dff; --accent-2: #ff9ec2; --accent-3: #74e1cf; --accent-4: #8fc4ff; --on-accent: #08101a; --border: rgba(255, 255, 255, 0.1); --shadow: 0 20px 45px rgba(0, 0, 0, 0.32); } [data-theme="light"] { color-scheme: light; /* Dimmed lavender-slate. Nothing here is pure white: the page sits well below it and cards are a soft off-white, so the whole thing reads as paper rather than a lightbulb. */ --bg: #d5d3e3; --bg-gradient: radial-gradient(circle at top left, rgba(190, 112, 152, 0.12), transparent 34%), radial-gradient(circle at bottom right, rgba(74, 162, 147, 0.11), transparent 34%), linear-gradient(135deg, #dbd9e8 0%, #d4d2e2 50%, #d1dcdc 100%); --surface: #eeedf4; --surface-strong: #f4f3f8; --surface-subtle: rgba(30, 26, 66, 0.07); --gradient-base: #eeedf4; --header-bg: rgba(219, 217, 232, 0.86); --overlay: linear-gradient(135deg, rgba(213, 211, 227, 0.95), rgba(195, 193, 214, 0.95)); --text: #191630; --muted: #494565; --accent: #6a53f0; --accent-2: #c93a7e; --accent-3: #0b6455; --accent-4: #345f9e; --on-accent: #ffffff; --border: rgba(30, 26, 66, 0.18); --shadow: 0 16px 38px rgba(45, 38, 92, 0.14); } * { box-sizing: border-box; } /* Any `display` rule we write would otherwise beat the browser's default [hidden] styling, leaving hidden elements visible. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", sans-serif; color: var(--text); background-color: var(--bg); background-image: var(--bg-gradient); min-height: 100vh; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } /* ---- Page transition + entrance ---- */ .page-transition-layer { position: fixed; inset: 0; background: var(--overlay); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); transform: translateY(2vh) scale(1.01); } body.page-transitioning .page-transition-layer { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } body.page-loaded .page-transition-layer { opacity: 0; transform: translateY(-2vh) scale(0.995); } body.page-loaded .site-header, body.page-loaded main, body.page-loaded .site-footer { opacity: 1; transform: translateY(0) scale(1); } .site-header, main, .site-footer { opacity: 0; transform: translateY(18px) scale(0.995); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } body.page-transitioning .site-header, body.page-transitioning main, body.page-transitioning .site-footer { opacity: 0.34; transform: translateY(10px) scale(0.995); transition-duration: 0.35s; } /* ---- Scroll reveal ---- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.is-visible { opacity: 1; transform: none; } /* ---- Background shapes ---- */ .background-shape { position: fixed; border-radius: 50%; filter: blur(10px); opacity: 0.55; z-index: 0; pointer-events: none; } .shape-one { width: 440px; height: 440px; background: radial-gradient(circle, rgba(255, 158, 194, 0.32), transparent 70%); top: -150px; right: -110px; } .shape-two { width: 360px; height: 360px; background: radial-gradient(circle, rgba(116, 225, 207, 0.24), transparent 72%); bottom: -100px; left: -100px; } .site-header, main, .site-footer { position: relative; z-index: 1; } /* ---- Header + nav ---- */ .site-header { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.5rem; max-width: 1120px; margin: 0 auto; position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(16px); background: var(--header-bg); border-bottom: 1px solid var(--border); } .brand { font-weight: 800; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); text-decoration: none; } /* ---- Hidden admin shortcut ---- Holding the logo fills it with the accent gradient. Without the feedback a long press just feels like the link is broken. */ .brand { position: relative; -webkit-tap-highlight-color: transparent; } .brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); transform: scaleX(0); transform-origin: left; opacity: 0; } .brand.is-holding { user-select: none; } .brand.is-holding::after { opacity: 1; transform: scaleX(1); transition: transform 0.7s linear; } /* Brief flash as the page hands off to /admin. */ body.admin-unlocked .site-header { transition: opacity 0.4s ease; opacity: 0.35; } @media (prefers-reduced-motion: reduce) { .brand.is-holding::after { transition: none; transform: scaleX(1); } body.admin-unlocked .site-header { transition: none; } } .site-nav { display: flex; gap: 1rem; margin-left: auto; } .site-nav a { color: var(--muted); text-decoration: none; font-weight: 600; transition: color 0.2s ease, background-color 0.2s ease; padding: 0.4rem 0.7rem; border-radius: 999px; } .site-nav a:hover, .site-nav a.active { color: var(--text); background: rgba(154, 141, 255, 0.2); } .theme-toggle { border: 1px solid var(--border); background: var(--surface-subtle); color: var(--text); width: 2.4rem; height: 2.4rem; border-radius: 999px; cursor: pointer; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .theme-toggle:hover { transform: translateY(-1px); border-color: var(--accent-3); } .nav-toggle { display: none; border: 0; background: transparent; cursor: pointer; padding: 0.25rem; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 4px 0; border-radius: 999px; } /* ---- Layout ---- */ main { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 4rem; } .section { padding: 3.25rem 0 0; } .hero { display: grid; grid-template-columns: 1.3fr 0.8fr; gap: 1.8rem; align-items: center; padding-top: 2.25rem; } .eyebrow, .section-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; font-weight: 700; color: var(--accent-3); margin-bottom: 0.75rem; } .hero h1, .section h2 { margin: 0 0 1rem; line-height: 1.1; } .hero h1 { font-size: clamp(2rem, 4vw, 3.35rem); max-width: 660px; } .lead { font-size: 1rem; line-height: 1.8; color: var(--muted); max-width: 620px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.2rem; } .button { display: inline-block; padding: 0.8rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease; } .button:hover { transform: translateY(-1px); } .button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: 0 12px 28px rgba(154, 141, 255, 0.22); } .button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .hero-card, .info-card, .project-card { border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); border-radius: 24px; padding: 1.35rem; backdrop-filter: blur(16px); } .hero-card h2 { font-size: 1.12rem; margin-top: 0; } .hero-card ul { padding-left: 1rem; color: var(--muted); line-height: 1.85; } .card-pill { display: inline-block; padding: 0.4rem 0.75rem; border-radius: 999px; background: rgba(116, 225, 207, 0.2); font-size: 0.84rem; font-weight: 700; color: var(--accent-3); margin-bottom: 0.9rem; } .section-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 1.5rem; align-items: start; } .info-card p, .project-card p { color: var(--muted); line-height: 1.8; } .section-header { margin-bottom: 1rem; } .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } /* ---- Project cards ---- */ /* h2 rather than h3: these cards sit directly under the page h1, so h3 would skip a heading level. */ .project-card h2 { margin-top: 0; margin-bottom: 0.6rem; /* Explicit size so promoting h3 -> h2 changes the outline, not the look. */ font-size: 1.15rem; line-height: 1.3; } .project-card { display: flex; flex-direction: column; justify-content: flex-start; } .project-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; } .project-year { color: var(--muted); font-size: 0.8rem; font-weight: 700; flex-shrink: 0; } .tag-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0.6rem 0 0; } .tag-row li { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; background: var(--surface-subtle); border: 1px solid var(--border); color: var(--accent-3); } .project-card .text-link { margin-top: auto; } /* ---- Hobbies ---- */ .hobby-section { margin-top: 1.2rem; } .hobby-chip-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .hobby-chip { border: 1px solid var(--border); background: var(--surface-subtle); color: var(--text); border-radius: 999px; padding: 0.7rem 1rem; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .hobby-chip:hover, .hobby-chip.active { transform: translateY(-1px); border-color: var(--accent-3); background: rgba(116, 225, 207, 0.18); } .hobby-preview { min-height: 190px; } /* ---- Game reviews ---- */ .steam-review-section { margin-top: 1.2rem; display: grid; gap: 1rem; } .steam-intro p { margin: 0; color: var(--muted); line-height: 1.7; } .steam-library-output { display: grid; gap: 0.75rem; } .steam-library-card { border: 1px solid var(--border); border-radius: 18px; padding: 0.95rem 1rem; background: linear-gradient(135deg, rgba(154, 141, 255, 0.16), var(--gradient-base)); display: flex; flex-direction: column; gap: 0.7rem; } .steam-library-card .game-card-header { display: flex; gap: 0.9rem; align-items: flex-start; width: 100%; } .steam-library-card .game-icon { width: clamp(140px, 28vw, 220px); height: auto; aspect-ratio: 460 / 215; border-radius: 18px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-subtle); flex-shrink: 0; display: block; } .steam-library-card .game-card-main { flex: 1; min-width: 0; } .steam-library-card .game-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.35rem; width: 100%; } .steam-library-card strong { display: block; margin-bottom: 0; line-height: 1.35; } .game-title-link { color: inherit; text-decoration: none; } .game-title-link:hover { text-decoration: underline; } .steam-library-card .review-rating { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; padding: 0.5rem 0.8rem; border-radius: 999px; color: var(--on-accent); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; font-size: 1.2rem; background: linear-gradient(135deg, var(--accent-3), var(--accent-2)); box-shadow: 0 10px 28px rgba(116, 225, 207, 0.24); border: 1px solid rgba(255, 255, 255, 0.16); flex-shrink: 0; } .steam-library-card small { color: var(--accent-3); } /* ---- Kanban (read-only) ---- */ .kanban-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .kanban-column { border: 1px solid var(--border); border-radius: 24px; padding: 1rem; background: var(--surface-subtle); min-height: 260px; } .kanban-column h3 { margin: 0 0 0.8rem; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-3); } .kanban-dropzone { display: flex; flex-direction: column; gap: 0.75rem; min-height: 180px; } .kanban-card { border: 1px solid var(--border); background: linear-gradient(135deg, rgba(154, 141, 255, 0.18), var(--gradient-base)); border-radius: 18px; padding: 0.9rem 1rem; box-shadow: var(--shadow); } .kanban-card p { margin: 0; color: var(--muted); line-height: 1.7; } .kanban-label { display: inline-block; margin-bottom: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-3); } /* ---- Misc ---- */ .text-link { display: inline-block; margin-top: 0.7rem; color: var(--accent-3); font-weight: 700; text-decoration: none; } .site-footer { max-width: 1120px; margin: 2rem auto 0; padding: 1.5rem 1.5rem 3rem; display: flex; justify-content: center; align-items: center; gap: 1rem; color: var(--muted); border-top: 1px solid var(--border); } .site-footer a { color: var(--accent-3); font-weight: 700; text-decoration: none; } /* ---- About page ---- */ .about-grid { display: grid; gap: 1rem; margin-top: 1.5rem; } /* h2 rather than h3: these cards sit directly under the page h1. */ .about-card h2 { margin-top: 0; margin-bottom: 0.6rem; font-size: 1.25rem; line-height: 1.3; } .about-card p { color: var(--muted); line-height: 1.8; margin: 0 0 0.7rem; } .about-card p:last-child { margin-bottom: 0; } .about-card-media { display: grid; grid-template-columns: 1fr minmax(0, 1.05fr); gap: 1.4rem; align-items: center; } .about-card-media.media-left .about-card-copy { order: 2; } .about-card-media.media-left .slideshow { order: 1; } /* ---- Video ---- */ .about-card-media-slot { display: grid; gap: 1rem; min-width: 0; } .video-figure { margin: 0; min-width: 0; } /* ---- "MUST WATCH" sticker ---- Deliberately cheesy: a rotated sticker slapped over the corner of the video, with an occasional wobble so it catches the eye without nagging. The glow around the frame sells the joke. */ /* ---- Feature video: full width, centred, in a device frame ---- A 9:16 clip beside a paragraph is always cramped, so this layout gives it the whole card and stacks the text above. The bezel makes the portrait shape read as deliberate rather than accidental. */ .about-feature { display: grid; justify-items: center; gap: 1.25rem; text-align: center; } .about-feature-copy { max-width: 46ch; } .about-feature .video-figure { width: 100%; display: flex; justify-content: center; } /* The frame itself */ .about-feature .video-stage { padding: 0.7rem; border-radius: 30px; background: linear-gradient(160deg, #2a2f45, #12151f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 46px -12px rgba(0, 0, 0, 0.65); } .about-feature .video-player { border-radius: 22px; border: 0; max-height: min(68vh, 560px); } /* Speaker slit above the screen, purely decorative. */ .about-feature .video-stage::before { content: ""; position: absolute; top: 0.26rem; left: 50%; transform: translateX(-50%); width: 3.2rem; height: 0.22rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); z-index: 1; } .about-feature .video-badge { top: -0.5rem; left: -0.9rem; } /* The glow belongs on the bezel, not tight to the screen. */ .about-feature.about-card .video-figure.has-badge .video-stage { border-radius: 30px; } /* Shrink-wraps the video so the badge sits on the video's own corner rather than floating in empty column space. Not inline-block: that makes the box size from the child's intrinsic dimensions, which for a