/* * ConnectHQ — shared theme (V2, 2026 purple/white redesign) * * Regenerated from NewWebsiteThemeOfConnecthqV2/index.html. V2 is an evolution * of the first theme, not a rewrite: same tokens, but it retunes ~58 shared * rules (roomier sections, solid white cards instead of glass, a blur-in scroll * reveal) and switches the body font from Inter to Manrope. Patching those one * by one would have drifted from the source, so this file is generated from V2 * wholesale and the site-specific blocks are re-appended at the end. * * ── Namespacing ─────────────────────────────────────────────────────────────── * Tokens in :root are global and safe — the legacy stylesheets define no custom * properties. Everything else is scoped under `body.chq`; add class="chq" to * to opt a page in. The theme reuses class names Bootstrap and * assets/css/style.css also define (`.container`, `.btn`, `.form-group`), and * its reset would otherwise deform legacy markup. * * Fonts (Outfit + Manrope) are loaded per-page in so they can be * preconnected rather than serialised behind this file. * * Everything below "LEGACY ESCAPE HATCHES" is site-specific and NOT from the * V2 source: modal compatibility, nav dropdowns for the real site IA, nav fit, * and the form validation/submit states. Preserve these when regenerating. */ /* ═══════════════════════════════════════════════════════════════ TOKENS ═══════════════════════════════════════════════════════════════ */ :root { --p: #6B2FA0; --pm: #7C3DB5; --pl: #9B5DE5; --pg: rgba(107, 47, 160, 0.12); --ps: rgba(107, 47, 160, 0.22); --bg: #F6F5FF; --white: #FFFFFF; --dark: #12111A; --dark-2: #1E1D2C; --tx: #1A1828; --tm: #4A4768; --tl: #8A87A8; --tll: #C0BEDF; --border: rgba(255, 255, 255, 0.55); --border-light: rgba(0, 0, 0, 0.07); --glass: rgba(255, 255, 255, 0.62); --glass-dark: rgba(18, 17, 26, 0.55); --glass-card: rgba(255, 255, 255, 0.72); --ease: cubic-bezier(0.25, 1, 0.5, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --t: 0.8s var(--ease); --t-fast: 0.4s var(--ease); --r: 16px; --rl: 24px; --rxl: 36px; --shadow: 0 8px 40px rgba(107, 47, 160, 0.14); --shadow-lg: 0 20px 80px rgba(107, 47, 160, 0.2); --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.7); } /* ═══════════════════════════════════════════════════════════════ RESET ═══════════════════════════════════════════════════════════════ */ /* Scoped to body.chq so legacy pages that still load bootstrap.min.css and assets/css/style.css are untouched by these resets. `img{height:100%; object-fit:cover}` in particular would deform every Owl carousel image. */ html{scroll-behavior:smooth} body.chq{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.65;font-size:16px;margin:0} body.chq *,body.chq *::before,body.chq *::after{box-sizing:border-box} body.chq h1,body.chq h2,body.chq h3,body.chq h4,body.chq h5,body.chq h6, body.chq p,body.chq ul,body.chq ol,body.chq figure,body.chq blockquote{margin:0;padding:0} /* Default: images behave normally. Photo frames opt IN to cover-fill below. */ body.chq img:not(.no-chq-img){display:block;max-width:100%;height:auto} body.chq .hero-photo img, body.chq .space-img img, body.chq .amenity-img img, body.chq .gallery-hero img, body.chq .gallery-grid img, body.chq .ent-img img, body.chq .ent-banner-photo img, body.chq .carousel-slide img, body.chq .chq-cover img:not(.no-chq-img){width:100%;height:100%;object-fit:cover} body.chq a{text-decoration:none;color:inherit} body.chq ul:not(.legacy-list){list-style:none} body.chq button{cursor:pointer;border:none;background:none;font-family:inherit} body.chq h1,body.chq h2,body.chq h3,body.chq h4{font-family:'Outfit',sans-serif;line-height:1.08} /* ═══════════════════════════════════════════════════════════════ GLASS UTILITY ═══════════════════════════════════════════════════════════════ */ .glass { background: var(--glass-card); border: 1px solid var(--border); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } .glass-dark { background: var(--glass-dark); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); } /* ═══════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════ */body.chq .container{ max-width: 1160px; margin: 0 auto; padding: 0 28px } body.chq .section{ padding: 140px 0 } body.chq .section-tag{ display: inline-flex; align-items: center; gap: 7px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p); padding: 5px 14px; border-radius: 100px; margin-bottom: 18px; background: rgba(107, 47, 160, 0.08); border: 1px solid rgba(107, 47, 160, 0.18); } body.chq .section-tag::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--p); flex-shrink: 0 } body.chq .section-title{ font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 300; letter-spacing: -0.025em; color: var(--tx); margin-bottom: 14px; line-height: 1.1; } body.chq .section-title strong{ font-weight: 700 } body.chq .section-sub{ font-size: 1.0625rem; color: var(--tm); max-width: 500px; line-height: 1.8; font-weight: 300 } body.chq .text-center{ text-align: center } body.chq .text-center .section-sub{ margin: 0 auto } /* ═══════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════ */body.chq .btn{ display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 500; padding: 12px 26px; border-radius: 100px; transition: all var(--t-fast); white-space: nowrap; cursor: pointer; letter-spacing: 0.01em; } body.chq .btn-primary{ background: var(--p); color: #fff; box-shadow: 0 4px 24px rgba(107, 47, 160, 0.35); } body.chq .btn-primary:hover{ background: var(--pm); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 40px rgba(107, 47, 160, 0.45) } body.chq .btn-glass{ background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; backdrop-filter: blur(12px); } body.chq .btn-glass:hover{ background: rgba(255, 255, 255, 0.28); transform: translateY(-2px) } body.chq .btn-outline-light{ background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.9); } body.chq .btn-outline-light:hover{ background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6) } body.chq .btn-white{ background: #fff; color: var(--p); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) } body.chq .btn-white:hover{ transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) } /* ═══════════════════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════════════════ */body.chq #nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 66px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border-bottom: 1px solid rgba(255, 255, 255, 0.6); transition: all 0.5s var(--ease); } body.chq #nav.scrolled{ background: rgba(255, 255, 255, 0.88); box-shadow: 0 4px 32px rgba(107, 47, 160, 0.08); } body.chq #nav.hero-overlap{ background: rgba(255, 255, 255, 0.08); border-bottom-color: rgba(255, 255, 255, 0.12); } body.chq #nav.hero-overlap .nav-links a{ color: rgba(255, 255, 255, 0.85) } body.chq #nav.hero-overlap .nav-links a:hover{ color: #fff; background: rgba(255, 255, 255, 0.12) } body.chq #nav.hero-overlap .nav-phone{ color: rgba(255, 255, 255, 0.8) } body.chq #nav.hero-overlap .nav-logo-text{ color: #fff } body.chq #nav.hero-overlap .nav-cta{ background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; backdrop-filter: blur(8px) } body.chq #nav.hero-overlap .hamburger span{ background: #fff } body.chq .nav-inner{ display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px } body.chq .nav-logo{ display: flex; align-items: center; gap: 9px; flex-shrink: 0 } body.chq .nav-logo img{ height: 38px; width: auto; object-fit: contain; transition: filter 0.4s } body.chq #nav.hero-overlap .nav-logo img{ filter: brightness(10) saturate(0) } body.chq .nav-logo-text{ font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--tx); letter-spacing: -0.01em; transition: color 0.4s } body.chq .nav-logo-text span{ color: var(--p) } body.chq .nav-links{ display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center } body.chq .nav-links a{ font-size: 0.875rem; font-weight: 400; color: var(--tm); padding: 6px 14px; border-radius: 8px; transition: all 0.25s; letter-spacing: 0.01em } body.chq .nav-links a:hover{ color: var(--p); background: rgba(107, 47, 160, 0.07) } body.chq .nav-dropdown{ position: relative; display: inline-block } body.chq .nav-dropdown-content{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); min-width: 180px; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); border: 1px solid var(--border); opacity: 0; visibility: hidden; transition: all 0.3s var(--ease); padding: 8px; } body.chq .nav-dropdown:hover .nav-dropdown-content{ transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible } body.chq #nav.hero-overlap .nav-dropdown-content a{ color: var(--tx) } body.chq .nav-dropdown-content a{ display: block; padding: 10px 16px; font-size: 0.875rem; color: var(--tx); border-radius: 6px } body.chq .nav-dropdown-content a:hover{ background: rgba(107, 47, 160, 0.06); color: var(--p) } body.chq .nav-actions{ display: flex; align-items: center; gap: 12px; flex-shrink: 0 } body.chq .nav-phone{ display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: var(--tm); transition: color 0.3s } body.chq .nav-phone svg{ color: var(--p) } body.chq .nav-phone:hover{ color: var(--p) } body.chq .nav-cta{ background: var(--p); color: #fff; padding: 9px 20px; border-radius: 100px; font-family: 'Outfit', sans-serif; font-size: 0.875rem; font-weight: 500; transition: all 0.3s var(--ease); } body.chq .nav-cta:hover{ background: var(--pm); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(107, 47, 160, 0.35) } body.chq .hamburger{ display: none; flex-direction: column; gap: 5px; padding: 4px } body.chq .hamburger span{ width: 22px; height: 1.5px; background: var(--tx); border-radius: 2px; transition: all 0.35s var(--ease); display: block } body.chq .hamburger.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg) } body.chq .hamburger.open span:nth-child(2){ opacity: 0; transform: scaleX(0) } body.chq .hamburger.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg) } body.chq .mobile-menu{ display: none; flex-direction: column; position: fixed; top: 66px; left: 0; right: 0; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(24px); border-bottom: 1px solid var(--border-light); padding: 14px 28px 28px; z-index: 999; gap: 2px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1); transform: translateY(-8px); opacity: 0; transition: all 0.4s var(--ease); } body.chq .mobile-menu.open{ display: flex; transform: translateY(0); opacity: 1 } body.chq .mobile-menu a{ font-size: 1rem; font-weight: 400; color: var(--tm); padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: color 0.2s } body.chq .mobile-menu a:hover{ color: var(--p) } body.chq .mobile-menu a:last-of-type{ border-bottom: none } body.chq .mobile-menu .btn{ margin-top: 12px; justify-content: center; width: 100% } /* ═══════════════════════════════════════════════════════════════ HERO — FULL BLEED ═══════════════════════════════════════════════════════════════ */body.chq #hero{ height: 100vh; min-height: 660px; max-height: 1080px; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Photo layer */body.chq .hero-photo{ position: absolute; inset: 0; z-index: 0 } body.chq .hero-photo img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroScale 14s ease-out forwards } @keyframes heroScale{ 0% { transform: scale(1.06) } 100% { transform: scale(1) } } /* Gradient overlay */body.chq .hero-overlay{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(10, 9, 20, 0.35) 0%, rgba(10, 9, 20, 0.15) 30%, rgba(10, 9, 20, 0.65) 68%, rgba(10, 9, 20, 0.95) 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Content anchored to bottom */body.chq .hero-content{ position: relative; z-index: 2; width: 100%; margin-top: auto; padding-bottom: 40px; } /* Left copy — max 58% width so right side shows the photo */body.chq .hero-copy{ max-width: min(600px, 58vw); animation: fadeUp 1s 0.3s var(--ease) both; } @keyframes fadeUp{ from { opacity: 0; transform: translateY(36px) } to { opacity: 1; transform: translateY(0) } } body.chq .hero-eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 20px; } body.chq .hero-eyebrow-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--pl); flex-shrink: 0; animation: pulse 2.5s ease-in-out infinite } @keyframes pulse{ 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: 0.4; transform: scale(0.7) } } body.chq .hero-title{ font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.06; color: #fff; margin-bottom: 12px; } body.chq .hero-title strong{ font-weight: 700; color: #fff; display: block } body.chq .hero-title em{ font-style: normal; color: #8537C9; font-weight: 400; text-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) } body.chq .hero-sub{ font-size: 1.0625rem; color: rgba(255, 255, 255, 0.58); line-height: 1.78; margin-bottom: 10px; font-weight: 300; max-width: 520px; } body.chq .hero-address{ display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.38); margin-bottom: 28px; font-weight: 300; letter-spacing: 0.03em; } body.chq .hero-address svg{ color: var(--pl); flex-shrink: 0 } body.chq .hero-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px } /* Stats glass strip */body.chq .hero-stats{ display: flex; align-items: stretch; border-radius: var(--r); overflow: hidden; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(20px); } body.chq .hero-stat{ padding: 18px 0; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.3s; flex: 1; } body.chq .hero-stat:last-child{ border-right: none } body.chq .hero-stat:hover{ background: rgba(255, 255, 255, 0.08) } body.chq .hero-stat-num{ font-family: 'Outfit', sans-serif; font-size: 1.875rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 4px; letter-spacing: -0.03em; } body.chq .hero-stat-label{ font-size: 0.6875rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.08em; text-transform: uppercase } body.chq .hero-dark-form label{color:rgba(255,255,255,0.85);text-shadow:none;font-size:0.75rem;} body.chq .hero-dark-form .form-group{margin-bottom:8px} body.chq .hero-ctrl{ background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12); color:#fff; } body.chq .hero-ctrl::placeholder{color:rgba(255,255,255,0.4)} body.chq .hero-ctrl:focus{background:rgba(255,255,255,0.12);border-color:var(--pl)} body.chq .hero-ctrl option{background:#1A1924;color:#fff} body.chq .hero-radio-row .radio-opt label{ background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);color:#fff; } body.chq .hero-radio-row .radio-opt input:checked + label{ background:var(--p);border-color:var(--p);color:#fff; } body.chq .hero-submit{background:var(--p);color:#fff;box-shadow:0 8px 24px rgba(107,47,160,0.3)} body.chq .hero-submit:hover{background:var(--pm);transform:translateY(-2px);box-shadow:0 12px 32px rgba(107,47,160,0.45)} /* Glass callout card — absolutely positioned bottom-right of the hero */body.chq .hero-card{ position: absolute; z-index: 3; right: max(28px, calc((100vw - 1160px)/2 + 28px)); bottom: 72px; width: 340px; border-radius: 20px; animation: fadeUp 1s 0.5s var(--ease) both; padding: 28px; background: rgba(8, 7, 18, 0.58); border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(36px) saturate(160%); -webkit-backdrop-filter: blur(36px) saturate(160%); display: flex; flex-direction: column; gap: 16px; } body.chq .hero-card-title{ font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 400; color: #fff; margin-bottom: 6px; letter-spacing: -0.015em; } body.chq .hero-card-sub{ font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 24px; font-weight: 300; line-height: 1.65 } body.chq .hero-card-features{ display: flex; flex-direction: column; gap: 0; } body.chq .hero-card-feature{ display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.875rem; color: rgba(255, 255, 255, 0.75); font-weight: 300; } body.chq .hero-card-feature:last-child{ border-bottom: none } body.chq .hero-card-feature svg{ color: var(--pl); flex-shrink: 0 } body.chq .hero-card-stat-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; } body.chq .hero-card-stat{ background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 14px 16px; } body.chq .hero-card-stat-num{ font-family: 'Outfit', sans-serif; font-size: 1.375rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 3px } body.chq .hero-card-stat-label{ font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); font-weight: 400; text-transform: uppercase; letter-spacing: 0.07em } body.chq .hero-card-cta{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border-radius: var(--r); background: var(--p); color: #fff; font-family: 'Outfit', sans-serif; font-size: 0.9375rem; font-weight: 600; transition: all 0.35s var(--ease); box-shadow: 0 4px 24px rgba(107, 47, 160, 0.45); cursor: pointer; border: none; } body.chq .hero-card-cta:hover{ background: var(--pm); transform: translateY(-2px); box-shadow: 0 8px 36px rgba(107, 47, 160, 0.55) } /* ═══════════════════════════════════════════════════════════════ MARQUEE STRIP ═══════════════════════════════════════════════════════════════ */body.chq .strip{ background: var(--white); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 16px 0; overflow: hidden; } body.chq .marquee-wrap{ overflow: hidden } body.chq .marquee-track{ display: flex; gap: 0; width: max-content; animation: marquee 35s linear infinite } body.chq .marquee-track:hover{ animation-play-state: paused } body.chq .marquee-item{ display: flex; align-items: center; gap: 8px; padding: 0 36px; font-size: 0.8125rem; font-weight: 400; color: var(--tm); white-space: nowrap; } body.chq .marquee-dot{ width: 4px; height: 4px; background: var(--p); border-radius: 50%; opacity: 0.4 } @keyframes marquee{ 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } } /* ═══════════════════════════════════════════════════════════════ SPACES ═══════════════════════════════════════════════════════════════ */body.chq .spaces-header{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 72px } body.chq .spaces-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px } body.chq .space-card{ border-radius: 24px; overflow: hidden; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; cursor: default; } body.chq .space-card:hover{ transform: translateY(-12px) scale(1.015); box-shadow: 0 32px 64px rgba(107, 47, 160, 0.12), 0 0 0 1px rgba(107, 47, 160, 0.1); } body.chq .space-img{ aspect-ratio: 4/3; overflow: hidden; position: relative; flex-shrink: 0; } body.chq .space-img img{ transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) } body.chq .space-card:hover .space-img img{ transform: scale(1.08) } body.chq .space-img-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(18, 17, 26, 0.3) 100%) } body.chq .space-pill{ position: absolute; top: 18px; left: 18px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); color: var(--p); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } body.chq .space-body{ padding: 32px; flex: 1; display: flex; flex-direction: column } body.chq .space-title{ font-family: 'Outfit', sans-serif; font-size: 1.35rem; font-weight: 500; color: var(--tx); margin-bottom: 12px; letter-spacing: -0.015em } body.chq .space-desc{ font-size: 0.9375rem; color: var(--tm); line-height: 1.65; flex: 1; font-weight: 300; margin-bottom: 24px } body.chq .space-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px } body.chq .chip{ font-size: 0.75rem; font-weight: 500; color: var(--p); background: rgba(107, 47, 160, 0.04); border: 1px solid rgba(107, 47, 160, 0.12); padding: 4px 12px; border-radius: 100px; letter-spacing: 0.02em } body.chq .space-footer{ display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(0, 0, 0, 0.06); padding-top: 20px } body.chq .space-seats{ font-family: 'Outfit', sans-serif; font-size: 0.875rem; font-weight: 400; color: var(--tl) } body.chq .space-seats b{ color: var(--p); font-weight: 700; font-size: 1.125rem } body.chq .space-link{ display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--p); transition: all 0.3s var(--ease); background: rgba(107, 47, 160, 0.06); padding: 8px 16px; border-radius: 100px; } body.chq .space-link:hover{ gap: 8px; background: var(--p); color: #fff } /* Enterprise card */body.chq .ent-card{ margin-top: 20px; border-radius: var(--rl); overflow: hidden; display: grid; grid-template-columns: 56% 44%; background: var(--glass-card); border: 1px solid var(--border); backdrop-filter: blur(16px); box-shadow: var(--shadow-card); transition: all var(--t); } body.chq .ent-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.7) } body.chq .ent-img{ position: relative; overflow: hidden; min-height: 280px; background: #F9F9FB } body.chq .ent-img img{ width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 0.8s var(--ease); padding: 20px } body.chq .ent-card:hover .ent-img img{ transform: scale(1.03) } body.chq .ent-img-overlay{ position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, rgba(246, 245, 255, 0.3) 100%) } body.chq .ent-body{ padding: 44px 44px; display: flex; flex-direction: column; justify-content: center } body.chq .ent-title{ font-family: 'Outfit', sans-serif; font-size: 1.625rem; font-weight: 300; color: var(--tx); margin-bottom: 12px; letter-spacing: -0.025em; line-height: 1.15 } body.chq .ent-title strong{ font-weight: 700 } body.chq .ent-desc{ font-size: 0.9375rem; color: var(--tm); line-height: 1.75; font-weight: 300; margin-bottom: 24px } body.chq .ent-pills{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px } body.chq .ent-pill{ font-size: 0.8125rem; font-weight: 500; color: var(--p); background: rgba(107, 47, 160, 0.08); border: 1px solid rgba(107, 47, 160, 0.16); padding: 5px 14px; border-radius: 100px } body.chq .ent-actions{ display: flex; gap: 12px; flex-wrap: wrap } /* ═══════════════════════════════════════════════════════════════ GALLERY — FULL BLEED SECTION ═══════════════════════════════════════════════════════════════ */body.chq #gallery{ position: relative; overflow: hidden; background: var(--dark); padding: 0; } body.chq .gallery-hero{ height: 70vh; min-height: 480px; max-height: 700px; position: relative; overflow: hidden; } body.chq .gallery-hero img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75) } body.chq .gallery-hero-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 17, 26, 0.2) 0%, rgba(18, 17, 26, 0.75) 100%); } body.chq .gallery-hero-content{ position: absolute; bottom: 0; left: 0; right: 0; padding: 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } body.chq .gallery-hero-label{ font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 200; color: #fff; letter-spacing: -0.035em; line-height: 1.05; } body.chq .gallery-hero-label strong{ font-weight: 700 } body.chq .gallery-grid{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 260px 260px 280px; gap: 3px; } body.chq .g-item{ position: relative; overflow: hidden; background: var(--dark-2) } body.chq .g-item img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); transition: transform 0.8s var(--ease), filter 0.5s } body.chq .g-item:hover img{ transform: scale(1.07); filter: brightness(1) } body.chq .g-item:nth-child(1){ grid-column: 1/3; grid-row: 1/3 } body.chq .g-item:nth-child(1) img{ filter: brightness(0.85) } body.chq .g-label{ position: absolute; bottom: 14px; left: 14px; background: rgba(18, 17, 26, 0.6); backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.85); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12); } /* ═══════════════════════════════════════════════════════════════ AMENITIES — IMAGE FIRST, GLASS CARDS ═══════════════════════════════════════════════════════════════ */body.chq .amenities-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px } body.chq .amenity-card{ border-radius: var(--r); overflow: hidden; background: var(--glass-card); border: 1px solid var(--border); backdrop-filter: blur(16px); box-shadow: var(--shadow-card); transition: all var(--t); cursor: default; display: flex; flex-direction: column; } body.chq .amenity-card:hover{ transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 60px rgba(107, 47, 160, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.8) } body.chq .amenity-img{ aspect-ratio: 4/3; overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(107, 47, 160, 0.08), rgba(155, 93, 229, 0.06)); } body.chq .amenity-img img{ transition: transform 0.75s var(--ease) } body.chq .amenity-card:hover .amenity-img img{ transform: scale(1.07) } body.chq .amenity-icon-placeholder{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } body.chq .amenity-icon-circle{ width: 56px; height: 56px; border-radius: 50%; background: rgba(107, 47, 160, 0.1); border: 1.5px solid rgba(107, 47, 160, 0.2); display: flex; align-items: center; justify-content: center; } body.chq .amenity-icon-circle svg{ color: var(--p) } body.chq .amenity-icon-text{ font-size: 0.6875rem; font-weight: 500; color: var(--tl); letter-spacing: 0.08em; text-transform: uppercase } body.chq .amenity-body{ padding: 18px 18px 22px; flex: 1 } body.chq .amenity-title{ font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem; color: var(--tx); margin-bottom: 6px; letter-spacing: -0.01em } body.chq .amenity-desc{ font-size: 0.8125rem; color: var(--tm); line-height: 1.68; font-weight: 300 } /* ═══════════════════════════════════════════════════════════════ WHY SECTOR 8 ═══════════════════════════════════════════════════════════════ */body.chq .why-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start } body.chq .why-points{ display: flex; flex-direction: column; gap: 14px; margin-top: 36px } body.chq .why-pt{ display: flex; gap: 16px; padding: 20px; border-radius: var(--r); background: var(--glass-card); border: 1px solid var(--border); backdrop-filter: blur(16px); box-shadow: var(--shadow-card); transition: all var(--t); } body.chq .why-pt:hover{ transform: translateX(6px); box-shadow: 0 8px 32px rgba(107, 47, 160, 0.12), 0 0 0 1px rgba(107, 47, 160, 0.2); border-color: rgba(107, 47, 160, 0.2) } body.chq .why-icon{ width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: rgba(107, 47, 160, 0.08); border: 1px solid rgba(107, 47, 160, 0.14); display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background 0.3s, border-color 0.3s; } body.chq .why-pt:hover .why-icon{ background: rgba(107, 47, 160, 0.14); border-color: rgba(107, 47, 160, 0.25) } body.chq .why-icon svg{ color: var(--p) } body.chq .why-pt-title{ font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--tx); margin-bottom: 4px } body.chq .why-pt-desc{ font-size: 0.8125rem; color: var(--tm); line-height: 1.65; font-weight: 300 } body.chq .map-card{ border-radius: var(--rl); overflow: hidden; background: var(--glass-card); border: 1px solid var(--border); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); } body.chq .map-card iframe{ width: 100%; height: 340px; border: none; display: block } body.chq .map-card-foot{ padding: 22px 24px; display: flex; align-items: flex-start; gap: 14px; background: rgba(255, 255, 255, 0.85); border-top: 1px solid var(--border-light); } body.chq .map-icon{ width: 36px; height: 36px; background: rgba(107, 47, 160, 0.08); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px } body.chq .map-icon svg{ color: var(--p) } body.chq .map-addr{ font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--tx); margin-bottom: 3px } body.chq .map-detail{ font-size: 0.8125rem; color: var(--tm); line-height: 1.6; font-weight: 300 } /* ═══════════════════════════════════════════════════════════════ ENTERPRISE BANNER — FULL PHOTO ═══════════════════════════════════════════════════════════════ */body.chq #enterprise{ position: relative; overflow: hidden; margin: 108px 0; } body.chq .ent-banner{ border-radius: var(--rxl); overflow: hidden; position: relative; min-height: 420px; display: flex; align-items: center; } body.chq .ent-banner-photo{ position: absolute; inset: 0; z-index: 0 } body.chq .ent-banner-photo img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6) } body.chq .ent-banner-overlay{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(18, 17, 26, 0.85) 0%, rgba(18, 17, 26, 0.4) 60%, transparent 100%); } body.chq .ent-banner-inner{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; padding: 64px 72px } body.chq .ent-banner-title{ font-family: 'Outfit', sans-serif; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 200; color: #fff; margin-bottom: 14px; letter-spacing: -0.03em; line-height: 1.1; } body.chq .ent-banner-title strong{ font-weight: 700 } body.chq .ent-banner-sub{ font-size: 1rem; color: rgba(255, 255, 255, 0.62); line-height: 1.75; font-weight: 300; max-width: 480px; margin-bottom: 0 } body.chq .ent-banner-pills{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px } body.chq .ent-banner-pill{ background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.85); font-size: 0.8125rem; font-weight: 400; padding: 5px 16px; border-radius: 100px; backdrop-filter: blur(8px); } body.chq .ent-banner-actions{ display: flex; flex-direction: column; gap: 12px; align-items: center; flex-shrink: 0 } /* ═══════════════════════════════════════════════════════════════ TESTIMONIALS ═══════════════════════════════════════════════════════════════ */body.chq .testi-overflow{ overflow: hidden; margin-top: 56px; position: relative } body.chq .testi-overflow::before, body.chq .testi-overflow::after{ content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none } body.chq .testi-overflow::before{ left: 0; background: linear-gradient(to right, var(--bg), transparent) } body.chq .testi-overflow::after{ right: 0; background: linear-gradient(to left, var(--bg), transparent) } body.chq .testi-track{ display: flex; gap: 18px; animation: tscroll 40s linear infinite; width: max-content } body.chq .testi-track:hover{ animation-play-state: paused } @keyframes tscroll{ 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } } body.chq .testi-card{ width: 330px; flex-shrink: 0; padding: 26px 24px; border-radius: var(--rl); background: var(--glass-card); border: 1px solid var(--border); backdrop-filter: blur(16px); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 16px; transition: all var(--t); } body.chq .testi-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 50px rgba(107, 47, 160, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.8) } body.chq .stars{ display: flex; gap: 3px; color: #F59E0B } body.chq .testi-text{ font-size: 0.9375rem; color: var(--tm); line-height: 1.78; font-weight: 300; font-style: italic; flex: 1 } body.chq .testi-author{ display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border-light); padding-top: 16px } body.chq .testi-avatar{ width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--p), var(--pl)); display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9rem; color: #fff; } body.chq .testi-name{ font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--tx) } body.chq .testi-role{ font-size: 0.75rem; color: var(--tl); font-weight: 300 } /* ═══════════════════════════════════════════════════════════════ CONTACT ═══════════════════════════════════════════════════════════════ */body.chq .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center } body.chq .contact-check-list{ display: flex; flex-direction: column; gap: 16px; margin-top: 36px } body.chq .contact-check-item{ display: flex; align-items: center; gap: 16px } body.chq .cc-icon{ width: 26px; height: 26px; border-radius: 50%; background: rgba(107, 47, 160, 0.08); border: 1px solid rgba(107, 47, 160, 0.2); box-shadow: 0 0 12px rgba(107, 47, 160, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.chq .cc-icon svg{ color: var(--p) } body.chq .cc-text{ font-size: 1rem; color: var(--tx); line-height: 1.5; font-weight: 400 } body.chq .contact-links{ display: flex; flex-direction: column; gap: 12px; margin-top: 40px } body.chq .contact-link-card{ display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 20px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } body.chq .contact-link-card:hover{ transform: translateX(8px) translateY(-2px); box-shadow: 0 16px 40px rgba(107, 47, 160, 0.1), 0 0 0 1px rgba(107, 47, 160, 0.15); border-color: transparent; } body.chq .cl-icon{ width: 48px; height: 48px; border-radius: 14px; background: rgba(107, 47, 160, 0.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.4s; } body.chq .contact-link-card:hover .cl-icon{ background: var(--p); transform: rotate(-5deg) scale(1.05) } body.chq .cl-icon svg{ color: var(--p); transition: inherit } body.chq .contact-link-card:hover .cl-icon svg{ color: #ffffff } body.chq .cl-title{ font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.0625rem; color: var(--tx) } body.chq .cl-sub{ font-size: 0.8125rem; color: var(--tl); font-weight: 300; margin-top: 2px } /* Form */body.chq .form-wrap{ border-radius: 28px; overflow: hidden; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 32px 80px rgba(10, 9, 20, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; padding: 48px 42px; position: relative; } body.chq .form-wrap::before{ content: ''; position: absolute; top: -50%; right: -50%; width: 150%; height: 150%; background: radial-gradient(circle at top right, rgba(107, 47, 160, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } body.chq .form-wrap>*{ position: relative; z-index: 1 } body.chq .form-ttl{ font-family: 'Outfit', sans-serif; font-size: 1.625rem; font-weight: 700; color: var(--tx); margin-bottom: 6px; letter-spacing: -0.015em } body.chq .form-sub{ font-size: 0.9375rem; color: var(--tl); margin-bottom: 32px; font-weight: 300 } body.chq .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px } body.chq .form-group{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px } body.chq .form-group label{ font-size: 0.75rem; font-weight: 600; color: var(--tx); letter-spacing: 0.04em; text-transform: uppercase } body.chq .form-ctrl{ background: #F9F9FB; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 14px 16px; font-family: 'Manrope', sans-serif; font-size: 0.9375rem; font-weight: 400; color: var(--tx); transition: all 0.3s; width: 100%; outline: none; } body.chq .form-ctrl::placeholder{ color: var(--tl) } body.chq .form-ctrl:focus{ border-color: var(--p); background: #ffffff; box-shadow: 0 0 0 4px rgba(107, 47, 160, 0.08), 0 8px 16px rgba(0, 0, 0, 0.03) } body.chq select.form-ctrl{ cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1L5.5 6L10 1' stroke='%238A87A8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; background-color: #F9F9FB } body.chq select.form-ctrl:focus{ background-color: #ffffff } body.chq select.form-ctrl option{ background: #fff; color: var(--tx) } body.chq textarea.form-ctrl{ resize: vertical; min-height: 80px } body.chq .radio-row{ display: flex; gap: 8px; flex-wrap: wrap } body.chq .radio-opt input[type="radio"]{ display: none } body.chq .radio-opt label{ display: flex; align-items: center; justify-content: center; padding: 10px 18px; background: #F9F9FB; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 10px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.25s; color: var(--tm); } body.chq .radio-opt input:checked+label{ background: var(--p); border-color: var(--p); color: #fff; box-shadow: 0 4px 12px rgba(107, 47, 160, 0.25) } body.chq .radio-opt label:hover{ border-color: var(--p); color: var(--p) } body.chq .form-submit{ width: 100%; justify-content: center; font-size: 0.9375rem; padding: 16px; border-radius: 12px; margin-top: 8px; background: var(--p); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 600; border: none; cursor: pointer; transition: all 0.35s var(--ease); box-shadow: 0 8px 24px rgba(107, 47, 160, 0.3); display: flex; align-items: center; gap: 8px; } body.chq .form-submit:hover{ background: var(--pm); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(107, 47, 160, 0.45) } body.chq .form-note{ font-size: 0.6875rem; color: var(--tl); text-align: center; margin-top: 14px; font-weight: 300 } body.chq .form-note a{ color: var(--p) } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */body.chq footer{ background: var(--dark); border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 72px 0 0; } body.chq .footer-grid{ display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px } body.chq .f-logo{ display: flex; align-items: center; gap: 9px; margin-bottom: 18px } body.chq .f-logo img{ height: 34px; width: auto; object-fit: contain; filter: brightness(10) saturate(0) } body.chq .f-logo-text{ font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.0625rem; color: #fff } body.chq .f-logo-text span{ color: var(--pl) } body.chq .f-desc{ font-size: 0.875rem; color: rgba(255, 255, 255, 0.38); line-height: 1.8; max-width: 260px; margin-bottom: 24px; font-weight: 300 } body.chq .f-contact{ display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; transition: color 0.2s; font-weight: 300 } body.chq .f-contact svg{ color: var(--pl); flex-shrink: 0 } body.chq .f-contact:hover{ color: rgba(255, 255, 255, 0.85) } body.chq .f-col-title{ font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.8125rem; color: #fff; margin-bottom: 18px; letter-spacing: 0.03em; text-transform: uppercase } body.chq .f-links{ display: flex; flex-direction: column; gap: 11px } body.chq .f-links a{ font-size: 0.875rem; color: rgba(255, 255, 255, 0.4); transition: color 0.2s; font-weight: 300 } body.chq .f-links a:hover{ color: var(--pl) } body.chq .footer-bottom{ border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px } body.chq .f-copy{ font-size: 0.8125rem; color: rgba(255, 255, 255, 0.25); font-weight: 300 } body.chq .f-socials{ display: flex; gap: 8px } body.chq .f-social{ width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.35); transition: all 0.25s } body.chq .f-social:hover{ border-color: var(--pl); color: var(--pl); background: rgba(155, 93, 229, 0.1) } /* ═══════════════════════════════════════════════════════════════ STICKY MOBILE ═══════════════════════════════════════════════════════════════ */body.chq .sticky-cta{ display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 998; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(20px); border-top: 1px solid var(--border-light); padding: 12px 20px; gap: 10px; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06); } body.chq .sticky-cta .btn{ flex: 1; justify-content: center; padding: 12px; font-size: 0.875rem } /* ═══════════════════════════════════════════════════════════════ SCROLL REVEAL ═══════════════════════════════════════════════════════════════ */body.chq .rv{ opacity: 0; transform: translateY(48px) scale(0.98); filter: blur(4px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) } body.chq .rv.in{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0) } body.chq .d1{ transition-delay: 0.08s } body.chq .d2{ transition-delay: 0.16s } body.chq .d3{ transition-delay: 0.24s } body.chq .d4{ transition-delay: 0.32s } body.chq .d5{ transition-delay: 0.40s } body.chq .d6{ transition-delay: 0.48s } body.chq .d7{ transition-delay: 0.56s } body.chq .d8{ transition-delay: 0.64s } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */@media(max-width:1024px){body.chq .hero-card{ display: none } body.chq .spaces-grid{ grid-template-columns: 1fr 1fr } body.chq .amenities-grid{ grid-template-columns: 1fr 1fr } body.chq .why-grid{ grid-template-columns: 1fr; gap: 48px } body.chq .contact-grid{ grid-template-columns: 1fr; gap: 48px } body.chq .footer-grid{ grid-template-columns: 1fr 1fr } body.chq .ent-card{ grid-template-columns: 1fr } body.chq .gallery-grid{ grid-template-columns: repeat(2, 1fr) } body.chq .g-item:nth-child(1){ grid-column: 1/3; grid-row: 1 }} @media(max-width:768px){body.chq .section{ padding: 92px 0 } body.chq .nav-links, body.chq .nav-phone{ display: none } body.chq .hamburger{ display: flex } body.chq #hero{ height: 100svh; min-height: 600px } body.chq .hero-content{ padding: 0 0 52px } body.chq .hero-title{ font-size: 2.5rem; letter-spacing: -0.025em } body.chq .hero-stats{ flex-wrap: wrap } body.chq .hero-stat{ flex: 1 1 40% } body.chq .spaces-grid{ grid-template-columns: 1fr; gap: 24px } body.chq .ent-card{ grid-template-columns: 1fr } body.chq .gallery-hero-content{ padding: 36px } body.chq .gallery-hero-label{ font-size: 2rem } body.chq .gallery-grid{ grid-template-columns: 1fr 1fr } body.chq .g-item:nth-child(1){ grid-column: 1/-1 } body.chq .amenities-grid{ grid-template-columns: 1fr 1fr; gap: 12px } body.chq .spaces-header{ flex-direction: column; align-items: flex-start } body.chq .ent-banner-inner{ flex-direction: column; padding: 40px 28px } body.chq .ent-banner-actions{ flex-direction: row; flex-wrap: wrap; width: 100% } body.chq .ent-banner-actions .btn{ flex: 1; justify-content: center } body.chq .footer-grid{ grid-template-columns: 1fr; gap: 32px } body.chq .sticky-cta{ display: flex } body.chq{ padding-bottom: 68px } body.chq .ent-body{ padding: 28px }} @media(max-width:480px){body.chq .hero-title{ font-size: 2.25rem } body.chq .amenities-grid{ grid-template-columns: 1fr } body.chq .gallery-grid{ grid-template-columns: 1fr } body.chq .g-item:nth-child(1){ grid-column: auto; grid-row: auto } body.chq .form-row{ grid-template-columns: 1fr }} /* Hero Carousel Animations */body.chq .carousel-bg{ position: absolute; inset: 0; z-index: 1; } body.chq .carousel-slide{ position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: heroCarousel 35s infinite linear; } body.chq .carousel-slide:nth-child(1){ animation-delay: 0s; } body.chq .carousel-slide:nth-child(2){ animation-delay: 5s; } body.chq .carousel-slide:nth-child(3){ animation-delay: 10s; } body.chq .carousel-slide:nth-child(4){ animation-delay: 15s; } body.chq .carousel-slide:nth-child(5){ animation-delay: 20s; } body.chq .carousel-slide:nth-child(6){ animation-delay: 25s; } body.chq .carousel-slide:nth-child(7){ animation-delay: 30s; } @keyframes heroCarousel{ 0% { opacity: 0; transform: scale(1); } 5% { opacity: 1; } 14.28% { opacity: 1; } 19.28% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.1); } } /* ═══════════════════════════════════════════════════════════════ LEGACY ESCAPE HATCHES ─────────────────────────────────────────────────────────────── The site-wide enquiry modal (#exampleModalCenter / #enquire_modal_form) is Bootstrap markup driven by jQuery Validate and enquiry-form.js. It is deliberately NOT re-authored in theme markup, because its field names, the City->Area cascade, the desk steppers and the legacy `location` value are what connecthqEmail.php and the CRM consume. On a themed page the theme's own `.btn` / `.container` rules would otherwise restyle that modal, so the modal subtree opts back out here. Specificity is raised with the #id + .modal ancestor, which beats `body.chq .btn`. ═══════════════════════════════════════════════════════════════ */ /* Bootstrap owns layout inside any legacy modal on a themed page. */ body.chq .modal .container, body.chq .modal .container-fluid{max-width:none;padding-left:15px;padding-right:15px} /* Let Bootstrap's grid behave: the theme sets no .row/.col rules, but the scoped box-sizing/margin resets above must not strip gutters. */ body.chq .modal .row{margin-left:-15px;margin-right:-15px} /* Buttons inside legacy modals keep the old flat look rather than the theme's pill CTA, so the modal reads as one consistent form. */ body.chq .modal .btn{ display:inline-block;border-radius:2px;padding:10px 22px; font-family:'Inter',sans-serif;font-weight:500;letter-spacing:0; } body.chq .modal .btn-primary{box-shadow:none;transform:none} body.chq .modal .btn-primary:hover{transform:none;box-shadow:none} /* Form controls in legacy modals are Bootstrap's, not the theme's .form-ctrl. */ body.chq .modal .form-control{width:100%;display:block} /* jQuery Validate's error labels and the submit overlay are injected outside the theme's class system — keep them visible and above the modal. */ body.chq label.error{display:block;color:#cc1b24;font-size:13px;margin-top:4px;font-weight:400} body.chq .form_submit_overlay{z-index:100001} /* The enquiry failure popup (built in enquiry-form.js) sits above everything. */ body.chq .enquiry-error-overlay{z-index:100002} /* Images inside legacy widgets (Owl, Juicer, Elfsight, Bootstrap modals) must keep their intrinsic sizing — the theme's cover-fill rule would crop them. */ body.chq .modal img, body.chq .owl-carousel img, body.chq .juicer-feed img, body.chq [class*="elfsight"] img{width:auto;height:auto;max-width:100%;object-fit:initial} /* Utility: force any element out of the theme's image treatment. */ body.chq img.no-chq-img{width:auto;height:auto;object-fit:initial} /* Offscreen marquee/testimonial tracks are paused by theme.js via this class, so the CSS :hover pause above keeps working (an inline style would beat it). */ body.chq .marquee-track.chq-paused, body.chq .testi-track.chq-paused{animation-play-state:paused} /* ═══════════════════════════════════════════════════════════════ NAV DROPDOWNS ─────────────────────────────────────────────────────────────── Added for the full site (the single-page prototype had only hash links). The live site's IA nests Locations and Book Space two levels deep, so the desktop nav needs real submenus. Opened on hover AND on click/focus: hover alone is unreachable by keyboard and unusable on a touch-screen laptop. theme.js manages the click/focus state and aria-expanded; the :hover rule is CSS-only so it works before JS. ═══════════════════════════════════════════════════════════════ */ body.chq .nav-drop{position:relative} body.chq .nav-drop-btn{ display:inline-flex;align-items:center;gap:5px; font-family:'Inter',sans-serif;font-size:0.875rem;font-weight:400; color:var(--tm);padding:6px 14px;border-radius:8px;transition:all 0.25s; letter-spacing:0.01em; } body.chq .nav-drop-btn svg{transition:transform 0.25s var(--ease);flex-shrink:0} body.chq .nav-drop-btn:hover{color:var(--p);background:rgba(107,47,160,0.07)} body.chq .nav-drop:hover .nav-drop-btn svg, body.chq .nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)} body.chq #nav.hero-overlap .nav-drop-btn{color:rgba(255,255,255,0.85)} body.chq #nav.hero-overlap .nav-drop-btn:hover{color:#fff;background:rgba(255,255,255,0.12)} body.chq .nav-drop-menu{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px); min-width:210px;padding:10px;border-radius:var(--r); background:rgba(255,255,255,0.95); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid var(--border-light); box-shadow:0 12px 48px rgba(107,47,160,0.16); display:flex;flex-direction:column;gap:1px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity 0.25s var(--ease),transform 0.25s var(--ease),visibility 0.25s; z-index:1001; } body.chq .nav-drop:hover .nav-drop-menu, body.chq .nav-drop.open .nav-drop-menu{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0); } /* Bridges the 10px gap so the menu doesn't close while the pointer crosses it. */ body.chq .nav-drop-menu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px} /* Always dark text — this menu is white even when the nav is transparent. */ body.chq #nav .nav-drop-menu a, body.chq #nav.hero-overlap .nav-drop-menu a{ color:var(--tm);font-size:0.875rem;padding:8px 12px;border-radius:8px;background:none; } body.chq #nav .nav-drop-menu a:hover, body.chq #nav.hero-overlap .nav-drop-menu a:hover{color:var(--p);background:rgba(107,47,160,0.07)} body.chq .nav-drop-label{ font-size:0.625rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase; color:var(--tl);padding:9px 12px 4px; } body.chq .nav-drop-label:first-child{padding-top:2px} /* Current page marker, set by partials/sync.php. */ body.chq #nav .nav-links a[aria-current="page"]{color:var(--p);background:rgba(107,47,160,0.09);font-weight:500} body.chq #nav.hero-overlap .nav-links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,0.16)} body.chq .mobile-menu a[aria-current="page"]{color:var(--p);font-weight:500} /* ═══════════════════════════════════════════════════════════════ MOBILE MENU — section labels + scroll ═══════════════════════════════════════════════════════════════ */ body.chq .mob-label{ font-size:0.625rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase; color:var(--tl);padding:14px 0 4px; } body.chq .mob-label:first-child{padding-top:0} /* The full site menu is far longer than the prototype's 6 links — it must scroll rather than run off the bottom of the viewport. */ body.chq .mobile-menu{max-height:calc(100vh - 66px);overflow-y:auto;-webkit-overflow-scrolling:touch} body.chq .mobile-menu a{padding:11px 0} /* ═══════════════════════════════════════════════════════════════ STICKY MOBILE CTA — call / whatsapp / book ═══════════════════════════════════════════════════════════════ */ body.chq .sticky-cta .sticky-call{ background:transparent;border:1.5px solid rgba(0,0,0,0.1);color:var(--tx); flex:0 0 auto;padding:12px 20px; } body.chq .sticky-cta .sticky-wa{ background:#25D366;color:#fff;flex:0 0 auto;padding:12px 16px; } body.chq .sticky-cta .sticky-book{flex:1;justify-content:center} /* ═══════════════════════════════════════════════════════════════ NAV FIT ─────────────────────────────────────────────────────────────── The prototype nav had 5 hash links; the real site nav carries 6 items (two of them dropdowns) plus the phone number and CTA. At 1160px that overflows and wraps, so tighten the rhythm and let the links shrink before the actions do. ═══════════════════════════════════════════════════════════════ */ body.chq .nav-inner{gap:14px} body.chq .nav-links{gap:0;min-width:0;flex-wrap:nowrap} body.chq .nav-links a, body.chq .nav-drop-btn{padding:6px 10px;white-space:nowrap} /* Between 769px and 1100px there is not enough room for the phone number alongside a 6-item nav — drop it first, keep the links and the CTA. */ @media (max-width:1100px){ body.chq .nav-phone{display:none} body.chq .nav-links a, body.chq .nav-drop-btn{padding:6px 8px;font-size:0.8125rem} } /* Below 900px the link row itself no longer fits: hand over to the hamburger early rather than letting it collide with the CTA. */ @media (max-width:900px){ body.chq .nav-links{display:none} body.chq .hamburger{display:flex} } /* ═══════════════════════════════════════════════════════════════ FORM VALIDATION + SUBMIT STATES ─────────────────────────────────────────────────────────────── The prototype signalled errors by setting el.style.borderColor inline, which left no room for a message and could not be cleared by CSS. These classes replace that: theme.js toggles .is-invalid and injects .form-err text. ═══════════════════════════════════════════════════════════════ */ body.chq .form-ctrl.is-invalid{ border-color:#EF4444; background:rgba(254,242,242,0.6); } body.chq .form-ctrl.is-invalid:focus{ border-color:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,0.12); } body.chq .form-err{ display:block;margin-top:5px; font-size:0.75rem;font-weight:400;color:#DC2626;line-height:1.45; } /* Radio group: tint the pills rather than a border, since they have no box. */ body.chq .radio-row.is-invalid label{border-color:#EF4444;color:#DC2626} /* Submit button states */ body.chq .form-submit[disabled]{opacity:0.62;cursor:not-allowed} body.chq .form-submit .spin{animation:chqSpin 0.8s linear infinite;transform-origin:center} @keyframes chqSpin{to{transform:rotate(360deg)}} /* Server-level failure notice (endpoint unreachable / 500). Distinct from a per-field error: the input was fine, the send was not. */ body.chq .form-alert{ display:flex;gap:10px;align-items:flex-start; padding:12px 14px;margin-bottom:16px;border-radius:12px; background:rgba(254,242,242,0.9);border:1px solid rgba(239,68,68,0.28); font-size:0.8125rem;line-height:1.55;color:#991B1B; } body.chq .form-alert svg{flex-shrink:0;margin-top:2px;color:#DC2626} body.chq .form-alert a{color:#991B1B;font-weight:600;text-decoration:underline} /* Success panel. Given role="status" in the markup so screen readers announce it when the form is swapped out. */ body.chq .form-success{text-align:center;padding:30px 4px} body.chq .form-success-icon{ width:52px;height:52px;margin:0 auto 16px;border-radius:50%; background:#F0FDF4;border:2px solid #BBF7D0; display:flex;align-items:center;justify-content:center; } body.chq .form-success-title{ font-family:'Outfit',sans-serif;font-weight:700;font-size:1.125rem; color:var(--tx);margin-bottom:6px; } body.chq .form-success-text{font-size:0.875rem;color:var(--tm);font-weight:300} body.chq .form-success-ref{ display:inline-block;margin-top:14px;padding:6px 12px;border-radius:100px; background:rgba(107,47,160,0.08);border:1px solid rgba(107,47,160,0.18); font-size:0.75rem;color:var(--p);font-weight:500;letter-spacing:0.02em; } /* ═══════════════════════════════════════════════════════════════ SUBMIT RESULT POPUP ─────────────────────────────────────────────────────────────── Shown after every form submit, site-wide — themed forms and the legacy jQuery ones alike. It replaces the old "redirect to thankyou.html on success, inline popup on failure" split, so the outcome is reported the same way everywhere and the visitor keeps their place on the page. Deliberately NOT scoped to body.chq: the legacy pages (contact, book-*, virtual-office) have no .chq class and need this too. ═══════════════════════════════════════════════════════════════ */ .chq-modal{ position:fixed;inset:0;z-index:100050;display:none; align-items:center;justify-content:center;padding:20px; background:rgba(10,8,20,0.55); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;transition:opacity 0.28s cubic-bezier(0.16,1,0.3,1); } .chq-modal.open{display:flex;opacity:1} .chq-modal-box{ position:relative;width:100%;max-width:410px; background:#fff;border-radius:22px;padding:34px 28px 26px;text-align:center; box-shadow:0 24px 80px rgba(12,8,30,0.32); transform:translateY(14px) scale(0.97); transition:transform 0.32s cubic-bezier(0.16,1,0.3,1); font-family:'Manrope',system-ui,-apple-system,sans-serif; } .chq-modal.open .chq-modal-box{transform:translateY(0) scale(1)} .chq-modal-icon{ width:58px;height:58px;margin:0 auto 18px;border-radius:50%; display:flex;align-items:center;justify-content:center; } .chq-modal--ok .chq-modal-icon{background:#F0FDF4;border:2px solid #BBF7D0;color:#16A34A} .chq-modal--fail .chq-modal-icon{background:#FEF2F2;border:2px solid #FECACA;color:#DC2626} .chq-modal-title{ font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:1.25rem; color:#1A1828;margin:0 0 8px;line-height:1.25; } .chq-modal-text{font-size:0.9rem;line-height:1.6;color:#4A4768;margin:0;font-weight:400} .chq-modal-text a{color:#6B2FA0;font-weight:600;text-decoration:underline} .chq-modal-ref{ display:inline-block;margin-top:15px;padding:6px 13px;border-radius:100px; background:rgba(107,47,160,0.08);border:1px solid rgba(107,47,160,0.18); font-size:0.75rem;color:#6B2FA0;font-weight:600;letter-spacing:0.02em; } .chq-modal-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px} .chq-modal-btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:11px 20px;border-radius:100px;font-size:0.875rem;font-weight:600; font-family:'Outfit',system-ui,sans-serif;cursor:pointer;border:none; transition:transform 0.2s,box-shadow 0.2s,background 0.2s;flex:1 1 auto;min-width:120px; text-decoration:none; } /* `body.chq button{background:none}` in the theme reset has specificity (0,1,1) and would otherwise strip these fills, leaving an empty white pill. The .chq-modal prefix raises these to (0,2,0) so they win on themed pages, while staying unscoped for legacy pages that have no .chq class. */ .chq-modal .chq-modal-btn--primary{background:#6B2FA0;color:#fff;box-shadow:0 4px 18px rgba(107,47,160,0.32)} .chq-modal .chq-modal-btn--primary:hover{background:#7C3DB5;color:#fff;transform:translateY(-1px)} .chq-modal .chq-modal-btn--wa{background:#25D366;color:#fff} .chq-modal .chq-modal-btn--ghost{background:transparent;color:#4A4768;border:1.5px solid rgba(0,0,0,0.12)} .chq-modal .chq-modal-close{background:none;color:#8A87A8} .chq-modal-btn--wa{background:#25D366;color:#fff} .chq-modal-btn--wa:hover{color:#fff;transform:translateY(-1px)} .chq-modal-btn--ghost{background:transparent;color:#4A4768;border:1.5px solid rgba(0,0,0,0.12)} .chq-modal-btn--ghost:hover{border-color:#6B2FA0;color:#6B2FA0} .chq-modal-close{ position:absolute;top:12px;right:14px;width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:22px;line-height:1;color:#8A87A8;background:none;border:none;cursor:pointer; } .chq-modal-close:hover{background:rgba(0,0,0,0.05);color:#1A1828} @media (max-width:480px){ .chq-modal-box{padding:30px 20px 22px;border-radius:18px} .chq-modal-actions{flex-direction:column} .chq-modal-btn{width:100%} } @media (prefers-reduced-motion:reduce){ .chq-modal,.chq-modal-box{transition:none} } /* ═══════════════════════════════════════════════════════════════ HERO DARK FORM — contrast fix ─────────────────────────────────────────────────────────────── V2's own stylesheet defines `.hero-dark-form label` BEFORE the generic `.form-group label { color: var(--tx) }`, so on equal specificity the generic near-black wins and the hero form's labels render almost invisible against the dark glass card. Fixed by specificity rather than by reordering, so regenerating this file from the V2 source keeps the fix. ═══════════════════════════════════════════════════════════════ */ body.chq #hero .hero-dark-form label, body.chq .hero-dark-form .form-group label{ color:rgba(255,255,255,0.88); text-shadow:none; } /* The required-marker and helper text need the same treatment. */ body.chq #hero .hero-dark-form .form-sub, body.chq #hero .hero-dark-form .form-note{color:rgba(255,255,255,0.6)} body.chq #hero .hero-dark-form .form-ttl{color:#fff} /* Validation messages must stay legible on the dark card too. */ body.chq #hero .hero-dark-form .form-err{color:#FCA5A5} body.chq #hero .hero-dark-form .form-ctrl.is-invalid{ border-color:#F87171; background:rgba(248,113,113,0.12); } /* ═══════════════════════════════════════════════════════════════ INNER PAGES — page hero + content blocks ─────────────────────────────────────────────────────────────── The V2 source only ships a homepage and location pages, both of which use a full-bleed photo hero. The content pages (about, contact, solutions) need a shorter header that clears the fixed 66px nav without a hero photo behind it. ═══════════════════════════════════════════════════════════════ */ body.chq .page-hero{ position:relative;padding:146px 0 62px; background:linear-gradient(160deg,#1A1828 0%,#2A1D45 55%,#3D2463 100%); overflow:hidden; } body.chq .page-hero::after{ content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px; border-radius:50%;background:radial-gradient(circle,rgba(155,93,229,0.28),transparent 68%); pointer-events:none; } body.chq .page-hero .container{position:relative;z-index:1} body.chq .page-hero .section-tag{ color:#D9C7F5;background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2); } body.chq .page-hero .section-tag::before{background:var(--pl)} body.chq .page-hero-title{ font-family:'Outfit',sans-serif;font-weight:300;color:#fff; font-size:clamp(2rem,3.6vw,3.1rem);letter-spacing:-0.03em;line-height:1.1;margin-bottom:12px; } body.chq .page-hero-title strong{font-weight:700} body.chq .page-hero-sub{ color:rgba(255,255,255,0.72);font-size:1.02rem;font-weight:300; line-height:1.75;max-width:620px; } body.chq .crumb{ display:flex;gap:8px;align-items:center;flex-wrap:wrap; margin-top:18px;font-size:0.8125rem;color:rgba(255,255,255,0.55); } body.chq .crumb a:hover{color:#fff} body.chq .crumb span{opacity:0.45} /* Prose block — long-form copy (about, legal pages). */ body.chq .prose{max-width:760px} body.chq .prose h3{ font-family:'Outfit',sans-serif;font-weight:600;font-size:1.4rem; color:var(--tx);margin:34px 0 10px;letter-spacing:-0.015em; } body.chq .prose h3:first-child{margin-top:0} body.chq .prose p{color:var(--tm);font-size:1rem;line-height:1.85;margin-bottom:15px;font-weight:300} /* Icon/label grid — the facilities list. */ body.chq .fac-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px; } body.chq .fac-item{ display:flex;align-items:center;gap:13px; padding:16px 18px;border-radius:14px;background:#fff; border:1px solid var(--border-light); font-size:0.9375rem;font-weight:500;color:var(--tx); transition:transform var(--t-fast),box-shadow var(--t-fast); } body.chq .fac-item:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(107,47,160,0.1)} body.chq .fac-item img{width:34px;height:34px;object-fit:contain;flex-shrink:0} /* Contact detail cards. */ body.chq .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} body.chq .info-card{ padding:26px 24px;border-radius:var(--rl);background:#fff; border:1px solid var(--border-light);box-shadow:0 10px 30px rgba(0,0,0,0.04); } body.chq .info-card-icon{ width:42px;height:42px;border-radius:12px;margin-bottom:14px; background:rgba(107,47,160,0.08);color:var(--p); display:flex;align-items:center;justify-content:center; } body.chq .info-card-label{ font-size:0.6875rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase; color:var(--tl);margin-bottom:6px; } body.chq .info-card-value{font-size:0.9875rem;color:var(--tx);font-weight:500;line-height:1.6} body.chq .info-card-value a:hover{color:var(--p)} /* Map embed. */ body.chq .map-embed{ border-radius:var(--rl);overflow:hidden;border:1px solid var(--border-light); box-shadow:0 10px 30px rgba(0,0,0,0.05);line-height:0; } body.chq .map-embed iframe{width:100%;height:380px;border:0;display:block} @media (max-width:900px){ body.chq .fac-grid{grid-template-columns:repeat(2,1fr)} body.chq .info-grid{grid-template-columns:1fr} } @media (max-width:560px){ body.chq .page-hero{padding:122px 0 48px} body.chq .fac-grid{grid-template-columns:1fr} body.chq .map-embed iframe{height:300px} } /* ═══════════════════════════════════════════════════════════════ BTN-OUTLINE-DARK ─────────────────────────────────────────────────────────────── The V2 source only ships .btn-outline-light, for use on photo heroes. The content pages need the same shape on a light background — without this the class rendered as bare text with no border. ═══════════════════════════════════════════════════════════════ */ body.chq .btn-outline-dark{ background:transparent; border:1.5px solid rgba(0,0,0,0.14); color:var(--tx); } body.chq .btn-outline-dark:hover{ border-color:var(--p);color:var(--p); background:rgba(107,47,160,0.04); transform:translateY(-2px); }