/* ============================================================ 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: 9999 !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; } .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; } .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; } .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; backdrop-filter: blur(4px); -webkit-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; backdrop-filter: blur(6px); -webkit-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-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; } @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: 1400px; --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); } /* ---- 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), [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; } 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); overflow: hidden; } [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: hidden; } [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: 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-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 — editable: blue border; readonly/disabled: grey */ .form-control:not([readonly]):not([disabled]), .form-select:not([disabled]), textarea:not([readonly]):not([disabled]) { border-color: rgba(59, 113, 202, 0.42) !important; } .form-control:not([readonly]):not([disabled]):focus, .form-select:not([disabled]):focus, textarea:not([readonly]):not([disabled]):focus { border-color: #3b71ca !important; box-shadow: 0 0 0 .2rem rgba(59, 113, 202, .22) !important; } .form-control[readonly], .form-control:disabled, .form-select:disabled, textarea[readonly], textarea:disabled { border-color: #d4d9de !important; background-color: #f5f6f7 !important; color: #6c757d !important; opacity: 1 !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 { border-color: rgba(255,255,255,.13) !important; background-color: #2e2e2e !important; color: #777 !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]) { background-color: #3a3a3a !important; color: #e0e0e0 !important; border-color: rgba(59, 113, 202, 0.5) !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 { background-color: #3a3a3a !important; color: #fff !important; border-color: #3b71ca !important; box-shadow: 0 0 0 .2rem rgba(59,113,202,.28) !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; backdrop-filter: blur(22px); -webkit-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); backdrop-filter: blur(6px); -webkit-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; 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; } @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; -webkit-overflow-scrolling: touch; } .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; } /* .cp-main { flex: 1 0 auto; padding-top: 62px; padding-top: var(--cp-navbar-visible-height, var(--cp-navbar-height, 62px)); } */ body.cp-glass-embed { background: transparent !important; } /* body.cp-glass-embed .cp-main { padding-top: 0 !important; } */ 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 { 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-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, 1400px); margin-left: auto; margin-right: auto; padding-left: var(--cp-page-gutter, clamp(14px, 1.8vw, 26px)); padding-right: var(--cp-page-gutter, clamp(14px, 1.8vw, 26px)); } @media (min-width: 1400px) { :root { --cp-page-max-width: 100%; --cp-page-gutter: clamp(8px, 0.75vw, 16px); } } @media (min-width: 1600px) { :root { --cp-card-grid-gap: clamp(1rem, 1.1vw, 1.5rem); } } /* ---- Navbar ---- */ .cp-navbar { overflow: visible; backdrop-filter: blur(8px); -webkit-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 { 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::after, .cp-navbar .nav-link.cp-navbar-user-toggle:focus-visible::after, .cp-navbar .nav-link.cp-navbar-user-toggle.show::after { border-top-color: #0d6efd !important; } .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: #fff !important; background: linear-gradient(170deg, #ff8c2a 0%, #e96b00 100%) !important; border-color: #c45a00 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px rgba(253,126,20,.5), 0 1px 3px rgba(0,0,0,.3) !important; } .cp-navbar .nav-link.cp-nav-cat-trail.active { color: #fff !important; background: linear-gradient(170deg, #1faa65 0%, #146c41 100%) !important; border-color: #0f5230 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px rgba(25,135,84,.5), 0 1px 3px rgba(0,0,0,.3) !important; } /* #cp-navbar: win over Bootstrap .navbar-nav .nav-link.active; color-mix ties pill to --cp-cat-track */ #cp-navbar .nav-link.cp-nav-cat-track.active { color: #1a1000 !important; background: linear-gradient( 170deg, color-mix(in srgb, var(--cp-cat-track) 78%, #ffffff) 0%, color-mix(in srgb, var(--cp-cat-track) 68%, #4a3700) 100% ) !important; border-color: color-mix(in srgb, var(--cp-cat-track) 52%, #2f2300) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 10px rgba(255, 193, 7, 0.48), 0 1px 3px rgba(0, 0, 0, .26) !important; } .cp-navbar .nav-link.cp-nav-cat-product.active { color: #fff !important; background: linear-gradient(170deg, #3d8bfd 0%, #0a55d2 100%) !important; border-color: #083fa0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(13,110,253,.5), 0 1px 3px rgba(0,0,0,.3) !important; } .cp-navbar .nav-link.cp-nav-cat-compare.active { color: #fff !important; background: linear-gradient(170deg, #5a6370 0%, #383f47 100%) !important; border-color: #252b31 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(63,70,80,.45), 0 1px 3px rgba(0,0,0,.35) !important; } #cp-navbar .nav-link.cp-nav-cat-market.active { color: #fff !important; background: linear-gradient( 170deg, color-mix(in srgb, var(--cp-cat-market) 82%, #ffffff) 0%, color-mix(in srgb, var(--cp-cat-market) 58%, #3f0a0a) 100% ) !important; border-color: color-mix(in srgb, var(--cp-cat-market) 48%, #1a0404) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px rgba(220, 38, 38, .52), 0 1px 3px rgba(0, 0, 0, .3) !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); } } /* Home quick-link row (992–1679px) — primary Live control on most desktops */ .cp-navbar-home-quick-link--track.cp-track-nav-indicator--public { color: #fff !important; background: linear-gradient(180deg, #f87171 0%, #dc2626 48%, #b91c1c 100%) !important; border-color: rgba(127, 29, 29, 0.85) !important; animation: cp-track-live-pulse-public 3.5s ease-in-out infinite !important; } .cp-navbar-home-quick-link--track.cp-track-nav-indicator--custom { color: #fff !important; background: linear-gradient(180deg, #4ade80 0%, #22c55e 48%, #15803d 100%) !important; border-color: rgba(21, 128, 61, 0.85) !important; animation: cp-track-live-pulse-custom 3.5s ease-in-out infinite !important; } /* Main nav Live link (≥1680px) */ #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--public.active { color: #fff !important; background: linear-gradient(165deg, #f87171 0%, #dc2626 45%, #b91c1c 100%) !important; border-color: rgba(127, 29, 29, 0.65) !important; 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, #cp-navbar .nav-link.cp-go-live-link.cp-track-nav-indicator--custom.active { color: #fff !important; background: linear-gradient(165deg, #4ade80 0%, #22c55e 45%, #15803d 100%) !important; border-color: rgba(21, 128, 61, 0.75) !important; 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-stats { pointer-events: none; display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 1rem; 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-stat { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; font-weight: 600; letter-spacing: .02em; background: none; border: 0; padding: 0; box-shadow: none; } .cp-navbar-stat__value { font-size: inherit; font-weight: inherit; line-height: 1; } .cp-navbar-stat--users { color: #5b8ff9; } .cp-navbar-stat--posts { color: #3aba7a; } .cp-navbar-stat i { font-size: .875rem; line-height: 1; width: 1em; text-align: center; } [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 { padding-left: .55em; padding-right: .55em; } /* =================================================== 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 { transition: box-shadow .12s, transform .1s, filter .1s; border-radius: 8px !important; } .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 ---- */ /* ===== Mobile navbar & layout (≤ 991.98px) ===== */ @media (max-width: 991.98px) { 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; backface-visibility: hidden; -webkit-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: 991.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 — flush with navbar bottom ---- */ .cp-navbar .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0; padding: .75rem 1rem 1.1rem; 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); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: none; } [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 .navbar-nav .nav-link { padding: .6rem .2rem; border-bottom: 1px solid rgba(128,128,128,.18); } .cp-navbar .navbar-nav .nav-item:last-child .nav-link { border-bottom: 0; } .cp-navbar .cp-search-group { max-width: 100%; width: 100%; } /* ---- Page layout ---- */ .cp-main { padding-top: var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)); /* dynamic — set by JS */ } /* 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; } /* 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%; } /* 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; height: 2rem; padding: 0 .55rem; font-size: .78rem; line-height: 2rem; 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: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; } /* ---- 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; } /* 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; } [data-cp-theme="dark"], [data-mdb-theme="dark"] { --cp-cat-compare: #e9ecef; } .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: #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: #fff; } .cp-btn-cat-track { border-color: var(--cp-cat-track); color: #8a6600; } .cp-btn-cat-track:hover, .cp-btn-cat-track:focus { background: var(--cp-cat-track); color: #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: #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: #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: #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: color-mix(in srgb, var(--cp-cat-event) 62%, #000000); color: #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: #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: color-mix(in srgb, var(--cp-cat-trail) 72%, #000000); color: #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: #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: color-mix(in srgb, var(--cp-cat-track) 32%, #2a1d00); color: #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: #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: color-mix(in srgb, var(--cp-cat-product) 68%, #000814); color: #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: #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: color-mix(in srgb, var(--cp-cat-compare) 78%, #000000); color: #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: #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: color-mix(in srgb, var(--cp-cat-market) 66%, #000000); color: #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: #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: 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: 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: 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: 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: 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: #fff !important; } .cp-badge-trail { background-color: var(--cp-cat-trail) !important; color: #fff !important; } .cp-badge-track { background-color: var(--cp-cat-track) !important; color: #222 !important; } .cp-badge-product { background-color: var(--cp-cat-product) !important; color: #fff !important; } .cp-badge-compare { background-color: var(--cp-cat-compare) !important; color: #fff !important; } [data-cp-theme="dark"] .cp-badge-compare, [data-mdb-theme="dark"] .cp-badge-compare { color: #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); } /* 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) !important; } .cp-card-title--trail { color: var(--cp-cat-trail) !important; } .cp-card-title--track { color: #9a6a00 !important; } .cp-card-title--product { color: var(--cp-cat-product) !important; } .cp-card-title--compare { color: var(--cp-cat-compare) !important; } .cp-card-title--market { color: 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(171, 101, 55, 0.18) !important; outline: 2.5px solid rgba(171, 101, 55, 0.52) !important; } .cp-card--trail:hover, .cp-card--trail.cp-card--active { box-shadow: 0 12px 36px rgba(25, 135, 84, 0.30) !important; outline: 2.5px solid rgba(25, 135, 84, 0.76) !important; } .cp-card--track:hover, .cp-card--track.cp-card--active { box-shadow: 0 12px 36px rgba(255, 193, 7, 0.34) !important; outline: 2.5px solid rgba(224, 168, 0, 0.88) !important; } .cp-card--product:hover, .cp-card--product.cp-card--active { box-shadow: 0 12px 36px rgba(13, 110, 253, 0.30) !important; outline: 2.5px solid rgba(13, 110, 253, 0.76) !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(220, 38, 38, 0.28) !important; outline: 2.5px solid rgba(220, 38, 38, 0.72) !important; } .cp-card--compare:hover, .cp-card--compare.cp-card--active { box-shadow: 0 12px 36px rgba(63, 70, 80, 0.34) !important; outline: 2.5px solid rgba(63, 70, 80, 0.80) !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(233, 236, 239, 0.28) !important; outline-color: rgba(233, 236, 239, 0.85) !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; } .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 { 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; line-clamp: 2; -webkit-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 { border-width: 2.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: .35rem; 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-chip-accent: rgba(167, 139, 250, 0.82); --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: center; justify-content: flex-start; gap: .2rem; box-sizing: border-box; vertical-align: middle; min-height: 1.28rem; padding: .38rem .5rem .38rem 2.26rem; height: auto; line-height: 1.15; border: 1.5px solid var(--cp-chip-accent) !important; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 42%), linear-gradient(165deg, var(--cp-chip-bg), rgba(10, 18, 34, .58)) !important; color: var(--cp-chip-text) !important; /* Layered: top sheen, inner bevel, hard “lip”, soft ambient */ box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset, 0 3px 6px rgba(255, 255, 255, .06) inset, 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: .38rem .5rem .38rem 2.26rem; min-height: 1.28rem; line-height: 1.15; } 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; gap: .4rem; min-width: 0; 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: 1.1rem; min-width: 1.1rem; margin-right: 0; font-size: .78rem; color: var(--cp-chip-icon) !important; text-shadow: 0 1px 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: .94rem; font-weight: 800; letter-spacing: -0.01em; color: var(--cp-chip-content) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); transition: color .16s ease, text-shadow .16s ease; } /* Avatar overlaps pill — fixed proportion to pill height everywhere */ .cp-user-chip .cp-chip__avatar, .cp-user-chip .cp-chip__avatar-fallback { position: absolute; left: -0.56rem; top: 50%; width: 2.52rem; height: 2.52rem; transform: translateY(-50%); border: 1.5px solid var(--cp-chip-accent); box-shadow: 0 2px 0 rgba(255, 255, 255, .22) inset, 0 -2px 4px rgba(0, 0, 0, .28) inset, 0 3px 0 rgba(0, 0, 0, .35), 0 4px 0 rgba(0, 0, 0, .12), 0 10px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .2); } /* Initials disc — match dark chip family (not generic MDB blue) */ .cp-user-chip .cp-chip__avatar-fallback { background: linear-gradient(160deg, #2f2844 0%, #16101e 100%) !important; color: #f5f3ff !important; font-size: 0.78rem; } .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 1px 0 rgba(255, 255, 255, .38) inset, 0 3px 8px rgba(255, 255, 255, .08) inset, 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 1px 0 rgba(255, 255, 255, .38) inset, 0 3px 8px rgba(255, 255, 255, .08) inset, 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 ---- */ .cp-card .card-img-top { height: 200px; object-fit: cover; } /* ---- 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); backdrop-filter: blur(14px); -webkit-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); 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; -webkit-overflow-scrolling: touch; } /* 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; -webkit-overflow-scrolling: touch; 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) — high contrast, readable type, 3D ── */ /* Aspect ratio (3.5×2): see component .cp-public-card--details.cp-public-card--plain-contact */ .cp-public-card--plain-contact { 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, [data-mdb-theme="light"] .cp-public-card--plain-contact { 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-topbar { 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-topbar, [data-mdb-theme="light"] .cp-public-card--plain-contact .cp-profile-topbar { 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-topbar--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-topbar--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-topbar { 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-topbar, [data-mdb-theme="light"] .cp-dm-profile-slot .cp-public-card--plain-contact .cp-profile-topbar { 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; line-clamp: 3; -webkit-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); backdrop-filter: blur(10px) saturate(140%); -webkit-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); } /* ── 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; } .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; 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; min-height: 0; flex: 1 1 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: 3.5 / 2; max-height: none !important; min-height: 0 !important; overflow-y: auto !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: same width and same aspect ratio as media → pixel height matches image area */ .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: 1 1 auto !important; min-height: 0; max-height: 24rem; padding: 1rem 1.1rem 1rem !important; overflow: hidden; 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: 11rem; overflow-y: auto; } .cp-map-slot-ad-card[data-cp-ad-card] .cp-map-slot-ad-card__links { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .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; } [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, .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 { overflow: visible !important; } /* Mobile explore: community + search row fixed in navbar stack under quick links */ @media (max-width: 991.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: 992px) { .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: #0f1b2d; } .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 { /* Match post-card column width (max 360px) and centering in .cp-card-grid */ width: min(calc(100% - (2 * var(--cp-home-feed-gutter))), var(--cp-card-max-width, 360px)); max-width: min(calc(100% - (2 * var(--cp-home-feed-gutter))), var(--cp-card-max-width, 360px)); margin-left: auto !important; margin-right: auto !important; 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; padding: 0 !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-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: 0 !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; } .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] { 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-home-feed-wrap > .cp-map-template-shell--home-feed[data-cp-map-template] { z-index: 120; } @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; } } @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); } } /* Mobile single ad slot (Scenario 2 — hides L/R on small screens) */ .cp-map-ad--mobile { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; gap: 0.5rem; padding: .5rem .75rem; border: 1px dashed rgba(128, 128, 128, .35); border-radius: .6rem; background: rgba(248, 249, 250, .6); overflow: hidden; min-height: 80px; min-width: min(100%, var(--cp-map-ad-min-width)); width: min(100%, var(--cp-map-ad-max-width)); max-width: var(--cp-map-ad-max-width); margin-inline: auto; box-sizing: border-box; } .cp-map-ad--mobile > * { min-width: 0; max-width: 100%; } [data-cp-theme="dark"] .cp-map-ad--mobile, [data-mdb-theme="dark"] .cp-map-ad--mobile { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .15); } @media (max-width: 767.98px) { [data-cp-map-template] > .row { min-width: 0; } .cp-map-ad--mobile:has(> .cp-business-card), .cp-map-ad--mobile:has(> .cp-card), .cp-map-ad--mobile:has(> .cp-ad-card-root) { width: min(100%, var(--cp-map-ad-max-width)); min-width: min(100%, var(--cp-map-ad-min-width)); height: 500px !important; max-height: 500px !important; padding: 0; overflow: hidden; } .cp-map-ad--mobile > .cp-business-card, .cp-map-ad--mobile > .cp-card, .cp-map-ad--mobile > .cp-ad-card-root { width: 100%; height: 500px; max-height: 500px; min-height: 0; } .cp-map-ad--mobile .cp-business-card__shell, .cp-map-ad--mobile .cp-map-slot-ad-card, .cp-map-ad--mobile .cp-map-slot-ad-card__shell { height: 500px !important; max-height: 500px; min-height: 0; } .cp-map-ad--mobile .cp-business-card__hero-wrap, .cp-map-ad--mobile .cp-map-slot-ad-card__media, .cp-map-ad--mobile .cp-card .cp-card-img-wrap { flex: 0 0 211px !important; height: 211px !important; max-height: 211px !important; aspect-ratio: auto !important; min-height: 0 !important; } .cp-map-ad--mobile .cp-business-card__hero-wrap .card-img-top, .cp-map-ad--mobile .cp-business-card__hero-placeholder, .cp-map-ad--mobile .cp-map-slot-ad-card__media .cp-map-ad__img, .cp-map-ad--mobile .cp-card .cp-card-img-wrap .card-img-top { height: 211px !important; max-height: 211px !important; object-fit: cover; } .cp-map-ad--mobile .cp-business-card__body, .cp-map-ad--mobile .cp-card .card-body { flex: 0 0 211px !important; height: 211px !important; max-height: 211px !important; min-height: 0 !important; overflow-y: auto; } .cp-map-ad--mobile .cp-map-slot-ad-card__body { flex: 0 0 211px !important; height: 211px !important; max-height: 211px !important; min-height: 0 !important; aspect-ratio: auto; overflow-y: auto !important; } .cp-map-ad--mobile .cp-map-slot-ad-card__extras, .cp-map-ad--mobile .cp-map-slot-ad-card__links { max-height: 211px; overflow-y: auto; } .cp-map-ad--mobile .cp-business-card__footer, .cp-map-ad--mobile .cp-map-slot-ad-card__actions { flex: 0 0 var(--cp-map-ad-action-height) !important; height: var(--cp-map-ad-action-height) !important; max-height: var(--cp-map-ad-action-height) !important; min-height: var(--cp-map-ad-action-height) !important; } .cp-map-ad--mobile .cp-map-slot-ad-card__actions { margin-top: auto !important; padding-top: .5rem !important; padding-bottom: .5rem !important; } } /* Inside the mobile slot: constrain business-card header height */ .cp-map-ad--mobile .cp-business-card-header { min-height: 90px !important; max-height: 120px !important; } /* Inside the mobile slot: smaller text */ .cp-map-ad--mobile .cp-business-card__name { font-size: .85rem; } .cp-map-ad--mobile .cp-business-card__meta { font-size: .75rem; } [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%; height: auto; 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; } .cp-card .cp-card-img-wrap .card-img-top { height: 100% !important; width: 100%; object-fit: cover; 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 .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 .card-img-top { height: 100% !important; min-height: 0; } .cp-card .cp-card-img-type-badge { position: absolute; top: 0.55rem; left: 0.55rem; z-index: 4; pointer-events: none; backdrop-filter: blur(4px); -webkit-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; backdrop-filter: blur(6px); -webkit-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 .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; } } .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; appearance: none; -webkit-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; 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; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); line-height: 1.4; } /* ── Card select zone ───────────────────────────────────────────────────── */ .cp-card-select-zone { cursor: default; 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; } /* ── Photo lightbox modal ───────────────────────────────────────────────── */ .cp-lightbox-content { background: rgba(10, 10, 12, .90) !important; backdrop-filter: blur(26px); -webkit-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); backdrop-filter: blur(14px); -webkit-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; } /* ══════════════════════════════════════════════════════════════════════════ 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; } /* ─── 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; } /* ─── 2. FORM CONTROLS (input, textarea, select) ────────────────────────── */ .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) { box-shadow: inset 0 2px 4px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.06) !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) { box-shadow: inset 0 2px 4px rgba(18,45,73,.12), inset 0 -1px 0 rgba(255,255,255,.8) !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 { box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 .2rem rgba(59,113,202,.3), inset 0 -1px 0 rgba(255,255,255,.06) !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 { box-shadow: inset 0 2px 4px rgba(18,45,73,.1), 0 0 0 .2rem rgba(59,113,202,.22), inset 0 -1px 0 rgba(255,255,255,.8) !important; } /* 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; } [data-cp-theme="dark"] .table > thead > tr > th { background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important; box-shadow: inset 0 -2px 0 rgba(59,113,202,.35) !important; } [data-cp-theme="light"] .table > thead > tr > th { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(230,238,255,.7) 100%) !important; box-shadow: inset 0 -2px 0 rgba(59,113,202,.3) !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 ─────────────────────────────────────── */ [data-cp-theme="dark"] .cp-home-section, [data-cp-theme="dark"] .cp-form-shell, [data-cp-theme="dark"] .cp-control-panel, [data-cp-theme="dark"] .cp-filter-shell { box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05) !important; } [data-cp-theme="light"] .cp-home-section, [data-cp-theme="light"] .cp-form-shell, [data-cp-theme="light"] .cp-control-panel, [data-cp-theme="light"] .cp-filter-shell { box-shadow: 0 3px 12px rgba(18,45,73,.12), inset 0 1px 0 rgba(255,255,255,.95) !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 { box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important; } [data-cp-theme="light"] .cp-map-template-controls { box-shadow: 0 4px 14px rgba(18,45,73,.16), inset 0 1px 0 rgba(255,255,255,.95) !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: center !important; justify-content: flex-start !important; box-sizing: border-box !important; min-height: 1.28rem !important; padding: .38rem .5rem .38rem 2.26rem !important; line-height: 1.15 !important; border-radius: 999px !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; gap: .4rem !important; min-width: 0 !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: .94rem !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.05 !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: absolute !important; left: -0.56rem !important; top: 50% !important; width: 2.52rem !important; height: 2.52rem !important; transform: translateY(-50%) !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; 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); } /* ----- 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, body.cp-globe-landing-page .cp-globe-landing { /* !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: 0.72rem; } .cp-home-globe-section--compact .cp-home-globe-toolbar--controls .form-check-input { width: 2rem; height: 1.1rem; } .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: 0.62rem; 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: 0.82rem; line-height: 1.25; color: inherit; } .cp-home-globe-hero-card__text { font-size: 0.72rem; line-height: 1.35; opacity: 0.88; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cp-home-globe-hero-card__cta { font-size: 0.72rem; 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 { 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; } .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.28rem 0.45rem 0.35rem; border-radius: 0.4rem; background: rgba(8, 18, 32, 0.88); border: 1px solid rgba(255, 255, 255, 0.16); max-width: 180px; } .cp-globe-flag__title { font-size: 0.72rem; 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; line-clamp: 2; -webkit-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; background-color: var(--cp-globe-page-bg); overflow-x: hidden; overflow-y: auto; } 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 { padding: 0 !important; max-width: none; background-color: var(--cp-globe-page-bg); } body.cp-globe-landing-page .cp-main { padding-top: calc( var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)) + var(--cp-globe-landing-below-nav, 0.65rem) ) !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 { min-height: calc(100dvh - var(--cp-navbar-visible-height, var(--cp-navbar-height, 70px)) - 2px); overflow: visible; background-color: var(--cp-globe-page-bg); } /* Globe hero fills first screen; footer sits below and is reached by scrolling */ body.cp-globe-landing-page .cp-main { flex: 0 0 auto; } .cp-globe-landing__overlay { position: relative; width: 100%; min-height: inherit; 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; } body.cp-globe-landing-page .cp-globe-landing__canvas.cp-home-globe { position: absolute; inset: 0; z-index: 1; width: 100%; max-width: none; min-height: 100%; height: 100%; 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; } .cp-globe-landing__rotate-overlay { position: absolute; right: 0.75rem; top: auto; bottom: 5.75rem; transform: none; z-index: 13; pointer-events: auto; padding: 0.4rem 0.75rem; border-radius: 999px; background: rgba(8, 18, 32, 0.78); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); } .cp-globe-landing__rotate-switch .form-check-label { color: rgba(248, 250, 255, 0.95); white-space: nowrap; } .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: visible; } .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-brand-title { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; font-size: clamp(1.05rem, 3.4vw, 1.28rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; } .cp-navbar-brand-title__gradient, .cp-globe-landing__headline-gradient { display: inline-block; max-width: 100%; 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, html[data-mdb-theme="light"] .cp-globe-landing__headline-gradient, html[data-cp-theme="light"] .cp-globe-landing__headline-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, html[data-mdb-theme="light"] .cp-globe-landing__headline-gradient, html[data-cp-theme="light"] .cp-globe-landing__headline-gradient { background: none; color: #0c4a6e; -webkit-text-fill-color: currentColor; animation: none; filter: none; } } @media (prefers-reduced-motion: reduce) { .cp-navbar-brand-title__gradient, .cp-globe-landing__headline-gradient { animation: none; background-position: 0 center; } } .cp-globe-landing__hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 0.85rem; text-align: center; } .cp-globe-landing__headline { margin: 0 0 0.4rem; font-size: clamp(1.35rem, 5vw, 1.95rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; } html[data-mdb-theme="dark"] .cp-globe-landing__headline-gradient, html[data-cp-theme="dark"] .cp-globe-landing__headline-gradient { filter: drop-shadow(0 2px 14px rgba(0, 212, 255, 0.28)); } .cp-globe-landing__subline { margin: 0; max-width: 22rem; padding: 0; border: 0; font-size: clamp(0.78rem, 2.1vw, 0.92rem); font-weight: 500; line-height: 1.5; letter-spacing: 0.03em; color: rgba(200, 216, 235, 0.82); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); } .cp-globe-landing__head .cp-globe-filter-bar { justify-content: center; } html[data-mdb-theme="light"] .cp-globe-landing__subline, html[data-cp-theme="light"] .cp-globe-landing__subline { color: rgba(30, 43, 56, 0.78); text-shadow: none; } .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: 0.35rem; } .cp-globe-filter-btn { border-radius: 999px; background: rgba(8, 18, 32, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(248, 250, 255, 0.92); font-weight: 600; } 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: #fff; } .cp-globe-activity-cards { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 14; display: flex; gap: 0.65rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 0.25rem; -webkit-overflow-scrolling: touch; } .cp-globe-activity-cards--empty { justify-content: center; } .cp-globe-activity-cards__empty { font-size: 0.85rem; 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: min(220px, 72vw); scroll-snap-align: start; display: flex; gap: 0.55rem; align-items: center; padding: 0.45rem 0.55rem; border-radius: 0.65rem; 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: 48px; height: 48px; border-radius: 0.45rem; object-fit: cover; flex-shrink: 0; } .cp-globe-activity-card__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .cp-globe-activity-card__type { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(148, 198, 255, 0.95); } .cp-globe-activity-card__title { font-size: 0.78rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-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.85rem; } .cp-globe-landing__head { padding-left: 0.5rem; padding-right: 0.5rem; } .cp-globe-landing__rotate-overlay { bottom: 5.25rem; right: 0.5rem; } .cp-globe-activity-cards { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; } } /* 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; } /* 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: clamp(1rem, 4.2vw, 1.35rem); 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; -webkit-overflow-scrolling: touch; 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: 0.72rem; font-weight: 600; line-height: 1.2; padding: 0.3rem 0.55rem; white-space: nowrap; flex-shrink: 0; } .cp-home-segment-head .cp-index-header__actions .btn i { font-size: 0.68rem; }