/* ============================================================ Coach Finder — Public CSS v1.5.0 ============================================================ */ /* * CRITICAL: Strip ALL margin/padding from every ancestor element * between and #cf-root. This mirrors what the standalone * HTML widget does with its global * { margin:0; padding:0 } reset * but scoped only to our widget's container chain. * * :where() has zero specificity so it won't override anything else * on the page — only resets what's needed for our widget wrapper. */ :where( body > *:has(#cf-root), body > * > *:has(#cf-root), body > * > * > *:has(#cf-root), body > * > * > * > *:has(#cf-root), body > * > * > * > * > *:has(#cf-root), body > * > * > * > * > * > *:has(#cf-root) ) { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: 100% !important; } /* Also kill the

tag WordPress sometimes inserts around shortcodes */ p:has(> #cf-root), p:has(> #cf-location-suggestions) { margin: 0 !important; padding: 0 !important; } /* ── RESET inside widget ── */ #cf-root *, #cf-root *::before, #cf-root *::after { box-sizing: border-box; margin: 0; } #cf-root button, #cf-root button:hover, #cf-root button:focus, #cf-root button:active, #cf-root button:visited, #cf-root button:focus-visible { background-image: none !important; text-shadow: none !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; } #cf-root { padding: unset !important; font-family: 'Oxanium', sans-serif; background: #1D1D1D; color: #ffffff; --cf-green: #95C624; --cf-green-dark: #7aab18; --cf-amber: #F4B502; --cf-bg: #1D1D1D; --cf-bg-mid: #242424; --cf-border: #333333; --cf-text-main: #ffffff; --cf-text-muted: #A29C9C; display: block; width: 100%; } /* HERO */ #cf-hero { position: relative; overflow: hidden; background: #111111; padding: 6% 2.5% 3.5% !important; } #cf-hero svg.cf-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cf-hero-inner { position: relative; z-index: 2; width: 100% !important; padding: 0 !important; margin: 0 !important; } .cf-hero-top { display: flex; align-items: flex-start; justify-content: flex-start; gap: 1.5rem !important; margin-bottom: 1.75rem !important; } .cf-eyebrow { font-size: clamp(0.55rem, 0.8vw, 0.72rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-green); margin-bottom: 0.55rem !important; display: block; } .cf-hero-title { font-size: clamp(1.6rem, 4.5vw, 3.25rem); font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; } .cf-hero-title span { color: var(--cf-green); } /* LAYOUT */ #cf-layout { width: 100%; padding: 1.75rem 2.25rem 3.75rem !important; display: grid; grid-template-columns: minmax(22rem, 30rem) 1fr; gap: 2rem; align-items: start; background: var(--cf-bg); } /* MAP COLUMN */ #cf-map-col { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; width: 100%; } .cf-map-box { border-radius: 0.625rem; overflow: hidden; border: 0.094rem solid var(--cf-border); height: 60vh; min-height: 25rem; position: relative; background: #2a2a2a; width: 100%; } #cf-gmap { position: absolute; inset: 0; width: 100%; height: 100%; } .cf-map-topbar { display: flex; align-items: center; justify-content: space-between; } .cf-map-label { font-size: clamp(0.5rem, 0.7vw, 0.625rem); font-weight: 700; letter-spacing: 0.094em; text-transform: uppercase; color: var(--cf-text-muted); } .cf-type-toggle { display: flex; background: #2a2a2a; border: 0.094rem solid var(--cf-border); border-radius: 3.125rem; padding: 0.125rem; gap: 0.125rem; } .cf-type-toggle button { padding: 0.25rem 0.688rem; border: none !important; background: transparent !important; font-family: 'Oxanium', sans-serif; font-size: clamp(0.5rem, 0.7vw, 0.625rem); font-weight: 600; color: var(--cf-text-muted) !important; cursor: pointer; border-radius: 3.125rem; transition: all .18s; outline: none !important; -webkit-appearance: none; appearance: none; box-shadow: none !important; } .cf-type-toggle button.cf-active, .cf-type-toggle button.cf-active:focus, .cf-type-toggle button.cf-active:active, .cf-type-toggle button.cf-active:hover { background: var(--cf-green) !important; color: #fff !important; border: none !important; } .cf-type-toggle button:focus, .cf-type-toggle button:active { background: transparent !important; color: var(--cf-text-muted) !important; } .cf-map-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; } .cf-map-placeholder.cf-hidden { display: none; } /* RESULTS COLUMN */ #cf-results-col { display: flex; flex-direction: column; gap: 1.25rem; } /* SEARCH */ .cf-search-bar { display: flex; justify-content: flex-end; margin-bottom: -0.5rem; } .cf-search-group { display: flex; gap: 0.625rem; width: 100%; align-items: stretch; } .cf-input-field { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0.5rem 0.875rem !important; gap: 0.188rem; min-width: 0; position: relative; background: rgba(255,255,255,.05); border: 0.094rem solid rgba(149,198,36,.25); border-radius: 0.625rem; backdrop-filter: blur(0.5rem); transition: border-color .2s, box-shadow .2s; } .cf-input-field:focus-within { border-color: var(--cf-green); box-shadow: 0 0 0 0.188rem rgba(149,198,36,.12), 0 0.25rem 1rem rgba(0,0,0,.3); } .cf-input-label { font-size: clamp(0.5rem, 0.65vw, 0.563rem); font-weight: 700; letter-spacing: 0.094em; text-transform: uppercase; color: var(--cf-green); opacity: .8; display: flex; align-items: center; gap: 0.313rem; } .cf-input-label svg { width: 0.625rem; height: 0.625rem; flex-shrink: 0; opacity: .9; } .cf-input-field input { background: none; border: none; outline: none; font-family: 'Oxanium', sans-serif; font-size: clamp(0.7rem, 1vw, 0.813rem); font-weight: 500; color: #fff; width: 100%; padding: 0; } .cf-input-field input::placeholder { color: var(--cf-text-muted); opacity: .5; font-size: clamp(0.65rem, 0.9vw, 0.75rem); } .cf-search-btn { padding: 0 1.375rem; background: var(--cf-green) !important; border: none !important; border-radius: 0.625rem; font-family: 'Oxanium', sans-serif; font-size: clamp(0.6rem, 0.85vw, 0.75rem); font-weight: 700; color: #fff !important; letter-spacing: 0.063em; text-transform: uppercase; cursor: pointer; flex-shrink: 0; transition: background .18s, box-shadow .18s; min-width: 5.625rem; align-self: stretch; outline: none !important; box-shadow: none; -webkit-appearance: none; appearance: none; } .cf-search-btn:hover,.cf-search-btn:focus,.cf-search-btn:active,.cf-search-btn:focus-visible { background: var(--cf-green-dark) !important; color: #fff !important; border: none !important; outline: none !important; box-shadow: 0 0.25rem 1rem rgba(149,198,36,.25) !important; } .cf-reset-btn { padding: 0 1rem; background: transparent !important; border: 0.094rem solid var(--cf-border) !important; border-radius: 0.625rem; font-family: 'Oxanium', sans-serif; font-size: clamp(0.55rem, 0.75vw, 0.688rem); font-weight: 700; color: var(--cf-text-muted) !important; letter-spacing: 0.063em; text-transform: uppercase; cursor: pointer; flex-shrink: 0; transition: border-color .18s, color .18s, background .18s; min-width: 4.375rem; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 0.313rem; outline: none !important; -webkit-appearance: none; appearance: none; } .cf-reset-btn:hover { border-color: #ff5555 !important; color: #ff5555 !important; background: rgba(255,85,85,.06) !important; } .cf-reset-btn:focus,.cf-reset-btn:active,.cf-reset-btn:focus-visible,.cf-reset-btn:focus-within { background: transparent !important; border-color: var(--cf-border) !important; color: var(--cf-text-muted) !important; outline: none !important; box-shadow: none !important; } .cf-reset-btn svg { width: 0.688rem; height: 0.688rem; flex-shrink: 0; } /* SECTION TITLES */ .cf-section-title-row { display: flex; align-items: center; gap: 0.75rem; grid-column: 1 / -1; margin-bottom: -0.25rem; margin-top: 0.5rem; } .cf-section-title-label { font-size: clamp(0.72rem, 1vw, 0.88rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .cf-section-title-label.cf-owner-label { color: var(--cf-amber); } .cf-section-title-label.cf-experts-label { color: var(--cf-green); } .cf-section-title-line { flex: 1; height: 0.063rem; } .cf-section-title-line.cf-owner-line { background: linear-gradient(90deg, rgba(244,181,2,.4) 0%, transparent 100%); } .cf-section-title-line.cf-experts-line { background: linear-gradient(90deg, rgba(149,198,36,.35) 0%, transparent 100%); } /* COUNT */ .cf-count-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.625rem; } .cf-count-text { font-size: clamp(0.7rem, 0.9vw, 0.813rem); font-weight: 600; color: var(--cf-text-muted); } .cf-count-text b { color: #fff; } /* CARDS GRID */ #cf-cards-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.875rem; row-gap: 1.5rem; } /* COACH CARD */ .cf-coach-card { position: relative; padding: 0; border-radius: 0.875rem; cursor: pointer; overflow: hidden; background: linear-gradient(155deg, #272727 0%, #1e1e1e 100%); border: 0.063rem solid #2e2e2e; box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,.35); transition: transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s ease, border-color .28s ease; } .cf-coach-card::before { content: ''; position: absolute; inset: -0.063rem; border-radius: 0.938rem; background: linear-gradient(135deg, var(--cf-green) 0%, transparent 50%, var(--cf-amber) 100%); opacity: 0; transition: opacity .3s ease; z-index: 0; pointer-events: none; } .cf-coach-card::after { content: ''; position: absolute; inset: 0.063rem; border-radius: 0.813rem; background: linear-gradient(155deg, #262626 0%, #1c1c1c 100%); z-index: 1; pointer-events: none; transition: background .3s ease; } .cf-coach-card:hover { transform: translateY(-0.313rem) scale(1.01); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.55), 0 0 0 0.063rem rgba(149,198,36,.18); } .cf-coach-card:hover::before { opacity: 1; } .cf-coach-card:hover::after { background: linear-gradient(155deg, #242424 0%, #1a1a1a 100%); } .cf-card-body { position: relative; z-index: 2; padding: 1.1rem 1rem 1rem !important; display: flex; flex-direction: row; align-items: flex-start; gap: 0.875rem; } /* AVATAR */ .cf-card-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; flex-shrink: 0; } .cf-avatar { width: 4rem; height: 4rem; border-radius: 50%; background: linear-gradient(145deg, #3a3a3a 0%, #2a2a2a 100%); border: 0.15rem solid #444; display: flex; align-items: center; justify-content: center; font-size: clamp(0.85rem, 1.1vw, 1rem); font-weight: 900; color: #888; letter-spacing: -0.031em; position: relative; transition: border-color .25s, box-shadow .25s; flex-shrink: 0; overflow: hidden; } .cf-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; z-index: 5; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .cf-avatar:not(.cf-has-photo)::after { content: ''; position: absolute; bottom: -0.2rem; left: 50%; transform: translateX(-50%); width: 2.4rem; height: 2.4rem; background: #666; border-radius: 50% 50% 0 0; clip-path: ellipse(60% 55% at 50% 100%); z-index: 1; } .cf-avatar.cf-has-photo::after { display: none; } .cf-avatar-head { position: absolute; top: 0.7rem; left: 50%; transform: translateX(-50%); width: 1.2rem; height: 1.2rem; background: #666; border-radius: 50%; z-index: 2; } .cf-avatar.cf-has-photo .cf-avatar-head { display: none; } .cf-coach-card:hover .cf-avatar { border-color: var(--cf-green); box-shadow: 0 0 0 0.2rem rgba(149,198,36,.15), 0 0 0.875rem rgba(149,198,36,.2); } /* CARD CONTENT */ .cf-card-content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cf-name-row { display: flex; align-items: center; gap: 0.375rem !important; margin-bottom: 0.15rem !important; } .cf-name { font-size: clamp(0.72rem, 0.95vw, 0.85rem); font-weight: 800; color: #fff; letter-spacing: -0.013em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-verified { width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--cf-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0.375rem rgba(149,198,36,.3); } .cf-verified svg { width: 0.438rem; height: 0.438rem; } .cf-profession { font-size: clamp(0.48rem, 0.65vw, 0.58rem); font-weight: 600; color: var(--cf-green); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.4rem !important; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-company-tag { display: inline-flex; align-items: center; gap: 0.28rem; background: none; border: none; padding: 0; font-size: clamp(0.48rem, 0.65vw, 0.6rem); font-weight: 600; color: var(--cf-text-muted); letter-spacing: 0.04em; margin-bottom: 0.4rem !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cf-company-tag svg { width: 0.55rem; height: 0.55rem; flex-shrink: 0; opacity: .6; color: var(--cf-text-muted); } .cf-company-tag.cf-company-owner { color: rgba(244,181,2,.75); font-size: clamp(0.5rem, 0.68vw, 0.62rem); } .cf-company-tag.cf-company-owner svg { color: rgba(244,181,2,.75); opacity: .85; } .cf-card-divider { height: 0.063rem; background: linear-gradient(90deg, rgba(149,198,36,.2) 0%, transparent 100%); margin-bottom: 0.45rem !important; transition: background .25s; } .cf-coach-card:hover .cf-card-divider { background: linear-gradient(90deg, rgba(149,198,36,.45) 0%, transparent 70%); } .cf-location-row { display: flex; align-items: flex-start; gap: 0.313rem !important; margin-bottom: 0.4rem !important; } .cf-location-row svg { width: 0.625rem; height: 0.625rem; flex-shrink: 0; margin-top: 0.063rem !important; color: var(--cf-text-muted); opacity: .7; } .cf-location-row span { font-size: clamp(0.5rem, 0.68vw, 0.6rem); color: var(--cf-text-muted); line-height: 1.4; opacity: .85; } .cf-card-bio-snippet { font-size: clamp(0.48rem, 0.65vw, 0.585rem); color: var(--cf-text-muted); line-height: 1.6; opacity: .75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cf-card-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 0.125rem; background: linear-gradient(90deg, var(--cf-green), var(--cf-amber)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.34,1.4,.64,1); z-index: 3; } .cf-coach-card:hover .cf-card-accent { transform: scaleX(1); } /* FEATURED CARD */ .cf-coach-card.cf-card-featured { grid-column: 1 / -1; border-color: rgba(244,181,2,.2); } .cf-coach-card.cf-card-featured::before { background: linear-gradient(135deg, var(--cf-amber) 0%, transparent 50%, var(--cf-green) 100%); } .cf-coach-card.cf-card-featured .cf-card-body { padding: 1.4rem 1.5rem 1.25rem !important; gap: 1.25rem; } .cf-coach-card.cf-card-featured .cf-avatar { width: 5.5rem; height: 5.5rem; } .cf-coach-card.cf-card-featured .cf-avatar-head { width: 1.6rem; height: 1.6rem; top: 0.9rem; } .cf-coach-card.cf-card-featured .cf-avatar:not(.cf-has-photo)::after { width: 3.4rem; height: 3.4rem; } .cf-coach-card.cf-card-featured .cf-name { font-size: clamp(0.95rem, 1.35vw, 1.15rem); } .cf-featured-desc { font-size: clamp(0.58rem, 0.75vw, 0.675rem); color: var(--cf-text-muted); line-height: 1.65; margin-top: 0.45rem !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* NO RESULTS */ .cf-no-results { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.75rem 1.25rem; gap: 0.625rem; color: var(--cf-text-muted); } .cf-no-results-icon { font-size: 2.25rem; opacity: .4; } .cf-no-results-title { font-size: 0.875rem; font-weight: 600; } .cf-no-results-hint { font-size: 0.75rem; opacity: .6; } .cf-no-results-clear { margin-top: 0.5rem; padding: 0.438rem 1.125rem; background: transparent; border: 0.094rem solid var(--cf-green); border-radius: 3.125rem; color: var(--cf-green); font-family: 'Oxanium', sans-serif; font-size: 0.688rem; font-weight: 700; cursor: pointer; transition: background .18s, color .18s; } .cf-no-results-clear:hover { background: var(--cf-green); color: #fff; } /* LOADING */ .cf-loading-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.75rem 1.25rem; gap: 0.75rem; color: var(--cf-text-muted); } .cf-spinner { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid rgba(149,198,36,.15); border-top-color: var(--cf-green); animation: cf-spin .8s linear infinite; } @keyframes cf-spin { to { transform: rotate(360deg); } } /* PAGINATION */ .cf-pagination { display: flex; align-items: center; gap: 0.313rem; justify-content: center; } .cf-page-btn { width: 2rem; height: 2rem; border-radius: 0.375rem; border: 0.094rem solid var(--cf-border) !important; background: #242424 !important; color: var(--cf-text-muted) !important; font-size: 0.75rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; font-family: 'Oxanium', sans-serif; outline: none !important; -webkit-appearance: none; appearance: none; box-shadow: none !important; } .cf-page-btn:hover:not(:disabled) { background: #2a2a2a !important; border-color: var(--cf-green) !important; color: var(--cf-green) !important; box-shadow: none !important; } .cf-page-btn:focus,.cf-page-btn:active { outline: none !important; box-shadow: none !important; } .cf-page-btn:disabled { opacity: .3; cursor: default; } .cf-page-btn.cf-page-active,.cf-page-btn.cf-page-active:focus,.cf-page-btn.cf-page-active:active { background: var(--cf-green) !important; border-color: var(--cf-green) !important; color: #fff !important; outline: none !important; box-shadow: none !important; } .cf-page-ellipsis { font-size: 0.75rem; color: var(--cf-text-muted); padding: 0 0.188rem; } /* MODAL */ #cf-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(0.375rem); z-index: 1000; display: flex; align-items: center; justify-content: center; overflow-y: scroll; scrollbar-width: none; opacity: 0; pointer-events: none; transition: opacity .28s; } #cf-modal-overlay::-webkit-scrollbar { display: none; } #cf-modal-overlay.cf-visible { opacity: 1; pointer-events: all; } #cf-modal-card { background: #1e1e1e; border-radius: 1.125rem; box-shadow: 0 1.25rem 3.5rem rgba(0,0,0,.6), 0 0 0 0.094rem #333; width: 28.75rem; max-width: 92vw; transform: translateY(1.75rem) scale(.96); opacity: 0; transition: transform .36s cubic-bezier(.34,1.5,.64,1), opacity .28s; overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; flex-shrink: 0; margin: auto; } #cf-modal-overlay.cf-visible #cf-modal-card { transform: translateY(0) scale(1); opacity: 1; } .cf-modal-head { background: linear-gradient(135deg, #1a2e08, #0d1a06); border-bottom: 0.125rem solid var(--cf-green); padding: 1.25rem 1.375rem 1.125rem; position: relative; flex-shrink: 0; } .cf-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: rgba(255,255,255,.1) !important; border: none !important; color: #fff !important; font-size: 0.813rem; cursor: pointer; display: flex; align-items: center; justify-content: center; outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .cf-modal-close:hover,.cf-modal-close:focus,.cf-modal-close:active { background: rgba(255,255,255,.2) !important; outline: none !important; box-shadow: none !important; } .cf-modal-avatar { width: 5rem; height: 5rem; border-radius: 50%; background: linear-gradient(145deg, #3a3a3a, #2a2a2a); border: 0.15rem solid #555; display: flex; align-items: center; justify-content: center; font-size: 1.063rem; font-weight: 900; color: #888; margin-bottom: 0.75rem; overflow: hidden; position: relative; flex-shrink: 0; } .cf-modal-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; z-index: 5; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .cf-modal-avatar .cf-avatar-head { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); width: 1.3rem; height: 1.3rem; background: #666; border-radius: 50%; z-index: 2; } .cf-modal-avatar:not(.cf-has-photo)::after { content: ''; position: absolute; bottom: -0.2rem; left: 50%; transform: translateX(-50%); width: 3rem; height: 3rem; background: #666; border-radius: 50% 50% 0 0; clip-path: ellipse(60% 55% at 50% 100%); z-index: 1; } .cf-modal-avatar.cf-has-photo::after { display: none; } .cf-modal-avatar.cf-has-photo .cf-avatar-head { display: none; } .cf-modal-name { font-size: 1.188rem; font-weight: 800; color: #fff; margin-bottom: 0.125rem; } .cf-modal-role { font-size: 0.625rem; font-weight: 600; color: var(--cf-green); letter-spacing: 0.075em; text-transform: uppercase; } .cf-modal-body { padding: 1rem 1.25rem 0.875rem !important; overflow-y: auto; flex: 1; } .cf-detail-row { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 0.063rem solid #2e2e2e; } .cf-detail-row:last-child { border-bottom: none; } .cf-detail-icon { width: 1.875rem; height: 1.875rem; border-radius: 0.438rem; background: #242424; border: 0.094rem solid #333; display: flex; align-items: center; justify-content: center; font-size: 0.813rem; flex-shrink: 0; margin-top: 0.063rem; } .cf-detail-label { font-size: 0.563rem; font-weight: 700; color: var(--cf-text-muted); letter-spacing: 0.094em; text-transform: uppercase; margin-bottom: 0.125rem; } .cf-detail-value { font-size: 0.75rem; font-weight: 600; color: #fff; line-height: 1.5; } .cf-bio-block { margin-top: 0.625rem !important; } .cf-bio-block .cf-detail-label { margin-bottom: 0.313rem !important; } .cf-bio-text { font-size: 0.75rem; color: var(--cf-text-muted); line-height: 1.7; background: #242424; border-radius: 0.5rem; padding: 0.688rem 0.813rem !important; border: 0.063rem solid #333; } .cf-modal-footer { padding: 0.75rem 1.25rem 1rem !important; display: flex; justify-content: flex-end; flex-shrink: 0; } .cf-modal-close-btn { padding: 0.5rem 1.375rem !important; background: #242424 !important; border: 0.094rem solid #333 !important; color: var(--cf-text-muted) !important; font-family: 'Oxanium', sans-serif; font-size: 0.75rem; font-weight: 600; border-radius: 3.125rem; cursor: pointer; transition: all .2s; outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .cf-modal-close-btn:hover,.cf-modal-close-btn:focus,.cf-modal-close-btn:active { background: #2a2a2a !important; border-color: var(--cf-green) !important; color: var(--cf-green) !important; outline: none !important; box-shadow: none !important; } /* GOOGLE MAP INFO WINDOW */ .gm-style .gm-style-iw-c { border-radius: 0.625rem !important; padding: 0 !important; box-shadow: 0 0.375rem 1.5rem rgba(0,0,0,.5) !important; border: 0.094rem solid #444 !important; overflow: hidden !important; } .gm-style .gm-style-iw-d { overflow: hidden !important; padding: 0 !important; } .gm-style .gm-style-iw-chr,.gm-ui-hover-effect { display: none !important; } .cf-infowin { display: flex; align-items: center; gap: 0.563rem; padding: 0.625rem 0.875rem; background: #1e1e1e; font-family: 'Oxanium', sans-serif; min-width: 10rem; } .cf-infowin-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--cf-green); display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 900; color: #fff; flex-shrink: 0; } .cf-infowin-name { font-size: 0.75rem; font-weight: 700; color: #fff; white-space: nowrap; display: flex; align-items: center; gap: 0.25rem; } .cf-infowin-tick { display: inline-flex; align-items: center; justify-content: center; width: 0.813rem; height: 0.813rem; border-radius: 50%; background: var(--cf-green); } .cf-infowin-tick svg { width: 0.438rem; height: 0.438rem; } .cf-infowin-role { font-size: 0.625rem; color: var(--cf-text-muted); margin-top: 0.063rem; } /* LOCATION AUTOCOMPLETE */ #cf-location-suggestions { position: fixed; background: #1e1e1e; border: 0.094rem solid rgba(149,198,36,.3); border-radius: 0.625rem; box-shadow: 0 0.75rem 2rem rgba(0,0,0,.55); z-index: 99999; overflow: hidden; display: none; min-width: 16.25rem; } #cf-location-suggestions.cf-open { display: block; } .cf-sug-item { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.875rem; cursor: pointer; border-bottom: 0.063rem solid #2a2a2a; transition: background .15s; } .cf-sug-item:last-child { border-bottom: none; } .cf-sug-item:hover,.cf-sug-item.cf-hovered { background: rgba(149,198,36,.08); } .cf-sug-icon { width: 1.625rem; height: 1.625rem; border-radius: 0.375rem; background: #2a2a2a; border: 0.063rem solid #333; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.063rem; } .cf-sug-icon svg { width: 0.75rem; height: 0.75rem; color: var(--cf-green); } .cf-sug-main { font-size: 0.75rem; font-weight: 700; color: #fff; line-height: 1.3; } .cf-sug-sub { font-size: 0.625rem; color: var(--cf-text-muted); margin-top: 0.063rem; opacity: .75; } .cf-sug-footer { padding: 0.375rem 0.875rem; display: flex; align-items: center; justify-content: flex-end; gap: 0.313rem; border-top: 0.063rem solid #2a2a2a; background: #181818; } .cf-sug-footer span { font-size: 0.563rem; color: var(--cf-text-muted); opacity: .5; letter-spacing: 0.031em; } /* RESPONSIVE */ @media (max-width: 56.25rem) { #cf-layout { grid-template-columns: 1fr; padding: 1.25rem 1.125rem 3rem; align-items: start; } #cf-map-col { position: static; } .cf-map-box { height: 16.25rem; min-height: unset; } #cf-cards-grid { grid-template-columns: 1fr 1fr; } #cf-hero { padding: 4.375rem 1.125rem 2.5rem; } } @media (max-width: 37.5rem) { #cf-hero { padding: 5rem 1.125rem 1.75rem; } .cf-hero-top { justify-content: center; text-align: center; margin-bottom: 0; } .cf-eyebrow { text-align: center; } .cf-hero-title { text-align: center; } #cf-cards-grid { grid-template-columns: 1fr; } #cf-layout { padding: 1rem 0.875rem 3rem; } .cf-search-group { flex-direction: column; gap: 0.5rem; } .cf-input-field { padding: 0.625rem 0.875rem; } .cf-search-btn { width: 100%; padding: 0.875rem 1.375rem; min-width: unset; border-radius: 0.625rem; align-self: auto; height: 3rem; } .cf-reset-btn { width: 100%; align-self: auto; height: 3rem; } }