/* ============================================================ Te Puna Mahara - Cromwell Memorial Events Centre Light, airy, full-bleed venue look (ported from the approved prototype). Palette: deep teal #451E3F · cream #f8f7f4 · gold-grey #B91F3F Type: Larken (display) + Inter (UI) + Playfair (serif fallback) ============================================================ */ /* Dontawild - display face for all headings (self-hosted). Muli/Mulish (body) from Google Fonts. */ @font-face { font-family: 'Dontawild'; src: url('../fonts/Dontawild.ttf') format('truetype'); font-weight: normal; font-style: normal; /* optional = no fallback→swap reflow; the big condensed headings won't jump. Preloaded in the so it's almost always ready before first paint. */ font-display: optional; } :root { --plum: #451E3F; --plum-soft: #6e4f66; --red: #B91F3F; --red-light: #B91F3F; /* brand red - used as the accent on dark/plum backgrounds too */ --cream: #f8f7f4; --line: #d8d4ce; --white: #ffffff; /* legacy aliases (kept so any stray reference still resolves) */ --teal: #451E3F; --teal-soft: #6e4f66; --gold: #B91F3F; --serif: 'Dontawild', 'Arial Narrow', system-ui, sans-serif; /* display / headings */ --sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* body / subtitle */ } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 18px; } body { font-family: var(--sans); font-weight: 300; /* Muli light for body + subtitles */ /* off-white grey base + subtle grain for depth across all sections */ background-color: var(--cream); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); background-size: 220px 220px; background-repeat: repeat; background-blend-mode: overlay; background-attachment: fixed; color: var(--teal); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* Restore bullets inside editor/rich-text content (the global reset above strips them). */ .rich-text ul { list-style: disc; padding-left: 1.25rem; margin: 0.75rem 0; } .rich-text ol { list-style: decimal; padding-left: 1.25rem; margin: 0.75rem 0; } .rich-text li { margin: 0.4rem 0; } h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: normal; line-height: 1.1; letter-spacing: 0.02em; } /* Smaller, secondary headings use Mulish bold. Key display headings (page titles, hero, plum banner, pillar words, featured/banner titles, brand logo, big numerals) stay in Dontawild. */ .event-card__title, .ncard__title, .space-card__name, .cal-row__title, .poster__title, .manual-card__title, .accordion__head, .feature__text .section-text h3, .feature__text .section-text h4, .rich-text h3, .rich-text h4 { font-family: var(--sans); font-weight: 700; letter-spacing: 0; line-height: 1.25; } /* Lenis */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ---------- Layout helpers ---------- */ .container { max-width: 1400px; margin: 0 auto; padding: 0 6vw; } .container--narrow { max-width: 760px; } .section { padding: 7rem 0; } @media (max-width: 768px) { .section { padding: 4.5rem 0; } html { font-size: 16px; } } .section-label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; font-weight: 600; } .section-label--light { color: #fff; } .section-title { font-size: clamp(3.8rem, 8vw, 6.2rem); line-height: 0.88; margin-bottom: 1.5rem; letter-spacing: 0.02em; color: var(--teal); } .section-title--light { color: #fff; } .section-text { color: var(--teal-soft); max-width: 520px; font-size: 1rem; line-height: 1.85; } .section-text--light { color: rgba(255,255,255,0.8); } .note { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.02em; } .link { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); border-bottom: 2px solid var(--teal); padding-bottom: 5px; display: inline-block; } .rich-text { color: var(--teal-soft); line-height: 1.85; } /* Narrow rich-text: align prose to the page's left content gutter instead of floating centre - a lone centred column between left-aligned sections reads as misaligned. */ .richtext--narrow .container--narrow, .richtext--centered .container--narrow { max-width: 1400px; margin: 0 auto; } .richtext--narrow .container--narrow .rich-text { max-width: 720px; } /* Centered = same reading column but centred on the page (column centred; text stays left for readability). */ .richtext--centered .container--narrow .rich-text { max-width: 720px; margin-left: auto; margin-right: auto; } .rich-text h2 { color: var(--teal); margin: 1.8rem 0 0.85rem; font-size: 2.3rem; } .rich-text h3 { color: var(--teal); margin: 1.5rem 0 0.75rem; font-size: 1.8rem; } .rich-text h4 { color: var(--teal); margin: 1.4rem 0 0.6rem; font-size: 1.4rem; } .rich-text p { margin-bottom: 1rem; } .rich-text a { color: var(--teal); border-bottom: 1px solid var(--gold); } .rich-text blockquote { border-left: 3px solid var(--teal); padding-left: 1.25rem; margin: 1.5rem 0; font-style: italic; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 2.25rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; border: 1px solid rgba(255,255,255,0.5); color: #fff; background: transparent; border-radius: 100px; cursor: pointer; transition: background 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.5s ease, color 0.4s ease; } .btn::after { content: '\2192'; display: inline-block; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } .btn:hover { background: var(--red); border-color: var(--red); color: #fff; } .btn:hover::after { transform: translateX(4px); } .btn--dark { border-color: rgba(69,30,63,0.3); color: var(--teal); } .btn--dark:hover { background: var(--red); border-color: var(--red); color: #fff; } .btn--solid { background: #fff; color: var(--plum); border-color: #fff; } .btn--solid:hover { background: var(--red); border-color: var(--red); color: #fff; } /* CTA banner: left-align the buttons under the heading */ .hire .hero__actions { justify-content: flex-start; gap: 1rem; margin-top: 2rem; } .pill { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--line); border-radius: 100px; padding: 0.4rem 0.9rem; background: #fff; } a.pill:hover { background: var(--teal); color: #fff; border-color: var(--teal); } /* ============================================================ Navigation ============================================================ */ .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 0.85rem 6vw; display: flex; align-items: center; justify-content: space-between; transition: all 0.5s ease; } .nav.scrolled { background: rgba(248,247,244,0.96); backdrop-filter: blur(12px); padding: 0.85rem 6vw; box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .nav--solid { background: rgba(248,247,244,0.96); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0,0,0,0.05); } .nav__logo { display: inline-flex; align-items: center; transition: color 0.5s ease; } /* White horizontal lockup on the transparent (dark-hero) nav; dark version on the light scrolled/solid states where white would vanish. */ .nav__logo-img { display: block; height: 2.4rem; width: auto; } .nav__logo-img--dark { display: none; } .nav.scrolled .nav__logo-img--light, .nav--solid .nav__logo-img--light { display: none; } .nav.scrolled .nav__logo-img--dark, .nav--solid .nav__logo-img--dark { display: block; } .nav.scrolled .nav__logo { color: var(--teal); } .nav__links { display: flex; gap: 2rem; align-items: center; } /* nav links: Mulish, animated underline, rose active accent */ .nav__links > .nav__link, .nav__drop { display: inline-flex; align-items: center; line-height: 1; align-self: center; } .nav__link, .nav__menu a { position: relative; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.82); text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color 0.3s ease, text-decoration-color 0.3s ease; } /* SilverStripe's menu LinkingMode adds `section`/`current`/`link` classes to nav items. These collide with the theme's generic `.section` (padding) and `.link` (border-bottom underline + padding) utility classes - leaking an underline onto every non-active link and making it 2px taller than the active one. Neutralise both here so the only nav underline is the deliberate red ::after on the active page. */ .nav__link.section, .nav__link.current, .nav__link.link, .nav__drop-toggle.section, .nav__drop-toggle.current, .nav__drop-toggle.link { padding-top: 0; padding-bottom: 0; border-bottom: 0; } .nav__link:hover, .nav__drop:hover > .nav__link { color: #fff; } .nav__link.current, .nav__link.section { color: #fff; } /* Active-page underline as a layout-neutral ::after so the selected link never shifts or changes height vs the others (text-decoration:underline nudged the box). */ .nav__link.current::after, .nav__link.section::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--red); } .nav.scrolled .nav__link { color: var(--teal-soft); } .nav.scrolled .nav__link:hover, .nav.scrolled .nav__link.current, .nav.scrolled .nav__link.section { color: var(--teal); } .nav__caret { font-size: 0.6em; opacity: 0.7; } /* Discover dropdown */ .nav__drop { position: relative; } .nav__caret { display: inline-block; font-size: 0.62em; margin-left: 0.35em; transform: translateY(-1px); transition: transform 0.3s ease; } .nav__drop:hover .nav__caret { transform: translateY(-1px) rotate(180deg); } .nav__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 228px; padding: 0.35rem 1.3rem; margin-top: 14px; background: #fff; border-radius: 12px; box-shadow: 0 16px 44px rgba(69,30,63,0.16); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1); z-index: 60; } .nav__menu::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .nav__drop-toggle { cursor: default; user-select: none; } .nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav__menu a { display: block; padding: 0.82rem 0; color: var(--plum); font-size: 0.74rem; letter-spacing: 0.08em; border-bottom: 1px solid rgba(69,30,63,0.1); transition: color 0.2s ease, padding-left 0.2s ease; } .nav__menu a:last-child { border-bottom: 0; } .nav__menu a:hover, .nav__menu a.current, .nav__menu a.section { background: transparent; color: var(--red); padding-left: 0.5rem; } /* Book the Hall CTA */ .nav__cta { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 100px; padding: 0.65rem 1.4rem; transition: all 0.4s ease; } .nav__cta:hover { background: #fff; color: var(--plum); border-color: #fff; } .nav__cta--menu { display: none; } /* only shown inside the mobile menu overlay */ .nav.scrolled .nav__cta { color: var(--plum); border-color: var(--plum); } .nav.scrolled .nav__cta:hover { background: var(--plum); color: #fff; } .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 0.5rem; z-index: 1001; } .nav__hamburger span { display: block; width: 24px; height: 1.5px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease, background 0.5s ease; } .nav.scrolled .nav__hamburger span { background: var(--teal); } /* Solid nav for pages with a light page-head (What's On, News, Articles) so the white-on-white nav text doesn't disappear. Mirrors the scrolled (dark-text) styling. */ .nav--solid .nav__logo { color: var(--teal); } .nav--solid .nav__link { color: var(--teal-soft); } .nav--solid .nav__link:hover, .nav--solid .nav__link.current, .nav--solid .nav__link.section, .nav--solid .nav__drop:hover > .nav__link { color: var(--teal); } .nav--solid .nav__cta { color: var(--plum); border-color: rgba(69,30,63,0.4); } .nav--solid .nav__cta:hover { background: var(--plum); color: #fff; border-color: var(--plum); } .nav--solid .nav__hamburger span { background: var(--teal); } .nav__hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__hamburger.active span:nth-child(2) { opacity: 0; } .nav__hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ============================================================ Banner · Hero ============================================================ */ .hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .hero__image { position: absolute; inset: 0; z-index: 0; } .hero__image img, .hero__image video { width: 100%; height: 100%; object-fit: cover; transform-origin: center; animation: heroGrow 20s ease-out both; } @keyframes heroGrow { from { transform: scale(1); } to { transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .hero__image img, .hero__image video { animation: none; } } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.7) 100%); } .hero__content { position: relative; z-index: 2; max-width: 900px; padding: 0 2rem; } .hero__venue-name { font-family: var(--serif); font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); margin-bottom: 1rem; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } .hero__logo { display: block; position: relative; z-index: 3; width: clamp(220px, 26vw, 360px); height: auto; margin: 0 auto 1.5rem; } .hero__title { font-size: clamp(3rem,7.5vw,6.4rem); color: #fff; letter-spacing: 0.02em; margin-bottom: 1.25rem; white-space: nowrap; } /* Cycling words. inline-grid stacks every word in one cell, so the box keeps a stable baseline that matches the static heading - the translateY slide is purely visual and never moves the baseline (the old absolute + vertical-align:bottom + overflow:hidden setup dropped the red word below the line). JS sets the width per active word so the centred heading stays tight as the word changes. */ .hero__cycle-wrap { display: inline-grid; grid-template-columns: 100%; justify-items: center; vertical-align: baseline; transition: width 0.5s cubic-bezier(0.22,1,0.36,1); } .hero__cycle-word { grid-area: 1 / 1; opacity: 0; transform: translateY(90%); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); color: var(--red-light); white-space: nowrap; } .hero__cycle-word.active { opacity: 1; transform: translateY(0); } .hero__cycle-word.exit { opacity: 0; transform: translateY(-90%); } @media (max-width: 768px) { .hero__title { white-space: normal; } .hero__cycle-wrap { display: grid; width: auto !important; } } .hero__subtitle { display: none; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .hero__actions--center { justify-content: center; margin-top: 1.5rem; } .hero__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; } .hero__meta-item { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); } .hero__meta-item em { color: var(--gold); font-style: normal; } /* Space-page hero variant */ .space-single__hero { position: relative; height: 70vh; min-height: 480px; overflow: hidden; } .space-single__hero img { width: 100%; height: 100%; object-fit: cover; } .space-single__hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1)); } .space-single__hero-content { position: absolute; left: 6vw; bottom: 3rem; z-index: 2; } /* ============================================================ Banner · Compact (Discover / Memorial) ============================================================ */ .discover { text-align: center; background: #fff; padding: 6rem 0; border-bottom: 1px solid var(--cream); } .discover.banner--Dark { background: var(--red); } .discover.banner--Dark .disc-title, .discover.banner--Dark .disc-sub { color: #fff; } .disc-eyebrow { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; } .discover.banner--Dark .disc-eyebrow { color: #fff; } .disc-title { font-family: var(--serif); font-size: clamp(4.4rem,12vw,8.8rem); line-height: 1.04; letter-spacing: 0.02em; color: var(--teal); } .disc-sub { font-size: clamp(1rem,2.4vw,1.5rem); color: var(--teal-soft); margin-top: 1rem; } /* ============================================================ Banner · CTA / Venue Hire ============================================================ */ .hire { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--teal); } .hire__bg { position: absolute; inset: 0; z-index: 0; } .hire__bg img { width: 100%; height: 130%; object-fit: cover; } .hire__bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .hire__content { position: relative; z-index: 1; max-width: 1200px; width: 100%; padding: 6rem 6vw; } .cta-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: center; } .cta-meta__item { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1rem; margin-bottom: 1.25rem; } .cta-meta__item .ph-eye { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-light); display: block; margin-bottom: 0.4rem; } .cta-meta__item p { color: rgba(255,255,255,0.8); font-size: 0.9rem; } @media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ============================================================ Feature (media + text) ============================================================ */ .feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 60vh; } /* No image yet: collapse to a clean centred text block instead of a blank half */ .feature--no-media { grid-template-columns: 1fr; min-height: 0; } .feature--no-media .feature__text { max-width: 820px; margin: 0 auto; text-align: center; padding: 6rem 2rem; align-items: center; } .feature--no-media .feature__text .section-text { margin-left: auto; margin-right: auto; } .feature--media-right { direction: rtl; } .feature--media-right > * { direction: ltr; } .feature__media { overflow: hidden; } .feature__media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; } .feature__text { display: flex; flex-direction: column; justify-content: center; padding: 5rem 5vw; background: var(--cream); } @media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature--media-right { direction: ltr; } .feature__text { padding: 3.5rem 2rem; } } /* ============================================================ Collection - head + layouts ============================================================ */ .head2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; } .head2__copy { max-width: 420px; padding-top: 0.6rem; } .collection__viewall { text-align: center; margin: 3.5rem 0 4.5rem; } .collection__viewall .link { border-bottom: 0; padding: 1rem 3.2rem; border-radius: 100px; background: var(--plum); color: #fff; font-weight: 600; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .collection__viewall .link:hover { background: var(--red); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(69,30,63,0.22); } /* Card grid */ .card-grid { display: grid; gap: 1.5rem; } .card-grid.cols-2 { grid-template-columns: repeat(2,1fr); } .card-grid.cols-3 { grid-template-columns: repeat(3,1fr); } .card-grid.cols-4 { grid-template-columns: repeat(4,1fr); } @media (max-width: 1024px) { .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .card-grid { grid-template-columns: 1fr !important; } } /* Events grid + cards */ .events__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; } @media (max-width:1024px){ .events__grid { grid-template-columns: repeat(2,1fr);} } @media (max-width:640px){ .events__grid { grid-template-columns: 1fr;} } .event-card { background: var(--cream); overflow: hidden; display: block; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; } .event-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.08); } .event-card__image { aspect-ratio: 16/10; overflow: hidden; background: var(--cream); } .event-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); } .event-card:hover .event-card__image img { transform: scale(1.04); } .event-card__body { padding: 1.75rem; } .event-card__date { font-size: 0.7rem; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.6rem; } .event-card__title { font-size: 2.2rem; color: var(--teal); margin-bottom: 0.75rem; line-height: 1.05; } .event-card__venue span { background: rgba(185,31,63,0.12); color: var(--gold); padding: 0.25em 0.7em; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* What's On listing - stacked editorial rows in the slider's visual language */ .events__list { display: flex; flex-direction: column; gap: 1.5rem; } .event-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 340px; background: var(--plum); overflow: hidden; color: #fff; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s ease; } .event-row:hover { transform: translateY(-4px); box-shadow: 0 28px 70px rgba(69,30,63,0.18); } .event-row__image { position: relative; overflow: hidden; min-height: 300px; } .event-row__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22,1,0.36,1); } .event-row:hover .event-row__image img { transform: scale(1.05); } .event-row__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 3rem clamp(2rem,4vw,3.5rem); background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.18) 100%), var(--plum); } .event-row__label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 1rem; } .event-row__date { font-size: 0.9rem; color: rgba(255,255,255,0.65); margin-bottom: 0.5rem; letter-spacing: 0.02em; } .event-row__title { font-size: clamp(2rem, 3.2vw, 3.4rem); color: #fff; line-height: 1.04; margin-bottom: 0.6rem; letter-spacing: 0.02em; } .event-row__venue { font-size: 0.85rem; color: var(--red-light); letter-spacing: 0.06em; margin-bottom: 1.2rem; } .event-row__desc { color: rgba(255,255,255,0.72); font-size: 0.97rem; line-height: 1.7; max-width: 460px; margin-bottom: 1.6rem; } .event-row__cta { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; border-bottom: 1px solid var(--red-light); padding-bottom: 3px; transition: border-color 0.3s ease; } .event-row:hover .event-row__cta { border-color: #fff; } .event-row:nth-child(even) .event-row__image { order: 2; } @media (max-width: 760px) { .event-row { grid-template-columns: 1fr; } .event-row__image { min-height: 220px; } .event-row:nth-child(even) .event-row__image { order: 0; } .event-row__content { padding: 2rem; } } /* Poster slider */ .slider { position: relative; margin-top: 2rem; } .slider__controls { display: flex; justify-content: flex-end; gap: 0.6rem; margin-bottom: 1.25rem; } .slider__controls button { width: 48px; height: 48px; border: 1px solid var(--teal); background: #fff; color: var(--teal); cursor: pointer; border-radius: 100px; transition: background .3s, color .3s; } .slider__controls button:hover { background: var(--teal); color: #fff; } .slider__track { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; scroll-snap-type: x mandatory; } .slider__track::-webkit-scrollbar { display: none; } .poster { flex: 0 0 300px; scroll-snap-align: start; } .poster__image { aspect-ratio: 29/40; overflow: hidden; background: var(--cream); } .poster__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .poster:hover .poster__image img { transform: scale(1.05); } .poster__title { font-size: 1.65rem; color: var(--teal); margin-top: 0.8rem; } .poster__meta { font-size: 0.8rem; color: var(--gold); margin-top: 0.25rem; } /* Spaces - rows */ .sp-list { border-top: 1px solid var(--teal); margin-top: 1rem; } .sp-row { display: grid; grid-template-columns: 66px 1.2fr 1.6fr 160px; gap: 2rem; align-items: center; padding: 1.75rem 0; border-bottom: 1px solid var(--line); transition: padding-left 0.4s ease; } .sp-row:hover { padding-left: 1rem; } .sp-row__num { font-family: var(--serif); font-size: 1.4rem; color: var(--gold); } .sp-row__name { font-family: var(--serif); font-size: 2.4rem; color: var(--teal); } .sp-row__desc { color: var(--teal-soft); font-size: 0.9rem; } .sp-row__cap { font-family: var(--serif); font-size: 2.4rem; color: var(--teal); text-align: right; } .sp-row__cap span { font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); } @media (max-width: 900px) { .sp-row { grid-template-columns: 50px 1fr; gap: 0.75rem 1rem; } .sp-row__desc, .sp-row__cap { grid-column: 2; text-align: left; } } /* Spaces - grid cards (Ayrburn-style overlay) */ .space-card { position: relative; overflow: hidden; aspect-ratio: 4/3; display: block; } .space-card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 2.5s cubic-bezier(0.16,1,0.3,1); } .space-card:hover img { transform: scale(1.08); } .space-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 55%); } .space-card__name { font-size: 2.2rem; color: #fff; margin-bottom: 0.25rem; } .space-card__desc { color: rgba(255,255,255,0.75); font-size: 0.85rem; line-height: 1.5; } /* News cards */ .news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; } @media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } } .ncard { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; min-height: 240px; } .ncard:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.08); } .ncard__image { aspect-ratio: 16/10; overflow: hidden; } .ncard__image img { width: 100%; height: 100%; object-fit: cover; } .ncard__body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; } .ncard__title { font-size: 1.7rem; color: var(--teal); } .ncard__excerpt { font-size: 0.9rem; color: var(--teal-soft); line-height: 1.6; } .ncard__date { margin-top: auto; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } /* Featured lead story */ .news-featured { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--cream); border: 1px solid var(--line); overflow: hidden; margin-bottom: 3rem; transition: box-shadow 0.4s ease, transform 0.4s ease; } .news-featured:hover { transform: translateY(-4px); box-shadow: 0 28px 70px rgba(69,30,63,0.12); } .news-featured__image { overflow: hidden; min-height: 340px; } .news-featured__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(0.16,1,0.3,1); } .news-featured:hover .news-featured__image img { transform: scale(1.05); } .news-featured__body { padding: 3rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; justify-content: flex-start; } .news-featured__title { font-size: clamp(2.2rem, 3vw, 3.2rem); color: var(--teal); line-height: 1.02; } .news-featured__excerpt { color: var(--teal-soft); line-height: 1.7; font-size: 1.02rem; } .news-featured__meta { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .pill--solid { background: var(--plum); color: #fff; border-color: var(--plum); } @media (max-width: 760px) { .news-featured { grid-template-columns: 1fr; } .news-featured__body { padding: 2rem; } } /* Calendar / agenda block (Events · Calendar layout) */ .cal-list { border-top: 1px solid var(--line); } .cal-row { display: grid; grid-template-columns: 88px 1fr auto auto; align-items: center; gap: 1.5rem; padding: 1.6rem 0.5rem; border-bottom: 1px solid var(--line); transition: background 0.3s ease, padding-left 0.3s ease; } .cal-row:hover { background: var(--cream); padding-left: 1.2rem; } .cal-row__date { display: flex; flex-direction: column; align-items: center; line-height: 1; } .cal-row__day { font-family: var(--serif); font-size: 2.5rem; color: var(--plum); } .cal-row__mon { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-top: 0.25rem; } .cal-row__title { font-family: var(--serif); font-size: 1.7rem; color: var(--teal); } .cal-row__meta { font-size: 0.85rem; color: var(--teal-soft); margin-top: 0.3rem; } .cal-row__go { font-size: 1.4rem; color: var(--plum); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; } .cal-row:hover .cal-row__go { opacity: 1; transform: translateX(0); } @media (max-width: 680px) { .cal-row { grid-template-columns: 60px 1fr; gap: 1rem; } .cal-row__cat, .cal-row__go { display: none; } .cal-row__day { font-size: 2rem; } } /* What's On - date range filter */ .datefilter { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0 0 2.5rem; } .datefilter__field { display: flex; flex-direction: column; gap: 0.35rem; } .datefilter__field span { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-soft); } .datefilter__field input { font-family: var(--sans); padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 6px; color: var(--plum); background: #fff; } .datefilter__field input:focus { outline: 0; border-color: var(--plum); } .datefilter__clear { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); align-self: center; } /* Custom-styled When dropdown */ .datefilter__select { appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: var(--sans); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--plum); background-color: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 0.78rem 2.8rem 0.78rem 1.3rem; cursor: pointer; min-width: 190px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 12px 8px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .datefilter__select:hover { border-color: var(--plum); } .datefilter__select:focus { outline: 0; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(69,30,63,0.12); } .datefilter__select option { color: var(--plum); font-weight: 600; } /* Brand pattern - subtle motif overlaid on the plum surfaces (overlay blend pulls the brand mark through without competing with the content). Appended last so the background-image wins over the earlier solid-colour shorthands. */ .discover.banner--Dark, .whatson-banner, .pagehead__quicklink, .textbar--plum, .launch-discover-head, .launch-opening, .footer { /* Seamless brand pattern (baked from the Group 228 mark - the half-offset is pre-tiled into the image so a plain repeat tessellates evenly), plus noise + a soft gradient. */ background-image: url(../images/brand-pattern-tile.png), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"), linear-gradient(155deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.18) 100%); background-blend-mode: soft-light, soft-light, normal; background-position: center, center, center; background-size: 200px auto, 200px 200px, cover; background-repeat: repeat, repeat, no-repeat; } /* Parallax: the Discover band's brand pattern stays pinned to the viewport while the section scrolls over it. Desktop + motion-OK only - background-attachment:fixed is janky/ignored on touch devices, and we respect prefers-reduced-motion. */ @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .discover.banner--Dark { background-attachment: fixed, fixed, scroll; } } /* Text bar - slim single-line strip carrying the brand pattern (plum base set here, the pattern image is layered on by the shared rule above). Sits flush under a hero. */ .textbar { position: relative; overflow: hidden; padding: 0.9rem 0; text-align: center; } .textbar--plum { background-color: var(--plum); color: rgba(255,255,255,0.92); } .textbar--cream { background-color: var(--cream); color: var(--plum); } /* Subtle wave-texture on the cream variant so it still reads as a patterned band. */ .textbar--cream::before { content: ''; position: absolute; inset: 0; background: url(../images/wave-texture.png) repeat-x center / auto 100%; opacity: 0.3; pointer-events: none; } .textbar .container { position: relative; z-index: 1; } .textbar__text { font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.05em; line-height: 1.4; margin: 0; } .textbar--left .textbar__text { text-align: left; } .textbar--center .textbar__text { text-align: center; } /* Wave texture - subtle "puna" (springs) water motif on light sections. z-index keeps it behind the section's content (copy/cards/cta). */ .pagehead { position: relative; overflow: hidden; } .pagehead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 156px; background: url(../images/wave-texture.png) repeat-x center / auto 156px; opacity: 0.45; pointer-events: none; z-index: 0; } .pagehead > * { position: relative; z-index: 1; } .element.dnadesign__elementaluserforms__model__elementform { overflow: hidden; } .element.dnadesign__elementaluserforms__model__elementform::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; background: url(../images/wave-texture.png) repeat-x center / auto 140px; opacity: 0.4; pointer-events: none; z-index: 0; } .element.dnadesign__elementaluserforms__model__elementform > * { position: relative; z-index: 1; } .bookbox { position: relative; overflow: hidden; } .bookbox::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 112px; background: url(../images/wave-texture.png) repeat-x center / auto 112px; opacity: 0.4; pointer-events: none; z-index: 0; } .bookbox > * { position: relative; z-index: 1; } /* Team */ .team-card { text-align: left; } .team-card__photo { aspect-ratio: 5/6; overflow: hidden; background: var(--cream); margin-bottom: 1rem; } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; } .team-card__name { font-size: 1.85rem; color: var(--teal); } .team-card__role { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.04em; margin-top: 0.2rem; } .team-card__bio { color: var(--teal-soft); font-size: 0.9rem; margin-top: 0.6rem; line-height: 1.6; } /* Gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2rem; } @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2,1fr); } } .gallery-grid figure { overflow: hidden; position: relative; } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 0.8s ease; } .gallery-grid figure:hover img { transform: scale(1.05); } .gallery-grid figcaption { font-size: 0.75rem; color: var(--gold); padding: 0.5rem 0; } /* Pillars (Manual cards · Rows) */ /* Full-bleed pillars band (breaks out of the container to full viewport width) */ .pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; width: 100vw; left: 50%; margin-left: -50vw; margin-right: -50vw; } /* Image-card pillars - text over photo, hover-reveal, matching the space cards */ .pillar { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: flex; } .pillar__image { position: absolute; inset: 0; } .pillar__image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 2.4s cubic-bezier(0.16,1,0.3,1); } .pillar:hover .pillar__image img { transform: scale(1.1); transition: transform 1.6s cubic-bezier(0.22,1,0.36,1); } .pillar__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: #fff; background: rgba(0,0,0,0.34); transition: background 0.6s ease; } .pillar:hover .pillar__overlay { background: rgba(0,0,0,0.48); } .pillar__title { font-size: clamp(2.8rem, 6.6vw, 9rem); line-height: 0.88; color: #fff; margin: 0; width: 100%; } /* Image pillars: just the title + image (with hover grow) — no subtext or CTA. */ .pillar:not(.pillar--plain) .pillar__text, .pillar:not(.pillar--plain) .pillar__cta { display: none; } .pillar__text { font-size: 0.95rem; color: rgba(255,255,255,0.9); line-height: 1.6; max-width: 22ch; margin-top: 0.9rem; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: opacity 1.2s ease, transform 1.2s ease, max-height 1.2s ease, margin-top 0.6s ease; } .pillar:hover .pillar__text { max-height: 140px; opacity: 1; transform: translateY(0); transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s, max-height 0.7s ease 0.05s; } .pillar__cta { display: inline-block; margin-top: 1rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border-bottom: 1px solid var(--red-light); padding-bottom: 2px; } /* Fallback when a pillar has no image - keep the light editorial look */ .pillar--plain { aspect-ratio: auto; background: var(--cream); border-right: 1px solid var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pillar--plain .pillar__overlay { background: none; color: inherit; margin-top: 0; padding: 4.5rem 3vw; } .pillar--plain .pillar__num { color: var(--red); } .pillar--plain .pillar__title { color: var(--teal); font-size: 2.6rem; } .pillar--plain .pillar__text { max-height: none; opacity: 1; transform: none; color: var(--teal-soft); font-size: 1rem; } @media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } .pillar__title { font-size: clamp(3.2rem, 9vw, 5rem); } } @media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } .pillar { aspect-ratio: 16 / 10; } .pillar__title { font-size: clamp(3.8rem, 15vw, 6rem); } } /* Manual grid cards */ .manual-card__image { aspect-ratio: 16/10; overflow: hidden; background: var(--cream); margin-bottom: 1rem; } .manual-card__image img { width: 100%; height: 100%; object-fit: cover; } .manual-card__num { font-family: var(--serif); color: var(--gold); } .manual-card__title { font-size: 1.7rem; color: var(--teal); margin: 0.3rem 0 0.5rem; } .manual-card__text { font-size: 0.9rem; color: var(--teal-soft); line-height: 1.6; } /* ============================================================ Accordion / Spec list ============================================================ */ /* Announcement banner - slim attention strip linking to a page */ .announce { width: 100%; color: #fff; font-family: var(--sans); } .announce--plum { background: var(--plum); } .announce--teal { background: var(--teal); } .announce--red { background: var(--red); } .announce__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.25rem; padding: 0.85rem 6vw; text-align: center; } .announce__msg { margin: 0; font-size: 0.92rem; letter-spacing: 0.01em; } .announce__link { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; border-bottom: 1.5px solid rgba(255,255,255,0.6); padding-bottom: 1px; transition: border-color 0.25s ease, opacity 0.25s ease; white-space: nowrap; } .announce__link:hover { border-color: #fff; opacity: 0.85; } /* Subscribe banner - email signup band */ .subscribe-banner { background: var(--teal); color: #fff; padding: 4.5rem 0; } .subscribe-banner__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; } .subscribe-banner__text { flex: 1 1 320px; } .subscribe-banner__title { font-size: clamp(2rem, 4vw, 3rem); line-height: 0.95; color: #fff; margin: 0; } .subscribe-banner__intro { color: rgba(255,255,255,0.85); margin: 0.75rem 0 0; max-width: 42ch; } .subscribe-banner__action { flex: 1 1 380px; max-width: 460px; } .subscribe-banner__form { display: flex; gap: 0.75rem; } .subscribe-banner__form input { flex: 1 1 auto; min-width: 0; padding: 0.9rem 1.1rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; background: rgba(255,255,255,0.08); color: #fff; font-family: var(--sans); font-size: 0.95rem; } .subscribe-banner__form input::placeholder { color: rgba(255,255,255,0.6); } .subscribe-banner__form .btn { flex: 0 0 auto; } .subscribe-banner__privacy { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin: 0.85rem 0 0; } /* Opening hours banner - slim strip under a page header */ .hours-banner { background: var(--teal); color: #fff; } .hours-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 2.25rem; padding-top: 1.1rem; padding-bottom: 1.1rem; } .hours-banner__label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .hours-banner__rows { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; } .hours-banner__row { display: flex; gap: 0.5rem; font-size: 0.92rem; } .hours-banner__day { font-weight: 600; } .hours-banner__time { opacity: 0.82; } .hours-banner__note { font-size: 0.8rem; opacity: 0.7; margin-left: auto; } @media (max-width: 600px) { .hours-banner__note { margin-left: 0; } } /* Gallery banner - full-width 4-image strip, no text */ .gallery-banner { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; height: 60vh; min-height: 360px; max-height: 640px; } .gallery-banner__cell { overflow: hidden; } .gallery-banner__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .gallery-banner__cell:hover img { transform: scale(1.05); } @media (max-width: 768px) { .gallery-banner { grid-template-columns: repeat(2, 1fr); height: auto; max-height: none; } .gallery-banner__cell img { aspect-ratio: 4/5; height: auto; } } .space-single__uses, .space-single__features { margin-top: 2rem; } /* Venue-hire enquiry section at the bottom of each Space page (anchor target #enquire) */ .space-enquiry { background: var(--cream); border-top: 1px solid var(--line); padding: 5rem 0 6rem; margin-top: 4rem; scroll-margin-top: 6rem; } .space-enquiry .section-intro { max-width: 580px; margin: 0.5rem 0 2.5rem; color: var(--teal-soft); } .space-uses { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .specs { border-top: 1px solid var(--teal); margin-top: 1rem; } .specs__row { display: grid; grid-template-columns: 180px 1fr; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line); } .specs__k { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } .specs__v { color: var(--teal-soft); } @media (max-width: 600px) { .specs__row { grid-template-columns: 1fr; gap: 0.3rem; } } .accordion { border-top: 1px solid var(--line); margin-top: 1rem; } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__head { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.25rem 0; font-family: var(--serif); font-size: 1.7rem; color: var(--teal); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .accordion__icon { color: var(--gold); font-size: 1.4rem; transition: transform 0.3s ease; } .accordion__item.open .accordion__icon { transform: rotate(45deg); } .accordion__body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .accordion__body .rich-text { padding-bottom: 1.5rem; } /* ============================================================ Forms (UserForms) - styled to match the prototype enquiry form ============================================================ */ .enquiry { background: var(--cream); } .enquiry__inner { max-width: 820px; margin: 0 auto; padding: 0 2rem; } .enquiry__header { text-align: center; margin-bottom: 3rem; } .enquiry__actions { margin-top: 1.75rem; } .enquiry__header .note { margin-top: 1rem; } .enquiry__header .section-text { margin: 0 auto; } .enquiry__form .field, .enquiry__form .userformsgroup { margin-bottom: 1.25rem; } .enquiry__form label { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-soft); margin-bottom: 0.5rem; font-weight: 500; } .enquiry__form input[type=text], .enquiry__form input[type=email], .enquiry__form input[type=tel], .enquiry__form input[type=number], .enquiry__form input[type=date], .enquiry__form select, .enquiry__form textarea { width: 100%; font-family: var(--sans); font-size: 0.95rem; padding: 0.9rem 1rem; border: 1px solid var(--line); background: #fff; color: var(--teal); outline: none; transition: border-color 0.3s ease; } .enquiry__form input:focus, .enquiry__form select:focus, .enquiry__form textarea:focus { border-color: var(--teal); } .enquiry__form textarea { resize: vertical; min-height: 120px; } .enquiry__form .btn-toolbar button, .enquiry__form input[type=submit] { display: inline-flex; align-items: center; padding: 0.85rem 2.25rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; border: 1px solid var(--teal); color: #fff; background: var(--teal); border-radius: 100px; cursor: pointer; } .enquiry__form .btn-toolbar button:hover, .enquiry__form input[type=submit]:hover { background: var(--red); border-color: var(--red); } .enquiry__form .message { background: #fff; border: 1px solid var(--line); padding: 1rem; margin-bottom: 1rem; color: var(--teal-soft); } /* ElementForm block (embedded UserForm) - full-bleed cream band, centred themed form. The dnadesign elemental-userforms module wraps the form in its own markup, so these rules target the module's classes directly rather than the old .enquiry__form wrapper. */ .element.dnadesign__elementaluserforms__model__elementform { width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-right: -50vw; background: var(--cream); padding: 5rem 1.5rem 5.5rem; } .element.dnadesign__elementaluserforms__model__elementform > * { max-width: 720px; margin-left: auto; margin-right: auto; } .element.dnadesign__elementaluserforms__model__elementform .element__title, .element.dnadesign__elementaluserforms__model__elementform > h2, .element.dnadesign__elementaluserforms__model__elementform > h3 { text-align: center; margin: 0 auto 2.5rem; } .userform .userform-fields { display: block; } .userform fieldset, .userform .userformsstep { border: 0; padding: 0; margin: 0; } .userform .field { margin-bottom: 1.4rem; } .userform .field > label, .userform label.form-label, .userform .field .left { display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); font-weight: 600; margin-bottom: 0.55rem; float: none; width: auto; } .userform .middleColumn { margin: 0; } .userform input[type=text], .userform input[type=email], .userform input[type=tel], .userform input[type=number], .userform input[type=date], .userform select, .userform textarea { width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; font-family: var(--sans); font-size: 1rem; color: var(--plum); background: #fff; border: 1px solid var(--line); border-radius: 4px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .userform input:focus, .userform select:focus, .userform textarea:focus { outline: 0; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(69,30,63,0.12); } .userform textarea { resize: vertical; min-height: 140px; } .userform .btn-toolbar { margin-top: 1.9rem; text-align: center; } .userform .btn-toolbar input[type=submit], .userform .btn-toolbar button[type=submit], .userform .btn-toolbar button { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 3rem; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; border: 0; border-radius: 100px; background: var(--plum); color: #fff; cursor: pointer; transition: background 0.25s ease; } .userform .btn-toolbar input[type=submit]:hover, .userform .btn-toolbar button:hover { background: var(--red); } .userform .required-marker, .userform .requiredField > label .required { color: var(--red); } .userform .field .message, .userform .message.validation { font-size: 0.8rem; color: var(--red); margin-top: 0.45rem; } .userform input[type=text]::placeholder, .userform textarea::placeholder { color: var(--plum-soft); opacity: 0.6; } /* Book box / band */ .bookbox { border: 1px solid var(--line); padding: 1.75rem; text-align: center; background: var(--cream); } .bookbox .btn { width: 100%; justify-content: center; margin: 0.5rem 0; } .bookband { border: 1px solid var(--line); padding: 1.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .bookband__poster { flex: 0 0 200px; } /* ============================================================ Page heads, listings, detail pages ============================================================ */ .pagehead { padding: 9rem 0 3rem; border-bottom: 1px solid var(--cream); } .pagehead__intro { color: var(--teal-soft); max-width: 640px; margin-top: 1rem; } .pagehead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; flex-wrap: wrap; } .pagehead__main { flex: 1 1 480px; } /* What's On → cinema quick-link card */ .pagehead__quicklink { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.4rem; min-width: 260px; padding: 1.8rem 2rem; border-radius: 14px; background: var(--plum); color: #fff; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .pagehead__quicklink:hover { background: var(--red); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(69,30,63,0.25); } .pagehead__quicklink-eyebrow { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .pagehead__quicklink:hover .pagehead__quicklink-eyebrow { color: rgba(255,255,255,0.85); } .pagehead__quicklink-title { font-family: var(--serif); font-size: clamp(3.4rem, 4vw, 4rem); line-height: 0.95; } .pagehead__quicklink-arrow { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); margin-top: 0.3rem; } .listing { padding: 4rem 0 7rem; } .filterbar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; } .back-link { margin-top: 3rem; } .split--detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; } /* Booking aside stays in view while the event details scroll past (clears the fixed nav). */ .event-single__aside { position: sticky; top: 6rem; align-self: start; } @media (max-width: 900px) { .split--detail { grid-template-columns: 1fr; gap: 2rem; } .event-single__aside { position: static; top: auto; } } .event-single__hero img, .article-single__hero img { width: 100%; max-height: 70vh; object-fit: cover; display: block; } .event-single__hero, .article-single__hero { position: relative; margin-bottom: 0; } /* Top scrim so the overlaid nav stays legible against a light or busy hero image. */ .event-single__hero::before, .article-single__hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, rgba(28,10,25,0.6), rgba(28,10,25,0)); pointer-events: none; z-index: 1; } /* News-item page reads as one left-aligned editorial column - header, hero and body share the same narrow width and left edge, consistent at every viewport width. */ .article-single .container--narrow { margin-left: 0; margin-right: auto; } .article-single__hero figure { margin: 0; } .event-single__meta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.25rem 0 2rem; } .event-single__video, .event-single__practical, .space-single__av { margin-top: 2.5rem; } .article-single__byline { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.04em; } .article-single__hero { margin: 2rem auto; } .embed-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .embed-responsive--map { padding-bottom: 45%; } /* Video block */ .videoblock--narrow .container { max-width: 900px; } .videoblock__player { position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #000; } .videoblock__player video { display: block; width: 100%; height: auto; } .videoblock__caption { margin: 0.75rem auto 0; text-align: center; font-size: 0.9rem; opacity: 0.75; } /* ============================================================ Footer ============================================================ */ .footer { background: var(--teal); color: #fff; padding: 5rem 6vw 2.5rem; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .footer__emblem { display: block; width: 150px; height: auto; margin-bottom: 1.5rem; } .footer__brand h3 { font-size: 1.75rem; margin-bottom: 1.25rem; } .footer__brand h3 span { font-weight: 400; font-style: italic; } .footer__brand p { color: rgba(255,255,255,0.55); font-size: 0.9rem; line-height: 1.7; max-width: 320px; } .footer__col h4 { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-light); margin-bottom: 1.25rem; font-weight: 600; } .footer__col a { display: block; color: rgba(255,255,255,0.55); font-size: 0.9rem; margin-bottom: 0.6rem; transition: color 0.3s ease; } .footer__col a:hover { color: #fff; } /* Reusable social icon row (footer + CTA banner) */ .social-icons { display: flex; gap: 0.75rem; flex-wrap: wrap; } .social-icons__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.25); color: #fff; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .social-icons__link:hover { background: #fff; color: var(--plum); border-color: #fff; } .footer .social-icons { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); margin-bottom: 1.5rem; } .cta-grid .social-icons { margin-top: 1.5rem; } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer__bottom p, .footer__bottom a { color: rgba(255,255,255,0.55); font-size: 0.75rem; } @media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } .footer__bottom { flex-direction: column; text-align: center; } } /* ============================================================ Mobile nav ============================================================ */ /* Intermediate widths: compact the bar (tighter gaps, smaller logo + links) so the full horizontal nav stays on one line down to the hamburger breakpoint instead of wrapping. */ @media (max-width: 1240px) and (min-width: 1025px) { .nav__links { gap: 1.15rem; } .nav__link, .nav__menu a { font-size: 0.72rem; letter-spacing: 0.05em; } .nav__logo-img { height: 2rem; } .nav__cta { padding: 0.55rem 1.05rem; font-size: 0.72rem; } } @media (max-width: 1024px) { .nav { padding: 0.7rem 1.5rem; } .nav.scrolled { padding: 0.7rem 1.5rem; } /* Mobile menu: full-screen branded panel — plum + woven pattern, big serif links. */ .nav__links { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; transition: right 0.55s cubic-bezier(0.22,1,0.36,1); background: var(--plum); background-image: url(../images/brand-pattern-tile.png), linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)); background-size: 240px auto, cover; background-blend-mode: soft-light, normal; } .nav__links.open { right: 0; } .nav__links > .nav__link, .nav__drop > .nav__drop-toggle { font-family: var(--sans); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.06em; color: #fff !important; } .nav__links > .nav__link:hover, .nav__drop:hover > .nav__drop-toggle { color: var(--red-light) !important; } .nav__link::after { display: none; } .nav__caret { display: none; } .nav__drop { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .nav__menu { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .nav__menu a { padding: 0.2rem; font-size: 0.95rem; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7) !important; } .nav__menu a:hover, .nav__menu a.current { background: none; color: #fff !important; } /* Book the Hall lives inside the menu overlay on mobile; hide the top-bar copy. */ .nav__cta--bar { display: none; } .nav__cta--menu { display: inline-flex; margin-top: 1.5rem; color: #fff !important; border-color: rgba(255,255,255,0.7) !important; } .nav__cta--menu:hover { background: #fff !important; color: var(--plum) !important; } .nav__hamburger { display: flex; } } /* Fade-in (GSAP sets initial state; fallback visible if JS off) */ .no-js .fade-in { opacity: 1; } /* ============================================================ What's On - cinematic rotating banner (Showcase layout) ============================================================ */ .whatson-banner { position: relative; height: 80vh; min-height: 560px; overflow: hidden; background: var(--plum); } .whatson-banner__slides { position: relative; width: 100%; height: 100%; } .whatson-banner__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; pointer-events: none; transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1); } .whatson-banner__slide.active { opacity: 1; pointer-events: auto; } .whatson-banner__image { position: relative; overflow: hidden; } .whatson-banner__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s cubic-bezier(0.22,1,0.36,1); } .whatson-banner__slide.active .whatson-banner__image img { transform: scale(1.06); } .whatson-banner__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 4rem 6vw 4rem 4vw; background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.20) 100%), var(--plum); color: #fff; } .whatson-banner__content .btn { align-self: flex-start; } .whatson-banner__label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 1.5rem; } .whatson-banner__date { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; letter-spacing: 0.02em; } .whatson-banner__title { font-size: clamp(2.4rem, 4vw, 4.2rem); color: #fff; line-height: 1.04; margin-bottom: 0.75rem; letter-spacing: 0.02em; } .whatson-banner__venue { font-size: 0.85rem; color: var(--red-light); letter-spacing: 0.06em; margin-bottom: 1.5rem; } .whatson-banner__desc { color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.7; max-width: 440px; margin-bottom: 2rem; } .whatson-banner__content > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .whatson-banner__slide.active .whatson-banner__content > * { opacity: 1; transform: translateY(0); } .whatson-banner__slide.active .whatson-banner__content > *:nth-child(1) { transition-delay: 0.1s; } .whatson-banner__slide.active .whatson-banner__content > *:nth-child(2) { transition-delay: 0.2s; } .whatson-banner__slide.active .whatson-banner__content > *:nth-child(3) { transition-delay: 0.3s; } .whatson-banner__slide.active .whatson-banner__content > *:nth-child(4) { transition-delay: 0.4s; } .whatson-banner__slide.active .whatson-banner__content > *:nth-child(5) { transition-delay: 0.5s; } .whatson-banner__slide.active .whatson-banner__content > *:nth-child(6) { transition-delay: 0.6s; } .whatson-banner__nav { position: absolute; bottom: 2.5rem; right: 6vw; display: flex; gap: 0.6rem; z-index: 10; } .whatson-banner__dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); background: transparent; cursor: pointer; padding: 0; transition: all 0.4s ease; } .whatson-banner__dot.active { background: #fff; border-color: #fff; } .whatson-banner__dot:hover { border-color: #fff; } .whatson-banner__progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.08); z-index: 10; } .whatson-banner__progress-bar { height: 100%; width: 0; background: var(--red-light); } .whatson-banner__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; z-index: 11; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, border-color 0.3s ease; } .whatson-banner__arrow:hover { background: #fff; color: var(--plum); border-color: #fff; } .whatson-banner__arrow--prev { left: 6vw; } .whatson-banner__arrow--next { right: 6vw; } @media (max-width: 768px) { .whatson-banner { height: auto; min-height: 0; } .whatson-banner__slide { grid-template-columns: 1fr; position: relative; inset: auto; display: none; } .whatson-banner__slide.active { display: grid; } .whatson-banner__image { height: 40vh; } .whatson-banner__content { padding: 3rem 2rem 5rem; } .whatson-banner__nav { right: 2rem; bottom: 1.5rem; } .whatson-banner__arrow { width: 42px; height: 42px; top: 20vh; } .whatson-banner__arrow--prev { left: 1rem; } .whatson-banner__arrow--next { right: 1rem; } } /* ============================================================ Spaces grid - Ayrburn-style tight grid w/ hover reveal ============================================================ */ /* Centred full-bleed plum heading band - used by the Spaces grid and the pillars ("What this place is for") collection, flush above their image cards. */ .collection--spaces .head2, .collection--manual.collection--rows .head2 { width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 0; margin-bottom: 0; background: var(--plum); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4.5rem 1.5rem; gap: 1.2rem; } .collection--spaces .head2 .section-title, .collection--manual.collection--rows .head2 .section-title { color: #fff; margin: 0; } .collection--spaces .head2__copy, .collection--manual.collection--rows .head2__copy { max-width: 640px; } .collection--spaces .head2__copy .section-text, .collection--manual.collection--rows .head2__copy .section-text { color: rgba(255,255,255,0.85); } .collection--spaces.collection--grid .card-grid { gap: 0; width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-right: -50vw; } .collection--spaces .space-card { aspect-ratio: 4 / 3; } .collection--spaces .space-card img { transform: scale(1.03); transition: transform 2.4s cubic-bezier(0.16,1,0.3,1); } .collection--spaces .space-card:hover img { transform: scale(1.1); transition: transform 1.6s cubic-bezier(0.22,1,0.36,1); } .collection--spaces .space-card__overlay { background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 58%); transition: background 1.4s ease; } .collection--spaces .space-card:hover .space-card__overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.15) 62%); transition: background 1s ease; } .collection--spaces .space-card__desc { opacity: 0; max-height: 0; transform: translateY(8px); overflow: hidden; transition: opacity 1.2s ease, transform 1.2s ease, max-height 1.2s ease; } .collection--spaces .space-card:hover .space-card__desc { opacity: 1; max-height: 120px; transform: translateY(0); transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s, max-height 0.7s ease 0.05s; } /* ============================================================ Gallery lightbox ============================================================ */ .gallery-grid img { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(24,9,21,0.94); display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 4vw; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .lightbox.open { opacity: 1; visibility: visible; } .lightbox__stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; cursor: zoom-out; } .lightbox__img { max-width: 84vw; max-height: 80vh; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,0.5); } .lightbox__caption { color: rgba(255,255,255,0.8); font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.04em; } .lightbox__close { position: absolute; top: 1.75rem; right: 2.25rem; background: none; border: 0; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; opacity: 0.8; transition: opacity 0.3s ease; } .lightbox__close:hover { opacity: 1; } .lightbox__nav { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 52px; height: 52px; border-radius: 100px; font-size: 1.2rem; cursor: pointer; flex-shrink: 0; transition: background 0.3s ease, border-color 0.3s ease; } .lightbox__nav:hover { background: var(--red); border-color: var(--red); } @media (max-width: 768px) { .lightbox { gap: 0.5rem; } .lightbox__nav { width: 40px; height: 40px; } .lightbox__close { top: 1rem; right: 1.25rem; } .lightbox__img { max-width: 92vw; } } /* ============================================================ Security / login page ============================================================ */ .security-page { padding-top: 12rem; padding-bottom: 8rem; } .security-page__form { max-width: 460px; margin-top: 2rem; } .security-page__form label { display: block; margin-bottom: 0.4rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-soft); font-weight: 600; } .security-page__form input[type=text], .security-page__form input[type=email], .security-page__form input[type=password] { width: 100%; font-family: var(--sans); font-size: 0.95rem; padding: 0.9rem 1rem; border: 1px solid var(--line); background: #fff; color: var(--teal); margin-bottom: 1.25rem; outline: none; } .security-page__form input:focus { border-color: var(--plum); } .security-page__form .checkbox, .security-page__form .optionset { margin-bottom: 1.25rem; } .security-page__form .btn-toolbar button, .security-page__form input[type=submit], .security-page__form button[type=submit] { display: inline-flex; align-items: center; padding: 0.85rem 2.4rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.03em; border: 0; border-radius: 100px; background: var(--plum); color: #fff; cursor: pointer; } .security-page__form .message { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--red); padding: 0.9rem 1rem; margin-bottom: 1.25rem; color: var(--teal-soft); } .security-page__form a { color: var(--red); } /* ============================================================ Secondary headings → Mulish bold, dialled down in size. Placed last so it wins over earlier per-element serif rules. ============================================================ */ .event-card__title, .ncard__title, .space-card__name, .cal-row__title, .poster__title, .manual-card__title, .accordion__head, .rich-text h3, .rich-text h4, .cal-row__day, .cal-row__mon, .cal-row__title, .sp-row__name, .sp-row__num, .sp-row__cap, .manual-card__num { font-family: var(--sans); letter-spacing: 0; } .event-card__title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .ncard__title { font-size: 1.3rem; font-weight: 700; line-height: 1.25; } .space-card__name { font-size: 1.35rem; font-weight: 700; } .cal-row__title { font-size: 1.3rem; font-weight: 700; line-height: 1.25; } .poster__title { font-size: 1.25rem; font-weight: 700; } .manual-card__title { font-size: 1.4rem; font-weight: 700; } .accordion__head { font-size: 1.35rem; font-weight: 700; } .rich-text h3 { font-size: 1.45rem; font-weight: 700; } .rich-text h4 { font-size: 1.15rem; font-weight: 700; } /* Numbers → Mulish bold too */ .cal-row__day { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; } .cal-row__mon { font-weight: 700; } .sp-row__name { font-size: 1.9rem; font-weight: 800; } .sp-row__num { font-size: 1.2rem; font-weight: 800; } .sp-row__cap { font-size: 1.9rem; font-weight: 800; } .manual-card__num { font-weight: 800; } /* Trim dead white space around the full-bleed collection bands (spaces grid + pillars). The plum heading band and image grid manage their own spacing. */ .collection--spaces.section, .collection--manual.collection--rows.section { padding-top: 0; padding-bottom: 0; } .page-blocks { margin-top: 3rem; } /* ============================================================ Launch (single-page) site - TPM_LAUNCH mode ============================================================ */ .nav__links--launch { display: flex; gap: 2rem; align-items: center; } .launch-hero__eyebrow { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 0.75rem; } .launch-hero .hero__subtitle { display: block; max-width: 560px; margin: 1.25rem auto 0; color: rgba(255,255,255,0.85); font-size: 1.05rem; line-height: 1.7; } .launch-hero .hero__actions { margin-top: 2.25rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .launch-whatson { padding-top: 6rem; } .launch-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1rem; } .launch-card { background: var(--cream); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.4s ease, box-shadow 0.4s ease; } .launch-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.08); } .launch-card__image { aspect-ratio: 4/3; overflow: hidden; } .launch-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); } .launch-card:hover .launch-card__image img { transform: scale(1.05); } .launch-card__title { font-size: 1.55rem; color: var(--teal); margin: 1.25rem 1.4rem 0.5rem; line-height: 1.05; } .launch-card__text { color: var(--teal-soft); font-size: 0.92rem; line-height: 1.6; margin: 0 1.4rem 1.6rem; } .launch-subscribe { scroll-margin-top: 5rem; } #whats-on { scroll-margin-top: 5rem; } @media (max-width: 900px) { .launch-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .launch-cards { grid-template-columns: 1fr; } } /* Keep the minimal launch nav inline on mobile (no hamburger overlay). */ @media (max-width: 1024px) { .nav--launch .nav__links { position: static; right: auto; top: auto; width: auto; height: auto; background: none; flex-direction: row; gap: 1.1rem; padding: 0; transition: none; } .nav--launch .nav__links > .nav__link { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; } .nav--launch .nav__cta--bar { display: inline-flex; } } /* Launch parallax CTA band */ .launch-cta { position: relative; min-height: 58vh; display: flex; align-items: center; justify-content: center; text-align: center; background-image: url(../images/hs-foyer.jpg); background-size: cover; background-position: center; overflow: hidden; } .launch-cta__overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(69,30,63,0.86), rgba(69,30,63,0.94)); } .launch-cta__content { position: relative; z-index: 1; max-width: 720px; padding: 6rem 2rem; color: #fff; } .launch-cta__title { font-size: clamp(2.4rem, 4vw, 4rem); color: #fff; line-height: 1.04; margin: 0.75rem 0 1.25rem; } .launch-cta__text { color: rgba(255,255,255,0.85); font-size: 1.05rem; line-height: 1.7; max-width: 520px; margin: 0 auto 2rem; } .launch-name { padding-bottom: 2rem; } @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .launch-cta { background-attachment: fixed; } } /* Launch: "More than an events centre" plum+pattern band, bigger hero logo */ .launch-discover-head { background-color: var(--red); color: #fff; padding: 9rem 0; text-align: center; } .launch-discover-head .section-title { color: #fff; } .launch-discover-head .section-text { color: rgba(255,255,255,0.85); } .launch-discover-head .head2 { margin-bottom: 0; } .launch-hero .hero__logo { width: clamp(280px, 36vw, 520px); margin-bottom: 1.75rem; } /* Launch: big plum opening-date band */ .launch-opening { background-color: var(--plum); color: #fff; text-align: center; padding: 7rem 0; } .launch-opening__eyebrow { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 1.25rem; } .launch-opening__date { font-size: clamp(3.5rem, 10vw, 9rem); color: #fff; line-height: 0.92; margin: 0 0 1.5rem; letter-spacing: 0.02em; } .launch-opening__text { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 560px; margin: 0 auto 2rem; line-height: 1.65; } /* Launch "More than an events centre": centred + parallax pattern scroll */ .launch-discover-head .section-title { text-align: center; margin: 0; } @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .launch-discover-head, .launch-opening { background-attachment: fixed, fixed, scroll; } } /* Launch story: wider, centred reading column with consistent Mulish headings */ .launch-story .container--narrow .rich-text { max-width: 940px; margin-left: auto; margin-right: auto; } .launch-story .rich-text h2, .launch-story .rich-text h3 { font-family: var(--sans); font-weight: 800; letter-spacing: 0; line-height: 1.2; color: var(--teal); } .launch-story .rich-text h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); margin-top: 2.6rem; } .launch-story .rich-text h3 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); margin-top: 2.2rem; } .launch-story .rich-text p { font-size: 1.12rem; line-height: 1.75; } /* Launch (single-page) footer: minimal, centred, single column */ .footer--launch { padding: 4.5rem 6vw 3rem; text-align: center; } .footer__launch { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .footer--launch .footer__emblem { width: 130px; margin: 0 0 0.25rem; } .footer__launch-line { font-family: var(--sans); font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0; max-width: 420px; } .footer__launch-contact { font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0.04em; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; text-decoration: none; } .footer__launch-contact:hover { border-color: #fff; } .footer--launch .social-icons { padding: 0; border: 0; margin: 0; justify-content: center; } .footer__launch-copy { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); margin: 0.5rem 0 0; } /* Launch hero parallax: oversized wrapper so the scroll translate never reveals an edge */ .launch-hero .hero__image { top: -24%; bottom: auto; height: 128%; will-change: transform; } /* ============================================================ Launch / mobile font + spacing tuning ============================================================ */ /* Cycling word: quicker fade-out so it clears before rising into the line above */ .hero__cycle-word.exit { transition: opacity 0.22s ease-out, transform 0.5s cubic-bezier(0.22,1,0.36,1); } @media (max-width: 768px) { /* Launch hero: bigger copy, tighter top-to-bottom spacing */ .launch-hero .hero__logo { margin-bottom: 1rem; } .launch-hero .hero__title { font-size: clamp(3.3rem, 14vw, 5rem); line-height: 0.98; margin-bottom: 0.55rem; } .launch-hero .hero__subtitle { margin-top: 0.85rem; font-size: 1rem; line-height: 1.55; } .launch-hero .hero__actions { margin-top: 1.6rem; } /* Rich-text headings: smaller on mobile */ .launch-story .rich-text h2, .launch-story .rich-text h3 { font-size: 1.35rem; line-height: 1.3; margin-top: 1.8rem; } .launch-story .rich-text p { font-size: 1.02rem; line-height: 1.7; } } /* Subscribe form: stack so the button never overflows on small screens */ @media (max-width: 600px) { .subscribe-banner__form { flex-direction: column; align-items: stretch; } .subscribe-banner__form .btn { width: 100%; justify-content: center; } } /* Events listing: spaces-style full-bleed image-card grid */ .events-grid.card-grid { gap: 0; width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-right: -50vw; } .events-grid .space-card { aspect-ratio: 4 / 3; } .events-grid .space-card img { transform: scale(1.03); transition: transform 2.4s cubic-bezier(0.16,1,0.3,1); } .events-grid .space-card:hover img { transform: scale(1.1); transition: transform 1.6s cubic-bezier(0.22,1,0.36,1); } .events-grid .space-card__overlay { background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 58%); transition: background 1.4s ease; } .events-grid .space-card:hover .space-card__overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.15) 62%); transition: background 1s ease; } .event-tile__meta { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; } .events-grid .space-card__desc { opacity: 0; max-height: 0; transform: translateY(8px); overflow: hidden; transition: opacity 1.2s ease, transform 1.2s ease, max-height 1.2s ease; } .events-grid .space-card:hover .space-card__desc { opacity: 1; max-height: 120px; transform: translateY(0); transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s, max-height 0.7s ease 0.05s; } @media (max-width: 1024px) { .events-grid.card-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .events-grid.card-grid { grid-template-columns: 1fr; } } /* ============================================================ Launch: mini white opening-date bar + ticket countdown ============================================================ */ .launch-datebar { position: relative; overflow: hidden; background: #fff; color: var(--plum); padding: 1rem 6vw; border-bottom: 1px solid var(--line); } /* Brand wave element, subtle, behind the text */ .launch-datebar::before { content: ''; position: absolute; inset: 0; background: url(../images/wave-texture.png) repeat-x center / auto 100%; opacity: 0.25; pointer-events: none; } .launch-datebar__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; text-align: center; } .launch-datebar__label, .launch-datebar__date { font-family: var(--sans); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.18em; text-transform: uppercase; } .launch-datebar__label { color: var(--red); } .launch-datebar__date { color: var(--plum); } .launch-countdown__head { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; color: #fff; margin: 0 0 0.25rem; letter-spacing: 0.02em; } .countdown { display: flex; justify-content: center; gap: 2.25rem; margin: 2rem 0 2.25rem; } .countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 84px; } .countdown__num { font-family: var(--serif); font-size: clamp(3.6rem, 10vw, 7.5rem); line-height: 1; color: #fff; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .countdown__label { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 0.55rem; } @media (max-width: 560px) { .countdown { gap: 0.4rem; width: 100%; justify-content: space-between; margin: 1.75rem 0 2rem; } .countdown__unit { min-width: 0; flex: 1 1 0; } .countdown__num { font-size: clamp(3.4rem, 17vw, 5.6rem); } .countdown__label { font-size: 0.56rem; letter-spacing: 0.1em; margin-top: 0.45rem; } } /* Hero: keep the cycling word behind the fixed top line ("A space to") */ .hero__title-top { position: relative; z-index: 2; } .hero__cycle-wrap { position: relative; z-index: 1; } /* Event detail: meta as clean listing lines (spaces-style) instead of chips */ .event-single__specs { border-top: 1px solid var(--teal); margin: 1.5rem 0 2.25rem; } .event-single__specs .specs__row { padding: 1.1rem 0; } .event-single__specs .specs__v { color: var(--teal); } .event-single__specs .specs__v a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; } .event-single__specs .specs__v a:hover { color: var(--red); } /* Launch subscribe: light mode + brand wave element */ .launch-subscribe { position: relative; overflow: hidden; background: var(--cream); color: var(--plum); } .launch-subscribe::before { content: ''; position: absolute; inset: 0; background: url(../images/wave-texture.png) repeat-x center / auto 100%; opacity: 0.3; pointer-events: none; } .launch-subscribe .subscribe-banner__inner { position: relative; z-index: 1; } .launch-subscribe .subscribe-banner__title { color: var(--plum); } .launch-subscribe .subscribe-banner__intro { color: var(--teal-soft); } .launch-subscribe .subscribe-banner__form input { border-color: rgba(69,30,63,0.25); background: rgba(255,255,255,0.75); color: var(--plum); } .launch-subscribe .subscribe-banner__form input::placeholder { color: rgba(69,30,63,0.45); } .launch-subscribe .subscribe-banner__form .btn--solid { background: var(--plum); color: #fff; border-color: var(--plum); } .launch-subscribe .subscribe-banner__privacy { color: rgba(69,30,63,0.55); } /* Subscribe privacy note link */ .subscribe-banner__privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .launch-subscribe .subscribe-banner__privacy a:hover { color: var(--plum); } /* Event page: mini ticket countdown in the bookbox (dark on the cream panel) */ .bookbox__cd-lead { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.6rem; } .countdown--mini { gap: 0.7rem; margin: 1rem 0 1.25rem; } .countdown--mini .countdown__num { font-size: 2.7rem; color: var(--plum); } .countdown--mini .countdown__label { font-size: 0.62rem; margin-top: 0.35rem; color: var(--gold); } /* Keep the booking link hidden until the countdown completes (overrides .btn display) */ .bookbox__book[hidden] { display: none; } /* Subscribe result message */ .subscribe-banner__result { font-family: var(--sans); font-size: 0.95rem; line-height: 1.4; margin: 0 0 0.85rem; padding: 0.65rem 0.95rem; border-radius: 8px; } .launch-subscribe .subscribe-banner__result--ok, .launch-subscribe .subscribe-banner__result--exists { color: #2c5f4f; background: rgba(80,113,108,0.16); } .launch-subscribe .subscribe-banner__result--invalid, .launch-subscribe .subscribe-banner__result--error { color: var(--red); background: rgba(185,31,63,0.10); } /* ============================================================ LOCKED ("coming soon" holding page) - TPM_LOCKED=1 Full-bleed venue image, centred logo + single line. No chrome. ============================================================ */ .locked-body { margin: 0; overflow: hidden; } .locked { position: relative; width: 100vw; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; } .locked__image { position: absolute; inset: 0; z-index: 0; } .locked__image img { width: 100%; height: 100%; object-fit: cover; } .locked__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.72) 100%); } .locked__content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 640px; } .locked__logo { display: block; width: clamp(260px, 40vw, 480px); height: auto; margin: 0 auto 2rem; } .locked__msg { font-family: var(--sans); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; font-size: clamp(1rem, 2.4vw, 1.4rem); margin: 0 0 0.9rem; } .locked__date { font-family: var(--sans); font-weight: 400; letter-spacing: 0.06em; color: rgba(255,255,255,0.78); font-size: clamp(0.85rem, 1.8vw, 1.05rem); margin: 0; } @media (max-width: 600px) { .locked__logo { width: clamp(220px, 70vw, 320px); margin-bottom: 1.5rem; } } /* Pre-launch tweaks: temporary-landing note + save-the-date lead line + subscribe link button */ .launch-temp-note { text-align: center; max-width: 620px; margin: 1.25rem auto 0; color: var(--teal-soft); } .launch-opening__text--lead { font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.35rem); } .footer__launch-contact-note { font-family: var(--sans); font-size: 0.9rem; opacity: 0.8; margin: 0.4rem 0 0.15rem; } .subscribe-banner__btn { display: inline-block; }