/* Shared frontend design system for application views. */ :root { --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --gap-sm: clamp(0.5rem, 1.2vw, 1rem); --gap-md: clamp(0.75rem, 2vw, 1.5rem); --gap-lg: clamp(1rem, 3vw, 2.25rem); --radius-sm: 6px; --radius-md: 8px; --border-radius: var(--radius-md); --header-h: 64px; --content-max: 1200px; --card-min: 260px; --fg: #111; --muted: #6b7280; --border: #d1d5db; --bg: #fff; --card-bg: #fff; --chip-bg: #f9fafb; --grid-line: rgba(0, 0, 0, 0.05); --header-bg: #000; --header-fg: #fff; --nav-menu-w: min(260px, calc(100vw - 2rem)); --accent: #c2410c; --danger: #dc2626; --success: #15803d; } [data-theme="dark"] { --fg: #f5f5f5; --muted: #a3a3a3; --border: #404040; --bg: #0a0a0a; --card-bg: #1a1a1a; --chip-bg: #262626; --grid-line: rgba(255, 255, 255, 0.05); --header-bg: #171717; --header-fg: #f5f5f5; --accent: #fb923c; --danger: #f87171; --success: #86efac; } html[data-theme="dark"], html[data-theme="dark"][data-palette] { --fg: #f5f5f5; --ink: #f5f5f5; --muted: #a3a3a3; --border: #404040; --line: #404040; --bg: #0a0a0a; --card-bg: #1a1a1a; --card: #1a1a1a; --chip-bg: #262626; --grid-line: rgba(255, 255, 255, 0.05); --header-bg: #171717; --header-fg: #f5f5f5; --about-link-bg: #262626; --accent: #f5f5f5; --danger: #f87171; --success: #86efac; } /* --------------------------------------------------------------------------- Section sub-site palettes Set via `data-palette` on when the page is served from one of the standalone section subdomains. Same layout / components, different accent: inventories -> green (also used for account results) articles -> red, over a faint "almost see-through" red surface tools -> orange (matches the default portfolio accent) Attribute selectors share :root's specificity but come later, so they win in light mode; the dark-theme blocks above are more specific and still win in dark mode. --------------------------------------------------------------------------- */ html[data-subsite="inventories"] { --accent: #15803d; --header-bg: #15803d; /* green top bar */ --bg: #f1faf5; /* faint green page wash */ --grid-line: rgba(21, 128, 61, 0.07); } html[data-subsite="articles"] { --accent: #c0392b; --header-bg: #c0392b; /* red top bar */ --bg: #fdf1f1; /* light red, almost see-through */ --chip-bg: #fbe9e9; --grid-line: rgba(192, 57, 43, 0.07); } html[data-subsite="tools"] { --accent: #1565c0; --header-bg: #1565c0; /* blue top bar */ --bg: #f1f6fc; /* faint blue page wash */ --grid-line: rgba(21, 101, 192, 0.07); } /* Accent the few monochrome touch-points the home layout exposes. */ html[data-subsite] .content-card:hover { border-color: var(--accent); } html[data-subsite] .h2-icon { color: var(--accent); } /* On the full portfolio, keep the section icons monochrome (no accent tint). */ html:not([data-subsite]) .h2-icon { color: var(--fg); } /* Sign-in (saved results) pill — slides its label out on hover/focus, matching the "Buy me a coffee" button. */ .signin-toggle { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0 0.5rem; border-radius: 999px; border: 1px solid transparent; background: var(--card-bg); color: var(--fg); cursor: pointer; white-space: nowrap; transition: background 0.15s ease; } .signin-toggle:hover { background: var(--chip-bg); } .signin-toggle .signin-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .signin-toggle .signin-text { max-width: 0; opacity: 0; overflow: hidden; margin-left: 0; font-size: 0.85rem; font-weight: 600; transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease; } .signin-toggle:hover .signin-text, .signin-toggle:focus-visible .signin-text { max-width: 200px; opacity: 1; margin-left: 0.4rem; } /* Subtle hover highlight on the nav menu links. */ header.app-header > nav a.nav-link { border-radius: var(--radius-sm); padding: 0.4rem 0.55rem; transition: background 0.15s ease, color 0.15s ease; } header.app-header > nav a.nav-link:hover { background: var(--chip-bg); color: var(--accent); } @font-face { font-family: "Space Grotesk"; font-weight: 400 900; font-style: normal; src: url("/assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"); } *, *::before, *::after { box-sizing: border-box; } * { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; } html { width: 100%; min-width: 0; min-height: 100%; margin: 0; padding: 0; scroll-padding-top: var(--header-h); } body { width: 100%; min-height: 100dvh; margin: 0; color: var(--fg); background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 8px 8px; overflow-x: hidden; font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif; } body::before { content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0; backdrop-filter: blur(0); background: rgba(0, 0, 0, 0); transition: opacity 0.14s ease, backdrop-filter 0.14s ease, background-color 0.14s ease; } body:has(> header.open)::before { pointer-events: auto; opacity: 1; backdrop-filter: blur(9px); background: rgba(0, 0, 0, 0.22); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } .app-header, body > header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; min-width: 100%; max-width: 100vw; height: var(--header-h); min-height: var(--header-h); background-color: var(--header-bg); color: var(--header-fg); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); padding: 0 clamp(0.75rem, 3vw, 2rem); } .header-left, .header-right { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .brand { color: var(--header-fg); font-weight: 700; white-space: nowrap; } header > nav, .app-nav { position: fixed; right: 1rem; bottom: calc(1rem + 46px); z-index: 120; display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-2); width: var(--nav-menu-w); max-width: calc(100vw - 2rem); max-height: calc(100dvh - var(--header-h) - 3.5rem); overflow-y: auto; border: 2px solid #000; border-radius: var(--border-radius); padding: var(--space-2); background: var(--card-bg); color: var(--fg); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0) scale(0.98); transform-origin: 100% 100%; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease; } header > nav > a, .app-header > nav > a, header > nav > button, .app-header > nav > button, .nav-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.5rem; color: var(--fg); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; font-size: 0.9rem; text-align: left; transition: color 0.15s ease, background-color 0.15s ease; } /*header > nav > a:hover, header > nav > button:hover, .nav-link:hover { color: var(--fg); background-color: var(--chip-bg); } */ header > nav > form, .app-header > nav > form { display: flex; width: 100%; margin: 0; } header.open > nav, header.open .app-nav, header > nav.open, .app-nav.open { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; } header > nav svg, .app-nav svg, .icon-btn svg, .button svg { color: currentColor; fill: none; stroke: currentColor; } #nav-toggle, .nav-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 130; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; min-height: 38px; border: 2px solid #000; border-radius: var(--border-radius); padding: 0.35rem; background: var(--card-bg); color: var(--fg); } #section-nav-toggle { display: none !important; } .theme-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 0.25rem 0.55rem 0.25rem 0.3rem; background: rgba(255, 255, 255, 0.08); color: var(--header-fg); font-size: 0.8rem; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.16); } .theme-toggle #theme-label, .theme-toggle .theme-label { position: absolute; top: 50%; left: 0; right: calc(100% + 0.45rem); min-width: max-content; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.55rem; background: var(--card-bg); color: var(--fg); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); opacity: 0; transform: translate3d(0.4rem, -50%, 0); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease, left 0.16s ease, right 0.16s ease; } .theme-toggle:hover #theme-label, .theme-toggle:focus-visible #theme-label, .theme-toggle:hover .theme-label, .theme-toggle:focus-visible .theme-label { opacity: 1; transform: translate3d(100%, -50%, 0); } [data-theme="dark"] .theme-toggle #theme-label, [data-theme="dark"] .theme-toggle .theme-label { right: auto; left: calc(100% + 0.45rem); transform: translate3d(-0.4rem, -50%, 0); } [data-theme="dark"] .theme-toggle:hover #theme-label, [data-theme="dark"] .theme-toggle:focus-visible #theme-label, [data-theme="dark"] .theme-toggle:hover .theme-label, [data-theme="dark"] .theme-toggle:focus-visible .theme-label { transform: translate3d(0, -50%, 0); } .theme-toggle .knob { width: 22px; height: 22px; border-radius: 999px; background: #fff; color: #111; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease-in-cubic); } .theme-toggle .knob svg { width: 14px; height: 14px; } .theme-toggle .theme-sun { display: none; } [data-theme="dark"] .theme-toggle .theme-sun { display: block; } [data-theme="dark"] .theme-toggle .theme-moon { display: none; } [data-theme="dark"] .theme-toggle .knob { background: #111; color: #fff; transform: rotate(180deg); } .button, .btn, .icon-btn, .topic-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 36px; border: 2px solid var(--fg); border-radius: var(--radius-sm); padding: 0.45rem 0.85rem; background: var(--card-bg); color: var(--fg); font-size: 0.9rem; font-weight: 600; line-height: 1.1; text-align: center; transition: filter 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .button:hover, .btn:hover, .topic-toggle:hover { filter: invert(1); } .button.is-active, .btn.primary, .topic-toggle.is-active { background: var(--fg); color: var(--bg); } .app-shell { display: flex; flex-direction: column; gap: var(--gap-md); width: 100%; min-height: calc(100dvh - var(--header-h)); padding-top: var(--header-h); } .app-shell.is-contained, .page-shell { max-width: var(--content-max); margin: 0 auto; padding-right: clamp(1rem, 4vw, 2.5rem); padding-left: clamp(1rem, 4vw, 2.5rem); } .app-section, section { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: clamp(2rem, 3vw, 4rem) clamp(1rem, 2vw, 2.5rem); padding-top:2vh; /* scroll-margin-top: var(--header-h);*/ display: flex; flex-direction: column; gap: var(--gap-md); } .inner-section-main-header, .page-header { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; } .inner-section-main-header h1, .inner-section-main-header h2, .page-header h1, .page-header h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.15; } .inner-section-main-header > p, .page-header p, .muted { color: var(--muted); } .section-inner.card-grid, .card-grid { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); width: 100%; } .content-card, .ui-card { position: relative; min-width: 0; min-height: 220px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--card-bg); color: var(--fg); display: flex; flex-direction: column; gap: var(--space-3); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .content-card:hover, .ui-card:hover { border-color: rgb(120, 120, 120); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .content-card.is-hidden, .content-card.is-search-miss, .content-card.is-section-miss, .content-card.is-collapsed { display: none !important; } .content-card.is-search-hit { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; } .content-card-top-row, .card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .content-card-middle-row { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); } .content-card-bottom-row { display: flex; flex-direction: column; gap: 0.4rem; } .content-card-info { display: flex; align-items: center; gap: 0.4rem; min-width: 0; } .content-card-info.name h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; } .content-card-info.blurb { color: var(--fg); font-size: 0.9rem; line-height: 1.4; opacity: 0.85; } .content-card-info.type p, .content-card-info.type strong, .status-badge, .pill { display: inline-flex; align-items: center; width: fit-content; border: 1px solid currentColor; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; } .topic-toggle-cont, .filter-row, .controls, .actions, .modal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .topic-toggle-cont { overflow: visible; align-items: center; justify-content: space-between; } .filter-dd { position: relative; display: inline-block; } .filter-dd-toggle { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .filter-dd-toggle .dd-caret { font-size: 0.7rem; transition: transform 0.15s ease; } .filter-dd.open .filter-dd-toggle .dd-caret { transform: rotate(180deg); } .filter-dd-menu { position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 140; min-width: 200px; max-width: min(320px, calc(100vw - 1.5rem)); max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--border-radius); padding: 0.35rem; background: var(--card-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .filter-dd-opt { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-sm); padding: 0.4rem 0.55rem; color: var(--fg); cursor: pointer; font-size: 0.85rem; white-space: nowrap; } .filter-dd-opt:hover { background: var(--chip-bg); } .filter-dd-opt input { flex: none; width: auto; margin: 0; cursor: pointer; } .topic-search, .section-search { flex: 1 1 180px; min-width: 150px; max-width: 320px; margin-left: auto; margin-top: 0; border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.75rem; background: var(--card-bg); color: var(--fg); font-size: 0.86rem; } .topic-search::placeholder, .section-search::placeholder { color: var(--muted); } .topic-search:focus, .section-search:focus { outline: none; border-color: var(--fg); } .section-search-wrap { display: flex; justify-content: flex-end; width: 100%; } .search-overlay { position: fixed; top: var(--header-h); right: 0; left: 0; z-index: 110; display: grid; gap: 0.45rem; padding: 0.75rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--border); background: var(--card-bg); color: var(--fg); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12); } .search-overlay[hidden] { display: none !important; } .search-overlay .search-box { display: flex; align-items: center; gap: 0.55rem; width: min(720px, 100%); margin: 0 auto; } .search-overlay .search-box svg { flex: 0 0 auto; color: var(--muted); } .search-overlay .search-box input { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: 0.6rem 0.85rem; background: var(--bg); color: var(--fg); } .search-overlay .search-close { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; } .search-overlay .search-close:hover { color: var(--fg); } .search-overlay .search-hint { width: min(720px, 100%); margin: 0 auto; color: var(--muted); font-size: 0.78rem; } @media (min-width: 721px) { .topic-toggle-cont .filter-dd, .topic-toggle-cont .topic-toggle, .topic-toggle-cont .button { flex: 0 0 auto; } } .field, .form-field { display: flex; flex-direction: column; gap: 0.35rem; } .field label, .form-field label, label { font-size: 0.85rem; font-weight: 600; } .field input, .field select, .field textarea, .form-field input, .form-field select, .form-field textarea, .modal input, .modal select, .modal textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; background: var(--card-bg); color: var(--fg); } .feedback, .modal-feedback, .err, .login-err { border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; font-size: 0.9rem; } .feedback.success, .modal-feedback.success { border: 1px solid #6ee7b7; background: #ecfdf5; color: #065f46; } .feedback.error, .modal-feedback.error, .err, .login-err { border: 1px solid #fca5a5; background: #fef2f2; color: #991b1b; } [data-theme="dark"] .feedback.success, [data-theme="dark"] .modal-feedback.success { border-color: #065f46; background: #052e22; color: #a7f3d0; } [data-theme="dark"] .feedback.error, [data-theme="dark"] .modal-feedback.error, [data-theme="dark"] .err, [data-theme="dark"] .login-err { border-color: #7f1d1d; background: #3b0d0d; color: #fecaca; } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } th, td { border-bottom: 1px solid var(--border); padding: 0.5rem 0.55rem; text-align: left; vertical-align: top; } th { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } .table-scroll, .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .modal-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(0, 0, 0, 0.5); } .modal-overlay.is-visible { display: flex; } .modal { width: min(560px, 100%); max-height: 90dvh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; background: var(--card-bg); color: var(--fg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .fab-actions { position: fixed; right: 1rem; bottom: 1rem; z-index: 160; display: flex; align-items: center; gap: 0.45rem; max-width: calc(100vw - 2rem); } .nav-actions, .section-switcher { display: none; position: fixed; right: 1rem; bottom: calc(1rem + 46px); z-index: 150; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: min(220px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: calc(100dvh - var(--header-h) - 3.5rem); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); background: var(--card-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } .nav-actions.open, .section-switcher.open { display: flex; } .auth-shell { width: min(100%, 420px); margin: 0 auto; min-height: 100dvh; padding: calc(var(--header-h) + clamp(1.5rem, 5vw, 3rem)) clamp(1rem, 4vw, 2rem) clamp(2rem, 6vw, 4rem); display: grid; align-content: center; justify-items: stretch; gap: var(--gap-md); } .form-container-wrapper { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: calc(var(--header-h) + 1rem) clamp(1rem, 4vw, 3rem) 1.5rem; background-color: rgba(0, 0, 0, 0.92); color: white; opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: transform 0.18s ease, opacity 0.18s ease; } .form-container-wrapper.form-active { opacity: 1; pointer-events: auto; transform: translateY(0); } .form-container { width: min(420px, 100%); display: flex; flex-direction: column; gap: 0.75rem; } .form-container form { display: flex; flex-direction: column; gap: 0.7rem; } .form-container input { width: 100%; border: 1px solid #333; border-radius: var(--radius-sm); padding: 0.65rem 0.75rem; background: #111; color: white; } .auth-shell.is-wide { width: min(100%, 760px); max-width: 760px; } .auth-card, form.login-form, form.forgot-form, form.upload-form, form.newpassword-form { display: grid; gap: var(--gap-md); border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(1rem, 3vw, 1.5rem); background: var(--card-bg); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); } .auth-shell > section, .auth-shell > .pane { max-width: 100%; padding: 0; } .auth-shell > .page-header, .auth-shell > form, .auth-shell > .feedback, .auth-shell > .err, .auth-shell > .error, .auth-shell > .alt-link { width: 100%; } .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md); } .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.4rem; } .checkbox-grid label { display: flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; background: var(--chip-bg); } @media (max-width: 900px) { :root { --card-min: 240px; } } @media (max-width: 720px) { header > nav > a, .nav-link { padding: 0.7rem; text-align: center; } .topic-search, .section-search { flex-basis: 100%; max-width: none; margin-left: 0; } } @media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } } @media (max-width: 480px) { :root { --card-min: 100%; } .app-section, section { padding: clamp(1.5rem, 5vw, 2.5rem) 1rem; } .button, .btn, .topic-toggle { width: auto; max-width: 100%; } }