/* ========================================================================== AstroChris — main.css The whole design system. There is no build step: this file is the entire stylesheet for the site, loaded by every page (SSR and static alike). Contents 1. Fonts 2. Design tokens 3. Reset and base 4. Skip link and focus 5. Starfield background 6. Layout: containers, sections, grids, stacks 7. Site header and navigation 8. Site footer 9. Hero and page headings 10. Buttons 11. Chips and badges 12. Cards and the photo grid 13. Panels 14. Data lists 15. Stats strip 16. Prose 17. Forms 18. Notices, empty states, breadcrumbs 19. Utilities 20. Reduced motion and print ========================================================================== */ /* ---------------------------------------------------------------- 1. Fonts */ /* Self-hosted (Phase 0 item 6). Both files are variable, latin subset only. Preloaded in lib/head.js and in the of every static page. */ @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-latin-var.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------- 2. Design tokens */ :root { /* Surfaces — near-black, blue-tinted night sky */ --bg: #05070e; --bg-deep: #03040a; --surface: #0b1120; --surface-2: #101829; --panel: rgba(16, 24, 41, 0.72); --panel-solid: #101829; --overlay: rgba(3, 4, 10, 0.82); /* Lines */ --border: rgba(146, 170, 214, 0.14); --border-strong: rgba(146, 170, 214, 0.28); /* Ink */ --text: #e7ecf7; --text-muted: #99a5c0; --text-dim: #6c799a; /* One warm accent, used sparingly */ --accent: #f0a95f; --accent-strong: #ffc386; --accent-soft: rgba(240, 169, 95, 0.14); --accent-line: rgba(240, 169, 95, 0.42); --accent-ink: #1c1105; /* Support hues for chips only */ --hue-galaxy: #b08bf0; --hue-nebula: #f2789a; --hue-cluster: #61c9e8; --hue-planetary: #5fe0b4; --hue-lunar: #cfd6e6; --hue-solar: #ffcf4a; --hue-widefield: #8fa5d8; --hue-comet: #7fe3a1; /* State */ --danger: #ff7a7a; --success: #66d19e; /* Spacing scale */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5rem; /* Type */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.125rem; --step-2: clamp(1.25rem, 0.5vw + 1.1rem, 1.4rem); --step-3: clamp(1.5rem, 1vw + 1.25rem, 1.85rem); --step-4: clamp(1.9rem, 2vw + 1.4rem, 2.6rem); --step-5: clamp(2.4rem, 4vw + 1.4rem, 4rem); /* Shape */ --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 12px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); /* Layout */ --container: 1140px; --container-narrow: 720px; --container-wide: 1340px; --header-height: 64px; --transition: 160ms ease; } /* ------------------------------------------------------- 3. Reset and base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--space-sm); text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p, ul, ol, dl, figure, table { margin: 0 0 var(--space-sm); } a { color: var(--accent); text-decoration-color: var(--accent-line); text-underline-offset: 0.18em; transition: color var(--transition); } a:hover { color: var(--accent-strong); } img, picture, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-lg) 0; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } small { font-size: var(--step--1); } ::selection { background: var(--accent-soft); color: var(--accent-strong); } /* --------------------------------------------------- 4. Skip link and focus */ .skip-link { position: absolute; left: var(--space-sm); top: -100%; z-index: 100; padding: 0.6rem 1rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; } .skip-link:focus { top: var(--space-sm); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 3px; } /* Never remove the outline without replacing it. */ :focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------ 5. Starfield background */ /* Pure CSS: three layers of radial-gradient "stars" over a soft nebular glow. Fixed, behind everything, aria-hidden in the markup. All motion is switched off under prefers-reduced-motion (section 20). */ .starfield { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(1200px 700px at 78% -8%, rgba(58, 78, 130, 0.30), transparent 62%), radial-gradient(900px 620px at 12% 6%, rgba(88, 54, 116, 0.22), transparent 60%), linear-gradient(180deg, #070b16 0%, var(--bg) 42%, var(--bg-deep) 100%); } .starfield__layer { position: absolute; inset: -50% -10%; background-repeat: repeat; will-change: transform; } .starfield__layer--far { opacity: 0.5; background-image: radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 90px 140px, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1px 1px at 160px 60px, rgba(212, 226, 255, 0.6), transparent), radial-gradient(1px 1px at 230px 190px, rgba(255, 255, 255, 0.45), transparent); background-size: 260px 240px; animation: starfield-drift 260s linear infinite; } .starfield__layer--mid { opacity: 0.55; background-image: radial-gradient(1.4px 1.4px at 40px 90px, rgba(255, 255, 255, 0.85), transparent), radial-gradient(1.2px 1.2px at 190px 40px, rgba(226, 236, 255, 0.7), transparent), radial-gradient(1.2px 1.2px at 300px 220px, rgba(255, 240, 214, 0.65), transparent); background-size: 420px 380px; animation: starfield-drift 180s linear infinite reverse; } .starfield__layer--near { opacity: 0.7; background-image: radial-gradient(2px 2px at 120px 160px, rgba(255, 246, 230, 0.95), transparent), radial-gradient(1.8px 1.8px at 480px 90px, rgba(214, 232, 255, 0.8), transparent), radial-gradient(1.6px 1.6px at 620px 320px, rgba(255, 255, 255, 0.75), transparent); background-size: 760px 620px; animation: starfield-twinkle 7s ease-in-out infinite alternate; } .starfield__glow { position: absolute; left: 50%; top: -30vh; width: 140vmax; height: 90vmax; transform: translateX(-50%) rotate(-18deg); background: radial-gradient( ellipse at center, rgba(120, 150, 220, 0.10) 0%, rgba(120, 150, 220, 0.04) 38%, transparent 70% ); filter: blur(6px); } @keyframes starfield-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-260px, 140px, 0); } } @keyframes starfield-twinkle { from { opacity: 0.45; } to { opacity: 0.8; } } /* --------------------------------------------------------------- 6. Layout */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-sm); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); } .site-main { flex: 1 0 auto; outline: none; } .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-lg); } .section--flush { padding-block-start: 0; } .section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); } .section__title { margin: 0; font-size: var(--step-3); } .section__link { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } /* Vertical rhythm helper: spaces direct children. */ .stack > * + * { margin-top: var(--space-sm); } .stack--lg > * + * { margin-top: var(--space-md); } .grid { display: grid; gap: var(--space-md); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; } /* ------------------------------------------- 7. Site header and navigation */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(5, 7, 14, 0.72); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); } .site-header__inner { min-height: var(--header-height); display: flex; align-items: center; gap: var(--space-md); } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.075rem; letter-spacing: -0.01em; white-space: nowrap; } .brand:hover { color: var(--text); } .brand:hover .brand__mark { color: var(--accent-strong); } .brand__mark { color: var(--accent); flex: none; transition: color var(--transition); } .brand__text { display: inline-block; } .nav { margin-left: auto; } .nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-2xs); } .nav__link { display: block; padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--transition), background-color var(--transition); } .nav__link:hover { color: var(--text); background: rgba(146, 170, 214, 0.08); } .nav__link--active { color: var(--accent); background: var(--accent-soft); } .nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; align-items: center; justify-content: center; } .nav-toggle:hover { border-color: var(--border-strong); } /* Three-bar icon drawn with a single element plus its pseudo-elements. */ .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .site-header.is-open .nav-toggle__bars { background: transparent; } .site-header.is-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .site-header.is-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } .site-header__slot { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--step--1); color: var(--text-muted); } .site-header__slot[hidden] { display: none; } @media (max-width: 900px) { .nav-toggle { display: inline-flex; } .nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: var(--space-2xs) var(--space-sm) var(--space-sm); background: rgba(6, 9, 18, 0.97); border-bottom: 1px solid var(--border); display: none; } .site-header.is-open .nav { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .nav__link { padding: 0.7rem 0.75rem; font-size: 1rem; } .site-header__slot { display: none; } } /* -------------------------------------------------------- 8. Site footer */ .site-footer { flex: none; margin-top: var(--space-2xl); padding-block: var(--space-lg); border-top: 1px solid var(--border); background: rgba(5, 7, 14, 0.6); color: var(--text-muted); font-size: var(--step--1); } .site-footer__inner { display: flex; flex-direction: column; gap: var(--space-xs); } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); } .footer-nav__link { color: var(--text-muted); text-decoration: none; } .footer-nav__link:hover { color: var(--accent); text-decoration: underline; } .site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); margin: 0; } .site-footer__sep { color: var(--text-dim); } .site-footer__credit { margin: 0; color: var(--text-dim); } .site-footer__credit a { color: var(--text-muted); } /* ------------------------------------------- 9. Hero and page headings */ .hero { position: relative; padding-block: clamp(var(--space-xl), 9vw, var(--space-2xl)); } .hero__inner { max-width: 46rem; } .eyebrow { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .hero__title { font-size: var(--step-5); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 var(--space-sm); } .hero__tagline, .lede { font-size: var(--step-2); line-height: 1.5; color: var(--text-muted); max-width: 42rem; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); } .page-title { font-size: var(--step-4); margin-bottom: var(--space-xs); } /* -------------------------------------------------------------- 10. Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.15rem; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--text); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .btn--primary:hover { background: var(--accent-strong); color: var(--accent-ink); } .btn--ghost { border-color: var(--border-strong); color: var(--text); } .btn--ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); } .btn--quiet { padding-inline: 0.5rem; color: var(--text-muted); } .btn--quiet:hover { color: var(--text); } .btn--small { padding: 0.35rem 0.8rem; font-size: var(--step--1); } .btn--block { width: 100%; } /* --------------------------------------------------- 11. Chips and badges */ /* One chip per object type. The set is closed: it must match the photos.object_type vocabulary in schema.sql. Adding a value to the database without adding a rule here renders an unstyled chip. */ .chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.62rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: rgba(146, 170, 214, 0.08); color: var(--text-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } a.chip:hover { border-color: currentColor; } .chip--galaxy { color: var(--hue-galaxy); border-color: color-mix(in srgb, var(--hue-galaxy) 40%, transparent); background: color-mix(in srgb, var(--hue-galaxy) 12%, transparent); } .chip--nebula { color: var(--hue-nebula); border-color: color-mix(in srgb, var(--hue-nebula) 40%, transparent); background: color-mix(in srgb, var(--hue-nebula) 12%, transparent); } .chip--cluster { color: var(--hue-cluster); border-color: color-mix(in srgb, var(--hue-cluster) 40%, transparent); background: color-mix(in srgb, var(--hue-cluster) 12%, transparent); } .chip--planetary { color: var(--hue-planetary); border-color: color-mix(in srgb, var(--hue-planetary) 40%, transparent); background: color-mix(in srgb, var(--hue-planetary) 12%, transparent); } .chip--lunar { color: var(--hue-lunar); border-color: color-mix(in srgb, var(--hue-lunar) 40%, transparent); background: color-mix(in srgb, var(--hue-lunar) 12%, transparent); } .chip--solar { color: var(--hue-solar); border-color: color-mix(in srgb, var(--hue-solar) 40%, transparent); background: color-mix(in srgb, var(--hue-solar) 12%, transparent); } .chip--widefield { color: var(--hue-widefield); border-color: color-mix(in srgb, var(--hue-widefield) 40%, transparent); background: color-mix(in srgb, var(--hue-widefield) 12%, transparent); } .chip--comet { color: var(--hue-comet); border-color: color-mix(in srgb, var(--hue-comet) 40%, transparent); background: color-mix(in srgb, var(--hue-comet) 12%, transparent); } /* Neutral inline marker: counts, "new", "draft". */ .badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: rgba(146, 170, 214, 0.12); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; } .badge--accent { background: var(--accent-soft); color: var(--accent); } /* ------------------------------------------- 12. Cards and the photo grid */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; } .photo-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); } .card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); } .card:focus-within { border-color: var(--accent-line); } .card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, #0d1424, #070b14); } .card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; } .card:hover .card__img { transform: scale(1.03); } .card__chip { position: absolute; left: var(--space-2xs); top: var(--space-2xs); z-index: 1; } .card__body { display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-sm); } .card__title { margin: 0; font-size: var(--step-1); font-weight: 600; line-height: 1.3; } .card__title a { color: var(--text); text-decoration: none; } .card__title a:hover { color: var(--accent-strong); } /* Makes the whole card clickable while keeping one real link for a11y. */ .card__title a::after { content: ''; position: absolute; inset: 0; } .card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; color: var(--text-dim); font-size: var(--step--1); } .card__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; } /* Skeleton shown while JS loads data. */ .card--skeleton { min-height: 260px; background: linear-gradient(100deg, rgba(146, 170, 214, 0.05), rgba(146, 170, 214, 0.11), rgba(146, 170, 214, 0.05)); background-size: 300% 100%; animation: card-shimmer 1.6s ease-in-out infinite; } @keyframes card-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ---------------------------------------------------------------- 13. Panels */ .panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); padding: var(--space-md); } .panel--flush { padding: 0; overflow: hidden; } .panel--accent { border-color: var(--accent-line); background: var(--accent-soft); } .panel__title { margin: 0 0 var(--space-xs); font-size: var(--step-1); font-weight: 600; letter-spacing: 0.01em; } .panel__body > :last-child { margin-bottom: 0; } .panel__foot { margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--text-muted); } /* ------------------------------------------------------------ 14. Data lists */ /* Acquisition data, object facts, gear specs — a
. */ .data-list { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr; gap: 0.4rem var(--space-sm); margin: 0; font-size: 0.9375rem; } .data-list dt { margin: 0; color: var(--text-dim); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 0.12rem; } .data-list dd { margin: 0; color: var(--text); } /* One column on narrow screens, and as an opt-in on wide ones. */ .data-list--stacked { grid-template-columns: 1fr; gap: 0.1rem; } .data-list--stacked dd { margin-bottom: var(--space-2xs); } @media (max-width: 520px) { .data-list { grid-template-columns: 1fr; gap: 0.1rem; } .data-list dd { margin-bottom: var(--space-2xs); } } /* --------------------------------------------------------- 15. Stats strip */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; } .stat { padding: var(--space-sm) var(--space-xs); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); text-align: center; } .stat__value { display: block; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; } .stat__label { display: block; margin-top: 0.2rem; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } /* ----------------------------------------------------------------- 16. Prose */ /* Long-form body copy: about page, licence page, blog posts, object writeups. */ .prose { max-width: 40rem; font-size: var(--step-1); line-height: 1.75; color: var(--text-muted); } .prose > * + * { margin-top: var(--space-sm); } .prose h2 { margin-top: var(--space-lg); font-size: var(--step-3); color: var(--text); } .prose h3 { margin-top: var(--space-md); font-size: var(--step-2); color: var(--text); } .prose strong { color: var(--text); font-weight: 600; } .prose ul, .prose ol { padding-left: 1.35rem; } .prose li + li { margin-top: 0.35rem; } .prose blockquote { margin: var(--space-md) 0; padding-left: var(--space-sm); border-left: 2px solid var(--accent-line); color: var(--text); font-style: italic; } .prose figure { margin: var(--space-md) 0; } .prose figcaption { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--text-dim); } .prose pre { overflow-x: auto; padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-deep); font-size: 0.875rem; line-height: 1.5; } /* ----------------------------------------------------------------- 17. Forms */ .field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--space-sm); } .label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); } .input, .textarea, .select { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: rgba(3, 5, 12, 0.6); color: var(--text); font-size: 0.9375rem; transition: border-color var(--transition), background-color var(--transition); } .input::placeholder, .textarea::placeholder { color: var(--text-dim); } .input:hover, .textarea:hover, .select:hover { border-color: var(--accent-line); } .textarea { min-height: 8rem; resize: vertical; line-height: 1.6; } .select { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-sm); } .help { font-size: var(--step--1); color: var(--text-dim); } .error { font-size: var(--step--1); color: var(--danger); } /* The inline sign-in form built by js/auth-form.js, mounted in the comment box (photo pages) and in the admin session banner. Narrow on purpose: an email and a password do not need the width of the page, and a full-bleed text input reads as a search box. The .field margin is dropped because the form is a .stack and the stack already owns the rhythm. */ .auth-form { max-width: 24rem; } .auth-form .field { margin-bottom: 0; } /* -------------------------------- 18. Notices, empty states, breadcrumbs */ .notice { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-strong); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--panel); font-size: 0.9375rem; } .notice--error { border-left-color: var(--danger); } .notice--success { border-left-color: var(--success); } .notice--accent { border-left-color: var(--accent); } .empty { padding: var(--space-lg) var(--space-sm); border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-dim); text-align: center; } .empty__title { margin: 0 0 var(--space-3xs); font-family: var(--font-display); font-size: var(--step-1); color: var(--text-muted); } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 var(--space-sm); padding: 0; list-style: none; font-size: var(--step--1); color: var(--text-dim); } .breadcrumbs__item { display: inline-flex; align-items: center; gap: 0.4rem; } .breadcrumbs__item + .breadcrumbs__item::before { content: '/'; color: var(--text-dim); opacity: 0.6; } .breadcrumbs a { color: var(--text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--accent); } /* -------------------------------------------------------------- 19. Utilities */ .u-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; } .u-hidden { display: none !important; } .u-muted { color: var(--text-muted); } .u-dim { color: var(--text-dim); } .u-accent { color: var(--accent); } .u-center { text-align: center; } .u-nowrap { white-space: nowrap; } .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .u-flow > * + * { margin-top: var(--space-sm); } .u-mt-0 { margin-top: 0 !important; } .u-mb-0 { margin-bottom: 0 !important; } /* --------------------------------------------- 20. Reduced motion and print */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Stop the starfield entirely rather than leaving it mid-drift. */ .starfield__layer { animation: none !important; transform: none !important; } .card:hover, .btn:hover { transform: none; } .card:hover .card__img { transform: none; } } @media print { .starfield, .site-header, .site-footer, .skip-link { display: none !important; } body { background: #fff; color: #000; } a { color: #000; } }