/* ========================================================================== Unified glassmorphic button surface — experimental pass, easy to revert. ========================================================================== Loaded last on purpose: every rule here targets the exact same selectors already styled per-section in hero.css/themes.css (.concept-nav-cta, .concept-primary-action, .concept-contact-action, .theme-toggle, .menu-toggle, .concept-back-to-top). The dark-theme variants of those rules are written as `[data-theme="dark"] .concept-primary-action`, which already carries specificity (0,0,2,0) — one class higher than a bare `.button` — so file order alone would not be enough to win there. Every selector below is prefixed with `.concept-page` (present on on every page that has these controls) purely to match or exceed that specificity, the same trick themes.css already uses for the same reason (see `.concept-page .site-header.concept-header`). At matched specificity, load order decides, and this file loads last — so nothing here needs `!important`, and rolling back is exactly "remove this file and its tag", nothing else changes. Only surface properties are touched (border, background, color, shadow, backdrop-filter, hover lift). Layout, sizing and structural rules stay wherever they already lived. Scope: .concept-viewer-facade already used this exact recipe before this file existed (color-mix(in srgb, var(--palette-forest-abyss) 58%, transparent) + blur(10px)) and reads fine, so it was left alone rather than duplicated here. .lang-current/.lang-option are a compound flag+text+caret widget, not a plain button, and were left out of this pass to avoid breaking that layout. Base tint is color-mix(in srgb, var(--palette-forest-deep) 55%, transparent) — the RGB of --ink at a fixed opacity, not a theme-switched token, so the glass reads consistently dark (and white text stays legible) whether the button sits on light or dark page background. Hover shifts the tint toward --acid. ========================================================================== */ .concept-page .button, .concept-page .theme-toggle, .concept-page .menu-toggle, .concept-page .concept-back-to-top { border-color: color-mix(in srgb, var(--palette-white) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--palette-white) 16%, transparent), color-mix(in srgb, var(--palette-white) 3%, transparent)), color-mix(in srgb, var(--palette-forest-deep) 55%, transparent); color: var(--palette-white); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--palette-white) 8%, transparent), 0 12px 28px color-mix(in srgb, var(--palette-black) 22%, transparent); } .concept-page .button:hover, .concept-page .theme-toggle:hover, .concept-page .menu-toggle:hover, .concept-page .concept-back-to-top:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acid) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--acid) 24%, transparent), color-mix(in srgb, var(--acid) 5%, transparent)), color-mix(in srgb, var(--palette-forest-deep) 60%, transparent); color: var(--palette-white); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--palette-white) 10%, transparent), 0 16px 34px color-mix(in srgb, var(--palette-black) 26%, transparent), 0 0 22px color-mix(in srgb, var(--acid) 20%, transparent); } .concept-page .theme-toggle:hover, .concept-page .menu-toggle:hover, .concept-page .concept-back-to-top:hover { transform: none; } .concept-page .button .ph, .concept-page .theme-toggle .ph, .concept-page .menu-toggle .ph, .concept-page .concept-back-to-top .ph { color: inherit; } /* --------------------------------------------------------------------------- Copper primary actions — "Request a demo" and "Open the demo". --------------------------------------------------------------------------- These two are the only filled CTAs on the page, so they leave the glass recipe above and take the copper accent instead. Same specificity (0,2,0) as the generic rules and the `[data-theme="dark"]` variants in themes.css; this block wins on load order alone, so no !important and reverting is a clean delete. The gradient runs from --accent-primary DOWN into black rather than up into --accent-hover: the label is 12–15px, which needs 4.5:1, and white on #d06a2b is only 3.60:1. Keeping #b95b22 as the lightest fill holds 4.58:1 across the whole surface, in both themes, resting and hovered. --------------------------------------------------------------------------- */ .concept-page .concept-nav-cta, .concept-page .concept-primary-action { border: 1px solid var(--accent-border); background: linear-gradient(180deg, color-mix(in srgb, var(--palette-white) 12%, transparent), transparent 52%), linear-gradient(180deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 80%, var(--palette-black))); color: var(--palette-white); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--palette-white) 20%, transparent), 0 10px 24px color-mix(in srgb, var(--palette-black) 26%, transparent); } .concept-page .concept-nav-cta:hover, .concept-page .concept-primary-action:hover { transform: translateY(-2px); border-color: var(--accent-hover); background: linear-gradient(180deg, color-mix(in srgb, var(--palette-white) 18%, transparent), transparent 54%), linear-gradient(180deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 92%, var(--palette-black))); color: var(--palette-white); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--palette-white) 26%, transparent), 0 14px 30px color-mix(in srgb, var(--palette-black) 30%, transparent); } @media (prefers-reduced-motion: reduce) { .concept-page .button:hover { transform: none; } }