/* ========================================================= KEDI STUDIO — main stylesheet (v2, location-based) Look: screen-printed poster on warm ivory. Thick ink outlines, hard offset shadows, flat neon paint colours, and realistic paint splats (assets/images/splats/) bleeding in from page edges. Contents 1 Tokens (light, dark, studio accents) 19 Gallery + lightbox 2 Base + type 20 Testimonials 3 Layout 21 FAQ 4 Buttons 22 CTA banner 5 Header + nav 23 Page header 6 Studio dropdowns 24 Split section 7 Mobile nav 25 Forms 8 Paint splats + paint trail 26 Map 9 Landing page 27 Studio cards 10 Studio tiles 28 Booking widget 11 Studio hero 29 Included grid / add-ons 12 Studio badge 30 Coming soon 13 Feature strip 31 Footer 14 Section headings 32 404 / misc 15 Experiences 33 Glow in the Dark pages 16 Pricing + private panel 34 Dark mode refinements 17 Timeline 35 Logo variants 18 Private events + clients marquee 36 Scroll-reveal animations ========================================================= */ /* ---------- 1. Tokens ---------- */ :root { /* Surfaces & ink */ --canvas: #F5F0E1; /* ivory page background */ --paper: #FFFDF6; /* cards */ --ink: #17130F; --ink-soft: rgba(23, 19, 15, 0.72); --ink-faint: rgba(23, 19, 15, 0.14); --ink-fixed: #17130F; /* stays dark in every mode (text on neon) */ --paper-fixed: #FFFDF6; /* Neon palette (complementary colours for paint, buttons, accents) */ --neon-pink: #FF10F0; --hot-pink: #FF1493; --neon-green: #39FF14; --neon-lime: #CCFF00; --neon-cyan: #00FFFF; --neon-blue: #1B03FF; --electric-blue: #00A2FF; --neon-purple: #BC13FE; --neon-orange: #FF5F1F; --neon-yellow: #FFFF33; --neon-red: #FF3131; /* Each studio sets its own accent (see body.loc-* below). */ --loc-accent: var(--hot-pink); /* Full-width dark bands (feature strip, CTA banner, footer). */ --band-bg: #17130F; --band-text: #FAF6EC; --band-text-soft: rgba(250, 246, 236, 0.74); --band-rule: rgba(250, 246, 236, 0.18); --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --border-w: 3px; --radius: 10px; --radius-lg: 16px; --shadow-sm: 4px 4px 0 var(--ink); --shadow-md: 8px 8px 0 var(--ink); --wrap-w: 1220px; --wrap-w-narrow: 800px; --section-space: clamp(3.25rem, 6.5vw, 6.25rem); --header-h: 76px; } /* Studio accents */ body.loc-elephant-and-castle { --loc-accent: var(--hot-pink); } body.loc-camden { --loc-accent: var(--neon-lime); } /* Coming-soon studios keep a grey tile, but their buttons stay lively. */ body.loc-twickenham { --loc-accent: var(--neon-yellow); } /* Dark mode: set on by the head script (default is always light). */ :root[data-theme="dark"] { --canvas: #14110E; --paper: #211C17; --ink: #F5F0E8; --ink-soft: rgba(245, 240, 232, 0.74); --ink-faint: rgba(245, 240, 232, 0.16); --band-bg: #0B0907; --band-text: #F5F0E8; --band-text-soft: rgba(245, 240, 232, 0.72); --band-rule: rgba(245, 240, 232, 0.16); } /* ---------- 2. Base + type ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; } ul, ol { padding: 0; margin: 0; list-style: none; } button { font-family: inherit; } address { font-style: normal; } h1, h2, h3, h4 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; line-height: 1.02; margin: 0 0 0.5em; letter-spacing: -0.025em; } h1, h2 { text-transform: uppercase; font-weight: 600; letter-spacing: -0.035em; overflow-wrap: break-word; } h3 { text-transform: uppercase; letter-spacing: -0.015em; } h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); } h2 { font-size: clamp(1.8rem, 3.7vw, 2.75rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); } p { max-width: 64ch; margin: 0 0 1em; } .entry-content p { max-width: 70ch; } .entry-content > *:last-child { margin-bottom: 0; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 999; background: var(--ink); color: var(--canvas); padding: 0.75rem 1.25rem; border-radius: var(--radius); transition: top 0.15s ease; } .skip-link:focus { top: 1rem; width: auto; height: auto; clip: auto; overflow: visible; } /* ---------- 3. Layout ---------- */ .wrap { max-width: var(--wrap-w); margin-inline: auto; padding-inline: 1.5rem; } .wrap--narrow { max-width: var(--wrap-w-narrow); } section { padding-block: var(--section-space); position: relative; } main { overflow-x: clip; } @supports not (overflow: clip) { main { overflow-x: hidden; } } /* ---------- 4. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-body); font-weight: 800; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; line-height: 1.2; padding: 0.85em 1.5em; border: var(--border-w) solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--canvas); box-shadow: var(--shadow-sm); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; cursor: pointer; } .btn:hover, .btn:focus-visible { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); } .btn .icon { width: 18px; height: 18px; } .btn--primary { background: var(--loc-accent); color: var(--ink-fixed); border-color: var(--ink-fixed); } .btn--dark { background: var(--ink-fixed); color: var(--paper-fixed); border-color: var(--ink-fixed); box-shadow: 4px 4px 0 rgba(23, 19, 15, 0.35); } .btn--dark:hover, .btn--dark:focus-visible { box-shadow: 0 0 0 transparent; } .btn--outline { background: var(--paper); color: var(--ink); } .btn--text { background: none; border-color: transparent; box-shadow: none; color: var(--ink); padding-inline: 0.4em; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .btn--text:hover, .btn--text:focus-visible { transform: none; text-decoration-color: var(--loc-accent); } .btn--ghost-invert { background: transparent; border-color: var(--band-text); color: var(--band-text); box-shadow: none; } .btn--ghost-invert:hover, .btn--ghost-invert:focus-visible { background: var(--band-text); color: var(--band-bg); transform: none; } .btn--lg { padding: 1em 1.9em; font-size: 0.95rem; } .btn--sm { padding: 0.6em 1.05em; font-size: 0.78rem; box-shadow: 3px 3px 0 var(--ink); } .btn--block { width: 100%; } .link-arrow { display: inline-flex; align-items: center; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; } .link-arrow:hover { border-bottom-color: var(--loc-accent); } /* ---------- 5. Header + nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--canvas); border-bottom: var(--border-w) solid var(--ink); } .site-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); padding-block: 0.6rem; } .site-header__brand { display: flex; align-items: center; gap: 0.85rem; margin-right: auto; min-width: 0; } .site-logo__text { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; text-decoration: none; color: inherit; white-space: nowrap; text-transform: uppercase; } .primary-nav { display: none; } .nav-menu { display: flex; gap: 1.1rem; align-items: center; } .nav-menu > li { position: relative; } .nav-menu a { text-decoration: none; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; display: block; padding-block: 0.45rem; } .nav-menu a:hover, .nav-menu .current-menu-item > a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--loc-accent); } .nav-menu .sub-menu { position: absolute; top: 100%; left: -1rem; z-index: 110; min-width: 230px; background: var(--canvas); color: var(--ink); border: var(--border-w) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 0.45rem; display: flex; flex-direction: column; gap: 0.1rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } .nav-menu > li:hover > .sub-menu, .nav-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu .sub-menu a { padding: 0.55rem 0.75rem; border-radius: 6px; } .nav-menu .sub-menu a:hover { background: var(--loc-accent); color: var(--ink-fixed); text-decoration: none; } .nav-menu > li.menu-item-has-children > a::after { content: ''; display: inline-block; margin-left: 0.4em; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; vertical-align: middle; } .site-header__cta { display: none; } .theme-toggle { background: transparent; border: 2px solid var(--ink-faint); border-radius: 999px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; flex-shrink: 0; transition: border-color 0.15s ease, transform 0.15s ease; } .theme-toggle:hover { border-color: currentColor; } .theme-toggle:active { transform: scale(0.94); } .theme-toggle svg { width: 17px; height: 17px; display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle__label { display: none; } .nav-toggle { background: none; color: inherit; border: var(--border-w) solid currentColor; border-radius: var(--radius); width: 46px; height: 40px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; } .nav-toggle__bar { width: 22px; height: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Landing page: transparent bar over the video. */ .site-header--overlay { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, rgba(8, 6, 4, 0.6), rgba(8, 6, 4, 0)); border-bottom: 0; color: #FFFFFF; } .site-header--overlay .theme-toggle { border-color: rgba(255, 255, 255, 0.35); } .site-header--overlay .nav-menu > li > a:hover { text-decoration-color: var(--neon-lime); } @media (min-width: 1240px) { .primary-nav { display: block; } .site-header__cta { display: flex; align-items: center; gap: 0.85rem; } .nav-toggle, .mobile-nav { display: none !important; } } /* ---------- 6. Studio dropdowns ---------- */ .loc-dd { position: relative; } .loc-dd__summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 0.45em; } .loc-dd__summary::-webkit-details-marker { display: none; } .loc-dd__chevron { width: 16px; height: 16px; transition: transform 0.15s ease; } .loc-dd[open] .loc-dd__chevron { transform: rotate(180deg); } /* "Choose your studio" — a lime button, like the location box on the reference site. */ .loc-dd--picker .loc-dd__summary { background: var(--neon-lime); color: var(--ink-fixed); border: var(--border-w) solid var(--ink-fixed); border-radius: var(--radius); padding: 0.7em 1.1em; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; box-shadow: 4px 4px 0 var(--ink); } .site-header--overlay .loc-dd--picker .loc-dd__summary { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); } /* Studio switcher pill beside the logo on studio pages. */ .loc-dd--switch .loc-dd__summary { border: 2px solid var(--ink); border-radius: 999px; padding: 0.32em 0.7em 0.32em 0.55em; font-weight: 800; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; background: var(--loc-accent); color: var(--ink-fixed); border-color: var(--ink-fixed); white-space: nowrap; } .loc-dd__pin { width: 15px; height: 15px; } .loc-dd__menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 120; min-width: 250px; background: var(--canvas); color: var(--ink); border: var(--border-w) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 0.45rem; } .loc-dd--switch .loc-dd__menu { left: 0; right: auto; } .loc-dd__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 0.92rem; color: var(--ink); } .loc-dd__item:hover, .loc-dd__item:focus-visible { background: color-mix(in srgb, var(--dot, var(--loc-accent)) 30%, transparent); } .loc-dd__item.is-current { background: color-mix(in srgb, var(--dot) 22%, transparent); } .loc-dd__item.is-soon { color: var(--ink-soft); } .loc-dd__dot { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: var(--dot, var(--loc-accent)); border: 2px solid var(--ink-fixed); } .loc-dd__tag { margin-left: auto; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: var(--ink); color: var(--canvas); padding: 0.2em 0.5em; border-radius: 4px; white-space: nowrap; } .loc-dd__all { border-top: 2px dashed var(--ink-faint); margin-top: 0.35rem; padding-top: 0.35rem; } @media (max-width: 520px) { /* Room for "Elephant & Castle" now phones show only the logo mark. */ .site-header__brand .loc-dd--switch .loc-dd__label { max-width: 19ch; overflow: hidden; text-overflow: ellipsis; } .site-header__brand .loc-dd--switch .loc-dd__summary { font-size: 0.7rem; letter-spacing: 0.01em; } .site-header__inner { gap: 0.75rem; } .site-logo__text { font-size: 1.1rem; } } /* ---------- 7. Mobile nav ---------- */ .mobile-nav { display: none; border-top: var(--border-w) solid var(--ink); padding: 1.25rem 1.5rem 1.5rem; background: var(--canvas); color: var(--ink); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .mobile-nav.is-open { display: block; } .mobile-nav .nav-menu { flex-direction: column; align-items: stretch; gap: 0.1rem; } .mobile-nav .nav-menu a { padding-block: 0.6rem; font-size: 1rem; } .mobile-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: transparent; min-width: 0; padding: 0 0 0.4rem 1rem; margin-left: 0.25rem; border-left: 2px solid var(--ink-faint); } .mobile-nav .sub-menu a { font-size: 0.92rem; } .mobile-nav .nav-menu > li.menu-item-has-children > a::after { display: none; } .mobile-nav__studios { margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed var(--ink-faint); } .mobile-nav__label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.4rem; } .mobile-nav__studio { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; text-decoration: none; font-weight: 700; } .mobile-nav__studio.is-current { text-decoration: underline; text-underline-offset: 4px; } .mobile-nav__studio.is-soon { color: var(--ink-soft); } .mobile-nav__cta { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; } .mobile-nav .theme-toggle { width: 100%; height: auto; border-radius: var(--radius); padding: 0.75rem; gap: 0.5rem; font-weight: 800; font-size: 0.9rem; border: var(--border-w) solid var(--ink); color: var(--ink); } .mobile-nav .theme-toggle__label--dark { display: inline; } :root[data-theme="dark"] .mobile-nav .theme-toggle__label--dark { display: none; } :root[data-theme="dark"] .mobile-nav .theme-toggle__label--light { display: inline; } /* ---------- 8. Paint splats + paint trail ---------- */ .splat-deco { position: absolute; z-index: -1; max-width: none; height: auto; pointer-events: none; user-select: none; } .paint-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .paint-reset { position: absolute; top: 1rem; right: 1rem; z-index: 3; background: var(--ink-fixed); color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 999px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.02em; padding: 0.45em 1em; cursor: pointer; opacity: 0.9; } .paint-reset:hover, .paint-reset:focus-visible { opacity: 1; } /* No hover trail on touch screens (it would fight scrolling), nor for visitors who prefer reduced motion. */ @media (pointer: coarse), (prefers-reduced-motion: reduce) { .paint-canvas, .paint-reset { display: none; } } /* ---------- 9. Landing page ---------- */ .landing { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0; background: #0B0907; color: #FFFFFF; } .landing__media { position: absolute; inset: 0; z-index: -3; } .landing__bg { width: 100%; height: 100%; object-fit: cover; } .landing__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(8, 6, 4, 0.5) 0%, rgba(8, 6, 4, 0.12) 28%, rgba(8, 6, 4, 0.3) 58%, rgba(8, 6, 4, 0.86) 100%); } .landing__splat--drip { top: calc(-1 * clamp(36px, 5vw, 80px)); right: clamp(-40px, -2vw, -10px); width: clamp(120px, 17vw, 280px); } .landing__splat--side { left: calc(-1 * clamp(70px, 8vw, 150px)); top: 16%; width: clamp(170px, 22vw, 360px); transform: rotate(-14deg); } .landing .paint-reset { top: auto; bottom: 1rem; right: 1rem; } .landing__content { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(2.25rem, 6vh, 4rem); } .landing__title { display: flex; flex-direction: column; font-size: clamp(2.1rem, 8.4vw, 6.6rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; margin: 0 0 clamp(1.25rem, 3.5vh, 2.25rem); text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35); } .landing__prompt { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.86); margin-bottom: 0.85rem; } @media (max-width: 720px) { .landing__splat--drip { width: 96px; top: -26px; right: -8px; } .landing__splat--side { width: 150px; left: -70px; top: 12%; } } /* ---------- 10. Studio tiles ---------- */ .loc-tiles { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-template-columns: 1fr; } @media (min-width: 720px) { .loc-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .loc-tile { display: flex; } .loc-tile__link { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; min-height: clamp(86px, 12vh, 124px); padding: 1rem 1.25rem; background: var(--tile); color: var(--ink-fixed); border: var(--border-w) solid var(--ink-fixed); border-radius: var(--radius); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .loc-tile__link:hover, .loc-tile__link:focus-visible { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.55); } .loc-tile__name { font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; line-height: 1; } .loc-tile__meta { font-size: 0.85rem; font-weight: 700; opacity: 0.8; } /* Not open yet: grey "under construction" stripes and a tag. */ .loc-tile.is-soon .loc-tile__link { background: repeating-linear-gradient(-45deg, #C4BDAD 0 14px, #B5AE9D 14px 28px); color: rgba(23, 19, 15, 0.72); border-style: dashed; } .loc-tile__tag { order: -1; align-self: flex-start; background: var(--ink-fixed); color: var(--neon-yellow); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.28em 0.6em; border-radius: 4px; } .loc-tiles--light .loc-tile__link { box-shadow: 6px 6px 0 var(--ink); } .loc-tiles--light .loc-tile__link:hover, .loc-tiles--light .loc-tile__link:focus-visible { box-shadow: 9px 9px 0 var(--ink); } /* ---------- 11. Studio hero ---------- */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4.75rem); } .hero__splat-edge { left: calc(-1 * clamp(80px, 8vw, 160px)); top: 4%; width: clamp(160px, 18vw, 290px); transform: rotate(-12deg); } .hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; } .hero__title { display: flex; flex-direction: column; font-size: clamp(2.2rem, 4.6vw, 3.9rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; } .hero__sub { font-size: 1.1rem; color: var(--ink-soft); margin-top: 1rem; max-width: 50ch; } .hero__sub p { margin-bottom: 0.6em; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 1.75rem; } .hero__media { position: relative; } .hero__frame { border: var(--border-w) solid var(--ink); border-radius: 22px 22px 6px 22px; overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16 / 11; background: var(--paper); } .hero__img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 960px) { .hero__inner { grid-template-columns: 1.05fr 1fr; } } @media (max-width: 720px) { .hero__splat-edge { width: 130px; left: -60px; top: 2%; } } /* Studio hero with a photo/video background (v2.2): text sits on a dark shade over the media, like the landing page. */ .hero--bg { display: flex; align-items: center; min-height: clamp(520px, 76vh, 820px); background: #0B0907; color: #FFFFFF; padding-block: clamp(3.5rem, 8vw, 6rem); } .hero__bg { position: absolute; inset: 0; z-index: -3; } .hero__bg-media { width: 100%; height: 100%; object-fit: cover; } .hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8, 6, 4, 0.82) 0%, rgba(8, 6, 4, 0.55) 48%, rgba(8, 6, 4, 0.18) 100%), linear-gradient(180deg, rgba(8, 6, 4, 0) 55%, rgba(8, 6, 4, 0.55) 100%); } .hero--bg .hero__splat-edge { z-index: -1; } .hero--bg .hero__inner { width: 100%; grid-template-columns: 1fr; } .hero--bg .hero__copy { max-width: 720px; } .hero--bg .hero__title { font-size: clamp(2.4rem, 6vw, 5rem); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); } .hero--bg .hero__sub { color: rgba(255, 255, 255, 0.88); } .hero--bg .hero__sub a { color: #FFFFFF; } .hero--bg .btn--primary { box-shadow: 4px 4px 0 #FFFFFF; } .hero--bg .btn--ghost-invert { border-color: #FFFFFF; color: #FFFFFF; } .hero--bg .btn--ghost-invert:hover, .hero--bg .btn--ghost-invert:focus-visible { background: #FFFFFF; color: #17130F; } .hero--bg .hero__gift { color: #FFFFFF; } /* Quick links to each session + private events (studio homes). */ .hero__quick { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; } .hero__chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--chip, #FFFFFF); color: #17130F; border: 2px solid #17130F; border-radius: 999px; padding: 0.5em 1em; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; box-shadow: 3px 3px 0 #FFFFFF; transition: transform 0.12s ease, box-shadow 0.12s ease; } .hero__chip .icon { width: 16px; height: 16px; } .hero__chip:hover, .hero__chip:focus-visible { transform: translate(3px, 3px); box-shadow: 0 0 0 #FFFFFF; } .hero__chip--plain { background: transparent; color: #FFFFFF; border-color: #FFFFFF; box-shadow: none; } .hero__chip--plain:hover, .hero__chip--plain:focus-visible { background: #FFFFFF; color: #17130F; transform: none; } /* Landing page: admin edit button below the overlay header. */ .landing > .kedi-admin-edit { top: calc(var(--header-h) + 0.75rem); } .landing > .kedi-add-photo { position: absolute; top: calc(var(--header-h) + 3.25rem); right: 0.75rem; margin: 0; } @media (min-width: 960px) { .hero--bg .hero__inner { grid-template-columns: 1fr; } } @media (max-width: 720px) { .hero--bg { min-height: 0; padding-block: 3.25rem 3rem; } .hero__shade { background: rgba(8, 6, 4, 0.66); } } /* ---------- 12. Studio badge ---------- */ .studio-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--loc-accent); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); border-radius: 999px; padding: 0.32rem 0.85rem 0.32rem 0.6rem; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 1.1rem; max-width: none; } .studio-badge .icon { width: 16px; height: 16px; } .studio-badge a { text-decoration: none; } .studio-badge a:hover { text-decoration: underline; } .studio-badge--plain { padding-left: 0.85rem; } .studio-badge--soon { background: repeating-linear-gradient(-45deg, var(--neon-yellow) 0 10px, #17130F 10px 20px); padding: 0.3rem; } .studio-badge--soon span { background: var(--neon-yellow); padding: 0.15rem 0.6rem; border-radius: 999px; } /* ---------- 13. Feature strip ---------- */ .feature-strip { padding-block: 1.6rem; background: var(--band-bg); color: var(--band-text); } .feature-strip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2.5rem; font-weight: 800; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; } .feature-strip__list li { position: relative; } .feature-strip__list li:not(:last-child)::after { content: ''; position: absolute; right: -1.35rem; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--neon-lime); } @media (max-width: 720px) { .feature-strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; text-align: left; font-size: 0.78rem; } .feature-strip__list li { padding-left: 1rem; } .feature-strip__list li:not(:last-child)::after { display: none; } .feature-strip__list li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 6px; height: 6px; border-radius: 50%; background: var(--neon-lime); } } /* ---------- 14. Section headings ---------- */ .section-heading { max-width: 680px; margin-bottom: 2.5rem; } .section-heading p { color: var(--ink-soft); font-size: 1.05rem; } .section-heading--center { margin-inline: auto; text-align: center; } .section-heading--center p { margin-inline: auto; } /* A real paint splat sits behind the start of the title. */ .heading-splat { position: relative; display: inline-block; isolation: isolate; } .heading-splat__img.splat-deco { left: -0.95em; top: 50%; width: 3.8em; transform: translateY(-50%) rotate(-12deg); z-index: -1; } /* ---------- 15. Experiences ---------- */ .experiences-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .experiences-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .experiences-grid--3 { grid-template-columns: repeat(3, 1fr); } } .experience-card { display: flex; flex-direction: column; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .experience-card__media { display: block; border-bottom: var(--border-w) solid var(--ink); } .experience-card__media img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; } .experience-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.6rem; } .experience-card h3 { margin-bottom: 0.3rem; } .experience-card h3 a { text-decoration: none; } .experience-card__price { font-weight: 800; margin-bottom: 0.65rem; } .experience-card__body > p:not(.experience-card__price) { color: var(--ink-soft); } .experience-card__actions { display: flex; align-items: center; gap: 1.1rem; margin-top: auto; padding-top: 0.5rem; } /* ---------- 15b. Packages (first section under a studio hero) ---------- One big card per session with its full price list, plus a dark "Parties & private hire" card. --pkg is the service colour. */ .packages { padding-top: clamp(2.75rem, 5vw, 4.5rem); } .packages-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 720px) { .packages-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .packages-grid--3 { grid-template-columns: repeat(3, 1fr); } .packages-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } } .package-card { --pkg: var(--loc-accent); display: flex; flex-direction: column; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .package-card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); } .package-card__head { position: relative; background: var(--pkg); color: var(--ink-fixed); border-bottom: var(--border-w) solid var(--ink); padding: 1.4rem 1.5rem 1.3rem; } .package-card__icon { position: absolute; top: 1.1rem; right: 1.1rem; display: grid; place-items: center; width: 46px; height: 46px; background: var(--paper-fixed); border: 2px solid var(--ink-fixed); border-radius: 50%; } .package-card__icon .icon { width: 22px; height: 22px; } .package-card__title { margin: 0 3.4rem 0.55rem 0; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; } .package-card__from { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.045em; } .package-card__body { display: flex; flex-direction: column; gap: 1rem; flex: 1; padding: 1.35rem 1.5rem 1.5rem; } .package-card__blurb { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } .package-card__prices { display: flex; flex-direction: column; border-top: 2px solid var(--ink); } .package-card__prices li { /* name | price (right-aligned) | unit (fixed width) — so the £ figures line up in one column on every card. */ display: grid; grid-template-columns: 1fr auto 3.6rem; align-items: baseline; column-gap: 0.4rem; padding: 0.6rem 0; border-bottom: 2px dashed var(--ink-faint); } .package-card__tier { font-weight: 700; font-size: 0.92rem; } .package-card__price { font-weight: 800; font-size: 1.2rem; white-space: nowrap; letter-spacing: -0.02em; } .package-card__price small { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; } .package-card__prices--links li { padding: 0; } .package-card__prices--links a { display: grid; grid-template-columns: 1fr auto 3.6rem; align-items: baseline; column-gap: 0.4rem; width: 100%; padding: 0.6rem 0; text-decoration: none; } .package-card__prices--links li { display: block; } .package-card__unit { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; } .package-card__price { text-align: right; } .package-card__prices--links a:hover .package-card__tier { text-decoration: underline; text-decoration-color: var(--loc-accent); text-decoration-thickness: 3px; text-underline-offset: 4px; } .package-card__go { font-weight: 800; } .package-card__includes { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); } .package-card__actions { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-top: auto; padding-top: 0.25rem; } /* Line the cards up row by row (header, blurb, prices, includes, buttons) so prices and buttons sit at the same height on every card. Browsers without subgrid simply keep each card's own layout. */ @supports (grid-template-rows: subgrid) { .packages-grid { row-gap: 0; } .package-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; margin-bottom: 1.75rem; } .package-card__body { display: contents; } .package-card__body > * { margin: 0; padding-inline: 1.5rem; } .package-card__blurb { padding-top: 1.35rem; padding-bottom: 1rem; } .package-card__prices { margin-inline: 1.5rem !important; padding-inline: 0 !important; align-self: start; } .package-card__includes { padding-top: 1rem; padding-bottom: 1rem; align-self: start; } .package-card__actions { padding-bottom: 1.5rem; align-self: end; } } .package-card__prices--links .package-card__price small { font-size: 0.72rem; } .package-card--private .package-card__head { background: var(--ink-fixed); color: var(--paper-fixed); border-bottom-color: var(--ink); } .package-card--private .package-card__icon { background: var(--loc-accent); } :root[data-theme="dark"] .package-card--private .package-card__head { background: #000000; } /* ---------- 15c. Quick "Book now" strip ---------- */ .quick-book { position: relative; isolation: isolate; overflow: hidden; background: var(--loc-accent); color: var(--ink-fixed); border-block: var(--border-w) solid var(--ink-fixed); padding-block: clamp(1.75rem, 4vw, 2.75rem); } .quick-book__splat { top: 50%; width: clamp(130px, 13vw, 210px); opacity: 0.9; } .quick-book__splat--left { left: calc(-1 * clamp(60px, 6vw, 110px)); transform: translateY(-50%) rotate(-18deg); } .quick-book__splat--right { right: calc(-1 * clamp(60px, 6vw, 110px)); transform: translateY(-50%) rotate(20deg); } .quick-book__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } .quick-book__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.035em; } .quick-book__text { margin: 0.45rem 0 0; font-size: 1.02rem; color: rgba(23, 19, 15, 0.8); } .quick-book__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; } .quick-book__btn { font-size: 1.05rem; padding: 1.05em 2.1em; box-shadow: 5px 5px 0 var(--paper-fixed); } .quick-book__btn span { font-size: 1.1em; line-height: 1; } .quick-book .btn--text { color: var(--ink-fixed); } @media (min-width: 860px) { .quick-book__inner { flex-direction: row; justify-content: space-between; align-items: center; padding-inline: clamp(2.5rem, 5vw, 6rem); } } @media (max-width: 859px) { .quick-book__splat--left { display: none; } .quick-book__splat--right { top: -30px; right: -60px; width: 140px; transform: rotate(20deg); } .quick-book__copy { padding-right: 3rem; } } /* ---------- 15d. Event packages (party + corporate pages) ---------- */ .event-packages { padding-top: clamp(2.75rem, 5vw, 4.5rem); } /* .pricing-grid.event-grid--N beats the generic .pricing-grid columns. */ @media (min-width: 720px) { .pricing-grid.event-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; } } @media (min-width: 1080px) { .pricing-grid.event-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 720px) and (max-width: 1079px) { .pricing-grid.event-grid--3 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } .event-pkg .price-card__name { font-size: 1.2rem; } .event-pkg__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; font-size: 0.84rem; font-weight: 700; } .event-pkg__meta span { display: inline-flex; align-items: center; gap: 0.35rem; } .event-pkg__meta .icon { width: 16px; height: 16px; } .event-terms { max-width: 860px; margin: 2.5rem auto 0; display: grid; gap: 1rem; } .event-terms__note { max-width: none; margin: 0; padding: 1rem 1.25rem; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); font-size: 0.95rem; } .event-terms__extras { padding: 1.25rem 1.4rem; border: 2px dashed var(--ink); border-radius: var(--radius); } .event-terms__label { margin: 0 0 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; } .event-terms__extras ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; } .event-terms__extras li { background: var(--loc-accent); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); border-radius: 999px; padding: 0.3em 0.85em; font-size: 0.82rem; font-weight: 800; } .event-terms__ask { max-width: none; margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--ink-soft); } /* The private-event "what's included" panel when it opens the page. */ .private-included--top { padding-top: clamp(2.75rem, 5vw, 4.5rem); } /* ---------- 16. Pricing + private panel ---------- */ .pricing-toggle { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; width: max-content; max-width: 100%; margin: 0 auto 2.75rem; background: var(--loc-accent); border: var(--border-w) solid var(--ink-fixed); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 0.35rem; } .pricing-toggle__btn { background: transparent; border: 0; border-radius: 8px; padding: 0.75em 1.25em; font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(23, 19, 15, 0.72); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pricing-toggle__btn:hover { color: var(--ink-fixed); } .pricing-toggle__btn.is-active { background: var(--paper-fixed); color: var(--ink-fixed); } .pricing-toggle__btn:focus-visible { outline: 3px solid var(--ink-fixed); outline-offset: 2px; } .pricing-panel + .pricing-panel { margin-top: 2rem; } .pricing-panel[hidden] { display: none; } .pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } .pricing-grid--three { grid-template-columns: repeat(3, 1fr); } } .price-card { position: relative; display: flex; flex-direction: column; gap: 1.1rem; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.9rem 1.5rem 1.5rem; } .price-card--featured { background: var(--loc-accent); color: var(--ink-fixed); border-color: var(--ink-fixed); box-shadow: var(--shadow-md); } .price-card__flag { position: absolute; top: -14px; left: 1.25rem; background: var(--ink-fixed); color: var(--paper-fixed); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.35em 0.85em; border-radius: 999px; } .price-card__name { margin: 0; font-size: 1.05rem; } .price-card__price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0; } .price-card__price span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); } .price-card--featured .price-card__price span { color: rgba(23, 19, 15, 0.7); } .price-card__desc { color: var(--ink-soft); margin: 0; flex-grow: 1; } .price-card--featured .price-card__desc { color: rgba(23, 19, 15, 0.78); } .price-card__features { display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; font-size: 0.92rem; } .price-card__features li { padding-left: 1.45rem; position: relative; } .price-card__features li::before { content: ''; position: absolute; left: 0; top: 0.32em; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--loc-accent); border: 2px solid var(--ink-fixed); } .price-card--featured .price-card__features li::before { background: var(--paper-fixed); } .private-panel { position: relative; overflow: hidden; max-width: 900px; margin-inline: auto; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-md); padding: clamp(1.75rem, 4vw, 3rem); } .private-panel__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } .private-panel__list { display: grid; grid-template-columns: 1fr; gap: 0.6rem 2rem; margin: 1.25rem 0 1.5rem; } @media (min-width: 640px) { .private-panel__list { grid-template-columns: 1fr 1fr; } } .private-panel__list li { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; } .private-panel__list .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); background: var(--loc-accent); border-radius: 50%; } .private-panel__note { color: var(--ink-soft); margin-bottom: 1.5rem; } .private-panel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .private-included { padding-top: 0; } .clients-band + .private-included { padding-top: var(--section-space); } /* ---------- 17. Timeline ---------- */ .timeline-list { display: flex; flex-direction: column; gap: 1.4rem; max-width: 900px; } .timeline-card { position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem 1.75rem; } .timeline-card__num { position: relative; z-index: 1; font-weight: 800; font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -0.05em; color: var(--ink); min-width: 2.1ch; -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--step-color); } .timeline-card__body { position: relative; z-index: 1; } .timeline-card__icon { display: inline-flex; margin-bottom: 0.35rem; } .timeline-card__icon .icon { width: 28px; height: 28px; } .timeline-card h3 { margin-bottom: 0.3em; } .timeline-card p { color: var(--ink-soft); margin: 0; max-width: 52ch; } /* Realistic paint splat bleeding off the right edge of each card. */ .timeline-card__splat.splat-deco { right: -52px; top: 50%; width: 160px; z-index: 0; transform: translateY(-50%) rotate(var(--splat-rot, 0deg)); } .timeline-card:nth-child(2) { --splat-rot: 40deg; } .timeline-card:nth-child(3) { --splat-rot: -25deg; } .timeline-card:nth-child(4) { --splat-rot: 70deg; } .timeline-card:nth-child(5) { --splat-rot: -60deg; } @media (min-width: 780px) { .timeline-card:nth-child(even) { margin-left: 9%; } .timeline-card { padding: 1.75rem 7rem 1.75rem 2.25rem; } } @media (max-width: 779px) { .timeline-card { grid-template-columns: 1fr; gap: 0.4rem; padding-right: 4.5rem; } .timeline-card__splat.splat-deco { width: 110px; right: -38px; top: 1rem; transform: rotate(var(--splat-rot, 0deg)); } } /* ---------- 18. Private events + clients marquee ---------- */ .event-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 780px) { .event-grid { grid-template-columns: repeat(3, 1fr); } } .event-card { display: flex; flex-direction: column; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.6rem; } .event-card__icon { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; background: var(--event); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); } .event-card__icon .icon { width: 26px; height: 26px; } .event-card p { color: var(--ink-soft); } .event-card__actions { display: flex; align-items: center; gap: 1.1rem; margin-top: auto; padding-top: 0.5rem; } .marquee { overflow: hidden; padding-top: clamp(2.5rem, 5vw, 3.5rem); } .marquee--compact { padding-top: clamp(2.5rem, 5vw, 3.75rem); } .clients-band { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); background: var(--paper); border-block: var(--border-w) solid var(--ink); } .clients-band .marquee { padding-top: 0; } .marquee__title { text-align: center; margin: 0 auto 1.25rem; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); } .marquee__viewport { display: flex; width: max-content; animation: kedi-marquee 38s linear infinite; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee:hover .marquee__viewport { animation-play-state: paused; } .marquee__track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); } .marquee__item span { display: block; font-size: clamp(1.35rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.035em; white-space: nowrap; } .marquee__item img { height: clamp(26px, 3.8vw, 42px); width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: 0.85; } :root[data-theme="dark"] .marquee__item img, body.theme-uv .marquee__item img { filter: grayscale(1) invert(1); } /* Dark band (v2.4): big heading left, white logos scrolling right. */ .marquee--band { background: var(--band-bg); color: var(--band-text); padding-block: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } .marquee--band .marquee__inner { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; } @media (min-width: 900px) { .marquee--band .marquee__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; } } .marquee--band .marquee__title { margin: 0; text-align: left; color: var(--band-text); font-size: clamp(1.7rem, 3.2vw, 2.7rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; } .marquee--band .marquee__window { overflow: hidden; min-width: 0; } .marquee--band .marquee__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee--band .marquee__item span { color: var(--band-text); } .marquee--band .marquee__item img, :root[data-theme="dark"] .marquee--band .marquee__item img, body.theme-uv .marquee--band .marquee__item img { filter: brightness(0) invert(1); opacity: 0.95; height: calc(clamp(30px, 3.6vw, 46px) * var(--logo-scale, 1)); max-width: 260px; } .clients-band { padding: 0; background: none; border: 0; } /* Equal padding top and bottom wherever the band appears (the older ".clients-band .marquee { padding-top: 0 }" used to remove the top padding on corporate pages), heading and logos centred on one line. */ .marquee.marquee--band, .clients-band .marquee.marquee--band { padding-block: clamp(2.25rem, 4vw, 3.25rem); } .clients-band .marquee--band { margin-top: 0; } .marquee--band .marquee__title, .marquee--band .marquee__window { align-self: center; } .marquee--band .marquee__viewport { align-items: center; } .marquee--band .marquee__item { display: flex; align-items: center; min-height: 56px; } @keyframes kedi-marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__viewport { animation: none; width: auto; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; } .marquee__track { flex-wrap: wrap; justify-content: center; padding-right: 0; } .marquee__track[aria-hidden="true"], .marquee__item[aria-hidden="true"] { display: none; } } /* ---------- 19. Gallery + lightbox ---------- */ .gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-grid__item { display: block; border: var(--border-w) solid var(--ink); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: var(--paper); } .gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; } .gallery-grid__item:hover img { transform: scale(1.05); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(11, 9, 7, 0.92); display: flex; align-items: center; justify-content: center; padding: 2rem; } .lightbox[hidden] { display: none; } .lightbox__image { max-width: 90vw; max-height: 85vh; border: var(--border-w) solid #FFFDF6; border-radius: var(--radius); } .lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; background: #FFFDF6; color: #17130F; border: var(--border-w) solid #17130F; width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; } /* ---------- 20. Testimonials ---------- */ .testimonials__track { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 780px) { .testimonials__track { grid-template-columns: repeat(3, 1fr); } } .testimonial-card { margin: 0; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.6rem; } .testimonial-card .stars { color: var(--neon-yellow); -webkit-text-stroke: 1px var(--ink-fixed); font-size: 1.15rem; letter-spacing: 2px; } .testimonial-card blockquote { margin: 0.75rem 0 1.25rem; font-size: 1.02rem; } .testimonial-card figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; } .testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--loc-accent); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .testimonial-card__context { color: var(--ink-soft); } .admin-note { margin-top: 1.5rem; font-size: 0.85rem; color: var(--ink-soft); border-top: 1px dashed var(--ink-faint); padding-top: 1rem; } /* ---------- 21. FAQ ---------- */ .faq + .faq { padding-top: 0; } .faq-list { display: flex; flex-direction: column; gap: 0.85rem; } .faq-item { background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius); padding: 1.05rem 1.4rem; } .faq-item summary { cursor: pointer; font-weight: 800; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--loc-accent); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); font-size: 1.2rem; font-weight: 700; line-height: 1; } .faq-item[open] summary::after { content: '\2212'; } .faq-item__answer { padding-top: 0.8rem; color: var(--ink-soft); } .faq-item__answer p { max-width: none; margin: 0; } .faq__more { margin: 1.75rem 0 0; text-align: center; max-width: none; } /* ---------- 22. CTA banner ---------- */ .cta-banner { isolation: isolate; overflow: hidden; background: var(--band-bg); color: var(--band-text); padding-block: clamp(3rem, 6vw, 4.75rem); } .cta-banner__splat { top: 50%; width: clamp(190px, 21vw, 320px); } .cta-banner__splat--left { left: calc(-1 * clamp(90px, 9vw, 175px)); transform: translateY(-50%) rotate(-12deg); } .cta-banner__splat--right { right: calc(-1 * clamp(90px, 9vw, 175px)); transform: translateY(-50%) rotate(14deg); } .cta-banner__inner { display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; position: relative; z-index: 1; } .cta-banner h2 { margin-bottom: 0.4em; } .cta-banner p { color: var(--band-text-soft); margin: 0; } .cta-banner__actions { display: flex; flex-wrap: wrap; gap: 1rem; } .cta-banner .btn--primary { box-shadow: 4px 4px 0 var(--band-text); border-color: var(--ink-fixed); } @media (min-width: 900px) { .cta-banner__inner { flex-direction: row; justify-content: space-between; align-items: center; padding-inline: clamp(3rem, 6vw, 7rem); } } @media (max-width: 899px) { .cta-banner__splat--left { display: none; } .cta-banner__splat--right { top: -40px; right: -70px; width: 170px; transform: rotate(14deg); } .cta-banner__copy { padding-right: 3.5rem; } } /* ---------- 23. Page header ---------- */ .page-header { isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.25rem) clamp(2.25rem, 5vw, 3.25rem); } .page-header__splat { right: calc(-1 * clamp(70px, 7vw, 140px)); top: 50%; width: clamp(220px, 25vw, 380px); transform: translateY(-50%) rotate(10deg); } .page-header__inner { position: relative; z-index: 1; max-width: 780px; } .page-header__intro { font-size: 1.12rem; color: var(--ink-soft); margin: 0; } /* Session pages: big polaroid on the right (v2.4). */ .page-header--photo { position: relative; } .page-header__polaroid { display: none; } @media (min-width: 900px) { /* Same outer edges as .wrap so the title lines up with the sections below. */ .page-header--photo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; column-gap: clamp(2rem, 4vw, 4rem); padding-inline: max(var(--gutter, 1.5rem), calc((100% - var(--wrap-w)) / 2 + var(--gutter, 1.5rem))); } .page-header--photo .page-header__inner { padding-inline: 0; margin: 0; width: auto; max-width: 620px; } .page-header--photo .page-header__splat { right: calc(-1 * clamp(60px, 5vw, 110px)); left: auto; top: 6%; transform: rotate(10deg); width: clamp(220px, 22vw, 340px); z-index: 0; } .page-header__polaroid { display: flex; flex-direction: column; align-items: center; gap: 1rem; position: relative; z-index: 1; justify-self: end; width: min(100%, 600px); } /* .page-header__polaroid prefix beats the general .polaroid size (later in this file). */ .page-header__polaroid .polaroid--big { width: min(100%, 560px); margin: 0; transform: rotate(var(--tilt, 3deg)); } .page-header__polaroid .polaroid--big:hover { transform: rotate(0deg) scale(1.02); } .polaroid--big .polaroid__link { padding: 18px 18px 0; box-shadow: 10px 12px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, 0.22); border: 2px solid var(--ink-fixed); } .polaroid--big .polaroid__caption { font-size: 2rem; min-height: 4.2rem; } body.theme-uv .polaroid--big .polaroid__link { box-shadow: 10px 12px 0 var(--neon-purple), 0 0 30px rgba(188, 19, 254, 0.5); } } @media (max-width: 899px) { /* Phones/tablets: the photo becomes a dark backdrop behind the title. */ .page-header--photo { background: linear-gradient(rgba(8, 6, 4, 0.62), rgba(8, 6, 4, 0.72)), var(--header-photo) center / cover no-repeat; color: #FFFFFF; } .page-header--photo .page-header__intro { color: rgba(255, 255, 255, 0.88); } .page-header--photo .page-header__title { color: #FFFFFF; } } /* Admin-only "✎ Edit …" pills in the top corner of sections. */ .kedi-admin-edit { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 30; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.35rem; max-width: min(92%, 520px); opacity: 0.85; transition: opacity 0.15s ease; } .kedi-admin-edit:hover, .kedi-admin-edit:focus-within { opacity: 1; } .kedi-admin-edit a { background: #2271B1; color: #FFFFFF !important; border: 2px solid #17130F; border-radius: 999px; padding: 0.3em 0.8em; font: 700 0.74rem/1.2 var(--font-body); text-decoration: none; box-shadow: 2px 2px 0 #17130F; white-space: nowrap; } .kedi-admin-edit a:hover { background: #135E96; } .kedi-admin-edit__note { font: 600 0.66rem/1 var(--font-body); color: #FFFFFF; background: rgba(23, 19, 15, 0.7); padding: 0.25em 0.5em; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .marquee--band, .split-section { position: relative; } .hero--bg > .kedi-admin-edit { top: 1rem; right: 1rem; } /* Admin-only "+ Add photo" button on empty photo slots. */ .kedi-add-photo { display: inline-flex; align-items: center; margin-top: 0.85rem; position: relative; z-index: 5; background: #2271B1; color: #FFFFFF !important; border: 2px solid #17130F; border-radius: 999px; padding: 0.4em 0.95em; font: 700 0.78rem/1.2 var(--font-body); text-decoration: none; box-shadow: 3px 3px 0 #17130F; } .kedi-add-photo:hover { background: #135E96; } .split-section__media { position: relative; } .split-section__media .kedi-add-photo, .hero--bg > .kedi-add-photo { position: absolute; top: 1rem; left: 1rem; margin: 0; } .hero--bg > .kedi-add-photo { top: auto; bottom: 1rem; left: auto; right: 1rem; } @media (max-width: 900px) { .page-header__splat { width: 150px; top: -34px; right: -54px; transform: rotate(10deg); } .page-header__inner { padding-right: 4rem; } } /* ---------- 24. Split section ---------- */ .split-section__inner { display: grid; gap: clamp(2rem, 4vw, 3.25rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .split-section__inner { grid-template-columns: 1fr 1fr; } } .split-section__media img { width: 100%; aspect-ratio: 14 / 10; object-fit: cover; border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .split-section__copy .entry-content { color: var(--ink-soft); } .split-section__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.5rem; } /* Event pages: the photo + intro sits straight under the page title. */ .split-section--intro { padding-top: clamp(0.5rem, 2vw, 1.5rem); } .split-section--intro + .event-packages { padding-top: var(--section-space); } /* ---------- 25. Forms ---------- */ .contact-form { display: flex; flex-direction: column; gap: 1.2rem; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.25rem, 4vw, 2.25rem); } .contact-form__row { display: flex; flex-direction: column; gap: 0.45rem; } .contact-form__row--split { display: grid; gap: 1.2rem; grid-template-columns: 1fr; } .contact-form__row--split > div { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; } @media (min-width: 640px) { .contact-form__row--split { grid-template-columns: 1fr 1fr; } .contact-form__row--three { grid-template-columns: 1.3fr 1fr 0.8fr; } } .contact-form label { display: block; font-weight: 800; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; } .contact-form input, .contact-form select, .contact-form textarea { display: block; width: 100%; margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.4; border: 2px solid var(--ink); border-radius: 8px; padding: 0.8em 1em; background: var(--canvas); color: var(--ink); -webkit-appearance: none; appearance: none; } .contact-form input, .contact-form select { min-height: 3.1rem; } .contact-form input[type="date"] { padding-block: 0.65em; } .contact-form select { padding-right: 2.75em; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9em center; background-size: 1.1em; } :root[data-theme="dark"] .contact-form select, body.theme-uv .contact-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F0E8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .contact-form input[type="date"], body.theme-uv .contact-form input[type="date"] { color-scheme: dark; } .contact-form textarea { min-height: 9rem; resize: vertical; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 3px solid var(--electric-blue); outline-offset: 2px; } .contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form button[type="submit"] { align-self: flex-start; margin-top: 0.25rem; } @media (max-width: 639px) { .contact-form button[type="submit"] { align-self: stretch; } } .form-notice { padding: 1rem 1.25rem; border-radius: var(--radius); border: var(--border-w) solid var(--ink-fixed); margin-bottom: 1.5rem; font-weight: 700; color: var(--ink-fixed); } .form-notice--success { background: var(--neon-lime); } .form-notice--error { background: #FF8A8A; } /* ---------- 26. Map ---------- */ .map-section__inner { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 880px) { .map-section__inner { grid-template-columns: 1fr 1.35fr; } } .map-section__address, .map-section__contact li { display: flex; align-items: flex-start; gap: 0.55rem; } .map-section__address { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.6rem; } .map-section__address .icon, .map-section__contact .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.2em; } .map-section__note { color: var(--ink-soft); } .map-section__contact { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; } .map-section__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .map-section__embed { border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); line-height: 0; background: var(--paper); } .map-section + .map-section { padding-top: 0; } /* ---------- 27. Studio cards (contact page) ---------- */ .studio-cards-section { padding-bottom: 0; } .studio-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 780px) { .studio-cards { grid-template-columns: repeat(3, 1fr); } } .studio-card { background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); border-top-width: 12px; border-top-color: var(--tile); box-shadow: var(--shadow-sm); padding: 1.4rem 1.5rem; } .studio-card.is-soon { border-top-color: #BDB6A6; border-style: dashed; border-top-style: solid; } .studio-card h3 a { text-decoration: none; } .studio-card__meta { color: var(--ink-soft); } .studio-card__contact { display: flex; flex-direction: column; gap: 0.4rem; } .studio-card__contact li { display: flex; align-items: center; gap: 0.5rem; } .studio-card__contact .icon { width: 18px; height: 18px; flex-shrink: 0; } /* ---------- 28. Booking widget ---------- */ .booking-widget-frame { border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); background: #FFFFFF; color: #17130F; box-shadow: var(--shadow-md); padding: 1.5rem; min-height: 320px; } .bookeo-embed__placeholder { text-align: center; padding: 3rem 1.5rem; } .bookeo-embed__title { font-weight: 800; font-size: 1.15rem; margin-inline: auto; } .bookeo-embed__hint { font-size: 0.85rem; max-width: 52ch; margin-inline: auto; color: rgba(23, 19, 15, 0.7); } .booking-widget-section__note { text-align: center; margin: 1.5rem auto 0; color: var(--ink-soft); } /* ---------- 29. Included grid / add-ons ---------- */ .included-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); max-width: 980px; margin-inline: auto; } @media (min-width: 780px) { .included-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .included-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; text-align: center; min-height: 150px; padding: 1.75rem 1rem; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .included-card__icon { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--chip); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); } .included-card__icon .icon { width: 26px; height: 26px; } .included-card__label { font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; } .addons-list { display: flex; flex-direction: column; border-top: var(--border-w) solid var(--ink); max-width: 800px; } /* Add-on cards: photo beside each add-on (v2.3). */ .addons-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .addons-grid { grid-template-columns: repeat(2, 1fr); } } .addons-grid .addon-card { display: grid; grid-template-columns: clamp(120px, 24vw, 176px) 1fr auto; align-items: center; gap: 1.2rem; padding: 0.85rem 1.1rem 0.85rem 0.85rem; border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sm); } .addon-card__photo { display: block; aspect-ratio: 4 / 5; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: #FFFFFF; } /* Portrait (4:5) frame; "contain" so flyer-style photos are never cropped. */ .addon-card__photo img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.25s ease; } .addon-card__photo:hover img { transform: scale(1.06); } .addon-card__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .addon-card__price { align-self: start; background: var(--loc-accent); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); border-radius: 999px; padding: 0.25em 0.75em; font-size: 1.05rem; } @media (max-width: 480px) { .addons-grid .addon-card { grid-template-columns: 112px 1fr; align-items: start; } .addon-card__photo { grid-row: span 2; } .addon-card__price { grid-column: 2; justify-self: start; } } body.theme-uv .addon-card { border-color: var(--neon-purple); } /* Polaroid wall (Glow in the Dark pages): scattered, tilted frames with tape and handwritten captions. --tilt / --shift are set per photo. */ .polaroids { overflow: hidden; } .polaroid-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); padding-block: 1.5rem 2.5rem; } .polaroid { position: relative; width: clamp(150px, 42vw, 250px); transform: rotate(var(--tilt, 0deg)) translateY(var(--shift, 0px)); transition: transform 0.25s ease; } .polaroid:hover, .polaroid:focus-within { transform: rotate(0deg) translateY(calc(var(--shift, 0px) - 8px)) scale(1.04); z-index: 2; } .polaroid::before { content: ''; position: absolute; top: -12px; left: 50%; z-index: 1; width: 42%; height: 24px; transform: translateX(-50%) rotate(-3deg); background: var(--tape, #FF10F0); opacity: 0.7; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .polaroid__link { display: block; text-decoration: none; color: #17130F; background: #FDFBF5; padding: 10px 10px 0; border-radius: 3px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); } .polaroid__link img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #111; } .polaroid__caption { display: block; min-height: 3.1rem; padding: 0.55rem 0.25rem 0.7rem; text-align: center; font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 600; font-size: 1.45rem; line-height: 1.1; } body.theme-uv .polaroid__link { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 26px rgba(188, 19, 254, 0.55), 0 12px 28px rgba(0, 0, 0, 0.6); } @media (min-width: 900px) { /* Overlap a little on wide screens so it reads as a scattered pile. */ .polaroid + .polaroid { margin-left: -1.25rem; } } @media (max-width: 600px) { /* Two per row on phones, with gentler offsets so they don't pile up. */ .polaroid-wall { gap: 1.75rem 0.9rem; } .polaroid { width: calc(50% - 0.5rem); transform: rotate(var(--tilt, 0deg)) translateY(calc(var(--shift, 0px) * 0.4)); } .polaroid__caption { font-size: 1.15rem; min-height: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .polaroid { transition: none; } } .addons-list__item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0; border-bottom: var(--border-w) solid var(--ink); } .addons-list__name { font-weight: 800; display: block; } .addons-list__desc { color: var(--ink-soft); font-size: 0.92rem; display: block; } .addons-list__price { font-weight: 800; white-space: nowrap; } .studios-section { padding-top: 0; } /* ---------- 30. Coming soon ---------- */ .coming-soon { isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 5.5rem); } .coming-soon__drip { top: calc(-1 * clamp(30px, 4vw, 70px)); right: 6%; width: clamp(110px, 13vw, 210px); } .coming-soon__splat { left: calc(-1 * clamp(70px, 7vw, 130px)); bottom: -30px; width: clamp(170px, 20vw, 300px); transform: rotate(18deg); } .coming-soon__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .coming-soon__title { display: flex; flex-direction: column; align-items: center; font-size: clamp(3rem, 10vw, 7.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; } .coming-soon__title span { margin-top: 0.3em; font-size: 0.3em; letter-spacing: 0.06em; background: var(--ink-fixed); color: var(--neon-yellow); padding: 0.25em 0.7em; transform: rotate(-2.5deg); } .coming-soon__text { color: var(--ink-soft); font-size: 1.12rem; max-width: 56ch; margin: 1rem auto 2rem; } .coming-soon__text p { margin-inline: auto; } .coming-soon__elsewhere { padding-top: 0; } /* ---------- 31. Footer ---------- */ .site-footer { background: var(--band-bg); color: var(--band-text); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--band-rule); } .footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); padding-bottom: 2rem; } .footer__col--brand { grid-column: 1 / -1; } @media (min-width: 900px) { .footer__grid { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; } .footer__col--brand { grid-column: auto; } } .footer__tagline { color: var(--band-text-soft); max-width: 32ch; margin-top: 0.75rem; } .footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .footer__social a { display: inline-block; border: 2px solid var(--band-rule); border-radius: 999px; padding: 0.35em 0.9em; font-size: 0.8rem; font-weight: 700; text-decoration: none; color: var(--band-text); } .footer__social a:hover { border-color: var(--neon-lime); } .site-footer .footer__social { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; } .footer__social a.footer__social-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; opacity: 0.9; transition: opacity 0.15s ease, transform 0.15s ease; } .footer__social-icon img { width: 26px; height: 26px; object-fit: contain; } .footer__social a.footer__social-icon:hover, .footer__social a.footer__social-icon:focus-visible { opacity: 1; transform: translateY(-2px); } .footer__heading { font-size: 0.85rem; letter-spacing: 0.06em; margin-bottom: 1rem; color: var(--band-text); } .footer__col ul { display: flex; flex-direction: column; gap: 0.55rem; } .footer__col a { text-decoration: none; color: var(--band-text-soft); } .footer__col a:hover { color: var(--band-text); text-decoration: underline; } .footer__studios { gap: 0.85rem !important; } .footer__studio-name { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--band-text) !important; } .footer__studio-meta { display: block; color: var(--band-text-soft); font-size: 0.88rem; margin-top: 0.15rem; padding-left: 1.3rem; } .site-footer .loc-dd__dot { border-color: var(--band-text); } .site-footer .site-logo__text { color: var(--band-text); } .footer__bottom { border-top: 1px solid var(--band-rule); padding-block: 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--band-text-soft); } .footer__bottom p { margin: 0; } .footer-legal-menu { display: flex; gap: 1.5rem; } .footer-legal-menu a { text-decoration: none; color: inherit; } /* ---------- 32. 404 / misc ---------- */ .not-found { isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem); } .not-found__splat { right: -90px; top: 10%; width: clamp(180px, 22vw, 320px); transform: rotate(20deg); } .not-found__inner { position: relative; z-index: 1; } .not-found__inner > p { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 2rem; } .page-content { padding-block: var(--section-space); } .page-content__title { margin-bottom: 1rem; } .page-content__thumb { margin-bottom: 2rem; border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); overflow: hidden; } .post-list { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2rem; } @media (min-width: 780px) { .post-list { grid-template-columns: repeat(3, 1fr); } } .post-list__item { border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); } .post-list__thumb img { aspect-ratio: 16 / 9; object-fit: cover; } .post-list__item h2 { padding: 1.25rem 1.25rem 0; margin-bottom: 0.3em; font-size: 1.3rem; } .post-list__item h2 a { text-decoration: none; } .post-list__excerpt { padding: 0 1.25rem 1.25rem; color: var(--ink-soft); } /* ---------- 33. Glow in the Dark pages ---------- A dark, UV-lit page in both colour modes (it's a blacklight room). Redefining the tokens means every component follows automatically. */ body.theme-uv { --canvas: #0E0A14; --paper: #1A1220; --ink: #F5F0E8; --ink-soft: rgba(245, 240, 232, 0.78); --ink-faint: rgba(245, 240, 232, 0.16); --band-bg: #07050A; --loc-accent: var(--neon-pink); --shadow-sm: 4px 4px 0 var(--neon-purple); --shadow-md: 8px 8px 0 var(--neon-purple); background: var(--canvas); color: var(--ink); } body.theme-uv .site-header { border-bottom-color: var(--neon-purple); } body.theme-uv :is(.price-card, .faq-item, .testimonial-card, .timeline-card, .experience-card, .private-panel, .split-section__media img, .gallery-grid__item, .contact-form) { border-color: var(--neon-purple); } body.theme-uv .price-card--featured { background: var(--neon-purple); color: #FFFFFF; border-color: #FFFFFF; } body.theme-uv .price-card--featured .price-card__price span { color: rgba(255, 255, 255, 0.8); } body.theme-uv .price-card--featured .price-card__features li::before { background: var(--neon-pink); } body.theme-uv h2 { color: #FFFFFF; text-shadow: 0 0 22px rgba(188, 19, 254, 0.75); } body.theme-uv .btn--outline { background: transparent; } body.theme-uv .timeline-card__num { text-shadow: 0 0 18px var(--step-color), 3px 3px 0 var(--step-color); } /* ---------- 34. Dark mode refinements ---------- */ :root[data-theme="dark"] :is(.experience-card__media img, .gallery-grid__item img, .split-section__media img, .hero__img) { filter: brightness(0.9); } :root[data-theme="dark"] .hero__frame { box-shadow: 6px 6px 0 var(--ink-faint); } :root[data-theme="dark"] .site-header:not(.site-header--overlay) { border-bottom-color: var(--ink-faint); } :root[data-theme="dark"] .contact-form input::placeholder, :root[data-theme="dark"] .contact-form textarea::placeholder { color: var(--ink-soft); } /* ---------- 35. Logo variants ---------- */ .site-logo__link { display: block; line-height: 0; } .site-logo__img { max-height: 50px; width: auto; } .site-logo__img--light { display: none; } .site-logo--footer img { max-height: 64px; width: auto; } picture.site-logo__img { max-height: none; } .site-logo__img--bundled { display: block; height: 54px; max-height: none; width: auto; } /* Landing page: circular logo. Overrides the light-logo swap rules for the overlay header. */ .site-logo .site-logo__img--circle, .site-header--overlay .site-logo .site-logo__img--circle { display: block; height: 62px; width: 62px; max-height: none; object-fit: contain; filter: none; } @media (max-width: 600px) { .site-logo .site-logo__img--circle, .site-header--overlay .site-logo .site-logo__img--circle { height: 48px; width: 48px; } } @media (max-width: 600px) { .site-logo__img--bundled { height: 44px; } } .site-logo--footer img.site-logo__footer-bundled { max-height: 130px; } /* On dark backgrounds use the light logo; without one, recolour the main logo to white so it never disappears. */ :is(.site-header--overlay, :root[data-theme="dark"] .site-header, body.theme-uv .site-header) .has-dark-logo .site-logo__img--main { display: none; } :is(.site-header--overlay, :root[data-theme="dark"] .site-header, body.theme-uv .site-header) .has-dark-logo .site-logo__img--light { display: block; } :is(.site-header--overlay, :root[data-theme="dark"] .site-header, body.theme-uv .site-header) .site-logo:not(.has-dark-logo) .site-logo__img--main { filter: brightness(0) invert(1); } /* ---------- 36. Scroll-reveal animations ---------- Blocks enter from their own side as you scroll (left column from the left, right column from the right), the How-it-works steps zig-zag in, cards rise one after another, panels lift into place, and the landing page plays a short entrance on load. The head script adds .js-reveal to only when motion is OK; a failsafe removes it after 2.5s if main.js never starts. The selector list here MUST match the REVEAL list at the top of assets/js/main.js. For Elementor content, use its own Motion Effects → Entrance Animation. */ .js-reveal :is( .split-section__media, .map-section__details, .cta-banner__copy, .page-header__inner, .addons-list__item, .timeline-card:nth-child(odd) ) { --reveal-from: translate3d(-72px, 0, 0); } .js-reveal :is( .hero__media, .split-section__copy, .map-section__embed, .cta-banner__actions, .timeline-card:nth-child(even) ) { --reveal-from: translate3d(72px, 0, 0); } .js-reveal :is( .landing__title > span, .landing__prompt, .loc-tile, .hero .studio-badge, .hero__title > span, .hero__sub, .hero__actions, .section-heading, .experience-card, .package-card, .quick-book__copy, .price-card, .included-card, .testimonial-card, .faq-item, .event-card, .studio-card, .feature-strip__list li, .post-list__item, .not-found__inner, .coming-soon__inner ) { --reveal-from: translate3d(0, 42px, 0); } .js-reveal :is( .private-panel, .pricing-toggle, .gallery-grid__item, .contact-form, .booking-widget-frame, .marquee ) { --reveal-from: translate3d(0, 34px, 0) scale(0.96); } .js-reveal :is( .split-section__media, .map-section__details, .cta-banner__copy, .page-header__inner, .addons-list__item, .timeline-card, .hero__media, .split-section__copy, .map-section__embed, .cta-banner__actions, .landing__title > span, .landing__prompt, .loc-tile, .hero .studio-badge, .hero__title > span, .hero__sub, .hero__actions, .section-heading, .experience-card, .package-card, .quick-book__copy, .price-card, .included-card, .testimonial-card, .faq-item, .event-card, .studio-card, .feature-strip__list li, .post-list__item, .not-found__inner, .coming-soon__inner, .private-panel, .pricing-toggle, .gallery-grid__item, .contact-form, .booking-widget-frame, .marquee ):not(.is-visible) { opacity: 0; transform: var(--reveal-from); } .js-reveal :is( .split-section__media, .map-section__details, .cta-banner__copy, .page-header__inner, .addons-list__item, .timeline-card, .hero__media, .split-section__copy, .map-section__embed, .cta-banner__actions, .landing__title > span, .landing__prompt, .loc-tile, .hero .studio-badge, .hero__title > span, .hero__sub, .hero__actions, .section-heading, .experience-card, .package-card, .quick-book__copy, .price-card, .included-card, .testimonial-card, .faq-item, .event-card, .studio-card, .feature-strip__list li, .post-list__item, .not-found__inner, .coming-soon__inner, .private-panel, .pricing-toggle, .gallery-grid__item, .contact-form, .booking-widget-frame, .marquee ):not(.reveal-done) { transition: opacity 0.7s ease var(--reveal-delay, 0s), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s); } @media (max-width: 640px) { .js-reveal :is(.split-section__media, .map-section__details, .cta-banner__copy, .page-header__inner, .addons-list__item, .timeline-card:nth-child(odd)) { --reveal-from: translate3d(-32px, 0, 0); } .js-reveal :is(.hero__media, .split-section__copy, .map-section__embed, .cta-banner__actions, .timeline-card:nth-child(even)) { --reveal-from: translate3d(32px, 0, 0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media print { .js-reveal * { opacity: 1 !important; transform: none !important; } .splat-deco, .paint-canvas, .paint-reset, .site-header, .cta-banner { display: none !important; } }