/* GENERATED by scripts/build-css.mjs — do not edit. The dark halves of every prefers-color-scheme block in Templates/fede-copy/style.css, in source order. Loaded by Head.astro behind a media attribute the theme toggle flips. */ ::view-transition { background-color: #16181c; } :root { --primary-color: color(display-p3 0.95 0.95 0.95); --heading-color: color(display-p3 0.95 0.95 0.95); --secondary-color: color(display-p3 0.95 0.95 0.95 / 0.65); --tertiary-color: color(display-p3 0.95 0.95 0.95 / 0.45); --background-color: color(display-p3 0.088 0.094 0.110); --background-color-srgb: #16181C; --card-border-color: color(display-p3 0.95 0.95 0.95 / 0.12); --accent-color: color(display-p3 0.95 0.95 0.95); --input-background-color: color(display-p3 0.95 0.95 0.95 / 0.05); --lines: color(display-p3 0.95 0.95 0.95 / 0.12); --shadow: color(display-p3 0 0 0 / 0.3) 0px 10px 10px -10px; --marks: color(display-p3 0.4 0.4 0.4); /* A black ring is invisible against the near-black page, so the ring flips to a light hairline (same value as --card-border-color) while the drops deepen to stay readable. */ --border-shadow: 0 0 0 1px color(display-p3 0.95 0.95 0.95 / 0.12), 0 1px 2px -1px color(display-p3 0 0 0 / 0.4), 0 2px 4px 0 color(display-p3 0 0 0 / 0.3); --image-outline: color(display-p3 1 1 1 / 0.1); } /* Dark mode only: a soft, cool radial light source glowing down from the top of the page, behind the header and content. It's a real element (.ambient- glow, first child of ) rather than a pseudo — body::before is already the iOS status-bar cap, and a real element can carry its own view-transition-name so it stays put during the content slide instead of sliding with the root. z-index:-1 keeps it under the content but above the flat page background; pointer-events:none so it never intercepts taps. */ .ambient-glow { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 140%; max-width: 1100px; height: 420px; background: radial-gradient( 60% 100% at 50% 0%, color(display-p3 0.6 0.66 0.95 / 0.22) 0%, color(display-p3 0.6 0.66 0.95 / 0.08) 42%, transparent 72% ); pointer-events: none; z-index: -1; view-transition-name: ambient-glow; } html { background-color: var(--background-color-srgb); } ::selection { background-color: color(display-p3 0.95 0.95 0.95 / 0.2); color: color(display-p3 1 1 1); } ::-moz-selection { background-color: color(display-p3 0.95 0.95 0.95 / 0.2); color: color(display-p3 1 1 1); } /* Selector must match the light rule's specificity (.site-header .site-avatar, 0-2-0). As a bare `.site-avatar` (0-1-0) this block never won — a media query adds no specificity — so the avatar kept its black drops in dark mode, where they are invisible. */ .site-header .site-avatar { /* Ring dropped here too: --image-outline is already white/0.1 in dark mode. These drops are white on purpose — a soft glow, since a black drop would vanish against the page. */ box-shadow: 0px 1px 2px -1px color(display-p3 1 1 1 / 0.06), 0px 2px 4px 0px color(display-p3 1 1 1 / 0.04); } /* Invert laurel SVG to white in dark mode */ img[src*="_laurel"] { filter: grayscale(1) brightness(3.0); opacity: 0.85; } .site-tagline { background: linear-gradient(90deg, color(display-p3 1 1 1) 0%, color(display-p3 0.53 0.71 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .site-tagline .ampersand { background: linear-gradient(90deg, color(display-p3 1 1 1) 0%, color(display-p3 0.53 0.71 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cmdk__panel { box-shadow: 0 0 0 1px var(--card-border-color), 0 16px 40px -8px color(display-p3 0 0 0 / 0.6), 0 4px 12px -4px color(display-p3 0 0 0 / 0.4); } .cmdk__badge { color: oklch(0.84 0.10 var(--cat-h)); background-color: color-mix(in oklab, oklch(0.76 0.18 var(--cat-h)) 18%, transparent); } .cmdk__art--icon.is-tinted { color: oklch(0.84 0.10 var(--cat-h)); background-color: color-mix(in oklab, oklch(0.76 0.18 var(--cat-h)) 18%, transparent); } .cmdk mark { background-color: color-mix(in oklab, var(--accent-color) 26%, transparent); } @media (max-width: 768px) { /* Dark frosted dock — translucent dark fill over the blur. */ .mobile-bar .site-nav { background: color(display-p3 0.16 0.16 0.16 / 0.6); box-shadow: 0 2px 12px color(display-p3 0 0 0 / 0.25), 0 0 0 0.5px color(display-p3 1 1 1 / 0.08); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mobile-bar .site-nav { background: color(display-p3 0.16 0.16 0.16 / 0.94); } } /* Dark: solid fill for the during-swap state (blur off, keeps radius). */ html.vt-swapping .mobile-bar .site-nav { background: color(display-p3 0.17 0.17 0.17 / 0.94); } /* Dark mode: the sliding pill needs a LIGHT tint — the default dark tint is invisible on the dark bar (this is why the pill "disappeared"). Targets the real .nav-pill element (the old a.active::after pseudo no longer exists). */ .nav-pill { background: color(display-p3 1 1 1 / 0.14); } .mobile-bar .site-nav a { color: white; } /* Dark mode: entry-nav bottom gradient */ .entry-nav::before { background: linear-gradient( 180deg, hsla(0, 0%, 9%, 0) 0%, hsla(0, 0%, 9%, 0.002) 1.8%, hsla(0, 0%, 9%, 0.008) 4.8%, hsla(0, 0%, 9%, 0.021) 9%, hsla(0, 0%, 9%, 0.042) 13.9%, hsla(0, 0%, 9%, 0.075) 19.8%, hsla(0, 0%, 9%, 0.126) 27%, hsla(0, 0%, 9%, 0.194) 35%, hsla(0, 0%, 9%, 0.278) 43.5%, hsla(0, 0%, 9%, 0.382) 53%, hsla(0, 0%, 9%, 0.541) 66%, hsla(0, 0%, 9%, 0.738) 81%, hsl(0, 0%, 9%) 100% ); } /* (Entry-page top blur gradient removed — see light mode above.) */ } .post-category { /* Inverted roles: on the near-black page the icon is the darker, more saturated of the two and the text is the light one. Text at L 0.84 measures ~11:1; taking it to full chroma instead would glow. --cat-l is deliberately not consulted here: 0.76 is already in the band where a yellow reads as gold, so the light-mode correction would only overshoot. */ --cat: oklch(0.76 0.18 var(--cat-h)); --cat-ink: oklch(0.84 0.10 var(--cat-h)); } @media (hover: hover) { .post-category:hover { background-color: color-mix(in oklab, var(--cat) 18%, transparent); } } .tag-cloud-link--category { --cat: oklch(0.76 0.18 var(--cat-h)); --cat-ink: oklch(0.84 0.10 var(--cat-h)); background-color: color-mix(in oklab, var(--cat) 16%, transparent); } @media (hover: hover) { .tag-cloud-link--category:hover { background-color: color-mix(in oklab, var(--cat) 28%, transparent); } } .intro p:first-of-type { opacity: 0.95; } .intro img { filter: grayscale(1) brightness(3.0); } .intro .emphasis, .intro strong { color: #ffffff !important; } .intro a, .final-note a { text-decoration-color: #505050; } .tool img { filter: none; } .apple-music-embed-wrap.is-faded::after { background: linear-gradient(180deg, color(display-p3 0.09 0.09 0.09 / 0), color(display-p3 0.09 0.09 0.09)); } svg.footer-illustration { --jk: white; --jb: color(display-p3 0.09 0.09 0.09); } .facts-card { background-color: #1c1c1c; } .facts-card .facts-heading { color: rgba(255, 255, 255, 0.4); } .facts-card .facts-list li { color: rgba(255, 255, 255, 0.65); } .facts-card .facts-list a { color: rgba(255, 255, 255, 0.9); text-decoration-color: rgba(255, 255, 255, 0.2); } .entry-content .cv > h1, .entry-content .cv > h2, .entry-content .cv > h3, .entry-content .cv > h4, .entry-content .cv > h5, .entry-content .cv > h6 { opacity: 0.5; } .entry-content .cv > p:first-of-type { font-weight: 500; opacity: 0.95; } .entry-content .cv.cv-processed > p:first-of-type { opacity: 0.95; } .cv-arrow { opacity: 0.5; } .entry-content .cv > p { opacity: 0.6; } .about a, .entry-content .cv a { text-decoration-color: #505050; } .entry-content > h2 { font-weight: 600; opacity: 0.95; } .motion-switch input[type="checkbox"]:checked { background: color(display-p3 0.29 0.62 1); border-color: color(display-p3 0.29 0.62 1); } .motion-switch:has(input:checked) .switch-label { color: color(display-p3 1 1 1); } /* Lighter shadows for dark mode */ .grid-item { box-shadow: 0px 0px 0px 1px color(display-p3 1 1 1 / 0.08), 0px 2px 8px 0px color(display-p3 0 0 0 / 0.4), 0px 4px 16px 0px color(display-p3 0 0 0 / 0.3); } @media (hover: hover) { .grid-item:hover { box-shadow: 0px 0px 0px 1px color(display-p3 1 1 1 / 0.12), 0px 4px 12px 0px color(display-p3 0 0 0 / 0.5), 0px 8px 24px 0px color(display-p3 0 0 0 / 0.4); } } @media (hover: hover) { .library-card:hover { box-shadow: 0 8px 24px color(display-p3 0 0 0 / 0.4); } } .library-card--highlight { background: linear-gradient(135deg, #ffe135 0%, #ffd54f 100%); border-color: color(display-p3 1 0.88 0.21 / 0.5); } .highlight-quote { color: color(display-p3 0.1 0.1 0.1); } .highlight-source { color: color(display-p3 0.2 0.2 0.2); } .library-modal-backdrop { background-color: color(display-p3 0 0 0 / 0.8); } @media (hover: hover) { .mind-card:hover { opacity: 1; } } .entry-content .astro-code, article .astro-code, .entry-content .astro-code span, article .astro-code span { color: var(--shiki-dark) !important; } .entry-content .astro-code, article .astro-code { background-color: var(--input-background-color) !important; } /* The line numbers are ours, not Shiki's, so they have no --shiki-dark to inherit and would otherwise be swapped to a token colour. */ .entry-content .astro-code .line::before, article .astro-code .line::before { color: var(--tertiary-color) !important; }