/* ============================================================
ix-buttons-v1.0.4.css
INBXIFY — Canonical button design system
Single source of truth for all button styling across T-A.
SIX CANONICAL VARIANTS:
ix-btn--primary Save / Attach / Confirm / Transcribe (CTAs)
ix-btn--secondary Replace / Open in CMS / View (secondary actions)
ix-btn--ghost Cancel / dismiss / link-style triggers
ix-btn--danger Archive / Delete / Discard
ix-btn--pill Filter pills / tab toggles (filled-active)
ix-btn--tab Underline-active tab strips (added v1.0.3)
MODIFIERS:
ix-btn--gold Tint: gold gradient (overrides primary blue)
ix-btn--teal Tint: teal flat (overrides primary blue)
ix-btn--icon Size: square 28x28, centered glyph
ix-btn--lg Size: larger padding (Step CTAs like Transcribe)
STATES:
:hover Subtle lift + shadow change
:disabled Native attribute. opacity 0.4 + not-allowed.
:focus-visible Gold outline 2px (a11y)
CHROME-CASCADE ARMOR PATTERN (every variant uses this):
1. Bumped specificity — element-qualified + dual-class + descendant
selectors all listed so single-class chrome resets lose.
2. !important on all visual properties (background, color, border).
3. Dual background-color + background-image so a chrome reset
nuking shorthand `background` leaves background-image alive.
USAGE:
LOAD ORDER (Webflow ):
1. webflow.css (their compiled chrome)
2. title-admin-page-design-v1.4.x.css (design tokens)
3. ta-studio-components-v1.0.x.css (component-specific styles)
4. ix-buttons-v1.0.4.css ← THIS FILE, LOADS LAST
5. (page-specific overrides)
This file MUST load after both the design CSS and any component
CSS so it wins the cascade by source order in addition to its
built-in armor.
Authored 2026-04-27 as TD-160 / S11.5a.
v1.0.4 (S13 Step 1 polish):
ix-btn--tab font-size reduced 15px → 13px to keep the
6-tab Studio strip compact at default Webflow viewport
widths. Aligns with ix-btn--lg size scale (13px) already
in the module. Per-tab horizontal margin unchanged.
No other variants modified. No structural changes.
v1.0.3 (S13 Step 1 follow-up — TD-166 / Q-G):
Adds new variant: ix-btn--tab.
Underline-active tab pattern. Used for tab strips that switch
panels — Studio's 6-tab strip ships first; UP / Content
Library / Client Manager filter strips migrate in S15 / TD-169.
Visual: text-only label (no fill), inactive = muted text,
active = electric-blue text + 2px electric-blue underline.
Backwards compatible: ix-btn--pill unchanged. All existing
consumers continue to render filled-active pill until they
migrate to --tab in S15.
Why a new variant instead of rewriting --pill: pill is
correctly named for filled-rounded buttons. Tabs are not
pills. Conflating them under one class loses the option to
use either pattern in the future. Both stay available.
v1.0.2 was a stillborn delta-only file (Claude error,
2026-04-28). Skipped. v1.0.3 is the canonical successor
to v1.0.1 — full module, complete replacement.
v1.0.1 (S11.5b Wave 3 — pill activation patterns):
Added `.active` as a synonym for `.is-active` and
`[data-active="true"]` on the pill variant. Universal
convention (Bootstrap, jQuery, etc.) — module should accept
all three. Backwards compatible. No behavioral change to
primary/secondary/ghost/danger or any size/tint modifier.
============================================================ */
/* ─────────────────────────────────────────────
§1 BASE — every button starts here
───────────────────────────────────────────── */
button.ix-btn,
.ix-btn {
/* Reset Webflow / browser button defaults */
appearance: none !important;
-webkit-appearance: none !important;
/* Layout */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
/* Sizing — variants override padding */
padding: 7px 16px !important;
min-height: 32px !important;
line-height: 1.2 !important;
/* Type */
font-family: 'DM Mono', ui-monospace, monospace !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap !important;
/* Border + shape */
border: 1.5px solid transparent !important;
border-radius: 4px !important;
/* Behavior */
cursor: pointer !important;
user-select: none !important;
transition: background-color 0.15s, background-image 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
/* Default neutral surface — variants override */
background-color: transparent !important;
background-image: none !important;
color: #1A3A3A !important;
}
/* Disabled — universal */
button.ix-btn:disabled,
button.ix-btn[disabled],
.ix-btn:disabled,
.ix-btn[disabled] {
opacity: 0.4 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}
/* Focus-visible — accessibility */
button.ix-btn:focus-visible,
.ix-btn:focus-visible {
outline: 2px solid #C4A35A !important;
outline-offset: 2px !important;
}
/* ─────────────────────────────────────────────
§2 ix-btn--primary — CTA (blue gradient + white)
Save / Attach / Confirm / Transcribe / Submit
───────────────────────────────────────────── */
button.ix-btn.ix-btn--primary,
.ix-btn.ix-btn--primary,
.t-a button.ix-btn--primary {
background-color: #5B7FFF !important;
background-image: linear-gradient(135deg, #5B7FFF, #4060DD) !important;
color: #FFFFFF !important;
border-color: transparent !important;
box-shadow: 0 2px 8px rgba(91, 127, 255, 0.20) !important;
}
button.ix-btn.ix-btn--primary:hover:not(:disabled),
.ix-btn.ix-btn--primary:hover:not(:disabled) {
background-image: linear-gradient(135deg, #4060DD, #3050C5) !important;
box-shadow: 0 4px 14px rgba(91, 127, 255, 0.30) !important;
transform: translateY(-1px) !important;
}
button.ix-btn.ix-btn--primary:active:not(:disabled),
.ix-btn.ix-btn--primary:active:not(:disabled) {
transform: translateY(0) !important;
box-shadow: 0 1px 4px rgba(91, 127, 255, 0.20) !important;
}
/* ─────────────────────────────────────────────
§3 ix-btn--secondary — outline-on-cream
Replace / Open in CMS / View / Reset
───────────────────────────────────────────── */
button.ix-btn.ix-btn--secondary,
.ix-btn.ix-btn--secondary,
.t-a button.ix-btn--secondary {
background-color: #FFFFFF !important;
background-image: none !important;
color: #1A3A3A !important;
border-color: #C4A35A !important;
}
button.ix-btn.ix-btn--secondary:hover:not(:disabled),
.ix-btn.ix-btn--secondary:hover:not(:disabled) {
background-color: #FAF9F5 !important;
border-color: #8A6F35 !important;
box-shadow: 0 2px 8px rgba(196, 163, 90, 0.15) !important;
}
/* ─────────────────────────────────────────────
§4 ix-btn--ghost — transparent, gold underlined
Cancel / dismiss / link-style triggers
───────────────────────────────────────────── */
button.ix-btn.ix-btn--ghost,
.ix-btn.ix-btn--ghost,
.t-a button.ix-btn--ghost {
background-color: transparent !important;
background-image: none !important;
color: #C4A35A !important;
border-color: transparent !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1px !important;
padding: 5px 8px !important;
min-height: 28px !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
button.ix-btn.ix-btn--ghost:hover:not(:disabled),
.ix-btn.ix-btn--ghost:hover:not(:disabled) {
color: #8A6F35 !important;
text-decoration-thickness: 1.5px !important;
}
/* ─────────────────────────────────────────────
§5 ix-btn--danger — red text + red border
Archive / Delete / Discard
───────────────────────────────────────────── */
button.ix-btn.ix-btn--danger,
.ix-btn.ix-btn--danger,
.t-a button.ix-btn--danger {
background-color: #FFFFFF !important;
background-image: none !important;
color: #C0392B !important;
border-color: #C0392B !important;
}
button.ix-btn.ix-btn--danger:hover:not(:disabled),
.ix-btn.ix-btn--danger:hover:not(:disabled) {
background-color: rgba(192, 57, 43, 0.06) !important;
box-shadow: 0 2px 8px rgba(192, 57, 43, 0.15) !important;
}
/* Soft danger — text-only, no border. For "discard & retranscribe"
style links where destruction is reversible / lower-stakes. */
button.ix-btn.ix-btn--danger.ix-btn--ghost,
.ix-btn.ix-btn--danger.ix-btn--ghost {
background-color: transparent !important;
border-color: transparent !important;
color: #C0392B !important;
}
button.ix-btn.ix-btn--danger.ix-btn--ghost:hover:not(:disabled),
.ix-btn.ix-btn--danger.ix-btn--ghost:hover:not(:disabled) {
background-color: rgba(192, 57, 43, 0.06) !important;
color: #A02A20 !important;
}
/* ─────────────────────────────────────────────
§6 ix-btn--pill — filter pills / tab toggles (filled-active)
Active state explicit. Use [data-active="true"] OR .is-active
OR .active.
───────────────────────────────────────────── */
button.ix-btn.ix-btn--pill,
.ix-btn.ix-btn--pill,
.t-a button.ix-btn--pill {
background-color: #FAF9F5 !important;
background-image: none !important;
color: #5A6478 !important;
border-color: #E4E0D4 !important;
border-radius: 999px !important;
padding: 6px 16px !important;
min-height: 28px !important;
font-size: 10px !important;
}
button.ix-btn.ix-btn--pill:hover:not(:disabled),
.ix-btn.ix-btn--pill:hover:not(:disabled) {
background-color: #FFFFFF !important;
border-color: #5B7FFF !important;
color: #5B7FFF !important;
}
button.ix-btn.ix-btn--pill[data-active="true"],
button.ix-btn.ix-btn--pill.is-active,
button.ix-btn.ix-btn--pill.active,
.ix-btn.ix-btn--pill[data-active="true"],
.ix-btn.ix-btn--pill.is-active,
.ix-btn.ix-btn--pill.active {
background-color: #5B7FFF !important;
background-image: linear-gradient(135deg, #5B7FFF, #4060DD) !important;
color: #FFFFFF !important;
border-color: #5B7FFF !important;
box-shadow: 0 2px 8px rgba(91, 127, 255, 0.20) !important;
}
button.ix-btn.ix-btn--pill[data-active="true"]:hover:not(:disabled),
button.ix-btn.ix-btn--pill.is-active:hover:not(:disabled),
button.ix-btn.ix-btn--pill.active:hover:not(:disabled),
.ix-btn.ix-btn--pill[data-active="true"]:hover:not(:disabled),
.ix-btn.ix-btn--pill.is-active:hover:not(:disabled),
.ix-btn.ix-btn--pill.active:hover:not(:disabled) {
background-image: linear-gradient(135deg, #4060DD, #3050C5) !important;
color: #FFFFFF !important;
border-color: #4060DD !important;
}
/* ─────────────────────────────────────────────
§7 ix-btn--tab — underline-active tab strips
Added v1.0.3 (S13 / TD-166 / Q-G).
Text-only label, sits on a strip wrapper that owns the
bottom rail. Active = electric-blue text + 2px underline.
Studio's 6-tab strip ships first; UP / Content Library /
Client Manager filter strips migrate in S15 / TD-169.
Note: this variant deliberately overrides §1 base styling
(font, border-radius, padding, min-height, transparent
surface) because tabs are visually distinct from buttons.
The strip wrapper supplies the rail + alignment.
───────────────────────────────────────────── */
button.ix-btn.ix-btn--tab,
.ix-btn.ix-btn--tab,
.t-a button.ix-btn--tab {
background-color: transparent !important;
background-image: none !important;
color: #5A6478 !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
margin: 0 14px 0 0 !important;
margin-bottom: -1px !important;
padding: 12px 4px !important;
min-height: auto !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
box-shadow: none !important;
white-space: nowrap !important;
}
button.ix-btn.ix-btn--tab:hover:not(:disabled),
.ix-btn.ix-btn--tab:hover:not(:disabled) {
background-color: transparent !important;
background-image: none !important;
color: #1E2A3A !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
button.ix-btn.ix-btn--tab[data-active="true"],
button.ix-btn.ix-btn--tab.is-active,
button.ix-btn.ix-btn--tab.active,
.ix-btn.ix-btn--tab[data-active="true"],
.ix-btn.ix-btn--tab.is-active,
.ix-btn.ix-btn--tab.active {
background-color: transparent !important;
background-image: none !important;
color: #5B7FFF !important;
border-bottom: 2px solid #5B7FFF !important;
font-weight: 600 !important;
box-shadow: none !important;
}
button.ix-btn.ix-btn--tab[data-active="true"]:hover:not(:disabled),
button.ix-btn.ix-btn--tab.is-active:hover:not(:disabled),
button.ix-btn.ix-btn--tab.active:hover:not(:disabled),
.ix-btn.ix-btn--tab[data-active="true"]:hover:not(:disabled),
.ix-btn.ix-btn--tab.is-active:hover:not(:disabled),
.ix-btn.ix-btn--tab.active:hover:not(:disabled) {
background-color: transparent !important;
background-image: none !important;
color: #4060DD !important;
border-bottom-color: #4060DD !important;
}
button.ix-btn.ix-btn--tab:disabled,
button.ix-btn.ix-btn--tab[disabled],
.ix-btn.ix-btn--tab:disabled,
.ix-btn.ix-btn--tab[disabled] {
opacity: 0.4 !important;
color: #8A8A7A !important;
border-bottom-color: transparent !important;
}
/* ─────────────────────────────────────────────
§8 TINT MODIFIERS — combine with primary
ix-btn--primary + ix-btn--gold OR ix-btn--teal
───────────────────────────────────────────── */
/* Gold tint — for "Assign N files" sticky bar primary etc. */
button.ix-btn.ix-btn--primary.ix-btn--gold,
.ix-btn.ix-btn--primary.ix-btn--gold,
.t-a button.ix-btn--primary.ix-btn--gold {
background-color: #C4A35A !important;
background-image: linear-gradient(135deg, #C4A35A, #E8C172) !important;
color: #1A3A3A !important;
box-shadow: 0 2px 8px rgba(196, 163, 90, 0.25) !important;
}
button.ix-btn.ix-btn--primary.ix-btn--gold:hover:not(:disabled),
.ix-btn.ix-btn--primary.ix-btn--gold:hover:not(:disabled) {
background-image: linear-gradient(135deg, #B89548, #D4A85A) !important;
box-shadow: 0 4px 14px rgba(196, 163, 90, 0.35) !important;
}
/* Teal tint — for Save Draft style buttons (RTE upload / Transcriber save) */
button.ix-btn.ix-btn--primary.ix-btn--teal,
.ix-btn.ix-btn--primary.ix-btn--teal,
.t-a button.ix-btn--primary.ix-btn--teal {
background-color: #1A3A3A !important;
background-image: linear-gradient(135deg, #1A3A3A, #2D5A5A) !important;
color: #FAF9F5 !important;
box-shadow: 0 2px 8px rgba(26, 58, 58, 0.20) !important;
}
button.ix-btn.ix-btn--primary.ix-btn--teal:hover:not(:disabled),
.ix-btn.ix-btn--primary.ix-btn--teal:hover:not(:disabled) {
background-image: linear-gradient(135deg, #0F2929, #1A3A3A) !important;
box-shadow: 0 4px 14px rgba(26, 58, 58, 0.30) !important;
}
/* ─────────────────────────────────────────────
§9 SIZE MODIFIERS
───────────────────────────────────────────── */
/* Icon-only square button (close ✕, more ⋯, etc.) */
button.ix-btn.ix-btn--icon,
.ix-btn.ix-btn--icon,
.t-a button.ix-btn--icon {
padding: 0 !important;
width: 28px !important;
height: 28px !important;
min-height: 28px !important;
min-width: 28px !important;
border-radius: 4px !important;
font-size: 14px !important;
line-height: 1 !important;
gap: 0 !important;
}
/* Large CTA — Step buttons like Transcribe Screenshot */
button.ix-btn.ix-btn--lg,
.ix-btn.ix-btn--lg,
.t-a button.ix-btn--lg {
padding: 12px 24px !important;
min-height: 44px !important;
font-size: 13px !important;
gap: 8px !important;
}
/* ─────────────────────────────────────────────
§10 COMPATIBILITY HELPERS — for migration only
Removed in S11.5c after all consumers migrated.
───────────────────────────────────────────── */
/* During migration (S11.5b waves), some surfaces will still emit
legacy class names while others have switched. To prevent visual
thrash mid-deploy, we don't add legacy aliases here — instead each
migration wave updates the JS to emit the new class atomically.
If a wave drags out, add temporary aliases here as needed and
delete them as part of S11.5c.
Example pattern for an alias (not active in v1.0.3):
button.ix-btn.cmp-btn.cmp-btn--primary { ... rules from --primary ... }
*/
/* End of ix-buttons-v1.0.4.css */