/* ============================================================ CSS CUSTOM PROPERTIES — edit these to theme your site! TODO: Try asking Copilot to suggest a color palette for you. ============================================================ */ *{ cursor: url("images/cursor.png"), auto; } button { cursor: url("images/cursor.png"), auto; } a, a:hover, a:focus-visible, button:hover, button:focus-visible, .btn, .btn:hover, .btn:focus-visible, .btn-outline, .btn-outline:hover, .btn-outline:focus-visible, .dark-mode-toggle, .dark-mode-toggle:hover, .dark-mode-toggle:focus-visible { cursor: url("images/cursor.png"), auto !important; } :root { --color-bg: #fdfdfd; --color-bg-alt: #effcf4; --color-surface: #f8fcff; --color-surface-alt: #effcf4; --color-hero-bg: #dff6ea; --color-text: #355e52; --color-text-muted: rgba(53, 94, 82, 0.74); --color-accent: #4f6f63; --color-accent-hover: #6b9080; --color-border: #7addc9; --color-heading: #24413a; --color-heading-accent: #f69ed2; --color-heading-accent-strong: #f6c3f4; --color-copy: #355e52; --color-copy-strong: #4f6f63; --color-panel: #fdfdfd; --cherry-blossom: #f6c3f4; --powder-petal: #fff6b3; --dust-grey: #effcf4; --ash-grey: #7addc9; --iron-grey: #355e52; --jungle-teal: #6b9080; --muted-teal: #a8f2f8; --frozen-water: #a8f2f8; --azure-mist: #effcf4; --mint-cream: #fdfdfd; --font-main: 'Segoe UI', system-ui, sans-serif; --radius: 10px; --shadow: 0 2px 12px rgba(0, 0, 0, 0.08); --transition: 0.2s ease; } /* Dark mode theme using CSS custom properties. Toggle by setting data-theme="dark" on the or element. */ :root[data-theme="dark"] { --color-bg: #21131d; --color-bg-alt: #2f1a29; --color-surface: #1a1017; --color-surface-alt: #2b1824; --color-hero-bg: #26141f; --color-text: #fdf7fb; --color-text-muted: rgba(253, 247, 251, 0.78); --color-accent: #fff6b3; --color-accent-hover: #f6c3f4; --color-border: #f69ed2; --color-heading: #fdf7fb; --color-heading-accent: #fff6b3; --color-heading-accent-strong: #f6c3f4; --color-copy: #f7ddeb; --color-copy-strong: #fff6b3; --color-panel: #2b1824; --font-main: 'Segoe UI', system-ui, sans-serif; --radius: 10px; --shadow: 0 4px 24px rgba(8, 5, 12, 0.72); --transition: 0.2s ease; } :root[data-theme="dark"] .hero .btn { background: #d2b34a; color: #21131d !important; } .dark-mode-toggle { border: 1px solid var(--color-border); background: var(--color-bg-alt); color: var(--color-text); border-radius: 999px; padding: 0.45rem 0.6rem; cursor: pointer; font-size: 1rem; transition: background var(--transition), color var(--transition), transform var(--transition); } .dark-mode-toggle:hover { transform: translateY(-1px); background: var(--color-accent); color: var(--color-heading); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); background-color: var(--color-bg); color: var(--color-text); line-height: 1.7; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-accent-hover); } /* ============================================================ NAVIGATION ============================================================ */ .navbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: var(--color-bg); box-shadow: var(--shadow); } .nav-logo { font-weight: 700; font-size: 1.2rem; color: var(--color-accent); } .nav-links { list-style: none; display: flex; gap: 2rem; } .nav-links a { color: var(--color-text); font-weight: 500; } .nav-links a:hover { color: var(--color-accent); } /* Hamburger Menu */ .hamburger { display: none; flex-direction: column; background: transparent; border: none; cursor: pointer; gap: 6px; margin-right: 1rem; } .hamburger-line { width: 24px; height: 3px; background: var(--color-text); border-radius: 2px; transition: all 0.3s ease; } .hamburger.is-active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(10px, 10px); } .hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger.is-active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); } @media (max-width: 768px) { .hamburger { display: flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); flex-direction: column; gap: 0; border-bottom: 1px solid var(--color-border); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nav-links.is-active { max-height: 300px; } .nav-links li { padding: 1rem 2rem; border-bottom: 1px solid var(--color-border); } .nav-links a { display: block; } } /* ============================================================ HERO ============================================================ */ .hero { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; background: var(--color-hero-bg); position: relative; overflow: hidden; } .hero::before { content: none; } .hero::after { content: none; } .hero-content { max-width: 700px; position: relative; z-index: 2; } .hero-junimos { position: absolute; left: 50%; bottom: 0.75rem; width: min(42vw, 360px); max-width: 100%; height: auto; transform: translateX(-50%); z-index: 1; pointer-events: none; user-select: none; } .hero h1 { position: relative; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 1rem; line-height: 1.2; color: var(--color-heading); } .hero-greeting { color: var(--color-heading); } .highlight { color: var(--color-accent); } .hero-name { color: var(--color-heading-accent); } .hero-subtitle { font-size: 1.25rem; color: var(--color-text-muted); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18); margin-bottom: 2rem; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-block; padding: 0.75rem 1.75rem; background: var(--color-accent); color: #fdfdfd !important; border-radius: var(--radius); font-weight: 600; transition: background var(--transition), transform var(--transition); } .btn:hover { background: var(--color-accent-hover); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--color-accent) !important; border: 2px solid var(--color-accent); } .btn-outline:hover { background: var(--color-accent); color: #fdfdfd !important; } /* ============================================================ SECTIONS ============================================================ */ .section { padding: 5rem 2rem; max-width: 1000px; margin: 0 auto; background: var(--color-surface); } #about.section { border-top: 1.5px solid var(--color-text); border-bottom: 1.5px solid var(--color-text); } #skills.section { border-top: 1.5px solid var(--color-text); border-bottom: 1.5px solid var(--color-text); } .section-alt { background: var(--color-surface-alt); max-width: 100%; padding: 5rem 2rem; } #projects.section-alt, #contact.section-alt { position: relative; overflow: hidden; background: var(--color-surface-alt); } .section-alt > * { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; } h2 { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; position: relative; display: inline-block; } /* Accent underline on section headings */ h2::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 40px; height: 4px; background: var(--color-accent); border-radius: 2px; } /* ============================================================ ABOUT ============================================================ */ .about-grid { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; } .about-text p + p { margin-top: 1rem; } .about-image { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; border: 3px solid var(--color-border); background: var(--color-bg-alt); cursor: pointer; perspective: 900px; } .about-photo { width: 100%; height: 100%; object-fit: cover; display: block; transform-style: preserve-3d; backface-visibility: hidden; } .about-image.is-spinning .about-photo { animation: coinSpin 0.9s ease-in-out; } .coin-particle { position: fixed; left: 0; top: 0; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--color-accent); font-size: 1.35rem; text-shadow: 0 0 6px rgba(246, 195, 244, 0.25); pointer-events: none; z-index: 999; will-change: transform, opacity; } @keyframes coinSpin { 0% { transform: rotateY(0deg) scale(1); } 25% { transform: rotateY(90deg) scale(0.9); } 50% { transform: rotateY(180deg) scale(1.05); } 75% { transform: rotateY(270deg) scale(0.9); } 100% { transform: rotateY(360deg) scale(1); } } /* ============================================================ PROJECTS ============================================================ */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .project-card { position: relative; overflow: hidden; background: var(--color-panel); border: 2px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition); } .project-card > * { position: relative; z-index: 1; } .project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(122, 221, 201, 0.22); } .project-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--color-text); } .project-card p { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1rem; } .project-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .tag { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); } .project-links { display: flex; gap: 0.75rem; } .project-links a { font-size: 0.875rem; font-weight: 600; } /* ============================================================ SKILLS ============================================================ */ .skills-container { display: flex; flex-wrap: wrap; gap: 0.75rem; } .skill-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; padding: 0.35rem 0.85rem; background: var(--color-panel); border: 2px solid var(--color-border); border-radius: 14px; color: var(--color-text); font-size: 0.85rem; font-weight: 500; cursor: default; line-height: 1; box-shadow: none; letter-spacing: 0.01em; transition: background var(--transition), color var(--transition), border-color var(--transition); } .skill-badge:hover { background: var(--color-surface-alt); color: var(--color-accent); border-color: var(--color-accent); } .skill-badge:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ============================================================ CONTACT ============================================================ */ .contact-intro { color: var(--color-text); margin-bottom: 2rem; font-size: 1.1rem; } .contact-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; } .contact-heading-row h2 { margin-bottom: 0; } .contact-links { display: flex; flex-wrap: wrap; gap: 1rem; } .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; } .contact-content { max-width: 42rem; } .contact-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: min(280px, 36vw); } .contact-visual-heading { min-width: 0; flex-shrink: 0; } .contact-arrow { position: absolute; left: -3.25rem; top: 35%; font-size: clamp(4rem, 8vw, 6.5rem); line-height: 1; color: var(--color-accent); transform: rotate(-8deg); text-shadow: 0 6px 0 rgba(0, 0, 0, 0.08); filter: drop-shadow(0 8px 0 rgba(122, 221, 201, 0.22)); animation: arrowWiggle 1.8s ease-in-out infinite; user-select: none; } .contact-cat { display: block; width: min(240px, 80vw); margin: 0; pointer-events: auto; user-select: none; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='2' y='24' font-size='22'%3E%F0%9F%91%89%3C/text%3E%3C/svg%3E") 4 0, pointer; } .contact-visual-heading .contact-cat { width: min(180px, 34vw); } /* ============================================================ FOOTER ============================================================ */ footer { text-align: center; padding: 2rem; color: var(--color-copy); font-size: 0.875rem; border-top: 1px solid var(--color-border); } /* ============================================================ RESPONSIVE Optimized for screens under 600px with hamburger menu, single-column layouts, and adjusted typography. ============================================================ */ @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } .contact-layout { grid-template-columns: 1fr; } .contact-heading-row { flex-direction: column; align-items: flex-start; margin-bottom: 1rem; } .contact-visual { justify-content: center; min-width: 0; padding-left: 0; } .contact-visual-heading { align-self: flex-end; } .contact-arrow { left: 0; top: -2rem; transform: rotate(0deg); } .milo-angry-cat { top: -1.8rem; left: 14%; width: min(160px, 44vw); } .avatar-placeholder { width: 20px; height: 20px; } } @media (max-width: 600px) { /* ---- Navigation ---- */ .navbar { padding: 1rem; flex-wrap: wrap; } .nav-logo { font-size: 1rem; } .dark-mode-toggle { padding: 0.35rem 0.5rem; font-size: 0.9rem; } /* ---- Hero Section ---- */ .hero { min-height: 60vh; padding: 2rem 1rem; } .hero h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 1rem; } .hero-subtitle { font-size: 1rem; margin-bottom: 1.5rem; } .hero-junimos { width: min(35vw, 200px); bottom: 0.5rem; } /* ---- Sections ---- */ .section { padding: 3rem 1rem; } .section-alt { padding: 3rem 1rem; } h2 { font-size: 1.5rem; margin-bottom: 1.5rem; } /* ---- About Section ---- */ .about-grid { gap: 1.5rem; } .about-image { width: 120px; height: 120px; margin: 0 auto; } .about-text p { font-size: 0.95rem; } /* ---- Projects Grid (Single Column) ---- */ .projects-grid { grid-template-columns: 1fr; gap: 1rem; } .project-card { padding: 1.25rem; } .project-card h3 { font-size: 1rem; } .project-card p { font-size: 0.9rem; } /* ---- Skills Section ---- */ .skills-container { gap: 0.5rem; } .skill-badge { min-width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem; border-radius: 12px; } /* ---- Contact Section ---- */ .contact-intro { font-size: 1rem; margin-bottom: 1.5rem; } .contact-links { flex-direction: column; gap: 0.75rem; } .contact-links a { width: 100%; text-align: center; } .contact-visual-heading .contact-cat { width: min(160px, 44vw); } .contact-visual { padding-left: 0; margin-top: 1.5rem; } .contact-arrow { display: none; } .contact-cat { width: min(200px, 70vw); } .milo-wrapper { width: 100%; } /* ---- Footer ---- */ footer { padding: 1.5rem; font-size: 0.8rem; } /* ---- Buttons ---- */ .btn { padding: 0.65rem 1.5rem; font-size: 0.95rem; } .btn-outline { font-size: 0.95rem; } } @media (max-width: 480px) { /* Extra small devices */ .navbar { padding: 0.75rem; } .nav-logo { font-size: 0.95rem; } .hero { min-height: 50vh; padding: 1.5rem 1rem; } .hero h1 { font-size: clamp(1.25rem, 3.5vw, 2rem); } .hero-subtitle { font-size: 0.95rem; } h2 { font-size: 1.25rem; margin-bottom: 1rem; } .section { padding: 2rem 1rem; } .section-alt { padding: 2rem 1rem; } .project-card { padding: 1rem; } .btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; } } /* Cat message bubble */ .cat-message { position: fixed; transform: translate(-50%, -10px); background: var(--color-bg-alt); border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; border-radius: 10px; font-size: 0.9rem; color: var(--color-text); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 9999; pointer-events: none; max-width: 200px; text-align: center; } /* Speech bubble tail */ .cat-message::after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--color-bg-alt); } .cat-message.is-visible { opacity: 1; transform: translate(-50%, -18px); } .milo-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; } .milo-caption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--color-copy); } .shredded { display: inline-block; color: var(--color-text); position: relative; animation: shredEffect 0.6s ease forwards; } @keyframes shredEffect { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 40% { transform: rotate(-6deg) scale(1.05); } 70% { transform: rotate(6deg) scale(0.95); } 100% { opacity: 0; transform: rotate(12deg) translateY(20px) scale(0.8); filter: blur(3px); } } .page-destroyed { animation: vanishPage 0.8s ease forwards; } @keyframes vanishPage { 0% { opacity: 1; } 40% { opacity: 0.4; filter: blur(2px); } 100% { opacity: 0; filter: blur(6px); pointer-events: none; } } @keyframes arrowWiggle { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-6px); } } .hidden { display: none !important; } #milo-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 2rem; background: rgba(17, 24, 28, 0.68); backdrop-filter: blur(6px); } .milo-popup { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .milo-popup-art { position: relative; width: min(680px, 92vw); } .milo-browser { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(53, 80, 166, 0.16)); } .milo-angry-cat { position: absolute; top: -1.1rem; left: 18%; width: min(190px, 36vw); transform: translateX(-60%) translateY(70%); z-index: 1; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.25)); } .milo-popup-copy { position: absolute; left: 50%; top: 53%; transform: translate(-30%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .milo-final-message { margin: 0; font-size: clamp(1.4rem, 3.5vw, 2.3rem); font-weight: 800; text-align: center; color: var(--color-heading); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55); } .milo-sub-message { margin: 0; font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight: 600; text-align: center; color: var(--color-copy-strong); } .milo-box { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .milo-apologize { padding: 0.75rem 1.5rem; font-size: 1.1rem; border-radius: 10px; border: 2px solid var(--color-border); background: var(--color-accent); color: #fdfdfd; cursor: pointer; transition: transform 0.25s ease, background 0.25s ease; } .milo-apologize:hover { transform: translateY(-3px); background: var(--color-accent-hover); } #milo-apology-btn { --runaway-x: 0px; --runaway-y: 0px; position: relative; transform: translate(var(--runaway-x), var(--runaway-y)); will-change: transform; } #milo-apology-btn:hover { transform: translate(var(--runaway-x), calc(var(--runaway-y) - 3px)); }