/* ==========================================================================
listing-v2.css - listing page redesign (2026-07)
Loaded ONLY by htdocs/listing/listing_enhanced.html, so selectors here are
effectively scoped to the public listing page. Design language follows the
2026 homepage refresh (kickers, pills, warm cards, hairlines) and the
Claude Design "Dupa Trio" mockup, keeping the site fonts.
Palette:
accent #C06014 (brand tertiary orange)
accent hover #9a4a0f
ink #191919
secondary #4a443f
muted #8a7f75
hairline #ececea / soft #f4f3f0
warm ground #faf5ed / soft #f7f5f1
dark band #141211
========================================================================== */
/* --------------------------------------------------------------------------
1. PAGE SECTION GROUNDS
The listing page reads as one white page with hairline-separated bands,
not alternating grey blocks.
-------------------------------------------------------------------------- */
.page-section.lmm-main-dark {
background: linear-gradient(180deg, #fff 0%, #faf5ed 100%);
border-bottom: 1px solid #ececea;
padding-bottom: 20px;
}
/* facts strip band (base .light-grey-bg is !important) */
.page-section.light-grey-bg {
background-color: #fff !important;
border-bottom: 1px solid #ececea;
}
/* main content band (was light grey) */
.page-section.lmm-main-light {
background-color: #fff !important;
}
/* similar listings / related categories / new search band */
.page-section.lmm-secondary.light-grey-bg {
background-color: #f7f5f1;
border-top: 1px solid #ececea;
}
.page-section.lmm-extra-content {
background-color: #fff;
}
/* --------------------------------------------------------------------------
2. HERO
-------------------------------------------------------------------------- */
.page-section.lmm-main-dark h1.pageTitle {
font-size: 34px;
line-height: 1.05;
letter-spacing: -0.02em;
margin-top: 22px;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.page-section.lmm-main-dark h1.pageTitle {
font-size: 46px;
margin-top: 45px;
}
}
h1.pageTitle .subTitle {
display: block;
margin-top: 14px;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: #4a443f;
letter-spacing: 0;
max-width: 560px;
}
/* Desktop: the grid pins the title to the photo's top edge and the CTA row
to its bottom edge (the mockup alignment) - the photo previously started
above the title (utility top margin vs the h1's own margin) and its fixed
350px height rarely matched the left column. Below 992px the bootstrap
cols stack exactly as before. */
@media (min-width: 992px) {
.lmm-main-dark .listing-hero-row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
margin-top: 38px;
margin-bottom: 30px;
}
.lmm-main-dark .listing-hero-row > [class*="col-"] {
width: auto; /* grid items keep the col-md-6 50% width otherwise */
float: none;
}
.listing-hero-title {
grid-column: 1;
grid-row: 1;
}
.listing-hero-photo-col {
grid-column: 2;
grid-row: 1 / 3;
}
.page-section.lmm-main-dark .listing-hero-title h1.pageTitle {
margin-top: 0;
}
/* the photo fills the left column's full height (background cover crops);
its big top/bottom margin utilities go - the grid owns the spacing */
.listing-hero-photo-col .main-listing-photo {
height: 100% !important; /* the div carries an inline height: 350px */
min-height: 370px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* CTA row pinned to the bottom, buttons in a tidy 12px flex gap */
.listing-hero-cta {
grid-column: 1;
grid-row: 2;
align-self: end;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 0 !important; /* a stray 15px bottom margin kept the CTA row off the photo's bottom edge */
}
.listing-hero-cta .btn-lg {
margin: 0 !important; /* the margin-right/top utilities fight the flex gap */
}
.listing-hero-cta > .margin-top.hidden-xs {
flex-basis: 100%;
margin-top: 8px !important;
}
}
/* hero CTAs: the mockup's uppercase treatment */
.listing-hero-cta .btn-lg {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 14px 24px;
}
/* favourite: white ghost button with accent text (the base .btn-tertiary-b
is a transparent-bg white-text variant and its hover floods solid orange) */
.page-section.lmm-main-dark .listing-hero-cta .btn-tertiary-b {
background-color: #fff;
border-color: rgba(192, 96, 20, 0.35);
color: #C06014;
}
.page-section.lmm-main-dark .listing-hero-cta .btn-tertiary-b .glyphicon {
color: #C06014;
}
.page-section.lmm-main-dark .listing-hero-cta .btn-tertiary-b:hover,
.page-section.lmm-main-dark .listing-hero-cta .btn-tertiary-b:focus {
background-color: rgba(192, 96, 20, 0.07);
border-color: #C06014;
color: #C06014;
}
.page-section.lmm-main-dark .listing-hero-cta .btn-tertiary-b:hover .glyphicon,
.page-section.lmm-main-dark .listing-hero-cta .btn-tertiary-b:focus .glyphicon {
color: #C06014;
}
/* the response row under the buttons: chip + "Replies in ~N hrs" side by side */
.listing-hero-cta > .margin-top.hidden-xs {
font-size: 14px;
color: #4a443f;
}
.listing-resp-row {
display: flex;
align-items: center;
gap: 14px;
}
.listing-resp-time .glyphicon {
font-size: 12px;
margin-right: 2px;
}
/* "Based in" block becomes a small white card, like the mockup.
Markup is flag + h3 + div siblings; grid puts the flag left of both
text lines (the flag's .pull-left float is neutralised). */
.location-flag-container-listings {
display: inline-grid;
grid-template-columns: auto auto;
column-gap: 14px;
align-items: center;
background: #fff;
border: 1px solid #ececea;
border-radius: 14px;
padding: 12px 18px 12px 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.location-flag-container-listings .flag-top-of-listings {
float: none;
grid-row: 1 / 3;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
width: 48px !important; /* the base utility says 80x60 - too loud in the card */
height: 36px !important;
margin-right: 0 !important; /* the grid gap owns the spacing */
}
.location-flag-container-listings .clearfix {
display: none;
}
/* phones: the card spans the full column like the photo below it (the text
column takes the slack - two auto tracks would split it and centre the text).
The stacked hero gets ONE vertical rhythm: 20px between blocks (the mixed
margin utilities gave 15/15/30/15/30) and 12px between the paired buttons. */
@media (max-width: 767px) {
.location-flag-container-listings {
display: grid;
grid-template-columns: auto 1fr;
width: 100%;
}
.page-section.lmm-main-dark h1.pageTitle {
margin-bottom: 20px;
}
.listing-hero-title .location-flag-container-listings {
margin-top: 0 !important; /* the title owns the gap above */
margin-bottom: 20px !important;
}
.listing-hero-photo-col .main-listing-photo {
margin-bottom: 20px !important; /* utility says 30 */
}
.listing-hero-cta .favourite-button {
margin-top: 12px !important; /* utility says 15 */
}
.listing-hero-cta > .margin-top-big.visible-xs {
margin-top: 18px !important; /* response line - utility says 30 */
}
.listing-hero-cta.margin-bottom-big-xs-and-sm {
margin-bottom: 12px !important; /* + the section's 20px padding = ~32 to the facts strip */
}
}
.location-flag-container-listings h3 {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #191919;
line-height: 1.3;
}
.location-flag-container-listings h3 + div {
font-size: 13px;
color: #4a443f;
margin-top: 1px;
}
/* main photo: soft radius + warm shadow (it is the LCP element - keep as is) */
.main-listing-photo {
border-radius: 20px;
box-shadow: 0 22px 50px rgba(60, 40, 20, 0.14);
background-size: cover;
}
/* hero + page buttons: pill shape site-language */
.lmm-main-dark .btn-lg,
.listing-buttons-bottom .btn-lg,
#price-guide .btn-lg,
#testimonials .btn-lg {
border-radius: 999px;
padding: 12px 26px;
font-size: 15px;
}
.lmm-main-dark .btn-lg .glyphicon,
.listing-buttons-bottom .btn-lg .glyphicon {
margin-right: 4px;
font-size: 90%;
}
/* "Lightning fast responses" chip */
.lmm-main-dark .label-default {
background: rgba(192, 96, 20, 0.08);
color: #9a4a0f;
border: 1px solid rgba(192, 96, 20, 0.25);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px; /* .label is 75% of the parent - keep it stable */
font-weight: 700;
display: inline-flex; /* centre the text box - the label baseline sat low in the pill */
align-items: center;
gap: 5px;
line-height: 1;
}
.lmm-main-dark .label-default .glyphicon {
top: 0; /* the base glyphicon rule nudges it down 1px */
font-size: 11px;
}
/* --------------------------------------------------------------------------
3. QUICK FACTS STRIP
New markup: .listing-fact = icon chip + label + value + jump link.
Grid columns (col-*) stay in the template for responsive wrapping.
-------------------------------------------------------------------------- */
.listing-facts-row {
display: flex;
flex-wrap: wrap;
}
.listing-fact {
display: flex;
align-items: flex-start;
text-align: left;
gap: 14px;
padding: 22px 0;
min-width: 0;
}
.listing-fact-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(192, 96, 20, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.listing-fact-icon .glyphicon,
.listing-fact-icon .bi {
color: #C06014;
font-size: 19px;
line-height: 1;
top: 0;
}
.listing-fact-body {
min-width: 0;
}
.listing-fact-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #8a7f75;
margin-bottom: 3px;
}
.listing-fact-value {
font-size: 18px;
font-weight: 700;
color: #191919;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 767px) {
.listing-fact-value {
font-size: 16px;
}
}
/* the location value arrives with a flag span - the mockup goes without */
.listing-fact-value .flag-icon {
display: none;
}
a.listing-fact-link {
display: inline-block;
margin-top: 5px;
font-size: 12.5px;
font-weight: 700;
color: #C06014;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
cursor: pointer;
}
a.listing-fact-link:hover,
a.listing-fact-link:focus {
color: #9a4a0f;
text-decoration: none;
}
@media (max-width: 767px) {
.listing-fact {
padding: 14px 0;
}
}
/* --------------------------------------------------------------------------
4. STICKY QUICK-ACTION BAR
Hidden above the fold; slides in once the hero actions scroll away.
Slimmer than the mockup: 54px action row + 40px nav row.
-------------------------------------------------------------------------- */
.listing-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1040;
background: #fff;
border-bottom: 1px solid #ececea;
box-shadow: 0 14px 34px rgba(60, 40, 20, 0.10);
transform: translateY(-105%);
visibility: hidden;
pointer-events: none;
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 300ms;
}
.listing-sticky.is-shown {
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0s;
}
@media (prefers-reduced-motion: reduce) {
.listing-sticky,
.listing-sticky.is-shown {
transition: none;
}
}
.listing-sticky-top {
max-width: 1170px;
margin: 0 auto;
padding: 8px 15px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.listing-sticky-act {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.listing-sticky-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background-size: cover;
background-position: center;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.listing-sticky-name {
font-size: 14px;
font-weight: 700;
color: #191919;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.listing-sticky-sub {
font-size: 12.5px;
color: #4a443f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.listing-sticky-cta {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.listing-sticky-price {
display: flex;
align-items: baseline;
gap: 6px;
margin-right: 4px;
white-space: nowrap;
}
.listing-sticky-price span {
font-size: 12.5px;
color: #4a443f;
}
.listing-sticky-price strong {
font-size: 19px;
font-weight: 700;
color: #191919;
}
.listing-sticky .btn-pink {
border-radius: 999px;
padding: 9px 20px;
}
/* no-price listings: a round supplier photo fills the price slot on mobile
(the desktop bar already carries one in the left act block) */
.listing-sticky-cta-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background-size: cover;
background-position: center;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
margin-right: auto;
}
@media (min-width: 992px) {
.listing-sticky-cta-avatar {
display: none;
}
}
.listing-sticky-fav {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid #ececea;
background: #fff;
color: #4a443f;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.listing-sticky-fav:hover {
border-color: #C06014;
color: #C06014;
}
.listing-sticky-fav .glyphicon {
top: 0;
font-size: 15px;
}
.listing-sticky-nav {
max-width: 1170px;
margin: 0 auto;
padding: 0 15px;
border-top: 1px solid #f4f3f0;
display: flex;
gap: 26px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.listing-sticky-nav::-webkit-scrollbar {
display: none;
}
.listing-sticky-nav a {
padding: 10px 0 8px;
font-size: 13.5px;
font-weight: 700;
color: #4a443f;
border-bottom: 2px solid transparent;
white-space: nowrap;
cursor: pointer;
flex-shrink: 0;
transition: color 150ms;
}
.listing-sticky-nav a:hover,
.listing-sticky-nav a:focus {
color: #C06014;
text-decoration: none;
}
.listing-sticky-nav a.active {
color: #C06014;
border-bottom-color: #C06014;
}
@media (max-width: 767px) {
/* tighter run of nav links: with the shorter labels most listings fit
without any left-right scrolling */
.listing-sticky-nav {
gap: 16px;
}
.listing-sticky-nav a {
font-size: 13px;
}
}
@media (max-width: 991px) {
.listing-sticky-act {
display: none;
}
.listing-sticky-cta {
flex: 1;
justify-content: flex-end; /* no-price listings: heart + contact stay right
(the price's margin-right auto wins when present) */
}
.listing-sticky-price {
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-right: auto;
}
.listing-sticky-price strong {
line-height: 1.1;
}
}
/* --------------------------------------------------------------------------
5. SECTION HEADINGS AS KICKERS
The h2.pageTitleProfiles (Media, Gallery, MixCloud) and every
.panel-primary heading become small orange uppercase kickers.
-------------------------------------------------------------------------- */
/* every section keeps the same 18px kicker-to-content gap: the kickers
themselves carry no bottom margin (several have utility no-margin-bottom
classes anyway) and each section's content block owns an 18px top margin */
.page-section h2.pageTitleProfiles {
font-size: 14px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #C06014;
margin: 0 !important;
}
#media-carousel {
margin-top: 18px !important; /* replaces the 7.5px margin-top-sm utility */
}
.mixcloud-embed-container {
margin-top: 18px;
}
.page-section h2.pageTitleProfiles .glyphicon,
.page-section h2.pageTitleProfiles .bi {
display: none;
}
/* panels: strip the black bootstrap chrome */
.lmm-main-light .panel.panel-primary {
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
margin-bottom: 0;
padding: 34px 0 40px;
border-bottom: 1px solid #ececea;
}
.lmm-main-light .panel.panel-primary > .panel-heading {
background: transparent;
border: none;
padding: 0 0 18px; /* same kicker-to-content gap as the carousel/gallery sections */
}
.lmm-main-light .panel.panel-primary > .panel-heading .panel-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #C06014;
}
.lmm-main-light .panel.panel-primary > .panel-heading .panel-title .glyphicon,
.lmm-main-light .panel.panel-primary > .panel-heading .panel-title .bi {
display: none;
}
.lmm-main-light .panel.panel-primary > .panel-body,
.lmm-main-light .panel.panel-primary > .body {
padding: 0;
}
/* carded sections sit on a warm ground inside their block */
#price-guide .panel-body,
.lmm-main-light .panel.panel-primary.qa-card > .panel-body {
background: #faf5ed;
border: 1px solid #ececea;
border-radius: 16px;
padding: 26px 28px;
}
/* bootstrap rows/cols inside a card: cancel the gutter bleed */
.qa-card .panel-body .row {
margin-left: 0;
margin-right: 0;
}
.qa-card .panel-body .row .col-xs-12 {
padding-left: 0;
padding-right: 0;
}
@media (max-width: 767px) {
#price-guide .panel-body,
.lmm-main-light .panel.panel-primary.qa-card > .panel-body {
padding: 18px 16px;
}
}
/* --------------------------------------------------------------------------
6. MEDIA - dark media stage
The bootstrap carousel keeps working; we restyle the frame. The 16:9
player sits centred with dark "pillarbox" gutters either side (the
mockup's 21:9 look without stretching the player).
-------------------------------------------------------------------------- */
#media-carousel {
background: #141211;
border-radius: 20px;
overflow: hidden;
padding: 14px 0;
}
/* pillarbox: cap the media width inside the dark stage */
#media-carousel .carousel-inner .listing-videos-container {
margin: 0 11%;
}
/* the SoundCloud slide keeps the video slide's height (stage width x
0.78 x 9/16) so the stage doesn't shrink when you reach it; its content
centres inside. The audio slide sizes naturally. */
#media-carousel .item.soundcloud-slide {
aspect-ratio: 1000 / 439;
min-height: 0 !important; /* the SC slide carries an inline min-height */
overflow: hidden;
}
#media-carousel .item.soundcloud-slide.active,
#media-carousel .item.soundcloud-slide.next,
#media-carousel .item.soundcloud-slide.prev {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#media-carousel .soundCloudIframe {
margin: 0;
width: 78%;
}
#media-carousel .soundCloudIframe iframe {
display: block;
width: 100%;
}
#media-carousel .soundcloud-loading-spin img {
margin-top: 0 !important; /* inline style centres it for the old tall slide */
}
/* --------------------------------------------------------------------------
6b. AUDIO PLAYER - dark deck on the stage
The player skin itself (orange transport circles, kicker + big title,
progress row, numbered playlist rows) is the SHARED /css/audio-deck.css
(.audio-deck-dark on the shell) - the edit-listing Media tab uses the
same deck. Here: only how the deck sits on the media stage (side
padding, desktop height lock, mobile height reserve + chevron parking).
-------------------------------------------------------------------------- */
#media-carousel .item.audio-slide .audio-player-shell {
padding: 26px 9% 24px; /* side padding keeps rows clear of the
carousel chevrons */
}
/* HEIGHT LOCK (desktop): the audio slide takes the video slide's exact
footprint (stage width x 0.78 x 9/16) so the carousel never changes
height between slides; the playlist flexes into whatever space remains
and scrolls internally. Short playlists leave dark slack below. */
@media (min-width: 768px) {
#media-carousel .item.audio-slide {
aspect-ratio: 1000 / 439;
overflow: hidden;
}
#media-carousel .item.audio-slide.active,
#media-carousel .item.audio-slide.next,
#media-carousel .item.audio-slide.prev {
display: flex;
flex-direction: column;
}
#media-carousel .item.audio-slide .audio-player-shell {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* jQuery .show() clears the inline display:none, so this flex chain
takes over: gui fixed, playlist absorbs the leftover height */
#media-carousel .audio-slide .jp-audio {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
#media-carousel .audio-slide .jp-type-playlist {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
#media-carousel .audio-slide .jp-gui {
flex-shrink: 0;
}
#media-carousel .audio-slide .jp-playlist {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
}
}
/* mobile: natural height + a reserve so the playlist AJAX landing causes
no layout shift when the audio slide is first (track count arrives as
--jp-rows inline from the handler); constants measured on the dark
deck: row pitch 50px, playlist cap 287px, chrome around the list 128px */
@media (max-width: 767px) {
#media-carousel .item.audio-slide .audio-player-shell {
padding: 18px 16px;
min-height: calc(min(50px * var(--jp-rows, 0), 287px) + 128px);
}
}
/* the media head-row arrows (gallery pattern). On phones the on-stage
overlay chevrons ate video width (11% pillarbox each side) and had
nowhere to live on the audio deck - the head arrows replace them and
the media fills the whole stage */
.media-head-row .gallery-arrows {
display: none; /* desktop keeps the on-stage overlay chevrons */
}
@media (max-width: 767px) {
.media-head-row .gallery-arrows {
display: flex;
}
/* .left/.right needed: listings.css gives those display:flex at higher
specificity than the bare control class */
#media-carousel .carousel-control.left,
#media-carousel .carousel-control.right {
display: none;
}
#media-carousel .carousel-inner .listing-videos-container {
margin: 0;
}
}
@media (max-width: 767px) {
/* small screens: SC embeds have fixed heights that can't compress into
the video footprint - let the slide size to its content instead */
#media-carousel .item.soundcloud-slide {
aspect-ratio: auto;
min-height: 200px !important;
}
#media-carousel .soundCloudIframe {
width: 84%;
padding: 12px 0;
}
}
#media-carousel .carousel-inner .listing-videos-container .thumbnail-container {
border-radius: 10px;
overflow: hidden;
}
@media (max-width: 767px) {
#media-carousel {
border-radius: 14px;
padding: 0; /* the head-row arrows freed the stage - video runs
edge to edge like the gallery images */
}
.soundCloudIframe {
margin: 0 12%;
}
}
/* round glass arrows over the dark stage */
#media-carousel .carousel-control {
color: #fff;
opacity: 1;
}
#media-carousel .carousel-control .glyphicon-chevron-left,
#media-carousel .carousel-control .glyphicon-chevron-right {
background-color: rgba(255, 255, 255, 0.14);
color: #fff;
border-radius: 50%;
}
@media (min-width: 768px) {
#media-carousel .carousel-control .glyphicon-chevron-left,
#media-carousel .carousel-control .glyphicon-chevron-right {
width: 44px;
height: 44px;
padding: 12px 0;
font-size: 20px;
}
}
@media (max-width: 767px) {
#media-carousel .carousel-control .glyphicon-chevron-left,
#media-carousel .carousel-control .glyphicon-chevron-right {
width: 36px;
height: 36px;
padding: 10px 0;
font-size: 15px;
}
#media-carousel .carousel-control .glyphicon-chevron-left {
margin-left: 6px;
}
#media-carousel .carousel-control .glyphicon-chevron-right {
margin-right: 6px;
}
}
#media-carousel .carousel-control:hover .glyphicon-chevron-left,
#media-carousel .carousel-control:hover .glyphicon-chevron-right {
background-color: rgba(255, 255, 255, 0.28);
}
/* video title caption: bottom-left of the stage */
#media-carousel .carousel-caption {
color: rgba(255, 255, 255, 0.85);
text-shadow: none;
font-weight: 700;
left: 12%;
right: 12%;
text-align: left;
padding-bottom: 6px;
}
/* play button: filled accent circle (was a white ring on dark) */
.listing-videos-container .play-container .play {
background-color: #C06014;
border: none;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
transition: transform 180ms ease, background-color 180ms ease;
}
.listing-videos-container .play-container .play:hover {
background-color: #9a4a0f;
transform: scale(1.06);
}
/* media tabs under the stage (VIDEOS / AUDIO / SOUNDCLOUD) become pills */
#media-carousel-links a {
display: inline-flex;
align-items: center;
padding: 8px 18px;
margin: 0 4px 8px;
border: 1px solid #ececea;
border-radius: 999px;
background: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: #4a443f;
transition: color 150ms, border-color 150ms;
}
#media-carousel-links a:hover,
#media-carousel-links a:focus {
color: #C06014;
border-color: #C06014;
text-decoration: none;
}
#media-carousel-links a .bi {
margin-right: 6px;
}
/* --------------------------------------------------------------------------
7. GALLERY - arrows instead of dots
-------------------------------------------------------------------------- */
.gallery-head-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
min-height: 40px; /* the arrow circles' height - the row must not
change height when arrows toggle (CLS) */
}
.gallery-head-row h2 {
margin-bottom: 0 !important;
}
/* hidden until the owl init decides they can actually scroll something
(toggleOwlArrows sets inline display) - server-rendered arrows briefly
flashed then hid on one-photo listings */
.gallery-arrows {
display: none;
gap: 8px;
flex-shrink: 0;
}
.gallery-arrows button {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #ececea;
background: #fff;
color: #4a443f;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: color 150ms, border-color 150ms;
}
.gallery-arrows button:hover,
.gallery-arrows button:focus {
border-color: #C06014;
color: #C06014;
outline: none;
}
.gallery-arrows button .glyphicon {
top: 0;
font-size: 14px;
}
/* items carry 6px side padding for the gutters; pull the strip out by the
same amount so the first/last photos align flush with the content edges
(video stage above, price guide below) */
.listing-image-gallery-container {
margin: 18px -6px 0;
}
/* kill the owl dots row */
#photo-gallery .owl-controls {
display: none !important;
}
/* reserve the whole strip before the AJAX items inject (~1.3s) - the
server adds .gallery-reserve only when the listing has photos.
min-height ONLY - an aspect-ratio here inherited the owl strip's huge
intrinsic width on photo-rich listings (80 photos = a 54000px wrapper
pushing the page sideways). Values match the owl item counts per
bootstrap container band: 3-up at 992+, 2-up mid, 1-up small phones. */
.gallery-reserve {
min-height: 281px; /* >=1200: col 1140, 3-up (values measured) */
}
@media (max-width: 1199px) {
.gallery-reserve {
min-height: 231px; /* 992-1199: col 940, 3-up */
}
}
@media (max-width: 991px) {
.gallery-reserve {
min-height: 176px; /* 768-991: col 720, still 3-up (owl bands
are max-width: 800px matches [992,3]) */
}
}
@media (max-width: 767px) {
.gallery-reserve {
min-height: calc((100vw - 42px) * 3 / 8 + 2px); /* fluid 2-up */
}
}
@media (max-width: 430px) {
.gallery-reserve {
min-height: calc((100vw - 42px) * 3 / 4 + 12px); /* 1-up */
}
}
/* mockup crop: landscape 4:3 cards (source thumbs are square) - the
aspect-ratio also reserves the box while lazy images load. display
block is load-bearing: a src-less lazy img is NOT a replaced element,
so without it the box collapses to an alt-text line until the src
lands (= big shift if the gallery is in view) */
#photo-gallery .item img {
display: block;
border-radius: 12px;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
#photo-gallery .item {
padding: 0 6px;
margin: 0; /* base .item rule adds 5px all round - kills edge alignment */
}
/* --------------------------------------------------------------------------
8. PRICE GUIDE
Restyles the bordered bootstrap table into airy rows with big accent
prices and hairline separators.
-------------------------------------------------------------------------- */
#price-guide .table {
border: none;
background: transparent;
}
#price-guide .table > tbody > tr > td {
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding: 18px 0;
vertical-align: baseline;
background: transparent;
font-size: 16px;
}
#price-guide .table > tbody > tr:first-child > td {
padding: 0 0 10px;
font-size: 11px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #8a7f75;
}
#price-guide .table > tbody > tr:first-child > td strong {
font-weight: 700;
}
#price-guide .table > tbody > tr > td:last-child {
text-align: right;
font-size: 24px !important;
font-weight: 700;
color: #C06014;
white-space: nowrap;
width: 1%;
}
#price-guide .table > tbody > tr:first-child > td:last-child {
font-size: 11px !important;
color: #8a7f75;
}
/* the "(EUR)" beside each price: small and muted like the mockup */
#price-guide .table .price-curr {
font-size: 14px;
font-weight: 400;
color: #8a7f75;
}
#price-guide .margin-top .margin-bottom {
font-size: 13.5px;
line-height: 1.6;
color: #8a7f75;
margin-top: 8px;
}
@media (max-width: 767px) {
#price-guide .table > tbody > tr > td:last-child {
font-size: 19px !important;
}
}
/* --------------------------------------------------------------------------
9. ABOUT / BIOGRAPHY
-------------------------------------------------------------------------- */
/* one uniform size: a first-paragraph "lede" looked good on curated bios but
supplier HTML often opens with bare text before any , so the big style
landed mid-bio (small-then-big) */
.listing-biography .long-description {
font-size: 16px;
line-height: 1.65;
color: #4a443f;
}
/* some bios carry bootstrap's .lead on their paragraphs (24px at desktop) -
same mixed-sizes problem, same fix */
.listing-biography .long-description .lead {
font-size: 16px;
font-weight: 400;
line-height: 1.65;
margin-bottom: 10px;
}
/* --------------------------------------------------------------------------
10. REVIEWS - dark band card
-------------------------------------------------------------------------- */
#testimonials.panel.panel-primary {
background: #141211;
border: none;
border-radius: 20px;
padding: 34px 28px 38px;
margin: 34px 0 40px;
border-bottom: none;
}
/* keep the page rhythm: the block before the dark card closes with its own
hairline, the card provides its own visual boundary */
#testimonials.panel.panel-primary > .panel-heading {
padding: 0 0 18px;
}
#testimonials.panel.panel-primary > .panel-heading .panel-title {
color: #e89a5c;
}
#testimonials,
#testimonials .black-text {
color: rgba(255, 255, 255, 0.75);
}
#testimonials strong,
#testimonials b {
color: #fff;
}
#testimonials h3 {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
margin: 18px 0 6px;
}
#testimonials .rating.largeBlue {
font-size: 58px;
font-weight: 700;
color: #e89a5c;
margin: 0 0 12px;
line-height: 1.05;
}
#testimonials hr {
border-color: rgba(255, 255, 255, 0.12);
}
/* review carousel card - full width like the mockup, arrows overlay the
card's side padding (.blockquote-default-padding is !important, so these
must be too). Item/blockquote margins are zeroed so the card's edges sit
exactly at the carousel's edges - that keeps the 22px arrows INSIDE the
card instead of straddling its border. */
#carousel-reviews-listings {
padding: 0; /* base rule pads the carousel 30px each side, pushing the card off the arrows' anchor */
margin-bottom: 32px !important; /* air above Add a new review (the markup carries no-margin-bottom, which is !important) */
}
#carousel-reviews-listings .item {
margin: 0;
}
#carousel-reviews-listings .item > div {
margin: 0;
}
#carousel-reviews-listings blockquote {
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.11) !important;
border-radius: 16px;
padding: 40px 96px !important;
margin: 0;
font-size: 16.5px;
line-height: 1.6;
color: #f6f1e9;
}
/* the mockup's oversized opening quote mark */
#carousel-reviews-listings blockquote:before {
content: '\201D';
display: block;
font-size: 60px;
line-height: 0.55;
font-weight: 700;
color: #e89a5c;
margin-bottom: 20px;
}
#carousel-reviews-listings blockquote footer {
color: rgba(255, 255, 255, 0.6);
padding-top: 16px;
margin-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
#carousel-reviews-listings blockquote footer:before,
#carousel-reviews-listings blockquote footer:after {
content: none; /* BS3 injects an em-dash before blockquote footers */
}
/* footer row: reviewer left, score right (markup from getListingJSON) */
.review-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
text-align: left;
}
.review-foot-who {
font-size: 14px;
font-weight: 700;
color: #fff;
}
.review-foot-org {
font-weight: 400;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
}
.review-foot-score {
font-size: 20px;
font-weight: 700;
color: #e89a5c;
white-space: nowrap;
}
.review-foot-share {
margin-top: 12px;
text-align: left;
}
.review-foot-share img {
width: 28px;
height: 28px;
display: inline-block;
}
/* supplier reply: soft panel inside the card, under the reviewer row */
#carousel-reviews-listings .review-reply {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 16px 0 14px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 12px;
font-size: 15px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.75);
text-align: left;
}
.review-reply-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-size: cover;
background-position: center;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.review-reply-body {
min-width: 0;
}
.review-reply-head {
font-size: 13.5px;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.carousel-control-reviews {
position: absolute;
top: 50%;
bottom: auto;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
background: #141211;
border: 1px solid rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.8);
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: color 150ms, border-color 150ms;
}
.carousel-control-reviews:hover,
.carousel-control-reviews:focus {
color: #e89a5c;
border-color: #e89a5c;
text-decoration: none;
opacity: 1;
}
/* the legacy rule absolutely positions the chevron at top 40% / left 50%
with -10px margins - reset it so flex centring works */
.carousel-control-reviews .glyphicon-chevron-left,
.carousel-control-reviews .glyphicon-chevron-right {
position: static;
top: auto;
left: auto;
right: auto;
margin: 0;
font-size: 14px;
line-height: 1;
}
.carousel-control-reviews.left {
left: 22px;
}
.carousel-control-reviews.right {
right: 22px;
}
@media (max-width: 767px) {
#testimonials.panel.panel-primary {
padding: 24px 14px 28px;
border-radius: 16px;
}
#carousel-reviews-listings blockquote {
padding: 24px 20px !important;
font-size: 15px;
}
#carousel-reviews-listings blockquote:before {
font-size: 42px;
margin-bottom: 14px;
}
#testimonials .ratingStar:before {
font-size: 27px;
}
/* the phone card has no wide side padding for the arrows to live in, so
they overlapped the quote text - park them as a centred pair below
the card instead */
#carousel-reviews-listings {
padding: 0 0 58px;
}
/* single review: the arrows are server-hidden, reclaim their space */
#carousel-reviews-listings:has(.carousel-control-reviews.hidden) {
padding-bottom: 0;
}
.carousel-control-reviews {
width: 40px;
height: 40px;
top: auto;
bottom: 0;
transform: none;
}
.carousel-control-reviews.left {
left: auto;
right: calc(50% + 6px);
}
.carousel-control-reviews.right {
right: calc(50% - 46px);
}
}
/* stars: swap the 49px GIF sprite (jagged white edges on dark) for crisp
glyph stars in the mockup's light copper */
#testimonials .ratingStars {
width: auto !important; /* the markup carries an inline width:245px */
display: inline-flex;
gap: 8px;
}
#testimonials .ratingStar {
background-image: none;
width: auto;
height: auto;
float: none;
margin: 0;
}
#testimonials .ratingStar:before {
content: '\2605';
font-size: 34px;
line-height: 1;
color: #e89a5c;
}
#testimonials .ratingStar.ratingStarHalf:before {
background: linear-gradient(90deg, #e89a5c 50%, rgba(255, 255, 255, 0.25) 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
#testimonials .ratingStar.ratingStarBlank:before {
color: rgba(255, 255, 255, 0.25);
}
/* share buttons inside review footers */
#testimonials .fbsharebutton img,
#testimonials .twittersharebutton img {
opacity: 0.85;
}
#testimonials .fbsharebutton img:hover,
#testimonials .twittersharebutton img:hover {
opacity: 1;
}
/* Add a new review: ghost pill on dark */
#testimonials .btn-pink {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
}
#testimonials .btn-pink:hover,
#testimonials .btn-pink:focus {
background: rgba(255, 255, 255, 0.06) !important;
border-color: #fff;
color: #fff;
}
/* --------------------------------------------------------------------------
11. LOCATION
-------------------------------------------------------------------------- */
#locations-map .well {
background: #faf5ed;
border: 1px solid #ececea;
border-radius: 16px;
box-shadow: none;
padding: 30px 28px;
text-align: left;
height: 100%;
font-size: 16px;
}
#locations-map .well h2 {
font-size: 24px;
font-weight: 700;
color: #191919;
}
#locations-map .well .flag-icon {
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
#locations-map .row[align="center"] {
text-align: left;
}
#locations-map .googleMapMargins {
border-radius: 16px;
overflow: hidden;
border: 1px solid #ececea;
}
#locations-map #map {
min-height: 340px;
}
/* --------------------------------------------------------------------------
12. SONG LIST - columns with hairline rules
-------------------------------------------------------------------------- */
.sample-repertoire {
columns: 1;
column-gap: 48px;
column-rule: 1px solid #f4f3f0;
margin-top: -9px; /* the first row's 9px padding - keeps the visual gap
under the SONG LIST kicker at the standard 18px */
}
@media (min-width: 768px) {
.sample-repertoire {
columns: 2;
}
}
@media (min-width: 992px) {
.sample-repertoire {
columns: 3;
}
}
.sample-repertoire p {
margin: 0;
padding: 9px 0;
border-bottom: 1px solid #f4f3f0;
font-size: 16px;
line-height: 1.45;
color: #191919;
break-inside: avoid;
}
/* --------------------------------------------------------------------------
13. Q&A SECTIONS (Technical / FAQs / Performance) + Clients / Venues
Server joins rows with
; style questions big, answers muted.
-------------------------------------------------------------------------- */
.qa-card .panel-body .word-break b,
.qa-card .panel-body .word-break {
font-size: 17px;
color: #191919;
line-height: 1.35;
}
.qa-card .panel-body .no-margin-bottom {
font-size: 16px;
line-height: 1.6;
color: #4a443f;
}
.qa-card .panel-body hr {
border-color: rgba(0, 0, 0, 0.07);
margin-top: 20px;
margin-bottom: 20px;
}
/* recent clients / venues read as statements */
.recent-clients,
.venues-list {
font-size: 16px;
line-height: 1.55;
color: #191919;
}
/* prose entered where a one-per-line list was expected (detected server
side): span the layout columns so sentences read continuously */
.freeform-text {
column-span: all;
}
.sample-repertoire .freeform-text {
padding-top: 9px; /* prose rows carry no top padding - undo the block's -9px */
}
.sample-repertoire .freeform-text p {
border-bottom: none;
padding: 0 0 10px;
}
/* --------------------------------------------------------------------------
13b. AVAILABILITY GUIDE - white calendar card + pitch side by side.
Here: only this section's layout (grid, card width, reserve, CTA).
The calendar card skin is shared with the myaccount availability
editor - see the .avail-cal block appended to /css/calendar.css.
-------------------------------------------------------------------------- */
.avail-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 24px 56px;
align-items: start;
}
@media (max-width: 767px) {
.avail-grid {
grid-template-columns: 1fr;
gap: 22px;
}
/* the fixed 330px card is the column's min-content, which a 1fr track
can't shrink below - it pushed the calendar off small phones */
.avail-cal {
width: 100%;
}
/* full-width CTA on phones */
.avail-copy a {
display: block;
}
.avail-check-btn {
display: block;
width: 100%;
}
}
.avail-cal-col,
.avail-copy {
min-width: 0;
}
.avail-cal {
width: 330px;
max-width: 100%;
min-height: 246px; /* the widget draws after an AJAX fetch - reserve a
five-week month (six-week ones add a row, but the
draw lands ~1s in, long before this scrolls into
view) */
}
/* the calendar card skin itself (white card, heading flex, bordered
cells, orange dateOn, legend swatches) is now SHARED - it lives in
/css/calendar.css scoped under the same .avail-cal class, because the
myaccount availability editor uses the identical design */
/* the pitch column */
.avail-copy {
max-width: 560px;
padding-top: 6px;
}
.avail-head {
margin: 0 0 12px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.01em;
color: #191919;
}
@media (min-width: 768px) {
.avail-head {
font-size: 30px;
}
}
.avail-sub {
font-size: 16px;
line-height: 1.6;
color: #4a443f;
}
.avail-reply {
margin-top: 14px;
font-size: 14px;
color: #4a443f;
}
.avail-reply .glyphicon {
font-size: 12px;
}
.avail-check-btn {
margin-top: 20px;
border-radius: 999px;
padding: 13px 24px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.avail-check-btn .glyphicon {
margin-right: 6px;
font-size: 90%;
}
/* --------------------------------------------------------------------------
14. MORE INFO - mockup layout: Event types | Genres side by side as chip
groups with ruled headings, Features full-width as a grid of icon cards.
Markup from ListingHandler.pm MOREINFO.
-------------------------------------------------------------------------- */
.more-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 36px;
}
.more-info-col {
min-width: 0;
}
.more-info-col-full {
grid-column: 1 / -1;
}
@media (max-width: 991px) {
.more-info-grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
h4.more-info-head {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #191919;
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 1px solid #ececea;
}
.more-info-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.more-info-chips p {
margin: 0;
display: inline-block;
padding: 7px 14px;
border-radius: 999px;
font-size: 13px;
line-height: 1.3;
}
.more-info-event-types p {
background: #fff;
border: 1px solid #ececea;
color: #4a443f;
}
.more-info-genres p {
background: rgba(192, 96, 20, 0.08);
border: 1px solid rgba(192, 96, 20, 0.25);
color: #C06014;
font-weight: 700;
}
/* features: icon cards in a grid */
.more-info-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 991px) {
.more-info-features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.more-info-features-grid {
grid-template-columns: 1fr;
}
}
.more-info-feature {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #faf5ed;
border: 1px solid #ececea;
border-radius: 12px;
font-size: 14px;
font-weight: 400;
color: #191919;
min-width: 0;
}
.more-info-feature-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: #fff;
border: 1px solid #ececea;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.more-info-feature-icon .glyphicon {
color: #C06014;
font-size: 13px;
top: 0;
}
/* More Info is the last block before the dark contact band - no trailing
hairline under the features grid */
#more-info-panel.panel.panel-primary {
border-bottom: none;
padding-bottom: 20px;
}
/* --------------------------------------------------------------------------
15. CONTACT BAND (dark)
-------------------------------------------------------------------------- */
.page-section.secondary-orange-bg {
background-color: #141211 !important; /* the base .secondary-orange-bg tan is !important too */
}
.listing-contact-panel.panel.panel-default {
background: transparent;
border: none;
box-shadow: none;
padding: 0; /* the markup's .padding utility indented the band's
content ~15px past every neighbouring section */
color: rgba(255, 255, 255, 0.75);
font-size: 16px;
}
.listing-contact-panel h2.largeBlue {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #e89a5c;
margin: 0 0 14px;
}
.listing-contact-panel h2.largeBlue .glyphicon {
display: none;
}
.listing-contact-panel .listing-contact-headline {
font-size: 30px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 14px;
max-width: 640px;
}
@media (min-width: 768px) {
.listing-contact-panel .listing-contact-headline {
font-size: 40px;
}
}
.listing-contact-panel .black-text {
color: rgba(255, 255, 255, 0.7) !important;
max-width: 640px;
}
.listing-contact-panel .btn-tertiary-b {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff !important;
border-radius: 999px;
}
.listing-contact-panel .btn-tertiary-b:hover,
.listing-contact-panel .btn-tertiary-b:focus {
border-color: #fff;
background: rgba(255, 255, 255, 0.06) !important;
}
.listing-contact-panel .btn-tertiary-b .glyphicon {
color: #fff !important;
}
/* --------------------------------------------------------------------------
16. SIMILAR LISTINGS / RELATED CATEGORIES / SEARCH / RELATED SEARCHES
These arrive via getListingJSON; restyle in place.
-------------------------------------------------------------------------- */
.page-section.lmm-secondary h2,
.page-section.lmm-secondary h2.fontMerri {
font-family: inherit;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #C06014;
margin: 34px 0 18px;
}
/* similar listing cards: rounded photos with name overlay. Items carry 6px
gutters; the strip pulls out by the same amount so the first/last cards
align with the section title, and it gets the same breathing room above
as the other sections */
.relatedListingsCarousel.owl-carousel {
margin: 18px -6px 0;
}
.relatedListingsCarousel .owl-item {
padding: 0 6px;
}
.relatedListingsCarousel .carousel-item {
position: relative;
border-radius: 16px;
overflow: hidden;
margin: 0;
padding: 0;
}
.relatedListingsCarousel .carousel-item img {
border-radius: 16px;
transition: transform 300ms ease;
width: 100%;
height: auto;
aspect-ratio: 4 / 5; /* mockup portrait cards (source thumbs are square -
cover crops the sides); the ratio also reserves
the box before the lazy load - the strip used to
grow when images landed, shifting everything
below it */
object-fit: cover;
}
.relatedListingsCarousel .carousel-item:hover img {
transform: scale(1.03);
}
/* the caption doubles as the mockup's full-card shade: it covers the whole
card with the 45% gradient and flexes its two text lines to the bottom */
.relatedListingsCarousel .carousel-item .caption {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 15px 14px;
background: linear-gradient(180deg, transparent 45%, rgba(10, 8, 6, 0.82));
pointer-events: none;
text-shadow: none; /* the base carousel caption adds one - the shade does the work */
}
/* the mockup's small copper country line above the name */
.relatedListingsCarousel .sup-card-loc {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #e89a5c;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* arrows in the section head drive this carousel too - hide its dots */
#similar-listings-carousel .owl-controls {
display: none !important;
}
.relatedListingsCarousel .carousel-item .caption .content {
padding: 0; /* the base .content rule pads it out (5px + responsive
padding-top) - it opened a dead hole between the
country line and the name */
height: auto; /* base: 100% - the name filled the whole shade, so its
text sat at the card TOP */
text-align: left; /* base centres it - the mockup is left-aligned */
color: #fff;
font-weight: 700;
font-size: 17px;
line-height: 1.2;
letter-spacing: -0.01em;
white-space: normal; /* mockup names wrap (up to two lines) */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* related category buttons become accent pills */
#related-categories-buttons .btn.btn-pink {
background: rgba(192, 96, 20, 0.07) !important;
border: 1px solid rgba(192, 96, 20, 0.22);
color: #C06014;
border-radius: 999px;
font-weight: 700;
padding: 9px 18px;
}
#related-categories-buttons .btn.btn-pink:hover,
#related-categories-buttons .btn.btn-pink:focus {
background: #C06014 !important;
color: #fff;
border-color: #C06014;
}
/* related searches: hairline rows (fight BS3's .table td padding/border
with the full-specificity selector) */
.related-links {
background: transparent;
}
/* lmm.less has an ID-scoped "#related-searches table td" rule that outguns
any class selector - match its ID scoping to win. The 64px mockup gutter
is split across the two cells (and the table fixed at 50/50) so the gap
doesn't come out of the left column's text width alone. */
#related-searches .table.related-links,
.table.related-links {
table-layout: fixed;
width: 100%;
}
#related-searches .table.related-links > tbody > tr > td,
.table.related-links > tbody > tr > td {
padding: 0 32px 0 0;
border-top: none;
}
#related-searches .table.related-links > tbody > tr > td:last-child,
.table.related-links > tbody > tr > td:last-child {
padding: 0 0 0 32px;
}
/* first row starts at the standard 18px below the kicker */
#related-searches .table.related-links > tbody > tr:first-child td a {
padding-top: 0;
}
.related-links td a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid #ececea;
font-size: 16px;
line-height: 1.4;
color: #4a443f;
transition: color 150ms;
}
.related-links td a:after {
content: '\203A';
color: #8a7f75;
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
.related-links td a:hover,
.related-links td a:focus {
color: #C06014;
text-decoration: none;
}
/* new search: mirror the homepage hero pill exactly - flex row of
[20px grey magnifier][18px input][pill Search button], white 999px pill,
grey outline turning orange on focus (the bootstrap grid inside the
legacy markup becomes the flex row) */
.lmm-secondary .listingsSearch.advancedSearch {
position: relative;
border-radius: 999px;
border: 1px solid #ccc !important;
box-shadow: none;
padding: 10px 12px;
background: #fff;
transition: border-color 120ms ease;
}
.lmm-secondary .listingsSearch.advancedSearch:focus-within {
border-color: #C06014 !important;
}
.lmm-secondary .listingsSearch.advancedSearch > .row {
display: flex;
align-items: center;
margin: 0;
}
.lmm-secondary .listingsSearch.advancedSearch > .row > .col-sm-10 {
flex: 1 1 auto;
min-width: 0;
width: auto;
padding: 0;
float: none;
}
.lmm-secondary .listingsSearch.advancedSearch > .row > .col-sm-2 {
flex: 0 0 auto;
width: auto;
padding: 0;
float: none;
}
/* the legacy markup puts the magnifier inside .autocomplete-search-box AFTER
the input - flex-order it to the front and style it like the homepage glyph */
.lmm-secondary .listingsSearch.advancedSearch .form-group {
display: flex;
align-items: center;
position: relative;
}
.lmm-secondary .listingsSearch.advancedSearch .autocomplete-search-box {
order: -1;
position: static;
flex: 0 0 auto;
margin: 0 10px 0 12px;
color: #767676;
font-size: 20px;
pointer-events: none;
width: auto;
height: auto;
}
.lmm-secondary .listingsSearch.advancedSearch input.auto-complete-entry {
flex: 1 1 auto;
min-width: 0;
border: 0;
box-shadow: none;
height: auto;
font-size: 18px;
background: transparent;
margin: 0;
padding: 2px 44px 2px 0; /* right space reserved for the injected clear-X */
}
.lmm-secondary .advancedSearchButton {
border-radius: 999px;
padding: 10px 20px !important;
}
/* the floating results card: detached, rounded, soft shadow (matches the
homepage hero treatment - a 999px pill fights an attached panel) */
.lmm-secondary .listingsSearch.advancedSearch .ai-autocomplete-dropdown {
left: 12px;
right: 12px;
margin-top: 8px;
border-radius: 16px;
border-color: #ececea;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
.lmm-secondary .listingsSearch.advancedSearch .ai-autocomplete-dropdown.ai-autocomplete-dropdown-flip-up {
margin-top: 0;
margin-bottom: 8px;
}
/* --------------------------------------------------------------------------
17. GENERIC POLISH
-------------------------------------------------------------------------- */
/* keep a consistent gap rhythm between the main column blocks */
.lmm-main-light .row.blueH1 {
margin-top: 10px;
}
/* the show-more fade link */
.se-show-more-link,
.show-more-link {
color: #C06014;
font-weight: 700;
}
/* --------------------------------------------------------------------------
18. MOBILE LAYOUT + RHYTHM
Fixes from the phone-width audit: dead space between the media pills and
the gallery, the oversized location flag, the tower of full-width related
category buttons, the two cramped related-search columns, and the square
faux search input (the desktop pill form is hidden-xs).
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* media stage -> gallery: the pill row's own bottom margin goes, the
gallery wrapper provides the standard 34px section gap (matches the
panel-to-panel rhythm measured on phones) */
#media-carousel-links a {
margin-bottom: 0;
}
.lmm-main-light .col-xs-12 > .margin-bottom-big.margin-top-big {
margin-top: 34px;
}
/* the location card's flag arrives inline-sized at 80x60 - too loud when
everything stacks */
#locations-map .well .flag-icon {
width: 56px !important;
height: 42px !important;
}
/* related categories: wrapping chips, not a full-width button tower
(the markup carries btn-block-xs-only) */
#related-categories-buttons .btn.btn-pink {
display: inline-block !important;
width: auto !important;
padding: 8px 14px;
margin: 0 6px 8px 0;
}
/* related searches: two columns don't fit a phone - stack them */
#related-searches .table.related-links > tbody > tr > td,
.table.related-links > tbody > tr > td,
#related-searches .table.related-links > tbody > tr > td:last-child,
.table.related-links > tbody > tr > td:last-child {
display: block;
width: 100%;
padding: 0;
}
/* faux search input (tap target for the search overlay): the homepage
mobile pill recipe instead of the square input + attached button */
.lmm-secondary .site-search-faux-input.mobile-search-inner-container {
display: flex !important; /* the element's visible-xs class is display: block !important */
align-items: center;
height: auto;
border-radius: 999px;
padding: 8px 8px 8px 18px;
}
.lmm-secondary .site-search-faux-input.mobile-search-inner-container .site-search-faux-input-text {
position: static;
transform: none;
flex: 1 1 auto;
min-width: 0;
}
.lmm-secondary .site-search-faux-input.mobile-search-inner-container .site-search-faux-input-icon {
position: static;
flex: 0 0 auto;
width: auto;
margin-left: 10px;
padding: 10px 20px;
border-radius: 999px;
font-size: 16px;
}
}