/* Copyright (c) 2025 In Flux Studio Co. All rights reserved. See LICENSE. */ /* Styles for semantic elements and global colors */ /* Philosophy: Light and dark themes with color blindness accessibility and WCAG contrast compliance */ /* Rem units for font sizes */ /* Use CSS variables for colors to allow easy theme switching */ /* Reset some default styles */ *, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; } /* Default: Light theme (accessible, WCAG-compliant) */ :root { /* Logo colors - monochrome in light, colorful in dark */ --logo-c1: #101010; --logo-c2: #101010; --logo-c3: #101010; /* IFS palette - centralized lightness/chroma for oklch colors */ --palette-l: 0.84; --palette-c: 0.07; /* Hues for palette colors */ --h1: 233; --h2: 185; --h3: 151; --h4: 45; --h5: 300; --c1: oklch(var(--palette-l) var(--palette-c) var(--h1)); --c2: oklch(var(--palette-l) var(--palette-c) var(--h2)); --c3: oklch(var(--palette-l) var(--palette-c) var(--h3)); --c4: oklch(var(--palette-l) var(--palette-c) var(--h4)); --c5: oklch(var(--palette-l) var(--palette-c) var(--h5)); /* Tag/filter color system - derives from palette */ --tag-l-on: var(--palette-l); --tag-c-on: var(--palette-c); --tag-l-off: 0.88; --tag-c-off: 0.05; --figure: #101010; --figure-subtle: #696969; --figure-override: var(--figure); --figure-danger: var(--ground); --figure-focus: var(--figure); --figure-hover: var(--c1); --figure-negative: var(--figure); --figure-positive: var(--figure); --figure-selected: var(--figure); --figure-warning: var(--figure-negative); --figure-error: var(--figure-negative); --graphic: #878787; --graphic-focus: var(--figure); --graphic-hover: var(--c1); --graphic-selected: var(--c1); --graphic-error: var(--c4); --section: #ebebeb; --acrylic: rgba(255, 255, 255, 0.8); --ground: #f5f5f5; --ground-negative: var(--c4); --ground-positive: var(--c3); --ground-error: var(--ground-negative); --ground-focus: var(--ground); --ground-hover: var(--figure); --ground-override: var(--c5); --ground-selected: var(--c1); --ground-warning: var(--ground-negative); --shadow-color: var(--ground); --ground-danger: repeating-linear-gradient( 45deg, var(--c4) 0px, var(--c4) 1rem, var(--section) 1rem, var(--section) 2rem ); /* Layout spacing — --nav-height must match rendered height of .menu-bar (see [data-role='nav-logo']) */ --nav-height: 3rem; --toolbar-offset: 0.5rem; --transition-duration: 0.2s; --transition-easing: ease-out; } /* * Dark theme — applied via .theme-dark class on . * The class is added by the inline IIFE in (vite.config.js) and by * applyThemePreference() in theme-toggle.ts. Both detect OS preference * (matchMedia) for auto mode and user overrides via localStorage. * No @media query needed — JS handles all detection, CSS has one rule. */ .theme-dark { /* Logo colors - colorful in dark mode (monochrome in light) */ --logo-c1: oklch(0.75 0.12 var(--h1)); --logo-c2: oklch(0.75 0.12 var(--h2)); --logo-c3: oklch(0.75 0.12 var(--h3)); /* IFS dark palette - reduced lightness */ --palette-l: 0.4; --palette-c: 0.07; --c1: oklch(var(--palette-l) var(--palette-c) var(--h1)); --c2: oklch(var(--palette-l) var(--palette-c) var(--h2)); --c3: oklch(var(--palette-l) var(--palette-c) var(--h3)); --c4: oklch(var(--palette-l) var(--palette-c) var(--h4)); --c5: oklch(var(--palette-l) var(--palette-c) var(--h5)); /* Tag/filter color system - dark theme values */ --tag-l-on: var(--palette-l); --tag-c-on: var(--palette-c); --tag-l-off: 0.25; --tag-c-off: 0.04; --figure: #ebebeb; --figure-subtle: #959595; --figure-override: var(--figure); --figure-danger: var(--ground); --figure-focus: var(--figure); --figure-hover: var(--c1); --figure-negative: var(--figure); --figure-positive: var(--figure); --figure-selected: var(--figure); --figure-warning: var(--figure-negative); --figure-error: var(--figure-negative); --graphic: #4c4c4c; --graphic-focus: var(--figure); --graphic-hover: var(--c1); --graphic-selected: var(--c1); --graphic-error: var(--c4); --section: #2e2e2e; --acrylic: rgba(0, 0, 0, 0.8); --ground: #101010; --ground-negative: var(--c4); --ground-positive: var(--c3); --ground-error: var(--ground-negative); --ground-focus: var(--ground); --ground-hover: var(--figure); --ground-override: var(--c5); --ground-selected: var(--c1); --ground-warning: var(--ground-negative); --shadow-color: var(--ground); } /* Global styles */ html { color: var(--figure); background-color: var(--ground); border-color: var(--graphic); font-size: 1rem; line-height: 1.5rem; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; } body { min-height: 100vh; font-size: 1rem; font-family: 'Noto Sans', sans-serif; box-sizing: border-box; margin: 0; padding: 0.5rem; } a { color: var(--figure); text-decoration: underline solid var(--graphic) 0.1rem; text-underline-offset: 0.3rem; } a:hover { color: var(--figure-hover); } button { align-items: center; display: flex; background-color: var(--ground); color: var(--figure); border: 0.1rem solid var(--graphic); border-radius: 0.3rem; padding: 0.5rem; cursor: pointer; font-size: 1rem; min-height: 44px; min-width: 44px; margin: 0; } button:hover { color: var(--ground); background: var(--figure); } button:disabled { display: none; } /* Close button styling — covers both the modal-header × button and footer/full-width close buttons. Sizing inherits from the global `button` rule (44px min tap target); alignment is handled by the parent layout (e.g. `modal-content > header` flex). Only the glyph centering is enforced here. */ button[data-role='close'] { display: grid; place-items: center; } /* Native dialog element */ dialog { border: none; border-radius: 0.5rem; padding: 0; margin: auto; max-width: 95vw; max-height: 95vh; /* Transition properties */ opacity: 1; transform: scale(1); transition: opacity var(--transition-duration) var(--transition-easing), transform var(--transition-duration) var(--transition-easing), overlay var(--transition-duration) var(--transition-easing) allow-discrete, display var(--transition-duration) var(--transition-easing) allow-discrete; } /* Override UA fit-content — sensible default for all modals */ dialog.modal[open] { min-width: 21rem; max-width: min(55rem, 89vw); max-height: 89vh; display: flex; flex-direction: column; } /* Starting state when dialog opens */ @starting-style { dialog[open] { opacity: 0; transform: scale(0.9); } } dialog[open] { /* removing this next line causes failure to display dialog TODO */ display: block; color: var(--figure); background-color: var(--ground); /* box-shadow: 0rem 0rem 2rem var(--shadow-color); */ } /* Closing state */ dialog:not([open]) { opacity: 0; transform: scale(0.9); } dialog::backdrop { background-color: rgba(0, 0, 0, 0.8); /* backdrop-filter: blur(0.1rem); */ } dl { margin: 0; padding: 0; } dt { color: var(--figure-subtle); font-size: 0.8rem; margin: 0; padding: 0; } dd { color: var(--figure); font-size: 1rem; margin: 0; padding: 0; } fieldset { display: flex; flex-wrap: wrap; border-width: 0.1rem; border-style: groove; border-color: var(--graphic); border-image: initial; border-radius: 0.3rem; padding: 0.5rem; } figure { margin: 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; height: 8rem; /* border: 0.1rem solid var(--graphic); */ } figure img { max-width: 100%; max-height: 100%; object-fit: contain; background: conic-gradient( hsl(0 0 45%) 90deg, hsl(0 0 55%) 90deg 180deg, hsl(0 0 45%) 180deg 270deg, hsl(0 0 55%) 270deg ) 0 0 / 1rem 1rem; /* border: 0.1rem solid var(--graphic); */ } figure video { max-width: 100%; max-height: 100%; object-fit: contain; } figcaption { color: var(--figure-subtle); font-size: 0.8rem; margin: 0; padding: 0; text-align: center; } footer { display: flex; align-items: center; } form { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 0.5rem; } /* Wrapping labels use subgrid so text + input align across every row */ form > label { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; } /* Checkbox/radio labels: single-row flex, not column-aligned */ form > label:has(> input[type='checkbox']), form > label:has(> input[type='radio']) { display: flex; grid-column: 1 / -1; } /* Non-label children of a form span both columns */ form > textarea, form > button, form > p, form > hr, form > fieldset, form > output, form > input[type='submit'] { grid-column: 1 / -1; } h1 { color: var(--figure); font-size: 1.5rem; font-weight: 300; } h2 { color: var(--figure); font-size: 1rem; font-weight: 600; } h3 { color: var(--figure); font-size: 1rem; font-weight: 300; font-style: italic; } h4 { color: var(--figure-subtle); } h5 { color: var(--figure); font-size: 0.618rem; } header { padding: 0; padding-bottom: 0.5rem; display: flex; } input { color: var(--figure); background-color: var(--ground); padding: 0.5rem; border: 0.1rem solid var(--graphic); border-radius: 0.2rem 0.2rem 0.2rem 0.2rem; font-family: inherit; font-weight: normal; font-size: 1rem; min-height: 44px; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 0.3rem solid var(--graphic-focus); outline-offset: -0.3rem; z-index: 100; position: relative; } /* Unchecked checkbox styling - pink background */ input[type='checkbox'] { appearance: none; -webkit-appearance: none; background-color: var(--ground); border: 0.1rem solid var(--graphic); border-radius: 0.3rem; padding: 0; cursor: pointer; position: relative; /* Required for ::after positioning, must be on base to prevent layout shift */ min-height: 24px; min-width: 24px; } /* Checked state - custom checkmark */ input[type='checkbox']:checked { background-color: var(--ground); color: var(--figure); } input[type='checkbox']:hover { background-color: var(--figure-subtle); color: var(--ground-hover); } input[type='checkbox']:checked::after { content: '✔'; /* plain unicode (U+2714), not the VS16 emoji form — avoids emoji color/baseline rendering */ position: absolute; /* relative to the input's position: relative */ inset: 0; /* fill the box */ display: flex; align-items: center; justify-content: center; color: var(--figure-selected); font-size: 1rem; line-height: 1; /* prevents vertical drift */ } input[type='text'] { /* min-height comes from the base `input` rule; only min-width is type-specific. */ min-width: 44px; } input[type='range'] { background-color: var(--c4); } input[type='number'] { width: 5rem; } label { display: flex; color: var(--figure); align-items: center; font-weight: 400; margin: 0; } legend { color: var(--figure-subtle); font-size: 1rem; padding-left: 1rem; padding-right: 1rem; } output { color: var(--figure); font-style: italic; } li { color: var(--figure); margin: 0; padding: 0; } nav { display: flex; } option { background-color: var(--ground); color: var(--figure); /* Let browser handle hover/checked states */ } p { color: var(--figure); margin: 0; max-width: 65ch; padding: 0.5rem; } progress { background-color: var(--ground); border: none; appearance: none; padding: 0.1rem; margin: 0; } meter { width: 100%; } section { background-color: var(--section); border-radius: 0.5rem 0.5rem 0.3rem 0.3rem; border: 0.1rem solid var(--section); /* Default flexbox align-items is `stretch`, which makes every child fill the row's full cross-axis (height for the default flex-direction: row). `flex-start` lets each child take its natural height — what content usually wants. Anything that needs row-stretch can opt in with `align-self: stretch` on that specific child. */ align-items: flex-start; height: fit-content; min-width: 0; /* Allow shrinking in grid */ margin: 0; padding: 0.3rem; } select { appearance: none; background-color: var(--ground); color: var(--figure); font-family: inherit; font-size: 1rem; padding: 0.5rem 2rem 0.5rem 0.5rem; margin: 0; border: 0.1rem solid var(--graphic); border-radius: 0.3rem; cursor: pointer; /* Downward-pointing caret — stroke matches --figure (#101010 light theme) */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 0.625rem auto; min-height: 44px; min-width: 44px; } /* Caret color must switch per theme — SVG data URIs can't read CSS vars */ .theme-dark select { background-image: url("data:image/svg+xml;utf8,"); } small { color: var(--figure-subtle); font-size: 0.8rem; line-height: 1.5rem; } /* span { color: var(--figure); } */ table { background-color: var(--section); color: var(--figure); /* border: 0.1rem solid var(--graphic); */ border-radius: 0; } textarea { padding: 0.5rem; border: 0.1rem solid var(--graphic); border-radius: 0.5rem; background: var(--ground); color: var(--figure); font-family: inherit; font-size: 1rem; font-weight: normal; resize: vertical; min-height: 3rem; width: 100%; } /* thead { border-color: var(--graphic); background-color: var(--section); border: 0; } */ td { /* color: var(--figure); */ flex-wrap: wrap; padding: 0.5rem 0.5rem; text-align: start; } th { color: var(--figure-subtle); background-color: var(--section); /* background-color: var(--ground); */ border: 0; /* text-align: center; */ } tr:hover { outline: 0.1rem solid var(--graphic-hover); outline-offset: -0.1rem; } ul, ol { margin: 0; /* Prose-list defaults: an indent so disc/number markers sit in a visible gutter, plus a readable line measure matching

. These apply to every bare