/* ============================================================ WWPosts — Custom Styles Supports MDB light/dark via [data-cp-theme] on ============================================================ */ /* ---- Google Maps Places pac-container ---- */ /* Ensure the autocomplete dropdown always floats above navbar (z:1030), MDB modals (z:1055), and any other stacking contexts. */ .pac-container { z-index: 99999 !important; pointer-events: auto !important; } [data-mdb-theme="dark"] .pac-container { background: #2b3647; border-color: #3d4f6a; color: #e0e6f0; } [data-mdb-theme="dark"] .pac-item { background: #2b3647; color: #c5d0e0; border-color: #3d4f6a; } [data-mdb-theme="dark"] .pac-item:hover, [data-mdb-theme="dark"] .pac-item-selected { background: #384d6b; } /* New Places API widget (PlaceAutocompleteElement) in Bootstrap forms */ .input-group gmp-place-autocomplete.cp-place-autocomplete-widget, .input-group .cp-place-autocomplete-widget { flex: 1 1 auto; width: 1%; min-width: 0; } gmp-place-autocomplete.cp-place-autocomplete-widget { display: block; width: 100%; min-height: calc(1.5em + 0.75rem + 2px); border-radius: var(--bs-border-radius, 0.375rem); color-scheme: light dark; } .cp-places-address-summary { display: block; line-height: 1.35; word-break: break-word; white-space: normal; } .cp-places-address-summary__line1, .cp-places-address-summary__line2 { display: block; } .cp-bc__contact-text--location { white-space: pre-line; } .cp-bc__contact-text--location a { color: inherit; text-decoration: none; cursor: pointer; } .cp-bc__contact-text--location a:hover { color: inherit; text-decoration: underline; } [data-cp-theme="dark"] .cp-places-address-summary, [data-mdb-theme="dark"] .cp-places-address-summary { color: rgba(224, 230, 240, 0.92); } .cp-places-input-sink { clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } .cp-location-field--busy { opacity: 0.72; cursor: wait; } /* ---- Layout ---- */ html, body { height: 100%; } /* ---- Card header color classes survive MDB dark mode ---- */ /* MDB dark sets .card-header { background-color: #424242 !important } so we need higher specificity to keep colored headers visible. */ [data-cp-theme="dark"] .card-header.bg-primary, [data-mdb-theme="dark"] .card-header.bg-primary, .card-header.bg-primary { background-color: #3b71ca !important; color: #fff !important; } [data-cp-theme="dark"] .card-header.bg-success, [data-mdb-theme="dark"] .card-header.bg-success, .card-header.bg-success { background-color: #14a44d !important; color: #fff !important; } [data-cp-theme="dark"] .card-header.bg-info, [data-mdb-theme="dark"] .card-header.bg-info, .card-header.bg-info { background-color: #54b4d3 !important; color: #fff !important; } [data-cp-theme="dark"] .card-header.bg-danger, [data-mdb-theme="dark"] .card-header.bg-danger, .card-header.bg-danger { background-color: #dc4c64 !important; color: #fff !important; } [data-cp-theme="dark"] .card-header.bg-warning, [data-mdb-theme="dark"] .card-header.bg-warning, .card-header.bg-warning { background-color: #e4a11b !important; color: #000 !important; } .card-header.bg-dark { background-color: #1a1a2e !important; color: #fff !important; } [data-cp-theme="dark"] .card-header.bg-dark, [data-mdb-theme="dark"] .card-header.bg-dark { background-color: #0d0d1a !important; color: #fff !important; } /* ---- Override MDB dark body-color (#4f4f4f) with white ---- */ /* MDB dark sets --mdb-body-color:#4f4f4f on :root (specificity 0,1,0). */ /* html[data-mdb-theme="dark"] has specificity 0,1,1 which wins. */ html[data-cp-theme="dark"], html[data-mdb-theme="dark"] { --mdb-body-color: rgba(255, 255, 255, 0.87); --mdb-card-color: rgba(255, 255, 255, 0.87); --mdb-card-cap-color: rgba(255, 255, 255, 0.87); } /* Firefox doesn't inherit font-family on form elements */ /* Define --mdb-font-roboto which MDB references but never defines */ :root { --mdb-font-roboto: Roboto, "Helvetica Neue", Arial, sans-serif; } /* Firefox doesn't inherit font-family on form elements */ button, input, select, textarea { font-family: var(--mdb-font-roboto, inherit); } body { display: flex; flex-direction: column; min-height: 100vh; transition: background-color .2s, color .2s; } /* ---- Shared page scaffolding (detail/edit consistency) ---- */ .cp-page-heading { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } .cp-page-heading--between { justify-content: space-between; gap: .75rem; } .cp-page-title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .cp-page-title--compact { font-size: 1.25rem; font-weight: 600; } .cp-action-footer { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } .cp-action-footer--center { justify-content: center; } .cp-action-btn { min-width: 160px; } /* Action footer buttons use explicit MDB primary blue (not var(--bs-primary), which MDB omits). */ .cp-content-card { --bs-card-cap-bg: inherit; --mdb-card-cap-bg: inherit; } /* Keep neutral cap background only for un-themed caps. Do NOT override Bootstrap contextual headers (bg-info, bg-success, etc.). */ .cp-content-card .card-header:not([class*="bg-"]), .cp-content-card .card-footer:not([class*="bg-"]) { background-color: inherit !important; } /* ─── Show page cover image (Card 2 — events/show, trails/show) ───── Same *layout role* as x-post-card image: spans the full content card width, fixed 360:220 band, object-fit cover (like .card-img-top on a grid card). */ /* Descendant selector (not >): avoids mismatch if a wrapper is ever inserted */ .card.cp-content-card .cp-show-cover { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; aspect-ratio: 360 / 220; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; flex-shrink: 0 !important; } .card.cp-content-card .cp-show-cover::before { content: none !important; display: none !important; } .card.cp-content-card .cp-show-cover__img, .cp-content-card .cp-show-cover .cp-show-cover__img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; display: block !important; } .cp-show-cover .cp-card-img-type-badge, .cp-show-cover .cp-card-img-price-badge, .cp-show-cover .cp-card-img-title-overlay, .cp-show-cover .cp-multi-photo-badge, .cp-market-image-stage .cp-card-img-type-badge, .cp-market-image-stage .cp-card-img-price-badge, .cp-market-image-stage .cp-card-img-title-overlay, .cp-market-image-stage .cp-multi-photo-badge, .cp-product-image-stage .cp-card-img-type-badge, .cp-product-image-stage .cp-card-img-price-badge, .cp-product-image-stage .cp-card-img-title-overlay, .cp-product-image-stage .cp-multi-photo-badge { z-index: 2; } .cp-detail-meta-row { padding: .7rem 1rem; } .cp-detail-posted-date { color: var(--mdb-secondary-color, #6c757d); font-size: .875rem; font-weight: 600; white-space: nowrap; } .cp-popup-only-action { display: none !important; } /* Owner actions (Edit) stay available in the glass detail popup. */ .cp-popup-owner-action { display: inline-flex; } .cp-event-schedule-line { font-size: clamp(.72rem, 2.3vw, .84rem); letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; } .cp-event-schedule-muted { font-size: .92em; } .cp-event-schedule-separator { display: inline-block; margin-inline: .25rem; } .cp-content-card .cp-location-link, .cp-content-card .cp-detail-address-line { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.68rem, 2.1vw, .82rem); line-height: 1.25; } .cp-content-card .cp-location-link { vertical-align: bottom; } .cp-content-card .cp-location-link i, .cp-content-card .cp-detail-address-line i { flex-shrink: 0; } :is(.cp-show-cover, .cp-market-image-stage, .cp-product-image-stage) .cp-card-img-type-badge { position: absolute; top: 0.55rem; left: 0.55rem; z-index: 4; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.18) !important; letter-spacing: 0.07em; } :is(.cp-show-cover, .cp-market-image-stage, .cp-product-image-stage) .cp-card-img-price-badge { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 4; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } :is(.cp-show-cover, .cp-market-image-stage, .cp-product-image-stage) .cp-card-img-title-overlay { position: absolute; bottom: 0; left: 0; right: auto; max-width: 78%; padding: 1.8rem 1.8rem 0.6rem 0.9rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.18) 70%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%); mask-image: linear-gradient(to right, black 60%, transparent 100%); pointer-events: none; border-radius: 0; } :is(.cp-show-cover, .cp-market-image-stage, .cp-product-image-stage) .cp-card-img-title-text { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.3; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.012em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.55); } /* Card grid layout — used on trails, events, products, home */ .cp-card-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cp-card-grid-min, 280px)), var(--cp-card-max-width, 360px))); gap: var(--cp-card-grid-gap, 1.25rem) !important; align-items: start; justify-content: center; } .cp-card-col { min-width: 0; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; /* gap handles spacing */ max-width: var(--cp-card-max-width, 360px); width: 100%; } .cp-card-col.cp-card-is-hidden, .cp-card-is-hidden { display: none !important; } .cp-card-grid > .cp-card-col:has(> .cp-sponsored-card) { align-self: stretch; display: flex; align-items: center; justify-content: center; } .cp-card-grid > .cp-card-col:has(> .cp-sponsored-card) > .cp-sponsored-card { margin: auto; } /* Sponsored ads in post card grids — scale to ~80% of neighboring post cards */ .cp-sponsored-card--feed, .cp-sponsored-card--section-rail { --cp-sponsored-preview-scale: calc(var(--cp-card-max-width, 360px) * var(--cp-feed-ad-scale, 0.8) / var(--cp-ad-canvas-width, 370px)); --cp-sponsored-preview-width: calc(var(--cp-card-max-width, 360px) * var(--cp-feed-ad-scale, 0.8)); --cp-sponsored-preview-height: calc(var(--cp-ad-canvas-height, 500px) * var(--cp-sponsored-preview-scale)); --cp-sponsored-min-height: var(--cp-sponsored-preview-height); } @media (max-width: 767.98px) and (min-width: 450px) { .cp-sponsored-card--feed, .cp-sponsored-card--section-rail { --cp-sponsored-preview-scale: calc(min(46vw, var(--cp-card-max-width, 360px)) * var(--cp-feed-ad-scale, 0.8) / var(--cp-ad-canvas-width, 370px)); --cp-sponsored-preview-width: calc(min(46vw, var(--cp-card-max-width, 360px)) * var(--cp-feed-ad-scale, 0.8)); --cp-sponsored-preview-height: calc(var(--cp-ad-canvas-height, 500px) * var(--cp-sponsored-preview-scale)); } } @media (max-width: 449.98px) { .cp-sponsored-card--feed, .cp-sponsored-card--section-rail { --cp-sponsored-preview-scale: calc(min(100%, var(--cp-card-max-width, 360px)) * var(--cp-feed-ad-scale, 0.8) / var(--cp-ad-canvas-width, 370px)); --cp-sponsored-preview-width: calc(min(100%, var(--cp-card-max-width, 360px)) * var(--cp-feed-ad-scale, 0.8)); --cp-sponsored-preview-height: calc(var(--cp-ad-canvas-height, 500px) * var(--cp-sponsored-preview-scale)); } } .cp-sponsored-card--feed:has(> .cp-ad-card-root), .cp-sponsored-card--section-rail:has(> .cp-ad-card-root) { display: flex; align-items: center; justify-content: center; width: var(--cp-sponsored-preview-width); max-width: 100%; min-height: var(--cp-sponsored-preview-height); height: var(--cp-sponsored-preview-height); overflow: hidden; margin-left: auto; margin-right: auto; border-radius: .95rem; } .cp-sponsored-card--feed > .cp-ad-card-root, .cp-sponsored-card--section-rail > .cp-ad-card-root { width: var(--cp-ad-canvas-width, 370px) !important; min-width: var(--cp-ad-canvas-width, 370px) !important; max-width: var(--cp-ad-canvas-width, 370px) !important; height: var(--cp-ad-canvas-height, 500px) !important; min-height: var(--cp-ad-canvas-height, 500px) !important; transform: scale(var(--cp-sponsored-preview-scale)); transform-origin: center center; flex: 0 0 auto; } .cp-sponsored-card--feed > .cp-ad-card-root .cp-map-slot-ad-card, .cp-sponsored-card--feed > .cp-ad-card-root .cp-map-slot-ad-card__shell, .cp-sponsored-card--section-rail > .cp-ad-card-root .cp-map-slot-ad-card, .cp-sponsored-card--section-rail > .cp-ad-card-root .cp-map-slot-ad-card__shell { width: var(--cp-ad-canvas-width, 370px) !important; height: var(--cp-ad-canvas-height, 500px) !important; min-height: var(--cp-ad-canvas-height, 500px) !important; max-height: var(--cp-ad-canvas-height, 500px) !important; } @media (min-width: 450px) and (max-width: 767.98px) { .cp-card-grid { --cp-card-grid-gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, min(46vw, var(--cp-card-max-width, 360px)))); } .cp-card-grid > .cp-card-col { max-width: none; } } .cp-item-map-shell, .cp-event-show-map-shell, .cp-trail-map-shell, .cp-market-map-shell { position: static !important; top: auto !important; } :root { --cp-light-border: rgba(18, 45, 73, 0.28); --cp-light-border-strong: rgba(18, 45, 73, 0.42); --cp-light-shadow: 0 10px 28px rgba(15, 42, 68, 0.1); --cp-page-max-width: 100%; --cp-page-gutter: clamp(10px, 1.3vw, 22px); --cp-card-max-width: 360px; --cp-card-grid-min: 280px; --cp-card-grid-gap: clamp(0.85rem, 1.35vw, 1.35rem); /* Feed-embedded sponsored ads: ~75–85% of post card footprint (default 80%) */ --cp-feed-ad-scale: 0.8; --cp-ad-canvas-width: 370px; --cp-ad-canvas-height: 500px; --cp-page-surface-bg: #ffffff; --cp-table-head-bg: #e8f0fa; --cp-table-surface-bg: #ffffff; } [data-cp-theme="dark"], [data-mdb-theme="dark"] { --cp-page-surface-bg: #1A1A2E; --cp-table-head-bg: #1a2940; --cp-table-surface-bg: #152238; } /* ---- Full-page dark mode ---- */ [data-cp-theme="dark"] body, [data-mdb-theme="dark"] body { background-color: #1A1A2E !important; color: #e0e0e0 !important; } [data-cp-theme="dark"] .cp-main, [data-mdb-theme="dark"] .cp-main { background-color: #1A1A2E; } /* Containers & generic wrappers */ [data-cp-theme="dark"] .container, [data-cp-theme="dark"] .container-fluid, [data-cp-theme="dark"] section { background-color: transparent; color: inherit; } /* Cards — Global rounding */ .card { border-radius: 0.75rem !important; } .card-header { border-radius: 0.75rem 0.75rem 0 0 !important; } .card-header:last-child { border-radius: 0.75rem !important; } .card > :last-child { border-radius: 0 0 0.75rem 0.75rem !important; } .card-header + .card-body, .card-header + .list-group { border-radius: 0 0 0.75rem 0.75rem !important; } /* Cards — Light theme */ [data-cp-theme="light"] .card, [data-mdb-theme="light"] .card { border: 3.5px solid var(--cp-light-border) !important; box-shadow: 0 3px 12px rgba(15, 42, 68, 0.07); } [data-cp-theme="light"] .card-header, [data-cp-theme="light"] .card-footer, [data-mdb-theme="light"] .card-header, [data-mdb-theme="light"] .card-footer { border-color: var(--cp-light-border) !important; } [data-cp-theme="dark"] .card:not(.cp-card):not(.cp-market-listing-bottom):not(.cp-bc), [data-cp-theme="dark"] .card-body { background-color: #424242 !important; color: var(--mdb-body-color, #ddd) !important; border-color: rgba(255,255,255,.08) !important; } [data-cp-theme="dark"] .cp-bc, [data-mdb-theme="dark"] .cp-bc { border: 2px solid rgba(186, 216, 246, 0.72) !important; box-shadow: inset 0 2px 0 rgba(231, 243, 255, 0.34), inset 0 -3px 0 rgba(0, 0, 0, 0.62), inset 2px 0 0 rgba(208, 228, 255, 0.16), inset -2px 0 0 rgba(0, 0, 0, 0.48), 0 16px 34px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(112, 162, 224, 0.28) !important; } [data-cp-theme="dark"] .cp-bc.cp-bc--ic, [data-mdb-theme="dark"] .cp-bc.cp-bc--ic { border-color: rgba(186, 216, 246, 0.78) !important; box-shadow: inset 0 2px 0 rgba(231, 243, 255, 0.34), inset 0 -3px 0 rgba(0, 0, 0, 0.62), inset 2px 0 0 rgba(208, 228, 255, 0.16), inset -2px 0 0 rgba(0, 0, 0, 0.48), 0 16px 34px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(112, 162, 224, 0.28) !important; } [data-cp-theme="dark"] .cp-bc.cp-bc--bc, [data-mdb-theme="dark"] .cp-bc.cp-bc--bc { border-color: rgba(156, 214, 138, 0.8) !important; box-shadow: inset 0 2px 0 rgba(223, 255, 212, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.66), inset 2px 0 0 rgba(183, 237, 165, 0.12), inset -2px 0 0 rgba(0, 0, 0, 0.5), 0 16px 34px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(90, 164, 80, 0.32) !important; } html[data-cp-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail .card, html[data-mdb-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail .card, html[data-cp-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail .card-body, html[data-mdb-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail .card-body, html[data-cp-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail.card, html[data-mdb-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail.card, html[data-cp-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail > .card-header, html[data-mdb-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail > .card-header, html[data-cp-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail > .card-body, html[data-mdb-theme="dark"] body.cp-market-show-page .cp-market-show-shell .cp-market-listing-detail > .card-body { background-color: transparent !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } [data-cp-theme="dark"] .card-header, [data-cp-theme="dark"] .card-footer { background-color: #3a3a3a !important; border-color: rgba(255,255,255,.08) !important; color: var(--mdb-body-color, #ccc) !important; } /* Admin panels & wrappers — Global rounding */ .cp-adm-map-shell, .cp-adm-controls, .cp-businesses-search-shell, .cp-map-template-controls, .cp-map-template-map-panel { border-radius: 0.85rem !important; } /* Home sections — Match card rounding */ .cp-home-section { border-radius: 0.75rem !important; } /* Form shells & containers */ .cp-form-shell, .cp-filter-shell, .cp-control-panel { border-radius: 0.75rem !important; } /* Market listing (and similar): checkbox + label in a bordered tile without Bootstrap/MDB .form-check absolute positioning fighting the box layout */ .cp-check-tile { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; min-width: 0; margin-bottom: 0; cursor: pointer; padding-left: 0; } .cp-check-tile .form-check-input { position: static; float: none; margin: 0.35rem 0 0 0; flex-shrink: 0; } .cp-check-tile__body { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } /* List groups */ [data-cp-theme="light"] .list-group-item, [data-mdb-theme="light"] .list-group-item { border-color: var(--cp-light-border) !important; } [data-cp-theme="dark"] .list-group-item { background-color: #424242 !important; border-color: rgba(255,255,255,.08) !important; color: #ddd !important; } /* Active nav item in settings sidebar — visible on both themes */ .list-group-item.active, [data-cp-theme="dark"] .list-group-item.active, [data-mdb-theme="dark"] .list-group-item.active { background-color: #3b71ca !important; border-color: #3b71ca !important; color: #fff !important; } [data-cp-theme="dark"] .list-group-item-action:not(.active):hover, [data-mdb-theme="dark"] .list-group-item-action:not(.active):hover { background-color: rgba(255,255,255,.08) !important; color: #fff !important; } /* Tables */ [data-cp-theme="light"] .cp-track-hero, [data-mdb-theme="light"] .cp-track-hero { border: 1px solid rgba(128, 128, 128, .2); border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 20px rgba(8, 30, 49, 0.08); } [data-cp-theme="dark"] .cp-track-hero, [data-mdb-theme="dark"] .cp-track-hero { background: #121c2a; border-color: rgba(255, 255, 255, .12); box-shadow: none; } [data-cp-theme="light"] .cp-track-hero .table-responsive, [data-mdb-theme="light"] .cp-track-hero .table-responsive { border: none; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; } [data-cp-theme="dark"] .cp-track-hero .table-responsive, [data-mdb-theme="dark"] .cp-track-hero .table-responsive { border: none; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; } [data-cp-theme="light"] .cp-track-hero .table > :not(caption) > thead > tr > th, [data-mdb-theme="light"] .cp-track-hero .table > :not(caption) > thead > tr > th { background: rgba(15, 76, 129, 0.08); border-bottom: 1px solid var(--cp-light-border-strong); color: #16324f; font-weight: 700; letter-spacing: .01em; } [data-cp-theme="light"] .cp-track-hero .table > :not(caption) > tbody > tr > *, [data-mdb-theme="light"] .cp-track-hero .table > :not(caption) > tbody > tr > * { border-color: rgba(18, 45, 73, 0.16); } /* Card-wrapped tables (Manage Posts, etc.) */ [data-cp-theme="light"] .cp-main .card .table-responsive, [data-mdb-theme="light"] .cp-main .card .table-responsive { border: 1px solid var(--cp-light-border); border-radius: 1rem; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 22px rgba(8, 30, 49, 0.08); /* auto (not hidden) so columns can scroll horizontally on mobile/desktop; border-radius still clips the scrolled content to rounded corners. */ overflow: auto; } [data-cp-theme="dark"] .cp-main .card .table-responsive, [data-mdb-theme="dark"] .cp-main .card .table-responsive { border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(18, 28, 42, 0.9); box-shadow: none; overflow: auto; } [data-cp-theme="light"] .cp-main .card .table > :not(caption) > thead > tr > th, [data-mdb-theme="light"] .cp-main .card .table > :not(caption) > thead > tr > th { background-color: var(--cp-table-head-bg, #e8f0fa) !important; background-image: none !important; border-bottom: 1px solid var(--cp-light-border-strong); color: #16324f; font-weight: 700; letter-spacing: .01em; } [data-cp-theme="dark"] .cp-main .card .table > :not(caption) > thead > tr > th, [data-mdb-theme="dark"] .cp-main .card .table > :not(caption) > thead > tr > th { background-color: var(--cp-table-head-bg, #1a2940) !important; background-image: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: #9db5d8; font-weight: 700; letter-spacing: .01em; } [data-cp-theme="light"] .cp-main .card .table > :not(caption) > tbody > tr > *, [data-mdb-theme="light"] .cp-main .card .table > :not(caption) > tbody > tr > * { border-color: rgba(18, 45, 73, 0.16); } /* Remove card styling when table-responsive is present */ [data-cp-theme="light"] .cp-main .card:has(.table-responsive), [data-mdb-theme="light"] .cp-main .card:has(.table-responsive) { border: none; background: transparent; box-shadow: none; } [data-cp-theme="dark"] .cp-main .card:has(.table-responsive), [data-mdb-theme="dark"] .cp-main .card:has(.table-responsive) { border: none; background: transparent; box-shadow: none; } [data-cp-theme="dark"] .table { --mdb-table-bg: #424242; --mdb-table-border-color: rgba(255,255,255,.08); color: #ddd; } [data-cp-theme="dark"] .table > :not(caption) > * > * { background-color: #424242; color: #ddd; border-color: rgba(255,255,255,.08); } [data-cp-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #3a3a3a !important; } /* Table row highlight (hover/active) should be blue, not gray */ [data-cp-theme="dark"] .table-hover > tbody > tr:hover > *, [data-cp-theme="dark"] .table > tbody > tr.table-active > *, [data-cp-theme="dark"] .table > tbody > tr.active > * { background-color: rgba(59, 113, 202, 0.32) !important; color: #f5f9ff !important; } [data-cp-theme="light"] .table-hover > tbody > tr:hover > *, [data-cp-theme="light"] .table > tbody > tr.table-active > *, [data-cp-theme="light"] .table > tbody > tr.active > * { background-color: rgba(13, 110, 253, 0.16) !important; } /* Forms / Inputs — borderless recessed 3D (see §2 FORM CONTROLS); flat when readonly/disabled */ .form-control:not([readonly]):not([disabled]), .form-select:not([disabled]), textarea:not([readonly]):not([disabled]) { border: 0 !important; border-color: transparent !important; } .form-control[readonly], .form-control:disabled, .form-select:disabled, textarea[readonly], textarea:disabled { border: 0 !important; background-color: #f5f6f7 !important; color: #6c757d !important; opacity: 1 !important; box-shadow: inset 0 1px 3px rgba(18, 45, 73, 0.08) !important; } [data-cp-theme="dark"] .form-control[readonly], [data-cp-theme="dark"] .form-control:disabled, [data-cp-theme="dark"] .form-select:disabled, [data-cp-theme="dark"] textarea[readonly], [data-cp-theme="dark"] textarea:disabled, [data-mdb-theme="dark"] .form-control[readonly], [data-mdb-theme="dark"] .form-control:disabled, [data-mdb-theme="dark"] .form-select:disabled, [data-mdb-theme="dark"] textarea[readonly], [data-mdb-theme="dark"] textarea:disabled { background-color: #2e2e2e !important; color: #777 !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important; } [data-cp-theme="dark"] .form-control:not([readonly]):not([disabled]), [data-cp-theme="dark"] .form-select:not([disabled]), [data-cp-theme="dark"] textarea:not([readonly]):not([disabled]), [data-mdb-theme="dark"] .form-control:not([readonly]):not([disabled]), [data-mdb-theme="dark"] .form-select:not([disabled]), [data-mdb-theme="dark"] textarea:not([readonly]):not([disabled]) { background-color: #3a3a3a !important; color: #e0e0e0 !important; } [data-cp-theme="dark"] .form-control::placeholder { color: #888 !important; } [data-cp-theme="dark"] label, [data-cp-theme="dark"] .form-label { color: #ccc !important; } /* Keep adjacent list-filter controls visually uniform */ .cp-equal-controls .form-control, .cp-equal-controls .form-select, .cp-equal-controls .cp-chip-input { min-height: calc(1.5em + .75rem + 2px); height: calc(1.5em + .75rem + 2px); } .cp-equal-controls .cp-chip-input { align-items: center; } /* Input groups */ [data-cp-theme="dark"] .input-group-text { background-color: #3a3a3a !important; color: #ccc !important; border-color: rgba(255,255,255,.2) !important; } /* Dropdowns */ [data-cp-theme="dark"] .dropdown-menu { background-color: #3a3a3a !important; border-color: rgba(255,255,255,.1) !important; } [data-cp-theme="dark"] .dropdown-item { color: #ddd !important; } [data-cp-theme="dark"] .dropdown-item:hover, [data-cp-theme="dark"] .dropdown-item:focus { background-color: #4a4a4a !important; color: #fff !important; } [data-cp-theme="dark"] .dropdown-divider { border-color: rgba(255,255,255,.1) !important; } /* Modals */ [data-cp-theme="dark"] .modal-content { background-color: #424242 !important; color: #ddd !important; border: 2px solid rgba(59, 113, 202, 0.65) !important; } [data-cp-theme="light"] .modal-content, [data-mdb-theme="light"] .modal-content { border: 2px solid rgba(59, 113, 202, 0.55) !important; } [data-cp-theme="light"] .dropdown-menu, [data-mdb-theme="light"] .dropdown-menu, [data-cp-theme="light"] .alert, [data-mdb-theme="light"] .alert, [data-cp-theme="light"] .page-link, [data-mdb-theme="light"] .page-link { border-color: var(--cp-light-border) !important; } [data-cp-theme="dark"] .modal-header, [data-cp-theme="dark"] .modal-footer { border-color: rgba(255,255,255,.08) !important; } /* Photo lightbox */ .cp-lightbox .modal-content { background: rgba(8, 10, 18, 0.80) !important; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1.5px solid rgba(255,255,255,.18) !important; border-radius: 1rem !important; overflow: hidden; color: #fff; } .cp-lightbox .modal-dialog { max-width: min(92vw, 960px); } .cp-lightbox .carousel-item img { padding: .5rem 1rem; } .cp-lightbox .btn-close-white { filter: invert(1) grayscale(1); } /* Global glass detail modal — used by post/ad cards across pages. */ .cp-global-detail-overlay, .cp-glass-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 1250; margin: 0; background: rgba(7, 18, 31, .46); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 1rem; overflow: auto; overscroll-behavior: contain; } .cp-global-detail-overlay.d-none, .cp-glass-overlay.d-none { display: none !important; } .cp-global-detail-modal, .cp-glass-modal { width: min(1100px, 96vw); height: min(88vh, 840px); border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .22); background: linear-gradient(170deg, rgba(12, 28, 46, .9), rgba(26, 46, 70, .84)); box-shadow: 0 28px 56px rgba(3, 12, 22, .42); overflow: hidden; display: flex; flex-direction: column; } .cp-glass-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; border-bottom: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); } .cp-glass-title { font-size: 1rem; font-weight: 700; color: #eaf4ff; } .cp-glass-close { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); cursor: pointer; } .cp-glass-close::before, .cp-glass-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.6px; background: #eaf4ff; } .cp-glass-close::before { transform: translate(-50%, -50%) rotate(45deg); } .cp-glass-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .cp-glass-body { flex: 1; min-height: 0; background: #fff; } .cp-global-detail-gallery { flex: 0 0 auto; padding: .65rem .8rem; border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(5, 14, 26, .42); } .cp-global-detail-gallery__stage { position: relative; display: flex; align-items: center; justify-content: center; gap: .6rem; } .cp-global-detail-gallery__track { width: min(100%, 520px); display: grid; place-items: center; } .cp-global-detail-gallery__item { display: none; width: 100%; pointer-events: none; } .cp-global-detail-gallery__item.is-active { display: block; } .cp-global-detail-gallery__img { display: block; width: 100%; max-height: 28vh; object-fit: contain; border-radius: .75rem; -webkit-user-select: none; user-select: none; pointer-events: none; } .cp-global-detail-gallery__btn { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); color: #fff; background: rgba(255,255,255,.12); } .cp-global-detail-gallery__count { margin-top: .35rem; color: rgba(234,244,255,.78); font-size: .78rem; font-weight: 700; text-align: center; } .cp-global-detail-overlay--photos-only .cp-global-detail-gallery { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; } .cp-global-detail-overlay--photos-only .cp-global-detail-gallery__img { max-height: min(72vh, 720px); } @media (max-width: 767.98px) { .cp-global-detail-gallery__stage { display: block; } .cp-global-detail-gallery__btn { display: none; } .cp-global-detail-gallery__track { width: 100%; display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; } .cp-global-detail-gallery__item, .cp-global-detail-gallery__item.is-active { display: block; flex: 0 0 82%; scroll-snap-align: center; } .cp-global-detail-gallery__img { max-height: 22vh; } } .cp-glass-body iframe { width: 100%; height: 100%; border: 0; background: #fff; } .cp-global-detail-card-slot { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; background: radial-gradient(circle at top, rgba(45, 77, 114, .95), rgba(8, 18, 32, .96)); } .cp-global-detail-card-slot.d-none { display: none !important; } .cp-global-detail-card-slot > .cp-ad-card-root, .cp-global-detail-card-slot > .cp-business-card { width: min(100%, 370px); height: min(78vh, 500px); } /* Alerts */ [data-cp-theme="dark"] .alert { border-color: rgba(255,255,255,.1) !important; } /* Breadcrumbs */ [data-cp-theme="dark"] .breadcrumb-item, [data-cp-theme="dark"] .breadcrumb-item a { color: #aaa !important; } [data-cp-theme="dark"] .breadcrumb-item.active { color: #e0e0e0 !important; } /* Headings and text helpers */ [data-cp-theme="dark"] h1, [data-cp-theme="dark"] h2, [data-cp-theme="dark"] h3, [data-cp-theme="dark"] h4, [data-cp-theme="dark"] h5, [data-cp-theme="dark"] h6 { color: #f0f0f0; } [data-cp-theme="dark"] .text-muted { color: #999 !important; } [data-cp-theme="dark"] .text-dark { color: #ddd !important; } [data-cp-theme="dark"] hr { border-color: rgba(255,255,255,.12); } /* Pagination */ [data-cp-theme="dark"] .page-link { background-color: #424242 !important; border-color: rgba(255,255,255,.1) !important; color: #aaa !important; } [data-cp-theme="dark"] .page-item.active .page-link { background-color: #3b71ca !important; border-color: #3b71ca !important; color: #fff !important; } /* Badges */ [data-cp-theme="dark"] .badge.bg-light { background-color: #4a4a4a !important; color: #ddd !important; } [data-cp-theme="dark"] .badge.bg-secondary { background-color: #5a5a5a !important; color: #e0e0e0 !important; } /* Section backgrounds on pages — let MDB dark theme control bg-white/bg-light */ [data-cp-theme="dark"] .bg-white, [data-cp-theme="dark"] .bg-light { background-color: #424242 !important; color: var(--mdb-body-color, #ddd) !important; } /* Clear fixed #cp-navbar-stack (main bar + optional QL row + alert strip). */ .cp-main { flex: 1 0 auto; padding-top: var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)); } /* Desktop QL second row — fallback before JS sets stack height. --cp-navbar-height is the full stack once JS runs; do not add quicklinks again. */ html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] .cp-main { padding-top: var( --cp-navbar-visible-height, var(--cp-navbar-height, calc(70px + 2.75rem)) ); } body.cp-glass-embed { background: transparent !important; } body.cp-glass-embed .cp-main { padding-top: 0 !important; } /* Global live-tracking notification bar (fixed below navbar; top: 0 when navbar hidden on scroll). */ .cp-track-live-banner-wrap { position: fixed; left: 0; right: 0; top: var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)); z-index: 1185; margin: 0; transition: top 0.28s ease; } .cp-track-live-banner { position: relative; width: 100%; border-radius: 0 0 12px 12px; color: #fff; isolation: isolate; } .cp-track-live-banner::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: inherit; pointer-events: none; } .cp-track-live-banner--custom { border: none; background: #198754; box-shadow: 0 8px 22px rgba(25, 135, 84, .28); } .cp-track-live-banner--public { border: none; background: linear-gradient(165deg, #f87171 0%, #dc2626 45%, #b91c1c 100%); box-shadow: 0 8px 22px rgba(220, 38, 38, .35); } .cp-track-live-banner__stop { display: block; width: 100%; } .cp-track-live-banner .text-muted { color: rgba(255, 255, 255, .9) !important; } .cp-track-live-banner__intro { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; } .cp-track-live-banner__status-row { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; } .cp-track-live-banner__title { font-size: 1.05rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; } .cp-live-banner-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.65rem; color: rgba(255, 255, 255, .95); font-size: 0.875rem; font-weight: 500; line-height: 1.35; padding-left: 1.15rem; } .cp-live-banner-meta__label { flex: 0 0 auto; font-weight: 600; opacity: 0.95; white-space: nowrap; line-height: 1.65rem; } .cp-live-banner-meta__chips { display: inline-flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; min-height: 1.65rem; } .cp-live-banner-meta__chips .badge { font-size: 0.78rem; font-weight: 600; line-height: 1.2; padding: 0.28rem 0.55rem; } .cp-live-banner-meta__chips .cp-live-banner-chip, .cp-live-banner-meta__chips .cp-user-chip { --cp-chip-content: #fff; --cp-chip-icon: rgba(255, 255, 255, 0.92); --cp-chip-text: #fff; --cp-chip-text-hover: #fff; font-size: 0.78rem; min-height: 1.65rem; padding: 0 0.3rem 0 0; max-width: min(100%, 10rem); vertical-align: middle; } .cp-live-banner-meta__chips .cp-user-chip .cp-chip__avatar, .cp-live-banner-meta__chips .cp-user-chip .cp-chip__avatar-fallback { width: 1.65rem; min-width: 1.65rem; height: 1.65rem; margin: 0; border-width: 1px; border-radius: 50%; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 6px rgba(0, 0, 0, 0.35); } .cp-live-banner-meta__chips .cp-user-chip .cp-chip__avatar-fallback { font-size: 0.62rem; } .cp-live-banner-meta__chips .cp-user-chip .cp-chip__handle, .cp-live-banner-meta__chips .cp-user-chip .cp-chip__title { color: #fff !important; font-size: 0.78rem; } @media (min-width: 576px) { .cp-track-live-banner__intro { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .cp-live-banner-meta { padding-left: 0; margin-left: 0.15rem; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.35); } } .cp-track-live-banner--custom .cp-live-dot { width: .6rem; height: .6rem; border-radius: 999px; background: #22c55e; display: inline-block; box-shadow: 0 0 0 .35rem rgba(34, 197, 94, .22); animation: cp-live-banner-dot-pulse 1.4s ease-in-out infinite; } .cp-track-live-banner--public .cp-live-dot { width: .6rem; height: .6rem; border-radius: 999px; background: #fecaca; display: inline-block; box-shadow: 0 0 0 .35rem rgba(254, 202, 202, .35); animation: cp-live-banner-dot-pulse 1.4s ease-in-out infinite; } @keyframes cp-live-banner-dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } body.cp-live-tracking-active:not(.cp-glass-embed) .cp-main { padding-top: calc( var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)) + var(--cp-live-banner-height, 0px) ); } /* Live / track map: sticky under fixed live banner (top set in cpSyncMapShellTop). */ [data-cp-map-template="watch-map"].cp-map-template-shell--sticky { z-index: 1180; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] body.cp-live-tracking-active:not(.cp-glass-embed) .cp-main { padding-top: calc( var( --cp-navbar-visible-height, var(--cp-navbar-height, calc(70px + 2.75rem)) ) + var(--cp-live-banner-height, 0px) ); } body.cp-glass-embed .cp-page-center { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.cp-glass-embed .cp-recent-shell, body.cp-glass-embed .cp-page-shell { padding-top: .75rem !important; padding-bottom: .75rem !important; } body.cp-glass-embed .cp-recent-shell > .container, body.cp-glass-embed .cp-page-shell > .container, body.cp-glass-embed .container { max-width: 100% !important; width: 100% !important; } body.cp-glass-embed .cp-category-show-heading, body.cp-glass-embed .cp-recent-shell > .container > .d-flex.align-items-center.gap-2.mb-4, body.cp-glass-embed .cp-page-shell > .container > .d-flex.align-items-center.gap-2.mb-4, body.cp-glass-embed [data-cp-map-template], body.cp-glass-embed .cp-map-template-shell, body.cp-glass-embed .cp-content-card ~ * { display: none !important; } body.cp-glass-embed .cp-content-card { margin-bottom: 0 !important; } body.cp-glass-embed .cp-detail-posted-date { display: none !important; } body.cp-glass-embed .cp-content-card > .card-footer { justify-content: center !important; gap: .45rem !important; } body.cp-glass-embed .cp-content-card > .card-footer .cp-action-back { display: none !important; } body.cp-glass-embed .cp-content-card > .card-footer .cp-popup-hide-action { display: none !important; } body.cp-glass-embed .cp-content-card > .card-footer .cp-popup-only-action, body.cp-glass-embed .cp-content-card > .card-footer .cp-popup-owner-action { display: inline-flex !important; } body.cp-glass-embed .cp-content-card > .card-footer .btn, body.cp-glass-embed .cp-content-card > .card-footer button { align-items: center !important; display: inline-flex !important; font-size: 0 !important; height: 2.35rem !important; justify-content: center !important; min-width: 2.35rem !important; padding: .45rem !important; width: 2.35rem !important; } body.cp-glass-embed .cp-content-card > .card-footer .btn i, body.cp-glass-embed .cp-content-card > .card-footer button i, body.cp-glass-embed .cp-content-card > .card-footer .spinner-border { font-size: 1rem !important; margin: 0 !important; } body.cp-glass-embed .cp-content-card > .card-footer .cp-action-back, body.cp-glass-embed .cp-content-card > .card-footer .cp-popup-hide-action { display: none !important; } body.cp-glass-embed .cp-market-listing-detail > .card-footer .cp-popup-hide-action { display: none !important; } body.cp-glass-embed .cp-market-listing-detail > .card-footer .cp-popup-only-action, body.cp-glass-embed .cp-market-listing-detail > .card-footer .cp-popup-owner-action { display: inline-flex !important; } body.cp-glass-click-guard::after { content: ""; position: fixed; inset: 0; z-index: 2147483647; background: transparent; pointer-events: auto; } .cp-content-card .list-group-item > span.text-muted:first-child, .cp-content-card .list-group-item > div.text-muted:first-child, .cp-content-card .list-group-item > .cp-td-label:first-child { display: none !important; } .cp-content-card .list-group-item > .w-75 { width: 100% !important; flex: 1 1 auto; } .cp-content-card .card-body > h5.cp-section-title, .cp-content-card .card-body .text-muted.small.fw-semibold { display: none !important; } .cp-content-card table.table td:first-child.text-muted { display: none !important; } .cp-content-card table.table td:nth-child(2) { width: 100% !important; } .cp-market-detail-label { display: none !important; } .cp-market-detail-panel.card { border: 0 !important; box-shadow: none !important; background: transparent !important; } .cp-market-listing-detail.card, .cp-market-listing-detail > .card-header, .cp-market-listing-detail > .card-body, .cp-market-detail-panel > .card-body { border: 0 !important; border-width: 0 !important; box-shadow: none !important; background: transparent !important; } [data-cp-theme="dark"] .cp-market-listing-detail.card, [data-cp-theme="dark"] .cp-market-listing-detail > .card-header, [data-cp-theme="dark"] .cp-market-listing-detail > .card-body, [data-mdb-theme="dark"] .cp-market-listing-detail.card, [data-mdb-theme="dark"] .cp-market-listing-detail > .card-header, [data-mdb-theme="dark"] .cp-market-listing-detail > .card-body { background: transparent !important; } .cp-market-listing-detail, .cp-market-detail-panel { --bs-card-border-width: 0; --mdb-card-border-width: 0; } .cp-market-listing-detail > .card-footer { border-top: 0 !important; } .cp-market-listing-bottom { background-color: var(--cp-site-footer-bg) !important; overflow: hidden; } [data-cp-theme="dark"] .cp-market-listing-detail > .card-footer.cp-market-listing-bottom, [data-mdb-theme="dark"] .cp-market-listing-detail > .card-footer.cp-market-listing-bottom { background-color: var(--cp-site-footer-bg) !important; border-color: transparent !important; } .cp-market-listing-bottom .cp-market-listing-actions { background: transparent !important; } .cp-market-listing-top-strip { display: flex; justify-content: center; align-items: center; padding: .7rem 1rem; background: transparent; } .cp-market-listing-detail .cp-market-detail-location-wrap { max-width: 100%; min-width: 0; overflow: hidden; } .cp-market-listing-detail .cp-market-detail-location { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; min-width: 0; font-size: inherit; line-height: 1.5; color: inherit; } .cp-market-listing-detail .cp-market-detail-location__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cp-market-listing-detail .cp-market-detail-location .cp-pin-icon { flex-shrink: 0; } .cp-market-listing-actions.cp-action-footer { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; justify-content: center; padding: .75rem 1rem !important; } .cp-market-listing-actions .btn, .cp-market-listing-actions .cp-action-btn-wrap { width: 100%; min-width: 0 !important; max-width: none !important; } .cp-market-listing-actions .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: .45rem .7rem !important; font-size: .9rem !important; line-height: 1.5 !important; white-space: nowrap !important; } .cp-market-listing-actions .cp-action-btn-wrap { display: flex; min-width: 0; } .cp-market-listing-actions .cp-action-btn-wrap .btn[disabled] { pointer-events: none; } /* Market browse show — flat sections, matched horizontal gutters on mobile */ @media (max-width: 767.98px) { .cp-market-show-shell .cp-market-map-shell.cp-map-template-shell, .cp-market-show-shell .cp-market-map-shell .cp-map-template-map-card, .cp-market-show-shell .cp-market-map-shell .cp-map-template-map-panel { padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .cp-market-show-shell .cp-market-map-shell .cp-map-template-controls { padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .cp-market-show-shell .cp-market-listing-detail > .card-header, .cp-market-show-shell .cp-market-listing-detail > .card-body, .cp-market-show-shell .cp-market-listing-detail .cp-market-detail-panel > .card-body { padding-left: 0 !important; padding-right: 0 !important; } .cp-market-show-shell .cp-market-listing-detail { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .cp-market-show-shell .cp-market-listing-bottom { margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem)); margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem)); width: auto; border-radius: 0 !important; } .cp-market-show-shell .cp-market-listing-actions.cp-action-footer { padding-left: calc(0.5 * var(--bs-gutter-x, 1.5rem)) !important; padding-right: calc(0.5 * var(--bs-gutter-x, 1.5rem)) !important; padding-top: .75rem !important; padding-bottom: .75rem !important; } .cp-market-show-shell .cp-market-listing-detail .row.g-4, .cp-market-show-shell .cp-market-listing-detail .cp-market-detail-row { --bs-gutter-x: 0; align-items: flex-start !important; } .cp-market-show-shell .cp-market-detail-panel, .cp-market-show-shell .cp-market-detail-panel.card { height: auto !important; min-height: 0 !important; } } .cp-market-show-shell .cp-market-map-shell.cp-map-template-shell, .cp-market-show-shell .cp-market-map-shell .cp-map-template-map-card, .cp-market-show-shell .cp-market-map-shell .cp-map-template-map-panel, .cp-market-show-shell .cp-market-map-shell .cp-map-template-controls, .cp-market-show-shell .cp-market-listing-detail .cp-market-detail-panel.card, .cp-market-show-shell .cp-market-listing-detail .cp-market-detail-panel > .card-body { background: transparent !important; box-shadow: none !important; } [data-cp-theme="dark"] .cp-market-show-shell .cp-market-map-shell, [data-mdb-theme="dark"] .cp-market-show-shell .cp-market-map-shell, [data-cp-theme="dark"] .cp-market-show-shell .cp-market-map-shell .cp-map-template-map-card, [data-mdb-theme="dark"] .cp-market-show-shell .cp-market-map-shell .cp-map-template-map-card, [data-cp-theme="dark"] .cp-market-show-shell .cp-map-template-controls, [data-mdb-theme="dark"] .cp-market-show-shell .cp-map-template-controls { background: transparent !important; border-color: transparent !important; } .cp-mobile-scroll-top-bar.is-suppressed { opacity: 0 !important; transform: translate3d(0, 120%, 0) !important; pointer-events: none !important; } /* Market show — no grey card chrome (beats global dark .card / .card-body rules) */ .cp-market-show-shell .cp-market-listing-detail.card, .cp-market-show-shell .cp-market-listing-detail > .card-header, .cp-market-show-shell .cp-market-listing-detail > .card-body, .cp-market-show-shell .cp-market-listing-detail .card:not(.cp-market-listing-bottom), .cp-market-show-shell .cp-market-listing-detail .card-header, .cp-market-show-shell .cp-market-listing-detail .card-body, .cp-market-show-shell .cp-market-listing-detail .cp-market-detail-panel, .cp-market-show-shell .cp-market-listing-detail .cp-market-detail-panel.card, .cp-market-show-shell .cp-market-listing-detail .list-group-item { background-color: transparent !important; background: transparent !important; box-shadow: none !important; border-color: transparent !important; } [data-cp-theme="dark"] .cp-market-show-shell .cp-market-listing-detail .card:not(.cp-market-listing-bottom), [data-cp-theme="dark"] .cp-market-show-shell .cp-market-listing-detail .card-header, [data-cp-theme="dark"] .cp-market-show-shell .cp-market-listing-detail .card-body, [data-cp-theme="dark"] .cp-market-show-shell .cp-market-listing-detail.card, [data-cp-theme="dark"] .cp-market-show-shell .cp-market-listing-detail > .card-header, [data-cp-theme="dark"] .cp-market-show-shell .cp-market-listing-detail > .card-body, [data-mdb-theme="dark"] .cp-market-show-shell .cp-market-listing-detail .card:not(.cp-market-listing-bottom), [data-mdb-theme="dark"] .cp-market-show-shell .cp-market-listing-detail .card-header, [data-mdb-theme="dark"] .cp-market-show-shell .cp-market-listing-detail .card-body, [data-mdb-theme="dark"] .cp-market-show-shell .cp-market-listing-detail.card, [data-mdb-theme="dark"] .cp-market-show-shell .cp-market-listing-detail > .card-header, [data-mdb-theme="dark"] .cp-market-show-shell .cp-market-listing-detail > .card-body { background-color: transparent !important; border-color: transparent !important; } .cp-market-detail-spec { margin: 0; padding: 0; } .cp-market-detail-spec > li { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: .2rem 0 .2rem .75rem; } .cp-page-center { width: 100%; max-width: var(--cp-page-max-width, 100%); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* Full viewport width — map band expands; Bootstrap ad columns stay fixed via --cp-map-ad-max-width */ .cp-page-center .container { max-width: 100%; width: 100%; } @media (min-width: 1600px) { :root { --cp-card-grid-gap: clamp(1rem, 1.1vw, 1.5rem); } } /* ---- Navbar ---- */ #cp-navbar-stack { /* Full size at ≥1300px; overridden in compact + mobile tiers below. */ --cp-navbar-density-scale: .75; --cp-navbar-control-height: calc(3rem * var(--cp-navbar-density-scale)); --cp-navbar-icon-size: calc(3rem * var(--cp-navbar-density-scale)); --cp-navbar-control-gap: calc(0.75rem * var(--cp-navbar-density-scale)); --cp-navbar-bar-padding-y: calc(0.2rem * var(--cp-navbar-density-scale)); --cp-navbar-text-size: calc(1.38rem * var(--cp-navbar-density-scale)); --cp-navbar-stat-size: calc(1.6rem * var(--cp-navbar-density-scale)); /* Icon ↔ number (horizontal) — tune this, not --cp-navbar-stat-pad-y */ --cp-navbar-stat-icon-gap: calc(0.6rem * var(--cp-navbar-density-scale)); /* Outer inset around each stat cluster (not icon-to-digit spacing) */ --cp-navbar-stat-pad-x: calc(0.1rem * var(--cp-navbar-density-scale)); --cp-navbar-stat-pad-y: calc(0.4rem * var(--cp-navbar-density-scale)); /* Users count ↔ Posts count */ --cp-navbar-stats-sep-gap: calc(0.5rem * var(--cp-navbar-density-scale)); --cp-navbar-ql-row-padding-x: calc(0.5rem * var(--cp-navbar-density-scale)); --cp-navbar-ql-gap: var(--cp-navbar-control-gap); --cp-navbar-ql-font-size: calc(0.96rem * var(--cp-navbar-density-scale)); --cp-navbar-ql-icon-size: calc(1.22rem * var(--cp-navbar-density-scale)); /* QL buttons match the control strip (not a taller logo band) */ --cp-navbar-ql-inner-height: var(--cp-navbar-control-height); --cp-navbar-ql-height: calc(var(--cp-navbar-control-height) + (2 * var(--cp-navbar-bar-padding-y))); /* Brand matches QL control strip (logo height + title font) */ --cp-navbar-brand-title-size: var(--cp-navbar-ql-font-size); --cp-navbar-brand-logo-height: var(--cp-navbar-control-height); /* Main nav bar strip height (controls + vertical padding) — QL second row matches this */ --cp-navbar-bar-height: calc(var(--cp-navbar-control-height) + (2 * var(--cp-navbar-bar-padding-y))); --cp-navbar-nav-icon-size: calc(1.125rem * var(--cp-navbar-density-scale)); --cp-navbar-bell-icon-size: calc(1.35rem * var(--cp-navbar-density-scale)); --cp-navbar-ql-min-height: var(--cp-navbar-ql-inner-height); --cp-navbar-ql-height: var(--cp-navbar-bar-height); --cp-navbar-tu-height: var(--cp-navbar-control-height); --cp-navbar-tu-font-size: calc(1.2rem * var(--cp-navbar-density-scale)); --cp-navbar-tu-icon-size: calc(1.34rem * var(--cp-navbar-density-scale)); --cp-navbar-tu-theme-width: calc(9.5rem * var(--cp-navbar-density-scale)); --cp-navbar-tu-units-width: calc(9.5rem * var(--cp-navbar-density-scale)); /* Extra inset inside pill: avatar → account icon (does not space chip from badge icons) */ --cp-navbar-user-chip-pad-left-extra: calc(0.1rem * var(--cp-navbar-density-scale)); /* Clear gap between badge strip (e.g. lightbulb) and chip; includes avatar overhang */ --cp-navbar-user-chip-gap-before: calc(1.85rem * var(--cp-navbar-density-scale)); /* Count badges (messages, favorites, notifications total, etc.) */ --cp-navbar-badge-font-size: calc(0.82rem * var(--cp-navbar-density-scale)); --cp-navbar-badge-font-size-overlay: calc(0.78rem * var(--cp-navbar-density-scale)); --cp-navbar-badge-font-size-menu: calc(0.9rem * var(--cp-navbar-density-scale)); --cp-navbar-badge-min-width: calc(1.3rem * var(--cp-navbar-density-scale)); --cp-navbar-badge-min-width-menu: calc(1.7rem * var(--cp-navbar-density-scale)); /* Horizontal gap between count-badge icons (Messages, Favorites, bell, etc.) */ --cp-navbar-badge-gap: 0.12rem; /* Dropdown caret spacing (Notifications flyout, user chip menu, etc.) */ --cp-navbar-dropdown-caret-gap: 0.7rem; --cp-navbar-dropdown-caret-size: calc(var(--cp-navbar-text-size) * 0.62); --cp-navbar-dropdown-caret-stroke: 0.11em; /* User chip dropdown caret — bolder + higher contrast than notifications caret */ --cp-navbar-user-chip-caret-stroke: 0.13em; --cp-navbar-user-chip-caret-scale: 1.12; --cp-navbar-user-chip-caret-gap: 0.22rem; /* Icon hitbox for inline badge strip — smaller than --cp-navbar-icon-size */ --cp-navbar-badge-icon-size: calc(2.45rem * var(--cp-navbar-density-scale)); /* Flyout menus (user menu, Notifications, Feedback, etc.) */ --cp-navbar-dropdown-font-size: calc(1.25rem * var(--cp-navbar-density-scale)); --cp-navbar-dropdown-line-height: 1.1; --cp-navbar-auth-quick-label-size: calc(0.5rem * var(--cp-navbar-density-scale)); } /* Compact layout: match desktop density — do not upscale type below 1300px. */ html[data-cp-nav-layout="compact"] #cp-navbar-stack { --cp-navbar-density-scale: 0.75; --cp-navbar-user-chip-gap-before: 0.55rem; --cp-navbar-control-gap: 0.5rem; --cp-navbar-badge-font-size-menu: 0.875rem; --cp-navbar-auth-quick-label-size: 0.75rem; } /* Phone hamburger (<768px): ~76% of desktop density. */ @media (max-width: 767.98px) { #cp-navbar-stack { --cp-navbar-density-scale: 0.76; --cp-navbar-user-chip-gap-before: 0.4rem; --cp-navbar-control-gap: 0.38rem; } } #cp-navbar-stack .cp-navbar-brand-logo, #cp-navbar-stack .cp-navbar-brand-logo svg { height: var(--cp-navbar-brand-logo-height) !important; width: auto; } #cp-navbar-stack .cp-navbar .cp-navbar-controls .fa-lg, #cp-navbar-stack .cp-navbar .cp-navbar-controls .nav-link i { font-size: var(--cp-navbar-nav-icon-size); } #cp-navbar-stack .cp-navbar .navbar-toggler .fa-bars { font-size: var(--cp-navbar-nav-icon-size); } #cp-navbar-stack .cp-nav-live-tracking-chip { font-size: calc(0.72rem * var(--cp-navbar-density-scale)); padding: calc(0.2rem * var(--cp-navbar-density-scale)) calc(0.55rem * var(--cp-navbar-density-scale)); gap: calc(0.35rem * var(--cp-navbar-density-scale)); } #cp-navbar-stack .cp-nav-live-tracking-chip__dot { width: calc(0.45rem * var(--cp-navbar-density-scale)); height: calc(0.45rem * var(--cp-navbar-density-scale)); } /* Navbar user chip — same canonical size as body surfaces (e.g. User Management tables) */ #cp-navbar-stack .cp-chip-png, #cp-navbar-stack .cp-chip-png-wrap .cp-chip-png { height: var(--cp-chip-avatar-width) !important; } /* User chip spacing comes from parent flex gap (same as other nav controls). */ #cp-navbar-stack .cp-navbar-user-menu--auth { margin-inline-start: 0 !important; } #cp-navbar-stack .cp-navbar-user-menu--controls { margin-inline-start: 0 !important; } #cp-navbar-stack .cp-navbar-auth-links { gap: var(--cp-navbar-control-gap) !important; } #cp-navbar-stack .cp-navbar-auth-quick { gap: var(--cp-navbar-control-gap) !important; } #cp-navbar-stack .cp-navbar-end { gap: var(--cp-navbar-control-gap) !important; } #cp-navbar-stack .cp-navbar-bc-inline { gap: var(--cp-navbar-control-gap) !important; } #cp-navbar-stack .cp-navbar-controls__buttons, #cp-navbar-stack .cp-navbar-bar-actions { gap: var(--cp-navbar-control-gap) !important; } #cp-navbar-stack .cp-navbar-bc-inline > .nav-link:not(.cp-nav-btn) { width: var(--cp-navbar-badge-icon-size) !important; min-width: var(--cp-navbar-badge-icon-size) !important; height: var(--cp-navbar-badge-icon-size) !important; min-height: var(--cp-navbar-badge-icon-size) !important; } #cp-navbar-stack .cp-navbar-bc-inline > .cp-nav-btn--icon-only { flex-shrink: 0; position: relative; } #cp-navbar-stack .cp-navbar-bc-collapsed .cp-navbar-badge-menu__toggle.nav-link { height: var(--cp-navbar-badge-icon-size) !important; min-height: var(--cp-navbar-badge-icon-size) !important; } #cp-navbar-stack .cp-navbar-tablet-actions { gap: var(--cp-navbar-control-gap) !important; } #cp-navbar-stack .cp-navbar .cp-navbar-badge-menu-root { margin-inline: 0 !important; padding-inline: 0 !important; } #cp-navbar-stack .cp-navbar-user-menu .cp-navbar-user-toggle { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0 !important; } /* Account flyout — wide enough for admin labels (navbar uses static dropdown positioning). */ #cp-navbar-stack .cp-navbar-user-menu { position: relative; } #cp-navbar-stack .cp-navbar-user-menu .cp-navbar-nav-dropdown.dropdown-menu { --cp-navbar-account-menu-min: 17.75rem; margin-top: 0.5rem !important; padding: 0.375rem 0 !important; min-width: var(--cp-navbar-account-menu-min) !important; width: max-content !important; max-width: min(22rem, calc(100vw - 1rem)) !important; border-radius: 0.5rem; box-sizing: border-box; overflow-x: hidden; z-index: 1200; } #cp-navbar-stack .cp-navbar-user-menu .cp-navbar-nav-dropdown .dropdown-item, #cp-navbar-stack .cp-navbar-user-menu .cp-navbar-nav-dropdown .cp-navbar-dd-item { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } #cp-navbar-stack .cp-navbar-user-menu .cp-navbar-nav-dropdown .dropdown-item-text { max-width: 100% !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cp-navbar-stack .cp-navbar .cp-navbar-badge-menu-root .dropdown-toggle { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } #cp-navbar-stack .cp-navbar .cp-navbar-badge-menu-root .dropdown-toggle.cp-nav-btn { width: auto !important; min-width: var(--cp-navbar-control-height) !important; min-height: var(--cp-navbar-control-height) !important; height: var(--cp-navbar-control-height) !important; } #cp-navbar-stack .cp-navbar .cp-navbar-badge-menu-root .dropdown-toggle::after, #cp-navbar-stack .cp-navbar .cp-navbar-user-toggle::after { display: none !important; content: none !important; } #cp-navbar-stack .cp-navbar .cp-navbar-dropdown-caret-group { gap: var(--cp-navbar-dropdown-caret-gap) !important; } #cp-navbar-stack .cp-navbar-user-toggle .cp-navbar-dropdown-caret-group { gap: var(--cp-navbar-user-chip-caret-gap) !important; } #cp-navbar-stack .cp-navbar .cp-navbar-dropdown-caret { font-size: var(--cp-navbar-dropdown-caret-size) !important; font-weight: 900; line-height: 1; color: var(--cp-navbar-dropdown-caret-color, inherit) !important; opacity: 1; -webkit-text-stroke: var(--cp-navbar-dropdown-caret-stroke) currentColor; paint-order: stroke fill; } /* Notifications caret on primary btn — white glyph (not nav-link currentColor) */ #cp-navbar-stack .cp-navbar-badge-menu-root .cp-nav-btn .cp-navbar-dropdown-caret { --cp-navbar-dropdown-caret-color: #fff; color: #fff !important; } /* User chip menu: match chip border accent — bolder, brighter for navbar contrast */ #cp-navbar-stack .cp-navbar-user-toggle .cp-navbar-dropdown-caret { font-size: calc(var(--cp-navbar-dropdown-caret-size) * var(--cp-navbar-user-chip-caret-scale)) !important; -webkit-text-stroke: var(--cp-navbar-user-chip-caret-stroke) currentColor; text-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.65), 0 0 10px color-mix(in srgb, var(--cp-navbar-dropdown-caret-color, currentColor) 45%, transparent); } #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--user) { --cp-navbar-dropdown-caret-color: #e9d5ff; --cp-navbar-dropdown-caret-hover-color: #ffffff; } #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--moderator) { --cp-navbar-dropdown-caret-color: #6ee7b7; --cp-navbar-dropdown-caret-hover-color: #f2fff9; } #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--admin) { --cp-navbar-dropdown-caret-color: #fca5a5; --cp-navbar-dropdown-caret-hover-color: #fff8f8; } #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--superuser) { --cp-navbar-dropdown-caret-color: #d8b4fe; --cp-navbar-dropdown-caret-hover-color: #faf6ff; } [data-cp-theme="light"] #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--user), [data-mdb-theme="light"] #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--user) { --cp-navbar-dropdown-caret-color: #7c3aed; } [data-cp-theme="light"] #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--moderator), [data-mdb-theme="light"] #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--moderator) { --cp-navbar-dropdown-caret-color: #059669; } [data-cp-theme="light"] #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--admin), [data-mdb-theme="light"] #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--admin) { --cp-navbar-dropdown-caret-color: #dc2626; } [data-cp-theme="light"] #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--superuser), [data-mdb-theme="light"] #cp-navbar-stack .cp-navbar-user-toggle:has(.cp-user-chip--superuser) { --cp-navbar-dropdown-caret-color: #7e22ce; } #cp-navbar-stack .cp-navbar .dropdown-menu .dropdown-item, #cp-navbar-stack .cp-navbar .cp-navbar-nav-dropdown .cp-navbar-dd-item { font-size: var(--cp-navbar-dropdown-font-size) !important; line-height: var(--cp-navbar-dropdown-line-height); } #cp-navbar-stack .cp-navbar .dropdown-menu .dropdown-item-text { font-size: calc(var(--cp-navbar-dropdown-font-size) * 0.92) !important; } #cp-navbar-stack .cp-nav-ctrl--theme, #cp-navbar-stack .cp-nav-ctrl--units { min-height: var(--cp-navbar-tu-height) !important; } #cp-navbar-stack .cp-nav-ctrl--theme { width: var(--cp-navbar-tu-theme-width) !important; min-width: var(--cp-navbar-tu-theme-width) !important; } #cp-navbar-stack .cp-nav-ctrl--units { width: var(--cp-navbar-tu-units-width) !important; min-width: var(--cp-navbar-tu-units-width) !important; } #cp-navbar-stack .cp-theme-toggle.btn-group, #cp-navbar-stack .cp-units-toggle.btn-group { width: 100% !important; height: var(--cp-navbar-tu-height) !important; min-height: var(--cp-navbar-tu-height) !important; border-width: 2px !important; display: inline-flex !important; } #cp-navbar-stack .cp-theme-toggle .btn.btn-sm, #cp-navbar-stack .cp-units-toggle .btn.btn-sm { flex: 1 1 0 !important; min-width: 0 !important; height: 100% !important; min-height: var(--cp-navbar-tu-height) !important; font-size: var(--cp-navbar-tu-font-size) !important; line-height: 1 !important; padding: 0 !important; justify-content: center !important; align-items: center !important; } #cp-navbar-stack .cp-theme-toggle .btn.btn-sm i { font-size: var(--cp-navbar-tu-icon-size) !important; width: 1em; display: inline-flex; align-items: center; justify-content: center; } #cp-navbar-stack .cp-units-toggle .cp-units-toggle__label { font-size: var(--cp-navbar-tu-font-size) !important; line-height: 1; } #cp-navbar-stack .cp-navbar > .container-fluid { padding-top: var(--cp-navbar-bar-padding-y) !important; padding-bottom: var(--cp-navbar-bar-padding-y) !important; min-height: var(--cp-navbar-bar-height); box-sizing: border-box; } #cp-navbar-stack .cp-navbar-home-quick-links { box-sizing: border-box !important; height: var(--cp-navbar-ql-height) !important; min-height: var(--cp-navbar-ql-height) !important; max-height: var(--cp-navbar-ql-height) !important; padding: var(--cp-navbar-bar-padding-y) var(--cp-navbar-ql-row-padding-x) !important; gap: var(--cp-navbar-ql-gap) !important; } /* Brand + user chip must not shrink or clip when the bar crowds — tighten gaps first. */ html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar .navbar-brand { flex: 0 0 auto !important; flex-shrink: 0 !important; min-width: auto !important; overflow: visible !important; } html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-brand-title, html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-brand-title__gradient { overflow: visible !important; text-overflow: clip; } html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-user-menu--auth, html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-user-menu--auth { display: flex !important; align-items: center; } html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-user-menu--controls, html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-user-menu--controls, html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-user-menu--bar { display: none !important; } html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-user-menu, html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-auth-links, html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-end { flex: 0 0 auto !important; flex-shrink: 0 !important; } html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar #cpNavContent.navbar-collapse { flex: 1 1 auto !important; min-width: 0 !important; } html[data-cp-nav-layout="desktop"] #cp-navbar-stack .cp-navbar-main-links.navbar-nav { flex-direction: row !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] #cp-navbar-stack { --cp-navbar-user-chip-gap-before: 0.55rem; --cp-navbar-control-gap: 0.35rem; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar > .container-fluid { gap: 0.35rem !important; padding-left: clamp(0.55rem, 1.1vw, 1rem) !important; padding-right: clamp(0.55rem, 1.1vw, 1rem) !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar #cpNavContent.navbar-collapse { gap: 0.35rem !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-main-links.navbar-nav { column-gap: 0.2rem !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar .cp-navbar-badge-menu-root { margin-inline: var(--cp-navbar-badge-gap) !important; padding-inline: 0 !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar .cp-navbar-stats { --cp-navbar-stats-sep-gap: 1.35rem; --cp-navbar-stat-pad-x: 0.45rem; --cp-navbar-stat-icon-gap: 0.38rem; } /* Consolidated notifications flyout + burger bar (<1320px): bell symbol only — hide label text. */ @media (max-width: 1319.98px) { #cp-navbar-stack .cp-navbar-nav-menu-label { display: none !important; } } /* Quick-link sizing/press states (QL second row + compact layout) */ html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn { --bs-btn-padding-y: 0; --bs-btn-padding-x: 0.4rem; --bs-btn-font-size: var(--cp-navbar-ql-font-size); --bs-btn-line-height: 1.1; font-size: var(--cp-navbar-ql-font-size) !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn i, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn i { font-size: var(--cp-navbar-ql-icon-size) !important; flex-shrink: 0; } html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn.is-active, html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn[aria-current="page"], html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn.is-active, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn[aria-current="page"] { transform: none !important; } html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn.is-active:hover, html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn.is-active:focus-visible, html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn[aria-current="page"]:hover, html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn[aria-current="page"]:focus-visible, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn.is-active:hover, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn.is-active:focus-visible, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn[aria-current="page"]:hover, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn[aria-current="page"]:focus-visible { transform: none !important; } html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn:not(.is-active):not([aria-current="page"]):active, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn:hover:not(.is-active):not([aria-current="page"]), html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-link.btn:focus-visible:not(.is-active):not([aria-current="page"]) { transform: none !important; } html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn:not(.is-active):not([aria-current="page"]):active { transform: scale(1.02) !important; } html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn:hover:not(.is-active):not([aria-current="page"]), html[data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-link.btn:focus-visible:not(.is-active):not([aria-current="page"]) { transform: scale(1.06) !important; } .cp-navbar { overflow: visible; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(18, 45, 73, 0.18); transition: background-color .2s; } [data-cp-theme="light"] .cp-navbar { background-color: rgba(200, 220, 255, 0.90) !important; } [data-cp-theme="light"] .cp-navbar .dropdown-menu { background-color: rgba(200, 220, 255, 0.96) !important; border-color: rgba(13,110,253,.18); } [data-cp-theme="dark"] .cp-navbar { background-color: rgba(58, 78, 110, 0.90) !important; border-bottom-color: rgba(255,255,255,.07); } [data-cp-theme="dark"] .cp-navbar .dropdown-menu { background-color: rgba(58, 78, 110, 0.96) !important; border-color: rgba(255,255,255,.1); } [data-cp-theme="dark"] .cp-navbar .dropdown-item { color: #e8f0ff; } [data-cp-theme="dark"] .cp-navbar .dropdown-item:hover, [data-cp-theme="dark"] .cp-navbar .dropdown-item:focus { background-color: rgba(255,255,255,.1); color: #fff; } [data-cp-theme="dark"] .cp-navbar .dropdown-divider { border-color: rgba(255,255,255,.12); } [data-cp-theme="dark"] .cp-navbar .dropdown-item-text { color: rgba(255,255,255,.5); } [data-cp-theme="dark"] .cp-navbar .navbar-brand, [data-cp-theme="dark"] .cp-navbar .nav-link, [data-cp-theme="dark"] .cp-navbar .navbar-toggler { color: #e0e0e0 !important; } [data-cp-theme="light"] .cp-navbar .navbar-brand, [data-cp-theme="light"] .cp-navbar .nav-link { color: #333 !important; } /* Category strip (Events / Trails / Market / Go Live): palette defaults — beats generic theme .nav-link color */ .cp-navbar .nav-link.cp-nav-cat-event:not(.active) { color: var(--cp-cat-event) !important; } .cp-navbar .nav-link.cp-nav-cat-trail:not(.active) { color: var(--cp-cat-trail) !important; } .cp-navbar .nav-link.cp-nav-cat-track:not(.active) { color: var(--cp-cat-track) !important; } .cp-navbar .nav-link.cp-nav-cat-market:not(.active) { color: var(--cp-cat-market) !important; } .cp-navbar .nav-link.cp-nav-cat-event:not(.active) i, .cp-navbar .nav-link.cp-nav-cat-trail:not(.active) i, .cp-navbar .nav-link.cp-nav-cat-track:not(.active) i, .cp-navbar .nav-link.cp-nav-cat-market:not(.active) i { color: inherit !important; } /* Base nav link — hover is glow + scale only (no bordered “pill”) */ .cp-navbar .nav-link:not(.cp-navbar-user-toggle) { font-size: var(--cp-navbar-text-size, 1.38rem); } .cp-navbar .nav-link { border-radius: .5rem; border: 1px solid transparent; transform-origin: center; transition: color .2s ease, text-shadow .22s ease, transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } /* HOVER — text glow + slight grow (no border / no filled box) */ /* Exclude user account toggle + .active strip items (active uses category 3D pill; hover must not clear it) */ .cp-navbar .nav-link:hover:not(.cp-navbar-user-toggle):not(.active) { color: #0d6efd !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: scale(1.06) !important; text-shadow: 0 0 6px rgba(13, 110, 253, 0.85), 0 0 14px rgba(13, 110, 253, 0.55), 0 0 26px rgba(13, 110, 253, 0.3), 0 1px 0 rgba(255, 255, 255, 0.35); } [data-cp-theme="dark"] .cp-navbar .nav-link:hover:not(.cp-navbar-user-toggle):not(.active) { text-shadow: 0 0 8px rgba(96, 165, 255, 0.95), 0 0 18px rgba(59, 130, 246, 0.55), 0 0 32px rgba(37, 99, 235, 0.35); } /* User menu trigger: same primary blue + glow as other nav links (no scale — chip layout) */ .cp-navbar .nav-link.cp-navbar-user-toggle:hover, .cp-navbar .nav-link.cp-navbar-user-toggle:focus-visible, .cp-navbar .nav-link.cp-navbar-user-toggle.show { background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: none !important; color: #0d6efd !important; text-shadow: 0 0 6px rgba(13, 110, 253, 0.85), 0 0 14px rgba(13, 110, 253, 0.55), 0 0 26px rgba(13, 110, 253, 0.3), 0 1px 0 rgba(255, 255, 255, 0.35); } [data-cp-theme="dark"] .cp-navbar .nav-link.cp-navbar-user-toggle:hover, [data-cp-theme="dark"] .cp-navbar .nav-link.cp-navbar-user-toggle:focus-visible, [data-cp-theme="dark"] .cp-navbar .nav-link.cp-navbar-user-toggle.show { text-shadow: 0 0 8px rgba(96, 165, 255, 0.95), 0 0 18px rgba(59, 130, 246, 0.55), 0 0 32px rgba(37, 99, 235, 0.35); } .cp-navbar .nav-link.cp-navbar-user-toggle:hover .cp-navbar-dropdown-caret, .cp-navbar .nav-link.cp-navbar-user-toggle:focus-visible .cp-navbar-dropdown-caret, .cp-navbar .nav-link.cp-navbar-user-toggle.show .cp-navbar-dropdown-caret { color: var(--cp-navbar-dropdown-caret-hover-color, #ffffff) !important; -webkit-text-stroke: calc(var(--cp-navbar-user-chip-caret-stroke, 0.11em) + 0.015em) currentColor; text-shadow: 0 0 1px rgba(0, 0, 0, 0.75), 0 1px 5px rgba(0, 0, 0, 0.55), 0 0 14px color-mix(in srgb, var(--cp-navbar-dropdown-caret-hover-color, #ffffff) 55%, transparent); } .cp-navbar .nav-link.cp-navbar-user-toggle:hover .cp-user-chip .cp-chip__account-type-icon i, .cp-navbar .nav-link.cp-navbar-user-toggle:focus-visible .cp-user-chip .cp-chip__account-type-icon i, .cp-navbar .nav-link.cp-navbar-user-toggle.show .cp-user-chip .cp-chip__account-type-icon i { color: inherit !important; } /* ACTIVE/SELECTED — raised 3D button */ .cp-navbar .nav-link.active { color: #fff !important; font-weight: 700; background: linear-gradient(170deg, rgba(13,110,253,.82) 0%, rgba(10,85,210,.95) 100%) !important; border: 1px solid rgba(13,110,253,.6) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(13,110,253,.45), 0 1px 3px rgba(0,0,0,.35) !important; transform: translateY(-1px) !important; } .cp-navbar .nav-link.active:hover { transform: scale(1.03) translateY(-1px) !important; } /* Per-category HOVER / focus — :not(.active) so selected pill keeps themed .active background */ .cp-navbar .nav-link.cp-nav-cat-event:hover:not(.active), .cp-navbar .nav-link.cp-nav-cat-event:focus-visible:not(.active) { color: var(--cp-cat-event) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px rgba(253, 126, 20, 0.9), 0 0 18px rgba(253, 126, 20, 0.5), 0 0 30px rgba(230, 107, 0, 0.28); } .cp-navbar .nav-link.cp-nav-cat-trail:hover:not(.active), .cp-navbar .nav-link.cp-nav-cat-trail:focus-visible:not(.active) { color: var(--cp-cat-trail) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px rgba(25, 135, 84, 0.95), 0 0 18px rgba(25, 135, 84, 0.55), 0 0 30px rgba(15, 82, 48, 0.3); } .cp-navbar .nav-link.cp-nav-cat-track:hover:not(.active), .cp-navbar .nav-link.cp-nav-cat-track:focus-visible:not(.active) { color: var(--cp-cat-track) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px rgba(255, 193, 7, 0.95), 0 0 18px rgba(255, 193, 7, 0.5), 0 0 28px rgba(200, 148, 0, 0.35); } .cp-navbar .nav-link.cp-nav-cat-market:hover:not(.active), .cp-navbar .nav-link.cp-nav-cat-market:focus-visible:not(.active) { color: var(--cp-cat-market) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px rgba(220, 38, 38, 0.9), 0 0 18px rgba(220, 38, 38, 0.5), 0 0 28px rgba(153, 27, 27, 0.28); } .cp-navbar .nav-link.cp-nav-cat-product:hover:not(.active), .cp-navbar .nav-link.cp-nav-cat-product:focus-visible:not(.active) { color: var(--cp-cat-product) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: scale(1.06) !important; text-shadow: 0 0 6px rgba(13, 110, 253, 0.85), 0 0 14px rgba(13, 110, 253, 0.55), 0 0 26px rgba(13, 110, 253, 0.3), 0 1px 0 rgba(255, 255, 255, 0.35); } .cp-navbar .nav-link.cp-nav-cat-compare:hover:not(.active), .cp-navbar .nav-link.cp-nav-cat-compare:focus-visible:not(.active) { color: var(--cp-cat-compare) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px rgba(120, 132, 145, 0.85), 0 0 18px rgba(90, 100, 112, 0.45), 0 0 28px rgba(56, 63, 71, 0.28); } /* Per-category ACTIVE — 3D raised button in category color */ .cp-navbar .nav-link.cp-nav-cat-event.active { color: var(--cp-cat-event-font, #fff) !important; background: var(--cp-cat-event) !important; border-color: #000000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 10px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } @supports (color: color-mix(in srgb, white, black)) { .cp-navbar .nav-link.cp-nav-cat-event.active { background: linear-gradient( 170deg, color-mix(in srgb, var(--cp-cat-event) 88%, #ffffff) 0%, color-mix(in srgb, var(--cp-cat-event) 72%, #1c0d02) 100% ) !important; border-color: color-mix(in srgb, var(--cp-cat-event) 62%, #000000) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 10px color-mix(in srgb, var(--cp-cat-event) 50%, transparent), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } } .cp-navbar .nav-link.cp-nav-cat-trail.active { color: var(--cp-cat-trail-font, #fff) !important; background: var(--cp-cat-trail) !important; border-color: #000000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } @supports (color: color-mix(in srgb, white, black)) { .cp-navbar .nav-link.cp-nav-cat-trail.active { background: linear-gradient( 170deg, color-mix(in srgb, var(--cp-cat-trail) 88%, #ffffff) 0%, color-mix(in srgb, var(--cp-cat-trail) 82%, #041208) 100% ) !important; border-color: color-mix(in srgb, var(--cp-cat-trail) 72%, #000000) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px color-mix(in srgb, var(--cp-cat-trail) 50%, transparent), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } } .cp-navbar .nav-link.cp-nav-cat-product.active { color: var(--cp-cat-product-font, #fff) !important; background: var(--cp-cat-product) !important; border-color: #000814 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } @supports (color: color-mix(in srgb, white, black)) { .cp-navbar .nav-link.cp-nav-cat-product.active { background: linear-gradient( 170deg, color-mix(in srgb, var(--cp-cat-product) 88%, #ffffff) 0%, color-mix(in srgb, var(--cp-cat-product) 78%, #031633) 100% ) !important; border-color: color-mix(in srgb, var(--cp-cat-product) 68%, #000814) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px color-mix(in srgb, var(--cp-cat-product) 50%, transparent), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } } .cp-navbar .nav-link.cp-nav-cat-compare.active { color: var(--cp-cat-compare-font, #fff) !important; background: var(--cp-cat-compare) !important; border-color: #000000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 10px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.35) !important; } @supports (color: color-mix(in srgb, white, black)) { .cp-navbar .nav-link.cp-nav-cat-compare.active { background: linear-gradient( 170deg, color-mix(in srgb, var(--cp-cat-compare) 88%, #ffffff) 0%, color-mix(in srgb, var(--cp-cat-compare) 88%, #000000) 100% ) !important; border-color: color-mix(in srgb, var(--cp-cat-compare) 78%, #000000) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 10px color-mix(in srgb, var(--cp-cat-compare) 45%, transparent), 0 1px 3px rgba(0, 0, 0, 0.35) !important; } } /* Live tracking in navbar — custom/private = green, public = red (slow pulse) */ @keyframes cp-track-live-pulse-public { 0%, 100% { filter: brightness(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(220, 38, 38, 0.35); } 50% { filter: brightness(1.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 0 3px rgba(248, 113, 113, 0.45), 0 0 16px rgba(220, 38, 38, 0.65); } } @keyframes cp-track-live-pulse-custom { 0%, 100% { filter: brightness(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(34, 197, 94, 0.35); } 50% { filter: brightness(1.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 0 3px rgba(74, 222, 128, 0.45), 0 0 16px rgba(34, 197, 94, 0.65); } } @keyframes cp-track-live-badge-pulse-public { 0%, 100% { opacity: 0.72; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } } @keyframes cp-track-live-badge-pulse-custom { 0%, 100% { opacity: 0.72; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } } @keyframes cp-track-live-dot-public { 0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.85); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } } @keyframes cp-track-live-dot-custom { 0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.85); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } } /* Live session on QL — pulse only; fills/selected use --cp-cat-track theme below */ .cp-navbar-home-quick-link--track.cp-track-nav-indicator--public:not(.is-active):not([aria-current="page"]) { animation: cp-track-live-pulse-public 3.5s ease-in-out infinite !important; } .cp-navbar-home-quick-link--track.cp-track-nav-indicator--custom:not(.is-active):not([aria-current="page"]) { animation: cp-track-live-pulse-custom 3.5s ease-in-out infinite !important; } /* Main nav Live link (≥1847px) — pulse only when not on track page */ #cp-navbar .nav-link.cp-go-live-link.cp-track-nav-indicator--public:not(.active) { animation: cp-track-live-pulse-public 3.5s ease-in-out infinite !important; } #cp-navbar .nav-link.cp-go-live-link.cp-track-nav-indicator--custom:not(.active) { animation: cp-track-live-pulse-custom 3.5s ease-in-out infinite !important; } #cp-navbar .nav-link.cp-go-live-link.cp-track-nav-indicator--public i, #cp-navbar .nav-link.cp-go-live-link.cp-track-nav-indicator--custom i { color: inherit !important; } .cp-navbar .cp-track-nav-indicator:not(.cp-track-nav-indicator--dot) { font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; border: 1px solid rgba(0, 0, 0, 0.18); will-change: opacity, transform, box-shadow; } .cp-navbar .cp-track-nav-indicator--public:not(.cp-track-nav-indicator--dot) { color: #fff !important; background: #dc2626 !important; border-color: rgba(127, 29, 29, 0.65) !important; animation: cp-track-live-badge-pulse-public 3.5s ease-in-out infinite; } .cp-navbar .cp-track-nav-indicator--custom:not(.cp-track-nav-indicator--dot) { color: #fff !important; background: #22c55e !important; border-color: rgba(21, 128, 61, 0.75) !important; animation: cp-track-live-badge-pulse-custom 3.5s ease-in-out infinite; } .cp-navbar .cp-track-nav-indicator--dot { width: 0.45rem; height: 0.45rem; min-width: 0.45rem; padding: 0; font-size: 0; line-height: 0; border-radius: 999px; } .cp-navbar .cp-track-nav-indicator--public.cp-track-nav-indicator--dot { background: #dc2626 !important; border-color: rgba(127, 29, 29, 0.65) !important; box-shadow: 0 0 6px rgba(220, 38, 38, 0.55); animation: cp-track-live-dot-public 3.5s ease-in-out infinite; } .cp-navbar .cp-track-nav-indicator--custom.cp-track-nav-indicator--dot { background: #22c55e !important; border-color: rgba(21, 128, 61, 0.75) !important; box-shadow: 0 0 6px rgba(34, 197, 94, 0.55); animation: cp-track-live-dot-custom 3.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cp-navbar-home-quick-link--track.cp-track-nav-indicator--public, .cp-navbar-home-quick-link--track.cp-track-nav-indicator--custom, #cp-navbar .nav-link.cp-go-live-link.cp-track-nav-indicator--public, #cp-navbar .nav-link.cp-go-live-link.cp-track-nav-indicator--custom, .cp-navbar .cp-track-nav-indicator { animation: none !important; filter: none !important; } } /* ---- Navbar stats (plain text, semantic colors) ---- */ #cp-navbar-stack .cp-navbar-stats { pointer-events: none; display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: var(--cp-navbar-stats-sep-gap, 1.75rem); line-height: 1; white-space: nowrap; } .cp-navbar-stats--mobile-inline { display: none; } .cp-navbar-end { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; } #cp-navbar-stack .cp-navbar-stat { display: inline-flex; align-items: center; gap: 0; padding-block: var(--cp-navbar-stat-pad-y, 0.22rem); padding-inline: var(--cp-navbar-stat-pad-x, 0.55rem); box-sizing: border-box; font-size: var(--cp-navbar-stat-size, 1.4rem); font-weight: 600; letter-spacing: .02em; background: none; border: 0; box-shadow: none; } #cp-navbar-stack .cp-navbar-stat__value { font-size: inherit; font-weight: inherit; line-height: 1; flex: 0 0 auto; } .cp-navbar-stat--users { color: #5b8ff9; } .cp-navbar-stat--posts { color: #3aba7a; } #cp-navbar-stack .cp-navbar-stat i { flex: 0 0 auto; display: inline-block; font-size: var(--cp-navbar-stat-size, 1.4rem); line-height: 1; width: 1.25em; min-width: 1.25em; text-align: center; /* Icon → digit spacing (FA fa-users paints wider than its em box) */ margin-inline-end: var(--cp-navbar-stat-icon-gap, 0.6rem); } [data-cp-theme="dark"] #cp-navbar-stack .cp-navbar-stat--users { color: #7aaaf9; } [data-cp-theme="dark"] #cp-navbar-stack .cp-navbar-stat--posts { color: #5dd496; } [data-cp-theme="dark"] .cp-navbar-stat--users { color: #7aaaf9; } [data-cp-theme="dark"] .cp-navbar-stat--posts { color: #5dd496; } .cp-navbar .badge.rounded-pill:not(.cp-track-nav-indicator) { font-size: var(--cp-navbar-badge-font-size, 0.82rem); font-weight: 700; line-height: 1.15; min-width: var(--cp-navbar-badge-min-width, 1.3rem); padding-left: .55em; padding-right: .55em; } .cp-navbar .cp-nav-badge-total.badge.rounded-pill { font-size: var(--cp-navbar-badge-font-size-overlay, 0.78rem); max-width: 2.75rem; overflow: hidden; text-overflow: ellipsis; } .cp-navbar .cp-navbar-nav-dropdown .badge.rounded-pill:not(.cp-track-nav-indicator) { font-size: var(--cp-navbar-badge-font-size-menu, 0.9rem); min-width: var(--cp-navbar-badge-min-width-menu, 1.7rem); } .cp-navbar .cp-navbar-public-feedback-menu__badge.badge.rounded-pill { min-width: 1.25rem; } /* =================================================== 3-D / RAISED-CONTROL SYSTEM — navbar Uses layered box-shadow: outer-drop = depth below the element inner-top = top-edge highlight (light catches top) inner-bottom= bottom-edge shadow (bottom in shade) Active / pressed = shadows invert + translateY(1px) =================================================== */ /* ---- Navbar bar: raised slab look ---- */ .cp-navbar { box-shadow: 0 4px 12px rgba(0,0,0,.35), /* drop shadow below */ inset 0 1px 0 rgba(255,255,255,.18); /* top-edge highlight */ } [data-cp-theme="dark"] .cp-navbar { box-shadow: 0 4px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); } /* ---- Nav links: click feedback (hover styling lives above) ---- */ .cp-navbar .nav-link:active { transform: scale(1.02) !important; transition-duration: .08s; } /* ---- Theme & Units toggle buttons ---- */ .cp-theme-toggle .btn, .cp-units-toggle .btn { transition: background .12s, box-shadow .12s, transform .1s; } [data-cp-theme="dark"] .cp-theme-toggle .btn, [data-cp-theme="dark"] .cp-units-toggle .btn { background: linear-gradient(180deg, rgba(90,110,148,.9) 0%, rgba(46,62,90,.95) 100%); box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); color: #d0dff7; border-color: rgba(255,255,255,.12); } [data-cp-theme="light"] .cp-theme-toggle .btn, [data-cp-theme="light"] .cp-units-toggle .btn { background: linear-gradient(180deg, rgba(230,240,255,1) 0%, rgba(190,210,245,1) 100%); box-shadow: 0 3px 6px rgba(18,45,73,.28), inset 0 1px 0 rgba(255,255,255,.85); color: #1c3058; border-color: rgba(18,45,73,.2); } .cp-theme-toggle .btn:hover, .cp-units-toggle .btn:hover { transform: translateY(-1px); filter: brightness(1.12); } .cp-theme-toggle .btn:active, .cp-units-toggle .btn:active { transform: translateY(1px); box-shadow: inset 0 3px 5px rgba(0,0,0,.4) !important; filter: brightness(.92); } /* Active (selected) state: pressed-in look */ [data-cp-theme="dark"] .cp-theme-toggle .btn.active, [data-cp-theme="dark"] .cp-units-toggle .btn.active { background: linear-gradient(180deg, rgba(30,44,70,.98) 0%, rgba(55,78,118,.98) 100%); box-shadow: inset 0 3px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(0,0,0,.2); color: #90b8ff; } [data-cp-theme="light"] .cp-theme-toggle .btn.active, [data-cp-theme="light"] .cp-units-toggle .btn.active { background: linear-gradient(180deg, rgba(160,190,240,.98) 0%, rgba(200,220,255,.98) 100%); box-shadow: inset 0 3px 6px rgba(18,45,73,.35), inset 0 1px 0 rgba(18,45,73,.1); color: #0d3065; } /* ---- Login / Register buttons ---- */ .cp-navbar .cp-nav-btn { font-size: var(--cp-navbar-ql-font-size) !important; transition: box-shadow .12s, transform .1s, filter .1s; border-radius: 8px !important; } .cp-navbar .cp-nav-btn--icon-only { width: var(--cp-navbar-control-height); min-width: var(--cp-navbar-control-height); padding-left: 0 !important; padding-right: 0 !important; } .cp-navbar .cp-nav-btn--icon-only i { color: #fff; font-size: var(--cp-navbar-ql-icon-size); line-height: 1; } .cp-navbar .cp-nav-btn--icon-only .badge { font-size: 0.65rem; line-height: 1; min-width: 1.1rem; padding: 0.2em 0.35em; } /* Bell + caret (notifications) — same primary chrome as QR / Invite icon buttons */ .cp-navbar .cp-nav-btn--icon-with-caret { width: auto; min-width: var(--cp-navbar-control-height); min-height: var(--cp-navbar-control-height); height: var(--cp-navbar-control-height); padding-left: 0.42rem !important; padding-right: 0.34rem !important; gap: 0.28rem; } .cp-navbar .cp-nav-btn--icon-with-caret .cp-navbar-badge-menu__bell .fa-bell { font-size: var(--cp-navbar-ql-icon-size); color: #fff; line-height: 1; } .cp-navbar .cp-nav-btn--icon-with-caret .cp-navbar-dropdown-caret { color: #fff !important; font-size: calc(var(--cp-navbar-ql-icon-size) * 0.72) !important; font-weight: 900; line-height: 1; -webkit-text-stroke: 0; text-shadow: none; opacity: 1; } .cp-navbar .cp-nav-btn--icon-with-caret .cp-navbar-nav-menu-label { color: #fff; font-weight: 600; } @media (min-width: 1320px) { #cp-navbar-stack .cp-navbar-badge-menu__toggle.cp-nav-btn--icon-with-caret { padding-left: 0.65rem !important; padding-right: 0.6rem !important; gap: 0.45rem; } } .cp-navbar .cp-nav-btn:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 14px rgba(13,110,253,.5), inset 0 1px 0 rgba(255,255,255,.3); } .cp-navbar .cp-nav-btn:active { transform: translateY(1px); box-shadow: inset 0 3px 6px rgba(0,0,0,.35) !important; filter: brightness(.92); } /* ---- Hamburger toggler ---- */ .cp-navbar .navbar-toggler { border-radius: 8px !important; transition: box-shadow .12s, transform .1s; } [data-cp-theme="dark"] .cp-navbar .navbar-toggler { box-shadow: 0 3px 7px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); } [data-cp-theme="light"] .cp-navbar .navbar-toggler { box-shadow: 0 3px 7px rgba(18,45,73,.22), inset 0 1px 0 rgba(255,255,255,.8); } .cp-navbar .navbar-toggler:hover { transform: translateY(-1px); filter: brightness(1.15); } .cp-navbar .navbar-toggler:active { transform: translateY(1px); box-shadow: inset 0 3px 5px rgba(0,0,0,.4) !important; } /* ---- Stat badges: pill emboss ---- */ /* ===== Compact navbar & layout (fit-based or viewport < 1300px) ===== */ html[data-cp-nav-layout="compact"] { body.cp-pull-refresh-dragging, body.cp-pull-refresh-releasing { transform: none !important; will-change: auto; } body.cp-pull-refresh-dragging { transition: none; } body.cp-pull-refresh-releasing { transition: none; } /* ---- Navbar bar ---- */ .cp-navbar { z-index: 1080; } .cp-navbar-stack { top: 0; z-index: 1190; pointer-events: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cp-navbar-stack.cp-navbar-stack--mobile-hidden { transform: translate3d(0, -100%, 0); pointer-events: none !important; visibility: hidden; } .cp-navbar-stack.cp-navbar-stack--mobile-shown { transform: translate3d(0, 0, 0); pointer-events: auto; visibility: visible; } @media (max-width: 1299.98px) { .cp-navbar-stack { transition: transform 0.28s ease, visibility 0.28s ease; will-change: transform; } } .cp-mobile-scroll-top-bar { position: fixed; left: 0; right: 0; bottom: var(--cp-mobile-top-bar-bottom, 0px); z-index: 2147483647; padding: .55rem .9rem calc(.55rem + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translate3d(0, 120%, 0); transition: opacity .35s ease, transform .35s ease; background: transparent; } .cp-mobile-scroll-top-bar.is-visible { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; } .cp-mobile-scroll-top-btn { position: relative; z-index: 1; border: 0; border-radius: 999px; padding: .52rem 1rem; font-size: .86rem; font-weight: 700; letter-spacing: .01em; color: #f8fbff; background: linear-gradient(180deg, #1f61d5, #184aa6); box-shadow: 0 12px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28); pointer-events: auto; touch-action: manipulation; } .cp-mobile-scroll-top-btn:hover, .cp-mobile-scroll-top-btn:focus-visible { filter: brightness(1.08); } .cp-mobile-scroll-top-btn:active { transform: translateY(1px); } .cp-pull-refresh-indicator { position: fixed; left: 50%; top: calc(var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)) + .4rem); transform: translate(-50%, -140%); z-index: 1090; display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .72rem; border-radius: 999px; pointer-events: none; opacity: 0; transition: transform .28s ease, opacity .22s ease; color: #f3f7ff; background: rgba(20, 32, 62, .92); border: 1px solid rgba(148, 186, 255, .45); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); max-width: calc(100vw - 2rem); white-space: nowrap; } .cp-pull-refresh-indicator.is-visible { transform: translate(-50%, 0); opacity: 1; } .cp-pull-refresh-indicator.is-ready { border-color: rgba(156, 217, 255, .9); background: rgba(22, 54, 102, .94); } .cp-pull-refresh-indicator.is-refreshing { border-color: rgba(170, 226, 255, .95); background: rgba(25, 74, 135, .95); } .cp-pull-refresh-spinner { width: .86rem; height: .86rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .32); border-top-color: rgba(255, 255, 255, .95); animation: cp-ptr-spin .9s linear infinite; } .cp-pull-refresh-text { font-size: .78rem; font-weight: 700; letter-spacing: .01em; } @keyframes cp-ptr-spin { to { transform: rotate(360deg); } } .cp-navbar .container-fluid { position: relative; min-height: 0; align-items: center; } .cp-navbar .navbar-brand, .cp-navbar .navbar-toggler { position: relative; z-index: 2; } /* ---- Mobile stats: centered between title text and hamburger (equal side spacers) ---- */ .cp-navbar > .container-fluid { display: grid !important; grid-template-columns: auto 1fr auto 1fr auto; align-items: center !important; } .cp-navbar .navbar-brand { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; min-width: 0; } .cp-navbar-stats--mobile-inline { display: inline-flex !important; grid-column: 3; grid-row: 1; justify-self: center; align-self: center; z-index: 1; max-width: 100%; margin: 0 !important; flex: 0 0 auto !important; } .cp-navbar-end { grid-column: 5; grid-row: 1; justify-self: end; } .cp-navbar #cpNavContent.navbar-collapse { grid-column: 1 / -1; grid-row: 2; } /* ---- Hamburger collapse panel — shrink-wrap under toggler (right-aligned) ---- */ .cp-navbar .navbar-collapse { position: absolute; top: 100%; left: auto; right: 0; width: max-content; min-width: 0; max-width: calc(100vw - 1rem); height: auto !important; min-height: 0 !important; margin-top: 0; padding: .5rem .65rem .55rem; border-radius: 0 0 18px 18px; box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(59,130,246,.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: none; } .cp-navbar #cpNavContent.navbar-collapse.collapse.show, .cp-navbar #cpNavContent.navbar-collapse.collapsing { height: auto !important; min-height: 0 !important; } #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-main-links { display: none !important; } #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-controls { margin: 0 !important; } #cp-navbar-stack .cp-navbar #cpNavContent .dropdown-menu:not(.cp-navbar-user-menu__dropdown), #cp-navbar-stack .cp-navbar .cp-navbar-nav-dropdown.dropdown-menu:not(.cp-navbar-user-menu__dropdown) { min-width: 0 !important; width: max-content !important; max-width: min(calc(100vw - 1.25rem), 100%) !important; height: auto !important; min-height: 0 !important; max-height: none !important; } #cp-navbar-stack .cp-navbar #cpNavContent.navbar-collapse.show, #cp-navbar-stack .cp-navbar #cpNavContent.navbar-collapse.collapsing { overflow: visible !important; } #cp-navbar-stack .cp-navbar-user-menu--controls { overflow: visible !important; } #cp-navbar-stack .cp-navbar #cpNavContent .dropdown-menu .dropdown-item, #cp-navbar-stack .cp-navbar .cp-navbar-nav-dropdown .dropdown-item, #cp-navbar-stack .cp-navbar .cp-navbar-nav-dropdown .cp-navbar-dd-item { white-space: nowrap; } #cp-navbar-stack .cp-navbar .cp-navbar-nav-dropdown:not(.cp-navbar-user-menu__dropdown) .dropdown-item-text { max-width: min(20rem, calc(100vw - 2.5rem)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 768px) and (max-width: 1299.98px) { #cp-navbar-stack .cp-navbar #cpNavContent.navbar-collapse { width: max-content !important; max-width: calc(100vw - 1rem); justify-self: end; padding: .45rem .55rem .5rem !important; } #cp-navbar-stack .cp-navbar #cpNavContent .cp-mobile-nav-lines, #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-auth-links, #cp-navbar-stack .cp-navbar #cpNavContent > hr.d-lg-none { display: none !important; } } @media (max-width: 767.98px) { #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-controls { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; width: max-content !important; max-width: calc(100vw - 1rem) !important; row-gap: var(--cp-navbar-control-gap) !important; } #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-controls__buttons { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-end; width: 100%; gap: var(--cp-navbar-control-gap, 0.5rem) !important; } #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-user-menu--controls { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; justify-content: center !important; margin-inline: 0 !important; } #cp-navbar-stack .cp-navbar #cpNavContent .cp-navbar-user-menu--controls .cp-navbar-user-toggle { width: 100%; justify-content: center; } #cp-navbar-stack .cp-navbar #cpNavContent.navbar-collapse { width: max-content !important; max-width: calc(100vw - 1rem) !important; padding: 0.45rem 0.55rem 0.5rem !important; } } [data-cp-theme="light"] .cp-navbar .navbar-collapse, [data-mdb-theme="light"] .cp-navbar .navbar-collapse { background: rgba(200, 220, 255, 0.96); /* clearly distinct from white page */ box-shadow: 0 24px 50px rgba(18,45,73,.38), inset 0 0 0 1.5px rgba(59,113,202,.35); } [data-cp-theme="dark"] .cp-navbar .navbar-collapse, [data-mdb-theme="dark"] .cp-navbar .navbar-collapse { background: rgba(58, 78, 110, 0.96); /* noticeably lighter than the deep dark page */ box-shadow: 0 24px 50px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(100,160,255,.5); } #cp-navbar-stack .cp-navbar .navbar-nav .nav-link { font-size: 1rem !important; padding: .6rem .2rem; border-bottom: 1px solid rgba(128,128,128,.18); } #cp-navbar-stack .cp-mobile-nav-lines .btn { font-size: 0.875rem !important; } .cp-navbar .navbar-nav .nav-item:last-child .nav-link { border-bottom: 0; } .cp-navbar .cp-search-group { max-width: 100%; width: 100%; } /* cp-page-center + Bootstrap .container both add horizontal padding; zero out cp-page-center sides on mobile so only .container gutter remains. */ .cp-page-center { padding-left: 0; padding-right: 0; } .cp-hero { padding-top: 1rem !important; } } .cp-avatar { width: 32px; height: 32px; object-fit: cover; border: 2px solid rgba(13, 110, 253, .4); } /* ---- Search ---- */ .cp-search-group { min-width: 220px; max-width: 340px; } .cp-search-input { border-radius: 20px 0 0 20px !important; } .cp-search-group .btn { border-radius: 0 20px 20px 0 !important; } /* * Navbar-stack filter band (Home / Explore / Events / …): flat, edge-to-edge. * Overrides global .cp-search-input pill radii above — pushed partials were losing in cascade. */ #cp-navbar-stack .cp-home-mobile-filter-bar, #cp-navbar-stack .cp-home-desktop-filter-bar { width: 100%; max-width: none; margin: 0; padding: 0; } #cp-navbar-stack .cp-home-mobile-filter-grid, #cp-navbar-stack .cp-home-hero-filter-form > .row { width: 100%; max-width: none; border-radius: 0 !important; } #cp-navbar-stack .cp-home-mobile-filter-bar .cp-search-input, #cp-navbar-stack .cp-home-mobile-filter-bar .form-select, #cp-navbar-stack .cp-home-desktop-filter-bar .cp-search-input, #cp-navbar-stack .cp-home-desktop-filter-bar .form-select, #cp-navbar-stack .cp-home-hero-filter-form .cp-search-input, #cp-navbar-stack .cp-home-hero-filter-form .form-control, #cp-navbar-stack .cp-home-hero-filter-form .form-select { border-radius: 0 !important; } /* Home / globe landing: entire fixed header band flush to viewport, square */ body.cp-page-home #cp-navbar-stack, body.cp-home-globe-page #cp-navbar-stack { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; border-radius: 0 !important; } body.cp-page-home #cp-navbar-stack .cp-navbar, body.cp-home-globe-page #cp-navbar-stack .cp-navbar { width: 100% !important; max-width: none !important; border-radius: 0 !important; } body.cp-page-home .cp-page-center { max-width: 100%; padding-left: 0; padding-right: 0; } /* Compact form grids: short controls should not consume full desktop rows. */ @media (min-width: 768px) { .cp-form-compact-row > .cp-form-col-switch { flex: 0 0 auto !important; width: auto !important; min-width: 7.5rem; } .cp-form-compact-row > .cp-form-col-number { flex: 0 0 clamp(8rem, 12vw, 10.5rem) !important; width: clamp(8rem, 12vw, 10.5rem) !important; max-width: 10.5rem !important; } .cp-form-compact-row > .cp-form-col-date { flex: 1 1 13rem !important; min-width: 13rem; } .cp-form-compact-row > .cp-form-col-short-select { flex: 0 1 clamp(12rem, 18vw, 16rem) !important; width: clamp(12rem, 18vw, 16rem) !important; max-width: 16rem !important; } } /* ---- Navbar Toggle Groups (theme & units) ---- */ /* Change 3: all 4 right nav controls same width */ .cp-nav-ctrl { width: 6.5rem; display: flex !important; justify-content: center; align-items: center; } /* LOGIN/REGISTER fixed width + height to match toggles */ a.cp-nav-btn { width: 6.5rem; height: 2rem; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; line-height: 1; } /* LOGIN (btn-outline-primary) — dark theme: white text; light theme: dark navy text */ a.cp-nav-btn.btn-outline-primary { color: #fff; /* dark mode default */ border-color: #3b71ca; } [data-cp-theme="light"] a.cp-nav-btn.btn-outline-primary { color: #1c2b3a; } a.cp-nav-btn.btn-outline-primary i { color: #3b71ca; } a.cp-nav-btn.btn-outline-primary:hover, a.cp-nav-btn.btn-outline-primary:focus { background-color: #3b71ca !important; color: #fff !important; } a.cp-nav-btn.btn-outline-primary:hover i, a.cp-nav-btn.btn-outline-primary:focus i { color: #fff !important; } /* Change 1: toggle borders always blue; fill wrapper width */ .cp-theme-toggle.btn-group, .cp-units-toggle.btn-group { border: 1.5px solid #3b71ca; border-radius: 50rem; overflow: hidden; background: transparent; height: 2rem; width: 100%; display: inline-flex; } /* Change 2 + 4: toggle buttons — blue icon/text by default */ .cp-theme-toggle .btn.btn-sm, .cp-units-toggle .btn.btn-sm { -webkit-appearance: none; appearance: none; flex: 1 1 0; min-width: 0; height: 2rem; padding: 0; font-size: .78rem; line-height: 1; background: transparent !important; border: none; border-right: 1px solid rgba(59, 113, 202, .35); color: #3b71ca; transition: background-color .15s ease, color .15s ease; display: inline-flex; align-items: center; justify-content: center; } .cp-theme-toggle .btn.btn-sm i { display: inline-flex; align-items: center; justify-content: center; width: 1em; line-height: 1; } /* FA moon / half-stroke glyphs sit left in their em-box — nudge to optical center */ .cp-theme-toggle .btn.btn-sm i.fa-moon { transform: translateX(0.09em); } .cp-theme-toggle .btn.btn-sm i.fa-circle-half-stroke { transform: translateX(0.05em); } .cp-theme-toggle .btn.btn-sm:last-child, .cp-units-toggle .btn.btn-sm:last-child { border-right: none; } /* Hover: light blue tint, keep blue icon */ .cp-theme-toggle .btn.btn-sm:hover, .cp-units-toggle .btn.btn-sm:hover { background: rgba(59, 113, 202, .15) !important; color: #3b71ca; } /* Active button: filled blue + white icon */ .cp-theme-toggle .btn.btn-sm.cp-theme-active, .cp-units-toggle .btn.btn-sm.cp-units-active { background: #3b71ca !important; color: #fff; } /* Nav link icons inherit the link's text color */ .cp-navbar .nav-link i { color: inherit; } .cp-navbar .nav-link:hover:not(.cp-navbar-user-toggle):not(.active) i, .cp-navbar .nav-link.active i { color: inherit; } /* Light navbar variant */ [data-cp-theme="light"] .cp-navbar .cp-theme-toggle.btn-group, [data-cp-theme="light"] .cp-navbar .cp-units-toggle.btn-group { border-color: #3b71ca; } [data-cp-theme="light"] .cp-navbar .cp-theme-toggle .btn.btn-sm, [data-cp-theme="light"] .cp-navbar .cp-units-toggle .btn.btn-sm { color: #3b71ca; border-right-color: rgba(59, 113, 202, .3); } [data-cp-theme="light"] .cp-navbar .cp-theme-toggle .btn.btn-sm:hover, [data-cp-theme="light"] .cp-navbar .cp-units-toggle .btn.btn-sm:hover { background: rgba(59, 113, 202, .1) !important; color: #3b71ca; } [data-cp-theme="light"] .cp-navbar .cp-theme-toggle .btn.btn-sm.cp-theme-active, [data-cp-theme="light"] .cp-navbar .cp-units-toggle .btn.btn-sm.cp-units-active { background: #3b71ca !important; color: #fff; } /* ---- Segmented radio pill (location mode, track toggles, etc.) ---- */ .cp-radio-pill.btn-group { border: 1.5px solid #3b71ca; border-radius: 50rem; overflow: hidden; background: transparent; height: 2rem; } .cp-radio-pill .btn { border-radius: 0; height: 2rem; padding: 0 .85rem; font-size: .82rem; line-height: 2rem; border: none !important; border-right: 1px solid rgba(59, 113, 202, .35) !important; background: transparent !important; color: #3b71ca !important; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease, color .15s ease; box-shadow: none !important; } .cp-radio-pill .btn:last-of-type { border-right: none !important; } .cp-radio-pill .btn:hover, .cp-radio-pill .btn:focus { background: rgba(59, 113, 202, .15) !important; color: #3b71ca !important; } .cp-radio-pill .btn-check:checked + .btn, .cp-radio-pill .btn-check:active + .btn { background: #3b71ca !important; color: #fff !important; } [data-cp-theme="dark"] .cp-radio-pill.btn-group, [data-mdb-theme="dark"] .cp-radio-pill.btn-group { border-color: rgba(147, 197, 253, .55); } [data-cp-theme="dark"] .cp-radio-pill .btn, [data-mdb-theme="dark"] .cp-radio-pill .btn { color: #93c5fd !important; border-right-color: rgba(147, 197, 253, .28) !important; } [data-cp-theme="dark"] .cp-radio-pill .btn:hover, [data-cp-theme="dark"] .cp-radio-pill .btn:focus, [data-mdb-theme="dark"] .cp-radio-pill .btn:hover, [data-mdb-theme="dark"] .cp-radio-pill .btn:focus { background: rgba(59, 113, 202, .28) !important; color: #dbeafe !important; } [data-cp-theme="dark"] .cp-radio-pill .btn-check:checked + .btn, [data-cp-theme="dark"] .cp-radio-pill .btn-check:active + .btn, [data-mdb-theme="dark"] .cp-radio-pill .btn-check:checked + .btn, [data-mdb-theme="dark"] .cp-radio-pill .btn-check:active + .btn { background: #3b71ca !important; color: #fff !important; } /* ---- Footer ---- */ :root { --cp-site-footer-bg: rgba(200, 220, 255, 0.96); } [data-cp-theme="dark"], [data-mdb-theme="dark"] { --cp-site-footer-bg: #1a1a2e; } .cp-footer { flex-shrink: 0; border-top: 1px solid rgba(18, 45, 73, 0.18); background-color: var(--cp-site-footer-bg); } [data-cp-theme="dark"] .cp-footer { background-color: var(--cp-site-footer-bg); } /* ---- Post Cards ---- */ .cp-card { border: 3px solid var(--cp-light-border); border-radius: 12px; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, outline .22s ease; height: 100%; box-shadow: var(--cp-light-shadow); } .cp-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(8, 30, 52, 0.14) !important; border-color: var(--cp-light-border-strong); } [data-cp-theme="dark"] .cp-card, [data-mdb-theme="dark"] .cp-card { border-color: rgba(255,255,255,.08); box-shadow: none; } .cp-card .card-footer .btn-outline-secondary { color: #243447; border-color: rgba(36, 52, 71, 0.55); background-color: rgba(255, 255, 255, 0.88); } .cp-card .card-footer .btn-outline-secondary:hover, .cp-card .card-footer .btn-outline-secondary:focus { color: #fff; border-color: #243447; background-color: #243447; } [data-cp-theme="dark"] .cp-card .card-footer .btn-outline-secondary, [data-mdb-theme="dark"] .cp-card .card-footer .btn-outline-secondary { color: #e9eef5; border-color: rgba(233, 238, 245, 0.5); background-color: rgba(30, 30, 46, 0.88); } [data-cp-theme="dark"] .cp-card .card-footer .btn-outline-secondary:hover, [data-cp-theme="dark"] .cp-card .card-footer .btn-outline-secondary:focus, [data-mdb-theme="dark"] .cp-card .card-footer .btn-outline-secondary:hover, [data-mdb-theme="dark"] .cp-card .card-footer .btn-outline-secondary:focus { color: #1b2430; border-color: #e9eef5; background-color: #e9eef5; } /* Required field asterisk (x-ui.required-mark) */ .cp-required-mark { flex-shrink: 0; font-size: 1.35em; font-weight: 700; line-height: 1; vertical-align: baseline; } /* Post-card link icons (above engagement stats) — uses .cp-social-platform-icon */ .cp-post-card__links { width: 100%; } a.cp-social-platform-icon { text-decoration: none; color: #fff; } a.cp-social-platform-icon:hover, a.cp-social-platform-icon:focus-visible { color: #fff; transform: scale(1.06); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); } /* Engagement row: every visible metric is a direct sibling so gaps are text-to-text */ .cp-card-engage--distributed { display: flex; align-items: center; justify-content: space-evenly; width: 100%; min-width: 0; gap: 0.95rem; flex-wrap: wrap; text-align: center; } .cp-card-engage--distributed > * { flex: 0 0 auto; min-width: 0; } .cp-card-engage--distributed .cp-stars { display: inline-flex; align-items: center; } @media (max-width: 575.98px) { .cp-card-engage--distributed { gap: 0.7rem; } } /* Match favorite/going buttons to inline metrics (Bootstrap .btn adds padding + min-height) */ .cp-card-engage--distributed button.cp-card-engage__metric { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0; min-height: 0 !important; height: auto !important; line-height: 1 !important; vertical-align: middle; box-sizing: border-box; } .cp-card-engage--distributed button.cp-card-engage__metric i { line-height: 1; vertical-align: middle; } .cp-card-engage--distributed .cp-fav-count, .cp-card-engage--distributed .cp-going-count { line-height: 1; } /* Unified category palette */ :root { --cp-cat-event: #fd7e14; --cp-cat-trail: #198754; --cp-cat-track: #ffc107; --cp-cat-product: #0d6efd; --cp-cat-compare: #3f4650; --cp-cat-market: #dc2626; --cp-cat-admin: #3b71ca; --cp-cat-event-font: #ffffff; --cp-cat-trail-font: #ffffff; --cp-cat-track-font: #222222; --cp-cat-product-font: #ffffff; --cp-cat-compare-font: #ffffff; --cp-cat-market-font: #ffffff; } [data-cp-theme="dark"], [data-mdb-theme="dark"] { --cp-cat-compare: #e9ecef; --cp-cat-compare-font: #111111; } .cp-section-title--event::after { background: var(--cp-cat-event); } .cp-section-title--trail::after { background: var(--cp-cat-trail); } .cp-section-title--track::after { background: var(--cp-cat-track); } .cp-section-title--product::after { background: var(--cp-cat-product); } .cp-section-title--compare::after { background: var(--cp-cat-compare); } .cp-section-title--market::after { background: var(--cp-cat-market); } .cp-section-title--admin::after { background: var(--cp-cat-admin); } .cp-btn-cat { font-weight: 600; } .cp-btn-cat-event { border-color: var(--cp-cat-event); color: var(--cp-cat-event); } .cp-btn-cat-event:hover, .cp-btn-cat-event:focus { background: var(--cp-cat-event); color: var(--cp-cat-event-font, #fff); } .cp-btn-cat-trail { border-color: var(--cp-cat-trail); color: var(--cp-cat-trail); } .cp-btn-cat-trail:hover, .cp-btn-cat-trail:focus { background: var(--cp-cat-trail); color: var(--cp-cat-trail-font, #fff); } .cp-btn-cat-track { border-color: var(--cp-cat-track); color: var(--cp-cat-track-font, #8a6600); } .cp-btn-cat-track:hover, .cp-btn-cat-track:focus { background: var(--cp-cat-track); color: var(--cp-cat-track-font, #2b2b2b); } .cp-btn-cat-product { border-color: var(--cp-cat-product); color: var(--cp-cat-product); } .cp-btn-cat-product:hover, .cp-btn-cat-product:focus { background: var(--cp-cat-product); color: var(--cp-cat-product-font, #fff); } .cp-btn-cat-compare { border-color: var(--cp-cat-compare); color: var(--cp-cat-compare); } .cp-btn-cat-compare:hover, .cp-btn-cat-compare:focus { background: var(--cp-cat-compare); color: var(--cp-cat-compare-font, #fff); } [data-cp-theme="dark"] .cp-btn-cat-compare, [data-mdb-theme="dark"] .cp-btn-cat-compare { border-color: #e9ecef; color: #e9ecef; } [data-cp-theme="dark"] .cp-btn-cat-compare:hover, [data-cp-theme="dark"] .cp-btn-cat-compare:focus, [data-mdb-theme="dark"] .cp-btn-cat-compare:hover, [data-mdb-theme="dark"] .cp-btn-cat-compare:focus { background: #e9ecef; color: #1e2329; } .cp-btn-cat-market { border-color: var(--cp-cat-market); color: var(--cp-cat-market); } .cp-btn-cat-market:hover, .cp-btn-cat-market:focus { background: var(--cp-cat-market); color: var(--cp-cat-market-font, #fff); } /* Solid / filled category CTAs — tone backgrounds toward black so white labels pass contrast (esp. event orange) */ .cp-btn-cat--filled { -webkit-font-smoothing: antialiased; font-weight: 600; letter-spacing: 0.01em; } .cp-btn-cat--filled.cp-btn-cat-event { background: color-mix(in srgb, var(--cp-cat-event) 72%, #1c0d02); border-color: #000000; border-color: #000000; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-event) 62%, #000000); } color: var(--cp-cat-event-font, #fff); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); } .cp-btn-cat--filled.cp-btn-cat-event:hover, .cp-btn-cat--filled.cp-btn-cat-event:focus { color: var(--cp-cat-event-font, #fff); filter: brightness(1.06); } .cp-btn-cat--filled.cp-btn-cat-trail { background: color-mix(in srgb, var(--cp-cat-trail) 82%, #041208); border-color: #000000; border-color: #000000; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-trail) 72%, #000000); } color: var(--cp-cat-trail-font, #fff); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); } .cp-btn-cat--filled.cp-btn-cat-trail:hover, .cp-btn-cat--filled.cp-btn-cat-trail:focus { color: var(--cp-cat-trail-font, #fff); filter: brightness(1.05); } /* Track: bright yellow fails with grey text; use warm amber fill + white label */ .cp-btn-cat--filled.cp-btn-cat-track { background: color-mix(in srgb, var(--cp-cat-track) 42%, #3d2b00); border-color: #2a1d00; border-color: #2a1d00; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-track) 32%, #2a1d00); } color: var(--cp-cat-track-font, #fff); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); } .cp-btn-cat--filled.cp-btn-cat-track:hover, .cp-btn-cat--filled.cp-btn-cat-track:focus { color: var(--cp-cat-track-font, #fff); filter: brightness(1.06); } .cp-btn-cat--filled.cp-btn-cat-product { background: color-mix(in srgb, var(--cp-cat-product) 78%, #031633); border-color: #000814; border-color: #000814; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-product) 68%, #000814); } color: var(--cp-cat-product-font, #fff); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); } .cp-btn-cat--filled.cp-btn-cat-product:hover, .cp-btn-cat--filled.cp-btn-cat-product:focus { color: var(--cp-cat-product-font, #fff); filter: brightness(1.06); } .cp-btn-cat--filled.cp-btn-cat-compare { background: color-mix(in srgb, var(--cp-cat-compare) 88%, #000000); border-color: #000000; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-compare) 78%, #000000); } color: var(--cp-cat-compare-font, #fff); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); } .cp-btn-cat--filled.cp-btn-cat-compare:hover, .cp-btn-cat--filled.cp-btn-cat-compare:focus { color: var(--cp-cat-compare-font, #fff); filter: brightness(1.06); } [data-cp-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-compare, [data-mdb-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-compare { background: #e2e6ea; border-color: #cfd6dd; color: #111827; text-shadow: none; } [data-cp-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-compare:hover, [data-cp-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-compare:focus, [data-mdb-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-compare:hover, [data-mdb-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-compare:focus { color: #0b1220; filter: brightness(0.98); } .cp-btn-cat--filled.cp-btn-cat-market { background: color-mix(in srgb, var(--cp-cat-market) 76%, #240505); border-color: #000000; border-color: #000000; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-market) 66%, #000000); } color: var(--cp-cat-market-font, #fff); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } .cp-btn-cat--filled.cp-btn-cat-market:hover, .cp-btn-cat--filled.cp-btn-cat-market:focus { color: var(--cp-cat-market-font, #fff); filter: brightness(1.06); } /* Dark theme: lift chroma slightly so labels don’t look muddy on near-black chrome */ [data-cp-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-event, [data-mdb-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-event { background: color-mix(in srgb, var(--cp-cat-event) 78%, #0a0502); border-color: #000000; border-color: #000000; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-event) 68%, #000000); } box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } [data-cp-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-trail, [data-mdb-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-trail { background: color-mix(in srgb, var(--cp-cat-trail) 85%, #020806); border-color: #000000; border-color: #000000; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-trail) 75%, #000000); } box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } [data-cp-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-track, [data-mdb-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-track { background: color-mix(in srgb, var(--cp-cat-track) 48%, #2a1f00); border-color: #1a1200; border-color: #1a1200; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-track) 38%, #1a1200); } box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } [data-cp-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-product, [data-mdb-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-product { background: color-mix(in srgb, var(--cp-cat-product) 80%, #020a1a); border-color: #000510; border-color: #000510; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-product) 70%, #000510); } box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } [data-cp-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-market, [data-mdb-theme="dark"] .cp-btn-cat--filled.cp-btn-cat-market { background: color-mix(in srgb, var(--cp-cat-market) 78%, #1a0303); border-color: #000000; border-color: #000000; @supports (border-color: color-mix(in srgb, white, black)) { border-color: color-mix(in srgb, var(--cp-cat-market) 68%, #000000); } box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .cp-badge-event { background-color: var(--cp-cat-event) !important; color: var(--cp-cat-event-font, #fff) !important; } .cp-badge-trail { background-color: var(--cp-cat-trail) !important; color: var(--cp-cat-trail-font, #fff) !important; } .cp-badge-track { background-color: var(--cp-cat-track) !important; color: var(--cp-cat-track-font, #222) !important; } .cp-badge-product { background-color: var(--cp-cat-product) !important; color: var(--cp-cat-product-font, #fff) !important; } .cp-badge-compare { background-color: var(--cp-cat-compare) !important; color: var(--cp-cat-compare-font, #fff) !important; } [data-cp-theme="dark"] .cp-badge-compare, [data-mdb-theme="dark"] .cp-badge-compare { color: var(--cp-cat-compare-font, #111) !important; } /* Category icon text colors — used on all pages for section heading icons */ .cp-cat-text-event { color: var(--cp-cat-event); } .cp-cat-text-trail { color: var(--cp-cat-trail); } .cp-cat-text-track { color: var(--cp-cat-track); } .cp-cat-text-product { color: var(--cp-cat-product); } .cp-cat-text-compare { color: var(--cp-cat-compare); } .cp-cat-text-market { color: var(--cp-cat-market); } .cp-cat-text-admin { color: var(--cp-cat-admin); } /* Market / Product Catalog / Compare hub sub-nav */ .cp-market-hub-nav__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: .65rem .85rem; border-radius: .75rem; border: 1px solid rgba(13, 110, 253, .18); background: linear-gradient(180deg, rgba(13, 110, 253, .06), rgba(13, 110, 253, .02)); box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset, 0 8px 22px rgba(15, 23, 42, .06); } .cp-market-hub-nav__tabs { display: flex; flex-wrap: wrap; gap: .35rem; } .cp-market-hub-nav__tab { display: inline-flex; align-items: center; padding: .4rem .85rem; border-radius: 999px; font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--bs-body-color); border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .cp-market-hub-nav__tab:hover, .cp-market-hub-nav__tab:focus-visible { color: var(--cp-cat-product); background: rgba(13, 110, 253, .08); border-color: rgba(13, 110, 253, .22); } .cp-market-hub-nav__tab.is-active, .cp-market-hub-nav__tab[aria-current="page"] { color: #fff; background: linear-gradient(180deg, #3d8bfd, #0d6efd); border-color: #083fa0; @supports (border-color: color-mix(in srgb, white, black)) { background: linear-gradient(180deg, color-mix(in srgb, var(--cp-cat-product) 88%, #fff), var(--cp-cat-product)); border-color: color-mix(in srgb, var(--cp-cat-product) 70%, #000); } box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 12px rgba(13, 110, 253, .28); } [data-cp-theme="dark"] .cp-market-hub-nav__inner, [data-mdb-theme="dark"] .cp-market-hub-nav__inner { border-color: rgba(148, 163, 184, .22); background: linear-gradient(180deg, rgba(13, 110, 253, .14), rgba(15, 23, 42, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px rgba(0, 0, 0, .28); } [data-cp-theme="dark"] .cp-market-hub-nav__tab, [data-mdb-theme="dark"] .cp-market-hub-nav__tab { color: rgba(248, 250, 252, .92); } [data-cp-theme="dark"] .cp-market-hub-nav__tab:hover, [data-mdb-theme="dark"] .cp-market-hub-nav__tab:hover, [data-cp-theme="dark"] .cp-market-hub-nav__tab:focus-visible, [data-mdb-theme="dark"] .cp-market-hub-nav__tab:focus-visible { background: rgba(13, 110, 253, .18); border-color: rgba(96, 165, 250, .35); color: #fff; } /* Product type card: light gradient tile */ .cp-type-card { background: linear-gradient(145deg, #f8fafc, #eef2ff); } [data-cp-theme="dark"] .cp-type-card, [data-mdb-theme="dark"] .cp-type-card { background: linear-gradient(145deg, #1c2035, #1a2040); } /* Category card borders + title colors */ .cp-card { border-width: 3px; } .cp-card--event { border-color: var(--cp-cat-event) !important; } .cp-card--trail { border-color: var(--cp-cat-trail) !important; } .cp-card--track { border-color: var(--cp-cat-track) !important; } .cp-card--product { border-color: var(--cp-cat-product) !important; } .cp-card--compare { border-color: var(--cp-cat-compare) !important; } .cp-card-title-link { color: inherit; transition: color .2s ease; } .cp-card-title--event { color: var(--cp-cat-event-font, var(--cp-cat-event)) !important; } .cp-card-title--trail { color: var(--cp-cat-trail-font, var(--cp-cat-trail)) !important; } .cp-card-title--track { color: var(--cp-cat-track-font, var(--cp-cat-track)) !important; } .cp-card-title--product { color: var(--cp-cat-product-font, var(--cp-cat-product)) !important; } .cp-card-title--compare { color: var(--cp-cat-compare-font, var(--cp-cat-compare)) !important; } .cp-card-title--market { color: var(--cp-cat-market-font, var(--cp-cat-market)) !important; } /* Keep a colored glow when hovering/active */ .cp-card--event:hover, .cp-card--event.cp-card--active { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14) !important; outline: 2.5px solid var(--cp-cat-event) !important; } .cp-card--trail:hover, .cp-card--trail.cp-card--active { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important; outline: 2.5px solid var(--cp-cat-trail) !important; } .cp-card--track:hover, .cp-card--track.cp-card--active { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important; outline: 2.5px solid var(--cp-cat-track) !important; } .cp-card--product:hover, .cp-card--product.cp-card--active { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important; outline: 2.5px solid var(--cp-cat-product) !important; } .cp-card--market { border-color: var(--cp-cat-market) !important; } .cp-card--market:hover, .cp-card--market.cp-card--active { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important; outline: 2.5px solid var(--cp-cat-market) !important; } .cp-card--compare:hover, .cp-card--compare.cp-card--active { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important; outline: 2.5px solid var(--cp-cat-compare) !important; } @supports (color: color-mix(in srgb, white, black)) { .cp-card--event:hover, .cp-card--event.cp-card--active { box-shadow: 0 12px 36px color-mix(in srgb, var(--cp-cat-event) 18%, transparent) !important; outline: 2.5px solid color-mix(in srgb, var(--cp-cat-event) 52%, transparent) !important; } .cp-card--trail:hover, .cp-card--trail.cp-card--active { box-shadow: 0 12px 36px color-mix(in srgb, var(--cp-cat-trail) 30%, transparent) !important; outline: 2.5px solid color-mix(in srgb, var(--cp-cat-trail) 76%, transparent) !important; } .cp-card--track:hover, .cp-card--track.cp-card--active { box-shadow: 0 12px 36px color-mix(in srgb, var(--cp-cat-track) 34%, transparent) !important; outline: 2.5px solid color-mix(in srgb, var(--cp-cat-track) 88%, transparent) !important; } .cp-card--product:hover, .cp-card--product.cp-card--active { box-shadow: 0 12px 36px color-mix(in srgb, var(--cp-cat-product) 30%, transparent) !important; outline: 2.5px solid color-mix(in srgb, var(--cp-cat-product) 76%, transparent) !important; } .cp-card--market:hover, .cp-card--market.cp-card--active { box-shadow: 0 12px 36px color-mix(in srgb, var(--cp-cat-market) 28%, transparent) !important; outline: 2.5px solid color-mix(in srgb, var(--cp-cat-market) 72%, transparent) !important; } .cp-card--compare:hover, .cp-card--compare.cp-card--active { box-shadow: 0 12px 36px color-mix(in srgb, var(--cp-cat-compare) 34%, transparent) !important; outline: 2.5px solid color-mix(in srgb, var(--cp-cat-compare) 80%, transparent) !important; } } [data-cp-theme="dark"] .cp-card--compare:hover, [data-cp-theme="dark"] .cp-card--compare.cp-card--active, [data-mdb-theme="dark"] .cp-card--compare:hover, [data-mdb-theme="dark"] .cp-card--compare.cp-card--active { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28) !important; outline-color: var(--cp-cat-compare) !important; } @supports (color: color-mix(in srgb, white, black)) { [data-cp-theme="dark"] .cp-card--compare:hover, [data-cp-theme="dark"] .cp-card--compare.cp-card--active, [data-mdb-theme="dark"] .cp-card--compare:hover, [data-mdb-theme="dark"] .cp-card--compare.cp-card--active { box-shadow: 0 12px 36px color-mix(in srgb, var(--cp-cat-compare) 28%, transparent) !important; outline-color: color-mix(in srgb, var(--cp-cat-compare) 85%, transparent) !important; } } .cp-card--event .cp-card-img-type-badge { box-shadow: 0 0 10px color-mix(in srgb, var(--cp-cat-event) 70%, transparent), 0 2px 8px rgba(0, 0, 0, 0.4) !important; } .cp-card--trail .cp-card-img-type-badge { background: color-mix(in srgb, var(--cp-cat-trail) 88%, transparent) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--cp-cat-trail) 75%, transparent), 0 2px 8px rgba(0, 0, 0, 0.45) !important; } .cp-card--track .cp-card-img-type-badge { box-shadow: 0 0 10px color-mix(in srgb, var(--cp-cat-track) 70%, transparent), 0 2px 8px rgba(0, 0, 0, 0.4) !important; } .cp-card--product .cp-card-img-type-badge { box-shadow: 0 0 10px color-mix(in srgb, var(--cp-cat-product) 70%, transparent), 0 2px 8px rgba(0, 0, 0, 0.4) !important; } .cp-card--compare .cp-card-img-type-badge { box-shadow: 0 0 8px color-mix(in srgb, var(--cp-cat-compare) 50%, transparent), 0 2px 8px rgba(0, 0, 0, 0.4) !important; } .cp-card--market .cp-card-img-type-badge { box-shadow: 0 0 10px color-mix(in srgb, var(--cp-cat-market) 70%, transparent), 0 2px 8px rgba(0, 0, 0, 0.4) !important; } .cp-card--event .card-footer { border-top: 1px solid var(--cp-cat-event) !important; } .cp-card--trail .card-footer { border-top: 1px solid var(--cp-cat-trail) !important; } .cp-card--track .card-footer { border-top: 1px solid var(--cp-cat-track) !important; } .cp-card--product .card-footer { border-top: 1px solid var(--cp-cat-product) !important; } .cp-card--compare .card-footer { border-top: 1px solid var(--cp-cat-compare) !important; } .cp-card--market .card-footer { border-top: 1px solid var(--cp-cat-market) !important; } @supports (color: color-mix(in srgb, white, black)) { .cp-card--event .card-footer { border-top: 1px solid color-mix(in srgb, var(--cp-cat-event) 22%, transparent) !important; } .cp-card--trail .card-footer { border-top: 1px solid color-mix(in srgb, var(--cp-cat-trail) 18%, transparent) !important; } .cp-card--track .card-footer { border-top: 1px solid color-mix(in srgb, var(--cp-cat-track) 25%, transparent) !important; } .cp-card--product .card-footer { border-top: 1px solid color-mix(in srgb, var(--cp-cat-product) 20%, transparent) !important; } .cp-card--compare .card-footer { border-top: 1px solid color-mix(in srgb, var(--cp-cat-compare) 18%, transparent) !important; } .cp-card--market .card-footer { border-top: 1px solid color-mix(in srgb, var(--cp-cat-market) 20%, transparent) !important; } } /* Card "selected" state — triggered by JS on map-pin hover */ .cp-card.cp-card--active { transform: translateY(-6px) scale(1.015); outline-offset: 1px; z-index: 10; position: relative; } /* Legacy: only applies outside .cp-card-img-wrap (post cards use the wrap block below). */ .cp-card > .card-img-top { height: 200px; object-fit: cover; } .cp-card .card-body { padding: 1rem 1.2rem; } [data-cp-theme="dark"] .cp-card { background-color: #1e1e2e; border: 3px solid rgba(255,255,255,.12); } [data-cp-theme="light"] .cp-card { background-color: #fff; border-width: 3px; box-shadow: 0 3px 14px rgba(0,0,0,.08); } [data-cp-theme="dark"] .cp-card--event, [data-mdb-theme="dark"] .cp-card--event, [data-cp-theme="light"] .cp-card--event, [data-mdb-theme="light"] .cp-card--event { border-color: var(--cp-cat-event) !important; } [data-cp-theme="dark"] .cp-card--trail, [data-mdb-theme="dark"] .cp-card--trail, [data-cp-theme="light"] .cp-card--trail, [data-mdb-theme="light"] .cp-card--trail { border-color: var(--cp-cat-trail) !important; } [data-cp-theme="dark"] .cp-card--track, [data-mdb-theme="dark"] .cp-card--track, [data-cp-theme="light"] .cp-card--track, [data-mdb-theme="light"] .cp-card--track { border-color: var(--cp-cat-track) !important; } [data-cp-theme="dark"] .cp-card--product, [data-mdb-theme="dark"] .cp-card--product, [data-cp-theme="light"] .cp-card--product, [data-mdb-theme="light"] .cp-card--product { border-color: var(--cp-cat-product) !important; } [data-cp-theme="dark"] .cp-card--compare, [data-mdb-theme="dark"] .cp-card--compare, [data-cp-theme="light"] .cp-card--compare, [data-mdb-theme="light"] .cp-card--compare { border-color: var(--cp-cat-compare) !important; } [data-cp-theme="dark"] .cp-card--market, [data-mdb-theme="dark"] .cp-card--market, [data-cp-theme="light"] .cp-card--market, [data-mdb-theme="light"] .cp-card--market { border-color: var(--cp-cat-market) !important; } .cp-card--business { border-color: #a0522d !important; } .cp-card--business:hover, .cp-card--business.cp-card--active { box-shadow: 0 16px 40px rgba(139, 69, 19, 0.28), 0 4px 14px rgba(0, 0, 0, 0.14) !important; } [data-cp-theme="dark"] .cp-card--business, [data-mdb-theme="dark"] .cp-card--business, [data-cp-theme="light"] .cp-card--business, [data-mdb-theme="light"] .cp-card--business { border-color: #c4a574 !important; } /* ---- Star rating ---- */ .cp-stars { color: #ffc107; font-size: .9rem; letter-spacing: 1px; } .cp-stars .fa-star.empty { color: rgba(128,128,128,.3); } /* ---- Spec value & unit colors ---- */ .cp-spec-value { font-weight: 700; font-size: 1rem; color: #0d6efd; } .cp-spec-unit { font-size: .75rem; font-weight: 500; color: #6c757d; letter-spacing: .03em; } [data-cp-theme="dark"] .cp-spec-value { color: #7eb8ff; } [data-cp-theme="dark"] .cp-spec-unit { color: #9ba5b0; } /* ---- Hero Section ---- */ .cp-hero { padding: 5rem 0 3rem; text-align: center; } [data-cp-theme="dark"] .cp-hero { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); color: #fff; } [data-cp-theme="light"] .cp-hero { background: linear-gradient(135deg, #e0f2fe, #f0fdf4); color: #1a1a2e; } /* ---- Section headings ---- */ .cp-section-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -.3px; position: relative; display: inline-block; padding-bottom: .5rem; margin-bottom: 1.5rem; } .cp-section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #0d6efd; border-radius: 2px; } /* ---- Back arrow (inline with page title) ---- */ .cp-back-arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.15); color: var(--mdb-body-color); text-decoration: none !important; transition: background .15s ease, border-color .15s ease, transform .12s ease; } .cp-back-arrow:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.3); color: inherit; transform: translateX(-2px); } [data-cp-theme="dark"] .cp-back-arrow { border-color: rgba(255,255,255,.18); } [data-cp-theme="dark"] .cp-back-arrow:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); } /* Section title link */ .cp-section-title-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; } .cp-section-title-link:hover { opacity: 0.75; } /* ---- Map containers ---- (radius matches .cp-map-template-map-card / shell: 1rem) */ .cp-map { width: 100%; border-radius: 1rem; overflow: hidden; } /* * Google Maps: tile layers ignore border-radius unless the wrapper clips. * 1rem matches the map card chrome; clip-path + overflow forces visible rounding. */ .cp-map-template-map-canvas-wrap { position: relative; /* containing block for the position-absolute canvas child */ width: 100%; border-radius: 1rem !important; overflow: hidden !important; isolation: isolate; transform: translateZ(0); -webkit-clip-path: inset(0 round 1rem) !important; clip-path: inset(0 round 1rem) !important; } @media (min-width: 768px) { .cp-map-template-map-canvas-wrap { min-height: 300px; } } .cp-map-template-map-canvas-wrap > .cp-map-template-map-canvas, .cp-map-template-map-canvas-wrap > .cp-map { border-radius: 1rem !important; overflow: hidden !important; } .cp-map-template-map-canvas-wrap .gm-style { border-radius: 1rem !important; overflow: hidden !important; } /* Pages that omit canvas-wrap (e.g. legacy map markup): clip the map div. */ .cp-map-hero-wrap > .cp-map.cp-map-template-map-canvas:first-child { border-radius: 1rem !important; -webkit-clip-path: inset(0 round 1rem) !important; clip-path: inset(0 round 1rem) !important; } /* ---- Utility ---- */ .cp-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cp-divider { border: none; border-top: 1px solid rgba(128,128,128,.15); margin: 2rem 0; } /* ---- Avatar ---- */ .cp-avatar { width: 32px; height: 32px; object-fit: cover; flex-shrink: 0; } .cp-avatar-lg { width: 96px; height: 96px; object-fit: cover; } /* ---- Chips ---- */ .cp-chip-list { display: flex; flex-wrap: wrap; gap: .45rem; } .cp-chip-input { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; border: 1px solid #bdbdbd; border-radius: .375rem; background: #fff; } .cp-chip-entry { flex: 1 1 8rem; min-width: 8rem; border: 0; background: transparent; color: inherit; outline: none; padding: .2rem 0; } .cp-chip-entry::placeholder { color: #6c757d; } .cp-chip-empty { color: #6c757d; font-size: .9rem; } [data-cp-theme="dark"] .cp-chip-input { background: #2a2a3e; border-color: rgba(255,255,255,.2); color: #e0e0e0; } [data-cp-theme="dark"] .cp-chip-entry::placeholder, [data-cp-theme="dark"] .cp-chip-empty { color: #9aa0b4; } .cp-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid rgba(13, 110, 253, .18); background: rgba(13, 110, 253, .08); color: inherit; text-decoration: none; font-size: .84rem; line-height: 1.1; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } /* Exclude .cp-user-chip — it has its own hover (content color + pill); generic chip hover was overriding it */ .cp-chip:not(.cp-user-chip):hover, .cp-chip:not(.cp-user-chip):focus { background: rgba(13, 110, 253, .14); border-color: rgba(13, 110, 253, .3); color: inherit; transform: translateY(-1px); } .cp-chip--tag { background: rgba(108, 117, 125, .12); border-color: rgba(108, 117, 125, .22); } .cp-chip--tag:hover, .cp-chip--tag:focus { background: rgba(59, 113, 202, .14); border-color: rgba(59, 113, 202, .28); } .cp-chip--border-thick { --cp-chip-border-width: 4.5px; border-width: var(--cp-chip-border-width); } .cp-user-chip.cp-chip--border-thick { --cp-chip-border-width: 4.5px; } /* Pre-generated PNG chip wrapper — bare button/link, no background or padding */ .cp-chip-png-wrap { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; cursor: pointer; line-height: 0; text-decoration: none; } .cp-chip-png-wrap:focus-visible { outline: 2px solid var(--mdb-primary, #3b71ca); outline-offset: 2px; border-radius: 50rem; } /* The chip PNG image itself */ .cp-chip-png { height: 2.5rem; width: auto; display: block; border-radius: 50rem; } /* The space between user Chip image and text - Changed by SamL3 */ .cp-chip--user { padding-left: 0; gap: 0; --mdb-chip-img-margin-right: 8px; --mdb-chip-padding-right: 8px; --mdb-chip-margin-right: 6px; overflow: visible; } /* Keep MDB chip vars aligned everywhere user chips render (not navbar-only). */ .cp-chip--user.cp-user-chip { --mdb-chip-height: 30px; overflow: visible; } .cp-chip__avatar, .cp-chip__avatar-fallback { width: 1.55rem; height: 1.55rem; border-radius: 50%; flex-shrink: 0; } .cp-chip__avatar { object-fit: cover; } .cp-chip__avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: #3b71ca; color: #fff; font-size: .68rem; font-weight: 700; } .cp-chip__content { display: inline-flex; align-items: baseline; gap: .35rem; min-width: 0; } .cp-chip__title { font-weight: 600; white-space: nowrap; } .cp-chip__meta { color: #6c757d; font-size: .76rem; white-space: nowrap; } .cp-chip__remove { border: 0; background: transparent; color: inherit; line-height: 1; padding: 0; margin-left: .1rem; } .cp-chip__remove:hover, .cp-chip__remove:focus { color: #dc3545; } .chip.cp-chip, .cp-chip.cp-chip--user { text-decoration: none; margin-bottom: 0; } .chip.cp-chip .close { cursor: pointer; } /* ── Role-tinted user chips (single shared component look) ─────────────── */ /* One scale site-wide — use only; no per-page size variants. */ .cp-user-chip { /* Dark charcoal pill + violet accent — same vocabulary site-wide (not Bootstrap primary blue). */ --cp-user-chip-title-size: 1.05rem; --cp-user-chip-icon-size: 0.88rem; --cp-user-chip-icon-box: 0.92rem; --cp-chip-accent: rgba(167, 139, 250, 0.82); --cp-chip-border-width: 3px; --cp-chip-height: calc(2rem + 4px); --cp-chip-avatar-width: calc(var(--cp-chip-height) + (2 * var(--cp-chip-border-width))); --cp-chip-bg: rgba(15, 23, 42, 0.78); /* Slightly softer than hover so @handle brightens clearly on hover */ --cp-chip-text: rgba(248, 250, 252, 0.9); --cp-chip-text-hover: #ffffff; --cp-chip-icon-hover: rgba(255, 255, 255, 0.98); /* Live tokens for inner text/icon — hover swaps these on the root only */ --cp-chip-content: var(--cp-chip-text); --cp-chip-icon: rgba(225, 237, 255, 0.9); position: relative; display: inline-flex; align-items: stretch; justify-content: flex-start; gap: 0; box-sizing: border-box; vertical-align: middle; min-height: var(--cp-chip-avatar-width); padding: 0 .34rem 0 0; height: var(--cp-chip-avatar-width); line-height: 1; border-style: solid; border-width: var(--cp-chip-border-width) var(--cp-chip-border-width) var(--cp-chip-border-width) 0; border-color: var(--cp-chip-accent) !important; border-radius: 999px; background: linear-gradient(165deg, var(--cp-chip-bg), rgba(10, 18, 34, .58)) !important; color: var(--cp-chip-text) !important; /* Dark glass body without white top sheen */ box-shadow: 0 -2px 5px rgba(0, 0, 0, .22) inset, 0 4px 0 rgba(0, 0, 0, .32), 0 5px 0 rgba(0, 0, 0, .12), 0 14px 28px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .18); overflow: visible; transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, color .16s ease; } /* Beat stray `.btn` wrappers when bundle order varies (tables, cards, nav). */ a.cp-user-chip.btn, button.cp-user-chip.btn, .cp-user-chip.btn, a.cp-user-chip, button.cp-user-chip { padding: 0 .34rem 0 0; min-height: var(--cp-chip-avatar-width); height: var(--cp-chip-avatar-width); line-height: 1; border-style: solid !important; border-width: var(--cp-chip-border-width) var(--cp-chip-border-width) var(--cp-chip-border-width) 0 !important; border-color: var(--cp-chip-accent) !important; } a.cp-user-chip { text-decoration: none !important; } .cp-user-chip--user { --cp-chip-accent: rgba(167, 139, 250, 0.88); --cp-chip-bg: rgba(24, 21, 43, 0.72); --cp-chip-text-hover: #ffffff; --cp-chip-icon-hover: rgba(245, 243, 255, 1); } .cp-user-chip--moderator { --cp-chip-accent: rgba(25,135,84,.9); --cp-chip-bg: rgba(25,135,84,.24); --cp-chip-text-hover: #f2fff9; --cp-chip-icon-hover: rgba(208, 255, 230, 0.98); } .cp-user-chip--admin { --cp-chip-accent: rgba(220,53,69,.9); --cp-chip-bg: rgba(220,53,69,.24); --cp-chip-text-hover: #fff8f8; --cp-chip-icon-hover: rgba(255, 226, 230, 0.98); } .cp-user-chip--superuser { --cp-chip-accent: rgba(111,66,193,.92); --cp-chip-bg: rgba(111,66,193,.26); --cp-chip-text-hover: #faf6ff; --cp-chip-icon-hover: rgba(236, 224, 255, 0.98); } /* Account type (individual / seller / business) — icon only; role colors unchanged */ .cp-chip__account-type-icon { display: inline-flex; align-items: center; margin-right: 0.28rem; font-size: 0.65rem; opacity: 0.9; line-height: 1; } .cp-chip__account-type-icon i { vertical-align: -0.06em; } .cp-user-chip .cp-chip__content { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; flex: 1 1 auto; min-width: 0; padding: 0 5px; color: var(--cp-chip-content) !important; } .cp-user-chip .cp-chip__account-type-icon { display: inline-flex !important; align-items: center; justify-content: center; width: var(--cp-user-chip-icon-box); min-width: var(--cp-user-chip-icon-box); margin-right: 0; margin-left: 5px; font-size: var(--cp-user-chip-icon-size); color: var(--cp-chip-icon) !important; /* text-shadow: 0 5px 2px rgba(0,0,0,.45); */ transition: color .16s ease, opacity .16s ease; } .cp-user-chip .cp-chip__account-type-icon i { color: inherit !important; } .cp-user-chip .cp-chip__title { font-size: var(--cp-user-chip-title-size); font-weight: 800; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; color: var(--cp-chip-content) !important; /* text-shadow: 0 1px 2px rgba(0, 0, 0, .4); */ transition: color .16s ease, text-shadow .16s ease; } .cp-user-chip .cp-chip__verified-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; /* FA check-circle has tight left sidebearings — balance gaps beside @handle */ padding-inline: 0.2rem; margin-inline-start: 0.05rem; } .cp-user-chip .cp-chip__verified-glyph { font-size: var(--cp-user-chip-icon-size); color: #198754 !important; filter: drop-shadow(0 0 4px rgba(25, 135, 84, 0.55)); } /* Avatar is flush-left and doubles as the visual left closure of the chip. */ .cp-user-chip .cp-chip__avatar, .cp-user-chip .cp-chip__avatar-fallback { position: relative; align-self: center; width: var(--cp-chip-avatar-width); min-width: var(--cp-chip-avatar-width); height: var(--cp-chip-avatar-width); margin: 0; border: var(--cp-chip-border-width) solid var(--cp-chip-accent); border-right-width: var(--cp-chip-border-width); border-radius: 50%; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 -1px 2px rgba(0, 0, 0, .2) inset, 0 6px 14px rgba(0, 0, 0, .35); } .cp-user-chip .cp-chip__avatar { object-fit: cover; } /* Initials disc — match dark chip family (not generic MDB blue) */ .cp-user-chip .cp-chip__avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #2f2844 0%, #16101e 100%) !important; color: #f5f3ff !important; font-size: 0.65rem; } .cp-user-chip--moderator .cp-chip__avatar, .cp-user-chip--moderator .cp-chip__avatar-fallback { box-shadow: 0 2px 0 rgba(255, 255, 255, .2) inset, 0 -2px 4px rgba(0, 0, 0, .28) inset, 0 3px 0 rgba(0, 0, 0, .35), 0 10px 22px rgba(0, 0, 0, .5), 0 10px 28px rgba(25, 135, 84, .45), 0 0 0 1px rgba(0, 0, 0, .2); } .cp-user-chip--admin .cp-chip__avatar, .cp-user-chip--admin .cp-chip__avatar-fallback { box-shadow: 0 2px 0 rgba(255, 255, 255, .2) inset, 0 -2px 4px rgba(0, 0, 0, .28) inset, 0 3px 0 rgba(0, 0, 0, .35), 0 10px 22px rgba(0, 0, 0, .5), 0 10px 28px rgba(220, 53, 69, .45), 0 0 0 1px rgba(0, 0, 0, .2); } .cp-user-chip--superuser .cp-chip__avatar, .cp-user-chip--superuser .cp-chip__avatar-fallback { box-shadow: 0 2px 0 rgba(255, 255, 255, .2) inset, 0 -2px 4px rgba(0, 0, 0, .28) inset, 0 3px 0 rgba(0, 0, 0, .35), 0 10px 22px rgba(0, 0, 0, .5), 0 10px 28px rgba(111, 66, 193, .48), 0 0 0 1px rgba(0, 0, 0, .2); } .cp-user-chip:hover, .cp-user-chip:focus-visible { --cp-chip-content: var(--cp-chip-text-hover); --cp-chip-icon: var(--cp-chip-icon-hover); color: var(--cp-chip-text-hover) !important; transform: translateY(-2px); /* No filter:brightness — washes out content hover contrast */ box-shadow: 0 -2px 5px rgba(0, 0, 0, .18) inset, 0 5px 0 rgba(0, 0, 0, .28), 0 6px 0 rgba(0, 0, 0, .1), 0 18px 34px rgba(0, 0, 0, .42), 0 0 0 1px rgba(0, 0, 0, .16); } /* Navbar: same chip hover as the rest of the site (white @handle + icon — not Bootstrap primary blue). */ .cp-navbar .dropdown-toggle:hover .cp-user-chip, .cp-navbar .dropdown-toggle:focus-visible .cp-user-chip, .cp-navbar .nav-link.cp-navbar-user-toggle:hover .cp-user-chip, .cp-navbar .nav-link.cp-navbar-user-toggle:focus-visible .cp-user-chip, .cp-navbar .nav-link.cp-navbar-user-toggle.show .cp-user-chip { --cp-chip-content: var(--cp-chip-text-hover); --cp-chip-icon: var(--cp-chip-icon-hover); color: var(--cp-chip-text-hover) !important; transform: translateY(-2px); box-shadow: 0 -2px 5px rgba(0, 0, 0, .18) inset, 0 5px 0 rgba(0, 0, 0, .28), 0 6px 0 rgba(0, 0, 0, .1), 0 18px 34px rgba(0, 0, 0, .42), 0 0 0 1px rgba(0, 0, 0, .16), 0 0 24px rgba(167, 139, 250, 0.35); } .cp-user-chip:hover .cp-chip__content, .cp-user-chip:focus-visible .cp-chip__content { color: var(--cp-chip-text-hover) !important; } .cp-user-chip:hover .cp-chip__account-type-icon, .cp-user-chip:focus-visible .cp-chip__account-type-icon { color: var(--cp-chip-icon-hover) !important; } .cp-user-chip:hover .cp-chip__title, .cp-user-chip:focus-visible .cp-chip__title { color: var(--cp-chip-text-hover) !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, .4); } .cp-navbar .dropdown-toggle:hover .cp-user-chip .cp-chip__title, .cp-navbar .dropdown-toggle:focus-visible .cp-user-chip .cp-chip__title, .cp-navbar .nav-link.cp-navbar-user-toggle:hover .cp-user-chip .cp-chip__title, .cp-navbar .nav-link.cp-navbar-user-toggle:focus-visible .cp-user-chip .cp-chip__title, .cp-navbar .nav-link.cp-navbar-user-toggle.show .cp-user-chip .cp-chip__title { color: var(--cp-chip-text-hover) !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, .4); } [data-cp-theme="dark"] .cp-navbar .dropdown-toggle:hover .cp-user-chip .cp-chip__title, [data-cp-theme="dark"] .cp-navbar .dropdown-toggle:focus-visible .cp-user-chip .cp-chip__title, [data-cp-theme="dark"] .cp-navbar .nav-link.cp-navbar-user-toggle:hover .cp-user-chip .cp-chip__title, [data-cp-theme="dark"] .cp-navbar .nav-link.cp-navbar-user-toggle:focus-visible .cp-user-chip .cp-chip__title, [data-cp-theme="dark"] .cp-navbar .nav-link.cp-navbar-user-toggle.show .cp-user-chip .cp-chip__title { text-shadow: 0 0 14px rgba(255, 255, 255, 0.25), 0 0 20px rgba(167, 139, 250, 0.35), 0 1px 3px rgba(0, 0, 0, .35); } .cp-user-chip:active { transform: translateY(1px); filter: brightness(0.98); box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 2px 6px rgba(0, 0, 0, .2) inset, 0 -1px 0 rgba(0, 0, 0, .15) inset, 0 2px 0 rgba(0, 0, 0, .32), 0 8px 16px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .2); } /* User chip opens profile modal — native button reset */ button.cp-user-chip { font: inherit; text-align: inherit; cursor: pointer; } .cp-user-chip--interactive { cursor: pointer; } [data-cp-theme="dark"] .cp-chip { background: rgba(59, 113, 202, .14); border-color: rgba(126, 184, 255, .2); color: #edf4ff; } [data-cp-theme="dark"] .cp-chip:not(.cp-user-chip):hover, [data-cp-theme="dark"] .cp-chip:not(.cp-user-chip):focus { background: rgba(59, 113, 202, .22); border-color: rgba(126, 184, 255, .34); } [data-cp-theme="dark"] .cp-chip--tag { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); } [data-cp-theme="dark"] .cp-chip--tag:hover, [data-cp-theme="dark"] .cp-chip--tag:focus { background: rgba(59, 113, 202, .18); border-color: rgba(126, 184, 255, .28); } [data-cp-theme="dark"] .cp-chip__meta { color: #aab7c6; } /* ---- Map containers ---- */ .cp-map-sm { width: 100%; height: 300px; border-radius: 12px; overflow: hidden; } .cp-map-full { width: 100%; height: 500px; border-radius: 0; } /* ---- Stars ---- */ .cp-star-btn { line-height: 1; font-size: 1rem; } .cp-star-btn .fa-star { color: #ffc107; } .cp-star-btn .far.fa-star { color: #ccc; } /* ---- Favorite button ---- */ .cp-favorite-btn { background: none; line-height: 1; cursor: pointer; } .cp-favorite-btn.active .fa-heart { color: #dc3545; } .cp-fav-count { color: #495057; min-width: 1ch; display: inline-block; } [data-cp-theme="dark"] .cp-fav-count { color: #cfd8dc; } /* ---- Post cover placeholder (see .cp-card .cp-card-img-wrap for image band) ---- */ /* ---- Hero section ---- */ .cp-hero { padding: 80px 20px 60px; text-align: center; } [data-cp-theme="light"] .cp-hero { background: linear-gradient(135deg, #e8f4ff 0%, #f8f0ff 100%); } [data-cp-theme="dark"] .cp-hero { background: linear-gradient(135deg, #0d1b2a 0%, #1a0a2e 100%); } /* ---- Cover banner (profile) ---- */ .cp-cover-banner { height: 220px; background: linear-gradient(135deg, #0d6efd 0%, #6f42c1 100%); object-fit: cover; width: 100%; } /* ---- Difficulty badges ---- */ .cp-diff-easy { background-color: #198754; } .cp-diff-moderate { background-color: #ffc107; color: #000 !important; } .cp-diff-hard { background-color: #fd7e14; } .cp-diff-expert { background-color: #dc3545; } /* ---- Track session active indicator ---- */ .cp-track-active { animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* ---- Comparison table ---- */ .cp-compare-table th { white-space: nowrap; min-width: 140px; } .cp-compare-table td { vertical-align: middle; } /* ---- Form map container ---- */ .cp-map-picker { width: 100%; height: 350px; border-radius: 8px; overflow: hidden; } /* ---- Mobile navbar readability fix ---- */ /* ===== Map Info Window / Popup ===== */ /* --- Google Maps InfoWindow chrome reset --- */ .gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 18px !important; background: transparent !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; } .gm-style .gm-style-iw-d { overflow: visible !important; max-width: none !important; } .gm-style .gm-style-iw-tc, .gm-style .gm-style-iw-chr { display: none !important; } .gm-style .gm-ui-hover-effect { display: none !important; } /* --- MapLibre popup chrome reset --- */ .maplibregl-popup-content { padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } .maplibregl-popup-tip { display: none !important; } .maplibregl-popup-close-button { display: none !important; } /* --- Shared popup card --- */ .cp-marker-info { --cp-marker-accent: #fd7e14; --cp-marker-accent-soft: rgba(253, 126, 20, 0.18); --cp-marker-accent-glow: rgba(253, 126, 20, 0.22); --cp-marker-accent-text: #ffd7bf; --cp-marker-bg-start: rgba(16, 30, 48, 0.97); --cp-marker-bg-end: rgba(25, 43, 67, 0.95); --cp-marker-text: #e8f0fa; --cp-marker-sub: #d7e3f1; --cp-marker-border-subtle: rgba(255, 255, 255, 0.08); position: relative; min-width: 200px; max-width: 252px; padding: .85rem .9rem .8rem; border-radius: 16px; line-height: 1.25; color: var(--cp-marker-text); background: radial-gradient(circle at top right, var(--cp-marker-accent-glow), transparent 42%), linear-gradient(145deg, var(--cp-marker-bg-start), var(--cp-marker-bg-end)); border: 1.5px solid var(--cp-marker-accent); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: visible; z-index: 1; } /* Downward pointer — overlaps top of marker */ .cp-marker-info::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 20px; height: 20px; border-radius: 0 0 4px 0; transform: translateX(-50%) rotate(45deg); background: var(--cp-marker-bg-end); border-right: 1.5px solid var(--cp-marker-accent); border-bottom: 1.5px solid var(--cp-marker-accent); z-index: 0; } /* Light theme */ [data-cp-theme="light"] .cp-marker-info, [data-mdb-theme="light"] .cp-marker-info { --cp-marker-bg-start: rgba(255, 255, 255, 0.98); --cp-marker-bg-end: rgba(243, 247, 255, 0.97); --cp-marker-text: #1a2a3a; --cp-marker-sub: #4b5563; --cp-marker-border-subtle: rgba(0, 0, 0, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } [data-cp-theme="light"] .cp-marker-info__title, [data-mdb-theme="light"] .cp-marker-info__title { color: #111827; } [data-cp-theme="light"] .cp-marker-info__addr, [data-mdb-theme="light"] .cp-marker-info__addr { color: #4b5563; } [data-cp-theme="light"] .cp-marker-info__eyebrow, [data-mdb-theme="light"] .cp-marker-info__eyebrow { color: var(--cp-marker-accent); } /* Category accents */ .cp-marker-info--event { --cp-marker-accent: #fd7e14; --cp-marker-accent-soft: rgba(253, 126, 20, 0.18); --cp-marker-accent-glow: rgba(253, 126, 20, 0.22); --cp-marker-accent-text: #ffd7bf; } .cp-marker-info--trail { --cp-marker-accent: #198754; --cp-marker-accent-soft: rgba(25, 135, 84, 0.18); --cp-marker-accent-glow: rgba(25, 135, 84, 0.22); --cp-marker-accent-text: #cbf3df; } .cp-marker-info--track { --cp-marker-accent: #ffc107; --cp-marker-accent-soft: rgba(255, 193, 7, 0.18); --cp-marker-accent-glow: rgba(255, 193, 7, 0.22); --cp-marker-accent-text: #fff3cd; } .cp-marker-info--product { --cp-marker-accent: #0d6efd; --cp-marker-accent-soft: rgba(13, 110, 253, 0.18); --cp-marker-accent-glow: rgba(13, 110, 253, 0.22); --cp-marker-accent-text: #d2e6ff; } .cp-marker-info--compare { --cp-marker-accent: #3f4650; --cp-marker-accent-soft: rgba(63, 70, 80, 0.18); --cp-marker-accent-glow: rgba(63, 70, 80, 0.18); --cp-marker-accent-text: #e2e6ea; } .cp-marker-info--business { --cp-marker-accent: #8b4513; --cp-marker-accent-soft: rgba(139, 69, 19, 0.2); --cp-marker-accent-glow: rgba(160, 82, 45, 0.22); --cp-marker-accent-text: #f3e0d4; } /* Home map: compact bubble (type + title). In-flow triangle so the map anchor meets the pin tip. */ .cp-marker-info.cp-marker-info--home { display: flex; flex-direction: column; align-items: stretch; min-width: 0; max-width: min(220px, 72vw); padding: 0.28rem 0.5rem 0.22rem; border-radius: 11px; line-height: 1.2; } .cp-marker-info.cp-marker-info--home::after { content: none; display: none; } .cp-marker-info.cp-marker-info--home .cp-marker-info__header { display: flex; flex-direction: column; align-items: stretch; gap: 0.12rem; padding-right: 0; margin-bottom: 0; } .cp-marker-info.cp-marker-info--home .cp-marker-info__eyebrow { margin-bottom: 0; font-size: 0.56rem; padding: 0.1rem 0.34rem; letter-spacing: 0.08em; align-self: flex-start; } .cp-marker-info.cp-marker-info--home .cp-marker-info__title { font-size: 0.78rem; line-height: 1.22; font-weight: 700; } /* Down-pointing triangle: in document flow so InfoWindow height includes the tip (anchors to pin). */ .cp-marker-info.cp-marker-info--home .cp-marker-info__tip-track { width: 0; height: 0; margin: 3px auto 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--cp-marker-bg-end); flex-shrink: 0; filter: drop-shadow(0 0.5px 0 var(--cp-marker-accent)); } [data-cp-theme="light"] .cp-marker-info.cp-marker-info--home .cp-marker-info__tip-track, [data-mdb-theme="light"] .cp-marker-info.cp-marker-info--home .cp-marker-info__tip-track { border-top-color: var(--cp-marker-bg-end); } .cp-marker-info__close { position: absolute; top: .55rem; right: .55rem; width: 26px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; overflow: visible; z-index: 2; } .cp-marker-info__close::before, .cp-marker-info__close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; border-radius: 999px; background: currentColor; transform-origin: center; } .cp-marker-info__close::before { transform: translate(-50%, -50%) rotate(45deg); } .cp-marker-info__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .cp-marker-info__close:hover { transform: scale(1.08); background: var(--cp-marker-accent-soft); border-color: var(--cp-marker-accent); } .cp-marker-info__header { display: flex; align-items: flex-start; gap: .5rem; padding-right: 2rem; margin-bottom: .4rem; } .cp-marker-info__eyebrow { display: inline-flex; align-items: center; font-size: .62rem; font-weight: 700; color: var(--cp-marker-accent-text); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; padding: .18rem .44rem; border-radius: 999px; background: var(--cp-marker-accent-soft); border: 1px solid rgba(255, 255, 255, 0.08); } .cp-marker-info__title { font-size: .9rem; font-weight: 700; color: #ffffff; margin: 0; word-break: break-word; } .cp-marker-info__body { display: grid; gap: .32rem; } .cp-marker-info__addr { font-size: .76rem; color: var(--cp-marker-sub); word-break: break-word; } .cp-marker-info__addr i { color: var(--cp-marker-accent); width: .9rem; text-align: center; } .cp-marker-info__footer { margin-top: .2rem; padding-top: .44rem; border-top: 1px solid var(--cp-marker-border-subtle); } .cp-marker-info__link { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; color: var(--cp-marker-accent-text); text-decoration: none; } .cp-marker-info__link:hover { color: #fff; text-decoration: none; } /* Light theme: InfoWindow text/icon fixes */ [data-cp-theme="light"] .cp-marker-info__link, [data-mdb-theme="light"] .cp-marker-info__link { color: var(--cp-marker-accent); } [data-cp-theme="light"] .cp-marker-info__link:hover, [data-mdb-theme="light"] .cp-marker-info__link:hover { color: var(--cp-marker-accent); opacity: .72; } [data-cp-theme="light"] .cp-marker-info__eyebrow, [data-mdb-theme="light"] .cp-marker-info__eyebrow { color: var(--cp-marker-accent); border-color: rgba(0,0,0,.1); } [data-cp-theme="light"] .cp-marker-info__close, [data-mdb-theme="light"] .cp-marker-info__close { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.18); color: #444; } [data-cp-theme="light"] .cp-marker-info__close:hover, [data-mdb-theme="light"] .cp-marker-info__close:hover { background: var(--cp-marker-accent-soft); border-color: var(--cp-marker-accent); color: var(--cp-marker-accent); } /* ============================================================ Glass overlay / modal — shared across all pages (Also scoped per-page by home/index, but needs to be global so events/trails/etc. pages can host the share modal) ============================================================ */ .cp-glass-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 1200; margin: 0; background: rgba(7, 18, 31, .46); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 1rem; overflow: auto; overscroll-behavior: contain; } .cp-glass-modal { width: min(1100px, 96vw); height: min(88vh, 840px); border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .22); background: linear-gradient(170deg, rgba(12, 28, 46, .9), rgba(26, 46, 70, .84)); box-shadow: 0 28px 56px rgba(3, 12, 22, .42); overflow: hidden; display: flex; flex-direction: column; } .cp-glass-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; border-bottom: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); flex-shrink: 0; } .cp-glass-title { font-size: 1rem; font-weight: 700; color: #eaf4ff; } .cp-glass-close { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08); cursor: pointer; flex-shrink: 0; transition: background .15s; } .cp-glass-close:hover { background: rgba(255, 255, 255, .16); } .cp-glass-close::before, .cp-glass-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.6px; background: #eaf4ff; } .cp-glass-close::before { transform: translate(-50%, -50%) rotate(45deg); } .cp-glass-close::after { transform: translate(-50%, -50%) rotate(-45deg); } /* ============================================================ Share Modal ============================================================ */ .cp-share-modal { width: min(460px, 96vw); height: auto; max-height: min(90vh, 600px); border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .22); background: linear-gradient(170deg, rgba(12, 28, 46, .96), rgba(26, 46, 70, .92)); box-shadow: 0 28px 56px rgba(3, 12, 22, .42); overflow: hidden; display: flex; flex-direction: column; } .cp-share-body { padding: 1.1rem 1.1rem 1.35rem; display: flex; flex-direction: column; } /* Post share dialog: QR + copy + send in one scrollable column */ .cp-post-share-modal { width: min(480px, 96vw); max-height: min(92vh, 720px); min-height: 0; } .cp-post-share-modal .cp-share-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* DM modal: room for profile card + composer */ .cp-dm-share-modal { width: min(520px, 96vw); max-height: min(92vh, 720px); min-height: 0; } .cp-dm-share-modal .cp-share-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; background: linear-gradient(180deg, rgba(8, 16, 32, 0.25), transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; } [data-cp-theme="light"] .cp-dm-share-modal .cp-share-body, [data-mdb-theme="light"] .cp-dm-share-modal .cp-share-body { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; } .cp-dm-profile-slot .cp-public-card { max-width: 100%; } /* ── Public profile card: plain contact (modals) — variant styles on .cp-bc--ic / .cp-bc--bc ── */ .cp-public-card--plain-contact:not(.cp-bc--ic):not(.cp-bc--bc) { min-height: 0; border-radius: 1.2rem !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; background: linear-gradient(168deg, rgba(32, 48, 82, 0.98), rgba(16, 28, 52, 0.99)) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 -1px 0 rgba(0, 0, 0, 0.22) inset, 0 10px 0 rgba(0, 0, 0, 0.12), 0 18px 42px rgba(0, 0, 0, 0.48); color: #e8f0ff; } [data-cp-theme="light"] .cp-public-card--plain-contact:not(.cp-bc--ic):not(.cp-bc--bc), [data-mdb-theme="light"] .cp-public-card--plain-contact:not(.cp-bc--ic):not(.cp-bc--bc) { background: linear-gradient(168deg, rgba(255, 255, 255, 0.98), rgba(232, 240, 252, 0.98)) !important; border-color: rgba(20, 45, 90, 0.2) !important; color: #142a44; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(20, 40, 80, 0.06) inset, 0 8px 0 rgba(20, 45, 90, 0.06), 0 16px 36px rgba(20, 45, 90, 0.14); } .cp-public-card--plain-contact .cp-profile-top-bar { gap: 1rem; padding: 1rem 1.15rem 0.95rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(95deg, rgba(42, 98, 200, 0.28), rgba(24, 52, 100, 0.18)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; } [data-cp-theme="light"] .cp-public-card--plain-contact .cp-profile-top-bar, [data-mdb-theme="light"] .cp-public-card--plain-contact .cp-profile-top-bar { border-bottom-color: rgba(20, 45, 90, 0.12); background: linear-gradient(95deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.65)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; } /* Plain-contact header: shared .cp-user-chip first, display name below (same component as post cards) */ .cp-profile-top-bar--mega-chip { align-items: center; padding: 1.1rem 1.15rem 1rem; } .cp-profile-identity--mega-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-width: 0; } .cp-public-card--plain-contact .cp-profile-top-bar--plain-chip-only { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; padding-left: 1.25rem; } .cp-public-card--plain-contact .cp-profile-identity--plain-chip-only { min-width: 0; width: 100%; } .cp-public-card--plain-contact .cp-profile-identity--plain-chip-only .cp-user-chip { max-width: 100%; align-self: flex-start; } .cp-public-card--plain-contact .cp-profile-identity--plain-chip-only .cp-chip__title { min-width: 0; } .cp-mega-user-chip { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%; padding: 0.55rem 1.35rem; border-radius: 999px; font-size: 1.2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #f0f7ff; background: linear-gradient(165deg, rgba(55, 130, 255, 0.55), rgba(25, 85, 210, 0.72)); border: 1px solid rgba(160, 210, 255, 0.55); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 14px rgba(0, 30, 90, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-mega-user-chip__icon { font-size: 1rem; opacity: 0.88; flex-shrink: 0; } [data-cp-theme="light"] .cp-mega-user-chip, [data-mdb-theme="light"] .cp-mega-user-chip { color: #082050; background: linear-gradient(165deg, rgba(130, 180, 255, 0.55), rgba(70, 130, 235, 0.75)); border-color: rgba(50, 100, 200, 0.45); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.65) inset, 0 5px 12px rgba(40, 90, 180, 0.22), 0 2px 0 rgba(20, 60, 140, 0.15); } .cp-mega-display-name { font-size: 1.35rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; white-space: normal; max-width: 100%; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 10px rgba(0, 0, 0, 0.45); } [data-cp-theme="light"] .cp-mega-display-name, [data-mdb-theme="light"] .cp-mega-display-name { color: #0a1a30; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); } /* Label-free value stack (modals) */ .cp-profile-value-stack { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .cp-profile-value-stack__item { padding: 0.5rem 0.35rem 0.5rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; } .cp-profile-value-stack__item:last-child { border-bottom: none; } .cp-profile-value-stack__item--tone-1 { border-left-color: rgba(56, 189, 248, 0.85); } .cp-profile-value-stack__item--tone-2 { border-left-color: rgba(167, 139, 250, 0.9); } .cp-profile-value-stack__item--tone-3 { border-left-color: rgba(52, 211, 153, 0.85); } .cp-profile-value-stack__item--tone-4 { border-left-color: rgba(251, 191, 36, 0.9); } .cp-profile-value-stack__value { margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.45; color: rgba(240, 248, 255, 0.96); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); word-break: break-word; } .cp-profile-value-stack__link { color: #7dd3fc; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(125, 211, 252, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .cp-profile-value-stack__link:hover { color: #bae6fd; border-bottom-color: rgba(186, 230, 253, 0.65); } [data-cp-theme="light"] .cp-profile-value-stack__item, [data-mdb-theme="light"] .cp-profile-value-stack__item { border-bottom-color: rgba(20, 45, 90, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset; } [data-cp-theme="light"] .cp-profile-value-stack__value, [data-mdb-theme="light"] .cp-profile-value-stack__value { color: #0f2748; text-shadow: none; } [data-cp-theme="light"] .cp-profile-value-stack__link, [data-mdb-theme="light"] .cp-profile-value-stack__link { color: #1d4ed8; border-bottom-color: rgba(29, 78, 216, 0.35); } /* DM popup: stronger separation between glass shell and business card */ .cp-dm-profile-slot .cp-public-card--plain-contact { border: 1px solid rgba(255, 255, 255, 0.48) !important; background: linear-gradient(168deg, rgba(52, 72, 118, 0.99), rgba(24, 40, 72, 0.99)) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 -1px 0 rgba(0, 0, 0, 0.28) inset, 0 12px 0 rgba(0, 0, 0, 0.14), 0 22px 52px rgba(0, 0, 0, 0.55); } [data-cp-theme="light"] .cp-dm-profile-slot .cp-public-card--plain-contact, [data-mdb-theme="light"] .cp-dm-profile-slot .cp-public-card--plain-contact { border-color: rgba(20, 55, 120, 0.28) !important; background: linear-gradient(168deg, rgba(255, 255, 255, 0.99), rgba(238, 246, 255, 0.98)) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(20, 45, 90, 0.08) inset, 0 10px 0 rgba(20, 45, 90, 0.05), 0 20px 44px rgba(20, 45, 90, 0.14); } .cp-dm-profile-slot .cp-public-card--plain-contact .cp-profile-top-bar { background: linear-gradient(95deg, rgba(62, 125, 235, 0.38), rgba(32, 72, 145, 0.28)); border-bottom: 1px solid rgba(255, 255, 255, 0.22); } [data-cp-theme="light"] .cp-dm-profile-slot .cp-public-card--plain-contact .cp-profile-top-bar, [data-mdb-theme="light"] .cp-dm-profile-slot .cp-public-card--plain-contact .cp-profile-top-bar { background: linear-gradient(95deg, rgba(59, 130, 246, 0.16), rgba(255, 255, 255, 0.75)); border-bottom-color: rgba(20, 45, 90, 0.14); } .cp-dm-profile-slot .cp-public-card--plain-contact .cp-profile-content { background: rgba(0, 0, 0, 0.26); border-top: 1px solid rgba(255, 255, 255, 0.18); } [data-cp-theme="light"] .cp-dm-profile-slot .cp-public-card--plain-contact .cp-profile-content, [data-mdb-theme="light"] .cp-dm-profile-slot .cp-public-card--plain-contact .cp-profile-content { background: rgba(255, 255, 255, 0.62); border-top-color: rgba(20, 45, 90, 0.12); } .cp-public-card--plain-contact .cp-profile-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.95rem 1.15rem 1.1rem; background: rgba(0, 0, 0, 0.16); border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; } [data-cp-theme="light"] .cp-public-card--plain-contact .cp-profile-content, [data-mdb-theme="light"] .cp-public-card--plain-contact .cp-profile-content { background: rgba(255, 255, 255, 0.55); border-top-color: rgba(20, 45, 90, 0.1); } .cp-public-card--plain-contact .cp-public-card-about { font-size: 0.9375rem; line-height: 1.55; -webkit-line-clamp: 3; line-clamp: 3; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } [data-cp-theme="light"] .cp-public-card--plain-contact .cp-public-card-about, [data-mdb-theme="light"] .cp-public-card--plain-contact .cp-public-card-about { color: #1a2f4a; text-shadow: none; } .cp-public-card--plain-contact .cp-profile-tags-plain { font-size: 0.8125rem; line-height: 1.5; font-weight: 500; color: rgba(190, 215, 255, 0.88); margin-top: 0.55rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } [data-cp-theme="light"] .cp-public-card--plain-contact .cp-profile-tags-plain, [data-mdb-theme="light"] .cp-public-card--plain-contact .cp-profile-tags-plain { color: rgba(40, 70, 110, 0.85); text-shadow: none; } /* DM glass shell: separate from inner card, softer top highlight (no harsh corner glow) */ .cp-dm-share-modal.cp-share-modal { background: linear-gradient(175deg, rgba(10, 20, 36, 0.97), rgba(18, 32, 54, 0.95)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 50px rgba(0, 0, 0, 0.52); } [data-cp-theme="light"] .cp-dm-share-modal.cp-share-modal, [data-mdb-theme="light"] .cp-dm-share-modal.cp-share-modal { background: linear-gradient(175deg, rgba(250, 252, 255, 0.98), rgba(235, 242, 252, 0.96)); border-color: rgba(20, 45, 90, 0.14); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 18px 40px rgba(20, 45, 90, 0.12); } .cp-dm-share-modal .cp-glass-head { position: relative; border-bottom: none; background: linear-gradient(125deg, rgba(25, 45, 85, 0.55), rgba(18, 32, 58, 0.35)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 24px rgba(0, 0, 0, 0.25); } .cp-dm-share-modal .cp-glass-head::after { content: ''; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(56, 189, 248, 0.85), rgba(129, 140, 248, 0.85), rgba(251, 191, 36, 0.75)); box-shadow: 0 0 12px rgba(56, 189, 248, 0.25); pointer-events: none; } [data-cp-theme="light"] .cp-dm-share-modal .cp-glass-head, [data-mdb-theme="light"] .cp-dm-share-modal .cp-glass-head { background: linear-gradient(125deg, rgba(230, 242, 255, 0.92), rgba(255, 255, 255, 0.75)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 6px 18px rgba(20, 45, 90, 0.08); } [data-cp-theme="light"] .cp-dm-share-modal .cp-glass-head::after, [data-mdb-theme="light"] .cp-dm-share-modal .cp-glass-head::after { background: linear-gradient(90deg, rgba(2, 132, 199, 0.75), rgba(124, 58, 237, 0.7), rgba(202, 138, 4, 0.75)); box-shadow: none; } /* DM title: multi-color treatment */ .cp-dm-heading-display { font-size: 1.05rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; } .cp-dm-heading__icon { background: linear-gradient(135deg, #38bdf8, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); } .cp-dm-heading__private { color: #7dd3fc; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 0 12px rgba(56, 189, 248, 0.35); } .cp-dm-heading__message { color: #e0e7ff; margin-left: 0.15rem; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 2px 8px rgba(129, 140, 248, 0.25); } .cp-dm-heading__sep { color: rgba(148, 163, 184, 0.75); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .cp-dm-heading__muted { color: #fcd34d; font-weight: 700; margin-left: 0.1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .cp-dm-heading__warn { background: linear-gradient(90deg, #fb923c, #f87171); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; margin-left: 0.15rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } [data-cp-theme="light"] .cp-dm-heading__private, [data-mdb-theme="light"] .cp-dm-heading__private { color: #0369a1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } [data-cp-theme="light"] .cp-dm-heading__message, [data-mdb-theme="light"] .cp-dm-heading__message { color: #3730a3; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } [data-cp-theme="light"] .cp-dm-heading__sep, [data-mdb-theme="light"] .cp-dm-heading__sep { color: rgba(51, 65, 85, 0.65); } [data-cp-theme="light"] .cp-dm-heading__muted, [data-mdb-theme="light"] .cp-dm-heading__muted { color: #b45309; text-shadow: none; } [data-cp-theme="light"] .cp-dm-heading__warn, [data-mdb-theme="light"] .cp-dm-heading__warn { filter: none; background: none; -webkit-background-clip: unset; background-clip: unset; color: #c2410c; } .cp-dm-recipient-line { line-height: 1.35; font-weight: 600; letter-spacing: 0.02em; background: linear-gradient(90deg, rgba(186, 230, 253, 0.95), rgba(196, 181, 253, 0.9), rgba(253, 224, 71, 0.85)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } [data-cp-theme="light"] .cp-dm-recipient-line, [data-mdb-theme="light"] .cp-dm-recipient-line { background: linear-gradient(90deg, #0369a1, #5b21b6, #a16207); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; } .cp-dm-share-modal textarea.cp-share-url-input, .cp-dm-share-modal .cp-share-url-input { border: 1px solid rgba(110, 160, 240, 0.38); background: linear-gradient(180deg, rgba(14, 24, 42, 0.95), rgba(20, 34, 56, 0.9)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 14px rgba(0, 0, 0, 0.32); font-size: 0.9rem; } .cp-dm-share-modal textarea.cp-share-url-input::placeholder { color: rgba(180, 200, 230, 0.45); } .cp-dm-share-modal textarea.cp-share-url-input:focus { border-color: rgba(160, 200, 255, 0.55); outline: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(59, 113, 202, 0.28); } [data-cp-theme="light"] .cp-dm-share-modal textarea.cp-share-url-input, [data-mdb-theme="light"] .cp-dm-share-modal textarea.cp-share-url-input, [data-cp-theme="light"] .cp-dm-share-modal .cp-share-url-input, [data-mdb-theme="light"] .cp-dm-share-modal .cp-share-url-input { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(242, 248, 255, 0.92)); border-color: rgba(59, 113, 202, 0.35); color: #142a44; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 3px 10px rgba(20, 45, 90, 0.1); } [data-cp-theme="light"] .cp-dm-share-modal textarea.cp-share-url-input:focus, [data-mdb-theme="light"] .cp-dm-share-modal textarea.cp-share-url-input:focus { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 0 0 2px rgba(59, 113, 202, 0.22); } .cp-dm-share-modal .cp-share-action-btn { border: 1px solid rgba(120, 175, 255, 0.5); background: linear-gradient(180deg, rgba(80, 130, 230, 0.55), rgba(45, 95, 195, 0.65)); color: #eaf4ff; font-size: 0.9rem; font-weight: 700; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 4px 0 rgba(8, 22, 52, 0.55), 0 8px 18px rgba(0, 0, 0, 0.32); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); } .cp-dm-share-modal .cp-share-action-btn:hover, .cp-dm-share-modal .cp-share-action-btn:focus { background: linear-gradient(180deg, rgba(95, 145, 240, 0.6), rgba(55, 105, 210, 0.72)); color: #fff; transform: translateY(-1px); } .cp-dm-share-modal .cp-share-action-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 0 rgba(8, 22, 52, 0.5), 0 4px 10px rgba(0, 0, 0, 0.28); } [data-cp-theme="light"] .cp-dm-share-modal .cp-share-action-btn, [data-mdb-theme="light"] .cp-dm-share-modal .cp-share-action-btn { background: linear-gradient(180deg, rgba(74, 130, 240, 0.95), rgba(40, 95, 210, 0.98)); border-color: rgba(40, 95, 200, 0.55); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 4px 0 rgba(25, 60, 130, 0.35), 0 8px 16px rgba(25, 60, 130, 0.2); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .cp-dm-share-modal .cp-glass-close { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 3px 8px rgba(0, 0, 0, 0.25); } /* --- Stacked sections (post share; single popup, no tabs) --- */ .cp-share-section { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); } .cp-share-section--last { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .cp-share-section__title { font-size: .84rem; font-weight: 700; color: rgba(234, 244, 255, .9); margin: 0 0 .65rem; display: flex; align-items: center; } .cp-glass-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2147483647; max-width: min(28rem, calc(100vw - 2rem)); padding: .82rem 1rem; border-radius: .9rem; border: 1px solid rgba(187, 247, 208, .38); background: rgba(22, 163, 74, .1); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); color: #f8fffb; box-shadow: 0 10px 28px rgba(0, 0, 0, .2), 0 0 0 1px rgba(22, 163, 74, .08) inset; display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 700; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(.75rem); transition: opacity .18s ease, transform .18s ease; } .cp-glass-toast.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .cp-glass-toast__icon { color: #d1e7dd; flex: 0 0 auto; } .cp-glass-toast__message { min-width: 0; } .cp-glass-toast__action { color: #ffffff; font-weight: 800; text-decoration: underline; text-underline-offset: .16em; white-space: nowrap; } .cp-glass-toast__action:hover, .cp-glass-toast__action:focus { color: #d1e7dd; } .cp-share-send-fields { display: flex; flex-direction: column; gap: .85rem; } .cp-share-send-field { display: grid; grid-template-columns: minmax(3.5rem, 4.85rem) minmax(0, 1fr); gap: .45rem .65rem; align-items: center; } .cp-share-send-field--top { align-items: flex-start; } .cp-share-send-field--top .cp-share-send-label { padding-top: .48rem; } .cp-share-send-label { font-size: .8rem; font-weight: 600; color: rgba(234, 244, 255, .55); margin: 0; white-space: nowrap; } .cp-share-send-field__value { min-width: 0; } .cp-share-send-field .cp-share-send-row { margin-bottom: 0; } .cp-share-send-field__value .cp-user-chip { flex-shrink: 0; } .cp-share-mode-switch { display: inline-flex; gap: .25rem; padding: .18rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); } .cp-share-mode-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: .36rem .75rem; background: transparent; color: rgba(234, 244, 255, .62); font-size: .8rem; font-weight: 700; line-height: 1; cursor: pointer; } .cp-share-mode-btn:hover, .cp-share-mode-btn:focus { color: #eaf4ff; } .cp-share-mode-btn.is-active { background: rgba(59, 113, 202, .35); color: #c5deff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); } .cp-share-message-preview { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: .45rem .7rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: rgba(234, 244, 255, .88); font-size: .82rem; font-family: inherit; line-height: 1.35; min-height: 2.6rem; resize: vertical; outline: none; white-space: pre-wrap; word-break: break-word; } .cp-share-message-preview:focus { border-color: rgba(59, 113, 202, .6); } .cp-share-message-preview::placeholder { color: rgba(234, 244, 255, .35); } /* --- Panels --- */ .cp-share-panel { animation: cpShareFadeIn .17s ease; } @keyframes cpShareFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* --- URL row (Copy panel) --- */ .cp-share-url-row { display: flex; gap: .45rem; align-items: center; margin-bottom: .55rem; } .cp-share-url-input { flex: 1; min-width: 0; padding: .45rem .7rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .07); color: #eaf4ff; font-size: .82rem; outline: none; } /* --- Shared action button --- */ .cp-share-action-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 8px; border: 1px solid rgba(59, 113, 202, .55); background: rgba(59, 113, 202, .2); color: #9dc8ff; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; flex-shrink: 0; } .cp-share-action-btn:hover, .cp-share-action-btn:focus { background: rgba(59, 113, 202, .38); border-color: rgba(59, 113, 202, .85); color: #c5deff; text-decoration: none; } .cp-share-action-btn:disabled { opacity: .55; cursor: default; } /* Native share */ .cp-share-native-btn { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .42rem .75rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: rgba(234, 244, 255, .65); font-size: .8rem; cursor: pointer; margin-bottom: .55rem; transition: background .15s; } .cp-share-native-btn:hover { background: rgba(255, 255, 255, .1); color: #eaf4ff; } /* --- Feedback line --- */ .cp-share-feedback { font-size: .8rem; font-weight: 600; margin: 0; /* override reboot `p` margins — empty feedback was leaving a large gap */ min-height: 0; } .cp-share-feedback:not(:empty) { margin-top: .35rem; min-height: 1.2rem; } .cp-share-feedback:empty { display: none; } /* Share modal: confirmation / errors to the right of the section title */ .cp-share-feedback.cp-share-feedback--title-end:not(:empty) { margin-top: 0; padding-top: .12rem; text-align: right; flex-shrink: 0; max-width: 52%; line-height: 1.25; word-break: break-word; } .cp-share-section__head .cp-share-section__title { margin-bottom: 0; } .cp-share-feedback--success { color: #75b798; } .cp-share-feedback--error { color: #f87171; } /* --- QR panel --- */ .cp-share-qr-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 0; } .cp-share-qr-img { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: .6rem; display: block; } /* --- Send panel --- */ .cp-share-send-row { display: flex; gap: .45rem; align-items: flex-start; margin-bottom: .5rem; } .cp-share-user-wrap { position: relative; flex: 1; min-width: 0; } .cp-share-email-input, .cp-share-user-input { width: 100%; flex: 1; min-width: 0; padding: .45rem .7rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .07); color: #eaf4ff; font-size: .82rem; outline: none; } .cp-share-email-input::placeholder, .cp-share-user-input::placeholder { color: rgba(234, 244, 255, .35); } .cp-share-email-input:focus, .cp-share-user-input:focus { border-color: rgba(59, 113, 202, .6); } .cp-share-suggestions { position: absolute; top: calc(100% + .2rem); left: 0; right: 0; z-index: 99; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(15, 30, 52, .98); list-style: none; margin: 0; padding: .2rem 0; max-height: 190px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } .cp-share-suggestions:empty { display: none; } .cp-share-suggestion { display: flex; align-items: center; gap: .55rem; padding: .42rem .75rem; cursor: pointer; color: #eaf4ff; font-size: .83rem; transition: background .12s; } .cp-share-suggestion:hover, .cp-share-suggestion[aria-selected="true"] { background: rgba(59, 113, 202, .25); } .cp-share-suggestion-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cp-share-suggestion-avatar--placeholder { display: flex; align-items: center; justify-content: center; background: rgba(59, 113, 202, .3); color: #8ec5fc; font-size: .69rem; font-weight: 700; } .cp-share-send-note { font-size: .76rem; color: rgba(234, 244, 255, .42); margin: .5rem 0 0; } .cp-share-send-note a { color: rgba(140, 197, 255, .8); } /* --- Light-theme overrides --- */ [data-cp-theme="light"] .cp-share-modal, [data-mdb-theme="light"] .cp-share-modal { background: linear-gradient(170deg, #f0f6ff, #e5eeff); border-color: rgba(59, 113, 202, .22); } [data-cp-theme="light"] .cp-share-section, [data-mdb-theme="light"] .cp-share-section { border-bottom-color: rgba(20, 40, 80, .12); } [data-cp-theme="light"] .cp-share-section__title, [data-mdb-theme="light"] .cp-share-section__title { color: #1a3a6a; } [data-cp-theme="light"] .cp-glass-toast, [data-mdb-theme="light"] .cp-glass-toast { border-color: rgba(22, 163, 74, .35); background: rgba(255, 255, 255, .58); color: #14532d; box-shadow: 0 10px 24px rgba(4, 120, 87, .18), 0 0 0 1px rgba(22, 163, 74, .08) inset; } [data-cp-theme="light"] .cp-glass-toast__icon, [data-mdb-theme="light"] .cp-glass-toast__icon, [data-cp-theme="light"] .cp-glass-toast__action, [data-mdb-theme="light"] .cp-glass-toast__action { color: #0f5132; } [data-cp-theme="light"] .cp-glass-toast__action:hover, [data-mdb-theme="light"] .cp-glass-toast__action:hover, [data-cp-theme="light"] .cp-glass-toast__action:focus, [data-mdb-theme="light"] .cp-glass-toast__action:focus { color: #146c43; } [data-cp-theme="light"] .cp-share-send-label, [data-mdb-theme="light"] .cp-share-send-label { color: rgba(20, 40, 80, .5); } [data-cp-theme="light"] .cp-share-mode-switch, [data-mdb-theme="light"] .cp-share-mode-switch { border-color: rgba(59, 113, 202, .18); background: rgba(20, 40, 80, .04); } [data-cp-theme="light"] .cp-share-mode-btn, [data-mdb-theme="light"] .cp-share-mode-btn { color: rgba(20, 40, 80, .62); } [data-cp-theme="light"] .cp-share-mode-btn:hover, [data-mdb-theme="light"] .cp-share-mode-btn:hover, [data-cp-theme="light"] .cp-share-mode-btn:focus, [data-mdb-theme="light"] .cp-share-mode-btn:focus { color: #1a3a6a; } [data-cp-theme="light"] .cp-share-mode-btn.is-active, [data-mdb-theme="light"] .cp-share-mode-btn.is-active { background: rgba(59, 113, 202, .14); color: #0d47a1; box-shadow: 0 1px 4px rgba(20, 40, 80, .1); } [data-cp-theme="light"] .cp-share-message-preview, [data-mdb-theme="light"] .cp-share-message-preview { background: rgba(255, 255, 255, .65); border-color: rgba(59, 113, 202, .22); color: #1a2a3a; } [data-cp-theme="light"] .cp-share-message-preview::placeholder, [data-mdb-theme="light"] .cp-share-message-preview::placeholder { color: rgba(20, 40, 80, .4); } [data-cp-theme="light"] .cp-share-url-input, [data-mdb-theme="light"] .cp-share-url-input, [data-cp-theme="light"] .cp-share-email-input, [data-mdb-theme="light"] .cp-share-email-input, [data-cp-theme="light"] .cp-share-user-input, [data-mdb-theme="light"] .cp-share-user-input { background: rgba(255, 255, 255, .75); border-color: rgba(59, 113, 202, .25); color: #1a2a3a; } [data-cp-theme="light"] .cp-share-email-input::placeholder, [data-mdb-theme="light"] .cp-share-email-input::placeholder, [data-cp-theme="light"] .cp-share-user-input::placeholder, [data-mdb-theme="light"] .cp-share-user-input::placeholder { color: rgba(20, 40, 80, .4); } [data-cp-theme="light"] .cp-glass-title, [data-mdb-theme="light"] .cp-glass-title { color: #1a2a3a; } [data-cp-theme="light"] .cp-glass-close, [data-mdb-theme="light"] .cp-glass-close { border-color: rgba(20, 40, 80, .2); background: rgba(20, 40, 80, .06); } [data-cp-theme="light"] .cp-glass-close::before, [data-mdb-theme="light"] .cp-glass-close::before, [data-cp-theme="light"] .cp-glass-close::after, [data-mdb-theme="light"] .cp-glass-close::after { background: #1a2a3a; } [data-cp-theme="light"] .cp-share-feedback--success, [data-mdb-theme="light"] .cp-share-feedback--success { color: #146c43; } [data-cp-theme="light"] .cp-share-feedback--error, [data-mdb-theme="light"] .cp-share-feedback--error { color: #842029; } [data-cp-theme="light"] .cp-share-suggestions, [data-mdb-theme="light"] .cp-share-suggestions { background: #fff; border-color: rgba(59, 113, 202, .2); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } [data-cp-theme="light"] .cp-share-suggestion, [data-mdb-theme="light"] .cp-share-suggestion { color: #1a2a3a; } [data-cp-theme="light"] .cp-share-send-note, [data-mdb-theme="light"] .cp-share-send-note { color: rgba(20, 40, 80, .45); } [data-cp-theme="light"] .cp-share-native-btn, [data-mdb-theme="light"] .cp-share-native-btn { border-color: rgba(20, 40, 80, .15); background: rgba(20, 40, 80, .04); color: rgba(20, 40, 80, .6); } [data-cp-theme="light"] .cp-glass-head, [data-mdb-theme="light"] .cp-glass-head { border-color: rgba(20, 40, 80, .1); background: rgba(20, 40, 80, .03); } /* ============================================================ Shared Page Components (post-cover, post-meta, post-engagement, index-header) — used by x-post-cover, x-post-meta, etc. ============================================================ */ /* ---- Post cover banner (show pages) ---- */ .cp-post-cover { width: 100%; max-height: 360px; overflow: hidden; border-radius: .85rem; margin-bottom: 1.5rem; display: block; } .cp-post-cover img { width: 100%; max-height: 360px; object-fit: cover; display: block; } .cp-post-cover--placeholder { height: 200px; display: flex; align-items: center; justify-content: center; } /* ============================================================ Map Ad Placeholders (#map-ad-L / #map-ad-R) (Was wrongly nested under .cp-post-cover--placeholder, which broke parsing in non-nesting CSS engines and scoped .cp-map-ad incorrectly.) ============================================================ */ /* ── Wrapper ───────────────────────────────────────────────── */ .cp-map-ad { display: flex; flex-direction: column; padding: .75rem; border: 1px dashed rgba(128, 128, 128, .35); border-radius: .6rem; background: rgba(248, 249, 250, .6); gap: .5rem; min-height: 120px; overflow: hidden; } [data-cp-theme="dark"] .cp-map-ad, [data-mdb-theme="dark"] .cp-map-ad { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .15); } /* Filled map ad slots (L/R/M, top-ads, outside container): no outer placeholder frame */ .cp-map-ad:has(> .cp-ad-card-root), .cp-map-ad:has(> .cp-business-card), .cp-map-ad:has(> .cp-card), .cp-map-ad:has(> .cp-sponsored-card), .cp-map-ad:has(> .cp-ad-slot-cta), .cp-map-ad:has(> a.cp-ad-slot-cta) { padding: 0 !important; border: none !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; min-height: 0; gap: 0; } [data-cp-theme="dark"] .cp-map-ad:has(> .cp-ad-card-root), [data-cp-theme="dark"] .cp-map-ad:has(> .cp-business-card), [data-cp-theme="dark"] .cp-map-ad:has(> .cp-card), [data-cp-theme="dark"] .cp-map-ad:has(> .cp-sponsored-card), [data-cp-theme="dark"] .cp-map-ad:has(> .cp-ad-slot-cta), [data-cp-theme="dark"] .cp-map-ad:has(> a.cp-ad-slot-cta), [data-mdb-theme="dark"] .cp-map-ad:has(> .cp-ad-card-root), [data-mdb-theme="dark"] .cp-map-ad:has(> .cp-business-card), [data-mdb-theme="dark"] .cp-map-ad:has(> .cp-card), [data-mdb-theme="dark"] .cp-map-ad:has(> .cp-sponsored-card), [data-mdb-theme="dark"] .cp-map-ad:has(> .cp-ad-slot-cta), [data-mdb-theme="dark"] .cp-map-ad:has(> a.cp-ad-slot-cta) { background: transparent !important; border-color: transparent !important; } /* ── Placeholder label (visible until filled with real content) */ .cp-map-ad__placeholder { display: flex; align-items: center; justify-content: center; flex: 1; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(128, 128, 128, .55); text-align: center; } /* ── Option A: Full image ────────────────────────────────── */ .cp-map-ad__img { width: 100%; height: 100%; object-fit: cover; border-radius: .4rem; display: block; flex: 1; } /* ── Option B: Text, symbols & links ────────────────────── */ .cp-map-ad__title { font-size: .85rem; font-weight: 700; margin: 0 0 .25rem; color: inherit; } .cp-map-ad__body { font-size: .8rem; margin: 0 0 .35rem; color: inherit; opacity: .8; } .cp-map-ad__link { display: block; font-size: .8rem; color: #0d6efd; text-decoration: none; transition: color .15s; } .cp-map-ad__link:hover { color: #0a58ca; text-decoration: underline; } /* ── Option C: Pin bullet list ───────────────────────────── */ .cp-map-ad__pins { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; } .cp-map-ad__pin-link { display: block; font-size: .8rem; color: #198754; text-decoration: none; font-weight: 500; transition: color .15s; } .cp-map-ad__pin-link:hover { color: #146c43; text-decoration: underline; } [data-cp-theme="dark"] .cp-map-ad__link, [data-mdb-theme="dark"] .cp-map-ad__link { color: #6ea8fe; } [data-cp-theme="dark"] .cp-map-ad__pin-link, [data-mdb-theme="dark"] .cp-map-ad__pin-link { color: #75b798; } /* ---- Map slot ad card (shared map + admin preview) ---- */ .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__shell { border-radius: 1.1rem; overflow: hidden; border: 1px solid rgba(18, 45, 73, 0.14); background: linear-gradient(155deg, #f4f7fc 0%, #e2eaf5 45%, #d4e0f0 100%); box-shadow: 0 6px 18px rgba(8, 30, 49, 0.1); } [data-cp-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__shell, [data-mdb-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__shell { border-color: rgba(255, 255, 255, 0.14); background: linear-gradient(160deg, #2f4566 0%, #1f304d 42%, #141f33 100%); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } /* Standard map-slot ad hero (default): business-card partial uses 3.5:2; map slots override below for fixed frame. */ .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__media { position: relative; width: 100%; aspect-ratio: 3.5 / 2; overflow: hidden; padding: 0; border-radius: 0; background: linear-gradient(135deg, #1a3050 0%, #1e4070 100%); } /* * Map slots: ads scale with the viewport while keeping the media and content * regions at a business-card ratio. */ .cp-map-ad-slot > .cp-map-ad:has(> .cp-ad-card-root) { padding: 0 !important; align-items: center; height: auto !important; max-height: none; overflow: visible; } .cp-map-ad-slot > .cp-map-ad:has(> .cp-ad-card-root) .cp-ad-card-root { width: 100%; max-width: var(--cp-map-ad-max-width, 370px); margin-inline: auto; box-sizing: border-box; } .cp-map-ad-slot > .cp-map-ad:has(> .cp-ad-card-root) .cp-map-slot-ad-card { height: auto !important; min-height: 0; } .cp-map-ad-slot > .cp-map-ad:has(> .cp-ad-card-root) .cp-map-slot-ad-card__shell.d-flex { display: flex !important; flex-direction: column; height: auto !important; min-height: 0; flex: 0 0 auto; } /* Standard ads: media and body use matching business-card proportions. */ .cp-map-ad-slot > .cp-map-ad:has(> .cp-ad-card-root:not(.cp-ad-card-root--visual-html)) .cp-map-slot-ad-card__media { flex: 0 0 auto !important; min-height: 0 !important; aspect-ratio: 3.5 / 2 !important; height: auto !important; padding: 0 !important; } .cp-map-ad-slot > .cp-map-ad:has(> .cp-ad-card-root:not(.cp-ad-card-root--visual-html)) .cp-map-slot-ad-card__body { flex: 0 0 auto !important; aspect-ratio: auto; max-height: none !important; min-height: 0 !important; overflow: visible !important; } /* Visual HTML: scale inside the same width rules without forcing a fixed height. */ .cp-map-ad-slot > .cp-map-ad:has(> .cp-ad-card-root--visual-html) .cp-ad-card--visual-html-shell { width: 100%; height: auto; aspect-ratio: 370 / 500; min-height: 0; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__media .cp-map-ad__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* Multi-image ad: 5s hold + 3s crossfade between layers */ .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-ad-slideshow { position: absolute; inset: 0; overflow: hidden; } .cp-map-ad-slideshow__img { opacity: 0; z-index: 0; transition: opacity 3s ease-in-out; } .cp-map-ad-slideshow__img.cp-ad-slide--on { opacity: 1; z-index: 1; } /* Multi-image ad: mini switch to pause auto-rotation (top-right overlay, no pill background) */ .cp-map-ad-slideshow .cp-ad-slideshow-rotate-ctl { position: absolute; top: 0.35rem; right: 0.35rem; z-index: 3; padding: 0.1rem 0.15rem; border-radius: 0.35rem; background: transparent; line-height: 1; pointer-events: auto; } .cp-ad-slideshow-rotate-ctl__switch { min-height: 0; margin-bottom: 0; padding-left: 1.85em; display: flex; align-items: center; } .cp-ad-slideshow-rotate-ctl__switch .form-check-input { margin-top: 0; width: 1.55rem; height: 0.82rem; cursor: pointer; border-radius: 1rem; } [data-cp-theme="dark"] .cp-map-ad-slideshow .cp-ad-slideshow-rotate-ctl, [data-mdb-theme="dark"] .cp-map-ad-slideshow .cp-ad-slideshow-rotate-ctl { background: transparent; border: 0; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-business-card__ad-badge { top: 0.5rem; left: 0.5rem; z-index: 2; } /* Body region: grows with copy (media keeps 3.5:2; no inner scroll wells). */ .cp-map-template-shell .cp-map-ad .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__body, .cp-map-ad .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__body, .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__body { position: relative; width: 100%; flex: 0 0 auto !important; min-height: 0; max-height: none; padding: 1rem 1.1rem 1rem !important; overflow: visible; box-sizing: border-box; justify-content: flex-start; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__extras { flex-shrink: 0; min-width: 0; max-height: none; overflow: visible; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__links { display: none; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__body[data-cp-ad-content-link], .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__media[data-cp-ad-gallery-trigger], .cp-ad-visual-html-creative[data-cp-ad-gallery-trigger] { cursor: pointer; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__meta-link { display: block; font-size: 0.82rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: #0d6efd; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__meta-link:hover { text-decoration: underline; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__location { min-width: 0; max-width: 100%; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__location-link, .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__location-line { display: flex; align-items: center; gap: 0.35rem; min-width: 0; max-width: 100%; font-size: 0.82rem; line-height: 1.25; text-decoration: none; white-space: normal; overflow: visible; } .cp-map-slot-ad-card[data-cp-ad-card] a.cp-map-slot-ad-card__location-link.cp-map-slot-ad-card__meta-link { color: #0d6efd; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__location-link:hover { text-decoration: underline; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__location-icon { flex-shrink: 0; font-size: 0.85em; opacity: 0.85; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__location-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-cp-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] a.cp-map-slot-ad-card__location-link.cp-map-slot-ad-card__meta-link, [data-mdb-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] a.cp-map-slot-ad-card__location-link.cp-map-slot-ad-card__meta-link { color: #6ea8fe; } [data-cp-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__meta-link, [data-mdb-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__meta-link { color: #6ea8fe; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__placeholder { position: absolute; inset: 0; min-height: 0; width: auto; background: rgba(0, 0, 0, 0.12); } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__actions { display: flex; flex-wrap: nowrap; gap: 0; justify-content: space-evenly; align-items: center; width: 100%; margin-top: auto; flex-shrink: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__actions--icons .cp-map-slot-ad-card__icon-btn { flex: 0 0 auto; width: 2.35rem; height: 2.35rem; min-width: 2.35rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.88rem; line-height: 1; border-radius: 0.5rem; } /* Thumbtack: unpinned = opposite rotation from before (+90°); pinned = down; both centered in button */ .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn .cp-ad-pin-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; line-height: 1; transition: transform 0.2s ease; transform-origin: center center; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-ad-pin-icon.cp-ad-pin-icon--unpinned { transform: rotate(90deg); } .cp-map-slot-ad-card[data-cp-ad-card] .cp-ad-pin-icon.cp-ad-pin-icon--pinned { transform: rotate(0deg); } /* Pinned only — distinct tray; unpinned matches Share/Hide (default outline-secondary) */ .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.cp-map-slot-ad-card__icon-btn--pinned, .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.active { background-color: rgba(10, 88, 202, 0.55); border-color: #0a58ca; color: #f8f9fa; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28); transform: translateY(1px); } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.cp-map-slot-ad-card__icon-btn--pinned:hover, .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.active:hover { background-color: rgba(10, 88, 202, 0.68); border-color: #084298; color: #fff; } [data-cp-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.cp-map-slot-ad-card__icon-btn--pinned, [data-cp-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.active, [data-mdb-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.cp-map-slot-ad-card__icon-btn--pinned, [data-mdb-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.active { background-color: rgba(13, 110, 253, 0.5); border-color: #6ea8fe; color: #f8f9fa; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45); } [data-cp-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.cp-map-slot-ad-card__icon-btn--pinned:hover, [data-cp-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.active:hover, [data-mdb-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.cp-map-slot-ad-card__icon-btn--pinned:hover, [data-mdb-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__pin-btn.active:hover { background-color: rgba(13, 110, 253, 0.65); border-color: #9ec5fe; color: #fff; } [data-cp-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__actions, [data-mdb-theme="dark"] .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__actions { border-top-color: rgba(255, 255, 255, 0.1); } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__title { text-align: center; white-space: normal; overflow: visible; text-overflow: clip; } .cp-ad-detail-modal__content { border-radius: 1rem; } .cp-ad-detail-modal__hero-wrap { position: relative; width: 100%; max-width: 28rem; aspect-ratio: 3.5 / 2; overflow: hidden; border-radius: 0.75rem; background: linear-gradient(135deg, #1a3050 0%, #1e4070 100%); } .cp-ad-detail-modal__hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cp-ad-detail-modal__hero-wrap .cp-map-ad-slideshow { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } /* Shared map ad sizing tokens. */ [data-cp-map-template] { --cp-map-ad-min-width: 180px; --cp-map-ad-tablet-width: clamp(220px, 28vw, 320px); --cp-map-ad-max-width: 370px; --cp-map-ad-action-height: 78px; } /* Sticky map shells — pin under navbar when scrolling up (index / browse / explore) */ html:has([data-cp-map-template]), body:has([data-cp-map-template]), html.cp-has-sticky-map, body.cp-has-sticky-map { overflow-x: clip; } body:has([data-cp-map-template]) .cp-main, body:has([data-cp-map-template]) .cp-page-center, .cp-recent-shell:has([data-cp-map-template]), .cp-home-feed-band:has([data-cp-map-template]), .cp-home-feed-wrap:has([data-cp-map-template]), .cp-recent-shell:has([data-cp-map-template]) > .container, .cp-recent-shell:has([data-cp-map-template]) > .container-fluid, .cp-category-index-wrap:has([data-cp-map-template]), .container:has([data-cp-map-template]), body.cp-has-sticky-map .cp-main, body.cp-has-sticky-map .cp-page-center, body.cp-has-sticky-map .cp-recent-shell, body.cp-has-sticky-map .cp-home-feed-band, body.cp-has-sticky-map .cp-home-feed-wrap, body.cp-has-sticky-map .cp-category-index-wrap { overflow: visible !important; } /* Mobile explore: community + search row fixed in navbar stack under quick links */ @media (max-width: 1299.98px) { .cp-home-mobile-filter-bar.d-lg-none, .cp-navbar-stack .cp-home-mobile-filter-bar { display: block !important; width: 100%; margin: 0; padding: 0; flex-shrink: 0; } .cp-navbar-stack .cp-home-mobile-filter-bar { position: relative; z-index: 2; background: transparent; } .cp-home-mobile-filter-form { margin: 0; } .cp-home-mobile-filter-grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 0; width: 100%; border-top: 1px solid rgba(18, 45, 73, 0.2); border-bottom: 1px solid rgba(18, 45, 73, 0.2); background: rgba(200, 220, 255, 0.96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 16px rgba(18, 45, 73, 0.2); } html[data-mdb-theme="dark"] .cp-home-mobile-filter-grid, html[data-cp-theme="dark"] .cp-home-mobile-filter-grid { border-top-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); background: rgba(58, 78, 110, 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 16px rgba(0, 0, 0, 0.42); } .cp-home-mobile-filter-cell { min-width: 0; } .cp-home-mobile-filter-cell--community { border-right: 1px solid rgba(18, 45, 73, 0.18); } html[data-mdb-theme="dark"] .cp-home-mobile-filter-cell--community, html[data-cp-theme="dark"] .cp-home-mobile-filter-cell--community { border-right-color: rgba(255, 255, 255, 0.14); } .cp-home-mobile-filter-grid .form-select, .cp-home-mobile-filter-grid .cp-search-input { min-height: 2.4rem; height: 2.4rem; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(18, 45, 73, 0.14) !important; color: #173659 !important; } html[data-mdb-theme="dark"] .cp-home-mobile-filter-grid .form-select, html[data-cp-theme="dark"] .cp-home-mobile-filter-grid .form-select, html[data-mdb-theme="dark"] .cp-home-mobile-filter-grid .cp-search-input, html[data-cp-theme="dark"] .cp-home-mobile-filter-grid .cp-search-input { color: #e5eefc !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; } .cp-home-mobile-filter-grid .cp-search-input::placeholder { color: rgba(23, 54, 89, 0.72); } html[data-mdb-theme="dark"] .cp-home-mobile-filter-grid .cp-search-input::placeholder, html[data-cp-theme="dark"] .cp-home-mobile-filter-grid .cp-search-input::placeholder { color: rgba(229, 238, 252, 0.72) !important; } } @media (min-width: 1300px) { .cp-navbar-stack .cp-home-mobile-filter-bar { display: none !important; } } /* Explore / home segmented feed: align map width with post cards (cp-home-section uses p-3 / p-md-4) */ .cp-home-feed-wrap { --cp-home-feed-gutter: 1rem; --cp-map-shell-feed-bg: #ffffff; } @media (min-width: 768px) { .cp-home-feed-wrap { --cp-home-feed-gutter: 1.5rem; } } html[data-mdb-theme="dark"] .cp-home-feed-wrap, html[data-cp-theme="dark"] .cp-home-feed-wrap { --cp-map-shell-feed-bg: var(--cp-page-surface-bg, #1A1A2E); } .cp-home-feed-wrap > [data-cp-map-template].cp-map-template-shell { box-sizing: border-box; } .cp-home-feed-wrap > .cp-map-template-shell--home-feed { z-index: 120; background: var(--cp-map-shell-feed-bg) !important; background-clip: padding-box; /* Flat panel: no duplicate grey card frame (avoids rounded-corner feed bleed) */ border: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-map-card { border: none !important; box-shadow: none !important; padding: var(--cp-map-band-gap, 0.75rem) !important; border-radius: 0 !important; background: var(--cp-map-shell-feed-bg) !important; } .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-map-canvas-wrap { border: none !important; box-shadow: none !important; border-radius: var(--cp-home-feed-map-radius, 0.68rem); overflow: hidden; background: var(--cp-map-shell-feed-bg) !important; } /* Opaque backdrop within the shell only — do not extend above siblings (segment head / filters) */ .cp-home-feed-wrap > .cp-map-template-shell--home-feed::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; top: 0; bottom: 0; height: auto; background: var(--cp-map-shell-feed-bg); z-index: 0; pointer-events: none; } /* While sticky-scrolling: extend veil upward so feed does not bleed above the map band */ .cp-home-feed-wrap > .cp-map-template-shell--home-feed.is-cp-map-stuck::before { top: -100vh; } /* When stuck: opaque band for the sticky top inset (full viewport width) */ .cp-home-feed-wrap > .cp-map-template-shell--home-feed.is-cp-map-stuck::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--cp-map-shell-sticky-top, 0px); background: var(--cp-map-shell-feed-bg); z-index: 119; pointer-events: none; } .cp-home-feed-wrap > .cp-map-template-shell--home-feed > .row { position: relative; z-index: 1; } @media (max-width: 767.98px) { .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-map-card, .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-map-canvas-wrap, .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-controls { background: var(--cp-map-shell-feed-bg) !important; } } /* Map toggles (Zoom / Show me) — readable on home/explore feed shell in both themes */ .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-controls { position: relative; z-index: 2; border: none !important; box-shadow: none !important; } .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-controls .form-check-label { color: #173659; } html[data-mdb-theme="dark"] .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-controls .form-check-label, html[data-cp-theme="dark"] .cp-home-feed-wrap > .cp-map-template-shell--home-feed .cp-map-template-controls .form-check-label { color: #e5eefc; } .cp-home-feed-wrap > #cp-section-feed.cp-home-section { position: relative; z-index: 1; } .cp-map-template-shell[data-cp-map-template]:not(.cp-map-template-shell--no-sticky) { position: -webkit-sticky !important; position: sticky !important; top: calc(var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)) + 2px); z-index: 102; align-self: flex-start; overflow-anchor: none; } .cp-map-template-shell--no-sticky[data-cp-map-template] { position: static !important; top: auto !important; z-index: auto; align-self: stretch; overflow-anchor: auto; } .cp-home-feed-wrap > .cp-map-template-shell--home-feed[data-cp-map-template] { z-index: 120; } /* Home/explore segmented feed: mobile map uses shell gutter inset; tablet+ full row width inside gutters */ @media (max-width: 767.98px) { .cp-home-feed-wrap > .cp-map-template-shell--home-feed { width: 100%; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; } } @media (min-width: 768px) { .cp-home-feed-wrap > .cp-map-template-shell--home-feed { width: 100%; max-width: none; margin-left: 0 !important; margin-right: 0 !important; } } @media (min-width: 768px) and (max-width: 1199.98px) { [data-cp-map-template] > .row { justify-content: stretch; } [data-cp-map-template] > .row > .cp-map-ad-slot { flex: 0 0 var(--cp-map-ad-tablet-width); width: var(--cp-map-ad-tablet-width); max-width: var(--cp-map-ad-tablet-width); } [data-cp-map-template] > .row > .cp-map-template-map-col { flex: 1 1 0; width: auto; max-width: none; min-width: 0; } } /* Map band — gap between side ads and map canvas (+ inner map padding) */ [data-cp-map-template].cp-map-template-shell { --cp-map-band-gap: 0.75rem; } @media (min-width: 768px) { [data-cp-map-template].cp-map-template-shell { --cp-map-band-gap: 1rem; } } [data-cp-map-template].cp-map-template-shell > .row.align-items-stretch { --bs-gutter-x: var(--cp-map-band-gap); --bs-gutter-y: var(--cp-map-band-gap); } [data-cp-map-template].cp-map-template-shell .cp-map-template-map-card { padding: var(--cp-map-band-gap) !important; } @media (min-width: 1200px) { [data-cp-map-template] > .row > .cp-map-ad-slot { flex: 0 0 var(--cp-map-ad-max-width); width: var(--cp-map-ad-max-width); min-width: var(--cp-map-ad-max-width); max-width: var(--cp-map-ad-max-width); } } @media (max-width: 767.98px) { [data-cp-map-template] > .row { min-width: 0; } } [data-mdb-theme="dark"] .cp-post-cover { border: 1px solid rgba(255, 255, 255, .08); } /* ---- Post meta heading (show pages) ---- */ .cp-post-meta-title { /* h1 inside x-post-meta — category color applied via cp-card-title--{cat} */ line-height: 1.2; } /* ---- Post engagement card ---- */ /* Inherits .card styles; no additional CSS needed beyond existing cp-stars/cp-favorite-btn rules */ /* ---- Index page header ---- */ /* Inherits .cp-section-title and .cp-section-title--{cat}; no additional CSS needed */ /* ---- Hidden-post alert banner ---- */ .cp-hidden-banner { display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem; border-radius: .5rem; background: rgba(255, 193, 7, .15); border: 1px solid rgba(255, 193, 7, .4); color: #856404; font-size: .875rem; margin-bottom: 1rem; } [data-cp-theme="dark"] .cp-hidden-banner, [data-mdb-theme="dark"] .cp-hidden-banner { background: rgba(255, 193, 7, .12); border-color: rgba(255, 193, 7, .28); color: #ffd966; } /* ---- Post action buttons row ---- */ .cp-post-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } /* ══════════════════════════════════════════════════════════════════════════ Post-card enhancements — photo lightbox, multi-photo badge, card select ══════════════════════════════════════════════════════════════════════════ */ /* ── Card image wrapper (lightbox trigger) ─────────────────────────────── */ .cp-card-img-wrap { overflow: hidden; cursor: zoom-in; display: block; line-height: 0; } .cp-card-img-wrap:focus-visible { outline: 2px solid var(--mdb-primary, #3b71ca); outline-offset: -2px; } .cp-card-img-wrap img { width: 100%; display: block; transition: transform .28s ease; } .cp-card-img-wrap:hover img, .cp-card-img-wrap:focus-visible img { transform: scale(1.04); } /* * Post card (.cp-card) — cover height + image overlays (type, fee, title). * Kept in site.css (not only in post-card’s @push) so fragments injected via XHR * (e.g. Manage Posts preview) still match map/list cards when the layout never * rendered on first paint. */ .cp-card .cp-card-img-wrap { overflow: hidden; aspect-ratio: 360 / 220; height: auto !important; /* Letterbox stage for covers that are not exactly 360:220 (e.g. imported ZIP photos). */ background-color: var(--cp-card-img-stage-bg, #141a22); } [data-cp-theme="light"] .cp-card .cp-card-img-wrap, [data-mdb-theme="light"] .cp-card .cp-card-img-wrap { background-color: var(--cp-card-img-stage-bg, #1a2230); } [data-cp-theme="dark"] .cp-card .cp-card-img-wrap, [data-mdb-theme="dark"] .cp-card .cp-card-img-wrap { background-color: var(--cp-card-img-stage-bg, #0c1018); } .cp-card .cp-card-img-wrap img, .cp-card .cp-card-img-wrap .card-img-top { height: 100% !important; width: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; transform: scale(1); transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .cp-card:hover .cp-card-img-wrap img, .cp-card:hover .cp-card-img-wrap .card-img-top { transform: scale(1.07); } .cp-card .cp-card-img-wrap[style*="height:220px"] { height: auto !important; aspect-ratio: 360 / 220; } /* Map ad slots (L/R/M): post-card previews fit the same responsive ad width. */ .cp-map-ad-slot .cp-card { max-width: var(--cp-map-ad-max-width, 370px) !important; } .cp-map-ad-slot .cp-card .cp-card-img-wrap { aspect-ratio: 3.5 / 2; height: auto !important; } .cp-map-ad-slot .cp-card .cp-card-img-wrap[style*="height:220px"] { height: auto !important; aspect-ratio: 3.5 / 2; } .cp-map-ad-slot .cp-card .cp-card-img-wrap img, .cp-map-ad-slot .cp-card .cp-card-img-wrap .card-img-top { height: 100% !important; min-height: 0; object-fit: contain; object-position: center; } .cp-card .cp-card-img-type-badge { position: absolute; top: 0.55rem; left: 0.55rem; z-index: 4; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.18) !important; letter-spacing: 0.07em; } .cp-card .cp-card-img-price-badge { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 4; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .cp-card-img-stamp { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; } .cp-card-img-stamp__ribbon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-32deg); min-width: 140%; text-align: center; color: #fff; font-weight: 800; font-size: clamp(1rem, 4.5vw, 1.35rem); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 0; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); border-top: 2px solid rgba(255, 255, 255, 0.35); border-bottom: 2px solid rgba(255, 255, 255, 0.35); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .cp-card-img-stamp--expired .cp-card-img-stamp__ribbon { background: rgba(108, 117, 125, 0.92); } .cp-card-img-stamp--sold .cp-card-img-stamp__ribbon { background: rgba(220, 53, 69, 0.92); } :is(.cp-show-cover, .cp-market-image-stage, .cp-product-image-stage) .cp-card-img-stamp { border-radius: inherit; } .cp-card .cp-card-img-title-overlay { position: absolute; bottom: 0; left: 0; right: auto; max-width: 78%; padding: 1.8rem 1.8rem 0.6rem 0.9rem; background: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.18) 70%, transparent 100% ); -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%); mask-image: linear-gradient(to right, black 60%, transparent 100%); pointer-events: none; border-radius: 0; } .cp-card .cp-card-img-title-text { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.3; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.012em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.6); } .cp-card .card-title, .cp-card .cp-card-body-type-pill { display: none !important; } /* Post card meta + calendar (always loaded) — same rules as post-card @push so Manage Posts / map fragments match home when @push never ran on first paint. */ .cp-card hr { display: none !important; } .cp-card .card-body { padding-top: 0.6rem !important; } .cp-location-link { display: inline-flex; align-items: center; } @keyframes cpPinBounce { 0% { transform: translateY(0); } 30% { transform: translateY(-6px); } 55% { transform: translateY(0); } 75% { transform: translateY(-3px); } 100% { transform: translateY(0); } } .cp-location-link:hover .cp-pin-icon { animation: cpPinBounce 0.5s ease; } .cp-post-card__meta-line:has(.cp-location-link), .cp-post-card__meta-line:has(.cp-cal-add-wrap) { overflow: visible; } .cp-post-card__registration-info { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; white-space: pre-line; font-size: 0.875rem; line-height: 1.35; word-break: break-word; } .cp-post-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; word-break: break-word; } /* Post Description (body) on cards — 2 lines + ellipsis (full text on show page) */ .cp-post-card__body-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: pre-line; word-break: break-word; line-height: 1.35; } .cp-post-card__meta-line { display: flex; align-items: flex-start; gap: 0; min-width: 0; overflow: hidden; } .cp-post-card__meta-line i { flex: 0 0 auto; margin-top: 0.14em; } .cp-post-card__meta-text { display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-post-card__author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 991.98px) { .cp-post-card__meta-line { margin-bottom: 0.1rem !important; } .cp-card .card-body { padding-bottom: 0.35rem !important; } .cp-card-engage { margin-bottom: 0.25rem !important; } } /* Mobile touch targets — card footer action buttons need ≥44px hit area on phones */ @media (max-width: 575.98px) { .cp-card .card-footer { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; gap: 0.35rem !important; } .cp-card .card-footer .btn-sm { min-height: 2.75rem; /* 44px */ min-width: 2.75rem; padding-left: 0.65rem !important; padding-right: 0.65rem !important; } } .cp-cal-add-btn { background: none !important; border: none !important; box-shadow: none !important; padding: 0 0.25rem; line-height: 1; cursor: pointer; color: var(--mdb-primary, #3b71ca); vertical-align: middle; -webkit-appearance: none; appearance: none; } .cp-cal-add-btn:hover, .cp-cal-add-btn:focus-visible { opacity: 0.85; } .cp-cal-add-wrap { display: inline-flex; align-items: center; } .cp-cal-dropdown { position: fixed; min-width: 190px; background: var(--mdb-surface-color, #fff); border: 1px solid rgba(0, 0, 0, 0.13); border-radius: 0.5rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); z-index: 9999; padding: 0.3rem 0; } .cp-cal-option { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 1rem; font-size: 0.82rem; color: inherit; text-decoration: none; white-space: nowrap; } .cp-cal-option:hover { background: rgba(0, 0, 0, 0.06); color: inherit; text-decoration: none; } [data-cp-theme="dark"] .cp-cal-dropdown, [data-mdb-theme="dark"] .cp-cal-dropdown { background: #2b2b3c; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); } [data-cp-theme="dark"] .cp-cal-option:hover, [data-mdb-theme="dark"] .cp-cal-option:hover { background: rgba(255, 255, 255, 0.08); } [data-cp-theme="dark"] .cp-card .cp-cal-add-btn, [data-mdb-theme="dark"] .cp-card .cp-cal-add-btn { color: #9ec5fe !important; } .cp-card-engage:not(.cp-card-engage--distributed) { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .cp-card-engage__metric { display: inline-flex; align-items: center; gap: 0.22rem; font-size: 0.82rem; white-space: nowrap; color: var(--mdb-body-color, #666); } .cp-card-engage__sep { color: rgba(128, 128, 128, 0.4); font-size: 0.8rem; -webkit-user-select: none; user-select: none; flex-shrink: 0; padding: 0 0.1rem; } /* * Post card body/meta — dark theme legibility (mirrors post-card @push rules). * Lives in site.css so fragments injected without a prior full-page * (Manage Posts preview, etc.) still match home/map cards. */ [data-cp-theme="dark"] .cp-card .text-muted, [data-mdb-theme="dark"] .cp-card .text-muted, [data-cp-theme="dark"] .cp-card .text-body, [data-mdb-theme="dark"] .cp-card .text-body, [data-cp-theme="dark"] .cp-card .cp-card-engage__metric:not(.text-success):not(.text-danger):not(.text-warning), [data-mdb-theme="dark"] .cp-card .cp-card-engage__metric:not(.text-success):not(.text-danger):not(.text-warning), [data-cp-theme="dark"] .cp-card .cp-post-card__meta-text:not(.text-success):not(.text-danger):not(.text-warning), [data-mdb-theme="dark"] .cp-card .cp-post-card__meta-text:not(.text-success):not(.text-danger):not(.text-warning), [data-cp-theme="dark"] .cp-card .cp-post-card__meta-line i:not(.text-success):not(.text-danger):not(.text-warning):not(.text-muted), [data-mdb-theme="dark"] .cp-card .cp-post-card__meta-line i:not(.text-success):not(.text-danger):not(.text-warning):not(.text-muted), [data-cp-theme="dark"] .cp-card .cp-rating-count, [data-mdb-theme="dark"] .cp-card .cp-rating-count, [data-cp-theme="dark"] .cp-card .cp-fav-count, [data-mdb-theme="dark"] .cp-card .cp-fav-count, [data-cp-theme="dark"] .cp-card .cp-going-count, [data-mdb-theme="dark"] .cp-card .cp-going-count, [data-cp-theme="dark"] .cp-card .card-title, [data-mdb-theme="dark"] .cp-card .card-title, [data-cp-theme="dark"] .cp-card .card-text, [data-mdb-theme="dark"] .cp-card .card-text, [data-cp-theme="dark"] .cp-card .cp-post-card__registration-info, [data-mdb-theme="dark"] .cp-card .cp-post-card__registration-info, [data-cp-theme="dark"] .cp-card .cp-post-card__body-excerpt, [data-mdb-theme="dark"] .cp-card .cp-post-card__body-excerpt { color: #fff !important; } /* ── Multi-photo badge ──────────────────────────────────────────────────── */ .cp-multi-photo-badge { position: absolute; top: .5rem; right: .5rem; z-index: 4; display: inline-flex; align-items: center; gap: .2rem; background: rgba(0, 0, 0, .60); color: #fff; font-size: .72rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); line-height: 1.4; } /* ── Card select zone ───────────────────────────────────────────────────── */ .cp-card-select-zone { cursor: default; -webkit-user-select: none; user-select: none; } /* ── Selected card highlight ────────────────────────────────────────────── */ .cp-card--selected { outline: 2px solid var(--mdb-primary, #3b71ca) !important; outline-offset: -1px; } [data-cp-theme="dark"] .cp-card--selected { outline-color: #90b8f8 !important; } /* Map pin → feed sync: stronger focus ring + optional shake on the column wrapper */ .cp-card.cp-card--pin-focus { outline: 3px solid var(--mdb-primary, #3b71ca) !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(59, 113, 202, 0.28), 0 14px 32px rgba(59, 113, 202, 0.22) !important; position: relative; z-index: 3; } [data-cp-theme="dark"] .cp-card.cp-card--pin-focus { outline-color: #90b8f8 !important; box-shadow: 0 0 0 5px rgba(144, 184, 248, 0.32), 0 14px 32px rgba(0, 0, 0, 0.45) !important; } @keyframes cp-card-pin-shake { 0%, 100% { transform: translate3d(0, 0, 0); } 12% { transform: translate3d(-5px, 0, 0); } 24% { transform: translate3d(5px, 0, 0); } 36% { transform: translate3d(-4px, 0, 0); } 48% { transform: translate3d(4px, 0, 0); } 60% { transform: translate3d(-2px, 0, 0); } 72% { transform: translate3d(2px, 0, 0); } 84% { transform: translate3d(-1px, 0, 0); } } .cp-card-col.cp-card--pin-shake, .js-home-globe-feed-item.cp-card--pin-shake { animation: cp-card-pin-shake 0.65s ease-in-out; } @media (prefers-reduced-motion: reduce) { .cp-card-col.cp-card--pin-shake, .js-home-globe-feed-item.cp-card--pin-shake { animation: none; } } /* ── Photo lightbox modal ───────────────────────────────────────────────── */ .cp-lightbox-content { background: rgba(10, 10, 12, .90) !important; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); border: 1px solid rgba(255, 255, 255, .10) !important; box-shadow: 0 20px 72px rgba(0, 0, 0, .80) !important; } #cpPhotoCarousel .carousel-item { text-align: center; background: transparent; } #cpPhotoCarousel .carousel-item img { max-height: 80vh; max-width: 100%; width: auto; margin: 0 auto; display: block; object-fit: contain; border-radius: .35rem; } /* Keep controls visible on dark background */ #cpPhotoLightbox .carousel-control-prev, #cpPhotoLightbox .carousel-control-next { opacity: .75; } #cpPhotoLightbox .carousel-control-prev:hover, #cpPhotoLightbox .carousel-control-next:hover { opacity: 1; } /* Only show nav controls when there's more than one slide */ #cpPhotoCarousel .carousel-control-prev, #cpPhotoCarousel .carousel-control-next { display: none; } #cpPhotoCarousel.cp-multi .carousel-control-prev, #cpPhotoCarousel.cp-multi .carousel-control-next { display: flex; } /* ── Product compare checkbox overlay on card ───────────────────────────── */ .cp-compare-check-label { top: .5rem; left: .5rem; z-index: 6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .cp-compare-check-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .cp-compare-check-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.80); backdrop-filter: blur(6px); border: 2px solid rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; font-size: .72rem; color: #6c757d; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; box-shadow: 0 1px 5px rgba(0,0,0,.18); } .cp-compare-check-label:hover .cp-compare-check-icon { background: #fff; color: var(--cp-cat-compare, #3f4650); border-color: var(--cp-cat-compare, #3f4650); } .cp-compare-check-label input:checked ~ .cp-compare-check-icon { background: var(--cp-cat-compare, #3f4650); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(63,70,80,.45); } [data-cp-theme="dark"] .cp-compare-check-icon { background: rgba(40,42,50,.85); border-color: rgba(255,255,255,.18); color: #adb5bd; } [data-cp-theme="dark"] .cp-compare-check-label input:checked ~ .cp-compare-check-icon { background: var(--cp-cat-compare, #3f4650); border-color: rgba(255,255,255,.2); color: #fff; } /* ── Floating compare bar ────────────────────────────────────────────────── */ .cp-compare-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1060; background: rgba(20,22,28,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.10); padding: .6rem 0; box-shadow: 0 -4px 24px rgba(0,0,0,.30); color: #f8f9fa; } [data-cp-theme="light"] .cp-compare-bar { background: rgba(255,255,255,.95); border-top: 1px solid rgba(0,0,0,.10); color: #212529; box-shadow: 0 -4px 24px rgba(0,0,0,.12); } .cp-compare-bar-thumbs { min-height: 40px; flex-wrap: nowrap; overflow-x: auto; max-width: calc(100vw - 280px); } .cp-compare-bar-item { position: relative; flex-shrink: 0; } .cp-compare-bar-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: .375rem; border: 2px solid rgba(255,255,255,.25); display: block; } .cp-compare-bar-thumb--empty { width: 40px; height: 40px; border-radius: .375rem; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: .7rem; border: 2px solid rgba(255,255,255,.15); } [data-cp-theme="light"] .cp-compare-bar-thumb { border-color: rgba(0,0,0,.15); } .cp-compare-bar-remove { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border: none; border-radius: 50%; background: #dc3545; color: #fff; font-size: .55rem; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; } .cp-compare-bar-remove:hover { background: #a61c2c; } /* ── Inline compare bar (products page) ──────────────────────────────────── */ .cp-compare-bar-inline { background: var(--cp-surface-2, rgba(0,0,0,.04)); border: 1px solid var(--mdb-border-color, rgba(0,0,0,.12)); border-radius: .5rem; padding: .6rem .75rem; color: inherit; } [data-cp-theme="dark"] .cp-compare-bar-inline { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } /* ── Products dropdown in navbar ─────────────────────────────────────────── */ .cp-dropdown-products .dropdown-item.active, .cp-dropdown-products .dropdown-item:active { background-color: var(--cp-cat-product, #0d6efd); } /* ── Card highlighted when added to compare ──────────────────────────────── */ .cp-card--compare-selected { outline: 2px solid var(--cp-cat-compare, #3f4650); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(63, 70, 80, .18) !important; } [data-cp-theme="dark"] .cp-card--compare-selected { outline-color: #8b93a0; box-shadow: 0 0 0 4px rgba(139, 147, 160, .22) !important; } /* Product card compare toggle — default blue, selected white (pressed) */ .cp-compare-toggle-btn { background: var(--cp-cat-product, #0d6efd); border-color: color-mix(in srgb, var(--cp-cat-product, #0d6efd) 78%, #000814); color: #fff; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; } .cp-compare-toggle-btn:hover, .cp-compare-toggle-btn:focus { background: color-mix(in srgb, var(--cp-cat-product, #0d6efd) 88%, #031633); border-color: #000814; color: #fff; } .cp-compare-toggle-btn--selected, .cp-compare-toggle-btn--selected:hover, .cp-compare-toggle-btn--selected:focus { background: #fff; border-color: var(--cp-cat-product, #0d6efd); color: var(--cp-cat-product, #0d6efd); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14); } [data-cp-theme="dark"] .cp-compare-toggle-btn, [data-mdb-theme="dark"] .cp-compare-toggle-btn { border-color: color-mix(in srgb, var(--cp-cat-product, #0d6efd) 68%, #000814); } [data-cp-theme="dark"] .cp-compare-toggle-btn--selected, [data-cp-theme="dark"] .cp-compare-toggle-btn--selected:hover, [data-cp-theme="dark"] .cp-compare-toggle-btn--selected:focus, [data-mdb-theme="dark"] .cp-compare-toggle-btn--selected, [data-mdb-theme="dark"] .cp-compare-toggle-btn--selected:hover, [data-mdb-theme="dark"] .cp-compare-toggle-btn--selected:focus { background: #fff; border-color: var(--cp-cat-product, #0d6efd); color: var(--cp-cat-product, #0d6efd); } /* ══════════════════════════════════════════════════════════════════════════ GLOBAL 3-D CONTROL SYSTEM Convention: • outer drop = depth / shadow below the element • inset top = top-edge highlight (light catches top face) • inset bottom= bottom-edge shade (underside in shadow) • :hover = translateY(-1px) + brighter highlight • :active = translateY(+1px) + inset pressed shadow ══════════════════════════════════════════════════════════════════════════ */ /* ─── CSS custom properties ────────────────────────────────────────────── */ :root { --3d-raise-dark: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3); --3d-raise-light: 0 3px 8px rgba(18,45,73,.22), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(18,45,73,.14); --3d-press-dark: inset 0 3px 6px rgba(0,0,0,.5), inset 0 1px 2px rgba(0,0,0,.3); --3d-press-light: inset 0 3px 6px rgba(18,45,73,.28), inset 0 1px 2px rgba(18,45,73,.15); --3d-transition: box-shadow .12s ease, transform .1s ease, filter .1s ease; --3d-input-inset-dark: inset 0 3px 6px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rgba(255, 255, 255, 0.06); --3d-input-inset-light: inset 0 3px 6px rgba(18, 45, 73, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(18, 45, 73, 0.1); --3d-input-focus-dark: inset 0 3px 7px rgba(0, 0, 0, 0.5), 0 0 0 0.2rem rgba(59, 113, 202, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.08); --3d-input-focus-light: inset 0 3px 6px rgba(18, 45, 73, 0.12), 0 0 0 0.2rem rgba(59, 113, 202, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.95); --3d-input-invalid-dark: inset 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(var(--bs-danger-rgb), 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06); --3d-input-invalid-light: inset 0 3px 6px rgba(18, 45, 73, 0.12), inset 0 0 0 1px rgba(var(--bs-danger-rgb), 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.9); } /* ─── 1. ALL .btn ────────────────────────────────────────────────────────── */ .btn { transition: var(--3d-transition) !important; position: relative; } [data-cp-theme="dark"] .btn:not(:disabled):not(.disabled):not(.btn-link):not(.shadow-0):not(.cp-favorite-alert-strip__dismiss) { box-shadow: var(--3d-raise-dark) !important; text-shadow: 0 1px 2px rgba(0,0,0,.4); } [data-cp-theme="light"] .btn:not(:disabled):not(.disabled):not(.btn-link):not(.shadow-0):not(.cp-favorite-alert-strip__dismiss) { box-shadow: var(--3d-raise-light) !important; text-shadow: 0 1px 1px rgba(255,255,255,.6); } .btn:not(:disabled):not(.disabled):not(.btn-link):hover { transform: translateY(-1px); filter: brightness(1.1); } .btn:not(:disabled):not(.disabled):not(.btn-link):active, .btn:not(:disabled):not(.disabled):not(.btn-link).active { transform: translateY(1px) !important; filter: brightness(.92) !important; } [data-cp-theme="dark"] .btn:not(:disabled):not(.disabled):not(.btn-link):active, [data-cp-theme="dark"] .btn:not(:disabled):not(.disabled):not(.btn-link).active { box-shadow: var(--3d-press-dark) !important; } [data-cp-theme="light"] .btn:not(:disabled):not(.disabled):not(.btn-link):active, [data-cp-theme="light"] .btn:not(:disabled):not(.disabled):not(.btn-link).active { box-shadow: var(--3d-press-light) !important; } /* Category show + market listing footers — solid primary-blue actions (light + dark). */ .cp-action-footer .btn:not(.btn-link), .cp-market-listing-actions .btn:not(.btn-link), .cp-market-listing-actions .cp-action-btn-wrap > .btn:not(.btn-link), .cp-market-listing-top-strip .cp-mobile-scroll-top-btn { --bs-btn-bg: #3b71ca; --bs-btn-border-color: #3b71ca; --bs-btn-color: #fff; --bs-btn-hover-bg: #3266b8; --bs-btn-hover-border-color: #3266b8; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #2a5aa3; --bs-btn-active-border-color: #2a5aa3; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: #3b71ca; --bs-btn-disabled-border-color: #3b71ca; --bs-btn-disabled-color: #fff; background-color: #3b71ca !important; border-color: #3b71ca !important; color: #fff !important; text-shadow: none !important; } .cp-action-footer .btn:not(.btn-link):hover, .cp-action-footer .btn:not(.btn-link):focus-visible, .cp-market-listing-actions .btn:not(.btn-link):hover, .cp-market-listing-actions .btn:not(.btn-link):focus-visible, .cp-market-listing-actions .cp-action-btn-wrap > .btn:not(.btn-link):hover, .cp-market-listing-actions .cp-action-btn-wrap > .btn:not(.btn-link):focus-visible, .cp-market-listing-top-strip .cp-mobile-scroll-top-btn:hover, .cp-market-listing-top-strip .cp-mobile-scroll-top-btn:focus-visible { background-color: #3266b8 !important; border-color: #3266b8 !important; color: #fff !important; } .cp-action-footer .btn:not(.btn-link):active, .cp-action-footer .btn:not(.btn-link).active, .cp-market-listing-actions .btn:not(.btn-link):active, .cp-market-listing-actions .btn:not(.btn-link).active, .cp-market-listing-actions .cp-action-btn-wrap > .btn:not(.btn-link):active, .cp-market-listing-top-strip .cp-mobile-scroll-top-btn:active { background-color: #2a5aa3 !important; border-color: #2a5aa3 !important; color: #fff !important; } .cp-market-listing-actions .cp-action-btn-wrap > .btn:not(.btn-link)[disabled] { opacity: 0.65; } .cp-market-listing-top-strip .cp-mobile-scroll-top-btn { border: 0 !important; border-radius: 999px; font-weight: 700; box-shadow: 0 4px 14px rgba(59, 113, 202, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } /* ─── 2. FORM CONTROLS (input, textarea, select) — recessed 3D ─────────── */ .form-control, .form-select, textarea { transition: var(--3d-transition), border-color .15s ease !important; } [data-cp-theme="dark"] .form-control:not([readonly]):not(:disabled), [data-cp-theme="dark"] .form-select:not(:disabled), [data-cp-theme="dark"] textarea:not([readonly]):not(:disabled), [data-mdb-theme="dark"] .form-control:not([readonly]):not(:disabled), [data-mdb-theme="dark"] .form-select:not(:disabled), [data-mdb-theme="dark"] textarea:not([readonly]):not(:disabled) { box-shadow: var(--3d-input-inset-dark) !important; } [data-cp-theme="light"] .form-control:not([readonly]):not(:disabled), [data-cp-theme="light"] .form-select:not(:disabled), [data-cp-theme="light"] textarea:not([readonly]):not(:disabled), [data-mdb-theme="light"] .form-control:not([readonly]):not(:disabled), [data-mdb-theme="light"] .form-select:not(:disabled), [data-mdb-theme="light"] textarea:not([readonly]):not(:disabled) { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; box-shadow: var(--3d-input-inset-light) !important; } [data-cp-theme="dark"] .form-control:not([readonly]):not(:disabled):focus, [data-cp-theme="dark"] .form-select:not(:disabled):focus, [data-cp-theme="dark"] textarea:not([readonly]):not(:disabled):focus, [data-mdb-theme="dark"] .form-control:not([readonly]):not(:disabled):focus, [data-mdb-theme="dark"] .form-select:not(:disabled):focus, [data-mdb-theme="dark"] textarea:not([readonly]):not(:disabled):focus { background-color: #3a3a3a !important; color: #fff !important; border: 0 !important; box-shadow: var(--3d-input-focus-dark) !important; } [data-cp-theme="light"] .form-control:not([readonly]):not(:disabled):focus, [data-cp-theme="light"] .form-select:not(:disabled):focus, [data-cp-theme="light"] textarea:not([readonly]):not(:disabled):focus, [data-mdb-theme="light"] .form-control:not([readonly]):not(:disabled):focus, [data-mdb-theme="light"] .form-select:not(:disabled):focus, [data-mdb-theme="light"] textarea:not([readonly]):not(:disabled):focus { border: 0 !important; box-shadow: var(--3d-input-focus-light) !important; } .form-control.is-invalid:not([readonly]):not(:disabled), .form-select.is-invalid:not(:disabled), textarea.is-invalid:not([readonly]):not(:disabled) { background-color: rgba(var(--bs-danger-rgb), 0.12) !important; border: 0 !important; } [data-cp-theme="dark"] .form-control.is-invalid:not([readonly]):not(:disabled), [data-cp-theme="dark"] .form-select.is-invalid:not(:disabled), [data-cp-theme="dark"] textarea.is-invalid:not([readonly]):not(:disabled), [data-mdb-theme="dark"] .form-control.is-invalid:not([readonly]):not(:disabled), [data-mdb-theme="dark"] .form-select.is-invalid:not(:disabled), [data-mdb-theme="dark"] textarea.is-invalid:not([readonly]):not(:disabled) { box-shadow: var(--3d-input-invalid-dark) !important; } [data-cp-theme="light"] .form-control.is-invalid:not([readonly]):not(:disabled), [data-cp-theme="light"] .form-select.is-invalid:not(:disabled), [data-cp-theme="light"] textarea.is-invalid:not([readonly]):not(:disabled), [data-mdb-theme="light"] .form-control.is-invalid:not([readonly]):not(:disabled), [data-mdb-theme="light"] .form-select.is-invalid:not(:disabled), [data-mdb-theme="light"] textarea.is-invalid:not([readonly]):not(:disabled) { box-shadow: var(--3d-input-invalid-light) !important; } /* Input groups — each field keeps full recessed tray (no shared flat border) */ .input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text { border: 0 !important; } .input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { margin-left: 0; } /* Global label-side validation message treatment. */ .cp-label-with-error { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .cp-label-error { margin-left: auto; font-size: 0.8rem; line-height: 1.2; color: var(--mdb-danger, #f93154); font-weight: 500; white-space: normal; text-align: right; } .invalid-feedback.cp-feedback-relocated, .valid-feedback.cp-feedback-relocated { display: none !important; } /* ─── 3. INPUT-GROUP-TEXT addons ────────────────────────────────────────── */ [data-cp-theme="dark"] .input-group-text { box-shadow: inset 0 2px 4px rgba(0,0,0,.3) !important; } [data-cp-theme="light"] .input-group-text { box-shadow: inset 0 1px 3px rgba(18,45,73,.1), inset 0 -1px 0 rgba(255,255,255,.8) !important; } /* ─── 4. CHIPS ───────────────────────────────────────────────────────────── */ .cp-chip { transition: var(--3d-transition) !important; } [data-cp-theme="dark"] .cp-chip { box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.25) !important; text-shadow: 0 1px 2px rgba(0,0,0,.4); } [data-cp-theme="light"] .cp-chip { box-shadow: 0 2px 5px rgba(18,45,73,.18), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(18,45,73,.1) !important; } .cp-chip:not(.cp-user-chip):hover, .cp-chip:not(.cp-user-chip):focus { transform: translateY(-1px) !important; filter: brightness(1.1); } [data-cp-theme="dark"] .cp-chip:not(.cp-user-chip):hover, [data-cp-theme="dark"] .cp-chip:not(.cp-user-chip):focus { box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25) !important; } [data-cp-theme="light"] .cp-chip:not(.cp-user-chip):hover, [data-cp-theme="light"] .cp-chip:not(.cp-user-chip):focus { box-shadow: 0 4px 10px rgba(18,45,73,.24), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(18,45,73,.12) !important; } /* ─── 5. CARDS ───────────────────────────────────────────────────────────── */ .card, .cp-content-card { transition: box-shadow .18s ease, transform .15s ease !important; } [data-cp-theme="dark"] .card:not(.shadow-0):not(.border-0) { box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important; } [data-cp-theme="light"] .card:not(.shadow-0):not(.border-0) { box-shadow: 0 3px 10px rgba(18,45,73,.14), inset 0 1px 0 rgba(255,255,255,.9) !important; } /* Marketplace create/edit — card interior padding (Mass import, Photos). Rows use negative horizontal margins; without extra body padding + margin reset, alerts and form controls can sit visually flush against the card border. Do NOT put overflow:hidden on the Mass import card — it breaks native file input / button clicks in Chromium/WebKit. Clip photo corners only on .cp-sell-photos-card. */ .cp-sell-photos-card { overflow: hidden; } .cp-sell-listing-card .card-header { padding: 0.875rem 1.25rem; } .cp-sell-listing-card > .card-body, .cp-sell-listing-card .card-body { padding: 1.25rem 1.5rem; } @media (max-width: 575.98px) { .cp-sell-listing-card .card-header { padding: 0.75rem 1rem; } .cp-sell-listing-card > .card-body, .cp-sell-listing-card .card-body { padding: 1rem 1.125rem 1.25rem; } } .cp-sell-listing-card .card-body > .row, .cp-sell-listing-card .card-body > form.row { margin-left: 0; margin-right: 0; } .cp-sell-listing-card .card-body .alert.small { padding-left: 1rem; padding-right: 1rem; } /* Hoverable cards */ .cp-card:hover, a.card:hover { transform: translateY(-2px) !important; } [data-cp-theme="dark"] .cp-card:hover, [data-cp-theme="dark"] a.card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1) !important; } [data-cp-theme="light"] .cp-card:hover, [data-cp-theme="light"] a.card:hover { box-shadow: 0 8px 20px rgba(18,45,73,.2), inset 0 1px 0 rgba(255,255,255,.95) !important; } /* ─── 6. DROPDOWN MENUS ──────────────────────────────────────────────────── */ .dropdown-menu { transition: box-shadow .15s ease !important; } [data-cp-theme="dark"] .dropdown-menu { box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.1) !important; } [data-cp-theme="light"] .dropdown-menu { box-shadow: 0 8px 22px rgba(18,45,73,.2), 0 2px 5px rgba(18,45,73,.1), inset 0 1px 0 rgba(255,255,255,.95) !important; border: 1px solid rgba(18,45,73,.12) !important; } [data-cp-theme="dark"] .dropdown-item { transition: background .1s ease, transform .08s ease !important; } .dropdown-item:not(:disabled):hover, .dropdown-item:not(:disabled):focus { transform: translateX(2px); } /* ─── 7. MODALS ──────────────────────────────────────────────────────────── */ [data-cp-theme="dark"] .modal-content { box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08) !important; } [data-cp-theme="light"] .modal-content { box-shadow: 0 16px 48px rgba(18,45,73,.28), 0 4px 12px rgba(18,45,73,.15), inset 0 1px 0 rgba(255,255,255,.95) !important; } [data-cp-theme="dark"] .modal-header { background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 100%); } [data-cp-theme="light"] .modal-header { background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, transparent 100%); } /* ─── 8. ALERTS ──────────────────────────────────────────────────────────── */ .alert { transition: box-shadow .15s ease !important; } [data-cp-theme="dark"] .alert { box-shadow: 0 3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important; } [data-cp-theme="light"] .alert { box-shadow: 0 3px 8px rgba(18,45,73,.12), inset 0 1px 0 rgba(255,255,255,.85) !important; } /* ─── 9. BADGES ──────────────────────────────────────────────────────────── */ .badge { transition: box-shadow .12s ease !important; } [data-cp-theme="dark"] .badge { box-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14) !important; text-shadow: 0 1px 2px rgba(0,0,0,.4); } [data-cp-theme="light"] .badge { box-shadow: 0 2px 4px rgba(18,45,73,.2), inset 0 1px 0 rgba(255,255,255,.6) !important; } /* ─── 10. PAGINATION ─────────────────────────────────────────────────────── */ .page-link { transition: var(--3d-transition) !important; } [data-cp-theme="dark"] .page-link { box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1) !important; } [data-cp-theme="light"] .page-link { box-shadow: 0 2px 5px rgba(18,45,73,.14), inset 0 1px 0 rgba(255,255,255,.9) !important; } .page-link:hover { transform: translateY(-1px); } .page-link:active { transform: translateY(1px); } [data-cp-theme="dark"] .page-item.active .page-link { box-shadow: 0 3px 8px rgba(59,113,202,.5), inset 0 1px 0 rgba(255,255,255,.2) !important; } /* ─── 11. LIST-GROUP ITEMS ───────────────────────────────────────────────── */ [data-cp-theme="dark"] .list-group-item { box-shadow: inset 0 -1px 0 rgba(0,0,0,.2) !important; } [data-cp-theme="light"] .list-group-item { box-shadow: inset 0 -1px 0 rgba(18,45,73,.07) !important; } [data-cp-theme="dark"] .list-group-item:first-child { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.2) !important; } [data-cp-theme="light"] .list-group-item:first-child { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(18,45,73,.07) !important; } /* ─── 12. TABLES ─────────────────────────────────────────────────────────── */ [data-cp-theme="dark"] .table > :not(caption) > * > * { box-shadow: inset 0 -1px 0 rgba(255,255,255,.04) !important; } /* Table headers: always opaque (sticky scroll must not show body bleed-through) */ .table > thead > tr > th, .table thead.sticky-top > tr > th, .table-responsive .table > thead > tr > th { background-color: var(--cp-table-head-bg, #e8f0fa) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .table > thead > tr > th, .table thead.sticky-top > tr > th { position: sticky; top: 0; z-index: 2; } .table thead.sticky-top > tr > th, .table-responsive .table thead.sticky-top > tr > th, .cp-fq-group .table thead > tr > th, .cp-fq-group .table thead.sticky-top > tr > th { z-index: 3; } [data-cp-theme="dark"] .table > thead > tr > th, [data-mdb-theme="dark"] .table > thead > tr > th, [data-cp-theme="dark"] .table thead.sticky-top > tr > th, [data-mdb-theme="dark"] .table thead.sticky-top > tr > th { background-color: var(--cp-table-head-bg, #1a2940) !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important; color: #9db5d8; } [data-cp-theme="light"] .table > thead > tr > th, [data-mdb-theme="light"] .table > thead > tr > th, [data-cp-theme="light"] .table thead.sticky-top > tr > th, [data-mdb-theme="light"] .table thead.sticky-top > tr > th { background-color: var(--cp-table-head-bg, #e8f0fa) !important; box-shadow: inset 0 -1px 0 rgba(18, 45, 73, 0.18) !important; color: #16324f; } /* Sticky header cells in last column (feedback queue, etc.) */ .table thead > tr > th.cp-fq-sticky-col, .table thead.sticky-top > tr > th.cp-fq-sticky-col { z-index: 4; background-color: var(--cp-table-head-bg, #e8f0fa) !important; } [data-cp-theme="dark"] .table thead > tr > th.cp-fq-sticky-col, [data-mdb-theme="dark"] .table thead > tr > th.cp-fq-sticky-col { background-color: var(--cp-table-head-bg, #1a2940) !important; } /* ─── 13. CHIP-INPUT CONTAINERS ──────────────────────────────────────────── */ [data-cp-theme="dark"] .cp-chip-input { box-shadow: inset 0 2px 5px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.05) !important; } [data-cp-theme="light"] .cp-chip-input { box-shadow: inset 0 2px 4px rgba(18,45,73,.1), inset 0 -1px 0 rgba(255,255,255,.8) !important; } /* ─── 14. PROGRESS BARS ──────────────────────────────────────────────────── */ .progress { box-shadow: inset 0 2px 4px rgba(0,0,0,.25) !important; border-radius: 999px !important; } .progress-bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.25) !important; } /* ─── 15. SECTION / SHELL CONTAINERS ─────────────────────────────────────── */ /* Layout/map/section shells — page-matched surface, no frame borders (.cp-card unchanged) */ .cp-map-template-shell, .cp-map-template-map-card, .cp-map-template-map-panel, .cp-map-template-controls, .cp-home-section, .cp-home-section.border, .cp-form-shell, .cp-filter-shell, .cp-control-panel, .cp-adm-map-shell, .cp-adm-controls, .cp-businesses-search-shell, .cp-shell-control-card.card, .cp-recent-shell.cp-home-feed-band, .cp-home-feed-wrap { border: none !important; border-width: 0 !important; border-color: transparent !important; box-shadow: none !important; background-color: var(--cp-page-surface-bg, #ffffff) !important; } [data-cp-theme="dark"] .cp-map-template-shell, [data-mdb-theme="dark"] .cp-map-template-shell, [data-cp-theme="dark"] .cp-map-template-map-card, [data-mdb-theme="dark"] .cp-map-template-map-card, [data-cp-theme="dark"] .cp-map-template-map-panel, [data-mdb-theme="dark"] .cp-map-template-map-panel, [data-cp-theme="dark"] .cp-map-template-controls, [data-mdb-theme="dark"] .cp-map-template-controls, [data-cp-theme="dark"] .cp-home-section, [data-mdb-theme="dark"] .cp-home-section, [data-cp-theme="dark"] .cp-home-section.border, [data-mdb-theme="dark"] .cp-home-section.border, [data-cp-theme="dark"] .cp-form-shell, [data-mdb-theme="dark"] .cp-form-shell, [data-cp-theme="dark"] .cp-control-panel, [data-mdb-theme="dark"] .cp-control-panel, [data-cp-theme="dark"] .cp-filter-shell, [data-mdb-theme="dark"] .cp-filter-shell, [data-cp-theme="dark"] .cp-recent-shell.cp-home-feed-band, [data-mdb-theme="dark"] .cp-recent-shell.cp-home-feed-band { border: none !important; border-width: 0 !important; border-color: transparent !important; box-shadow: none !important; background: var(--cp-page-surface-bg, #1A1A2E) !important; background-color: var(--cp-page-surface-bg, #1A1A2E) !important; } [data-cp-theme="light"] .cp-map-template-shell, [data-mdb-theme="light"] .cp-map-template-shell, [data-cp-theme="light"] .cp-map-template-map-card, [data-mdb-theme="light"] .cp-map-template-map-card, [data-cp-theme="light"] .cp-home-section, [data-mdb-theme="light"] .cp-home-section, [data-cp-theme="light"] .cp-recent-shell.cp-home-feed-band, [data-mdb-theme="light"] .cp-recent-shell.cp-home-feed-band { background: var(--cp-page-surface-bg, #ffffff) !important; background-color: var(--cp-page-surface-bg, #ffffff) !important; } /* ─── 16. SEARCH INPUTS ──────────────────────────────────────────────────── */ [data-cp-theme="dark"] .cp-search-input { box-shadow: inset 0 2px 6px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.06) !important; } [data-cp-theme="light"] .cp-search-input { box-shadow: inset 0 2px 5px rgba(18,45,73,.14), inset 0 -1px 0 rgba(255,255,255,.9) !important; } .cp-search-input:focus { transform: none !important; /* inputs don't lift */ } /* ─── 17. MAP TEMPLATE CONTROLS SHELL ───────────────────────────────────── */ [data-cp-theme="dark"] .cp-map-template-controls, [data-mdb-theme="dark"] .cp-map-template-controls, [data-cp-theme="light"] .cp-map-template-controls, [data-mdb-theme="light"] .cp-map-template-controls { box-shadow: none !important; } /* ─── 18. PAGE HEADINGS ──────────────────────────────────────────────────── */ [data-cp-theme="dark"] .cp-page-heading { box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06) !important; } [data-cp-theme="light"] .cp-page-heading { box-shadow: 0 2px 6px rgba(18,45,73,.1), inset 0 1px 0 rgba(255,255,255,.9) !important; } /* ─── Messages: internal URL links (MessageBodyHtmlFormatter) ───────────── */ .cp-message-body .cp-message-body__link { text-decoration: underline; font-weight: 500; } [data-cp-theme="dark"] .cp-message-body .cp-message-body__link, [data-mdb-theme="dark"] .cp-message-body .cp-message-body__link { color: #9dc8ff; } [data-cp-theme="light"] .cp-message-body .cp-message-body__link, [data-mdb-theme="light"] .cp-message-body .cp-message-body__link { color: #0d6efd; } /* Messages index expand rows: beat generic `td a` contrast rules */ [data-cp-theme="dark"] .cp-recent-shell .cp-message-body .cp-message-body__link, [data-mdb-theme="dark"] .cp-recent-shell .cp-message-body .cp-message-body__link { color: #9dc8ff !important; } [data-cp-theme="light"] .cp-recent-shell .cp-message-body .cp-message-body__link, [data-mdb-theme="light"] .cp-recent-shell .cp-message-body .cp-message-body__link { color: #0d6efd !important; } .cp-message-body .cp-message-body__thumb { display: block; max-width: min(360px, 100%); height: auto; margin-top: .65rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .12); } [data-cp-theme="light"] .cp-message-body .cp-message-body__thumb, [data-mdb-theme="light"] .cp-message-body .cp-message-body__thumb { border-color: rgba(20, 40, 80, .14); } /* ========================================================================== USER CHIP GEOMETRY LOCK (global) Enforce one identical user-chip shape across navbar + body surfaces. ========================================================================== */ a.cp-user-chip, button.cp-user-chip, div.cp-user-chip { display: inline-flex !important; align-items: stretch !important; justify-content: flex-start !important; box-sizing: border-box !important; min-height: var(--cp-chip-avatar-width, var(--cp-chip-height, calc(2rem + 4px))) !important; height: var(--cp-chip-avatar-width, var(--cp-chip-height, calc(2rem + 4px))) !important; padding: 0 .34rem 0 0 !important; line-height: 1 !important; border-radius: 999px !important; border-style: solid !important; border-width: var(--cp-chip-border-width, 3px) var(--cp-chip-border-width, 3px) var(--cp-chip-border-width, 3px) 0 !important; border-color: var(--cp-chip-accent) !important; overflow: visible !important; vertical-align: middle !important; } a.cp-user-chip .cp-chip__content, button.cp-user-chip .cp-chip__content, div.cp-user-chip .cp-chip__content { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .3rem !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 0 5px !important; color: var(--cp-chip-content) !important; } a.cp-user-chip .cp-chip__title, button.cp-user-chip .cp-chip__title, div.cp-user-chip .cp-chip__title { font-size: var(--cp-user-chip-title-size, 1.05rem) !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1 !important; white-space: nowrap !important; color: var(--cp-chip-content) !important; } a.cp-user-chip .cp-chip__avatar, a.cp-user-chip .cp-chip__avatar-fallback, button.cp-user-chip .cp-chip__avatar, button.cp-user-chip .cp-chip__avatar-fallback, div.cp-user-chip .cp-chip__avatar, div.cp-user-chip .cp-chip__avatar-fallback { position: relative !important; align-self: center !important; width: var(--cp-chip-avatar-width, calc(var(--cp-chip-height, calc(2rem + 4px)) + (2 * var(--cp-chip-border-width, 3px)))) !important; min-width: var(--cp-chip-avatar-width, calc(var(--cp-chip-height, calc(2rem + 4px)) + (2 * var(--cp-chip-border-width, 3px)))) !important; height: var(--cp-chip-avatar-width, calc(var(--cp-chip-height, calc(2rem + 4px)) + (2 * var(--cp-chip-border-width, 3px)))) !important; margin: 0 !important; border-radius: 50% !important; } /* Override Bootstrap `.btn` / `.btn-primary` if ever merged onto the chip — tokens win */ .cp-user-chip, .cp-user-chip.btn-primary, a.cp-user-chip.btn-primary, button.cp-user-chip.btn-primary { color: var(--cp-chip-text) !important; --cp-chip-content: var(--cp-chip-text); --cp-chip-icon: rgba(237, 233, 254, 0.92); } .cp-user-chip:hover, .cp-user-chip:focus-visible, .cp-user-chip.btn-primary:hover, .cp-user-chip.btn-primary:focus-visible { color: var(--cp-chip-text-hover) !important; --cp-chip-content: var(--cp-chip-text-hover); --cp-chip-icon: var(--cp-chip-icon-hover); } /* Preferred-interest tag lists (register, settings, profile) — full height, compact pills */ .cp-interest-tags-scroll { padding: 0.35rem 0.45rem; } .cp-interest-tags-scroll .cp-tag-pill { padding: 0.16rem 0.48rem; font-size: 0.72rem; } /* ── Account type cards (register + profile edit) ── */ .account-type-card { position: relative; display: block; width: 100%; text-align: center; padding: 1rem 0.65rem 0.85rem; border-radius: 0.75rem; border: 2px solid rgba(120, 150, 190, 0.25); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; -webkit-user-select: none; user-select: none; } .account-type-card:hover { border-color: rgba(13, 110, 253, 0.45); background: rgba(13, 110, 253, 0.05); } .account-type-card.selected { border-color: #0d6efd !important; background: rgba(13, 110, 253, 0.14) !important; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.22); } .account-type-card.account-type-card--readonly { cursor: default; pointer-events: none; } .account-type-card.account-type-card--readonly:not(.selected) { opacity: 0.58; } .at-radio { position: absolute; top: 0.65rem; right: 0.75rem; display: block; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid rgba(120, 150, 190, 0.5); background: transparent; transition: all 0.15s; } .account-type-card.selected .at-radio { border-color: #0d6efd; background: #0d6efd; box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3); } .account-type-card.selected .at-radio::after { content: ""; display: block; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #fff; margin: auto; position: absolute; inset: 0; } .at-emoji { font-size: 2.4rem; margin-bottom: 0.45rem; line-height: 1; } .at-name { font-weight: 700; font-size: 0.95rem; color: #dee4ed; margin-bottom: 0.2rem; } .at-desc { font-size: 0.78rem; color: #7d97b5; } [data-mdb-theme="light"] .account-type-card { background: rgba(0, 0, 0, 0.02); } [data-mdb-theme="light"] .at-name { color: #1e2b3a; } [data-mdb-theme="light"] .at-desc { color: #5a718a; } [data-mdb-theme="light"] .account-type-card.selected { background: rgba(13, 110, 253, 0.08) !important; } /* Tables: opt-in selectable rows (set aria-selected from JS; add .cp-table-rows-selectable on ) */ .table.cp-table-rows-selectable > tbody > tr { cursor: pointer; } .table.cp-table-rows-selectable > tbody > tr[aria-selected="true"] { background-color: rgba(13, 110, 253, 0.08) !important; box-shadow: inset 4px 0 0 rgba(13, 110, 253, 0.55); } [data-cp-theme="dark"] .table.cp-table-rows-selectable > tbody > tr[aria-selected="true"], [data-mdb-theme="dark"] .table.cp-table-rows-selectable > tbody > tr[aria-selected="true"] { background-color: rgba(13, 110, 253, 0.18) !important; box-shadow: inset 4px 0 0 rgba(96, 165, 250, 0.75); } /* Property schema editor (admin schemes + member create-type) */ .cp-scheme-form-card .card-header, .cp-scheme-form-card .card-body, .cp-scheme-form-card .card-footer { padding: 1rem 1.25rem; } .cp-scheme-form-card .card-header.bg-primary { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .cp-scheme-form-card .card-header + .card-body:not(:last-child) { border-radius: 0 !important; } .cp-scheme-form-card .card-body + .card-footer { border-radius: 0 0 0.75rem 0.75rem !important; } .cp-admin-page-header { margin-top: 0; } .cp-admin-page-title { padding-bottom: 0; margin-bottom: 0; } .cp-admin-page-title::after { display: none; } .cp-property-schema-table-wrap { overflow-x: auto; } .cp-property-schema-table { --cp-property-schema-actions-width: 5.5rem; --cp-property-schema-field-width: calc((100% - var(--cp-property-schema-actions-width)) / 2); table-layout: fixed; width: 100%; margin-bottom: 0; } .cp-property-schema-table thead th { background-color: var(--cp-table-head-bg, #e8f0fa); white-space: nowrap; } .cp-property-schema-table tbody td { background-color: var(--cp-table-surface-bg, #ffffff); vertical-align: middle; } .cp-property-schema-table__name-col, .cp-property-schema-table__unit-col { width: var(--cp-property-schema-field-width); } .cp-property-schema-table__unit-col .form-select, .cp-property-schema-table__name-col .form-control { width: 100%; max-width: 100%; } .cp-property-schema-table__actions { position: sticky; right: 0; z-index: 2; width: var(--cp-property-schema-actions-width); min-width: var(--cp-property-schema-actions-width); max-width: var(--cp-property-schema-actions-width); text-align: center; box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06); } .cp-property-schema-table thead th.cp-property-schema-table__actions { z-index: 3; background-color: var(--cp-table-head-bg, #e8f0fa); } .cp-property-schema-table tbody td.cp-property-schema-table__actions { background-color: var(--cp-table-surface-bg, #ffffff); } [data-cp-theme="dark"] .cp-property-schema-table thead th, [data-mdb-theme="dark"] .cp-property-schema-table thead th { background-color: var(--cp-table-head-bg, #1a2940); } [data-cp-theme="dark"] .cp-property-schema-table tbody td, [data-mdb-theme="dark"] .cp-property-schema-table tbody td { background-color: var(--cp-table-surface-bg, #152238); } [data-cp-theme="dark"] .cp-property-schema-table thead th.cp-property-schema-table__actions, [data-mdb-theme="dark"] .cp-property-schema-table thead th.cp-property-schema-table__actions, [data-cp-theme="dark"] .cp-property-schema-table tbody td.cp-property-schema-table__actions, [data-mdb-theme="dark"] .cp-property-schema-table tbody td.cp-property-schema-table__actions { box-shadow: -4px 0 8px rgba(0, 0, 0, 0.28); } .cp-property-schema-templates .cp-template-group-btn { border: 2px solid #0a2f63; color: #36c8ff; background: transparent; text-transform: uppercase; } .cp-property-schema-templates .cp-template-group-btn.is-active { background: #9ed9ff; color: #0a2f63; border-color: #0a2f63; box-shadow: inset 0 0 0 1px #0a2f63; } .cp-property-schema-templates .cp-template-btn { border: 2px solid #0a2f63; color: #3fd4ff; background: transparent; text-transform: uppercase; } [data-cp-theme="dark"] .cp-property-schema-templates .cp-template-group-btn, [data-mdb-theme="dark"] .cp-property-schema-templates .cp-template-group-btn { border-color: #5eb8ff; color: #7dd3fc; } [data-cp-theme="dark"] .cp-property-schema-templates .cp-template-group-btn.is-active, [data-mdb-theme="dark"] .cp-property-schema-templates .cp-template-group-btn.is-active { background: rgba(94, 184, 255, 0.22); color: #e0f2fe; border-color: #7dd3fc; } [data-cp-theme="dark"] .cp-property-schema-templates .cp-template-btn, [data-mdb-theme="dark"] .cp-property-schema-templates .cp-template-btn { border-color: #5eb8ff; color: #7dd3fc; } /* ----- Home: hero + globe + feed — one visual band (see resources/js/home-globe.js) ----- */ .cp-home-hero-bar { background: linear-gradient(180deg, rgba(3, 11, 20, 0.55) 0%, rgba(3, 11, 20, 0.2) 100%); border-color: rgba(120, 150, 180, 0.12) !important; } html[data-mdb-theme="light"] .cp-home-hero-bar, html[data-cp-theme="light"] .cp-home-hero-bar { background: linear-gradient(180deg, #f0f5fb 0%, #f7fafd 100%); border-color: rgba(0, 0, 0, 0.06) !important; } /* ----- Home Globe.gl hero ----- */ .cp-home-globe-section { background: radial-gradient(120% 80% at 50% 100%, rgba(20, 60, 100, 0.35), transparent 55%), linear-gradient(180deg, rgba(3, 11, 20, 1), rgba(5, 16, 28, 1)); border-color: rgba(100, 140, 180, 0.12) !important; } html[data-mdb-theme="light"] .cp-home-globe-section, html[data-cp-theme="light"] .cp-home-globe-section { background: radial-gradient(100% 90% at 50% 100%, rgba(120, 170, 220, 0.2), transparent 50%), linear-gradient(180deg, #e2edf8 0%, #f0f6fc 45%, #e8f0fa 100%); border-color: rgba(0, 0, 0, 0.06) !important; } /* Sticky home globe / globe landing: ancestors must not clip (breaks position: sticky) */ html:has(.cp-home-globe-sticky), body:has(.cp-home-globe-sticky), html:has(.cp-globe-landing), body:has(.cp-globe-landing) { overflow-x: visible; } .cp-main:has(.cp-home-globe-sticky), .cp-page-center:has(.cp-home-globe-sticky), section.cp-home-feed-band:has(.cp-home-globe-sticky), .cp-home-feed-wrap:has(.cp-home-globe-sticky), .cp-main:has(.cp-globe-landing), .cp-page-center:has(.cp-globe-landing) { overflow: visible !important; } /* Same as :has() above, but class-based so older Safari / strict HTML overflow still work */ html.cp-home-globe-page, body.cp-home-globe-page { overflow-x: visible !important; } body.cp-home-globe-page .cp-main, body.cp-home-globe-page .cp-page-center, body.cp-home-globe-page section.cp-home-feed-band, body.cp-home-globe-page .cp-home-feed-wrap, body.cp-globe-landing-page .cp-main, body.cp-globe-landing-page .cp-page-center { overflow: visible !important; } .cp-home-globe-section.cp-home-globe-sticky { /* !important beats Bootstrap .position-relative if that utility is ever re-added */ position: -webkit-sticky !important; position: sticky !important; top: calc(var(--cp-navbar-visible-height, var(--cp-navbar-height, 56px)) + 2px); z-index: 102; align-self: flex-start; overflow-anchor: none; } /* Optional: taller immersive globe on desktop — mobile uses --compact */ .cp-home-globe-section--tall .cp-home-globe { min-height: 280px; height: 46vh; max-height: 620px; } @media (max-width: 991.98px) { .cp-home-globe-section--compact .cp-home-globe, .cp-home-globe-section--compact.cp-home-globe-section--tall .cp-home-globe { min-height: 160px; height: 26vh; max-height: 280px; } .cp-home-globe-section--compact .cp-home-globe-toolbar--controls { padding: 0.25rem 0.5rem 0.25rem 0.35rem; gap: 0.35rem 0.65rem; } .cp-home-globe-section--compact .cp-home-globe-toolbar--controls .form-check-label { font-size: 1.84rem; } .cp-home-globe-section--compact .cp-home-globe-chrome { padding: 0.45rem; gap: 0.4rem; } } @media (min-width: 992px) { .cp-home-globe-section--tall .cp-home-globe { min-height: 340px; height: 52vh; } } .cp-home-globe-chrome { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 0.65rem; pointer-events: none; } .cp-home-globe-chrome > * { pointer-events: auto; } .cp-home-globe-toolbar { margin-left: auto; padding: 0.35rem 0.65rem 0.35rem 0.45rem; border-radius: 0.5rem; background: transparent; border: none; backdrop-filter: none; } /* Full-width control row: Auto-rotate (start) · Zoom on focus (end) */ .cp-home-globe-toolbar.cp-home-globe-toolbar--controls { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; width: 100%; flex: 1 1 100%; margin-left: 0 !important; max-width: none; box-sizing: border-box; } .cp-home-globe-toolbar--controls .form-check { flex: 0 1 auto; min-width: 0; } .cp-home-globe-hero-card { position: relative; display: flex; align-items: flex-start; gap: 0.55rem; max-width: min(340px, calc(100vw - 9rem)); padding: 0.85rem 0.55rem 0.45rem; border-radius: 0.55rem; background: rgba(8, 18, 32, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); color: rgba(245, 248, 255, 0.96); } .cp-home-globe-hero-card:hover { border-color: rgba(245, 158, 11, 0.45); } .cp-home-globe-hero-card__badge { position: absolute; top: 0.35rem; left: 0.45rem; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.12rem 0.38rem; border-radius: 0.25rem; background: rgba(245, 158, 11, 0.92); color: rgba(15, 15, 18, 0.95); } .cp-home-globe-hero-card__media { flex-shrink: 0; width: 72px; height: 72px; border-radius: 0.4rem; overflow: hidden; background: rgba(255, 255, 255, 0.06); } .cp-home-globe-hero-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .cp-home-globe-hero-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .cp-home-globe-hero-card__title { font-weight: 700; font-size: 2.1rem; line-height: 1.25; color: inherit; } .cp-home-globe-hero-card__text { font-size: 1.84rem; line-height: 1.35; opacity: 0.88; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cp-home-globe-hero-card__cta { font-size: 1.84rem; font-weight: 600; color: #fbbf24; } html[data-mdb-theme="light"] .cp-home-globe-hero-card, html[data-cp-theme="light"] .cp-home-globe-hero-card { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.08); color: rgba(25, 36, 48, 0.95); } html[data-mdb-theme="light"] .cp-home-globe-hero-card__cta, html[data-cp-theme="light"] .cp-home-globe-hero-card__cta { color: #d97706; } .cp-globe-pin.cp-globe-pin--ad .cp-globe-pin__dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0.35rem var(--cp-globe-pin-color, #f59e0b), 0 0 1rem rgba(245, 158, 11, 0.45); } .cp-home-globe-toolbar .form-check-label { font-size: 2rem; line-height: 1.3; color: rgba(235, 242, 252, 0.95); } html[data-mdb-theme="light"] .cp-home-globe-toolbar, html[data-cp-theme="light"] .cp-home-globe-toolbar { background: transparent; border: none; backdrop-filter: none; } html[data-mdb-theme="light"] .cp-home-globe-toolbar .form-check-label, html[data-cp-theme="light"] .cp-home-globe-toolbar .form-check-label { color: rgba(30, 43, 56, 0.92); } .cp-home-globe { width: 100%; min-height: 220px; height: 34vh; max-height: 520px; position: relative; overflow: hidden; overscroll-behavior: contain; } @media (min-width: 992px) { .cp-home-globe { min-height: 280px; height: 40vh; } } .cp-home-globe canvas { display: block; } /* Site-wide loading overlay (navigation, search, filters, AJAX) */ .cp-site-loading { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; pointer-events: all; } .cp-site-loading__backdrop { position: absolute; inset: 0; background: rgba(3, 11, 20, 0.48); backdrop-filter: blur(2px); } html[data-mdb-theme="light"] .cp-site-loading__backdrop, html[data-cp-theme="light"] .cp-site-loading__backdrop { background: rgba(225, 236, 248, 0.72); } .cp-site-loading__panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.25rem 1.5rem; border-radius: 0.75rem; background: var(--bs-body-bg, #fff); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .cp-site-loading__spinner { width: 2.5rem; height: 2.5rem; } .cp-site-loading__label { font-size: 0.875rem; font-weight: 500; color: var(--bs-body-color); } .cp-globe-loading { display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 11; } .cp-globe-loading__spinner { width: 2.5rem; height: 2.5rem; } .cp-home-globe-section .cp-globe-loading { position: absolute; left: 0; right: 0; bottom: 0; min-height: 220px; height: 34vh; max-height: 520px; background: rgba(3, 11, 20, 0.4); } html[data-mdb-theme="light"] .cp-home-globe-section .cp-globe-loading, html[data-cp-theme="light"] .cp-home-globe-section .cp-globe-loading { background: rgba(225, 236, 248, 0.55); } @media (min-width: 992px) { .cp-home-globe-section .cp-globe-loading { min-height: 280px; height: 40vh; } .cp-home-globe-section--tall .cp-globe-loading { min-height: 340px; height: 52vh; } } .cp-home-globe-section--tall .cp-globe-loading { min-height: 280px; height: 46vh; max-height: 620px; } @media (max-width: 991.98px) { .cp-home-globe-section--compact .cp-globe-loading, .cp-home-globe-section--compact.cp-home-globe-section--tall .cp-globe-loading { min-height: 160px; height: 26vh; max-height: 280px; } } body.cp-globe-landing-page .cp-globe-landing__overlay .cp-globe-loading { position: absolute; top: 0; bottom: var(--cp-globe-footer-reserve, 0px); left: 0; right: 0; background: rgba(3, 11, 20, 0.35); } html[data-mdb-theme="light"] body.cp-globe-landing-page .cp-globe-landing__overlay .cp-globe-loading, html[data-cp-theme="light"] body.cp-globe-landing-page .cp-globe-landing__overlay .cp-globe-loading { background: rgba(225, 236, 248, 0.45); } .cp-home-globe--empty::after, .cp-home-globe--error::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .cp-globe-pin { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border: none; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: transform 0.18s ease, filter 0.18s ease; pointer-events: auto; } .cp-globe-pin:focus-visible { outline: 2px solid var(--cp-globe-pin-color, #fff); outline-offset: 2px; } .cp-globe-pin__dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--cp-globe-pin-color, #6c757d); box-shadow: 0 0 0.35rem var(--cp-globe-pin-color, #6c757d), 0 0 1rem rgba(255, 255, 255, 0.2); } html[data-mdb-theme="light"] .cp-globe-pin__dot, html[data-cp-theme="light"] .cp-globe-pin__dot { box-shadow: 0 0 0.35rem var(--cp-globe-pin-color, #6c757d), 0 0 0.65rem rgba(0, 0, 0, 0.18); } /* Feed strip under globe: soft continuation of the sky palette */ .cp-home-feed-band { background: linear-gradient(180deg, rgba(5, 14, 24, 0.35) 0%, transparent 12rem); } html[data-mdb-theme="light"] .cp-home-feed-band, html[data-cp-theme="light"] .cp-home-feed-band { background: linear-gradient(180deg, rgba(232, 241, 250, 0.85) 0%, transparent 14rem); } .cp-globe-pin:hover, .cp-globe-pin:focus-visible { transform: translate(-50%, -50%) scale(1.35); filter: brightness(1.15); } .cp-globe-pin:active { transform: translate(-50%, -50%) scale(1.2); } /* Feed card highlighted when synced with globe focus */ .cp-card-col.cp-card--globe-focus .card { box-shadow: 0 0 0 3px rgba(59, 113, 202, 0.45) !important; transition: box-shadow 0.2s ease; } /* Large infowindow-style marker on focused globe pin */ .cp-globe-flag { display: flex; flex-direction: column; align-items: center; width: auto; max-width: 200px; padding: 0; border: none; background: transparent; cursor: pointer; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); pointer-events: auto; } .cp-globe-flag:focus-visible { outline: 2px solid var(--cp-globe-pin-color, #fff); outline-offset: 3px; } .cp-globe-flag__img, .cp-globe-flag__ph { width: 56px; height: 56px; border-radius: 0.45rem; object-fit: cover; display: block; border: 2px solid rgba(255, 255, 255, 0.92); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .cp-globe-flag__ph { flex-shrink: 0; } .cp-globe-flag__cap { margin-top: 0.2rem; padding: 0.45rem 0.65rem 0.5rem; border-radius: 0.4rem; background: rgba(8, 18, 32, 0.88); border: 1px solid rgba(255, 255, 255, 0.16); max-width: min(360px, 90vw); } .cp-globe-flag__title { font-size: 1.9rem; font-weight: 700; line-height: 1.25; color: rgba(248, 250, 255, 0.96); text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .cp-globe-flag__tip { width: 0; height: 0; margin-top: -1px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--cp-globe-pin-color, #6c757d); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); } html[data-mdb-theme="light"] .cp-globe-flag__cap, html[data-cp-theme="light"] .cp-globe-flag__cap { background: rgba(255, 255, 255, 0.94); border-color: rgba(18, 45, 73, 0.18); } html[data-mdb-theme="light"] .cp-globe-flag__title, html[data-cp-theme="light"] .cp-globe-flag__title { color: rgba(18, 36, 58, 0.95); } /* WWPosts globe landing (fullscreen home) */ html.cp-globe-landing-page, body.cp-globe-landing-page { --cp-globe-page-bg: #e1ecf8; --cp-globe-landing-below-nav: 0.65rem; /* Overlay band: headline / slogan / chips scale from chip (3.9 : 2.2 : 1.5) */ --cp-globe-overlay-max-h: calc(30vh + 2.75rem); --cp-globe-overlay-chip: clamp(0.75rem, 1.6vh, 1.1rem); --cp-globe-overlay-headline: calc(var(--cp-globe-overlay-chip) * 3.9); --cp-globe-overlay-sub-line: calc(var(--cp-globe-overlay-chip) * 2.2); /* Filter chips + auto-rotate — smaller than headline chip */ --cp-globe-control-chip: clamp(0.70rem, 1.5vh, 1.0rem); --cp-globe-activity-font: clamp(0.52rem, 0.95vh, 0.68rem); --cp-globe-activity-type-size: calc(var(--cp-globe-activity-font) * 1.02); --cp-globe-activity-title-size: calc(var(--cp-globe-activity-font) * 1.18); --cp-globe-activity-card-width: min(260px, 82vw); --cp-globe-activity-thumb: 1.75rem; --cp-globe-footer-reserve: 0px; background-color: var(--cp-globe-page-bg); overflow-x: hidden; min-height: 100dvh; overflow-y: hidden; display: flex; flex-direction: column; } html[data-mdb-theme="dark"].cp-globe-landing-page, html[data-cp-theme="dark"].cp-globe-landing-page, html[data-mdb-theme="dark"] body.cp-globe-landing-page, html[data-cp-theme="dark"] body.cp-globe-landing-page { --cp-globe-page-bg: #030b14; } body.cp-globe-landing-page .cp-main, body.cp-globe-landing-page .cp-page-center { max-width: none; background-color: var(--cp-globe-page-bg); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Horizontal padding only — top clearance uses global .cp-main (incl. 1300–1846 QL stack). */ body.cp-globe-landing-page .cp-page-center { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } body.cp-globe-landing-page .cp-footer { position: relative; z-index: 2; flex-shrink: 0; background-color: var(--cp-globe-page-bg) !important; border-top-color: rgba(255, 255, 255, 0.1); color: rgba(200, 216, 235, 0.85); } html[data-mdb-theme="light"] body.cp-globe-landing-page .cp-footer, html[data-cp-theme="light"] body.cp-globe-landing-page .cp-footer { border-top-color: rgba(18, 45, 73, 0.18); } .cp-globe-landing { overflow: visible; background-color: var(--cp-globe-page-bg); } /* Fullscreen landing: globe bleeds under fixed nav; UI clears stack via __head padding only */ body.cp-globe-landing-page .cp-main { padding-top: 0 !important; } body.cp-globe-landing-page .cp-page-center { flex: 1 1 auto; min-height: 0; } body.cp-globe-landing-page .cp-globe-landing { position: relative !important; top: auto !important; flex: 1 1 auto; min-height: 0; height: 100%; margin-top: 0; } .cp-globe-landing__overlay { position: relative; width: 100%; height: 100%; min-height: 0; padding: 0; background-color: var(--cp-globe-page-bg); /* Visible overflow so holo headline background-clip:text is not clipped (canvas has its own overflow). */ overflow: visible; } /* Globe fills overlay from top (bleeds under fixed nav/QL); sphere fit band is computed in JS. */ body.cp-globe-landing-page #home-globe.cp-globe-landing__canvas.cp-home-globe { position: absolute; bottom: var(--cp-globe-footer-reserve, 0px); left: 0; right: 0; z-index: 1; width: 100%; max-width: none; min-height: 0; height: auto; max-height: none; margin: 0; overflow: hidden; pointer-events: auto; } body.cp-globe-landing-page .cp-globe-landing__canvas.cp-home-globe canvas { display: block; width: 100% !important; height: 100% !important; } /* In-flow controls row (Auto-rotate) — lives under filter chips in __head */ .cp-globe-landing__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; width: auto; max-width: 100%; margin-top: calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 0.8125rem)) * 0.45); padding: calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 0.8125rem)) * 0.28) calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 0.8125rem)) * 0.55); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(8, 18, 32, 0.55); backdrop-filter: blur(8px); box-sizing: border-box; flex-shrink: 0; } html[data-mdb-theme="light"] .cp-globe-landing__controls, html[data-cp-theme="light"] .cp-globe-landing__controls { border-color: rgba(18, 45, 73, 0.14); background: rgba(255, 255, 255, 0.72); } .cp-globe-landing__rotate-switch .form-check-label { font-size: var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 0.8125rem)); line-height: 1.3; color: rgba(248, 250, 255, 0.95); white-space: nowrap; } html[data-mdb-theme="light"] .cp-globe-landing__rotate-switch .form-check-label, html[data-cp-theme="light"] .cp-globe-landing__rotate-switch .form-check-label { color: rgba(30, 43, 56, 0.92); } /* Keep the knob white when checked too — MDB colors it the same blue as the track, which makes the circle vanish (looks like a solid pill). */ .cp-globe-landing__rotate-switch .form-check-input:checked[type="checkbox"]::after { background-color: #fff; } .cp-globe-landing__head { position: absolute; top: 0; left: 0; right: 0; width: 100%; padding: 0.25rem 0.75rem 0; z-index: 12; pointer-events: none; display: flex; flex-direction: column; align-items: center; overflow: hidden; box-sizing: border-box; } body.cp-globe-landing-page .cp-globe-landing__head { max-height: calc( var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)) + var(--cp-globe-overlay-max-h, 15vh) ); padding-top: calc( var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)) + var(--cp-globe-landing-below-nav, 0.65rem) ); } body.cp-globe-landing-page .cp-globe-landing__overlay .cp-globe-landing__chrome { top: calc( var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)) + 0.5rem ); } body.cp-globe-landing-page .cp-home-globe-hero-card { font-size: var(--cp-globe-overlay-chip); max-width: min(340px, calc(100vw - 9rem)); padding: calc(var(--cp-globe-overlay-chip) * 0.567) calc(var(--cp-globe-overlay-chip) * 0.367) calc(var(--cp-globe-overlay-chip) * 0.3); } body.cp-globe-landing-page .cp-home-globe-hero-card__badge { font-size: 1em; padding: calc(var(--cp-globe-overlay-chip) * 0.08) calc(var(--cp-globe-overlay-chip) * 0.253); } body.cp-globe-landing-page .cp-home-globe-hero-card__media { width: calc(var(--cp-globe-overlay-chip) * 4.615); height: calc(var(--cp-globe-overlay-chip) * 4.615); } body.cp-globe-landing-page .cp-home-globe-hero-card__title { font-size: 1.4em; } body.cp-globe-landing-page .cp-home-globe-hero-card__text, body.cp-globe-landing-page .cp-home-globe-hero-card__cta { font-size: 1.227em; } body.cp-globe-landing-page .cp-globe-landing__controls { padding: calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip)) * 0.28) calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip)) * 0.55); } .cp-globe-landing__hero-copy, .cp-globe-landing__headline { overflow: visible; max-width: 100%; } .cp-globe-landing__head > * { pointer-events: auto; } /* Navbar brand — WWPosts holographic title */ #cp-navbar-stack .cp-navbar-brand-btn { position: relative; isolation: isolate; flex: 0 0 auto; min-height: var(--cp-navbar-control-height); padding: calc(0.1rem * var(--cp-navbar-density-scale, 1)) calc(0.55rem * var(--cp-navbar-density-scale, 1)); gap: calc(0.35rem * var(--cp-navbar-density-scale, 1)); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; box-shadow: 0 3px 10px rgba(4, 13, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16); overflow: visible; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.12s ease; } #cp-navbar-stack .cp-navbar-brand-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient( 115deg, #1e3a8a 0%, #2563eb 22%, #7c3aed 48%, #0284c7 72%, #1e40af 100% ); background-size: 260% 260%; animation: cp-navbar-brand-bg-shift 7s ease-in-out infinite; } #cp-navbar-stack .cp-navbar-brand-btn:hover, #cp-navbar-stack .cp-navbar-brand-btn:focus-visible { transform: translateY(-1px); filter: brightness(1.08); border-color: rgba(255, 255, 255, 0.34); box-shadow: 0 6px 16px rgba(13, 110, 253, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22); } #cp-navbar-stack .cp-navbar-brand-btn:active { transform: translateY(1px); filter: brightness(0.96); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(4, 13, 24, 0.18); } html[data-cp-theme="light"] #cp-navbar-stack .cp-navbar-brand-btn, html[data-mdb-theme="light"] #cp-navbar-stack .cp-navbar-brand-btn { border-color: rgba(59, 113, 202, 0.34); box-shadow: 0 3px 10px rgba(18, 45, 73, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72); } html[data-cp-theme="light"] #cp-navbar-stack .cp-navbar-brand-btn::before, html[data-mdb-theme="light"] #cp-navbar-stack .cp-navbar-brand-btn::before { background: linear-gradient( 115deg, #dbeafe 0%, #60a5fa 24%, #818cf8 50%, #38bdf8 76%, #bfdbfe 100% ); } html[data-cp-theme="light"] #cp-navbar-stack .cp-navbar-brand-btn:hover, html[data-cp-theme="light"] #cp-navbar-stack .cp-navbar-brand-btn:focus-visible, html[data-mdb-theme="light"] #cp-navbar-stack .cp-navbar-brand-btn:hover, html[data-mdb-theme="light"] #cp-navbar-stack .cp-navbar-brand-btn:focus-visible { box-shadow: 0 6px 14px rgba(59, 113, 202, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85); } @keyframes cp-navbar-brand-bg-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { #cp-navbar-stack .cp-navbar-brand-btn::before { animation: none; background-position: 0% 50%; } } .cp-navbar-brand-title { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; font-size: var(--cp-navbar-brand-title-size, var(--cp-navbar-ql-font-size)); font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; } .cp-navbar-brand-title__gradient { display: inline-block; max-width: 100%; white-space: nowrap; background: linear-gradient( 105deg, #f0f9ff 0%, #00d4ff 28%, #a78bfa 55%, #00d4ff 82%, #e0f2fe 100% ); background-size: 220% auto; background-repeat: repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: cp-fx-holo-shimmer 5.5s linear infinite; filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.22)); /* Do not set overflow:hidden here — ancestors with overflow break background-clip:text in WebKit. */ } @keyframes cp-fx-holo-shimmer { to { background-position: 220% center; } } /* Light mode: same holo shimmer, darker stops for contrast on pale chrome */ html[data-mdb-theme="light"] .cp-navbar-brand-title__gradient, html[data-cp-theme="light"] .cp-navbar-brand-title__gradient { background: linear-gradient( 105deg, #0c4a6e 0%, #0369a1 22%, #4f46e5 48%, #0284c7 72%, #0c4a6e 100% ); background-size: 220% auto; background-repeat: repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: cp-fx-holo-shimmer 5.5s linear infinite; filter: drop-shadow(0 1px 3px rgba(12, 74, 110, 0.2)); } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { html[data-mdb-theme="light"] .cp-navbar-brand-title__gradient, html[data-cp-theme="light"] .cp-navbar-brand-title__gradient { background: none; color: #0c4a6e; -webkit-text-fill-color: currentColor; animation: none; filter: none; } } @media (prefers-reduced-motion: reduce) { .cp-navbar-brand-title__gradient { animation: none; background-position: 0 center; } } .cp-globe-landing__hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; margin-bottom: calc(var(--cp-globe-overlay-chip, 0.8125rem) * 0.567); text-align: center; flex-shrink: 1; min-height: 0; } .cp-globe-landing__headline { margin: 0 0 calc(var(--cp-globe-overlay-chip, 0.8125rem) * 0.267); font-size: var(--cp-globe-overlay-headline, clamp(3.9rem, 12.6vh, 6.3rem)); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; } /* Home globe title + tagline: 3D extruded type + stroke (no backdrop bar) */ .cp-globe-landing__headline-gradient { display: inline-block; max-width: 100%; white-space: nowrap; -webkit-font-smoothing: antialiased; paint-order: stroke fill; background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: currentColor; animation: none; filter: none; color: #e8f7ff; -webkit-text-stroke: clamp(1.5px, 0.055em, 3px) rgba(0, 196, 240, 0.72); text-shadow: 0 1px 0 #1a6f94, 0 2px 0 #155c7c, 0 3px 0 #104a65, 0 4px 0 #0b384e, 0 5px 0 #08344a, 0 6px 0 #062637, 1px 7px 0 #041a28, 1px 8px 0 #031520, 0 10px 24px rgba(0, 0, 0, 0.52), 0 0 28px rgba(0, 212, 255, 0.26); } html[data-mdb-theme="dark"] .cp-globe-landing__headline-gradient, html[data-cp-theme="dark"] .cp-globe-landing__headline-gradient { color: #f6fbff; -webkit-text-stroke: clamp(1.5px, 0.055em, 3px) rgba(56, 189, 248, 0.78); text-shadow: 0 1px 0 #1e7aa3, 0 2px 0 #186688, 0 3px 0 #12536d, 0 4px 0 #0c3f52, 0 5px 0 #093544, 0 6px 0 #062b38, 1px 7px 0 #041f2a, 1px 8px 0 #021018, 0 11px 28px rgba(0, 0, 0, 0.6), 0 0 34px rgba(0, 212, 255, 0.32); } html[data-mdb-theme="light"] .cp-globe-landing__headline-gradient, html[data-cp-theme="light"] .cp-globe-landing__headline-gradient { color: #0a4a6e; -webkit-text-stroke: clamp(1.5px, 0.055em, 3px) rgba(255, 255, 255, 0.92); text-shadow: 0 1px 0 #c8dce8, 0 2px 0 #b0cad9, 0 3px 0 #98b8cb, 0 4px 0 #80a6bc, 0 5px 0 #6894ad, 0 6px 0 #5082a0, 1px 7px 0 #3a6f8f, 1px 8px 0 #507a94, 0 9px 18px rgba(12, 74, 110, 0.32), 0 0 20px rgba(255, 255, 255, 0.68); } /* Tagline: matches headline 3D (smaller type) */ .cp-globe-landing__sub-line { margin: 0; max-width: min(100%, 95vw); width: 100%; padding: 0; border: 0; font-size: var(--cp-globe-overlay-sub-line, clamp(2.2rem, 7.1vh, 3.575rem)); font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; -webkit-font-smoothing: antialiased; paint-order: stroke fill; color: #e8f7ff; -webkit-text-stroke: clamp(1px, 0.08em, 2px) rgba(0, 196, 240, 0.72); text-shadow: 0 1px 0 #1a6f94, 0 2px 0 #155c7c, 0 3px 0 #104a65, 0 4px 0 #0b384e, 0 5px 0 #062637, 1px 6px 0 #031520, 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 22px rgba(0, 212, 255, 0.22); } .cp-globe-landing__head .cp-globe-filter-bar { justify-content: center; } html[data-mdb-theme="dark"] .cp-globe-landing__sub-line, html[data-cp-theme="dark"] .cp-globe-landing__sub-line { color: #f6fbff; -webkit-text-stroke: clamp(1px, 0.08em, 2px) rgba(56, 189, 248, 0.78); text-shadow: 0 1px 0 #1e7aa3, 0 2px 0 #186688, 0 3px 0 #12536d, 0 4px 0 #0c3f52, 0 5px 0 #062b38, 1px 6px 0 #021018, 0 9px 22px rgba(0, 0, 0, 0.58), 0 0 28px rgba(0, 212, 255, 0.28); } html[data-mdb-theme="light"] .cp-globe-landing__sub-line, html[data-cp-theme="light"] .cp-globe-landing__sub-line { color: #0a4a6e; -webkit-text-stroke: clamp(1px, 0.08em, 2px) rgba(255, 255, 255, 0.92); text-shadow: 0 1px 0 #c8dce8, 0 2px 0 #b0cad9, 0 3px 0 #98b8cb, 0 4px 0 #80a6bc, 0 5px 0 #6894ad, 1px 6px 0 #507a94, 0 7px 14px rgba(12, 74, 110, 0.28), 0 0 16px rgba(255, 255, 255, 0.65); } .cp-globe-landing__chrome { position: absolute; top: 0; right: 0.75rem; z-index: 13; max-width: min(320px, calc(100% - 1.5rem)); } .cp-globe-landing__overlay .cp-globe-landing__chrome { top: 0.5rem; } .cp-globe-filter-bar { display: flex; flex-wrap: wrap; gap: calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 0.8125rem)) * 0.35); justify-content: center; flex-shrink: 0; max-width: 100%; } .cp-globe-filter-btn { border-radius: 999px; background: rgba(8, 18, 32, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); font-size: var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 1.1rem)); font-weight: 700; padding: calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 0.8125rem)) * 0.32) calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 0.8125rem)) * 0.68); line-height: 1.2; -webkit-font-smoothing: antialiased; paint-order: stroke fill; color: #e8f7ff; -webkit-text-stroke: clamp(0.5px, 0.07em, 1px) rgba(0, 196, 240, 0.7); text-shadow: 0 1px 0 #1a6f94, 0 2px 0 #124f71, 0 3px 0 #0b384e, 1px 4px 0 #031520, 0 5px 10px rgba(0, 0, 0, 0.42), 0 0 12px rgba(0, 212, 255, 0.18); } html[data-mdb-theme="dark"] .cp-globe-filter-btn, html[data-cp-theme="dark"] .cp-globe-filter-btn { color: #f6fbff; -webkit-text-stroke: clamp(0.5px, 0.07em, 1px) rgba(56, 189, 248, 0.75); text-shadow: 0 1px 0 #1e7aa3, 0 2px 0 #155c7c, 0 3px 0 #0c3f52, 1px 4px 0 #021018, 0 5px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 212, 255, 0.22); } html[data-mdb-theme="light"] .cp-globe-filter-btn, html[data-cp-theme="light"] .cp-globe-filter-btn { color: #e8f4fc; -webkit-text-stroke: clamp(0.5px, 0.07em, 1px) rgba(186, 230, 255, 0.85); text-shadow: 0 1px 0 #1a6f94, 0 2px 0 #124f71, 0 3px 0 #0b384e, 1px 4px 0 #031520, 0 5px 10px rgba(0, 0, 0, 0.38), 0 0 12px rgba(0, 212, 255, 0.16); } a.cp-globe-filter-btn, a.cp-globe-filter-btn--link { text-decoration: none; } .cp-globe-filter-btn.active, .cp-globe-filter-btn:hover { background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd); color: #ffffff; -webkit-text-stroke: clamp(0.5px, 0.07em, 1px) rgba(255, 255, 255, 0.55); text-shadow: 0 1px 0 #0a58ca, 0 2px 0 #084298, 0 3px 0 #06316e, 1px 4px 0 #04234f, 0 5px 10px rgba(0, 0, 0, 0.38), 0 0 10px rgba(255, 255, 255, 0.2); } .cp-globe-activity-cards { position: absolute; left: 0.75rem; right: 0.75rem; bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); z-index: 14; display: flex; gap: 0.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.3rem 0.15rem 1rem; pointer-events: auto; } .cp-globe-activity-cards--empty { justify-content: center; } .cp-globe-activity-cards__empty { font-size: var(--cp-globe-activity-title-size, 0.875rem); color: rgba(248, 250, 255, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .cp-globe-activity-card { flex: 0 0 auto; width: var(--cp-globe-activity-card-width, min(385px, 90vw)); scroll-snap-align: start; display: flex; gap: 0.35rem; align-items: center; padding: 0.28rem 0.38rem; border-radius: 0.45rem; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(8, 18, 32, 0.82); color: rgba(248, 250, 255, 0.96); text-align: left; backdrop-filter: blur(8px); } .cp-globe-activity-card--focus { box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd); } .cp-globe-activity-card__img { width: var(--cp-globe-activity-thumb, 2.625rem); height: var(--cp-globe-activity-thumb, 2.625rem); border-radius: 0.32rem; object-fit: cover; flex-shrink: 0; } .cp-globe-activity-card__body { display: flex; flex-direction: column; gap: 0.06rem; min-width: 0; } .cp-globe-activity-card__type { font-size: var(--cp-globe-activity-type-size, 0.85rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(148, 198, 255, 0.95); } .cp-globe-activity-card__title { font-size: var(--cp-globe-activity-title-size, 1.05rem); font-weight: 600; line-height: 1.18; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .cp-globe-fallback { padding: 1.5rem; min-height: calc(100dvh - var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px))); } .cp-globe-fallback__inner { max-width: 480px; margin: 0 auto; } @media (max-width: 991.98px) { body.cp-globe-landing-page { --cp-globe-landing-below-nav: 0.55rem; --cp-globe-overlay-max-h: none; --cp-globe-overlay-chip: clamp(0.62rem, 1.35vh, 0.88rem); --cp-globe-control-chip: clamp(0.58rem, 1.25vh, 0.82rem); --cp-globe-overlay-headline: clamp(1.55rem, 6.8vw, 2.15rem); --cp-globe-overlay-sub-line: clamp(0.72rem, 2.85vw, 0.95rem); --cp-globe-activity-card-width: min(240px, 78vw); --cp-globe-activity-font: clamp(0.5rem, 0.88vh, 0.64rem); } body.cp-globe-landing-page .cp-globe-landing__head { max-height: none; overflow: visible; padding-bottom: 0.35rem; } .cp-globe-landing__head { padding-left: max(0.5rem, env(safe-area-inset-left, 0px)); padding-right: max(0.5rem, env(safe-area-inset-right, 0px)); } .cp-globe-landing__hero-copy { margin-bottom: calc(var(--cp-globe-overlay-chip, 0.8125rem) * 0.4); } .cp-globe-landing__headline { margin-bottom: calc(var(--cp-globe-overlay-chip, 0.8125rem) * 0.2); } .cp-globe-landing__headline-gradient { white-space: normal; } .cp-globe-landing__sub-line { white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.25; max-width: min(100%, 92vw); } .cp-globe-filter-bar { max-width: 100%; padding-inline: 0.1rem; } .cp-globe-landing__controls { margin-top: calc(var(--cp-globe-control-chip, var(--cp-globe-overlay-chip, 0.8125rem)) * 0.35); width: auto; max-width: calc(100% - 0.5rem); } .cp-globe-activity-cards { left: max(0.5rem, env(safe-area-inset-left, 0px)); right: max(0.5rem, env(safe-area-inset-right, 0px)); bottom: max(0.45rem, env(safe-area-inset-bottom, 0px)); } .cp-globe-landing__chrome { max-width: min(280px, calc(100% - 1rem)); } } /* iPhone-narrow (≤390px): tighter headline + tagline */ @media (max-width: 390px) { body.cp-globe-landing-page { --cp-globe-overlay-headline: clamp(1.42rem, 7.2vw, 1.72rem); --cp-globe-overlay-sub-line: clamp(0.64rem, 2.65vw, 0.78rem); --cp-globe-control-chip: clamp(0.54rem, 1.15vh, 0.72rem); } .cp-globe-landing__hero-copy { max-width: 100%; padding-inline: 0.15rem; box-sizing: border-box; } .cp-globe-landing__headline { letter-spacing: -0.04em; } .cp-globe-landing__headline-gradient { max-width: 100%; white-space: normal; text-align: center; } .cp-globe-landing__sub-line { letter-spacing: 0.01em; max-width: 100%; } .cp-globe-filter-btn { padding: calc(var(--cp-globe-control-chip, 0.8125rem) * 0.28) calc(var(--cp-globe-control-chip, 0.8125rem) * 0.55); } } /* * QL browse pages — shared title / action / filter typography * (Events, Trails, Market, Track indexes + segmented home/explore headers) */ .cp-category-index-band, .cp-home-feed-band:has(.cp-home-segment-head), .cp-main:has(.cp-ql-hero-filter-bar) { --cp-ql-page-title-size: clamp(1.25rem, 4.8vw, 1.75rem); --cp-ql-page-btn-font-size: 0.875rem; --cp-ql-page-btn-icon-size: 0.8125rem; --cp-ql-page-btn-padding-y: 0.375rem; --cp-ql-page-btn-padding-x: 0.75rem; --cp-ql-page-filter-control-height: 3rem; --cp-ql-page-filter-font-size: 1rem; --cp-ql-page-map-control-font-size: 1rem; } /* Category index (All pages) — tight top spacing under navbar quick links (no py-5) */ .cp-recent-shell.cp-category-index-band { padding-top: 0; padding-bottom: 1rem; } /* Category index / page-template — map band gutters (matches header px-3 / px-lg-4) */ .cp-category-index-wrap { --cp-home-feed-gutter: 1rem; } @media (min-width: 768px) { .cp-category-index-wrap { --cp-home-feed-gutter: 1.5rem; } } /* Map + side ads — inset from viewport edges on browse / explore index bands */ .cp-category-index-wrap > [data-cp-map-template].cp-map-template-shell, .cp-home-feed-wrap > [data-cp-map-template].cp-map-template-shell--home-feed { box-sizing: border-box; padding-left: var(--cp-home-feed-gutter, 1rem); padding-right: var(--cp-home-feed-gutter, 1rem); padding-top: 0.35rem; padding-bottom: 0.85rem; } .cp-home-feed-wrap > .cp-map-template-shell--home-feed { padding-left: var(--cp-home-feed-gutter, 1rem) !important; padding-right: var(--cp-home-feed-gutter, 1rem) !important; padding-top: 0.35rem !important; padding-bottom: 0.85rem !important; } /* Explore segmented home + category index: title + compact actions on one row above map */ .cp-home-segment-head-wrap { position: relative; z-index: 121; padding-top: 0.35rem; background: inherit; } .cp-home-segment-head { padding-top: 0.5rem; margin-bottom: 0.65rem; } @media (max-width: 991.98px) { .cp-home-segment-head-wrap { padding-top: 0.25rem; } .cp-home-segment-head { padding-top: 0.35rem; margin-bottom: 0.5rem; } } .cp-category-index-band .cp-home-segment-head { padding-top: 0.35rem; margin-bottom: 0.75rem; } .cp-home-segment-head .cp-index-header { flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin-bottom: 0 !important; } .cp-home-segment-head .cp-section-title { flex: 0 1 auto; min-width: 0; font-size: var(--cp-ql-page-title-size, clamp(1.25rem, 4.8vw, 1.75rem)); line-height: 1.2; white-space: nowrap; } .cp-home-segment-head .cp-index-header__actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; } .cp-home-segment-head .cp-index-header__actions::-webkit-scrollbar { display: none; } .cp-home-segment-head .cp-index-header__actions .btn { font-size: var(--cp-ql-page-btn-font-size, 0.875rem); font-weight: 600; line-height: 1.2; padding: var(--cp-ql-page-btn-padding-y, 0.375rem) var(--cp-ql-page-btn-padding-x, 0.75rem); white-space: nowrap; flex-shrink: 0; } .cp-home-segment-head .cp-index-header__actions .btn i { font-size: var(--cp-ql-page-btn-icon-size, 0.8125rem); } /* QL pages — filter row + map toggles (desktop hero bar + mobile navbar stack) */ .cp-ql-hero-filter-bar .cp-home-hero-filter-form .form-select, .cp-ql-hero-filter-bar .cp-home-hero-filter-form .form-control, .cp-ql-hero-filter-bar .cp-home-hero-filter-form .cp-search-input, .cp-ql-hero-filter-bar .cp-home-hero-filter-form .cp-distance-filter, .cp-ql-hero-filter-bar .cp-home-hero-filter-form--extended .cp-home-hero-filter-form__extras .btn, .cp-home-mobile-filter-grid .form-select, .cp-home-mobile-filter-grid .cp-search-input { min-height: var(--cp-ql-page-filter-control-height, 3rem); height: var(--cp-ql-page-filter-control-height, 3rem); font-size: var(--cp-ql-page-filter-font-size, 1rem); } .cp-ql-hero-filter-bar .cp-home-hero-filter-form .cp-distance-filter { height: auto !important; min-height: var(--cp-ql-page-filter-control-height, 3rem); } .cp-ql-hero-filter-bar .cp-home-hero-filter-form .cp-distance-inline-label, .cp-ql-hero-filter-bar .cp-home-hero-filter-form .cp-distance-values { font-size: var(--cp-ql-page-filter-font-size, 1rem); } .cp-category-index-wrap .cp-map-template-controls .form-check-label, .cp-home-feed-wrap .cp-map-template-controls .form-check-label { font-size: var(--cp-ql-page-map-control-font-size, 1rem); } /* * Category quick access — ≥1847px inline pills; 1300–1846px second-row quick links. * Default: filled pill (--cp-cat-* bg + --cp-cat-*-font text). * Hover (not selected): transparent + accent text glow. * Selected: transparent + accent text, no glow. */ .cp-navbar-home-quick-link--event:not(.is-active):not([aria-current="page"]), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-event:not(.active) { --cp-ql-link-fg: var(--cp-cat-event-font, #ffffff); background: linear-gradient( 180deg, color-mix(in srgb, var(--cp-cat-event) 88%, #ffffff), color-mix(in srgb, var(--cp-cat-event) 72%, #1c0d02) ) !important; border-color: color-mix(in srgb, var(--cp-cat-event) 75%, transparent) !important; color: var(--cp-ql-link-fg) !important; } .cp-navbar-home-quick-link--trail:not(.is-active):not([aria-current="page"]), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-trail:not(.active) { --cp-ql-link-fg: var(--cp-cat-trail-font, #ffffff); background: linear-gradient( 180deg, color-mix(in srgb, var(--cp-cat-trail) 88%, #ffffff), color-mix(in srgb, var(--cp-cat-trail) 82%, #041208) ) !important; border-color: color-mix(in srgb, var(--cp-cat-trail) 78%, transparent) !important; color: var(--cp-ql-link-fg) !important; } .cp-navbar-home-quick-link--market:not(.is-active):not([aria-current="page"]), #cp-navbar-stack .cp-navbar-home-quick-link--market:not(.is-active):not([aria-current="page"]), #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market:not(.active) { --cp-ql-link-fg: var(--cp-cat-market-font, #ffffff); background: linear-gradient( 180deg, color-mix(in srgb, var(--cp-cat-market) 88%, #ffffff), color-mix(in srgb, var(--cp-cat-market) 76%, #240505) ) !important; border-color: color-mix(in srgb, var(--cp-cat-market) 78%, transparent) !important; color: var(--cp-ql-link-fg) !important; } .cp-navbar-home-quick-link--catalog:not(.is-active):not([aria-current="page"]), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-product:not(.active) { --cp-ql-link-fg: var(--cp-cat-product-font, #ffffff); background: linear-gradient( 180deg, color-mix(in srgb, var(--cp-cat-product) 88%, #ffffff), color-mix(in srgb, var(--cp-cat-product) 78%, #031633) ) !important; border-color: color-mix(in srgb, var(--cp-cat-product) 78%, transparent) !important; color: var(--cp-ql-link-fg) !important; } .cp-navbar-home-quick-link--track:not(.is-active):not([aria-current="page"]), #cp-navbar-stack .cp-navbar-home-quick-link--track:not(.is-active):not([aria-current="page"]), #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track:not(.active), #cp-navbar .cp-navbar-main-links .nav-link.cp-go-live-link.cp-nav-cat-track:not(.active) { --cp-ql-link-fg: var(--cp-cat-track-font, #201400); background: linear-gradient( 180deg, color-mix(in srgb, var(--cp-cat-track) 88%, #ffffff), color-mix(in srgb, var(--cp-cat-track) 42%, #3d2b00) ) !important; border-color: color-mix(in srgb, var(--cp-cat-track) 78%, transparent) !important; color: var(--cp-ql-link-fg) !important; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35); } .cp-navbar-home-quick-link--event:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--trail:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--market:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--catalog:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--track:not(.is-active):not([aria-current="page"]), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-event:not(.active), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-trail:not(.active), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market:not(.active), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-product:not(.active), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track:not(.active) { border: 1px solid rgba(255, 255, 255, 0.32) !important; box-shadow: 0 4px 12px rgba(4, 13, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .cp-navbar-home-quick-link--track:not(.is-active):not([aria-current="page"]), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track:not(.active) { text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35); } .cp-navbar-home-quick-link--event i, .cp-navbar-home-quick-link--trail i, .cp-navbar-home-quick-link--market i, .cp-navbar-home-quick-link--catalog i, .cp-navbar-home-quick-link--track i, .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-event i, .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-trail i, .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market i, .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-product i, .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track i { color: currentColor !important; } /* QL hover — opposite of filled: no background, accent text + glow (unselected only) */ .cp-navbar-home-quick-link--event:hover:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--event:focus-visible:not(.is-active):not([aria-current="page"]), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-event:hover:not(.active), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-event:focus-visible:not(.active) { color: var(--cp-cat-event) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; filter: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px color-mix(in srgb, var(--cp-cat-event) 92%, transparent), 0 0 18px color-mix(in srgb, var(--cp-cat-event) 58%, transparent), 0 0 30px color-mix(in srgb, var(--cp-cat-event) 30%, transparent) !important; } .cp-navbar-home-quick-link--trail:hover:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--trail:focus-visible:not(.is-active):not([aria-current="page"]), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-trail:hover:not(.active), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-trail:focus-visible:not(.active) { color: var(--cp-cat-trail) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; filter: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px color-mix(in srgb, var(--cp-cat-trail) 95%, transparent), 0 0 18px color-mix(in srgb, var(--cp-cat-trail) 58%, transparent), 0 0 30px color-mix(in srgb, var(--cp-cat-trail) 32%, transparent) !important; } .cp-navbar-home-quick-link--market:hover:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--market:focus-visible:not(.is-active):not([aria-current="page"]), #cp-navbar-stack .cp-navbar-home-quick-link--market:hover:not(.is-active):not([aria-current="page"]), #cp-navbar-stack .cp-navbar-home-quick-link--market:focus-visible:not(.is-active):not([aria-current="page"]), #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market:hover:not(.active), #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market:focus-visible:not(.active) { color: var(--cp-cat-market) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; filter: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px color-mix(in srgb, var(--cp-cat-market) 92%, transparent), 0 0 18px color-mix(in srgb, var(--cp-cat-market) 55%, transparent), 0 0 28px color-mix(in srgb, var(--cp-cat-market) 30%, transparent) !important; } .cp-navbar-home-quick-link--catalog:hover:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--catalog:focus-visible:not(.is-active):not([aria-current="page"]), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-product:hover:not(.active), .cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-product:focus-visible:not(.active) { color: var(--cp-cat-product) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; filter: none !important; transform: scale(1.06) !important; text-shadow: 0 0 6px color-mix(in srgb, var(--cp-cat-product) 88%, transparent), 0 0 14px color-mix(in srgb, var(--cp-cat-product) 58%, transparent), 0 0 26px color-mix(in srgb, var(--cp-cat-product) 32%, transparent), 0 1px 0 rgba(255, 255, 255, 0.35) !important; } .cp-navbar-home-quick-link--track:hover:not(.is-active):not([aria-current="page"]), .cp-navbar-home-quick-link--track:focus-visible:not(.is-active):not([aria-current="page"]), #cp-navbar-stack .cp-navbar-home-quick-link--track:hover:not(.is-active):not([aria-current="page"]), #cp-navbar-stack .cp-navbar-home-quick-link--track:focus-visible:not(.is-active):not([aria-current="page"]), #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track:hover:not(.active), #cp-navbar .cp-navbar-main-links .nav-link.cp-go-live-link:hover:not(.active), #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track:focus-visible:not(.active), #cp-navbar .cp-navbar-main-links .nav-link.cp-go-live-link:focus-visible:not(.active) { color: var(--cp-cat-track) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; filter: none !important; transform: scale(1.06) !important; text-shadow: 0 0 8px color-mix(in srgb, var(--cp-cat-track) 95%, transparent), 0 0 18px color-mix(in srgb, var(--cp-cat-track) 55%, transparent), 0 0 28px color-mix(in srgb, var(--cp-cat-track) 35%, transparent) !important; } #cp-navbar-stack .cp-navbar-home-quick-link--market.is-active i, #cp-navbar-stack .cp-navbar-home-quick-link--market[aria-current="page"] i, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market.active i, #cp-navbar-stack .cp-navbar-home-quick-link--track.is-active i, #cp-navbar-stack .cp-navbar-home-quick-link--track[aria-current="page"] i, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track.active i, #cp-navbar .cp-navbar-main-links .nav-link.cp-go-live-link.active i { color: currentColor !important; } /* QL selected — no fill, accent text + category border (no glow) */ #cp-navbar-stack .cp-navbar-home-quick-link--event.is-active, #cp-navbar-stack .cp-navbar-home-quick-link--event[aria-current="page"], #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-event.active { color: var(--cp-cat-event) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-event) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; text-shadow: none !important; font-weight: 600; } #cp-navbar-stack .cp-navbar-home-quick-link--trail.is-active, #cp-navbar-stack .cp-navbar-home-quick-link--trail[aria-current="page"], #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-trail.active { color: var(--cp-cat-trail) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-trail) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; text-shadow: none !important; font-weight: 600; } #cp-navbar-stack .cp-navbar-home-quick-link--market.is-active, #cp-navbar-stack .cp-navbar-home-quick-link--market[aria-current="page"], #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market.active { color: var(--cp-cat-market) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-market) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; text-shadow: none !important; font-weight: 600; } #cp-navbar-stack .cp-navbar-home-quick-link--catalog.is-active, #cp-navbar-stack .cp-navbar-home-quick-link--catalog[aria-current="page"], #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-product.active { color: var(--cp-cat-product) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-product) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; text-shadow: none !important; font-weight: 600; } #cp-navbar-stack .cp-navbar-home-quick-link--track.is-active, #cp-navbar-stack .cp-navbar-home-quick-link--track[aria-current="page"], #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track.active, #cp-navbar .cp-navbar-main-links .nav-link.cp-go-live-link.cp-nav-cat-track.active { color: var(--cp-cat-track) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-track) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; text-shadow: none !important; font-weight: 600; } /* Selected QL: hover/focus keeps bordered accent text — no extra glow */ #cp-navbar-stack .cp-navbar-home-quick-link--event.is-active:hover, #cp-navbar-stack .cp-navbar-home-quick-link--event.is-active:focus-visible, #cp-navbar-stack .cp-navbar-home-quick-link--event[aria-current="page"]:hover, #cp-navbar-stack .cp-navbar-home-quick-link--event[aria-current="page"]:focus-visible, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-event.active:hover, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-event.active:focus-visible { color: var(--cp-cat-event) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-event) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; text-shadow: none !important; } #cp-navbar-stack .cp-navbar-home-quick-link--trail.is-active:hover, #cp-navbar-stack .cp-navbar-home-quick-link--trail.is-active:focus-visible, #cp-navbar-stack .cp-navbar-home-quick-link--trail[aria-current="page"]:hover, #cp-navbar-stack .cp-navbar-home-quick-link--trail[aria-current="page"]:focus-visible, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-trail.active:hover, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-trail.active:focus-visible { color: var(--cp-cat-trail) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-trail) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; text-shadow: none !important; } #cp-navbar-stack .cp-navbar-home-quick-link--market.is-active:hover, #cp-navbar-stack .cp-navbar-home-quick-link--market.is-active:focus-visible, #cp-navbar-stack .cp-navbar-home-quick-link--market[aria-current="page"]:hover, #cp-navbar-stack .cp-navbar-home-quick-link--market[aria-current="page"]:focus-visible, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market.active:hover, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-market.active:focus-visible { color: var(--cp-cat-market) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-market) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; text-shadow: none !important; } #cp-navbar-stack .cp-navbar-home-quick-link--catalog.is-active:hover, #cp-navbar-stack .cp-navbar-home-quick-link--catalog.is-active:focus-visible, #cp-navbar-stack .cp-navbar-home-quick-link--catalog[aria-current="page"]:hover, #cp-navbar-stack .cp-navbar-home-quick-link--catalog[aria-current="page"]:focus-visible, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-product.active:hover, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-product.active:focus-visible { color: var(--cp-cat-product) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-product) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; text-shadow: none !important; } #cp-navbar-stack .cp-navbar-home-quick-link--track.is-active:hover, #cp-navbar-stack .cp-navbar-home-quick-link--track.is-active:focus-visible, #cp-navbar-stack .cp-navbar-home-quick-link--track[aria-current="page"]:hover, #cp-navbar-stack .cp-navbar-home-quick-link--track[aria-current="page"]:focus-visible, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track.active:hover, #cp-navbar .cp-navbar-main-links .nav-link.cp-nav-cat-track.active:focus-visible, #cp-navbar .cp-navbar-main-links .nav-link.cp-go-live-link.cp-nav-cat-track.active:hover, #cp-navbar .cp-navbar-main-links .nav-link.cp-go-live-link.cp-nav-cat-track.active:focus-visible { color: var(--cp-cat-track) !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--cp-cat-track) 88%, transparent) !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; text-shadow: none !important; } .cp-navbar-home-quick-link.is-active::after, .cp-navbar-home-quick-link[aria-current="page"]::after { content: none !important; display: none !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] #cp-navbar-stack .cp-navbar-home-quick-links, html[data-cp-nav-layout="compact"] #cp-navbar-stack .cp-navbar-home-quick-links { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: var(--cp-navbar-ql-inner-height) !important; align-items: stretch !important; justify-items: stretch !important; width: 100% !important; box-sizing: border-box !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="row"] #cp-navbar-stack a.cp-navbar-home-quick-link.btn, html[data-cp-nav-layout="compact"] #cp-navbar-stack a.cp-navbar-home-quick-link.btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: var(--cp-navbar-ql-inner-height) !important; max-height: var(--cp-navbar-ql-inner-height) !important; margin: 0 !important; flex: none !important; box-sizing: border-box !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-home-quick-links { display: none !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links > .nav-item.cp-cat-inline { flex: 0 0 auto !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-event, html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-trail, html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-market, html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-product, html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-track { width: 7rem !important; min-width: 7rem !important; max-width: 7rem !important; min-height: var(--cp-navbar-ql-inner-height) !important; height: var(--cp-navbar-ql-inner-height) !important; max-height: var(--cp-navbar-ql-inner-height) !important; padding: 0 calc(0.4rem * var(--cp-navbar-density-scale)) !important; font-size: var(--cp-navbar-ql-font-size) !important; flex: 0 0 auto !important; flex-shrink: 0 !important; justify-content: center !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box !important; } html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-event i, html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-trail i, html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-market i, html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-product i, html[data-cp-nav-layout="desktop"][data-cp-nav-cat-mode="inline"] #cp-navbar-stack .cp-navbar-main-links .nav-link.cp-nav-cat-track i { font-size: var(--cp-navbar-ql-icon-size) !important; } /* ── Location field row (Events / Trails create & edit) ── */ .cp-loc-field-row { flex-wrap: nowrap; min-width: 0; } .cp-loc-field-group { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; gap: 0.45rem; } .cp-loc-field-group > .input-group-text { flex-shrink: 0; border-radius: var(--bs-border-radius, 0.25rem); } .cp-loc-field-group > .form-control { border-radius: var(--bs-border-radius, 0.25rem); } .cp-loc-coord-pair { flex: 0 0 auto; flex-wrap: nowrap; width: auto; } .cp-loc-coord-pair .cp-loc-coord-input { border-radius: 0; } .cp-loc-coord-pair .cp-loc-coord-input:first-child { border-top-left-radius: var(--bs-border-radius, 0.25rem); border-bottom-left-radius: var(--bs-border-radius, 0.25rem); } .cp-loc-coord-pair .cp-loc-coord-input:last-child { border-top-right-radius: var(--bs-border-radius, 0.25rem); border-bottom-right-radius: var(--bs-border-radius, 0.25rem); } .cp-loc-field-row .cp-loc-field-lookup-btn { flex-shrink: 0; } .cp-loc-field-zoom-wrap { flex-shrink: 0; } .cp-loc-field-zoom-wrap .form-label { white-space: nowrap; } .cp-loc-map-zoom-level, .cp-event-map-zoom-level { flex: 0 0 auto; width: calc(3ch + 1.35rem); min-width: calc(3ch + 1.35rem); max-width: calc(3ch + 1.35rem); padding-left: 0.35rem; padding-right: 0.35rem; text-align: center; overflow: hidden; text-overflow: ellipsis; } .cp-loc-coord-input { flex: 0 0 auto; width: 10ch; max-width: 10ch; min-width: 10ch; padding-left: 0.4rem; padding-right: 0.4rem; overflow: hidden; text-overflow: ellipsis; } .cp-loc-coord-meta-city { flex: 1 1 0; min-width: 4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-loc-coord-meta-state { flex: 0 0 auto; width: calc(2ch + 1.35rem); min-width: calc(2ch + 1.35rem); max-width: calc(2ch + 1.35rem); padding-left: 0.35rem; padding-right: 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .cp-loc-coord-meta-country { flex: 0 0 auto; width: calc(5ch + 1.35rem); min-width: calc(5ch + 1.35rem); max-width: calc(5ch + 1.35rem); padding-left: 0.35rem; padding-right: 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .cp-loc-mode-address, .cp-loc-mode-business { flex: 1 1 0; min-width: 0; } @media (max-width: 991.98px) { .cp-loc-field-row { flex-wrap: wrap; } } /* Arrange Meetup modal — map + safe location list */ .cp-meetup-modal { --cp-meetup-pane-height: min(28vh, 260px); } .cp-meetup-modal .modal-dialog.cp-meetup-modal__dialog { width: min(1400px, 96vw); max-width: min(1400px, 96vw); max-height: calc(100dvh - 1rem); height: calc(100dvh - 1rem); margin: 0.5rem auto; } .cp-meetup-modal .modal-content { height: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; } .cp-meetup-modal .modal-header, .cp-meetup-modal .cp-meetup-modal__footer { flex: 0 0 auto; } .cp-meetup-modal .cp-meetup-modal__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .cp-meetup-modal .cp-meetup-form { min-height: 0; } .cp-meetup-modal .cp-meetup-layout { min-height: 0; } .cp-meetup-modal .cp-meetup-map-wrap { min-height: var(--cp-meetup-pane-height); max-height: var(--cp-meetup-pane-height); background: #eef2f7; } .cp-meetup-modal .cp-meetup-map { width: 100%; min-height: var(--cp-meetup-pane-height); max-height: var(--cp-meetup-pane-height); height: var(--cp-meetup-pane-height); } .cp-meetup-modal .cp-meetup-map--loading { opacity: 0.45; pointer-events: none; } .cp-meetup-modal .cp-meetup-map-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.82); font-size: 0.95rem; font-weight: 600; } .cp-meetup-modal .cp-meetup-list-shell { background: #fff; min-height: var(--cp-meetup-pane-height); max-height: var(--cp-meetup-pane-height); display: flex; flex-direction: column; } .cp-meetup-modal .cp-meetup-list-header { background: rgba(59, 113, 202, 0.08); flex: 0 0 auto; } .cp-meetup-modal .cp-meetup-location-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; } .cp-meetup-modal .cp-meetup-location-item { border-left: 0; border-right: 0; cursor: pointer; } .cp-meetup-modal .cp-meetup-location-item.active, .cp-meetup-modal .cp-meetup-location-item:active { background: rgba(59, 113, 202, 0.12); border-color: rgba(59, 113, 202, 0.25); color: inherit; } .cp-meetup-modal .cp-meetup-selected-shell { background: rgba(59, 113, 202, 0.06); border: 1px solid rgba(59, 113, 202, 0.18); } .cp-meetup-modal .cp-meetup-empty { padding: 1rem; color: #5c6778; } .cp-meetup-modal.modal .cp-meetup-modal__body { padding-top: 1rem; padding-bottom: 1rem; } .cp-meetup-modal .cp-meetup-modal__footer { border-top: 1px solid rgba(0, 0, 0, 0.08); background: inherit; position: sticky; bottom: 0; z-index: 2; } @media (max-width: 1199.98px) { .cp-meetup-modal { --cp-meetup-pane-height: min(24vh, 220px); } } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-modal__footer, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-modal__footer { border-top-color: rgba(255, 255, 255, 0.12); } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-map-wrap, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-map-wrap { background: #0f1b2d; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-list-shell, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-list-shell { background: #152238; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-list-header, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-list-header { background: rgba(59, 113, 202, 0.18); border-color: rgba(255, 255, 255, 0.1) !important; color: #e8eef8; } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-location-item, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-location-item { background: transparent; color: #e8eef8; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-location-item .text-muted, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-location-item .text-muted { color: #b8c4d6 !important; } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-location-item.active, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-location-item.active { background: rgba(59, 113, 202, 0.28); color: #fff; } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-selected-shell, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-selected-shell { background: rgba(59, 113, 202, 0.14); border-color: rgba(255, 255, 255, 0.12); color: #e8eef8; } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-map-loading, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-map-loading { background: rgba(15, 27, 45, 0.88); color: #e8eef8; } html[data-cp-theme="dark"] .cp-meetup-modal .cp-meetup-empty, html[data-mdb-theme="dark"] .cp-meetup-modal .cp-meetup-empty { color: #b8c4d6; } @media (max-width: 991.98px) { .cp-meetup-modal { --cp-meetup-pane-height: min(22vh, 200px); } } @keyframes cp-meetup-marker-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .cp-meetup-marker-bounce { animation: cp-meetup-marker-bounce 0.55s ease-in-out 2; } /* ── Identity avatar choice (register + edit profile) ── */ .cp-avatar-identity .cp-avatar-mode-tabs .btn { flex: 1 1 0; } .cp-avatar-chip-preview__chip { max-width: 100%; pointer-events: none; } .cp-avatar-chip-preview__chip .cp-chip__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cp-avatar-generated-preview { width: 76px; height: 76px; object-fit: cover; border: 2px solid rgba(13, 110, 253, 0.35); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } #section-photos .cp-avatar-presets { display: grid; grid-template-columns: repeat(auto-fill, 76px); grid-auto-rows: 76px; gap: 0.35rem; width: 100%; max-width: none; justify-content: center; } #section-photos .cp-avatar-preset { width: 76px; height: 76px; max-width: 76px; flex-shrink: 0; aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; border: 2px solid transparent; overflow: hidden; position: relative; display: flex; align-items: stretch; background: #e8edf3; } html[data-cp-theme="dark"] #section-photos .cp-avatar-preset, html[data-mdb-theme="dark"] #section-photos .cp-avatar-preset { background: #2a3342; } #section-photos .cp-avatar-preset img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; font-size: 0; color: transparent; } #section-photos .cp-avatar-preset.active, #section-photos .cp-avatar-preset:focus-visible { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2); } #section-photos .cp-avatar-preset-spacer { visibility: hidden; pointer-events: none; width: 76px; height: 76px; box-sizing: border-box; } .cp-avatar-style-filters .btn.active { font-weight: 600; } .cp-avatar-presets[data-cp-illustration-grid] { max-height: 420px; overflow-y: auto; padding-right: 0.25rem; } html[data-cp-theme="dark"] .cp-avatar-generated-preview, html[data-mdb-theme="dark"] .cp-avatar-generated-preview { border-color: rgba(110, 168, 254, 0.45); } /* Phone input — country code select + masked national field */ .cp-phone-input .cp-phone-input__dial { flex: 0 0 auto; width: auto; min-width: 5.25rem; max-width: 6.5rem; } .cp-phone-input .cp-phone-input__national { min-width: 0; } html[data-cp-theme="dark"] .cp-phone-input .cp-phone-input__dial, html[data-mdb-theme="dark"] .cp-phone-input .cp-phone-input__dial { color: var(--bs-body-color); background-color: #3a3a3a; border: 0 !important; } /* Social platform — circular brand icons (register / profile social links) */ .cp-social-platform-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; border: none; padding: 0; color: #fff; font-size: 1.05rem; line-height: 1; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .cp-social-platform-icon i { pointer-events: none; } .cp-social-platform-icon--unset { background: #6c757d; color: #fff; } .cp-social-platform-icon--facebook { background: #1877f2; } .cp-social-platform-icon--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .cp-social-platform-icon--x { background: #000; } .cp-social-platform-icon--youtube { background: #ff0000; } .cp-social-platform-icon--linkedin { background: #0a66c2; } .cp-social-platform-icon--tiktok { background: #010101; } .cp-social-platform-icon--twitch { background: #9146ff; } .cp-social-platform-icon--pinterest { background: #e60023; } .cp-social-platform-icon--threads { background: #000; } .cp-social-platform-icon--snapchat { background: #fffc00; color: #000; } .cp-social-platform-icon--custom { background: #6c757d; color: #fff; } .cp-social-link-input-group { flex-wrap: nowrap; align-items: center; gap: 0.5rem; border: none; } /* Platform picker + remove: no box border; URL field gets 3D tray in Optional User Info below */ .cp-social-links .cp-social-link-input-group .cp-social-platform-toggle, .cp-social-links .cp-social-link-input-group .cp-social-link-remove { border: 0 !important; border-color: transparent !important; } /* Optional User Info — no DOB separator */ #section-optional-user-info .cp-optional-user-dob-row { border-bottom: 0 !important; padding-bottom: 0 !important; } #section-optional-user-info .cp-optional-user-social { border: 0; padding: 0; background: transparent; } /* Social platform icons — raised 3D beside recessed URL fields */ .cp-social-links .cp-social-platform-icon { box-shadow: var(--3d-raise-dark); } [data-cp-theme="light"] .cp-social-links .cp-social-platform-icon, [data-mdb-theme="light"] .cp-social-links .cp-social-platform-icon { box-shadow: var(--3d-raise-light); } .cp-social-links .cp-social-link-input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: 0; } .cp-social-links .cp-social-link-input-group .cp-social-platform-toggle.is-invalid { outline: 2px solid var(--bs-danger); outline-offset: 2px; } .cp-social-links .cp-social-link-remove { color: var(--bs-secondary); background: transparent; padding-inline: 0.5rem; } .cp-social-links .cp-social-link-remove:hover, .cp-social-links .cp-social-link-remove:focus-visible { color: var(--bs-danger); background: transparent; } .cp-social-platform-picker { position: static; width: fit-content; max-width: none; flex: 0 0 auto; } .cp-social-platform-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 2.375rem; height: 2.375rem; min-height: 2.375rem; border: none; background: transparent; box-shadow: none; color: inherit; } .cp-social-platform-toggle::after { display: none; } .cp-social-platform-toggle:focus, .cp-social-platform-toggle:focus-visible { outline: none; box-shadow: none; border-radius: 50%; } .cp-social-platform-toggle:focus-visible .cp-social-platform-icon { outline: 2px solid rgba(13, 110, 253, 0.55); outline-offset: 2px; } .cp-social-platform-menu { width: max-content; min-width: 0; padding: 0.65rem 0.75rem; border-radius: 0.65rem; border: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .cp-social-platform-menu__grid { display: flex; flex-wrap: wrap; gap: 0.55rem; max-width: 16.5rem; } .cp-social-platform-option { cursor: pointer; } .cp-social-platform-option:hover, .cp-social-platform-option:focus-visible { transform: scale(1.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); outline: none; } .cp-social-platform-option.active { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); opacity: 1; } .cp-social-platform-option:not(.active) { opacity: 0.88; } .cp-social-link-input-group .cp-social-link-url { flex: 1 1 auto; min-width: 0; height: 2.375rem; min-height: 2.375rem; } .cp-social-link-input-group .cp-social-link-remove { height: 2.375rem; min-height: 2.375rem; display: inline-flex; align-items: center; justify-content: center; } html[data-cp-theme="dark"] .cp-social-platform-menu, html[data-mdb-theme="dark"] .cp-social-platform-menu { background-color: var(--bs-body-bg); border: 0; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); } /* Business card preview — social tiles with circular brand badges */ .cp-bc__social-tile__badge { width: 2rem; height: 2rem; font-size: 0.95rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 4px rgba(0, 0, 0, 0.35); } .cp-bc__social-tile:hover .cp-bc__social-tile__badge { transform: scale(1.06); } /* Register / edit profile preview — keep icon + handle; handle must stay one line */ .cp-register-public-card-preview .cp-bc__social-list--preview, .cp-register-sticky-business-card .cp-bc__social-list--preview { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .cp-register-public-card-preview .cp-bc__social-list--preview .cp-bc__social-tile, .cp-register-sticky-business-card .cp-bc__social-list--preview .cp-bc__social-tile { flex: 0 0 auto; } .cp-register-public-card-preview .cp-bc__social-list--preview .cp-bc__social-tile__handle, .cp-register-sticky-business-card .cp-bc__social-list--preview .cp-bc__social-tile__handle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 5.75rem; line-height: 1.15; } /* On-map "Show my location" button (shared Google Maps custom control) */ .cp-map-locate-btn-wrap { margin: 0 10px 22px 0; } .cp-map-locate-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: #ffffff; color: #1f2f45; border: none; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .cp-map-locate-btn:hover { background: #f1f5f9; } .cp-map-locate-btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; } .cp-map-locate-btn.is-active { background: #e53935; color: #ffffff; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.45); } [data-cp-theme="dark"] .cp-map-locate-btn, [data-mdb-theme="dark"] .cp-map-locate-btn { background: #1e293b; color: #e2e8f0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); } [data-cp-theme="dark"] .cp-map-locate-btn:hover, [data-mdb-theme="dark"] .cp-map-locate-btn:hover { background: #243348; } [data-cp-theme="dark"] .cp-map-locate-btn.is-active, [data-mdb-theme="dark"] .cp-map-locate-btn.is-active { background: #e53935; color: #ffffff; } /* QL feed: hide unscoped first paint until map viewport refresh completes */ .cp-ql-feed-region--pending { pointer-events: none; } .cp-ql-feed-region--pending [data-cp-ql-feed-grid], .cp-ql-feed-region--pending .cp-ql-pagination, .cp-ql-feed-region--pending .cp-ql-feed-empty { visibility: hidden; }