/* ============ DESIGN TOKENS (dark luxury) ============ */ :root { --brand: #d9b14e; /* luxe gold accent */ --brand-dark: #c0922f; --brand-tint: rgba(217,177,78,.14); --ink: #f3efe6; /* warm off-white text */ --ink-soft: #a59f93; --line: rgba(255,255,255,.10); --bg: #0c0b10; /* near-black */ --bg-soft: #15131b; --surface: #1b1922; /* raised cards */ --radius: 16px; --shadow-sm: 0 2px 8px rgba(0,0,0,.35); --shadow-md: 0 10px 30px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.6); --gold-grad: linear-gradient(135deg, #f0d27a, #d9b14e 55%, #b8902f); --max: 1200px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; width: 100%; max-width: 100%; /* overflow-x: CLIP (not hidden) stops any stray horizontal overflow / sideways swipe on mobile without making a scroll container — so position:sticky on the header keeps working, and because it's -x only, downward dropdowns (mobile menu, search suggestions, location picker) are unaffected. */ overflow-x: clip; } /* Media never forces the layout wider than its column (mobile overflow guard). */ img, svg, video, iframe { max-width: 100%; } a { text-decoration: none; color: inherit; } ul { list-style: none; } input { color: var(--ink); background: transparent; } input::placeholder { color: var(--ink-soft); opacity: 1; } /* Kill the white autofill box browsers force on inputs */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--ink); transition: background-color 9999s ease; } .serif { font-family: 'Playfair Display', Georgia, serif; } .ico { width: 20px; height: 20px; fill: currentColor; flex: none; } .container { max-width: var(--max); margin: 0 auto; padding: 0 20px; } /* ============ BUTTONS ============ */ .btn { font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 12px; padding: 0 22px; height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn--primary { background: var(--gold-grad); color: #1a1206; } .btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(217,177,78,.3); } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); gap: 9px; } .btn--ghost .ico { width: 20px; height: 20px; color: #25d366; } .btn--ghost:hover { border-color: rgba(217,177,78,.5); background: rgba(255,255,255,.03); transform: translateY(-1px); } /* ============ HEADER ============ */ .header { position: sticky; top: 0; z-index: 50; background: rgba(12,11,16,.85); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s ease; will-change: transform; } .header.is-stuck { box-shadow: 0 8px 30px rgba(0,0,0,.5); } /* Hide-on-scroll-down (smart sticky header) */ .header.is-hidden { transform: translateY(-100%); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 72px; } .logo { display: flex; align-items: center; flex: none; } .logo__text { font-weight: 800; font-size: 26px; letter-spacing: -.5px; color: #fff; } .logo__text b { color: var(--brand); font-weight: 800; } .locwrap { position: relative; flex: none; } .location { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); padding: 8px 12px; border-radius: 12px; transition: background .15s ease; } .location:hover { background: var(--surface); } .location .ico { color: var(--brand); } .location__text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .location__text strong { font-size: 14px; } .location__text small { font-size: 12px; color: var(--ink-soft); } .location__caret { width: 16px; height: 16px; color: var(--ink-soft); transition: transform .2s ease; } .location[aria-expanded="true"] .location__caret { transform: rotate(180deg); color: var(--brand); } /* Location dropdown */ .locmenu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 14px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .locmenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .locmenu__head strong { font-size: 14px; display: block; } .locmenu__head p { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; } .locmenu__head em { color: var(--brand); font-style: italic; } .locmenu__search { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; height: 42px; } .locmenu__search:focus-within { border-color: rgba(217,177,78,.5); } .locmenu__search .ico { width: 18px; height: 18px; color: var(--ink-soft); } .locmenu__search input { flex: 1; border: 0; outline: none; font: inherit; font-size: 14px; } .locmenu__list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; } .locmenu__list::-webkit-scrollbar { width: 6px; } .locmenu__list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .locmenu__list button { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; padding: 11px 12px; border-radius: 10px; transition: background .12s ease; } .locmenu__list button:hover { background: var(--bg); } .locmenu__list button i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-soft); } .locdot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; } .locmenu__list button:hover .locdot { background: var(--brand); } .locmenu__list button.is-current { background: var(--brand-tint); color: var(--brand); } .locmenu__list button.is-current .locdot { background: var(--brand); } .locmenu__list button.is-current i { color: var(--brand); } .locmenu__empty { font-size: 13px; color: var(--ink-soft); padding: 14px 6px 6px; text-align: center; } .locmenu__empty a { color: var(--brand); font-weight: 600; } .search { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; height: 46px; transition: border-color .15s ease, box-shadow .15s ease; } .search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .search .ico { color: var(--ink-soft); } .search input { flex: 1; border: 0; background: none; font: inherit; font-size: 15px; outline: none; } .actions { display: flex; align-items: stretch; gap: 10px; flex: none; } .contact { display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 15px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .contact .ico { width: 22px; height: 22px; } /* Call button */ .contact--call { background: var(--brand-tint); color: var(--brand); border: 1px solid rgba(217,177,78,.35); } .contact--call:hover { background: rgba(217,177,78,.22); transform: translateY(-1px); } .contact--call .ico { color: var(--brand); } .contact__text { display: flex; flex-direction: column; line-height: 1.15; } .contact__text small { font-size: 11px; font-weight: 600; opacity: .8; } .contact__text strong { font-size: 15px; letter-spacing: .2px; } /* WhatsApp button */ .contact--wa { background: #25d366; color: #fff; } .contact--wa:hover { background: #1ebe5a; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,211,102,.35); } .contact--wa .ico { width: 22px; height: 22px; } /* ============ SECONDARY NAV (hover menu) ============ */ .mainnav { border-top: 1px solid var(--line); background: rgba(12,11,16,.85); backdrop-filter: saturate(180%) blur(14px); } .mainnav__list { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; } .mainnav__link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13.5px; letter-spacing: .3px; padding: 8px 14px; border-radius: 10px; color: var(--ink); transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; white-space: nowrap; } .mainnav__link:hover { background: var(--brand-tint); color: var(--brand-dark); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .caret { width: 14px; height: 14px; transition: transform .2s ease; } .has-menu { position: relative; } .has-menu:hover > .mainnav__link { background: var(--brand-tint); color: var(--brand-dark); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .has-menu:hover .caret { transform: rotate(180deg); } /* Dropdown panel */ .dropdown { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 230px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .dropdown--grid { display: grid; grid-template-columns: 1fr 1fr; min-width: 340px; } .has-menu:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { padding: 10px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink); transition: background .12s ease; } .dropdown a:hover { background: var(--bg-soft); color: var(--brand-dark); } /* Mobile menu toggle */ .navtoggle { display: none; flex-direction: column; gap: 4px; flex: none; background: none; border: 0; cursor: pointer; padding: 8px; } .navtoggle span { width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: .2s; } .navtoggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .navtoggle.is-open span:nth-child(2) { opacity: 0; } .navtoggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ============ HERO ============ */ .hero { position: relative; padding-top: 40px; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 82% -10%, rgba(217,177,78,.18) 0%, transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(120,40,40,.22) 0%, transparent 55%), var(--bg); } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; padding-bottom: 30px; /* Fill the viewport (minus the sticky 122px header + hero top padding) so the trust bar below stays off-screen until you scroll. */ min-height: calc(100vh - 170px); } .hero__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(36px, 5.2vw, 60px); line-height: 1.06; font-weight: 700; letter-spacing: .2px; margin: 18px 0 16px; } .hero__title span { color: var(--brand); font-style: italic; } .hero__sub { font-size: 18px; color: var(--ink-soft); max-width: 480px; line-height: 1.55; } .hero__cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } /* Hero art */ .hero__art { position: relative; } .hero__art img { width: 100%; border-radius: 24px; display: block; box-shadow: var(--shadow-lg); object-fit: cover; /* Keep the model's face + jewellery in frame on tall screens */ object-position: 50% 22%; height: clamp(454px, 69vh, 691px); } /* ============ WHY LOCONTO ============ */ .why { padding: 72px 0; background: var(--bg-soft); } .why__head { text-align: center; max-width: 700px; margin: 0 auto 44px; } .why__head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; } .why__head h2 em { font-style: italic; color: var(--brand); } .why__head p { color: var(--ink-soft); font-size: 16px; margin-top: 12px; line-height: 1.6; } .why__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .why__card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .why__card:hover { transform: translateY(-4px); border-color: rgba(217,177,78,.45); box-shadow: var(--shadow-md); } .why__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; margin-bottom: 14px; background: var(--brand-tint); color: var(--brand); } .why__ico svg { width: 17px; height: 17px; } .why__title { font-size: 15px; font-weight: 700; line-height: 1.3; } .why__txt { color: var(--ink-soft); font-size: 13px; line-height: 1.55; margin-top: 8px; } /* ============ INTRO / SEO CONTENT ============ */ .intro { padding: 72px 0 8px; background: var(--bg); } /* Align the content to the same left/right edges as the profile cards */ .intro__inner { max-width: none; padding: 0 var(--rec-gutter); } .intro__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: .2px; position: relative; display: inline-block; padding-bottom: 16px; } .intro__title span { color: var(--ink-soft); font-weight: 600; } /* Gold hand-drawn underline */ .intro__title::after, .intro__sub::after { content: ''; position: absolute; left: 0; bottom: 0; width: 230px; height: 12px; background: url("data:image/svg+xml;utf8,") no-repeat; background-size: 100% 100%; } .intro p { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin-top: 22px; } .intro p strong { color: var(--brand); font-weight: 700; } .intro__sub { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; margin-top: 40px; line-height: 1.15; letter-spacing: .2px; position: relative; display: inline-block; padding-bottom: 16px; } .intro__sub::after { width: 230px; height: 12px; } /* ============ RECOMMENDED PROFILES (transform carousel) ============ */ :root { --rec-gutter: clamp(20px, 7vw, 110px); --rec-gap: 28px; } .rec { padding: 64px 0 48px; background: var(--bg); } .rec__head { padding: 0 var(--rec-gutter); margin-bottom: 26px; } .rec__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; } .rec__title span { color: var(--brand); font-style: italic; } .rec__sub { color: var(--ink-soft); font-size: 16px; margin-top: 8px; } .rec__desc { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin-top: 12px; max-width: none; } /* Wrap holds the viewport + the side-gutter arrows */ .rec__wrap { position: relative; padding: 0 var(--rec-gutter); } .rec__viewport { position: relative; overflow: hidden; padding: 18px 0; margin: 0 auto; } .rec__track { display: flex; gap: var(--rec-gap); transform: translate3d(0, 0, 0); will-change: transform; transition: transform .52s cubic-bezier(0.22, 1, 0.36, 1); } /* Compact overlay card (photo with title on it — Crave style) */ .reccard { position: relative; flex: 0 0 calc((100% - 2 * var(--rec-gap)) / 3); aspect-ratio: 1/1; border-radius: 18px; overflow: hidden; background-image: var(--img); background-size: cover; background-position: center top; background-clip: padding-box; border: 1px solid transparent; box-shadow: var(--shadow-sm); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s ease, border-color .4s ease; will-change: transform; } /* Dark blend overlay — inset:0 covers the full card edge-to-edge (no sub-pixel image bleed at the bottom). Matches the homepage profile-card (.procard) gradient style: opaque at the very bottom behind the name, easing to ~.82 then fully transparent by 60% so most of the photo stays visible. */ .reccard::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(to top, rgba(10,8,16,.9) 0%, rgba(10,8,16,.42) 22%, rgba(10,8,16,0) 46%); } .reccard__info { position: relative; z-index: 2; } .reccard:hover { transform: scale(1.04); box-shadow: var(--shadow-lg); border-color: rgba(217,177,78,.5); } .reccard__tag { position: absolute; top: 14px; left: 14px; z-index: 4; background: var(--gold-grad); color: #1a1206; font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px; } /* Default title (hidden on hover) */ .reccard__info { padding: 22px; transition: opacity .25s ease; } .reccard__name { font-size: 24px; font-weight: 800; letter-spacing: -.3px; text-shadow: 0 2px 12px rgba(0,0,0,.55); } .reccard__role { font-size: 13px; font-weight: 700; color: var(--brand); margin-top: 4px; } .reccard:hover .reccard__info { opacity: 0; } /* Hover detail panel (slides up) */ .reccard__detail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 64px 22px 22px; display: flex; flex-direction: column; gap: 7px; background: linear-gradient(to top, rgba(8,6,12,.88) 0%, rgba(8,6,12,.42) 48%, transparent 80%); transform: translateY(102%); opacity: 0; visibility: hidden; transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease, visibility .3s ease; } .reccard:hover .reccard__detail { transform: translateY(0); opacity: 1; visibility: visible; } .reccard__detail .reccard__name { font-size: 22px; } .reccard__bio { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.8); } .reccard__cta { margin-top: 8px; align-self: flex-start; height: 40px; padding: 0 20px; } .btn--light { background: #fff; color: #1a1206; } .btn--light:hover { background: var(--brand); transform: translateY(-1px); } /* Side-gutter arrows (never overlap the cards) */ .rec__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-md); transition: background .18s ease, color .18s ease, transform .18s ease, opacity .25s ease, visibility .25s; } .rec__nav svg { width: 24px; height: 24px; } .rec__nav:hover { background: var(--brand); color: #1a1206; transform: translateY(-50%) scale(1.08); } .rec__nav--prev { left: clamp(6px, 2vw, 38px); } .rec__nav--next { right: clamp(6px, 2vw, 38px); } .rec__nav.is-off { opacity: 0; visibility: hidden; pointer-events: none; } /* Swipe dots (mobile shows them prominently; also a nice nav on larger screens) */ .rec__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; padding: 0 var(--rec-gutter); } .rec__dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.25); transition: background .25s ease, width .25s ease; } .rec__dots button.is-active { background: var(--brand); width: 22px; border-radius: 99px; } /* ============ MEET OUR PROFESSIONALS ============ */ .pros { padding: 36px 0 72px; background: var(--bg); } .pros__head { text-align: left; max-width: none; margin: 0 0 44px; } .pros__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; } .pros__title span { color: var(--brand); font-style: italic; } .pros__head p { color: var(--ink-soft); font-size: 16px; margin-top: 12px; line-height: 1.6; } .pros__desc { font-size: 15px !important; line-height: 1.7 !important; } .pros__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); } .procard { position: relative; aspect-ratio: 3 / 4; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .procard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(217,177,78,.4); } .procard__media { position: absolute; inset: 0; overflow: hidden; } .procard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .procard:hover .procard__media img { transform: scale(1.06); } .procard__badge { position: absolute; top: 12px; left: 12px; z-index: 3; background: rgba(12,11,16,.78); backdrop-filter: blur(4px); color: var(--brand); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(217,177,78,.4); } /* Info overlay — only name + experience show by default; the rest rises on hover */ .procard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-height: 100%; padding: 14px; display: flex; flex-direction: column; gap: 5px; background: linear-gradient(to top, rgba(10,8,16,.9) 0%, rgba(10,8,16,.5) 55%, rgba(10,8,16,0) 100%); transition: background .35s ease; } .procard:hover .procard__body { background: linear-gradient(to top, rgba(10,8,16,.94) 0%, rgba(10,8,16,.66) 58%, rgba(10,8,16,0) 100%); } .procard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .procard__top h3 { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.15; } .procard__rating { font-size: 13px; font-weight: 700; color: var(--brand); background: var(--brand-tint); padding: 3px 10px; border-radius: 999px; flex: none; } .procard__price { font-size: 16px; font-weight: 800; color: var(--brand); margin-top: -2px; letter-spacing: .2px; } .procard__price small { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); } .procard__bio { font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .procard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .procard__tags span { font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); padding: 4px 10px; border-radius: 999px; } /* Hidden by default, revealed on hover */ .procard__rating, .procard__bio, .procard__tags { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px); transition: opacity .3s ease, max-height .4s ease, transform .3s ease; } .procard:hover .procard__rating { opacity: 1; max-height: 40px; transform: none; } .procard:hover .procard__bio { opacity: 1; max-height: 44px; transform: none; } .procard:hover .procard__tags { opacity: 1; max-height: 96px; transform: none; } /* Touch devices have no hover — show the full details so nothing is hidden */ @media (hover: none) { .procard__rating, .procard__bio, .procard__tags { opacity: 1; max-height: none; transform: none; } } /* Professionals grid: 4 (desktop) → 3 (tablet) → 2 (mobile) */ @media (max-width: 1023px) { .pros__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .pros__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* Mobile: stack the card — photo on top, details in a clean panel below it (no overlay on the face, which looked messy on small screens). */ .procard { position: static; aspect-ratio: auto; display: flex; flex-direction: column; } .procard__media { position: relative; inset: auto; aspect-ratio: 3 / 4; } /* bigger, image-led photo */ .procard__body { position: static; z-index: auto; background: none; padding: 12px; gap: 6px; } .procard:hover .procard__body { background: none; } /* Everything visible by default and back to readable on-surface colours */ .procard__rating, .procard__bio, .procard__tags { opacity: 1; max-height: none; transform: none; } .procard__top { gap: 6px; } .procard__top h3 { font-size: 15px; line-height: 1.2; color: var(--ink); } .procard__rating { font-size: 11px; padding: 2px 8px; } .procard__price { font-size: 13.5px; } .procard__price small { font-size: 10.5px; color: var(--ink-soft); } /* Image-led card on mobile: hide the bio + service tags so the photo leads and the visitor taps through to the profile to read the full details. */ .procard__bio, .procard__tags { display: none; } .procard__badge { font-size: 10px; padding: 3px 8px; top: 9px; left: 9px; } } /* ============ SERVICE CATEGORIES (dark, District-style) ============ */ .cats-section { background: var(--bg-soft); color: var(--ink); padding: 72px 0; } .cats-section__head { text-align: left; margin-bottom: 36px; } .cats-section__head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: .2px; } .cats-section__head h2 em { font-style: italic; color: var(--brand); } .cats-section__head p { color: var(--ink-soft); margin-top: 8px; font-size: 16px; } .cats-section__desc { max-width: none; margin: 14px 0 0 !important; font-size: 15px !important; line-height: 1.7; } .vibe-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; gap: 16px; } .vibe { position: relative; border-radius: 20px; overflow: hidden; background-image: linear-gradient(to top, rgba(10,6,16,.85) 8%, rgba(10,6,16,.15) 55%, rgba(10,6,16,.35)), var(--img); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 18px; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 8px 24px rgba(0,0,0,.3); } .vibe--tall { grid-row: span 2; } /* Short tiles are wide but only 150px tall: anchor the crop near the top so the subject (face + upper body) is framed properly instead of a mid-torso slice. */ .vibe:not(.vibe--tall) { background-position: center 18%; } .vibe:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.45); } .vibe__label { font-weight: 800; font-size: 26px; line-height: 1.02; letter-spacing: -.5px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); } .vibe--tall .vibe__label { font-size: 30px; } /* ============ AREAS WE SERVE (Snabbit map-style) ============ */ .areas { padding: 72px 0; background: var(--bg-soft); } .areas__head { text-align: left; max-width: none; margin: 0 0 44px; } .areas__head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; } .areas__head h2 em { font-style: italic; color: var(--brand); } .areas__head p { color: var(--ink-soft); font-size: 16px; margin-top: 12px; line-height: 1.6; } .areas__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; } /* Keep both columns a true 50/50 — stops the text column's long landmark lines from stealing width and shrinking the map. */ .areas__map, .areas__copy { min-width: 0; } .areas__map { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); min-height: 480px; } .areas__map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; background: #11141b; z-index: 1; } /* Leaflet gold pulsing pins */ .leaf-pin { position: relative; } .leaf-pin__dot { position: absolute; inset: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 3px solid #0c0b10; box-shadow: 0 4px 10px rgba(0,0,0,.5); } .leaf-pin__dot::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--brand); opacity: .6; animation: ping 2.2s ease-out infinite; } @keyframes ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } } .areas__tag { display: inline-block; background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; } .areas__copy h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: .2px; margin: 16px 0 10px; } .areas__copy h2 strong { color: var(--brand); font-weight: 700; } .areas__copy > p { color: var(--ink-soft); font-size: 16px; max-width: 440px; } .areas__check { display: flex; gap: 10px; margin: 22px 0; max-width: 440px; } .areas__check input { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; height: 48px; font: inherit; font-size: 15px; outline: none; background: var(--surface); } .areas__check input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } /* Coverage index — "table of contents" style locality list */ .acov { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; } .acov__item { display: flex; align-items: center; gap: 7px; padding: 11px 8px; position: relative; cursor: pointer; border-bottom: 1px solid var(--line); transition: padding .25s ease, background .2s ease; outline: none; } .acov__item::before { content: ''; position: absolute; left: -6px; right: -6px; top: 0; bottom: 0; background: linear-gradient(90deg, var(--brand-tint), transparent 70%); opacity: 0; border-radius: 8px; transition: opacity .25s ease; z-index: -1; } .acov__item:hover::before, .acov__item:focus-visible::before, .acov__item.is-active::before { opacity: 1; } .acov__item:hover, .acov__item:focus-visible { padding-left: 14px; } .acov__item.is-active { padding-left: 14px; } .acov__item.is-active::after { content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px; background: var(--brand); border-radius: 3px; } .acov__no { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 15px; font-weight: 700; color: var(--brand); min-width: 19px; line-height: 1; flex: none; transition: transform .25s ease; } .acov__item:hover .acov__no, .acov__item.is-active .acov__no { transform: scale(1.15); } .acov__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .acov__name { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--ink); text-decoration: none; transition: color .2s ease; display: block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } a.acov__name:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .acov__item:hover .acov__name, .acov__item.is-active .acov__name { color: var(--brand); } .acov__sub { font-size: 12px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acov__sub::before { content: '📍 '; } .acov__live { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: #4ad07f; white-space: nowrap; } .acov__live i { width: 7px; height: 7px; border-radius: 50%; background: #4ad07f; position: relative; box-shadow: 0 0 0 0 rgba(74,208,127,.55); animation: live-pulse 2s ease-out infinite; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,208,127,.55); } 70% { box-shadow: 0 0 0 7px rgba(74,208,127,0); } 100% { box-shadow: 0 0 0 0 rgba(74,208,127,0); } } .acov__result { margin: -8px 0 14px; font-size: 13.5px; font-weight: 600; color: var(--brand-dark); max-width: 440px; } .acov__empty { margin: 14px 0 0; padding: 12px 14px; font-size: 14px; color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; } .acov__empty a, .acov__more a { color: var(--brand-dark); font-weight: 700; } .acov__more { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; } /* ============ FLOATING OFFER CHIP ============ */ .offerchip { position: fixed; right: 22px; bottom: 22px; z-index: 1000; display: flex; align-items: center; gap: 4px; padding: 7px 8px 7px 14px; border-radius: 999px; border: 1px solid rgba(217,177,78,.42); background: rgba(20,18,26,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 0 4px rgba(217,177,78,.05); animation: offerchip-in .5s ease both .9s; } .offerchip.is-hidden { display: none; } .offerchip__link { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 14px; font-weight: 600; } .offerchip__spark { width: 18px; height: 18px; flex: none; color: var(--brand); filter: drop-shadow(0 2px 6px rgba(217,177,78,.5)); animation: offer-twinkle 3.5s ease-in-out infinite; } .offerchip__text b { color: var(--brand); } .offerchip__code { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--brand); background: var(--brand-tint); border: 1px dashed rgba(217,177,78,.5); padding: 3px 9px; border-radius: 8px; } .offerchip__close { width: 26px; height: 26px; flex: none; border: 0; cursor: pointer; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color .2s ease, background .2s ease; } .offerchip__close:hover { color: var(--ink); background: rgba(255,255,255,.08); } @keyframes offerchip-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes offer-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.88) rotate(-8deg); opacity: .8; } } @media (prefers-reduced-motion: reduce) { .offerchip { animation: none; } .offerchip__spark { animation: none; } } /* ============ FAQ ============ */ .faq { padding: 72px 0; background: var(--bg); } .faq__head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .faq__head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; } .faq__head h2 em { font-style: italic; color: var(--brand); } .faq__head p { color: var(--ink-soft); font-size: 16px; margin-top: 12px; } .faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; max-width: 1040px; margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { list-style: none; cursor: pointer; position: relative; padding: 17px 34px 17px 0; font-size: 15px; font-weight: 600; color: var(--ink); transition: color .2s ease; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--brand); line-height: 1; transition: transform .2s ease; } .faq__item[open] summary::after { content: '–'; } .faq__item summary:hover { color: var(--brand); } .faq__item p { margin: 0; padding: 0 30px 18px 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; } /* ============ REVIEWS ============ */ .reviews { padding: 72px 0; background: var(--bg-soft); } .reviews__head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .reviews__head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; } .reviews__head h2 em { font-style: italic; color: var(--brand); } .reviews__head p { color: var(--ink-soft); font-size: 16px; margin-top: 12px; } .reviews__rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--ink-soft); } .reviews__rating strong { color: var(--ink); font-size: 16px; } .reviews__stars { color: var(--brand); letter-spacing: 2px; } .reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .review { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .review:hover { transform: translateY(-4px); border-color: rgba(217,177,78,.4); box-shadow: var(--shadow-md); } .review__stars { color: var(--brand); letter-spacing: 2px; font-size: 15px; } .review__text { margin: 14px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink); flex: 1; } .review__person { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .review__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--gold-grad); color: #1a1206; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; } .review__person > span:last-child { display: flex; flex-direction: column; } .review__name { font-weight: 700; font-size: 15px; } .review__loc { color: var(--ink-soft); font-size: 13px; margin-top: 2px; } /* Reviews slider dots (mobile only — hidden on desktop) */ .reviews__dots { display: none; justify-content: center; gap: 8px; margin-top: 22px; } .reviews__dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.25); transition: background .25s ease, width .25s ease; } .reviews__dots button.is-active { background: var(--brand); width: 22px; border-radius: 99px; } /* ============ MAP ATTRIBUTION (consistent rounded pill) ============ */ /* Float the Leaflet credit off the corner so its rounded look never changes with the map width — always the same soft pill. */ .areas__map .leaflet-control-attribution { margin: 0 8px 8px 0 !important; border-radius: 8px !important; padding: 2px 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,.35); background: rgba(255,255,255,.92) !important; } /* ============ FOOTER ============ */ .footer { background: var(--bg); border-top: 1px solid var(--line); } .footer__inner { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.4fr; gap: 40px; padding: 60px 20px 48px; } /* Tablet / small-desktop (~1024px): stack the brand on its own row and lay the four link columns out evenly so nothing gets cramped. */ @media (max-width: 1100px) { .footer__inner { grid-template-columns: repeat(4, 1fr); gap: 38px 28px; } .footer__brand { grid-column: 1 / -1; } .footer__blurb { max-width: 620px; } } .footer__logo { display: inline-flex; margin-bottom: 14px; } .footer__logo .logo__text { font-size: 24px; } .footer__blurb { color: var(--ink-soft); font-size: 14px; line-height: 1.65; max-width: 320px; } .footer__social { display: flex; gap: 10px; margin-top: 18px; } .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-soft); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; } .footer__social a:hover { color: #1a1206; background: var(--gold-grad); border-color: transparent; transform: translateY(-2px); } .footer__title { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .footer__col a { color: var(--ink-soft); font-size: 14px; transition: color .2s ease, padding-left .2s ease; } .footer__col a:hover { color: var(--brand); padding-left: 3px; } .footer__contact ul { gap: 14px; } .footer__contact li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); } .footer__contact a { color: var(--ink); } .footer__contact a:hover { color: var(--brand); } .footer__ico { width: 18px; height: 18px; flex: none; color: var(--brand); } .footer__cta { display: inline-flex; margin-top: 20px; height: 44px; align-items: center; padding: 0 20px; border-radius: 12px; font-weight: 700; } .footer__bar { border-top: 1px solid var(--line); } .footer__bar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px; font-size: 13px; color: var(--ink-soft); } .footer__legal { display: flex; gap: 22px; flex-wrap: wrap; } .footer__legal a { color: var(--ink-soft); transition: color .2s ease; } .footer__legal a:hover { color: var(--brand); } /* ============ PROFILE DETAIL PAGE ============ */ .pf-page { background: var(--bg); } .pf-header { justify-content: space-between; } .pf-back { height: 40px; padding: 0 16px; } .pf { padding: 28px 0 80px; } .pf-crumb { font-size: 13px; color: var(--ink-soft); margin-bottom: 22px; } .pf-crumb a { color: var(--ink-soft); } .pf-crumb a:hover { color: var(--brand); } .pf-crumb span { color: var(--brand); } /* Top: gallery + info */ .pf-top { display: grid; grid-template-columns: 0.5fr 1fr; gap: 36px; align-items: stretch; } .pf-gallery { height: 100%; } .pf-slider { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); height: 100%; min-height: 440px; background: #11141b; outline: none; } .pf-slider__track { display: flex; height: 100%; min-height: 0; transition: transform .42s cubic-bezier(0.22,1,0.36,1); } .pf-slide { flex: 0 0 100%; height: 100%; position: relative; } .pf-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; cursor: zoom-in; } /* Fullscreen lightbox */ .pf-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.93); padding: 24px; } .pf-lightbox.is-open { display: flex; } .pf-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.6); } .pf-lb__close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; } .pf-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; } .pf-lb__close:hover, .pf-lb__nav:hover { background: var(--brand); color: #1a1206; } .pf-lb__prev { left: 18px; } .pf-lb__next { right: 18px; } @media (max-width: 560px) { .pf-lb__nav { width: 42px; height: 42px; font-size: 26px; } .pf-lb__prev { left: 8px; } .pf-lb__next { right: 8px; } .pf-lb__close { top: 12px; right: 12px; } } .pf-chip { position: absolute; z-index: 4; top: 14px; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); } .pf-chip--verified { left: 14px; background: rgba(74,208,127,.92); color: #06210f; } .pf-chip--loc { right: 14px; background: rgba(20,18,26,.82); color: var(--ink); border: 1px solid var(--line); } /* Navigation arrows (desktop) */ .pf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(20,18,26,.62); color: #fff; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s ease, color .2s ease; } .pf-arrow:hover { background: var(--brand); color: #1a1206; } .pf-arrow--prev { left: 12px; padding-right: 2px; } .pf-arrow--next { right: 12px; padding-left: 2px; } /* Position dots */ .pf-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4; display: flex; justify-content: center; gap: 7px; } .pf-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s ease, background .2s ease; } .pf-dots button.is-active { width: 20px; border-radius: 4px; background: var(--brand); } .pf-tagline { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand); } .pf-name { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; line-height: 1.05; margin: 0 0 10px; } .pf-role { color: var(--ink-soft); font-size: 16px; } .pf-role strong { color: var(--ink); } .pf-blurb { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 52ch; margin: 0; } .pf-rating { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; } .pf-stars { color: var(--brand); letter-spacing: 2px; } .pf-rating__count { color: var(--ink-soft); font-size: 13px; } .pf-price { margin-top: 16px; font-size: 16px; color: var(--ink); } .pf-price strong { color: var(--brand); font-size: 20px; } .pf-price small { color: var(--ink-soft); } .pf-cta { display: flex; gap: 12px; margin: 22px 0 18px; } .pf-cta .btn { flex: 1; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 14px; font-weight: 700; font-size: 15px; } .pf-cta .btn svg { width: 22px; height: 22px; flex: none; } .pf-cta__wa { background: #25d366; color: #06210f; } .pf-cta__call { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .pf-cta__call:hover { border-color: var(--brand); } .pf-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 13.5px; color: #6fd49a; } .pf-highlights { margin-top: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .pf-stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .pf-stat { text-align: center; padding: 14px 6px; border-radius: 12px; background: rgba(217,177,78,.07); border: 1px solid rgba(217,177,78,.18); } .pf-stat strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 800; color: var(--brand); line-height: 1; } .pf-stat span { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-soft); line-height: 1.25; } .pf-specs { margin-top: 18px; } .pf-specs h3 { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 11px; } /* Main grid */ .pf-grid { display: grid; grid-template-columns: 1fr 320px; gap: 36px; margin-top: 48px; align-items: start; } /* Let the columns shrink to the available width instead of expanding to their widest child (stops text/tables from overflowing the screen on mobile). */ .pf-main, .pf-side { min-width: 0; } .pf-block { margin-bottom: 40px; } .pf-block h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 700; margin-bottom: 16px; } .pf-block p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; } .pf-block p strong { color: var(--brand); font-weight: 600; } .pf-tags { display: flex; flex-wrap: wrap; gap: 9px; } .pf-tags span, .pf-tags a { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; } .pf-tags a { color: var(--ink); text-decoration: none; transition: border-color .18s ease, color .18s ease, background .18s ease; } .pf-tags a:hover { color: var(--brand); border-color: rgba(217,177,78,.5); background: var(--bg-soft); } /* Collapsible services list: hide the extras until "+ N more" is tapped (CSS-only) */ .pf-tags--svc .pf-tag--extra { display: none; } .pf-tags__more { cursor: pointer; user-select: none; background: var(--brand-tint); color: var(--brand); border: 1px solid rgba(217,177,78,.4); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 700; transition: background .18s ease, border-color .18s ease; } .pf-tags__more:hover { background: rgba(217,177,78,.22); border-color: rgba(217,177,78,.6); } .pf-tags__more-close { display: none; } .pf-svc-toggle:checked ~ .pf-tag--extra { display: inline-block; } .pf-svc-toggle:checked ~ .pf-tags__more .pf-tags__more-open { display: none; } .pf-svc-toggle:checked ~ .pf-tags__more .pf-tags__more-close { display: inline; } .pf-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; } .pf-check li { font-size: 14.5px; padding-left: 26px; position: relative; color: var(--ink); } .pf-check li::before { position: absolute; left: 0; font-weight: 700; } .pf-check li.ok::before { content: '✓'; color: #4ad07f; } .pf-check li.no { color: var(--ink-soft); } .pf-check li.no::before { content: '✕'; color: #d0584a; } /* How-to-book steps — compact numbered list */ .pf-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 12px; } .pf-steps li { position: relative; padding-left: 40px; min-height: 28px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); display: flex; flex-direction: column; justify-content: center; } .pf-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--brand); background: var(--brand-tint); border: 1px solid rgba(217,177,78,.4); } .pf-steps li strong { color: var(--ink); font-weight: 700; } /* ===== "How to book" infographic — vertical step timeline (profile pages) ===== */ .bookflow { list-style: none; margin: 6px 0 0; padding: 0; } .bookflow__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding-bottom: 26px; } .bookflow__step:last-child { padding-bottom: 0; } /* flowing connector between nodes */ .bookflow__step::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: -2px; width: 2px; background: linear-gradient(180deg, var(--brand), rgba(217,177,78,.12)); } .bookflow__step:last-child::before { display: none; } .bookflow__node { position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-tint); border: 1px solid rgba(217,177,78,.4); color: var(--brand); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .bookflow__node svg { width: 24px; height: 24px; } .bookflow__num { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--bg); background: var(--brand); border: 2px solid var(--surface); } .bookflow__body { min-width: 0; padding-top: 7px; } .bookflow .bookflow__title { font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 4px; } .bookflow .bookflow__desc { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; } .bookflow__step:hover .bookflow__node { transform: translateY(-2px); background: var(--brand); color: var(--bg); box-shadow: 0 8px 22px rgba(217,177,78,.28); } @media (max-width: 560px) { .bookflow__step { grid-template-columns: 48px 1fr; gap: 13px; } .bookflow__node { width: 48px; height: 48px; } .bookflow__node svg { width: 22px; height: 22px; } .bookflow__step::before { left: 23px; top: 52px; } } .pf-rates { width: 100%; border-collapse: collapse; } .pf-rates th, .pf-rates td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; } .pf-rates th { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .pf-rates td:last-child { color: var(--brand); font-weight: 700; text-align: right; } .pf-rates th:last-child { text-align: right; } .pf-note { color: var(--ink-soft); font-size: 13px; margin-top: 12px; } .pf-map { height: 300px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); margin-top: 14px; } .pf-map .leaflet-control-attribution { border-radius: 6px !important; margin: 0 6px 6px 0 !important; } .pf-reviews { display: grid; gap: 16px; } .pf-review { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; } .pf-review blockquote { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); } .pf-review figcaption { display: flex; align-items: center; gap: 11px; margin-top: 16px; } /* ============================================================ Reusable reviews slider — horizontal, snap, dots on every viewport + a "View all" CTA that reveals after a few slides. Used on the homepage and profile pages. Children can be .review or .pf-review cards. Placed after .pf-reviews so the flex track overrides that grid layout. ============================================================ */ .rslider { position: relative; } .rslider__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px; } .rslider__track::-webkit-scrollbar { display: none; } .rslider__track > * { flex: 0 0 calc((100% - 44px) / 3); /* 3 cards per view on desktop */ scroll-snap-align: start; } .rslider__nav { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 22px; } .rslider__dots { display: flex; justify-content: center; gap: 8px; } .rslider__dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.25); transition: background .25s ease, width .25s ease; } .rslider__dots button.is-active { background: var(--brand); width: 22px; border-radius: 99px; } .rslider--static .rslider__dots { display: none; } /* nothing to scroll → hide dots */ .rslider__all { display: none; align-items: center; gap: 6px; } /* revealed by JS */ .rslider__all.is-shown { display: inline-flex; } /* Prev/next arrows (injected by JS) — laptop/tablet navigation */ .rslider__arrow { position: absolute; z-index: 6; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-md); transition: background .18s ease, color .18s ease, transform .18s ease, opacity .2s ease, visibility .2s; } .rslider__arrow svg { width: 22px; height: 22px; } .rslider__arrow:hover { background: var(--brand); color: #1a1206; transform: translateY(-50%) scale(1.08); } .rslider__arrow--prev { left: 4px; } .rslider__arrow--next { right: 4px; } .rslider__arrow.is-off { opacity: 0; visibility: hidden; pointer-events: none; } .rslider--static .rslider__arrow { display: none; } /* nothing to scroll → no arrows */ @media (max-width: 900px) { .rslider__track > * { flex-basis: calc((100% - 22px) / 2); } /* 2 per view */ } @media (max-width: 600px) { .rslider__arrow { display: none; } /* phones use swipe + dots */ } @media (max-width: 560px) { .rslider__track { gap: 14px; } .rslider__track > * { flex-basis: 88%; } /* 1 per view, peek next */ } /* Sidebar */ .pf-side__card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; position: sticky; top: 96px; } .pf-side__card h3 { font-size: 17px; font-weight: 700; margin-bottom: 14px; } .pf-facts { margin: 0; } .pf-facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); } .pf-facts dt { color: var(--ink-soft); font-size: 13.5px; flex: none; } .pf-facts dd { margin: 0; text-align: right; font-size: 13.5px; font-weight: 600; } .pf-side__cta { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; margin-top: 18px; } /* More professionals */ .pf-more { border-top: 1px solid var(--line); padding-top: 44px; } .pf-more h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin-bottom: 26px; } .pf-more__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .pf-mcard { position: relative; display: block; aspect-ratio: 3/3.6; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background-image: var(--img); background-size: cover; background-position: center; transition: transform .2s ease, border-color .2s ease; } .pf-mcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 8%, transparent 55%); } .pf-mcard:hover { transform: translateY(-4px); border-color: rgba(217,177,78,.5); } .pf-mcard__info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; } .pf-mcard__info strong { font-size: 16px; } .pf-mcard__info small { color: rgba(255,255,255,.78); font-size: 12.5px; margin-top: 2px; } .pf-more__all { text-align: center; margin-top: 28px; } .pf-more__all .btn { height: 46px; padding: 0 24px; display: inline-flex; align-items: center; } /* ============ RESPONSIVE ============ */ @media (max-width: 900px) { .search { display: none; } .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: auto; } .hero__art { order: -1; } .hero__art img { height: clamp(300px, 42vh, 420px); object-position: 50% 20%; } .hero__copy { min-width: 0; } /* let the text column shrink to the phone width */ .vibe-grid { grid-auto-rows: 130px; } .reccard { flex-basis: calc((100% - var(--rec-gap)) / 2); } /* 2 cards on tablet */ .areas__inner { grid-template-columns: 1fr; gap: 32px; } .areas__map { order: -1; aspect-ratio: 4/3.2; min-height: 0; } /* FAQ → single column · Reviews → two columns on tablet */ .faq__grid { grid-template-columns: 1fr; gap: 0; } .reviews__grid { grid-template-columns: repeat(2, 1fr); } /* Why grid → 2 columns on tablet/phone */ .why__grid { grid-template-columns: repeat(2, 1fr); } /* Profile page → stack columns */ .pf-top { grid-template-columns: 1fr; gap: 24px; } .pf-gallery { height: auto; } .pf-slider { aspect-ratio: 4/4.4; height: auto; min-height: 0; } .pf-arrow { display: none; } /* mobile uses swipe, not arrows */ .pf-grid { grid-template-columns: 1fr; gap: 8px; } .pf-side__card { position: static; } .pf-more__grid { grid-template-columns: repeat(3, 1fr); } /* Collapsible nav on mobile — a dropdown panel anchored under the sticky header. Absolute (not fixed) so it is unaffected by the header's transform/will-change, which would otherwise trap a fixed child. */ .navtoggle { display: flex; } .mainnav { position: absolute; top: 100%; left: 0; right: 0; z-index: 45; background: var(--bg); border-top: 1px solid var(--line); max-height: calc(100vh - 72px); overflow-y: auto; padding: 8px 0 14px; box-shadow: 0 18px 40px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .mainnav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mainnav__list { flex-direction: column; align-items: stretch; height: auto; gap: 2px; } .mainnav__link { font-size: 16px; padding: 14px 20px; justify-content: space-between; border-radius: 0; } .mainnav__link:hover, .has-menu:hover > .mainnav__link { transform: none; box-shadow: none; } .has-menu .caret { margin-left: auto; } .dropdown, .dropdown--grid { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; min-width: 0; display: none; background: var(--bg-soft); margin: 0 12px 6px; border-radius: 12px; } .has-menu.is-expanded .dropdown { display: grid; grid-template-columns: 1fr 1fr; } /* Footer → brand spans full row, links in a 2-col grid below */ .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px 28px; padding: 48px 20px 36px; } .footer__brand { grid-column: 1 / -1; } .footer__blurb { max-width: 520px; } } /* ===== Header: fit any small screen (≤768px) ===== */ @media (max-width: 768px) { .header__inner { gap: 8px; padding-left: 14px; padding-right: 14px; } .logo__text { font-size: 22px; } /* Location picker → compact: pin + caret only (text still in the dropdown) */ .location { padding: 8px 6px; gap: 4px; } .location__text { display: none; } .location__caret { width: 15px; height: 15px; } /* Call → icon-only tap-to-call, 44×44 touch target */ .contact--call { width: 44px; height: 44px; padding: 0; justify-content: center; } .contact--call .contact__text { display: none; } /* WhatsApp → icon-only, 44×44 touch target */ .contact--wa { width: 44px; height: 44px; padding: 0; justify-content: center; } .contact--wa span { display: none; } .contact--call .ico, .contact--wa .ico { width: 22px; height: 22px; } /* Hamburger → 44×44 touch target */ .navtoggle { width: 44px; height: 44px; align-items: center; justify-content: center; } /* Coverage index → single column so long locality names never clip */ .acov { grid-template-columns: 1fr; column-gap: 0; } } @media (max-width: 560px) { /* Location dropdown: pin it just under the header and span the screen within 12px margins, so it always fits the phone instead of overflowing the button. */ .locmenu { position: fixed; top: 76px; left: 12px; right: 12px; width: auto; } .hero__search { flex-wrap: wrap; } .hero__search-field input { width: 100%; } .hero__trust { gap: 20px; } /* Hero CTAs → both on one line, equal size, compact */ /* Two equal columns so both CTA buttons are exactly the same width & height. */ .hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hero__cta .btn { width: 100%; min-width: 0; height: 46px; padding: 0 10px; font-size: 13.5px; white-space: nowrap; } .hero__cta .btn--ghost { gap: 6px; } .hero__cta .btn--ghost .ico { width: 16px; height: 16px; } .hero__cta .wa-prefix { display: none; } /* show just "WhatsApp" on mobile so it fits */ .location__text small { display: none; } .reccard { flex-basis: 100%; } /* 1 card on mobile */ .rec__nav { display: none; } /* mobile uses swipe, not arrows */ .vibe-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; } .vibe__label { font-size: 21px; } .vibe--tall .vibe__label { font-size: 23px; } /* Footer → single column, centred legal bar */ .footer__inner { grid-template-columns: 1fr; gap: 28px; } .footer__bar-inner { flex-direction: column; text-align: center; gap: 10px; } /* Offer chip → compact on small phones */ .offerchip { right: 12px; bottom: 12px; left: auto; padding: 6px 7px 6px 12px; } .offerchip__link { font-size: 13px; gap: 7px; } .offerchip__code { display: none; } /* keep it tiny; code still shows on the services page */ /* Reviews → single column on phones (dedicated /reviews page, etc.) */ .reviews__grid { grid-template-columns: 1fr; } /* Profile page → tighter on phones */ .pf-check { grid-template-columns: 1fr; } .pf-trust { grid-template-columns: 1fr; } .pf-stats4 { grid-template-columns: repeat(2, 1fr); } .pf-more__grid { grid-template-columns: repeat(2, 1fr); } .pf-cta { gap: 10px; } .pf-cta .btn { font-size: 14px; gap: 7px; padding: 0 8px; } } /* ============ BLOG ============ */ .blog .locs-head { margin-bottom: 6px; } .blog-tag { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--brand); background: rgba(217,177,78,.10); border: 1px solid rgba(217,177,78,.25); border-radius: 999px; padding: 4px 11px; } /* Featured post (listing) */ .blog-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 26px; transition: border-color .2s ease, transform .2s ease; } .blog-feature:hover { border-color: rgba(217,177,78,.5); transform: translateY(-2px); } .blog-feature__img { min-height: 300px; background-size: cover; background-position: center; } .blog-feature__body { display: flex; flex-direction: column; gap: 12px; padding: 32px; } .blog-feature__body h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--ink); margin: 0; } .blog-feature__body p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; } .blog-feature__body small { color: var(--ink-soft); font-size: 13px; margin-top: auto; } /* Post grid + cards */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .blog-grid--list { grid-template-columns: repeat(2, 1fr); } .blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s ease, transform .2s ease; } .blog-card:hover { border-color: rgba(217,177,78,.5); transform: translateY(-2px); } .blog-card__img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; } .blog-card__body { display: flex; flex-direction: column; gap: 9px; padding: 20px; } .blog-card__body strong { font-size: 17px; line-height: 1.35; color: var(--ink); } .blog-card__body p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; } .blog-card__body small { color: var(--ink-soft); font-size: 12.5px; margin-top: auto; } /* Single article */ .blog-article { max-width: 820px; } .blog-post__head { margin: 18px 0 22px; display: flex; flex-direction: column; gap: 14px; } .blog-post__head h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 36px; line-height: 1.15; font-weight: 800; color: var(--ink); margin: 0; } .blog-post__meta { color: var(--ink-soft); font-size: 14px; margin: 0; } .blog-post__hero { width: 100%; border-radius: 16px; margin-bottom: 30px; display: block; } .blog-post__body { color: var(--ink); font-size: 16.5px; line-height: 1.75; } .blog-post__body h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 23px; font-weight: 700; color: var(--ink); margin: 34px 0 12px; } .blog-post__body p { margin: 0 0 18px; color: var(--ink-soft); } .blog-post__body ul { margin: 0 0 20px; padding-left: 22px; color: var(--ink-soft); } .blog-post__body li { margin-bottom: 9px; line-height: 1.6; } .blog-post__body strong { color: var(--ink); font-weight: 700; } .blog-post__body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .blog-post__cta { margin: 36px 0 10px; padding: 26px; text-align: center; background: rgba(217,177,78,.07); border: 1px solid rgba(217,177,78,.2); border-radius: 16px; } .blog-post__cta p { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 14px; } .blog-more { margin-top: 52px; } .blog-more__title { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 18px; } @media (max-width: 900px) { .blog-feature { grid-template-columns: 1fr; } .blog-feature__img { min-height: 220px; } .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .blog-feature__body { padding: 24px; } .blog-feature__body h2 { font-size: 22px; } .blog-grid, .blog-grid--list { grid-template-columns: 1fr; } .blog-post__head h1 { font-size: 28px; } .blog-post__body { font-size: 16px; } } /* ============ SERVICE CATEGORY PAGE ============ */ .cat-page { background: var(--bg); } .cat { padding-bottom: 80px; } /* ---- Hero ---- */ .cat-hero { position: relative; min-height: calc(100vh - 71px); display: flex; align-items: center; background-image: linear-gradient(180deg, rgba(12,11,16,.30) 0%, rgba(12,11,16,.55) 45%, rgba(12,11,16,.96) 100%), var(--img); background-size: cover; background-position: center 18%; } .cat-hero__inner { position: relative; z-index: 2; padding: 120px 20px 46px; width: 100%; } /* Centered hero variant (category pages) */ .cat-hero.cat-hero--center { align-items: center; } .cat-hero--center .cat-hero__inner { text-align: center; padding: 60px 20px; } .cat-hero--center .cat-hero__title, .cat-hero--center .cat-hero__tag { margin-left: auto; margin-right: auto; } .cat-hero--center .cat-hero__stats, .cat-hero--center .cat-hero__cta { justify-content: center; } .cat-hero__crumb { color: rgba(255,255,255,.78); margin-bottom: 10px; } .cat-hero__crumb a { color: rgba(255,255,255,.78); } .cat-hero__crumb a:hover { color: var(--brand); } .cat-hero__crumb span { color: var(--brand); } .cat-hero__chip { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-tint); color: var(--brand); border: 1px solid rgba(217,177,78,.4); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; } .cat-hero__ico { font-size: 15px; } .cat-hero__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 5.2vw, 54px); font-weight: 800; line-height: 1.05; margin: 0 0 12px; max-width: 760px; color: #fff; } .cat-hero__tag { color: rgba(243,239,230,.9); font-size: clamp(15px, 2vw, 19px); max-width: 620px; } .cat-hero__stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; } .cat-stat { background: rgba(20,18,26,.6); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; backdrop-filter: blur(6px); min-width: 96px; } .cat-stat strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 800; color: var(--brand); line-height: 1; } .cat-stat span { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-soft); } .cat-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .cat-cta__wa, .cat-cta__view { height: 52px; padding: 0 24px; gap: 9px; border-radius: 14px; font-size: 15px; } .cat-cta__wa { background: #25d366; color: #06210f; } .cat-cta__wa:hover { filter: brightness(1.06); transform: translateY(-1px); } .cat-cta__view { background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); } .cat-cta__view:hover { border-color: var(--brand); background: rgba(255,255,255,.04); } /* ---- Sticky sub-nav ---- */ .cat-nav { position: sticky; top: 71px; z-index: 40; background: rgba(12,11,16,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } /* Edge fades hint that the nav can be swiped for more (shown only when scrollable). */ .cat-nav::before, .cat-nav::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 46px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .cat-nav::before { left: 0; background: linear-gradient(to left, transparent, rgba(12,11,16,.96)); } .cat-nav::after { right: 0; background: linear-gradient(to right, transparent, rgba(12,11,16,.96)); } .cat-nav.has-prev::before { opacity: 1; } .cat-nav.has-more::after { opacity: 1; } /* A small chevron in the right fade so the swipe affordance is obvious. */ .cat-nav.has-more::after { background: linear-gradient(to right, transparent, rgba(12,11,16,.96) 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9b14e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px 16px; } .cat-nav__inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .cat-nav__inner::-webkit-scrollbar { display: none; } .cat-nav a { white-space: nowrap; padding: 16px 16px 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .cat-nav a:hover { color: var(--ink); } .cat-nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); } /* ============================================================ Category page header fix (scoped to .cat-detail only) The full site header is ~124px tall on desktop (72px masthead + 51px nav row) and ~73px on mobile (nav collapses off-canvas). Keep the masthead pinned and stack the section sub-nav flush beneath it so it never floats with a gap above. Other pages that reuse .cat-nav / .cat-anchor are deliberately untouched. ============================================================ */ .cat-detail .header.is-hidden { transform: none; } /* don't auto-hide above the sub-nav */ .cat-detail .cat-nav { top: 123px; } /* sit flush under the full header */ .cat-detail .cat-anchor { scroll-margin-top: 184px; }/* clear header + sub-nav on anchor jumps */ /* Hero fits the viewport under the full (124px) header, so the bottom-anchored content (stats + CTAs) isn't pushed past the fold. (Base rule still uses the old 71px masthead-only height.) */ .cat-detail .cat-hero { min-height: calc(100vh - 124px); } @media (max-width: 900px) { .cat-detail .cat-nav { top: 72px; } /* nav collapses → header is just the masthead */ .cat-detail .cat-anchor { scroll-margin-top: 128px; } .cat-detail .cat-hero { min-height: calc(100svh - 73px); } } /* ---- Layout ---- */ .cat-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; margin-top: 44px; align-items: start; } .cat-anchor { scroll-margin-top: 130px; } /* ---- Facet cards ---- */ .cat-facets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } .cat-facet { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; } .cat-facet__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; font-size: 18px; background: rgba(217,177,78,.1); border: 1px solid rgba(217,177,78,.22); color: var(--brand); } .cat-facet h3 { font-size: 16px; font-weight: 700; margin: 14px 0 8px; } .cat-facet p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; margin: 0; } /* ---- Professionals grid ---- */ .cat-pros__lead { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: -4px 0 22px; } .cat-pros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .cat-pro { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .cat-pro:hover { transform: translateY(-4px); border-color: rgba(217,177,78,.45); box-shadow: var(--shadow-md); } .cat-pro__media { position: relative; display: block; aspect-ratio: 16/10; background-image: var(--img); background-size: cover; background-position: center top; } .cat-pro__verified { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(74,208,127,.92); color: #06210f; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; } .cat-pro__body { padding: 16px 18px 18px; display: flex; flex-direction: column; } .cat-pro__name { font-size: 17px; font-weight: 700; color: var(--ink); } .cat-pro__name:hover { color: var(--brand); } .cat-pro__role { color: var(--ink-soft); font-size: 13px; margin-top: 3px; } .cat-pro__meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--ink); } .cat-pro__rating { color: var(--brand); font-weight: 700; } .cat-pro__rating small { color: var(--ink-soft); font-weight: 500; } .cat-pro__dot { color: var(--ink-soft); } .cat-pro__loc { color: var(--ink-soft); font-size: 13px; margin-top: 8px; } .cat-pro__price { color: var(--brand); font-weight: 700; font-size: 14.5px; margin-top: 6px; } .cat-pro__cta { display: flex; gap: 9px; margin-top: 14px; } .cat-pro__view, .cat-pro__book { flex: 1; height: 42px; border-radius: 11px; font-size: 13.5px; font-weight: 700; gap: 7px; padding: 0 12px; } .cat-pro__view { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .cat-pro__view:hover { border-color: var(--brand); } .cat-pro__book { background: #25d366; color: #06210f; } .cat-pro__book:hover { filter: brightness(1.06); } /* ---- Reviews ---- */ .cat-reviews__rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-soft); margin: -4px 0 20px; } .cat-reviews__rating strong { color: var(--ink); font-size: 17px; } .cat-reviews { grid-template-columns: repeat(3, 1fr); } /* Professionals / Reviews / FAQ run full-width below the intro + sidebar grid */ .cat-pros-full { margin-top: 8px; } /* The category pro cards sit inside a .pf-block, whose generic `p` typography (colour / size / line-height / margin) was bleeding into the overlay text — making the price lose its gold and the bio/languages faded, oversized and pushed out of the card. Re-assert the homepage procard text styling here only (homepage cards live outside .cat-pros-full and are untouched). */ .cat-pros-full .procard__price { color: var(--brand); font-size: 16px; line-height: 1.2; margin: -2px 0 0; } .cat-pros-full .procard__bio { color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.5; margin: 0; } @media (max-width: 767px) { .cat-pros-full .procard__price { font-size: 13.5px; } .cat-pros-full .procard__bio { color: var(--ink-soft); font-size: 12.5px; } } /* ---- Sidebar ---- */ .cat-side__card h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; } .cat-side__call { width: 100%; height: 46px; margin-top: 10px; } .cat-side__trust { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } /* ---- Related ---- */ .cat-related { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 44px; } .cat-related h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin-bottom: 24px; } .cat-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cat-related__card { position: relative; display: block; aspect-ratio: 3/2; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background-image: var(--img); background-size: cover; background-position: center; transition: transform .2s ease, border-color .2s ease; } .cat-related__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 10%, transparent 60%); } .cat-related__card:hover { transform: translateY(-4px); border-color: rgba(217,177,78,.5); } .cat-related__info { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; } .cat-related__ico { font-size: 22px; margin-bottom: 4px; } .cat-related__info strong { font-size: 18px; color: #fff; } .cat-related__info small { color: rgba(255,255,255,.8); font-size: 12.5px; margin-top: 3px; } /* ---- Category page responsive ---- */ @media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr; gap: 30px; } .cat-side { order: -1; } .cat-side__card { position: static; } .cat-hero { min-height: calc(100svh - 64px); } .cat-hero__inner { padding-top: 100px; } .cat-related__grid { grid-template-columns: repeat(2, 1fr); } .cat-reviews { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cat-facets { grid-template-columns: 1fr; } .cat-pros { grid-template-columns: 1fr; } .cat-reviews { grid-template-columns: 1fr; } .cat-related__grid { grid-template-columns: 1fr; } .cat-hero__cta { flex-direction: column; } .cat-cta__wa, .cat-cta__view { width: 100%; } /* Stat boxes: 2x2 grid so each has room; centred, contained content. */ .cat-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cat-stat { min-width: 0; padding: 12px 10px; text-align: center; } .cat-stat strong { font-size: 20px; } .cat-stat span { font-size: 11.5px; white-space: nowrap; } } /* ============================================================ LOCATION PAGES (location.php) + LOCATIONS HUB (locations.php) ============================================================ */ /* Big editorial location wordmark (faded background-style heading) */ .loc-wordmark { text-align: center; overflow: hidden; line-height: .9; padding: 30px 0 6px; } .loc-wordmark span { display: inline-block; white-space: nowrap; font-family: 'Playfair Display', Georgia, serif; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; /* Scale to fit the container: shrink as the name gets longer so the whole word always fits inside .container (max 1160px content width). Factor kept conservative for wide Playfair caps (M/W/T) + letter-spacing so long names like "CLEMENT TOWN" aren't clipped by overflow:hidden. */ font-size: min(150px, calc(min(1160px, 100vw - 40px) / var(--len, 9) * 1.25)); max-width: 100%; background: linear-gradient(180deg, rgba(243,239,230,.16) 0%, rgba(243,239,230,.05) 70%, rgba(243,239,230,.02) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* "Also covering" landmark chips */ .loc-land { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 22px 0 4px; } .loc-land__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin-right: 4px; } .loc-land__chip { font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 6px 13px; border-radius: 999px; text-decoration: none; transition: border-color .18s ease, color .18s ease, background .18s ease; } a.loc-land__chip:hover { color: var(--brand); border-color: rgba(217,177,78,.5); background: var(--bg-soft); } /* Services-available grid reuses .cat-related__card; widen to 4 across */ .loc-services__grid { grid-template-columns: repeat(4, 1fr); } /* Nearby-areas chips */ .loc-near { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 8px; } .loc-near__chip { font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 11px 18px; border-radius: 12px; transition: border-color .2s ease, transform .2s ease, color .2s ease; } .loc-near__chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } .loc-near__chip--all { background: var(--brand-tint); color: var(--brand); border-color: rgba(217,177,78,.4); } /* ---- Locations hub ---- */ .locs { padding-top: 96px; } .locs-head { text-align: left; } .locs-head h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 5vw, 50px); font-weight: 800; line-height: 1.06; margin: 14px 0 14px; } .locs-head h1 em { color: var(--brand); font-style: italic; } .locs-head p { color: var(--ink-soft); font-size: 16px; line-height: 1.75; max-width: 760px; } .locs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 56px; } .loccard { position: relative; display: block; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background-image: var(--img); background-size: cover; background-position: center; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .loccard:hover { transform: translateY(-5px); border-color: rgba(217,177,78,.5); box-shadow: var(--shadow-lg); } .loccard__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; background: linear-gradient(to top, rgba(10,8,16,.95) 8%, rgba(10,8,16,.25) 55%, rgba(10,8,16,.4) 100%); } .loccard__top { display: flex; align-items: center; justify-content: space-between; } .loccard__pin { font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(12,11,16,.6); border: 1px solid rgba(255,255,255,.18); padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px); } .loccard__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #4ad07f; background: rgba(74,208,127,.12); border: 1px solid rgba(74,208,127,.35); padding: 5px 11px; border-radius: 999px; } .loccard__live i { width: 7px; height: 7px; border-radius: 50%; background: #4ad07f; box-shadow: 0 0 0 0 rgba(74,208,127,.6); animation: locPulse 1.8s infinite; } @keyframes locPulse { 0% { box-shadow: 0 0 0 0 rgba(74,208,127,.5); } 70% { box-shadow: 0 0 0 7px rgba(74,208,127,0); } 100% { box-shadow: 0 0 0 0 rgba(74,208,127,0); } } .loccard__name { font-family: 'Playfair Display', Georgia, serif; font-size: 25px; font-weight: 800; color: #fff; line-height: 1.05; } .loccard__sub { color: rgba(255,255,255,.82); font-size: 13px; margin-top: 5px; } .loccard__meta { display: block; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.92); } .loccard__meta strong { color: var(--brand); } /* ============================================================ FOOTER EXTRAS — trust strip · payment options · banner (partials/pre-footer.php + post-footer.php) ============================================================ */ /* Trust strip (above footer) */ .trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .trust-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 26px 20px; } .trust-badge { display: flex; align-items: center; gap: 13px; } .trust-badge__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: rgba(217,177,78,.1); border: 1px solid rgba(217,177,78,.24); } .trust-badge__txt { display: flex; flex-direction: column; } .trust-badge__txt strong { font-size: 14.5px; font-weight: 700; color: var(--ink); } .trust-badge__txt small { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; } /* Payment options (below footer) */ .pay-strip { background: var(--bg); border-top: 1px solid var(--line); } .pay-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 30px 20px; } .pay-strip__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--ink); } .pay-strip__title span { color: var(--brand); } .pay-strip__lead { color: var(--ink-soft); font-size: 14px; margin-top: 6px; max-width: 460px; } .pay-methods { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; } .pay-methods li { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 11px 18px; border-radius: 10px; white-space: nowrap; min-height: 46px; } .pay-methods li img, .pay-methods li svg { height: 22px; width: auto; display: block; } /* Decorative full-width image strip below the copyright bar */ .footstrip { width: 100%; height: clamp(112px, 15vw, 195px); background-image: var(--img); background-size: cover; background-position: center; } /* Brand copyright bar (very bottom of every page) */ .copybar { background: var(--brand); } .copybar__inner { padding: 16px 20px; text-align: center; color: #1a1206; font-weight: 800; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; } /* WhatsApp banner band (bottom of content pages) */ .site-banner { position: relative; background-image: linear-gradient(90deg, rgba(12,11,16,.92) 0%, rgba(12,11,16,.6) 60%, rgba(12,11,16,.4) 100%), var(--img); background-size: cover; background-position: center; } .site-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 46px 20px; } .site-banner__copy h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(22px, 3.2vw, 34px); font-weight: 800; color: #fff; line-height: 1.1; } .site-banner__copy p { color: rgba(243,239,230,.9); font-size: 15.5px; margin-top: 8px; max-width: 560px; } .site-banner__cta { height: 54px; padding: 0 26px; gap: 9px; border-radius: 14px; font-size: 16px; background: #25d366; color: #06210f; flex: none; } .site-banner__cta:hover { filter: brightness(1.06); transform: translateY(-1px); } /* ---- Sticky "Book Now" bar on profile pages (mobile) ---- */ .pf-bookbar { display: none; } @media (max-width: 900px) { body.pf-page { padding-bottom: 76px; } .pf-bookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: rgba(18,16,24,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 26px rgba(0,0,0,.45); } .pf-bookbar__info { display: flex; flex-direction: column; min-width: 0; } .pf-bookbar__info strong { font-size: 15px; color: var(--ink); line-height: 1.2; } .pf-bookbar__info span { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-bookbar__btns { display: flex; align-items: center; gap: 8px; flex: none; } .pf-bookbar__call { width: 46px; height: 46px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--surface); border: 1px solid var(--line); } .pf-bookbar__book { height: 46px; padding: 0 20px; gap: 8px; border-radius: 12px; background: #25d366; color: #06210f; font-size: 15px; font-weight: 700; } .pf-bookbar__book:hover { filter: brightness(1.05); } } /* ---- Contact form (contact.php) ---- */ .cform { display: grid; gap: 16px; max-width: 660px; margin-top: 8px; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cform label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-soft); } .cform input, .cform select, .cform textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; width: 100%; } .cform input::placeholder, .cform textarea::placeholder { color: var(--ink-soft); opacity: .7; } .cform textarea { min-height: 110px; resize: vertical; } .cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--brand); } .cform__send { height: 52px; padding: 0 28px; font-size: 15px; justify-self: start; } @media (max-width: 600px) { .cform__row { grid-template-columns: 1fr; } .cform__send { width: 100%; } } /* ---- Legal pages (privacy.php / terms.php) ---- */ .legal-updated { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-soft); } .legal-see-also { margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; } .locs .pf-block p a, .locs .pf-block li a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .locs .pf-block p a:hover, .locs .pf-block li a:hover { filter: brightness(1.1); } @media (max-width: 1023px) { .loc-services__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .locs-grid { grid-template-columns: repeat(2, 1fr); } .trust-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 600px) { .locs { padding-top: 84px; } .locs-grid { grid-template-columns: 1fr; } .loc-services__grid { grid-template-columns: 1fr; } .trust-strip__inner { grid-template-columns: 1fr; } .pay-strip__inner { flex-direction: column; align-items: flex-start; gap: 16px; } .site-banner__cta { width: 100%; } } /* ============================================================ Live search suggestions — a clean dropdown anchored under the search bar. Does not alter the search bar itself (the relative position is invisible and only anchors the dropdown). ============================================================ */ .search { position: relative; } .search-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80; display: none; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.5); max-height: min(60vh, 420px); overflow-y: auto; } .search-suggest.is-open { display: block; } .search-suggest__item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; cursor: pointer; color: var(--ink); text-decoration: none; } .search-suggest__item:hover, .search-suggest__item.is-active { background: var(--bg-soft); } .search-suggest__ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; background: var(--brand-tint); } .search-suggest__txt { display: flex; flex-direction: column; min-width: 0; } .search-suggest__title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-suggest__sub { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-suggest__type { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--brand); opacity: .85; } .search-suggest__empty { padding: 14px 12px; color: var(--ink-soft); font-size: 13.5px; text-align: center; } /* ===== About page: category icon tiles ===== */ .about-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; } .about-cats a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 18px 10px; min-height: 104px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease; } .about-cats a:hover { border-color: rgba(217,177,78,.5); transform: translateY(-3px); background: var(--bg-soft); } .about-cats__ico { font-size: 30px; line-height: 1; } .about-cats a span:last-child { font-size: 12.5px; font-weight: 600; line-height: 1.25; }