/*! * FluxaWay Metallic — experimental design skin. * * Load this file after fluxaway-ui.css and select data-design="metallic" on * . The finish is selected independently with data-metal-theme; Aurum * is the default. Every rule is scoped, so loading the file alone is inert. */ /* ── Material tokens ───────────────────────────────────── */ [data-design="metallic"] { color-scheme: light; --m-font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mx-material-name: aurum; --mx-model: aurum; --mx-accent-light: #b88422; --mx-accent-bright-light: #edc96c; --mx-metal-light: #426b91; --mx-metal-bright-light: #7f9fbc; --mx-signal-light: #9e3540; --mx-on-primary-light: #ffffff; --mx-grid-light: rgb(43 72 101 / 0.08); --mx-bg-light: #e9edf2; --mx-surface-light: #f8f9fb; --mx-surface-soft-light: #e2e8ef; --mx-surface-muted-light: #f0f3f6; --mx-surface-raised-light: #d9e1e9; --mx-text-light: #121e2e; --mx-text-muted-light: #58677a; --mx-border-light: #afbbc8; --mx-primary-light: #8a6010; --mx-primary-hover-light: #684706; --mx-primary-soft-light: #f1e3b8; --mx-secondary-light: #426b91; --mx-focus-light: #d5aa48; --mx-accent-dark: #b88422; --mx-accent-bright-dark: #edc96c; --mx-metal-dark: #7ea3c4; --mx-metal-bright-dark: #b8ccdf; --mx-signal-dark: #d45b67; --mx-on-primary-dark: #171205; --mx-grid-dark: rgb(123 151 181 / 0.07); --mx-bg-dark: #0d1420; --mx-surface-dark: #151f2d; --mx-surface-soft-dark: #1a2737; --mx-surface-muted-dark: #121b28; --mx-surface-raised-dark: #223247; --mx-text-dark: #eef1f5; --mx-text-muted-dark: #9caabd; --mx-border-dark: #35475b; --mx-primary-dark: #e7bd59; --mx-primary-hover-dark: #f3d27c; --mx-primary-soft-dark: #493a18; --mx-secondary-dark: #7ea3c4; --mx-focus-dark: #e7bd59; --mx-accent: var(--mx-accent-light); --mx-accent-bright: var(--mx-accent-bright-light); --mx-metal: var(--mx-metal-light); --mx-metal-bright: var(--mx-metal-bright-light); --mx-signal: var(--mx-signal-light); --mx-on-primary: var(--mx-on-primary-light); --mx-grid: var(--mx-grid-light); --m-bg: var(--mx-bg-light); --m-surface: var(--mx-surface-light); --m-surface-soft: var(--mx-surface-soft-light); --m-surface-muted: var(--mx-surface-muted-light); --m-surface-raised: var(--mx-surface-raised-light); --m-text: var(--mx-text-light); --m-text-muted: var(--mx-text-muted-light); --m-border: var(--mx-border-light); --m-primary: var(--mx-primary-light); --m-primary-hover: var(--mx-primary-hover-light); --m-primary-soft: var(--mx-primary-soft-light); --m-secondary: var(--mx-secondary-light); --m-focus: var(--mx-focus-light); --m-radius: 3px; --m-radius-sm: 2px; --m-radius-lg: 6px; --m-radius-xl: 10px; --m-shadow-1: 0 1px 0 rgb(255 255 255 / 0.82) inset, 0 10px 28px rgb(30 45 64 / 0.09); --m-shadow-2: 0 1px 0 rgb(255 255 255 / 0.88) inset, 0 18px 42px rgb(30 45 64 / 0.14); --m-shadow-3: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 30px 64px rgb(30 45 64 / 0.18); } [data-design="metallic"][data-metal-theme="cobalt"] { --mx-material-name: cobalt; --mx-model: cobalt; --mx-accent-light: #3169b8; --mx-accent-bright-light: #8eb6ec; --mx-metal-light: #a52e3b; --mx-metal-bright-light: #db6b75; --mx-signal-light: #a52e3b; --mx-grid-light: rgb(41 83 139 / 0.09); --mx-bg-light: #e7ebf0; --mx-surface-light: #f6f8fa; --mx-surface-soft-light: #e0e6ed; --mx-surface-muted-light: #edf1f5; --mx-surface-raised-light: #d6dee7; --mx-text-light: #111a26; --mx-text-muted-light: #596676; --mx-border-light: #adb8c5; --mx-primary-light: #285b9f; --mx-primary-hover-light: #1f477e; --mx-primary-soft-light: #d9e6f7; --mx-secondary-light: #a52e3b; --mx-focus-light: #7aa7df; --mx-accent-dark: #74a2df; --mx-accent-bright-dark: #b4d0f3; --mx-metal-dark: #d45b67; --mx-metal-bright-dark: #ee9ca4; --mx-signal-dark: #e06a75; --mx-on-primary-dark: #071321; --mx-grid-dark: rgb(75 118 174 / 0.08); --mx-bg-dark: #0b1018; --mx-surface-dark: #141c27; --mx-surface-soft-dark: #182432; --mx-surface-muted-dark: #111923; --mx-surface-raised-dark: #213044; --mx-text-dark: #edf2f8; --mx-text-muted-dark: #9aa8b9; --mx-border-dark: #334358; --mx-primary-dark: #74a2df; --mx-primary-hover-dark: #9fc0eb; --mx-primary-soft-dark: #203f68; --mx-secondary-dark: #d45b67; --mx-focus-dark: #74a2df; --m-danger: #a52e3b; --m-danger-hover: #81212c; --m-danger-soft: #f3dadd; } [data-design="metallic"][data-metal-theme="cobalt-aurum"] { --mx-material-name: cobalt-aurum; --mx-model: cobalt; } [data-design="metallic"][data-metal-theme="inox"] { --mx-material-name: inox; --mx-model: cobalt; --mx-accent-light: #607e91; --mx-accent-bright-light: #c5d0d7; --mx-metal-light: #8f9ca5; --mx-metal-bright-light: #eef3f6; --mx-signal-light: #607e91; --mx-on-primary-light: #ffffff; --mx-grid-light: rgb(83 107 125 / 0.07); --mx-bg-light: #e8ecef; --mx-surface-light: #f7f9fa; --mx-surface-soft-light: #dde3e7; --mx-surface-muted-light: #eef1f3; --mx-surface-raised-light: #d2dae0; --mx-text-light: #151c22; --mx-text-muted-light: #5c6871; --mx-border-light: #aab5bd; --mx-primary-light: #4f6b7d; --mx-primary-hover-light: #3c5565; --mx-primary-soft-light: #d8e3e9; --mx-secondary-light: #667680; --mx-focus-light: #718fa2; --mx-accent-dark: #b8c7d0; --mx-accent-bright-dark: #eef3f6; --mx-metal-dark: #829dab; --mx-metal-bright-dark: #d7e0e5; --mx-signal-dark: #b8c7d0; --mx-on-primary-dark: #11171c; --mx-grid-dark: rgb(148 169 183 / 0.07); --mx-bg-dark: #10161b; --mx-surface-dark: #192127; --mx-surface-soft-dark: #202b33; --mx-surface-muted-dark: #141b20; --mx-surface-raised-dark: #2a363f; --mx-text-dark: #f0f4f6; --mx-text-muted-dark: #a4b0b8; --mx-border-dark: #42515b; --mx-primary-dark: #b8c7d0; --mx-primary-hover-dark: #d7e0e5; --mx-primary-soft-dark: #344550; --mx-secondary-dark: #829dab; --mx-focus-dark: #b8c7d0; } [data-design="metallic"][data-metal-theme="bronze"] { --mx-material-name: bronze; --mx-model: aurum; --mx-accent-light: #a7622e; --mx-accent-bright-light: #e0a56d; --mx-metal-light: #63857b; --mx-metal-bright-light: #9db6ae; --mx-signal-light: #a7622e; --mx-on-primary-light: #ffffff; --mx-grid-light: rgb(112 69 39 / 0.07); --mx-bg-light: #eee9e4; --mx-surface-light: #fbf8f5; --mx-surface-soft-light: #e8ded5; --mx-surface-muted-light: #f3eeea; --mx-surface-raised-light: #dfd1c5; --mx-text-light: #291b14; --mx-text-muted-light: #705e52; --mx-border-light: #c2aa98; --mx-primary-light: #81461f; --mx-primary-hover-light: #623316; --mx-primary-soft-light: #f0d9c5; --mx-secondary-light: #4f776d; --mx-focus-light: #bb7140; --mx-accent-dark: #d58a50; --mx-accent-bright-dark: #efbc89; --mx-metal-dark: #7fa89b; --mx-metal-bright-dark: #b8d0c8; --mx-signal-dark: #d58a50; --mx-on-primary-dark: #221007; --mx-grid-dark: rgb(184 111 62 / 0.065); --mx-bg-dark: #17100c; --mx-surface-dark: #211812; --mx-surface-soft-dark: #2b1f17; --mx-surface-muted-dark: #1b130f; --mx-surface-raised-dark: #38271b; --mx-text-dark: #f3ece6; --mx-text-muted-dark: #baa797; --mx-border-dark: #533b2d; --mx-primary-dark: #d58a50; --mx-primary-hover-dark: #e6a76f; --mx-primary-soft-dark: #4c2d1c; --mx-secondary-dark: #7fa89b; --mx-focus-dark: #d58a50; } [data-design="metallic"][data-metal-theme="ferrum"] { --mx-material-name: ferrum; --mx-model: cobalt; --mx-accent-light: #9b4320; --mx-accent-bright-light: #d47a46; --mx-metal-light: #3e4b52; --mx-metal-bright-light: #78868d; --mx-signal-light: #b75127; --mx-on-primary-light: #ffffff; --mx-grid-light: rgb(78 67 59 / 0.08); --mx-bg-light: #e6e3df; --mx-surface-light: #f4f2ef; --mx-surface-soft-light: #dcd8d2; --mx-surface-muted-light: #ebe8e4; --mx-surface-raised-light: #d2cdc6; --mx-text-light: #221c18; --mx-text-muted-light: #6e625a; --mx-border-light: #afa49a; --mx-primary-light: #8c3e20; --mx-primary-hover-light: #672a14; --mx-primary-soft-light: #ecd6ca; --mx-secondary-light: #46575f; --mx-focus-light: #b95b30; --mx-accent-dark: #d06f3b; --mx-accent-bright-dark: #e9a476; --mx-metal-dark: #7e8a8f; --mx-metal-bright-dark: #b7c0c4; --mx-signal-dark: #d06f3b; --mx-on-primary-dark: #1c0c05; --mx-grid-dark: rgb(128 111 98 / 0.07); --mx-bg-dark: #101113; --mx-surface-dark: #191b1d; --mx-surface-soft-dark: #222527; --mx-surface-muted-dark: #151719; --mx-surface-raised-dark: #2d3032; --mx-text-dark: #eeeae6; --mx-text-muted-dark: #a9a19a; --mx-border-dark: #49443f; --mx-primary-dark: #d06f3b; --mx-primary-hover-dark: #e3915f; --mx-primary-soft-dark: #4b2a1d; --mx-secondary-dark: #7e8a8f; --mx-focus-dark: #d06f3b; } [data-design="metallic"][data-metal-theme="black-inox"] { --mx-material-name: black-inox; --mx-model: cobalt; --mx-black-inox-core: #242a2e; --mx-accent-light: #242a2e; --mx-accent-bright-light: #aeb8be; --mx-metal-light: #77858e; --mx-metal-bright-light: #e9eef1; --mx-signal-light: #2e363b; --mx-on-primary-light: #ffffff; --mx-grid-light: rgb(46 52 56 / 0.07); --mx-bg-light: #e4e7e9; --mx-surface-light: #f6f7f8; --mx-surface-soft-light: #d9dee1; --mx-surface-muted-light: #eceeef; --mx-surface-raised-light: #ccd3d7; --mx-text-light: #111518; --mx-text-muted-light: #596168; --mx-border-light: #a6afb5; --mx-primary-light: #242a2e; --mx-primary-hover-light: #111518; --mx-primary-soft-light: #d5dadd; --mx-secondary-light: #687780; --mx-focus-light: #7f8f98; --mx-accent-dark: #c4cdd2; --mx-accent-bright-dark: #f5f7f8; --mx-metal-dark: #56636b; --mx-metal-bright-dark: #b8c3c9; --mx-signal-dark: #dce3e7; --mx-on-primary-dark: #f4f6f7; --mx-grid-dark: rgb(145 158 166 / 0.06); --mx-bg-dark: #07090a; --mx-surface-dark: #111417; --mx-surface-soft-dark: #181d21; --mx-surface-muted-dark: #0d1012; --mx-surface-raised-dark: #22282d; --mx-text-dark: #f1f3f4; --mx-text-muted-dark: #9ba4aa; --mx-border-dark: #353d42; --mx-primary-dark: #b8c3c9; --mx-primary-hover-dark: #dce3e7; --mx-primary-soft-dark: #242b30; --mx-secondary-dark: #aeb9c0; --mx-focus-dark: #aeb9c0; } [data-design="metallic"]:is( [data-metal-theme="cobalt"], [data-metal-theme="cobalt-aurum"], [data-metal-theme="inox"], [data-metal-theme="ferrum"], [data-metal-theme="black-inox"] ) { --m-radius: 7px 2px; --m-radius-sm: 4px 1px; --m-radius-lg: 12px 3px; --m-radius-xl: 18px 4px; --m-shadow-1: 0 1px 0 rgb(255 255 255 / 0.72) inset, 0 8px 22px rgb(20 32 47 / 0.12); --m-shadow-2: 0 1px 0 rgb(255 255 255 / 0.76) inset, 0 18px 40px rgb(20 32 47 / 0.17); --m-shadow-3: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 30px 64px rgb(20 32 47 / 0.22); } /* Dark mode changes light direction as well as color. */ [data-theme="dark"][data-design="metallic"] { color-scheme: dark; --mx-accent: var(--mx-accent-dark); --mx-accent-bright: var(--mx-accent-bright-dark); --mx-metal: var(--mx-metal-dark); --mx-metal-bright: var(--mx-metal-bright-dark); --mx-signal: var(--mx-signal-dark); --mx-on-primary: var(--mx-on-primary-dark); --mx-grid: var(--mx-grid-dark); --m-bg: var(--mx-bg-dark); --m-surface: var(--mx-surface-dark); --m-surface-soft: var(--mx-surface-soft-dark); --m-surface-muted: var(--mx-surface-muted-dark); --m-surface-raised: var(--mx-surface-raised-dark); --m-text: var(--mx-text-dark); --m-text-muted: var(--mx-text-muted-dark); --m-border: var(--mx-border-dark); --m-primary: var(--mx-primary-dark); --m-primary-hover: var(--mx-primary-hover-dark); --m-primary-soft: var(--mx-primary-soft-dark); --m-secondary: var(--mx-secondary-dark); --m-focus: var(--mx-focus-dark); --m-shadow-1: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 10px 26px rgb(0 0 0 / 0.3); --m-shadow-2: 0 1px 0 rgb(255 255 255 / 0.07) inset, 0 20px 46px rgb(0 0 0 / 0.4); --m-shadow-3: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 32px 70px rgb(0 0 0 / 0.5); } [data-theme="dark"][data-design="metallic"][data-metal-theme="cobalt"] { --m-danger: #e06a75; --m-danger-hover: #ee8c95; --m-danger-soft: #4b1f27; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-design="metallic"] { color-scheme: dark; --mx-accent: var(--mx-accent-dark); --mx-accent-bright: var(--mx-accent-bright-dark); --mx-metal: var(--mx-metal-dark); --mx-metal-bright: var(--mx-metal-bright-dark); --mx-signal: var(--mx-signal-dark); --mx-on-primary: var(--mx-on-primary-dark); --mx-grid: var(--mx-grid-dark); --m-bg: var(--mx-bg-dark); --m-surface: var(--mx-surface-dark); --m-surface-soft: var(--mx-surface-soft-dark); --m-surface-muted: var(--mx-surface-muted-dark); --m-surface-raised: var(--mx-surface-raised-dark); --m-text: var(--mx-text-dark); --m-text-muted: var(--mx-text-muted-dark); --m-border: var(--mx-border-dark); --m-primary: var(--mx-primary-dark); --m-primary-hover: var(--mx-primary-hover-dark); --m-primary-soft: var(--mx-primary-soft-dark); --m-secondary: var(--mx-secondary-dark); --m-focus: var(--mx-focus-dark); --m-shadow-1: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 10px 26px rgb(0 0 0 / 0.3); --m-shadow-2: 0 1px 0 rgb(255 255 255 / 0.07) inset, 0 20px 46px rgb(0 0 0 / 0.4); --m-shadow-3: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 32px 70px rgb(0 0 0 / 0.5); } :root:not([data-theme="light"])[data-design="metallic"][data-metal-theme="cobalt"] { --m-danger: #e06a75; --m-danger-hover: #ee8c95; --m-danger-soft: #4b1f27; } } /* ── Page material ─────────────────────────────────────── */ html[data-design="metallic"], html[data-design="metallic"] body { background-color: var(--m-bg); color: var(--m-text); } html[data-design="metallic"] body { background-image: linear-gradient(var(--mx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--mx-grid) 1px, transparent 1px); background-size: 40px 40px; font-kerning: normal; font-optical-sizing: auto; font-synthesis: none; text-rendering: optimizeLegibility; } /* ── Typography ────────────────────────────────────────── * Metallic identity comes from material, light and geometry. Interface copy * stays deliberately quieter so reflections never fight the letterforms. */ [data-design="metallic"] :is( .m-button, .m-label, .m-error, .m-chip, .m-badge, .m-switch-label, .m-pagination-item, .m-collapse-header, .m-app-bar-title, .m-bottom-nav-item, .m-bottom-nav-badge, .m-file-dropzone-label, .m-fab, .m-navbar-link, .m-combobox-option-selected, .m-step-label ) { font-weight: 600; } [data-design="metallic"] :is(.m-title, .m-stat-value) { font-weight: 700; letter-spacing: -0.018em; } [data-design="metallic"] .m-eyebrow { font-weight: 650; letter-spacing: 0.055em; } [data-design="metallic"] .m-table th { font-weight: 650; letter-spacing: 0.035em; } /* ── Actions ───────────────────────────────────────────── */ [data-design="metallic"] :is(.m-button, .m-chip, .m-badge) { letter-spacing: 0.01em; line-height: 1.25; } [data-design="metallic"] :is(.m-button-contained:not(.m-button-effect), .m-chip-active) { border-color: color-mix(in srgb, var(--m-primary) 72%, var(--mx-metal)); background-color: var(--m-primary); background-image: linear-gradient( 112deg, transparent 0 35%, rgb(255 255 255 / 0.3) 44%, rgb(255 255 255 / 0.08) 49%, transparent 58% 100% ); background-position: 118% 0; background-repeat: no-repeat; background-size: 240% 100%; box-shadow: 0 1px 0 rgb(255 255 255 / 0.3) inset, 0 8px 20px color-mix(in srgb, var(--m-primary) 24%, transparent); color: var(--mx-on-primary); transition: background-color var(--m-transition-fast), background-position 680ms cubic-bezier(0.22, 0.8, 0.26, 1), border-color var(--m-transition-fast), box-shadow var(--m-transition-fast), transform var(--m-transition-fast); } [data-design="metallic"] :is(.m-button-contained:not(.m-button-effect), .m-chip-active):hover { border-color: var(--m-primary-hover); background-color: var(--m-primary-hover); background-image: linear-gradient( 112deg, transparent 0 35%, rgb(255 255 255 / 0.3) 44%, rgb(255 255 255 / 0.08) 49%, transparent 58% 100% ); background-position: -24% 0; background-size: 240% 100%; color: var(--mx-on-primary); } [data-design="metallic"] .m-button-tonal:not(.m-button-effect) { border-color: color-mix(in srgb, var(--mx-metal) 42%, var(--m-border)); background: linear-gradient(112deg, transparent 30%, rgb(255 255 255 / 0.16) 48%, transparent 60%), color-mix(in srgb, var(--m-primary-soft) 78%, var(--mx-metal)); box-shadow: 0 1px 0 rgb(255 255 255 / 0.16) inset; color: color-mix(in srgb, var(--m-primary-hover) 78%, var(--m-text)); } [data-design="metallic"] .m-button-outline:not(.m-button-effect) { border-color: color-mix(in srgb, var(--mx-metal) 58%, var(--m-border)); background: linear-gradient(145deg, rgb(255 255 255 / 0.06), transparent 48%); } [data-design="metallic"] .m-button-outline:not(.m-button-effect):hover:not(:disabled) { border-color: var(--mx-accent); background: linear-gradient(112deg, transparent 38%, color-mix(in srgb, var(--mx-metal-bright) 18%, transparent) 48%, transparent 58%), var(--m-surface-raised); } [data-design="metallic"] .m-button-danger:not(.m-button-effect) { border-color: color-mix(in srgb, var(--m-danger) 78%, var(--mx-metal)); background-color: var(--m-danger); background-image: linear-gradient(112deg, transparent 35%, rgb(255 255 255 / 0.26) 46%, transparent 57%); background-position: 118% 0; background-repeat: no-repeat; background-size: 240% 100%; box-shadow: 0 1px 0 rgb(255 255 255 / 0.26) inset, 0 8px 18px color-mix(in srgb, var(--m-danger) 20%, transparent); transition: background-color var(--m-transition-fast), background-position 680ms cubic-bezier(0.22, 0.8, 0.26, 1); } [data-design="metallic"] .m-button-danger:not(.m-button-effect):hover { background-color: var(--m-danger-hover); background-image: linear-gradient(112deg, transparent 35%, rgb(255 255 255 / 0.26) 46%, transparent 57%); background-position: -24% 0; background-size: 240% 100%; } [data-design="metallic"][data-metal-theme="inox"] .m-button-contained:not(.m-button-effect) { background-image: linear-gradient(110deg, transparent 0 7%, rgb(18 29 36 / 0.2) 16%, transparent 28%, rgb(255 255 255 / 0.4) 45%, rgb(36 52 62 / 0.16) 52%, rgb(255 255 255 / 0.24) 72%, transparent 88% 100%); } [data-design="metallic"][data-metal-theme="bronze"] .m-button-contained:not(.m-button-effect) { background-image: linear-gradient(110deg, transparent 0 7%, rgb(61 29 12 / 0.28) 16%, transparent 29%, rgb(255 220 171 / 0.36) 48%, rgb(74 42 26 / 0.2) 58%, transparent 82% 100%); } [data-design="metallic"][data-metal-theme="ferrum"] .m-button-contained:not(.m-button-effect) { background-image: radial-gradient(circle at 18% 32%, rgb(255 181 119 / 0.2), transparent 17%), linear-gradient(115deg, transparent 0 6%, rgb(32 22 17 / 0.3) 16%, transparent 34%, rgb(255 203 164 / 0.22) 51%, transparent 57%, rgb(49 29 20 / 0.24) 72%, transparent 91% 100%); } [data-design="metallic"][data-metal-theme="black-inox"] .m-button-contained:not(.m-button-effect) { border-color: color-mix(in srgb, var(--mx-metal-bright) 34%, var(--m-border)); background-color: var(--mx-black-inox-core); background-image: linear-gradient(110deg, transparent 0 7%, rgb(0 0 0 / 0.34) 16%, transparent 28%, rgb(255 255 255 / 0.34) 46%, rgb(255 255 255 / 0.08) 51%, rgb(0 0 0 / 0.28) 64%, transparent 84% 100%); } /* Button effect="conductor" keeps one motion contract while each finish * supplies its own physically recognizable contour recipe. */ [data-design="metallic"] .m-button-effect-conductor { --m-button-conductor-shadow: #5c3500; --m-button-conductor-deep: #8f5700; --m-button-conductor-base: #c58a12; --m-button-conductor-bright: #f3c746; --m-button-conductor-glint: #fff8d6; --m-button-conductor-highlight: #fff1a6; --m-button-conductor-accent: #c58a12; --m-button-conductor-accent-deep: #5c3500; --m-button-conductor-tail: #f3c746; --m-button-conductor-end: #8f5700; } [data-design="metallic"][data-metal-theme="cobalt"] .m-button-effect-conductor { --m-button-conductor-shadow: #07111f; --m-button-conductor-deep: #173e79; --m-button-conductor-base: #3169b8; --m-button-conductor-bright: #8eb6ec; --m-button-conductor-glint: #f3f7ff; --m-button-conductor-highlight: #f0a3aa; --m-button-conductor-accent: #d45b67; --m-button-conductor-accent-deep: #7b2230; --m-button-conductor-tail: #6d9edc; --m-button-conductor-end: #173e79; } [data-design="metallic"][data-metal-theme="cobalt-aurum"] .m-button-effect-conductor { --m-button-conductor-shadow: #102033; --m-button-conductor-deep: #294a68; --m-button-conductor-base: #426b91; --m-button-conductor-bright: #8babc7; --m-button-conductor-glint: #fff8d6; --m-button-conductor-highlight: #fff1a6; --m-button-conductor-accent: #f3c746; --m-button-conductor-accent-deep: #8f5700; --m-button-conductor-tail: #c58a12; --m-button-conductor-end: #426b91; } [data-design="metallic"][data-metal-theme="inox"] .m-button-effect-conductor { --m-button-conductor-shadow: #1a242b; --m-button-conductor-deep: #52616b; --m-button-conductor-base: #8d9ba4; --m-button-conductor-bright: #c9d3d9; --m-button-conductor-glint: #ffffff; --m-button-conductor-highlight: #e7eef2; --m-button-conductor-accent: #7b96a7; --m-button-conductor-accent-deep: #354c5a; --m-button-conductor-tail: #b7c3ca; --m-button-conductor-end: #52616b; } [data-design="metallic"][data-metal-theme="bronze"] .m-button-effect-conductor { --m-button-conductor-shadow: #32190d; --m-button-conductor-deep: #6d371b; --m-button-conductor-base: #a7622e; --m-button-conductor-bright: #e0a56d; --m-button-conductor-glint: #ffe3b8; --m-button-conductor-highlight: #efbd82; --m-button-conductor-accent: #76998d; --m-button-conductor-accent-deep: #365e55; --m-button-conductor-tail: #b9763f; --m-button-conductor-end: #6d371b; } [data-design="metallic"][data-metal-theme="ferrum"] .m-button-effect-conductor { --m-button-conductor-shadow: #111416; --m-button-conductor-deep: #30383c; --m-button-conductor-base: #68747a; --m-button-conductor-bright: #aab1b4; --m-button-conductor-glint: #e7e5e1; --m-button-conductor-highlight: #e6a074; --m-button-conductor-accent: #b95228; --m-button-conductor-accent-deep: #642612; --m-button-conductor-tail: #7c3720; --m-button-conductor-end: #252c30; } [data-design="metallic"][data-metal-theme="black-inox"] .m-button-effect-conductor { --m-button-conductor-shadow: #020304; --m-button-conductor-deep: #121619; --m-button-conductor-base: #38434a; --m-button-conductor-bright: #8d9ba3; --m-button-conductor-glint: #ffffff; --m-button-conductor-highlight: #dce4e8; --m-button-conductor-accent: #252c30; --m-button-conductor-accent-deep: #07090a; --m-button-conductor-tail: #66757d; --m-button-conductor-end: #121619; } /* ── Surfaces and navigation ───────────────────────────── */ [data-design="metallic"] :is( .m-card, .m-dialog, .m-drawer, .m-toast, .m-table-wrap, .m-list-item ) { border-color: color-mix(in srgb, var(--mx-metal) 34%, var(--m-border)); background-color: var(--m-surface); background-image: linear-gradient(145deg, rgb(255 255 255 / 0.09), transparent 38%), linear-gradient(112deg, transparent 68%, color-mix(in srgb, var(--mx-metal) 5%, transparent)); box-shadow: var(--m-shadow-1); } [data-design="metallic"] :is(.m-navbar, .m-topbar) { border-color: color-mix(in srgb, var(--mx-metal) 42%, var(--m-border)); background: linear-gradient(110deg, transparent 65%, color-mix(in srgb, var(--mx-accent) 7%, transparent)), color-mix(in srgb, var(--m-surface) 92%, transparent); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, var(--m-shadow-1); } /* ── Feedback and validation ───────────────────────────── */ [data-design="metallic"] .m-alert { --mx-state: var(--m-info); position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--mx-state) 58%, var(--m-border)); border-inline-start-width: 3px; border-inline-start-color: var(--mx-state); background: linear-gradient(112deg, transparent 0 35%, color-mix(in srgb, var(--mx-metal-bright) 18%, transparent) 45%, transparent 56%), linear-gradient(155deg, color-mix(in srgb, var(--m-surface-soft) 91%, var(--mx-state)), color-mix(in srgb, var(--m-surface) 92%, var(--mx-metal))); box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 10px 24px color-mix(in srgb, var(--mx-state) 7%, transparent); color: var(--mx-state); } [data-design="metallic"] .m-alert::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--mx-state), var(--mx-metal-bright), var(--mx-state)); content: ""; opacity: 0.74; } [data-design="metallic"] .m-alert-success { --mx-state: var(--m-success); } [data-design="metallic"] .m-alert-warning { --mx-state: var(--m-warning); } [data-design="metallic"] .m-alert-danger { --mx-state: var(--m-danger); } [data-design="metallic"] .m-alert-body { color: var(--m-text-muted); } [data-design="metallic"] .m-badge { border: 1px solid color-mix(in srgb, var(--mx-accent) 42%, var(--m-border)); background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / 0.16) 48%, transparent 58%), color-mix(in srgb, var(--m-surface-soft) 88%, var(--mx-metal)); box-shadow: 0 1px 0 rgb(255 255 255 / 0.14) inset; color: color-mix(in srgb, var(--mx-accent) 68%, var(--m-text)); } [data-design="metallic"] .m-field { border-color: color-mix(in srgb, var(--mx-metal) 42%, var(--m-border)); background-color: var(--m-surface); background-image: linear-gradient(90deg, transparent 70%, color-mix(in srgb, var(--mx-metal) 12%, transparent)); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset; } [data-design="metallic"] :is(.m-field:focus, .m-field-error, .m-field-error:focus) { background: linear-gradient(110deg, transparent 48%, color-mix(in srgb, var(--mx-metal-bright) 12%, transparent) 55%, transparent 64%), color-mix(in srgb, var(--m-surface-soft) 96%, var(--m-danger)); } [data-design="metallic"] :is(.m-field-error, .m-field-error:focus) { border-color: color-mix(in srgb, var(--m-danger) 72%, var(--mx-metal)); box-shadow: 3px 0 0 var(--m-danger) inset, 0 1px 0 rgb(255 255 255 / 0.1) inset; } @media (prefers-reduced-motion: reduce) { [data-design="metallic"] *, [data-design="metallic"] *::before, [data-design="metallic"] *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }