/* ============================================ Eduard Brüll — Custom Theme Built on Pico.css classless ============================================ */ /* ----- Google Fonts are loaded in HTML ----- */ /* ============================================= 1. Custom Properties & Pico Overrides ============================================= */ /* Force light color scheme to prevent Pico.css dark mode */ :root, [data-theme="light"], :root:not([data-theme="dark"]) { color-scheme: light; /* Palette - Blueish theme */ --bg: #ecf2f7; --bg-light: #f5f8fb; --accent: #4a7ba7; --accent-dark: #2c5578; --hover: #d97548; --text: #2d3e50; /* Font stacks */ --font-body: "Montserrat", system-ui, -apple-system, sans-serif; --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif; --font-heading: "Josefin Sans", system-ui, sans-serif; /* Pico overrides */ --pico-font-family: var(--font-body); --pico-font-size: 110%; --pico-line-height: 1.6; --pico-background-color: var(--bg); --pico-color: var(--text); --pico-text-selection-color: rgba(74, 123, 167, 0.3); /* Headings */ --pico-h1-color: var(--accent-dark); --pico-h2-color: var(--accent-dark); --pico-h3-color: var(--accent-dark); --pico-h4-color: var(--accent); /* Links */ --pico-primary: var(--accent); --pico-primary-hover: var(--hover); --pico-primary-focus: rgba(74, 123, 167, 0.25); /* Muted */ --pico-muted-color: #5a6d7a; --pico-muted-border-color: rgba(74, 123, 167, 0.2); /* Borders & rules */ --pico-border-color: rgba(74, 123, 167, 0.15); /* Code */ --pico-code-background-color: rgba(74, 123, 167, 0.08); --pico-code-color: var(--accent-dark); } /* ============================================= 2. Typography ============================================= */ /* Headings & nav */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 300; letter-spacing: 0.02em; } h1 { font-size: 2.4rem; line-height: 1.15; } h2 { font-size: 1.7rem; margin-top: 1.5rem; } h3 { font-size: 1.25rem; } /* Long-form / abstracts */ .serif, details p, blockquote { font-family: var(--font-serif); line-height: 1.75; } /* Small caps utility */ .smallcaps { font-variant: small-caps; letter-spacing: 0.05em; } /* ============================================= 3. Layout ============================================= */ body { background-color: var(--bg); /* Subtle paper texture via SVG noise */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-repeat: repeat; /* Sticky footer layout */ min-height: 100vh; display: flex; flex-direction: column; /* Ensure text color is applied */ color: var(--text); } /* Force paragraph text color (override Pico.css) */ p, li, td, th { color: var(--text); } main { max-width: 75ch; margin-inline: auto; padding-inline: 1.5rem; padding-block: 2rem 4rem; flex: 1; /* Push footer to bottom */ /* Ensure text is readable - override any inherited opacity or blend modes */ color: var(--text); opacity: 1; mix-blend-mode: normal; } main h2 { color: var(--accent-dark); } main p { color: var(--text); } section { margin-bottom: 3rem; } hr { border: none; border-top: 1px solid var(--pico-border-color); margin-block: 2rem; } /* ============================================= 4. Navigation ============================================= */ body > nav { max-width: 75ch; margin-inline: auto; padding: 1.5rem 1.5rem 0.75rem; font-family: var(--font-heading); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; position: relative; } /* Hide checkbox */ .nav-toggle { display: none; } /* Hamburger button - hidden on desktop */ body > nav .nav-toggle-label { display: none; cursor: pointer; padding: 0.5rem; } .nav-toggle-label span { display: block; width: 26px; height: 3px; background-color: var(--accent); margin: 5px 0; transition: transform 0.3s ease, opacity 0.3s ease; } body > nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding: 0; margin: 0; } body > nav a { color: var(--accent); text-decoration: none; position: relative; padding-bottom: 4px; transition: color 0.2s ease; } body > nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background-color: transparent; transition: background-color 0.2s ease; } body > nav a:hover { color: var(--hover); } body > nav a:hover::after { background-color: var(--hover); } body > nav a[aria-current="page"] { color: var(--accent-dark); } body > nav a[aria-current="page"]::after { background-color: var(--accent); } /* Mobile navigation */ @media (max-width: 700px) { body > nav .nav-toggle-label { display: block; } body > nav ul { display: none; flex-direction: column; gap: 0; padding-top: 1rem; } body > nav ul li { padding: 0.75rem 0; border-bottom: 1px solid var(--pico-border-color); } body > nav ul li:last-child { border-bottom: none; } /* Show menu when checkbox is checked */ .nav-toggle:checked ~ ul { display: flex; } /* Animate hamburger to X */ .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); } .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; } .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); } } @media (prefers-reduced-motion: reduce) { body > nav a, .nav-toggle-label span { transition: none; } } /* ============================================= 5. Hero Section (index only) ============================================= */ .hero { background-color: var(--bg); padding: 3rem 1.5rem 2rem; max-width: 75ch; margin-inline: auto; display: flex; align-items: center; gap: 2.5rem; } .hero-portrait { flex-shrink: 0; width: 280px; } .hero-portrait img { width: 100%; height: auto; mix-blend-mode: multiply; filter: contrast(1.05) saturate(0.9); /* Soft fade at the bottom */ -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 70%, transparent 100%); } .hero-text h1 { font-family: var(--font-heading); font-weight: 300; font-size: 2.8rem; color: var(--accent-dark); margin-bottom: 0.25rem; line-height: 1.1; } .hero-text .tagline { font-family: var(--font-body); font-size: 1rem; color: var(--accent); letter-spacing: 0.04em; margin-bottom: 0; } /* Responsive hero */ @media (max-width: 700px) { .hero { flex-direction: column; text-align: center; padding-top: 2rem; padding-bottom: 1rem; gap: 1.5rem; } .hero-portrait { width: 200px; } .hero-text h1 { font-size: 2.2rem; } .hero-text .contact { margin-bottom: 0; } .contact-links { display: inline-block; text-align: left; } } /* Add spacing between hero and main on mobile */ @media (max-width: 700px) { main { padding-top: 1rem; } main h2:first-child { margin-top: 0.5rem; } } /* ============================================= 6. Publication / Article Styling ============================================= */ .publication { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--pico-border-color); } .publication:last-child { border-bottom: none; } .publication h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; margin-bottom: 0.25rem; line-height: 1.35; } .publication h3 a { text-decoration: none; color: var(--accent); } .publication h3 a:hover { color: var(--hover); } .publication .authors { font-size: 0.9rem; color: var(--pico-muted-color); margin-bottom: 0.15rem; } .publication .journal { font-family: var(--font-serif); font-style: italic; font-size: 0.9rem; color: var(--pico-muted-color); margin-bottom: 0.5rem; } .publication .links { font-size: 0.85rem; margin-top: 0.35rem; } .publication .links a { color: var(--accent); margin-right: 1rem; } /* ============================================= 7. Details / Summary (Toggleable Abstracts) ============================================= */ details { margin-top: 0.5rem; } summary { cursor: pointer; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--accent); list-style: none; user-select: none; padding: 0.25rem 0; } summary::-webkit-details-marker { display: none; } summary::before { content: "\25B6\FE0E"; display: inline-block; font-size: 0.65rem; margin-right: 0.5rem; transition: transform 0.15s ease; vertical-align: middle; } details[open] > summary::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { summary::before { transition: none; } } details[open] > p, details[open] > div { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.75; color: var(--text); padding: 0.75rem 0 0.75rem 1rem; border-left: 3px solid var(--accent); margin-top: 0.25rem; } /* ============================================= 8. Software Project Blocks ============================================= */ .project { margin-bottom: 2.5rem; } .project-logo { width: 80px; height: auto; float: left; margin-right: 1.25rem; margin-bottom: 0.5rem; } .project h3 { margin-bottom: 0.25rem; } .project h3 a { color: var(--accent); text-decoration: none; } .project h3 a:hover { color: var(--hover); } .project p { font-size: 0.95rem; } .project::after { content: ""; display: table; clear: both; } /* ============================================= 9. Teaching ============================================= */ .teaching-entry { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--pico-border-color); } .teaching-entry:last-child { border-bottom: none; } .teaching-entry h3 { font-size: 1.1rem; margin-bottom: 0.15rem; } .teaching-entry .meta { font-size: 0.9rem; color: var(--pico-muted-color); margin-bottom: 0.25rem; } .teaching-entry .meta .dates { color: var(--accent); font-weight: 600; } /* ============================================= 10. Footer ============================================= */ body > footer { max-width: 75ch; margin-inline: auto; padding: 2rem 1.5rem 3rem; font-size: 0.85rem; color: var(--pico-muted-color); text-align: center; } body > footer a { color: var(--accent); } body > footer a:hover { color: var(--hover); } /* ============================================= Global Link Hover ============================================= */ a { transition: color 0.2s ease; } a:hover { color: var(--hover); } /* ============================================= 11. Tool Grid (for index page software preview) ============================================= */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; } .tool { padding: 0; background-color: transparent; border-radius: 0; border: none; } .tool h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.1rem; } .tool h3 a { color: var(--accent); text-decoration: none; } .tool h3 a:hover { color: var(--hover); } .tool p { font-size: 0.9rem; color: var(--text); margin: 0; } /* ============================================= 12. Contact Links with Icons ============================================= */ .contact-links { list-style: none; padding: 0; margin: 0; } .contact-links li { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; } .contact-links svg { width: 18px; height: 18px; fill: var(--accent); flex-shrink: 0; } .contact-links a { color: var(--accent); text-decoration: none; } .contact-links a:hover { color: var(--hover); } .contact-links a:hover + svg, .contact-links li:hover svg { fill: var(--hover); } /* ============================================= 13. Utility ============================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================= 14. Download / PDF Link with Icon ============================================= */ .download-link { display: inline-flex; align-items: center; gap: 0.5rem; } .download-link svg { width: 18px; height: 18px; fill: var(--accent); flex-shrink: 0; transition: fill 0.2s ease; } .download-link:hover svg { fill: var(--hover); }