/* ========================================================================= Artificial Science — a glassmorphic theme for phpblog. Scientific precision + creative exploration, on an 8px baseline grid. ========================================================================= */ /* ------------------------------------------------------------------ tokens */ :root { /* palette */ --primary: #630ed4; --primary-container: #7c3aed; --primary-bright: #8b5cf6; --on-primary: #ffffff; --primary-fixed: #eaddff; --on-primary-fixed: #25005a; --inverse-primary: #d2bbff; --secondary-container: #fd933d; --secondary: #944a00; --on-secondary-container: #693300; --tertiary: #005952; --tertiary-container: #00746a; --on-tertiary-container: #8df9ea; --lime: #4d7c0f; --lime-container: #65a30d; --surface: #f7f9fb; --surface-container-lowest: #ffffff; --surface-container-low: #f2f4f6; --surface-container: #eceef0; --surface-container-high: #e6e8ea; --on-surface: #191c1e; --on-surface-variant: #4a4455; --outline: #7b7487; --outline-variant: #ccc3d8; /* glass */ --glass-fill: rgba(255, 255, 255, 0.68); --glass-fill-strong: rgba(255, 255, 255, 0.82); --glass-border: rgba(255, 255, 255, 0.55); --glass-ring: rgba(124, 58, 237, 0.14); --glass-blur: 16px; --glow: 0 18px 32px -12px rgba(124, 58, 237, 0.28); --glow-soft: 0 8px 24px -14px rgba(25, 28, 30, 0.28); --dot-grid: rgba(74, 68, 85, 0.05); /* scheme-dependent accents — kept as tokens so the dark palette below is the single place either scheme is described */ --link: #7c3aed; /* Ends chosen for contrast against the surface, not just for colour: the lightest stop still clears WCAG AA for large text. */ --title-gradient: linear-gradient(103deg, #630ed4 4%, #7c3aed 48%, #c026d3 96%); --aurora-1: 0.42; --aurora-2: 0.3; --aurora-3: 0.2; --chip-violet-fg: #630ed4; --chip-violet-bg: rgba(124, 58, 237, 0.14); --chip-teal-fg: #005952; --chip-teal-bg: rgba(13, 148, 136, 0.15); --chip-orange-fg: #944a00; --chip-orange-bg: rgba(251, 146, 60, 0.18); --chip-lime-fg: #4d7c0f; --chip-lime-bg: rgba(101, 163, 13, 0.16); --chip-draft-fg: #944a00; /* type */ --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* shape */ --radius-sm: 0.25rem; --radius: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* space */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --gutter: 24px; --margin: max(24px, 5vw); --container: 1200px; --container-narrow: 760px; } /* ---------------------------------------------------------- dark palette Applied in two situations, so the declarations are deliberately duplicated: 1. the reader's system asks for dark and they have not chosen otherwise; 2. the reader picked dark with the header switch (`data-theme` on ). A CSS mixin would remove the repetition, and `light-dark()` would too, but the latter fails hard on older browsers — an unsupported value invalidates the custom property rather than degrading. Keep the two blocks in sync. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #0f172a; --surface-container-lowest: #0b1120; --surface-container-low: #131c31; --surface-container: #182238; --surface-container-high: #1e293f; --on-surface: #e8eaf0; --on-surface-variant: #b3aec2; --outline: #8f8a9c; --outline-variant: #3a3550; --primary: #a78bfa; --primary-container: #7c3aed; --primary-bright: #c084fc; --primary-fixed: #2a1155; --on-primary-fixed: #ede0ff; --secondary-container: #fb923c; --tertiary: #5eead4; --tertiary-container: #0d9488; --lime: #a3e635; --lime-container: #65a30d; --glass-fill: rgba(30, 41, 63, 0.62); --glass-fill-strong: rgba(30, 41, 63, 0.8); --glass-border: rgba(196, 181, 253, 0.18); --glass-ring: rgba(167, 139, 250, 0.2); --glow: 0 18px 38px -14px rgba(124, 58, 237, 0.55); --glow-soft: 0 10px 28px -16px rgba(0, 0, 0, 0.8); --dot-grid: rgba(196, 181, 253, 0.07); --link: #a78bfa; --title-gradient: linear-gradient(103deg, #a78bfa 4%, #c084fc 48%, #f0abfc 96%); --aurora-1: 0.3; --aurora-2: 0.18; --aurora-3: 0.14; --chip-violet-fg: #c084fc; --chip-violet-bg: rgba(167, 139, 250, 0.16); --chip-teal-fg: #5eead4; --chip-teal-bg: rgba(94, 234, 212, 0.14); --chip-orange-fg: #fb923c; --chip-orange-bg: rgba(251, 146, 60, 0.16); --chip-lime-fg: #a3e635; --chip-lime-bg: rgba(163, 230, 53, 0.14); --chip-draft-fg: #fb923c; } } :root[data-theme="dark"] { --surface: #0f172a; --surface-container-lowest: #0b1120; --surface-container-low: #131c31; --surface-container: #182238; --surface-container-high: #1e293f; --on-surface: #e8eaf0; --on-surface-variant: #b3aec2; --outline: #8f8a9c; --outline-variant: #3a3550; --primary: #a78bfa; --primary-container: #7c3aed; --primary-bright: #c084fc; --primary-fixed: #2a1155; --on-primary-fixed: #ede0ff; --secondary-container: #fb923c; --tertiary: #5eead4; --tertiary-container: #0d9488; --lime: #a3e635; --lime-container: #65a30d; --glass-fill: rgba(30, 41, 63, 0.62); --glass-fill-strong: rgba(30, 41, 63, 0.8); --glass-border: rgba(196, 181, 253, 0.18); --glass-ring: rgba(167, 139, 250, 0.2); --glow: 0 18px 38px -14px rgba(124, 58, 237, 0.55); --glow-soft: 0 10px 28px -16px rgba(0, 0, 0, 0.8); --dot-grid: rgba(196, 181, 253, 0.07); --link: #a78bfa; --title-gradient: linear-gradient(103deg, #a78bfa 4%, #c084fc 48%, #f0abfc 96%); --aurora-1: 0.3; --aurora-2: 0.18; --aurora-3: 0.14; --chip-violet-fg: #c084fc; --chip-violet-bg: rgba(167, 139, 250, 0.16); --chip-teal-fg: #5eead4; --chip-teal-bg: rgba(94, 234, 212, 0.14); --chip-orange-fg: #fb923c; --chip-orange-bg: rgba(251, 146, 60, 0.16); --chip-lime-fg: #a3e635; --chip-lime-bg: rgba(163, 230, 53, 0.14); --chip-draft-fg: #fb923c; } /* Tell form controls, scrollbars and the like which scheme is in force. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; background: var(--surface); color: var(--on-surface); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Dot-grid "scientific canvas" behind everything. */ body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(circle at 1px 1px, var(--dot-grid) 1px, transparent 0); background-size: 24px 24px; pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* Ambient bioluminescent wash. */ .aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aurora-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.42; } .aurora-violet { width: 46vw; height: 46vw; top: -14vw; right: -8vw; background: #a78bfa; opacity: var(--aurora-1); } .aurora-teal { width: 34vw; height: 34vw; top: 46vh; left: -12vw; background: #5eead4; opacity: var(--aurora-2); } .aurora-orange { width: 26vw; height: 26vw; bottom: -8vw; right: 16vw; background: #fb923c; opacity: var(--aurora-3); } img, svg { max-width: 100%; } a { color: var(--link); text-underline-offset: 3px; } ::selection { background: var(--primary-container); color: #fff; } :focus-visible { outline: 2px solid var(--primary-container); outline-offset: 3px; border-radius: var(--radius-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primary-container); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } /* ------------------------------------------------------------- primitives */ .shell { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--margin); } .shell-narrow { max-width: calc(var(--container-narrow) + var(--margin) * 2); } .mono { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; } .glass { background: var(--glass-fill); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glow-soft); } .gradient-text { background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------------------------------------------ chips */ .chip { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; text-decoration: none; padding: 0.42rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap; } .chip-lg { font-size: 14px; padding: 0.5rem 0.8rem; letter-spacing: 0.06em; } .chip-violet { background: var(--chip-violet-bg); color: var(--chip-violet-fg); border-color: rgba(124, 58, 237, 0.24); } .chip-teal { background: var(--chip-teal-bg); color: var(--chip-teal-fg); border-color: rgba(13, 148, 136, 0.26); } .chip-orange { background: var(--chip-orange-bg); color: var(--chip-orange-fg); border-color: rgba(251, 146, 60, 0.32); } .chip-lime { background: var(--chip-lime-bg); color: var(--chip-lime-fg); border-color: rgba(101, 163, 13, 0.28); } .chip-quiet { background: var(--surface-container); color: var(--on-surface-variant); border-color: var(--outline-variant); border-radius: var(--radius-full); padding-inline: 0.75rem; } .chip-draft { background: rgba(251, 146, 60, 0.22); color: var(--chip-draft-fg); border-color: rgba(251, 146, 60, 0.4); } .chip-outline { background: rgba(124, 58, 237, 0.08); color: var(--chip-violet-fg); border-color: rgba(124, 58, 237, 0.3); border-radius: var(--radius-full); padding: 0.5rem 0.85rem; margin: 0 0 var(--space-md); } a.chip { transition: transform 0.16s ease, border-color 0.16s ease; } a.chip:hover { transform: translateY(-1px); border-color: currentColor; } .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; padding: 0.95rem 1.5rem; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; } .btn-sm { font-size: 13px; padding: 0.6rem 1rem; border-radius: var(--radius); } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 55%, var(--primary-bright) 100%); color: #fff; box-shadow: 0 10px 24px -12px rgba(99, 14, 212, 0.75); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(124, 58, 237, 0.6); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--on-surface); border-color: var(--outline-variant); } .btn-ghost:hover { background: var(--glass-fill); border-color: var(--primary-container); color: var(--primary-container); box-shadow: var(--glow); } .btn:disabled { cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.6; } /* ----------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--glass-fill-strong); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border-bottom: 1px solid var(--glass-border); } .header-inner { display: flex; align-items: center; gap: var(--space-md); min-height: 68px; padding-block: 0.75rem; } .wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--on-surface); text-decoration: none; white-space: nowrap; } .wordmark-static { margin: 0; } .wordmark-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-container), #d946ef); box-shadow: 0 0 12px rgba(124, 58, 237, 0.8); flex: none; } .primary-nav { margin-inline: auto; } .primary-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .primary-nav a { font-size: 14px; font-weight: 500; color: var(--on-surface-variant); text-decoration: none; transition: color 0.16s ease; } .primary-nav a:hover { color: var(--primary-container); } .header-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } /* ----------------------------------------------------------------- search */ .search { position: relative; } .search input { width: 190px; font-family: var(--font-body); font-size: 13px; color: var(--on-surface); background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); padding: 0.55rem 2.1rem 0.55rem 2.2rem; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, width 0.18s ease; } .search input::placeholder { color: var(--on-surface-variant); opacity: 0.75; } .search input:focus { outline: none; width: 240px; background: var(--surface-container-lowest); border-color: var(--primary-container); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16); } .search input::-webkit-search-cancel-button { -webkit-appearance: none; } .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; pointer-events: none; fill: none; stroke: var(--on-surface-variant); stroke-width: 1.8; stroke-linecap: round; } .search kbd { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; line-height: 1; color: var(--on-surface-variant); background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); padding: 0.2rem 0.3rem; pointer-events: none; } .search input:focus ~ kbd { opacity: 0; } .search-panel { position: absolute; top: calc(100% + 0.6rem); right: 0; width: min(420px, 88vw); max-height: 60vh; overflow-y: auto; padding: 0.5rem; background: var(--glass-fill-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glow); } .search-panel[hidden] { display: none; } .search-result { display: block; padding: 0.6rem 0.7rem; border-radius: var(--radius); text-decoration: none; color: var(--on-surface); } .search-result:hover, .search-result:focus, .search-result.is-active { background: rgba(124, 58, 237, 0.12); outline: none; } .search-result strong { display: block; font-size: 14px; font-weight: 600; } .search-result span { display: block; font-size: 12px; color: var(--on-surface-variant); } .search-empty { padding: 0.75rem; font-size: 13px; color: var(--on-surface-variant); } .nav-toggle { display: none; flex-direction: column; gap: 4px; width: 38px; height: 38px; align-items: center; justify-content: center; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius); cursor: pointer; } .nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--on-surface); } /* ----------------------------------------------------------- theme switch */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; color: var(--on-surface-variant); background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .theme-toggle:hover { color: var(--primary-container); border-color: var(--primary-container); background: var(--surface-container-lowest); } .theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Show the scheme the switch would move you to. Defaults follow the system preference so the icon is right before the script runs. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ------------------------------------------------------------------- hero */ .hero { padding-block: clamp(3rem, 7vw, 5.5rem) var(--space-lg); } .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 var(--space-md); } .hero-eyebrow { text-transform: uppercase; color: var(--on-surface-variant); } .hero-title { font-family: var(--font-display); /* A post title runs longer than a marketing headline, so this tops out a step below the display scale to keep three-line titles from dominating the fold. */ font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.15rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 var(--space-md); text-wrap: balance; } /* The featured title carries the brand gradient. `background` is spoken for by background-clip, so the hover affordance is an explicitly coloured underline rather than the usual animated background sweep. */ .hero-title a { background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; text-decoration-color: var(--primary-container); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: filter 0.2s ease; } .hero-title a:hover { text-decoration-line: underline; filter: saturate(1.15) brightness(1.06); } /* The accent phrase flows inline so it wraps like the rest of the headline. */ .hero-title .gradient-text { display: inline; } .hero-body { font-size: 18px; line-height: 1.7; color: var(--on-surface-variant); max-width: 52ch; margin: 0 0 var(--space-sm); } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 var(--space-lg); color: var(--on-surface-variant); text-transform: uppercase; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0; } .hero-frame { display: block; position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 40px 80px -40px rgba(99, 14, 212, 0.6), var(--glow); background: #070a14; transition: transform 0.28s ease, box-shadow 0.28s ease; } a.hero-frame:hover { transform: translateY(-4px); box-shadow: 0 46px 90px -40px rgba(99, 14, 212, 0.72), var(--glow); } /* object-fit matters here: the thumb carries an aspect-ratio, so a real photo with different proportions would stretch without it. */ .hero-frame img, .hero-art, .hero-frame .thumb-img { display: block; width: 100%; height: auto; object-fit: cover; } /* --------------------------------------------------------------- sections */ .section { padding-block: clamp(2.5rem, 5vw, var(--space-xl)); } .section-head { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-lg); } .section-title { font-family: var(--font-display); font-size: clamp(1.65rem, 1.2rem + 1.4vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0; } .section-sub { margin: 0.4rem 0 0; color: var(--on-surface-variant); font-size: 15px; } .segmented { display: inline-flex; padding: 3px; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); } .segmented button { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); background: none; border: 0; border-radius: var(--radius-full); padding: 0.45rem 0.9rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .segmented button.is-active { background: var(--surface-container-lowest); color: var(--primary-container); box-shadow: var(--glow-soft); } .empty-state { padding: var(--space-lg); border: 1px dashed var(--outline-variant); border-radius: var(--radius-lg); color: var(--on-surface-variant); text-align: center; } .empty-state code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-container); padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); } /* ------------------------------------------------------------------ cards */ .card-grid { columns: 3; column-gap: var(--gutter); } .card-grid > * { break-inside: avoid; margin-bottom: var(--gutter); } .card { display: flex; flex-direction: column; background: var(--glass-fill); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--glow-soft); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .card:hover { transform: translateY(-4px); border-color: var(--glass-ring); box-shadow: var(--glow); } .card-media { position: relative; display: block; } .card-media .thumb-img { display: block; width: 100%; height: auto; object-fit: cover; } .card-media-inset { margin-top: var(--space-sm); border-radius: var(--radius-md); overflow: hidden; } .chip-float { position: absolute; top: 0.75rem; left: 0.75rem; backdrop-filter: blur(8px); } .card-body { padding: 1.15rem 1.25rem 0.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .card-body > .chip { align-self: flex-start; } .card-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0; } .card-title a { color: inherit; text-decoration: none; } .card:hover .card-title a { color: var(--primary-container); } .card-excerpt { margin: 0; font-size: 14px; line-height: 1.65; color: var(--on-surface-variant); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: auto; padding: 0.7rem 1.25rem; border-top: 1px solid var(--outline-variant); color: var(--on-surface-variant); } .card-go { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--on-surface-variant); transition: background 0.16s ease, color 0.16s ease; } .card-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .card-go:hover { background: rgba(124, 58, 237, 0.14); color: var(--primary-container); } /* --------------------------------------------------------------- articles */ .post-head { padding-block: clamp(2.5rem, 5vw, 4rem) var(--space-md); } .post-kicker { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 var(--space-sm); } .post-title { font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 3vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; margin: 0; } .post-standfirst { font-size: 19px; line-height: 1.65; color: var(--on-surface-variant); margin: var(--space-sm) 0 0; max-width: 60ch; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: var(--space-md); color: var(--on-surface-variant); text-transform: uppercase; } .meta-sep { opacity: 0.45; } .post-hero { margin: 0 0 var(--space-lg); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--glow); background: #070a14; } .post-hero .thumb-img { display: block; width: 100%; object-fit: cover; } .post-hero figcaption { padding: 0.75rem 1rem; color: var(--on-surface-variant); background: var(--glass-fill); } .post-layout { padding-bottom: var(--space-xl); } .toc { padding: 1.1rem 1.35rem; margin-bottom: var(--space-lg); } .toc-title { text-transform: uppercase; color: var(--on-surface-variant); margin: 0 0 0.5rem; } .toc ul { margin: 0; padding-left: 1.1rem; } .toc > ul { padding-left: 1rem; } .toc li { margin: 0.25rem 0; } .toc a { font-size: 14px; color: var(--on-surface); text-decoration: none; } .toc a:hover { color: var(--primary-container); text-decoration: underline; } /* ------------------------------------------------------------------ prose */ .prose { font-size: 17px; line-height: 1.75; } .prose > * + * { margin-top: 1.35rem; } .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.25; margin-top: 2.75rem; scroll-margin-top: 96px; } .prose h2 { font-size: 1.6rem; font-weight: 700; } .prose h3 { font-size: 1.25rem; font-weight: 600; } .prose h4 { font-size: 1.05rem; font-weight: 600; } .heading-anchor { margin-left: 0.45rem; font-weight: 400; color: var(--outline); text-decoration: none; opacity: 0; transition: opacity 0.16s ease; } .prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .prose h4:hover .heading-anchor, .heading-anchor:focus { opacity: 1; } .prose ul, .prose ol { padding-left: 1.35rem; } .prose li + li { margin-top: 0.4rem; } .prose li::marker { color: var(--primary-container); } .prose blockquote { margin-inline: 0; padding: 1rem 1.35rem; border-left: 3px solid var(--primary-container); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--glass-fill); color: var(--on-surface-variant); font-size: 16px; } .prose blockquote > :first-child { margin-top: 0; } .prose img { border-radius: var(--radius-md); border: 1px solid var(--glass-border); } .prose hr { border: 0; height: 1px; margin: var(--space-lg) 0; background: linear-gradient(90deg, transparent, var(--outline-variant) 20%, var(--outline-variant) 80%, transparent); } .prose mark { background: rgba(251, 146, 60, 0.32); color: inherit; padding: 0.05em 0.25em; border-radius: var(--radius-sm); } .prose a { text-decoration-thickness: 1px; } .prose a:hover { text-decoration-thickness: 2px; } /* External links open in a new tab, so say so rather than surprising the reader. inline-block stops the parent's underline running through the glyph. */ .prose a[target="_blank"]::after { content: "\2197"; display: inline-block; margin-left: 0.12em; font-size: 0.78em; vertical-align: 0.18em; color: var(--on-surface-variant); text-decoration: none; } code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); padding: 0.12em 0.35em; } pre { background: #0b1120; border: 1px solid rgba(196, 181, 253, 0.2); border-radius: var(--radius-md); padding: 1.15rem 1.35rem; overflow-x: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } pre code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.7; color: #e2e8f0; } .table-wrap { overflow-x: auto; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); background: var(--glass-fill); } table { border-collapse: collapse; width: 100%; font-size: 15px; } th, td { padding: 0.7rem 0.95rem; text-align: left; border-bottom: 1px solid var(--outline-variant); } th { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); background: var(--surface-container-low); } tbody tr:last-child td { border-bottom: 0; } .post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--outline-variant); } .post-tags-label { text-transform: uppercase; color: var(--on-surface-variant); } /* --------------------------------------------------------------- post nav */ .post-nav { display: grid; gap: var(--gutter); padding-bottom: var(--space-xl); } .post-nav-item { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.35rem; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .post-nav-item:hover { transform: translateY(-3px); box-shadow: var(--glow); border-color: var(--glass-ring); } .post-nav-next { text-align: right; } .post-nav-label { text-transform: uppercase; color: var(--on-surface-variant); } .post-nav-title { font-family: var(--font-display); font-weight: 600; line-height: 1.3; } /* ------------------------------------------------------------- taxonomies */ .term-grid { display: grid; gap: var(--gutter); list-style: none; margin: 0; padding: 0; } .term-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.35rem; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .term-card:hover { transform: translateY(-3px); box-shadow: var(--glow); border-color: var(--glass-ring); } .term-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; } .term-count { color: var(--on-surface-variant); text-transform: uppercase; } .term-bar { display: block; height: 4px; margin-top: 0.35rem; background: var(--surface-container); border-radius: var(--radius-full); overflow: hidden; } .term-bar-fill { display: block; height: 100%; border-radius: var(--radius-full); } .term-bar-violet { background: linear-gradient(90deg, var(--primary), var(--primary-bright)); } .term-bar-teal { background: linear-gradient(90deg, var(--tertiary-container), #5eead4); } .term-bar-orange { background: linear-gradient(90deg, #ea580c, var(--secondary-container)); } .term-bar-lime { background: linear-gradient(90deg, var(--lime-container), #a3e635); } /* ---------------------------------------------------------------- logbook */ .year-jump { display: flex; gap: 0.75rem; flex-wrap: wrap; } .year-jump a { color: var(--on-surface-variant); text-decoration: none; padding: 0.35rem 0.6rem; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); } .year-jump a:hover { color: var(--primary-container); border-color: var(--primary-container); } .log-year + .log-year { margin-top: var(--space-lg); } .log-year-title { display: flex; align-items: baseline; gap: 0.75rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--space-sm); padding-bottom: 0.6rem; border-bottom: 1px solid var(--outline-variant); scroll-margin-top: 96px; } .log-year-count { color: var(--on-surface-variant); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); padding: 0.15rem 0.5rem; } .log-list { list-style: none; margin: 0; padding: 0; } .log-row { display: grid; grid-template-columns: 4.5rem auto 1fr auto; align-items: center; gap: 0.9rem; padding: 0.7rem 0.5rem; border-radius: var(--radius); transition: background 0.16s ease; } .log-row:hover { background: var(--glass-fill); } .log-date, .log-time { color: var(--on-surface-variant); text-transform: uppercase; } .log-title { font-weight: 500; color: var(--on-surface); text-decoration: none; } .log-row:hover .log-title { color: var(--primary-container); } /* ----------------------------------------------------------------- footer */ .site-footer { margin-top: var(--space-xl); background: var(--surface-container-lowest); border-top: 1px solid var(--outline-variant); } .footer-grid { display: grid; gap: var(--space-lg); padding-block: var(--space-xl) var(--space-lg); } .footer-blurb { color: var(--on-surface-variant); font-size: 14px; max-width: 34ch; margin: var(--space-sm) 0 0; } .footer-social { display: flex; gap: 1rem; list-style: none; margin: var(--space-sm) 0 0; padding: 0; font-size: 14px; } .footer-col-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface); margin: 0 0 var(--space-sm); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .footer-col a { font-size: 14px; color: var(--on-surface-variant); text-decoration: none; } .footer-col a:hover { color: var(--primary-container); } .footer-base { padding-block: var(--space-md); border-top: 1px solid var(--outline-variant); text-align: center; color: var(--on-surface-variant); } .footer-base p { margin: 0; } /* ------------------------------------------------------------- pagination */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--outline-variant); } .pagination-status { color: var(--on-surface-variant); text-transform: uppercase; } .notfound { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); } .notfound .hero-body, .notfound .hero-actions { margin-inline: auto; } .notfound .hero-actions { justify-content: center; } .notfound-title { margin-inline: auto; } .notfound-title .gradient-text { display: inline; } /* ------------------------------------------------------------ breakpoints */ @media (max-width: 1024px) { .card-grid { columns: 2; } } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } .post-nav { grid-template-columns: 1fr 1fr; } .term-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } @media (max-width: 899px) { .primary-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: var(--space-sm) var(--margin) var(--space-md); /* Opaque, not glass: this panel sits inside the header's own composited layer, so backdrop-filter cannot blur the page content beneath it. */ background: var(--surface-container-lowest); border-bottom: 1px solid var(--outline-variant); box-shadow: var(--glow-soft); display: none; } .primary-nav.is-open { display: block; } .primary-nav ul { flex-direction: column; gap: 0.25rem; } .primary-nav a { display: block; padding: 0.6rem 0; font-size: 15px; } .nav-toggle { display: flex; } .search input { width: 44px; padding-right: 0.75rem; cursor: pointer; } .search input:focus { width: min(60vw, 240px); } .search kbd { display: none; } } @media (max-width: 560px) { /* The header runs out of room before anything else does. */ .header-inner { gap: 0.75rem; } .header-actions { gap: 0.5rem; } .wordmark { font-size: 15px; } } @media (max-width: 700px) { .card-grid { columns: 1; } .header-inner { gap: 0.5rem; } .log-row { grid-template-columns: 4rem 1fr; row-gap: 0.3rem; } .log-chip { grid-column: 1; } .log-title { grid-column: 2; } .log-time { display: none; } .post-nav-next { text-align: left; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media print { .site-header, .site-footer, .aurora, .post-nav, .segmented, .skip-link { display: none !important; } body::before { display: none; } body { background: #fff; color: #000; } .prose { font-size: 12pt; } }