/* ========================================================================== ateichgr.github.io — site stylesheet Dark by default; light is opt-in via [data-theme="light"] on . ========================================================================== */ :root { --bg: #101113; --surface: #1e2024; --text: #ffffff; --muted: #c7cad0; --rule: #2e3035; --accent: #7fb3ea; --accent-hover: #a6cbf3; --accent-wash: rgba(127, 179, 234, 0.14); --footer-bg: #0b0c0e; --portrait-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --maxw: 1060px; --sidebar-w: 252px; --gutter: 56px; color-scheme: dark; } :root[data-theme="light"] { --bg: #ffffff; --surface: #f7f7f8; --text: #111111; --muted: #4a4d52; --rule: #e6e7e9; --accent: #1b4f8a; --accent-hover: #133a68; --accent-wash: rgba(27, 79, 138, 0.08); --footer-bg: #f7f7f8; --portrait-shadow: 0 3px 14px rgba(0, 0, 0, 0.10); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16.5px; line-height: 1.62; font-weight: 430; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* Focus rings for keyboard users only, tinted to the accent so we never get a stray browser-blue box sitting on top of the palette. */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--text); padding: 10px 16px; border: 1px solid var(--rule); border-radius: 0 0 8px 0; z-index: 10; } .skip-link:focus { left: 0; } .page { max-width: var(--maxw); margin: 0 auto; padding: 44px 32px 0; display: flex; gap: var(--gutter); align-items: flex-start; } /* ========================================================================== SIDEBAR — name, portrait, contact, section nav, theme toggle ========================================================================== */ .sidebar { flex: 0 0 var(--sidebar-w); position: sticky; top: 36px; text-align: center; } h1.name { font-family: var(--serif); font-weight: 600; font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 16px; } h1.name a { text-decoration: none; color: inherit; } .portrait img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 12%; display: block; margin: 0 auto; border-radius: 10px; box-shadow: var(--portrait-shadow); } .contact { margin-top: 16px; } .contact-role, .contact-line { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--muted); } .contact-line { margin-top: 6px; } .contact-mail { color: var(--muted); text-decoration: none; word-break: break-word; transition: color 0.2s ease; } .contact-mail:hover { color: var(--accent); } .socials { display: flex; gap: 10px; margin-top: 12px; justify-content: center; } .socials a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule); color: var(--muted); transition: border-color 0.2s ease, color 0.2s ease; } .socials a:hover { border-color: var(--accent); color: var(--accent); } .socials svg { width: 16px; height: 16px; } .theme-toggle { display: block; width: 100%; margin-top: 22px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--rule); background: none; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); text-align: left; cursor: pointer; transition: color 0.2s ease; } .theme-toggle:hover { color: var(--accent); } .theme-toggle .tg-icon { margin-right: 7px; } /* ========================================================================== CONTENT ========================================================================== */ main.content { flex: 1; min-width: 0; max-width: 690px; } .about p { margin: 0 0 12px; max-width: 62ch; } .about .about-secondary { color: var(--muted); } .about a { color: var(--accent); text-decoration: none; } .about a:hover { color: var(--accent-hover); text-decoration: underline; } .section-head { margin: 30px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .section-head h2 { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); margin: 0; } /* ========================================================================== ENTRIES (papers, publications, courses) ========================================================================== */ .paper { position: relative; padding: 7px 14px; margin: 0 -14px; border-radius: 8px; transition: background-color 0.2s ease; } @media (hover: hover) { .paper:hover { background-color: var(--surface); } } .paper-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--accent); margin: 0 0 3px; } .paper-title a { text-decoration: none; color: inherit; } .paper-title a:hover { text-decoration: underline; } .paper-detail { font-size: 1rem; color: var(--muted); margin: 0; } .paper-detail .sep { color: var(--muted); margin: 0 0.15em; opacity: 0.7; } /* Distinctions sit in the brighter body colour so they lift off the muted detail line without reading as a link. */ .paper-detail .award { color: var(--text); } /* Co-author links stay in the muted voice of the detail line — they are people, not artefacts. Action links below get the accent treatment instead, so the row reads as "who" then "what you can open". */ .paper-detail .coauthors a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color 0.2s ease, border-color 0.2s ease; } .paper-detail .coauthors a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Action links and the abstract toggle share one box so Paper / Slides / Abstract all sit at the same height. The 6px side padding is cancelled by a -6px margin, so the hover box adds no horizontal footprint and the separating dots stay equidistant from every item, padded or not. */ .paper-detail .action, .paper-detail .abstract-toggle { display: inline-block; vertical-align: baseline; color: var(--accent); font: inherit; line-height: 1.4; background: none; border: 0; padding: 1px 6px; margin: 0 -6px; border-radius: 6px; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; } @media (hover: hover) { .paper-detail .action:hover, .paper-detail .abstract-toggle:hover { background-color: var(--accent-wash); } } .paper-detail .abstract-toggle[aria-expanded="true"] { background-color: var(--accent-wash); } .paper-detail .abstract-toggle .icon { display: inline-block; margin-left: 3px; line-height: 1; font-weight: 400; transition: transform 0.25s ease; } .paper-detail .abstract-toggle[aria-expanded="true"] .icon { transform: rotate(45deg); } /* ---- abstract fold-out ---- */ .abstract { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease; } .abstract.open { max-height: 1400px; opacity: 1; margin-top: 10px; } .abstract-inner { background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--accent); border-radius: 8px; padding: 14px 18px; font-size: 1rem; line-height: 1.6; color: var(--text); } .abstract-inner p { margin: 0 0 10px; } .abstract-inner p:last-child { margin-bottom: 0; } /* ========================================================================== FOOTER ========================================================================== */ footer { margin-top: 60px; border-top: 1px solid var(--rule); background: var(--footer-bg); } .foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 30px 32px; display: flex; align-items: flex-start; gap: var(--gutter); flex-wrap: wrap; } .foot-id { flex: 0 0 var(--sidebar-w); } .foot-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; } .foot-mail { display: block; font-size: 1rem; color: var(--muted); text-decoration: none; margin-top: 4px; transition: color 0.2s ease; } .foot-mail:hover { color: var(--accent); } .foot-address { flex: 1; min-width: 240px; font-style: normal; font-size: 1rem; color: var(--muted); line-height: 1.6; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 820px) { .page { flex-direction: column; gap: 28px; padding-top: 32px; } .sidebar { position: static; width: 100%; } h1.name { margin-bottom: 12px; } .portrait img { max-width: 200px; margin: 0 auto; } .theme-toggle { margin-top: 18px; } main.content { max-width: none; } .paper { padding: 7px 0; margin: 0; } .paper:hover { background: none; } .foot-inner { gap: 20px; } .foot-id { flex-basis: 100%; } } @media (max-width: 520px) { .page { padding-left: 22px; padding-right: 22px; } .foot-inner { padding-left: 22px; padding-right: 22px; } body { font-size: 16px; } h1.name { font-size: 1.5rem; } .section-head { margin: 24px 0 4px; } .section-head h2 { font-size: 1rem; } .paper-title { font-size: 1.04rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .abstract { transition: none; } }