/* ========================================================================== thomasloupe.com — hand-built static site Theming: CSS custom properties; [data-theme] on overrides the prefers-color-scheme default. No frameworks, no external requests. ========================================================================== */ :root { --max-width: 1200px; --prose-width: 72ch; --radius: 14px; --radius-sm: 9px; --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, "JetBrains Mono", Menlo, monospace; --shadow-card: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -12px rgba(0, 0, 0, .18); --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .08), 0 16px 40px -12px rgba(13, 110, 194, .25); --ease-snap: cubic-bezier(.2, .7, .3, 1); } /* Light palette (default) */ /* Dark palette (site default, regardless of system preference) */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0f14; --bg-elevated: #121821; --bg-inset: #0e131a; --border: #202938; --border-strong: #2e3a4d; --text: #e6edf3; --text-muted: #93a1b3; --accent: #4da3ff; --accent-strong: #79bbff; --accent-soft: rgba(77, 163, 255, .12); --on-accent: #06243f; --accent-glow: rgba(38, 132, 255, .4); --hero-glow: radial-gradient(60% 50% at 50% 30%, rgba(38, 132, 255, .16), transparent 70%); --code-bg: #1a2230; --pre-bg: #0e141c; --pre-text: #d6e2ee; --scrim: rgba(11, 15, 20, .72); --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6); --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px -12px rgba(38, 132, 255, .35); } /* near-black brand colors are invisible on dark surfaces */ :root:not([data-theme="light"]) .social-github { --brand: #f0f6fc !important; } :root:not([data-theme="light"]) .social-twitter { --brand: #e7e9ea !important; } :root:not([data-theme="light"]) .social-pandora { --brand: #5b8def !important; } /* Light palette via explicit toggle only */ :root[data-theme="light"] { color-scheme: light; --bg: #f6f8fa; --bg-elevated: #ffffff; --bg-inset: #eef1f5; --border: #dde3ea; --border-strong: #c8d1db; --text: #18222e; --text-muted: #5a6878; --accent: #0b6dc2; --accent-strong: #095a9f; --accent-soft: rgba(11, 109, 194, .10); --on-accent: #ffffff; --accent-glow: rgba(13, 110, 194, .5); --hero-glow: radial-gradient(60% 50% at 50% 30%, rgba(11, 109, 194, .14), transparent 70%); --code-bg: #f0f3f7; --pre-bg: #101822; --pre-text: #dbe5ef; --scrim: rgba(255, 255, 255, .75); --shadow-card: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -12px rgba(0, 0, 0, .18); --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .08), 0 16px 40px -12px rgba(13, 110, 194, .25); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } html { background: var(--bg); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { flex: 1; width: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } .container { max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--scrim); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; } .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; } .brand:hover { text-decoration: none; color: var(--text); } .brand { flex: none; } .brand img { width: 28px; height: 28px; max-width: none; border-radius: 50%; } .site-nav { display: flex; gap: .15rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .site-nav::-webkit-scrollbar { display: none; } @media (max-width: 1280px) { /* edge fade signals that the nav scrolls horizontally */ .site-nav { -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 24px), transparent); } .brand span { display: none; } } .site-nav a { color: var(--text-muted); font-size: .85rem; font-weight: 500; padding: .3rem .48rem; border-radius: 999px; white-space: nowrap; } .site-nav a:hover { color: var(--text); background: var(--accent-soft); text-decoration: none; } /* hidden until the head script tags ; without JS the button would be visible but inert (system theme still applies) */ .theme-toggle { display: none; } html.js .theme-toggle { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elevated); color: var(--text-muted); cursor: pointer; transition: color .15s, border-color .15s, transform .15s var(--ease-snap); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: rotate(15deg); } .theme-toggle svg { width: 18px; height: 18px; } /* dark is the default: show sun (click -> light); light mode shows moon */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3rem); text-align: center; } .hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-glow); pointer-events: none; } .hero > .container { position: relative; } .hero .avatar { width: clamp(120px, 18vw, 168px); height: clamp(120px, 18vw, 168px); border-radius: 50%; border: 3px solid var(--border-strong); box-shadow: 0 0 0 6px var(--accent-soft), 0 12px 40px -12px var(--accent-glow); } .hero h1 { margin: 1.2rem 0 .2rem; font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .hero .tagline { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 600; color: var(--accent); letter-spacing: .01em; } .definition { margin: 1.4rem auto 0; max-width: 46ch; font-size: .95rem; color: var(--text-muted); border: 1px solid var(--border); background: var(--bg-elevated); border-radius: var(--radius); padding: .8rem 1.2rem; } .definition .term { font-weight: 700; color: var(--text); } .definition .phonetic { font-family: var(--font-mono); font-size: .85em; } .definition .pos { font-style: italic; } .hero .bio { max-width: var(--prose-width); margin: 1.6rem auto 0; text-align: left; color: var(--text); } .hero .bio p { margin: 0 0 1rem; } .hero .bio p:last-child { margin-bottom: 0; } /* Social row */ .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: 1.8rem; padding: 0; list-style: none; } .socials a { --brand: var(--accent); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); transition: color .15s, border-color .15s, transform .15s var(--ease-snap), box-shadow .15s; } .socials a:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 8px 20px -8px var(--brand); } .socials svg { width: 19px; height: 19px; fill: currentColor; } /* -------------------------------------------------------------------------- Portfolio sections -------------------------------------------------------------------------- */ .section { padding: clamp(2.2rem, 6vw, 3.6rem) 0 0; scroll-margin-top: 4.5rem; } .section:last-of-type { padding-bottom: clamp(2.2rem, 6vw, 3.6rem); } .section-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.3rem; } .section-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 750; letter-spacing: -.02em; } .section-head h2 a { color: inherit; } .section-head h2 a:hover { color: var(--accent); text-decoration: none; } .section-head .count { font-size: .9rem; font-weight: 600; color: var(--text-muted); background: var(--bg-inset); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .6rem; } .section-head::after { content: ""; flex: 1; height: 1px; background: var(--border); align-self: center; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1.1rem; } .card { position: relative; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .2s var(--ease-snap), box-shadow .2s, border-color .2s; } /* split rules: a grouped :has() selector would invalidate the whole list in browsers without :has() support */ .card[data-link]:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-card-hover); } .card:has(a:hover) { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-card-hover); } .card .thumb { aspect-ratio: 400 / 284; background: var(--bg-inset); overflow: hidden; } .card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease-snap); } .card:has(a:hover) .thumb img { transform: scale(1.045); } .card .card-body { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .95rem .9rem; } .card h3 { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; } .card h3 a { color: var(--text); } .card h3 a:hover { color: var(--accent); text-decoration: none; } /* stretch the link over the whole card */ .card h3 a::after { content: ""; position: absolute; inset: 0; } .card .meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--text-muted); } .card .meta svg { width: 12px; height: 12px; flex: none; } /* text-only cards (publications) */ .card.text-only .card-body { padding: 1.05rem 1.1rem; } .card.text-only { justify-content: center; } /* non-linked cards */ .card.static-card .meta { font-style: italic; } /* -------------------------------------------------------------------------- Article / prose pages -------------------------------------------------------------------------- */ .page-hero { padding: clamp(2.5rem, 6vw, 4rem) 0 0; } .page-hero .crumbs { font-size: .9rem; color: var(--text-muted); margin-bottom: 1rem; } .page-hero h1 { max-width: 24ch; margin: 0; font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } .page-hero .byline { margin-top: .8rem; color: var(--text-muted); font-size: .95rem; } .prose { max-width: var(--prose-width); padding: 1.5rem 0 4rem; } .prose h2 { margin: 2.4em 0 .6em; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; } .prose h3 { margin: 1.8em 0 .5em; font-size: 1.2rem; font-weight: 700; } .prose h4 { margin: 1.5em 0 .4em; font-size: 1.05rem; font-weight: 700; } .prose p, .prose ul, .prose ol { margin: 0 0 1.1em; } .prose li { margin-bottom: .35em; } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; } .prose blockquote { margin: 1.4em 0; padding: .2em 1.2em; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text); } .prose figure { margin: 1.8em 0; } .prose figure img { display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); } .prose figcaption { margin-top: .5em; font-size: .88rem; color: var(--text-muted); text-align: center; } .prose code { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); border: 1px solid var(--border); border-radius: 5px; padding: .1em .35em; } .prose pre { background: var(--pre-bg); color: var(--pre-text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; overflow-x: auto; line-height: 1.55; margin: 1.4em 0; font-variant-ligatures: none; } .prose pre code { background: none; border: 0; padding: 0; font-size: .86rem; color: inherit; } .prose .embed { position: relative; padding-top: 56.25%; /* 16:9 fallback for browsers without aspect-ratio */ margin: 1.8em 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); } @supports (aspect-ratio: 1) { .prose .embed { padding-top: 0; aspect-ratio: 16 / 9; } } .prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; } .prose th, .prose td { border: 1px solid var(--border); padding: .5em .8em; text-align: left; } .prose th { background: var(--bg-inset); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-inset); margin-top: 2rem; } .site-footer .container { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-block: 1.4rem; font-size: .92rem; color: var(--text-muted); } .site-footer nav { display: flex; gap: 1.2rem; margin-left: auto; } .site-footer a { color: var(--text-muted); } .site-footer a:hover { color: var(--accent); } /* back-to-top */ .to-top { display: inline-flex; align-items: center; gap: .3rem; } @media (max-width: 640px) { .brand span { display: none; } .site-footer .container { flex-direction: column; align-items: flex-start; } .site-footer nav { margin-left: 0; flex-wrap: wrap; } } /* -------------------------------------------------------------------------- Print -------------------------------------------------------------------------- */ @media print { :root, :root[data-theme="dark"], :root[data-theme="light"] { color-scheme: light; --bg: #fff; --bg-elevated: #fff; --bg-inset: #fff; --border: #bbb; --border-strong: #999; --text: #000; --text-muted: #444; --accent: #000; --accent-strong: #000; --accent-soft: transparent; --code-bg: #fff; --pre-bg: #fff; --pre-text: #000; --scrim: #fff; --hero-glow: none; --shadow-card: none; --shadow-card-hover: none; } .site-header, .theme-toggle, .socials, .skip-link, .site-footer nav { display: none !important; } .prose pre { white-space: pre-wrap; overflow-x: visible; border: 1px solid #bbb; } .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; } .prose .embed { display: none; } }