@layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: "Segoe UI", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --spacing: 0.25rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .text-center { text-align: center; } } .listing-description-field { min-width: 0; } .listing-description-field>label { display: block; font-weight: 600; } .listing-description-editor { position: relative; min-width: 0; } .listing-description-editor [hidden] { display: none !important; } .listing-description-editor.is-enhanced { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s,box-shadow .15s; } .listing-description-editor.is-enhanced:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent); } } .listing-description-editor.is-enhanced.has-error { border-color: var(--brand); } .listing-description-editor.is-enhanced>textarea { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .listing-description-editor .ql-toolbar.ql-snow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; background: var(--subtle); font-family: inherit; } .listing-description-editor .ql-toolbar.ql-snow .ql-formats { display: flex; gap: 2px; margin: 0; padding: 0 7px 0 0; border-right: 1px solid var(--line); } .listing-description-editor .ql-toolbar.ql-snow .ql-formats:last-child { padding: 0; border-right: 0; } .listing-description-editor .ql-toolbar.ql-snow button { display: inline-flex; align-items: center; justify-content: center; float: none; width: 36px; height: 36px; padding: 8px; border-radius: 6px; color: var(--ink); transition: background .15s,color .15s; } .listing-description-editor .ql-toolbar.ql-snow button:hover,.listing-description-editor .ql-toolbar.ql-snow button.ql-active { background: var(--green); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb,var(--green) 11%,var(--surface)); } color: var(--green); } .listing-description-editor .ql-toolbar.ql-snow button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .listing-description-editor .ql-toolbar.ql-snow button .ql-stroke { stroke: currentColor; } .listing-description-editor .ql-toolbar.ql-snow button .ql-fill { fill: currentColor; } .listing-description-editor .ql-toolbar.ql-snow button svg { width: 19px; height: 19px; } .listing-description-editor .ql-container.ql-snow { border: 0; font-family: inherit; font-size: 16px; line-height: 1.75; border-radius: 0 0 11px 11px; } .listing-description-editor .ql-editor { min-height: 240px; max-height: 680px; overflow-y: auto; padding: 18px 20px; font-weight: 400; color: var(--ink); line-height: 1.75; overflow-wrap: anywhere; tab-size: 4; } .listing-description-editor .ql-editor:focus { outline: none; } .listing-description-editor .ql-editor.ql-blank::before { color: var(--muted); } .listing-description-editor .ql-tooltip { display: none !important; } .listing-description-editor .ql-editor p,.listing-description-editor .ql-editor blockquote { margin: 0 0 .75em; } .listing-description-editor .ql-editor h2 { font-size: 1.35em; line-height: 1.4; margin: 1em 0 .45em; } .listing-description-editor .ql-editor h3 { font-size: 1.15em; line-height: 1.45; margin: 1em 0 .45em; } .listing-description-editor .ql-editor> :first-child { margin-top: 0; } .listing-description-editor .ql-editor> :last-child { margin-bottom: 0; } .listing-description-editor .ql-editor blockquote { border-left: 3px solid var(--green); padding-left: 16px; color: var(--muted); } .listing-description-editor .ql-editor a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .listing-description-link { padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); } .listing-description-link>label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; } .listing-description-link-controls { display: flex; gap: 8px; align-items: center; } .listing-description-link-controls input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; font-size: 14px; } .listing-description-link-controls .button { min-height: 40px; padding: 8px 12px; white-space: nowrap; font-size: 13px; } .listing-description-link-error { display: block; margin-top: 6px; color: var(--brand); font-size: 12px; } .listing-description-link-error:empty { display: none; } .listing-description-content { overflow-wrap: anywhere; line-height: 1.8; } .listing-description-content p { margin: 0 0 1em; } .listing-description-content h2 { font-size: 1.35em; line-height: 1.4; margin: 1.5em 0 .65em; } .listing-description-content h3 { font-size: 1.15em; line-height: 1.45; margin: 1.3em 0 .6em; } .listing-description-content ul,.listing-description-content ol { margin: 0 0 1em; padding-left: 1.5em; } .listing-description-content ul { list-style: disc; } .listing-description-content ol { list-style: decimal; } .listing-description-content li { margin: .3em 0; padding-left: .15em; } .listing-description-content blockquote { margin: 1em 0; padding: .45em 1em; border-left: 3px solid var(--green); color: var(--muted); background: var(--subtle); border-radius: 0 6px 6px 0; } .listing-description-content a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .listing-description-content a:hover { text-decoration-thickness: 2px; } .listing-description-content> :first-child { margin-top: 0; } .listing-description-content> :last-child { margin-bottom: 0; } @media (max-width:600px) { .listing-description-editor .ql-toolbar.ql-snow { padding: 7px; gap: 5px 2px; } .listing-description-editor .ql-toolbar.ql-snow .ql-formats { padding-right: 4px; } .listing-description-editor .ql-toolbar.ql-snow button { width: 36px; height: 40px; } .listing-description-editor .ql-editor { min-height: 220px; max-height: 500px; padding: 15px; } .listing-description-link-controls { flex-wrap: wrap; } .listing-description-link-controls input { flex-basis: 100%; } } @layer ui { :root { --muted: #626c67; --brand: #c83e31; --brand-hover: #ab3026; --action: #c83e31; --action-hover: #ab3026; --shadow: 0 8px 30px #27362d0a; } [data-theme=dark] { --muted: #b3beb6; --brand: #ff9b8d; --brand-hover: #ffb5ab; --action: #c83e31; --action-hover: #ab3026; } body { font-size: 16px; } .admin-alert { justify-content: center; align-items: center; text-align: center; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } :is(input,select,textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } html:has(.listing-form) { scroll-padding-bottom: 140px; } .button { background: var(--action); min-height: 44px; padding-block: 11px; } .header-actions .publish-link { min-height: 40px; padding-block: 9px; } @media (max-width:850px),(pointer:coarse) { .header-actions .publish-link { min-height: 44px; padding-block: 11px; } } .button:hover { background: var(--action-hover); } .button-secondary { background: var(--surface); } .button-secondary:hover { background: var(--subtle); } .button-dark { background: #2d3c34; } .button-dark:hover { background: #1d2b22; } .button-danger { background: #b22f2f; } .brand-mark { background: var(--action); } .desktop-nav a { color: var(--muted); padding-block: 12px; } .desktop-nav a.active { color: var(--brand); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; } .icon-button { min-width: 42px; min-height: 42px; } .mobile-nav { max-height: calc(100dvh - 90px); overflow: auto; padding: 14px 22px; } .mobile-nav a { display: flex; justify-content: space-between; gap: 14px; min-height: 48px; padding: 12px; border-radius: 8px; } .mobile-nav a:hover,.mobile-nav a[aria-current] { background: var(--subtle); color: var(--brand); } .mobile-nav .icon { width: 16px; } .breadcrumbs { font-size: 12px; gap: 10px; } .page-heading { margin-bottom: 28px; } .page-heading h1 { font-size: clamp(30px,3.7vw,44px); letter-spacing: -.045em; } .page-heading>div>p:not(.context-label),.page-heading>p { margin-top: 12px; max-width: 720px; } .context-label { display: block; margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.5; } .page-heading .context-label { margin: 0 0 8px; font-size: 13px; } .page-main { padding-bottom: 64px; } .field { font-size: 14px; min-width: 0; } .field small,.muted.small { font-size: 12px; line-height: 1.6; } .field input::placeholder,.field textarea::placeholder { color: var(--muted); opacity: .8; } input:disabled,select:disabled { cursor: not-allowed; background: var(--subtle); } .checkbox,.check-group>label { min-height: 40px; align-items: center; } .hero-description,.hero-proof { color: var(--muted); } .hero-alternative { font-size: 13px; margin-top: 18px; max-width: 540px; } .hero-alternative a { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .hero-alternative .icon { width: 16px; } .hero-search { border-color: var(--line); } .category-card h3 { font-size: 16px; } .category-card p { font-size: 12px; line-height: 1.65; color: var(--muted); } .category-card { min-height: 180px; } .footer-top>div:last-child { display: block; } .footer-top a { min-height: 32px; } .form-grid>.category-picker { grid-column: 1/-1; min-width: 0; } .category-levels { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 14px; align-items: start; } .category-levels .field { margin-bottom: 0; } .category-picker select { width: 100%; min-width: 0; text-overflow: ellipsis; } .category-path { font-size: 12px; padding-top: 8px; color: var(--green); overflow-wrap: anywhere; } .category-picker-hint { font-size: 12px; display: block; margin-top: 7px; line-height: 1.6; } .category-quick-search { margin-top: 10px; font-size: 13px; } .category-quick-search>summary { color: var(--green); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; display: flex; align-items: center; } .category-quick-search .field { margin-block: 8px 0; } .category-directory-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; padding: 22px 24px; background: var(--subtle); margin-bottom: 24px; } .category-directory-toolbar .field { flex: 1; min-width: 220px; margin: 0; } .categories-directory { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 20px; } .category-directory-card { padding: 25px; margin: 0; border-radius: 14px; } .category-directory-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .category-directory-heading .category-icon { margin: 0; flex-shrink: 0; background: var(--cream); color: var(--green); width: 44px; height: 44px; } .category-directory-heading h2 { font-size: 19px; line-height: 1.35; margin: 0; letter-spacing: -.02em; } .category-directory-heading h2 a:hover { color: var(--brand); } .category-tree { padding: 0; margin: 0; list-style: none; } .category-tree-node>a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; padding: 9px 0; border-top: 1px solid var(--line); } .category-tree-node>a:hover { color: var(--brand); } .category-tree-node>a .icon { width: 15px; color: var(--muted); } .category-tree-branch>summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; list-style: none; } .category-tree-branch>summary::-webkit-details-marker { display: none; } .category-tree-branch>summary:hover { color: var(--brand); } .category-tree-branch>summary .icon { width: 15px; flex-shrink: 0; color: var(--muted); transition: transform .15s; } .category-tree-branch[open]>summary .icon { transform: rotate(90deg); } .category-tree-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 7px 14px; font-size: 12px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .category-tree-all .icon { width: 15px; flex-shrink: 0; } .category-tree .category-tree { padding-left: 14px; border-left: 2px solid var(--line); margin-left: 3px; } .category-directory-browse { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 32px; font-size: 13px; } .category-directory-browse .icon { width: 16px; } .directory-filters { padding: 26px; border-radius: 14px; background: var(--subtle); box-shadow: none; } .filter-form .filter-primary { grid-template-columns: minmax(180px,1fr) minmax(0,2fr); align-items: start; gap: 20px; } .filter-primary>.category-picker { grid-column: auto; } .filter-primary>.location-picker { padding-top: 18px; border-top: 1px solid var(--line); } .advanced-filters { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 8px; } .advanced-filters>summary { display: flex; align-items: center; gap: 9px; min-height: 48px; font-size: 14px; font-weight: 650; } .advanced-filters>summary>.icon:first-child { width: 18px; color: var(--muted); } .advanced-filters>summary>.icon:last-child { margin-left: auto; width: 17px; transition: transform .15s; } .advanced-filters[open]>summary>.icon:last-child { transform: rotate(180deg); } .filter-form .advanced-filters>.form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-block: 12px 18px; } .filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; grid-column: 1/-1; } .filter-actions>.button { min-width: 140px; flex-shrink: 0; } .filter-status { font-size: 12px; line-height: 1.7; } [data-filter-error] { grid-column: 1/-1; margin-top: 14px; font-size: 13px; } #directory-results { transition: opacity .18s; } #directory-results[aria-busy=true] { opacity: .55; pointer-events: none; } .results-heading { margin-bottom: 20px; align-items: center; } .results-heading h2 { font-size: 24px; } .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; } .filter-chip { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 36px; padding: 6px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 30px; font-size: 12px; } .filter-chip:hover { border-color: var(--brand); color: var(--brand); } .filter-chip span { overflow-wrap: anywhere; min-width: 0; } .filter-chip .icon { width: 14px; height: 14px; } .active-filters>.text-link { padding: 8px; } .directory-empty { border: 1px dashed var(--line); border-radius: 16px; background: var(--surface); padding: 48px 24px; } .empty-symbol { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; background: var(--cream); border-radius: 50%; color: var(--green); } .empty-symbol .icon { margin: 0; width: 28px; height: 28px; } .directory-empty p { max-width: 540px; margin: 12px auto 24px; } .empty-state .button-row { justify-content: center; margin-top: 22px; } .listing-card { overflow: hidden; border-radius: 14px; display: flex; flex-direction: column; } .listing-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; } .listing-card-body h3 { font-size: 19px; line-height: 1.35; letter-spacing: -.025em; } .listing-card-body>p { font-size: 14px; line-height: 1.65; } .listing-card-body>.card-meta:last-child { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); justify-content: space-between; } .listing-card-body .text-link { min-height: 36px; display: inline-flex; align-items: center; } .pagination { flex-wrap: wrap; } .pagination a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } body:has(.listing-form) .page-main { max-width: 1040px; } .listing-form.panel { padding: 0; background: transparent; border: 0; box-shadow: none; } .form-intro { margin-bottom: 26px; } .form-intro>p { font-size: 14px; margin-bottom: 14px; } .form-section-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; } .form-section-nav a { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 12px; line-height: 1.5; font-weight: 600; background: var(--surface); min-height: 60px; } .form-section-nav a:hover,.form-section-nav a[aria-current="location"] { border-color: var(--green); background: var(--subtle); } .form-section-number { display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; line-height: 1; background: var(--subtle); color: var(--green); font-weight: 700; } .listing-form-section { border: 1px solid var(--line); border-radius: 14px; padding: 30px; background: var(--surface); margin-bottom: 22px; scroll-margin-top: 24px; } .form-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .form-section-heading .form-section-number { width: 38px; height: 38px; background: var(--cream); font-size: 15px; } .form-section-heading h2 { font-size: 23px; margin: 0; } .listing-form-section>.field { margin-block: 20px; } .listing-form-section>.form-grid { margin-block: 20px; } .listing-form-section>p { font-size: 14px; } .field-guidance { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font-weight: 400; font-size: 12px; color: var(--muted); } .field-guidance small { max-width: 670px; } .field-guidance>output:only-child { margin-left: auto; } .field-counter { white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; } .field-optional { font-weight: 400; color: var(--muted); font-size: 12px; } .form-error-summary { display: block !important; padding: 22px; } .form-error-summary[hidden] { display: none !important; } .form-error-summary h2 { font-size: 18px; margin: 0 0 10px; } .form-error-summary ul { margin: 0; } .form-error-summary a { text-decoration: underline; text-underline-offset: 3px; } .listing-form [aria-invalid=true] { border: 2px solid #b22f2f !important; } .listing-submit-bar { position: sticky; bottom: 12px; z-index: 8; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px; box-shadow: 0 6px 28px #182c2418; gap: 10px; } .listing-submit-bar>[data-autosave-status] { flex-basis: 100%; font-size: 12px; } .listing-submit-bar>[data-autosave-status]:empty { display: none; } .form-submit-note { margin-top: 18px; max-width: 700px; font-size: 13px !important; } .form-back-link { display: inline-flex; min-height: 36px; align-items: center; color: var(--muted); font-size: 13px; } .listing-form-section .service-row { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); margin-block: 18px; } .cookie-banner { max-height: 65dvh; overflow: auto; z-index: 100; } .cookie-banner p,.cookie-banner label { color: var(--muted); } .cookie-actions .button { min-height: 44px; } [data-theme=dark] .category-icon,[data-theme=dark] .step-icon { background: var(--subtle); color: var(--green); } @media (max-width:1000px) { .categories-directory { grid-template-columns: repeat(2,minmax(0,1fr)); } .filter-form .filter-primary { grid-template-columns: 1fr; } .filter-primary>.category-picker { grid-column: 1/-1; } .filter-form .advanced-filters>.form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .form-section-nav { grid-template-columns: repeat(2,minmax(0,1fr)); } .footer-top { grid-template-columns: repeat(3,minmax(0,1fr)); } .footer-brand { grid-column: 1/-1; } } @media (max-width:600px) { html:has(.listing-form) { scroll-padding-bottom: 24px; } .field { font-size: 14px; } input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea { font-size: 16px !important; } .theme-toggle { width: 42px; height: 42px; } .category-grid { gap: 12px; } .category-card { padding: 18px 14px; min-height: 177px; } .category-card h3 { font-size: 14px; min-height: 0; } .category-card p { font-size: 11px; } .categories-directory { grid-template-columns: 1fr; } .category-levels { grid-template-columns: 1fr; } .category-directory-card { padding: 22px; } .category-directory-toolbar { padding: 18px; } .hero-search input,.hero-search select { font-size: 16px !important; } .hero-alternative { font-size: 12px; line-height: 1.8; } .hero-proof { font-size: 12px; } .directory-filters { padding: 20px; } .filter-form .advanced-filters>.form-grid { grid-template-columns: 1fr; } .filter-actions { align-items: stretch; flex-direction: column; gap: 10px; } .filter-actions>.button { width: 100%; } .results-heading { flex-wrap: wrap; gap: 12px; } .results-heading h2 { font-size: 22px; } .filter-chip { min-height: 44px; } .empty-state .button-row { align-items: stretch; flex-direction: column; } .listing-form-section { padding: 20px; } .form-section-heading { gap: 10px; margin-bottom: 20px; } .form-section-heading h2 { font-size: 20px; } .form-section-nav a { font-size: 12px; gap: 8px; padding: 10px; } .form-section-nav .form-section-number { width: 24px; height: 24px; font-size: 11px; } .field-guidance { display: block; } .field-counter { display: block; text-align: right; margin-top: 4px; } .listing-submit-bar { position: static; display: grid; grid-template-columns: 1fr 1fr; padding: 14px; } .listing-submit-bar .button { width: 100%; min-width: 0; font-size: 12px; padding: 12px 10px; } .listing-submit-bar>.button:first-child,.listing-submit-bar>[data-autosave-status] { grid-column: 1/-1; } .footer-top { grid-template-columns: repeat(2,minmax(0,1fr)); } .footer-top>div:last-child { grid-column: 1/-1; } .footer-top h3 { font-size: 14px; } .footer-top>div>a:not(.brand) { font-size: 13px; min-height: 40px; display: flex; align-items: center; } .footer-bottom { font-size: 12px; } .footer-bottom>div { flex-wrap: wrap; } .footer-bottom a,.footer-bottom button { min-height: 36px; display: inline-flex; align-items: center; } } @media (prefers-reduced-motion:reduce) { #directory-results,.advanced-filters>summary>.icon:last-child { transition: none; } } @media print { .form-section-nav,.listing-submit-bar { display: none; } .listing-form-section { border: 0; padding: 0; } } } @layer ui { .media-order-item { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 9px; background: var(--surface); transition: border-color .15s,box-shadow .15s; } .media-order-item:focus-visible,.media-drag-handle:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .media-order-item.is-dragging { opacity: .38; outline: 2px dashed var(--brand); outline-offset: 2px; border-color: var(--brand); background: var(--subtle); } .media-gallery[data-media-gallery] .portfolio-grid[data-media-sort] { grid-template-columns: repeat(auto-fill,minmax(min(100%,190px),1fr)); gap: 14px; align-items: start; margin-top: 18px; margin-bottom: 0; } .media-order-visual { position: relative; overflow: hidden; border-radius: 8px; background: var(--subtle); } .media-gallery[data-media-gallery] .portfolio-grid[data-media-sort] img { display: block; width: 100%; height: 155px; object-fit: cover; border-radius: 8px; user-select: none; -webkit-user-drag: none; } .media-gallery .media-order-item[draggable=true] .media-order-visual { cursor: grab; } .media-cover-badge { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 4px 8px; border-radius: 5px; background: var(--surface); color: var(--green); box-shadow: 0 1px 5px #0002; font-size: 11px; font-weight: 650; line-height: 1.5; } .media-drag-handle { position: absolute; right: 7px; bottom: 7px; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px #0002; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .media-drag-handle:hover { border-color: var(--green); color: var(--green); } .media-grip { display: block; flex: 0 0 12px; width: 12px; height: 18px; background-image: radial-gradient(circle,currentColor 1.5px,transparent 1.7px); background-size: 6px 6px; } .media-order-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-block: 6px; } .media-position { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); margin: 0; line-height: 1.4; } .media-order-item button:disabled { cursor: not-allowed; opacity: .4; transform: none; } .media-order-item>[data-media-mutating] { margin-top: 6px; } .media-order-item .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 12px; } .media-order-item .text-link .icon { width: 16px; height: 16px; } .media-drag-preview { position: fixed; z-index: 2000; pointer-events: none; object-fit: cover; aspect-ratio: 4/3; max-height: 150px; border: 3px solid var(--surface); outline: 1px solid var(--brand); border-radius: 10px; box-shadow: 0 12px 32px #0004; opacity: .96; transform: rotate(-3deg); } .media-gallery .is-sort-active,.media-gallery .is-sort-active .media-order-visual,.media-gallery .is-sort-active .media-drag-handle { cursor: grabbing; } .media-gallery .is-sort-active { user-select: none; -webkit-user-select: none; } .media-order-status { font-size: 13px; min-height: 1.7em; margin-top: 14px; } .media-gallery [data-media-error] { margin-block: 10px; } .media-gallery [data-media-order-state=saving] { cursor: progress; } .media-gallery [data-media-order-state=saving] .media-order-item { cursor: progress; } @media (max-width:600px) { .media-gallery[data-media-gallery] .portfolio-grid[data-media-sort] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .media-gallery[data-media-gallery] .portfolio-grid[data-media-sort] img { height: 145px; } .media-order-item { padding: 7px; } .media-order-toolbar { flex-wrap: wrap; gap: 4px; } .media-position { font-size: 11px; } } @media (max-width:380px) { .media-gallery[data-media-gallery] .portfolio-grid[data-media-sort] img { height: 125px; } .media-order-toolbar { display: grid; grid-template-columns: 1fr; } .media-position { margin-block: 4px; } } } @layer ui { .photo-upload { margin-block: 24px; } .photo-upload-label { margin-bottom: 10px; } .photo-dropzone { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 27px 20px; border: 2px dashed #c8cec7; border-radius: 12px; background: var(--subtle); text-align: center; transition: border-color .15s,background .15s; } .photo-dropzone strong { font-size: 17px; font-weight: 650; color: var(--ink); } .photo-dropzone>span.muted { font-size: 13px; } .photo-drop-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--green); } .photo-dropzone .button { margin: 0; min-width: 190px; } .photo-dropzone.is-dragover { border-color: var(--brand); background: var(--cream); } .photo-dropzone.is-uploading { opacity: .65; } .photo-upload-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 14px; } .photo-upload-meta p,.photo-upload-help { font-size: 12px; } .photo-upload-meta .count-pill { flex-shrink: 0; } .photo-upload-help { margin-top: 7px; } .photo-preview-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 14px; margin-top: 18px; } .photo-preview-grid:empty { display: none; } .photo-preview { position: relative; min-width: 0; padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; cursor: grab; } .photo-preview.is-dragging { opacity: .5; outline: 2px dashed var(--brand); } .photo-preview>img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; pointer-events: none; } .photo-preview .photo-filename { margin: 8px 3px; font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .photo-position { position: absolute; top: 15px; left: 15px; border-radius: 5px; background: #18241ed9; color: white; font-size: 11px; padding: 2px 7px; } .photo-remove { position: absolute; right: 11px; top: 11px; width: 36px; height: 36px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 50%; font-size: 26px; line-height: 1; box-shadow: 0 2px 8px #0002; } .photo-remove:hover { background: #fff0eb; color: #a13e29; } .photo-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .photo-preview-actions .button { min-height: 40px; padding: 6px; font-size: 19px; } .photo-upload button:disabled { cursor: not-allowed; transform: none; } .photo-upload-status { font-size: 13px; margin-top: 12px; } .photo-upload-status:empty { display: none; } .photo-upload [data-photo-error] { white-space: pre-line; margin-block: 14px; } .photo-upload [data-photo-retry] { margin-top: 10px; } .photo-upload .media-gallery { padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin-top: 22px; padding-top: 18px; } .photo-upload .media-gallery h2 { font-size: 16px; margin: 0; } .photo-upload .media-gallery .portfolio-grid { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); } .photo-upload .media-gallery .portfolio-grid img { height: 150px; } @media (max-width:450px) { .photo-preview-grid,.photo-upload .media-gallery .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .photo-preview>img,.photo-upload .media-gallery .portfolio-grid img { height: 120px; } .photo-dropzone { padding: 22px 12px; } .photo-dropzone strong { font-size: 16px; } .photo-upload-meta { gap: 9px; } .photo-upload .media-order-actions { grid-template-columns: 1fr; } .photo-upload .media-order-actions .button { min-height: 40px; } } } @layer ui { .phone-upload-trigger { align-self: flex-start; gap: 8px; margin-top: 10px; white-space: normal; } .phone-upload-trigger svg { width: 19px; height: 19px; flex-shrink: 0; } .phone-upload-dialog { width: min(460px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 90px #152d3040; overflow: auto; } .phone-upload-dialog::backdrop { background: #13262d80; backdrop-filter: blur(3px); } .phone-upload-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .phone-upload-symbol,.phone-upload-mobile-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--cream); color: var(--green); } .phone-upload-dismiss { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 26px; line-height: 1; } .phone-upload-dialog h2 { font-size: 24px; line-height: 1.25; margin: 0; } .phone-upload-dialog>p { font-size: 14px; line-height: 1.6; margin: 12px 0; color: var(--muted); } .phone-upload-qr { display: flex; justify-content: center; max-width: 260px; padding: 8px; margin: 22px auto 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .phone-upload-qr img { display: block; width: 100%; height: auto; max-width: 240px; aspect-ratio: 1; image-rendering: pixelated; } .phone-upload-qr[hidden] { display: none; } .phone-upload-dialog .phone-upload-expiry { text-align: center; font-size: 12px; } .phone-upload-dialog .phone-upload-status { color: var(--green); font-weight: 600; } .phone-upload-dialog .phone-upload-error,.phone-upload-error { color: #b22f2f; font-size: 14px; line-height: 1.6; } .phone-upload-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .phone-upload-actions .button { font-size: 13px; padding: 10px 14px; min-height: 40px; } .phone-upload-mobile-page { min-height: 100vh; background: var(--subtle); } .phone-upload-mobile { width: min(100%,520px); margin: 0 auto; padding: 28px 18px 50px; } .phone-upload-mobile>.brand { justify-content: center; margin-bottom: 28px; font-size: 26px; } .phone-upload-mobile-card { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 26px; } .phone-upload-mobile-symbol { margin-bottom: 18px; } .phone-upload-mobile-card h1 { font-size: 28px; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 12px; } .phone-upload-mobile-card>p { font-size: 15px; line-height: 1.65; color: var(--muted); } .phone-upload-mobile-picker { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px 14px; margin: 24px 0 10px; border: 1px dashed var(--green); border-radius: 14px; background: var(--cream); cursor: pointer; position: relative; overflow: hidden; } .phone-upload-mobile-picker>span:first-child { display: grid; place-items: center; background: var(--surface); color: var(--green); width: 42px; height: 42px; border-radius: 50%; margin-bottom: 4px; } .phone-upload-mobile-picker strong { font-size: 16px; } .phone-upload-mobile-picker>span { font-size: 13px; color: var(--muted); } .phone-upload-mobile-picker input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .phone-upload-mobile-picker:focus-within { outline: 3px solid var(--green); outline-offset: 3px; } .phone-upload-mobile-picker:has(input:disabled) { opacity: .55; cursor: default; } .phone-upload-mobile-limit,.phone-upload-mobile-format { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 6px 0; } .phone-upload-mobile-files { display: grid; gap: 8px; margin-top: 18px; } .phone-upload-mobile-file { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; } .phone-upload-mobile-file img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .phone-upload-mobile-file span { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; } .phone-upload-mobile-file button { width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--subtle); color: var(--ink); font-size: 24px; } .phone-upload-mobile-submit { width: 100%; margin-top: 18px; } .phone-upload-mobile .phone-upload-status { font-size: 14px; line-height: 1.65; color: var(--green); font-weight: 600; margin-top: 16px; } .phone-upload-mobile-card .phone-upload-mobile-note { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; font-size: 13px; } @media (max-width:480px) { .phone-upload-dialog { padding: 22px; } .phone-upload-mobile { padding: 22px 12px; } .phone-upload-mobile-card { padding: 22px; } .phone-upload-mobile-card h1 { font-size: 26px; } } } @layer components { .social-sign-in { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 12px; } .social-sign-in form { min-width: 0; margin: 0; } .social-sign-in-button { width: 100%; min-height: 46px; gap: 10px; padding: 10px 16px; font-size: 14px; } .social-sign-in-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; background: #fff; } .social-sign-in-mark img { display: block; width: 20px; height: 20px; object-fit: contain; } .social-sign-in-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 13px; } .social-sign-in-divider::before,.social-sign-in-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); } .social-sign-in-divider span { text-align: center; } .social-login-guide { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); } .social-login-guide>h3 { font-size: 18px; margin: 0 0 8px; } .social-login-guide>p { font-size: 14px; line-height: 1.65; } .social-login-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; } .social-login-provider-guide { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--surface); } .social-login-guide-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .social-login-guide-heading h4 { font-size: 17px; font-weight: 700; margin: 0; } .social-login-status { display: inline-flex; padding: 4px 9px; border-radius: 7px; background: var(--subtle); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.5; } .social-login-status.is-configured { background: var(--accent-soft); color: var(--brand); } .social-login-status-help { font-size: 13px; line-height: 1.6; margin-top: 12px; } .social-login-instructions { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .social-login-instructions summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; } .social-login-instructions summary::-webkit-details-marker { display: none; } .social-login-instructions summary svg { width: 18px; height: 18px; flex: none; } .social-login-instructions[open] summary svg { transform: rotate(180deg); } .social-login-instructions ol { list-style: decimal; padding-left: 22px; margin: 18px 0; font-size: 13px; line-height: 1.8; } .social-login-instructions li+li { margin-top: 10px; } .social-login-instructions .field { font-size: 13px; margin-top: 16px; } .social-login-instructions input[readonly] { width: 100%; min-width: 0; font-size: 12px; font-family: monospace; padding: 12px; background: var(--subtle); } .social-login-instructions>a { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--brand); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .social-login-instructions>a svg { width: 16px; height: 16px; } .social-login-config-notice { font-size: 13px; line-height: 1.6; margin-top: 10px; color: var(--muted); } .social-login-guide-note { margin-top: 18px; } @media (max-width:700px) { .social-login-guide-grid { grid-template-columns: 1fr; } .social-login-provider-guide { padding: 16px; } } } @font-face { font-family: "Google Sans Sign In"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/vendor/google-signin/google-sans-signin.woff2") format("woff2"); } @layer ui { .social-sign-in-button.social-sign-in-google { background: #fff; border: 1px solid #747775; color: #1f1f1f; font-family: "Google Sans Sign In",Arial,sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; padding: 10px 12px; gap: 10px; } .social-sign-in-button.social-sign-in-google:hover { background: #f8fafd; border-color: #747775; color: #1f1f1f; } } @layer ui { .listing-reviews { scroll-margin-top: 110px; } .reviews-heading,.reviews-toolbar,.review-entry-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .reviews-heading h2 { margin: 0; } .review-write-link { flex-shrink: 0; font-size: 14px; } .reviews-toolbar { margin-top: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .reviews-summary { display: flex; align-items: center; gap: 20px; } .reviews-average { font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -1.5px; } .reviews-summary>div { border-left: 1px solid var(--line); padding-left: 20px; } .reviews-summary p { margin: 5px 0 0; color: var(--muted); font-size: 13px; } .review-stars { display: inline-flex; color: #b87505; font-size: 20px; line-height: 1.2; letter-spacing: 2px; white-space: nowrap; } .review-stars-empty { color: var(--line); } [data-theme=dark] .review-stars { color: #f4bf57; } .reviews-sort { display: grid; gap: 6px; font-size: 13px; color: var(--muted); } .reviews-sort>div { display: flex; gap: 8px; } .review-sort-control { position: relative; display: block; flex: 1; min-width: 0; } .review-sort-control>.icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--green); pointer-events: none; } .review-sort-control select { min-height: 44px; width: 100%; padding: 9px 34px 9px 42px; font-size: 14px; cursor: pointer; } .reviews-sort button { font-size: 13px; } .reviews-sort.is-enhanced button { display: none; } .review-entry { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--line); } .review-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--subtle); color: var(--brand); font-weight: 700; font-size: 15px; } .review-entry-heading h3 { margin: 0; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; } .review-entry-heading .review-stars { font-size: 17px; } .review-service { font-size: 13px; margin: 6px 0 0; } .review-service span { font-weight: 500; } .review-aspects { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 20px 0 0; } .review-aspects dt { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .review-aspects dd { margin: 0; } .review-aspects .review-stars { font-size: 17px; letter-spacing: 1px; } .review-body { margin: 20px 0 10px; font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; } .review-date { font-size: 13px; color: var(--muted); } .reviews-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; } .reviews-pagination:empty,.reviews-load-status:empty { display: none; } .reviews-load-status { font-size: 13px; text-align: center; margin: 12px 0 0; } .reviews-pagination [aria-disabled=true] { opacity: .65; cursor: wait; } .reviews-empty { display: flex; align-items: center; gap: 14px; padding: 24px 0 4px; } .reviews-empty>svg { flex-shrink: 0; width: 28px; height: 28px; color: var(--brand); } .reviews-empty p { margin: 0; color: var(--muted); } .reviews-login-help { font-size: 13px; margin-bottom: 0; } .reviews-submitted { display: flex; align-items: center; gap: 10px; background: var(--subtle); border-radius: 10px; padding: 14px; font-size: 14px; margin: 22px 0 0; } .review-compose { margin-top: 24px; scroll-margin-top: 110px; } .review-compose>summary { font-weight: 700; color: var(--brand); cursor: pointer; padding-block: 6px; } .review-compose>form { margin-top: 20px; } .review-rating-field { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; } .review-rating-field legend { font-weight: 600; font-size: 14px; margin-bottom: 10px; } .review-rating-options { display: flex; flex-wrap: wrap; gap: 8px; } .review-rating-options label { position: relative; cursor: pointer; } .review-rating-options input { position: absolute; width: 1px; height: 1px; opacity: 0; } .review-rating-options label>span { display: flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 9px; min-height: 44px; font-weight: 600; } .review-rating-options label>span>span[aria-hidden] { color: #b87505; } .review-rating-options input:checked+span { border-color: var(--brand); background: var(--subtle); box-shadow: inset 0 0 0 1px var(--brand); } .review-rating-options input:focus-visible+span { outline: 3px solid var(--brand); outline-offset: 3px; } .review-extra { background: var(--subtle); padding: 16px; border-radius: 12px; margin: 18px 0; } .review-extra>summary { font-weight: 600; cursor: pointer; font-size: 14px; } .review-extra>summary .muted { font-weight: 400; margin-left: 8px; font-size: 12px; } .review-extra[open]>summary { margin-bottom: 20px; } .review-aspect-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } .review-aspect-fields .field { font-size: 13px; } .review-aspect-fields select { font-size: 14px; padding-inline: 10px; } .review-submit-row { display: flex; align-items: center; gap: 18px; } .review-submit-row small { max-width: 320px; } @media (max-width:650px) { .reviews-heading,.reviews-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 16px; } .reviews-heading { gap: 12px; } .review-write-link { padding: 9px 12px; font-size: 13px; } .reviews-average { font-size: 36px; } .reviews-toolbar { margin-top: 22px; } .reviews-sort { width: 100%; } .reviews-sort>div,.reviews-sort select { width: 100%; } .review-entry { grid-template-columns: 36px minmax(0,1fr); gap: 12px; padding-block: 23px; } .review-avatar { width: 36px; height: 36px; font-size: 12px; } .review-entry-heading { align-items: flex-start; flex-direction: column; gap: 6px; } .review-entry-heading h3 { font-size: 16px; } .review-aspects { gap: 13px 22px; margin-top: 16px; } .review-body { font-size: 15px; margin-top: 16px; } .review-aspect-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } .review-submit-row { align-items: flex-start; flex-direction: column; gap: 12px; } } } @layer ui { .listing-card .listing-image { position: relative; } .listing-boost-badge { position: absolute; z-index: 1; inset: 12px auto auto 12px; display: inline-flex; align-items: center; max-width: calc(100% - 24px); padding: 5px 8px; border: 1px solid var(--gold-line); border-radius: 8px; background: var(--gold-soft); color: var(--gold-ink); box-shadow: 0 2px 8px #17241e14; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; } .listing-boost-count { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-variant-numeric: tabular-nums; } .listing-boost-count>span { font-size: 16px; line-height: 1; } } @layer ui { .listing-photo-gallery .portfolio-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; } .listing-photo-gallery .portfolio-grid>a { grid-column: span 2; min-width: 0; height: clamp(170px,20vw,260px); background: var(--subtle); } .listing-photo-gallery .portfolio-grid--paired>a:nth-last-child(-n+2),.listing-photo-gallery .portfolio-grid--balanced>a:nth-last-child(-n+4) { grid-column: span 3; } .listing-photo-gallery .portfolio-grid--single>a { grid-column: 1/-1; height: clamp(220px,27vw,320px); } .listing-photo-gallery .portfolio-grid>a>img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } [data-photo-gallery] .portfolio-grid>a { cursor: zoom-in; display: block; border-radius: 12px; overflow: hidden; } [data-photo-gallery] .portfolio-grid>a:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; } .listing-photo-gallery .portfolio-grid--many { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 12px; } .listing-photo-gallery .portfolio-grid--many>a { grid-column: auto; height: clamp(132px,16vw,190px); } .listing-photo-gallery .portfolio-grid>a[hidden],.listing-gallery-toggle[hidden] { display: none; } .listing-gallery-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin: 0 0 24px; padding: 9px 13px; border: 1px solid var(--sage-line); border-radius: 9px; background: var(--sage-soft); color: var(--sage-ink); font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer; } .listing-gallery-toggle:hover { border-color: var(--sage-ink); } .listing-gallery-toggle:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .listing-gallery-toggle .icon { width: 17px; height: 17px; flex-shrink: 0; transition: transform .18s; } .listing-gallery-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } .photo-gallery { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #101719f5; color: #fff; box-shadow: none; overflow: hidden; color-scheme: dark; } .photo-gallery:not([open]) { display: none; } .photo-gallery[open] { display: flex; flex-direction: column; } .photo-gallery::backdrop { background: #101719eb; } .photo-gallery-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 20px; padding: 18px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left)); border-bottom: 1px solid #ffffff1c; } .photo-gallery-heading { min-width: 0; } .photo-gallery-heading h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: 0; color: #fff; } .photo-gallery-heading p { margin: 0; font-size: 13px; color: #bdc6c9; } .photo-gallery-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .photo-gallery-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; height: 44px; padding: 10px; border: 1px solid #ffffff36; border-radius: 10px; background: #273236; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .photo-gallery-button:hover:not(:disabled) { background: #3c4a4f; } .photo-gallery-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .photo-gallery-button:disabled { opacity: .35; cursor: default; } .photo-gallery-button .icon { width: 22px; height: 22px; } .photo-gallery-reset { min-width: 64px; font-size: 13px; font-variant-numeric: tabular-nums; } .photo-gallery-close { margin-left: 12px; } .photo-gallery-content { position: relative; flex: 1; min-height: 0; margin: 16px 80px; display: flex; } .photo-gallery-stage { position: relative; display: grid; place-items: center; flex: 1; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; user-select: none; cursor: zoom-in; } .photo-gallery-stage.is-zoomed { cursor: grab; } .photo-gallery-stage.is-dragging { cursor: grabbing; } .photo-gallery-stage>img { display: block; grid-area: 1/1; max-width: none; max-height: none; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; border-radius: 4px; } .photo-gallery-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0 !important; padding: 24px; text-align: center; color: #e3e9eb; font-size: 15px; } .photo-gallery-status:empty { display: none; } .photo-gallery-prev,.photo-gallery-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; } .photo-gallery-prev { left: -64px; } .photo-gallery-next { right: -64px; } .photo-gallery-footer { flex-shrink: 0; min-height: 70px; padding: 0 24px max(18px,env(safe-area-inset-bottom)); text-align: center; } .photo-gallery-footer>[data-gallery-caption] { margin: 0; color: #f1f4f5; font-size: 14px; line-height: 1.5; max-height: 3em; overflow-y: auto; overflow-wrap: anywhere; } .photo-gallery-footer .photo-gallery-help { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #aebbc0; } html.photo-gallery-open,html.photo-gallery-open body { overflow: hidden; overscroll-behavior: none; } @media (max-width:600px) { .listing-photo-gallery .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .listing-photo-gallery .portfolio-grid>a { grid-column: auto; height: clamp(132px,38vw,190px); border-radius: 10px; } .listing-photo-gallery .portfolio-grid--paired>a:nth-last-child(-n+2),.listing-photo-gallery .portfolio-grid--balanced>a:nth-last-child(-n+4) { grid-column: auto; } .listing-photo-gallery .portfolio-grid--odd>a:first-child { grid-column: 1/-1; height: 220px; } .photo-gallery-header { gap: 10px; flex-wrap: wrap; padding: 12px 16px; } .photo-gallery-heading h2 { font-size: 15px; } .photo-gallery-heading p { font-size: 12px; } .photo-gallery-tools { gap: 5px; margin-left: auto; } .photo-gallery-close { margin-left: 3px; } .photo-gallery-reset { min-width: 54px; } .photo-gallery-content { margin: 12px 8px; } .photo-gallery-prev,.photo-gallery-next { top: auto; bottom: 12px; transform: none; background: #182125e6; } .photo-gallery-prev { left: 8px; } .photo-gallery-next { right: 8px; } .photo-gallery-footer { min-height: 0; padding: 0 16px max(16px,env(safe-area-inset-bottom)); } .photo-gallery-footer .photo-gallery-help { display: none; } } @media (prefers-reduced-motion:reduce) { .listing-gallery-toggle .icon { transition: none; } } @media print { .listing-photo-gallery .portfolio-grid>a[hidden] { display: block; } .listing-gallery-toggle { display: none; } } } @layer ui { .listing-share { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; align-items: start; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .listing-share-action { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 550; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s,border-color .15s,color .15s; } .listing-share-action>.icon { width: 18px; height: 18px; flex-shrink: 0; } .listing-share-action>span { min-width: 0; overflow-wrap: anywhere; } .listing-share-action:hover { background: var(--subtle); border-color: var(--muted); color: var(--ink); } .listing-share-action:focus-visible,.listing-share-option:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .listing-share-main { width: 100%; border-color: var(--sage-line); background: var(--sage-soft); color: var(--sage-ink); font-size: 14px; font-weight: 650; list-style: none; } .listing-share-main::-webkit-details-marker { display: none; } .listing-share-main>.icon { width: 20px; height: 20px; } .listing-share-main:hover { background: var(--sage-soft); border-color: var(--sage-ink); color: var(--sage-ink); } .listing-share-main>.listing-share-chevron { width: 14px; height: 14px; margin-left: auto; } .listing-share-menu { min-width: 0; } .listing-share-menu[open] .listing-share-main { border-color: var(--green); } .listing-share-menu[open] .listing-share-chevron { transform: rotate(180deg); } .listing-share-options { position: absolute; z-index: 10; top: calc(100% + 8px); left: 0; right: 0; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .listing-share-option { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font-size: 13px; line-height: 1.4; text-align: left; text-decoration: none; cursor: pointer; } .listing-share-option>.icon { width: 18px; height: 18px; color: var(--green); } .listing-share-option:hover { background: var(--sage-soft); } .listing-share-favorite { margin: 0; } .listing-share-icon { width: 44px; height: 44px; padding: 0; } .listing-share-icon>.icon { width: 20px; height: 20px; } .listing-share-icon[aria-pressed=true] { border-color: var(--sage-line); background: var(--sage-soft); color: var(--green); } .listing-share-icon[aria-pressed=true]>.icon { fill: currentColor; } .contact-card>.listing-share-views { margin-top: 12px; font-size: 12px; color: var(--muted); } @media (prefers-reduced-motion:reduce) { .listing-share-action { transition: none; } } @media print { .listing-share { display: none !important; } } } @layer ui { .compare-offers-card.panel { position: relative; isolation: isolate; overflow: hidden; padding: 24px; border: 1px solid var(--coral-line); border-radius: 14px; background: linear-gradient(145deg,var(--accent-soft),var(--surface) 78%); box-shadow: 0 6px 22px #45342106; } .compare-offers-card::before { content: ""; position: absolute; top: 0; left: 24px; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--action); } .compare-offers-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .compare-offers-symbol { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--coral-line); border-radius: 12px; background: var(--surface); color: var(--brand); box-shadow: 0 3px 8px #45342105; } .compare-offers-symbol .icon { width: 22px; height: 22px; } .compare-offers-label { min-width: 0; color: var(--coral-ink); font-size: 12px; font-weight: 650; line-height: 1.5; } .compare-offers-card h3 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -.035em; } .compare-offers-card .compare-offers-description { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; } .compare-offers-card .compare-offers-action { display: flex; width: 100%; min-height: 44px; margin: 20px 0 0; padding: 11px 14px; gap: 12px; border-radius: 8px; font-size: 14px; } .compare-offers-action .icon { width: 18px; height: 18px; } .compare-offers-card .compare-offers-note { display: flex; justify-content: center; align-items: flex-start; gap: 6px; margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; } .compare-offers-note .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--green); } @media (max-width:1100px) and (min-width:601px) { .compare-offers-card.panel { padding: 20px; } .compare-offers-card::before { left: 20px; } .compare-offers-card h3 { font-size: 20px; } } } @layer ui { .service-offerings { display: grid; } .service-offering { min-width: 0; padding: 22px 0; border-bottom: 1px solid var(--line); } .service-offering:first-child { padding-top: 10px; } .service-offering:last-child { padding-bottom: 0; border-bottom: 0; } .service-offering-details { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; } .service-offering-text { min-width: 0; flex: 1; } .service-offering-details h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; } .service-offering-text .service-offering-description { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; } .service-offering-price { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.5; flex-shrink: 0; } .service-offering-with-photos { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 22px; align-items: start; } .service-offering-with-photos .service-offering-details { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 4px 0; } .service-offering-cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); cursor: zoom-in; } .service-offering-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; } .service-offering-cover:hover img { transform: scale(1.04); } .service-offering-count { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 8px; border-radius: 7px; background: #172126db; color: #fff; font-size: 12px; font-weight: 650; line-height: 1; } .service-offering-count .icon { width: 15px; height: 15px; } .service-offering-gallery { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; max-width: 100%; padding: 9px 13px; border: 1px solid var(--sage-line); border-radius: 8px; background: var(--sage-soft); color: var(--sage-ink); font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; } .service-offering-gallery .icon { width: 18px; height: 18px; flex-shrink: 0; } .service-offering-gallery:hover { border-color: var(--sage-ink); background: var(--sage-soft); color: var(--sage-ink); } .service-offering-cover:focus-visible,.service-offering-gallery:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; } @media (max-width:600px) { .service-offering { padding: 20px 0; } .service-offering-details { flex-direction: column; align-items: flex-start; gap: 5px; } .service-offering-with-photos { grid-template-columns: 100px minmax(0,1fr); gap: 14px; } .service-offering-with-photos .service-offering-details { gap: 8px; padding: 0; } .service-offering-details h3 { font-size: 15px; } .service-offering-price { font-size: 13px; } .service-offering-gallery { gap: 6px; padding: 8px 10px; font-size: 12px; } } @media (max-width:380px) { .service-offering-with-photos { grid-template-columns: 80px minmax(0,1fr); gap: 12px; } } @media (prefers-reduced-motion:reduce) { .service-offering-cover img { transition: none; } } @media print { .service-offering-gallery,.service-offering-count { display: none; } } } @layer ui { .service-photo-assignment { grid-column: 1/-1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); } .service-photo-preview { display: flex; gap: 5px; } .service-photo-preview:empty { display: none; } .service-photo-preview img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); } .service-photo-assignment .button { display: inline-flex; gap: 7px; align-items: center; margin: 0; } .service-photo-summary { font-size: 12px; } html.service-photo-picker-open { overflow: hidden; } .service-photo-picker { width: min(720px,calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .service-photo-picker[open] { display: flex; flex-direction: column; } .service-photo-picker::backdrop { background: rgb(20 30 34 / .68); } .service-photo-picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--line); } .service-photo-picker-header h2 { font-size: 23px; line-height: 1.25; margin: 5px 0 8px; } .service-photo-picker-header p { font-size: 13px; margin: 0; overflow-wrap: anywhere; } .service-photo-close { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--subtle); cursor: pointer; } .service-photo-picker-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px; } .service-photo-picker-body>p { font-size: 13px; margin-bottom: 18px; } .service-photo-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; } .service-photo-option { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); } .service-photo-option img { width: 100%; height: 140px; object-fit: cover; } .service-photo-option>span { padding: 10px; font-size: 12px; font-weight: 600; } .service-photo-option>input { position: absolute; top: 9px; right: 9px; width: 23px; height: 23px; accent-color: var(--sage-ink); cursor: pointer; } .service-photo-option:has(input:checked) { border-color: var(--sage-ink); background: var(--sage-soft); color: var(--sage-ink); } .service-photo-option:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; } .service-photo-upload { padding-top: 16px; border-top: 1px solid var(--line); } .service-photo-upload>.button { display: inline-flex; align-items: center; gap: 7px; } .service-photo-upload>p { margin: 10px 0 0; font-size: 13px; line-height: 1.5; } .service-photo-upload .alert { white-space: pre-line; overflow-wrap: anywhere; } .service-photo-upload>.text-link { margin-top: 10px; } .service-photo-picker-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; border-top: 1px solid var(--line); background: var(--subtle); } .service-photo-picker-footer>div:first-child { display: grid; gap: 5px; font-size: 13px; } .service-photo-picker-footer .text-link { text-align: left; font-size: 12px; } .service-photo-picker-actions { display: flex; gap: 8px; } .service-photo-picker-actions .button { font-size: 13px; padding: 12px 16px; } .service-photo-picker button:focus-visible,.service-photo-assignment button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .service-photo-picker button:disabled { opacity: .5; cursor: default; } @media (max-width:600px) { .service-photo-picker { width: calc(100% - 20px); max-height: calc(100dvh - 24px); border-radius: 12px; } .service-photo-picker-header,.service-photo-picker-body { padding: 18px; } .service-photo-picker-header h2 { font-size: 20px; } .service-photo-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .service-photo-option img { height: 115px; } .service-photo-picker-footer { padding: 16px 18px; gap: 12px; } .service-photo-picker-footer>div:first-child { width: 100%; display: flex; justify-content: space-between; } .service-photo-picker-actions { width: 100%; } .service-photo-picker-actions .button { flex: 1; padding-inline: 10px; } .service-photo-summary { flex-basis: 100%; } } } @layer ui { .listing-services { min-width: 0; } .listing-services-help { font-size: 14px; line-height: 1.65; margin: 0 0 18px; } .listing-service-rows { display: grid; gap: 16px; } .listing-services .service-row { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); } .service-row-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .listing-services .service-row-header h3 { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.4; letter-spacing: 0; } .service-remove { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; min-height: 36px; padding: 6px 8px; border-radius: 7px; color: var(--muted); font-size: 12px; font-weight: 550; } .service-remove .icon { width: 16px; height: 16px; } .service-remove:hover { background: var(--surface); color: var(--brand); } .listing-services .field { min-width: 0; margin: 0; } .listing-services select,.listing-services input,.listing-services textarea { min-width: 0; } .service-description-field textarea { min-height: 100px; resize: vertical; line-height: 1.6; } .service-price-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; } .service-field-caption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; } .service-field-help { display: block; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.55; } .listing-services .service-photo-assignment { padding-top: 14px; gap: 10px; } .listing-services .service-photo-assignment .button { font-size: 12px; min-height: 40px; padding: 10px 13px; } .listing-services-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .listing-services-actions p,.listing-services-status { margin: 0; font-size: 12px; line-height: 1.55; } .listing-services-status:not(:empty) { margin-top: 10px; } .listing-services [hidden] { display: none !important; } @media (max-width:600px) { .listing-services .service-row { padding: 16px; gap: 16px; } .service-row-header { gap: 8px; } .service-price-fields { grid-template-columns: 1fr; gap: 16px; } .listing-services-actions .button { width: 100%; } } } @layer ui { .booking-settings { scroll-margin-top: 24px; } .booking-settings-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .booking-settings-heading>div { flex: 1; min-width: 0; } .booking-settings-heading h2 { font-size: 22px; margin: 0 0 6px; } .booking-settings-heading p { font-size: 13px; margin: 0; } .booking-settings-heading>.badge { flex-shrink: 0; } .booking-settings-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sage-soft); color: var(--sage-ink); flex-shrink: 0; } .booking-setting-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); cursor: pointer; } .booking-setting-toggle input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--sage-ink); } .booking-setting-toggle strong { display: block; font-size: 15px; margin-bottom: 7px; } .booking-setting-toggle .muted { display: block; font-size: 13px; font-weight: 400; line-height: 1.6; } .booking-setting-toggle:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; } .booking-settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 18px; } .booking-settings-actions .text-link { display: inline-flex; align-items: center; gap: 6px; } .booking-settings-footnote { font-size: 12px; line-height: 1.7; margin: 20px 0 0; } .booking-plan-notice { display: flex; align-items: center; gap: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); margin-bottom: 16px; } .booking-plan-notice>div { flex: 1; min-width: 0; } .booking-plan-notice strong { font-size: 15px; } .booking-plan-notice p { font-size: 13px; margin: 8px 0 0; } .booking-plan-notice>.button { flex-shrink: 0; } .booking-settings form[aria-busy=true] { opacity: .65; pointer-events: none; } @media (max-width:600px) { .booking-settings-heading { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 10px; } .booking-settings-heading h2 { font-size: 19px; } .booking-settings-heading>.badge { grid-column: 2; justify-self: start; } .booking-setting-toggle { padding: 16px; } .booking-plan-notice { align-items: flex-start; flex-direction: column; gap: 14px; padding: 16px; } } } @layer ui { .location-picker .location-flat-fields { grid-template-columns: minmax(0,1fr); } .location-picker .location-flat-fields.has-country { grid-template-columns: repeat(2,minmax(0,1fr)); } .hero-search .location-picker .location-flat-fields.has-country { grid-template-columns: minmax(0,1fr); } .location-combobox { position: relative; min-width: 0; font-weight: 400; } .location-combobox input[type=text] { padding-right: 44px; cursor: text; margin: 0; } .location-combobox input::placeholder { color: var(--muted); opacity: 1; } .location-search-toggle { position: absolute; top: 0; right: 0; width: 42px; height: 100%; border: 0; border-radius: 0 9px 9px 0; background: transparent; color: var(--muted); display: grid; place-items: center; } .location-search-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); } .is-open>.location-search-toggle::after { transform: rotate(225deg) translate(-1px,-1px); } .location-search-popup { position: absolute; z-index: 85; top: calc(100% + 6px); left: 0; right: 0; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px #15281f24; padding: 6px; color: var(--ink); font-size: 14px; } .location-search-popup [role=listbox] { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 4px; } .location-search-option { padding: 10px 12px; min-height: 42px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; line-height: 1.5; } .location-search-option:hover,.location-search-option.is-active { background: var(--subtle); } .location-search-option[aria-selected=true]:not(.is-placeholder) { color: var(--brand); font-weight: 650; background: var(--cream); } .location-search-option.is-placeholder { color: var(--muted); } .location-search-empty { padding: 12px; font-size: 13px; line-height: 1.5; } .location-picker select.location-native-select { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); } .hero-section:has(.location-combobox.is-open) { overflow: visible; } .hero-search .location-combobox { border: 1px solid var(--line); border-radius: 9px; } .hero-search .location-combobox:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; } .hero-search .location-combobox input[type=text] { border: 1px solid var(--line) !important; min-height: 36px !important; font-size: 12px; padding: 7px 36px 7px 9px !important; background: var(--surface) !important; } .hero-search .location-search-popup { font-size: 13px; } .location-combobox input[aria-invalid=true] { border-color: #b22f2f; } .location-multi-trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font: inherit; text-align: left; cursor: pointer; } .location-multi-trigger.has-selection { color: var(--ink); } .location-multi-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .location-multi-trigger[aria-invalid=true] { border-color: #b22f2f; } .location-multi-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .location-multi-badge { flex-shrink: 0; padding: 2px 7px; border-radius: 6px; background: var(--cream); color: var(--brand); font-size: 12px; font-weight: 650; line-height: 1.5; } .location-multi-arrow { width: 8px; height: 8px; flex-shrink: 0; margin: 0 4px 4px 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .is-open>.location-multi-trigger .location-multi-arrow { transform: rotate(225deg); margin-bottom: 0; } .location-multi-search { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; background: var(--surface); } .location-multi-search:focus-within { border-color: var(--brand); } .location-multiselect .location-multi-query { display: block; width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 0; border-radius: 6px; margin: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 400; } .location-multi-error { margin-top: 6px; font-size: 12px; color: #b22f2f; } .location-multiselect.is-single-mode .location-multi-check { border-radius: 50%; } .location-multiselect .location-search-option { display: flex; align-items: center; gap: 10px; font-weight: 400; } .location-multi-check { display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); } [aria-selected=true]>.location-multi-check { border-color: var(--brand); background: var(--brand); color: white; } [aria-selected=true]>.location-multi-check::after { content: ""; width: 5px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); } .location-multiselect [aria-disabled=true] { opacity: .5; cursor: not-allowed; } .location-multi-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 5px 2px; margin-top: 5px; border-top: 1px solid var(--line); font-size: 12px; } .location-multi-count { color: var(--muted); font-weight: 400; } .location-multi-clear { padding: 5px 0; background: transparent; color: var(--brand); font-size: 12px; font-weight: 600; text-align: left; } .location-multi-clear:disabled { color: var(--muted); opacity: .6; cursor: default; } .hero-search .location-multiselect { border: 0; } .hero-search .location-multi-trigger { min-height: 48px; font-size: 15px; font-weight: 400; } .hero-search .location-multiselect .location-multi-query { min-height: 42px; font-size: 14px; } @media (max-width:600px) { .location-multiselect .location-multi-query,.hero-search .location-multiselect .location-multi-query { font-size: 16px; } .location-multi-clear { min-height: 36px; } } @media (max-width:600px) { .location-picker .location-flat-fields.has-country { grid-template-columns: minmax(0,1fr); } .location-search-popup [role=listbox] { max-height: 220px; } .location-combobox input[type=text] { font-size: 16px; } } } @layer ui { .form-grid>.listing-location-picker { grid-column: 1/-1; min-width: 0; } .listing-coverage-options { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; } .listing-coverage-options legend { padding: 0; margin-bottom: 10px; color: var(--ink); font-weight: 550; font-size: 14px; } .listing-coverage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .listing-coverage-choice { display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; } .listing-coverage-choice:has(input:checked) { border-color: var(--brand); background: var(--cream); } .listing-coverage-choice:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } .listing-coverage-choice input { flex-shrink: 0; margin: 5px 0 0; } .listing-coverage-choice strong,.listing-coverage-choice small { display: block; } .listing-coverage-choice strong { font-size: 14px; font-weight: 600; line-height: 1.55; } .listing-coverage-choice small { margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.6; } .listing-location-fields { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 14px; align-items: start; } .listing-location-fields>.field { min-width: 0; margin-bottom: 0; } .listing-location-fields>.field>small { font-size: 12px; line-height: 1.6; } .listing-location-picker select.location-native-select { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); } .listing-city-field .location-multi-trigger { min-height: 48px; } .listing-city-chips { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px; } .listing-city-chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--brand); font: inherit; font-size: 13px; text-align: left; } .listing-city-chip>span:first-child { overflow-wrap: anywhere; } .listing-city-chip>span:last-child { flex-shrink: 0; font-size: 18px; line-height: 1; } .listing-city-chip:hover { border-color: var(--brand); } .listing-city-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .listing-nationwide-note { padding: 12px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--subtle); font-size: 13px; line-height: 1.65; } @media (max-width:600px) { .listing-coverage-grid,.listing-location-fields { grid-template-columns: minmax(0,1fr); } .listing-coverage-choice { padding: 13px 14px; } .listing-city-field .location-multi-trigger { font-size: 16px; } .listing-city-chip { min-height: 42px; } } } @layer ui { body:has(.request-wizard) .page-main { max-width: 960px; } .request-wizard.panel { padding: 30px; } .request-progress-wrap { margin-bottom: 30px; } .request-progress-status { font-size: 12px; margin-bottom: 12px; } .request-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; margin: 0; gap: 12px; } .request-progress li { min-width: 0; } .request-progress button { display: flex; align-items: center; gap: 11px; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 14px 12px; width: 100%; height: 100%; min-height: 64px; font-size: 13px; line-height: 1.5; font-weight: 600; background: var(--surface); color: var(--ink); } .request-progress button>span { display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--subtle); color: var(--muted); font-weight: 700; } .request-progress button:disabled { opacity: 1; cursor: default; color: var(--muted); background: var(--subtle); } .request-progress button[aria-current=step] { border-color: var(--green); background: var(--cream); color: var(--ink); } .request-progress button[aria-current=step]>span { background: var(--green); color: var(--surface); } .request-progress .is-complete button:not(:disabled)>span { background: var(--subtle); color: var(--green); } .request-wizard-step { padding-block: 22px; border-top: 1px solid var(--line); scroll-margin-top: 24px; } .request-wizard.is-enhanced>.request-wizard-step { border-top: 0; padding-top: 0; } .request-step-heading { margin-bottom: 24px; } .request-step-heading .context-label { margin-bottom: 10px; } .request-step-heading h2 { font-size: 26px; max-width: 660px; } .request-step-heading>p:last-child { font-size: 14px; line-height: 1.75; margin-top: 12px; max-width: 720px; } .request-wizard-step>.field,.request-wizard-step>.form-grid { margin-block: 22px; } .request-wizard-step>.field>small { font-weight: 400; line-height: 1.6; } .request-service-field { grid-column: 1/-1; } .request-service-field>small { font-weight: 400; line-height: 1.6; } .request-optional-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .request-optional-label small { flex-shrink: 0; font-weight: 400; } .request-optional-details .field>small { font-weight: 400; line-height: 1.6; } .request-wizard [aria-invalid=true] { border: 2px solid #b22f2f !important; } .request-guide { background: var(--subtle); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 10px; padding: 20px 22px; margin-block: 24px; } .request-guide h3 { font-size: 16px; letter-spacing: -.01em; } .request-guide ul { padding-left: 20px; margin: 12px 0; font-size: 14px; color: var(--muted); } .request-guide li+li { margin-top: 6px; } .request-example { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 8px; } .request-example>summary,.request-review-description>summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; font-weight: 600; font-size: 13px; color: var(--green); } .request-example>summary::after,.request-review-description>summary::after { content: '+'; font-size: 20px; font-weight: 400; } .request-example[open]>summary::after,.request-review-description[open]>summary::after { content: '−'; } .request-example>p { font-size: 13px; line-height: 1.8; padding-bottom: 4px; } .request-nationwide { font-size: 14px; min-height: 44px; } #request-nationwide-help { margin: 3px 0 20px; } [data-request-location-area] { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; background: var(--subtle); margin-block: 20px; } [data-request-location-area] .field { margin-bottom: 0; } .request-wizard-errors,.request-wizard-server-errors { display: block !important; padding: 22px; margin-block: 20px; } .request-wizard-errors[hidden] { display: none !important; } .request-wizard-errors h2,.request-wizard-server-errors h2 { font-size: 18px; margin: 0 0 12px; } .request-wizard-errors ul,.request-wizard-server-errors ul { margin: 0; } .request-wizard-errors li+li,.request-wizard-server-errors li+li { margin-top: 8px; } .request-wizard-errors a { text-decoration: underline; text-underline-offset: 3px; } .request-wizard-server-errors p { font-size: 13px; margin-top: 12px; } .request-review { margin-block: 28px; border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--subtle); } .request-review>h3 { font-size: 19px; margin-bottom: 20px; } .request-review-group+.request-review-group { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); } .request-review-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; } .request-review-group-heading h4 { font-size: 14px; margin: 0; } .request-review-group-heading .text-link { min-height: 40px; font-size: 12px; text-align: right; } .request-review dl { margin: 0; display: grid; gap: 10px; } .request-review dl>div { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 16px; font-size: 13px; line-height: 1.65; } .request-review dt { color: var(--muted); } .request-review dd { margin: 0; overflow-wrap: anywhere; } .request-review-description { margin-top: 12px; } .request-review-description>p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; max-height: 350px; overflow: auto; } .request-terms { font-size: 13px; line-height: 1.8; margin-top: 24px; } .request-submit-note { font-size: 13px; margin-top: 16px; } .request-wizard-actions { border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 24px; margin-top: 10px; } .request-wizard-actions>.button:last-child,.request-wizard-actions>[data-request-next] { margin-left: auto; } .request-wizard-actions .button { min-width: 130px; } .request-session-note { margin-top: 18px; font-size: 12px; max-width: 700px; } @media (max-width:600px) { .request-wizard.panel { padding: 20px; } .request-progress { gap: 8px; } .request-progress button { flex-direction: column; justify-content: flex-start; gap: 8px; text-align: center; font-size: 11px; padding: 12px 6px; min-height: 100px; } .request-progress button>span { width: 28px; height: 28px; font-size: 12px; } .request-step-heading h2 { font-size: 23px; } .request-step-heading>p:last-child { font-size: 13px; } .request-guide { padding: 17px; } .request-guide ul { font-size: 13px; } .request-review { padding: 18px; } .request-review dl>div { grid-template-columns: 1fr; gap: 2px; } .request-review-group-heading { align-items: flex-start; gap: 12px; } .request-wizard-actions .button { min-width: 0; padding-inline: 20px; } [data-request-location-area] { padding: 16px; } } @media print { .request-progress-wrap,.request-wizard-actions,.request-session-note { display: none; } .request-wizard-step[hidden] { display: block !important; } .request-guide { break-inside: avoid; } } } @layer ui { .request-attachments { margin-block: 24px; min-width: 0; } .request-attachments-label { margin-bottom: 10px; } .request-attachment-dropzone { display: flex; align-items: center; gap: 16px; min-height: 128px; padding: 24px; border: 2px dashed var(--green); @supports (color: color-mix(in lab, red, red)) { border: 2px dashed color-mix(in srgb,var(--green) 35%,var(--line)); } border-radius: 14px; background: var(--subtle); transition: background .15s,border-color .15s; } .request-attachment-drop-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--green); flex-shrink: 0; } .request-attachment-drop-icon .icon { width: 25px; height: 25px; } .request-attachment-drop-copy { flex: 1; min-width: 0; } .request-attachment-drop-copy strong { font-size: 16px; line-height: 1.4; color: var(--ink); display: block; } .request-attachment-drop-copy p { font-size: 13px; margin-top: 3px; } .request-attachment-dropzone .button { flex-shrink: 0; font-size: 13px; min-height: 44px; padding: 11px 16px; } .request-attachment-dropzone.is-dragover { border-color: var(--green); background: var(--cream); } .request-attachment-help { font-size: 12px; margin-top: 10px; line-height: 1.7; max-width: 850px; } .request-attachment-help>span { display: block; } .request-attachment-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 18px; } .request-attachment-meta>p { font-size: 12px; line-height: 1.7; } .request-attachment-count { flex-shrink: 0; font-size: 11px; font-weight: 650; white-space: nowrap; padding: 3px 9px; background: var(--subtle); border: 1px solid var(--line); border-radius: 30px; color: var(--ink); } .request-attachment-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 12px; list-style: none; padding: 0; margin: 14px 0 0; } .request-attachment-list:empty { display: none; } .request-attachment-card { min-width: 0; padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: grab; transition: border-color .15s,box-shadow .15s; } .request-attachment-card.is-dragging { opacity: .45; } .request-attachment-card.is-drop-target { outline: 2px solid var(--green); outline-offset: 2px; } .request-attachment-preview { position: relative; display: grid; place-items: center; height: 126px; border-radius: 7px; background: var(--subtle); overflow: hidden; pointer-events: none; } .request-attachment-preview>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .request-attachment-file-icon { display: grid; justify-items: center; gap: 7px; color: var(--green); } .request-attachment-file-icon .icon { width: 35px; height: 35px; } .request-attachment-file-icon>span { font-size: 10px; font-weight: 750; letter-spacing: .7px; } .request-attachment-card[data-kind=archive] .request-attachment-file-icon { color: var(--brand); } .request-attachment-position { position: absolute; top: 8px; left: 8px; min-width: 23px; padding: 2px 6px; border-radius: 6px; background: #22332be8; color: #fff; text-align: center; font-size: 10px; font-weight: 650; } .request-attachment-details { padding: 9px 3px 10px; min-width: 0; } .request-attachment-name { display: block; font-size: 12px; line-height: 1.5; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .request-attachment-size { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; } .request-attachment-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; padding-top: 7px; border-top: 1px solid var(--line); } .request-attachment-actions>button { display: grid; place-items: center; min-width: 0; min-height: 40px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 7px; } .request-attachment-actions>button:hover { background: var(--subtle); border-color: var(--green); } .request-attachment-actions>button:disabled { cursor: default; opacity: .35; } .request-attachment-actions>button:disabled:hover { background: var(--surface); border-color: var(--line); } .request-attachment-actions .request-attachment-remove:hover { color: var(--brand); border-color: var(--brand); } .request-attachment-actions .icon { width: 17px; height: 17px; } .request-attachment-errors { font-size: 12px; margin-top: 14px; } .request-attachment-errors ul { padding-left: 19px; margin: 0; } .request-attachment-total { margin-top: 10px; font-size: 11px; text-align: right; } .request-attachment-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .request-attachment-native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; clip-path: inset(50%); overflow: hidden; } .request-attachments:has(.request-attachment-native-hidden:focus-visible) .request-attachment-dropzone { outline: 3px solid var(--brand); outline-offset: 3px; } @media (max-width:650px) { .request-attachment-dropzone { flex-wrap: wrap; gap: 12px; padding: 20px 16px; } .request-attachment-dropzone .button { margin-left: 60px; max-width: calc(100% - 60px); } .request-attachment-drop-copy strong { font-size: 15px; } .request-attachment-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .request-attachment-actions>button { min-height: 44px; } .request-attachment-meta { gap: 9px; } } @media (max-width:360px) { .request-attachment-dropzone { padding: 16px 12px; } .request-attachment-drop-icon { width: 40px; height: 40px; } .request-attachment-dropzone .button { margin-left: 52px; max-width: calc(100% - 52px); } .request-attachment-preview { height: 110px; } } } @layer ui { :root { --bg: #ffffff; --surface: #ffffff; --subtle: #f7f6f3; --ink: #202b33; --muted: #5c6972; --line: #e2e2dc; --brand: #bf392d; --brand-hover: #ab3026; --action: #c83e31; --action-hover: #ab3026; --cream: #faf5ed; --green: #3d705e; --accent-soft: #fcebe5; --shadow: 0 8px 28px #4534210c; --blue-ink: #466c9a; --blue-soft: #eaf0fb; --blue-line: #c5d6ed; --gold-ink: #855e25; --gold-soft: #fff1dd; --gold-line: #e8d2a8; --sage-ink: #4c704d; --sage-soft: #eaf3e5; --sage-line: #cadbc2; --violet-ink: #77558b; --violet-soft: #f2eafb; --violet-line: #d9c9e9; --teal-ink: #33776c; --teal-soft: #e5f4ef; --teal-line: #bbdcd3; --coral-ink: #ae4c3d; --coral-line: #efc9bd; --hero-bg: var(--cream); --hero-line: #eadfcd; --success-bg: #edf3ef; --success-ink: #3e594d; --success-line: #d4e1d8; --warning-bg: #fbf4e5; --warning-ink: #856124; --warning-line: #e8d8b3; --danger-bg: #f8efee; --danger-ink: #953e3b; --danger-line: #e8cfcd; } [data-theme=dark] { --bg: #161d22; --surface: #1e272e; --subtle: #253139; --ink: #e8edf0; --muted: #b0bcc5; --line: #3b4a54; --brand: #ffab9b; --brand-hover: #ffc5ba; --action: #c83e31; --action-hover: #ab3026; --cream: #302a25; --green: #a0d4b2; --accent-soft: #402d2b; --shadow: 0 8px 28px #00000020; --blue-ink: #abc9e8; --blue-soft: #283949; --blue-line: #455f76; --gold-ink: #e0be80; --gold-soft: #3b3426; --gold-line: #665535; --sage-ink: #bad8ae; --sage-soft: #2a382b; --sage-line: #4b6348; --violet-ink: #d3b9e8; --violet-soft: #352d43; --violet-line: #62516f; --teal-ink: #a5d9ca; --teal-soft: #253d37; --teal-line: #466c5e; --coral-ink: #ffb3a3; --coral-line: #765149; --hero-bg: #2a2522; --hero-line: #534238; --success-bg: #25362f; --success-ink: #c0d4c8; --success-line: #3b5045; --warning-bg: #36322a; --warning-ink: #dbceaf; --warning-line: #534a39; --danger-bg: #3a292b; --danger-ink: #e8bbb8; --danger-line: #5b3d3f; } .brand-mark { border-radius: 9px; transform: none; } .brand-mark .icon { transform: none; } .brand-dot { color: var(--brand); } .site-header { border-color: var(--line); } .hero-section { background: var(--hero-bg); border-color: var(--hero-line); } .hero-copy h1 { font-weight: 700; } .hero-copy h1 span { color: var(--brand); } .hero-search { border-color: var(--line); border-radius: 10px; box-shadow: var(--shadow); } .hero-proof .icon { color: var(--green); } .art-note { border-color: var(--line); border-radius: 9px; box-shadow: var(--shadow); transform: none; } .art-note-bottom { transform: none; } .art-note .note-icon { background: var(--gold-soft); color: var(--gold-ink); border-radius: 8px; } .art-note .note-icon.green { background: var(--sage-soft); color: var(--sage-ink); border-radius: 8px; } .category-card { border-radius: 10px; box-shadow: none; } .category-card:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); } .category-icon,.category-card .category-icon,.category-directory-heading .category-icon { background: var(--accent-soft); color: var(--brand); border-radius: 9px; } .category-arrow { color: var(--muted); } .request-banner { background: var(--sage-soft); border-color: var(--sage-line); border-radius: 10px; } .request-banner h2 { color: var(--ink); } .request-banner p { color: var(--muted); } .banner-symbol { background: var(--surface); color: var(--sage-ink); border-radius: 12px; } .banner-symbol>span { display: none; } .step-icon { border-color: var(--line); border-radius: 10px; color: var(--green); } .step-number { color: var(--line); font-weight: 650; } .provider-strip { background: var(--cream); border-color: var(--hero-line); } .button { border-radius: 8px; } .button:hover { transform: none; } .button-dark { background: #3d705e; } .button-dark:hover { background: #2d5949; } .button-danger { background: #963f3c; color: #fff; } .button-danger:hover { background: #7f3331; } .button-secondary:hover { border-color: var(--muted); } .count-pill,.badge { border-radius: 6px; } .badge { background: var(--blue-soft); color: var(--blue-ink); } .badge-draft,.badge-archived { background: var(--subtle); color: var(--muted); } .badge-warning,.badge-pending { background: var(--warning-bg); color: var(--warning-ink); } .badge-danger,.badge-rejected { background: var(--danger-bg); color: var(--danger-ink); } .alert { background: var(--success-bg); border-color: var(--success-line); color: var(--success-ink); } .alert-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-ink); } .alert-error,.alert-danger,.error-list { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-ink); } .admin-alert.alert-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-ink); } .dialog-icon { background: var(--danger-bg); color: var(--danger-ink); border-radius: 9px; } .danger-zone { border-color: var(--danger-line); } .toast { background: var(--action); color: #fff; } .pagination .active { background: var(--action); border-color: var(--action); color: #fff; } .impersonation-bar { background: var(--warning-bg); color: var(--warning-ink); } .auth-illustration { background: var(--accent-soft); color: var(--brand); border-radius: 16px; transform: none; } .account-card:hover { border-color: var(--green); } .account-avatar { background: var(--blue-soft); color: var(--blue-ink); } .image-placeholder { color: var(--green); } .chat-message.own,.message.own { background: var(--accent-soft); } .rating { color: var(--warning-ink); } .photo-dropzone,.upload-zone { border-color: var(--line); } .photo-dropzone.is-dragover { border-color: var(--brand); background: var(--accent-soft); } .photo-remove:hover { background: var(--danger-bg); color: var(--danger-ink); } .photo-position { background: #1c3040e6; color: #fff; } .form-section-number,.filter-chip { border-radius: 7px; } .cookie-banner { border-radius: 10px; box-shadow: var(--shadow); } [data-theme=dark] .category-icon,[data-theme=dark] .step-icon,[data-theme=dark] .auth-illustration { background: var(--accent-soft); color: var(--brand); } [data-theme=dark] .request-banner { background: var(--sage-soft); border-color: var(--sage-line); } [data-theme=dark] .request-banner h2 { color: var(--ink); } [data-theme=dark] .request-banner p { color: var(--muted); } [data-theme=dark] .chat-message.own,[data-theme=dark] .message.own { background: var(--accent-soft); } [data-theme=dark] .hero-art>img { opacity: .8; } } @layer ui { .location-admin-navigation { margin: 16px 0 24px; border-bottom: 1px solid var(--line); padding-bottom: 14px; } .location-admin-navigation>summary { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 600; width: fit-content; } .location-admin-navigation>summary>.icon { width: 16px; height: 16px; } .location-admin-navigation>summary>span { margin-left: 4px; } .location-admin-navigation[open]>.admin-nav { margin-top: 16px; } .location-admin-navigation[open]>p { font-size: 12px; margin-top: 12px; } .location-admin-heading p { margin-top: 10px; max-width: 650px; font-size: 15px; } .location-remove { margin-top: 24px; } .location-remove p { font-size: 12px; line-height: 1.6; margin: 14px 0; } .location-remove .checkbox { font-size: 12px; line-height: 1.5; } .location-admin-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 10px; margin: 0 0 26px; background: var(--surface); } .location-admin-stats>div { padding: 19px 24px; display: flex; gap: 13px; align-items: center; } .location-admin-stats>div+div { border-left: 1px solid var(--line); } .location-admin-stats strong { font-size: 27px; line-height: 1.2; letter-spacing: -1px; } .location-admin-stats span { color: var(--muted); font-size: 13px; } .location-cleanup { background: var(--subtle); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 24px; } .location-cleanup>div:first-child { flex: 1; min-width: 240px; } .location-cleanup h2,.location-editor h2,.location-admin-list h2 { font-size: 21px; } .location-cleanup p { margin-top: 8px; font-size: 14px; } .location-cleanup small { display: block; color: var(--muted); margin-top: 7px; } .location-cleanup-blocked { width: 100%; color: var(--ink); } .location-admin-layout { display: grid; gap: 24px; align-items: start; } .location-admin-layout.has-editor { grid-template-columns: 330px minmax(0,1fr); } .location-editor { scroll-margin-top: 20px; } .location-editor-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 22px; } .location-editor-heading>a { font-size: 12px; color: var(--muted); text-decoration: underline; } .location-editor-form { display: grid; gap: 20px; } .location-editor-form .field { margin: 0; } .location-editor-form small { font-weight: 400; line-height: 1.5; color: var(--muted); font-size: 12px; } .location-editor-details { border-top: 1px solid var(--line); padding-top: 16px; } .location-editor-details summary,.location-legacy summary,.location-archive summary { font-weight: 600; display: flex; align-items: center; gap: 10px; } .location-editor-details summary::before,.location-legacy summary::before,.location-archive summary::before { content: '+'; font-size: 18px; line-height: 1; color: var(--muted); } .location-editor-details[open] summary::before,.location-legacy[open] summary::before,.location-archive[open] summary::before { content: '−'; } .location-editor-details .field { margin-top: 16px; } .location-coordinate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .location-admin-list { min-width: 0; padding: 26px 0 0; overflow: hidden; } .location-list-heading { display: flex; align-items: center; gap: 12px; padding: 0 26px; } .location-admin-tools { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 14px; padding: 22px 26px 0; } .location-admin-tools .field { font-size: 12px; margin: 0; } .location-result-count { padding: 14px 26px; font-size: 12px; } .location-city-table { max-height: 610px; overflow: auto; overscroll-behavior: contain; } .location-city-table table { min-width: 420px; } .location-city-table th { position: sticky; top: 0; z-index: 1; background: var(--subtle); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); } .location-city-table td { vertical-align: middle; padding: 14px 26px; } .location-city-table th:first-child { padding-left: 26px; } .location-city-table tr:last-child td { border-bottom: 0; } .location-city-table tbody tr:hover { background: var(--subtle); } .location-city-name { font-weight: 600; } .location-city-table td:first-child small { display: block; font-size: 11px; } .location-priority { font-variant-numeric: tabular-nums; color: var(--muted); } .location-visibility { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; } .location-visibility::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .location-visibility.is-hidden::before { background: var(--line); } .location-edit-link { font-size: 12px; white-space: nowrap; } .location-edit-link span { margin-left: 7px; } .location-admin-empty { text-align: center; padding: 40px 25px; } .location-archive,.location-legacy { margin-top: 24px; } .location-archive p { font-size: 13px; margin-block: 14px; } .location-legacy ul { columns: 3; font-size: 13px; } .location-legacy li { break-inside: avoid; margin-bottom: 8px; } @media (max-width:900px) { .location-admin-layout.has-editor { grid-template-columns: 1fr; } .location-admin-stats>div { padding: 16px; display: block; } .location-admin-stats span { display: block; margin-top: 5px; } .location-legacy ul { columns: 2; } } @media (max-width:600px) { .location-admin-heading>.button { width: 100%; } .location-admin-stats { margin-bottom: 18px; } .location-admin-stats>div { padding: 13px; } .location-admin-stats strong { font-size: 24px; } .location-admin-stats span { font-size: 11px; line-height: 1.4; } .location-cleanup { gap: 18px; padding: 20px; } .location-cleanup>div:first-child { min-width: 0; } .location-cleanup form,.location-cleanup button { width: 100%; } .location-admin-tools { grid-template-columns: 1fr; padding-inline: 18px; } .location-list-heading,.location-result-count { padding-inline: 18px; } .location-city-table table { min-width: 0; } .location-city-table th,.location-city-table td { padding: 12px 10px; font-size: 12px; } .location-city-table th:first-child,.location-city-table td:first-child { padding-left: 18px; } .location-city-table th:nth-child(2),.location-city-table td:nth-child(2) { display: none; } .location-edit-link span { display: none; } .location-visibility { font-size: 11px; } .location-legacy ul { columns: 1; } } } @layer ui { .directory-filters { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; box-shadow: 0 4px 18px #202b3304; } .directory-filters .field { font-size: 13px; font-weight: 600; gap: 8px; margin: 0; } .directory-search-row { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(210px,1fr) auto; align-items: end; gap: 18px; } .directory-search-row:not(:has(>.location-picker)) { grid-template-columns: minmax(0,1fr) auto; } .directory-search-row .location-picker { min-width: 0; padding: 0; border: 0; } .directory-search-row .location-picker .form-grid { margin: 0; gap: 14px; } .directory-search-row .location-picker .location-flat-fields.has-country { grid-template-columns: 1fr; } .directory-search-row .directory-submit { min-height: 48px; min-width: 132px; padding-inline: 22px; } .directory-query-control { display: block; position: relative; } .directory-query-control>.icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .directory-query-control input[type=search] { padding-left: 42px; font-weight: 400; } .directory-filters input:not([type=checkbox]):not([type=radio]),.directory-filters select { min-height: 48px; font-size: 14px; font-weight: 400; border-color: var(--line); border-radius: 8px; background: var(--surface); } .directory-category-row { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); } .directory-category-row .category-levels { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; align-items: start; } .directory-category-row .category-picker-hint { margin-top: 12px; color: var(--muted); font-size: 12px; } .directory-filters .advanced-filters { margin-top: 20px; padding-top: 0; border-bottom: 1px solid var(--line); } .directory-filters .advanced-filters>summary { min-height: 54px; font-size: 13px; font-weight: 600; color: var(--ink); } .directory-filters .advanced-filters>summary>.icon:first-child { width: 17px; } .directory-filters .advanced-filters>.form-grid { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 18px; margin: 2px 0 22px; padding-top: 8px; } .directory-filters .filter-actions { margin-top: 14px; gap: 14px; min-height: 25px; } .directory-filters .filter-status { font-size: 12px; color: var(--muted); } .directory-reset { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--muted); font-size: 12px; min-height: 30px; } .directory-reset>.icon { width: 14px; height: 14px; } .directory-reset:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .directory-filters .location-search-popup { box-shadow: 0 12px 32px #202b331c; } .directory-filters .location-search-option { font-size: 14px; min-height: 43px; } @media (max-width:900px) { .directory-search-row { grid-template-columns: minmax(0,1fr) minmax(180px,1fr) auto; gap: 14px; } .directory-search-row .directory-submit { min-width: 100px; padding-inline: 15px; } .directory-category-row .category-levels { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; } .directory-filters .advanced-filters>.form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:600px) { .directory-filters { padding: 20px 18px; border-radius: 10px; } .directory-search-row,.directory-search-row:not(:has(>.location-picker)) { grid-template-columns: minmax(0,1fr); gap: 16px; } .directory-search-row .directory-submit { width: 100%; margin-top: 2px; } .directory-category-row { padding-top: 20px; margin-top: 20px; } .directory-category-row .category-levels,.directory-filters .advanced-filters>.form-grid { grid-template-columns: minmax(0,1fr); } .directory-filters .filter-actions { align-items: flex-start; flex-wrap: wrap; gap: 8px; } .directory-filters input:not([type=checkbox]):not([type=radio]),.directory-filters select { font-size: 16px; } .directory-filters .location-search-popup { font-size: 14px; } .directory-filters .location-search-option { font-size: 14px; } } } @layer ui { .category-picker .category-level-field { min-width: 0; } .category-picker select.location-native-select { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); } .category-picker .category-quick-field { margin-top: 12px; } .category-picker .category-levels { align-items: start; } .category-picker .location-search-status { margin: 0; padding: 9px 12px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; } .category-picker .location-search-option-label { display: block; font-weight: 600; } .category-picker .location-search-option-description { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; } .category-picker .location-combobox.opens-above>.location-search-popup { top: auto; bottom: calc(100% + 6px); } .category-types-field .location-multi-trigger { min-height: 48px; } .category-types-field .location-multiselect .location-search-option { align-items: flex-start; } .category-types-field .location-multi-check { margin-top: 2px; } .category-selected-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .category-type-chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--brand); font: inherit; font-size: 13px; text-align: left; } .category-type-chip>span:first-child { overflow-wrap: anywhere; } .category-type-chip>span:last-child { flex-shrink: 0; font-size: 18px; line-height: 1; } .category-type-chip:hover { border-color: var(--brand); } .category-type-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .category-quick-message { margin: 8px 0 0; color: var(--muted); font-size: 13px; } .listing-category-summary { margin: 0 0 24px; } .listing-category-summary h2 { font-size: 18px; margin-bottom: 12px; } .listing-category-links { display: flex; flex-wrap: wrap; gap: 8px; } .listing-category-links a { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--brand); font-size: 14px; text-decoration: none; overflow-wrap: anywhere; } .listing-category-links a:hover { border-color: var(--brand); text-decoration: underline; } @media (max-width:600px) { .category-type-chip { min-height: 42px; } .category-types-field .location-multi-trigger { font-size: 16px; } } } @layer ui { .directory-service-filters { display: grid; gap: 18px; min-width: 0; } .directory-service-levels { display: grid; gap: 18px; min-width: 0; } .directory-service-filters .directory-service-level { display: grid; gap: 8px; min-width: 0; } .directory-service-filters .directory-service-level>label { margin: 0; font-size: 13px; font-weight: 600; } .directory-service-filters .location-multi-trigger { min-height: 48px; font-size: 14px; } .directory-service-filters .location-search-option { align-items: flex-start; gap: 10px; } .directory-service-filters .location-multi-check { margin-top: 2px; } .directory-service-filters .location-search-option>span:last-child { min-width: 0; } .directory-option-name { display: block; } .directory-option-path { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 400; } .directory-service-filters .directory-service-hint { margin: 0; font-size: 12px; line-height: 1.6; } .directory-service-feedback { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); } .directory-search-status { margin: 0; padding: 6px 7px 10px; color: var(--muted); font-size: 12px; font-weight: 400; } .directory-multiselect.opens-above>.location-search-popup { top: auto; bottom: calc(100% + 6px); } .directory-multiselect [role=listbox]:focus { outline: 0; } .directory-multiselect [role=listbox]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 5px; } .directory-service-filters .location-multi-query { min-height: 42px; border: 0; border-radius: 6px; } .directory-service-filters .location-multi-clear { border: 0; cursor: pointer; } .form-grid>.saved-search-service-fields { grid-column: 1/-1; min-width: 0; display: grid; gap: 20px; border: 0; padding: 0; margin: 0; } .form-grid>.saved-search-service-fields[hidden] { display: none; } .form-grid>.saved-search-kind-message { grid-column: 1/-1; } @media (max-width:600px) { .directory-service-filters .location-multi-trigger,.directory-service-filters .location-multi-query { font-size: 16px; } } } @layer ui { .category-card { min-width: 0; } .profile-layout { min-width: 0; } .profile-main,.profile-sidebar { min-width: 0; overflow-wrap: anywhere; } .profile-main>.tabs { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; } .profile-main>.tabs>a { flex: 0 0 auto; } @media (max-width:850px) { .header-inner { gap: 12px; } .header-actions { flex-shrink: 0; } .header-actions .icon-button,.account-avatar { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .account-dropdown { max-height: calc(100dvh - 90px); overscroll-behavior: contain; } .account-dropdown a,.account-dropdown .text-button { display: flex; align-items: center; min-height: 44px; font-size: 14px; } .mobile-nav { overscroll-behavior: contain; } .hero-grid { grid-template-columns: minmax(0,1fr); min-height: 0; } .hero-art { display: none; } .hero-description { max-width: 600px; } .hero-search { width: 100%; max-width: 640px; } .hero-search input,.hero-search select { font-size: 16px !important; } .hero-search .location-picker .field { font-size: 13px; } .hero-search .location-combobox input[type=text] { min-height: 46px !important; } } @media (min-width:601px) and (max-width:850px) { .hero-copy h1 { font-size: clamp(40px,6vw,50px); max-width: 660px; } .category-card p { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media (max-width:600px) { .profile-layout { grid-template-columns: minmax(0,1fr); } .profile-main>.tabs>a { display: flex; align-items: center; min-height: 44px; } .hero-copy h1 { font-size: clamp(36px,10.5vw,44px); letter-spacing: -.045em; } .hero-search .search-service { border-bottom: 0; margin-bottom: 0; } .hero-search .search-location { padding: 10px 8px 6px; } .hero-search .location-picker .field { font-size: 13px; gap: 5px; } .hero-search .location-combobox input[type=text] { min-height: 46px !important; padding-right: 44px !important; } .hero-search>.button { min-height: 48px; font-size: 14px; } .location-search-toggle { width: 44px; } .location-search-option { min-height: 44px; } .section-heading { flex-wrap: wrap; align-items: center; gap: 4px 16px; } .section-heading .heading-inline { flex: 1 0 100%; justify-content: space-between; } .section-heading .arrow-link { min-height: 44px; font-size: 13px; margin-top: 0; } .section-heading .arrow-link .icon { width: 17px; } .category-card { min-height: 180px; } .category-card h3 { font-size: 15px; line-height: 1.4; } .category-card p { font-size: 12px; line-height: 1.55; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .category-directory-browse { min-height: 44px; } .request-banner p,.step p,.provider-strip p { font-size: 13px; } .request-banner .button,.provider-strip .button { font-size: 14px; } .photo-remove { width: 44px; height: 44px; } .photo-preview-actions .button,.photo-upload .media-order-actions .button,.media-order-item .text-link { min-height: 44px; } .photo-dropzone .button { min-width: 0; width: 100%; } .photo-upload-meta { flex-wrap: wrap; gap: 8px; } .footer-top>div>a:not(.brand) { min-height: 44px; margin-top: 2px; } .footer-bottom a,.footer-bottom button { min-height: 44px; display: inline-flex; align-items: center; } .cookie-banner { max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; } .cookie-banner p { font-size: 13px; } .cookie-banner label { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; } .cookie-banner input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; } } @media (max-width:360px) { .header-actions { gap: 2px; } .category-grid { grid-template-columns: minmax(0,1fr); gap: 10px; } .category-card { display: grid; grid-template-columns: 38px minmax(0,1fr); column-gap: 12px; min-height: 0; padding: 16px; } .category-card .category-icon { grid-row: 1/3; margin: 0; } .category-card h3 { padding-right: 15px; margin-bottom: 4px; } .category-card p { grid-column: 2; } .category-arrow { top: 18px; } } } @layer ui { .workspace-admin-nav { min-width: 0; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .workspace-nav-menu>summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; font-size: 14px; font-weight: 600; list-style: none; } .workspace-nav-menu>summary::-webkit-details-marker { display: none; } .workspace-nav-menu>summary>.icon { width: 18px; height: 18px; flex-shrink: 0; } .workspace-nav-menu>summary>.icon:last-child { margin-left: 4px; transition: transform .15s; } .workspace-nav-menu[open]>summary>.icon:last-child { transform: rotate(180deg); } .workspace-nav-current { margin-left: auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 400; } .workspace-nav-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 20px; max-height: min(70dvh,620px); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border-top: 1px solid var(--line); } .workspace-nav-group { min-width: 0; } .workspace-nav-group h2 { font-size: 12px; line-height: 1.5; letter-spacing: 0; color: var(--muted); margin-bottom: 8px; } .workspace-nav-links { display: grid; gap: 4px; } .workspace-nav-links a { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: 7px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; } .workspace-nav-links a:hover,.workspace-nav-links a[aria-current=page] { background: var(--subtle); color: var(--brand); } .workspace-nav-links a[aria-current=page] { font-weight: 700; box-shadow: inset 3px 0 var(--brand); } .workspace-service-card { --workspace-insight-bg: var(--subtle); @supports (color: color-mix(in lab, red, red)) { --workspace-insight-bg: color-mix(in srgb,var(--subtle) 40%,var(--surface)); } display: grid; grid-template-columns: minmax(0,1fr) 288px 272px; align-items: start; gap: 22px; min-width: 0; margin-bottom: 16px; padding: 24px; overflow-wrap: anywhere; } .workspace-service-draft { grid-template-columns: minmax(0,1fr); } .workspace-service-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .workspace-service-overview { min-width: 0; } .workspace-service-identity { display: flex; align-items: flex-start; gap: 18px; min-width: 0; } .workspace-service-image { display: grid; place-items: center; flex: 0 0 96px; width: 96px; height: 96px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--sage-soft); color: var(--green); } .workspace-service-image>img { width: 100%; height: 100%; object-fit: cover; } .workspace-service-image--logo { background: var(--surface); } .workspace-service-image--logo>img { object-fit: contain; padding: 6px; } .workspace-service-image>.icon { width: 32px; height: 32px; } .workspace-service-title { min-width: 0; flex: 1; } .workspace-service-title h2 { font-size: 20px; line-height: 1.35; margin: 9px 0 7px; } .workspace-service-title h2 a:hover { color: var(--brand); } .workspace-service-title p { font-size: 13px; line-height: 1.6; margin: 0; } .workspace-service-state { display: flex; align-items: center; gap: 8px; } .workspace-service-state .badge { font-size: 11px; padding: 4px 9px; } .workspace-status-approved { color: var(--success-ink); background: var(--success-bg); } .workspace-service-changes { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 6px; font-size: 12px; color: var(--brand); text-underline-offset: 3px; } .workspace-service-changes:hover { text-decoration: underline; } .workspace-service-changes>.icon { width: 14px; height: 14px; flex-shrink: 0; } .workspace-service-content { display: grid; align-content: start; gap: 14px; min-width: 0; } .workspace-service-facts { display: flex; flex-wrap: wrap; gap: 7px; } .workspace-service-fact { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 11px; color: var(--muted); } .workspace-service-fact.is-complete { color: var(--success-ink); background: var(--success-bg); border-color: var(--success-line); } .workspace-service-fact:hover { border-color: var(--brand); color: var(--brand); } .workspace-service-fact .icon { width: 14px; height: 14px; } .workspace-service-quality { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--muted); } .workspace-service-quality>progress,.workspace-service-quality-link { grid-column: 1/-1; } .workspace-service-quality>strong { color: var(--ink); font-size: 24px; line-height: 1.2; font-weight: 700; } .workspace-service-quality small { font-size: 13px; font-weight: 400; color: var(--muted); } .workspace-service-quality progress { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 20px; overflow: hidden; background: var(--line); color: var(--green); accent-color: var(--green); } .workspace-service-quality progress::-webkit-progress-bar { background: var(--line); border-radius: 20px; } .workspace-service-quality progress::-webkit-progress-value { background: var(--green); border-radius: 20px; } .workspace-service-quality progress::-moz-progress-bar { background: var(--green); border-radius: 20px; } .workspace-service-quality-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; color: var(--brand); } .workspace-service-quality-link>.icon { width: 15px; height: 15px; } .workspace-service-quality:hover .workspace-service-quality-link { text-decoration: underline; text-underline-offset: 3px; } .workspace-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .workspace-service-actions .button { min-height: 44px; padding: 10px 13px; font-size: 13px; line-height: 1.4; gap: 7px; } .workspace-service-actions .icon { width: 17px; height: 17px; flex-shrink: 0; } .workspace-service-actions form { margin: 0; } .workspace-service-action-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 11px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; line-height: 1.4; cursor: pointer; } .workspace-service-action-quiet:hover { background: var(--subtle); border-color: var(--line); color: var(--ink); } .workspace-service-delete { color: var(--danger-ink); } .workspace-service-delete:hover { background: var(--danger-bg); color: var(--danger-ink); } .workspace-service-insights { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--line); } .workspace-service-paid { display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--workspace-insight-bg); font-size: 12px; } .workspace-service-paid-status { display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: start; gap: 8px; min-height: 30px; } .workspace-service-paid-status+.workspace-service-paid-status { border-top: 1px solid var(--line); padding-top: 8px; } .workspace-service-paid-status dt { display: flex; align-items: center; gap: 6px; min-height: 30px; color: var(--muted); font-size: 11px; font-weight: 400; } .workspace-service-paid-status dt>.icon { width: 15px; height: 15px; flex-shrink: 0; } .workspace-service-paid-status dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; } .workspace-service-paid-state { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 30px; min-width: 0; } .workspace-service-paid-value { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 12px; line-height: 1.5; font-weight: 600; } .workspace-service-paid-value.is-active { color: var(--success-ink); } .workspace-service-paid-value.is-active::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; } .workspace-service-paid-link { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 30px; margin-left: auto; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--green); font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; } .workspace-service-paid-link>.icon { width: 12px; height: 12px; flex-shrink: 0; } .workspace-service-paid-link:hover { border-color: var(--green); background: var(--success-bg); } .workspace-service-paid-stars { display: inline-flex; align-items: center; padding: 2px 5px; border-radius: 5px; background: var(--gold-soft); font-size: 10px; line-height: 1.5; white-space: nowrap; color: var(--gold-ink); } .workspace-service-paid-date { display: flex; align-items: flex-start; gap: 5px; flex-basis: 100%; padding-top: 3px; font-size: 10px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; } .workspace-service-paid-date>.icon { width: 13px; height: 13px; margin-top: 1px; flex-shrink: 0; } .workspace-service-totals { margin: 0; } .workspace-service-totals>p { margin: 0 0 9px; font-size: 11px; font-weight: 500; color: var(--muted); } .workspace-service-metrics { display: grid; margin: 0; padding: 2px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--workspace-insight-bg); } .workspace-service-metrics>div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; min-height: 43px; padding: 9px 0; } .workspace-service-metrics>div+div { border-top: 1px solid var(--line); } .workspace-service-metrics dt { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--muted); } .workspace-service-metrics dt>.icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--green); } .workspace-service-metrics dd { flex-shrink: 0; margin: 0; font-size: 21px; line-height: 1.15; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; } .workspace-service-insights>.workspace-service-statistics { display: flex; justify-content: flex-start; gap: 9px; min-height: 46px; padding: 11px 14px; border-radius: 9px; background: var(--green); border-color: var(--green); color: #fff; font-size: 13px; } [data-theme=dark] .workspace-service-card { --workspace-insight-bg: var(--subtle); } [data-theme=dark] .workspace-service-insights>.workspace-service-statistics { color: var(--bg); } .workspace-service-statistics>.icon { width: 18px; height: 18px; } .workspace-service-statistics>.icon:last-child { margin-left: auto; } .workspace-service-insights>.workspace-service-statistics:hover { filter: brightness(.94); } .listing-delete-panel { max-width: 660px; margin: 18px auto; padding: 30px; } .listing-delete-panel h1 { font-size: 28px; line-height: 1.25; margin: 16px 0 12px; } .listing-delete-panel>p { font-size: 14px; line-height: 1.7; margin: 12px 0; } .listing-delete-panel .listing-delete-name { font-size: 18px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; } .listing-delete-panel .listing-delete-warning { color: var(--danger-ink); font-weight: 600; } .listing-delete-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--danger-ink); background: var(--danger-bg); } .listing-delete-panel .form-actions { margin-top: 24px; } .workspace-service-group,.workspace-appointments { margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .workspace-service-group>summary,.workspace-appointments>summary { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 14px 20px; font-weight: 600; list-style: none; cursor: pointer; } .workspace-service-group>summary>.icon,.workspace-appointments>summary>.icon { width: 18px; height: 18px; margin-left: auto; } .workspace-service-group-content { padding: 0 16px 2px; } .workspace-service-group-content .workspace-service-card { background: var(--subtle); box-shadow: none; } .workspace-appointments>#appointments { margin: 0; border: 0; border-top: 1px solid var(--line); box-shadow: none; } #appointments { scroll-margin-top: 24px; } @media (max-width:1100px) { .workspace-service-card { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .workspace-service-main { grid-column: 1/-1; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .workspace-service-draft { grid-template-columns: minmax(0,1fr); } .workspace-service-draft .workspace-service-main { padding-bottom: 0; border-bottom: 0; } .workspace-service-insights { padding-left: 20px; } } @media (max-width:600px) { .workspace-nav-menu>summary { gap: 8px; padding: 12px; font-size: 13px; } .workspace-nav-current { max-width: 38%; font-size: 11px; } .workspace-nav-groups { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 12px; } .workspace-nav-links a { min-height: 44px; padding: 8px; font-size: 12px; } .workspace-service-card { grid-template-columns: minmax(0,1fr); padding: 18px 16px; gap: 18px; } .workspace-service-identity { gap: 12px; } .workspace-service-image { flex-basis: 68px; width: 68px; height: 68px; border-radius: 10px; } .workspace-service-title h2 { font-size: 18px; margin-top: 8px; } .workspace-service-title p { font-size: 12px; } .workspace-service-changes { min-height: 44px; margin-top: 2px; line-height: 1.4; } .workspace-service-content { gap: 14px; } .workspace-service-fact { min-height: 40px; font-size: 12px; } .workspace-service-quality>strong { font-size: 22px; } .workspace-service-quality-link { min-height: 32px; } .workspace-service-main { gap: 18px; } .workspace-service-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .workspace-service-actions .button,.workspace-service-actions .workspace-service-action-quiet { width: 100%; padding: 10px 8px; min-height: 44px; } .workspace-service-actions>form { min-width: 0; max-width: none; } .workspace-service-delete { margin-left: 0; justify-self: start; } .workspace-service-insights { gap: 12px; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); } .workspace-service-paid-status { grid-template-columns: 88px minmax(0,1fr); } .workspace-service-paid-link { min-height: 36px; } .listing-delete-panel { padding: 22px 18px; } .listing-delete-panel h1 { font-size: 24px; } .listing-delete-panel .form-actions>.button { width: 100%; } .workspace-service-group-content { padding: 0 8px 0; } .workspace-service-group>summary,.workspace-appointments>summary { padding: 12px 16px; } } } @layer components { .notification-channel { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; } .notification-channel input[type=checkbox] { flex-shrink: 0; } .notification-channel input[aria-disabled=true] { opacity: .45; cursor: not-allowed; } .notification-push-status { padding: 12px 16px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--subtle); color: var(--muted); font-size: 13px; line-height: 1.6; } .notification-push-status[data-state=error] { border-color: var(--coral-line); background: var(--accent-soft); color: var(--coral-ink); } .notification-push-status[data-state=success] { color: var(--green); } .notification-channel-name,.notification-frequency-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width:600px) { .notification-preferences-wrap { overflow: visible; } .notification-preferences-table { display: block; width: 100%; min-width: 0; } .notification-preferences-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .notification-preferences-table tbody { display: grid; gap: 14px; } .notification-preferences-table .notification-topic { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .notification-topic>th { grid-column: 1/-1; padding: 0 0 4px; border: 0; background: transparent; font-size: 15px; white-space: normal; text-align: left; } .notification-topic>td { padding: 0; border: 0; min-width: 0; } .notification-channel { flex-direction: column; gap: 7px; min-height: 68px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--subtle); text-align: center; } .notification-channel input[type=checkbox] { width: 20px; height: 20px; margin: 0; } .notification-channel-name,.notification-frequency-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; } .notification-channel-name { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; } .notification-frequency-cell { grid-column: 1/-1; padding-top: 4px !important; } .notification-frequency { display: grid; gap: 5px; min-width: 0; } .notification-frequency-label { font-size: 13px; font-weight: 550; } .notification-frequency select { width: 100%; min-height: 46px; } .notification-matching { display: grid; gap: 4px; } .notification-matching>label { display: flex; gap: 10px; min-height: 44px; padding-block: 7px; cursor: pointer; } .notification-matching input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; } } } @layer ui { .hero-section { overflow: visible; } .hero-grid { display: block; min-height: 0; padding-block: 64px 52px; } .hero-copy { width: 100%; max-width: 960px; margin-inline: auto; text-align: center; } .hero-copy h1 { max-width: 900px; margin-inline: auto; } .hero-description { max-width: 620px; margin-inline: auto; } .hero-alternative { margin-inline: auto; } .hero-proof { justify-content: center; flex-wrap: wrap; } .hero-search,.hero-search:has(.search-location) { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; align-items: end; gap: 12px; padding: 16px; width: 100%; max-width: 840px; margin-inline: auto; text-align: left; } .hero-search:not(:has(.search-location)) { grid-template-columns: minmax(0,1fr) auto; } .hero-search .search-service { display: grid; grid-template-columns: 20px minmax(0,1fr); grid-template-rows: auto 48px; align-items: center; gap: 6px 8px; min-width: 0; padding: 0; border: 0; } .hero-search .home-search-label { grid-column: 1/-1; grid-row: 1; font-size: 13px; font-weight: 600; color: var(--ink); } .hero-search .search-service>.icon { grid-column: 1; grid-row: 2; width: 20px; margin: 0; } .hero-search .search-service input { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; min-height: 48px; padding: 0 !important; font-size: 15px; border: 0; background: transparent; } .hero-search .search-location { grid-column: auto; grid-row: auto; width: auto; min-width: 0; padding: 0; border: 0; } .hero-search .location-picker .field { font-size: 13px; font-weight: 600; gap: 6px; } .hero-search .location-combobox input[type=text] { min-height: 48px !important; padding: 10px 36px 10px 12px !important; font-size: 15px; font-weight: 400; } .hero-search>.button { grid-column: auto; grid-row: auto; min-height: 48px; padding: 12px 20px; white-space: nowrap; } .hero-search .autocomplete-results { top: 100%; left: 0; right: 0; } .breadcrumbs { min-width: 0; flex-wrap: wrap; row-gap: 5px; } .breadcrumbs>.icon { flex-shrink: 0; } .breadcrumbs>[aria-current=page] { overflow-wrap: anywhere; } .pricing-grid.pricing-free { display: block; max-width: 760px; margin-inline: auto; } .pricing-free .pricing-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; align-items: start; } .pricing-free .pricing-card>.feature-list { grid-column: 2; grid-row: 1/5; margin-top: 0; } .pricing-free .pricing-card>.button { grid-column: 1/-1; justify-self: start; margin-top: 16px; } @media (max-width:850px) { .hero-search,.hero-search:has(.search-location) { width: 100%; max-width: 720px; } .footer-top { grid-template-columns: repeat(3,minmax(0,1fr)); } .footer-top>.footer-brand { grid-column: 1/-1; } .footer-top>div:last-child { display: block; } } @media (max-width:600px) { .hero-grid { padding-block: 38px 32px; } .hero-search,.hero-search:has(.search-location),.hero-search:not(:has(.search-location)) { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 16px; } .hero-search .search-service { grid-row: 1; grid-template-rows: auto 44px; } .hero-search .search-service input { min-height: 44px; } .hero-search .search-location { grid-column: 1; grid-row: 2; padding: 0; } .hero-search>.button { grid-column: 1; grid-row: 3; width: 100%; } .hero-search:not(:has(.search-location))>.button { grid-row: 2; } .footer-top { grid-template-columns: repeat(2,minmax(0,1fr)); } .pricing-free .pricing-card { display: block; } .pricing-free .pricing-card>.feature-list { margin-top: 24px; } .pricing-free .pricing-card>.button { width: 100%; } } } @layer ui { .admin-dashboard { display: grid; gap: 28px; min-width: 0; } .admin-dashboard>.admin-settings-search { margin-bottom: 0; } .admin-dashboard-heading { margin: 0; gap: 20px; align-items: center; } .admin-dashboard-heading h1 { font-size: clamp(27px,3.3vw,38px); line-height: 1.2; } .admin-dashboard-heading p.muted { margin: 10px 0 0; font-size: 15px; } .admin-dashboard-heading>.button { flex-shrink: 0; } .admin-section-title { font-size: 18px; margin: 0 0 14px; line-height: 1.4; } .admin-overview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; } .admin-stat-card { display: grid; gap: 18px; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s,box-shadow .15s; } .admin-stat-card:hover,.admin-shortcut:hover { border-color: var(--brand); box-shadow: var(--shadow); } .admin-stat-label { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--muted); font-size: 13px; line-height: 1.45; } .admin-stat-label .icon { width: 20px; height: 20px; flex-shrink: 0; } .admin-stat-card>strong { font-size: 32px; line-height: 1.1; font-weight: 650; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .admin-stat-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 550; color: var(--brand); } .admin-stat-link .icon { width: 16px; height: 16px; flex-shrink: 0; } .admin-queue { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: var(--subtle); border: 1px solid var(--line); border-radius: 12px; } .admin-queue-icon { display: flex; flex-shrink: 0; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--surface); border-radius: 10px; color: var(--brand); } .admin-queue h2 { font-size: 17px; margin: 0 0 4px; } .admin-queue p { font-size: 13px; line-height: 1.6; margin: 0; color: var(--muted); } .admin-queue-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; } .admin-queue-links a { display: flex; align-items: center; gap: 4px; min-height: 44px; font-size: 12px; font-weight: 550; white-space: nowrap; } .admin-queue-links .icon { width: 15px; height: 15px; } .admin-shortcut-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } .admin-shortcut { display: flex; align-items: center; gap: 14px; padding: 18px; min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); transition: border-color .15s,box-shadow .15s; } .admin-shortcut-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px; background: var(--accent-soft); color: var(--brand); } .admin-shortcut-icon .icon { width: 21px; height: 21px; } .admin-shortcut>div { min-width: 0; flex: 1; } .admin-shortcut h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.4; } .admin-shortcut p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .admin-shortcut>.icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); } .admin-insights-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: start; } .admin-insight { min-width: 0; margin: 0; padding: 24px; } .admin-insight-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .admin-insight-heading h2 { font-size: 18px; margin: 0; line-height: 1.4; } .admin-insight-heading>a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 12px; color: var(--brand); font-weight: 550; } .admin-insight-heading .icon { width: 15px; height: 15px; } .admin-insight-hint { font-size: 12px; margin: 0 0 18px; color: var(--muted); line-height: 1.6; } .admin-category-ranks,.admin-activity { margin: 0; padding: 0; list-style: none; } .admin-category-ranks li+li { border-top: 1px solid var(--line); } .admin-category-ranks a { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 6px 10px; padding: 12px 0; font-size: 13px; } .admin-category-ranks a:hover .admin-category-name { text-decoration: underline; } .admin-rank { color: var(--muted); font-size: 12px; } .admin-category-name { overflow-wrap: anywhere; } .admin-category-ranks strong { font-variant-numeric: tabular-nums; font-weight: 650; } .admin-category-ranks progress { grid-column: 2/-1; width: 100%; height: 4px; border: 0; border-radius: 4px; overflow: hidden; background: var(--subtle); color: var(--brand); appearance: none; } .admin-category-ranks progress::-webkit-progress-bar { background: var(--subtle); } .admin-category-ranks progress::-webkit-progress-value { background: var(--brand); border-radius: 4px; } .admin-category-ranks progress::-moz-progress-bar { background: var(--brand); border-radius: 4px; } .admin-activity li { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); } .admin-activity li:first-child { padding-top: 4px; } .admin-activity li:last-child { border-bottom: 0; padding-bottom: 0; } .admin-activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 6px; } .admin-activity strong { display: block; font-size: 14px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; } .admin-activity time { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; } .admin-panel-empty { font-size: 14px; padding: 20px 0; color: var(--muted); } @media (max-width:1000px) { .admin-queue { flex-wrap: wrap; } .admin-queue-links { width: 100%; justify-content: flex-start; margin-left: 58px; } .admin-shortcut-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:700px) { .admin-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .admin-stat-card { padding: 16px; gap: 14px; } .admin-insights-grid { grid-template-columns: minmax(0,1fr); } } @media (max-width:480px) { .admin-dashboard { gap: 24px; } .admin-dashboard-heading>.button { width: 100%; min-height: 44px; } .admin-stat-label { font-size: 12px; gap: 6px; align-items: flex-start; min-height: 54px; } .admin-stat-label .icon { width: 16px; height: 16px; margin-top: 2px; } .admin-stat-card>strong { font-size: 27px; } .admin-stat-link { font-size: 11px; min-height: 32px; } .admin-shortcut-grid { grid-template-columns: minmax(0,1fr); } .admin-queue { padding: 18px; gap: 12px; align-items: flex-start; } .admin-queue>div:not(.admin-queue-links) { flex: 1; min-width: 0; } .admin-queue-links { margin-left: 0; gap: 0; width: 100%; display: grid; } .admin-queue-links a { justify-content: space-between; border-top: 1px solid var(--line); font-size: 13px; } .admin-insight { padding: 18px; } .admin-insight-heading h2 { font-size: 17px; } } } @layer components { .admin-settings-search { padding: 24px; margin-bottom: 22px; border: 1px solid var(--line); box-shadow: 0 3px 14px #202b3308; } .admin-settings-search-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .admin-settings-search-icon,.admin-settings-topic-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 9px; background: var(--accent-soft); color: var(--brand); } .admin-settings-search-heading h2 { font-size: 20px; margin-bottom: 6px; } .admin-settings-search-heading p { font-size: 13px; line-height: 1.7; } .admin-settings-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: end; } .admin-settings-query-label { grid-column: 1/-1; font-size: 13px; } .admin-settings-query-control { display: flex; gap: 8px; min-width: 0; } .admin-settings-query-control input { min-width: 0; min-height: 50px; padding: 13px 16px; font-size: 16px; } .admin-settings-query-control>.button { flex-shrink: 0; min-height: 50px; } .admin-settings-search-submit { min-height: 50px; } .admin-settings-search-count { margin-top: 12px; font-size: 12px; line-height: 1.5; } .admin-settings-search-results { margin-top: 16px; border-top: 1px solid var(--line); } .admin-settings-search-results ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 12px; list-style: none; padding: 12px 0 0; margin: 0; } .admin-settings-search-results a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 7px; overflow-wrap: anywhere; } .admin-settings-search-results li { min-width: 0; } .admin-settings-search-results li a:hover,.admin-settings-search-results li a:focus-visible { background: var(--subtle); } .admin-settings-search-results strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; } .admin-settings-search-results small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.5; } .admin-settings-search-results .admin-settings-all-results { display: inline-flex; padding-inline: 0; color: var(--brand); font-size: 13px; font-weight: 600; } .admin-settings-search-empty { margin-top: 16px; padding: 18px; border-radius: 9px; background: var(--subtle); } .admin-settings-search-empty h3 { font-size: 15px; margin-bottom: 6px; } .admin-settings-search-empty p { font-size: 13px; line-height: 1.7; } .admin-settings-group-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 22px; } .admin-settings-group-nav a { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; line-height: 1.5; } .admin-settings-group-nav a>.icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); } .admin-settings-group-nav a>span:first-of-type { min-width: 0; overflow-wrap: anywhere; } .admin-settings-group-nav a:hover,.admin-settings-group-nav a[aria-current=location] { border-color: var(--brand); background: var(--accent-soft); color: var(--brand); } .admin-settings-group-count { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 25px; min-height: 25px; padding: 2px 7px; border-radius: 6px; background: var(--subtle); color: var(--muted); font-size: 11px; font-weight: 500; } .admin-settings-group-nav .admin-settings-group-count { margin-left: auto; } .admin-settings-groups { display: grid; gap: 12px; } .admin-settings-group.panel { padding: 0; margin: 0; overflow: visible; scroll-margin-top: 24px; } .admin-settings-group>summary { display: flex; align-items: center; gap: 14px; min-height: 78px; padding: 18px 22px; border-radius: 11px; list-style: none; } .admin-settings-group>summary::-webkit-details-marker { display: none; } .admin-settings-topic-title { flex: 1; min-width: 0; } .admin-settings-topic-title strong { display: block; font-size: 16px; line-height: 1.4; } .admin-settings-topic-title small { display: block; font-size: 12px; color: var(--muted); line-height: 1.65; margin-top: 4px; } .admin-settings-group>summary>.icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); transition: transform .15s; } .admin-settings-group[open]>summary>.icon { transform: rotate(180deg); } .admin-settings-group[open]>summary { border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; } .admin-settings-group-body { padding: 24px; } .admin-setting-field { min-width: 0; scroll-margin-top: 32px; } .admin-setting-field[hidden],.admin-settings-group-note[hidden],.admin-settings-visibility-help[hidden],.admin-settings-dependency-hint[hidden] { display: none !important; } .admin-settings-visibility-help { font-size: 12px; color: var(--muted); margin-bottom: 18px; line-height: 1.7; } .admin-settings-dependency-hint { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--green); background: var(--subtle); font-size: 13px; line-height: 1.7; } .admin-settings-search-results .admin-settings-result-dependency { color: var(--green); } .admin-setting-field>[data-setting-label] { line-height: 1.5; } .admin-setting-field small { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; } .admin-setting-field:target { outline: 2px solid var(--brand); outline-offset: 8px; border-radius: 4px; } .admin-settings-group-note { margin-top: 22px; font-size: 13px; line-height: 1.7; } .admin-settings-savebar { position: sticky; bottom: 12px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); } .admin-settings-savebar p { font-size: 12px; line-height: 1.7; } .admin-settings-savebar>.button { flex-shrink: 0; min-height: 46px; } @media (max-width:700px) { .admin-settings-group-nav { grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-settings-search-results ul { grid-template-columns: minmax(0,1fr); } } @media (max-width:600px) { .admin-settings-search { padding: 18px; } .admin-settings-search-heading { gap: 10px; } .admin-settings-search-heading h2 { font-size: 18px; } .admin-settings-search-form { grid-template-columns: minmax(0,1fr); } .admin-settings-query-control>.button { padding-inline: 12px; } .admin-settings-query-control>.button .icon { display: none; } .admin-settings-search-submit { width: 100%; } .admin-settings-group-nav a { gap: 7px; padding: 10px; font-size: 12px; } .admin-settings-group-nav a>.icon { display: none; } .admin-settings-group>summary { gap: 10px; padding: 16px; } .admin-settings-topic-icon { width: 34px; height: 34px; } .admin-settings-topic-title strong { font-size: 15px; } .admin-settings-group>summary .admin-settings-group-count { display: none; } .admin-settings-group-body { padding: 20px 16px; } .admin-settings-group-body>.form-grid { grid-template-columns: minmax(0,1fr); } .admin-settings-savebar { bottom: 8px; gap: 10px; padding: 12px; flex-wrap: wrap; } .admin-settings-savebar>.button { width: 100%; } } } @layer ui { .admin-ai-form { display: grid; gap: 22px; } .admin-ai-form>.panel { margin: 0; } .admin-ai-form [data-ai-enabled][hidden],.admin-ai-form [data-ai-disabled][hidden] { display: none; } .ai-state { flex-shrink: 0; display: inline-flex; padding: 8px 13px; border-radius: 20px; background: var(--subtle); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; } .ai-state[data-ai-saved-mode=review],.ai-state[data-ai-saved-mode=automatic] { color: var(--green); background: var(--green); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb,var(--green) 8%,var(--surface)); } } .ai-section-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 23px; } .ai-section-heading p { font-size: 13px; margin-top: 5px; max-width: 800px; } .ai-section-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 11px; background: var(--subtle); color: var(--green); } .ai-section-icon .icon { width: 22px; height: 22px; } .ai-mode-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .ai-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .ai-mode { display: flex; align-items: flex-start; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; font-weight: 400; } .ai-mode:has(input:checked) { border-color: var(--green); background: var(--green); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb,var(--green) 5%,var(--surface)); } box-shadow: 0 0 0 1px var(--green); } .ai-mode input { flex: 0 0 17px; width: 17px; height: 17px; margin: 4px 0 0; accent-color: var(--green); } .ai-mode strong { display: block; font-size: 14px; line-height: 1.6; color: var(--ink); } .ai-mode small { display: block; font-size: 12px; line-height: 1.7; margin-top: 7px; color: var(--muted); } .ai-safety-note { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 20px; } .ai-safety-note .icon { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px; color: var(--green); } .ai-provider-field { max-width: 420px; margin-bottom: 22px; } .ai-provider-panel { margin: 0; padding: 21px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; } .ai-provider-panel+ .ai-provider-panel:not([hidden]) { margin-top: 26px; } .ai-provider-panel legend { font-weight: 600; font-size: 15px; padding-right: 12px; } .ai-provider-panel[hidden] { display: none; } .ai-provider-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; } .ai-key-status { display: inline-flex; margin-left: 7px; font-size: 11px; color: var(--muted); font-weight: 400; } .ai-key-status.is-saved { color: var(--green); } .ai-key-maintenance summary { cursor: pointer; font-size: 13px; font-weight: 600; } .ai-key-maintenance p { font-size: 12px; margin-top: 12px; } .ai-key-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .ai-refresh-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 22px; font-size: 12px; } .ai-refresh-help { font-size: 12px; margin-top: 10px; max-width: 820px; } .ai-data-note { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; background: var(--subtle); border: 1px solid var(--line); border-radius: 11px; } .ai-data-note>.icon,.ai-data-note>span { flex: 0 0 20px; color: var(--green); } .ai-data-note strong { font-size: 13px; } .ai-data-note p { font-size: 12px; color: var(--muted); margin-top: 4px; max-width: 920px; } .admin-ai-form .admin-settings-savebar { margin: 0; gap: 20px; } .admin-ai-form .admin-settings-savebar p { font-size: 13px; color: var(--muted); max-width: 700px; } .admin-ai-form .admin-settings-savebar .button { flex-shrink: 0; } .ai-model-picker { position: relative; min-width: 0; } .ai-model-picker select[hidden] { display: none; } .ai-model-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 11px 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 13px; cursor: pointer; } .ai-model-trigger>span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-model-trigger>span:last-child { flex-shrink: 0; color: var(--muted); font-size: 18px; } .ai-model-trigger:focus-visible,.ai-model-search:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .ai-model-trigger[aria-expanded=true] { border-color: var(--green); } .ai-model-popover { position: absolute; z-index: 40; inset: calc(100% + 7px) 0 auto; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); } .ai-model-popover[hidden] { display: none; } .ai-model-popover input { min-width: 0; width: 100%; font-size: 13px; } .ai-model-results { max-height: 270px; overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; padding: 0; list-style: none; } .ai-model-option { padding: 10px; border-radius: 6px; font-size: 12px; line-height: 1.6; cursor: pointer; overflow-wrap: anywhere; font-weight: 400; } .ai-model-option[aria-selected=true] { color: var(--green); font-weight: 600; } .ai-model-option.is-active,.ai-model-option:hover { background: var(--subtle); } .ai-model-status { font-size: 11px; color: var(--muted); padding: 7px 4px 0; line-height: 1.5; font-weight: 400; } @media (max-width:850px) { .ai-modes { grid-template-columns: 1fr; } .ai-mode { padding: 15px; } .ai-mode small { margin-top: 3px; } .ai-provider-fields { grid-template-columns: 1fr; gap: 20px; } } @media (max-width:600px) { .admin-ai-form { gap: 16px; } .admin-page-heading .ai-state { margin-top: 15px; } .ai-section-heading { gap: 10px; } .ai-section-icon { flex-basis: 35px; height: 35px; } .ai-refresh-row { gap: 10px; } .ai-refresh-row .button { width: 100%; } .admin-ai-form .admin-settings-savebar { align-items: stretch; flex-direction: column; } .admin-ai-form .admin-settings-savebar .button { width: 100%; } .ai-model-results { max-height: 230px; } } } @layer components { .admin-request-workspace { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(290px,1fr); gap: 24px; align-items: start; margin-bottom: 28px; } .admin-request-workspace>.panel,.admin-request-sidebar>.panel { margin: 0; min-width: 0; } .admin-request-sidebar { display: grid; gap: 20px; min-width: 0; } .admin-request-heading .badge { flex-shrink: 0; } .admin-request-editor .admin-section-heading p,.admin-request-private>p { font-size: 13px; line-height: 1.7; margin-top: 9px; } .admin-request-form { margin-top: 22px; } .admin-request-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 20px; } .admin-request-form .field { margin: 0; min-width: 0; } .admin-request-form .form-grid { margin: 0; } .admin-request-form textarea { resize: vertical; line-height: 1.75; } .admin-request-form small { font-size: 12px; color: var(--muted); line-height: 1.6; } .admin-request-form fieldset:disabled { opacity: .8; } .admin-request-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .admin-request-actions-help { font-size: 12px; line-height: 1.7; } .admin-request-sidebar h2 { font-size: 19px; line-height: 1.35; } .admin-request-ai .admin-section-heading { align-items: start; flex-wrap: wrap; gap: 12px; } .admin-request-facts { display: grid; gap: 12px; margin: 20px 0 0; font-size: 13px; } .admin-request-facts>div { display: grid; grid-template-columns: minmax(75px,.65fr) minmax(0,1.35fr); gap: 16px; } .admin-request-facts dt { color: var(--muted); } .admin-request-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); } .admin-request-ai-copy { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; overflow-wrap: anywhere; } .admin-request-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 7px; } .admin-request-ai-copy strong { font-size: 14px; line-height: 1.6; } .admin-request-ai-copy p { margin-top: 10px; font-size: 13px; white-space: pre-wrap; } .admin-request-source { margin-top: 20px; border-top: 1px solid var(--line); } .admin-request-source summary,.admin-request-reject>summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink); } .admin-request-source summary { padding-top: 16px; } .admin-request-source summary::-webkit-details-marker,.admin-request-reject>summary::-webkit-details-marker { display: none; } .admin-request-source summary>.icon,.admin-request-reject>summary>.icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform .15s; } .admin-request-source[open]>summary>.icon,.admin-request-reject[open]>summary>.icon { transform: rotate(180deg); } .admin-request-source>div { padding: 16px; margin-top: 15px; background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; max-height: 460px; overflow: auto; } .admin-request-source h3 { font-size: 15px; line-height: 1.6; margin-bottom: 10px; } .admin-request-source p { font-size: 13px; line-height: 1.8; white-space: pre-wrap; color: var(--ink); } .admin-request-attachments { list-style: none; display: grid; gap: 10px; padding: 16px 0 0; margin: 20px 0 0; border-top: 1px solid var(--line); } .admin-request-attachments a { display: flex; align-items: start; gap: 9px; font-size: 13px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; color: var(--green); } .admin-request-attachments .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; } .admin-request-reject form { display: grid; gap: 16px; margin-top: 18px; } .admin-request-reject form .button { justify-self: start; } @media (max-width:1000px) { .admin-request-workspace { grid-template-columns: 1fr; } .admin-request-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-request-reject { grid-column: 1/-1; } } @media (max-width:650px) { .admin-request-sidebar,.admin-request-form .form-grid { grid-template-columns: 1fr; } .admin-request-actions { flex-direction: column; } .admin-request-actions>.button { width: 100%; justify-content: center; } .admin-request-workspace .panel { padding: 22px; } .admin-request-heading .badge { margin-top: 14px; display: inline-flex; } } } @layer components { .taxonomy-heading .button-row { flex-shrink: 0; } .taxonomy-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; } .taxonomy-overview>div { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .taxonomy-overview strong { font-size: 27px; line-height: 1.2; font-weight: 700; color: var(--ink); } .taxonomy-overview span { font-size: 13px; color: var(--muted); line-height: 1.5; } .taxonomy-workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; align-items: start; } .taxonomy-workspace.has-editor { grid-template-columns: 350px minmax(0,1fr); } .taxonomy-workspace .panel { margin: 0; min-width: 0; } .taxonomy-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; } .taxonomy-panel-heading h2 { font-size: 21px; overflow-wrap: anywhere; } .taxonomy-panel-heading p { font-size: 13px; margin-top: 8px; line-height: 1.7; } .taxonomy-panel-heading>.button { flex-shrink: 0; } .taxonomy-kicker { display: block; font-size: 10px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 1.1px; margin-bottom: 9px; } .taxonomy-close { width: 36px; height: 36px; border: 1px solid var(--line); display: grid; place-items: center; border-radius: 8px; flex-shrink: 0; color: var(--muted); } .taxonomy-close:hover { background: var(--subtle); color: var(--ink); } .taxonomy-editor { scroll-margin-top: 24px; } .taxonomy-editor .taxonomy-panel-heading { margin-bottom: 14px; } .taxonomy-editor-path { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; margin-bottom: 20px; } .taxonomy-editor-form { display: grid; gap: 20px; margin-top: 22px; } .taxonomy-editor-form .field { font-size: 13px; min-width: 0; } .taxonomy-editor-form small { font-size: 11px; line-height: 1.7; font-weight: 400; } .taxonomy-editor-form .checkbox { align-items: flex-start; line-height: 1.6; font-size: 13px; } .taxonomy-editor-form .checkbox input { flex-shrink: 0; margin-top: 3px; } .taxonomy-editor-actions { display: grid; gap: 12px; text-align: center; } .taxonomy-editor-actions>a { font-size: 13px; min-height: 36px; display: grid; place-items: center; color: var(--muted); } .taxonomy-editor-links { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 12px; display: grid; } .taxonomy-editor-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 12px; color: var(--brand); line-height: 1.5; } .taxonomy-editor-links .icon { width: 16px; height: 16px; } .taxonomy-editor-links span { border-radius: 5px; background: var(--subtle); padding: 1px 7px; color: var(--muted); } .taxonomy-advanced { border-block: 1px solid var(--line); padding-block: 8px; } .taxonomy-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; font-size: 13px; font-weight: 600; } .taxonomy-advanced summary .icon { width: 16px; height: 16px; } .taxonomy-advanced[open] summary .icon,.taxonomy-section[open]>summary>.icon { transform: rotate(180deg); } .taxonomy-advanced .field { margin-top: 16px; margin-bottom: 14px; } .taxonomy-filter-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 16px; } .taxonomy-filter-grid .field { font-size: 12px; min-width: 0; } .taxonomy-filter-grid input,.taxonomy-filter-grid select { font-size: 14px; } .taxonomy-list-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .taxonomy-list-tools p { font-size: 12px; } .taxonomy-list-tools>div { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .taxonomy-list-tools button { font-size: 12px; min-height: 36px; color: var(--brand); } .taxonomy-tree { list-style: none; margin: 0; padding: 0; } .has-editor .taxonomy-tree { max-height: 720px; overflow-y: auto; overscroll-behavior: contain; } .taxonomy-tree-row { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); min-height: 70px; padding: 10px 4px; position: relative; } .taxonomy-tree-row:last-child { border-bottom: 0; } .taxonomy-tree-row:hover { background: var(--subtle); } .taxonomy-tree-row.is-selected { background: var(--accent-soft); border-radius: 7px; } .taxonomy-tree-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .taxonomy-branch-toggle,.taxonomy-branch-spacer { width: 32px; height: 36px; flex-shrink: 0; } .taxonomy-branch-toggle { display: grid; place-items: center; border: 0; border-radius: 6px; color: var(--muted); background: transparent; } .taxonomy-branch-toggle:hover { background: var(--accent-soft); color: var(--brand); } .taxonomy-branch-toggle .icon { width: 17px; height: 17px; transition: transform .15s; } .taxonomy-branch-toggle[aria-expanded=true] .icon { transform: rotate(90deg); } .taxonomy-tree-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--subtle); color: var(--brand); flex-shrink: 0; } .taxonomy-tree-icon .icon { width: 19px; height: 19px; } .taxonomy-tree-label { display: block; min-width: 0; flex: 1; padding-block: 8px; } .taxonomy-tree-label strong { font-size: 14px; line-height: 1.5; display: block; font-weight: 600; overflow-wrap: anywhere; } .taxonomy-tree-path { display: none; font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; } .is-filtered .taxonomy-tree-path:not(:empty) { display: block; } .is-filtered .taxonomy-branch-toggle { visibility: hidden; } .taxonomy-child-count { flex-shrink: 0; color: var(--muted); background: var(--subtle); min-width: 26px; min-height: 26px; display: grid; place-items: center; padding: 2px 6px; font-size: 11px; border-radius: 6px; } .taxonomy-row-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .taxonomy-edit-link { font-size: 12px; font-weight: 550; color: var(--brand); padding-block: 10px; } .taxonomy-add-child { width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; } .taxonomy-add-child .icon { width: 16px; height: 16px; } .taxonomy-add-child:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); } .taxonomy-workspace:not(.is-filtered) .taxonomy-tree-row[data-depth="1"] .taxonomy-tree-main { padding-left: 25px; } .taxonomy-workspace:not(.is-filtered) .taxonomy-tree-row[data-depth="2"] .taxonomy-tree-main { padding-left: 50px; } .taxonomy-workspace:not(.is-filtered) .taxonomy-tree-row:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]) .taxonomy-tree-main { padding-left: 70px; } .taxonomy-tree-row:not([data-depth="0"]) .taxonomy-tree-icon { display: none; } .taxonomy-row-order { display: none; flex-shrink: 0; gap: 5px; } .is-reordering .taxonomy-row-order { display: flex; } .is-reordering .taxonomy-row-actions { display: none; } .taxonomy-row-order button { width: 36px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--brand); font-size: 18px; } .taxonomy-row-order button:disabled { opacity: .3; cursor: default; } [data-taxonomy-drag][draggable=true] { cursor: grab; } .taxonomy-tree-row.is-dragging { opacity: .4; } .taxonomy-tree-row.is-drop-target { box-shadow: inset 0 2px var(--brand); } .taxonomy-orderbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 16px; } .taxonomy-orderbar strong { font-size: 14px; } .taxonomy-orderbar p { font-size: 12px; line-height: 1.6; margin-top: 5px; max-width: 590px; } .taxonomy-orderbar .button-row { flex-shrink: 0; } .taxonomy-sort-status { font-size: 12px; padding: 10px 0; color: var(--brand); } .taxonomy-sort-status:empty { display: none; } .taxonomy-sort-status[data-state=error] { color: #a13d3d; } .taxonomy-workspace button:disabled { cursor: default; } .taxonomy-empty { text-align: center; padding: 48px 24px; } .taxonomy-empty>.icon { width: 30px; height: 30px; color: var(--muted); margin-bottom: 15px; } .taxonomy-empty h3 { font-size: 18px; } .taxonomy-empty p { font-size: 13px; margin-top: 10px; } .taxonomy-extras { display: grid; gap: 16px; margin-top: 24px; } .taxonomy-section.panel { padding: 0; margin: 0; scroll-margin-top: 24px; } .taxonomy-section>summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px; } .taxonomy-section>summary h2 { display: flex; align-items: center; gap: 12px; font-size: 19px; } .taxonomy-section>summary p { font-size: 13px; margin-top: 8px; line-height: 1.6; } .taxonomy-section>summary>.icon { flex-shrink: 0; width: 18px; } .taxonomy-section-body { border-top: 1px solid var(--line); padding: 24px; } .taxonomy-section-body>p { font-size: 13px; } .taxonomy-service-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .taxonomy-service-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; } .taxonomy-service-form { display: grid; grid-template-columns: minmax(0,1fr) 150px auto; align-items: end; gap: 18px; margin-top: 22px; } .taxonomy-service-form .field { font-size: 13px; min-width: 0; } .taxonomy-fields-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; } .taxonomy-fields-layout>div { min-width: 0; } .taxonomy-fields-layout h3 { font-size: 16px; } .taxonomy-inline-empty { padding: 18px; background: var(--subtle); border-radius: 8px; font-size: 13px; margin-top: 16px; } .taxonomy-custom-fields li { flex-wrap: nowrap; } .taxonomy-custom-fields li>a { min-width: 0; overflow-wrap: anywhere; } .taxonomy-custom-fields strong { font-size: 13px; font-weight: 550; } .taxonomy-custom-fields small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; } .taxonomy-custom-fields button { min-height: 40px; min-width: 32px; color: var(--muted); } .taxonomy-danger>summary h2 { color: #a13d3d; } .taxonomy-danger .taxonomy-editor-form { max-width: 700px; } .taxonomy-danger .button { justify-self: start; } @media (max-width:1000px) { .taxonomy-workspace.has-editor { grid-template-columns: 300px minmax(0,1fr); gap: 16px; } .has-editor .taxonomy-browser,.taxonomy-editor { padding: 20px; } .has-editor .taxonomy-panel-heading,.has-editor .taxonomy-orderbar { flex-direction: column; gap: 12px; } .has-editor .taxonomy-filter-grid { grid-template-columns: minmax(0,1fr); } .has-editor .taxonomy-edit-link { display: none; } .taxonomy-list-tools { align-items: flex-start; flex-direction: column; gap: 0; } } @media (max-width:800px) { .taxonomy-workspace.has-editor { grid-template-columns: minmax(0,1fr); } .has-editor .taxonomy-tree { max-height: 620px; } .taxonomy-heading>.button-row { margin-top: 18px; } .taxonomy-overview>div { display: block; padding: 16px; } .taxonomy-overview span { display: block; margin-top: 6px; font-size: 12px; } .taxonomy-orderbar { flex-direction: column; align-items: flex-start; } .taxonomy-service-form { grid-template-columns: minmax(0,1fr) 120px; } .taxonomy-service-form>.button { grid-column: 1/-1; justify-self: start; } } @media (max-width:600px) { .taxonomy-heading .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .taxonomy-heading .button { padding: 10px; font-size: 12px; } .taxonomy-heading .button .icon { display: none; } .taxonomy-overview { gap: 8px; margin-bottom: 18px; } .taxonomy-overview>div { padding: 12px; } .taxonomy-overview strong { font-size: 23px; } .taxonomy-overview span { font-size: 11px; } .taxonomy-browser { padding: 16px; } .taxonomy-panel-heading { flex-direction: column; gap: 14px; } .taxonomy-panel-heading h2 { font-size: 20px; } .taxonomy-editor .taxonomy-panel-heading { flex-direction: row; } .taxonomy-filter-grid { grid-template-columns: minmax(0,1fr); gap: 14px; } .taxonomy-filter-grid input,.taxonomy-filter-grid select { font-size: 16px; } .taxonomy-tree-row { gap: 6px; min-height: 70px; } .taxonomy-tree-main { gap: 7px; } .taxonomy-branch-toggle,.taxonomy-branch-spacer { width: 28px; min-height: 42px; } .taxonomy-tree-icon { display: none; } .taxonomy-tree-label strong { font-size: 13px; } .taxonomy-edit-link { display: none; } .taxonomy-child-count { font-size: 10px; min-width: 22px; min-height: 22px; } .taxonomy-add-child { width: 32px; min-height: 42px; border: 0; } .taxonomy-workspace:not(.is-filtered) .taxonomy-tree-row[data-depth="1"] .taxonomy-tree-main { padding-left: 10px; } .taxonomy-workspace:not(.is-filtered) .taxonomy-tree-row[data-depth="2"] .taxonomy-tree-main { padding-left: 20px; } .taxonomy-workspace:not(.is-filtered) .taxonomy-tree-row:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]) .taxonomy-tree-main { padding-left: 30px; } .taxonomy-row-order { gap: 4px; } .taxonomy-row-order button { width: 36px; min-height: 44px; } .taxonomy-row-order [data-taxonomy-drag] { display: none; } .is-reordering .taxonomy-child-count { display: none; } .taxonomy-orderbar { padding: 14px; } .taxonomy-orderbar .button-row { width: 100%; display: grid; grid-template-columns: 1fr; } .taxonomy-list-tools>div { gap: 14px; } .taxonomy-section>summary,.taxonomy-section-body { padding: 18px; } .taxonomy-section>summary h2 { font-size: 17px; flex-wrap: wrap; gap: 8px; } .taxonomy-section>summary p { font-size: 12px; } .taxonomy-fields-layout,.taxonomy-service-list,.taxonomy-service-form { grid-template-columns: minmax(0,1fr); } .taxonomy-service-form>.button { justify-self: stretch; } } } @layer ui { .taxonomy-select select.location-native-select { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); } } @layer ui { .admin-workspace .page-main { padding-bottom: 48px; } .admin-workspace .page-heading,.admin-page-heading { margin-block: 26px 24px; gap: 20px; align-items: flex-start; } .admin-workspace .page-heading h1 { font-size: clamp(26px,3vw,34px); letter-spacing: -.035em; } .admin-page-heading p { max-width: 780px; margin-top: 10px; font-size: 14px; line-height: 1.7; } .admin-workspace .panel { min-width: 0; box-shadow: none; } .admin-workspace .panel h2 { font-size: 20px; line-height: 1.4; } .admin-workspace button:disabled { cursor: not-allowed; } .admin-workspace .button,.admin-workspace button.button-secondary { min-height: 44px; } .admin-workspace .field { min-width: 0; } .admin-workspace .field small { line-height: 1.65; } .admin-workspace input,.admin-workspace select,.admin-workspace textarea { scroll-margin: 30px; } .admin-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .admin-section-heading p { margin-top: 6px; font-size: 13px; } .admin-filterbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 18px; background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; margin-block: 18px; } .admin-filterbar>.field { flex: 1 1 200px; margin: 0; } .admin-filterbar>.button,.admin-filterbar>button { flex: 0 0 auto; } .admin-empty-state { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 30px 20px; border: 1px dashed var(--line); border-radius: 10px; background: var(--subtle); color: var(--muted); font-size: 14px; } .admin-empty-state h3 { color: var(--ink); font-size: 16px; } .admin-empty-state p { max-width: 580px; } .admin-workspace .pagination { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; } .admin-workspace .pagination a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; } .admin-workspace .pagination:empty { display: none; } .admin-responsive-table { table-layout: auto; width: 100%; } .admin-responsive-table td { overflow-wrap: anywhere; } .admin-responsive-table tbody tr:hover { background: var(--subtle); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb,var(--subtle) 55%,transparent); } } .admin-responsive-table small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; } .admin-responsive-table .button-row { gap: 7px; } .admin-nav-search { padding: 18px 18px 0; max-width: 720px; } .admin-nav-search label { font-size: 13px; margin-bottom: 7px; } .admin-nav-search>div { display: flex; gap: 8px; } .admin-nav-search input { min-width: 0; } .admin-nav-search p { margin-block: 10px; font-size: 13px; } .admin-save-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .admin-settings-savebar strong { display: block; font-size: 13px; line-height: 1.5; } .has-unsaved-changes .admin-settings-savebar { border-color: var(--brand); } .admin-system-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; } .admin-system-summary>span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: var(--subtle); } .admin-system-summary .needs-attention { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-line); } .admin-system-columns { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; align-items: start; margin-bottom: 22px; } .admin-system-columns .panel { margin: 0; } .admin-system-checks { list-style: none; margin: 18px 0; padding: 0; } .admin-system-checks li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .admin-system-checks li>span { flex: 1; min-width: 0; } .admin-system-checks .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--green); } .admin-system-checks.attention .icon { color: var(--warning-ink); } .admin-workspace .admin-disclosure { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); } .admin-disclosure>summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 600; min-height: 44px; } .admin-disclosure>summary::after { content: '+'; margin-left: auto; font-size: 20px; font-weight: 400; } .admin-disclosure[open]>summary::after { content: '−'; } .admin-disclosure>div { padding: 0 14px 14px; } .admin-disclosure .admin-system-checks { margin: 0; } .admin-system-command { display: block; padding: 14px; background: var(--subtle); border: 1px solid var(--line); border-radius: 8px; margin: 14px 0; overflow-wrap: anywhere; } .admin-system-cron p { font-size: 13px; margin-top: 10px; } .admin-system-cron form { margin-top: 18px; } .admin-system-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .admin-system-links a { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; } .admin-system-log { margin-top: 16px; } .admin-system-section { scroll-margin-top: 24px; } .admin-event-details summary { font-size: 12px; color: var(--brand); padding: 8px 0; min-height: 40px; text-decoration: underline; text-underline-offset: 3px; } .admin-event-details pre { font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 480px; max-height: 240px; overflow: auto; background: var(--subtle); padding: 12px; border-radius: 6px; } @media (max-width:800px) { .admin-system-columns { grid-template-columns: minmax(0,1fr); } } @media (max-width:700px) { .admin-responsive-table,.admin-responsive-table tbody,.admin-responsive-table tr { display: block; min-width: 0; width: 100%; } .admin-responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .admin-responsive-table tbody { display: grid; gap: 14px; } .admin-responsive-table tbody tr { border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; background: var(--surface); } .admin-responsive-table td { display: grid; grid-template-columns: minmax(78px,.7fr) minmax(0,1.4fr); gap: 6px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; } .admin-responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; } .admin-responsive-table td>* { min-width: 0; max-width: 100%; grid-column: 2; } .admin-responsive-table td>*:first-child { grid-row: 1; } .admin-responsive-table td>.badge { justify-self: start; } .admin-responsive-table td:last-child { border-bottom: 0; } .admin-responsive-table th[scope=row] { display: block; padding: 12px 0; background: none; white-space: normal; } .admin-responsive-table td[colspan] { display: block; border: 0; } .admin-responsive-table td[colspan]::before { display: none; } .admin-responsive-table select { min-width: 0 !important; } .admin-responsive-table td .button-row { flex-direction: column; align-items: stretch; } .admin-responsive-table td .button { width: 100%; padding-inline: 10px; } } @media (max-width:600px) { .admin-workspace .page-heading,.admin-page-heading { display: block; margin-block: 22px; } .admin-page-heading>.button,.admin-page-heading>.button-row { margin-top: 16px; } .admin-workspace .page-heading h1 { font-size: 27px; } .admin-filterbar { padding: 14px; gap: 12px; } .admin-filterbar>.field { flex-basis: 100%; } .admin-filterbar>.button,.admin-filterbar>button { flex: 1; } .admin-save-actions { width: 100%; flex-wrap: wrap; } .admin-save-actions>.button { flex: 1; min-width: 110px; padding-inline: 10px; font-size: 13px; } .admin-settings-savebar { position: static; } .has-unsaved-changes .admin-settings-savebar { position: sticky; bottom: 8px; } .admin-nav-search { padding: 14px 14px 0; } .admin-nav-search>div { flex-wrap: wrap; } .admin-nav-search input { flex: 1 1 180px; } .admin-content-list-controls>.field { grid-column: 1/-1; } .admin-content-list-controls>.text-button { grid-column: 2; grid-row: 2; min-height: 44px; } .admin-content-list-controls>.muted { grid-column: 1; grid-row: 2; align-self: center; } .admin-system-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-system-links a { text-align: center; } } } @layer ui { .admin-management-query,.admin-management-period-note { max-width: 100%; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .admin-users-table td,.admin-ip-table td { vertical-align: top; } .admin-users-table td:first-child { width: 54px; } .admin-user-actions { display: grid; gap: 10px; min-width: 180px; max-width: 290px; } .admin-user-actions>.button-row { flex-wrap: wrap; margin: 0; } .admin-user-actions button { font-size: 12px; padding-inline: 12px; } .admin-user-role { border-top: 1px solid var(--line); font-size: 12px; } .admin-user-role>summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--brand); cursor: pointer; } .admin-user-role>summary::after { content: '+'; font-size: 18px; font-weight: 400; } .admin-user-role[open]>summary::after { content: '−'; } .admin-user-role>form { padding-top: 8px; } .admin-user-role p { margin: 8px 0 12px; font-size: 12px; line-height: 1.6; } .admin-user-role .field { font-size: 12px; } .admin-account-protected { display: block; font-size: 12px; line-height: 1.6; } .admin-ip-panel { scroll-margin-top: 24px; } .admin-ip-add { margin-bottom: 18px; } .admin-ip-add .form-grid { margin-top: 8px; align-items: end; } .admin-ip-add .form-grid>.button-secondary { min-height: 44px; } .admin-ip-table code { font-size: 12px; white-space: normal; overflow-wrap: anywhere; } .admin-moderation-filters { display: grid; gap: 16px; } .admin-management-filtergroup { min-width: 0; } .admin-filter-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--muted); } .admin-moderation-filters .tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; border: 0; padding: 0; overflow: visible; } .admin-moderation-filters .tabs a { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; line-height: 1.5; text-align: center; } .admin-moderation-filters .tabs a[aria-current=page] { background: var(--action); color: #fff; border-color: var(--action); box-shadow: none; } .admin-moderation-heading { margin-top: 28px; } .admin-moderation-heading h2 { font-size: 20px; line-height: 1.4; } .admin-moderation-select-hint { font-size: 13px; line-height: 1.6; margin-bottom: 14px; } .admin-moderation-items { display: grid; gap: 14px; } .admin-moderation-card { margin: 0; padding: 20px; } .admin-moderation-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .admin-moderation-card-heading>.checkbox { align-items: flex-start; gap: 12px; min-height: 44px; min-width: 0; flex: 1; margin: 0; cursor: pointer; } .admin-moderation-card-heading input { flex-shrink: 0; margin-top: 3px; width: 20px; height: 20px; } .admin-moderation-card-heading .checkbox>span { min-width: 0; } .admin-moderation-card-heading strong { display: block; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } .admin-moderation-card-heading small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; font-weight: 400; } .admin-moderation-card-heading>a { flex-shrink: 0; font-size: 12px; } .admin-moderation-content { font-size: 14px; line-height: 1.75; margin: 16px 0 0; overflow-wrap: anywhere; } .admin-moderation-bulk { margin-top: 22px; } .admin-moderation-bulk .form-grid { align-items: start; } .admin-moderation-bulk .field small { font-size: 12px; color: var(--muted); line-height: 1.6; } .admin-moderation-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; } .admin-moderation-submit p { font-size: 12px; line-height: 1.6; max-width: 550px; } .admin-abuse-list { display: grid; } .admin-abuse-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); } .admin-abuse-item:first-child { padding-top: 0; border-top: 0; } .admin-abuse-item:last-child { padding-bottom: 0; } .admin-abuse-item>div { min-width: 0; flex: 1; } .admin-abuse-item h3 { font-size: 13px; margin: 0 0 6px; color: var(--muted); } .admin-abuse-item p { font-size: 14px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; } .admin-abuse-item p.muted { font-size: 12px; margin-top: 8px; } .admin-abuse-item form { flex-shrink: 0; } .admin-report-exports { flex-wrap: wrap; } .admin-report-exports a { font-size: 13px; min-height: 44px; } .admin-report-table th { line-height: 1.6; } .admin-report-table td { font-variant-numeric: tabular-nums; vertical-align: top; } .admin-report-table th small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; white-space: normal; } .admin-report-method { margin-top: 20px; } .admin-report-method p { font-size: 13px; line-height: 1.7; } @media (max-width:700px) { .admin-user-actions { min-width: 0; max-width: none; width: 100%; } .admin-user-actions>.button-row { align-items: stretch; } .admin-user-actions button { width: 100%; padding-inline: 8px; white-space: normal; } .admin-users-table td:first-child { width: auto; } .admin-user-role>form { padding-bottom: 8px; } .admin-ip-table td form,.admin-ip-table button { width: 100%; } .admin-report-exports { width: 100%; } .admin-report-exports a { flex: 1; min-width: 0; padding-inline: 12px; white-space: normal; } } @media (max-width:480px) { .admin-moderation-card { padding: 16px; } .admin-moderation-card-heading { flex-wrap: wrap; gap: 10px; } .admin-moderation-card-heading>.checkbox { flex-basis: 100%; } .admin-moderation-card-heading>a { margin-left: 32px; min-height: 44px; } .admin-moderation-filters .tabs a { flex: 1 1 110px; padding-inline: 10px; font-size: 12px; } .admin-moderation-submit { display: grid; } .admin-moderation-submit>.button { width: 100%; } .admin-abuse-item { flex-wrap: wrap; gap: 12px; } .admin-abuse-item>div { flex-basis: 100%; } .admin-abuse-item form,.admin-abuse-item button { width: 100%; } .admin-report-exports { display: grid; } } } @layer ui { .admin-billing-summary { display: grid; gap: 4px; min-width: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .admin-billing-summary span { font-size: 12px; color: var(--muted); } .admin-billing-summary strong { font-size: 24px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--ink); } .admin-billing-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); font-size: 13px; line-height: 1.7; } .admin-billing-note>.icon { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: var(--brand); } .admin-billing-period { display: grid; grid-template-columns: minmax(140px,1fr) minmax(140px,1fr) auto; gap: 16px; align-items: end; } .admin-billing-period .field,.admin-catalog-search .field,.admin-billing-quicksearch .field { margin: 0; min-width: 0; } .admin-billing-filter-actions { display: flex; flex-wrap: wrap; gap: 10px; } .admin-billing-filter-hint { grid-column: 1/-1; font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; } .admin-billing-period>.admin-billing-filter-hint { margin: 0; } .admin-billing-list,.admin-catalog-list { min-width: 0; } .admin-billing-quicksearch { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-block: 18px 8px; } .admin-billing-quicksearch>.field { flex: 1 1 240px; max-width: 520px; } .admin-billing-quicksearch>[data-admin-list-count] { font-size: 12px; margin-left: auto; padding-bottom: 12px; } .admin-billing-table,.admin-catalog-table { font-size: 13px; } .admin-billing-table td,.admin-catalog-table td { overflow-wrap: anywhere; } .admin-billing-money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .admin-billing-primary-link { font-weight: 600; color: var(--ink); } .admin-billing-primary-link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .admin-billing-secondary { display: block; font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 5px; } .admin-billing-row-actions { display: grid; gap: 10px; min-width: 0; } .admin-billing-row-actions details,.admin-billing-row-actions form { min-width: 0; } .admin-billing-row-actions summary { min-height: 36px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--brand); } .admin-billing-row-actions form { display: grid; gap: 12px; max-width: 300px; margin-top: 12px; } .admin-billing-row-actions .field { margin: 0; font-size: 12px; } .admin-billing-row-actions .checkbox { font-size: 12px; align-items: flex-start; } .admin-billing-row-actions p { font-size: 12px; max-width: 320px; } .admin-billing-row-actions .button { white-space: normal; font-size: 12px; min-width: 0; } .admin-billing-search-empty { margin-top: 18px; } .admin-catalog-search { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; } .admin-catalog-search>.field { flex: 1 1 240px; max-width: 640px; } .admin-catalog-query { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .admin-catalog-table .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; } .admin-catalog-table .text-link .icon { width: 15px; height: 15px; } .admin-catalog-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-height: 36px; margin-bottom: 10px; } .admin-catalog-back .icon { width: 16px; height: 16px; } .admin-catalog-editor { max-width: 1000px; margin-bottom: 22px; } .admin-catalog-editor-form { display: grid; gap: 24px; } .admin-catalog-form-section { min-width: 0; } .admin-catalog-form-section+.admin-catalog-form-section { border-top: 1px solid var(--line); padding-top: 24px; } .admin-catalog-form-section .form-grid { margin: 16px 0 0; grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-catalog-form-section .field { margin: 0; } .admin-catalog-form-section small,.admin-catalog-active-help { font-size: 12px; line-height: 1.6; color: var(--muted); } .admin-catalog-embed { margin-top: 20px !important; } .admin-catalog-active-help { margin-top: 8px; } .admin-catalog-editor-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); } .admin-catalog-danger { max-width: 1000px; margin-bottom: 24px; } .admin-catalog-danger>summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 44px; font-weight: 600; font-size: 15px; } .admin-catalog-danger>summary>span { display: flex; align-items: center; gap: 10px; } .admin-catalog-danger>summary .icon { width: 18px; height: 18px; } .admin-catalog-danger[open]>summary>.icon { transform: rotate(180deg); } .admin-catalog-danger-body { padding-top: 18px; font-size: 13px; line-height: 1.7; } .admin-catalog-danger-body form { display: grid; gap: 16px; max-width: 600px; margin-top: 18px; } .admin-catalog-danger-body .field { margin: 0; } .admin-catalog-danger-body .button { justify-self: start; } @media (max-width:600px) { .admin-billing-summary { width: 100%; padding: 12px 16px; } .admin-billing-period { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .admin-billing-filter-actions { grid-column: 1/-1; } .admin-billing-filter-actions>.button { flex: 1 1 120px; min-width: 0; } .admin-billing-quicksearch>.field,.admin-catalog-search>.field { max-width: none; flex-basis: 100%; } .admin-billing-quicksearch>[data-admin-list-count] { margin-left: 0; padding-bottom: 0; } .admin-billing-row-actions form,.admin-billing-row-actions p { max-width: none; } .admin-billing-row-actions summary,.admin-catalog-table .text-link { min-height: 44px; } .admin-catalog-form-section .form-grid { grid-template-columns: minmax(0,1fr); } .admin-catalog-editor-actions>.button { flex: 1 1 120px; min-width: 0; } } } @layer components { .admin-content-workspace,.admin-newsletter-workspace,.admin-push-workspace,.admin-aliases-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; align-items: start; margin-bottom: 24px; } .admin-content-workspace { grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr); } .admin-aliases-workspace { grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); } .admin-content-support-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-bottom: 24px; } .admin-content-workspace>.panel,.admin-newsletter-workspace>.panel,.admin-push-workspace>.panel,.admin-aliases-workspace>.panel,.admin-content-support-grid>.panel { min-width: 0; margin: 0; } .admin-content-search { margin-bottom: 24px; } .admin-content-cover,.admin-content-body { grid-column: 1/-1; } .admin-content-cover { display: grid; gap: 14px; min-width: 0; } .admin-content-cover .field { margin: 0; } .admin-content-cover-preview { display: block; width: 100%; max-height: 280px; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); } .admin-content-cover-preview[hidden] { display: none; } .admin-content-form-actions,.admin-content-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .admin-content-title { font-weight: 650; overflow-wrap: anywhere; } .admin-content-subline { display: block; font-size: 12px; overflow-wrap: anywhere; margin-top: 5px; } .admin-content-table td { overflow-wrap: anywhere; } .admin-content-table td:last-child { white-space: normal; } .admin-content-row-actions .button { padding: 8px 12px; font-size: 12px; min-height: 36px; } .admin-content-row-actions>a:not(.button) { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; } .admin-content-row-actions .icon { width: 15px; height: 15px; } .admin-content-list-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 14px; align-items: end; margin: 20px 0; } .admin-content-list-controls .field { margin: 0; } .admin-content-list-controls>.muted { grid-column: 1/-1; font-size: 12px; } .admin-content-list-controls>.text-button { align-self: center; } .admin-content-create { border-block: 1px solid var(--line); margin: 20px 0; } .admin-content-create>summary { display: flex; align-items: center; gap: 9px; padding: 16px 0; font-size: 14px; font-weight: 600; color: var(--ink); } .admin-content-create>summary>.icon:last-child { margin-left: auto; width: 17px; height: 17px; transition: transform .15s; } .admin-content-create[open]>summary>.icon:last-child { transform: rotate(180deg); } .admin-content-create>.form-grid { padding-bottom: 20px; } .admin-content-danger { border-color: #efc7bb; margin-bottom: 24px; } .admin-content-danger form { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .admin-content-step { display: block; color: var(--brand); font-weight: 650; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; } .admin-content-label { display: block; font-size: 12px; font-weight: 650; color: var(--ink); margin-bottom: 6px; } .admin-newsletter-envelope { padding: 16px 18px; background: var(--subtle); border: 1px solid var(--line); border-radius: 9px; margin: 22px 0; overflow-wrap: anywhere; } .admin-newsletter-message { border: 1px solid var(--line); border-radius: 10px; padding: 24px; background: var(--surface); } .admin-newsletter-message h3 { margin-bottom: 20px; overflow-wrap: anywhere; } .admin-newsletter-message>div { color: var(--ink); line-height: 1.8; overflow-wrap: anywhere; } .admin-newsletter-send-help { font-size: 13px; margin: 20px 0; } .admin-newsletter-empty { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .admin-push-ready { display: flex; align-items: center; gap: 9px; color: var(--green); font-size: 14px; margin: 22px 0; } .admin-push-public-key input { font-family: ui-monospace,Consolas,monospace; font-size: 12px; } .admin-push-key-empty { padding: 25px 12px; } .admin-push-keys>form .button { width: 100%; } .admin-push-note { margin-bottom: 24px; } .admin-push-note h2 { font-size: 18px; margin-bottom: 12px; } .admin-push-note p { max-width: 850px; font-size: 14px; } .admin-aliases-note { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; font-size: 12px; line-height: 1.7; } @media (max-width:1100px) { .admin-content-workspace,.admin-content-support-grid { grid-template-columns: 1fr; } } @media (max-width:760px) { .admin-newsletter-workspace,.admin-push-workspace,.admin-aliases-workspace { grid-template-columns: 1fr; } .admin-newsletter-message { padding: 18px; } .admin-newsletter-empty { min-height: 210px; } .admin-content-form-actions>.button,.admin-newsletter-compose .form-grid>.button,.admin-newsletter-preview>form>.button { width: 100%; justify-content: center; } .admin-content-danger form { align-items: stretch; flex-direction: column; } .admin-content-danger form>.button { width: 100%; justify-content: center; } } } @layer components { .content-article { max-width: 960px; margin-inline: auto; padding-bottom: 24px; } .content-article-heading { max-width: 800px; margin: 12px auto 32px; } .content-article-date { display: block; margin-bottom: 16px; font-size: 13px; color: var(--muted); } .content-article .content-article-heading h1 { font-size: clamp(30px,3.6vw,48px); line-height: 1.15; letter-spacing: -1.4px; text-wrap: balance; } .content-article-heading .content-article-lead { max-width: none; margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--muted); } .content-article-cover { margin: 0 0 40px; overflow: hidden; border-radius: 18px; background: var(--subtle); } .content-article-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; } .content-article .content-article-body { max-width: 740px; margin-inline: auto; font-size: 17px; line-height: 1.9; color: var(--ink); overflow-wrap: anywhere; } .content-article-body p { margin: 0 0 1.25em; font-size: inherit; line-height: inherit; color: inherit; } .content-article-body h2 { margin: 1.8em 0 .65em; font-size: 28px; line-height: 1.3; letter-spacing: -.5px; color: var(--ink); } .content-article-body h3 { margin: 1.6em 0 .6em; font-size: 22px; line-height: 1.4; color: var(--ink); } .content-article-body ul,.content-article-body ol { margin: 0 0 1.25em; padding-left: 1.5em; } .content-article-body ul { list-style: disc; } .content-article-body ol { list-style: decimal; } .content-article-body li { margin: .4em 0; } .content-article-body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .content-article-body blockquote { margin: 1.5em 0; padding: 16px 24px; border-left: 3px solid var(--green); background: var(--subtle); border-radius: 0 12px 12px 0; } .content-article-body>:first-child { margin-top: 0; } .content-article-body>:last-child { margin-bottom: 0; } .idea-card.panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .idea-card-cover { display: block; overflow: hidden; background: var(--subtle); } .idea-card-cover img { display: block; width: 100%; height: auto; aspect-ratio: 8/5; object-fit: cover; transition: transform .2s; } .idea-card-cover:hover img { transform: scale(1.025); } .idea-card-content { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; flex: 1; } .idea-card-content h2 { font-size: 21px; line-height: 1.4; margin: 0; letter-spacing: -.35px; } .idea-card-content h2 a:hover { color: var(--green); } .idea-card-content p { font-size: 14px; line-height: 1.75; margin: 0 0 6px; } .idea-card-content .arrow-link { margin-top: auto; padding-top: 4px; } @media (max-width:600px) { .content-article-heading { margin-top: 6px; margin-bottom: 24px; } .content-article-date { margin-bottom: 12px; } .content-article .content-article-heading h1 { letter-spacing: -.8px; } .content-article-heading .content-article-lead { font-size: 16px; margin-top: 16px; line-height: 1.7; } .content-article-cover { margin-bottom: 28px; border-radius: 12px; } .content-article .content-article-body { font-size: 16px; line-height: 1.85; } .content-article-body h2 { font-size: 24px; } .content-article-body h3 { font-size: 20px; } .idea-card-content { padding: 21px; gap: 12px; } } @media (prefers-reduced-motion:reduce) { .idea-card-cover img { transition: none; } } } @layer ui { .billing-overview { display: grid; gap: 28px; min-width: 0; } .billing-overview .page-heading { margin-bottom: 0; } .billing-overview-heading { align-items: flex-start !important; } .billing-overview-heading>div>p:last-child { max-width: 640px; font-size: 15px; line-height: 1.75; } .billing-page-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-shrink: 0; } .billing-page-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12px; font-weight: 600; } .billing-page-nav a:hover { background: var(--subtle); color: var(--brand); } .settings-payment-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 24px; } .settings-payment-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--brand); font-size: 13px; font-weight: 600; } .settings-payment-nav a:hover { background: var(--subtle); } .settings-payment-nav .icon { width: 17px; height: 17px; flex-shrink: 0; } .billing-overview.payer-settings { gap: 20px; margin-bottom: 28px; scroll-margin-top: 24px; } .payer-settings .billing-section-heading,.payer-settings .billing-payer-grid,.payer-settings .billing-payers-empty { margin-bottom: 0; } .billing-context { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--subtle); } .billing-context>div { min-width: 0; flex: 1; } .billing-context-icon,.billing-summary-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--brand); } .billing-context-icon .icon,.billing-summary-icon .icon { width: 20px; height: 20px; } .billing-context h2,.billing-context h3 { font-size: 19px; line-height: 1.4; margin: 4px 0 7px; overflow-wrap: anywhere; } .billing-context p:last-child { font-size: 13px; line-height: 1.7; } .billing-context>.button { flex-shrink: 0; } .billing-overview-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.8fr); gap: 22px; align-items: start; } .billing-overview .panel { min-width: 0; margin: 0; } .billing-section-label { display: flex; align-items: center; gap: 10px; color: var(--muted); } .billing-section-label>.icon { width: 20px; height: 20px; color: var(--brand); } .billing-section-label h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.5; margin: 0; } .billing-balance-value { display: flex; align-items: baseline; gap: 8px; font-size: 42px; line-height: 1.3; letter-spacing: -.04em; font-weight: 700; font-variant-numeric: tabular-nums; margin: 18px 0 8px; color: var(--ink); } .billing-balance-value>span { font-size: 25px; font-weight: 500; color: var(--muted); } .billing-card-help { font-size: 13px; line-height: 1.7; } .billing-topup { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); } .billing-topup>summary { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--brand); } .billing-topup>summary .icon { width: 17px; height: 17px; flex-shrink: 0; } .billing-topup>summary>.icon:last-child { margin-left: auto; } .billing-topup[open]>summary>.icon:last-child { transform: rotate(180deg); } .billing-topup-body { padding-top: 12px; } .billing-topup-body>p { font-size: 12px; line-height: 1.7; margin-bottom: 16px; } .billing-topup-form { display: grid; gap: 16px; } .billing-topup-form .field { margin: 0; font-size: 13px; } .billing-topup-form small,.billing-form-help { font-size: 12px; line-height: 1.7; color: var(--muted); } .billing-form-help a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .billing-topup-form>.button { width: 100%; font-size: 13px; white-space: normal; } .billing-listing-card { display: flex; gap: 22px; border-top: 3px solid var(--brand); padding-top: 26px; } .billing-feature-icon { display: grid; place-items: center; flex-shrink: 0; width: 54px; height: 54px; border-radius: 14px; background: var(--subtle); color: var(--brand); } .billing-feature-icon .icon { width: 25px; height: 25px; } .billing-listing-card>div { min-width: 0; } .billing-listing-card h2 { font-size: 25px; line-height: 1.3; margin: 6px 0 12px; } .billing-listing-card>div>p { font-size: 14px; line-height: 1.8; } .billing-listing-features { display: grid; gap: 10px; margin: 20px 0 24px; padding: 0; list-style: none; } .billing-listing-features li { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.6; } .billing-listing-features .icon { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; } .billing-payment-summary { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); } .billing-payment-summary>div { min-width: 0; flex: 1; } .billing-payment-summary>div>strong { font-size: 14px; line-height: 1.6; } .billing-payment-summary p { font-size: 12px; line-height: 1.7; margin-top: 3px; } .billing-pending-value { font-size: 21px; font-variant-numeric: tabular-nums; white-space: nowrap; } .billing-payment-summary>a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--brand); min-height: 40px; } .billing-payment-summary>a .icon { width: 15px; height: 15px; } .billing-history,.billing-payers { min-width: 0; scroll-margin-top: 24px; } .billing-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; } .billing-section-heading>div { min-width: 0; } .billing-section-heading h2 { font-size: 25px; line-height: 1.4; margin: 5px 0 7px; } .billing-section-heading p:not(.context-label) { font-size: 13px; line-height: 1.7; max-width: 680px; } .billing-section-heading>.button { flex-shrink: 0; } .billing-order-list { display: grid; gap: 14px; } .billing-order-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px 24px; padding: 24px; } .billing-order-heading { display: flex; align-items: flex-start; gap: 16px; min-width: 0; } .billing-order-heading>div { min-width: 0; } .billing-order-icon,.billing-payer-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; background: var(--subtle); color: var(--brand); } .billing-order-icon .icon,.billing-payer-icon .icon { width: 20px; height: 20px; } .billing-order-reference { font-size: 11px; line-height: 1.7; color: var(--muted); margin-bottom: 5px; } .billing-order-heading h3 { font-size: 17px; line-height: 1.5; letter-spacing: -.015em; overflow-wrap: anywhere; } .billing-order-heading h3 a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .billing-order-summary { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; } .billing-order-summary>strong { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; } .billing-order-status { font-size: 11px; white-space: normal; line-height: 1.5; max-width: 150px; text-align: center; } .billing-order-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; grid-column: 1/-1; padding-top: 14px; border-top: 1px solid var(--line); } .billing-order-actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 12px; font-weight: 600; } .billing-order-actions .icon { width: 15px; height: 15px; flex-shrink: 0; } .billing-order-view { color: var(--brand); } .billing-order-pdf { color: var(--muted); } .billing-order-actions a:hover { text-decoration: underline; text-underline-offset: 3px; } .billing-empty-state { text-align: center; padding: 42px 24px; } .billing-empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 15px; background: var(--subtle); color: var(--brand); } .billing-empty-icon .icon { width: 27px; height: 27px; } .billing-empty-state h3 { font-size: 20px; line-height: 1.5; } .billing-empty-state p { font-size: 14px; line-height: 1.8; max-width: 560px; margin: 9px auto 22px; } .billing-payer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; } .billing-payer-card { display: flex; flex-direction: column; gap: 18px; padding: 24px; overflow-wrap: anywhere; } .billing-payer-heading { display: flex; align-items: flex-start; gap: 14px; } .billing-payer-heading>div { min-width: 0; } .billing-payer-type { font-size: 11px; line-height: 1.6; color: var(--muted); } .billing-payer-heading h3 { font-size: 17px; line-height: 1.5; margin-top: 3px; } .billing-payer-details { font-size: 13px; line-height: 1.8; } .billing-payer-details p+p { margin-top: 3px; } .billing-payer-details p>span { color: var(--muted); font-size: 12px; } .billing-payer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); } .billing-payer-actions a,.billing-payer-actions>span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; min-height: 36px; } .billing-payer-actions a { color: var(--brand); font-weight: 600; } .billing-payer-actions>span { color: var(--muted); } .billing-payer-actions .icon { width: 14px; height: 14px; } .billing-payers-empty { display: flex; align-items: center; gap: 12px; padding: 18px 20px; margin-bottom: 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--subtle); font-size: 13px; line-height: 1.7; } .billing-payers-empty .icon { width: 21px; height: 21px; color: var(--muted); flex-shrink: 0; } .billing-payer-editor { scroll-margin-top: 24px; } .billing-payer-editor>summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font-size: 15px; line-height: 1.5; } .billing-payer-editor>summary>span { display: flex; align-items: center; gap: 10px; } .billing-payer-editor>summary .icon { width: 18px; height: 18px; flex-shrink: 0; } .billing-payer-editor[open]>summary>.icon { transform: rotate(180deg); } .billing-payer-editor-body { padding-top: 20px; border-top: 1px solid var(--line); margin-top: 16px; } .billing-payer-editor-body>p { font-size: 13px; line-height: 1.7; margin-bottom: 20px; } .billing-payer-form { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .billing-payer-form>.field { margin: 0; } .billing-payer-form .company-lookup { grid-column: 1/-1; } .billing-payer-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; grid-column: 1/-1; padding-top: 20px; border-top: 1px solid var(--line); } .billing-payer-cancel { font-size: 13px; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; } @media (max-width:850px) { .billing-overview-heading { flex-wrap: wrap; } .billing-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .billing-listing-card { display: block; } .billing-feature-icon { margin-bottom: 18px; } .billing-payment-summary { flex-wrap: wrap; } .billing-payment-summary>div { flex: 1 1 240px; } .billing-order-summary { flex-direction: column; align-items: flex-end; gap: 8px; } } @media (max-width:600px) { .billing-overview { gap: 22px; } .billing-page-nav { width: 100%; } .billing-page-nav a { min-height: 44px; flex: 1; justify-content: center; font-size: 12px; padding-inline: 8px; } .settings-payment-nav a { flex: 1 1 150px; justify-content: center; min-width: 0; font-size: 12px; padding-inline: 10px; } .billing-overview-grid,.billing-payer-grid { grid-template-columns: minmax(0,1fr); gap: 16px; } .billing-overview .panel { padding: 22px; } .billing-context { flex-wrap: wrap; padding: 18px; gap: 12px; } .billing-context>div { flex: 1 1 180px; } .billing-context>.button { width: 100%; min-width: 0; } .billing-balance-value { font-size: 38px; } .billing-listing-card h2,.billing-section-heading h2 { font-size: 22px; } .billing-listing-card .button { width: 100%; min-width: 0; white-space: normal; } .billing-payment-summary { padding: 18px; gap: 12px; } .billing-payment-summary>div { flex-basis: calc(100% - 58px); } .billing-payment-summary>a { min-height: 44px; } .billing-pending-value { font-size: 20px; margin-left: 56px; } .billing-section-heading { flex-wrap: wrap; gap: 12px; } .billing-section-heading>.button { min-width: 0; } .billing-order-card { grid-template-columns: minmax(0,1fr); gap: 14px; } .billing-order-heading { gap: 12px; } .billing-order-summary { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .billing-order-summary>strong { font-size: 19px; } .billing-order-heading h3 { font-size: 16px; } .billing-order-actions { flex-wrap: wrap; gap: 5px 14px; } .billing-order-actions a { min-height: 44px; } .billing-order-status { max-width: 165px; } .billing-payer-form { grid-template-columns: minmax(0,1fr); } .billing-payer-actions a,.billing-payer-actions>span { min-height: 44px; } .billing-payer-form-actions>.button { flex: 1 1 180px; min-width: 0; white-space: normal; } } } @layer ui { .listing-paid-services { margin: 22px 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); min-width: 0; overflow-wrap: anywhere; } .listing-paid-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .listing-paid-heading>.icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); margin-top: 2px; } .listing-paid-heading>div { min-width: 0; } .listing-paid-heading h2,.listing-paid-heading h3 { margin: 0; font-size: 17px; line-height: 1.45; } .listing-paid-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .listing-paid-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .listing-paid-option { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .listing-paid-option-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .listing-paid-option-heading>.icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); } .listing-paid-option h3,.listing-paid-option h4 { font-size: 13px; font-weight: 600; line-height: 1.5; margin: 0; } .listing-paid-status { font-size: 14px; line-height: 1.6; font-weight: 600; margin: 0; } .listing-paid-stars { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; } .listing-paid-date { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 6px 0 16px; font-variant-numeric: tabular-nums; } .listing-paid-option>.button { min-height: 44px; font-size: 13px; margin-top: auto; gap: 8px; } .listing-paid-option>.button>.icon { width: 16px; height: 16px; } .listing-paid-unavailable { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .listing-paid-unavailable p { font-size: 13px; line-height: 1.65; margin: 0; color: var(--muted); max-width: 680px; } .listing-paid-unavailable a { min-height: 44px; flex-shrink: 0; font-size: 12px; } .listing-paid-services--compact { margin-top: 0; margin-bottom: 24px; padding: 18px; } .listing-paid-services--compact .listing-paid-heading { margin-bottom: 14px; } .listing-paid-services--compact .listing-paid-option { padding: 14px; } .listing-paid-services--compact .listing-paid-date { margin-bottom: 12px; } @media (max-width:600px) { .listing-paid-services { padding: 16px; } .listing-paid-grid { grid-template-columns: minmax(0,1fr); gap: 10px; } .listing-paid-heading h2,.listing-paid-heading h3 { font-size: 16px; } .listing-paid-option { padding: 14px; } .listing-paid-option>.button { width: 100%; justify-content: space-between; } .listing-paid-unavailable { display: grid; gap: 12px; } .listing-paid-unavailable a { width: 100%; } } } @layer ui { .listing-billing-workspace .page-heading h1 { font-size: clamp(25px,3vw,36px); max-width: 880px; overflow-wrap: anywhere; } .listing-billing-workspace .page-heading { align-items: flex-start; } .listing-billing-workspace .page-heading p:not(.context-label) { margin-top: 12px; font-size: 14px; } .listing-billing-context { display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; } .listing-billing-context .text-link { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; } .listing-billing-context .icon { width: 16px; height: 16px; } .listing-billing-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: start; margin-bottom: 22px; } .listing-billing-options>.panel { margin: 0; min-width: 0; } .listing-billing-service-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .listing-billing-service-heading>div { min-width: 0; } .listing-billing-service-heading h2 { font-size: 21px; line-height: 1.4; } .listing-billing-service-heading p { font-size: 13px; margin-top: 6px; } .listing-billing-symbol { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; background: var(--accent-soft); color: var(--brand); border-radius: 9px; } .listing-billing-service>p { font-size: 14px; line-height: 1.75; } .listing-billing-service .listing-billing-rate { color: var(--ink); font-weight: 600; margin-top: 14px; } .listing-billing-configuration { margin-top: 20px; border-top: 1px solid var(--line); } .listing-billing-configuration>summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-size: 14px; font-weight: 600; color: var(--brand); min-height: 48px; } .listing-billing-configuration>summary>.icon { width: 17px; height: 17px; } .listing-billing-configuration[open]>summary>.icon { transform: rotate(180deg); } .listing-billing-order { margin-top: 8px; } .listing-billing-order .form-grid { gap: 18px; } .listing-billing-order .field { min-width: 0; margin: 0; } .listing-billing-order small { font-size: 12px; line-height: 1.65; color: var(--muted); } .listing-billing-order select,.listing-billing-order input { min-width: 0; font-size: 16px; } .listing-billing-estimate { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-items: center; padding: 18px; background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; margin-block: 22px; } .listing-billing-estimate>span { font-size: 13px; color: var(--muted); } .listing-billing-estimate output { font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .listing-billing-estimate p { grid-column: 1/-1; font-size: 12px; line-height: 1.65; } .listing-billing-payer-notice { border-top: 1px solid var(--line); padding-top: 20px; } .listing-billing-payer-notice h3 { font-size: 16px; line-height: 1.5; } .listing-billing-payer-notice p,.listing-billing-submit p { font-size: 12px; margin-block: 9px 15px; line-height: 1.7; } .listing-billing-payer-notice .button,.listing-billing-submit .button { width: 100%; min-height: 48px; } .listing-billing-conversion { font-size: 12px; line-height: 1.7; margin-top: 20px; } .listing-billing-recurring { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; } .listing-billing-recurring h2 { font-size: 21px; line-height: 1.4; } .listing-billing-recurring p { font-size: 13px; margin-top: 8px; line-height: 1.7; } .listing-billing-recurring>.button { flex-shrink: 0; } .listing-billing-unavailable h2 { font-size: 19px; line-height: 1.6; } .listing-billing-unavailable p { margin-block: 12px 20px; font-size: 14px; } .listing-billing-pending>summary { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15px; min-height: 44px; } .listing-billing-pending>summary>span { flex: 1; } .listing-billing-pending>p { font-size: 13px; margin-block: 12px; } .listing-billing-pending-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-block: 14px; } .listing-billing-pending-row>div { flex: 1; min-width: 150px; } .listing-billing-pending-row strong { display: block; font-size: 14px; } .listing-billing-pending-row small { display: block; color: var(--muted); font-size: 12px; } .billing-order-context { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 20px; background: var(--subtle); border: 1px solid var(--line); border-radius: 9px; margin-block: 0 24px; font-size: 13px; } .billing-order-context p { min-width: 0; overflow-wrap: anywhere; } @media (max-width:900px) { .listing-billing-options { grid-template-columns: minmax(0,1fr); } .listing-billing-recurring { align-items: flex-start; flex-direction: column; } } @media (max-width:600px) { .listing-billing-service-heading { gap: 10px; } .listing-billing-service-heading h2,.listing-billing-recurring h2 { font-size: 19px; } .listing-billing-symbol { width: 34px; height: 34px; } .listing-billing-order .form-grid { grid-template-columns: minmax(0,1fr); } .listing-billing-estimate { padding: 15px; grid-template-columns: minmax(0,1fr); } .listing-billing-estimate output { font-size: 25px; } .listing-billing-recurring>.button { width: 100%; } .listing-billing-workspace .page-heading>.button { width: 100%; } } } @layer components { .subscription-heading { margin-bottom: 24px; } .subscription-heading>.button { flex-shrink: 0; } .subscription-context { margin-bottom: 22px; border-left: 4px solid var(--brand); } .subscription-context h2 { font-size: 24px; overflow-wrap: anywhere; margin: 8px 0; } .subscription-context p { font-size: 13px; } .subscription-enrollment { max-width: 780px; margin-bottom: 24px; } .subscription-section-heading { margin-bottom: 22px; } .subscription-section-heading h2 { font-size: 23px; margin-bottom: 10px; } .subscription-section-heading p { font-size: 14px; } .subscription-enrollment-note { font-size: 12px; margin-top: 20px; } .subscription-empty { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 24px; } .subscription-empty-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--subtle); color: var(--brand); } .subscription-empty h2 { font-size: 22px; margin-bottom: 10px; } .subscription-empty h3 { font-size: 18px; margin-bottom: 8px; } .subscription-empty p { max-width: 700px; font-size: 14px; } .subscription-empty .button { margin-top: 18px; } .subscription-management { margin-top: 28px; } .subscription-plan-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; } .subscription-plan { min-width: 0; margin: 0; } .subscription-plan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 10px; } .subscription-plan-heading h3 { font-size: 19px; overflow-wrap: anywhere; } .subscription-plan-heading .badge { flex-shrink: 0; } .subscription-plan-source { font-size: 12px; margin-bottom: 16px; } .subscription-plan>p { margin-bottom: 10px; } .subscription-next-due { font-size: 13px; } .subscription-next-due strong { font-weight: 600; color: var(--ink); } .subscription-plan-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .subscription-resume-consent { flex-basis: 100%; font-size: 13px; margin-bottom: 10px; } .subscription-billing-link { margin: 24px 0; } .subscription-billing-link>a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; } .subscription-confirm { max-width: 850px; margin-bottom: 28px; } .subscription-confirm-schedule { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 24px; } .subscription-consent-terms { display: grid; gap: 14px; padding: 22px; background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 24px; } .subscription-consent-terms p { font-size: 14px; } .subscription-confirm-payer { margin: 24px 0; padding-block: 20px; border-block: 1px solid var(--line); overflow-wrap: anywhere; } .subscription-confirm-payer>strong { display: block; margin: 8px 0; font-size: 17px; } .subscription-confirm-payer p { font-size: 14px; } .subscription-confirm-actions>.checkbox { margin-bottom: 22px; font-size: 14px; } @media (max-width:760px) { .subscription-plan-grid { grid-template-columns: 1fr; } .subscription-heading>.button { margin-top: 18px; width: 100%; justify-content: center; } .subscription-plan-heading { flex-direction: column; gap: 10px; } .subscription-empty { gap: 12px; } .subscription-empty h2 { font-size: 20px; } .subscription-consent-terms { padding: 16px; } .subscription-plan-actions>.button,.subscription-confirm-actions .button { width: 100%; justify-content: center; } .subscription-confirm-actions .button-row { display: grid; gap: 12px; } } } @layer components { .account-plans-pricing .account-plans-heading { text-align: center; width: 100%; max-width: 800px; margin: 0 auto 28px; } .account-plans-heading h1 { font-size: 42px; } .account-plans-heading p { font-size: 16px; margin-top: 18px; margin-inline: auto; } .account-plan-period-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin-bottom: 32px; } .account-plan-period-form .account-plan-periods legend { width: 100%; text-align: center; } .account-plan-period-form .account-plan-periods>div { justify-content: center; } .account-plan-periods,.account-plan-choices { margin: 0; padding: 0; border: 0; min-width: 0; } .account-plan-periods legend,.account-plan-choices legend { font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 12px; } .account-plan-periods>div { display: flex; flex-wrap: wrap; gap: 9px; } .account-plan-period { position: relative; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; background: var(--surface); cursor: pointer; font-size: 13px; } .account-plan-period:has(input:checked) { border-color: var(--brand); background: var(--subtle); box-shadow: 0 0 0 1px var(--brand); } .account-plan-period input { margin: 0; width: 15px; height: 15px; } .account-plan-period small { font-size: 11px; color: var(--green); } .account-plan-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; } .account-plan-card.panel { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 30px; border-radius: 16px; } .account-plan-card.account-plan-pro { border: 2px solid var(--brand); padding: 29px; box-shadow: 0 10px 32px #263f5212; } .account-plan-card-heading h2 { font-size: 25px; letter-spacing: .025em; margin-bottom: 10px; } .account-plan-audience { display: block; font-size: 13px; color: var(--muted); min-height: 42px; } .account-plan-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin: 23px 0 12px; } .account-plan-price strong { font-size: 42px; line-height: 1.1; letter-spacing: -.045em; color: var(--ink); } .account-plan-price>span { font-size: 13px; color: var(--muted); } .account-plan-period-total { font-size: 13px; line-height: 1.65; color: var(--muted); } .account-plan-discount { display: inline-flex; align-self: start; margin-top: 10px; background: var(--cream); color: var(--green); border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 600; } .account-plan-features { list-style: none; padding: 0; margin: 26px 0 28px; display: grid; gap: 14px; } .account-plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.65; } .account-plan-features .icon { width: 17px; height: 17px; color: var(--green); margin-top: 2px; } .account-plan-features strong { font-weight: 650; } .account-plan-features a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .account-plan-features .account-plan-feature-muted,.account-plan-features .account-plan-feature-muted .icon { color: var(--muted); } .account-plan-card>.button { width: 100%; margin-top: auto; } .account-plan-pricing-notes { display: grid; gap: 6px; text-align: center; margin: 24px 0 34px; font-size: 12px; } .account-plan-boost-note { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; } .account-plan-note-icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: var(--subtle); color: var(--brand); } .account-plan-boost-note h2 { font-size: 22px; margin-bottom: 10px; } .account-plan-boost-note p { font-size: 14px; max-width: 740px; } .account-plan-boost-note>.arrow-link { flex-shrink: 0; margin-left: auto; } .account-plan-purchase-heading { margin-bottom: 24px; } .account-plan-current-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-bottom: 24px; } .account-plan-current-grid>.panel { margin: 0; min-width: 0; } .account-plan-current h2 { font-size: 30px; margin-bottom: 8px; } .account-plan-current .context-label,.account-plan-quota .context-label { margin-bottom: 15px; } .account-plan-expiry { margin-top: 16px; font-size: 13px; } .account-plan-expiry strong { color: var(--ink); } .account-plan-quota-value { display: flex; gap: 8px; align-items: baseline; margin-bottom: 12px; } .account-plan-quota-value strong { font-size: 36px; line-height: 1.15; color: var(--ink); } .account-plan-quota-value span { font-size: 18px; color: var(--muted); } .account-plan-quota meter { display: block; width: 100%; height: 10px; margin: 14px 0; accent-color: var(--brand); } .account-plan-quota>p { font-size: 13px; } .account-plan-quota>a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 14px; } .account-plan-order-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 22px; align-items: start; } .account-plan-order-grid>.panel { margin: 0; min-width: 0; } .account-plan-section-heading { margin-bottom: 24px; } .account-plan-section-heading h2 { font-size: 23px; margin-bottom: 10px; } .account-plan-section-heading p { font-size: 13px; } .account-plan-choices>div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; } .account-plan-choice { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); padding: 18px; border-radius: 10px; cursor: pointer; } .account-plan-choice:has(input:checked) { border-color: var(--brand); background: var(--subtle); box-shadow: 0 0 0 1px var(--brand); } .account-plan-choice>input { margin: 4px 0 0; width: 16px; height: 16px; } .account-plan-choice>span { display: grid; gap: 8px; min-width: 0; } .account-plan-choice strong { font-size: 20px; color: var(--ink); } .account-plan-choice small { font-size: 12px; font-weight: 400; color: var(--muted); } .account-plan-choice-price { font-size: 12px; font-weight: 400; color: var(--muted); } .account-plan-choice-price b { font-size: 16px; color: var(--ink); } .account-plan-selector>.account-plan-periods { margin-top: 28px; } .account-plan-limit-policy { font-size: 12px; line-height: 1.7; margin-top: 22px; } .account-plan-trial-badge { font-size: 11px; letter-spacing: 0; vertical-align: middle; margin-left: 10px; } .account-plan-trial-help { font-size: 12px; line-height: 1.7; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .account-plan-summary { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 24px; } .account-plan-summary-main { flex: 1; min-width: 0; } .account-plan-summary .context-label { margin-bottom: 9px; } .account-plan-summary h2 { font-size: 23px; margin-bottom: 10px; } .account-plan-summary-main>p { font-size: 13px; } .account-plan-summary-expiry { display: inline-block; margin-left: 14px; font-size: 12px; color: var(--muted); } .account-plan-summary-help,.account-plan-summary-attention { margin-top: 8px; font-size: 12px; } .account-plan-summary-attention { color: var(--brand); } .account-plan-summary>.button { flex-shrink: 0; align-self: center; } .account-plan-summary--mine.panel { display: block; padding: 18px 22px; } .mine-plan-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; } .account-plan-summary--mine .mine-plan-bar>h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 18px; line-height: 1.4; margin: 0; } .account-plan-summary--mine .mine-plan-bar>p { margin: 0; } .mine-plan-label,.mine-plan-usage,.mine-plan-expiry { font-size: 13px; font-weight: 400; color: var(--muted); } .account-plan-summary--mine .account-plan-trial-badge { margin: 0; } .mine-plan-usage strong { font-weight: 650; color: var(--ink); margin-left: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .mine-plan-bar>.arrow-link { margin-left: auto; font-size: 13px; white-space: nowrap; min-height: 44px; } .account-plan-summary--mine .mine-plan-notice { margin-top: 12px; font-size: 12px; } .mine-plan-trial-details { font-size: 12px; margin-top: 12px; } .mine-plan-trial-details>summary { width: fit-content; color: var(--muted); cursor: pointer; text-underline-offset: 3px; } .mine-plan-trial-details>summary:hover { text-decoration: underline; } .mine-plan-trial-details>p { font-size: 12px; line-height: 1.6; margin-top: 8px; max-width: 760px; } .account-plan-prepaid-note { font-size: 13px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; } .account-plan-tax-note { font-size: 12px; margin-top: 10px; } .account-plan-summary-name { font-size: 23px; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .account-plan-summary-bonus { font-size: 13px; font-weight: 600; color: var(--green); margin-top: 16px; } .account-plan-choice-bonus { line-height: 1.6; } .account-plan-bonus-help { font-size: 12px; margin-top: 8px; } .account-plan-mode-note { font-size: 13px; background: var(--subtle); border-radius: 8px; padding: 14px; margin-top: 20px; } .account-plan-unavailable { margin-top: 16px; font-size: 13px; } .account-plan-dates { display: grid; gap: 8px; font-size: 13px; margin: 20px 0; } .account-plan-dates>div { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .account-plan-dates dt { color: var(--muted); } .account-plan-dates dd { margin: 0; font-weight: 600; color: var(--ink); } .account-plan-order-summary>.field { margin: 24px 0 12px; } .account-plan-payer-help { font-size: 12px; margin-bottom: 22px; } .account-plan-payer-help>a { text-decoration: underline; text-underline-offset: 3px; } .account-plan-order-summary>.button { width: 100%; } .account-plan-review-help { font-size: 12px; margin-top: 14px; } .account-plan-pending { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; } .account-plan-pending h2 { font-size: 23px; margin-bottom: 12px; } .account-plan-pending-total { display: block; font-size: 27px; margin: 12px 0; } .account-plan-pending .button-row { margin-top: 20px; } .account-plan-billing-back { margin: 24px 0; } .account-plan-billing-back>a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .account-plan-boost-access { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; margin: 0 0 24px; padding: 16px 18px; background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; } .account-plan-boost-access>.icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--brand); } .account-plan-boost-access a { display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 3px; } .account-plan-boost-access a .icon { width: 14px; height: 14px; } .booking-plan-description { margin-top: 28px; scroll-margin-top: 100px; } .booking-plan-description-heading { display: flex; align-items: flex-start; gap: 18px; } .booking-plan-description-heading>div { flex: 1; min-width: 0; } .booking-plan-description-heading h2 { font-size: 25px; margin: 0 0 10px; } .booking-plan-description-heading p { font-size: 13px; line-height: 1.7; } .booking-plan-description-access { display: grid; gap: 4px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--muted); } .booking-plan-description-access strong { font-size: 15px; color: var(--green); letter-spacing: .025em; } .booking-plan-description-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; list-style: none; padding: 0; margin: 26px 0 22px; } .booking-plan-description-steps>li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .booking-plan-description-number { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--subtle); color: var(--green); font-size: 13px; font-weight: 650; } .booking-plan-description-steps h3 { font-size: 15px; line-height: 1.5; letter-spacing: 0; margin: 3px 0 7px; } .booking-plan-description-steps p { font-size: 13px; line-height: 1.7; } .booking-plan-description-note { padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.7; } .boost-pricing { margin-top: 28px; scroll-margin-top: 100px; } .boost-pricing-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; } .boost-pricing-heading>div { max-width: 710px; min-width: 0; } .boost-pricing-heading h2 { font-size: 25px; margin: 0 0 12px; } .boost-pricing-heading p,.boost-pricing-rate>p { font-size: 13px; line-height: 1.7; } .boost-pricing-plans { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 12px; border-radius: 8px; background: var(--subtle); color: var(--green); font-size: 12px; font-weight: 650; } .boost-pricing-plans .icon { width: 16px; height: 16px; } .boost-pricing-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 30px; align-items: start; } .boost-pricing-rate { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); } .boost-pricing-rate .boost-pricing-rate-label { font-weight: 650; color: var(--ink); } .boost-pricing-unit-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 10px 0 18px; } .boost-pricing-unit-price strong { font-size: 37px; line-height: 1.15; letter-spacing: -.035em; color: var(--ink); } .boost-pricing-unit-price>span { font-size: 12px; color: var(--muted); } .boost-pricing-rate .boost-pricing-formula { color: var(--ink); margin-bottom: 8px; font-weight: 550; } .boost-pricing-rate .boost-pricing-tax { font-size: 12px; margin-top: 15px; } .boost-pricing-examples { min-width: 0; } .boost-pricing-examples table { width: 100%; border-collapse: collapse; font-size: 13px; } .boost-pricing-examples caption { text-align: left; font-size: 15px; font-weight: 650; color: var(--ink); padding-bottom: 14px; } .boost-pricing-examples th,.boost-pricing-examples td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; } .boost-pricing-examples thead th { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--subtle); } .boost-pricing-examples th:first-child { text-align: left; } .boost-pricing-examples tbody th { font-weight: 500; color: var(--ink); } .boost-pricing-examples tbody th>span { display: flex; align-items: center; gap: 7px; } .boost-pricing-examples tbody .icon { width: 15px; height: 15px; color: var(--brand); } .boost-pricing-examples td { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; } .boost-pricing-examples-tax { font-size: 12px; line-height: 1.65; margin-top: 12px; } .boost-pricing-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); } .boost-pricing-footer>p { font-size: 12px; line-height: 1.7; max-width: 680px; } .boost-pricing-footer>.button { flex-shrink: 0; } @media (max-width:1000px) { .account-plan-card.panel { padding: 24px; } .account-plan-card.account-plan-pro { padding: 23px; } .account-plan-price strong { font-size: 35px; } .account-plan-boost-note { flex-wrap: wrap; } .account-plan-boost-note>.arrow-link { margin-left: 68px; } } @media (max-width:760px) { .booking-plan-description-heading { flex-wrap: wrap; gap: 14px; } .booking-plan-description-heading h2 { font-size: 23px; } .booking-plan-description-access { width: 100%; text-align: left; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .booking-plan-description-steps { grid-template-columns: 1fr; gap: 20px; margin: 22px 0; } .account-plan-cards,.account-plan-current-grid,.account-plan-order-grid { grid-template-columns: 1fr; } .account-plans-heading h1 { font-size: 31px; } .account-plans-heading p { font-size: 14px; } .account-plan-card-heading { display: flex; justify-content: space-between; gap: 20px; } .account-plan-audience { max-width: 170px; text-align: right; min-height: 0; } .account-plan-price { margin-top: 20px; } .account-plan-features { margin: 22px 0; } .account-plan-periods>div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .account-plan-boost-note { align-items: flex-start; } .account-plan-boost-note>.arrow-link { margin-left: 0; } .account-plan-purchase-heading>.button { width: 100%; margin-top: 18px; justify-content: center; } .account-plan-summary { flex-wrap: wrap; gap: 14px; } .account-plan-summary>.button { width: 100%; justify-content: center; } .account-plan-summary-expiry { display: block; margin: 6px 0 0; } .account-plan-summary--mine.panel { padding: 16px 18px; } .mine-plan-bar { gap: 10px 18px; } .mine-plan-bar>h2 { flex-basis: 100%; } .mine-plan-bar>.arrow-link { margin-left: 0; } .account-plan-pending { gap: 14px; } .account-plan-pending .button-row { display: grid; gap: 12px; } .account-plan-pending .button { width: 100%; justify-content: center; } .boost-pricing-heading,.boost-pricing-footer { flex-direction: column; gap: 16px; } .boost-pricing-heading h2 { font-size: 23px; } .boost-pricing-grid { grid-template-columns: 1fr; gap: 24px; } .boost-pricing-rate { padding: 18px; } .boost-pricing-examples th,.boost-pricing-examples td { padding: 12px 6px; } .boost-pricing-examples tbody th>span { gap: 5px; } .boost-pricing-examples tbody .icon { width: 13px; height: 13px; } .boost-pricing-footer>.button { width: 100%; justify-content: center; } } @media (max-width:420px) { .account-plan-choices>div { grid-template-columns: 1fr; } .account-plan-card-heading { display: block; } .account-plan-audience { max-width: none; text-align: left; } .account-plan-boost-note { gap: 14px; } } } @layer ui { input::placeholder,textarea::placeholder,.field input::placeholder,.field textarea::placeholder,.hero-search input::placeholder { color: var(--muted); opacity: 1; } .category-card,.category-directory-card { --category-ink: var(--gold-ink); --category-soft: var(--gold-soft); --category-line: var(--gold-line); background: linear-gradient(135deg,var(--category-soft),var(--surface) 75%); border-color: var(--category-line); } .category-card.category-color-1,.category-directory-card:nth-child(6n+2) { --category-ink: var(--sage-ink); --category-soft: var(--sage-soft); --category-line: var(--sage-line); } .category-card.category-color-2,.category-directory-card:nth-child(6n+3) { --category-ink: var(--blue-ink); --category-soft: var(--blue-soft); --category-line: var(--blue-line); } .category-card.category-color-3,.category-directory-card:nth-child(6n+4) { --category-ink: var(--coral-ink); --category-soft: var(--accent-soft); --category-line: var(--coral-line); } .category-card.category-color-4,.category-directory-card:nth-child(6n+5) { --category-ink: var(--violet-ink); --category-soft: var(--violet-soft); --category-line: var(--violet-line); } .category-card.category-color-5,.category-directory-card:nth-child(6n+6) { --category-ink: var(--teal-ink); --category-soft: var(--teal-soft); --category-line: var(--teal-line); } .category-card .category-icon,.category-directory-card .category-icon { background: var(--category-soft); color: var(--category-ink); } .category-card:hover,.category-directory-card:hover { border-color: var(--category-ink); } .step-icon,.account-card-icon { background: var(--accent-soft); color: var(--brand); border-color: var(--coral-line); } .step:nth-child(2) .step-icon { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-line); } .step:nth-child(3) .step-icon { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); } .account-card:nth-child(3n+2) .account-card-icon { background: var(--blue-soft); color: var(--blue-ink); } .account-card:nth-child(3n) .account-card-icon { background: var(--gold-soft); color: var(--gold-ink); } .account-plan-card { --plan-ink: var(--blue-ink); --plan-soft: var(--blue-soft); --plan-line: var(--blue-line); } .account-plan-card[data-plan-card=pro] { --plan-ink: var(--brand); --plan-soft: var(--accent-soft); --plan-line: var(--coral-line); } .account-plan-card[data-plan-card=max] { --plan-ink: var(--gold-ink); --plan-soft: var(--gold-soft); --plan-line: var(--gold-line); } .account-plan-card.panel { background: linear-gradient(180deg,var(--plan-soft),var(--surface) 175px); border-color: var(--plan-line); border-top: 3px solid var(--plan-ink); } .account-plan-card.account-plan-pro { border-color: var(--brand); box-shadow: 0 10px 30px #c83e3112; } .account-plan-card-heading h2,.account-plan-card .account-plan-features .icon { color: var(--plan-ink); } .account-plan-card .button-secondary { color: var(--plan-ink); border-color: var(--plan-line); } .account-plan-card .button-secondary:hover { background: var(--plan-soft); border-color: var(--plan-ink); } .account-plan-discount { background: var(--gold-soft); color: var(--gold-ink); } .account-plan-period:has(input:checked),.account-plan-choice:has(input:checked) { background: var(--accent-soft); } .account-plan-note-icon { background: var(--blue-soft); color: var(--blue-ink); } .account-plan-trial-badge { background: var(--gold-soft); color: var(--gold-ink); } .account-plan-summary-attention { color: var(--warning-ink); } .account-plan-pending .account-plan-note-icon { background: var(--warning-bg); color: var(--warning-ink); } .account-plan-summary,.account-plan-current { border-color: var(--blue-line); } .account-plan-quota meter { accent-color: var(--brand); } .account-plan-quota meter::-webkit-meter-bar { background: var(--subtle); border: 0; border-radius: 8px; } .account-plan-quota meter::-webkit-meter-optimum-value { background: var(--action); border-radius: 8px; } .account-plan-quota meter::-moz-meter-bar { background: var(--action); border-radius: 8px; } #plan-bonus { background: var(--gold-soft); border-color: var(--gold-line); } #plan-bonus .listing-billing-symbol { background: var(--surface); color: var(--gold-ink); } .admin-stat-label>.icon { color: var(--blue-ink); } .admin-shortcut-icon { background: var(--blue-soft); color: var(--blue-ink); } .admin-shortcut:nth-child(3n+2) .admin-shortcut-icon { background: var(--accent-soft); color: var(--brand); } .admin-shortcut:nth-child(3n) .admin-shortcut-icon { background: var(--gold-soft); color: var(--gold-ink); } .admin-queue { background: var(--blue-soft); border-color: var(--blue-line); } .admin-queue-icon { background: var(--surface); color: var(--blue-ink); } } @layer ui { .directory-toolbar { grid-template-columns: minmax(0,1fr) auto auto; } .directory-toolbar:not(:has(>.location-picker)) { grid-template-columns: minmax(0,1fr) auto auto; } .directory-filter-toggle { min-height: 48px; gap: 9px; white-space: nowrap; } .directory-filter-toggle [data-filter-count] { display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--brand); font-size: 12px; font-weight: 700; } .filter-toolbar-error { margin-top: 16px; } .filter-drawer { position: static; inset: auto; width: 100%; max-width: none; margin: 24px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: var(--surface); } .filter-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .filter-drawer-header h2 { margin: 0; font-size: 24px; } .filter-drawer-close { flex-shrink: 0; border: 1px solid var(--line); color: var(--ink); border-radius: 9px; min-width: 44px; min-height: 44px; } .filter-drawer-close:hover { background: var(--subtle); } .filter-drawer-body { display: grid; gap: 26px; margin-block: 24px; } .filter-drawer-section { display: grid; gap: 18px; min-width: 0; } .filter-drawer-section+.filter-drawer-section { padding-top: 24px; border-top: 1px solid var(--line); } .filter-drawer-section .filter-drawer-section-heading { margin: 0; font-size: 14px; letter-spacing: 0; color: var(--brand); } .filter-drawer .directory-category-row { margin: 0; padding: 0; border: 0; } .filter-drawer .category-levels,.filter-drawer .location-flat-fields,.filter-drawer .location-flat-fields.has-country { grid-template-columns: minmax(0,1fr); gap: 18px; } .filter-drawer .form-grid { grid-template-columns: minmax(0,1fr); gap: 18px; margin: 0; } .filter-price-range { min-width: 0; grid-column: 1/-1; margin: 0; padding: 0; border: 0; } .filter-price-inputs { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: 10px; } .filter-price-inputs .field { min-width: 0; margin: 0; } .filter-price-inputs input { min-width: 0; width: 100%; } .filter-price-separator { align-self: end; display: grid; place-items: center; height: 48px; color: var(--muted); } .filter-price-range .filter-price-hint,.filter-price-range .filter-price-error { margin: 10px 0 0; font-size: 12px; line-height: 1.5; } .filter-price-hint { color: var(--muted); } .filter-price-error { color: var(--brand); } .filter-drawer .location-picker,.filter-drawer .category-picker { min-width: 0; } .filter-drawer .location-search-popup [role=listbox] { max-height: 200px; } .filter-drawer .category-picker-hint { font-size: 12px; } .filter-drawer-footer { border-top: 1px solid var(--line); padding-top: 18px; } .filter-drawer-footer-actions { display: flex; gap: 12px; align-items: center; } .filter-drawer-footer-actions [data-filter-apply] { flex: 1; min-height: 48px; } .filter-drawer-footer-actions [data-filter-clear] { min-height: 48px; } .filter-drawer-footer .filter-status { margin: 0 0 12px; font-size: 12px; line-height: 1.5; } .filter-drawer-footer [data-filter-error] { margin: 0 0 14px; } .has-filter-drawer.directory-filters { padding: 20px 22px; margin-bottom: 26px; } .has-filter-drawer .filter-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(520px,100%); height: 100vh; height: 100dvh; max-width: 100%; max-height: none; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 16px 0 0 16px; overflow: hidden; box-shadow: -12px 0 48px #142d3330; } .has-filter-drawer .filter-drawer:not([open]) { display: none; } .has-filter-drawer .filter-drawer[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; animation: filter-drawer-in .22s ease-out; } .has-filter-drawer .filter-drawer::backdrop { background: #17282f66; animation: filter-backdrop-in .18s ease-out; } .has-filter-drawer .filter-drawer-header { padding: 22px 26px; border-bottom: 1px solid var(--line); background: var(--surface); } .has-filter-drawer .filter-drawer-body { display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; margin: 0; padding: 24px 26px 36px; scroll-padding: 20px; } .has-filter-drawer .filter-drawer-section+.filter-drawer-section { margin-top: 26px; } .has-filter-drawer .filter-drawer-footer { padding: 16px 26px max(20px,env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -6px 18px #202b3305; } .filter-drawer-open,.filter-drawer-open body { overflow: hidden; overscroll-behavior: none; } @keyframes filter-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes filter-backdrop-in { from { background: transparent; } to { background: #17282f66; } } @media (max-width:600px) { .directory-toolbar,.directory-toolbar:not(:has(>.location-picker)) { grid-template-columns: 1fr 1fr; gap: 12px; } .directory-toolbar .directory-query { grid-column: 1/-1; } .directory-toolbar .directory-submit { width: 100%; margin: 0; min-width: 0; } .has-filter-drawer.directory-filters { padding: 17px 16px; } .has-filter-drawer .filter-drawer { border: 0; border-radius: 0; } .has-filter-drawer .filter-drawer-header { padding: 16px 20px; } .has-filter-drawer .filter-drawer-body { padding: 20px 20px 30px; } .has-filter-drawer .filter-drawer-footer { padding: 14px 20px max(18px,env(safe-area-inset-bottom)); } .filter-drawer-footer-actions { gap: 10px; } .filter-drawer-footer-actions .button { padding-inline: 16px; } } @media (prefers-reduced-motion:reduce) { .has-filter-drawer .filter-drawer[open],.has-filter-drawer .filter-drawer::backdrop { animation: none; } } } @layer components { .category-page-heading { margin-top: 26px; } .category-page-heading>div { min-width: 0; } .category-page-heading h1,.category-insights-path { overflow-wrap: anywhere; } .category-insights-path { font-size: 13px; margin-top: 8px; color: var(--muted); } .category-insights-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: var(--subtle); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 24px; } .category-insights-nav a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 15px; border-radius: 8px; font-size: 14px; font-weight: 650; color: var(--ink); } .category-insights-nav a:hover { background: var(--surface); color: var(--brand); } .category-insights-nav span { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; min-width: 26px; padding: 0 6px; text-align: center; } .category-specialists,.category-insights-prices,.category-insights-requests,.category-insights-guide { scroll-margin-top: 24px; } .category-insights-prices,.category-insights-requests,.category-insights-guide { margin-top: 30px; } .category-insights-prices>.section-heading,.category-insights-requests>.section-heading { align-items: flex-start; gap: 18px; } .category-insights-prices .section-heading>div,.category-insights-requests .section-heading>div { min-width: 0; flex: 1; } .category-insights-prices .section-heading p,.category-insights-requests .section-heading p { margin-top: 8px; font-size: 14px; max-width: 720px; } .category-insights-updated { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px !important; color: var(--muted); } .category-insights-updated .icon { width: 16px; height: 16px; } .category-insights-method { font-size: 13px; margin: 0 0 20px; max-width: 950px; } .category-price-table { border: 1px solid var(--line); border-radius: 10px; } .category-price-table td { font-variant-numeric: tabular-nums; } .category-price-table td:first-child { min-width: 190px; max-width: 340px; overflow-wrap: anywhere; } .category-price-custom { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 4px; line-height: 1.45; } .category-request-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; } .category-request-card { border: 1px solid var(--line); border-radius: 10px; padding: 20px; min-width: 0; } .category-request-card .card-meta { gap: 12px; flex-wrap: wrap; font-size: 12px; margin-bottom: 12px; } .category-request-card .card-meta>span { display: flex; align-items: center; gap: 5px; } .category-request-card .card-meta .icon { width: 16px; height: 16px; } .category-request-card h3,.category-request-card p { overflow-wrap: anywhere; } .category-request-card h3 a:hover { color: var(--brand); } .category-request-card>p { font-size: 14px; line-height: 1.6; margin-top: 10px; } .category-request-details { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; margin: 14px 0; } .category-request-details div { min-width: 0; max-width: 100%; } .category-request-details dt { color: var(--muted); } .category-request-details dd { margin: 2px 0 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; } .category-request-card>.text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 13px; } .category-request-card>.text-link .icon { width: 16px; height: 16px; } .category-insights-privacy { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; font-size: 12px; } .category-insights-privacy .icon { width: 17px; height: 17px; margin-top: 3px; } .category-request-actions { margin-top: 18px; } .category-insights-empty { padding: 24px 0; max-width: 720px; } .category-insights-empty>.icon { color: var(--brand); width: 28px; height: 28px; margin-bottom: 12px; } .category-insights-empty h3 { font-size: 19px; } .category-insights-empty p { margin-top: 8px; margin-bottom: 18px; font-size: 14px; } .category-insights-guide>p { margin-top: 10px; margin-bottom: 18px; font-size: 14px; } .category-insights-guide details { border-top: 1px solid var(--line); padding: 16px 0; } .category-insights-guide summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; font-weight: 600; color: var(--ink); } .category-insights-guide summary .icon { width: 17px; height: 17px; transition: transform .15s; } .category-insights-guide details[open] summary .icon { transform: rotate(180deg); } .category-insights-guide details p { max-width: 850px; margin-top: 10px; font-size: 14px; } @media (max-width:640px) { .category-insights-nav { gap: 4px; padding: 5px; } .category-insights-nav a { flex: 1 1 auto; justify-content: center; padding: 9px 10px; font-size: 12px; } .category-insights-prices>.section-heading,.category-insights-requests>.section-heading { display: grid; } .category-request-list { grid-template-columns: 1fr; } .category-request-card { padding: 16px; } .category-price-table { overflow: visible; border: 0; } .category-price-table table,.category-price-table tbody { display: block; } .category-price-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .category-price-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 9px; margin-top: 12px; overflow: hidden; } .category-price-table td { display: block; min-width: 0 !important; max-width: none !important; border: 0; padding: 10px 13px; overflow-wrap: anywhere; } .category-price-table td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; font-weight: 450; } .category-price-table td:first-child { grid-column: 1/-1; background: var(--subtle); border-bottom: 1px solid var(--line); } .category-price-table td:nth-child(2),.category-price-table td:last-child { grid-column: 1/-1; } .category-request-actions .button { width: 100%; } } } @layer ui { .home-feed { padding-block: 56px; } .home-request-section { padding-top: 56px; } .home-feed-heading { align-items: flex-end; margin-bottom: 24px; } .home-feed-heading>div { max-width: 720px; } .home-feed-heading p { margin-top: 12px; font-size: 15px; line-height: 1.65; } .home-feed-heading>.arrow-link { flex-shrink: 0; min-height: 44px; white-space: nowrap; } .home-feed-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; } .home-feed-order { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; font-size: 12px; } .home-feed-order>span { color: var(--gold-ink); font-size: 16px; } .home-provider-item { position: relative; min-width: 0; } .home-provider-item>.listing-card { height: 100%; min-width: 0; } .home-provider-item .listing-image { height: 190px; flex-shrink: 0; } .home-provider-item .image-placeholder { height: 100%; padding: 20px; text-align: center; gap: 10px; align-content: center; color: var(--green); } .home-provider-item .listing-card-body { min-width: 0; } .home-provider-item .listing-card-body>p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .home-provider-item .listing-card-body h3,.home-provider-item .card-meta { overflow-wrap: anywhere; } .home-request-feed { background: var(--subtle); border-block: 1px solid var(--line); } .home-request-card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .2s,box-shadow .2s; } .home-request-card:hover,.home-request-card:focus-within { border-color: var(--sage-line); box-shadow: var(--shadow); } .home-request-link { display: flex; flex-direction: column; height: 100%; padding: 24px; border-radius: 14px; min-width: 0; } .home-request-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 16px; } .home-request-category { color: var(--green); font-weight: 600; overflow-wrap: anywhere; } .home-request-top time { flex-shrink: 0; color: var(--muted); font-size: 11px; padding-top: 1px; } .home-request-card h3 { font-size: 19px; line-height: 1.35; margin-bottom: 12px; overflow-wrap: anywhere; } .home-request-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; margin-bottom: 22px; } .home-request-details { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; font-size: 12px; overflow-wrap: anywhere; } .home-request-details>span { display: flex; gap: 6px; align-items: center; color: var(--muted); } .home-request-details .icon { width: 16px; height: 16px; } .home-request-details strong { font-size: 13px; font-weight: 650; } .home-request-details>.home-request-deadline { flex-basis: 100%; align-items: flex-start; } .home-request-deadline>.icon { margin-top: 2px; } .home-request-deadline>span { min-width: 0; } .home-request-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; color: var(--green); font-size: 13px; font-weight: 600; } .home-request-action .icon { width: 18px; height: 18px; } .home-feed-empty { display: flex; align-items: center; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .home-feed-empty-icon { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; background: var(--sage-soft); color: var(--sage-ink); border-radius: 14px; } .home-feed-empty h3 { font-size: 19px; margin-bottom: 8px; } .home-feed-empty p { font-size: 14px; } .home-feed-empty>.button { margin-left: auto; flex-shrink: 0; } @media (max-width:1000px) { .home-feed-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .home-feed-heading { align-items: flex-start; } .home-feed-heading>div { max-width: 70%; } } @media (max-width:600px) { .home-feed { padding-block: 34px; } .home-request-section { padding-top: 34px; } .home-feed-grid { grid-template-columns: minmax(0,1fr); gap: 16px; } .home-feed-heading { display: block; margin-bottom: 20px; } .home-feed-heading>div { max-width: none; } .home-feed-heading p { font-size: 14px; margin-top: 10px; } .home-feed-heading>.arrow-link { font-size: 13px; margin-top: 10px; gap: 8px; } .home-feed-heading>.arrow-link .icon { width: 18px; } .home-feed-order { font-size: 11px; margin-top: -4px; } .home-request-link { padding: 21px; } .home-feed-empty { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px; padding: 22px; } .home-feed-empty-icon { width: 44px; height: 44px; } .home-feed-empty>.button { grid-column: 1/-1; margin: 0; width: 100%; } } } @layer ui { .home-reviews { padding-block: 42px; background: var(--subtle); border-block: 1px solid var(--line); } .home-reviews-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; } .home-reviews-heading h2 { font-size: 28px; line-height: 1.25; margin: 0; } .home-reviews-heading p { margin: 10px 0 0; color: var(--muted); font-size: 14px; } .home-reviews-heading>.arrow-link { min-height: 44px; flex-shrink: 0; gap: 9px; } .public-review-count { padding: 1px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 600; } .home-review-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px)/3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 3px 3px 12px; margin-inline: -3px; } .home-review-track:has(>[data-review-card]:nth-child(2):last-child) { grid-auto-columns: calc((100% - 18px)/2); } .home-review-track:has(>[data-review-card]:only-child) { grid-auto-columns: 100%; } .home-review-track:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; border-radius: 12px; } .public-review-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); scroll-snap-align: start; scroll-margin-top: 110px; overflow-wrap: anywhere; } .public-review-card:target { border-color: var(--green); box-shadow: 0 0 0 2px var(--sage-line); } .public-review-header { display: flex; align-items: center; gap: 12px; } .public-review-avatar { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--sage-soft); color: var(--sage-ink); font-size: 13px; font-weight: 700; } .public-review-header h3 { font-size: 15px; line-height: 1.4; margin: 0; } .public-review-header time { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; } .public-review-rating { margin: 18px 0 16px; } .public-review-rating>span { display: flex; align-items: center; gap: 12px; } .public-review-rating .review-stars { font-size: 17px; letter-spacing: 1px; } .public-review-rating strong { font-size: 14px; line-height: 1; } .public-review-rating strong small { font-size: 12px; font-weight: 400; color: var(--muted); } .public-review-body { margin: 0 0 22px; font-size: 15px; line-height: 1.75; } .public-review-body p { margin: 0; } .public-review-read { font-size: 13px; color: var(--green); font-weight: 600; align-self: flex-start; margin: -10px 0 20px; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; } .public-review-provider { margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line); } .public-review-provider>span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; } .public-review-provider>a { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 650; line-height: 1.5; color: var(--ink); min-height: 24px; } .public-review-provider>a:hover { color: var(--brand); } .public-review-provider>a>.icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--green); } .public-review-provider>small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; } .home-review-navigation { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; } .home-review-navigation[hidden] { display: none; } .home-review-navigation>div { display: flex; gap: 8px; } .home-review-navigation button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); } .home-review-navigation button:disabled { opacity: .4; cursor: default; } .home-review-position { font-size: 12px; color: var(--muted); margin: 0; } .public-reviews-empty { display: flex; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .public-reviews-empty>.icon { flex-shrink: 0; color: var(--green); } .public-reviews-empty p { margin: 0; font-size: 14px; color: var(--muted); } .public-reviews-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 24px; } .public-reviews-toolbar>p { margin: 0; font-size: 14px; color: var(--muted); } .public-reviews-sort { display: grid; gap: 5px; font-size: 12px; color: var(--muted); } .public-reviews-sort>div { display: flex; gap: 8px; } .public-reviews-sort button { font-size: 13px; padding: 8px 14px; } .public-reviews-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 22px; } .public-reviews-list .public-review-card { padding: 30px; } .public-review-service { font-size: 13px; color: var(--muted); margin: -4px 0 18px; } .public-review-aspects { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 22px; } .public-review-aspects dt { font-size: 12px; color: var(--muted); } .public-review-aspects dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; } .public-review-aspects dd>span { color: var(--gold-ink); } @media (max-width:1000px) { .home-review-track { grid-auto-columns: calc((100% - 18px)/2); } .home-reviews-heading h2 { font-size: 25px; } } @media (max-width:650px) { .home-reviews { padding-block: 30px; } .home-reviews-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 17px; } .home-reviews-heading h2 { font-size: 24px; } .home-reviews-heading>.arrow-link { font-size: 13px; } .home-review-track { grid-auto-columns: 90%; gap: 12px; } .home-review-track:has(>[data-review-card]:nth-child(2):last-child) { grid-auto-columns: 90%; } .public-review-card,.public-reviews-list .public-review-card { padding: 21px; } .public-review-body { font-size: 14px; } .public-reviews-list { grid-template-columns: minmax(0,1fr); gap: 16px; } .public-reviews-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; } .public-reviews-sort,.public-reviews-sort>div { width: 100%; } .public-reviews-sort select { flex: 1; min-width: 0; } } @media (prefers-reduced-motion:reduce) { .home-review-track { scroll-behavior: auto; } } } @layer ui { .workspace-quality-link { display: block; color: var(--ink); } .workspace-quality-link>span { display: flex; align-items: center; gap: 5px; color: var(--brand); } .workspace-quality-link>span>.icon { width: 16px; height: 16px; flex-shrink: 0; } .workspace-quality-link:hover>span { text-decoration: underline; text-underline-offset: 3px; } .listing-quality-editor-link { margin: 0 0 20px; } .listing-quality-editor-link>a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.5; } .listing-quality-editor-link .icon { width: 16px; height: 16px; flex-shrink: 0; } .listing-quality { max-width: 1120px; margin-inline: auto; } .listing-quality-heading { align-items: flex-start; gap: 20px; } .listing-quality-heading>div { min-width: 0; } .listing-quality-heading h1 { margin-bottom: 9px; } .listing-quality-heading p { margin: 0; overflow-wrap: anywhere; } .listing-quality-heading>.button { flex-shrink: 0; } .listing-quality-overview { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 20px; margin-bottom: 30px; } .listing-quality-overview>.panel { margin: 0; padding: 26px; } .listing-quality-score h2,.listing-quality-next h2 { font-size: 19px; line-height: 1.4; margin: 0 0 14px; } .listing-quality-total { display: flex; align-items: baseline; gap: 9px; margin-bottom: 16px; font-variant-numeric: tabular-nums; } .listing-quality-total>strong { font-size: 58px; line-height: 1.1; font-weight: 750; letter-spacing: -2px; } .listing-quality-total>span { color: var(--muted); font-size: 18px; } .listing-quality-score progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 20px; overflow: hidden; appearance: none; background: var(--subtle); color: var(--green); } .listing-quality-score progress::-webkit-progress-bar { background: var(--subtle); border-radius: 20px; } .listing-quality-score progress::-webkit-progress-value { background: var(--green); border-radius: 20px; } .listing-quality-score progress::-moz-progress-bar { background: var(--green); border-radius: 20px; } .listing-quality-score>p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 15px 0 0; } .listing-quality-next ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; counter-reset: quality-steps; } .listing-quality-next li { display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 10px; counter-increment: quality-steps; } .listing-quality-next li::before { content: counter(quality-steps); width: 26px; height: 26px; display: grid; place-items: center; background: var(--subtle); border: 1px solid var(--line); border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--muted); } .listing-quality-next li strong { font-size: 15px; line-height: 1.45; } .listing-quality-next li p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 4px 0 6px; } .listing-quality-next li a { font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .listing-quality-complete,.listing-quality-maintain { display: flex; align-items: flex-start; gap: 12px; color: var(--success-ink); } .listing-quality-maintain { color: var(--muted); } .listing-quality-complete>.icon,.listing-quality-maintain>.icon { width: 27px; height: 27px; flex-shrink: 0; } .listing-quality-complete p,.listing-quality-maintain p { margin: 0; line-height: 1.65; font-size: 15px; } .listing-quality-draft { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; margin-bottom: 22px; background: var(--warning-bg); color: var(--warning-ink); border: 1px solid var(--warning-line); border-radius: 10px; font-size: 14px; line-height: 1.6; } .listing-quality-draft>.icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; } .listing-quality-draft p { margin: 0; } .listing-quality-criteria>h2 { margin: 0 0 16px; font-size: 22px; } .listing-quality-criteria-list { display: grid; gap: 12px; } .listing-quality-criterion { display: grid; grid-template-columns: minmax(0,1fr) 185px; gap: 24px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .listing-quality-criterion-header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .listing-quality-criterion-header>.icon { width: 21px; height: 21px; color: var(--green); flex-shrink: 0; } .listing-quality-criterion h3 { font-size: 17px; line-height: 1.4; font-weight: 700; margin: 0; } .listing-quality-rule { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); } .listing-quality-metrics { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 15px; padding: 0; margin: 9px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink); } .listing-quality-metrics li { margin: 0; } .listing-quality-criterion-score { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 9px; text-align: right; } .listing-quality-points { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .listing-quality-points strong { font-size: 25px; font-weight: 750; line-height: 1.2; } .listing-quality-points span { font-size: 14px; color: var(--muted); } .listing-quality-earned { display: inline-flex; align-items: center; gap: 5px; color: var(--success-ink); font-size: 12px; } .listing-quality-earned>.icon { width: 14px; height: 14px; } .listing-quality-criterion-score>a { font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; line-height: 1.5; } .listing-quality-explanation { margin-top: 24px; padding: 22px 24px; background: var(--subtle); border: 1px solid var(--line); border-radius: 12px; } .listing-quality-explanation h2 { font-size: 18px; line-height: 1.4; margin: 0 0 10px; } .listing-quality-explanation p { font-size: 14px; line-height: 1.7; margin: 0; color: var(--muted); } .listing-quality-explanation p+p { margin-top: 10px; } @media (max-width:700px) { .listing-quality-heading { flex-direction: column; gap: 15px; } .listing-quality-overview { grid-template-columns: minmax(0,1fr); gap: 14px; margin-bottom: 25px; } .listing-quality-overview>.panel { padding: 21px; } .listing-quality-total>strong { font-size: 50px; } .listing-quality-criterion { padding: 18px; gap: 14px; grid-template-columns: minmax(0,1fr); } .listing-quality-criterion-score { align-items: center; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 10px; text-align: left; padding-top: 12px; border-top: 1px solid var(--line); } .listing-quality-points strong { font-size: 22px; } .listing-quality-earned { margin-right: auto; } .listing-quality-explanation { padding: 19px; } } } @layer ui { .listing-visibility { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); } .listing-visibility--mine { margin-top: 22px; } .listing-visibility--editor { margin-bottom: 22px; } .listing-visibility-content { min-width: 0; } .listing-visibility-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .listing-visibility-heading>.icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--muted); } .listing-visibility-heading>h2,.listing-visibility-heading>h3 { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 0; } .listing-visibility-content>p { font-size: 13px; line-height: 1.6; margin: 0; color: var(--ink); } .listing-visibility-content>.listing-visibility-terms { color: var(--muted); font-size: 12px; margin-top: 5px; } .listing-visibility-form { flex-shrink: 0; max-width: 20rem; margin: 0; } .listing-visibility-form>.button { font-size: 13px; white-space: normal; text-align: center; line-height: 1.4; } .listing-visibility-form>.alert { font-size: 12px; line-height: 1.5; padding: 10px 12px; margin: 10px 0 0; } .listing-visibility.is-paused { border-color: var(--blue-line); background: var(--blue-soft); } .listing-visibility.is-paused .listing-visibility-heading>.icon { color: var(--blue-ink); } .badge.listing-visibility-badge { background: var(--blue-soft); color: var(--blue-ink); border: 1px solid var(--blue-line); } @media (max-width:650px) { .listing-visibility { align-items: stretch; flex-direction: column; gap: 14px; padding: 16px; } .listing-visibility-form { max-width: 100%; } .listing-visibility-form>.button { width: 100%; min-height: 42px; } .listing-visibility--mine { margin-top: 18px; } } } @layer ui { .listing-statistics-entry { display: inline-flex; align-items: center; gap: 7px; } .listing-statistics-entry>a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.5; } .listing-statistics-entry .icon,.listing-statistics-editor-links .icon,.listing-statistics-heading-links .icon { width: 17px; height: 17px; flex-shrink: 0; } .listing-statistics-editor-links,.listing-statistics-heading-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; } .listing-statistics-editor-links { margin-bottom: 20px; } .listing-statistics-editor-links>p { margin: 0; } .listing-statistics-editor-links a,.listing-statistics-heading-links a { display: inline-flex; align-items: center; gap: 7px; } .listing-statistics { max-width: 1240px; margin-inline: auto; } .listing-statistics-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; font-size: 13px; color: var(--muted); } .listing-statistics-back .icon { width: 16px; height: 16px; } .listing-statistics-heading { align-items: flex-start; gap: 20px; margin-bottom: 28px; } .listing-statistics-heading>div { min-width: 0; } .listing-statistics-heading h1 { margin: 0 0 8px; } .listing-statistics-heading p { margin: 0; color: var(--muted); overflow-wrap: anywhere; font-size: 17px; } .listing-statistics-heading>.button { flex-shrink: 0; } .listing-statistics .button { min-height: 40px; padding: 9px 14px; font-size: 13px; } .listing-statistics-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px 20px; background: var(--subtle); border: 1px solid var(--line); border-radius: 12px; } .listing-statistics-period-dates { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; } .listing-statistics-period-dates>.icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--muted); } .listing-statistics-period { display: flex; align-items: center; gap: 10px; margin: 0; } .listing-statistics-period label { font-size: 13px; color: var(--muted); } .listing-statistics-period select { min-height: 40px; padding: 8px 30px 8px 12px; font-size: 14px; width: auto; max-width: 100%; background-color: var(--surface); } .listing-statistics-period-note { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 10px 0 22px; } .listing-statistics-history { display: flex; gap: 11px; padding: 15px 18px; border: 1px solid var(--blue-line); background: var(--blue-soft); border-radius: 10px; margin-bottom: 18px; } .listing-statistics-history>.icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue-ink); margin-top: 1px; } .listing-statistics-history h2 { font-size: 14px; font-weight: 700; line-height: 1.5; margin: 0 0 3px; } .listing-statistics-history p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; } .listing-statistics-primary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; } .listing-statistics-metric { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; } .listing-statistics-metric-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 45px; } .listing-statistics-metric-top h3 { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 650; } .listing-statistics-metric-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--blue-soft); color: var(--blue-ink); flex-shrink: 0; } .listing-statistics-metric-icon>.icon { width: 18px; height: 18px; } .listing-statistics-metric--views .listing-statistics-metric-icon { color: var(--teal-ink); background: var(--teal-soft); } .listing-statistics-metric--phone_clicks .listing-statistics-metric-icon { color: var(--gold-ink); background: var(--gold-soft); } .listing-statistics-metric--contact .listing-statistics-metric-icon { color: var(--violet-ink); background: var(--violet-soft); } .listing-statistics-value { font-size: 38px; line-height: 1.15; letter-spacing: -1.5px; font-weight: 750; font-variant-numeric: tabular-nums; margin: 16px 0 12px; overflow-wrap: anywhere; } .listing-statistics-comparison { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px; font-size: 12px; line-height: 1.5; color: var(--muted); } .listing-statistics-delta { font-size: 11px; font-weight: 650; padding: 2px 6px; border-radius: 5px; background: var(--subtle); color: var(--muted); font-variant-numeric: tabular-nums; } .listing-statistics-delta.is-positive { background: var(--success-bg); color: var(--success-ink); } .listing-statistics-availability { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 6px 0 0; } .listing-statistics-metric-help { border-top: 1px solid var(--line); padding-top: 12px; margin: 13px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); } .listing-statistics-charts { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(0,1fr); gap: 20px; margin-bottom: 20px; align-items: start; } .listing-statistics-panel { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; } .listing-statistics-section-heading h2 { font-size: 20px; line-height: 1.35; margin: 0 0 6px; } .listing-statistics-section-heading p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; } .listing-statistics-chart { margin: 24px 0 20px; } .listing-statistics-bars { width: 100%; height: auto; display: block; overflow: visible; } .listing-statistics-gridline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; } .listing-statistics-axis { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .listing-statistics-bar { fill: var(--green); } .listing-statistics-bar:hover { fill: var(--brand); } .listing-statistics-chart-dates { display: flex; justify-content: space-between; gap: 8px; padding-left: 6%; font-size: 11px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; } .listing-statistics-chart-empty { padding: 10px 12px; background: var(--subtle); border-radius: 7px; font-size: 13px; line-height: 1.6; color: var(--muted); margin: 18px 0 -10px; } .listing-statistics-table { border-top: 1px solid var(--line); padding-top: 14px; } .listing-statistics-table>summary { font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; list-style: disclosure-closed; } .listing-statistics-table[open]>summary { list-style: disclosure-open; } .listing-statistics-table>div { max-height: 330px; overflow: auto; margin-top: 12px; } .listing-statistics-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .listing-statistics-table th,.listing-statistics-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); background: var(--surface); } .listing-statistics-table thead th { position: sticky; top: 0; background: var(--subtle); font-weight: 650; } .listing-statistics-table tbody th { font-weight: 400; } .listing-statistics-table tr>:first-child { text-align: left; } .listing-statistics-table tr>:last-child { text-align: right; } .listing-statistics-sources>ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 20px; } .listing-statistics-sources li>div { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; font-size: 13px; margin-bottom: 7px; line-height: 1.5; } .listing-statistics-sources li span { min-width: 0; overflow-wrap: anywhere; } .listing-statistics-sources li strong { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; } .listing-statistics progress { display: block; width: 100%; height: 6px; appearance: none; border: 0; border-radius: 10px; background: var(--subtle); color: var(--green); overflow: hidden; } .listing-statistics progress::-webkit-progress-bar { background: var(--subtle); } .listing-statistics progress::-webkit-progress-value { background: var(--green); border-radius: 10px; } .listing-statistics progress::-moz-progress-bar { background: var(--green); border-radius: 10px; } .listing-statistics-empty { padding: 24px 0 12px; text-align: center; color: var(--muted); } .listing-statistics-empty>.icon { width: 30px; height: 30px; margin: 0 auto 12px; } .listing-statistics-empty>p { font-size: 13px; line-height: 1.6; margin: 0; } .listing-statistics-secondary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 22px; } .listing-statistics-secondary>article { display: flex; align-items: flex-start; gap: 11px; padding: 20px; min-width: 0; } .listing-statistics-secondary>article+article { border-left: 1px solid var(--line); } .listing-statistics-secondary>article>.icon { width: 19px; height: 19px; color: var(--muted); flex-shrink: 0; margin-top: 2px; } .listing-statistics-secondary>article>div { min-width: 0; flex: 1; } .listing-statistics-secondary h3 { font-size: 14px; font-weight: 650; line-height: 1.5; margin: 0; } .listing-statistics-secondary-help { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 5px 0 8px; } .listing-statistics-secondary-value { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 35%; } .listing-statistics-lifetime { padding: 20px 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--subtle); margin-bottom: 30px; } .listing-statistics-lifetime h2 { font-size: 16px; margin: 0 0 5px; } .listing-statistics-lifetime p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.6; } .listing-statistics-lifetime dl { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; margin: 18px 0 0; } .listing-statistics-lifetime dl>div { display: flex; flex-direction: column-reverse; gap: 4px; min-width: 0; } .listing-statistics-lifetime dt { font-size: 12px; line-height: 1.5; color: var(--muted); } .listing-statistics-lifetime dd { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .listing-statistics-page-context { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; margin-bottom: 30px; } .listing-statistics-state,.listing-statistics-quality { padding: 23px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; } .listing-statistics-state { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 15px; } .listing-statistics-state h2,.listing-statistics-quality h2 { font-size: 16px; line-height: 1.4; margin: 0 0 10px; } .listing-statistics-state-value { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; line-height: 1.5; color: var(--muted); } .listing-statistics-state-value>.icon { width: 20px; height: 20px; flex-shrink: 0; } .listing-statistics-state--success { color: var(--success-ink); } .listing-statistics-state--warning { color: var(--warning-ink); } .listing-statistics-state--danger { color: var(--danger-ink); } .listing-statistics-boost { font-size: 12px; line-height: 1.6; color: var(--gold-ink); margin: 12px 0 0; } .listing-statistics-boost>span { display: block; color: var(--muted); } .listing-statistics-state-help { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 5px 0 0; } .listing-statistics-quality { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-content: start; } .listing-statistics-quality h2 { margin-bottom: 5px; } .listing-statistics-quality p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; } .listing-statistics-quality>strong { font-size: 29px; letter-spacing: -.7px; line-height: 1.25; font-variant-numeric: tabular-nums; } .listing-statistics-quality>strong>span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 3px; } .listing-statistics-quality>progress { grid-column: 1/-1; margin: 5px 0; } .listing-statistics-quality>a { grid-column: 1/-1; } .listing-statistics .text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.5; text-underline-offset: 3px; } .listing-statistics .text-link>.icon { width: 16px; height: 16px; flex-shrink: 0; } .listing-statistics-advice>.listing-statistics-section-heading { margin-bottom: 18px; } .listing-statistics-recommendations { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } .listing-statistics-recommendations>article { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; } .listing-statistics-advice-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--subtle); color: var(--green); margin-bottom: 14px; } .listing-statistics-advice-icon>.icon { width: 20px; height: 20px; } .listing-statistics-recommendations h3 { font-size: 16px; line-height: 1.4; margin: 0 0 9px; } .listing-statistics-recommendations p { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0 0 17px; overflow-wrap: anywhere; } .listing-statistics-recommendations a { margin-top: auto; } .listing-statistics-advice-limit { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 14px 0 0; } .listing-statistics-advice-empty { display: flex; gap: 10px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); } .listing-statistics-advice-empty>.icon { color: var(--green); flex-shrink: 0; } .listing-statistics-draft { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.6; padding: 14px 16px; border: 1px solid var(--warning-line); background: var(--warning-bg); color: var(--warning-ink); border-radius: 10px; margin: 0 0 16px; } .listing-statistics-draft>.icon { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; } @media (max-width:1050px) { .listing-statistics-primary,.listing-statistics-recommendations { grid-template-columns: repeat(2,minmax(0,1fr)); } .listing-statistics-secondary { grid-template-columns: repeat(2,minmax(0,1fr)); } .listing-statistics-secondary>article:nth-child(3) { border-left: 0; } .listing-statistics-secondary>article:nth-child(n+3) { border-top: 1px solid var(--line); } .listing-statistics-secondary>article { padding: 17px 14px; gap: 8px; } } @media (max-width:750px) { .listing-statistics-heading { flex-direction: column; gap: 14px; margin-bottom: 22px; } .listing-statistics-toolbar { align-items: stretch; flex-direction: column; gap: 13px; padding: 16px; } .listing-statistics-period { flex-wrap: wrap; gap: 8px; } .listing-statistics-period label { width: 100%; } .listing-statistics-period select { min-width: 0; flex: 1; } .listing-statistics-charts,.listing-statistics-page-context { grid-template-columns: minmax(0,1fr); gap: 14px; } .listing-statistics-panel { padding: 19px; } .listing-statistics-secondary { grid-template-columns: minmax(0,1fr); } .listing-statistics-secondary>article { padding: 17px; } .listing-statistics-secondary>article+article { border-left: 0; border-top: 1px solid var(--line); } .listing-statistics-secondary-value { min-width: 35px; text-align: right; } .listing-statistics-lifetime dl { grid-template-columns: repeat(2,minmax(0,1fr)); } .listing-statistics-page-context { margin-bottom: 25px; } } @media (max-width:420px) { .listing-statistics-primary,.listing-statistics-recommendations { grid-template-columns: minmax(0,1fr); gap: 12px; } .listing-statistics-metric { padding: 18px; } .listing-statistics-metric-top { min-height: 32px; align-items: center; } .listing-statistics-value { margin: 12px 0; font-size: 36px; } .listing-statistics-chart-dates { font-size: 10px; } .listing-statistics-chart-dates>span:nth-child(2) { display: none; } .listing-statistics-quality { padding: 19px; gap: 12px; } .listing-statistics-quality>strong { font-size: 25px; } } } @layer ui { .provider-benefits { max-width: 1240px; margin-inline: auto; } .provider-benefits .button { min-height: 42px; padding: 10px 16px; font-size: 14px; } .provider-benefits-hero { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 40px; align-items: center; padding: 40px; background: var(--cream); border: 1px solid var(--hero-line); border-radius: 16px; margin-bottom: 42px; } .provider-benefits-hero-copy { min-width: 0; } .provider-benefits-hero h1 { font-size: clamp(32px,3.6vw,48px); line-height: 1.13; letter-spacing: -1.5px; margin: 0 0 18px; } .provider-benefits-hero-copy>p { font-size: 17px; line-height: 1.75; color: var(--muted); max-width: 590px; margin: 0 0 24px; } .provider-benefits-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 22px; } .provider-benefits-text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--green); line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; } .provider-benefits-text-link>.icon { width: 17px; height: 17px; } .provider-benefits-existing { padding: 25px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; } .provider-benefits-existing-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: var(--sage-soft); color: var(--sage-ink); margin-bottom: 16px; } .provider-benefits-existing-icon>.icon { width: 23px; height: 23px; } .provider-benefits-existing h2 { font-size: 18px; line-height: 1.4; margin: 0 0 10px; } .provider-benefits-existing p { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 17px; } .provider-benefits-existing>a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--green); text-decoration: underline; text-underline-offset: 4px; line-height: 1.5; } .provider-benefits-existing>a>.icon { width: 17px; height: 17px; flex-shrink: 0; } .provider-benefits-results { scroll-margin-top: 25px; } .provider-benefits-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .provider-benefits-section-heading>div { min-width: 0; } .provider-benefits-section-heading h2 { font-size: 25px; line-height: 1.3; margin: 0 0 9px; } .provider-benefits-section-heading p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; } .provider-benefits-section-heading>.provider-benefits-period { display: flex; align-items: flex-start; gap: 7px; flex-shrink: 0; padding: 7px 10px; border-radius: 7px; background: var(--subtle); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; } .provider-benefits-period>.icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } .provider-benefits-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } .provider-benefits-metric { padding: 21px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; } .provider-benefits-metric-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; min-height: 44px; } .provider-benefits-metric-heading h3 { font-size: 14px; font-weight: 650; line-height: 1.5; margin: 0; } .provider-benefits-metric-heading>span { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--sage-soft); color: var(--sage-ink); } .provider-benefits-metric-heading .icon { width: 18px; height: 18px; } .provider-benefits-metric--listings .provider-benefits-metric-heading>span { background: var(--gold-soft); color: var(--gold-ink); } .provider-benefits-metric--photos .provider-benefits-metric-heading>span { background: var(--blue-soft); color: var(--blue-ink); } .provider-benefits-metric--requests .provider-benefits-metric-heading>span { background: var(--violet-soft); color: var(--violet-ink); } .provider-benefits-metric-value { font-size: 42px; line-height: 1.1; font-weight: 750; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; margin: 18px 0 12px; overflow-wrap: anywhere; color: var(--ink); } .provider-benefits-metric-help { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; } .provider-benefits-period-help { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 12px 0 0; } .provider-benefits-attention { margin-top: 42px; scroll-margin-top: 25px; } .provider-benefits-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .provider-benefits-filters>a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 39px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.5; background: var(--surface); } .provider-benefits-filters>a>.icon { width: 15px; height: 15px; } .provider-benefits-filters>a[aria-current] { background: var(--sage-soft); border-color: var(--sage-line); color: var(--sage-ink); } .provider-benefits-filters>a:hover { border-color: var(--green); color: var(--green); } .provider-benefits-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 20px; } .provider-benefits-card { display: flex; flex-direction: column; min-width: 0; } .provider-benefits-card>.provider-card { flex: 1; margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .provider-benefits-attention-count { display: flex; align-items: center; gap: 7px; margin: 0; padding: 11px 15px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--subtle); color: var(--muted); font-size: 12px; line-height: 1.5; } .provider-benefits-attention-count>.icon { width: 16px; height: 16px; flex-shrink: 0; } .provider-benefits-attention-count>strong { margin-left: auto; color: var(--ink); font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; } .provider-benefits-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 24px 0 0; } .provider-benefits-pagination>a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 36px; min-height: 38px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.5; } .provider-benefits-pagination>a[aria-current] { background: var(--sage-soft); border-color: var(--sage-line); color: var(--sage-ink); font-weight: 700; } .provider-benefits-pagination>a>.icon { width: 16px; height: 16px; flex-shrink: 0; } .provider-benefits-pagination-gap { padding: 0 3px; color: var(--muted); } .provider-benefits-boost-note { margin: 16px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); } .provider-benefits-empty { padding: 34px 22px; background: var(--subtle); border: 1px solid var(--line); border-radius: 12px; text-align: center; } .provider-benefits-empty>.icon { width: 32px; height: 32px; margin: 0 auto 14px; color: var(--muted); } .provider-benefits-empty>h3 { font-size: 20px; line-height: 1.4; margin: 0 0 10px; } .provider-benefits-empty>p { font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 610px; margin: 0 auto 20px; } .provider-benefits-empty>div { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .provider-benefits-how { margin-top: 42px; } .provider-benefits-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; } .provider-benefits-steps>article { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--surface); } .provider-benefits-step-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sage-soft); color: var(--sage-ink); margin-bottom: 17px; } .provider-benefits-step-icon>.icon { width: 22px; height: 22px; } .provider-benefits-steps>article:nth-child(2) .provider-benefits-step-icon { color: var(--blue-ink); background: var(--blue-soft); } .provider-benefits-steps>article:nth-child(3) .provider-benefits-step-icon { color: var(--gold-ink); background: var(--gold-soft); } .provider-benefits-steps h3 { font-size: 18px; line-height: 1.4; margin: 0 0 12px; } .provider-benefits-steps p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; } .provider-benefits-steps a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--green); margin-top: auto; text-decoration: underline; text-underline-offset: 3px; } .provider-benefits-steps a>.icon { width: 16px; height: 16px; flex-shrink: 0; } .provider-benefits-results-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 15px 0 0; } .provider-benefits-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 32px; background: var(--sage-soft); border: 1px solid var(--sage-line); border-radius: 12px; margin-top: 35px; } .provider-benefits-cta>div { min-width: 0; } .provider-benefits-cta h2 { font-size: 24px; line-height: 1.35; margin: 0 0 8px; } .provider-benefits-cta p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; } .provider-benefits-cta>.button { flex-shrink: 0; } @media (max-width:1050px) { .provider-benefits-hero { padding: 30px; gap: 25px; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); } .provider-benefits-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .provider-benefits-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } .provider-benefits-section-heading { flex-direction: column; gap: 12px; } .provider-benefits-steps { gap: 14px; } .provider-benefits-steps>article { padding: 20px; } } @media (max-width:720px) { .provider-benefits-hero { grid-template-columns: minmax(0,1fr); padding: 25px; gap: 25px; margin-bottom: 30px; } .provider-benefits-hero h1 { font-size: 35px; } .provider-benefits-hero-copy>p { font-size: 16px; } .provider-benefits-existing { padding: 21px; } .provider-benefits-attention,.provider-benefits-how { margin-top: 32px; } .provider-benefits-section-heading h2 { font-size: 23px; } .provider-benefits-steps { grid-template-columns: minmax(0,1fr); } .provider-benefits-steps>article { padding: 22px; } .provider-benefits-cta { align-items: flex-start; flex-direction: column; padding: 24px; gap: 20px; } } @media (max-width:540px) { .provider-benefits-cards { grid-template-columns: minmax(0,1fr); } .provider-benefits-metric { padding: 18px 15px; } .provider-benefits-metric-heading { min-height: 78px; gap: 7px; flex-direction: column-reverse; align-items: flex-start; } .provider-benefits-metric-heading h3 { font-size: 13px; } .provider-benefits-metric-heading>span { width: 29px; height: 29px; } .provider-benefits-metric-value { font-size: 34px; letter-spacing: -1px; margin-top: 15px; } .provider-benefits-metric-help { font-size: 11px; } .provider-benefits-filters>a { padding: 8px 11px; font-size: 12px; } .provider-benefits-pagination-direction>span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } } @media (max-width:360px) { .provider-benefits-hero { padding: 20px; } .provider-benefits-hero h1 { font-size: 31px; } .provider-benefits-actions { align-items: flex-start; flex-direction: column; } .provider-benefits-metrics { gap: 10px; } .provider-benefits-metric { padding: 15px 12px; } .provider-benefits-metric-value { font-size: 30px; } } } @layer ui { .request-results-heading { align-items: center; gap: 16px; margin-block: 28px 18px; } .request-results-heading>div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; } .request-results-heading h2 { font-size: 20px; } .request-results-order { font-size: 12px; color: var(--muted); } .request-directory-list { display: grid; gap: 16px; } .request-entry { display: grid; grid-template-columns: 52px minmax(0,1fr) 210px; align-items: start; gap: 22px; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .18s,box-shadow .18s; } .request-entry:hover,.request-entry:focus-within { border-color: var(--sage-line); box-shadow: var(--shadow); } .request-entry-symbol { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--sage-line); border-radius: 12px; background: var(--sage-soft); color: var(--sage-ink); } .request-entry-symbol>.icon { width: 25px; height: 25px; } .request-entry-body,.request-entry-action { min-width: 0; } .request-entry-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .request-entry-taxonomy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; font-size: 12px; font-weight: 550; line-height: 1.5; color: var(--green); overflow-wrap: anywhere; } .request-entry-taxonomy>.icon { width: 12px; height: 12px; color: var(--muted); } .request-entry-time { flex-shrink: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .request-entry h2 { margin: 0; font-size: 21px; line-height: 1.35; letter-spacing: -.025em; overflow-wrap: anywhere; } .request-entry h2 a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; } .request-entry-description { margin-top: 10px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; color: var(--muted); } .request-entry-details { display: flex; flex-wrap: wrap; gap: 9px 18px; list-style: none; padding: 0; margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .request-entry-details>li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .request-entry-details .icon { width: 16px; height: 16px; margin-top: 2px; } .request-entry-details>li>span { min-width: 0; } .request-entry-details .request-entry-location { font-weight: 600; color: var(--ink); } .request-entry-detail-label { color: var(--muted); } .request-entry-files { color: var(--green); } .request-entry-action { display: flex; flex-direction: column; align-self: stretch; justify-content: flex-start; gap: 20px; padding-left: 22px; border-left: 1px solid var(--line); } .request-entry-budget { display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; } .request-entry-budget>span:first-child { color: var(--muted); font-size: 12px; } .request-entry-budget>strong { font-size: 21px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--ink); } .request-entry-budget-empty { font-size: 15px; color: var(--muted); } .request-entry-action>.button { width: 100%; min-height: 44px; padding: 10px 12px; gap: 8px; font-size: 12px; justify-content: space-between; border-color: var(--sage-line); color: var(--green); } .request-entry-action>.button:hover { background: var(--sage-soft); } .request-entry-action>.button>.icon { width: 17px; height: 17px; } .request-entry { scroll-margin-top: 24px; } .request-entry:target { border-color: var(--green); } .request-entry-body:has(>.request-entry-expanded[open])>.request-entry-description { display: none; } .request-entry-expanded { margin-top: 10px; } .request-entry-expanded>summary { display: flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; min-height: 36px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--green); } .request-entry-expanded>summary::-webkit-details-marker { display: none; } .request-entry-expanded>summary:hover { text-decoration: underline; text-underline-offset: 4px; } .request-entry-expanded>summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; } .request-entry-expanded>summary>.icon { width: 16px; height: 16px; } .request-entry-expanded .request-expand-less { display: none; } .request-entry-expanded[open] .request-expand-more { display: none; } .request-entry-expanded[open] .request-expand-less { display: inline; } .request-entry-expanded[open]>summary>.icon { transform: rotate(180deg); } .request-entry-full { padding-top: 4px; font-size: 14px; line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; } .request-entry-contact { grid-column: 1/-1; min-width: 0; padding-top: 22px; border-top: 1px solid var(--line); } .request-entry-contact[aria-busy=true] { min-height: 66px; font-size: 14px; color: var(--muted); } .request-entry-action>[aria-expanded=true] { background: var(--sage-soft); } .request-entry-action>[aria-expanded=true]>.icon:last-child { transform: rotate(180deg); } .request-inline-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .request-inline-heading h3 { font-size: 19px; font-weight: 650; } .request-inline-heading .icon-button { width: 36px; height: 36px; min-width: 36px; border: 1px solid var(--line); border-radius: 9px; } .request-inline-heading .icon { width: 18px; height: 18px; } .request-inline-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; background: var(--sage-soft); font-size: 13px; line-height: 1.65; color: var(--muted); } .request-inline-note>.icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--green); margin-top: 2px; } .request-inline-grid { display: grid; grid-template-columns: minmax(230px,.8fr) minmax(0,1.2fr); gap: 24px; align-items: start; } .request-inline-grid--simple { grid-template-columns: 1fr; } .request-inline-grid>.request-contact-card { margin: 0; box-shadow: none; background: var(--subtle); } .request-inline-grid--simple .request-contact-details { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 20px; } .request-inline-grid--simple .request-contact-details>div+div { padding-top: 0; border-top: 0; } .request-inline-grid--simple .request-contact-actions { max-width: 380px; } .request-inline-grid--simple .request-contact-requirement { width: fit-content; } .request-inline-grid .request-contact-heading h2 { font-size: 18px; } .request-inline-conversation { display: grid; gap: 22px; min-width: 0; } .request-inline-conversation h3 { font-size: 17px; font-weight: 650; line-height: 1.45; } .request-inline-offer { display: grid; gap: 16px; } .request-inline-offer .field { margin: 0; } .request-inline-offer textarea { font-size: 14px; min-height: 120px; } .request-inline-send { display: flex; align-items: end; justify-content: space-between; gap: 18px; } .request-inline-send>.field { flex: 0 1 170px; } .request-inline-send .field-optional { font-size: 12px; font-weight: 400; color: var(--muted); } .request-inline-send>.button { min-height: 44px; } .request-inline-files>ul { display: grid; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; } .request-inline-files a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--green); font-size: 13px; } .request-inline-files a>span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .request-inline-files .icon { width: 18px; height: 18px; flex-shrink: 0; } .request-inline-status { padding: 18px; border: 1px solid var(--line); border-radius: 12px; } .request-inline-status p { margin: 10px 0; font-size: 14px; line-height: 1.7; color: var(--muted); } .request-inline-offer-sent { padding: 16px; margin-top: 12px; border: 1px solid var(--sage-line); border-radius: 10px; background: var(--sage-soft); font-size: 14px; overflow-wrap: anywhere; } .request-inline-offer-sent>div { display: flex; justify-content: space-between; gap: 12px; } .request-inline-offer-sent>p { margin-top: 10px; line-height: 1.7; } .request-inline-offer-sent>time,.request-inline-view-note { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; } .request-directory-back { margin: 0 0 18px; } .request-directory-back>a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; } .request-directory-back .icon { width: 17px; height: 17px; } @media (max-width:1000px) { .request-entry { grid-template-columns: minmax(0,1fr) 190px; gap: 22px; } .request-entry-symbol { display: none; } .request-entry-action { padding-left: 20px; } } @media (max-width:700px) { .request-entry { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 22px; } .request-entry h2 { font-size: 19px; } .request-entry-action { flex-direction: row; align-items: center; gap: 18px; border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; } .request-entry-action>.button { width: auto; flex-shrink: 0; gap: 10px; min-width: 170px; } .request-entry-budget { flex: 1; } .request-entry-budget>strong { font-size: 19px; } .request-entry-details { margin-top: 16px; } .request-results-heading { align-items: flex-start; } .request-results-heading>div { display: block; } .request-results-order { margin-top: 5px; } } @media (max-width:420px) { .request-entry { padding: 18px; gap: 16px; } .request-entry-top { flex-direction: column; gap: 6px; } .request-entry h2 { font-size: 18px; } .request-entry-description { font-size: 13px; } .request-entry-action { align-items: stretch; flex-direction: column; gap: 14px; } .request-entry-action>.button { width: 100%; justify-content: center; } .request-entry-budget { gap: 4px; } .request-results-heading { flex-direction: column; } .request-results-heading>.button { align-self: flex-start; } } @media (max-width:850px) { .request-inline-grid { grid-template-columns: 1fr; gap: 18px; } } @media (max-width:420px) { .request-entry-full { font-size: 13px; } .request-inline-send { align-items: stretch; flex-direction: column; gap: 14px; } .request-inline-send>.field { flex: 1; } .request-entry-contact { padding-top: 18px; } .request-inline-grid>.request-contact-card { padding: 16px; } } @media (prefers-reduced-motion:reduce) { .request-entry { transition: none; } } } @layer ui { .provider-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: box-shadow .2s,border-color .2s; } .provider-card:hover,.provider-card:focus-within { border-color: var(--sage-line); box-shadow: var(--shadow); } .provider-card-visual { position: relative; flex-shrink: 0; } .provider-card .listing-image { display: block; height: 210px; overflow: hidden; } .provider-card .listing-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; } .provider-card:hover .listing-image img { transform: scale(1.025); } .provider-card .image-placeholder { height: 100%; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px; color: var(--green); text-align: center; } .provider-card .image-placeholder>.icon { width: 38px; height: 38px; } .provider-photo-count { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 10px; background: #17221fdb; color: #fff; border: 1px solid #ffffff40; border-radius: 8px; font-size: 13px; font-weight: 650; box-shadow: 0 2px 8px #17241e14; } .provider-photo-count .icon { width: 17px; height: 17px; } .provider-card .listing-card-body { display: flex; flex: 1; flex-direction: column; gap: 0; padding: 20px; min-width: 0; } .provider-card-facts { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 16px; font-size: 12px; } .provider-card-reviews { display: inline-flex; align-items: center; min-height: 28px; border-radius: 4px; } .provider-rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 14px; line-height: 1.4; color: var(--ink); } .provider-rating strong { font-weight: 750; font-variant-numeric: tabular-nums; } .provider-rating-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--gold-soft); color: var(--gold-ink); font-size: 18px; } .provider-rating-count,.provider-no-reviews { color: var(--muted); font-size: 12px; } .provider-card-experience { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); } .provider-card-experience .icon { width: 15px; height: 15px; } .provider-card .provider-card-category { margin: 0 0 6px; color: var(--green); font-size: 11px; font-weight: 600; line-height: 1.5; } .provider-card-category a { display: inline-flex; align-items: center; min-height: 24px; border-radius: 3px; text-decoration: underline; text-decoration-color: var(--sage-line); text-underline-offset: 3px; } .provider-card-category a:hover { text-decoration-color: currentColor; } .provider-card-category a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .provider-card .listing-card-body h3 { font-size: 20px; line-height: 1.3; margin: 0; overflow-wrap: anywhere; } .provider-card .provider-card-owner { margin: 9px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .provider-card .provider-card-description { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .provider-card .provider-card-location { display: flex; align-items: flex-start; gap: 6px; margin: 15px 0 18px; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; } .provider-card-location .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; } .provider-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: auto -20px -20px; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--subtle); } .provider-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 5px; line-height: 1.35; color: var(--ink); } .provider-price-from { font-size: 12px; color: var(--muted); } .provider-price-amount { font-size: 25px; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .provider-price-amount>span { font-size: .8em; } .provider-price-unit { font-size: 12px; color: var(--muted); } .provider-price--agreed { font-size: 15px; font-weight: 600; } .provider-card-footer .provider-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 7px; min-width: 0; max-width: 100%; } .provider-card-footer .provider-price-amount { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; white-space: nowrap; color: var(--green); } .provider-card-footer .provider-price-amount>span { font-size: 18px; font-weight: 600; letter-spacing: 0; } .provider-card-footer .provider-price-from { flex-basis: 100%; font-size: 11px; font-weight: 500; line-height: 1.2; } .provider-card-footer .provider-price-unit { font-size: 11px; line-height: 1.4; white-space: nowrap; } .provider-card-footer .provider-price--agreed { display: block; max-width: 100%; font-size: 15px; line-height: 1.4; } .provider-card-open { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-height: 38px; margin-left: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--green); font-size: 12px; font-weight: 650; line-height: 1.3; transition: background .15s,border-color .15s; } .provider-card-open:hover { border-color: var(--sage-line); background: var(--sage-soft); color: var(--sage-ink); } .provider-card-open:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } .provider-card-open .icon { width: 16px; height: 16px; } .provider-stars { position: relative; display: inline-block; flex-shrink: 0; white-space: nowrap; font-size: 18px; line-height: 1; letter-spacing: 1px; color: var(--line); } .provider-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--gold-ink); } .provider-stars--0 .provider-stars-fill { width: 0; } .provider-stars--1 .provider-stars-fill { width: 10%; } .provider-stars--2 .provider-stars-fill { width: 20%; } .provider-stars--3 .provider-stars-fill { width: 30%; } .provider-stars--4 .provider-stars-fill { width: 40%; } .provider-stars--5 .provider-stars-fill { width: 50%; } .provider-stars--6 .provider-stars-fill { width: 60%; } .provider-stars--7 .provider-stars-fill { width: 70%; } .provider-stars--8 .provider-stars-fill { width: 80%; } .provider-stars--9 .provider-stars-fill { width: 90%; } .provider-stars--10 .provider-stars-fill { width: 100%; } @media (max-width:600px) { .provider-card .listing-image { height: 210px; } .provider-card .listing-card-body { padding: 18px; } .provider-card .listing-card-body h3 { font-size: 19px; } .provider-card-footer { gap: 12px; margin-right: -18px; margin-bottom: -18px; margin-left: -18px; padding: 14px 18px; } } @media (prefers-reduced-motion:reduce) { .provider-card,.provider-card .listing-image img,.provider-card-open { transition: none; } } } @layer ui { .card-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid #ffffffb3; border-radius: 50%; background: #fffffff0; color: #25352f; box-shadow: 0 1px 6px #17221f2b; cursor: pointer; transition: background .15s,box-shadow .15s; z-index: 1; } .card-gallery-arrow::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; } .card-gallery-arrow--prev { left: 10px; } .card-gallery-arrow--next { right: 10px; } .card-gallery-arrow .icon { width: 18px; height: 18px; } .card-gallery-arrow:hover { background: #fff; box-shadow: 0 1px 8px #17221f59; } .card-gallery-arrow:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } .card-gallery-arrow:disabled,.card-gallery-arrow[aria-disabled="true"] { opacity: .6; cursor: progress; } .card-gallery-arrow[hidden],.card-gallery-feedback[hidden] { display: none; } [data-card-gallery].is-enhanced [data-card-gallery-link] { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; } [data-card-gallery].is-loading [data-card-gallery-link] { cursor: progress; } [data-card-gallery].is-loading [data-card-gallery-image] { opacity: .75; } [data-card-gallery].is-dragging [data-card-gallery-link] { cursor: grabbing; } .card-gallery-feedback { position: absolute; left: 10px; right: 10px; bottom: 56px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12px; line-height: 1.4; box-shadow: 0 2px 12px #17221f2b; pointer-events: none; } [data-card-gallery-counter] { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion:reduce) { .card-gallery-arrow { transition: none; } } } @layer ui { .provider-profile-heading { margin-bottom: 20px; align-items: flex-start; } .provider-profile-heading>div { min-width: 0; } .provider-profile-heading h1 { max-width: 1050px; overflow-wrap: anywhere; } .provider-profile-heading .provider-profile-location { display: flex; align-items: center; gap: 7px; margin-top: 15px; font-size: 15px; } .provider-profile-location>.icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); } .listing-photo-gallery { scroll-margin-top: 110px; } .provider-gallery-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .provider-gallery-heading h2 { font-size: 21px; line-height: 1.3; margin: 0; } .provider-gallery-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--subtle); font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1; } .provider-profile-contact .provider-profile-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .provider-profile-identity>.avatar { width: 54px; height: 54px; min-width: 54px; display: grid; place-items: center; flex-shrink: 0; border-radius: 16px; background: var(--sage-soft); color: var(--sage-ink); font-size: 24px; } .provider-profile-contact .provider-profile-identity h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; min-width: 0; overflow-wrap: anywhere; } @media (max-width:650px) { .provider-profile-heading { gap: 15px; margin-bottom: 18px; } .provider-profile-heading .provider-profile-location { font-size: 14px; margin-top: 12px; } .provider-gallery-heading { margin-bottom: 13px; } .provider-gallery-heading h2 { font-size: 19px; } .provider-profile-contact .provider-profile-identity { margin-bottom: 18px; } } } @layer ui { .provider-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 96px; height: 96px; padding: 10px; border: 1px solid #e5e7e5; border-radius: 14px; background: #fff; overflow: hidden; } .provider-logo>img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .provider-card-logo { position: absolute; left: 12px; bottom: 12px; display: block; border-radius: 10px; box-shadow: 0 2px 12px #17221f21; } .provider-card-logo .provider-logo { width: 64px; height: 64px; padding: 6px; border-radius: 10px; } .provider-card-logo:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } .provider-profile-title { display: flex; align-items: center; gap: 20px; min-width: 0; } .provider-profile-title-text { min-width: 0; } .business-logo { background: #fff; object-fit: contain; padding: 8px; border: 1px solid #e5e7e5; } #provider-logo { scroll-margin-top: 100px; } .provider-logo-help { margin: 0 0 20px; font-size: 13px; line-height: 1.6; } .provider-logo-help a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } @media (max-width:650px) { .provider-profile-title { gap: 14px; align-items: flex-start; } .provider-profile-title>.provider-logo { width: 72px; height: 72px; padding: 7px; border-radius: 12px; } } @media (max-width:420px) { .provider-profile-title:has(>.provider-logo) { flex-direction: column; gap: 12px; } } } @layer ui { .mobile-publish-row { display: none; } @media (max-width:600px) { .site-header { height: auto; } .header-inner { height: 68px; } .mobile-publish-row { display: block; padding-bottom: 12px; } .mobile-publish-row>.button { width: 100%; min-height: 44px; padding-block: 10px; } .site-header .mobile-nav { top: 100%; } } .publish-choice { max-width: 980px; margin-inline: auto; padding-block: 32px 64px; } .publish-choice-heading { max-width: 660px; margin: 0 auto 34px; text-align: center; } .publish-choice-heading h1 { font-size: clamp(30px,3.5vw,42px); line-height: 1.2; } .publish-choice-heading p { margin-top: 14px; font-size: 16px; line-height: 1.65; } .publish-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .publish-choice-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); } .publish-choice-request { border-color: var(--coral-line); background: linear-gradient(150deg,var(--accent-soft),var(--surface) 75%); box-shadow: var(--shadow); } .publish-choice-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border-radius: 14px; background: var(--subtle); color: var(--green); } .publish-choice-request .publish-choice-icon { background: var(--accent-soft); color: var(--brand); } .publish-choice-icon .icon { width: 28px; height: 28px; } .publish-choice-card h2 { font-size: 27px; line-height: 1.3; overflow-wrap: anywhere; } .publish-choice-card p { margin-block: 14px 30px; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; } .publish-choice-card .publish-choice-action { width: 100%; min-height: 44px; margin-top: auto; padding: 11px 20px; font-size: 15px; font-weight: 650; } .publish-choice-action:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; } @media (max-width:650px) { .publish-choice { padding-block: 32px 44px; } .publish-choice-heading { margin-bottom: 26px; } .publish-choice-heading p { font-size: 15px; margin-top: 12px; } .publish-choice-grid { grid-template-columns: minmax(0,1fr); gap: 18px; } .publish-choice-card { padding: 25px; border-radius: 14px; } .publish-choice-icon { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 12px; } .publish-choice-icon .icon { width: 25px; height: 25px; } .publish-choice-card h2 { font-size: 24px; } .publish-choice-card p { font-size: 15px; margin-block: 12px 24px; } } } @layer ui { .hero-copy>.hero-description { max-width: 710px; } .home-actions { width: 100%; max-width: 900px; margin: 30px auto 0; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-align: left; } .home-action-paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .home-action-path { display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 94px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); color: var(--ink); transition: background .18s,border-color .18s; } .home-action-path:hover { border-color: var(--green); } .home-action-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); color: var(--green); } .home-action-icon>.icon { width: 22px; height: 22px; } .home-action-copy { min-width: 0; display: grid; gap: 3px; } .home-action-copy strong { font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; } .home-action-copy small { font-size: 13px; line-height: 1.5; color: var(--muted); } .home-action-path>.home-action-arrow { width: 20px; height: 20px; margin-left: auto; color: var(--green); } .home-action-request { background: var(--accent-soft); border-color: var(--coral-line); } .home-action-request:hover { border-color: var(--brand); } .home-action-request .home-action-icon { background: var(--surface); color: var(--brand); } .home-action-request strong,.home-action-request>.home-action-arrow { color: var(--brand); } .home-action-path:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .home-actions>.hero-search { width: 100%; max-width: none; grid-template-columns: minmax(0,1fr) auto; margin: 0; padding: 20px 14px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .home-actions .hero-search .search-service { grid-column: 1; } .home-actions .hero-search>.button { grid-column: 2; grid-row: 1; } .home-actions .hero-search #home-q:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 4px; } #home-q { scroll-margin-block: 160px; } @media (max-width:700px) { .home-action-path { gap: 10px; padding: 16px 14px; } .home-action-copy strong { font-size: 17px; } .home-action-icon { display: none; } } @media (max-width:600px) { .home-actions { margin-top: 24px; padding: 6px; border-radius: 14px; } .home-action-paths { gap: 6px; } .home-action-path { align-items: flex-start; flex-direction: column; gap: 10px; min-height: 124px; padding: 14px 12px; border-radius: 9px; } .home-action-copy { gap: 6px; } .home-action-copy strong { font-size: 16px; } .home-action-copy small { font-size: 12px; line-height: 1.45; } .home-action-path>.home-action-arrow { width: 18px; height: 18px; margin-left: 0; margin-top: auto; } .home-actions>.hero-search { grid-template-columns: minmax(0,1fr); padding: 18px 10px 10px; } .home-actions .hero-search>.button { grid-column: 1; grid-row: 2; } .hero-copy>.hero-description { font-size: 15px; line-height: 1.7; } } } @layer ui { .browse-location { position: relative; min-width: 0; } .browse-location-trigger { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; max-width: 190px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; list-style: none; color: var(--ink); background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; } .browse-location-trigger::-webkit-details-marker { display: none; } .browse-location-trigger:hover,.browse-location[open]>.browse-location-trigger { border-color: var(--green); background: var(--subtle); } .browse-location-trigger>.icon:first-child { width: 18px; height: 18px; color: var(--green); } .browse-location-trigger>.browse-location-chevron { width: 14px; height: 14px; color: var(--muted); } .browse-location[open] .browse-location-chevron { transform: rotate(180deg); } .browse-location-label { max-width: 110px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browse-location-count { flex-shrink: 0; border-radius: 12px; background: var(--subtle); color: var(--green); font-size: 11px; padding: 1px 5px; line-height: 18px; } .browse-location-count-mobile { display: none; } .browse-location-panel { position: absolute; z-index: 45; right: 0; top: calc(100% + 12px); width: 360px; max-width: calc(100vw - 32px); padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 48px #17282026; } .browse-location-panel form { display: flex; flex-direction: column; min-width: 0; max-height: min(660px,calc(100dvh - 150px)); } .browse-location-heading h2 { font-size: 18px; line-height: 1.4; letter-spacing: -.3px; } .browse-location-heading p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); } .browse-location-search { position: relative; margin-top: 16px; flex-shrink: 0; } .browse-location-search>.icon { position: absolute; left: 12px; top: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .browse-location-search input { width: 100%; min-height: 46px; padding: 10px 12px 10px 38px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); } .browse-location-selection { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding-block: 10px; font-size: 12px; color: var(--muted); flex-shrink: 0; } .browse-location-selection>.text-button { min-height: 32px; color: var(--green); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .browse-location-selection>.text-button:disabled { color: var(--muted); opacity: .65; cursor: default; text-decoration: none; } .browse-location-list { min-height: 80px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px 0; border: 0; border-block: 1px solid var(--line); } .browse-location-option { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 8px; border-radius: 7px; font-size: 14px; line-height: 1.4; cursor: pointer; } .browse-location-option:hover,.browse-location-option:has(:checked) { background: var(--subtle); } .browse-location-option input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--green); cursor: pointer; } .browse-location-option:has(:disabled) { opacity: .55; cursor: default; } .browse-location-option:focus-within { outline: 2px solid var(--green); outline-offset: -2px; } .browse-location-empty { padding: 20px 8px; font-size: 13px; line-height: 1.6; color: var(--muted); } .browse-location-footer { display: flex; gap: 10px; padding-top: 16px; flex-shrink: 0; } .browse-location-footer>.button { flex: 1; min-height: 44px; padding: 11px 16px; font-size: 13px; } .browse-location-trigger:focus-visible,.browse-location input:focus-visible,.browse-location button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .browse-location [hidden] { display: none !important; } @media (min-width:851px) { .header-inner:has(.browse-location) { gap: 20px; } .header-actions:has(.browse-location) { gap: 12px; } } @media (min-width:851px) and (max-width:1100px) { .header-inner:has(.browse-location) .desktop-nav { gap: 14px; } .header-actions:has(.browse-location) { gap: 8px; } .browse-location-trigger { max-width: 160px; padding-inline: 8px; gap: 5px; } } @media (max-width:1050px) { .header-inner:has(.browse-location) .desktop-nav { display: none; } .header-inner:has(.browse-location) .mobile-menu-button { display: grid; } } @media (max-width:600px) { .browse-location-trigger { position: relative; width: 44px; height: 44px; min-width: 44px; padding: 10px; border-color: transparent; border-radius: 50%; } .browse-location-trigger>.icon:first-child { width: 22px; height: 22px; } .browse-location-label,.browse-location-trigger>.browse-location-chevron { display: none; } .browse-location-count,.browse-location-count-mobile { display: block; position: absolute; top: 0; right: -2px; padding: 0 4px; min-width: 16px; line-height: 16px; font-size: 10px; background: var(--green); color: var(--surface); } .browse-location-count-desktop { display: none; } .browse-location-panel { position: fixed; top: var(--browse-popover-top,132px); left: 16px; right: 16px; width: auto; max-width: none; padding: 18px; } .browse-location-panel form { max-height: calc(100dvh - var(--browse-popover-top,132px) - 54px); } .browse-location-search input { font-size: 16px; } .browse-location-list { max-height: 320px; } .browse-location-footer>.button { font-size: 14px; } } @media (max-width:380px) { .header-inner:has(.browse-location) { gap: 8px; } .header-inner:has(.browse-location)>.brand .brand-mark { display: none; } .header-actions:has(.browse-location) { gap: 0; } } } @layer ui { .home-categories { padding-block: 56px; border-bottom: 1px solid var(--line); } .home-categories-heading { align-items: flex-end; margin-bottom: 32px; } .home-categories-heading p { margin-top: 10px; font-size: 15px; } .home-categories-heading>.arrow-link { flex-shrink: 0; min-height: 44px; } .home-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px 34px; align-items: start; } .home-category-group { min-width: 0; } .home-category-title { display: flex; align-items: center; gap: 13px; min-height: 52px; margin-bottom: 12px; padding-right: 4px; border-radius: 8px; overflow-wrap: anywhere; font-size: 21px; line-height: 1.35; letter-spacing: -.025em; } .home-category-title>.category-provider-label { flex: 1; } .home-category-title:hover { color: var(--brand); } .home-category-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--brand); } .home-category-icon>.icon { width: 25px; height: 25px; } .home-category-links { list-style: none; padding: 0; margin: 0 0 0 57px; } .home-category-links>li+li { border-top: 1px solid var(--line); } .home-category-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 4px; border-radius: 4px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .home-category-link-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .category-provider-count { display: inline-block; flex-shrink: 0; min-width: 1.8em; padding: 2px 7px; border-radius: 6px; background: var(--subtle); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-align: center; vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; } .category-provider-label { min-width: 0; } .category-provider-label>.category-provider-count { margin-left: 4px; } .category-tree-label { flex: 1; min-width: 0; } .home-category-links a:hover { color: var(--brand); background: var(--subtle); } .home-category-context { font-size: 11px; line-height: 1.4; color: var(--muted); } .home-category-more { margin-top: 6px; } .home-category-more>summary { display: flex; align-items: center; gap: 7px; width: fit-content; min-height: 44px; margin-left: 57px; padding: 8px 4px; border-radius: 4px; color: var(--green); font-size: 13px; font-weight: 600; line-height: 1.5; list-style: none; } .home-category-more>summary::-webkit-details-marker { display: none; } .home-category-more>summary:hover { color: var(--brand); } .home-category-more>summary>.icon { width: 16px; height: 16px; } .home-category-show-less,.home-category-more[open]>summary>.home-category-show-more { display: none; } .home-category-more[open]>summary>.home-category-show-less { display: inline; } .home-category-more[open]>summary>.icon { transform: rotate(180deg); } .home-category-more[open]>.home-category-links { max-height: 360px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: 4px 8px 4px 12px; border-left: 2px solid var(--coral-line); } .home-category-title:focus-visible,.home-category-links a:focus-visible,.home-category-more>summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } @media (max-width:1000px) { .home-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; } } @media (max-width:600px) { .home-categories { padding-block: 36px; } .home-categories-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 22px; } .home-categories-heading p { font-size: 14px; } .home-categories-heading>.arrow-link { font-size: 13px; margin-top: 0; } .home-category-grid { grid-template-columns: 1fr; gap: 28px; } .home-category-title { font-size: 20px; gap: 12px; margin-bottom: 8px; } .home-category-links { margin-left: 56px; } .home-category-more>summary { margin-left: 56px; } } } @layer ui { .categories-directory,.home-category-grid { display: block; column-count: 3; column-fill: balance; } .categories-directory { column-gap: 20px; --category-row-gap: 20px; } .home-category-grid { column-gap: 34px; --category-row-gap: 38px; } .categories-directory>.category-directory-card,.home-category-grid>.home-category-group { display: inline-block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; break-inside: avoid; vertical-align: top; } .categories-directory>.category-directory-card { margin: 0 0 20px; } .home-category-grid>.home-category-group { margin: 0 0 38px; } .categories-directory.category-packed,.home-category-grid.category-packed { display: grid; column-count: auto; grid-template-columns: repeat(3,minmax(0,1fr)); --category-row-unit: 4px; grid-auto-rows: var(--category-row-unit); row-gap: 0; align-items: start; } .categories-directory.category-packed>.category-directory-card,.home-category-grid.category-packed>.home-category-group { display: block; margin: 0; align-self: start; } @media (max-width:1000px) { .categories-directory,.home-category-grid { column-count: 2; } .categories-directory.category-packed,.home-category-grid.category-packed { grid-template-columns: repeat(2,minmax(0,1fr)); } .home-category-grid { column-gap: 32px; --category-row-gap: 32px; } .home-category-grid>.home-category-group { margin-bottom: 32px; } } @media (max-width:600px) { .categories-directory,.home-category-grid { column-count: 1; } .categories-directory.category-packed,.home-category-grid.category-packed { display: block; column-count: 1; } .home-category-grid { --category-row-gap: 28px; } .categories-directory>.category-directory-card,.home-category-grid>.home-category-group { display: block; } .home-category-grid>.home-category-group { margin-bottom: 28px; } .categories-directory.category-packed>.category-directory-card,.home-category-grid.category-packed>.home-category-group { margin-bottom: var(--category-row-gap); } .categories-directory>.category-directory-card:last-child,.home-category-grid>.home-category-group:last-child { margin-bottom: 0; } } @media print { .categories-directory,.home-category-grid,.categories-directory.category-packed,.home-category-grid.category-packed { display: block; column-count: 1; } .categories-directory>.category-directory-card,.home-category-grid>.home-category-group { display: block; break-inside: auto; grid-row: auto !important; } } } @layer ui { .cookie-banner { position: fixed; left: 50%; bottom: max(20px,env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(820px,calc(100% - 40px)); max-height: calc(100dvh - 40px - env(safe-area-inset-bottom)); display: block; overflow-y: auto; overscroll-behavior: contain; z-index: 100; padding: 24px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px #18282f12,0 24px 72px #18282f24; } .cookie-banner .cookie-heading { display: grid; grid-template-columns: 40px minmax(0,1fr); column-gap: 14px; row-gap: 8px; align-items: center; } .cookie-banner .cookie-symbol { display: grid; place-items: center; width: 40px; height: 40px; background: var(--sage-soft); color: var(--sage-ink); border-radius: 12px; } .cookie-banner .cookie-symbol>.icon { width: 23px; height: 23px; } .cookie-banner h2 { margin: 0; font-size: 20px; line-height: 1.35; letter-spacing: -.4px; font-weight: 700; } .cookie-banner .cookie-description { grid-column: 2; margin: 0; max-width: none; font-size: 13px; line-height: 1.65; color: var(--muted); } .cookie-banner .cookie-description a { display: inline; color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .cookie-banner .cookie-options { min-width: 0; border: 0; padding: 0; margin: 18px 0; } .cookie-banner .cookie-options legend { padding: 0; margin: 0 0 8px; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--muted); } .cookie-banner .cookie-options-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .cookie-banner .cookie-option { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 66px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); cursor: pointer; color: var(--ink); transition: border-color .15s,background .15s; } .cookie-banner .cookie-option:hover { border-color: var(--green); } .cookie-banner .cookie-option:has(input:checked) { background: var(--sage-soft); border-color: var(--sage-line); } .cookie-banner .cookie-option:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; } .cookie-banner .cookie-option input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--green); cursor: pointer; } .cookie-banner .cookie-option>span { min-width: 0; } .cookie-banner .cookie-option strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ink); } .cookie-banner .cookie-option small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--muted); } .cookie-banner .cookie-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; } .cookie-banner .cookie-essential { display: flex; align-items: center; gap: 7px; max-width: 220px; margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); } .cookie-banner .cookie-essential>.icon { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; } .cookie-banner .cookie-actions { display: flex; flex-direction: row; flex-shrink: 0; gap: 8px; margin: 0; } .cookie-banner .cookie-actions .button { flex: initial; min-height: 44px; padding: 10px 16px; font-size: 13px; line-height: 1.4; border-radius: 8px; white-space: normal; } .cookie-banner .cookie-actions .button:hover { transform: none; } [data-theme=dark] .cookie-banner { box-shadow: 0 8px 24px #0003,0 24px 72px #0005; } @media (max-width:600px) { .cookie-banner { bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); padding: 18px; border-radius: 14px; } .cookie-banner .cookie-heading { grid-template-columns: 36px minmax(0,1fr); gap: 10px 12px; } .cookie-banner .cookie-symbol { width: 36px; height: 36px; border-radius: 10px; } .cookie-banner h2 { font-size: 18px; letter-spacing: -.3px; } .cookie-banner .cookie-description { grid-column: 1/-1; font-size: 13px; } .cookie-banner .cookie-options { margin: 16px 0; } .cookie-banner .cookie-options-grid { grid-template-columns: minmax(0,1fr); gap: 8px; } .cookie-banner .cookie-option { min-height: 60px; padding: 10px 12px; } .cookie-banner .cookie-footer { align-items: stretch; flex-direction: column; gap: 12px; padding-top: 14px; } .cookie-banner .cookie-essential { max-width: none; } .cookie-banner .cookie-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .cookie-banner .cookie-actions .button { min-width: 0; padding: 10px 12px; } } @media (max-width:360px) { .cookie-banner { padding: 16px; } .cookie-banner .cookie-actions { grid-template-columns: minmax(0,1fr); } } @media (prefers-reduced-motion:reduce) { .cookie-banner .cookie-option { transition: none; } } @media print { .cookie-banner { display: none !important; } } } @layer ui { .request-offers-empty { margin-block: 20px; } .request-viewers-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .request-viewers-heading h2 { margin: 0; } .request-viewers-help { margin: 12px 0 20px; font-size: .875rem; line-height: 1.6; } .request-viewers-empty { margin-bottom: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); } .request-viewers-list { list-style: none; padding: 0; margin: 0; } .request-viewers-list > li { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); } .request-viewer-person { min-width: 0; } .request-viewer-person a { display: grid; gap: 5px; overflow-wrap: anywhere; } .request-viewer-person a span { color: var(--muted); font-size: .875rem; } .request-viewer-dates { display: grid; flex-shrink: 0; gap: 8px; margin: 0; font-size: .75rem; } .request-viewer-dates div { display: grid; gap: 3px; } .request-viewer-dates dt { color: var(--muted); } .request-viewer-dates dd { margin: 0; font-variant-numeric: tabular-nums; } .request-viewers-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); } @media (max-width: 600px) { .request-viewers-list > li { display: grid; gap: 12px; } .request-viewer-dates { display: flex; flex-wrap: wrap; gap: 12px 24px; } } } @layer ui { .request-detail,.request-detail-main,.request-detail-sidebar { display: grid; align-content: start; gap: 24px; min-width: 0; } .request-detail>.alert,.request-detail>p,.request-detail-main>*,.request-detail-sidebar>* { margin-block: 0; } .request-detail>.alert { flex-wrap: wrap; gap: 8px 18px; } .request-detail>.alert>p { flex: 1 1 460px; } .request-detail-facts>p { margin: 0; } .request-detail-sidebar { overflow-wrap: anywhere; } .request-contact-card.panel { padding: 24px; border-radius: 14px; } .request-contact-card--locked { border-color: var(--sage-line); background: linear-gradient(160deg,var(--success-bg),var(--surface) 55%); } .request-contact-heading { display: flex; align-items: center; gap: 12px; } .request-contact-symbol { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--sage-line); border-radius: 12px; background: var(--surface); color: var(--green); } .request-contact-symbol .icon { width: 22px; height: 22px; } .request-contact-heading h2 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -.025em; } .request-contact-card .request-contact-description { margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); } .request-contact-requirement { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--ink); } .request-contact-requirement .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--green); } .request-contact-actions { display: grid; gap: 12px; margin-top: 20px; } .request-contact-actions>.button { width: 100%; padding: 10px 12px; min-height: 42px; font-size: 13px; } .request-contact-secondary { justify-self: center; max-width: 100%; padding: 4px 0; color: var(--green); font-size: 13px; font-weight: 600; text-align: center; text-decoration: underline; text-underline-offset: 4px; } .request-contact-secondary:hover { color: var(--ink); } .request-contact-card .request-contact-note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--muted); } .request-contact-details { display: grid; gap: 16px; margin: 20px 0 0; } .request-contact-details>div+div { padding-top: 16px; border-top: 1px solid var(--line); } .request-contact-details dt { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 12px; color: var(--muted); } .request-contact-details dt .icon { width: 15px; height: 15px; } .request-contact-details dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } .request-contact-details a { color: var(--green); text-decoration: underline; text-underline-offset: 4px; } .request-contact-management { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .request-contact-management .button { width: 100%; } .request-contact-management>p { margin: 0 0 12px; } .request-lifecycle { border-left: 4px solid var(--green); } .request-lifecycle>p { margin: 8px 0 0; line-height: 1.6; } .request-owner-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; } .request-owner-row+.request-owner-row { border-top: 1px solid var(--line); } .request-owner-summary { min-width: 0; overflow-wrap: anywhere; } .request-owner-summary h3 { margin: 0; font-size: 18px; line-height: 1.5; } .request-owner-summary h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } .request-owner-summary p { margin: 8px 0 0; } .request-owner-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; } .request-owner-actions { display: grid; justify-items: end; flex-shrink: 0; gap: 14px; } .request-owner-actions form { margin: 0; } .request-owner-actions .button { white-space: normal; } @media (max-width:1100px) { .request-contact-card.panel { padding: 20px; } .request-contact-heading { gap: 10px; } .request-contact-heading h2 { font-size: 20px; } } @media (max-width:600px) { .request-detail,.request-detail-main,.request-detail-sidebar,.request-detail .request-detail-layout { gap: 20px; } .request-owner-row { align-items: stretch; flex-direction: column; gap: 18px; } .request-owner-actions { justify-items: stretch; } .request-owner-actions .button { width: 100%; } } } @layer ui { [data-catalog-category-picker] select.location-native-select { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); } .catalog-order-help { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 14px 16px; border: 1px solid var(--sage-line); border-radius: 10px; background: var(--sage-soft); color: var(--sage-ink); font-size: 13px; line-height: 1.6; } .catalog-order-help>.icon { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; } .catalog-order-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 20px 0; min-width: 0; } .catalog-order-row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .catalog-order-row.is-dragging { border: 2px solid var(--green); padding: 13px 15px; background: var(--sage-soft); box-shadow: 0 3px 14px #20352d12; } .catalog-order-handle { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--subtle); color: var(--muted); font-size: 28px; line-height: 1; cursor: grab; touch-action: none; user-select: none; } .catalog-order-handle:active,.is-dragging .catalog-order-handle { cursor: grabbing; color: var(--green); } .catalog-order-handle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .catalog-order-name { flex: 1; min-width: 0; } .catalog-order-name>a { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.45; } .catalog-order-name>a:hover { color: var(--green); text-decoration: underline; } .catalog-order-name>small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; } .catalog-order-row-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; flex-shrink: 0; } .catalog-order-row-actions .text-link,.catalog-order-first { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; font-size: 12px; font-weight: 500; } .catalog-order-first { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); } .catalog-order-first:hover:not(:disabled) { color: var(--green); border-color: var(--green); } .catalog-order-first:disabled { opacity: .45; cursor: default; } .catalog-order-row-actions .icon { width: 16px; height: 16px; } .catalog-order-actions { position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 5px 22px #20352d12; z-index: 2; } .catalog-order-status { margin: 12px 0 0; color: var(--muted); font-size: 13px; } .catalog-order-status:empty { display: none; } .catalog-order-error { margin-top: 14px; } .catalog-order-drag-preview { position: fixed; z-index: 10000; pointer-events: none; max-width: min(440px,calc(100vw - 32px)); padding: 14px 18px; border: 1px solid var(--green); border-radius: 10px; box-shadow: 0 12px 32px #20352d30; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } [data-order-state=saving] .catalog-order-row { opacity: .7; } @media (max-width:650px) { .catalog-order-row { flex-wrap: wrap; gap: 10px; padding: 12px; } .catalog-order-row.is-dragging { padding: 11px; } .catalog-order-row-actions { width: 100%; padding-left: 54px; justify-content: space-between; flex-shrink: 1; } .catalog-order-actions { bottom: 8px; padding: 10px; } .catalog-order-actions>.button { flex: 1 1 auto; font-size: 13px; } } } @layer ui { .review-author-link { text-decoration: none; text-underline-offset: 3px; } .review-author-link:hover { color: var(--green); text-decoration: underline; } a.review-avatar:hover,a.public-review-avatar:hover { box-shadow: 0 0 0 2px var(--green); } .member-profile { display: grid; gap: 36px; } .member-profile-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; margin: 0; background: linear-gradient(110deg,var(--sage-soft),var(--surface) 65%); } .member-profile-identity { display: flex; align-items: center; gap: 20px; flex: 1 1 300px; min-width: 0; } .member-profile-identity>div { min-width: 0; } .member-profile-avatar { display: grid; place-items: center; flex-shrink: 0; width: 76px; height: 76px; border: 1px solid var(--sage-line); border-radius: 22px; background: var(--surface); color: var(--green); font-weight: 700; font-size: 25px; } .member-profile-identity h1 { font-size: 36px; line-height: 1.2; overflow-wrap: anywhere; } .member-profile-joined { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; } .member-profile-joined .icon { width: 17px; height: 17px; } .member-profile-summary { display: flex; flex-wrap: wrap; gap: 12px; max-width: 100%; } .member-profile-stat { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; min-height: 86px; padding: 16px 18px; border: 1px solid var(--sage-line); border-radius: 16px; background: var(--surface); color: var(--ink); transition: background-color .15s,border-color .15s,box-shadow .15s; } .member-profile-stat:hover { border-color: var(--green); background: var(--sage-soft); box-shadow: var(--shadow); } .member-profile-stat:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } .member-profile-stat-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: var(--sage-soft); color: var(--green); } .member-profile-stat-icon>.icon { width: 22px; height: 22px; } .member-profile-stat-content { display: grid; gap: 4px; min-width: 0; } .member-profile-stat-content strong { font-size: 27px; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; } .member-profile-stat-content>span { font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--muted); } .member-profile-stat-arrow { display: grid; place-items: center; flex-shrink: 0; margin-left: auto; padding-left: 8px; color: var(--green); } .member-profile-stat-arrow>.icon { width: 17px; height: 17px; } .member-profile-section { scroll-margin-top: 24px; min-width: 0; } .member-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .member-section-heading h2 { font-size: 25px; margin: 0; } .member-section-heading p { font-size: 14px; margin-top: 8px; } .member-section-heading .public-reviews-sort { flex-shrink: 0; } .member-service-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .member-service-card { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); } .member-service-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--sage-soft); color: var(--green); } .member-service-content { min-width: 0; flex: 1; } .member-service-category { font-size: 12px; color: var(--green); margin: 0 0 6px; } .member-service-card h3 { font-size: 18px; line-height: 1.45; overflow-wrap: anywhere; } .member-service-card h3 a:hover { color: var(--green); } .member-service-description { font-size: 13px; margin-top: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; } .member-service-city { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 12px; } .member-service-city .icon { width: 15px; height: 15px; } .member-service-open { display: grid; place-items: center; align-self: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--green); } .member-service-open:hover { background: var(--sage-soft); } .member-all-reviews { justify-self: start; font-size: 14px; } .member-profile .pagination { flex-wrap: wrap; } @media (max-width:900px) { .member-profile-header { align-items: flex-start; flex-direction: column; gap: 24px; } .member-profile-identity { flex: auto; width: 100%; } .member-profile-summary { width: 100%; } .member-section-heading { align-items: flex-start; flex-direction: column; gap: 16px; } } @media (max-width:650px) { .member-profile { gap: 28px; } .member-profile-header { padding: 22px; } .member-profile-identity { gap: 14px; } .member-profile-avatar { width: 54px; height: 54px; border-radius: 16px; font-size: 19px; } .member-profile-identity h1 { font-size: 26px; } .member-profile-joined { font-size: 12px; margin-top: 8px; } .member-profile-summary { flex-direction: column; gap: 10px; } .member-profile-stat { flex: auto; min-height: 78px; padding: 14px; gap: 12px; } .member-profile-stat-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; } .member-profile-stat-content strong { font-size: 24px; } .member-profile-stat-arrow { padding-left: 0; } .member-service-list { grid-template-columns: minmax(0,1fr); } .member-service-card { padding: 20px; gap: 12px; } .member-service-icon { width: 36px; height: 36px; } .member-service-open { width: 32px; height: 32px; } .member-section-heading h2 { font-size: 23px; } .member-profile .pagination { gap: 5px; } } } @layer components { .client-requisites { display: contents; } .client-requisites-notice,.client-requisites-lookup { grid-column: 1/-1; min-width: 0; } .client-requisites-notice { margin: 0; } .client-requisites-notice .icon { flex: none; width: 18px; height: 18px; } .client-requisites-fieldset { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 12px; } .client-requisites-fieldset legend { padding: 0 6px; font-size: 14px; font-weight: 650; color: var(--ink); } .client-requisites-fieldset>p { margin: 0; } .client-requisites-fieldset .field { margin: 0; } .client-requisites [aria-invalid=true] { border-color: #b22f2f; } form:has([data-lt-notice]) :is(button,input)[aria-disabled=true] { opacity: .55; cursor: not-allowed; } form:has([data-lt-notice]) .button[aria-disabled=true]:hover { transform: none; } .lt-check-tool-row.is-ok { color: var(--success-ink,#3e594d); } .lt-check-tool-row.is-fail { color: var(--danger-ink,#953e3b); } .lt-check-tool { display: grid; gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); } .lt-check-tool h3 { font-size: 17px; } .lt-check-tool>p { margin: 0; } .lt-check-tool-inputs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .lt-check-tool-inputs .field { margin: 0; } .lt-check-tool-actions,.lt-check-tool-registry { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .lt-check-tool-registry p { margin: 0; } .lt-check-tool-results { display: grid; gap: 6px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; } .lt-check-tool-results:empty { display: none; } .lt-check-tool-row { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--subtle); } .lt-check-tool-row.is-mismatch { border-color: var(--danger-line,#e8cfcd); background: var(--danger-bg,#f8efee); font-weight: 600; } .lt-check-tool-total { padding: 10px 12px; border-radius: 8px; font-weight: 650; } .lt-check-tool-total.is-ok { background: var(--success-bg,#edf3ef); color: var(--success-ink,#3e594d); } .lt-check-tool-total.is-fail { background: var(--danger-bg,#f8efee); color: var(--danger-ink,#953e3b); } @media (max-width:760px) { .lt-check-tool-inputs { grid-template-columns: minmax(0,1fr); } .client-requisites-fieldset { padding: 14px; } } } @layer components { .auth-layout.auth-registration { grid-template-columns: minmax(0,1fr); max-width: 720px; } .auth-registration .auth-panel { min-width: 0; } .auth-registration .client-requisites-fieldset { grid-template-columns: repeat(2,minmax(0,1fr)); } .auth-registration .client-requisites-fieldset>p { grid-column: 1/-1; } .auth-registration .client-requisites .field { min-width: 0; } .auth-registration .client-requisites .field:has([name="address"]) { grid-column: 1/-1; } @media (max-width:600px) { .auth-registration .client-requisites-fieldset { grid-template-columns: minmax(0,1fr); } } } @layer base { :root { --bg: #fff; --surface: #fff; --subtle: #f7f7f5; --ink: #242a2c; --muted: #777e7c; --line: #e7e8e4; --brand: #e64b3c; --brand-hover: #d73d30; --cream: #faf5ed; --green: #526d5c; --shadow: 0 12px 36px #27362d0c; color-scheme: light; } [data-theme=dark] { --bg: #151c1a; --surface: #1c2421; --subtle: #232d28; --ink: #f1f4ef; --muted: #a5b0a8; --line: #36413a; --cream: #28271f; --green: #a1b59f; color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Segoe UI",Arial,sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button,input,select,textarea { font: inherit; } button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } button:disabled { cursor: wait; opacity: .6; } img { max-width: 100%; height: auto; display: block; } h1,h2,h3,p { margin: 0; } h1,h2,h3 { line-height: 1.22; letter-spacing: -.035em; } h1 { font-weight: 720; } h2 { font-size: 28px; font-weight: 700; } h3 { font-size: 18px; font-weight: 650; } p { color: var(--muted); } ul { padding-left: 20px; } hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; } :focus-visible { outline: 3px solid #e64b3c88; outline-offset: 4px; } input,select,textarea { max-width: 100%; } input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea { width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; padding: 12px 14px; min-height: 46px; transition: border-color .15s; } input:focus,select:focus,textarea:focus { border-color: var(--brand); outline: 2px solid #e64b3c12; } textarea { resize: vertical; } input[type=checkbox],input[type=radio] { accent-color: var(--brand); width: 17px; height: 17px; vertical-align: middle; } label { display: block; font-weight: 550; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; background: var(--subtle); font-weight: 600; white-space: nowrap; } td,th { padding: 14px 17px; border-bottom: 1px solid var(--line); } td { vertical-align: top; } td a { color: var(--brand); } summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } [hidden] { display: none !important; } } @layer components { .container { width: min(1220px,calc(100% - 64px)); margin-inline: auto; } .icon { width: 21px; height: 21px; flex-shrink: 0; display: inline-block; vertical-align: middle; } .brand { display: inline-flex; gap: 11px; align-items: center; font-size: 23px; font-weight: 740; letter-spacing: -1px; white-space: nowrap; } .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--brand); border-radius: 12px; color: white; transform: rotate(-4deg); } .brand-mark .icon { width: 25px; height: 25px; transform: rotate(4deg); } .brand-dot { color: var(--brand); } .site-header { height: 88px; border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 20; } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .desktop-nav,.header-actions { display: flex; gap: 28px; align-items: center; } .desktop-nav a { font-size: 14px; font-weight: 550; color: #636967; transition: color .15s; } .desktop-nav a:hover,.desktop-nav a.active { color: var(--brand); } .header-actions { gap: 18px; } .login-link { font-size: 14px; font-weight: 600; } .icon-button { display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 50%; width: 36px; height: 36px; color: var(--muted); } .icon-button:hover { background: var(--subtle); color: var(--ink); } .button { border: 1px solid transparent; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 650; padding: 13px 23px; min-height: 47px; border-radius: 9px; line-height: 1.3; transition: background .18s,transform .18s; white-space: normal; } .button:hover { background: var(--brand-hover); transform: translateY(-1px); } .button .icon { width: 18px; height: 18px; } .button-small { font-size: 13px; padding: 11px 16px; min-height: 41px; } .button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); } .button-secondary:hover { background: var(--subtle); border-color: #cdd2ca; } .button-dark { background: #2d3c34; } .button-dark:hover { background: #1d2b22; } .button-danger { background: #be3434; } .button-row,.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .text-button { border: 0; background: none; padding: 0; color: inherit; text-align: left; font-size: inherit; } .text-button:hover { color: var(--brand); } .arrow-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } .arrow-link:hover { color: var(--brand); } .arrow-link .icon { width: 18px; } .mobile-menu-button { display: none; } .mobile-nav { background: var(--surface); border-bottom: 1px solid var(--line); padding: 20px 30px; position: absolute; top: 87px; left: 0; right: 0; box-shadow: var(--shadow); } .mobile-nav a { display: block; padding: 10px; } .hero-section { background: var(--cream); overflow: hidden; border-bottom: 1px solid #eadfcd66; } .hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; align-items: center; min-height: 526px; padding-block: 44px; } .hero-copy { position: relative; z-index: 2; padding-bottom: 4px; } .hero-copy h1 { font-size: 57px; line-height: 1.1; letter-spacing: -2.7px; max-width: 640px; } .hero-copy h1 span { color: var(--brand); } .hero-description { font-size: 16px; max-width: 470px; margin-top: 22px; line-height: 1.75; color: #767970; } .hero-search { display: flex; align-items: center; background: var(--surface); padding: 7px; border: 1px solid #e6ddcf; border-radius: 12px; box-shadow: 0 5px 15px #392f2010; margin-top: 31px; width: calc(100% + 65px); position: relative; z-index: 4; } .search-service { position: relative; flex: 1; display: flex; align-items: center; padding-left: 12px; min-width: 0; gap: 5px; color: var(--muted); } .hero-search input,.hero-search select { border: 0 !important; background: transparent !important; min-height: 44px !important; padding: 8px !important; font-size: 13px; outline: 0 !important; } .search-location { display: flex; align-items: center; border-left: 1px solid var(--line); width: 170px; padding-left: 16px; gap: 2px; color: var(--muted); } .hero-search .button { flex-shrink: 0; padding-inline: 18px; } .hero-proof { display: flex; gap: 23px; margin-top: 30px; font-size: 12px; color: #787d73; } .hero-proof span { display: flex; align-items: center; gap: 7px; } .hero-proof .icon { color: #84917c; width: 16px; height: 16px; } .hero-art { position: relative; margin-left: 28px; } .hero-art>img { width: 100%; min-width: 350px; } .art-note { position: absolute; display: flex; align-items: center; gap: 11px; padding: 13px 17px; background: var(--surface); box-shadow: 0 8px 20px #45342112; border: 1px solid #fff8; border-radius: 11px; transform: rotate(-4deg); } .art-note strong { font-size: 12px; font-weight: 650; display: block; } .art-note small { font-size: 10px; color: var(--muted); display: block; } .note-icon { width: 35px; height: 35px; display: grid; place-items: center; background: #fff0df; color: #ce9250; border-radius: 9px; } .note-icon.green { background: #e7efe4; color: #6e8762; } .art-note-top { top: 19px; right: 24px; } .art-note-bottom { bottom: 33px; left: 10px; transform: rotate(4deg); } .categories-section { padding-block: 48px; } .section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; gap: 20px; } .section-heading h2 { font-size: 27px; } .heading-inline { display: flex; gap: 12px; align-items: center; } .count-pill { background: var(--subtle); border: 1px solid var(--line); padding: 1px 10px; border-radius: 20px; color: var(--muted); font-size: 11px; font-weight: 650; } .category-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .category-card { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 21px 20px 20px; transition: box-shadow .18s,border-color .18s,transform .18s; background: var(--surface); } .category-card:hover { border-color: #d5c6b4; box-shadow: var(--shadow); transform: translateY(-3px); } .category-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 11px; background: #f6eee4; color: #a47c4f; margin-bottom: 15px; flex-shrink: 0; } .category-color-1 .category-icon { background: #eaf0e6; color: #6d8560; } .category-color-2 .category-icon { background: #e9edf6; color: #7380a7; } .category-color-3 .category-icon { background: #f8eae7; color: #c48474; } .category-color-4 .category-icon { background: #f1eaf4; color: #a180af; } .category-color-5 .category-icon { background: #e6efed; color: #6f968e; } .category-card h3 { font-size: 14px; letter-spacing: -.25px; padding-right: 12px; margin-bottom: 7px; } .category-card p { font-size: 11px; line-height: 1.6; max-width: calc(100% - 8px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #949790; } .category-arrow { position: absolute; right: 16px; top: 26px; color: #a9aea7; } .category-arrow .icon { width: 16px; height: 16px; } .request-banner { display: flex; align-items: center; gap: 24px; padding: 35px 39px; background: #eef2eb; border: 1px solid #e2e8dc; border-radius: 14px; } .request-banner h2 { font-size: 23px; color: #364435; } .request-banner p { font-size: 13px; margin-top: 10px; color: #819078; } .request-banner .button { margin-left: auto; flex-shrink: 0; } .banner-symbol { width: 70px; height: 70px; background: #e1e9d9; color: #718667; border-radius: 50%; display: grid; place-items: center; position: relative; flex-shrink: 0; } .banner-symbol>.icon { width: 31px; height: 31px; } .banner-symbol>span { position: absolute; right: -4px; top: -5px; display: grid; place-items: center; width: 26px; height: 26px; background: #fafcf8; color: #ae9b55; border-radius: 50%; } .banner-symbol>span .icon { width: 15px; height: 15px; } .how-section { padding-block: 63px; } .steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; } .step { padding: 8px 22px 0 0; } .step-top { display: flex; align-items: center; justify-content: space-between; max-width: 90%; margin-bottom: 20px; } .step-icon { width: 49px; height: 49px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; display: grid; place-items: center; color: var(--green); margin-bottom: 19px; } .step-top .step-icon { margin: 0; } .step-number { font-size: 37px; font-weight: 750; color: var(--line); letter-spacing: -2px; } .step h3 { font-size: 16px; margin-bottom: 10px; } .step p { font-size: 13px; line-height: 1.8; max-width: 330px; } .provider-strip { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .provider-strip-inner { padding-block: 38px; display: flex; justify-content: space-between; align-items: center; gap: 30px; } .provider-strip h2 { font-size: 26px; } .provider-strip p { font-size: 13px; margin-top: 10px; } .provider-strip .button { flex-shrink: 0; } .site-footer { background: var(--surface); padding-top: 50px; } .footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 55px; padding-bottom: 44px; } .footer-brand .brand { font-size: 20px; } .footer-brand .brand-mark { width: 32px; height: 32px; border-radius: 10px; } .footer-brand .brand-mark .icon { width: 21px; } .footer-brand p { font-size: 12px; margin-top: 16px; max-width: 240px; line-height: 1.8; } .footer-local { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); margin-top: 16px; } .footer-local .icon { width: 14px; height: 14px; } .footer-top h3 { font-size: 12px; letter-spacing: 0; margin: 7px 0 16px; } .footer-top>div>a:not(.brand) { font-size: 12px; color: var(--muted); display: block; margin-top: 9px; } .footer-top a:hover { color: var(--brand); } .footer-bottom { display: flex; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); padding-block: 19px; font-size: 11px; color: var(--muted); } .footer-bottom>div { display: flex; gap: 23px; flex-wrap: wrap; } .page-main { min-height: 60vh; padding-bottom: 64px; } .breadcrumbs { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; padding-block: 24px; } .breadcrumbs .icon { width: 12px; height: 12px; } .breadcrumbs a:hover { color: var(--brand); } .page-heading { margin: 12px 0 32px; } .page-heading h1 { font-size: 38px; margin-bottom: 12px; } .page-heading p { max-width: 700px; font-size: 15px; } .panel { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; } .panel h2 { font-size: 22px; margin-bottom: 17px; } .panel h3 { margin-block: 18px 10px; } .panel p+p { margin-top: 15px; } .panel p+.button,.panel p+.button-row { margin-top: 22px; } .form-stack>*+* { margin-top: 20px; } .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .field { font-size: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 7px; } .field small,.field .help { font-weight: 400; color: var(--muted); font-size: 11px; } .field input,.field select,.field textarea { font-weight: 400; } .checkbox { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; font-weight: 400; } .checkbox input { flex-shrink: 0; margin-top: 4px; } .form-stack>button { margin-top: 24px; } .muted { color: var(--muted); } .small,small { font-size: 12px; } .text-center { text-align: center; } .text-center p { margin-inline: auto; justify-content: center; } .narrow { max-width: 800px; margin-inline: auto; } .auth-card { max-width: 480px; margin: 25px auto; } .auth-card form { display: grid; gap: 18px; } .auth-card h1 { font-size: 30px; margin-bottom: 12px; } .auth-card p { margin-bottom: 24px; } .alert { display: flex; align-items: flex-start; gap: 12px; background: #edf6e9; color: #48623b; border: 1px solid #d9e7d2; border-radius: 9px; padding: 14px 18px; font-size: 13px; } .alert-error,.alert-danger { background: #fff0eb; border-color: #f1d2c7; color: #a13e29; } .alert-warning { background: #fff6df; border-color: #eedeba; color: #876528; } .flash-stack { padding-top: 18px; } .flash-stack .alert { margin-bottom: 10px; } .page-main>.flash-stack { width: 100%; } .empty-state { text-align: center; padding: 65px 25px; border: 1px dashed var(--line); border-radius: 14px; background: var(--subtle); } .empty-state h1,.empty-state h2 { font-size: 25px; margin-bottom: 13px; } .empty-state p { max-width: 500px; margin: 0 auto 23px; font-size: 14px; } .empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 23px; border: 1px solid var(--line); background: var(--surface); border-radius: 20px; color: var(--green); } .empty-icon .icon { width: 27px; height: 27px; } .badge { display: inline-block; font-size: 11px; font-weight: 650; border-radius: 20px; background: #eef2e9; color: #6d835d; padding: 3px 10px; white-space: nowrap; } .badge-warning,.badge-pending { background: #fff2dd; color: #9c7731; } .badge-danger,.badge-rejected { background: #ffede9; color: #b95d46; } .badge-draft,.badge-archived { background: var(--subtle); color: var(--muted); } .table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; } .table-wrap .button { min-height: 33px; font-size: 12px; padding: 7px 11px; } .table-wrap td form { display: inline-block; margin: 3px; } .tabs,.account-nav,.admin-nav { display: flex; gap: 5px; border-bottom: 1px solid var(--line); margin-bottom: 25px; overflow-x: auto; padding-bottom: 10px; } .tabs a,.account-nav a,.admin-nav a { font-size: 13px; padding: 9px 14px; border-radius: 7px; white-space: nowrap; } .tabs a:hover,.tabs a.active,.account-nav a.active,.admin-nav a.active { background: var(--subtle); color: var(--brand); } .account-menu { position: relative; } .account-avatar { border-radius: 50%; background: var(--cream); border: 1px solid var(--line); width: 36px; height: 36px; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--green); } .account-dropdown { position: absolute; right: 0; top: 48px; width: 230px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 35; } .account-dropdown strong { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .account-dropdown a,.account-dropdown button { display: block; font-size: 13px; padding: 7px 0; } .account-dropdown a:hover { color: var(--brand); } .cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(1000px,calc(100% - 40px)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 60px #14231922; padding: 22px 25px; display: flex; gap: 35px; align-items: center; z-index: 80; } .cookie-banner strong { font-size: 14px; } .cookie-banner p { font-size: 12px; margin-top: 4px; max-width: 620px; } .cookie-banner p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .cookie-banner .checkbox { font-size: 11px; margin-top: 9px; gap: 7px; } .cookie-banner .checkbox input { height: 14px; width: 14px; margin-top: 2px; } .cookie-actions { display: flex; gap: 8px; flex-shrink: 0; flex-direction: column; } .cookie-actions .button { font-size: 11px; padding: 10px 14px; min-height: 36px; } dialog { border: 1px solid var(--line); border-radius: 16px; padding: 32px; background: var(--surface); color: var(--ink); max-width: min(450px,calc(100% - 32px)); box-shadow: 0 20px 90px #0003; } dialog::backdrop { background: #10201788; backdrop-filter: blur(3px); } dialog h2 { font-size: 24px; margin-bottom: 14px; } dialog p { font-size: 14px; margin-bottom: 24px; } .dialog-icon { color: #a65043; background: #fff0eb; width: 45px; height: 45px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 22px; } .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #26392d; color: white; border-radius: 9px; padding: 12px 25px; box-shadow: var(--shadow); z-index: 100; font-size: 13px; } .skip-link { position: absolute; top: -80px; left: 20px; z-index: 100; background: var(--brand); color: white; padding: 10px 20px; } .skip-link:focus { top: 10px; } .honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .setup-page { width: min(650px,calc(100% - 40px)); margin: 80px auto; } .setup-page>.brand { margin-bottom: 35px; } .categories-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; } .categories-directory .heading-inline { align-items: center; } .categories-directory .category-icon { margin: 0; width: 38px; height: 38px; } .categories-directory h2 { font-size: 17px; margin: 0; } .category-children { list-style: none; padding: 0; margin: 20px 0 0; } .category-children a { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding: 8px 0; border-top: 1px solid var(--line); } .category-children .icon { width: 15px; } .category-children a:hover { color: var(--brand); } .split-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 30px; } .split-panels p { font-size: 14px; } .section-space { margin-block: 40px; } .contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 50px; } .contact-aside { padding: 20px 10px; } .contact-aside h2 { font-size: 24px; margin-bottom: 12px; } .contact-aside p { font-size: 14px; } .contact-aside>a { display: inline-flex; margin-top: 18px; color: var(--green); font-weight: 600; } .contact-aside h3 { margin-bottom: 12px; } .pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; padding-top: 12px; } .pricing-card { padding: 30px; position: relative; } .pricing-card h2 { margin: 15px 0 20px; font-size: 21px; } .pricing-card.recommended { border: 2px solid var(--green); } .pricing-card>.badge { position: absolute; top: -14px; left: 25px; background: var(--green); color: var(--bg); } .price { font-size: 42px; font-weight: 720; letter-spacing: -1.7px; line-height: 1.3; margin-bottom: 6px; } .pricing-card .muted { font-size: 12px; } .discount { font-size: 11px; color: var(--green); display: block; margin-top: 5px; } .feature-list { list-style: none; padding: 0; margin-block: 28px; } .feature-list li { display: flex; align-items: center; gap: 10px; margin-block: 12px; font-size: 13px; } .feature-list .icon { color: var(--green); width: 17px; } .pricing-card .button { width: 100%; } .boost-panel { display: flex; gap: 24px; align-items: center; margin-top: 28px; margin-bottom: 20px; } .boost-panel h2 { margin-bottom: 8px; } .boost-panel p { font-size: 13px; } .boost-panel .step-icon { margin: 0; flex-shrink: 0; } .boost-panel .arrow-link { margin-left: auto; white-space: nowrap; } .faq-list { display: grid; gap: 12px; } .faq-list .panel { padding: 20px 24px; } .faq-list summary { display: flex; justify-content: space-between; gap: 20px; font-weight: 600; font-size: 15px; } .faq-list summary .icon { width: 18px; flex-shrink: 0; color: var(--muted); } .faq-list details[open] summary .icon { transform: rotate(45deg); } .faq-list p { padding-top: 17px; font-size: 14px; line-height: 1.9; } .prose h2 { font-size: 19px; margin-top: 26px; margin-bottom: 12px; } .prose h2:first-child { margin-top: 0; } .prose p { font-size: 14px; line-height: 1.9; } .prose .table-wrap { margin-block: 25px; } .autocomplete-results { position: absolute; top: 53px; left: -6px; min-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; z-index: 40; } .autocomplete-results a { display: block; padding: 12px 16px; font-size: 13px; white-space: normal; color: var(--ink); } .autocomplete-results a:hover,.autocomplete-results a:focus { background: var(--subtle); } .autocomplete-results small { display: block; color: var(--muted); font-size: 10px; } .impersonation-bar { padding: 8px 24px; background: #feebbd; color: #765525; font-size: 13px; display: flex; justify-content: center; gap: 20px; } .impersonation-bar form { display: inline; } .impersonation-bar button { text-decoration: underline; } .listing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; } .listing-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: box-shadow .2s; } .listing-card:hover { box-shadow: var(--shadow); } .listing-card>img,.listing-card>a>img,.listing-image { width: 100%; height: 190px; object-fit: cover; } .listing-card .card-body,.listing-card-body { padding: 20px; } .listing-card h2,.listing-card h3 { font-size: 18px; margin-bottom: 10px; } .listing-card p { font-size: 13px; } .listing-card .card-meta,.listing-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-block: 12px; } .listing-card .card-meta .icon { width: 15px; } .directory-layout,.profile-layout,.marketplace-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 28px; } .filter-panel { align-self: start; position: sticky; top: 20px; display: grid; gap: 18px; } .filter-panel h2 { font-size: 17px; } .filter-panel .field { margin-bottom: 16px; } .results-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; } .pagination { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 30px; } .pagination a,.pagination span { padding: 6px 13px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; } .pagination .active { background: var(--brand); color: #fff; border-color: var(--brand); } .profile-cover { border-radius: 14px; overflow: hidden; max-height: 400px; margin-bottom: 25px; } .profile-cover img { width: 100%; object-fit: cover; } .gallery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; } .gallery-grid img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; } .stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 28px; } .stat-card { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .stat-card strong { display: block; font-size: 30px; font-weight: 700; letter-spacing: -1px; } .stat-card span,.stat-card p { color: var(--muted); font-size: 12px; } .request-list { display: grid; gap: 15px; } .request-card { padding: 24px; border: 1px solid var(--line); border-radius: 12px; } .request-card h2 { font-size: 20px; margin-bottom: 12px; } .request-card p { font-size: 13px; } .status-line { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 12px; } .review { padding-block: 20px; border-bottom: 1px solid var(--line); } .review p { margin-top: 10px; font-size: 14px; } .rating { color: #c7a363; } .messages-layout { display: grid; grid-template-columns: 300px 1fr; min-height: 450px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .conversation-list { padding: 20px; border-right: 1px solid var(--line); } .message { padding: 13px 17px; background: var(--subtle); border-radius: 10px; margin: 12px 0; max-width: 85%; font-size: 14px; } .message.own { margin-left: auto; background: #eaf0e5; } .message small { display: block; color: var(--muted); font-size: 10px; margin-top: 8px; } .message-body { white-space: pre-wrap; } .message-thread { padding: 24px; max-height: 550px; overflow: auto; } .message-form { padding: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; } .upload-zone { border: 1px dashed #cbd2c6; padding: 23px; text-align: center; border-radius: 9px; background: var(--subtle); } .settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; } .settings-grid .panel { min-width: 0; } .error-list { color: #b24732; background: #fff0ec; border-radius: 8px; padding: 15px 30px; font-size: 13px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } [data-theme=dark] .hero-description,[data-theme=dark] .hero-proof,[data-theme=dark] .desktop-nav a { color: var(--muted); } [data-theme=dark] .request-banner { background: #263227; border-color: #3b4937; } [data-theme=dark] .request-banner h2,[data-theme=dark] .request-banner p { color: #bdcbb6; } [data-theme=dark] .hero-art { filter: brightness(.8); } [data-theme=dark] .category-icon { background: #342f26; color: #c2a57f; } [data-theme=dark] .message.own { background: #2b3a2b; } [data-theme=dark] .alert { background: #273927; border-color: #3a4b35; color: #c0d4b6; } @media (min-width:1400px) { .hero-grid { min-height: 565px; } .hero-copy h1 { font-size: 62px; } } @media (max-width:1100px) { .container { width: calc(100% - 44px); } .desktop-nav { gap: 20px; } .desktop-nav a { font-size: 12px; } .header-actions { gap: 10px; } .brand { font-size: 20px; } .hero-copy h1 { font-size: 48px; } .hero-grid { min-height: 500px; } .hero-search { width: calc(100% + 100px); } .hero-art { margin-left: 15px; } .hero-description { max-width: 400px; } .category-card { padding: 18px 16px; } .category-card h3 { font-size: 13px; } .footer-top { gap: 30px; } .directory-layout { grid-template-columns: 220px 1fr; } .listing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:850px) { .desktop-nav { display: none; } .mobile-menu-button { display: grid; } .site-header { height: 76px; } .mobile-nav { top: 75px; } .hero-grid { grid-template-columns: 1fr .65fr; padding-block: 35px; min-height: 480px; } .hero-copy h1 { font-size: 45px; } .hero-art { margin-left: 0; } .hero-art>img { min-width: 330px; transform: translateX(-15px); } .art-note { display: none; } .hero-search { width: calc(100% + 130px); } .hero-description { max-width: 360px; font-size: 14px; } .hero-proof { gap: 15px; font-size: 10px; } .category-grid { grid-template-columns: repeat(3,1fr); } .request-banner { padding: 28px; gap: 20px; flex-wrap: wrap; } .request-banner h2 { font-size: 21px; } .request-banner .button { margin-left: 90px; } .footer-top { grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; } .footer-top>div:last-child { display: none; } .categories-directory { grid-template-columns: repeat(2,minmax(0,1fr)); } .directory-layout,.marketplace-layout { grid-template-columns: 1fr; } .filter-panel { position: static; } .contact-grid { gap: 25px; grid-template-columns: 1.5fr 1fr; } .pricing-card { padding: 22px; } .price { font-size: 33px; } .cookie-banner { gap: 20px; } .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .messages-layout { grid-template-columns: 220px 1fr; } } @media (max-width:600px) { .container { width: calc(100% - 32px); } .site-header { height: 69px; } .mobile-nav { top: 68px; } .brand { font-size: 19px; gap: 8px; } .brand-mark { width: 32px; height: 32px; border-radius: 10px; } .brand-mark .icon { width: 21px; height: 21px; } .header-actions { gap: 5px; } .publish-link,.login-link { display: none; } .theme-toggle { width: 31px; height: 31px; } .hero-grid { display: block; padding: 34px 0 32px; min-height: auto; } .hero-art { display: none; } .hero-copy h1 { font-size: 42px; letter-spacing: -1.8px; line-height: 1.13; } .hero-description { font-size: 14px; margin-top: 18px; max-width: 350px; } .hero-search { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 0; margin-top: 25px; padding: 6px; } .search-service { grid-column: 1/-1; padding-left: 9px; min-height: 45px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .search-location { width: auto; border: 0; padding-left: 9px; } .hero-search .button { min-height: 42px; padding: 11px 18px; font-size: 12px; } .hero-search select { font-size: 12px; } .hero-proof { margin-top: 23px; gap: 13px; font-size: 10px; flex-wrap: wrap; } .categories-section { padding-block: 32px; } .section-heading { align-items: flex-start; gap: 10px; margin-bottom: 21px; } .section-heading h2 { font-size: 22px; } .section-heading .arrow-link { font-size: 10px; gap: 5px; margin-top: 6px; } .section-heading .arrow-link .icon { width: 14px; } .count-pill { font-size: 10px; padding: 1px 7px; } .heading-inline { gap: 8px; } .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .category-card { padding: 17px 13px 15px; border-radius: 10px; min-height: 157px; } .category-icon { width: 37px; height: 37px; border-radius: 10px; margin-bottom: 14px; } .category-icon .icon { width: 20px; height: 20px; } .category-card h3 { font-size: 12px; line-height: 1.35; min-height: 33px; padding: 0; margin-bottom: 5px; } .category-card p { font-size: 9px; max-width: 100%; } .category-arrow { top: 23px; right: 12px; } .category-arrow .icon { width: 13px; } .request-banner { padding: 24px 20px; gap: 15px; display: grid; grid-template-columns: 48px 1fr; border-radius: 11px; } .banner-symbol { width: 46px; height: 46px; } .banner-symbol>.icon { width: 25px; height: 25px; } .banner-symbol>span { width: 20px; height: 20px; } .request-banner h2 { font-size: 19px; line-height: 1.3; } .request-banner p { font-size: 11px; line-height: 1.65; margin-top: 8px; } .request-banner .button { grid-column: 1/-1; margin: 3px 0 0; width: 100%; font-size: 12px; } .how-section { padding-block: 36px; } .how-section .section-heading h2 { font-size: 22px; } .steps-grid { grid-template-columns: 1fr; gap: 25px; } .step { padding: 0; } .step-top { margin-bottom: 12px; max-width: 100%; } .step-top .step-icon { width: 42px; height: 42px; border-radius: 12px; } .step-number { font-size: 31px; } .step h3 { font-size: 15px; margin-bottom: 8px; } .step p { max-width: 100%; font-size: 12px; } .provider-strip-inner { padding-block: 28px; display: block; } .provider-strip h2 { font-size: 23px; } .provider-strip p { font-size: 12px; } .provider-strip .button { margin-top: 20px; font-size: 12px; width: 100%; } .footer-top { grid-template-columns: 1fr 1fr; gap: 25px; padding-bottom: 29px; } .footer-brand { grid-column: 1/-1; } .footer-brand p { max-width: 100%; font-size: 12px; } .footer-local { margin-top: 10px; } .site-footer { padding-top: 32px; } .footer-top h3 { font-size: 12px; } .footer-bottom { display: block; font-size: 10px; padding-block: 18px; } .footer-bottom>div { gap: 15px; margin-top: 10px; } .cookie-banner { bottom: 10px; width: calc(100% - 20px); padding: 17px; display: block; border-radius: 11px; } .cookie-banner p { font-size: 11px; } .cookie-banner strong { font-size: 13px; } .cookie-actions { flex-direction: row; margin-top: 13px; gap: 8px; } .cookie-actions .button { flex: 1; } .page-main { padding-bottom: 35px; } .breadcrumbs { padding-block: 18px; font-size: 10px; } .page-heading { margin-top: 7px; margin-bottom: 25px; } .page-heading h1 { font-size: 29px; } .page-heading p { font-size: 13px; } .panel { padding: 21px; } .panel h2 { font-size: 20px; } .form-grid { grid-template-columns: 1fr; gap: 16px; } .field { font-size: 12px; } .split-panels,.contact-grid,.pricing-grid,.categories-directory,.settings-grid,.listing-grid { grid-template-columns: 1fr; } .contact-aside { padding-top: 5px; } .boost-panel { display: block; } .boost-panel .step-icon { margin-bottom: 15px; } .boost-panel .arrow-link { margin-top: 20px; } .price { font-size: 38px; } .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .gallery-grid img { height: 140px; } .messages-layout { display: block; } .conversation-list { border-right: 0; border-bottom: 1px solid var(--line); } .stats-grid { gap: 12px; } .stat-card { padding: 16px; } .stat-card strong { font-size: 24px; } .results-header { display: block; } .results-header>*+* { margin-top: 12px; } .form-actions .button { width: 100%; } .empty-state { padding: 45px 20px; } .empty-state h1,.empty-state h2 { font-size: 23px; } .empty-state p { font-size: 13px; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; animation: none !important; } } @media print { .site-header,.site-footer,.cookie-banner,.button,.breadcrumbs { display: none !important; } .container { width: 100%; } .panel { border: 0; } .page-main { padding: 0; } body { font-size: 12px; background: white; color: black; } } } @layer components { .auth-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); max-width: 970px; margin: 15px auto 25px; gap: 36px; align-items: stretch; } .auth-panel { padding: 36px; } .auth-panel .form-grid,.auth-single .form-grid,.settings-grid .form-grid { grid-template-columns: 1fr; } .auth-panel .page-heading { margin-top: 0; } .auth-panel h1 { font-size: 31px; } .auth-panel .page-heading p { font-size: 13px; } .auth-aside { padding: 48px 34px; background: var(--cream); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; } .auth-illustration { width: 90px; height: 90px; display: grid; place-items: center; background: #e8ecde; color: #6e8364; border-radius: 27px; margin-bottom: 30px; transform: rotate(-5deg); } .auth-illustration .icon { width: 44px; height: 44px; transform: rotate(5deg); } .auth-aside h2 { font-size: 30px; line-height: 1.2; margin-bottom: 20px; } .auth-aside p { font-size: 14px; line-height: 1.8; } .auth-aside>a { font-size: 13px; margin-top: 24px; color: var(--green); font-weight: 600; } .auth-links { display: grid; gap: 10px; font-size: 12px; margin-top: 24px; } .auth-links a { color: var(--brand); } .auth-help { font-size: 12px; color: var(--muted); margin-top: 20px; } .auth-help form { margin-top: 15px; } .auth-single { max-width: 570px; margin: 20px auto; } .auth-feature { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; } .account-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; } .account-card { position: relative; display: block; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .account-card:hover { box-shadow: var(--shadow); border-color: #cdd4c7; } .account-card-icon { display: grid; place-items: center; width: 43px; height: 43px; background: var(--cream); color: var(--green); border-radius: 12px; margin-bottom: 18px; } .account-card h2 { font-size: 18px; margin-bottom: 10px; } .account-card p { font-size: 12px; } .account-card-arrow { position: absolute; right: 20px; top: 30px; } .contact-row,.list-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .list-row small { display: block; } .list-row:last-child { border-bottom: 0; } .contact-row+form,.phone-verification,.settings-grid form { margin-top: 20px; } .danger-zone { border-color: #efc7bb; } .check-group { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 18px; } .check-group label { font-weight: 400; font-size: 13px; } .form-actions { margin-top: 25px; } .panel>.field { margin-block: 18px; } .panel>.form-grid { margin-block: 20px; } .panel>h2:not(:first-child) { margin-top: 32px; } .panel+section.panel,.page-main>section.panel+section.panel,.profile-main>.panel,.profile-sidebar>.panel { margin-bottom: 22px; } .profile-layout { grid-template-columns: minmax(0,1fr) 325px; align-items: start; } .profile-sidebar { position: sticky; top: 20px; } .contact-card .button { width: 100%; margin-bottom: 12px; } .contact-card h2 { font-size: 23px; margin-block: 15px 10px; } .contact-card .price { font-size: 27px; margin-block: 20px; } .contact-card>p,.contact-card summary { font-size: 13px; } .contact-card>details { margin-bottom: 20px; } .avatar { width: 62px; height: 62px; border-radius: 18px; background: var(--cream); display: grid; place-items: center; font-size: 26px; font-weight: 600; color: var(--green); } .portfolio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 24px; } .portfolio-grid img { width: 100%; height: 170px; object-fit: cover; border-radius: 9px; } .portfolio-grid>div form { margin-top: 7px; } .portfolio-grid>[draggable=true] { cursor: grab; } .image-placeholder { display: grid; place-items: center; background: var(--cream); min-height: 170px; color: #a5b09b; } .image-placeholder .icon { width: 45px; height: 45px; } .listing-image { display: block; } .card-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-block: 12px; } .listing-card-body { padding: 20px; } .listing-card-body h2 { font-size: 18px; } .text-link { background: none; border: 0; padding: 0; color: var(--green); font-size: 13px; font-weight: 550; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .filter-form { margin-bottom: 30px; } .filter-form .form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; } .page-heading:has(>div) { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .page-heading:has(>div)>.button { flex-shrink: 0; } .steps { display: flex; gap: 25px; padding: 0; list-style: none; font-size: 12px; color: var(--muted); margin-bottom: 25px; } .steps .active { color: var(--brand); } .chat-messages { max-height: 520px; min-height: 200px; overflow: auto; padding: 10px; } .chat-message { max-width: 80%; background: var(--subtle); border-radius: 12px; padding: 16px; margin-bottom: 15px; width: fit-content; } .chat-message.own { background: #edf2e8; margin-left: auto; } .chat-message p { white-space: pre-wrap; color: var(--ink); font-size: 14px; } .chat-message time { display: block; font-size: 10px; margin-top: 10px; color: var(--muted); } .chat-message form { display: inline; margin-left: 10px; } .chat-message .text-link { font-size: 10px; } .chat-compose { padding-top: 25px; border-top: 1px solid var(--line); } .chat-compose .form-actions { align-items: end; } .chat-compose input[type=file] { font-size: 12px; } .invoice-layout,.billing-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 25px; } .summary-list { display: grid; gap: 10px; } .summary-list>div { display: flex; justify-content: space-between; gap: 15px; font-size: 14px; } .admin-nav { margin-top: 5px; } .admin-nav a { padding-inline: 10px; font-size: 12px; } .panel>.button-secondary,a.button-secondary { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 17px; font-size: 13px; font-weight: 550; } .log-output { overflow: auto; white-space: pre-wrap; font-size: 11px; max-height: 450px; background: var(--subtle); border: 1px solid var(--line); padding: 20px; border-radius: 8px; } .advertisement { margin: 20px auto; text-align: center; max-width: 1000px; } .advertisement>span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; } .advertisement img { max-height: 200px; margin: auto; } .advertisement iframe { border: 0; width: 100%; height: 180px; } .admin-alert { margin-top: 15px; } .article-body { white-space: normal; font-size: 15px; line-height: 1.9; } .setting-search { margin-bottom: 24px; max-width: 500px; } .field[hidden] { display: none !important; } .map-results { display: grid; gap: 5px; margin-top: 8px; } .map-results button { text-align: left; background: var(--subtle); padding: 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; } .location-map { border: 0; width: 100%; height: 260px; border-radius: 10px; margin-top: 15px; } .map-controls { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .language-note { font-size: 11px; color: var(--muted); } @media (max-width:850px) { .profile-layout { grid-template-columns: minmax(0,1fr) 260px; } .account-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .auth-layout { gap: 22px; } .auth-aside { padding: 30px 25px; } .auth-panel { padding: 26px; } .auth-aside h2 { font-size: 25px; } } @media (max-width:600px) { .auth-layout { display: block; margin-top: 0; } .auth-panel { padding: 23px; } .auth-aside { display: none; } .auth-panel h1 { font-size: 27px; } .account-grid,.profile-layout,.filter-form .form-grid,.invoice-layout,.billing-grid { grid-template-columns: 1fr; } .profile-sidebar { position: static; } .page-heading:has(>div) { display: block; } .page-heading:has(>div)>.button { margin-top: 20px; } .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .portfolio-grid img { height: 135px; } .list-row { flex-wrap: wrap; font-size: 12px; } .list-row input { min-width: 100%; } .stats-grid .panel { padding: 15px; } .chat-message { max-width: 95%; } .map-controls { grid-template-columns: 1fr; } .filter-form { padding: 20px; } .steps { gap: 13px; font-size: 10px; } } [data-theme=dark] .chat-message.own { background: #2a392a; } [data-theme=dark] .auth-illustration { background: #34432f; color: #b0c29f; } } @layer components { .business-logo { object-fit: contain; border-radius: 12px; background: var(--surface); max-width: 160px; max-height: 120px; } .share-tools { display: flex; gap: 14px; margin-top: 12px; } .taxonomy-list { list-style: none; padding: 0; margin-block: 20px; } .taxonomy-list li { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 12px 15px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; cursor: grab; flex-wrap: wrap; } .taxonomy-list li form { margin-left: auto; } .log-view { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; background: var(--subtle); padding: 15px; border-radius: 9px; font-size: 11px; } .panel code { overflow-wrap: anywhere; white-space: normal; font-size: 11px; } .service-row { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } } @layer components { .form-grid>.location-picker,.form-grid>.company-lookup { grid-column: 1/-1; min-width: 0; } .location-picker [data-dependent-locations] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .location-picker [data-dependent-locations][hidden] { display: none; } .location-picker .field { min-width: 0; } .location-picker select { width: 100%; min-width: 0; } .location-picker [data-location-status]:empty,.company-lookup [data-company-status]:empty { display: none; } .location-picker [data-location-chips] { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 12px; } .location-picker [data-nearby-choices] { display: grid; gap: 8px; margin-top: 12px; } .location-picker [data-location-multiple]>.button-secondary,.company-lookup .button-secondary { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 13px; } .company-lookup { border-block: 1px solid var(--line); padding-block: 18px; margin-block: 5px; } .company-lookup>p { margin-top: 10px; } .company-lookup [data-company-result] { margin-top: 16px; } .company-lookup [data-company-result][hidden] { display: none; } .hero-search:has(.search-location) { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; } .hero-search .search-location { grid-column: 1/-1; grid-row: 2; width: 100%; border-left: 0; border-top: 1px solid var(--line); padding: 12px 8px 4px; display: block; } .hero-search .location-picker .field { gap: 2px; font-size: 10px; } .hero-search .location-picker select { border: 1px solid var(--line) !important; min-height: 36px !important; font-size: 11px; padding: 7px !important; } .hero-search .search-location .location-picker { width: 100%; } .account-dropdown { max-height: 75vh; overflow: auto; } .table-wrap { max-width: 100%; overflow: auto; } .table-wrap td,.table-wrap th { vertical-align: top; } .form-grid { min-width: 0; } .check-group>label { display: flex; align-items: flex-start; gap: 8px; } .check-group input[type=checkbox] { flex-shrink: 0; margin-top: 4px; } .panel .table-wrap select { min-width: 135px; } @media (max-width:600px) { .location-picker [data-dependent-locations] { grid-template-columns: 1fr; } .hero-search:has(.search-location) { grid-template-columns: 1fr; } .hero-search .search-location { grid-row: 2; } .hero-search>.button { grid-row: 3; } .hero-search .location-picker [data-dependent-locations] { grid-template-columns: 1fr; } .company-lookup [data-company-result] { padding: 16px; } .check-group { flex-direction: column; } .panel.table-wrap { padding: 18px; } .panel form.form-grid { min-width: 0; } } }