/* MONACO-CSS-VERSION: v3-2026-05-25-IMAGEFRAMES */ /* ===================================================================== THE MONACO ยท app.css Drop at: /public_html/assets/css/app.css --------------------------------------------------------------------- Refined dark-luxe. Brand colors/fonts come from :root vars emitted by brand_css_vars() (white-label). This file owns structure, rhythm, composition and motion. Mobile-first, fully responsive. SECTIONS 1. Reset & tokens 2. Base typography 3. Layout primitives & spacing scale 4. Buttons & links 5. Header / nav 6. Hero (full-bleed banner) 7. Welcome split (portrait image + copy) 8. Feature band (three tiles) 9. Quote strip (full-bleed) 10. Mosaic gallery 11. Events band + cards 12. Closing CTA 13. Inner page hero 14. About: promise + values 15. Menu: editorial rows 16. Contact / hours 17. Forms / summary / alerts / tickets 18. Footer 19. Reveal motion 20. Responsive ===================================================================== */ /* ============ 1. RESET & TOKENS ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, picture, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } :root { --primary: #0E0E10; --accent: #C8A24B; --bg: #0B0B0D; --text: #F4F1EA; --font-heading: 'Cormorant Garamond', serif; --font-body: 'Inter', sans-serif; --bg-soft: #141417; --bg-card: #161619; --line: rgba(244,241,234,.10); --line-soft: rgba(244,241,234,.055); --muted: rgba(244,241,234,.58); --accent-soft: rgba(200,162,75,.14); --maxw: 1240px; --gut: clamp(1.25rem, 4vw, 3rem); --r: 14px; --shadow: 0 30px 80px -28px rgba(0,0,0,.8); /* vertical rhythm scale */ --space-section: clamp(4rem, 9vw, 8rem); --space-block: clamp(1.5rem, 3vw, 2.5rem); } /* ============ 2. BASE TYPOGRAPHY ============ */ body { background: transparent; /* base colour is on ; lets bg.jpg show through */ color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.06; letter-spacing: .005em; } h1 { font-size: clamp(2.7rem, 7vw, 5.25rem); } h2 { font-size: clamp(2.05rem, 4.4vw, 3.35rem); } h3 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); } p { color: var(--text); } .muted { color: var(--muted); } /* ============ 3. LAYOUT PRIMITIVES ============ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); } .section { padding-block: var(--space-section); } .center { text-align: center; } .eyebrow { font-family: var(--font-body); font-size: .72rem; letter-spacing: .38em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; display: inline-block; } /* A reusable section heading block with consistent breathing room */ .band-head { max-width: 54ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .band-head.center { margin-inline: auto; text-align: center; } .band-head h2 { margin-top: .2rem; } /* ============ 4. BUTTONS & LINKS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1em 2.1em; font-family: var(--font-body); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; border-radius: 100px; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s; will-change: transform; } .btn-primary { background: var(--accent); color: #14110a; box-shadow: 0 10px 30px -8px var(--accent-soft); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(200,162,75,.45); } .btn-ghost { border: 1px solid var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .btn-block { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .text-link { display: inline-flex; align-items: center; gap: .55em; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); position: relative; padding-bottom: 3px; } .text-link::after { content: '\2192'; transition: transform .3s; } .text-link:hover::after { transform: translateX(6px); } /* ============ 5. HEADER / NAV ============ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--gut); transition: background .4s, padding .4s, border-color .4s; border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(11,11,13,.88); backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line); padding-block: .75rem; } .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: .04em; line-height: 1; } .brand img { height: 56px; width: auto; } .site-header.scrolled .brand img { height: 46px; } .brand .dot { color: var(--accent); } .nav { display: flex; align-items: center; gap: 2.1rem; } .nav a { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .25s; position: relative; } .nav a::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--accent); transition:width .3s; } .nav a:hover, .nav a.active { color: var(--text); } .nav a:hover::after, .nav a.active::after { width: 100%; } .nav a.btn::after { display: none; } .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: .5rem; z-index: 110; } .nav-toggle span { width: 26px; height: 2px; background: var(--text); transition: transform .3s, opacity .3s; } /* ============ 6. HERO ============ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 9rem 0 5rem; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.4) 38%, rgba(11,11,13,.92) 100%); } .hero-wrap { position: relative; z-index: 2; } .hero-inner { max-width: 60ch; } .hero h1 { margin-bottom: 1.5rem; } .hero-sub { font-size: clamp(1.1rem, 2vw, 1.45rem); color: rgba(244,241,234,.85); max-width: 40ch; margin-bottom: 2.4rem; font-weight: 300; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* ============ 7. WELCOME SPLIT ============ */ .split { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .split-media { position: relative; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .split-media img { width: 100%; height: 100%; object-fit: cover; } .split-copy h2 { margin-bottom: 1.4rem; max-width: 16ch; } .split-copy p { color: var(--muted); font-weight: 300; font-size: 1.08rem; line-height: 1.85; margin-bottom: 1.2rem; max-width: 52ch; } .split-copy .text-link { margin-top: .8rem; } /* ============ 8. FEATURE BAND ============ */ .feature-band { background: linear-gradient(180deg, transparent, rgba(200,162,75,.025) 50%, transparent), var(--bg); } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .feature { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--bg-card); transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s; } .feature:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); } .feature-media { aspect-ratio: 4/5; overflow: hidden; } .feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); } .feature:hover .feature-media img { transform: scale(1.06); } .feature-text { padding: 1.6rem 1.7rem 1.9rem; } .feature-text h3 { margin-bottom: .5rem; } .feature-text p { color: var(--muted); font-weight: 300; font-size: 1rem; } /* ============ 9. QUOTE STRIP ============ */ .quote-strip { position: relative; padding-block: clamp(5rem, 12vw, 9rem); overflow: hidden; border-block: 1px solid var(--line); } .quote-bg { position: absolute; inset: 0; z-index: 0; } .quote-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; } .quote-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(11,11,13,.5) 50%, var(--bg) 100%); } .quote-strip .wrap { position: relative; z-index: 2; } .quote { font-family: var(--font-heading); font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.25; text-align: center; max-width: 24ch; margin: 0 auto; font-style: italic; color: var(--text); } /* ============ 10. MOSAIC GALLERY ============ */ .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 1rem; } .mosaic figure { position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); } .mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .mosaic figure:hover img { transform: scale(1.07); } .mosaic .m-tall { grid-row: span 2; } .mosaic .m-wide { grid-column: span 2; } /* ============ 11. EVENTS BAND ============ */ .events-band { background: var(--bg-soft); } .event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .event-card { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--bg-card); transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s; } .event-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); } .event-media { position: relative; aspect-ratio: 4/5; overflow: hidden; } .event-media img { width: 100%; height: 100%; object-fit: cover; } .event-media .ph-frame { position: absolute; inset: 0; padding-top: 0 !important; } .event-body { padding: 1.5rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .5rem; } .event-date { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .event-body p { color: var(--muted); font-weight: 300; font-size: .98rem; } .event-tag { align-self: flex-start; margin-top: .3rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .4em .9em; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); } /* ============ 12. CLOSING CTA ============ */ .closing { position: relative; padding-block: clamp(5rem, 12vw, 9rem); overflow: hidden; text-align: center; } .closing-bg { position: absolute; inset: 0; z-index: 0; } .closing-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .25; } .closing-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 110% at 50% 50%, rgba(11,11,13,.55), var(--bg) 80%); } .closing .wrap { position: relative; z-index: 2; } .closing-inner { max-width: 48ch; margin: 0 auto; } .closing-inner h2 { margin: .3rem 0 1.1rem; } .closing-inner p { color: var(--muted); font-weight: 300; font-size: 1.08rem; margin-bottom: 2rem; } .closing-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ============ 13. INNER PAGE HERO ============ */ .page-hero { padding: clamp(9.5rem, 16vw, 13rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; } .page-hero::after { content:''; position:absolute; left:var(--gut); right:var(--gut); bottom:0; height:1px; background:linear-gradient(90deg,var(--accent),transparent); opacity:.5; } .page-hero h1 { font-size: clamp(2.7rem, 6vw, 4.75rem); margin-top: .5rem; max-width: 18ch; } .page-hero-sub { color: var(--muted); font-weight: 300; font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 56ch; margin-top: 1.3rem; line-height: 1.85; } /* ============ 14. ABOUT: PROMISE + VALUES ============ */ .about-split { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .about-split .about-copy p { color: var(--muted); font-weight: 300; font-size: 1.1rem; line-height: 1.9; } .about-media { position: relative; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .about-media img { width: 100%; height: 100%; object-fit: cover; } .promise-section { background: radial-gradient(70% 120% at 80% 0%, var(--accent-soft), transparent 55%), var(--bg); border-block: 1px solid var(--line); } .promise-inner { max-width: 60ch; } .promise-inner h2 { margin: .3rem 0 1.2rem; max-width: 18ch; } .promise-inner p { font-size: clamp(1.05rem, 1.5vw, 1.22rem); font-weight: 300; line-height: 1.9; color: var(--muted); } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .value { padding: 2.2rem 2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-card); transition: border-color .35s, transform .35s; } .value:hover { border-color: var(--accent); transform: translateY(-4px); } .value h3 { margin-bottom: .8rem; } .value p { font-weight: 300; font-size: 1rem; color: var(--muted); line-height: 1.7; } /* ============ 15. MENU: EDITORIAL ROWS ============ */ .edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 5.5rem); } .edit-row:last-of-type { margin-bottom: 0; } .edit-row:nth-child(even) .edit-media { order: 2; } .edit-media { position: relative; aspect-ratio: 3/2; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .edit-media img { width: 100%; height: 100%; object-fit: cover; } .edit-media .ph-frame { position: absolute; inset: 0; padding-top: 0 !important; } .edit-copy h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 1rem; } .edit-copy p { color: var(--muted); font-weight: 300; font-size: 1.08rem; line-height: 1.8; } .menu-note { margin-top: clamp(3rem, 6vw, 4.5rem); } .menu-note a { color: var(--accent); } /* ============ 16. CONTACT / HOURS ============ */ .contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .contact-card { padding: 1.7rem 1.9rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-card); margin-bottom: 1.1rem; transition: border-color .35s; } .contact-card:hover { border-color: var(--accent); } .contact-label { display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .7rem; } .contact-phone { font-family: var(--font-heading); font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--text); } .contact-card p, .contact-card a { font-weight: 300; line-height: 1.7; } .hours-card { padding: 2.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft); position: sticky; top: 6rem; } .hours-card h3 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem; } .hours-line { display: flex; justify-content: space-between; padding: .6rem 0; font-size: .92rem; color: var(--muted); border-bottom: 1px solid var(--line-soft); } .hours-line:last-of-type { border-bottom: none; } /* ============ 17. FORMS / SUMMARY / ALERTS / TICKETS ============ */ .field { margin-bottom: 1.3rem; } .field label { display: block; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; } .field input, .field select, .field textarea { width: 100%; padding: .95rem 1.05rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-family: var(--font-body); font-size: 1rem; transition: border-color .25s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .consent { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); } .consent input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; } .consent label { font-size: .88rem; color: var(--muted); line-height: 1.55; text-transform: none; letter-spacing: 0; } .summary { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.7rem; position: sticky; top: 6rem; } .summary .line { display: flex; justify-content: space-between; padding: .55rem 0; font-size: .95rem; color: var(--muted); } .summary .total { display: flex; justify-content: space-between; padding-top: 1rem; margin-top: .6rem; border-top: 1px solid var(--line); font-family: var(--font-heading); font-size: 1.5rem; color: var(--text); } .summary .total span:last-child { color: var(--accent); } .alert { padding: 1rem 1.2rem; border-radius: 10px; margin-bottom: 1.2rem; font-size: .92rem; border: 1px solid; } .alert-success { background: rgba(120,200,120,.08); border-color: rgba(120,200,120,.35); color: #bfe6bf; } .alert-error { background: rgba(220,110,110,.08); border-color: rgba(220,110,110,.35); color: #f0bcbc; } .alert-info { background: var(--accent-soft); border-color: rgba(200,162,75,.35); color: #e9d6a8; } .ticket-stub { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 420px; margin: 0 auto 1.5rem; } .ticket-stub .qr { background: #fff; padding: 1.4rem; display: grid; place-items: center; } .ticket-stub .qr img, .ticket-stub .qr svg { width: 200px; height: 200px; } .ticket-stub .stub-body { padding: 1.4rem 1.6rem; text-align: center; } .ticket-stub .code { font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: .15em; color: var(--accent); } /* Ticket / section selectors (event pages) */ .ticket-row, .section-pick { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-card); margin-bottom: .85rem; transition: border-color .3s; } .ticket-row:hover { border-color: var(--accent); } .ticket-row .price { font-family: var(--font-heading); font-size: 1.5rem; color: var(--accent); } .qty { display: flex; align-items: center; gap: .6rem; } .qty button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--text); font-size: 1.1rem; transition: border-color .25s, color .25s; } .qty button:hover { border-color: var(--accent); color: var(--accent); } .qty input { width: 44px; text-align: center; background: transparent; border: none; color: var(--text); font-size: 1.05rem; } .event-hero { padding-top: clamp(9.5rem, 15vw, 11rem); } .event-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .event-flyer { position: relative; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .event-flyer img { width: 100%; height: 100%; object-fit: cover; } .event-flyer .ph-frame { position: absolute; inset: 0; padding-top: 0 !important; } .event-info h1 { margin: .6rem 0 1rem; } .event-info .desc { color: var(--muted); font-weight: 300; margin: 1.4rem 0; font-size: 1.06rem; line-height: 1.8; } .section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.25rem; } .section-opt { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-card); cursor: pointer; transition: border-color .3s, transform .3s, box-shadow .3s; position: relative; } .section-opt:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .section-opt.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .section-opt input { position: absolute; opacity: 0; pointer-events: none; } .section-opt .card-media { aspect-ratio: 3/2; position: relative; overflow: hidden; } .section-opt .card-media img { width:100%; height:100%; object-fit:cover; } .section-opt .so-body { padding: 1.1rem 1.2rem 1.3rem; } .section-opt .so-body h4 { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: .2rem; } .section-opt .so-tag { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .section-opt .so-desc { font-size: .9rem; color: var(--muted); margin: .6rem 0; font-weight: 300; } .section-opt .so-foot { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--muted); } .section-opt .check { position: absolute; top: .9rem; right: .9rem; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color:#14110a; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: .25s; } .section-opt.selected .check { opacity: 1; transform: none; } /* events listing empty state + cards reuse */ .events-empty { text-align: center; padding: clamp(2.5rem,6vw,4.5rem); border: 1px dashed var(--line); border-radius: var(--r); background: var(--bg-soft); } .events-empty p { color: var(--muted); font-weight: 300; font-size: 1.1rem; max-width: 40ch; margin: 0 auto 1.6rem; } /* generic placeholder frame (used where a real image isn't set) */ .ph-frame { position: relative; width: 100%; height: 100%; min-height: 200px; background: repeating-linear-gradient(45deg, rgba(244,241,234,.022) 0 12px, transparent 12px 24px), var(--bg-soft); border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden; } .ph-label { position: absolute; inset: 0; display: grid; place-content: center; gap: .25rem; font-size: .66rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); text-align: center; opacity: .45; } .ph-label small { font-size: .58rem; letter-spacing: .15em; opacity: .7; } /* pillars (used on events page) */ .pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; } .pillar { position: relative; padding: 2.6rem 2rem 2.3rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-card); overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s; } .pillar::before { content:''; position:absolute; inset:0 0 auto 0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.8,.2,1); } .pillar:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); } .pillar:hover::before { transform: scaleX(1); } .pillar h3 { margin-bottom: .8rem; } .pillar p { font-size: 1rem; font-weight: 300; color: var(--muted); line-height: 1.7; } /* ============ 18. FOOTER ============ */ .site-footer { border-top: 1px solid var(--line); padding-block: clamp(3.5rem,6vw,5rem) 2rem; background: var(--primary); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.8rem; margin-bottom: 3rem; } .site-footer h4 { font-family: var(--font-body); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; } .site-footer a { color: var(--muted); font-size: .95rem; line-height: 2; transition: color .25s; } .site-footer a:hover { color: var(--text); } .footer-brand { font-family: var(--font-heading); font-size: 2.1rem; margin-bottom: .6rem; } .footer-tagline { color: var(--muted); font-weight: 300; margin-bottom: 1.4rem; } .footer-hours div { display: flex; justify-content: space-between; font-size: .88rem; color: var(--muted); padding: .25rem 0; max-width: 18rem; } .footer-bottom { border-top: 1px solid var(--line); padding-top: 1.7rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .82rem; color: var(--muted); } .open-pill { display:inline-flex; align-items:center; gap:.5em; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; } .open-pill .led { width:8px; height:8px; border-radius:50%; background:#6c6; box-shadow:0 0 10px #6c6; } .open-pill.closed .led { background:#c66; box-shadow:0 0 10px #c66; } /* ============ 19. REVEAL MOTION ============ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"]{ transition-delay:.1s } .reveal[data-d="2"]{ transition-delay:.2s } .reveal[data-d="3"]{ transition-delay:.3s } .reveal[data-d="4"]{ transition-delay:.4s } /* ============ 20. RESPONSIVE ============ */ @media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 2.2rem; } .split-media { max-width: 460px; aspect-ratio: 4/5; } .feature-grid { grid-template-columns: 1fr; gap: 1.2rem; } .feature-media { aspect-ratio: 16/10; } .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } .mosaic .m-wide { grid-column: span 2; } .mosaic .m-tall { grid-row: span 1; } .event-grid { grid-template-columns: 1fr; gap: 1.2rem; } /* Show the WHOLE flyer on mobile โ€” no fixed box, no cropping. Single column means natural height is fine and looks premium. */ .event-media { aspect-ratio: auto; } .event-media img { position: static; height: auto; object-fit: contain; } .event-media .ph-frame { position: relative; min-height: 360px; } .about-split { grid-template-columns: 1fr; gap: 2rem; } .about-media { max-width: 460px; order: -1; } .edit-row { grid-template-columns: 1fr; gap: 1.5rem; } .edit-row:nth-child(even) .edit-media { order: 0; } .edit-media { aspect-ratio: 16/9; } .pillars, .values-grid { grid-template-columns: 1fr; } .event-hero-grid { grid-template-columns: 1fr; } .event-flyer { max-width: 360px; aspect-ratio: auto; } .event-flyer img { height: auto; object-fit: contain; } .event-flyer .ph-frame { position: relative; inset: auto; min-height: 360px; } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .summary, .hours-card { position: static; } } @media (max-width: 820px) { .nav { position: fixed; inset: 0 0 0 auto; width: min(82vw, 330px); background: rgba(13,13,16,.98); backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; justify-content: center; padding: 2.5rem; gap: 1.7rem; transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); border-left: 1px solid var(--line); } .nav.open { transform: none; } .nav a { font-size: 1.05rem; } .nav-toggle { display: flex; } .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2){ opacity: 0; } .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .brand img { height: 46px; } } @media (max-width: 560px) { .hero { padding: 7.5rem 0 4rem; min-height: 90svh; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } .closing-actions { flex-direction: column; align-items: stretch; } .closing-actions .btn { width: 100%; } .mosaic { grid-template-columns: 1fr; grid-auto-rows: 240px; } .mosaic .m-wide, .mosaic .m-tall { grid-column: auto; grid-row: auto; } .ticket-row { flex-direction: column; align-items: stretch; gap: .8rem; text-align: center; } .footer-bottom { flex-direction: column; } } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ============ GOLD GRADIENT RESERVATION BUTTON ============ */ /* Adapted from a Uiverse design (vinodjangid07): animated gold gradient, no icon. Applied to homepage reservation CTAs via .btn-gold. */ .btn-gold { background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); background-size: 200% 200%; background-position: left center; color: #4a3f08; font-weight: 700; border: none; box-shadow: 0 8px 22px -8px rgba(170,119,28,.55); transition: transform .35s cubic-bezier(.2,.8,.2,1), background-position 1.2s ease, box-shadow .35s; } .btn-gold:hover { color: #4a3f08; transform: translateY(-2px) scale(.99); background-position: right center; box-shadow: 0 14px 34px -8px rgba(170,119,28,.7); animation: goldShift 5s ease infinite; } @keyframes goldShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .btn-gold:hover { animation: none; } } /* ============ UNIVERSAL SUBTLE BACKGROUND IMAGE ============ */ /* Place an image at /bg.jpg (site root). It sits fixed behind ALL content at low opacity so bare black areas aren't plain. Cards/bands keep their own solid backgrounds and naturally cover it where needed. To change the image just replace /bg.jpg โ€” no code edit needed. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; /* behind every page element */ background-image: url("/bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; opacity: 0.06; /* subtle โ€” raise toward 0.10 for more, lower for less */ pointer-events: none; } /* Base colour lives on so body::before (z-index:-1) shows through. body stays transparent over it. */ html { background-color: var(--bg); } body { background-color: transparent; } @media (prefers-reduced-motion: reduce) { body::before { background-attachment: scroll; } } /* ============ DYNAMIC MENU (customer-facing) ============ */ .menu-tabs { display:flex; gap:.5rem; justify-content:center; margin-bottom:clamp(2.5rem,5vw,4rem); flex-wrap:wrap; } .menu-tab { font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:.8em 1.8em; border:1px solid var(--line); border-radius:100px; background:transparent; transition:color .3s, border-color .3s, background .3s; } .menu-tab:hover { color:var(--text); border-color:var(--accent); } .menu-tab.active { color:#14110a; background:var(--accent); border-color:var(--accent); font-weight:600; } .menu-cat { margin-bottom:clamp(2.5rem,5vw,3.5rem); } .menu-cat-head { margin-bottom:1.4rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); } .menu-cat-title { font-family:var(--font-heading); font-size:clamp(1.6rem,3vw,2.2rem); color:var(--accent); } .menu-cat-desc { display:block; color:var(--muted); font-weight:300; font-size:.98rem; margin-top:.3rem; } .menu-list { display:flex; flex-direction:column; gap:1.15rem; } .menu-item { } .mi-main { display:flex; align-items:baseline; gap:.6rem; } .mi-name { font-size:1.08rem; color:var(--text); font-weight:400; } .mi-var { font-size:.82rem; color:var(--muted); letter-spacing:.04em; font-style:italic; } .mi-dots { flex:1; border-bottom:1px dotted rgba(244,241,234,.22); transform:translateY(-4px); } .mi-price { font-family:var(--font-heading); font-size:1.2rem; color:var(--accent); white-space:nowrap; } .mi-price::before { content:"KSh "; font-family:var(--font-body); font-size:.7rem; letter-spacing:.08em; color:var(--muted); } .mi-desc { color:var(--muted); font-weight:300; font-size:.92rem; margin-top:.25rem; max-width:60ch; } .menu-fallback { text-align:center; padding:clamp(2.5rem,6vw,4.5rem); border:1px dashed var(--line); border-radius:var(--r); background:var(--bg-soft); } .menu-fallback p { color:var(--muted); font-weight:300; font-size:1.1rem; max-width:44ch; margin:0 auto; } .menu-fallback-inline { color:var(--muted); font-weight:300; font-style:italic; } @media (max-width:560px){ .mi-price { font-size:1.05rem; } .mi-name { font-size:1rem; } } /* ============ GOLD EVENT TICKET (adapted from a Uiverse design by zeeshan_2112) ============ */ .ticket-canvas { display:flex; flex-direction:column; align-items:center; gap:2rem; padding:1rem 0; } .ticket-wrapper { --t-bg:#16140e; --t-bg-light:#211d14; --t-accent:var(--accent); --t-accent-glow:rgba(200,162,75,.45); --t-text-main:#f8f5ee; --t-text-muted:rgba(248,245,238,.55); font-size:10px; perspective:1000px; display:inline-block; width:100%; max-width:24em; } .ticket { position:relative; width:100%; color:var(--t-text-main); font-family:var(--font-body); transform-style:preserve-3d; transition:transform .6s cubic-bezier(.23,1,.32,1), box-shadow .6s ease; box-shadow:0 20px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05); } .ticket-wrapper:hover .ticket { transform:rotateX(4deg) rotateY(-7deg) scale(1.02); box-shadow:18px 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), -5px -5px 22px var(--t-accent-glow); } .ticket::after { content:""; position:absolute; inset:0; border-radius:1em; pointer-events:none; z-index:10; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 48%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.12) 52%, transparent 60%); background-size:250% 250%; background-position:100% 100%; transition:background-position .6s cubic-bezier(.23,1,.32,1); mix-blend-mode:overlay; } .ticket-wrapper:hover .ticket::after { background-position:0% 0%; } .t-main { padding:2em; position:relative; overflow:hidden; background:radial-gradient(circle at bottom left, transparent 1em, var(--t-bg) 1.05em), radial-gradient(circle at bottom right, transparent 1em, var(--t-bg) 1.05em); background-size:51% 100%; background-position:bottom left, bottom right; background-repeat:no-repeat; border-top-left-radius:1em; border-top-right-radius:1em; } .t-main::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(200,162,75,.14) 1px,transparent 1px), linear-gradient(90deg, rgba(200,162,75,.14) 1px, transparent 1px); background-size:2em 2em; transform:perspective(500px) rotateX(20deg) scale(1.5); animation:t-grid 20s linear infinite; } @keyframes t-grid { 0%{background-position:0 0;} 100%{background-position:0 4em;} } .t-content { position:relative; z-index:1; } .t-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.8em; gap:1em; } .t-logo { display:flex; align-items:center; gap:.5em; font-family:var(--font-heading); font-weight:600; font-size:1.25em; letter-spacing:.01em; color:#fff; } .t-logo img { height:1.8em; width:auto; filter:drop-shadow(0 0 5px var(--t-accent-glow)); } .t-type { font-size:.6em; text-transform:uppercase; letter-spacing:.2em; color:var(--t-accent); border:1px solid var(--t-accent); padding:.45em .85em; border-radius:99em; font-weight:700; white-space:nowrap; } .t-title { font-family:var(--font-heading); font-size:2.4em; font-weight:600; line-height:1.05; margin-bottom:.15em; background:linear-gradient(135deg,#fff 0%,#e9d8a8 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .t-subtitle { color:var(--t-text-muted); font-size:.95em; margin-bottom:2em; } .t-details { display:grid; grid-template-columns:1fr 1fr; gap:1.4em; margin-bottom:.5em; } .t-detail-item { display:flex; flex-direction:column; gap:.25em; } .t-label { font-size:.6em; text-transform:uppercase; letter-spacing:.1em; color:var(--t-text-muted); } .t-value { font-size:1.05em; font-weight:600; color:var(--t-text-main); } .t-perforation { position:absolute; bottom:0; left:0; width:100%; transform:translateY(50%); display:flex; align-items:center; z-index:2; } .t-perf-line { flex-grow:1; border-top:2px dashed rgba(255,255,255,.2); margin:0 1.5em; } .t-stub { padding:1.6em 2em; position:relative; background:radial-gradient(circle at top left, transparent 1em, var(--t-bg-light) 1.05em), radial-gradient(circle at top right, transparent 1em, var(--t-bg-light) 1.05em); background-size:51% 100%; background-position:top left, top right; background-repeat:no-repeat; border-bottom-left-radius:1em; border-bottom-right-radius:1em; display:flex; justify-content:space-between; align-items:center; gap:1.5em; } .t-stub-info { display:flex; flex-direction:column; gap:.4em; } .t-code { font-family:var(--font-heading); font-size:1.5em; font-weight:600; letter-spacing:.1em; color:var(--t-accent); } .t-code-label { font-size:.6em; text-transform:uppercase; letter-spacing:.2em; color:var(--t-text-muted); } .t-qr { background:#fff; padding:.6em; border-radius:.5em; flex:none; } .t-qr canvas, .t-qr img { display:block; width:96px; height:96px; } @media (max-width:420px){ .ticket-wrapper{ font-size:9px; } .t-details{ gap:1em; } .t-qr canvas, .t-qr img{ width:84px; height:84px; } } @media (prefers-reduced-motion: reduce){ .t-main::after{ animation:none; } .ticket-wrapper:hover .ticket{ transform:none; } } /* Footer logo image (used when a site logo is uploaded) */ .footer-logo { max-height: 52px; width: auto; display: block; margin-bottom: .2rem; } /* ============ ACCOUNT DASHBOARD ============ */ .acct-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2.8rem; } .acct-card { background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:1.4rem; text-decoration:none; transition:transform .3s, border-color .3s, box-shadow .3s; display:block; } .acct-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 16px 40px -22px rgba(0,0,0,.8); } .acct-card-ic { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(200,162,75,.12); color:var(--accent); margin-bottom:1rem; } .acct-card-ic svg { width:21px; height:21px; max-width:21px; max-height:21px; } .acct-card-n { font-family:var(--font-heading); font-size:2.4rem; line-height:1; color:var(--text); } .acct-card-l { color:var(--muted); font-size:.85rem; margin-top:.3rem; } .acct-h3 { font-family:var(--font-heading); font-size:1.5rem; margin-bottom:1.2rem; } .acct-up-list { display:flex; flex-direction:column; gap:.8rem; } .acct-up { display:flex; align-items:center; gap:1.2rem; padding:1rem 1.2rem; background:var(--bg-card); border:1px solid var(--line); border-radius:14px; text-decoration:none; transition:border-color .3s, transform .2s; } .acct-up:hover { border-color:var(--accent); transform:translateX(3px); } .acct-up-date { flex:none; width:54px; text-align:center; border-right:1px solid var(--line); padding-right:1rem; } .acct-up-date .d { display:block; font-family:var(--font-heading); font-size:1.7rem; color:var(--accent); line-height:1; } .acct-up-date .m { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:.2rem; } .acct-up-info { flex:1; display:flex; flex-direction:column; gap:.2rem; } .acct-up-info strong { color:var(--text); font-size:1.05rem; } .acct-up-info .muted { font-size:.85rem; } .acct-up-tag { flex:none; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; padding:.4em .9em; border-radius:99px; } .acct-up-tag.t { color:#14110a; background:var(--accent); } .acct-up-tag.r { color:var(--accent); border:1px solid var(--accent); } .acct-empty { text-align:center; padding:clamp(2.5rem,6vw,4.5rem); border:1px dashed var(--line); border-radius:16px; background:var(--bg-soft); } .acct-empty p { color:var(--muted); font-size:1.05rem; } @media(max-width:560px){ .acct-stats{ grid-template-columns:1fr; } } /* ============ QR ENLARGE (tap-to-scan at the door) ============ */ .t-qr { cursor: zoom-in; position: relative; } .t-qr::after { content: "Tap to enlarge"; position: absolute; left: 50%; bottom: -1.5em; transform: translateX(-50%); font-family: var(--font-body); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--t-text-muted, rgba(255,255,255,.55)); white-space: nowrap; pointer-events: none; } .qr-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; background: rgba(8,7,5,.92); backdrop-filter: blur(6px); padding: 2rem; } .qr-overlay.open { display: flex; } .qr-overlay .qr-big { background: #fff; padding: clamp(1rem,4vw,1.6rem); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); } .qr-overlay .qr-big canvas { display: block; width: min(78vw, 78vh, 420px) !important; height: min(78vw, 78vh, 420px) !important; } .qr-overlay .qr-cap { color: #f4f1ea; text-align: center; } .qr-overlay .qr-cap .code { font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: .12em; color: var(--accent); } .qr-overlay .qr-cap .hint { font-size: .85rem; color: rgba(244,241,234,.6); margin-top: .3rem; } .qr-overlay .qr-close { position: absolute; top: 1.2rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244,241,234,.3); background: transparent; color: #f4f1ea; font-size: 1.4rem; cursor: pointer; } .qr-overlay .qr-close:hover { border-color: var(--accent); color: var(--accent); }