/* ============================================================================ Stefan Radermacher Projects — landing page Light + dark mode (system preference, with manual override via toggle). Framework-free, no build step — same philosophy as the projects. ============================================================================ */ /* ----- Self-hosted fonts --------------------------------------------------- Orbitron (variable, weights 400-900), Inter Tight and JetBrains Mono, all SIL Open Font License 1.1 — see assets/fonts/OFL-*.txt. No Google Fonts connection, consistent with "ohne Tracking". ----------------------------------------------------------------------- */ @font-face { font-family: "Orbitron"; src: url("../fonts/orbitron-variable.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----- Default = follow system preference --------------------------------- */ :root { /* Dark palette (default fallback + dark mode) */ --bg: #0c0d10; --bg-card: #131419; --fg: #e8eaef; --fg-dim: #9097a3; --fg-muted: #5a606c; --silver-hi: #d6d6d6; --silver-lo: #8a8a8a; --border: #23262e; --border-hi: #353a45; --grid-line: rgba(255,255,255,0.018); --vignette: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(120,140,180,0.10), transparent 60%); --font-display: "Orbitron", "Rajdhani", "Eurostile", system-ui, sans-serif; --font-body: "Inter Tight", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; } @media (prefers-color-scheme: light) { :root { --bg: #f4f4f6; --bg-card: #ffffff; --fg: #1a1c20; --fg-dim: #4a5060; --fg-muted: #8a909c; --silver-hi: #2a2c32; --silver-lo: #6a6c74; --border: #d8dae0; --border-hi: #babdc7; --grid-line: rgba(0,0,0,0.025); --vignette: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(150,170,200,0.18), transparent 60%); } } /* Manual override: data-theme on wins over system preference */ :root[data-theme="dark"] { --bg: #0c0d10; --bg-card: #131419; --fg: #e8eaef; --fg-dim: #9097a3; --fg-muted: #5a606c; --silver-hi: #d6d6d6; --silver-lo: #8a8a8a; --border: #23262e; --border-hi: #353a45; --grid-line: rgba(255,255,255,0.018); --vignette: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(120,140,180,0.10), transparent 60%); } :root[data-theme="light"] { --bg: #f4f4f6; --bg-card: #ffffff; --fg: #1a1c20; --fg-dim: #4a5060; --fg-muted: #8a909c; --silver-hi: #2a2c32; --silver-lo: #6a6c74; --border: #d8dae0; --border-hi: #babdc7; --grid-line: rgba(0,0,0,0.025); --vignette: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(150,170,200,0.18), transparent 60%); } /* ----- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; overflow-x: hidden; /* Sticky footer: body is a full-height column, .wrapper grows to fill it, and .footer's margin-top: auto pushes it to the bottom edge on short pages while still flowing normally on tall ones. */ display: flex; flex-direction: column; } body::before { content: ""; position: fixed; inset: 0; background: var(--vignette), var(--bg); z-index: -2; } body::after { content: ""; position: fixed; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; z-index: -1; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 80%); } .grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: light) { .grain { opacity: 0.15; } } :root[data-theme="dark"] .grain { opacity: 0.35; } :root[data-theme="light"] .grain { opacity: 0.15; } .wrapper { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 24px; flex: 1; width: 100%; display: flex; flex-direction: column; } /* ----- Top controls ------------------------------------------------------- */ .controls { display: flex; justify-content: flex-end; gap: 8px; padding: 18px 0 0; } .ctrl-btn { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; min-width: 38px; height: 36px; cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s, border-color 0.2s, background 0.2s; } .ctrl-btn:hover { color: var(--fg); border-color: var(--border-hi); background: var(--bg-card); } .card:focus-visible, .ctrl-btn:focus-visible, .footer-links a:focus-visible, .about a:focus-visible, .legal-back a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .ctrl-btn svg { width: 16px; height: 16px; } /* Theme icon visibility */ .icon-sun { display: none; } .icon-moon { display: block; } @media (prefers-color-scheme: light) { .icon-sun { display: block; } .icon-moon { display: none; } } :root[data-theme="dark"] .icon-sun { display: none; } :root[data-theme="dark"] .icon-moon { display: block; } :root[data-theme="light"] .icon-sun { display: block; } :root[data-theme="light"] .icon-moon { display: none; } /* ----- Hero --------------------------------------------------------------- */ .hero { padding: 8vh 0 6vh; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-logo { position: relative; display: inline-block; margin-bottom: 6px; animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .wordmark { width: min(560px, 86vw); height: auto; display: block; border-radius: 8px; } .wordmark-dark { box-shadow: 0 0 60px rgba(150,170,210,0.10), 0 8px 40px rgba(0,0,0,0.5); } .wordmark-light { box-shadow: 0 4px 20px rgba(0,0,0,0.08); } /* Show the right wordmark per theme */ .wordmark-light { display: none; } .wordmark-dark { display: block; } @media (prefers-color-scheme: light) { .wordmark-light { display: block; } .wordmark-dark { display: none; } } :root[data-theme="dark"] .wordmark-light { display: none; } :root[data-theme="dark"] .wordmark-dark { display: block; } :root[data-theme="light"] .wordmark-light { display: block; } :root[data-theme="light"] .wordmark-dark { display: none; } .hero-tag { font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.6rem); letter-spacing: 0.55em; text-transform: uppercase; margin: 18px 0 0; padding-left: 0.55em; background: linear-gradient(180deg, var(--silver-hi), var(--silver-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; } .hero-claim { margin: 28px 0 0; font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.7; color: var(--fg); animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; } .hero-claim-dim { color: var(--fg-dim); font-size: 0.92em; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ----- Projects ----------------------------------------------------------- */ .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 0 0 7vh; } .card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), border-color 0.25s, box-shadow 0.25s; animation: rise 0.7s cubic-bezier(0.2,0.8,0.2,1) both; /* Text on the card uses --card-text: the full --card-accent on dark backgrounds, but the darker --card-accent-dim on light ones, where --card-accent alone falls short of readable contrast. */ --card-text: var(--card-accent); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .card { --card-text: var(--card-accent-dim); } } :root[data-theme="light"] .card { --card-text: var(--card-accent-dim); } .card:nth-child(1) { animation-delay: 0.30s; } .card:nth-child(2) { animation-delay: 0.38s; } .card:nth-child(3) { animation-delay: 0.46s; } /* :not(.card-wip) — a WIP card isn't a link and shouldn't look hoverable; the moment it ships as , dropping .card-wip brings all of this back. */ .card:not(.card-wip):hover, .card:not(.card-wip):focus-visible { transform: translateY(-4px); border-color: var(--card-accent); box-shadow: 0 12px 40px rgba(0,0,0,0.5); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .card:not(.card-wip):hover, :root:not([data-theme]) .card:not(.card-wip):focus-visible { box-shadow: 0 12px 32px rgba(0,0,0,0.12); } } :root[data-theme="light"] .card:not(.card-wip):hover, :root[data-theme="light"] .card:not(.card-wip):focus-visible { box-shadow: 0 12px 32px rgba(0,0,0,0.12); } .card-glow { position: absolute; top: -40%; right: -30%; width: 70%; height: 80%; background: radial-gradient(circle, var(--card-accent), transparent 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .card:not(.card-wip):hover .card-glow, .card:not(.card-wip):focus-visible .card-glow { opacity: 0.14; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .card:not(.card-wip):hover .card-glow, :root:not([data-theme]) .card:not(.card-wip):focus-visible .card-glow { opacity: 0.08; } } :root[data-theme="light"] .card:not(.card-wip):hover .card-glow, :root[data-theme="light"] .card:not(.card-wip):focus-visible .card-glow { opacity: 0.08; } .card-head { display: flex; align-items: center; justify-content: space-between; } .card-logo { width: 44px; height: 44px; display: block; } .card-status { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--card-text); display: flex; align-items: center; gap: 6px; } .card-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--card-accent); box-shadow: 0 0 8px var(--card-accent); } .card-status.status-wip { color: var(--fg-dim); } .card-status.status-wip::before { background: var(--fg-muted); box-shadow: none; } .card-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 6px 0 0; letter-spacing: 0.01em; } .card-desc { margin: 0; color: var(--fg-dim); font-size: 0.95rem; line-height: 1.55; flex: 1; } .card-link { font-family: var(--font-mono); font-size: 0.82rem; color: var(--card-text); margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; } .card .arrow { transition: transform 0.25s; } .card:hover .arrow, .card:focus-visible .arrow { transform: translateX(4px); } .card-wip { opacity: 0.85; transition: opacity 0.25s, border-color 0.25s; } .card-wip:hover { opacity: 1; /* Neutral border brighten only — no lift, no accent glow, so it still doesn't read as "clickable" the way the live cards' hover does. */ border-color: var(--border-hi); } .card-unitmatrix { --card-accent: #37a4ff; --card-accent-dim: #1a5a8f; } .card-formatomat { --card-accent: #d9924a; --card-accent-dim: #8a5a28; } .card-zeitwelt { --card-accent: #4fc8b8; --card-accent-dim: #2a7066; } /* ----- About -------------------------------------------------------------- */ .about { max-width: 680px; margin: 0 auto 7vh; text-align: center; } .about-head { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 18px; } .about p { margin: 0 0 16px; color: var(--fg-dim); line-height: 1.75; } .about a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border-hi); transition: border-color 0.2s, color 0.2s; } .about a:hover { border-color: var(--fg); } /* ----- Footer ------------------------------------------------------------- */ .footer { margin-top: auto; border-top: 1px solid var(--border); padding: 32px 0 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } /* The home page already has substantial content of its own (hero, cards, about) — on tall viewports, an unbounded margin-top: auto here stretches the About-to-footer gap far past the page's normal section rhythm. The legal pages are short and still want the full push-to-bottom effect, so this only resets it where a .about section marks the home page. */ .wrapper:has(.about) .footer { margin-top: 0; } .footer-mark { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 100%; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--fg-dim); } .footer-mark span { min-width: 0; } .footer-monogram { width: 26px; height: 26px; object-fit: contain; opacity: 0.75; } /* Show the right monogram per theme */ .footer-monogram-light { display: none; } .footer-monogram-dark { display: block; } @media (prefers-color-scheme: light) { .footer-monogram-light { display: block; } .footer-monogram-dark { display: none; } } :root[data-theme="dark"] .footer-monogram-light { display: none; } :root[data-theme="dark"] .footer-monogram-dark { display: block; } :root[data-theme="light"] .footer-monogram-light { display: block; } :root[data-theme="light"] .footer-monogram-dark { display: none; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; font-size: 0.85rem; color: var(--fg-muted); } .footer-links a { color: var(--fg-dim); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--fg); } .footer-links a:not(:first-child)::before { content: "· "; color: var(--fg-muted); } .footer-copy { max-width: 100%; font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-dim); margin: 0; } /* ----- Legal pages -------------------------------------------------------- */ .legal-back { margin: 24px 0 16px; } .legal-back a { color: var(--fg-dim); font-family: var(--font-mono); font-size: 0.85rem; text-decoration: none; transition: color 0.2s; } .legal-back a:hover { color: var(--fg); } .legal { max-width: 720px; margin: 0 auto 6vh; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 32px 36px; } .legal h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--fg); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .legal h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--fg); margin: 22px 0 8px; letter-spacing: 0.02em; } .legal p { color: var(--fg-dim); margin: 0 0 12px; line-height: 1.7; } .legal a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border-hi); } .legal a:hover { border-color: var(--fg); } /* ----- Responsive --------------------------------------------------------- */ @media (max-width: 600px) { .hero { padding: 6vh 0 5vh; } .hero-tag { letter-spacing: 0.4em; } .projects { grid-template-columns: 1fr; } .legal { padding: 24px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }