/* ============================================================ 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 { /* surfaces */ --bg: #0d0b14; /* page background, near-black violet */ --surface: #181226; /* nav, cards */ --surface-2: #221a36; /* raised / hover */ --border: #2c2342; /* text */ --text: #f2eef9; --muted: #ada3c4; /* accents */ --accent: #ff3ea5; /* hot pink — primary / interactive */ --accent-hover: #ff66ba; --accent-2: #b15cff; /* purple — secondary */ --on-accent: #15101f; /* dark text sitting on a pink fill */ --grad: linear-gradient(120deg, #ff3ea5, #b15cff); /* type + layout */ --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 (header.nav-bar > nav.nav-content) Logo left; all links grouped tight on the right. ============================================================ */ .nav-bar { background-color: var(--surface); border-bottom: 1px solid var(--border); padding: 10px var(--space); } .nav-content { display: flex; align-items: center; gap: var(--space); } .nav-content .nav-logo { height: 60px; width: auto; } /* only the first link gets the auto margin, so the group moves as one */ .nav-content a:nth-child(2) { margin-left: auto; } .nav-content a { color: var(--text); text-decoration: none; font-weight: 700; } .nav-content a:hover, .nav-content a:focus { color: var(--accent); } /* ============================================================ HERO — text left, avatar right ============================================================ */ .hero { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; text-align: left; padding: 64px var(--space); background: radial-gradient(120% 140% at 80% 20%, rgba(177, 92, 255, 0.18), transparent 60%), var(--surface); } /* the column grows to fit the button row; only the prose is capped */ .hero h1, .hero .name, .hero .tagline { max-width: 480px; } /* page title becomes a quiet eyebrow above the name */ .hero h1 { margin: 0 0 12px; font-size: 14px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .hero .name { margin: 0 0 16px; font-size: 52px; line-height: 1.05; font-weight: 700; color: var(--accent); /* fallback if background-clip unsupported */ } @supports (-webkit-background-clip: text) or (background-clip: text) { .hero .name { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } } .hero .tagline { margin: 0 0 24px; font-size: 18px; color: var(--muted); } .hero .profile-picture { height: 220px; width: 220px; flex-shrink: 0; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px var(--accent), 0 0 40px rgba(177, 92, 255, 0.45); } /* ============================================================ 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: 8px 18px; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius-pill); transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .btn:hover, .btn:focus { color: var(--on-accent); background: var(--grad); border-color: transparent; } /* ============================================================ 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 — frutiger-aero testbed */ .timeline { max-width: 640px; margin: 40px auto; padding: 0 20px; } .timeline form { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(203,240,255,0.55)); border: 1px solid rgba(255,255,255,0.7); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(30,110,160,0.18), inset 0 1px 0 rgba(255,255,255,0.9); } .timeline input, .timeline textarea { border: 1px solid #a5d8e8; border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,0.75); font-family: inherit; } .timeline button { align-self: flex-start; padding: 8px 20px; border: none; border-radius: 20px; color: white; font-weight: 500; cursor: pointer; background: linear-gradient(180deg, #4fc3e8, #1e88b5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 6px rgba(30,110,160,0.3); } #posts { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .timeline-post { padding: 16px 20px; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(224,247,255,0.6)); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 4px 16px rgba(30,110,160,0.15), inset 0 1px 0 rgba(255,255,255,0.9); } .timeline-post h2 { margin: 0 0 4px; color: #14506b; } .timeline-post time { font-size: 0.8rem; color: #5a8ba3; } .timeline-post img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); box-shadow: 0 1px 4px rgba(30,110,160,0.3); }