/* ========================================================================== thomas-asendorf.de — modern static site styles Single stylesheet, no framework. Edit the variables below to re-theme. ========================================================================== */ /* -------------------------------------------------------------------------- Two switchable color themes. The active one is selected by the data-theme attribute on (set by a small script + the header toggle). "warm" is the default (also the no-JS fallback baked into :root); "vivid" overrides it. To tweak a theme, edit its variable block below. -------------------------------------------------------------------------- */ :root { /* layout tokens (theme-independent) */ --radius: 14px; --maxw: 1100px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ----- DARK theme (default) ----- */ --bg: #14161b; /* page background */ --bg-soft: #1b1e25; /* alternating sections */ --surface: #222732; /* cards, tiles, dropdown */ --surface-hover: #2b313d; --ink: #e7e9ee; /* primary text */ --muted: #99a1b0; /* secondary text */ --line: #2e333f; /* borders */ --accent: #38bdf8; /* links, active nav, accent buttons */ --accent-strong: #7dd3fc; --on-accent: #06121c; /* text on accent-colored buttons */ --shadow: 0 10px 26px rgba(0, 0, 0, 0.5); --hero-grad: linear-gradient(135deg, #1b2230 0%, #243044 55%, #2e3b52 100%); --hero-overlay: linear-gradient(180deg, rgba(8, 12, 20, 0.45) 0%, rgba(6, 9, 16, 0.65) 100%); --footer-bg: #0f1218; --footer-ink: #9aa1ad; --footer-link: #dbe0e8; } /* ----- VIVID theme (bright & saturated) ----- */ [data-theme="vivid"] { --bg: #f5f7ff; --bg-soft: #e9eeff; --surface: #ffffff; --surface-hover: #eef2ff; --ink: #141a2e; --muted: #5b6478; --line: #d9e0f5; --accent: #4f46e5; --accent-strong: #3a31c4; --on-accent: #ffffff; --shadow: 0 10px 26px rgba(40, 50, 140, 0.15); --hero-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%); --hero-overlay: linear-gradient(180deg, rgba(22, 18, 60, 0.38) 0%, rgba(14, 12, 45, 0.58) 100%); --footer-bg: #0f1530; --footer-ink: #aab4d6; --footer-link: #d6def6; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .section { padding: 72px 0; } .section--soft { background: var(--bg-soft); } .section-head { text-align: center; margin-bottom: 40px; } .section-head h2 { font-size: 2rem; margin: 0 0 8px; } .section-head p { color: var(--muted); margin: 0; font-size: 1.1rem; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--footer-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-weight: 800; font-size: 1.15rem; color: var(--footer-link); letter-spacing: -0.02em; } .brand:hover { text-decoration: none; } .nav-links { display: flex; gap: 4px; align-items: center; } .nav-links > a, .dropdown-toggle { color: var(--footer-ink); padding: 8px 14px; border-radius: 8px; font-weight: 500; font-size: 0.98rem; } .nav-links > a:hover, .dropdown-toggle:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; color: var(--footer-link); } .nav-links a.active { color: var(--footer-link); } /* ---------- Projects dropdown ---------- */ .dropdown { position: relative; } .dropdown-toggle { display: inline-block; cursor: pointer; } .dropdown-toggle .caret { font-size: 0.7em; opacity: 0.7; } /* Invisible bridge across the gap so moving the cursor from the toggle to the menu doesn't drop :hover and close the menu. */ .dropdown::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 12px; display: none; } .dropdown:hover::after { display: block; } .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: none; flex-direction: column; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: flex; } .dropdown-menu a { color: var(--ink); padding: 9px 12px; border-radius: 7px; font-size: 0.95rem; white-space: nowrap; } .dropdown-menu a:hover { background: var(--bg-soft); text-decoration: none; color: var(--accent); } /* ---------- Theme toggle (subtle, pinned far right) ---------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; padding: 6px 2px 6px 14px; background: none; border: none; border-left: 1px solid rgba(255, 255, 255, 0.14); color: var(--footer-ink); opacity: 0.7; font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: opacity 0.15s ease, color 0.15s ease; } .theme-toggle:hover { opacity: 1; color: var(--footer-link); } .theme-dot { width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); } /* ---------- Hero (image banner / slideshow) ---------- */ .hero { position: relative; overflow: hidden; background: var(--hero-grad); min-height: clamp(300px, 42vh, 460px); } /* Background slideshow */ .hero-slides { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease-in-out; } .hero-slide.active { opacity: 1; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; cursor: pointer; border: 2px solid transparent; transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-strong); } .btn-outline { border-color: rgba(255, 255, 255, 0.7); color: #fff; } .btn-outline:hover { background: rgba(255, 255, 255, 0.16); } .btn-accent { background: var(--accent); color: var(--on-accent); } .btn-accent:hover { background: var(--accent-strong); } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-secondary:hover { background: var(--surface-hover); } .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; } /* ---------- Interests / cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } .card h3 { margin: 0 0 10px; font-size: 1.2rem; } .card p { margin: 0; color: var(--muted); } .card .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--bg-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 16px; } /* ---------- Gallery grid (albums & projects) ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .tile { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 0.12s ease, box-shadow 0.12s ease; } .tile:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.16); } .tile .thumb.thumb-ph { display: grid; place-items: center; color: var(--on-accent); font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); } .tile a { color: inherit; } .tile a:hover { text-decoration: none; } .tile .thumb { aspect-ratio: 4 / 3; overflow: hidden; } .tile .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .tile:hover .thumb img { transform: scale(1.05); } .tile .caption { padding: 16px 18px; } .tile .caption h3 { margin: 0 0 4px; font-size: 1.1rem; } .tile .caption .meta { color: var(--muted); font-size: 0.92rem; } /* ---------- Photo grid (inside an album) ---------- */ .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .photos a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; } .photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.3s ease; } .photos a:hover img { transform: scale(1.06); filter: brightness(1.04); } /* ---------- Page title band ---------- */ .page-title { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 48px 0; } .page-title h1 { margin: 0; font-size: 2.2rem; } .page-title .sub { color: var(--muted); margin-top: 6px; font-size: 1.1rem; } .crumb { color: var(--muted); font-size: 0.9rem; margin-bottom: 8px; } /* ---------- Project landing ---------- */ .prose { max-width: 720px; margin: 0 auto; font-size: 1.08rem; } .prose p { margin: 0 0 1.1em; } .project-launch { text-align: center; margin: 40px 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: 40px 0; margin-top: 0; } .site-footer a { color: var(--footer-link); } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-menu { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } /* ---------- Lightbox ---------- */ .lb { position: fixed; inset: 0; z-index: 100; background: rgba(8, 12, 20, 0.94); display: none; align-items: center; justify-content: center; } .lb.open { display: flex; } .lb img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); } .lb-btn { position: absolute; background: rgba(255,255,255,0.1); color: #fff; border: none; width: 52px; height: 52px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease; } .lb-btn:hover { background: rgba(255,255,255,0.22); } .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); } .lb-next { right: 20px; top: 50%; transform: translateY(-50%); } .lb-close { top: 20px; right: 20px; } .lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #cdd7e6; font-size: 0.9rem; } @media (max-width: 600px) { .nav-links a { padding: 8px 9px; font-size: 0.9rem; } .brand { font-size: 1rem; } .section { padding: 52px 0; } .lb-btn { width: 44px; height: 44px; } }