/* ============================================ Tobias Kreuz — Personal Website Typography: Inter throughout. Fonts are loaded per page in , not via @import. ============================================ */ :root { /* ---- Colour ---- */ --text-primary: #16181d; --text-secondary: #565b66; --text-tertiary: #6b7280; --border: rgba(20, 24, 32, 0.11); --border-strong: rgba(20, 24, 32, 0.28); --bg: #ffffff; --bg-soft: #f1f3f6; --accent: #2f5d7c; --accent-soft: rgba(47, 93, 124, 0.18); --accent-contrast: #ffffff; --status-bg: var(--bg-soft); --status-fg: var(--text-secondary); --status-published-bg: #e4efe8; --status-published-fg: #2f5d45; /* ---- Type scale ---- */ --fs-micro: 0.6875rem; /* 11px — micro labels */ --fs-tiny: 0.75rem; /* 12px — footer, status */ --fs-xs: 0.8125rem; /* 13px — nav, meta */ --fs-sm: 0.875rem; /* 14px — secondary prose */ --fs-base: 0.9375rem; /* 15px — body copy */ --fs-md: 1rem; /* 16px — lead paragraphs */ --fs-lg: 1.0625rem; /* 17px — titles, wordmark */ --fs-xl: 1.375rem; /* 22px — h2 */ --fs-2xl: 2rem; /* 32px — h1 */ /* ---- Families ---- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---- Rhythm ---- */ --measure: 820px; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; } @media (prefers-color-scheme: dark) { :root { --text-primary: #e8eaed; --text-secondary: #a8adb8; --text-tertiary: #8c93a0; --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.3); --bg: #14161a; --bg-soft: #1e2127; --accent: #82b4d6; --accent-soft: rgba(130, 180, 214, 0.24); --accent-contrast: #14161a; --status-published-bg: #1e2f26; --status-published-fg: #9ccdaf; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; } img { max-width: 100%; display: block; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-md); line-height: 1.7; color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Available to screen readers, removed from the visual layout. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .container { max-width: var(--measure); margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-xl); } /* ---------- Navigation ---------- */ nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: var(--space-sm); } .nav-name { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; text-decoration: none; color: var(--text-primary); } .nav-links { display: flex; gap: 1.75rem; list-style: none; } .nav-links a { font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.15s ease; padding-bottom: 2px; border-bottom: 1px solid transparent; } .nav-links a:hover { color: var(--text-primary); } .nav-links a.active { color: var(--text-primary); border-bottom-color: var(--accent); } /* ---------- Typography ---------- */ h1 { font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.15; margin-bottom: var(--space-xs); letter-spacing: -0.015em; text-wrap: balance; } h2 { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; margin-bottom: var(--space-sm); margin-top: var(--space-lg); letter-spacing: -0.01em; text-wrap: balance; } /* Accent rule above each section heading */ h2::before { content: ""; display: block; width: 28px; height: 2px; background: var(--accent); margin-bottom: 0.75rem; } h3 { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-sm); margin-top: 2rem; } p { margin-bottom: 1.1rem; font-size: var(--fs-base); text-wrap: pretty; } a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 0.15s ease; } a:hover { text-decoration-color: var(--accent); } /* ---------- Home page hero ---------- */ /* Photo sits in the left column, directly under the nav wordmark; the intro prose runs in the wider right column. */ .hero { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: start; margin-bottom: 2rem; } /* Matches the paragraphs below it; the negative top margin pulls the first line up so it aligns with the top edge of the photo. */ .about-text { margin-top: -0.35rem; } .interests { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 2rem; padding-left: var(--space-sm); border-left: 2px solid var(--accent-soft); } .interests strong { color: var(--text-primary); font-weight: 600; } .links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); } .link-pill { font-family: var(--font-sans); font-size: var(--fs-tiny); font-weight: 500; letter-spacing: 0.03em; padding: 7px 14px; border: none; border-radius: 2px; color: var(--text-secondary); background: var(--bg-soft); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; } .link-pill:hover { color: var(--accent-contrast); background: var(--accent); } /* ---------- Photo column ---------- */ .photo-col { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .photo-frame { width: 100%; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: var(--bg-soft); } .photo-frame img { width: 100%; height: 100%; object-fit: cover; } .contact-mini { font-size: var(--fs-tiny); color: var(--text-secondary); text-align: center; line-height: 1.7; } .contact-mini a { color: var(--text-secondary); text-decoration: none; } .contact-mini a:hover { color: var(--text-primary); } /* ---------- Research / Teaching lists ---------- */ .paper { margin-bottom: 1.75rem; padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); } .paper:last-child { border-bottom: none; } /* Resets the uppercase micro-label styling that h3 carries by default. */ .paper-title { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; text-transform: none; margin-top: 0; margin-bottom: 0.4rem; color: var(--text-primary); } .paper-meta { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--space-xs); line-height: 1.6; } /* Co-author links keep the meta line's colour so names don't outweigh the title. */ .paper-meta a { color: inherit; text-decoration-color: var(--border); } .paper-meta a:hover { color: var(--text-primary); text-decoration-color: var(--accent); } /* Short project description; margin-bottom is reset so the .paper block's own padding controls the gap before the divider rule. */ .paper-abstract { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: 0; } .paper-status { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; background: var(--status-bg); border-radius: 2px; color: var(--status-fg); margin-bottom: var(--space-xs); } .paper-status.published { background: var(--status-published-bg); color: var(--status-published-fg); } .section-intro { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.7; } ul.simple-list { list-style: none; padding: 0; } ul.simple-list li { font-size: var(--fs-sm); padding: 0.7rem 0; border-bottom: 1px solid var(--border); color: var(--text-primary); line-height: 1.6; } ul.simple-list li:last-child { border-bottom: none; } ul.simple-list .item-meta { display: block; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; } /* ---------- Footer ---------- */ footer { margin-top: var(--space-xl); padding-top: 2rem; border-top: 1px solid var(--border); font-size: var(--fs-tiny); color: var(--text-tertiary); text-align: center; letter-spacing: 0.02em; } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .container { padding: var(--space-md) 1.25rem 3rem; } .hero { grid-template-columns: 1fr; gap: 2rem; } .photo-col { max-width: 200px; margin: 0 auto; } .about-text { margin-top: 0; } h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } .nav-name { font-size: 1.25rem; } nav { margin-bottom: 2rem; } .nav-links { gap: 1.25rem; } }