/* ========================================================================== Carthi P — personal site -------------------------------------------------------------------------- 1. Design tokens 2. Reset & base 3. Typography 4. Layout 5. Header & navigation 6. Footer 7. Buttons & links 8. Cards (article, project) 9. Experience & education items 10. Skills 11. Homepage sections 12. Article (prose, code, TOC, pagination) 13. Utilities 14. Print ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS Every colour, space, size and width in this file comes from here. Nothing below section 1 hard-codes a value. ========================================================================== */ :root { /* — Colour: light theme — */ --c-bg: #ffffff; --c-surface: #f7f8f8; --c-surface-raised: #ffffff; --c-text: #15181c; --c-text-secondary: #4a5157; --c-text-muted: #6c757d; --c-border: #e3e6e8; --c-border-strong: #c9d0d5; --c-accent: #0f766e; --c-accent-hover: #0b5a54; --c-accent-subtle: #e6f2f1; --c-code-bg: #1b1f24; --c-code-text: #e6e9ec; --c-code-inline-bg: #f0f2f3; --c-code-inline-fg: #9d174d; /* — Type — */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 0.78rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.375rem; --fs-4xl: 3rem; --lh-tight: 1.18; --lh-snug: 1.35; --lh-normal: 1.6; --lh-prose: 1.72; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --ls-tight: -0.021em; --ls-caps: 0.08em; /* — Space (4px base) — */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5.5rem; /* — Widths — */ --w-shell: 56rem; /* header, footer, standard pages */ --w-prose: 44rem; /* article body — long-form reading measure */ --w-narrow: 34rem; /* — Borders & radius — */ --bw: 1px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-full: 999px; /* — Elevation (used sparingly) — */ --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.07); /* — Motion — */ --t-fast: 120ms ease; --t-base: 180ms ease; /* — Focus — */ --focus-ring: 2px solid var(--c-accent); --focus-offset: 2px; } /* Dark theme. Applied by prefers-color-scheme, then overridden in either direction by [data-theme] which the toggle stamps on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --c-bg: #0f1114; --c-surface: #161a1f; --c-surface-raised: #1b2027; --c-text: #e8eaec; --c-text-secondary: #a8b0b8; --c-text-muted: #7f8891; --c-border: #262c33; --c-border-strong: #39424c; --c-accent: #5ccfc0; --c-accent-hover: #8ae2d8; --c-accent-subtle: #12211f; --c-code-bg: #0a0c0e; --c-code-text: #e6e9ec; --c-code-inline-bg: #1c2128; --c-code-inline-fg: #f9a8d4; --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --c-bg: #0f1114; --c-surface: #161a1f; --c-surface-raised: #1b2027; --c-text: #e8eaec; --c-text-secondary: #a8b0b8; --c-text-muted: #7f8891; --c-border: #262c33; --c-border-strong: #39424c; --c-accent: #5ccfc0; --c-accent-hover: #8ae2d8; --c-accent-subtle: #12211f; --c-code-bg: #0a0c0e; --c-code-text: #e6e9ec; --c-code-inline-bg: #1c2128; --c-code-inline-fg: #f9a8d4; --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { --c-bg: #ffffff; --c-surface: #f7f8f8; --c-surface-raised: #ffffff; --c-text: #15181c; --c-text-secondary: #4a5157; --c-text-muted: #6c757d; --c-border: #e3e6e8; --c-border-strong: #c9d0d5; --c-accent: #0f766e; --c-accent-hover: #0b5a54; --c-accent-subtle: #e6f2f1; --c-code-bg: #1b1f24; --c-code-text: #e6e9ec; --c-code-inline-bg: #f0f2f3; --c-code-inline-fg: #9d174d; } /* ========================================================================== 2. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-9); } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } hr { border: 0; border-top: var(--bw) solid var(--c-border); margin: var(--s-7) 0; } ::selection { background: var(--c-accent); color: var(--c-bg); } :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); } /* Respect reduced-motion globally. Nothing here is required to read the site. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--s-3); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--c-text); text-wrap: balance; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } h5, h6 { font-size: var(--fs-base); } p { margin: 0 0 var(--s-4); } ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); } li { margin-bottom: var(--s-2); } li > ul, li > ol { margin-top: var(--s-2); } strong { font-weight: var(--fw-semibold); } blockquote { margin: var(--s-5) 0; padding: var(--s-1) 0 var(--s-1) var(--s-5); border-left: 3px solid var(--c-border-strong); color: var(--c-text-secondary); font-style: italic; } blockquote > :last-child { margin-bottom: 0; } small, .text-sm { font-size: var(--fs-sm); } .eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-muted); } .lead { font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--c-text-secondary); max-width: var(--w-prose); } .muted { color: var(--c-text-muted); } .secondary { color: var(--c-text-secondary); } /* ========================================================================== 4. LAYOUT ========================================================================== */ .shell { width: 100%; max-width: var(--w-shell); margin-inline: auto; padding-inline: var(--s-5); } .site-main { flex: 1 0 auto; padding-block: var(--s-8) var(--s-10); } .page-header { margin-bottom: var(--s-7); padding-bottom: var(--s-5); border-bottom: var(--bw) solid var(--c-border); } .page-header h1 { margin-bottom: var(--s-3); } .page-header .lead { margin-bottom: 0; } .section { margin-bottom: var(--s-9); } .section:last-child { margin-bottom: 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: var(--bw) solid var(--c-border); } .section-head h2 { margin: 0; font-size: var(--fs-lg); } .stack { display: flex; flex-direction: column; gap: var(--s-5); } .stack-lg { display: flex; flex-direction: column; gap: var(--s-7); } .stack-sm { display: flex; flex-direction: column; gap: var(--s-3); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s-5); } /* Skip link — first focusable element on the page. */ .skip-link { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100; padding: var(--s-2) var(--s-4); background: var(--c-accent); color: var(--c-bg); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* ========================================================================== 5. HEADER & NAVIGATION ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; /* Opaque fallback first: if color-mix is unsupported the declaration below is dropped and the header stays readable rather than going transparent. */ background: var(--c-bg); background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: saturate(140%) blur(8px); border-bottom: var(--bw) solid var(--c-border); } @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--c-bg); } } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.75rem; } .brand { font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--c-text); text-decoration: none; white-space: nowrap; } .brand:hover { color: var(--c-accent); } .brand-role { display: block; font-size: var(--fs-xs); font-weight: var(--fw-normal); letter-spacing: 0; color: var(--c-text-muted); } .header-actions { display: flex; align-items: center; gap: var(--s-2); } .nav-list { display: flex; align-items: center; gap: var(--s-1); margin: 0; padding: 0; list-style: none; } .nav-list li { margin: 0; } .nav-link { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--c-text-secondary); text-decoration: none; transition: color var(--t-fast), background var(--t-fast); } .nav-link:hover { color: var(--c-text); background: var(--c-surface); } .nav-link[aria-current="page"] { color: var(--c-accent); font-weight: var(--fw-medium); } /* Icon button — theme toggle, hamburger */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; background: transparent; border: var(--bw) solid var(--c-border); border-radius: var(--r-md); color: var(--c-text-secondary); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .icon-btn:hover { color: var(--c-text); border-color: var(--c-border-strong); background: var(--c-surface); } .icon-btn svg { width: 1.05rem; height: 1.05rem; } /* The toggle shows the icon for the theme you'd switch TO. */ .icon-sun { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .icon-sun { display: block; } :root:not([data-theme]) .icon-moon { display: none; } } .nav-toggle { display: none; } /* — Mobile navigation — */ @media (max-width: 900px) { .nav-toggle { display: inline-flex; } .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-bg); border-bottom: var(--bw) solid var(--c-border); box-shadow: var(--shadow-md); /* Collapsed by default. Uses visibility+opacity, not display, so the reveal can transition without shifting page layout. */ visibility: hidden; opacity: 0; transform: translateY(-0.5rem); transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); } .site-nav[data-open="true"] { visibility: visible; opacity: 1; transform: translateY(0); } .nav-list { flex-direction: column; align-items: stretch; gap: 0; max-width: var(--w-shell); margin-inline: auto; padding: var(--s-3) var(--s-5) var(--s-5); } .nav-link { padding: var(--s-3) var(--s-2); font-size: var(--fs-md); border-radius: var(--r-sm); } .nav-list li + li .nav-link { border-top: var(--bw) solid var(--c-border); border-radius: 0; } } /* No-JS fallback: the menu can't be toggled, so always show it inline. */ .no-js .nav-toggle { display: none; } @media (max-width: 900px) { .no-js .site-nav { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; border-bottom: 0; } .no-js .header-inner { flex-wrap: wrap; } } /* ========================================================================== 6. FOOTER ========================================================================== */ .site-footer { border-top: var(--bw) solid var(--c-border); padding-block: var(--s-6); font-size: var(--fs-sm); color: var(--c-text-muted); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 0; padding: 0; list-style: none; } .footer-links li { margin: 0; } .footer-links a { color: var(--c-text-secondary); text-decoration: none; } .footer-links a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 7. BUTTONS & LINKS ========================================================================== */ a { color: var(--c-accent); text-decoration-color: color-mix(in srgb, var(--c-accent) 40%, transparent); text-underline-offset: 3px; transition: color var(--t-fast); } a:hover { color: var(--c-accent-hover); text-decoration-color: currentColor; } .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border: var(--bw) solid var(--c-border-strong); border-radius: var(--r-md); background: transparent; color: var(--c-text); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.2; text-decoration: none; cursor: pointer; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); } .btn:hover { color: var(--c-text); background: var(--c-surface); border-color: var(--c-text-muted); } .btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); } .btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-bg); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); } .link-more { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; } .link-more:hover { text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 8. CARDS ========================================================================== */ .card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--c-surface-raised); border: var(--bw) solid var(--c-border); border-radius: var(--r-lg); transition: border-color var(--t-base); } .card:hover { border-color: var(--c-border-strong); } /* — Article card — */ .article-card { padding-bottom: var(--s-5); border-bottom: var(--bw) solid var(--c-border); } .article-card:last-child { border-bottom: 0; padding-bottom: 0; } .article-card :is(h2, h3, h4) { margin-bottom: var(--s-2); font-size: var(--fs-lg); } .article-card :is(h2, h3, h4) a { color: var(--c-text); text-decoration: none; } .article-card :is(h2, h3, h4) a:hover { color: var(--c-accent); } .article-card p { margin-bottom: var(--s-3); color: var(--c-text-secondary); font-size: var(--fs-base); } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-muted); } .meta-sep { opacity: 0.5; } .tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; } .tag-list li { margin: 0; } .tag { display: inline-block; padding: 0.15rem var(--s-2); border: var(--bw) solid var(--c-border); border-radius: var(--r-full); font-size: var(--fs-xs); color: var(--c-text-muted); text-decoration: none; white-space: nowrap; } a.tag:hover { color: var(--c-accent); border-color: var(--c-accent); } /* — Project card — */ .project-card { height: 100%; } .project-card .project-thumb { margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; border-bottom: var(--bw) solid var(--c-border); } .project-card .project-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .project-card :is(h2, h3, h4) { margin: 0; font-size: var(--fs-md); } .project-card > p { margin: 0; color: var(--c-text-secondary); font-size: var(--fs-base); } .project-card .project-body { display: grid; gap: var(--s-3); } .project-card .project-links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: auto; padding-top: var(--s-2); font-size: var(--fs-sm); } .status { display: inline-block; padding: 0.1rem var(--s-2); border-radius: var(--r-full); background: var(--c-accent-subtle); color: var(--c-accent); font-size: var(--fs-xs); font-weight: var(--fw-medium); } .detail-block { margin-bottom: var(--s-3); } .detail-block > .eyebrow { display: block; margin-bottom: var(--s-1); } .detail-block > p { margin: 0; } /* ========================================================================== 9. EXPERIENCE & EDUCATION ========================================================================== */ .entry { padding-bottom: var(--s-6); border-bottom: var(--bw) solid var(--c-border); } .entry:last-child { border-bottom: 0; padding-bottom: 0; } .entry-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-1); } .entry-head :is(h2, h3, h4) { margin: 0; font-size: var(--fs-md); } .entry-dates { font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .entry-org { margin-bottom: var(--s-3); font-size: var(--fs-base); color: var(--c-text-secondary); } .entry-org .entry-location { color: var(--c-text-muted); } .entry-desc { margin-bottom: var(--s-3); color: var(--c-text-secondary); } .entry-list { margin: 0 0 var(--s-4); padding-left: var(--s-5); color: var(--c-text-secondary); } .entry-list li { margin-bottom: var(--s-2); } .entry-list li::marker { color: var(--c-text-muted); } .entry-tech { margin-top: var(--s-3); } /* ========================================================================== 10. SKILLS ========================================================================== */ .skill-group { margin-bottom: var(--s-5); } .skill-group:last-child { margin-bottom: 0; } .skill-group :is(h2, h3, h4) { margin-bottom: var(--s-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-muted); } .skill-items { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin: 0; padding: 0; list-style: none; } .skill-items li { margin: 0; padding: var(--s-1) var(--s-3); background: var(--c-surface); border: var(--bw) solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--c-text); } .skills-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-5) var(--s-7); } /* ========================================================================== 11. HOMEPAGE ========================================================================== */ .hero { padding-block: var(--s-6) var(--s-9); border-bottom: var(--bw) solid var(--c-border); margin-bottom: var(--s-9); } .hero h1 { font-size: var(--fs-4xl); margin-bottom: var(--s-2); } .hero .hero-title { margin-bottom: var(--s-5); font-size: var(--fs-lg); color: var(--c-accent); font-weight: var(--fw-medium); } .hero .hero-statement { max-width: var(--w-prose); margin-bottom: var(--s-6); font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--c-text-secondary); } .hero-contact { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-6); font-size: var(--fs-sm); } .hero-contact a { text-decoration: none; } .hero-contact a:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 600px) { .hero h1 { font-size: var(--fs-2xl); } .hero .hero-statement { font-size: var(--fs-md); } .hero { padding-block: var(--s-4) var(--s-7); margin-bottom: var(--s-7); } } /* ========================================================================== 12. ARTICLE ========================================================================== */ .article-wrap { max-width: var(--w-prose); margin-inline: auto; } .article-header { margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: var(--bw) solid var(--c-border); } .article-header h1 { margin-bottom: var(--s-3); font-size: var(--fs-3xl); } .back-link { display: inline-block; margin-bottom: var(--s-5); font-size: var(--fs-sm); text-decoration: none; } .back-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* — Prose — */ .prose { font-size: var(--fs-md); line-height: var(--lh-prose); } .prose > * + * { margin-top: var(--s-4); } .prose > h2 { margin-top: var(--s-8); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: var(--bw) solid var(--c-border); font-size: var(--fs-xl); } .prose > h3 { margin-top: var(--s-6); margin-bottom: var(--s-2); } .prose > h4 { margin-top: var(--s-5); margin-bottom: var(--s-2); } .prose > p { margin-bottom: 0; } .prose ul, .prose ol { padding-left: var(--s-6); } .prose li { line-height: var(--lh-prose); } .prose img { margin-block: var(--s-5); border: var(--bw) solid var(--c-border); border-radius: var(--r-md); } .prose figure { margin: var(--s-6) 0; } .prose figcaption { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; } .prose > blockquote { margin-block: var(--s-5); } /* Heading anchors, injected by main.js */ .heading-anchor { margin-left: var(--s-2); color: var(--c-text-muted); text-decoration: none; opacity: 0; font-weight: var(--fw-normal); transition: opacity var(--t-fast); } h2:hover > .heading-anchor, h3:hover > .heading-anchor, .heading-anchor:focus { opacity: 1; } /* — Tables: scroll inside their own container, never the page — */ .table-scroll { overflow-x: auto; margin-block: var(--s-5); border: var(--bw) solid var(--c-border); border-radius: var(--r-md); -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table-scroll > table { margin: 0; border: 0; } th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: var(--bw) solid var(--c-border); } th { background: var(--c-surface); font-weight: var(--fw-semibold); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } /* — Code — */ code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; } :not(pre) > code { padding: 0.15em 0.4em; background: var(--c-code-inline-bg); color: var(--c-code-inline-fg); border-radius: var(--r-sm); word-break: break-word; } pre { margin-block: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--c-code-bg); color: var(--c-code-text); border-radius: var(--r-md); /* Long lines scroll HERE, not on . */ overflow-x: auto; -webkit-overflow-scrolling: touch; line-height: 1.6; tab-size: 2; } pre > code { display: block; padding: 0; background: none; color: inherit; font-size: var(--fs-sm); white-space: pre; } /* Rouge highlight wrapper */ .highlight, div.highlighter-rouge { margin-block: var(--s-5); } .highlight pre, div.highlighter-rouge pre { margin: 0; } figure.highlight { margin-block: var(--s-5); } /* Rouge token colours — one palette, legible on the dark code surface in both site themes because the code background is always dark. */ .highlight .c, .highlight .cm, .highlight .c1, .highlight .cs { color: #7c8794; font-style: italic; } .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kc { color: #c792ea; } .highlight .o, .highlight .ow { color: #89ddff; } .highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss { color: #c3e88d; } .highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: #f78c6c; } .highlight .nb, .highlight .bp { color: #82aaff; } .highlight .nf, .highlight .nx { color: #82aaff; } .highlight .nc, .highlight .nn { color: #ffcb6b; } .highlight .nd, .highlight .ni, .highlight .ne { color: #f07178; } .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: #eeffff; } .highlight .na { color: #ffcb6b; } .highlight .p, .highlight .pi { color: #89ddff; } .highlight .gd { color: #f07178; } .highlight .gi { color: #c3e88d; } .highlight .err, .highlight .gr { color: #f07178; } /* — Table of contents — */ .toc { margin-bottom: var(--s-7); padding: var(--s-4) var(--s-5); background: var(--c-surface); border: var(--bw) solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-sm); } .toc > summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--c-text-secondary); letter-spacing: var(--ls-caps); text-transform: uppercase; font-size: var(--fs-xs); list-style: none; } .toc > summary::-webkit-details-marker { display: none; } .toc > summary::before { content: "▸"; display: inline-block; margin-right: var(--s-2); transition: transform var(--t-fast); } .toc[open] > summary::before { transform: rotate(90deg); } .toc > summary:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .toc ol { margin: var(--s-3) 0 0; padding-left: var(--s-5); } .toc li { margin-bottom: var(--s-1); } .toc ol ol { margin-top: var(--s-1); } .toc a { text-decoration: none; color: var(--c-text-secondary); } .toc a:hover { color: var(--c-accent); text-decoration: underline; } /* — Prev / next — */ .article-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-6); border-top: var(--bw) solid var(--c-border); } .article-nav a { display: block; padding: var(--s-4); border: var(--bw) solid var(--c-border); border-radius: var(--r-md); text-decoration: none; transition: border-color var(--t-base); } .article-nav a:hover { border-color: var(--c-border-strong); } .article-nav .eyebrow { display: block; margin-bottom: var(--s-1); } .article-nav .article-nav-title { color: var(--c-text); font-weight: var(--fw-medium); font-size: var(--fs-sm); line-height: var(--lh-snug); } .article-nav a:hover .article-nav-title { color: var(--c-accent); } .article-nav .next { text-align: right; } /* — Callout used to mark the example post — */ .note { margin-bottom: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--c-accent-subtle); border: var(--bw) solid color-mix(in srgb, var(--c-accent) 30%, transparent); border-left: 3px solid var(--c-accent); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--c-text-secondary); } .note > :last-child { margin-bottom: 0; } .note strong { color: var(--c-text); } /* ========================================================================== 13. UTILITIES ========================================================================== */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .center-narrow { max-width: var(--w-narrow); margin-inline: auto; text-align: center; } .empty-state { padding: var(--s-7) var(--s-5); border: var(--bw) dashed var(--c-border-strong); border-radius: var(--r-lg); text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); } /* ========================================================================== 14. PRINT ========================================================================== */ @media print { .site-header, .site-footer, .btn-row, .article-nav, .toc, .skip-link, .back-link { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .site-main { padding: 0; } .shell { max-width: none; padding: 0; } a { color: #000; text-decoration: underline; } .entry, .article-card { break-inside: avoid; } pre { background: #f4f4f4; color: #000; border: 1px solid #ccc; } }