/* Force-hide in-content TOC card that the theme injects (.toc) so we only use the right sidebar (.gh-toc) */
.gh-article .toc {
display: none !important;
}
/* Layout for festival page with sticky TOC */
.gh-grid {
display: grid;
gap: 32px;
}
.gh-grid-2col {
grid-template-columns: 2fr 1fr;
}
.gh-toc-aside {
position: sticky;
top: 96px;
align-self: start;
height: max-content;
}
.gh-toc {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
padding: 16px;
background: #fff;
}
.gh-toc-title {
font-weight: 700;
margin-bottom: 8px;
}
.gh-toc-nav {
display: flex;
flex-direction: column;
gap: 6px;
}
.toc-link {
font-size: 0.95rem;
line-height: 1.3;
text-decoration: none;
}
.toc-link--sub {
font-size: 0.9rem;
opacity: 0.85;
padding-left: 10px;
}
.toc-link.is-active {
font-weight: 700;
}
@media (max-width: 980px) {
.gh-grid-2col {
grid-template-columns: 1fr;
}
.gh-toc-aside {
position: static;
}
}
/* Browse Festivals visuals */
.browse-search {
margin-top: 8px;
}
/* Ghost native search button should look like the input */
.browse-search .ghost-native-search {
text-align: left;
cursor: text;
display: block;
border: none;
background: none;
color: inherit;
}
.browse-search .ghost-native-search__placeholder {
display: inline-block;
opacity: 0.6;
}
.browse-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
margin-top: 24px;
}
.browse-card,
.browse-card:link,
.browse-card:visited {
text-decoration: none;
color: inherit;
}
.browse-card {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
background: #fff;
transition:
transform 0.18s,
box-shadow 0.18s;
}
.browse-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.browse-card img {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 10px;
background: #f5f5f5;
}
.browse-card .title {
font-weight: 600;
}
.browse-card .subtitle {
font-size: 0.95rem;
color: var(--ghost-accent-8, #6b7280);
text-decoration: none;
}
/* --- Social Swing: month dropdown & date line --- */
.browse-head {
padding-top: 20px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.browse-intro {
margin: 12px 0 32px;
font-size: 1.05rem;
line-height: 1.6;
max-width: 70ch;
}
.browse-separator {
display: block;
height: 1px;
border: 0;
background: var(--gh-sep, rgba(0, 0, 0, 0.08));
margin: 24px 0;
}
.browse-search {
display: flex;
justify-content: center;
gap: 12px;
align-items: center;
}
.browse-search input[type='search'],
.browse-search .ghost-native-search,
.browse-search select#monthSearch {
border: none;
background: var(--gh-input-bg, #f0f2f4);
padding: 14px 18px;
border-radius: 16px;
outline: none;
font-size: 1rem;
}
.browse-search input[type='search'],
.browse-search .ghost-native-search {
width: 60%;
}
.browse-search select#monthSearch {
width: 20%;
min-width: 180px;
}
@media (max-width: 820px) {
.browse-search {
flex-direction: column;
align-items: stretch;
}
.browse-search input[type='search'],
.browse-search .ghost-native-search,
.browse-search select#monthSearch {
width: 100%;
}
}
.browse-card .subtitle {
margin-bottom: 2px;
}
.browse-card .date {
white-space: nowrap;
font-size: 0.9rem;
color: var(--ghost-accent-8, #6b7280);
}
/* --- Social Swing: square logo handling on Festivals page --- */
.festival-template .post-media {
display: flex;
justify-content: center;
}
.festival-template .post-media img.is-square-logo {
max-width: 360px;
max-height: 240px;
width: auto;
height: auto;
object-fit: contain;
margin: 0px auto 14px;
border-radius: 8px; /* optional: softer edges for logos with white bg */
}
@media (max-width: 980px) {
.festival-template .post-media img.is-square-logo {
max-width: 280px;
max-height: 200px;
}
}
/* --- Social Swing: force square hero image on Festivals templates --- */
.festival-template .post-media {
display: flex;
justify-content: center;
}
.festival-template .post-media img {
width: min(360px, 70%);
aspect-ratio: 1 / 1; /* force square box */
height: auto; /* height is derived from aspect-ratio */
object-fit: contain; /* keep full logo/image visible */
background: transparent; /* or #fff if pref */
border-radius: 12px;
box-shadow: none;
margin: 0px auto 14px;
}
@media (max-width: 980px) {
.festival-template .post-media img {
width: min(300px, 85%);
}
}
/* --- Social Swing: force 200x200 square featured image on Festivals template --- */
.festival-template .post-media {
display: flex;
justify-content: center;
}
.festival-template .post-media .post-featured-image {
width: 200px;
height: 200px;
margin: 8px auto 14px;
display: block;
}
.festival-template .post-media .post-featured-image picture,
.festival-template .post-media .post-featured-image img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block;
}
@media (max-width: 620px) {
.festival-template .post-media .post-featured-image {
width: 180px;
height: 180px;
}
}
/* --- Social Swing: Products grid columns on Festivals template --- */
.festival-template .ss-products-grid {
display: grid;
grid-template-columns: repeat(var(--ss-cols, 1), minmax(0, 1fr));
gap: 16px;
margin: 12px 0 12px;
}
/* Social Swing: Browse Festivals — unified darker transparent dark mode 2025-09-17 */
:root {
--ss-surface: #f3f4f61a;
--ss-border: #e8eaed;
--ss-elev: 0 1px 2px rgba(0, 0, 0, 0.04);
--ss-title: #6f7680;
--ss-muted: #9aa1aa;
--ss-deals-border: #eceff3;
--ss-deals-button-text: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--ss-surface: #ffffff0a; /* one unified surface for ALL controls/cards */
--ss-border: rgba(255, 255, 255, 0.06); /* ultra subtle border */
--ss-elev: 0 1px 2px rgba(0, 0, 0, 0.22);
--ss-title: #c9cdd3; /* neutral title */
--ss-muted: #a8adb4; /* secondary text */
--ss-deals-border: rgba(232, 234, 237, var(--ss-border-alpha)) !important;
--ss-deals-button-text: #0a0808 !important;
}
}
/* Scope color-scheme so native controls render properly */
.browse-scope,
.browse-search,
.browse-card {
color-scheme: light dark;
}
.browse-scope .browse-search,
.browse-search {
margin-top: 25px !important;
}
/* ---------- Festival search input (with icon) ---------- */
.browse-scope .browse-search input[type='search'],
.browse-scope .browse-search .ghost-native-search,
.browse-search input[type='search'],
.browse-search .ghost-native-search {
background-image:
url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239aa1aa%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C/circle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C/line%3E%3C/svg%3E'),
linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
background-color: var(--ss-surface) !important;
background-repeat: no-repeat, no-repeat !important;
background-position:
left 14px center,
0 0 !important;
background-size:
18px 18px,
100% 100% !important;
padding-left: 46px !important;
border: 1px solid var(--ss-border) !important;
border-radius: 16px !important;
box-shadow: var(--ss-elev) !important;
outline: none !important;
color: inherit !important;
font-size: 1rem !important;
-webkit-appearance: none !important;
appearance: none !important;
}
@media (prefers-color-scheme: dark) {
.browse-scope .browse-search input[type='search'],
.browse-scope .browse-search .ghost-native-search,
.browse-search input[type='search'],
.browse-search .ghost-native-search {
background-image:
url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a8adb4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C/circle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C/line%3E%3C/svg%3E'),
linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
}
}
/* ---------- Months select (no icon) ---------- */
.browse-scope .browse-search select#monthSearch,
.browse-search select#monthSearch {
background-color: var(--ss-surface) !important;
background-image: linear-gradient(
var(--ss-surface),
var(--ss-surface)
) !important;
border: 1px solid var(--ss-border) !important;
border-radius: 16px !important;
box-shadow: var(--ss-elev) !important;
color: inherit !important;
-webkit-appearance: none !important;
appearance: none !important;
padding: 14px 18px !important;
font-size: 1rem !important;
}
/* ---------- Cards (same unified surface & border) ---------- */
.browse-scope .browse-card,
.browse-card {
background-color: var(--ss-surface) !important;
background-image: linear-gradient(
var(--ss-surface),
var(--ss-surface)
) !important;
border: 1px solid var(--ss-border) !important;
border-radius: 14px !important;
box-shadow: var(--ss-elev) !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 18px !important;
}
/* Title & metadata */
.browse-card .title,
.browse-card h3,
.browse-card .texts .title,
.browse-card a.title {
}
.browse-card .subtitle,
.browse-card .date {
color: var(--ss-muted) !important;
}
/* Clean overlays */
.browse-card::before {
content: none !important;
}
/* override v19 */
.browse-card .title,
.browse-card h3,
.browse-card .texts .title,
.browse-card a.title {
}
/* Force-hide helper for Browse filters */
.browse-card.is-hidden,
.browse-grid > .is-hidden,
.is-hidden.browse-card {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Browse hard-hide rules */
.browse-card.is-hidden,
.browse-grid > .is-hidden,
.gh-feed > .is-hidden,
.kg-cards > .is-hidden,
.posts-feed > .is-hidden,
.cards > .is-hidden,
.grid > .is-hidden,
[data-browse-item].is-hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Scoped hide rules: only apply inside Browse Festivals page containers */
.browse-festivals-page .browse-card.is-hidden,
.browse-festivals-page .browse-grid > .is-hidden,
.browse-festivals-page .gh-feed > .is-hidden,
.browse-festivals-page .kg-cards > .is-hidden,
.browse-festivals-page .posts-feed > .is-hidden,
.browse-festivals-page .cards > .is-hidden,
.browse-festivals-page .grid > .is-hidden,
.browse-festivals-page [data-browse-item].is-hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* === Browse Festivals controls unified sizing === */
.browse-festivals-page .browse-search select#styleSearch,
.browse-festivals-page .browse-search select#monthSearch,
.page-template-browse-festivals .browse-search select#styleSearch,
.page-template-browse-festivals .browse-search select#monthSearch {
box-sizing: border-box;
height: 56px;
min-height: 56px;
border-radius: 14px;
border: 1px solid rgba(0, 0, 0, 0.08);
background-color: var(--ss-surface, #fff);
appearance: none;
-webkit-appearance: none;
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 20px 20px;
padding: 0 48px 0 18px; /* match top search height */
line-height: 56px;
}
/* Light chevron on both */
.browse-festivals-page .browse-search select#styleSearch,
.browse-festivals-page .browse-search select#monthSearch,
.page-template-browse-festivals .browse-search select#styleSearch,
.page-template-browse-festivals .browse-search select#monthSearch {
background-image: url("data:image/svg+xml;utf8, in the main content area */
display: none !important;
}
/* Do NOT affect cards, lists or excerpts elsewhere */
.gh-card .gh-excerpt p,
.post-card .post-excerpt p {
display: block !important;
}
/* --- SocialSwing v3: Hide ONLY the 2nd intro paragraph in Browse Festivals header --- */
.browse-festivals-page .browse-head p:nth-of-type(2) {
display: none !important;
}
/* --- Search popup: show festival date next to meta line (only on Browse Festivals page) --- */
.page-template.page-browse-festivals .ss-festival-date {
opacity: 0.75;
font-size: 0.95em;
white-space: nowrap;
}