/* ═══════════════════════════════════════════ ╔═════════════════════════════════════════╗ ║ CORE.CSS CONTENT — DO NOT DUPLICATE ║ ║ Goes in /assets/css/core.css ║ ╚═════════════════════════════════════════╝ ═══════════════════════════════════════════ */ /* --- GG Root: Start --- */ :root{ /* Brand colors — red */ --gg-red:#ED2938; --gg-red-hover:#D41E2C; --gg-red-deep:#B91C28; --gg-red-light:#FFF1F2; --gg-red-subtle:rgba(237,41,56,.07); --gg-red-glow:rgba(237,41,56,.22); /* Neutrals */ --gg-black:#0A0A0A; --gg-black-soft:#141414; --gg-white:#FFFFFF; --gg-off-white:#FAFAFA; /* Grays */ --gg-gray-50:#F9FAFB;--gg-gray-100:#F3F4F6;--gg-gray-200:#E5E7EB; --gg-gray-300:#D1D5DB;--gg-gray-400:#9CA3AF;--gg-gray-500:#6B7280; --gg-gray-600:#4B5563;--gg-gray-700:#374151;--gg-gray-800:#1F2937;--gg-gray-900:#111827; /* Status */ --gg-success:#16A34A;--gg-error:#DC2626; /* Typography */ --gg-font-head:'Outfit',sans-serif; --gg-font-body:'Figtree',sans-serif; --gg-text-2xs:.6875rem;--gg-text-xs:.75rem;--gg-text-sm:.8125rem; --gg-text-base:.9375rem;--gg-text-md:1rem;--gg-text-lg:1.125rem; --gg-text-xl:1.375rem;--gg-text-2xl:1.75rem;--gg-text-3xl:2.25rem; /* NEW ADD-ON: display-size typography for hero titles */ --gg-text-4xl:3rem; --gg-text-5xl:4rem; --gg-text-6xl:5rem; /* Spacing */ --gg-sp-1:.25rem;--gg-sp-2:.5rem;--gg-sp-3:.75rem;--gg-sp-4:1rem; --gg-sp-5:1.25rem;--gg-sp-6:1.5rem;--gg-sp-8:2rem;--gg-sp-10:2.5rem; --gg-sp-12:3rem;--gg-sp-16:4rem;--gg-sp-20:5rem; /* Container */ --gg-max-w:auto; /* Radius — max 16px */ --gg-r-sm:4px;--gg-r-md:8px;--gg-r-lg:12px;--gg-r-xl:16px; /* Borders & shadows */ --gg-border:1px solid var(--gg-gray-200); --gg-shadow-header:0 2px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04); --gg-shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04); --gg-shadow-glow:0 0 20px var(--gg-red-glow); /* Motion */ --gg-ease:cubic-bezier(.16,1,.3,1); --gg-ease-out:cubic-bezier(.33,1,.68,1); --gg-dur-fast:150ms;--gg-dur:250ms;--gg-dur-slow:400ms; /* Z-index */ --gg-z-sticky:200;--gg-z-drop:100;--gg-z-modal:500; } /* --- GG Root: End --- */ /* --- GG Reset: Start --- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased} body{font-family:var(--gg-font-body);font-size:var(--gg-text-base);color:var(--gg-gray-800);background:var(--gg-white);overflow-x:hidden} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none} img{max-width:100%;display:block} .gg-container{width:100%;max-width:var(--gg-max-w);margin:0 auto;padding:0 var(--gg-sp-6)} /* --- GG Reset: End --- */ /* ╔═════════════════════════════════════════╗ ║ END OF CORE.CSS CONTENT ║ ╚═════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════ GG-HD — Header Desktop: [burger+logo] [search-center] [login+profile+ctas] Phone: Row1[burger+logo+cta] Row2[search full-width] ═══════════════════════════════════════════ */ /* --- GG-HD: Start --- */ .gg-hd{background:var(--gg-white);box-shadow:var(--gg-shadow-header);position:sticky;top:0;z-index:var(--gg-z-sticky);transition:box-shadow var(--gg-dur) ease} .gg-hd--scrolled{box-shadow:0 4px 24px rgba(0,0,0,.09),0 1px 4px rgba(0,0,0,.04)} .gg-hd__wrap{display:flex;align-items:center;height:72px;flex-wrap:nowrap} /* Left: burger + logo */ .gg-hd__left{flex:0 0 auto;display:flex;align-items:center;gap:var(--gg-sp-3)} .gg-hd__burger{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);color:var(--gg-gray-600);font-size:24px;transition:all var(--gg-dur-fast) ease} .gg-hd__burger:hover{background:var(--gg-gray-100);color:var(--gg-black)} .gg-hd__burger:active{transform:scale(.92)} .gg-hd__logo{position:relative;display:inline-flex;align-items:center;text-decoration:none} .gg-hd__logo img{height:40px;width:auto} .gg-hd__logo-beta{position:absolute;right:5px;bottom:-3px;padding:1px 4px;border-radius:4px;background:var(--gg-red,#ED2938);color:#fff;font-size:8px;font-weight:800;line-height:1.25;letter-spacing:.08em;box-shadow:0 1px 3px rgba(15,23,42,.18)} /* Center: search (SINGLE instance — CSS repositions on phone) */ .gg-hd__center{flex:1 1 auto;display:flex;justify-content:center;padding:0 var(--gg-sp-8)} .gg-hd__search{width:100%;max-width:600px;position:relative} .gg-hd__search-wrap{position:relative;background:var(--gg-gray-100);border-radius:var(--gg-r-lg);box-shadow:inset 0 2px 4px rgba(0,0,0,.06),inset 0 0 0 1px rgba(0,0,0,.03),0 1px 2px rgba(255,255,255,.8),0 4px 8px -2px rgba(0,0,0,.04);transition:all .3s var(--gg-ease);-webkit-backface-visibility:hidden;backface-visibility:hidden} .gg-hd__search-wrap:focus-within{background:var(--gg-white);box-shadow:inset 0 1px 2px rgba(237,41,56,.06),0 0 0 2px var(--gg-red-subtle),0 4px 16px -2px rgba(237,41,56,.1),0 8px 24px -4px rgba(0,0,0,.06);transform:translateY(-1px)} .gg-hd__search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--gg-gray-400);font-size:16px;pointer-events:none;transition:color .2s ease} .gg-hd__search-wrap:focus-within .gg-hd__search-icon{color:var(--gg-red)} .gg-hd__search-input{width:100%;height:46px;padding:0 50px 0 46px;font-family:var(--gg-font-body);font-size:var(--gg-text-sm);color:var(--gg-gray-800);background:transparent;border:none;border-radius:var(--gg-r-lg);outline:none} .gg-hd__search-input::placeholder{color:var(--gg-gray-400)} .gg-hd__search-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--gg-red);color:var(--gg-white);border-radius:var(--gg-r-md);font-size:15px;transition:all var(--gg-dur-fast) ease;box-shadow:0 2px 4px rgba(237,41,56,.25)} .gg-hd__search-btn:hover{background:var(--gg-red-hover);box-shadow:0 4px 12px rgba(237,41,56,.35);transform:translateY(-50%) scale(1.04)} /* Right: login + profile + sep + ctas */ .gg-hd__right{flex:0 0 auto;display:flex;align-items:center;gap:var(--gg-sp-2)} .gg-hd__login{display:inline-flex;align-items:center;gap:6px;font-family:var(--gg-font-head);font-weight:600;font-size:var(--gg-text-sm);color:var(--gg-gray-600);padding:9px 16px;border-radius:var(--gg-r-lg);transition:all var(--gg-dur) var(--gg-ease)} .gg-hd__login i{font-size:18px} .gg-hd__login:hover{color:var(--gg-black);background:var(--gg-gray-100)} .gg-hd__sep{width:1px;height:28px;background:var(--gg-gray-200);margin:0 var(--gg-sp-3)} /* CTA: List a Service */ .gg-hd__cta-list{display:inline-flex;align-items:center;gap:var(--gg-sp-2);font-family:var(--gg-font-head);font-weight:700;font-size:var(--gg-text-sm);color:var(--gg-white);padding:10px 20px;border-radius:var(--gg-r-lg);background:linear-gradient(135deg,var(--gg-red),var(--gg-red-deep));box-shadow:0 2px 8px rgba(237,41,56,.3),inset 0 1px 0 rgba(255,255,255,.15);transition:all var(--gg-dur) var(--gg-ease);white-space:nowrap;position:relative} .gg-hd__cta-list:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(237,41,56,.35)} .gg-hd__cta-list i{font-size:14px} .gg-hd__cta-badge{position:absolute;top:-8px;right:-6px;background:var(--gg-success);color:var(--gg-white);font-family:var(--gg-font-head);font-size:.5625rem;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:var(--gg-r-sm);line-height:1.4;box-shadow:0 2px 6px rgba(22,163,74,.35);animation:gg-pulse 2.5s ease infinite} @keyframes gg-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} /* CTA: Claim Your Business */ .gg-hd__cta-claim{display:inline-flex;align-items:center;gap:var(--gg-sp-2);font-family:var(--gg-font-head);font-weight:600;font-size:var(--gg-text-sm);color:var(--gg-black);padding:10px 18px;border-radius:var(--gg-r-lg);background:var(--gg-white);border:1.5px solid var(--gg-gray-800);box-shadow:0 2px 4px rgba(0,0,0,.06);transition:all var(--gg-dur) var(--gg-ease);white-space:nowrap} .gg-hd__cta-claim i{font-size:14px} .gg-hd__cta-claim:hover{background:var(--gg-black);color:var(--gg-white);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15)} /* --- GG-HD: End --- */ /* ═══════════════════════════════════════════ GG-PD — Profile Dropdown (SINGLE HTML) Desktop: absolute under trigger button Mobile: fixed bottom sheet via CSS ═══════════════════════════════════════════ */ /* --- GG-PD: Start --- */ .gg-pd{position:relative} /* Trigger button (hidden on phone, visible desktop/tablet) */ .gg-pd__btn{display:flex;align-items:center;gap:var(--gg-sp-2);padding:5px 12px 5px 5px;border-radius:var(--gg-r-lg);border:1.5px solid var(--gg-gray-200);transition:all var(--gg-dur-fast) ease} .gg-pd__btn:hover{border-color:var(--gg-gray-300);background:var(--gg-gray-50)} .gg-pd__avatar{width:34px;height:34px;border-radius:var(--gg-r-md);background:var(--gg-red);color:var(--gg-white);font-family:var(--gg-font-head);font-weight:700;font-size:var(--gg-text-sm);display:flex;align-items:center;justify-content:center} .gg-pd__name{font-family:var(--gg-font-head);font-weight:600;font-size:var(--gg-text-xs);color:var(--gg-gray-800)} .gg-pd__arrow{font-size:12px;color:var(--gg-gray-400);transition:transform var(--gg-dur-fast) ease;margin-left:2px} /* Overlay — invisible on desktop, blur overlay on mobile */ .gg-pd__overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:calc(var(--gg-z-modal) + 5);pointer-events:none;transition:background .4s ease;display:none;-webkit-backface-visibility:hidden;backface-visibility:hidden} /* Dropdown panel — desktop: absolute */ .gg-pd__drop{position:absolute;top:calc(100% + 8px);right:0;width:240px;background:var(--gg-white);border:var(--gg-border);border-radius:var(--gg-r-xl);box-shadow:var(--gg-shadow-lg);opacity:0;visibility:hidden;transform:translate3d(0,-8px,0) scale(.97);transition:all .25s var(--gg-ease);z-index:calc(var(--gg-z-modal) + 10);overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden} /* Open state — desktop */ .gg-pd--open .gg-pd__drop{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1)} .gg-pd--open .gg-pd__arrow{transform:rotate(180deg)} .gg-pd--open .gg-pd__overlay{background:rgba(0,0,0,.5);pointer-events:all;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} /* Handle — hidden desktop, visible mobile */ .gg-pd__handle{display:none;justify-content:center;padding:12px 0 6px} .gg-pd__handle-bar{width:40px;height:4px;background:var(--gg-gray-300);border-radius:4px} .gg-pd__close{display:none;position:absolute;top:12px;right:16px;width:36px;height:36px;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);color:var(--gg-gray-400);font-size:16px;z-index:2;transition:all .2s ease} .gg-pd__close:hover{background:var(--gg-gray-100);color:var(--gg-gray-700)} /* Drop head: avatar + name + email */ .gg-pd__head{padding:var(--gg-sp-4);border-bottom:var(--gg-border);display:flex;align-items:center;gap:var(--gg-sp-3)} .gg-pd__head-avatar{width:40px;height:40px;border-radius:var(--gg-r-lg);background:var(--gg-red);color:var(--gg-white);font-family:var(--gg-font-head);font-weight:700;font-size:var(--gg-text-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0} .gg-pd__head-name{font-family:var(--gg-font-head);font-weight:700;font-size:var(--gg-text-sm);color:var(--gg-black)} .gg-pd__head-email{font-size:var(--gg-text-xs);color:var(--gg-gray-400);margin-top:2px} /* Drop links */ .gg-pd__link{display:flex;align-items:center;gap:var(--gg-sp-3);padding:10px var(--gg-sp-4);font-family:var(--gg-font-head);font-size:var(--gg-text-sm);font-weight:500;color:var(--gg-gray-600);transition:all .15s ease} .gg-pd__link i{font-size:16px;width:20px;text-align:center;color:var(--gg-gray-400);transition:color .15s ease} .gg-pd__link:hover{background:var(--gg-red-subtle);color:var(--gg-red)} .gg-pd__link:hover i{color:var(--gg-red)} .gg-pd__link-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Count badge — refined "circle pill" design. • Pinned right via the label's flex:1 + margin-left:auto insurance. • Solid red (no gradient — cleaner against both white popover and the user-rail's tinted backgrounds). • Inner highlight + tight drop shadow gives premium "lifted button" depth without being loud. • Single digit → perfect 22x22 circle. Multi-digit → soft pill. • Hover: deepens to red-deep with stronger shadow. • Rail-active item: inverts to white bg with red text. */ .gg-pd__count{ display:inline-flex; align-items:center;justify-content:center; margin-left:auto;flex-shrink:0; min-width:22px;height:22px; padding:0 7px; background:var(--gg-red); color:var(--gg-white); font-family:var(--gg-font-head); font-size:11px;font-weight:700; border-radius:999px; line-height:1;letter-spacing:.02em; box-shadow: 0 2px 5px rgba(237,41,56,.38), 0 0 0 1px rgba(237,41,56,.08), inset 0 1px 0 rgba(255,255,255,.24); transition:background .18s ease, box-shadow .18s ease, transform .18s ease; } .gg-pd__link:hover .gg-pd__count{ background:var(--gg-red-deep); box-shadow: 0 3px 8px rgba(237,41,56,.5), 0 0 0 1px rgba(237,41,56,.12), inset 0 1px 0 rgba(255,255,255,.24); transform:scale(1.06); } .gg-pd__link.is-active .gg-pd__count{ background:var(--gg-white); color:var(--gg-red-deep); box-shadow: 0 1px 3px rgba(15,23,42,.1), 0 0 0 1px rgba(237,41,56,.16); } .gg-pd__div{height:1px;background:var(--gg-gray-100)} .gg-pd__link--danger:hover{background:#FEF2F2;color:var(--gg-error)} .gg-pd__link--danger:hover i{color:var(--gg-error)} /* --- GG-PD: End --- */ /* ═══════════════════════════════════════════ GG-BS — Categories Bottom Sheet (mobile only) ═══════════════════════════════════════════ */ /* --- GG-BS: Start --- */ .gg-bs__overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:calc(var(--gg-z-modal) + 5);pointer-events:none;transition:background .45s ease;display:none;-webkit-backface-visibility:hidden;backface-visibility:hidden} .gg-bs__overlay--open{background:rgba(0,0,0,.5);pointer-events:all;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .gg-bs{position:fixed;bottom:0;left:0;right:0;max-height:65vh;background:var(--gg-white);z-index:calc(var(--gg-z-modal) + 10);border-radius:var(--gg-r-xl) var(--gg-r-xl) 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.15);transform:translate3d(0,100%,0);transition:transform .5s cubic-bezier(.32,.72,0,1);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:70px;display:none;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden} .gg-bs--open{transform:translate3d(0,0,0)} .gg-bs:not(.gg-bs--open){transition:transform .4s cubic-bezier(.5,0,.75,0)} .gg-bs__handle{display:flex;justify-content:center;padding:12px 0 6px;position:sticky;top:0;background:var(--gg-white);z-index:1} .gg-bs__handle-bar{width:40px;height:4px;background:var(--gg-gray-300);border-radius:4px} /* gg-bs__close: close button top-right */ .gg-bs__close{position:absolute;top:12px;right:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);color:var(--gg-gray-400);font-size:16px;z-index:2;transition:all .2s ease} .gg-bs__close:hover{background:var(--gg-gray-100);color:var(--gg-gray-700)} .gg-bs__title{font-family:var(--gg-font-head);font-weight:700;font-size:var(--gg-text-lg);color:var(--gg-black);padding:4px var(--gg-sp-5) var(--gg-sp-4);border-bottom:var(--gg-border)} .gg-bs__list{padding:var(--gg-sp-3) 0} .gg-bs__cat{display:flex;align-items:center;gap:var(--gg-sp-3);padding:14px var(--gg-sp-5);font-family:var(--gg-font-head);font-size:var(--gg-text-base);font-weight:500;color:var(--gg-gray-600);transition:all .2s ease;-webkit-tap-highlight-color:transparent} .gg-bs__cat:active{background:var(--gg-red-subtle);transform:scale(.98)} .gg-bs__cat:hover{background:var(--gg-red-subtle);color:var(--gg-red)} .gg-bs__cat-ico{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);background:var(--gg-gray-50);flex-shrink:0;transition:all .2s ease} .gg-bs__cat-ico img{width:22px;height:22px;filter:grayscale(1) opacity(.5);transition:filter .2s ease} .gg-bs__cat:hover .gg-bs__cat-ico{background:var(--gg-red-light)} .gg-bs__cat:hover .gg-bs__cat-ico img{filter:grayscale(0) opacity(1)} .gg-bs__cat-name{flex:1} .gg-bs__cat-count{font-size:var(--gg-text-xs);color:var(--gg-gray-400);font-weight:400} .gg-bs__cat-arrow{font-size:14px;color:var(--gg-gray-300);transition:all .2s ease} .gg-bs__cat:hover .gg-bs__cat-arrow{color:var(--gg-red);transform:translateX(2px)} .gg-bs__cat--viewall{color:var(--gg-red);font-weight:600} .gg-bs__cat--viewall .gg-bs__cat-ico{background:var(--gg-red-light)} .gg-bs__cat--viewall .gg-bs__cat-arrow{color:var(--gg-red)} .gg-bs__cat--viewall .gg-bs__cat-ico i{font-size:18px;color:var(--gg-red)} /* --- GG-BS: End --- */ /* ═══════════════════════════════════════════ GG-MNV — Mobile Bottom Nav ═══════════════════════════════════════════ */ /* --- GG-MNV: Start --- */ .gg-mnv{display:none;position:fixed;bottom:0;left:0;right:0;z-index:var(--gg-z-modal);background:var(--gg-white);box-shadow:0 -2px 16px rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom,0);transition:transform .4s cubic-bezier(.32,.72,0,1);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform} .gg-mnv__inner{display:flex;align-items:stretch;justify-content:space-around;height:60px} .gg-mnv__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;color:var(--gg-gray-400);font-family:var(--gg-font-head);font-size:.5625rem;font-weight:600;transition:all var(--gg-dur-fast) ease;-webkit-tap-highlight-color:transparent;position:relative} .gg-mnv__item i{font-size:20px;transition:all var(--gg-dur-fast) ease} .gg-mnv__item:active{transform:scale(.9)} .gg-mnv__item:active i{transform:scale(1.15)} .gg-mnv__item--active{color:var(--gg-red)} .gg-mnv__item--active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--gg-red);border-radius:0 0 3px 3px} /* Nav bar slides down when sheet is open so dropdown isn't hidden */ .gg-mnv--hidden{transform:translate3d(0,100%,0)} /* --- GG-MNV: End --- */ /* ═══════════════════════════════════════════ GG-SM — Side Menu (NO search inside — single search is in header) ═══════════════════════════════════════════ */ /* --- GG-SM: Start --- */ /* Sidepanel + overlay share the same z-index tier as the categories bottom-sheet (.gg-bs / .gg-bs__overlay) so they land ABOVE floating fixed elements a page may add (e.g. search's .gg-srch__mact action pill at --gg-z-modal + 2). Bumped from +0/+1 to +5/+10 for parity. */ .gg-sm__overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:calc(var(--gg-z-modal) + 5);pointer-events:none;transition:background .5s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden} .gg-sm__overlay--open{background:rgba(0,0,0,.55);pointer-events:all;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .gg-sm{position:fixed;top:0;left:0;bottom:0;width:360px;max-width:90vw;background:var(--gg-white);z-index:calc(var(--gg-z-modal) + 10);transform:translate3d(-102%,0,0);transition:transform .4s cubic-bezier(.5,0,.75,0);will-change:transform;display:flex;flex-direction:column;box-shadow:8px 0 60px rgba(0,0,0,.2);-webkit-backface-visibility:hidden;backface-visibility:hidden} .gg-sm--open{transform:translate3d(0,0,0);transition:transform .55s cubic-bezier(.32,.72,0,1)} .gg-sm__head{display:flex;align-items:center;justify-content:space-between;padding:var(--gg-sp-5);flex-shrink:0;border-bottom:var(--gg-border)} .gg-sm__head-logo{height:36px;width:auto} .gg-sm__close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);color:var(--gg-gray-500);font-size:18px;transition:all .35s var(--gg-ease)} .gg-sm__close:hover{background:var(--gg-red-subtle);color:var(--gg-red);transform:rotate(90deg)} .gg-sm__nav{flex:1;overflow-y:auto;padding:var(--gg-sp-3) 0;-webkit-overflow-scrolling:touch} .gg-sm__nav::-webkit-scrollbar{width:3px} .gg-sm__nav::-webkit-scrollbar-thumb{background:var(--gg-gray-200);border-radius:10px} .gg-sm__label{font-family:var(--gg-font-head);font-size:var(--gg-text-2xs);font-weight:700;color:var(--gg-gray-400);letter-spacing:.1em;text-transform:uppercase;padding:var(--gg-sp-5) var(--gg-sp-5) var(--gg-sp-2);opacity:0;transition:opacity .4s ease} .gg-sm--open .gg-sm__label{opacity:1;transition-delay:.15s} .gg-sm__link{display:flex;align-items:center;gap:var(--gg-sp-3);padding:13px var(--gg-sp-5);margin:1px 0;font-family:var(--gg-font-head);font-size:var(--gg-text-base);font-weight:500;color:var(--gg-gray-600);border-left:3px solid transparent;transition:all .2s ease;opacity:0;transform:translateX(-24px)} .gg-sm__link-ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-md);font-size:17px;color:var(--gg-gray-500);background:var(--gg-gray-50);transition:all .2s ease;flex-shrink:0} .gg-sm__link-text{flex:1} .gg-sm__link-desc{display:block;font-size:var(--gg-text-2xs);font-weight:400;color:var(--gg-gray-400);margin-top:1px;font-family:var(--gg-font-body)} .gg-sm__link-arrow{font-size:14px;color:var(--gg-gray-300);opacity:0;transform:translateX(-4px);transition:all .2s ease} .gg-sm__link:hover{background:var(--gg-red-subtle);color:var(--gg-red);border-left-color:var(--gg-red)} .gg-sm__link:hover .gg-sm__link-ico{color:var(--gg-red);background:var(--gg-red-light)} .gg-sm__link:hover .gg-sm__link-desc{color:var(--gg-red-hover)} .gg-sm__link:hover .gg-sm__link-arrow{opacity:1;transform:translateX(0);color:var(--gg-red)} .gg-sm__link--active{color:var(--gg-red);background:var(--gg-red-subtle);border-left-color:var(--gg-red);font-weight:600} .gg-sm__link--active .gg-sm__link-ico{color:var(--gg-red);background:var(--gg-red-light)} .gg-sm__link--active .gg-sm__link-arrow{opacity:1;transform:translateX(0);color:var(--gg-red)} .gg-sm__acc-toggle{display:flex;align-items:center;gap:var(--gg-sp-3);padding:13px var(--gg-sp-5);margin:1px 0;width:100%;text-align:left;font-family:var(--gg-font-head);font-size:var(--gg-text-base);font-weight:500;color:var(--gg-gray-600);border-left:3px solid transparent;transition:all .2s ease;opacity:0;transform:translateX(-24px)} .gg-sm__acc-toggle .gg-sm__link-ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-md);font-size:17px;color:var(--gg-gray-500);background:var(--gg-gray-50);transition:all .2s ease;flex-shrink:0} .gg-sm__acc-toggle .gg-sm__link-text{flex:1} .gg-sm__acc-toggle .gg-sm__link-desc{display:block;font-size:var(--gg-text-2xs);font-weight:400;color:var(--gg-gray-400);margin-top:1px;font-family:var(--gg-font-body)} .gg-sm__acc-chevron{font-size:14px;color:var(--gg-gray-400);transition:transform .35s var(--gg-ease)} .gg-sm__acc-toggle:hover{background:var(--gg-red-subtle);color:var(--gg-red);border-left-color:var(--gg-red)} .gg-sm__acc-toggle:hover .gg-sm__link-ico{color:var(--gg-red);background:var(--gg-red-light)} .gg-sm__acc-toggle:hover .gg-sm__link-desc{color:var(--gg-red-hover)} .gg-sm__acc--open .gg-sm__acc-chevron{transform:rotate(180deg);color:var(--gg-red)} .gg-sm__acc--open .gg-sm__acc-toggle{color:var(--gg-red);border-left-color:var(--gg-red);background:var(--gg-red-subtle)} .gg-sm__acc--open .gg-sm__acc-toggle .gg-sm__link-ico{color:var(--gg-red);background:var(--gg-red-light)} .gg-sm__acc-body{max-height:0;overflow:hidden;transition:max-height .4s var(--gg-ease);background:var(--gg-gray-50)} .gg-sm__acc--open .gg-sm__acc-body{max-height:400px} .gg-sm__sub{display:flex;align-items:center;gap:var(--gg-sp-3);padding:10px var(--gg-sp-5) 10px 68px;font-family:var(--gg-font-head);font-size:var(--gg-text-sm);font-weight:500;color:var(--gg-gray-500);transition:all .2s ease} .gg-sm__sub i{font-size:14px;color:var(--gg-gray-400);transition:color .15s ease} .gg-sm__sub:hover{color:var(--gg-red);background:var(--gg-red-subtle)} .gg-sm__sub:hover i{color:var(--gg-red)} .gg-sm__sub--viewall{color:var(--gg-red)} /* Sub-link SVG icon (flaticon images with CSS filter) */ .gg-sm__sub-ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--gg-r-sm)} .gg-sm__sub-ico img{width:18px;height:18px;filter:grayscale(1) opacity(.45);transition:filter .2s ease} .gg-sm__sub:hover .gg-sm__sub-ico img{filter:grayscale(0) opacity(1)} .gg-sm--open .gg-sm__link,.gg-sm--open .gg-sm__acc-toggle{animation:gg-sm-slide .55s cubic-bezier(.32,.72,0,1) forwards} .gg-sm--open .gg-sm__nav>:nth-child(2){animation-delay:.10s}.gg-sm--open .gg-sm__nav>:nth-child(3){animation-delay:.14s}.gg-sm--open .gg-sm__nav>:nth-child(4){animation-delay:.18s}.gg-sm--open .gg-sm__nav>:nth-child(5){animation-delay:.22s}.gg-sm--open .gg-sm__nav>:nth-child(6){animation-delay:.26s}.gg-sm--open .gg-sm__nav>:nth-child(7){animation-delay:.30s}.gg-sm--open .gg-sm__nav>:nth-child(8){animation-delay:.34s}.gg-sm--open .gg-sm__nav>:nth-child(9){animation-delay:.38s}.gg-sm--open .gg-sm__nav>:nth-child(10){animation-delay:.42s}.gg-sm--open .gg-sm__nav>:nth-child(11){animation-delay:.46s} @keyframes gg-sm-slide{0%{opacity:0;transform:translateX(-24px)}100%{opacity:1;transform:translateX(0)}} .gg-sm__divider{height:1px;background:var(--gg-gray-100);margin:var(--gg-sp-3) var(--gg-sp-5)} .gg-sm__btns{display:none;flex-direction:column;gap:var(--gg-sp-2);padding:var(--gg-sp-4) var(--gg-sp-5);flex-shrink:0;border-top:var(--gg-border)} .gg-sm__btn{display:flex;align-items:center;justify-content:center;gap:var(--gg-sp-2);width:100%;padding:12px;font-family:var(--gg-font-head);font-weight:600;font-size:var(--gg-text-sm);border-radius:var(--gg-r-lg);transition:all var(--gg-dur) var(--gg-ease)} .gg-sm__btn i{font-size:16px} .gg-sm__btn--red{color:var(--gg-white);background:linear-gradient(135deg,var(--gg-red),var(--gg-red-deep));box-shadow:0 2px 8px rgba(237,41,56,.25)} .gg-sm__btn--dark{color:var(--gg-white);background:var(--gg-black);box-shadow:0 2px 6px rgba(0,0,0,.15)} .gg-sm__foot{opacity:0;transition:opacity .5s ease .35s;border-top:var(--gg-border);padding:var(--gg-sp-4) var(--gg-sp-5);flex-shrink:0;background:var(--gg-gray-50)} .gg-sm--open .gg-sm__foot{opacity:1} .gg-sm__contact{display:flex;flex-direction:column;gap:var(--gg-sp-3);margin-bottom:var(--gg-sp-4)} .gg-sm__contact-link{display:inline-flex;align-items:center;gap:var(--gg-sp-2);font-size:var(--gg-text-xs);color:var(--gg-gray-500);transition:all var(--gg-dur-fast) ease} .gg-sm__contact-link i{font-size:14px;color:var(--gg-gray-400)} .gg-sm__contact-link:hover{color:var(--gg-red)} .gg-sm__contact-link:hover i{color:var(--gg-red)} .gg-sm__socials{display:flex;align-items:center;gap:6px} .gg-sm__soc{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--gg-r-md);color:var(--gg-gray-400);font-size:15px;transition:all var(--gg-dur-fast) ease} .gg-sm__soc:hover{color:var(--gg-red);background:var(--gg-red-subtle)} .gg-sm__copy{margin-top:var(--gg-sp-3);padding-top:var(--gg-sp-3);border-top:1px solid var(--gg-gray-200);font-size:.625rem;color:var(--gg-gray-400);font-family:var(--gg-font-head)} /* --- GG-SM: End --- */ /* ═══════════════════════════════════════════ GG-SO — Search Overlay Desktop: full-screen blur overlay Mobile: full-screen white takeover No borders · blur bg · skeleton loading · premium ═══════════════════════════════════════════ */ /* --- GG-SO: Start --- */ /* gg-so: overlay container */ .gg-so{position:fixed;inset:0;z-index:calc(var(--gg-z-modal) + 20);background:rgba(255,255,255,.85);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);-webkit-backface-visibility:hidden;backface-visibility:hidden} .gg-so--open{opacity:1;visibility:visible} /* gg-so__inner: centered content — extra top padding for browser bar clearance */ .gg-so__inner{max-width:680px;margin:0 auto;padding:12vh var(--gg-sp-6) var(--gg-sp-0)} /* gg-so__top: search input row */ .gg-so__top{display:flex;align-items:center;gap:var(--gg-sp-4);margin-top:var(--gg-sp-8);margin-bottom:var(--gg-sp-8)} /* gg-so__back: mobile back arrow */ .gg-so__back{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);color:var(--gg-gray-600);font-size:20px;flex-shrink:0;transition:all var(--gg-dur-fast) ease} .gg-so__back:hover{background:var(--gg-gray-100);color:var(--gg-black)} /* gg-so__input-wrap: input container */ .gg-so__input-wrap{flex:1;position:relative} /* gg-so__input-icon: search icon */ .gg-so__input-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--gg-gray-400);pointer-events:none;transition:color .2s ease} /* gg-so__input: search input — no border, 3D depth */ .gg-so__input{width:100%;height:60px;padding:0 56px 0 56px;font-family:var(--gg-font-head);font-size:var(--gg-text-lg);font-weight:500;color:var(--gg-gray-900);background:var(--gg-white);border:none;border-radius:var(--gg-r-xl);outline:none;transition:all .3s var(--gg-ease);box-shadow:0 4px 20px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04),inset 0 0 0 1.5px var(--gg-gray-100)} .gg-so__input:focus{box-shadow:0 8px 32px rgba(237,41,56,.08),0 2px 8px rgba(0,0,0,.04),inset 0 0 0 1.5px var(--gg-red-subtle)} .gg-so__input:focus ~ .gg-so__input-icon{color:var(--gg-red)} .gg-so__input::placeholder{color:var(--gg-gray-400);font-weight:400} /* gg-so__clear: clear input X */ .gg-so__clear{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:none;align-items:center;justify-content:center;border-radius:var(--gg-r-md);color:var(--gg-gray-400);font-size:14px;transition:all var(--gg-dur-fast) ease} .gg-so__clear:hover{background:var(--gg-gray-100);color:var(--gg-gray-700)} .gg-so__clear--show{display:flex} /* gg-so__close: desktop close — bold X with premium hover */ .gg-so__close{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);color:var(--gg-gray-400);font-size:20px;flex-shrink:0;transition:all .25s ease;background:var(--gg-white);box-shadow:0 2px 10px rgba(0,0,0,.05)} .gg-so__close i{font-weight:700} .gg-so__close:hover{background:var(--gg-red-subtle);color:var(--gg-red);box-shadow:0 4px 14px rgba(237,41,56,.08);transform:rotate(90deg)} /* gg-so__body: content area with fade-in */ .gg-so__body{animation:gg-so-fade .5s ease .15s both} @keyframes gg-so-fade{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}} /* gg-so__section: content group */ .gg-so__section{margin-bottom:var(--gg-sp-8)} .gg-so__section-head{margin-bottom:var(--gg-sp-3)} .gg-so__section-title{font-family:var(--gg-font-head);font-size:var(--gg-text-xs);font-weight:700;color:var(--gg-gray-400);letter-spacing:.08em;text-transform:uppercase} /* gg-so__tags: chip tags for recent/trending */ .gg-so__tags{display:flex;flex-wrap:wrap;gap:var(--gg-sp-2)} .gg-so__tag{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-family:var(--gg-font-head);font-size:var(--gg-text-xs);font-weight:500;color:var(--gg-gray-600);background:var(--gg-white);border-radius:var(--gg-r-lg);transition:all .2s ease;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.04)} .gg-so__tag i{font-size:13px;color:var(--gg-gray-400)} .gg-so__tag:hover{background:var(--gg-red-subtle);color:var(--gg-red);box-shadow:0 2px 8px rgba(237,41,56,.08)} .gg-so__tag:hover i{color:var(--gg-red)} /* gg-so__tag--trending: red-tinted trending chips */ .gg-so__tag--trending{background:var(--gg-red-light);color:var(--gg-red-deep)} .gg-so__tag--trending i{color:var(--gg-red)} .gg-so__tag--trending:hover{background:var(--gg-red-subtle)} /* gg-so__cats: category grid — no borders */ .gg-so__cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gg-sp-3)} .gg-so__cat{display:flex;flex-direction:column;align-items:center;gap:var(--gg-sp-2);padding:var(--gg-sp-4) var(--gg-sp-2);border-radius:var(--gg-r-xl);background:var(--gg-white);transition:all .25s ease;cursor:pointer;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.03)} .gg-so__cat:hover{background:var(--gg-red-subtle);transform:translateY(-3px);box-shadow:0 8px 20px rgba(237,41,56,.06)} .gg-so__cat-ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);background:var(--gg-gray-50);transition:background .2s ease} .gg-so__cat-ico img{width:26px;height:26px;filter:grayscale(.3) opacity(.65);transition:filter .2s ease} .gg-so__cat:hover .gg-so__cat-ico{background:var(--gg-red-light)} .gg-so__cat:hover .gg-so__cat-ico img{filter:grayscale(0) opacity(1)} .gg-so__cat-name{font-family:var(--gg-font-head);font-size:var(--gg-text-2xs);font-weight:600;color:var(--gg-gray-600)} .gg-so__cat:hover .gg-so__cat-name{color:var(--gg-red)} /* gg-so__cities: city location chips — no borders */ .gg-so__cities{display:flex;flex-wrap:wrap;gap:var(--gg-sp-2)} .gg-so__city{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;font-family:var(--gg-font-head);font-size:var(--gg-text-xs);font-weight:500;color:var(--gg-gray-600);background:var(--gg-white);border-radius:var(--gg-r-lg);transition:all .2s ease;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.04)} .gg-so__city i{font-size:12px;color:var(--gg-gray-400)} .gg-so__city:hover{background:var(--gg-red-subtle);color:var(--gg-red);box-shadow:0 2px 8px rgba(237,41,56,.08)} .gg-so__city:hover i{color:var(--gg-red)} /* gg-so__biz: featured businesses — multi-row grid, no borders */ .gg-so__biz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gg-sp-3)} .gg-so__biz{display:flex;align-items:center;gap:var(--gg-sp-3);padding:var(--gg-sp-3) var(--gg-sp-4);background:var(--gg-white);border-radius:var(--gg-r-xl);transition:all .25s ease;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.03)} .gg-so__biz:hover{background:var(--gg-red-subtle);transform:translateY(-1px);box-shadow:0 4px 12px rgba(237,41,56,.06)} .gg-so__biz-logo{width:42px;height:42px;border-radius:var(--gg-r-lg);background:var(--gg-gray-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} .gg-so__biz-logo img{width:100%;height:100%;object-fit:cover} .gg-so__biz-info{flex:1;min-width:0} .gg-so__biz-name{font-family:var(--gg-font-head);font-weight:600;font-size:var(--gg-text-sm);color:var(--gg-gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gg-so__biz:hover .gg-so__biz-name{color:var(--gg-red)} .gg-so__biz-meta{font-size:var(--gg-text-2xs);color:var(--gg-gray-400);display:flex;align-items:center;gap:4px;margin-top:2px} .gg-so__biz-star{color:#F59E0B} /* gg-so__results: filtered results when typing */ .gg-so__results{display:none} .gg-so__results--show{display:block} .gg-so__result{display:flex;align-items:center;gap:var(--gg-sp-3);padding:14px 0;border-bottom:1px solid var(--gg-gray-50);transition:all .15s ease;cursor:pointer} .gg-so__result:last-child{border-bottom:none} .gg-so__result:hover,.gg-so__result--focused{padding-left:var(--gg-sp-3);padding-right:var(--gg-sp-3);margin:0 calc(var(--gg-sp-3) * -1);background:var(--gg-red-subtle);border-radius:var(--gg-r-lg);border-color:transparent} .gg-so__result--focused .gg-so__result-ico{background:var(--gg-red-light);color:var(--gg-red)} .gg-so__result--focused .gg-so__result-title{color:var(--gg-red)} .gg-so__result--focused .gg-so__result-type{background:var(--gg-red-light);color:var(--gg-red)} .gg-so__result-ico{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--gg-r-lg);background:var(--gg-gray-50);flex-shrink:0;font-size:17px;color:var(--gg-gray-500);transition:all .15s ease} .gg-so__result:hover .gg-so__result-ico{background:var(--gg-red-light);color:var(--gg-red)} .gg-so__result-text{flex:1} .gg-so__result-title{font-family:var(--gg-font-head);font-size:var(--gg-text-sm);font-weight:500;color:var(--gg-gray-800)} .gg-so__result:hover .gg-so__result-title{color:var(--gg-red)} .gg-so__result-sub{font-size:var(--gg-text-2xs);color:var(--gg-gray-400);margin-top:2px} .gg-so__result-type{font-family:var(--gg-font-head);font-size:var(--gg-text-2xs);font-weight:600;color:var(--gg-gray-400);padding:4px 10px;border-radius:var(--gg-r-md);background:var(--gg-gray-50);white-space:nowrap} .gg-so__result:hover .gg-so__result-type{background:var(--gg-red-light);color:var(--gg-red)} /* gg-so__skeleton: loading skeleton */ .gg-so__skeleton{display:none;padding:var(--gg-sp-4) 0} .gg-so__skeleton--show{display:block} .gg-so__skel-row{display:flex;align-items:center;gap:var(--gg-sp-3);padding:12px 0} .gg-so__skel-circle{width:40px;height:40px;border-radius:var(--gg-r-lg);background:var(--gg-gray-100);flex-shrink:0;animation:gg-so-shimmer 1.5s ease infinite} .gg-so__skel-lines{flex:1} .gg-so__skel-line{height:10px;border-radius:var(--gg-r-sm);background:var(--gg-gray-100);animation:gg-so-shimmer 1.5s ease infinite} .gg-so__skel-line--short{width:45%;margin-top:8px} .gg-so__skel-line--long{width:75%} @keyframes gg-so-shimmer{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}} /* gg-so__empty: no results state */ .gg-so__empty{text-align:center;padding:var(--gg-sp-8) 0;display:none} .gg-so__empty--show{display:block} .gg-so__empty i{font-size:48px;color:var(--gg-gray-200);margin-bottom:var(--gg-sp-4);display:block} .gg-so__empty-title{font-family:var(--gg-font-head);font-size:var(--gg-text-md);font-weight:600;color:var(--gg-gray-600);margin-bottom:var(--gg-sp-1)} .gg-so__empty-text{font-size:var(--gg-text-sm);color:var(--gg-gray-400)} /* Default state visibility */ .gg-so__default--hide{display:none} /* gg-so__section-action: clear recent */ .gg-so__section-action{font-family:var(--gg-font-head);font-size:var(--gg-text-xs);font-weight:600;color:var(--gg-red);transition:opacity .15s ease;float:right} .gg-so__section-action:hover{opacity:.7} /* ── Live-result extras ────────────────────────────────────────────── Suggestions now carry real imagery (category icons, business logos, listing covers) where the record has one, and fall back to the type glyph where it doesn't. Both share the same 40px slot so rows never jump as results stream in. */ .gg-so__result-ico img{width:100%;height:100%;object-fit:cover;border-radius:inherit} .gg-so__result-ico:has(img){background:var(--gg-gray-50);overflow:hidden} /* Verified tick in front of a result subtitle */ .gg-so__result-verified{color:var(--gg-red);font-size:12px;margin-right:2px} /* "Search for …" — the always-last escape hatch to the full results page */ .gg-so__result--all .gg-so__result-title{color:var(--gg-gray-600)} .gg-so__result--all .gg-so__result-ico{background:var(--gg-red-light);color:var(--gg-red)} /* Recent-search chips render as