/* Stone & Sage — "Nature Distilled" editorial rebuild ───────────────────────────────────────────────────────────── Design tokens derived via ui-ux-pro-max design DB: · Style: Organic Biophilic (organic radii, natural shadows, WCAG AA) · Typography: Classic Elegant pairing (Playfair Display + Inter) · Palette: composed from the DB's earth-green / sage-neutral / terracotta rows, shifted to a green-cast neutral canvas (oklch hue ~125, off the beige/cream band) for garden calm. Layout system: 4pt spacing scale · fluid type scale (ratio ≥1.25) ───────────────────────────────────────────────────────────── */ :root { /* color — 60% canvas neutrals / 30% moss+ink / 10% clay accent */ --canvas: #f3f5ec; /* green-cast near-white, page field */ --canvas-2: #e9eddd; /* deeper tint for alt sections */ --ink: #1f2619; /* olive-black foreground (13.8:1 on canvas) */ --moss: #3e4e33; /* primary — deep moss green (8.2:1) */ --moss-deep: #2a331f; /* dark band background */ --sage-dim: #5a664d; /* muted supporting text (5.9:1) */ --sage: #78866b; /* decorative / large text only */ --clay: #a65a38; /* terracotta accent, 10% budget (4.6:1) */ --clay-deep: #8f4a2c; /* small-text clay + hover (5.8:1) */ --hairline: #d5dac6; /* editorial rules */ --paper-on-dark: #eff2e4; /* text on moss-deep */ --sage-on-dark: #b9c4a8; /* muted text on moss-deep */ /* type */ --display: "Playfair Display", Georgia, serif; --body: "Inter", system-ui, sans-serif; /* rhythm — 4pt scale */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-6: 1.5rem; /* 24 */ --s-8: 2rem; /* 32 */ --s-12: 3rem; /* 48 */ --s-16: 4rem; /* 64 */ --s-24: 6rem; /* 96 */ --pad: clamp(1.25rem, 4.5vw, 5rem); /* organic shape signatures */ --r-soft: 14px; --r-arch: clamp(90px, 16vw, 210px); --shadow-natural: 0 18px 48px rgba(31, 38, 25, 0.14); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body); font-size: 1.0625rem; background: var(--canvas); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; /* contain transform-based entrance offsets (e.g. service rows swinging in) without creating a scroll container — keeps the sticky masthead working */ overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; } p { max-width: 62ch; } h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; } h1 { font-size: clamp(2.75rem, 6.5vw, 5rem); line-height: 1.06; } h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); max-width: 22ch; } h1 em, h2 em { font-style: italic; color: var(--clay); } .kicker { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--clay-deep); margin-bottom: var(--s-3); } :focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 3px; } /* ---------- motion safety ---------- The whole entrance system is opt-IN via the .anim class on , which the head gate adds only when motion is welcome and script.js removes if GSAP never loads. So the reduced-motion / no-JS default is already the fully-visible state; this block only needs to silence the ambient CSS loops and keep the designed hover/focus transitions that reduced motion explicitly allows. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .atmos-sun, .atmos-frond, .ba-grip { animation: none !important; } } /* Belt and suspenders: if the gate ever mislabels, never ship hidden content. */ :root:not(.anim) .reveal, :root:not(.anim) .hero-copy > *, :root:not(.anim) .line > span { opacity: 1; transform: none; } :root:not(.anim) .stem-path { stroke-dashoffset: 0; } :root:not(.anim) .stem-leaf { opacity: 1; } /* ---------- masthead ---------- */ .masthead { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--pad); background: rgba(243, 245, 236, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); } .wordmark { font-family: var(--display); font-size: 1.4rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .wordmark .amp { font-style: italic; color: var(--clay); } .nav { display: flex; gap: var(--s-6); } .nav a { text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--sage-dim); padding: var(--s-2) 0; border-bottom: 2px solid transparent; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); } .nav a:hover, .nav a:focus-visible { color: var(--ink); border-bottom-color: var(--clay); } .masthead-actions { display: flex; align-items: center; gap: var(--s-3); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer; padding: 0.7rem; } .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s var(--ease-out), opacity 0.2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 760px) { .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--canvas); border-bottom: 1px solid var(--hairline); padding: var(--s-2) 0; } .nav.open { display: flex; } .nav a { padding: var(--s-3) var(--pad); border-bottom: none; } .nav-toggle { display: flex; } } @media (max-width: 430px) { .masthead .btn-small { display: none; } } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 60; background: var(--moss); color: var(--paper-on-dark); padding: var(--s-3) var(--s-6); border-radius: 999px; text-decoration: none; font-weight: 600; } .skip-link:focus-visible { top: 0.6rem; } /* ---------- buttons & links ---------- */ .btn { display: inline-block; font-family: var(--body); font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 2px solid transparent; border-radius: 999px; padding: 0.85rem 1.75rem; cursor: pointer; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.15s var(--ease-out); } .btn:active { transform: translateY(1px); } .btn-solid { background: var(--moss); color: var(--paper-on-dark); } .btn-solid:hover, .btn-solid:focus-visible { background: var(--moss-deep); } .btn-small { padding: 0.55rem 1.2rem; font-size: 0.85rem; } .arrow-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.98rem; color: var(--clay-deep); text-decoration: none; border-bottom: 2px solid var(--clay); padding-bottom: 2px; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); } .arrow-link:hover, .arrow-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); } /* ---------- hero (editorial split) ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: clamp(var(--s-8), 6vw, var(--s-24)); padding: clamp(var(--s-12), 7vw, var(--s-24)) var(--pad); max-width: 90rem; margin-inline: auto; } .hero-sub { max-width: 32rem; margin-top: var(--s-6); font-size: 1.1rem; color: var(--sage-dim); } .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); margin-top: var(--s-8); } .hero-fig { position: relative; } .hero-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-arch) var(--r-arch) var(--r-soft) var(--r-soft); box-shadow: var(--shadow-natural); } .hero-fig figcaption { margin-top: var(--s-3); font-family: var(--display); font-style: italic; font-size: 0.98rem; color: var(--sage-dim); text-align: right; } .hero-copy { position: relative; z-index: 2; } /* editorial line reveal — each headline line rides up out of its own mask */ h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; } h1 .line > span { display: block; } /* pre-JS hide via opacity only — GSAP owns the transform channel (translate + opacity on one element double up, so the initial offset is set in JS). */ .anim h1 .line > span { opacity: 0; } /* the rest of the hero copy waits under .anim, then the load timeline lifts it */ .anim .hero-copy > .kicker, .anim .hero-copy > .stem-signature, .anim .hero-copy > .hero-sub, .anim .hero-copy > .hero-ctas { opacity: 0; } /* hero image reveals behind a clip mask + a slow settle */ .hero-img-mask { overflow: hidden; border-radius: var(--r-arch) var(--r-arch) var(--r-soft) var(--r-soft); } .anim .hero-img-mask { clip-path: inset(0 0 100% 0); } .hero-img { transition: none; } .anim .hero-img { transform: scale(1.12); } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: var(--s-8); } .hero-img { aspect-ratio: 4 / 3; } } /* ---------- hero atmosphere: drifting light + foliage ---------- */ .hero { position: relative; overflow: clip; } .hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; } .atmos-sun { position: absolute; top: -14%; right: 4%; width: clamp(22rem, 44vw, 40rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(217, 154, 114, 0.42) 0%, rgba(166, 90, 56, 0.16) 34%, rgba(166, 90, 56, 0) 68%); filter: blur(6px); will-change: transform, opacity; } .anim .atmos-sun { animation: sun-breathe 13s var(--ease-out) infinite; } @keyframes sun-breathe { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; } 50% { transform: translate3d(-2.5%, 3%, 0) scale(1.08); opacity: 1; } } .atmos-frond { position: absolute; bottom: -6%; width: clamp(9rem, 20vw, 17rem); color: var(--moss); opacity: 0.09; transform-origin: 50% 100%; will-change: transform; } .atmos-frond-1 { left: -3%; } .atmos-frond-2 { right: 6%; bottom: -12%; opacity: 0.07; } .anim .atmos-frond-1 { animation: frond-sway 17s ease-in-out infinite; } .anim .atmos-frond-2 { animation: frond-sway 21s ease-in-out infinite reverse; } @keyframes frond-sway { 0%, 100% { transform: rotate(-3.2deg) translateY(0); } 50% { transform: rotate(3.6deg) translateY(-1.5%); } } @media (max-width: 700px) { .atmos-frond { display: none; } } /* ---------- signature: self-drawing botanical stem ---------- Draws itself via GSAP under .anim; renders complete otherwise. */ .stem-rule { width: clamp(150px, 24vw, 220px); height: auto; margin-top: var(--s-6); overflow: visible; } .stem-signature { width: clamp(180px, 30vw, 268px); } .stem-path { stroke: var(--moss); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 0; } .stem-signature .stem-path { stroke-width: 2.4; } .anim .stem-path { stroke-dashoffset: 340; } .stem-leaf { fill: var(--sage); opacity: 1; transform-box: fill-box; transform-origin: 50% 100%; } .stem-leaf:nth-of-type(3) { fill: var(--clay); } .anim .stem-leaf { opacity: 0; } /* ---------- field notes (credentials as an editorial line) ---------- */ .fieldnotes { border-block: 1px solid var(--hairline); padding: var(--s-6) var(--pad); } .fieldnotes p { max-width: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3) var(--s-4); font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--sage-dim); text-align: center; } .leaf-sep { width: 14px; height: 14px; fill: var(--clay); flex: none; } /* ---------- sections ---------- */ section { padding: clamp(var(--s-16), 9vw, 8rem) var(--pad); } .section-head { max-width: 46rem; margin-bottom: clamp(var(--s-8), 5vw, var(--s-16)); } .section-sub { margin-top: var(--s-4); color: var(--sage-dim); max-width: 34rem; } /* ---------- services: ruled editorial index ---------- */ .services { max-width: 90rem; margin-inline: auto; } .svc-index { border-top: 1px solid var(--hairline); max-width: 62rem; overflow-x: clip; } .svc { display: grid; grid-template-columns: clamp(7.5rem, 16vw, 13rem) 1fr; gap: clamp(var(--s-4), 3vw, var(--s-8)); align-items: center; padding-block: var(--s-6); border-bottom: 1px solid var(--hairline); } .svc-thumb { overflow: hidden; border-radius: var(--r-soft); } .svc:nth-child(odd) .svc-thumb { border-radius: 52px var(--r-soft) 52px var(--r-soft); } .svc:nth-child(even) .svc-thumb { border-radius: var(--r-soft) 52px var(--r-soft) 52px; } .svc-thumb img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 0.3s var(--ease-out); } .svc:hover .svc-thumb img { transform: scale(1.04); } .svc h3 { font-size: 1.45rem; margin-bottom: var(--s-2); transition: color 0.2s var(--ease-out); } .svc:hover h3 { color: var(--clay-deep); } .svc p { font-size: 0.98rem; color: var(--sage-dim); max-width: 52ch; } @media (max-width: 560px) { .svc { grid-template-columns: 1fr; align-items: start; } .svc-thumb { max-width: 100%; } } /* ---------- before / after (dark moss band) ---------- */ .transformation { background: var(--moss-deep); color: var(--paper-on-dark); } .transformation .kicker { color: var(--sage-on-dark); } .transformation h2 em { color: #d99a72; } .transformation .section-sub { color: var(--sage-on-dark); } .ba { position: relative; max-width: 62rem; margin-inline: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-soft); user-select: none; touch-action: pan-y; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); } .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ba-after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); will-change: clip-path; } .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--paper-on-dark); transform: translateX(-50%); cursor: ew-resize; display: flex; align-items: center; justify-content: center; } .ba-grip { position: absolute; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--clay); color: #fdf6ef; font-size: 1.2rem; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } .ba-tag { position: absolute; top: var(--s-4); font-family: var(--display); font-style: italic; font-size: 0.95rem; padding: var(--s-2) var(--s-4); background: rgba(31, 38, 25, 0.78); color: var(--paper-on-dark); border-radius: 999px; pointer-events: none; } .ba-tag-l { left: var(--s-4); } .ba-tag-r { right: var(--s-4); color: #e8b58f; } /* ---------- gallery: editorial collage ---------- */ .gallery { max-width: 90rem; margin-inline: auto; } .gal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(var(--s-3), 2vw, var(--s-6)); } .gal-fig { grid-column: span 2; } .gal-wide { grid-column: span 4; } .gal-full { grid-column: span 6; } .gal-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-soft); transition: transform 0.3s var(--ease-out); } .gal-wide img { aspect-ratio: 2 / 1; } .gal-full img { aspect-ratio: 21 / 9; } .gal-fig:hover img { transform: scale(1.015); } .gal-fig figcaption { margin-top: var(--s-2); font-family: var(--display); font-style: italic; font-size: 0.92rem; color: var(--sage-dim); } @media (max-width: 900px) { .gal-fig, .gal-wide { grid-column: span 3; } .gal-wide img { aspect-ratio: 4 / 3; } .gal-full { grid-column: span 6; } } @media (max-width: 560px) { .gal-fig, .gal-wide, .gal-full { grid-column: span 6; } .gal-full img { aspect-ratio: 4 / 3; } } /* ---------- reviews: pull-quote spread ---------- */ .reviews { background: var(--canvas-2); } .plain-head { font-size: clamp(1.8rem, 3.6vw, 2.8rem); } .review-lead { position: relative; max-width: 46rem; margin-bottom: clamp(var(--s-8), 5vw, var(--s-12)); } .review-lead blockquote::before { content: "\201C"; display: block; font-family: var(--display); font-size: 5.5rem; line-height: 0.6; color: var(--clay); margin-bottom: var(--s-4); } .review-lead p { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.35; max-width: 24ch; } .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(var(--s-6), 4vw, var(--s-12)); max-width: 62rem; } .review-grid blockquote { border-top: 1px solid var(--hairline); padding-top: var(--s-6); } .review-grid blockquote p { font-family: var(--display); font-style: italic; font-size: 1.18rem; line-height: 1.45; } .reviews blockquote footer { margin-top: var(--s-4); font-size: 0.9rem; font-weight: 600; } .attr-place { font-weight: 400; color: var(--sage-dim); } .attr-place::before { content: "· "; color: var(--clay); } /* ---------- quote ---------- */ .quote-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: clamp(var(--s-8), 5vw, var(--s-24)); max-width: 72rem; margin-inline: auto; } .quote-copy > p { color: var(--sage-dim); margin-top: var(--s-4); max-width: 30rem; } .quote-facts { list-style: none; margin-top: var(--s-8); display: grid; gap: var(--s-3); } .quote-facts strong { color: var(--moss); margin-right: var(--s-2); font-weight: 600; } .quote-facts a { color: var(--clay-deep); text-decoration-color: var(--clay); } .quote-form { display: grid; gap: var(--s-6); align-content: start; } .quote-form label { display: grid; gap: var(--s-2); font-size: 0.85rem; font-weight: 600; color: var(--sage-dim); } .quote-form input, .quote-form textarea { font: 1.05rem var(--body); color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--hairline); border-radius: 0; padding: var(--s-2) 2px var(--s-3); transition: border-color 0.2s var(--ease-out); } .quote-form input:focus, .quote-form textarea:focus { outline: none; border-bottom-color: var(--moss); } .quote-form button { justify-self: start; } .form-done { color: var(--moss); font-weight: 600; } .form-err { color: var(--clay-deep); font-size: 0.85rem; font-weight: 400; } .quote-form input[aria-invalid="true"] { border-bottom-color: var(--clay); } /* ---------- footer: colophon ---------- */ .footer { background: var(--moss-deep); color: var(--sage-on-dark); padding: clamp(var(--s-12), 7vw, var(--s-16)) var(--pad); display: grid; justify-items: center; gap: var(--s-2); text-align: center; font-size: 0.92rem; } .footer .wordmark { color: var(--paper-on-dark); font-size: 1.6rem; } .footer .stem-rule { margin: 0 0 var(--s-4); } .stem-rule-footer .stem-path { stroke: var(--sage-on-dark); animation-delay: 0.2s; } .stem-rule-footer .stem-leaf { fill: var(--sage-on-dark); } .stem-rule-footer .stem-leaf:nth-of-type(3) { fill: #d99a72; } .foot-tag { font-family: var(--display); font-style: italic; } .foot-meta { margin-top: var(--s-4); } .foot-meta a { color: var(--paper-on-dark); } .foot-credit a { color: #e8b58f; } /* ---------- reveal on scroll ---------- Visible by default (fail-open); .anim arms the hidden pre-state that GSAP animates out of. Non-anim (reduced motion / no JS / CDN down) shows content. */ .reveal { opacity: 1; } .anim .reveal { opacity: 0; transform: translateY(30px); } /* section headings get the same masked line-reveal as the hero */ .section-head h2 .line, h2 .line { display: block; overflow: hidden; padding-bottom: 0.04em; } h2 .line > span { display: block; } .anim h2 .line > span { opacity: 0; } /* editorial thumb wipe for service rows */ .anim .svc-thumb { clip-path: inset(0 0 100% 0); } .svc-thumb img, .gal-fig img { will-change: transform; } .gal-fig img { clip-path: inset(0 0 0 0); } .anim .gal-fig.reveal img { clip-path: inset(0 0 100% 0); } /* ---------- micro-interactions ---------- */ .btn-solid { box-shadow: 0 2px 8px rgba(31, 38, 25, 0.12); transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out); } .btn-solid:hover, .btn-solid:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31, 38, 25, 0.22); } .btn-solid:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(31, 38, 25, 0.12); } .arrow-glyph { display: inline-block; transition: transform 0.28s var(--ease-out); } .arrow-link:hover .arrow-glyph, .arrow-link:focus-visible .arrow-glyph { transform: translateX(5px); } /* animated nav underline that grows from the left */ .nav a { position: relative; } .nav a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease-out); } .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); } @media (max-width: 760px) { .nav a::after { display: none; } } /* gallery figures — lift + caption warms on hover */ .gal-fig { transition: transform 0.35s var(--ease-out); } .gal-fig:hover { transform: translateY(-4px); } .gal-fig figcaption { transition: color 0.25s var(--ease-out); } .gal-fig:hover figcaption { color: var(--clay-deep); } /* service row — clay tick slides in on hover */ .svc-body h3 { position: relative; display: inline-block; } .svc-body h3::before { content: ""; position: absolute; left: -0.9em; top: 50%; width: 0.5em; height: 2px; background: var(--clay); transform: scaleX(0) translateY(-50%); transform-origin: right; transition: transform 0.3s var(--ease-out); } .svc:hover .svc-body h3::before { transform: scaleX(1) translateY(-50%); } /* form fields glow subtly on focus */ .quote-form input, .quote-form textarea { transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } .quote-form input:focus, .quote-form textarea:focus { box-shadow: 0 3px 12px -6px var(--moss); } /* ---------- before/after: tactile handle ---------- */ .ba-handle { transition: none; } .ba-grip { transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), background 0.2s var(--ease-out); animation: grip-attract 2.6s var(--ease-out) infinite; } .ba:hover .ba-grip { animation-play-state: paused; transform: scale(1.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } .ba.dragging .ba-grip { animation-play-state: paused; transform: scale(1.14); background: var(--clay-deep); box-shadow: 0 0 0 6px rgba(166, 90, 56, 0.22), 0 6px 20px rgba(0, 0, 0, 0.5); } .ba.dragging { cursor: ew-resize; } .ba-handle:focus-visible .ba-grip { box-shadow: 0 0 0 4px rgba(233, 181, 143, 0.6), 0 4px 14px rgba(0, 0, 0, 0.4); } @keyframes grip-attract { 0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } 50% { box-shadow: 0 0 0 7px rgba(233, 181, 143, 0.14), 0 4px 14px rgba(0, 0, 0, 0.4); } } .ba-tag { transition: opacity 0.3s var(--ease-out); }