/* ============================================================ SLOTLY · CLAY NICHE LANDING — per-vertical accent + sections relies on clay.css + landing-clay.css ============================================================ */ /* per-niche accent override (set data-niche on ) */ :root[data-niche="barber"]{--accent:#c8852a;--accent-soft:#ffd27a;--accent-deep:#8f5d15;--accent-tint:#f7ecd6} :root[data-niche="barber"][data-theme="dark"]{--accent:#f0b154;--accent-soft:#ffd27a;--accent-deep:#7a5012;--accent-tint:#3a2c14} :root[data-niche="nails"]{--accent:#e8703f;--accent-soft:#ff9a6b;--accent-deep:#b84d22;--accent-tint:#fbe6da} :root[data-niche="nails"][data-theme="dark"]{--accent:#ff7d4d;--accent-soft:#ffa176;--accent-deep:#7a3417;--accent-tint:#3a241a} :root[data-niche="beauty"]{--accent:#9a5fb0;--accent-soft:#c79bd6;--accent-deep:#6e3f84;--accent-tint:#f0e6f4} :root[data-niche="beauty"][data-theme="dark"]{--accent:#bf8fd0;--accent-soft:#d6b3e0;--accent-deep:#5a3370;--accent-tint:#2e2238} :root[data-niche="clinic"]{--accent:#2a82c9;--accent-soft:#7cc5f0;--accent-deep:#1c5e96;--accent-tint:#dbeaf6} :root[data-niche="clinic"][data-theme="dark"]{--accent:#5aa9e6;--accent-soft:#9fd0f5;--accent-deep:#184c79;--accent-tint:#1c2c3a} :root[data-niche="fitness"]{--accent:#2c8a73;--accent-soft:#6fd6bf;--accent-deep:#1e6151;--accent-tint:#dbf0ea} :root[data-niche="fitness"][data-theme="dark"]{--accent:#4eccab;--accent-soft:#80e0c8;--accent-deep:#1a5444;--accent-tint:#173029} :root[data-niche="pets"]{--accent:#d2603a;--accent-soft:#f3a07f;--accent-deep:#9e4426;--accent-tint:#f8e3da} :root[data-niche="pets"][data-theme="dark"]{--accent:#f08a5f;--accent-soft:#f7b095;--accent-deep:#7a3417;--accent-tint:#36241c} :root[data-niche="auto"]{--accent:#566273;--accent-soft:#8a97a8;--accent-deep:#39414f;--accent-tint:#e4e8ed} :root[data-niche="auto"][data-theme="dark"]{--accent:#9aa8ba;--accent-soft:#b8c4d2;--accent-deep:#39414f;--accent-tint:#252b33} :root[data-niche="tutors"]{--accent:#7b5ea7;--accent-soft:#a487d0;--accent-deep:#573f7e;--accent-tint:#efe7f6} :root[data-niche="tutors"][data-theme="dark"]{--accent:#b294dc;--accent-soft:#c9b3e6;--accent-deep:#4a3470;--accent-tint:#2a2238} /* niche switcher (top, under nav) */ .niche-switch{position:sticky;top:64px;z-index:80;display:flex;justify-content:center;padding:10px 0; background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .niche-switch__inner{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding:5px;border-radius:999px; background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft);scrollbar-width:none} .niche-switch__inner::-webkit-scrollbar{display:none} .nsw{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:999px;font-weight:700;font-size:14px; color:var(--ink-2);white-space:nowrap;transition:color .2s} .nsw i{font-size:14px} .nsw:hover{color:var(--ink)} .nsw.on{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-deep)} /* niche hero tweaks */ .nhero{padding-top:40px} .nhero .eyebrow .ic{margin-right:2px} /* benefits */ .nben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .nben h3{margin:16px 0 8px;font-size:19px} .nben p{color:var(--ink-2);font-size:14.5px} /* testimonial */ .ntest{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center; background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:34px;box-shadow:var(--shadow-soft);max-width:900px;margin:0 auto} .ntest__ava{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;color:#fff;font-size:38px;font-family:var(--display);font-weight:800; background:linear-gradient(160deg,var(--accent-soft),var(--accent));box-shadow:0 10px 22px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.4)} .ntest__quote{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,24px);line-height:1.4;letter-spacing:-.01em;text-wrap:balance} .ntest__by{margin-top:14px;font-size:14px;font-weight:700} .ntest__by span{color:var(--ink-3);font-weight:600} .ntest__stars{color:#f0a93f;font-size:14px;margin-bottom:10px} /* niche services list */ .nsvc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .nsvc{display:flex;align-items:center;gap:13px;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft)} .nsvc__name{font-weight:700;font-size:14.5px} .nsvc__meta{font-size:12.5px;color:var(--ink-3);font-weight:600} /* ============================================================ NICHE FLOATING 3D OBJECTS (per-vertical mascots) ============================================================ */ .nhero-objs{position:absolute;inset:0;pointer-events:none;z-index:7;perspective:700px;transform-style:preserve-3d} .nobj{position:absolute;border-radius:50%;display:grid;place-items:center;color:#fff; box-shadow:0 16px 26px rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -7px 12px rgba(0,0,0,.14); will-change:transform;animation-duration:var(--dur,2.6s);animation-iteration-count:infinite;animation-timing-function:ease-in-out} .nobj--big{width:88px;height:88px;font-size:34px} .nobj--mid{width:64px;height:64px;font-size:24px} .nobj--tile{border-radius:26px} .nobj__sh{position:absolute;left:50%;bottom:-16px;width:60%;height:12px;border-radius:50%; background:rgba(0,0,0,.16);filter:blur(5px);transform:translateX(-50%);z-index:-1;animation:inherit;animation-name:nbShadow} /* keyframes */ @keyframes nbBounce{0%,100%{transform:translateY(0) scaleY(.96)}12%{transform:translateY(-30px) scaleY(1.05)}40%{transform:translateY(0) scaleY(.93)}55%{transform:translateY(-12px) scaleY(1.02)}75%{transform:translateY(0) scaleY(.97)}} @keyframes nbShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.55}12%{transform:translateX(-50%) scale(.6);opacity:.25}40%{transform:translateX(-50%) scale(1.05);opacity:.6}} @keyframes nbSpin{0%{transform:rotateY(0) rotateX(8deg)}100%{transform:rotateY(360deg) rotateX(8deg)}} @keyframes nbSwing{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(17deg)}} @keyframes nbFloat{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(7px,-15px) rotate(6deg)}} @keyframes nbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}} .nb-bounce{animation-name:nbBounce} .nb-spin{animation-name:nbSpin;animation-timing-function:linear} .nb-swing{animation-name:nbSwing;transform-origin:50% -30%} .nb-float{animation-name:nbFloat} .nb-pulse{animation-name:nbPulse} @media(prefers-reduced-motion:reduce){.nobj{animation:none!important}.nobj__sh{display:none}} @media(max-width:880px){ .nben-grid{grid-template-columns:1fr} .ntest{grid-template-columns:1fr;text-align:center;padding:26px} .ntest__ava{margin:0 auto} .niche-switch{top:60px} .nobj--big{width:70px;height:70px;font-size:27px} .nobj--mid{width:52px;height:52px;font-size:20px} }