/* SuperBiz base stylesheet — premium, Apple-grade foundation. Uses theme tokens (--primary, --accent, --bg, --surface, --text, --muted, --border) so scheme + skin swaps keep working. Every business template inherits this, so raising the bar here raises it everywhere. */ :root { --container: 1160px; --radius: 22px; /* cards / media */ --radius-sm: 14px; /* inputs / small */ --btn-radius: 980px; /* Apple-style pill */ --shadow: 0 8px 30px rgba(0,0,0,.06); --shadow-lg: 0 30px 70px rgba(0,0,0,.12); --ease: cubic-bezier(.4, 0, .2, 1); --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --maxw-prose: 62ch; } /* dark mode (runtime toggle; class on so it overrides the theme :root) */ html.sb-dark { --bg: #000000; --surface: #1c1c1e; --text: #f5f5f7; --muted: #98989d; --border: #2c2c2e; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* overflow-x: hidden here would force overflow-y to compute as auto on BOTH html and body (the CSS spec rule: a non-visible x-axis forces the y-axis off "visible" too) — that turns body into its own scroll container separate from the real viewport scroll, and position:sticky descendants (the header) stick relative to THAT non-scrolling box instead of the page, so they never visibly stick at all. overflow-x: clip is exempt from that forcing rule, so overflow-y stays genuinely visible and sticky works normally. Kept `hidden` first as a fallback for pre-2022 browsers that don't understand `clip` (it's simply ignored there; the max-width clamp still does most of the work). */ html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.5; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; transition: color .2s var(--ease); } h1, h2, h3 { line-height: 1.06; margin: 0 0 .4em; font-weight: 700; letter-spacing: -0.025em; } p { margin: 0 0 1rem; } .sb-wrap { width: min(var(--container), 92vw); margin-inline: auto; } .sb-sec { padding: clamp(2rem, 3.4vw, 3.5rem) 0; } .sb-sec__eyebrow { text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); margin-bottom: .7rem; } .sb-sec__eyebrow--left { text-align: left; } .sb-sec__title { text-align: center; font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); letter-spacing: -0.03em; } .sb-sec__eyebrow + .sb-sec__title { margin-top: 0; } /* buttons — pill, refined */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: .78em 1.5em; border-radius: var(--btn-radius); background: var(--surface); color: var(--text); font-weight: 600; font-size: .98rem; border: 1px solid var(--border); cursor: pointer; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), opacity .2s var(--ease); } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--primary); color: #fff; border-color: transparent; } .btn--primary:hover { filter: saturate(1.08); box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 35%, transparent); } .btn--lg { padding: .95em 2em; font-size: 1.06rem; } .btn--sm { padding: .55em 1.1em; font-size: .9rem; } /* header — frosted, sticky (height raised ~30% for a more premium presence) */ .sb-header { position: static; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .sb-header--sticky { position: sticky; top: 0; z-index: 40; } .sb-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; } .sb-logo { height: 50px; width: auto; } .sb-logo--text { font-weight: 800; font-size: 1.2rem; color: var(--text); letter-spacing: -0.02em; } .sb-logo--dark { display: none; } html.sb-dark .sb-logo--light { display: none; } html.sb-dark .sb-logo--dark { display: inline; } .sb-brand { display: inline-flex; align-items: center; gap: .7rem; } .sb-brand__name { display: inline-block; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.015em; white-space: nowrap; } .sb-brand__hi { color: var(--primary); } .sb-brand__lo { color: var(--accent); } @media (max-width: 400px) { .sb-brand__name { display: none; } } .sb-nav { display: flex; gap: 1.75rem; } .sb-nav a { color: var(--text); font-weight: 500; font-size: .95rem; opacity: .85; } .sb-nav a:hover { opacity: 1; color: var(--primary); } .sb-nav__toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--text); cursor: pointer; } /* hero — big, centered, cinematic */ .sb-hero { position: relative; min-height: min(76vh, 640px); display: grid; place-items: center; text-align: center; color: #fff; background: var(--primary) center/cover no-repeat; overflow: hidden; } .sb-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55)); } /* Root-cause fix: several design skins (vibrant, techno, ...) set a fallback `background: linear-gradient(...)` SHORTHAND on .sb-hero/.sb-slide for when there's no photo — but a shorthand silently resets every sub-property it doesn't mention (size/position/repeat -> their initial auto/0%,0%/repeat) for ANY element it matches, image or not. Combined with those skin selectors having higher specificity (2 classes) than the base rules above, this was overriding the actual PHOTO's size/position/repeat too — showing only its native-size top-left corner, or tiling it sideways, instead of a clean centered fit. Chained classes here (3x = higher specificity than any 2-class `.design-X .sb-hero` skin override, present or future) pin the real behaviour back. */ .sb-hero.sb-hero.sb-hero, .sb-slide.sb-slide.sb-slide { background-position: center; background-repeat: no-repeat; } .sb-hero.sb-hero.sb-hero { background-size: cover; } .sb-hero__in { position: relative; z-index: 1; width: min(860px, 90vw); padding: 2rem; } .sb-hero h1 { font-size: clamp(2.4rem, 7vw, 4.75rem); text-shadow: 0 4px 40px rgba(0,0,0,.25); } .sb-hero__sub { font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 400; opacity: .96; margin: 0 auto 1.75rem; max-width: 40ch; letter-spacing: -0.01em; } /* grids / cards */ .sb-grid { display: grid; gap: 1.5rem; } .sb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .sb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .sb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .sb-card--service { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; } .sb-card--service .sb-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .sb-card--service h3, .sb-card--service p, .sb-card--service .sb-price { margin: .85rem 1.25rem; } .sb-card--service h3 { margin-top: 1.25rem; } /* Button + "details" link sit together, centered, pinned to the bottom of the card — every card in a row lines up regardless of how long its description text is. */ .sb-card__actions { margin-top: auto; padding: .4rem 1.25rem 1.35rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; } .sb-card--service .sb-card__actions .btn, .sb-card--service .sb-card__actions .sb-card__link { margin: 0; } .sb-card__icon { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 18%, transparent)); color: var(--primary); margin: 0 auto 1.1rem; } .sb-card__icon svg { width: 28px; height: 28px; } .sb-card__icon-img { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 1.1rem; border-radius: 12px; } .sb-price { font-weight: 700; color: var(--primary); font-size: 1.1rem; } .sb-card__link { display: inline-block; margin-top: .7rem; font-weight: 650; font-size: .92rem; color: var(--primary); letter-spacing: -0.01em; } .sb-card__link:hover { text-decoration: underline; text-underline-offset: 3px; } .sb-card__link span { transition: transform .2s var(--ease); display: inline-block; } .sb-card__link:hover span { transform: translateX(3px); } /* about */ .sb-about__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .sb-about.has-img .sb-about__grid { grid-template-columns: 1fr 1fr; } .sb-about__text h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); } .sb-about__text p { color: var(--muted); font-size: 1.08rem; max-width: var(--maxw-prose); } .sb-about__media img { border-radius: var(--radius); box-shadow: var(--shadow); } /* gallery */ .sb-gallery__grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .sb-gallery--masonry { columns: 3 220px; display: block; } .sb-gallery--masonry .sb-gallery__item { break-inside: avoid; margin-bottom: .75rem; } .sb-gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius-sm); } .sb-gallery__img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .5s var(--ease); } .sb-gallery__img:hover { transform: scale(1.06); } .sb-gallery--justified .sb-gallery__item { aspect-ratio: 1/1; } /* testimonials */ .sb-quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; margin: 0; } .sb-quote p { font-size: 1.12rem; letter-spacing: -0.015em; } .sb-quote p::before { content: "\201C"; color: var(--primary); font-weight: 800; font-size: 1.4em; line-height: 0; margin-right: .1em; } .sb-stars { color: var(--accent); letter-spacing: 2px; margin-bottom: .75rem; font-size: 1.05rem; } .sb-quote__by { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; } .sb-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-weight: 700; flex: none; } .sb-quote__by > span { font-weight: 700; } .sb-quote__by small { display: block; color: var(--muted); font-weight: 500; font-size: .85rem; } /* testimonial carousel */ .sb-tcar { position: relative; } .sb-tcar__track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem 2px .75rem; -ms-overflow-style: none; scrollbar-width: none; } .sb-tcar__track::-webkit-scrollbar { display: none; } .sb-tcar .sb-quote { flex: 0 0 min(480px, 90%); scroll-snap-align: center; } .sb-tcar__nav { position: absolute; top: 42%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center; transition: background .2s var(--ease), color .2s var(--ease); } .sb-tcar__nav:hover { background: var(--primary); color: #fff; border-color: transparent; } .sb-tcar__prev { left: -10px; } .sb-tcar__next { right: -10px; } .sb-tcar__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; } .sb-tcar__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); } .sb-tcar__dot.is-active { background: var(--primary); transform: scale(1.3); } @media (max-width: 760px) { .sb-tcar__nav { display: none; } } /* mobile: swipe + dots */ /* section rhythm */ .sb-testimonials, .sb-stats { background: var(--surface); } /* stats band */ .sb-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.75rem; text-align: center; } .sb-stat__value { font-size: clamp(2.3rem, 5.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--primary); line-height: 1; } .sb-stat__label { color: var(--muted); font-weight: 600; margin-top: .5rem; } /* cta — always a solid/gradient colour band, so the button needs guaranteed-readable text regardless of which design skin wins the background colour war (see .btn.btn--primary below, 3-class specificity beats any single-skin `.design-X .btn--primary` override). */ .sb-cta { background: var(--primary); color: #fff; } .sb-cta__in { text-align: center; max-width: 760px; margin-inline: auto; } .sb-cta h2 { color: #fff; font-size: clamp(1.9rem, 4.5vw, 3rem); } .sb-cta .btn.btn--primary { background: rgba(255,255,255,.16); color: #fff; border: 2px solid rgba(255,255,255,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* hover deliberately NOT overridden here — the sitewide metallic/gold hover (.btn.btn--primary:hover below) already gives strong contrast on its own light gradient and should stay consistent everywhere. */ /* map */ .sb-map iframe { width: 100%; height: 460px; border: 0; display: block; border-radius: var(--radius); } /* team */ .sb-member__photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; box-shadow: var(--shadow); } .sb-member__role { color: var(--primary); font-weight: 600; margin-bottom: .5rem; } /* catalogue */ .sb-cat__filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; } .sb-cat__filter button { border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: .5em 1.2em; border-radius: 999px; cursor: pointer; font-weight: 600; transition: all .2s var(--ease); } .sb-cat__filter button.is-active { background: var(--text); color: var(--bg); border-color: transparent; } /* contact form */ .sb-contact__form { max-width: 640px; margin: 2rem auto 0; display: grid; gap: .75rem; } .sb-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .sb-contact__form input, .sb-contact__form textarea { padding: .85em 1.05em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .sb-contact__form textarea { min-height: 130px; resize: vertical; } @media (max-width: 560px) { .sb-contact__row { grid-template-columns: 1fr; } } /* inline AJAX "thank you" card that replaces a submitted form in place (no page navigation). Explicit color:var(--text) since this can land inside .sb-formsec's white-on-gradient section — .sb-card itself sets no color, it'd otherwise inherit that white and go invisible on its own light --surface background. */ .sb-form__thanks { max-width: 640px; margin: 2rem auto 0; color: var(--text); animation: sbThanksIn .35s var(--ease); } .sb-form__thanks-icon { width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 50%; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; } .sb-form__thanks h3 { margin: 0 0 .5rem; } .sb-form__thanks p { margin: 0 0 1.25rem; color: var(--muted); } @keyframes sbThanksIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } /* form builder forms — brand gradient backdrop (same treatment as the slider's letterbox fix) with a faint blurred brand-mark watermark; inputs keep their own light --surface background so they read as clean cards floating on the gradient, only headings/labels need a colour flip. */ .sb-formsec { position: relative; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; overflow: hidden; } .sb-formsec::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--brand-logo-bg, none); background-position: center; background-repeat: no-repeat; background-size: 30% auto; opacity: .14; filter: blur(18px); pointer-events: none; } .sb-formsec .sb-wrap { position: relative; z-index: 1; } .sb-formsec .sb-sec__eyebrow { color: rgba(255,255,255,.85); } /* .sb-sec__title.sb-sec__title beats .design-vibrant .sb-sec__title's gradient-clip-text effect (equal 2-class specificity otherwise, and that skin rule loads after base.css so it would win the tie) — without resetting background/-webkit-background-clip too, "color: #fff" alone is a no-op because the title's fill still comes from its own clipped gradient, which on this same gradient backdrop made part of every heading nearly disappear into it. */ .sb-formsec .sb-sec__title.sb-sec__title { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; } .sb-formsec .sb-form__intro { color: rgba(255,255,255,.88); } .sb-formsec .sb-field > label { color: #fff; } .sb-formsec .btn.btn--primary { background: rgba(255,255,255,.16); color: #fff; border: 2px solid rgba(255,255,255,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .sb-formsec__in { max-width: 680px; } .sb-form { display: grid; gap: 1.15rem; max-width: 680px; margin-inline: auto; } .sb-form__intro { color: var(--muted); margin: 0; font-size: 1.05rem; } .sb-field { display: grid; gap: .4rem; } .sb-field > label { font-weight: 600; font-size: .95rem; } .sb-field input, .sb-field select, .sb-field textarea { padding: .85em 1.05em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .sb-field input:focus, .sb-field select:focus, .sb-field textarea:focus, .sb-contact__form input:focus, .sb-contact__form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); } .sb-field textarea { min-height: 130px; resize: vertical; } .sb-field.has-err input, .sb-field.has-err select, .sb-field.has-err textarea { border-color: #ff3b30; } .sb-field__err { color: #ff3b30; font-size: .85rem; } .sb-req { color: #ff3b30; } .sb-choices { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; } .sb-choice, .sb-consent { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; } .sb-choice input, .sb-consent input { width: auto; accent-color: var(--primary); } .sb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* slider — responsive to the image's own ratio: container is 16:9 (matches every current slide photo exactly, e.g. 1600x900/1024x576), and the image uses "contain" so the full photo always shows at its native proportions — no cropping, no cut-off faces, never distorted. Any future photo with a different ratio still shows in full (letterboxed in the brand colour) rather than being cropped. */ .sb-slider { position: relative; width: 100%; overflow: hidden; } .sb-slider__track { display: flex; width: 100%; transition: transform .6s var(--ease); } .sb-slider[data-swipe="1"] .sb-slider__track { cursor: grab; } .sb-slider[data-swipe="1"] .sb-slider__track.is-dragging { cursor: grabbing; } .sb-slider[data-swipe="1"] .sb-slide { -webkit-user-select: none; user-select: none; } /* No min/max-height clamp on purpose: with a plain aspect-ratio the slide's rendered box is ALWAYS exactly 16:9, so a 16:9 photo under background-size:contain fills it with zero gap at any viewport width. A px min/max-height clamp used to force the box off-ratio at very narrow or very wide viewports, which is what produced the grey letterbox bars either side. */ .sb-slide { position: relative; flex: 0 0 100%; width: 100%; min-width: 0; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)) center/cover no-repeat; overflow: hidden; } .sb-slide.sb-slide.sb-slide { background-size: contain; } /* see the .sb-hero fix note above — same shorthand-collision issue, same fix */ /* Soft brand-mark backdrop: sits behind the dark scrim (z-index 1) and text (z-index 2), above the slide's own photo/gradient background — shows through faintly everywhere, and is the only thing visible if a slide has no photo at all. Driven by --brand-logo-bg set once on . */ .sb-slide::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--brand-logo-bg, none); background-position: center; background-repeat: no-repeat; background-size: 42% auto; opacity: .16; filter: blur(16px); pointer-events: none; } .sb-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.5)); } .sb-slide__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .sb-slide__in { position: relative; z-index: 2; width: min(820px, 90vw); padding: 2rem; } .sb-slide h2 { font-size: clamp(1.5rem, 6vw, 3.6rem); text-shadow: 0 4px 40px rgba(0,0,0,.25); } .sb-slide p { font-size: clamp(1rem, 2.4vw, 1.35rem); opacity: .96; } .sb-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: color-mix(in srgb, #000 32%, transparent); backdrop-filter: blur(8px); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; transition: background .2s var(--ease); } .sb-slider__nav:hover { background: color-mix(in srgb, #000 55%, transparent); } .sb-slider__prev { left: 1.25rem; } .sb-slider__next { right: 1.25rem; } /* footer */ .sb-footer { background: var(--surface); border-top: 1px solid var(--border); } .sb-footer__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding: 3.5rem 0; } .sb-footer__brand { font-size: 1.2rem; letter-spacing: -0.02em; } .sb-footer__tag { color: var(--muted); margin: .35rem 0 .6rem; } .sb-footer__col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 .8rem; font-weight: 700; } .sb-footer__col a, .sb-footer__col span { display: block; margin-bottom: .4rem; } .sb-footer a { color: var(--text); opacity: .85; } .sb-footer a:hover { opacity: 1; color: var(--primary); } .sb-footer__bar { text-align: center; padding: 1.25rem; color: var(--muted); border-top: 1px solid var(--border); font-size: .88rem; } @media (max-width: 700px) { .sb-footer__in { grid-template-columns: 1fr; gap: 1.75rem; } } /* footer / contact social icons + "get directions" link */ .sb-footer__social { display: flex; gap: .6rem; margin-top: .9rem; } .sb-footer__social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); color: var(--text); opacity: 1; transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease); } .sb-footer__social a:hover { transform: translateY(-2px); background: var(--primary); color: #fff; border-color: transparent; } .sb-footer__social svg { width: 18px; height: 18px; } .sb-directions { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--primary); opacity: 1; margin-top: .3rem; } .sb-directions svg { width: 17px; height: 17px; } .sb-directions:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; } /* Google-style reviews widget (admin-curated, no external API) */ .sb-reviews__summary { text-align: center; font-weight: 700; color: var(--muted); margin: -.5rem 0 1.75rem; letter-spacing: -0.01em; } .sb-reviews__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .sb-review { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .sb-review__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; } .sb-review__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-weight: 700; flex: none; } .sb-review__name { font-weight: 700; } .sb-review__date { color: var(--muted); font-size: .82rem; } .sb-review__stars { color: var(--accent); letter-spacing: 2px; margin-bottom: .5rem; } .sb-review__text { color: var(--text); margin: 0; } .sb-reviews__more, .sb-instagram__more { text-align: center; margin-top: 2rem; font-weight: 650; } /* Instagram feed (official oEmbed widget, no API key). Instagram's own embed.js replaces the blockquote with an