/* ─── Design tokens ──────────────────────────────────────────────────── */
:root {
--font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
--font-display: "Halvar", "Archivo", "Helvetica Neue", Arial, sans-serif;
--font-accent: "Botanical Scribe", "Times New Roman", serif;
--color-ink: #111111;
--color-ink-soft: #2a2a2a;
--color-muted: #7a7570;
--color-line: #e6e3df;
--color-surface: #ffffff;
--color-bg: #f7f4ef;
--color-bg-warm: #ede9e2;
--letter-spacing-wide: 0.06em;
--letter-spacing-xl: 0.18em;
--radius-pill: 100px;
--transition: 0.2s ease;
}
/* ─── Fonts ──────────────────────────────────────────────────────────── */
@font-face {
font-family: "Halvar";
src: url("../fonts/Halvar-Mittelschrift-Regular-Demo.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Botanical Scribe";
src: url("../fonts/BotanicalScribe.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ─── Reset / base ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
background: var(--color-bg);
color: var(--color-ink);
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: var(--letter-spacing-wide);
margin: 0 0 1rem;
}
p {
margin: 0 0 0.5rem;
}
img {
display: block;
max-width: 100%;
}
.container {
width: min(1140px, 94vw);
margin: 0 auto;
}
/* ─── Header ─────────────────────────────────────────────────────────── */
.site-header {
position: relative;
z-index: 100;
padding: 20px 5vw;
background: var(--color-surface);
border-bottom: 1px solid var(--color-line);
transition: background var(--transition), border-color var(--transition);
}
/* On the home page, float the header over the hero */
.home .site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
background: transparent;
border-bottom: none;
}
/* ─── CMS Toolbar offset ──────────────────────────────────────────────── */
/* When the CMS toolbar is visible it is 46px tall and Django CMS adds
the class cms-toolbar-expanded to . Shift our absolute/fixed
header down so it isn't hidden behind the toolbar. */
.cms-toolbar-expanded .home .site-header {
top: 46px;
}
/* For non-home pages the header is in normal flow, but the toolbar sits
on top of the page at position:fixed, so we need to push the body down. */
.cms-toolbar-expanded body {
padding-top: 46px;
}
/* Undo the extra body padding on the home page because the header
is absolutely positioned over the hero — the hero handles the offset. */
.cms-toolbar-expanded .home {
padding-top: 0;
}
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.site-header__logo {
grid-column: 2;
justify-self: center;
}
.site-header__right {
grid-column: 3;
justify-self: end;
}
.site-header__logo {
display: flex;
align-items: center;
}
.site-header__logo-img {
height: 32px;
width: auto;
display: block;
/* Logo is white — invert to black on light header */
filter: invert(1);
transition: opacity var(--transition);
}
.site-header__logo:hover .site-header__logo-img {
opacity: 0.7;
}
/* On home page the header floats over the hero — logo stays white */
.home .site-header .site-header__logo-img {
filter: none;
}
/* Hide navbar logo on home page (large logo shown in hero instead) */
.home .site-header__logo {
display: none;
}
.site-header__right {
display: flex;
align-items: center;
gap: 20px;
}
/* ─── Language dropdown ──────────────────────────────────────────────── */
.lang-dropdown {
position: relative;
}
.lang-dropdown__toggle {
display: flex;
align-items: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px 6px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: inherit;
transition: opacity var(--transition);
}
.lang-dropdown__toggle:hover {
opacity: 0.7;
}
.lang-dropdown__current {
line-height: 1;
}
.lang-dropdown__caret {
width: 9px;
height: 6px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.lang-dropdown--open .lang-dropdown__caret {
transform: rotate(180deg);
}
.lang-dropdown__list {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 72px;
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: 6px;
padding: 4px 0;
list-style: none;
margin: 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 300;
}
.lang-dropdown--open .lang-dropdown__list {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.lang-dropdown__option {
display: block;
padding: 7px 14px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
transition: color var(--transition), background var(--transition);
}
.lang-dropdown__option:hover {
color: var(--color-ink);
background: var(--color-bg);
}
.lang-dropdown__option--active {
color: var(--color-ink);
}
/* On home page the header floats over the hero — keep text white */
.home .site-header .lang-dropdown__toggle,
.home .site-header .hamburger {
color: #fff;
}
/* Inside the slide-in menu the list opens upward */
.nav-menu .lang-dropdown__list {
top: auto;
bottom: calc(100% + 6px);
}
.home .hamburger {
color: #fff;
}
/* Hamburger */
.hamburger {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
flex-direction: column;
gap: 5px;
}
.hamburger span {
display: block;
width: 22px;
height: 1.5px;
background: var(--color-ink);
transition: background var(--transition);
}
.home .site-header .hamburger span {
background: #fff;
}
/* ─── Home page – no top padding on main ────────────────────────────── */
.home .site-main {
padding-top: 0;
}
.site-main {
padding-top: 0;
}
/* ─── Hero ───────────────────────────────────────────────────────────── */
.home-hero {
position: relative;
height: 85vh;
min-height: 480px;
background-color: var(--color-bg-warm);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* CMS-managed hero background image */
.home-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.home-hero__bg .cms-placeholder,
.home-hero__bg figure,
.home-hero__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
padding: 0;
display: block;
}
.home-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(40, 35, 28, 0.22);
}
.home-hero__brand {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.home-hero__logo {
width: clamp(200px, 36vw, 480px);
height: auto;
display: block;
/* Logo is white — perfect on the dark hero overlay */
}
/* ─── Halls section ──────────────────────────────────────────────────── */
.halls-section {
background: var(--color-surface);
padding: 80px 0 96px;
}
.halls-title {
font-family: var(--font-display);
font-size: clamp(18px, 2.5vw, 28px);
letter-spacing: var(--letter-spacing-xl);
text-transform: uppercase;
text-align: center;
font-weight: 700;
margin-bottom: 56px;
color: var(--color-ink);
}
/* TextPlugin wraps content in or
— keep styling consistent */
.halls-title p,
.halls-title h1,
.halls-title h2,
.halls-title h3,
.halls-title div {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-align: inherit;
color: inherit;
margin: 0;
}
.halls-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px 32px;
}
/* ─── Hall card ──────────────────────────────────────────────────────── */
.hall-card {
display: flex;
flex-direction: column;
}
.hall-card__photo-wrap {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-bg-warm);
position: relative;
margin-bottom: 16px;
}
.hall-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.hall-card__photo-wrap:hover .hall-card__img {
transform: scale(1.04);
}
/* Placeholder when no photo uploaded */
.hall-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Per-room placeholder tones */
.hall-card--content .hall-card__placeholder { background: #e8e2d9; }
.hall-card--cyclorama .hall-card__placeholder { background: #dfe6e2; }
.hall-card--loft .hall-card__placeholder { background: #2e2e2e; }
.hall-card--classic .hall-card__placeholder { background: #ede8df; }
.hall-card--boho .hall-card__placeholder { background: #e4e1d8; }
.hall-card--pro .hall-card__placeholder { background: #d0ccc6; }
.hall-card__soon {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-ink-soft);
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
padding: 8px 22px;
}
/* Card text area */
.hall-card__body {
display: flex;
flex-direction: column;
flex: 1;
}
.hall-card__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
margin-bottom: 10px;
border-bottom: 1px solid var(--color-line);
padding-bottom: 10px;
}
.hall-card__name {
font-family: var(--font-display);
font-size: clamp(15px, 1.3vw, 18px);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink);
line-height: 1.1;
}
.hall-card__price {
font-family: var(--font-display);
font-size: clamp(14px, 1.2vw, 17px);
font-weight: 700;
color: var(--color-ink);
white-space: nowrap;
letter-spacing: 0.04em;
}
.hall-card__price-unit {
font-size: 0.65em;
font-weight: 400;
vertical-align: super;
letter-spacing: 0;
}
.hall-card__desc {
font-size: 10px;
line-height: 1.65;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.hall-card__equip-label {
font-size: 8.5px;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 3px;
opacity: 0.75;
}
.hall-card__equip {
list-style: none;
padding: 0;
margin: 0 0 0 0;
font-size: 8.5px;
color: var(--color-muted);
line-height: 1.8;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.75;
}
/* Teaser wrapper — normalise output from CMS TextPlugin */
.hall-card__teaser {
flex: 1;
}
.hall-card__teaser p,
.hall-card__teaser li {
font-size: 10px;
line-height: 1.65;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
.hall-card__teaser ul,
.hall-card__teaser ol {
list-style: none;
padding: 0;
margin: 0;
font-size: 8.5px;
opacity: 0.75;
}
.hall-card__teaser strong {
font-weight: 600;
color: var(--color-ink);
}
.hall-card__footer {
margin-top: auto;
padding-top: 16px;
display: flex;
justify-content: flex-end;
}
/* ─── "Learn more" button ────────────────────────────────────────────── */
.btn-learn {
display: inline-block;
background: var(--color-ink);
color: #fff;
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: lowercase;
padding: 10px 24px;
border-radius: var(--radius-pill);
transition: background var(--transition), transform var(--transition);
}
.btn-learn:hover {
background: var(--color-ink-soft);
transform: translateY(-1px);
}
/* ─── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
background: #111110;
border-top: none;
padding: 36px 0 28px;
font-size: 10px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.site-footer__inner {
display: flex;
flex-direction: column;
gap: 20px;
}
.site-footer__info {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px 48px;
}
.site-footer__col p {
margin: 0;
line-height: 1.9;
color: rgba(255, 255, 255, 0.45);
}
.site-footer__col a {
color: rgba(255, 255, 255, 0.45);
transition: color var(--transition);
}
.site-footer__col a:hover {
color: rgba(255, 255, 255, 0.85);
}
.site-footer__col--links {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
.site-footer__col--links a {
display: block;
font-size: 10px;
letter-spacing: 0.07em;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.25);
}
.site-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 18px;
flex-wrap: wrap;
gap: 10px;
}
.site-footer__copy {
font-family: var(--font-accent);
text-transform: none;
letter-spacing: 0.03em;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.site-footer__legal {
display: flex;
gap: 28px;
}
.site-footer__legal a {
color: rgba(255, 255, 255, 0.45);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.25);
transition: color var(--transition);
}
.site-footer__legal a:hover {
color: rgba(255, 255, 255, 0.85);
}
/* ─── Nav overlay ────────────────────────────────────────────────────── */
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.45);
z-index: 199;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.nav-overlay--active {
opacity: 1;
pointer-events: auto;
}
/* ─── Slide-in nav menu ──────────────────────────────────────────────── */
.nav-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(440px, 100vw);
background: var(--color-surface);
z-index: 200;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.38s cubic-bezier(0.77, 0, 0.175, 1);
overflow-y: auto;
}
.nav-menu--open {
transform: translateX(0);
}
/* Lock body scroll when menu is open */
.menu-open {
overflow: hidden;
}
/* Top bar: language switcher + close */
.nav-menu__top {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
padding: 22px 28px;
flex-shrink: 0;
}
.lang-switcher--menu {
font-size: 11px;
}
.nav-menu__close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--color-ink);
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition);
}
.nav-menu__close:hover {
opacity: 0.55;
}
.nav-menu__close svg {
width: 22px;
height: 22px;
}
/* Nav links list */
.nav-menu__list {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
padding: 32px 28px 60px;
list-style: none;
margin: 0;
}
.nav-menu__item {
text-align: center;
width: 100%;
}
.nav-menu__link {
display: inline-block;
font-family: var(--font-display);
font-size: clamp(16px, 2.8vw, 22px);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ink);
padding: 10px 0;
border-bottom: 1.5px solid transparent;
transition: border-color var(--transition);
}
.nav-menu__link:hover,
.nav-menu__item--active .nav-menu__link {
border-bottom-color: var(--color-ink);
}
/* Sub-items (second level) */
.nav-menu__sub {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.nav-menu__link--sub {
font-size: clamp(12px, 1.8vw, 14px);
font-weight: 400;
letter-spacing: 0.12em;
padding: 6px 0;
color: var(--color-muted);
}
.nav-menu__link--sub:hover {
color: var(--color-ink);
border-bottom-color: var(--color-ink);
}
/* ─── Lang switcher globe icon ───────────────────────────────────────── */
.lang-switcher__globe {
width: 16px;
height: 16px;
flex-shrink: 0;
vertical-align: middle;
margin-bottom: 1px;
}
/* ─── Studio page ────────────────────────────────────────────────────── */
/* 1. Hero split */
.studio-hero {
display: grid;
grid-template-columns: minmax(320px, 42%) 1fr;
min-height: 70vh;
background: #f4f3f1;
}
.studio-hero__left {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(36px, 7vw, 84px) clamp(24px, 4vw, 56px);
background: #f4f3f1;
}
.studio-hero__content h1 {
font-size: clamp(30px, 4vw, 50px);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
line-height: 1.05;
}
.studio-hero__content p {
font-size: 9px;
line-height: 1.9;
color: var(--color-muted);
text-transform: uppercase;
margin-bottom: 7px;
max-width: 40ch;
}
.studio-hero__content ul {
list-style: none;
padding: 0;
margin: 0 0 28px;
font-size: 9px;
color: var(--color-muted);
text-transform: uppercase;
line-height: 1.9;
}
.studio-hero__content ul li::before {
content: "– ";
color: var(--color-muted);
}
.studio-hero__rate {
margin: 18px 0 0;
font-family: var(--font-display);
color: var(--color-ink) !important;
font-size: 11px !important;
letter-spacing: 0.08em;
}
.btn-book-hall {
display: inline-block;
background: var(--color-ink);
color: #fff;
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 12px 28px;
border-radius: var(--radius-pill);
margin-top: 8px;
transition: background var(--transition), transform var(--transition);
align-self: flex-start;
}
.btn-book-hall:hover {
background: var(--color-ink-soft);
transform: translateY(-1px);
}
.studio-hero__right {
position: relative;
overflow: hidden;
background: #ece8df;
min-height: 56vw;
max-height: 760px;
}
.studio-hero__photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.studio-hero__photo-placeholder {
width: 100%;
height: 100%;
min-height: 54vh;
}
/* Per-room placeholder tones (reuse landing page palette) */
.studio-photo-placeholder--content { background: #e8e2d9; }
.studio-photo-placeholder--cyclorama { background: #dfe6e2; }
.studio-photo-placeholder--loft { background: #2e2e2e; }
.studio-photo-placeholder--classic { background: #ede8df; }
.studio-photo-placeholder--boho { background: #e4e1d8; }
.studio-photo-placeholder--studio { background: var(--color-bg-warm); }
/* 0. Home-card teaser placeholder — hidden on public page, visible in CMS edit mode */
.studio-card-teaser {
display: none;
}
.cms-toolbar-expanded .studio-card-teaser {
display: block;
border: 2px dashed #aaa;
padding: 16px;
margin: 16px 24px;
background: #fffbe6;
}
.cms-toolbar-expanded .studio-card-teaser::before {
content: "Home card teaser (shown on landing page cards)";
display: block;
font-size: 11px;
color: #888;
margin-bottom: 8px;
font-family: sans-serif;
}
/* 2. Overview / rules */
.studio-overview {
padding: clamp(54px, 6vw, 86px) 0;
border-top: 1px solid #e8e4de;
background: var(--color-surface);
}
.studio-overview__inner {
display: grid;
grid-template-columns: minmax(240px, 0.95fr) minmax(320px, 1.45fr);
gap: clamp(30px, 6vw, 92px);
align-items: start;
}
.studio-overview__gallery {
min-height: 380px;
}
.studio-overview__gallery img,
.studio-overview__gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 2px;
}
.studio-overview__gallery-placeholder {
aspect-ratio: 3 / 4;
background: #efebe4;
border: 1px solid #e4dfd7;
}
.studio-overview__text h1,
.studio-overview__text h2,
.studio-overview__text h3 {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 14px;
margin-top: 26px;
}
.studio-overview__text p,
.studio-overview__text li {
font-size: 9px;
line-height: 2;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
max-width: 66ch;
}
.studio-overview__text ul {
padding-left: 0;
list-style: none;
margin: 0 0 12px;
}
.studio-overview__text li::before {
content: "– ";
color: var(--color-muted);
}
/* 3. Booking iframe */
.studio-booking {
background: #f4f3f1;
border-top: 1px solid #e8e4de;
padding: clamp(44px, 6vw, 88px) 0 96px;
}
.studio-booking__inner {
max-width: 980px;
margin: 0 auto;
padding: 0 5vw;
border: 1px solid #e3dfd9;
background: #fcfbf8;
border-radius: 16px;
box-shadow: 0 24px 54px rgba(17, 17, 17, 0.08);
overflow: hidden;
}
.booking-iframe {
display: block;
width: 100%;
min-height: 920px;
border: none;
background: transparent;
}
/* ─── Equipment page ─────────────────────────────────────────────────── */
/* Page wrapper */
body.equipment {
background: #ffffff;
}
.equip-page {
padding: 24px 0 80px;
}
/* 1. Header */
.equip-header {
margin-bottom: 36px;
}
.equip-header__title {
font-size: clamp(28px, 3.6vw, 48px);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.05;
margin-bottom: 10px;
}
.equip-header__sub {
font-size: 8.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-muted);
line-height: 1.8;
max-width: 70ch;
margin-bottom: 8px;
}
.equip-header__contacts {
display: flex;
gap: 12px;
align-items: center;
font-size: 8.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-ink);
}
.equip-header__contacts a {
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 2px;
}
.equip-header__contacts span {
color: var(--color-muted);
}
/* 2. Intro */
.equip-intro {
margin-bottom: 32px;
}
.equip-intro__heading {
font-size: clamp(18px, 2.2vw, 28px);
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.15;
margin-bottom: 14px;
max-width: 52ch;
}
.equip-intro p {
font-size: 8.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-muted);
line-height: 1.85;
max-width: 76ch;
margin-bottom: 8px;
}
.equip-intro__note {
color: var(--color-ink) !important;
}
.equip-intro__note strong {
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* 3. Room filter buttons */
.equip-rooms {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.equip-room-btn {
border: 1px solid #c8c5c0;
background: #ffffff;
color: var(--color-ink);
border-radius: var(--radius-pill);
padding: 9px 22px 8px;
font-family: var(--font-body);
font-size: 9.5px;
letter-spacing: 0.09em;
text-transform: uppercase;
cursor: pointer;
line-height: 1;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.equip-room-btn.is-active {
background: #111111;
border-color: #111111;
color: #ffffff;
}
/* 4. Category filter buttons */
.equip-cats {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 20px;
}
.equip-cat-btn {
border: 1px solid #d4d1cc;
background: #ffffff;
color: var(--color-ink);
border-radius: var(--radius-pill);
padding: 5px 14px 4px;
font-family: var(--font-body);
font-size: 8px;
letter-spacing: 0.09em;
text-transform: uppercase;
cursor: pointer;
line-height: 1;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.equip-cat-btn.is-active {
background: #111111;
border-color: #111111;
color: #ffffff;
}
/* 5. Info bar */
.equip-info-bar {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
margin-bottom: 22px;
align-items: start;
}
.equip-info-bar__left {
font-size: 8px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-muted);
line-height: 1.8;
}
.equip-info-bar__right {
font-size: 8px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-muted);
line-height: 1.8;
}
.equip-info-bar__label {
font-weight: 600;
color: var(--color-ink);
display: block;
margin-bottom: 4px;
}
/* 6. Grid */
.equip-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
.equip-card {
display: flex;
flex-direction: column;
}
.equip-card__img {
background: #f0efec;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.equip-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.equip-card__img-placeholder {
width: 100%;
height: 100%;
background: #e9e8e4;
}
.equip-card__name {
margin-top: 8px;
margin-bottom: 3px;
font-size: 8px;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.4;
color: var(--color-ink);
}
.equip-card__desc {
font-size: 7.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.6;
color: var(--color-muted);
}
.equip-empty {
font-size: 11px;
color: var(--color-muted);
grid-column: 1 / -1;
}
/* Legacy placeholder slots */
.section {
padding: 48px 0;
border-top: 1px solid var(--color-line);
}
.hero {
padding: 48px 0 32px;
}
/* ─── Studio page responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
.studio-hero {
grid-template-columns: 1fr;
}
.studio-hero__left {
padding: 48px 5vw 34px;
min-height: unset;
}
.studio-hero__right {
min-height: 68vw;
max-height: none;
}
.studio-overview__inner {
grid-template-columns: 1fr;
gap: 34px;
}
.studio-overview__gallery {
min-height: 54vw;
}
.studio-booking__inner {
padding: 0;
border-radius: 10px;
}
.equip-grid {
grid-template-columns: repeat(2, 1fr);
}
.equip-info-bar {
grid-template-columns: 1fr;
gap: 10px;
}
}
/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.halls-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.halls-grid {
grid-template-columns: 1fr;
}
.home-hero {
height: 60vh;
}
.site-footer__col--links {
margin-left: 0;
align-items: flex-start;
}
.equip-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Rules page ─────────────────────────────────────────────────────────── */
body.rules { background: #ffffff; }
.rules-page {
padding: 24px 0 80px;
}
.rules-header__title {
font-size: clamp(2.2rem, 5.5vw, 4.5rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.05;
margin-bottom: 56px;
}
/* columns applied to the cms-plugin wrapper that sits inside rules-body */
.rules-body > div {
columns: 3;
column-gap: 48px;
column-fill: balance;
}
.rules-body .rules-section {
break-inside: avoid;
margin-bottom: 36px;
}
.rules-body h3 {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
line-height: 1.4;
margin: 0 0 12px;
}
.rules-body p {
font-size: 0.62rem;
line-height: 1.8;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #111;
margin: 0 0 6px;
}
.rules-body strong {
font-weight: 700;
}
@media (max-width: 960px) {
.rules-body > div {
columns: 2;
column-gap: 36px;
}
}
@media (max-width: 600px) {
.rules-header__title { margin-bottom: 36px; }
.rules-body > div { columns: 1; }
}