/* base reset + primitives; tokens live in tokens.css */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html.glide { scroll-behavior: auto; } /* the JS inertial scroller owns motion */ body { margin: 0; font-family: var(--font-text); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 var(--space-4); font-weight: 650; } h1 { font-size: var(--text-4xl); letter-spacing: -0.025em; } h2 { font-size: var(--text-3xl); letter-spacing: -0.02em; } h3, h4 { font-family: var(--font-text); } h3 { font-size: var(--text-xl); letter-spacing: -0.01em; font-weight: 650; } p { margin: 0 0 var(--space-4); color: var(--color-text-muted); } a { color: inherit; } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); } section { padding-block: var(--space-24); } .eyebrow { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: var(--space-2); } /* buttons */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color var(--dur-fast) ease, filter var(--dur-fast) ease, transform var(--dur-fast) ease, border-color var(--dur-fast) ease; } .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); } .btn-primary { background: var(--color-accent); color: var(--color-accent-ink); } .btn-primary:hover { filter: brightness(0.94); transform: translateY(-1px); } .btn-ghost { border-color: var(--color-border); } .btn-ghost:hover { background: var(--color-surface); } .btn-dark { background: var(--color-ink); color: var(--color-white); border-radius: var(--radius-sm); } .btn-dark:hover { filter: brightness(1.35); transform: translateY(-1px); } .btn-dark span { transition: transform var(--dur-fast) ease; display: inline-block; } .btn-dark:hover span { transform: translateX(3px); } /* reveal-on-scroll — only active when JS has tagged */ html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } html.js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---- nav ---- */ .section-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); transition: transform 280ms var(--ease-out); } .section-nav.nav-hidden { transform: translateY(-100%); } .nav-inner { display: flex; align-items: center; gap: var(--space-8); padding-block: var(--space-3); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-lg); text-decoration: none; letter-spacing: -0.01em; } .brand-mark { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-deep)); display: inline-block; } .nav-links { display: flex; gap: var(--space-6); margin-inline: auto; } .nav-links a { text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); transition: color var(--dur-fast) ease; } .nav-links a:hover { color: var(--color-text); } .nav-cta { display: flex; align-items: center; } .nav-cta-link { text-decoration: none; font-size: var(--text-sm); font-weight: 600; padding: var(--space-3) var(--space-6); border-left: 1px solid var(--color-border); transition: background-color var(--dur-fast) ease; } .nav-cta-link:hover { background: var(--color-surface); } /* ---- hero ---- */ .section-hero { padding-block: var(--space-24) var(--space-16); text-align: center; position: relative; overflow: hidden; } .hero-inner { position: relative; z-index: 2; } .hero-inner h1 { max-width: none; margin-inline: auto; font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 4.2rem); } /* floating badge field — confined to the headline zone, above the visual */ .hero-field { position: absolute; inset: 0 0 auto 0; height: 52%; z-index: 1; pointer-events: none; } .hero-badge { position: absolute; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); animation: float 7s ease-in-out infinite; } .badge-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 13px; margin-left: calc(-1 * var(--space-2)); } .b-mint { background: var(--badge-mint); } .b-pink { background: var(--badge-pink); } .b-yellow { background: var(--badge-yellow); } .b-lavender { background: var(--badge-lavender); } .b-gray { background: var(--badge-gray); } .d-ink { background: var(--color-ink); color: #fff; } .d-mint { background: color-mix(in srgb, var(--badge-mint) 60%, var(--color-ink) 12%); } .d-pink { background: color-mix(in srgb, var(--badge-pink) 60%, var(--color-ink) 12%); } .d-yellow { background: color-mix(in srgb, var(--badge-yellow) 60%, var(--color-ink) 12%); } .d-lavender { background: color-mix(in srgb, var(--badge-lavender) 60%, var(--color-ink) 12%); } /* out-of-focus depth blobs */ .hero-blob { position: absolute; width: 64px; height: 22px; border-radius: var(--radius-pill); filter: blur(7px); opacity: 0.75; animation: float 8s ease-in-out infinite; } /* drift variants: differing duration/delay so the field feels organic */ .f-1 { animation-duration: 6.5s; } .f-2 { animation-duration: 7.5s; animation-delay: -2s; } .f-3 { animation-duration: 8.5s; animation-delay: -4s; } .f-4 { animation-duration: 7s; animation-delay: -1s; } .f-5 { animation-duration: 9s; animation-delay: -3s; } .f-6 { animation-duration: 6s; animation-delay: -5s; } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-14px) translateX(6px); } } @media (prefers-reduced-motion: reduce) { .hero-badge, .hero-blob { animation: none; } } .hero-sub { max-width: 56ch; margin: 0 auto var(--space-8); font-size: var(--text-lg); } .hero-actions { margin-bottom: var(--space-16); } .hero-placeholder { aspect-ratio: 1200 / 640; border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px dashed var(--color-border); display: grid; place-items: center; color: var(--color-text-muted); font-size: var(--text-sm); box-shadow: var(--shadow-md); } /* ---- logos ---- */ .section-logos { padding-block: var(--space-12); border-block: 1px solid var(--color-border); } .logos-label { text-align: center; font-size: var(--text-sm); margin-bottom: var(--space-6); } .logo-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-12); } .logo-item { font-weight: 700; font-size: var(--text-lg); color: var(--color-text-muted); opacity: 0.55; letter-spacing: 0.01em; white-space: nowrap; } /* marquee mode (JS wraps items into two .logo-track copies) */ .logo-strip.is-marquee { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; gap: 0; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .logo-track { display: flex; flex: none; align-items: center; gap: var(--space-12); padding-right: var(--space-12); animation: marquee 36s linear infinite; } .logo-strip.is-marquee:hover .logo-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } } /* ---- pillars ---- */ .section-pillars { background: var(--color-surface); } .card-grid { display: grid; gap: var(--space-6); margin-top: var(--space-12); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-8); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .card-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-accent-deep); display: grid; place-items: center; font-size: 20px; margin-bottom: var(--space-4); } .card-list { margin: 0; padding: 0; list-style: none; color: var(--color-text-muted); } .card-list li { padding-left: var(--space-6); position: relative; margin-bottom: var(--space-2); } .card-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent-deep); } /* ---- outcomes ---- */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-block: var(--space-12); } .stat { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-8); text-align: center; } .stat-number { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); letter-spacing: -0.02em; color: var(--color-accent-deep); } .stat-label { color: var(--color-text-muted); font-size: var(--text-sm); } .quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .quote-card { margin: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-8); box-shadow: var(--shadow-sm); } .quote-card blockquote { margin: 0 0 var(--space-4); font-size: var(--text-lg); line-height: 1.5; color: var(--color-text); } .quote-card figcaption { color: var(--color-text-muted); font-size: var(--text-sm); } /* ---- how it works (dark constellation) ---- */ .section-how { background: var(--color-dark-bg); color: var(--color-dark-text); padding-block: 0 var(--space-24); } /* scroll-driven stage: outer wrapper provides scroll distance, stage pins. Choreography: rectangle intro → 4 step scenes (zoom to corner + panel) → zoom out to platform title. All driven by the score in main.js. */ .how-scroll { position: relative; height: 1250vh; } .how-stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; } html.no-scrollfx .how-scroll { height: auto; } html.no-scrollfx .how-stage { position: relative; height: 84vh; } html.no-scrollfx .rig, html.no-scrollfx .step-scene, html.no-scrollfx .final-title { display: none; } .how-title { font-size: var(--text-4xl); font-weight: 450; margin: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.28em; z-index: 2; } .type-u { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; } .type-u::after { content: ""; display: inline-block; width: 2px; height: 0.85em; background: var(--color-dark-text); vertical-align: -0.08em; margin-left: 2px; animation: caret 1s steps(1) infinite; } .type-u.done::after { display: none; } @keyframes caret { 50% { opacity: 0; } } /* the rig is the "camera": JS scales/translates it toward the active corner */ .rig { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: transform; } .constellation-lines { position: absolute; inset: 0; width: 100%; height: 100%; } .constellation-lines line { stroke: var(--color-dark-line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; /* faded in by the score */ } .node { position: absolute; display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-dark-text); transform: translate(-50%, -50%); } .node em { font-style: normal; } /* labels sit OUTSIDE the rectangle corners, dots ON the corner */ .node.n-tl em, .node.n-bl em { order: -1; } .node.n-tl, .node.n-bl { transform: translate(calc(-100% + 8px), -50%); } .node.n-tr, .node.n-br { transform: translate(-8px, -50%); } .node-dot { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; } .node .d-mint { background: var(--badge-mint); } .node .d-pink { background: var(--badge-pink); } .node .d-yellow { background: var(--badge-yellow); } .node .d-lavender { background: var(--badge-lavender); } /* final phase title */ .final-title { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-6); text-align: center; z-index: 2; opacity: 0; } .final-title h2 { font-size: var(--text-4xl); font-weight: 450; margin: 0; } .btn-outline { border-color: var(--color-dark-line); color: var(--color-dark-text); border-radius: var(--radius-sm); justify-self: center; } .btn-outline:hover { background: rgb(255 255 255 / 0.08); } /* step scenes — a 3D space: blocks fly in from deep (translateZ) and exit past the camera */ .step-scene { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; perspective: 1100px; perspective-origin: 50% 50%; } /* NOTE: will-change must list ONLY transform here — hinting `opacity` makes Chromium flatten preserve-3d children (kills the extruded faces) */ .step-scene .art-box, .step-scene .step-panel { will-change: transform; } .step-panel { position: absolute; right: 7%; top: 50%; translate: 0 -50%; width: min(360px, 34vw); background: #15181666; border: 1px solid var(--color-dark-line); backdrop-filter: blur(4px); padding: var(--space-8); } .panel-head { display: flex; justify-content: space-between; align-items: baseline; } .step-panel h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); color: var(--color-dark-text); margin: 0 0 var(--space-4); } .panel-num { font-size: var(--text-sm); font-weight: 700; padding: 2px 8px; color: var(--color-ink); background: var(--scene-accent, var(--badge-mint)); } .step-panel p { color: var(--color-dark-muted); font-size: var(--text-sm); } .step-panel ul { margin: 0; padding: 0; list-style: none; } .step-panel li { padding-block: var(--space-3); border-top: 1px solid var(--color-dark-line); color: var(--color-dark-text); font-size: var(--text-sm); font-weight: 600; } .step-panel li::before { content: "▸ "; color: var(--scene-accent, var(--badge-mint)); } /* boxes are positioned individually (reference-matched): each sits in a static .art-pos anchor; the .art-box inside carries the flight transform */ .step-art { position: absolute; inset: 0; transform-style: preserve-3d; } .art-pos { position: absolute; transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); transform-style: preserve-3d; } /* real 3D slab: side faces are injected by Choreo.extrude(); the box is tilted by the score so its volume and parallax read as it flies in Z */ .art-box { width: 240px; border: 1px solid var(--color-dark-line); padding: var(--space-6); position: relative; background: #131614; will-change: transform; } /* abstract in-box fills: pills, donut, area chart, cell grids */ .art-box .pill { display: block; height: 24px; border-radius: var(--radius-pill); border: 1px solid var(--color-dark-line); margin-bottom: var(--space-2); } .art-box .pill.hl { background: var(--scene-accent); border-color: transparent; opacity: 0.9; } .donut { width: 132px; height: 132px; border-radius: 50%; margin: var(--space-2) auto; background: conic-gradient(var(--scene-accent) 0 65%, rgb(255 255 255 / 0.16) 65% 100%); -webkit-mask: radial-gradient(circle, transparent 42px, #000 43px); mask: radial-gradient(circle, transparent 42px, #000 43px); } .area { height: 84px; background: var(--scene-accent); opacity: 0.8; clip-path: polygon(0 100%, 0 55%, 25% 70%, 50% 32%, 75% 52%, 100% 18%, 100% 100%); } .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .flow { display: flex; gap: var(--space-3); align-items: center; } .flow .cell { flex: 1; } .cell { display: block; height: 52px; border: 1px solid var(--color-dark-line); background: rgb(255 255 255 / 0.05); } .cell.hl { background: var(--scene-accent); opacity: 0.85; border-color: transparent; } .art-label { display: block; color: var(--color-dark-text); font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-4); } .art-box .bar { display: block; height: 10px; margin-bottom: var(--space-3); background: var(--scene-accent, var(--badge-mint)); opacity: 0.85; } .art-box .bar:nth-child(3) { opacity: 0.35; } .art-box .bar:nth-child(4) { opacity: 0.55; } .bar.w3 { width: 30%; } .bar.w4 { width: 40%; } .bar.w5 { width: 55%; } .bar.w6 { width: 70%; } .bar.w7 { width: 85%; } .step-scene[data-accent="mint"] { --scene-accent: var(--badge-mint); } .step-scene[data-accent="lavender"] { --scene-accent: var(--badge-lavender); } .step-scene[data-accent="pink"] { --scene-accent: var(--badge-pink); } .step-scene[data-accent="yellow"] { --scene-accent: var(--badge-yellow); } .section-how .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-12); } .step { background: rgb(255 255 255 / 0.04); border: 1px solid var(--color-dark-line); border-radius: var(--radius-md); padding: var(--space-8); } .step h3 { color: var(--color-dark-text); } .step-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-4); } .step p { font-size: var(--text-sm); margin: 0; color: var(--color-dark-muted); } /* ---- erp ---- */ .erp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-12); } .erp-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); min-height: 140px; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-8); transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease; } .erp-card:hover { border-color: var(--color-accent-deep); transform: translateY(-3px); } .erp-name { font-weight: 650; font-size: var(--text-lg); } .erp-link { color: var(--color-accent-deep); font-weight: 600; font-size: var(--text-sm); } /* ---- blog ---- */ .blog-card { text-decoration: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .blog-image { aspect-ratio: 640 / 360; background: var(--color-surface-2); display: grid; place-items: center; color: var(--color-text-muted); font-size: var(--text-xs); } .blog-meta { padding: var(--space-4) var(--space-6) 0; color: var(--color-text-muted); font-size: var(--text-xs); } .blog-card h3 { padding: var(--space-2) var(--space-6) var(--space-6); margin: 0; font-size: var(--text-lg); } /* ---- cta ---- */ .section-cta { background: var(--color-surface-2); text-align: center; } .cta-inner h2 { max-width: 22ch; margin-inline: auto; margin-bottom: var(--space-8); } /* ---- footer ---- */ .section-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding-block: var(--space-16) var(--space-8); } .footer-grid { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: var(--space-8); margin-bottom: var(--space-12); } .brand-invert { color: var(--color-white); } .footer-brand p { color: var(--color-footer-text); font-size: var(--text-sm); margin-top: var(--space-4); } .footer-col h4 { font-size: var(--text-sm); color: var(--color-white); margin-bottom: var(--space-4); } .footer-col a { display: block; text-decoration: none; font-size: var(--text-sm); margin-bottom: var(--space-3); color: var(--color-footer-text); transition: color var(--dur-fast) ease; } .footer-col a:hover { color: var(--color-white); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); border-top: 1px solid rgb(255 255 255 / 0.12); padding-top: var(--space-8); font-size: var(--text-xs); } .footer-bottom a { color: var(--color-footer-text); } /* ---- responsive ---- */ @media (max-width: 1000px) { .cols-3, .erp-grid { grid-template-columns: repeat(2, 1fr); } .section-how .steps { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(3, 1fr); } .nav-links { display: none; } .hero-badge, .hero-blob { display: none; } } /* ---- mobile: full choreography, adapted geometry ---- */ @media (max-width: 720px) { .art-pos { --stage-scale: 0.52; } /* keep the flight field above the bottom-sheet panel */ .step-art { inset: 2% 0 30% 0; } .step-panel { left: 5%; right: 5%; width: auto; top: auto; bottom: 4%; translate: none; padding: var(--space-6); } .step-panel h3 { font-size: var(--text-lg); } .step-panel li { padding-block: var(--space-2); } .how-title { font-size: var(--text-2xl); } .final-title h2 { font-size: var(--text-2xl); } .node { font-size: var(--text-xs); gap: var(--space-2); } .node-dot { width: 10px; height: 10px; } /* labels move INSIDE the rectangle so they never clip off-screen; bottom labels stack under their dots so they can't collide */ .node.n-tl em { order: 2; } .node.n-tr em { order: -1; } .node.n-tl { transform: translate(-8px, -50%); } .node.n-tr { transform: translate(calc(-100% + 8px), -50%); } .node.n-bl, .node.n-br { flex-direction: column; gap: 6px; } .node.n-bl em, .node.n-br em { order: 2; } .node.n-bl { align-items: flex-start; transform: translate(-5px, -7px); } .node.n-br { align-items: flex-end; transform: translate(calc(-100% + 5px), -7px); } .node.n-br em { margin-top: 26px; } /* second row — clears the bl label */ .node em { white-space: nowrap; } /* nav: single-line CTAs; drop "Log in" on small screens */ .nav-cta-link { white-space: nowrap; } .nav-cta .nav-cta-link:first-child { display: none; } } @media (max-width: 720px) { h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } section { padding-block: var(--space-16); } .cols-3, .erp-grid, .quote-grid, .stat-row { grid-template-columns: 1fr; } .section-how .steps { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: repeat(2, 1fr); } .stat-number { font-size: var(--text-3xl); } .how-stage { min-height: 60vh; } .how-title { font-size: var(--text-3xl); } .constellation { display: none; } } /* ---- demo mode: page as a self-playing portfolio-card screen ---- */ html.demo { scrollbar-width: none; scroll-behavior: auto; } html.demo::-webkit-scrollbar { display: none; } html.demo body { pointer-events: none; } html.demo .section-nav { display: none; } /* ---- demo modal: outbound links are polite dead ends ---- */ #demoModal { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; background: rgb(14 27 23 / 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } #demoModal.open { display: flex; } #demoModal .demo-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); max-width: 400px; margin: var(--space-4); padding: var(--space-8); text-align: center; } #demoModal h5 { font: 600 var(--text-2xl)/1.2 var(--font-display); color: var(--color-ink); margin: 0 0 var(--space-3); } #demoModal p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; } #demoModal button { margin-top: var(--space-6); padding: 12px 26px; cursor: pointer; font: 500 var(--text-sm) var(--font-text); background: var(--color-accent); color: var(--color-accent-ink); border: 0; border-radius: var(--radius-pill); transition: filter var(--dur-fast); } #demoModal button:hover { filter: brightness(0.95); }