/* ============================================================ andreabedini.com — site layer. The design system (static/css/ds/) supplies tokens and element defaults. This file re-implements the UI-kit primitives (Wordmark, Tag, Button, Card, Avatar) and the page furniture as plain CSS classes, per the system's own guidance: "For production, read each component's .prompt.md and re-implement against the CSS custom properties." ============================================================ */ /* ---- Shell & layout ------------------------------------- */ /* width:100% is load-bearing. is a column flex container (for the sticky footer), and auto margins on a flex item's cross axis suppress align-items:stretch — so without an explicit width each shell shrinks to fit its content instead of filling the viewport up to its max-width. */ .shell { width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 0 var(--sp-5); } .shell--wide { max-width: 960px; } /* The sticky footer needs a growing chain: is the flex column, so the main shell has to both grow within it and be a column itself for .site-main's flex:1 to mean anything. Without this the footer sits wherever the content ends and paper shows below it on short pages. */ .shell--main { display: flex; flex-direction: column; flex: 1; } body { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; } .site-main { flex: 1; } @keyframes ab-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .site-main { animation: ab-fade var(--dur-slow) var(--ease-out) both; } } /* ---- Wordmark ------------------------------------------- */ .wordmark { font-family: var(--font-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); color: inherit; text-decoration: none; white-space: nowrap; } .wordmark .slashes { color: var(--coral); } /* Wordmark.jsx sizes its own ramp (md 20 / lg 30) rather than the type scale. */ .wordmark--md { font-size: 20px; } .wordmark--lg { font-size: 30px; } /* ---- Nav ------------------------------------------------ */ .site-nav { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: 20px 0; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); border-bottom: var(--bw-hair) solid var(--border); } /* The wordmark is identity, not a link — ink, never blue. Only the // stays coral. */ .site-nav > a { color: var(--text); text-decoration: none; } .site-nav__links { display: flex; gap: 28px; flex-wrap: wrap; } .site-nav__links a { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em; text-decoration: none; color: var(--text-muted); padding-bottom: 3px; border-bottom: var(--bw-2) solid transparent; transition: color var(--dur-fast) var(--ease-out); } .site-nav__links a:hover { color: var(--text); } .site-nav__links a[aria-current="page"] { color: var(--text); border-bottom-color: var(--coral); } /* ---- Footer --------------------------------------------- */ .site-footer { margin-top: var(--sp-10); background: var(--bg); color: var(--text); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--sp-8) var(--sp-7) var(--sp-7); } /* The footer rides a wider shell so the ink slab reads as a slab, but its contents still belong to the reading column above. Capping them at the body's measure and centring them lands their edges on that column at every width — the slab's own padding then only sets how far the ink extends past the text, not where the text starts. */ .site-footer__top, .site-footer__colophon { max-width: calc(var(--content-w) - var(--sp-5) * 2); margin-left: auto; margin-right: auto; } /* Narrower than this the slab's 48px inset no longer fits outside the column, so the slab runs edge to edge and its padding becomes the gutter — which is the body's gutter too. */ @media (max-width: 816px) { .shell--wide { padding: 0; } .site-footer { padding-left: var(--sp-5); padding-right: var(--sp-5); } } .site-footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-6); } .site-footer__blurb { font: var(--text-small); color: var(--text-muted); margin-top: var(--sp-3); max-width: 34ch; } .site-footer__links { display: flex; flex-direction: column; gap: var(--sp-3); } .social-link { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text); transition: color var(--dur-fast) var(--ease-out); } .social-link:hover { color: var(--coral); } .social-link svg { width: 17px; height: 17px; flex: none; } .site-footer__colophon { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: var(--bw-hair) solid var(--border); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); } /* ---- Tag ------------------------------------------------ */ .tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-wide); padding: 5px 12px; border-radius: var(--r-pill); border: var(--bw-hair) solid var(--border-strong); color: var(--text-muted); background: transparent; white-space: nowrap; } .tag--solid { background: var(--text); border-color: var(--text); color: var(--bg); } .tag--coral { background: var(--surface-accent); border-color: var(--coral-line); color: var(--accent-text); } /* --link-hover is --blue-strong on paper, per Tag.jsx, and stays legible on ink. */ .tag--blue { background: var(--surface-info); border-color: var(--blue-line); color: var(--link-hover); } .tag--sm { font-size: 10px; padding: 3px 9px; } .tag--ghost { border-style: dashed; color: var(--text-faint); } .tag-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; } /* ---- Button --------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--fw-semibold) var(--fs-sm)/var(--lh-solid) var(--font-sans); letter-spacing: -0.005em; padding: 10px 20px; border-radius: var(--r-pill); border: var(--bw-1) solid transparent; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); } .btn--secondary { background: transparent; color: var(--text); border-color: var(--border-ink); } .btn--secondary:hover { background: var(--text); color: var(--bg); } /* ---- Card ----------------------------------------------- */ .card { border-radius: var(--r-lg); border: var(--bw-hair) solid var(--border); background: var(--surface); padding: var(--sp-6); } /* Ink cards carry data-theme="ink" in the markup, which re-scopes the semantic tokens, so they stay dark in both site themes. */ .card--ink { background: var(--bg); border-color: var(--bg); color: var(--text); } .card--print { box-shadow: var(--shadow-print); border-width: var(--bw-1); border-color: var(--ink); } .card--ink.card--print { box-shadow: var(--shadow-print-coral); } .card--raised { box-shadow: var(--shadow-md); } .card--accent { border-top: var(--bw-3) solid var(--coral); } .card__label { font: var(--text-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--coral); margin-bottom: var(--sp-2); } /* ---- Avatar --------------------------------------------- */ .avatar { background: var(--coral); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; flex: none; line-height: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); } .avatar--xl { width: 132px; height: 132px; } /* ---- Eyebrows & section heads --------------------------- */ .eyebrow { font: var(--text-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--accent-text); } .eyebrow--muted { color: var(--text-faint); } .section-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-5); } .section-head::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ---- Page headers --------------------------------------- */ .page { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } .page__title { font: var(--text-h1); letter-spacing: var(--ls-tightest); margin-top: var(--sp-3); max-width: 20ch; } .page__intro { font: var(--text-lead); color: var(--text-secondary); max-width: 60ch; margin-top: var(--sp-5); } .stack { margin-top: var(--sp-5); } .stack-lg { margin-top: var(--sp-7); } .section { margin-top: var(--sp-8); } /* ---- Home hero ------------------------------------------ */ .hero { display: flex; align-items: flex-start; gap: var(--sp-6); flex-wrap: wrap; padding-top: var(--sp-9); } .hero__body { flex: 1 1 360px; } .hero__title { font: var(--text-hero); letter-spacing: var(--ls-tightest); line-height: 1.02; margin-top: var(--sp-3); } .hero__fix { position: relative; white-space: nowrap; } .hero__fix s { text-decoration-thickness: 3px; text-decoration-color: var(--accent-hover); color: var(--text-faint); } .hero__fix em { font-style: italic; color: var(--accent-text); } @media (max-width: 560px) { .hero__title { font-size: var(--fs-3xl); } } /* ---- Prose (markdown body) ------------------------------ */ .prose { font: var(--text-lead); color: var(--text-secondary); max-width: 60ch; } .prose > * + * { margin-top: var(--sp-4); } .prose a { color: var(--link); text-decoration: underline; text-decoration-color: var(--blue-line); text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .prose a:hover { text-decoration-color: var(--link-hover); } .prose h2 { font: var(--text-h2); letter-spacing: var(--ls-tight); margin-top: var(--sp-7); } .prose h3 { font: var(--text-h3); margin-top: var(--sp-6); } .prose h4 { font: var(--text-h4); margin-top: var(--sp-5); } .prose ul, .prose ol { padding-left: var(--sp-5); } .prose li + li { margin-top: var(--sp-2); } .prose blockquote { margin: 0; padding-left: var(--sp-5); border-left: var(--bw-2) solid var(--coral); color: var(--text-muted); } .prose img { border-radius: var(--r-sm); margin: var(--sp-5) 0; } .prose code { font: var(--text-code); background: var(--surface-sunken); border: var(--bw-hair) solid var(--border); border-radius: var(--r-xs); padding: 1px 5px; } /* code blocks run in ink mode, per the system's ink-mode note */ .prose pre { font: var(--text-code); background: var(--ink); color: var(--paper); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); overflow-x: auto; } .prose pre code { background: none; border: 0; padding: 0; color: inherit; } /* ---- Reading column for posts --------------------------- */ .post__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-text); margin-top: var(--sp-3); } .post__body { font: var(--text-body); color: var(--text-secondary); margin-top: var(--sp-6); } .post__body h2 { color: var(--text); } /* ---- Row lists (CV, teaching, publications) -------------- */ .row-list { list-style: none; margin: 0; padding: 0; } .row { display: flex; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: var(--bw-hair) solid var(--border); align-items: baseline; } .row__years { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-text); flex: none; width: 92px; letter-spacing: 0.01em; } .row__years--narrow { width: 72px; } .row__main { flex: 1; } .row__role { font: var(--text-h4); display: block; } .row__org { font: var(--text-small); color: var(--text-muted); } .row__org a { color: var(--text-secondary); text-decoration: none; border-bottom: var(--bw-hair) solid var(--border-strong); } .row__org a:hover { color: var(--accent-text); } /* A role can carry a link (one course points at its readme). Keep the row's heading colour but mark it with the same quiet hairline the org links use — inheriting the colour with no underline left it indistinguishable from the rows that aren't links. */ .row__role a { color: inherit; text-decoration: none; border-bottom: var(--bw-hair) solid var(--border-strong); } .row__role a:hover { color: var(--accent-text); } .row__note { color: var(--text-faint); font-style: italic; } @media (max-width: 520px) { .row { flex-direction: column; gap: var(--sp-1); } .row__years, .row__years--narrow { width: auto; } } /* ---- Research items ------------------------------------- */ .research { display: flex; flex-direction: column; gap: var(--sp-5); } .research__item { display: flex; gap: var(--sp-5); align-items: flex-start; } .research__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-text); flex: none; width: 28px; padding-top: 5px; } .research__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); } .research__head h3 { font: var(--text-h4); } .research__body { font: var(--text-body); color: var(--text-secondary); max-width: 64ch; line-height: 1.6; } .research__body a { color: var(--link); } .research__fig { float: right; width: 120px; margin: 0 0 var(--sp-3) var(--sp-4); } /* ---- Publications --------------------------------------- */ .pub { padding: var(--sp-4) 0; border-bottom: var(--bw-hair) solid var(--border); } .pub__title { font: var(--text-h4); font-weight: var(--fw-medium); color: var(--text); text-decoration: none; display: block; } .pub__title:hover { color: var(--accent-text); } .pub__meta { font: var(--text-small); color: var(--text-muted); margin-top: 3px; } .pub__meta em { font-style: italic; color: var(--text-secondary); } /* ---- Projects ------------------------------------------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-7); } .project-card { display: block; text-decoration: none; color: inherit; height: 100%; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .project-card:hover { border-color: var(--coral-line); box-shadow: var(--shadow-md); } .project-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .project-card__name { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); } .project-card__owner { color: var(--text-faint); font-weight: var(--fw-regular); } .project-card__arrow { width: 17px; height: 17px; color: var(--text-faint); flex: none; } .project-card:hover .project-card__arrow { color: var(--accent-text); } .project-card__desc { font: var(--text-small); color: var(--text-muted); line-height: 1.55; margin: var(--sp-3) 0 var(--sp-4); } .project-card__meta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); } .project-card__meta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .project-card__dot { width: 9px; height: 9px; border-radius: var(--r-circle); background: var(--coral); } .project-card__meta svg { width: 13px; height: 13px; } /* ---- Post list ------------------------------------------ */ .post-row { display: flex; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: var(--bw-hair) solid var(--border); align-items: baseline; } .post-row a { font: var(--text-h4); color: var(--text); text-decoration: none; } .post-row a:hover { color: var(--accent-text); } /* ---- Closing quote -------------------------------------- */ .pull-quote { margin: var(--sp-8) 0 0; padding-left: var(--sp-5); border-left: var(--bw-2) solid var(--coral); } .pull-quote blockquote { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-regular); font-style: italic; letter-spacing: var(--ls-tight); color: var(--text); line-height: 1.3; margin: 0; max-width: 26ch; } /* ---- Misc ----------------------------------------------- */ .orcid-card { margin-top: var(--sp-7); } .orcid-card__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); flex-wrap: wrap; } .orcid-card__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); display: block; margin-top: 4px; } .cta-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-7); flex-wrap: wrap; align-items: center; } /* Reachable by screen readers, absent for everyone else. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .mono-aside { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); } .section__title { font: var(--text-h2); letter-spacing: var(--ls-tight); margin-bottom: var(--sp-3); } /* Zola emits the syntax theme inline as light-dark() pairs, switched by the element's color-scheme — which follows the OS, not our [data-theme] toggle. Code blocks are ink mode in both site themes (readme: "footers, callout cards, and code blocks"), so pin the scheme to dark and the dark half of every pair resolves: solarized-dark tokens on the warm ink we force here, rather than solarized-light tokens on a dark ground whenever the OS and the site disagree. Both need !important to beat Zola's inline style. */ .prose pre.giallo { color-scheme: dark !important; background: var(--ink) !important; } /* ---- Theme toggle ---------------------------------------- */ .theme-toggle { line-height: 0; width: 32px; height: 32px; border-radius: var(--r-circle); border: var(--bw-hair) solid var(--border); background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent-text); } .theme-toggle svg { width: 17px; height: 17px; } /* Show the icon for the theme the button switches TO. */ .theme-toggle__sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__sun { display: block; } :root:not([data-theme="light"]) .theme-toggle__moon { display: none; } } :root[data-theme="dark"] .theme-toggle__sun { display: block; } :root[data-theme="dark"] .theme-toggle__moon { display: none; }