/* ============================================================ J&J's Pet Waste Services — Rebrand UI Kit (shared stylesheet) Tokens & components from the JJ Pet Waste UI Kit ============================================================ */ /* Fonts load in (dynamic — based on the Heading/Body fonts chosen in /admin/style). */ /* Brand tokens (:root) now live in tokens.css, generated from data/tokens.json and editable via /admin/style. tokens.css is linked before this file. */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--page);color:var(--n700);font-family:var(--font-body),sans-serif;font-size:var(--fs-base);-webkit-font-smoothing:antialiased;line-height:var(--lh-body);} h1,h2,h3,h4{font-family:var(--font-head),sans-serif;color:var(--ink-900);margin:0;} a{color:inherit;text-decoration:none;} img{max-width:100%;} .wrap{max-width:var(--container);margin:0 auto;padding:0 24px;} .eyebrow{font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sky-700);} /* buttons */ .btn{font-family:var(--font-body);font-weight:800;font-size:14px;letter-spacing:var(--btn-tracking);text-transform:var(--btn-transform);border:none;border-radius:var(--radius-btn);padding:15px 30px;cursor:pointer;transition:all .15s;display:inline-block;text-align:center;} .btn-primary{color:var(--ink-900);background:var(--sky-300);box-shadow:var(--shadow-cta);} .btn-primary:hover{background:var(--sky-400);transform:translateY(-1px);box-shadow:0 8px 22px rgba(165,223,250,.42);} .btn-sunny{color:#fff;background:var(--sunny-500);box-shadow:0 6px 16px rgba(232,145,60,.30);} .btn-sunny:hover{background:var(--sunny-600);} .btn-soft{color:var(--sky-700);background:var(--soft);border:1.5px solid var(--soft-border);padding:13.5px 28px;} .btn-soft:hover{background:#D6EEF9;border-color:var(--sky-300);} .btn-outline{color:var(--ink-700);background:transparent;border:1.5px solid var(--n200);padding:13.5px 28px;} .btn-outline:hover{border-color:var(--ink-700);color:var(--ink-900);} .btn-ghost-light{color:var(--ink-900);background:rgba(255,255,255,.45);border:1.5px solid rgba(14,47,66,.22);padding:13.5px 28px;} .btn-ghost-light:hover{background:rgba(255,255,255,.8);} .btn-white{color:var(--ink-700);background:#fff;box-shadow:0 4px 12px rgba(14,47,66,.12);} .btn-white:hover{background:var(--paper);} .btn-sm{font-size:12px;letter-spacing:.8px;padding:10px 20px;} .btn-lg{font-size:16px;padding:19px 40px;} /* pills, cards */ .pill{display:inline-block;font-size:13px;font-weight:700;color:var(--sky-700);background:var(--soft);border:1px solid var(--soft-border);padding:7px 14px;border-radius:999px;} .hero .pill{background:#fff;border-color:var(--sky-200);box-shadow:0 1px 3px rgba(14,47,66,.06);} .pill-sunny{color:var(--sunny-600);background:var(--sunny-100);border-color:#F2D3A8;} .card{background:var(--white);border-radius:var(--radius-card);border:1px solid var(--n100);box-shadow:var(--shadow-sm);} .check{width:22px;height:22px;border-radius:999px;background:var(--sky-300);color:var(--ink-900);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;} .ctc-dot{width:8px;height:8px;border-radius:999px;background:var(--sky-400);flex:none;display:inline-block;} /* promo strip */ .promo{background:var(--sky-300);display:flex;align-items:center;justify-content:center;gap:18px;padding:11px 24px;flex-wrap:wrap;} .promo span{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--ink-900);} /* nav */ .nav{background:var(--white);border-bottom:1px solid var(--n100);position:sticky;top:0;z-index:50;} .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;} .nav-logo{height:54px;width:auto;display:block;} .nav-links{display:flex;align-items:center;gap:28px;} .nav-links a{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--n500);} .nav-links a.active{color:var(--sky-600);font-weight:700;} .nav-links a:hover{color:var(--sky-600);} .acct{width:38px;height:38px;border-radius:999px;border:1.5px solid var(--n100);display:flex;align-items:center;justify-content:center;} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;} .burger span{width:24px;height:2.5px;background:var(--n700);border-radius:2px;} /* page banner */ .banner-head{background:var(--sky-300);padding:54px 0;text-align:center;} .banner-head h1{font-size:48px;font-weight:700;letter-spacing:-1px;color:var(--ink-900);} .banner-head p{font-size:17px;color:var(--ink-700);margin:10px auto 0;max-width:60ch;} /* sections */ section.band{padding:var(--section-pad) 0;} section.band.white{background:var(--white);} .sec-head{text-align:center;max-width:680px;margin:0 auto 44px;display:flex;flex-direction:column;gap:12px;align-items:center;} .sec-head h2{font-weight:700;font-size:36px;letter-spacing:-.6px;} .sec-head p{font-size:17px;color:var(--n500);margin:0;} /* hero */ /* background-size/position below are for admin-uploaded PHOTOS only — nav.js sets its own inline background-size ("cover"/"contain") + position for that case, which always overrides these. The default ambient gradient below must NOT inherit "cover": forcing a fixed-pixel radial-gradient to scale like an image is what caused the hard seam + stretched/warped glow color. Gradients fill the box correctly on their own. */ .hero{padding:72px 0 64px;background-position:center; background-image: radial-gradient(ellipse farthest-corner at 88% -10%, rgba(232,145,60,.16), transparent 60%), linear-gradient(180deg, var(--sky-50) 0%, var(--sky-100) 55%, var(--sky-200) 100%); } .hero.on-image{background-size:cover;} .hero.on-image{border-radius:0;} .hero.on-image .hero-copy h1,.hero.on-image .hero-copy p,.hero.on-image .hero-trust div{color:#fff;} .hero.on-image .pill{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.45);} .banner-head{background-size:cover;background-position:center;} .banner-head.on-image h1{color:#fff;} .banner-head.on-image p{color:#EAF6FC;} .hero-grid{display:flex;gap:56px;align-items:center;flex-wrap:wrap;} .hero-copy{flex:1 1 440px;display:flex;flex-direction:column;gap:22px;} .hero h1{font-weight:700;font-size:var(--fs-hero);line-height:1.04;letter-spacing:-1.4px;max-width:17ch;} .hero p{font-size:18px;line-height:1.6;color:var(--n500);max-width:56ch;margin:0;} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:6px;} .hero-trust div{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-700);} /* dark feature card */ .feature-dark{background:var(--ink-900);border-radius:24px;padding:36px;color:#fff;box-shadow:var(--shadow-card);} .feature-dark h4{color:#fff;font-size:22px;margin-bottom:18px;} .feature-dark .row{display:flex;align-items:center;gap:12px;margin-bottom:14px;} .feature-dark .row .t{font-size:15px;color:#D6EEF9;} /* grids */ .grid-3{display:flex;gap:20px;flex-wrap:wrap;} .grid-3 > *{flex:1 1 280px;} .tile{background:var(--white);border:1px solid var(--n100);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;} .tile .ic{width:46px;height:46px;border-radius:12px;background:var(--soft);border:1px solid var(--soft-border);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:20px;color:var(--sky-600);} .tile h4{font-size:20px;font-weight:600;} .tile p{font-size:15px;color:var(--n500);margin:0;} .tile-photo{height:150px;margin:-28px -28px 8px;border-radius:18px 18px 0 0;overflow:hidden;} .tile-photo img{width:100%;height:100%;object-fit:cover;display:block;} /* optional editable photo in the Home about block */ .about-photo{width:100%;max-width:540px;height:300px;margin:0 auto 6px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);} .about-photo img{width:100%;height:100%;object-fit:cover;display:block;} /* badge row */ .badges{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;} .badge-card{flex:1 1 200px;max-width:250px;background:var(--white);border:1px solid var(--n100);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;} .badge-card .ic{width:54px;height:54px;border-radius:999px;background:var(--sky-300);color:var(--ink-900);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;} .badge-card span{font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--ink-900);} /* pricing */ .price-grid{display:flex;gap:20px;flex-wrap:wrap;align-items:stretch;} .price{flex:1 1 240px;min-width:220px;border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:8px;} .price.solid{background:var(--sky-300);color:var(--ink-900);box-shadow:var(--shadow-card);} .price.feat{background:var(--white);border:2px solid var(--sky-600);box-shadow:0 10px 30px rgba(14,47,66,.08);position:relative;} .price.muted{background:var(--paper);border:1px solid var(--n100);} .price .tier{font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;} .price.feat .tier{color:var(--sky-700);} .price.muted .tier{color:var(--n500);} .price .amt{font-family:var(--font-head);font-weight:700;font-size:52px;line-height:1;letter-spacing:-1.5px;margin-top:10px;} .price .badge{position:absolute;top:-13px;right:20px;font-family:var(--font-body);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-900);background:var(--sky-300);padding:6px 14px;border-radius:999px;} /* matrix table */ .matrix-wrap{display:flex;flex-direction:column;gap:14px;} .matrix-title{display:flex;flex-direction:column;gap:4px;} .matrix-title h3{font-family:var(--font-head);font-weight:600;font-size:22px;color:var(--ink-900);} .matrix-title p{font-size:14px;color:var(--n500);margin:0;} table.matrix{border-collapse:separate;border-spacing:10px;width:100%;} table.matrix th{font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--sky-700);padding:8px;text-align:center;} table.matrix th.corner{background:transparent;} table.matrix td{background:var(--white);border:1px solid var(--n100);border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow-sm);} table.matrix td.rowhead{background:var(--soft);border-color:var(--soft-border);font-family:var(--font-body);font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--sky-700);} table.matrix td .cell-amt{font-family:var(--font-head);font-weight:700;font-size:30px;color:var(--sky-600);letter-spacing:-.5px;} .todo{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--sunny-600);background:var(--sunny-100);border:1px solid #F2D3A8;border-radius:999px;padding:2px 8px;margin-top:6px;} /* booking stepper */ .stepper{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;margin:0 auto;} .stepper .step{display:flex;align-items:center;gap:10px;} .stepper .dot{width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:800;font-size:14px;} .stepper .dot.done{background:var(--sky-300);color:var(--ink-900);} .stepper .dot.todo{background:var(--n100);color:var(--n400);} .stepper .lbl{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--sky-600);} .stepper .lbl.todo{font-weight:600;color:var(--n400);} .stepper .seg{width:48px;height:2px;margin:0 14px;} .stepper .seg.done{background:var(--sky-300);} .stepper .seg.todo{background:var(--n100);} /* form controls */ .field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;} .field label{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--n700);} .field .req{color:var(--error);} .input,.select,.textarea{font-family:var(--font-body);font-size:16px;color:var(--n700);padding:15px 16px;border:1.5px solid var(--n200);border-radius:var(--radius-input);outline:none;background:#fff;transition:all .15s;width:100%;} .input:focus,.select:focus,.textarea:focus{border-color:var(--sky-300);box-shadow:0 0 0 4px rgba(165,223,250,.55);} .select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:var(--font-body),sans-serif;font-weight:600;color:var(--ink-700);padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231F76A2' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;} .select option{font-family:var(--font-body),sans-serif;font-weight:600;color:var(--ink-700);background:#fff;} .select-card{background:var(--white);border:2px solid var(--n100);border-radius:16px;padding:20px;cursor:pointer;display:flex;gap:14px;align-items:flex-start;transition:all .15s;} .select-card:hover{border-color:var(--sky-300);} .select-card.sel{background:var(--soft);border-color:var(--sky-600);} .radio-out{width:20px;height:20px;border-radius:999px;border:2px solid var(--n200);background:#fff;flex:none;margin-top:2px;} .radio-on{width:20px;height:20px;border-radius:999px;border:6px solid var(--sky-600);background:#fff;flex:none;margin-top:2px;} .counter{display:flex;width:100%;align-items:stretch;border:1.5px solid var(--n100);border-radius:14px;overflow:hidden;background:#fff;} .counter button{font-family:var(--font-head);font-weight:700;font-size:24px;color:var(--sky-600);background:var(--paper);border:none;width:78px;flex:none;cursor:pointer;transition:background .18s ease,color .18s ease;-webkit-user-select:none;user-select:none;} .counter button:hover{background:var(--sky-600);color:#fff;} .counter button:active{background:var(--sky-700);} .counter .val{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--ink-900);border-left:1.5px solid var(--n100);border-right:1.5px solid var(--n100);overflow:hidden;} /* CTA band */ .cta-band{background:var(--sky-300);border-radius:24px;padding:52px 40px;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;} .cta-band h2{font-weight:700;font-size:38px;letter-spacing:-.8px;} .cta-band p{font-size:18px;color:var(--ink-700);margin:0;max-width:48ch;} /* socials strip */ .socials{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;} .socials h3{font-family:var(--font-head);font-weight:600;font-size:22px;color:var(--ink-900);} .social-links{display:flex;gap:14px;} .social-links a{width:44px;height:44px;border-radius:999px;background:var(--soft);border:1px solid var(--soft-border);display:flex;align-items:center;justify-content:center;color:var(--sky-600);font-weight:700;font-size:13px;} /* footer */ footer{background:var(--ink-900);margin-top:0;} .foot{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding:52px 24px;} .foot-logo{height:64px;width:auto;max-width:200px;object-fit:contain;align-self:flex-start;display:block;margin-bottom:14px;} .foot-col{flex:1 1 200px;display:flex;flex-direction:column;gap:10px;} .foot-col.brand{flex:1 1 260px;} .foot-col .h{font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sky-400);} .foot-col a,.foot-col .x{font-size:14px;color:#D6EEF9;} .foot-col a:hover{color:#fff;} .foot-col p{font-size:14px;line-height:1.6;color:var(--sky-300);margin:0;max-width:30ch;} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 24px;text-align:center;font-size:13px;color:var(--n400);word-break:break-word;} .foot-col .x,.foot-col a{overflow-wrap:anywhere;} /* helpers */ .center{text-align:center;} .mt24{margin-top:24px;} .mt16{margin-top:16px;} .note{background:var(--soft);border:1px solid var(--soft-border);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--ink-700);} @media(max-width:860px){ .nav-inner{flex-wrap:wrap;} .nav-links{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:8px;border-top:1px solid var(--n100);} .nav.open .nav-links{display:flex;} .nav-links a{padding:14px 2px;border-bottom:1px solid var(--n50);font-size:16px;color:var(--ink-900);} .nav-links a.active{color:var(--sky-600);} .nav-links .acct{display:none;} .burger{display:flex;} .nav.open .burger{margin-top:14px;width:100%;} .hero h1{font-size:38px;} .hero{padding:48px 0;} .sec-head h2{font-size:28px;} .cta-band h2{font-size:28px;} .banner-head h1{font-size:34px;} .foot{gap:28px;} /* Content centering on mobile */ .hero-copy{align-items:center;text-align:center;} .hero-cta{justify-content:center;} .hero-trust{justify-content:center;} .feature-dark{text-align:center;} .feature-dark .row{justify-content:center;} .tile{align-items:center;text-align:center;} .tile .tile-photo{align-self:stretch;} .price{align-items:center;text-align:center;} .foot-col{align-items:center;text-align:center;} .foot-logo{align-self:center;} } /* ===== Mobile: booking stepper + pricing tables fit the screen ===== */ @media(max-width:600px){ /* stepper: stack each label UNDER its dot so nothing overlaps. Dots are fixed-size (flex:none = no squish); the connectors flex to fill and align to the dot centers. */ .stepper{flex-wrap:nowrap;align-items:flex-start;gap:0;} .stepper .step{flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;text-align:center;} .stepper .dot{flex:none;width:30px;height:30px;font-size:13px;} .stepper .lbl{font-size:11px;line-height:1.1;} .stepper .seg{flex:1 1 auto;width:auto;min-width:12px;align-self:flex-start;margin:14px 8px 0;} /* pricing matrices: fixed layout + smaller type so all 4 columns fit, no side-scroll */ table.matrix{border-spacing:5px;table-layout:fixed;} table.matrix th{font-size:10px;letter-spacing:.3px;padding:5px 2px;} table.matrix td{padding:11px 4px;} table.matrix td.rowhead{font-size:10px;letter-spacing:0;padding:11px 4px;} table.matrix td .cell-amt{font-size:17px;letter-spacing:0;} } @media(max-width:360px){ /* very narrow phones: nudge the stepper smaller, labels still fit (stacked) */ .stepper .lbl{font-size:10px;} .stepper .dot{width:27px;height:27px;} } /* ===== Services section parallax background ===== */ .svc-band{position:relative;} .svc-band.has-bg{background-attachment:fixed !important;} .svc-overlay{position:absolute;inset:0;background:rgba(14,47,66,.58);z-index:0;} /* Text flips white when a background image is set */ .svc-band.has-bg .sec-head .eyebrow{color:var(--sky-300);} .svc-band.has-bg .sec-head h2,.svc-band.has-bg .sec-head p{color:#fff;} /* Tiles stay white-on-light — no change needed; they have their own bg */ /* Mobile: iOS Safari can't do fixed-attachment parallax, so use a scrolling cover background. Cover crops hard on a narrow screen, so frame it on the right-hand dog (the husky) — big and centered is fine here. */ @media(max-width:860px){ .svc-band.has-bg{background-attachment:scroll !important;background-position:70% 38% !important;} } /* ===================================================================== ANIMATIONS & MICRO-INTERACTIONS Polished but professional. IO scroll-reveals wired in inc/footer.php. ===================================================================== */ /* transform-only (no opacity) so above-the-fold content paints visible on the first frame — opacity:0 entrance animations cause Lighthouse "NO_LCP" / unscored perf. */ @keyframes jj-fade-up { from{transform:translateY(22px);} to{transform:translateY(0);} } @keyframes jj-fade-in { from{opacity:0;} to{opacity:1;} } @keyframes jj-slide-dn { from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} } @keyframes jj-shimmer { from{transform:translateX(-180%) skewX(-18deg);} to{transform:translateX(220%) skewX(-18deg);} } @keyframes jj-dot-pop { 0%,100%{box-shadow:0 0 0 0 rgba(165,223,250,0);} 55%{box-shadow:0 0 0 7px rgba(165,223,250,.45);} } /* Scroll reveal base — JS adds .jj-reveal to targets, then .is-visible on intersect. translate3d forces a GPU compositor layer (the key to smooth iOS animation); we only ever animate transform + opacity so there's no layout/paint work per frame. */ .jj-reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);} .jj-reveal.is-visible{opacity:1;transform:translate3d(0,0,0);} .jj-reveal.jj-instant{transition:none;} /* fast-scroll caught it late — show instantly */ .jj-stagger .jj-reveal:nth-child(1){transition-delay:.04s;} .jj-stagger .jj-reveal:nth-child(2){transition-delay:.13s;} .jj-stagger .jj-reveal:nth-child(3){transition-delay:.22s;} .jj-stagger .jj-reveal:nth-child(4){transition-delay:.31s;} /* Mobile: keep the reveals, but make the motion subtler + snappier so it feels smooth on phones (smaller travel, shorter duration). */ @media(max-width:860px){ .jj-reveal{transform:translate3d(0,11px,0);transition-duration:.42s;} .jj-stagger .jj-reveal:nth-child(n){transition-delay:.05s;} } /* Hero entrance (above fold — no IO) */ .hero-copy > *{animation:jj-fade-up .6s ease both;} .hero-copy > *:nth-child(1){animation-delay:.05s;} .hero-copy > *:nth-child(2){animation-delay:.15s;} .hero-copy > *:nth-child(3){animation-delay:.24s;} .hero-copy > *:nth-child(4){animation-delay:.32s;} .hero-copy > *:nth-child(5){animation-delay:.38s;} .feature-dark{animation:jj-fade-up .65s .28s ease both;} /* Banner / nav / promo entrance */ .banner-head h1{animation:jj-fade-up .5s .08s ease both;} .banner-head p{animation:jj-fade-up .5s .18s ease both;} .promo{animation:jj-slide-dn .4s ease both;} .nav-logo{animation:jj-fade-in .5s ease both;} /* Primary button shimmer sweep on hover */ .btn-primary{position:relative;overflow:hidden;} .btn-primary::after{content:'';position:absolute;inset:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-180%) skewX(-18deg);pointer-events:none;} .btn-primary:hover::after{animation:jj-shimmer .5s ease;} /* Card & tile hover lift */ .tile,.card:not(.step-panel):not(.select-card){transition:transform .2s ease,box-shadow .2s ease;} .tile:hover,.card:not(.step-panel):not(.select-card):hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(14,47,66,.1);} .badge-card{transition:transform .2s ease,box-shadow .2s ease;} .badge-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(14,47,66,.09);} /* Pricing matrix cell pop */ table.matrix td:not(.rowhead){transition:transform .15s ease,background .15s;} table.matrix td:not(.rowhead):hover{transform:scale(1.05);background:var(--soft);} /* Stepper dot pulse when activated */ .stepper .dot.done{animation:jj-dot-pop .7s ease 1;} /* Photo hover zoom */ .tile-photo,.about-photo{overflow:hidden;} .tile-photo img,.about-photo img{transition:transform .4s ease;} .tile-photo:hover img,.about-photo:hover img{transform:scale(1.05);} [data-slot="photo_jonah"] img,[data-slot="team_jonah"] img,[data-slot="team_jada"] img, [data-slot="team_ezra"] img,[data-slot="photo_manny"] img{transition:transform .4s ease;} [data-slot="photo_jonah"]:hover img,[data-slot="team_jonah"]:hover img, [data-slot="team_jada"]:hover img,[data-slot="team_ezra"]:hover img, [data-slot="photo_manny"]:hover img{transform:scale(1.04);} /* Manny gets a slow, gentle zoom */ [data-slot="photo_manny"] img{transition:transform 1.1s ease;} /* Respect OS reduced-motion preference */ @media(prefers-reduced-motion:reduce){ *,::before,::after{animation-duration:.01ms !important;animation-delay:.01ms !important;transition-duration:.01ms !important;} .jj-reveal{opacity:1;transform:none;} } /* ===== Team portrait cards (who-we-are.php) ===== */ .team-card{padding:0;overflow:hidden;gap:0;align-items:stretch;text-align:center;} .team-photo{aspect-ratio:1/1;overflow:hidden;background:var(--sky-100);flex:none;} .team-photo>div,.team-photo img{width:100%;height:100%;} .team-photo img{object-fit:cover;object-position:top center;display:block;transition:transform .9s ease;} .team-card:hover .team-photo img{transform:scale(1.04);} .team-info{padding:20px 20px 24px;display:flex;flex-direction:column;gap:6px;} .team-info h4{font-size:20px;margin:0;} /* ===== Booking flow (book.php) ===== */ .select-card .radio{width:20px;height:20px;border-radius:999px;border:2px solid var(--n200);background:#fff;flex:none;} .select-card.sel .radio{border:6px solid var(--sky-600);} .select-card .cbox{width:22px;height:22px;border-radius:7px;border:2px solid var(--n200);background:#fff;display:flex;align-items:center;justify-content:center;color:transparent;font-size:13px;font-weight:700;flex:none;} .select-card.sel .cbox{background:var(--sunny-500);border-color:var(--sunny-500);color:#fff;} .rev-row{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--n50);font-size:15px;} .rev-row:last-child{border-bottom:none;} .rev-row span{color:var(--n500);} .rev-row b{color:var(--ink-900);} /* --- Dog counter: smooth value change --- */ @keyframes jj-count-up {0%{opacity:0;transform:translateY(11px);}100%{opacity:1;transform:translateY(0);}} @keyframes jj-count-down{0%{opacity:0;transform:translateY(-11px);}100%{opacity:1;transform:translateY(0);}} .counter .val.up {animation:jj-count-up .34s cubic-bezier(.22,1,.36,1);} .counter .val.down{animation:jj-count-down .34s cubic-bezier(.22,1,.36,1);} /* --- Estimated price: smooth update --- */ @keyframes jj-price-pop{0%{opacity:.45;transform:translateY(4px);}100%{opacity:1;transform:translateY(0);}} #estPrice{display:inline-block;} #estPrice.bump{animation:jj-price-pop .3s ease;} /* --- Themed custom dropdown (replaces native