/* ============================================================================= ARCANE UI — the Arcane Manor design system ============================================================================= Bootstrap-methodology component + utility system, dark manor aesthetic. USAGE FONTS — load in your (system falls back to Georgia/Arial without them): THEMING — the default (no attribute) theme is "manor". Scope any room to a page or subtree with data-room: Add a new room by copying any [data-room] block below and changing the nine custom properties. Every component recolors automatically. FILE MAP 1. Design tokens (manor default + room themes) 2. Reboot / base 3. Typography 4. Helpers 5. Components (buttons ... masonry, alphabetical-ish) 6. Grid system (generated — tools/build-utilities.mjs) 7. Utility classes (generated — tools/build-utilities.mjs) ========================================================================== */ /* ============================================================================= 1. DESIGN TOKENS ========================================================================== */ :root { color-scheme: dark; /* ---- Manor (default) theme ------------------------------------------- Neutral soot base — grays that are neither warm nor cold — with a cool blurple spot accent (Discord-style). Ornament, text and muted stay neutral; the rooms supply their own color temperature. */ --am-page: #141414; --am-surface: #1b1b1b; --am-surface-2: #252525; --am-text: #e8e8e8; --am-muted: #a6a6a6; --am-faint: #7c7c7c; --am-accent: #594a7a; /* deep blurple fill tone */ --am-accent-rgb: 89, 74, 122; --am-highlight: #aa8fc7; /* blurple — links, active states */ --am-highlight-rgb: 170, 143, 199; --am-highlight-text: #aa8fc7; /* AA-safe small-text version of highlight */ --am-ornament: #8f8f8f; /* decorative strokes, frames, icons */ --am-ornament-rgb: 143, 143, 143; --am-line-rgb: 200, 200, 200; --am-line: rgba(var(--am-line-rgb), .30); --am-line-soft: rgba(var(--am-line-rgb), .16); --am-disabled: #454545; --am-disabled-text: #6f6f6f; /* ---- Status colors (constant across rooms) --------------------------- */ --am-success: #2bec76; --am-success-rgb: 43, 236, 118; --am-danger: #ff6666; --am-danger-rgb: 255, 102, 102; --am-warning: #ffbc12; --am-warning-rgb: 255, 188, 18; --am-info: #51a2ff; --am-info-rgb: 81, 162, 255; /* ---- Type roles (mirrors the landing page) --------------------------- */ --am-font-display: 'DM Serif Text', Georgia, 'Times New Roman', serif; --am-font-subtitle: 'EB Garamond', Georgia, 'Times New Roman', serif; --am-font-italic: 'Cormorant Garamond', Georgia, serif; --am-font-ui: 'EB Garamond', Georgia, 'Times New Roman', serif; --am-font-sans: 'Julius Sans One', 'Segoe UI', Arial, sans-serif; --am-font-eyebrow: var(--am-font-sans); --am-font-input: 'Lora', Georgia, serif; --am-font-body: 'Lora', Georgia, serif; --am-body-size: 16px; /* ---- Motion ---------------------------------------------------------- */ --am-ease: 180ms ease; --am-ease-curve: cubic-bezier(0.22, 1, 0.36, 1); /* ---- Layout ---------------------------------------------------------- */ --am-gutter-x: 1.5rem; --am-gutter-y: 0; /* ---- Z-index scale --------------------------------------------------- */ --am-z-dropdown: 1000; --am-z-sticky: 1020; --am-z-offcanvas-back: 1040; --am-z-offcanvas: 1045; --am-z-modal-back: 1050; --am-z-modal: 1055; --am-z-tooltip: 1080; /* ---- Cove engine defaults (read by arcane-ui.js) --------------------- */ --am-cove-stroke: var(--am-ornament); --am-cove-fill: rgba(var(--am-accent-rgb), .045); } /* ---- Room: The Observatory (steel blue) ---------------------------------- */ [data-room="observatory"] { --am-page: #0d0f14; --am-surface: #161b22; --am-surface-2: #1d232c; --am-accent: #4a5d7a; --am-accent-rgb: 74, 93, 122; --am-highlight: #8fb1c7; --am-highlight-rgb: 143, 177, 199; --am-highlight-text: #8fb1c7; --am-ornament: #8f806b; --am-ornament-rgb: 143, 128, 107; --am-line-rgb: 201, 195, 187; } /* ---- Room: The Workshop (brass & soot) ------------------------------------ */ [data-room="workshop"] { --am-page: #141414; --am-surface: #1b1b1b; --am-surface-2: #252525; --am-accent: #987a3a; --am-accent-rgb: 152, 122, 58; --am-highlight: #c09a55; --am-highlight-rgb: 192, 154, 85; --am-highlight-text: #c09a55; --am-ornament: #9b835f; --am-ornament-rgb: 155, 131, 95; --am-line-rgb: 201, 195, 187; } /* ---- Room: The Conservatory (verdant) ------------------------------------- */ [data-room="conservatory"] { --am-page: #111411; --am-surface: #181d18; --am-surface-2: #222922; --am-accent: #66725a; --am-accent-rgb: 102, 114, 90; --am-highlight: #8f9771; --am-highlight-rgb: 143, 151, 113; --am-highlight-text: #9aa27c; --am-ornament: #78806b; --am-ornament-rgb: 120, 128, 107; --am-line-rgb: 201, 195, 187; } /* ---- Room: The Reliquary (garnet) ------------------------------------------ Note: the swatch #a95d6c only reaches ~3.9:1 on the page background, so --am-highlight-text is lifted to stay WCAG AA for small text. */ [data-room="reliquary"] { --am-page: #120f11; --am-surface: #1d181b; --am-surface-2: #292126; --am-accent: #7c3f4c; --am-accent-rgb: 124, 63, 76; --am-highlight: #a95d6c; --am-highlight-rgb: 169, 93, 108; --am-highlight-text: #c58490; --am-ornament: #92705f; --am-ornament-rgb: 146, 112, 95; --am-line-rgb: 201, 195, 187; } /* ============================================================================= 2. REBOOT / BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Replace the browser's default blue tap flash (off-brand on the dark, gold/violet theme) with a subtle, room-tinted highlight on touch. */ -webkit-tap-highlight-color: rgba(var(--am-highlight-rgb), .18); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; min-height: 100vh; font-family: var(--am-font-body); font-size: var(--am-body-size); line-height: 1.6; color: var(--am-text); background-color: var(--am-page); background-image: radial-gradient(circle at 70% 0%, rgba(var(--am-accent-rgb), .14), transparent 38rem); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .35s ease, color .35s ease; } hr { border: 0; height: 1px; margin: 1.5rem 0; background: linear-gradient(90deg, transparent, rgba(var(--am-ornament-rgb), .55), transparent); } img, svg, video { max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: var(--am-highlight-text); text-decoration-color: rgba(var(--am-highlight-rgb), .45); text-underline-offset: .2em; transition: color var(--am-ease); } a:hover { color: var(--am-text); } ::selection { background: rgba(var(--am-highlight-rgb), .30); color: #fff; } :focus-visible { outline: 2px solid var(--am-highlight); outline-offset: 2px; } [hidden] { display: none !important; } /* ============================================================================= 3. TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0 0 .6em; font-family: var(--am-font-display); font-weight: 400; line-height: 1.1; color: var(--am-text); } h1, .h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.02; } h2, .h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } h3, .h3 { font-size: 1.35rem; } h4, .h4 { font-size: 1.15rem; font-family: var(--am-font-subtitle); font-weight: 500; } h5, .h5 { font-size: 1rem; font-family: var(--am-font-subtitle); font-weight: 500; } h6, .h6 { font-size: .78rem; font-family: var(--am-font-ui); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--am-muted); } .display-1 { font-family: var(--am-font-display); font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .98; } .display-2 { font-family: var(--am-font-display); font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: .99; } .display-3 { font-family: var(--am-font-display); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; } p { margin: 0 0 1em; } .lead { font-size: 1.16rem; line-height: 1.7; color: var(--am-muted); } .eyebrow { display: block; margin: 0 0 1em; font-family: var(--am-font-eyebrow); font-weight: 400; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--am-highlight-text); -webkit-text-stroke: 0.25px currentColor; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .tagline { font-family: var(--am-font-italic); font-style: italic; font-weight: 300; font-size: 1.3rem; color: var(--am-muted); -webkit-text-stroke: 0.25px currentColor; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .text-caps { font-family: var(--am-font-ui); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; } small, .small { font-size: .85em; } .text-body-secondary { color: var(--am-muted); } blockquote { margin: 0 0 1rem; padding: .75rem 0 .75rem 1.25rem; border-left: 1px solid var(--am-ornament); font-family: var(--am-font-italic); font-style: italic; font-size: 1.2rem; color: var(--am-muted); } blockquote footer { margin-top: .5rem; font-family: var(--am-font-ui); font-style: normal; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--am-faint); } code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .875em; } code { color: var(--am-highlight-text); } pre { overflow-x: auto; padding: 1rem 1.25rem; background: var(--am-surface); border: 1px solid var(--am-line-soft); color: var(--am-text); } /* ============================================================================= 4. HELPERS ========================================================================== */ .divider { height: 1px; border: 0; margin: .5rem 0; background: linear-gradient(90deg, transparent, rgba(var(--am-ornament-rgb), .55), transparent); } .divider-diamond { position: relative; height: 1px; border: 0; margin: 1.25rem 0; background: linear-gradient(90deg, transparent, rgba(var(--am-ornament-rgb), .55), transparent); } .divider-diamond::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--am-ornament); background: var(--am-page); } .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .ratio { position: relative; width: 100%; } .ratio::before { content: ""; display: block; padding-top: var(--am-ratio, 56.25%); } .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; } .ratio-1x1 { --am-ratio: 100%; } .ratio-4x3 { --am-ratio: 75%; } .ratio-16x9 { --am-ratio: 56.25%; } .ratio-21x9 { --am-ratio: 42.857%; } /* Icon convention — inline SVGs render as 1px-weight line art and inherit currentColor. Give any inline the .ico class. */ .ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; } .ico *, .nav-icon svg *, .icon-tile svg * { fill: none; stroke: currentColor; stroke-width: 1.15; vector-effect: non-scaling-stroke; } .icon-tile { aspect-ratio: 1; display: grid; place-items: center; background: var(--am-surface); border: 1px solid var(--am-line-soft); color: var(--am-ornament); transition: color var(--am-ease), border-color var(--am-ease), background var(--am-ease); } .icon-tile:hover { color: var(--am-highlight); border-color: var(--am-accent); background: rgba(var(--am-accent-rgb), .08); } .icon-tile svg { width: 30px; height: 30px; } /* Diamond emblem — icon presented inside a rotated-square ornament */ .emblem { position: relative; width: 64px; height: 64px; display: grid; place-items: center; color: var(--am-ornament); } .emblem::before { content: ""; position: absolute; inset: 6px; transform: rotate(45deg); border: 1px solid rgba(var(--am-ornament-rgb), .65); background: rgba(var(--am-accent-rgb), .07); transition: border-color var(--am-ease), background var(--am-ease); } .emblem svg:not(.cove-frame) { position: relative; width: 30px; height: 30px; } .emblem svg:not(.cove-frame) * { fill: none; stroke: currentColor; stroke-width: 1.15; vector-effect: non-scaling-stroke; } /* Emblem shapes: default diamond, plus .emblem-circle / .emblem-square / .emblem-coved. Add .emblem-double for a second inner line on any shape. */ .emblem-double::after { content: ""; position: absolute; inset: 11px; transform: rotate(45deg); border: 1px solid rgba(var(--am-ornament-rgb), .4); transition: border-color var(--am-ease); } .emblem-circle::before, .emblem-circle.emblem-double::after { transform: none; border-radius: 50%; } .emblem-circle::before { inset: 2px; } .emblem-circle.emblem-double::after { inset: 7px; } .emblem-square::before, .emblem-square.emblem-double::after { transform: none; } .emblem-square::before { inset: 4px; } .emblem-square.emblem-double::after { inset: 9px; } /* coved emblem rides the frame engine */ .emblem-coved { --am-cove-radius: 11; --am-cove-stroke: rgba(var(--am-ornament-rgb), .8); --am-cove-fill: rgba(var(--am-accent-rgb), .07); } .emblem-coved::before, .emblem-coved.emblem-double::after { display: none; } .emblem-coved.emblem-double { --am-cove-inner-inset: 6; } /* ============================================================================= 5. COMPONENTS ========================================================================== */ /* ----------------------------------------------------------------------------- Frame engine (pairs with arcane-ui.js) ----------------------------------------------------------------------------- Four frame types, one engine — the JS injects and maintains an SVG frame sized 1:1 to the element, so corners never stretch: .coved concave cut corners (the signature) .framed-flat square corners .framed-round convex rounded corners .framed-filigree square corners + ornamental corner flourishes Double-line: add .frame-double to any type (.coved-double is an alias). Configure per component/state with custom properties (unitless = px): --am-cove-radius outer corner radius (default 14) --am-cove-inner-inset inner decorative line inset (0 = no inner line) --am-cove-inner-opacity inner line opacity (default .34) --am-cove-stroke line color --am-cove-fill panel fill behind content data-cove-divider=".sel" draws a horizontal rule under that child Without JS the component keeps its normal border — nothing breaks. -------------------------------------------------------------------------- */ .coved, .framed-flat, .framed-round, .framed-filigree { position: relative; isolation: isolate; --am-cove-radius: 14; --am-cove-inner-inset: 0; --am-cove-inner-opacity: .34; } .frame-double, .coved-double { --am-cove-inner-inset: 9; } .cove-frame { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .cove-frame path { fill: none; stroke: var(--am-cove-stroke); stroke-width: 1.15; vector-effect: non-scaling-stroke; transition: stroke var(--am-ease), fill var(--am-ease), filter var(--am-ease); } .cove-frame .cove-fill { fill: var(--am-cove-fill); stroke: none; } /* Once the frame exists, the frame carries border + fill + glow duty (element box-shadow would ignore the cut corners, so it's disabled) */ .has-cove { border-color: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* ----------------------------------------------------------------------------- Buttons ----------------------------------------------------------------------------- Variants: .btn-primary (solid) / .btn-secondary / .btn-outline-* / .btn-ghost / status colors. Sizes: .btn-sm / .btn-lg. Add .coved for the SVG cove frame. Icons: place an inline before (pre-cap) or after (end-cap) the label. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: 1em 1.5em; line-height: 1.25; border: 1px solid transparent; background: transparent; font-family: var(--am-font-ui); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center; color: var(--am-text); user-select: none; cursor: pointer; transition: color var(--am-ease), background var(--am-ease), border-color var(--am-ease), box-shadow var(--am-ease); } .btn .ico { width: 1.15em; height: 1.15em; transition: transform .22s ease; } /* Icon hover animation is opt-in — add .ico-rotate to the button (or any parent) to spin the icon on hover; omit it for a static icon. */ .ico-rotate:hover .ico, .ico-rotate:focus-visible .ico { transform: rotate(45deg) scale(1.1); } .btn:disabled, .btn.disabled { color: var(--am-disabled-text); border-color: var(--am-disabled); background: rgba(255, 255, 255, .01); cursor: not-allowed; pointer-events: none; } .btn:disabled .ico, .btn.disabled .ico { transform: none; } /* Solid (filled) */ .btn-primary { border-color: var(--am-highlight); background: linear-gradient(rgba(var(--am-accent-rgb), .34), rgba(var(--am-accent-rgb), .22)); color: var(--am-text); } .btn-primary:hover { background: linear-gradient(rgba(var(--am-accent-rgb), .5), rgba(var(--am-accent-rgb), .34)); color: #fff; box-shadow: 0 0 12px rgba(var(--am-highlight-rgb), .25); } .btn-primary:active, .btn-primary.active { background: rgba(var(--am-accent-rgb), .55); color: #fff; } .btn-secondary { border-color: rgba(var(--am-line-rgb), .35); color: var(--am-muted); } .btn-secondary:hover { border-color: var(--am-ornament); background: rgba(var(--am-accent-rgb), .1); color: var(--am-text); } .btn-secondary:active, .btn-secondary.active { border-color: var(--am-highlight); background: rgba(var(--am-accent-rgb), .2); color: var(--am-text); } /* Outline */ .btn-outline-primary { border-color: var(--am-highlight); color: var(--am-highlight-text); } .btn-outline-primary:hover { background: rgba(var(--am-highlight-rgb), .12); color: var(--am-text); } .btn-outline-secondary { border-color: rgba(var(--am-line-rgb), .35); color: var(--am-muted); } .btn-outline-secondary:hover { border-color: var(--am-ornament); color: var(--am-text); } /* Status */ .btn-success { border-color: var(--am-success); background: rgba(var(--am-success-rgb), .18); } .btn-success:hover { background: rgba(var(--am-success-rgb), .32); color: #fff; } .btn-danger { border-color: var(--am-danger); background: rgba(var(--am-danger-rgb), .18); } .btn-danger:hover { background: rgba(var(--am-danger-rgb), .32); color: #fff; } .btn-warning { border-color: var(--am-warning); background: rgba(var(--am-warning-rgb), .18); } .btn-warning:hover { background: rgba(var(--am-warning-rgb), .32); color: #fff; } .btn-info { border-color: var(--am-info); background: rgba(var(--am-info-rgb), .18); } .btn-info:hover { background: rgba(var(--am-info-rgb), .32); color: #fff; } .btn-outline-success { border-color: var(--am-success); color: var(--am-success); } .btn-outline-success:hover { background: rgba(var(--am-success-rgb), .14); color: var(--am-text); } .btn-outline-danger { border-color: var(--am-danger); color: var(--am-danger); } .btn-outline-danger:hover { background: rgba(var(--am-danger-rgb), .14); color: var(--am-text); } .btn-outline-warning { border-color: var(--am-warning); color: var(--am-warning); } .btn-outline-warning:hover { background: rgba(var(--am-warning-rgb), .14); color: var(--am-text); } .btn-outline-info { border-color: var(--am-info); color: var(--am-info); } .btn-outline-info:hover { background: rgba(var(--am-info-rgb), .14); color: var(--am-text); } /* Ghost / link */ .btn-ghost { border-color: transparent; color: var(--am-highlight-text); } .btn-ghost:hover { background: rgba(var(--am-highlight-rgb), .1); color: var(--am-text); } .btn-link { min-height: 0; padding: 0; border: 0; font-family: var(--am-font-body); font-size: 1em; letter-spacing: normal; text-transform: none; color: var(--am-highlight-text); text-decoration: underline; text-decoration-color: rgba(var(--am-highlight-rgb), .45); text-underline-offset: .2em; } .btn-link:hover { color: var(--am-text); } /* Solid modifier — combine with any color (.btn-primary.btn-solid …) and any frame type; the fill goes fully opaque with dark text. */ .btn-solid { --am-solid-color: var(--am-surface-2); } .btn-solid.btn-primary { --am-solid-color: var(--am-highlight); } .btn-solid.btn-success { --am-solid-color: var(--am-success); } .btn-solid.btn-danger { --am-solid-color: var(--am-danger); } .btn-solid.btn-warning { --am-solid-color: var(--am-warning); } .btn-solid.btn-info { --am-solid-color: var(--am-info); } .btn-solid.btn-secondary { --am-solid-color: var(--am-surface-2); } .btn.btn-solid { background: var(--am-solid-color); border-color: var(--am-solid-color); color: #141414; } .btn.btn-solid.btn-secondary { color: var(--am-text); } .btn.btn-solid:hover { background: var(--am-solid-color); color: #141414; filter: brightness(1.12); box-shadow: none; } .btn.btn-solid.btn-secondary:hover { filter: brightness(1.3); color: var(--am-text); } /* solid + frame: the frame's fill carries the color */ .btn.btn-solid:is(.coved, .framed-flat, .framed-round, .framed-filigree), .btn.btn-solid:is(.coved, .framed-flat, .framed-round, .framed-filigree):hover { --am-cove-fill: var(--am-solid-color); --am-cove-stroke: var(--am-solid-color); } .btn.btn-solid:is(.coved, .framed-flat, .framed-round, .framed-filigree):hover > .cove-frame path { filter: none; } .btn.btn-solid:disabled, .btn.btn-solid.disabled { background: rgba(255, 255, 255, .03); border-color: var(--am-disabled); color: var(--am-disabled-text); filter: none; } /* Sizes */ .btn-sm { min-height: 38px; padding: .3em 1.1em; font-size: .68rem; } .btn-lg { min-height: 58px; padding: .4em 2em; font-size: .84rem; } /* Icon-only square button */ .btn-icon { width: 48px; min-height: 48px; padding: 0; } .btn-icon.btn-sm { width: 38px; min-height: 38px; } .btn-icon.btn-lg { width: 58px; min-height: 58px; } .btn-icon .ico { width: 1.35em; height: 1.35em; } /* Framed buttons — any frame type (.coved / .framed-flat / .framed-round / .framed-filigree), any size, optional .frame-double */ .btn:is(.coved, .framed-flat, .framed-round, .framed-filigree) { --am-cove-radius: 12; --am-cove-stroke: var(--am-ornament); --am-cove-fill: rgba(255, 255, 255, .01); } .btn-sm:is(.coved, .framed-round) { --am-cove-radius: 10; } .btn-lg:is(.coved, .framed-round) { --am-cove-radius: 13; } .btn:is(.frame-double, .coved-double) { --am-cove-inner-inset: 5.5; } .btn-primary:is(.coved, .framed-flat, .framed-round, .framed-filigree) { --am-cove-stroke: var(--am-highlight); --am-cove-fill: rgba(var(--am-accent-rgb), .22); } .btn-primary:is(.coved, .framed-flat, .framed-round, .framed-filigree):hover { --am-cove-fill: rgba(var(--am-accent-rgb), .4); } :is(.btn-secondary, .btn-outline-secondary):is(.coved, .framed-flat, .framed-round, .framed-filigree):hover { --am-cove-stroke: var(--am-ornament); --am-cove-fill: rgba(var(--am-accent-rgb), .1); } .btn-outline-primary:is(.coved, .framed-flat, .framed-round, .framed-filigree) { --am-cove-stroke: var(--am-highlight); } .btn-outline-primary:is(.coved, .framed-flat, .framed-round, .framed-filigree):hover { --am-cove-fill: rgba(var(--am-highlight-rgb), .12); } .btn:is(.coved, .framed-flat, .framed-round, .framed-filigree):hover { --am-cove-stroke: var(--am-highlight); } .btn:is(.coved, .framed-flat, .framed-round, .framed-filigree):hover > .cove-frame path { filter: drop-shadow(0 0 2px rgba(var(--am-highlight-rgb), .48)); } .btn:is(.coved, .framed-flat, .framed-round, .framed-filigree):active { --am-cove-fill: rgba(var(--am-accent-rgb), .35); } .btn:is(.coved, .framed-flat, .framed-round, .framed-filigree):is(:disabled, .disabled) { --am-cove-stroke: var(--am-disabled); --am-cove-fill: rgba(255, 255, 255, .004); } .btn:is(.coved, .framed-flat, .framed-round, .framed-filigree):disabled > .cove-frame path { filter: none; } /* Button group / toolbar rows */ .btn-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; } /* ----------------------------------------------------------------------------- Badges ----------------------------------------------------------------------------- Solid: .badge .badge-primary|success|danger|warning|info|neutral Outlined: .badge-outline-* Shape: .badge-plaque (angled end-caps) Icons: inline first (pre-cap) or last (end-cap). -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: .5em; padding: .5em .9em; border: 1px solid transparent; font-family: var(--am-font-ui); font-weight: 600; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .badge .ico { width: 1.3em; height: 1.3em; vertical-align: 0; } .badge-primary { background: var(--am-highlight); border-color: var(--am-highlight); color: #17120a; } .badge-neutral { background: var(--am-muted); border-color: var(--am-muted); color: #17130d; } .badge-success { background: var(--am-success); border-color: var(--am-success); color: #0f160e; } .badge-danger { background: var(--am-danger); border-color: var(--am-danger); color: #1a0d0c; } .badge-warning { background: var(--am-warning); border-color: var(--am-warning); color: #191307; } .badge-info { background: var(--am-info); border-color: var(--am-info); color: #0e1419; } .badge-outline-primary { border-color: var(--am-highlight); color: var(--am-highlight-text); background: rgba(var(--am-highlight-rgb), .07); } .badge-outline-neutral { border-color: rgba(var(--am-line-rgb), .4); color: var(--am-muted); } .badge-outline-success { border-color: var(--am-success); color: var(--am-success); background: rgba(var(--am-success-rgb), .07); } .badge-outline-danger { border-color: var(--am-danger); color: var(--am-danger); background: rgba(var(--am-danger-rgb), .07); } .badge-outline-warning { border-color: var(--am-warning); color: var(--am-warning); background: rgba(var(--am-warning-rgb), .07); } .badge-outline-info { border-color: var(--am-info); color: var(--am-info); background: rgba(var(--am-info-rgb), .07); } .badge-plaque { clip-path: polygon(.55em 0, calc(100% - .55em) 0, 100% 50%, calc(100% - .55em) 100%, .55em 100%, 0 50%); padding-inline: 1.1em; border: 0; } .badge-rounded { border-radius: 999px; padding-inline: 1em; } .badge-sm { font-size: .58rem; padding: .4em .7em; } .badge-lg { font-size: .72rem; padding: .6em 1.1em; } /* ----------------------------------------------------------------------------- Breadcrumbs -------------------------------------------------------------------------- */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0; padding: 0; list-style: none; font-family: var(--am-font-ui); font-weight: 500; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; } .breadcrumb-item { display: inline-flex; align-items: center; gap: .8rem; color: var(--am-muted); } .breadcrumb-item + .breadcrumb-item::before { content: ""; width: 5px; height: 5px; flex: none; transform: rotate(45deg); background: var(--am-ornament); } .breadcrumb-item a { color: var(--am-muted); text-decoration: none; } .breadcrumb-item a:hover { color: var(--am-highlight-text); } .breadcrumb-item.active, .breadcrumb-item [aria-current] { color: var(--am-text); } /* ----------------------------------------------------------------------------- List groups -------------------------------------------------------------------------- */ .list-group { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--am-surface); border: 1px solid var(--am-line-soft); } .list-group-item { position: relative; display: flex; align-items: center; gap: .75rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--am-line-soft); background: transparent; color: var(--am-muted); text-align: left; } .list-group-item:last-child { border-bottom: 0; } .list-group-item-action { width: 100%; color: var(--am-muted); text-decoration: none; cursor: pointer; transition: background var(--am-ease), color var(--am-ease); } .list-group-item-action:hover, .list-group-item-action:focus-visible { background: rgba(var(--am-accent-rgb), .08); color: var(--am-text); } .list-group-item.active { background: rgba(var(--am-accent-rgb), .16); color: var(--am-text); } .list-group-item.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--am-highlight), rgba(var(--am-highlight-rgb), .15)); } .list-group-item.disabled, .list-group-item:disabled { color: var(--am-disabled-text); pointer-events: none; } .list-group-flush { border-inline: 0; border-top: 0; background: transparent; } .list-group-numbered { counter-reset: am-list; } .list-group-numbered .list-group-item::marker { content: none; } .list-group-numbered .list-group-item { counter-increment: am-list; } .list-group-numbered .list-group-item::after { content: counter(am-list, upper-roman); order: -1; font-family: var(--am-font-display); color: var(--am-ornament); min-width: 1.9em; } /* ----------------------------------------------------------------------------- Alerts -------------------------------------------------------------------------- */ .alert { position: relative; display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.25rem; margin-bottom: 1rem; border: 1px solid; font-size: .95rem; } .alert .ico { width: 1.35em; height: 1.35em; margin-top: .1em; } .alert p:last-child { margin-bottom: 0; } .alert-heading { margin-bottom: .35em; font-family: var(--am-font-subtitle); font-weight: 600; font-size: 1.02rem; } .alert-primary { --am-alert-color: var(--am-highlight); border-color: rgba(var(--am-highlight-rgb), .5); background: rgba(var(--am-highlight-rgb), .08); color: var(--am-text); } .alert-success { --am-alert-color: var(--am-success); border-color: rgba(var(--am-success-rgb), .55); background: rgba(var(--am-success-rgb), .09); color: #cfe0cc; } .alert-danger { --am-alert-color: var(--am-danger); border-color: rgba(var(--am-danger-rgb), .55); background: rgba(var(--am-danger-rgb), .09); color: #ecd2cf; } .alert-warning { --am-alert-color: var(--am-warning); border-color: rgba(var(--am-warning-rgb), .55); background: rgba(var(--am-warning-rgb), .09); color: #ecdec5; } .alert-info { --am-alert-color: var(--am-info); border-color: rgba(var(--am-info-rgb), .55); background: rgba(var(--am-info-rgb), .09); color: #d4e2ec; } /* variant: icon takes the border's color */ .alert-icon-match .ico { color: var(--am-alert-color); } /* Solid modifier — opaque status fill with dark text */ .alert-solid { background: var(--am-alert-color); border-color: var(--am-alert-color); color: #141414; } .alert-solid .ico { color: inherit; } .alert-solid .alert-heading { color: inherit; } .alert-solid code { color: inherit; font-weight: 600; } .alert-solid .btn-close { color: rgba(0, 0, 0, .6); } .alert-solid .btn-close:hover { color: #000; } .alert-dismissible { padding-right: 3.25rem; } .alert-dismissible .btn-close { position: absolute; top: .65rem; right: .65rem; } /* Close button (alerts, modals, offcanvas) */ .btn-close { position: relative; width: 2em; height: 2em; flex: none; color: var(--am-muted); transition: color var(--am-ease), transform .22s ease; } .btn-close::before, .btn-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.05em; height: 1px; background: currentColor; } .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); } .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .btn-close:hover { color: var(--am-text); transform: rotate(90deg); } /* ----------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; /* recolor a whole pagination by overriding these two, e.g. style="--am-pagination-accent: var(--am-info); --am-pagination-accent-rgb: var(--am-info-rgb)" */ --am-pagination-accent: var(--am-highlight); --am-pagination-accent-rgb: var(--am-highlight-rgb); } .page-link { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .6rem; border: 1px solid var(--am-line-soft); font-family: var(--am-font-ui); font-weight: 500; font-size: .78rem; letter-spacing: .08em; color: var(--am-muted); text-decoration: none; transition: border-color var(--am-ease), background var(--am-ease), color var(--am-ease); } .page-link:hover { border-color: var(--am-ornament); background: rgba(var(--am-accent-rgb), .1); color: var(--am-text); } .page-item.active .page-link { border-color: var(--am-pagination-accent); background: rgba(var(--am-pagination-accent-rgb), .2); color: var(--am-text); } .page-item.disabled .page-link { color: var(--am-disabled-text); border-color: rgba(var(--am-line-rgb), .08); pointer-events: none; } /* coved variant — add .coved to each .page-link */ .page-link.coved { --am-cove-radius: 9; --am-cove-stroke: rgba(var(--am-line-rgb), .35); --am-cove-fill: rgba(0, 0, 0, .18); } .page-link.coved:hover { --am-cove-stroke: var(--am-ornament); --am-cove-fill: rgba(var(--am-accent-rgb), .12); } .page-item.active .page-link.coved { --am-cove-stroke: var(--am-pagination-accent); --am-cove-fill: rgba(var(--am-pagination-accent-rgb), .22); } .page-item.disabled .page-link.coved { --am-cove-stroke: rgba(var(--am-line-rgb), .1); --am-cove-fill: transparent; } /* Solid modifier — works on plain and coved page links alike */ .pagination-solid .page-link { border-color: transparent; background: var(--am-surface-2); } .pagination-solid .page-link:hover { background: rgba(var(--am-pagination-accent-rgb), .3); color: var(--am-text); } .pagination-solid .page-item.active .page-link { background: var(--am-pagination-accent); border-color: var(--am-pagination-accent); color: #141414; } .pagination-solid .page-item.disabled .page-link { background: rgba(255, 255, 255, .03); } .pagination-solid .page-link.coved { --am-cove-stroke: transparent; --am-cove-fill: var(--am-surface-2); } .pagination-solid .page-link.coved:hover { --am-cove-fill: rgba(var(--am-pagination-accent-rgb), .3); } .pagination-solid .page-item.active .page-link.coved { --am-cove-stroke: var(--am-pagination-accent); --am-cove-fill: var(--am-pagination-accent); color: #141414; } /* ----------------------------------------------------------------------------- Spinners -------------------------------------------------------------------------- */ @keyframes am-spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 2.4rem; height: 2.4rem; border: 1px solid var(--am-line-soft); border-top-color: var(--am-highlight); border-radius: 50%; animation: am-spin .9s linear infinite; } .spinner-sm { width: 1.2rem; height: 1.2rem; } /* ----------------------------------------------------------------------------- Tooltips (CSS-only) ----------------------------------------------------------------------------- Position: top (default) or data-am-tooltip-pos="bottom". -------------------------------------------------------------------------- */ [data-am-tooltip] { position: relative; } [data-am-tooltip]::after { content: attr(data-am-tooltip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(3px); z-index: var(--am-z-tooltip); padding: .45rem .7rem; border: 1px solid var(--am-ornament); background: var(--am-surface-2); color: var(--am-text); font-family: var(--am-font-ui); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--am-ease), transform var(--am-ease); } [data-am-tooltip]::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 6.5px); width: 7px; height: 7px; transform: translate(-50%, 3px) rotate(45deg); z-index: calc(var(--am-z-tooltip) + 1); border-right: 1px solid var(--am-ornament); border-bottom: 1px solid var(--am-ornament); background: var(--am-surface-2); opacity: 0; pointer-events: none; transition: opacity var(--am-ease), transform var(--am-ease); } [data-am-tooltip]:hover::after, [data-am-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%); } [data-am-tooltip]:hover::before, [data-am-tooltip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); } [data-am-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 10px); transform: translateX(-50%) translateY(-3px); } /* caret points up: swap the drawn borders, keep the same 45° rotation */ [data-am-tooltip-pos="bottom"]::before { bottom: auto; top: calc(100% + 6.5px); transform: translate(-50%, -3px) rotate(45deg); border-right: 0; border-bottom: 0; border-left: 1px solid var(--am-ornament); border-top: 1px solid var(--am-ornament); } [data-am-tooltip-pos="bottom"]:hover::after, [data-am-tooltip-pos="bottom"]:focus-visible::after { transform: translateX(-50%); } [data-am-tooltip-pos="bottom"]:hover::before, [data-am-tooltip-pos="bottom"]:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); } /* Solid variant — no border, opaque highlight fill, dark text */ .tooltip-solid::after { border-color: transparent; background: var(--am-highlight); color: #141414; } .tooltip-solid::before { border-color: transparent; background: var(--am-highlight); } /* ----------------------------------------------------------------------------- Forms ----------------------------------------------------------------------------- Bootstrap-mirror markup: .form-label, .form-control, .form-select, .form-check (+ .form-check-input / .form-check-label), .form-switch, .form-range, .input-group, .valid/invalid-feedback. All custom-drawn (no browser default widgets) and fully theme-aware. -------------------------------------------------------------------------- */ .form-label { display: inline-block; margin-bottom: .5rem; font-family: var(--am-font-ui); font-weight: 500; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--am-muted); } .form-text { display: block; margin-top: .4rem; font-size: .8rem; color: var(--am-faint); } fieldset { margin: 0 0 1rem; padding: 1.25rem; border: 1px solid var(--am-line-soft); } legend { padding: 0 .6em; font-family: var(--am-font-subtitle); font-weight: 500; letter-spacing: .06em; color: var(--am-text); } .form-control, .form-select { display: block; width: 100%; min-height: 48px; padding: .65rem .85rem; border: 1px solid rgba(var(--am-line-rgb), .28); border-radius: 0; background-color: rgba(0, 0, 0, .35); font-family: var(--am-font-input); color: var(--am-text); transition: border-color var(--am-ease), background var(--am-ease), box-shadow var(--am-ease); appearance: none; } .form-control::placeholder { color: var(--am-faint); opacity: 1; } .form-control:hover, .form-select:hover { border-color: rgba(var(--am-line-rgb), .45); } .form-control:focus, .form-select:focus { outline: 2px solid var(--am-highlight); outline-offset: 2px; border-color: var(--am-ornament); background-color: rgba(0, 0, 0, .5); } .form-control:disabled, .form-select:disabled { border-color: rgba(var(--am-line-rgb), .12); background-color: rgba(255, 255, 255, .02); color: var(--am-disabled-text); cursor: not-allowed; } .form-control[readonly] { background-color: rgba(255, 255, 255, .03); } textarea.form-control { min-height: 120px; resize: vertical; } .form-control-sm { min-height: 38px; padding: .4rem .65rem; font-size: .9rem; } .form-control-lg { min-height: 58px; padding: .85rem 1rem; font-size: 1.08rem; } /* Native date/time inputs — popup follows color-scheme: dark; the field itself is fully themed. The indicator is lifted to match the select chevron's ornament tone (AA-visible against the dark field). */ .form-control::-webkit-calendar-picker-indicator { opacity: 1; filter: invert(56%); cursor: pointer; } .form-control:hover::-webkit-calendar-picker-indicator { filter: invert(75%); } /* File input */ .form-control[type="file"] { padding: .45rem .55rem; cursor: pointer; } .form-control[type="file"]::file-selector-button { margin-right: 1rem; padding: .45rem 1rem; border: 1px solid rgba(var(--am-line-rgb), .35); background: rgba(var(--am-accent-rgb), .12); font-family: var(--am-font-ui); font-weight: 500; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--am-muted); cursor: pointer; transition: border-color var(--am-ease), color var(--am-ease), background var(--am-ease); } .form-control[type="file"]:hover::file-selector-button { border-color: var(--am-ornament); color: var(--am-text); } /* Select — themable chevron drawn with gradients (no data URI) */ .form-select { padding-right: 2.6rem; background-image: linear-gradient(45deg, transparent 50%, var(--am-ornament) 50%), linear-gradient(135deg, var(--am-ornament) 50%, transparent 50%); background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; cursor: pointer; } .form-select option { background: var(--am-surface-2); color: var(--am-text); } .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: .85rem; background-image: none; } /* ---- Checks: checkboxes & radios ----------------------------------------- */ .form-check { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .6rem; min-height: 1.5rem; } .form-check-label { cursor: pointer; color: var(--am-muted); transition: color var(--am-ease); } .form-check-input:not(:disabled) + .form-check-label:hover, .form-check-input:checked + .form-check-label { color: var(--am-text); } .form-check-input { appearance: none; flex: none; width: 20px; height: 20px; margin-top: .2em; padding: 4px; border: 1px solid var(--am-ornament); background-color: rgba(0, 0, 0, .35); background-clip: content-box; cursor: pointer; transition: border-color var(--am-ease), background-color var(--am-ease), box-shadow var(--am-ease); } .form-check-input:hover { border-color: var(--am-highlight); } .form-check-input:checked { border-color: var(--am-highlight); background-color: var(--am-highlight); box-shadow: 0 0 6px rgba(var(--am-highlight-rgb), .35); } .form-check-input[type="checkbox"]:indeterminate { border-color: var(--am-highlight); background: linear-gradient(var(--am-highlight), var(--am-highlight)) center / 60% 2px no-repeat; } .form-check-input[type="radio"] { border-radius: 50%; } /* Diamond variant — add .diamond to a radio for the rotated manor mark */ .form-check-input.diamond { border-radius: 0; transform: rotate(45deg); width: 17px; height: 17px; padding: 3.5px; } .form-check-input:disabled { border-color: var(--am-disabled); background-color: rgba(255, 255, 255, .02); cursor: not-allowed; box-shadow: none; } .form-check-input:disabled:checked { background-color: var(--am-disabled); } .form-check-input:disabled + .form-check-label { color: var(--am-disabled-text); cursor: not-allowed; } .form-check-inline { display: inline-flex; margin-right: 1.25rem; } /* ---- Switch --------------------------------------------------------------- */ .form-switch .form-check-input { width: 44px; height: 22px; padding: 0; border-radius: 22px; background-clip: border-box; background-color: rgba(0, 0, 0, .4); background-image: radial-gradient(circle 7px at center, var(--am-muted) 96%, transparent); background-size: 18px 18px; background-position: 2px center; background-repeat: no-repeat; transition: background-position .2s var(--am-ease-curve), background-color var(--am-ease), border-color var(--am-ease); } .form-switch .form-check-input:checked { background-color: rgba(var(--am-accent-rgb), .45); background-image: radial-gradient(circle 7px at center, var(--am-highlight) 96%, transparent); background-position: 24px center; box-shadow: none; } .form-switch .form-check-input:disabled { background-image: radial-gradient(circle 7px at center, var(--am-disabled) 96%, transparent); } /* ---- Range ---------------------------------------------------------------- */ .form-range { appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; } .form-range:focus-visible { outline: 2px solid var(--am-highlight); outline-offset: 4px; } .form-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, rgba(var(--am-ornament-rgb), .7), rgba(var(--am-ornament-rgb), .25)); } .form-range::-moz-range-track { height: 2px; background: linear-gradient(90deg, rgba(var(--am-ornament-rgb), .7), rgba(var(--am-ornament-rgb), .25)); } .form-range::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; margin-top: -6.5px; border: 1px solid var(--am-highlight); border-radius: 0; background: var(--am-surface-2); box-shadow: 0 0 6px rgba(var(--am-highlight-rgb), .3); transform: rotate(45deg); transition: background var(--am-ease); } .form-range::-moz-range-thumb { width: 15px; height: 15px; border: 1px solid var(--am-highlight); border-radius: 0; background: var(--am-surface-2); box-shadow: 0 0 6px rgba(var(--am-highlight-rgb), .3); transform: rotate(45deg); transition: background var(--am-ease); } .form-range::-webkit-slider-thumb:hover { background: var(--am-highlight); } .form-range::-moz-range-thumb:hover { background: var(--am-highlight); } .form-range:disabled { cursor: not-allowed; } .form-range:disabled::-webkit-slider-thumb { border-color: var(--am-disabled); box-shadow: none; } .form-range:disabled::-moz-range-thumb { border-color: var(--am-disabled); box-shadow: none; } /* ---- Input groups --------------------------------------------------------- */ .input-group { display: flex; align-items: stretch; width: 100%; } .input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; min-width: 0; } .input-group > :not(:first-child) { margin-left: -1px; } .input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 3; } .input-group-text { display: flex; align-items: center; gap: .5em; padding: .65rem .85rem; border: 1px solid rgba(var(--am-line-rgb), .28); background: rgba(var(--am-accent-rgb), .1); font-family: var(--am-font-ui); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--am-muted); white-space: nowrap; } .input-group .btn { min-height: 0; } /* ---- Validation ----------------------------------------------------------- */ .valid-feedback, .invalid-feedback { display: none; margin-top: .4rem; font-size: .8rem; } .valid-feedback { color: var(--am-success); } .invalid-feedback { color: var(--am-danger); } .form-control.is-valid, .form-select.is-valid, .form-check-input.is-valid { border-color: var(--am-success); } .form-control.is-invalid, .form-select.is-invalid, .form-check-input.is-invalid { border-color: var(--am-danger); } .form-control.is-invalid:focus, .form-select.is-invalid:focus { outline-color: var(--am-danger); } .is-valid ~ .valid-feedback, .is-invalid ~ .invalid-feedback { display: block; } /* ---- Progress ------------------------------------------------------------- */ .progress { display: flex; height: 8px; overflow: hidden; border: 1px solid var(--am-line-soft); background: rgba(0, 0, 0, .4); } .progress-lg { height: 16px; } .progress-bar { display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(90deg, rgba(var(--am-accent-rgb), .9), var(--am-highlight)); color: #17120a; font-family: var(--am-font-ui); font-weight: 600; font-size: .58rem; letter-spacing: .1em; white-space: nowrap; transition: width .5s var(--am-ease-curve); } .progress-bar-success { background: linear-gradient(90deg, rgba(var(--am-success-rgb), .7), var(--am-success)); } .progress-bar-danger { background: linear-gradient(90deg, rgba(var(--am-danger-rgb), .7), var(--am-danger)); } .progress-bar-info { background: linear-gradient(90deg, rgba(var(--am-info-rgb), .7), var(--am-info)); } @keyframes am-progress-stripes { from { background-position-x: 1rem; } } .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, .16) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .16) 75%, transparent 75%, transparent); background-size: 1rem 1rem; } .progress-bar-animated { animation: am-progress-stripes 1s linear infinite; } /* ---- Stepper (wizard progress) -------------------------------------------- */ .stepper { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: am-step; } .stepper-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 0 .5rem; text-align: center; counter-increment: am-step; color: var(--am-faint); } .stepper-item::before { content: ""; z-index: 1; width: 15px; height: 15px; transform: rotate(45deg); border: 1px solid var(--am-ornament); background: var(--am-page); transition: background var(--am-ease), border-color var(--am-ease), box-shadow var(--am-ease); } /* connecting rail */ .stepper-item::after { content: ""; position: absolute; top: 7px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 1px; background: rgba(var(--am-ornament-rgb), .4); } .stepper-item:first-child::after { display: none; } .stepper-label { font-family: var(--am-font-ui); font-weight: 500; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; } .stepper-item.done { color: var(--am-muted); } .stepper-item.done::before { background: var(--am-ornament); border-color: var(--am-ornament); } .stepper-item.done::after { background: rgba(var(--am-ornament-rgb), .75); } .stepper-item.active { color: var(--am-text); } .stepper-item.active::before { border-color: var(--am-highlight); background: var(--am-highlight); box-shadow: 0 0 9px rgba(var(--am-highlight-rgb), .55); } .stepper-item.active::after { background: rgba(var(--am-ornament-rgb), .75); } /* Custom node icons — swap the default diamond for any inline icon (homebrew set, Font Awesome, anything that renders inline):
  • … Confirm
    • Shapes: .stepper-node (square) / .stepper-node-circle / .stepper-node-diamond */ .stepper-node { z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--am-ornament); background: var(--am-page); color: var(--am-muted); transition: border-color var(--am-ease), background var(--am-ease), color var(--am-ease), box-shadow var(--am-ease); } .stepper-node .ico { width: 1.1em; height: 1.1em; vertical-align: 0; } .stepper-node-circle { border-radius: 50%; } .stepper-node-diamond { transform: rotate(45deg); } .stepper-node-diamond .ico { transform: rotate(-45deg); } .stepper-item:has(.stepper-node)::before { display: none; } .stepper-item:has(.stepper-node)::after { top: 16px; left: calc(-50% + 26px); right: calc(50% + 26px); } .stepper-item.done .stepper-node { background: rgba(var(--am-ornament-rgb), .22); color: var(--am-text); } .stepper-item.active .stepper-node { border-color: var(--am-highlight); background: rgba(var(--am-highlight-rgb), .12); color: var(--am-text); box-shadow: 0 0 9px rgba(var(--am-highlight-rgb), .45); } .stepper-vertical { flex-direction: column; gap: 1.4rem; } .stepper-vertical .stepper-item { flex-direction: row; text-align: left; padding: 0; gap: 1rem; } .stepper-vertical .stepper-item::after { top: auto; bottom: calc(100% - 4px); left: 7px; right: auto; width: 1px; height: calc(1.4rem + 4px); } /* ---- Number stepper (input + / −) ----------------------------------------- */ .input-stepper { display: inline-flex; align-items: stretch; } .input-stepper .form-control { width: 5.5ch; min-height: 44px; text-align: center; padding-inline: .25rem; -moz-appearance: textfield; } .input-stepper .form-control::-webkit-outer-spin-button, .input-stepper .form-control::-webkit-inner-spin-button { appearance: none; margin: 0; } .input-stepper .btn { min-height: 44px; width: 44px; padding: 0; font-size: 1.1rem; line-height: 1; } .input-stepper > :not(:first-child) { margin-left: -1px; } /* ----------------------------------------------------------------------------- Navbar (header bar) ----------------------------------------------------------------------------- Collapses below 992px; toggler uses data-am-toggle="collapse". -------------------------------------------------------------------------- */ .navbar { position: relative; z-index: var(--am-z-sticky); border-bottom: 1px solid var(--am-line-soft); background: rgba(0, 0, 0, .28); } .navbar-sticky { position: sticky; top: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .navbar > .container, .navbar > .container-fluid { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; min-height: 72px; padding-top: .5rem; padding-bottom: .5rem; } .navbar-brand { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--am-font-display); font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; color: var(--am-text); text-decoration: none; } .navbar-brand .ico { width: 1.5em; height: 1.5em; color: var(--am-ornament); } .navbar-nav { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; } .nav-link { position: relative; display: inline-flex; align-items: center; gap: .5em; padding: .75rem 1rem; font-family: var(--am-font-ui); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--am-muted); text-decoration: none; transition: color var(--am-ease); } .nav-link:hover { color: var(--am-text); } .nav-link.active { color: var(--am-text); } .nav-link.active::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .35rem; height: 1px; background: linear-gradient(90deg, var(--am-highlight), rgba(var(--am-highlight-rgb), .08)); } .nav-link.disabled { color: var(--am-disabled-text); pointer-events: none; } .navbar-search { display: flex; margin-left: auto; } .navbar-search .form-control { min-height: 42px; min-width: 200px; } .navbar-search .btn { min-height: 42px; } .navbar-toggler { display: none; margin-left: auto; padding: .6rem; border: 1px solid var(--am-line-soft); color: var(--am-muted); transition: border-color var(--am-ease), color var(--am-ease); } .navbar-toggler:hover { border-color: var(--am-ornament); color: var(--am-text); } .navbar-toggler .ico { width: 1.4em; height: 1.4em; } .navbar-collapse { display: flex; flex-grow: 1; align-items: center; gap: 1rem 1.75rem; } @media (max-width: 991.98px) { .navbar-toggler { display: inline-flex; } .navbar-collapse { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: .75rem 0 1.25rem; } .navbar-collapse.show { display: flex; } .navbar-collapse.collapsing { display: flex; } .navbar-nav { flex-direction: column; align-items: stretch; gap: 0; } .nav-link { padding: .8rem .25rem; } .nav-link.active::after { left: .25rem; right: auto; width: 56px; } .navbar-search { margin-left: 0; } .navbar-search .form-control { flex: 1; } .navbar .dropdown-menu { position: static; display: none; margin: 0 0 .5rem; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .navbar .dropdown-menu.show { display: block; } .navbar .dropdown-menu::before { display: none; } } /* Generic collapse behavior (navbar, accordions, show/hide regions) */ .collapse:not(.show) { display: none; } .collapsing { height: 0; overflow: hidden; transition: height .32s var(--am-ease-curve); } /* ----------------------------------------------------------------------------- Dropdown menus -----------------------------------------------------------------------------