/* ============================================================ THEME TOKENS — default theme: "midnight" (dark) Everything below reads from these. To add another theme later, don't touch the rules — add an override block (see bottom) and flip from the switcher. ============================================================ */ :root { /* Black and Gold Theme */ --bg: #000000; --surface: #0a0a0a; --surface-2: #1a1a1a; --border: #2a2a2a; --text: #ffffff; --muted: #b0a88a; --accent: #d4af37; --accent-hover: #e8c84a; --accent-2: #b8960f; --on-accent: #000000; --grad: linear-gradient(120deg, #d4af37, #b8960f); --font: "Roboto", system-ui, sans-serif; --content: 800px; --content-wide: 1000px; --radius: 8px; --radius-pill: 25px; --space: 20px; } /* ============================================================ BASE — sticky footer: body is a column, main grows to fill ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg); color: var(--text); font-family: var(--font); overflow-x: hidden; } main { flex: 1 0 auto; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { color: var(--text); } p, button { font-family: var(--font); } img { max-width: 100%; } a { color: var(--accent); } a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } /* ============================================================ NAV — Black and Gold Theme ============================================================ */ .nav-bar { background-color: var(--surface); border-bottom: 1px solid var(--border); padding: 12px var(--space); } .nav-content { display: flex; align-items: center; justify-content: space-between; max-width: var(--content-wide); margin: 0 auto; } .home-icon { color: var(--accent); text-decoration: none; display: flex; align-items: center; } .home-icon:hover { color: var(--accent-hover); } .nav-links { display: flex; gap: 24px; } .nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { color: var(--accent); } /* ============================================================ HERO — Split Layout: Cursive Name + Typewriter Tagline ============================================================ */ .hero-split { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 40px var(--space); gap: 60px; background: var(--bg); } .hero-image-side { flex: 1; max-width: 500px; } .hero-image-side img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); border: 2px solid var(--accent); } .hero-text-side { flex: 1; max-width: 500px; } /* Cursive Name */ .cursive { font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 4rem; color: var(--text); text-shadow: 0 0 40px rgba(212, 175, 55, 0.2); margin-bottom: 12px; } /* Typewriter Tagline */ .typewriter { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--accent); font-size: 1.5rem; color: var(--accent); font-weight: 300; letter-spacing: 0.05em; width: 0; animation: typing 4s steps(30, end) infinite, blink 0.8s step-end infinite; } @keyframes typing { 0% { width: 0; } 50% { width: 100%; } 80% { width: 100%; } 100% { width: 0; } } @keyframes blink { 0%, 100% { border-color: var(--accent); } 50% { border-color: transparent; } } /* Responsive */ @media (max-width: 768px) { .hero-split { flex-direction: column; text-align: center; gap: 30px; min-height: auto; padding: 60px 20px; } .hero-image-side { max-width: 300px; } .cursive { font-size: 2.8rem; } .typewriter { font-size: 1.2rem; white-space: normal; border-right: none; animation: none; width: auto; } } /* ============================================================ BUTTONS — single row on desktop, wrap on small screens ============================================================ */ .button-group { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 8px; } @media (max-width: 700px) { .button-group { flex-wrap: wrap; } } .btn { display: inline-block; padding: 10px 24px; font-weight: 600; text-decoration: none; color: var(--bg); background: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius-pill); transition: all 0.3s ease; } .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); } /* ============================================================ FOOTER ============================================================ */ .site-footer { display: flex; justify-content: center; gap: 24px; background: var(--surface); border-top: 1px solid var(--border); padding: 24px var(--space); } .site-footer a { color: var(--accent); text-decoration: none; font-weight: 500; } .site-footer a:hover { text-decoration: underline; } /* ============================================================ SHARED PAGE LAYOUT ============================================================ */ .about-section, .experience-section, .hobby-grid, .travel-section{ width: 100%; max-width: var(--content); margin: 20px auto; padding: 0 var(--space); } /* ABOUT */ .about-intro{ display: flex; align-items: center; gap: 32px; margin: 24px 0 40px; } .about-section img { width: 220px; height: 220px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 2px solid var(--border); } .about-section article { background: var(--surface); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; } .about-section article a { margin-right: 14px; } @media (max-width: 600px) { .about-intro { flex-direction: column; align-items: flex-start; } } /* HOBBIES */ .hobby-grid ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; padding: 0; margin-bottom: 0; } .hobby-grid li { flex: 0 1 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .hobby-grid img { border-radius: var(--radius); } /* WORK */ .experience-item { background: var(--surface); border-left: 4px solid var(--accent); padding: 20px 25px; margin-bottom: 25px; border-radius: var(--radius); } .experience-item h3 { margin-bottom: 5px; } .experience-item p { margin: 8px 0; color: var(--muted); } .section-subtitle { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 8px; margin: 30px 0 20px; } /* TRAVEL (Folium map is in its own iframe — only the wrapper is reachable) */ .travel-section h1 { font-size: 2.2rem; margin-bottom: var(--space); } .map-container { width: 100%; max-width: 900px; margin: 0 auto; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Timeline Page — Dark Theme */ .timeline-container { max-width: 800px; margin: 40px auto; padding: 0 20px; } .timeline-container h1 { font-size: 2.2rem; margin-bottom: 20px; color: var(--text); } /* Form Styling */ #timeline-form .form-group { margin-bottom: 15px; } #timeline-form .form-group label { display: block; font-weight: 500; margin-bottom: 5px; color: var(--accent); } #timeline-form .form-group input, #timeline-form .form-group textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 1rem; font-family: inherit; background: var(--surface); color: var(--text); } #timeline-form .form-group input::placeholder, #timeline-form .form-group textarea::placeholder { color: var(--muted); } #timeline-form button[type="submit"] { background: var(--accent); color: var(--on-accent); border: none; padding: 10px 20px; border-radius: 5px; font-size: 1rem; cursor: pointer; font-weight: 600; } #timeline-form button[type="submit"]:hover { background: var(--accent-hover); } /* Posts List */ #posts-container h2 { margin-top: 30px; font-size: 1.8rem; color: var(--text); } .timeline-post { background: var(--surface); padding: 15px 20px; margin: 15px 0; border-radius: var(--radius); border-left: 4px solid var(--accent); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .timeline-post h3 { margin: 0 0 5px 0; font-size: 1.1rem; color: var(--accent); } .timeline-post p { margin: 5px 0; font-size: 1rem; color: var(--text); line-height: 1.5; } .timeline-post small { color: var(--muted); font-size: 0.85rem; } /* Homepage Content */ .home-content { max-width: var(--content-wide); margin: 40px auto; padding: 0 var(--space); } .intro-text { text-align: center; margin-bottom: 40px; } .intro-text h2 { font-size: 2rem; color: var(--text); margin-bottom: 16px; } .intro-text p { font-size: 1.1rem; color: var(--muted); max-width: 600px; margin: 0 auto 20px; } .home-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; } .highlight-card { background: var(--surface); padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; } .highlight-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .highlight-card h3 { color: var(--accent); margin-bottom: 8px; } .highlight-card p { color: var(--muted); margin: 0; } .gold { color: var(--accent); } /* Hero Overlay */ .hero-overlay { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); } .hero-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; } .hero-text-overlay { position: relative; z-index: 2; text-align: center; max-width: 800px; padding: 20px; } .hero-text-overlay .name { font-size: 4rem; font-weight: 700; color: var(--text); text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); margin-bottom: 8px; } .hero-text-overlay .tagline { font-size: 1.2rem; color: var(--muted); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); margin-bottom: 20px; } .hero-text-overlay .button-group { justify-content: center; } /* Smooth scrolling for the whole page */ html { scroll-behavior: smooth; } /* Cursive Name */ .cursive { font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 4rem; color: var(--text); text-shadow: 0 0 40px rgba(212, 175, 55, 0.2); } /* Typewriter Tagline */ .typewriter { display: inline-block; font-size: 1.5rem; color: var(--accent); font-weight: 300; letter-spacing: 0.05em; position: relative; white-space: nowrap; overflow: hidden; width: 28ch; /* exactly matches the number of characters */ animation: typewriter 3.5s steps(28) infinite; } /* Cursor blinking */ .typewriter::after { content: ''; position: absolute; right: 0; top: 0; width: 2px; height: 100%; background: var(--accent); animation: blink 0.8s step-end infinite; } @keyframes typewriter { 0%, 20% { width: 0; } 40% { width: 28ch; } 80% { width: 28ch; } 100% { width: 0; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }