/* ========================================================================== KUSH HOUSE — DESIGN SYSTEM ========================================================================== NON-NEGOTIABLE RULES FOR EVERY COMPONENT ADDED AFTER THIS FILE: 1. LOGICAL PROPERTIES ONLY. margin-inline-start / -end, padding-inline-*, inset-inline-*, border-inline-*, text-align: start|end. NEVER left/right/margin-left/padding-right/text-align:left. This is what makes dir="rtl" work with zero overrides. 2. PER-SCRIPT TYPOGRAPHY via [data-script] on . Arabic gets letter-spacing:0 — letter-spacing breaks Arabic cursive joining, which renders the text WRONG, not merely differently. text-transform:uppercase is limited to scripts that have case. 3. MOBILE FIRST. Base styles target 375px. Enhance upward, never downward. 4. TOUCH TARGETS >= 44px, primary actions >= 56px, placed in the lower third of the viewport where a thumb reaches. Contents 01 Tokens 02 Script + direction 03 Reset & base 04 Typography 05 Layout primitives 06 Buttons & links 07 Header & navigation 08 Bottom sheet 09 Language selector 10 Age entrance 11 Hero 12 Sections 13 Gallery & lightbox 14 Visit components 15 Mobile action bar 16 Footer 17 Breadcrumb & notices 18 Error / empty states 19 Motion & print ========================================================================== */ /* == 01 Tokens ============================================================ */ :root { /* Surface — near-black through deep navy. The venue's own palette. */ --kh-void: #04070b; --kh-black: #070b11; --kh-navy: #0b1220; --kh-navy-2: #101a2c; --kh-navy-3: #17253d; --kh-line: #1d2c45; /* Accent — the blue LED wash that IS the brand. */ --kh-blue: #1f8fff; --kh-blue-bright: #4fb0ff; --kh-cyan: #5fe6ff; --kh-glow: rgba(31, 143, 255, 0.35); /* Text — all verified >= 4.5:1 on --kh-black. */ --kh-text: #f2f7fc; --kh-muted: #a8bdd4; /* 8.1:1 */ --kh-dim: #7f97b3; /* 5.2:1 */ --kh-focus: #7ff0ff; /* Spacing — a 4px-based scale. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* Section rhythm — grows with viewport. */ --kh-section-y: clamp(3.5rem, 11vw, 7.5rem); --kh-tap: 44px; --kh-tap-lg: 56px; --kh-radius: 4px; --kh-radius-lg: 10px; --kh-radius-pill: 999px; --kh-maxw: 78rem; --kh-maxw-text: 38rem; --kh-header-h: 60px; --kh-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Typography — system stack until the licensed display face is supplied. */ --kh-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kh-font-display: var(--kh-font-body); --kh-track-display: -0.015em; --kh-track-eyebrow: 0.2em; --kh-case-eyebrow: uppercase; --kh-weight-display: 800; } /* == 02 Script + direction ================================================ */ /* Arabic: no letter-spacing (breaks cursive joining), no uppercasing, and a font stack that actually contains Arabic glyphs. */ html[data-script="arabic"] { --kh-font-body: "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", "Arabic Typesetting", sans-serif; --kh-font-display: var(--kh-font-body); --kh-track-display: 0; --kh-track-eyebrow: 0; --kh-case-eyebrow: none; --kh-weight-display: 700; } html[data-script="han"], html[data-script="kana"], html[data-script="hangul"] { --kh-font-body: system-ui, "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Hiragino Sans", "Microsoft YaHei", "Malgun Gothic", sans-serif; --kh-font-display: var(--kh-font-body); --kh-track-display: 0; --kh-track-eyebrow: 0.05em; --kh-case-eyebrow: none; } html[data-script="cyrillic"], html[data-script="greek"] { --kh-track-display: -0.005em; } /* Mirror only marks that genuinely point somewhere. The house logo, close and search glyphs must NOT carry .icon-directional. */ [dir="rtl"] .icon-directional { transform: scaleX(-1); } /* == 03 Reset & base ====================================================== */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--kh-void); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100svh; background: var(--kh-black); color: var(--kh-text); font-family: var(--kh-font-body); font-size: 1.0625rem; /* 17px — readable in bright Mediterranean sun */ line-height: 1.65; overflow-x: clip; /* never allow silent horizontal scroll */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Locks scroll while the age gate or a bottom sheet is open. */ body.is-locked { overflow: hidden; } img, picture, svg, video { max-width: 100%; display: block; } img { height: auto; background-color: var(--kh-navy); } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--kh-blue-bright); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--kh-cyan); } :focus-visible { outline: 3px solid var(--kh-focus); outline-offset: 3px; border-radius: 2px; } [hidden] { display: none !important; } [inert] { cursor: default; user-select: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; inset-block-start: -200%; inset-inline-start: var(--sp-4); z-index: 200; padding: var(--sp-3) var(--sp-4); background: var(--kh-cyan); color: var(--kh-void); font-weight: 700; text-decoration: none; border-radius: var(--kh-radius); } .skip-link:focus { inset-block-start: var(--sp-4); } /* == 04 Typography ======================================================== */ .t-display { font-family: var(--kh-font-display); font-weight: var(--kh-weight-display); letter-spacing: var(--kh-track-display); line-height: 1.06; text-wrap: balance; } h1, .t-h1 { font-size: clamp(2rem, 8.5vw, 4rem); margin: 0; } h2, .t-h2 { font-size: clamp(1.65rem, 6.5vw, 3rem); margin: 0; } h3, .t-h3 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); margin: 0; } h1, h2, h3 { font-family: var(--kh-font-display); font-weight: var(--kh-weight-display); letter-spacing: var(--kh-track-display); line-height: 1.1; text-wrap: balance; } .t-eyebrow { display: block; margin-block-end: var(--sp-3); color: var(--kh-blue-bright); font-size: 0.8125rem; font-weight: 700; letter-spacing: var(--kh-track-eyebrow); text-transform: var(--kh-case-eyebrow); line-height: 1.3; } .t-lead { font-size: clamp(1.0625rem, 2.6vw, 1.25rem); color: var(--kh-text); text-wrap: pretty; } .t-body { color: var(--kh-muted); text-wrap: pretty; } .t-body p { margin-block: 0 var(--sp-4); } .t-body p:last-child { margin-block-end: 0; } .t-measure { max-inline-size: var(--kh-maxw-text); } /* Wordmark — typeset fallback used wherever the vector logo is not yet available. Replaced by the SVG when supplied; no raster stand-in is presented as the final mark. */ .wordmark { display: inline-block; text-align: center; text-decoration: none; color: inherit; } .wordmark__line1 { display: block; font-family: var(--kh-font-display); font-weight: 800; letter-spacing: 0.02em; line-height: 1; font-size: 1.15rem; } .wordmark__line2 { display: block; margin-block-start: 0.35em; color: var(--kh-blue-bright); font-size: 0.5625rem; font-weight: 600; letter-spacing: var(--kh-track-eyebrow); text-transform: var(--kh-case-eyebrow); line-height: 1; } html[data-script="arabic"] .wordmark__line2 { letter-spacing: 0; } .wordmark--lg .wordmark__line1 { font-size: clamp(2.1rem, 10vw, 3.25rem); } .wordmark--lg .wordmark__line2 { font-size: clamp(0.7rem, 2.8vw, 0.85rem); margin-block-start: 0.7em; } .wordmark__img { display: block; margin-inline: auto; } /* == 05 Layout primitives ================================================= */ .wrap { inline-size: 100%; max-inline-size: var(--kh-maxw); margin-inline: auto; padding-inline: var(--sp-5); } @media (min-width: 48rem) { .wrap { padding-inline: var(--sp-6); } } .section { padding-block: var(--kh-section-y); position: relative; } .section--tight { padding-block: calc(var(--kh-section-y) * 0.6); } .section--flush-top { padding-block-start: 0; } .section__head { margin-block-end: var(--sp-6); max-inline-size: var(--kh-maxw-text); } .section__head > * + * { margin-block-start: var(--sp-4); } .stack > * + * { margin-block-start: var(--sp-4); } .stack-lg > * + * { margin-block-start: var(--sp-6); } .rule { inline-size: 3rem; block-size: 2px; border: 0; margin: 0 0 var(--sp-4); background: linear-gradient(to inline-end, var(--kh-blue), transparent); } /* == 06 Buttons & links =================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-block-size: var(--kh-tap-lg); padding-inline: var(--sp-5); border: 1px solid transparent; border-radius: var(--kh-radius); font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.18s var(--kh-ease), border-color 0.18s var(--kh-ease), color 0.18s var(--kh-ease), transform 0.18s var(--kh-ease); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--kh-blue); color: #00121f; } .btn--primary:hover { background: var(--kh-blue-bright); color: #00121f; } .btn--ghost { background: transparent; border-color: var(--kh-line); color: var(--kh-text); } .btn--ghost:hover { border-color: var(--kh-blue); color: var(--kh-text); } .btn--block { display: flex; inline-size: 100%; } .btn--sm { min-block-size: var(--kh-tap); padding-inline: var(--sp-4); font-size: 0.9375rem; } .link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--kh-tap); font-weight: 600; text-decoration: none; } .link-arrow::after { content: "→"; transition: transform 0.18s var(--kh-ease); } [dir="rtl"] .link-arrow::after { content: "←"; } .link-arrow:hover::after { transform: translateX(0.2em); } [dir="rtl"] .link-arrow:hover::after { transform: translateX(-0.2em); } /* == 07 Header & navigation =============================================== */ .header { position: sticky; inset-block-start: 0; z-index: 60; background: color-mix(in srgb, var(--kh-black) 82%, transparent); backdrop-filter: blur(14px); border-block-end: 1px solid transparent; transition: border-color 0.25s var(--kh-ease), background-color 0.25s var(--kh-ease); } .header.is-stuck { border-block-end-color: var(--kh-line); background: color-mix(in srgb, var(--kh-black) 94%, transparent); } .header__inner { display: flex; align-items: center; gap: var(--sp-4); min-block-size: var(--kh-header-h); } .header__brand { display: inline-flex; flex-direction: column; justify-content: center; min-block-size: var(--kh-tap); /* the brand is a link: make it hittable */ margin-inline-end: auto; text-decoration: none; color: inherit; } .header__actions { display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-inline-size: var(--kh-tap); min-block-size: var(--kh-tap); padding-inline: var(--sp-3); background: transparent; border: 1px solid var(--kh-line); border-radius: var(--kh-radius); color: var(--kh-text); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; } .icon-btn:hover { border-color: var(--kh-blue); } .icon-btn__glyph { font-size: 1.1em; line-height: 1; } /* Desktop navigation — real links, not a hamburger. */ .nav-desktop { display: none; } @media (min-width: 62rem) { .nav-desktop { display: flex; align-items: center; gap: var(--sp-5); } .nav-desktop a { display: inline-flex; align-items: center; min-block-size: var(--kh-tap); color: var(--kh-text); font-size: 0.9375rem; font-weight: 600; text-decoration: none; position: relative; } .nav-desktop a::after { content: ""; position: absolute; inset-block-end: 8px; inset-inline: 0; block-size: 2px; background: var(--kh-blue); transform: scaleX(0); transform-origin: inline-start; transition: transform 0.2s var(--kh-ease); } .nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); } .nav-toggle { display: none; } } /* Header membership CTA: hidden on mobile, where the persistent action bar already carries it; shown from the wide breakpoint where there is room. */ .header__cta { display: none; } @media (min-width: 62rem) { .header__cta { display: inline-flex; } } /* == 08 Bottom sheet ====================================================== */ /* Menus open from the BOTTOM on mobile: that is where the thumb is. */ .sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; } .sheet[hidden] { display: none; } .sheet__scrim { position: absolute; inset: 0; background: rgba(2, 5, 9, 0.72); backdrop-filter: blur(3px); animation: kh-fade 0.2s var(--kh-ease); border: 0; padding: 0; } .sheet__panel { position: relative; inline-size: 100%; max-inline-size: 34rem; max-block-size: 88svh; overflow-y: auto; overscroll-behavior: contain; background: var(--kh-navy); border: 1px solid var(--kh-line); border-block-end: 0; border-start-start-radius: var(--kh-radius-lg); border-start-end-radius: var(--kh-radius-lg); padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); animation: kh-rise 0.26s var(--kh-ease); } .sheet__grip { inline-size: 2.5rem; block-size: 4px; border-radius: var(--kh-radius-pill); background: var(--kh-line); margin: 0 auto var(--sp-5); } .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-4); } .sheet__title { font-size: 1rem; font-weight: 700; margin: 0; } .sheet__list { display: grid; gap: var(--sp-1); } .sheet__link { display: flex; align-items: center; min-block-size: var(--kh-tap-lg); padding-inline: var(--sp-4); border-radius: var(--kh-radius); color: var(--kh-text); font-size: 1.0625rem; font-weight: 600; text-decoration: none; } .sheet__link:hover { background: var(--kh-navy-2); } .sheet__link[aria-current="page"] { background: var(--kh-navy-2); color: var(--kh-blue-bright); } .sheet__footer { margin-block-start: var(--sp-5); display: grid; gap: var(--sp-3); } @media (min-width: 48rem) { .sheet { align-items: center; } .sheet__panel { border-radius: var(--kh-radius-lg); border-block-end: 1px solid var(--kh-line); max-block-size: 80svh; } .sheet__grip { display: none; } } /* == 09 Language selector ================================================= */ .langlist { display: grid; gap: var(--sp-1); } .langlist__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-block-size: var(--kh-tap-lg); padding-inline: var(--sp-4); border-radius: var(--kh-radius); color: var(--kh-text); text-decoration: none; font-size: 1.0625rem; } .langlist__item:hover { background: var(--kh-navy-2); } .langlist__item[aria-current="true"] { background: var(--kh-navy-2); color: var(--kh-blue-bright); font-weight: 700; } .langlist__native { font-weight: 600; } .langlist__en { color: var(--kh-dim); font-size: 0.875rem; } .langlist__check { color: var(--kh-cyan); } /* == 10 Age entrance ====================================================== */ .agegate { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto 1fr auto; background: var(--kh-void); padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; } .agegate[hidden] { display: none; } /* The venue photograph sits behind, heavily darkened so text stays AA. */ .agegate__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .agegate__bg picture, .agegate__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; } .agegate__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 30%, rgba(9, 20, 36, 0.55) 0%, rgba(4, 7, 11, 0.94) 70%), linear-gradient(to bottom, rgba(4, 7, 11, 0.75), rgba(4, 7, 11, 0.97)); } .agegate__top { position: relative; z-index: 1; display: flex; justify-content: flex-end; } .agegate__main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-5); padding-block: var(--sp-6); } .agegate__mark { display: grid; gap: var(--sp-4); justify-items: center; } .agegate__tagline { color: var(--kh-muted); font-size: 0.9375rem; margin: 0; } .agegate__badge { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 4.5rem; padding: var(--sp-2) var(--sp-4); border: 2px solid var(--kh-blue); border-radius: var(--kh-radius-pill); color: var(--kh-cyan); font-family: var(--kh-font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 0 28px var(--kh-glow); } html[data-script="arabic"] .agegate__badge { letter-spacing: 0; } .agegate__heading { margin: 0; font-family: var(--kh-font-display); font-weight: var(--kh-weight-display); font-size: clamp(1.5rem, 7vw, 2.25rem); line-height: 1.1; } .agegate__body { color: var(--kh-muted); max-inline-size: 26rem; margin: 0; text-wrap: pretty; } /* Actions sit in the bottom third — one-handed reach, no scrolling at 375px. */ .agegate__actions { position: relative; z-index: 1; display: grid; gap: var(--sp-3); inline-size: 100%; max-inline-size: 26rem; margin-inline: auto; } .agegate__note { color: var(--kh-dim); font-size: 0.8125rem; text-align: center; margin: var(--sp-4) 0 0; } .agegate__note a { color: var(--kh-dim); } @media (min-width: 48rem) { .agegate__main { gap: var(--sp-6); } .agegate__actions { grid-template-columns: 1fr 1fr; max-inline-size: 32rem; } } /* == 11 Hero ============================================================== */ .hero { position: relative; display: grid; align-items: end; min-block-size: 72svh; /* not 100 — a visible edge invites the scroll */ overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media picture, .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(4,7,11,0.55) 0%, rgba(4,7,11,0.15) 35%, rgba(7,11,17,0.92) 100%), radial-gradient(90% 60% at 50% 100%, rgba(31,143,255,0.16), transparent 70%); } .hero__inner { padding-block: var(--sp-8) var(--sp-8); } .hero__content { max-inline-size: 42rem; } .hero__title { margin-block-end: var(--sp-5); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); } .hero__actions .btn { flex: 1 1 14rem; } /* No hero image yet: a composed gradient, never a stretched placeholder. */ .hero--noimage { background: radial-gradient(120% 90% at 50% 0%, var(--kh-navy-2), var(--kh-black) 62%); } .hero--noimage .hero__scrim { background: none; } @media (min-width: 62rem) { .hero { min-block-size: 78svh; } .hero__actions .btn { flex: 0 0 auto; } } /* == 12 Sections ========================================================== */ /* Alternating photo/text bands. Order flips by variant, and in RTL the whole grid mirrors automatically because nothing here is left/right. */ .band { display: grid; gap: var(--sp-6); align-items: center; } .band__media { position: relative; border-radius: var(--kh-radius-lg); overflow: hidden; } .band__media picture, .band__media img { inline-size: 100%; } .band__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--kh-line); border-radius: inherit; pointer-events: none; } .band__body > * + * { margin-block-start: var(--sp-4); } @media (min-width: 62rem) { .band { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .band--media-end .band__media { order: 2; } /* A band with no image must not leave half the grid empty. */ .band--text-only { grid-template-columns: minmax(0, var(--kh-maxw-text)); } } /* Facts strip — concrete information, not abstract icons. */ .facts { display: grid; gap: var(--sp-5); } .fact { padding-block: var(--sp-4); border-block-start: 1px solid var(--kh-line); } .fact__label { display: block; color: var(--kh-blue-bright); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--kh-track-eyebrow); text-transform: var(--kh-case-eyebrow); } .fact__value { display: block; margin-block-start: var(--sp-2); font-size: 1.125rem; font-weight: 600; } @media (min-width: 48rem) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } } /* Full-bleed CTA band. */ .cta-band { position: relative; overflow: hidden; isolation: isolate; border-block: 1px solid var(--kh-line); background: linear-gradient(160deg, var(--kh-navy-2), var(--kh-black)); } .cta-band__media { position: absolute; inset: 0; z-index: -2; opacity: 0.35; } .cta-band__media picture, .cta-band__media img { inline-size: 100%; block-size: 100%; object-fit: cover; } .cta-band__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(7,11,17,0.72), rgba(7,11,17,0.94)); } .cta-band__inner { text-align: center; display: grid; justify-items: center; gap: var(--sp-4); } .cta-band__inner .btn { margin-block-start: var(--sp-2); min-inline-size: 16rem; } /* == 13 Gallery & lightbox ================================================ */ .gallery { display: grid; gap: var(--sp-3); } .gallery__item { position: relative; display: block; padding: 0; border: 0; background: var(--kh-navy); border-radius: var(--kh-radius); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; } .gallery__item picture, .gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.4s var(--kh-ease); } .gallery__item:hover img { transform: scale(1.03); } @media (min-width: 34rem) { .gallery { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .gallery { gap: var(--sp-4); } .gallery--3 { grid-template-columns: repeat(3, 1fr); } } .lightbox { position: fixed; inset: 0; z-index: 130; display: grid; grid-template-rows: auto 1fr auto; background: rgba(3, 6, 10, 0.97); padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); } .lightbox[hidden] { display: none; } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .lightbox__counter { color: var(--kh-dim); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .lightbox__stage { display: grid; place-items: center; overflow: hidden; padding-block: var(--sp-4); } .lightbox__stage img { max-block-size: 100%; max-inline-size: 100%; object-fit: contain; } .lightbox__caption { color: var(--kh-muted); font-size: 0.9375rem; text-align: center; margin: 0; min-block-size: 1.5em; } .lightbox__nav { display: flex; justify-content: center; gap: var(--sp-3); margin-block-start: var(--sp-3); } /* == 14 Visit components ================================================== */ .visit-grid { display: grid; gap: var(--sp-6); } @media (min-width: 62rem) { .visit-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: start; } } .info-card { padding: var(--sp-5); background: var(--kh-navy); border: 1px solid var(--kh-line); border-radius: var(--kh-radius-lg); } .info-card__title { font-size: 1.0625rem; margin-block-end: var(--sp-4); } .address { font-style: normal; color: var(--kh-text); line-height: 1.7; } .hours { display: grid; gap: var(--sp-1); } .hours__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); border-block-end: 1px solid var(--kh-line); } .hours__row:last-child { border-block-end: 0; } .hours__row.is-today { color: var(--kh-cyan); font-weight: 700; } .hours__day { color: var(--kh-muted); } .hours__row.is-today .hours__day { color: var(--kh-cyan); } .hours__time { font-variant-numeric: tabular-nums; } .pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--kh-radius-pill); font-size: 0.8125rem; font-weight: 700; } .pill--open { background: rgba(46, 204, 113, 0.14); color: #6ee7a8; } .pill--closed { background: rgba(148, 163, 184, 0.14); color: var(--kh-dim); } .pill__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; } .transit { display: grid; gap: var(--sp-3); } .transit__row { display: flex; align-items: baseline; gap: var(--sp-3); } .transit__mode { flex: 0 0 auto; padding: 2px var(--sp-2); border: 1px solid var(--kh-line); border-radius: var(--kh-radius); color: var(--kh-blue-bright); font-size: 0.75rem; font-weight: 700; text-transform: var(--kh-case-eyebrow); } .transit__stop { font-weight: 600; } .transit__walk { color: var(--kh-dim); font-size: 0.875rem; } /* == 15 Mobile action bar ================================================= */ /* Appears only after the hero, hides on scroll-down, never covers the footer CTAs, and reserves its own height so it cannot overlap the last line. */ .actionbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70; display: grid; /* Adapts to how many actions actually exist: with no address entered there is no Directions button, and the single remaining action goes full width rather than sitting in half an empty grid. */ grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--kh-black) 94%, transparent); backdrop-filter: blur(14px); border-block-start: 1px solid var(--kh-line); transform: translateY(110%); transition: transform 0.28s var(--kh-ease); } .actionbar.is-visible { transform: translateY(0); } .actionbar .btn { min-block-size: 48px; padding-inline: var(--sp-3); font-size: 0.9375rem; } .actionbar[hidden] { display: none; } body.has-actionbar { padding-block-end: 5.5rem; } @media (min-width: 62rem) { .actionbar { display: none; } body.has-actionbar { padding-block-end: 0; } } /* --- Membership form ------------------------------------------------------ One component, used inside the modal and on the membership page. */ .membership__intro { color: var(--kh-muted); margin: 0 0 var(--sp-5); } .membership__form { display: grid; gap: var(--sp-4); } .field { display: grid; gap: var(--sp-2); } .field__label { font-size: 0.9375rem; font-weight: 600; } .field__input { inline-size: 100%; min-block-size: var(--kh-tap-lg); padding-inline: var(--sp-4); background: var(--kh-black); border: 1px solid var(--kh-line); border-radius: var(--kh-radius); color: var(--kh-text); font: inherit; /* 16px minimum, or iOS zooms the whole page on focus. */ font-size: 1rem; } .field__input::placeholder { color: var(--kh-dim); } .field__input:focus { border-color: var(--kh-blue); } .field__input:user-invalid { border-color: #ff8a8a; } .field__error { margin: 0; color: #ff9b9b; font-size: 0.9375rem; } .membership__privacy { margin: 0; color: var(--kh-dim); font-size: 0.8125rem; line-height: 1.5; } .membership__success { display: grid; justify-items: center; gap: var(--sp-4); text-align: center; padding-block: var(--sp-5); } .membership__success h2, .membership__success h3 { margin: 0; } .membership__success .btn { margin-block-start: var(--sp-2); } .membership__success [tabindex="-1"]:focus { outline: none; } .membership__tick { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; border: 2px solid var(--kh-blue); color: var(--kh-cyan); font-size: 1.75rem; box-shadow: 0 0 28px var(--kh-glow); } .membership-panel { margin-block-start: var(--sp-6); max-inline-size: 30rem; padding: var(--sp-5); background: var(--kh-navy); border: 1px solid var(--kh-line); border-radius: var(--kh-radius-lg); } /* == 16 Footer ============================================================ */ .footer { border-block-start: 1px solid var(--kh-line); background: var(--kh-void); padding-block: var(--sp-7) var(--sp-6); } .footer__grid { display: grid; gap: var(--sp-6); } @media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); } } .footer__title { color: var(--kh-blue-bright); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--kh-track-eyebrow); text-transform: var(--kh-case-eyebrow); margin-block-end: var(--sp-4); } .footer__list { display: grid; gap: var(--sp-1); } .footer__list a { display: inline-flex; align-items: center; min-block-size: var(--kh-tap); color: var(--kh-muted); text-decoration: none; } .footer__list a:hover { color: var(--kh-text); } .footer__bottom { margin-block-start: var(--sp-7); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--kh-line); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; color: var(--kh-dim); font-size: 0.8125rem; } .footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .footer__legal a, .footer__legal button { display: inline-flex; align-items: center; min-block-size: var(--kh-tap); color: var(--kh-dim); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; } .footer__address { margin-block-start: var(--sp-4); font-style: normal; color: var(--kh-muted); } .footer__contact { margin-block: var(--sp-3) 0; } .footer__copy { margin: 0; } .footer__title--spaced { margin-block-start: var(--sp-6); } .visit__cta { margin-block-start: var(--sp-4); } .membership__cta { margin-block-start: var(--sp-6); } /* == 17 Breadcrumb & notices ============================================== */ .breadcrumb { padding-block: var(--sp-1); font-size: 0.875rem; color: var(--kh-dim); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); } .breadcrumb li + li::before { content: "/"; color: var(--kh-line); } [dir="rtl"] .breadcrumb li + li::before { content: "\\"; } .breadcrumb a, .breadcrumb [aria-current="page"] { display: inline-flex; align-items: center; min-block-size: var(--kh-tap); /* thumb-sized even though the text is small */ } .breadcrumb a { color: var(--kh-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--kh-text); } .breadcrumb [aria-current="page"] { color: var(--kh-text); } .notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--kh-navy-2); border-block-end: 1px solid var(--kh-line); font-size: 0.9375rem; } .notice__inner { display: flex; align-items: center; gap: var(--sp-4); } .notice__text { flex: 1 1 14rem; color: var(--kh-muted); margin: 0; } .notice__actions { display: flex; gap: var(--sp-2); } .notice--muted { background: var(--kh-navy); color: var(--kh-dim); } /* == 18 Error / empty states ============================================== */ .errorpage { display: grid; place-items: center; min-block-size: 70svh; padding: var(--sp-7) var(--sp-5); } .errorpage__inner { max-inline-size: 34rem; text-align: center; display: grid; gap: var(--sp-5); justify-items: center; } .errorpage__title { margin: 0; } .errorpage__body { color: var(--kh-muted); margin: 0; } .errorpage__ref { color: var(--kh-dim); font-size: 0.8125rem; margin: 0; } .errorpage__ref code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Honest placeholder for content the owner has not supplied yet. Deliberately plain: it must read as "not published", never as finished design. */ .pending { padding: var(--sp-5); border: 1px dashed var(--kh-line); border-radius: var(--kh-radius-lg); color: var(--kh-dim); text-align: center; font-size: 0.9375rem; } /* == 19 Motion & print ==================================================== */ @keyframes kh-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes kh-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } @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; } .actionbar { transition: none; } } @media print { .header, .actionbar, .sheet, .agegate, .lightbox, .skip-link { display: none !important; } body { background: #fff; color: #000; } }