/* ========================================================= NORTH CRESCENT CLEANING CONCIERGE Dedicated stylesheet for cleaning-concierge.html ========================================================= */ /* ========================================================= NORTH CRESCENT CLEANING CONCIERGE Dedicated stylesheet for cleaning-concierge.html ========================================================= */ html:has(body[data-page="cleaning-concierge"]){ background:#EEF3F6; } body[data-page="cleaning-concierge"]{ --nc-navy:#1E3A5F; --nc-dark:#142A45; --nc-deep:#0D1F33; --nc-teal:#4A9B8C; --nc-teal-dark:#367D70; --nc-teal-soft:#EAF6F3; --nc-bg:#F7FAFC; --nc-surface:#FFFFFF; --nc-text:#1F2937; --nc-soft:#53657A; --nc-muted:#718096; --nc-border:#DDE6EC; --nc-shadow:0 18px 45px rgba(20,42,69,.10); --nc-shadow-soft:0 8px 24px rgba(20,42,69,.07); --nc-gradient:linear-gradient(135deg,#1E3A5F 0%,#4A9B8C 100%); --nc-radius:18px; width:min(100%,1280px); min-height:100vh; margin:0 auto; background:#fff; color:var(--nc-text); border-left:1px solid rgba(30,58,95,.10); border-right:1px solid rgba(30,58,95,.10); box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 12px 40px rgba(20,42,69,.08); } body[data-page="cleaning-concierge"] *, body[data-page="cleaning-concierge"] *::before, body[data-page="cleaning-concierge"] *::after{ box-sizing:border-box; } body[data-page="cleaning-concierge"] [hidden]{ display:none !important; } body[data-page="cleaning-concierge"] .container{ width:min(calc(100% - 40px),1240px); margin-inline:auto; } body[data-page="cleaning-concierge"] a{ color:inherit; } body[data-page="cleaning-concierge"] button, body[data-page="cleaning-concierge"] input, body[data-page="cleaning-concierge"] textarea{ font:inherit; } body[data-page="cleaning-concierge"] button{ cursor:pointer; } body[data-page="cleaning-concierge"] :focus-visible{ outline:3px solid rgba(74,155,140,.35); outline-offset:3px; } /* ========================================================= HEADER ========================================================= */ body[data-page="cleaning-concierge"] .site-header{ position:relative; z-index:100; background:rgba(255,255,255,.98); border-bottom:1px solid rgba(30,58,95,.08); box-shadow:0 3px 18px rgba(15,23,42,.04); } body[data-page="cleaning-concierge"] .header-inner{ min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; } body[data-page="cleaning-concierge"] .brand{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; } body[data-page="cleaning-concierge"] .brand-logo{ width:48px; height:48px; object-fit:contain; } body[data-page="cleaning-concierge"] .brand-text{ display:flex; flex-direction:column; line-height:1.1; } body[data-page="cleaning-concierge"] .brand-name{ color:var(--nc-navy); font-size:1rem; font-weight:700; } body[data-page="cleaning-concierge"] .brand-subtitle{ margin-top:3px; color:var(--nc-muted); font-size:.62rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; } /* ========================================================= MAIN NAVIGATION — PREMIUM HEADER ========================================================= */ body[data-page="cleaning-concierge"] .main-navigation{ display:flex; align-items:center; gap:5px; margin-left:auto; } /* --------------------------------------------------------- NAV LINKS --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .main-navigation > a{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 13px; color:#263449; font-size:.79rem; font-weight:650; letter-spacing:.005em; text-decoration:none; border:1px solid transparent; border-radius:11px; background:transparent; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; } /* --------------------------------------------------------- SUBTLE ACTIVE / HOVER ACCENT --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .main-navigation > a::after{ content:""; position:absolute; left:50%; bottom:5px; width:0; height:2px; border-radius:999px; background:linear-gradient( 90deg, #1E3A5F 0%, #4A9B8C 100% ); transform:translateX(-50%); opacity:0; transition: width .25s ease, opacity .25s ease; } body[data-page="cleaning-concierge"] .main-navigation > a:hover{ color:#1E3A5F; border-color:rgba(74,155,140,.14); background: linear-gradient( 180deg, rgba(74,155,140,.065) 0%, rgba(255,255,255,.72) 100% ); box-shadow: 0 4px 12px rgba(30,58,95,.045); transform:translateY(-1px); } body[data-page="cleaning-concierge"] .main-navigation > a:hover::after{ width:22px; opacity:1; } /* --------------------------------------------------------- CONTACT CTA --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .main-navigation .nav-cta{ position:relative; margin-left:10px; min-height:44px; padding:0 21px; color:#FFFFFF; font-weight:800; border:1px solid rgba(255,255,255,.24); border-radius:999px; background: linear-gradient( 135deg, #1E3A5F 0%, #285B70 55%, #4A9B8C 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 18px rgba(30,58,95,.13); overflow:hidden; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } body[data-page="cleaning-concierge"] .main-navigation .nav-cta::before{ content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100% ); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; } body[data-page="cleaning-concierge"] .main-navigation .nav-cta:hover{ color:#FFFFFF; transform:translateY(-2px); filter:brightness(1.03); box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 11px 24px rgba(30,58,95,.18), 0 0 18px rgba(74,155,140,.10); } body[data-page="cleaning-concierge"] .main-navigation .nav-cta:hover::before{ left:125%; } body[data-page="cleaning-concierge"] .mobile-menu-toggle span{ display:block; width:19px; height:2px; margin:4px auto; border-radius:2px; background:var(--nc-navy); } body[data-page="cleaning-concierge"] .mobile-menu-toggle{ display:none; } /* ========================================================= HERO ========================================================= */ body[data-page="cleaning-concierge"] .concierge-hero{ position:relative; padding:54px 0 48px; overflow:hidden; background: radial-gradient(circle at 8% 18%,rgba(74,155,140,.10),transparent 30%), radial-gradient(circle at 92% 8%,rgba(30,58,95,.09),transparent 28%), linear-gradient(180deg,#fff 0%,#F7FAFC 100%); border-bottom:1px solid rgba(30,58,95,.06); } body[data-page="cleaning-concierge"] .concierge-hero-grid{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; max-width:100%; margin:0 auto; } body[data-page="cleaning-concierge"] .concierge-hero-content{ max-width:760px; } body[data-page="cleaning-concierge"] .concierge-eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid rgba(74,155,140,.25); border-radius:999px; background:rgba(255,255,255,.75); color:var(--nc-teal-dark); font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; } body[data-page="cleaning-concierge"] .concierge-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--nc-teal); box-shadow:0 0 0 5px rgba(74,155,140,.10); } body[data-page="cleaning-concierge"] #conciergeHeroTitle{ margin:22px 0 0; max-width:820px; color:var(--nc-navy); font-size:clamp(2.5rem,5vw,4.6rem); line-height:1.02; letter-spacing:-.045em; font-weight:800; } body[data-page="cleaning-concierge"] .concierge-hero-description{ max-width:720px; margin:20px 0 0; color:var(--nc-soft); font-size:1rem; line-height:1.7; } body[data-page="cleaning-concierge"] .concierge-trust-points{ display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:22px; } body[data-page="cleaning-concierge"] .concierge-trust-item{ display:inline-flex; align-items:center; gap:7px; color:var(--nc-soft); font-size:.78rem; font-weight:500; } body[data-page="cleaning-concierge"] .trust-icon{ color:var(--nc-teal-dark); font-weight:800; } /* ========================================================= EMAIL GATE — PREMIUM CARD STEP 1 — MAIN SURFACE ========================================================= */ body[data-page="cleaning-concierge"] .concierge-entry-card{ position:relative; width:100%; max-width:920px; margin:0 auto; padding:34px 38px; border:1px solid rgba(30,58,95,.10); border-radius:28px; background: radial-gradient( circle at 8% 0%, rgba(74,155,140,.055), transparent 32% ), radial-gradient( circle at 94% 8%, rgba(30,58,95,.055), transparent 30% ), linear-gradient( 180deg, #FFFFFF 0%, #FCFDFE 58%, #F8FAFC 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 0 0 1px rgba(255,255,255,.65), 0 18px 45px rgba(20,42,69,.08), 0 35px 75px rgba(20,42,69,.055); overflow:hidden; isolation:isolate; } /* --------------------------------------------------------- PREMIUM CARD LIGHT --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-entry-card::before{ content:""; position:absolute; top:0; left:8%; right:8%; height:1px; background: linear-gradient( 90deg, transparent 0%, rgba(74,155,140,.18) 25%, rgba(255,255,255,.95) 50%, rgba(30,58,95,.12) 75%, transparent 100% ); pointer-events:none; } /* --------------------------------------------------------- PREMIUM CARD DEPTH --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-entry-card::after{ content:""; position:absolute; width:240px; height:240px; right:-150px; bottom:-165px; border-radius:50%; background: radial-gradient( circle, rgba(74,155,140,.075) 0%, rgba(74,155,140,.025) 38%, transparent 72% ); pointer-events:none; z-index:-1; } /* ========================================================= EMAIL GATE — PREMIUM TITLE FRAME ========================================================= */ body[data-page="cleaning-concierge"] .concierge-entry-title{ position:relative; display:block; width:100%; max-width:680px; margin:6px 0 0; padding:15px 20px 16px 22px; color:#1E3A5F; font-size:clamp(1.25rem, 2vw, 1.62rem); line-height:1.18; font-weight:800; letter-spacing:-.026em; text-wrap:balance; border:1px solid rgba(30,58,95,.11); border-left:3px solid #4A9B8C; border-radius:16px; background: linear-gradient( 135deg, rgba(255,255,255,.98) 0%, rgba(248,251,252,.96) 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 7px 18px rgba(20,42,69,.055); text-shadow: 0 1px 0 rgba(255,255,255,.95); transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; } /* --------------------------------------------------------- TITLE ACCENT --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-entry-title::before{ content:""; display:block; width:34px; height:3px; margin-bottom:9px; border-radius:999px; background: linear-gradient( 90deg, #4A9B8C 0%, #1E3A5F 100% ); box-shadow: 0 3px 9px rgba(74,155,140,.16); } /* --------------------------------------------------------- TITLE HOVER --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-card-header:hover .concierge-entry-title{ color:#173451; border-color:rgba(74,155,140,.22); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 10px 24px rgba(20,42,69,.075); transform:translateY(-1px); text-shadow: 0 2px 8px rgba(30,58,95,.07); } body[data-page="cleaning-concierge"] .concierge-card-header{ display:flex; align-items:center; gap:12px; } body[data-page="cleaning-concierge"] .concierge-avatar, body[data-page="cleaning-concierge"] .concierge-chat-avatar{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#fff; font-weight:800; background:var(--nc-gradient); box-shadow:0 7px 18px rgba(54,125,112,.18); } body[data-page="cleaning-concierge"] .concierge-avatar{ width:42px; height:42px; border-radius:12px; font-size:.75rem; } body[data-page="cleaning-concierge"] .concierge-card-label{ display:block; color:var(--nc-teal-dark); font-size:.58rem; font-weight:700; letter-spacing:.13em; } body[data-page="cleaning-concierge"] .concierge-card-header h2{ margin:3px 0 0; color:var(--nc-navy); font-size:1.05rem; } body[data-page="cleaning-concierge"] .concierge-welcome-message{ margin:14px 0; color:#53657A; font-size:.72rem; line-height:1.5; } body[data-page="cleaning-concierge"] .concierge-welcome-message p{ margin:0 0 7px; } body[data-page="cleaning-concierge"] .concierge-welcome-message p:last-child{ margin-bottom:0; } body[data-page="cleaning-concierge"] .concierge-small-text, body[data-page="cleaning-concierge"] .concierge-privacy-note, body[data-page="cleaning-concierge"] .form-help{ color:var(--nc-muted); font-size:.66rem; line-height:1.5; } body[data-page="cleaning-concierge"] .form-field label{ display:block; margin-bottom:6px; color:var(--nc-navy); font-size:.72rem; font-weight:700; } body[data-page="cleaning-concierge"] #conciergeEmail{ width:100%; min-height:46px; padding:11px 13px; border:1px solid #CBD8E1; border-radius:11px; background:#fff; color:var(--nc-text); font-size:.82rem; outline:none; } body[data-page="cleaning-concierge"] #conciergeEmail:focus{ border-color:var(--nc-teal); box-shadow:0 0 0 4px rgba(74,155,140,.10); } body[data-page="cleaning-concierge"] .form-help{ margin-top:6px; } body[data-page="cleaning-concierge"] .form-error{ margin-top:6px; color:#A33A3A; font-size:.68rem; } body[data-page="cleaning-concierge"] .service-context-notice{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:10px 11px; border:1px solid rgba(74,155,140,.20); border-radius:11px; background:var(--nc-teal-soft); color:var(--nc-soft); font-size:.68rem; } body[data-page="cleaning-concierge"] .service-context-icon{ color:var(--nc-teal-dark); font-weight:800; } /* ========================================================= CONCIERGE START BUTTON — PRO PREMIUM CTA ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button{ position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:54px; margin-top:16px; padding:0 24px; border:1px solid rgba(255,255,255,.26); border-radius:16px; color:#FFFFFF; background: linear-gradient( 135deg, #142F4D 0%, #1E3A5F 34%, #285B70 68%, #4A9B8C 100% ); font-size:.84rem; font-weight:800; letter-spacing:.012em; line-height:1; box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 -1px 0 rgba(5,25,42,.20) inset, 0 8px 16px rgba(30,58,95,.16), 0 16px 30px rgba(30,58,95,.10), 0 0 0 rgba(74,155,140,0); overflow:hidden; isolation:isolate; cursor:pointer; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease; } /* ========================================================= INNER GLASS HIGHLIGHT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button::after{ content:""; position:absolute; inset:1px; border-radius:15px; background: linear-gradient( 180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 38%, transparent 70% ); pointer-events:none; z-index:0; } /* ========================================================= MOVING LIGHT SWEEP ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button::before{ content:""; position:absolute; top:-30%; left:-45%; width:34%; height:160%; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.04) 70%, transparent 100% ); transform:skewX(-18deg); opacity:0; pointer-events:none; z-index:2; } /* ========================================================= TEXT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button .button-text{ position:relative; z-index:3; display:inline-flex; align-items:center; white-space:nowrap; text-shadow: 0 1px 2px rgba(5,25,42,.22); } /* ========================================================= ARROW ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button .button-arrow{ position:relative; z-index:3; margin-left:0; font-size:1.08rem; font-weight:800; line-height:1; text-shadow: 0 1px 2px rgba(5,25,42,.22); transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease; } /* ========================================================= HOVER — PREMIUM LIFT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button:hover{ transform:translateY(-3px); filter:saturate(1.06) brightness(1.025); box-shadow: 0 1px 0 rgba(255,255,255,.42) inset, 0 -1px 0 rgba(5,25,42,.18) inset, 0 12px 22px rgba(30,58,95,.20), 0 20px 38px rgba(30,58,95,.12), 0 0 22px rgba(74,155,140,.12); } /* ========================================================= HOVER — LIGHT SWEEP ACTIVATION ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button:hover::before{ left:125%; opacity:1; transition: left .7s cubic-bezier(.2,.7,.2,1), opacity .12s ease; } /* ========================================================= HOVER — ARROW MOTION ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button:hover .button-arrow{ transform:translateX(5px); } /* ========================================================= ACTIVE — REAL PRESS FEEL ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button:active{ transform:translateY(-1px) scale(.985); filter:brightness(.98); box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 5px 12px rgba(30,58,95,.18), 0 8px 18px rgba(30,58,95,.08); } body[data-page="cleaning-concierge"] .concierge-start-button:active .button-arrow{ transform:translateX(2px); } /* ========================================================= KEYBOARD FOCUS ========================================================= */ body[data-page="cleaning-concierge"] .concierge-start-button:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px rgba(74,155,140,.32), 0 12px 24px rgba(30,58,95,.18); } /* ========================================================= CONCIERGE PHONE PREVIEW — MOBILE ========================================================= */ @media (max-width:600px){ body[data-page="cleaning-concierge"] .concierge-chat-preview{ position:absolute; top:18px; right:10px; width:82px; max-width:82px; z-index:1; pointer-events:none; transform:none; opacity:.96; } body[data-page="cleaning-concierge"] .concierge-chat-window{ width:100%; aspect-ratio:9 / 19.5; padding:4px; border-width:1.5px; border-radius:23px; transform:rotate(1deg); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 0 0 2px rgba(5,15,24,.72), 0 0 0 3px rgba(255,255,255,.07), 0 7px 16px rgba(12,28,45,.17), 0 15px 30px rgba(20,42,69,.12); } body[data-page="cleaning-concierge"] .concierge-chat-preview .concierge-chat-window{ isolation:isolate; } } /* ========================================================= MOBILE FIX — DECORATIVE PHONE PREVIEW North Crescent Cleaning Concierge ========================================================= */ @media screen and (max-width: 600px) { body[data-page="cleaning-concierge"] .concierge-chat-preview { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ body[data-page="cleaning-concierge"] .concierge-start-button, body[data-page="cleaning-concierge"] .concierge-start-button::before, body[data-page="cleaning-concierge"] .concierge-start-button .button-arrow{ transition:none; } } body[data-page="cleaning-concierge"] .concierge-privacy-note{ margin:12px 0 0; text-align:center; } /* ========================================================= EMAIL GATE — CONCIERGE CHAT PREVIEW STEP 3 — PREMIUM VISUAL CHAT ========================================================= */ /* --------------------------------------------------------- CHAT PREVIEW — REFINED PROPORTION --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-preview{ position:absolute; top:62px; right:42px; width:31%; max-width:300px; z-index:2; pointer-events:none; animation: ncPreviewFloat 6s ease-in-out infinite; } /* ========================================================= CONCIERGE CHAT PREVIEW STEP 4 — PREMIUM PHONE FRAME ========================================================= */ body[data-page="cleaning-concierge"] .concierge-chat-window{ position:relative; width:100%; aspect-ratio:9 / 19.5; height:auto; display:flex; flex-direction:column; padding:7px; border:2px solid #16283B; border-radius:38px; background: linear-gradient( 145deg, #0B1826 0%, #20384D 28%, #0A1724 58%, #314A5C 82%, #0A1724 100% ); box-shadow: 0 2px 0 rgba(255,255,255,.55) inset, 0 0 0 1px rgba(255,255,255,.12), 0 8px 18px rgba(12,28,45,.22), 0 24px 55px rgba(20,42,69,.20), 0 40px 80px rgba(20,42,69,.12); overflow:hidden; transform:rotate(1.2deg); isolation:isolate; } /* ========================================================= PREMIUM PHONE — INNER SCREEN EDGE STEP 8 ========================================================= */ body[data-page="cleaning-concierge"] .concierge-chat-window{ box-shadow: 0 2px 0 rgba(255,255,255,.55) inset, 0 0 0 3px rgba(5,15,24,.75), 0 0 0 4px rgba(255,255,255,.08), 0 8px 18px rgba(12,28,45,.22), 0 24px 55px rgba(20,42,69,.20), 0 40px 80px rgba(20,42,69,.12); } /* ========================================================= PREMIUM PHONE — TOP SPEAKER / CAMERA STEP 5 ========================================================= */ /* ========================================================= PREMIUM PHONE — REFINED NOTCH ========================================================= */ body[data-page="cleaning-concierge"] .concierge-chat-window::after{ content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:78px; height:19px; border-radius:999px; background: radial-gradient( circle at 72% 50%, #16354C 0 3px, #07111B 4px 5px, transparent 6px ), linear-gradient( 180deg, #02070B 0%, #101E2A 100% ); box-shadow: 0 2px 5px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.10) inset; z-index:20; pointer-events:none; } /* --------------------------------------------------------- CHAT WINDOW LIGHT --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-window::before{ content:""; position:absolute; top:-80px; right:-70px; width:190px; height:190px; border-radius:50%; background: radial-gradient( circle, rgba(74,155,140,.16) 0%, rgba(74,155,140,.055) 42%, transparent 72% ); pointer-events:none; } /* ========================================================= PREMIUM PHONE — SCREEN BEZEL STEP 6 ========================================================= */ body[data-page="cleaning-concierge"] .concierge-chat-topbar{ border-radius:30px 30px 0 0; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.16); } /* --------------------------------------------------------- CHAT TOP BAR --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-topbar{ position:relative; display:flex; align-items:center; justify-content:space-between; min-height:62px; padding:19px 14px 10px; color:#fff; background: linear-gradient( 135deg, #1E3A5F 0%, #21476B 48%, #347E78 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset; border-radius:30px 30px 0 0; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.16); } /* --------------------------------------------------------- CHAT PROFILE --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-profile{ display:flex; align-items:center; gap:10px; min-width:0; } /* --------------------------------------------------------- CHAT AVATAR --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-preview .concierge-chat-avatar{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto; border:1px solid rgba(255,255,255,.25); border-radius:12px; color:#fff; background: linear-gradient( 145deg, #315A7D 0%, #4A9B8C 100% ); font-size:.68rem; font-weight:800; box-shadow: 0 4px 12px rgba(0,0,0,.16), 0 0 0 4px rgba(255,255,255,.06); } /* --------------------------------------------------------- CHAT IDENTITY — PREMIUM CONTRAST FRAME --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-preview .concierge-chat-identity{ position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; gap:3px; padding:7px 12px 7px 11px; border:1px solid rgba(255,255,255,.24); border-left:2px solid rgba(116,213,183,.72); border-radius:11px; background: linear-gradient( 135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.055) 52%, rgba(74,155,140,.10) 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.20) inset, 0 -1px 0 rgba(0,0,0,.12) inset, 0 5px 12px rgba(0,0,0,.13), 0 0 12px rgba(74,155,140,.07); isolation:isolate; overflow:hidden; } /* --------------------------------------------------------- IDENTITY — GLASS REFLECTION --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-preview .concierge-chat-identity::before{ content:""; position:absolute; top:1px; left:8px; right:8px; height:9px; border-radius:999px; background: linear-gradient( 180deg, rgba(255,255,255,.18), rgba(255,255,255,0) ); opacity:.65; pointer-events:none; } /* --------------------------------------------------------- IDENTITY — NAME --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-preview .concierge-chat-identity strong{ position:relative; display:block; max-width:100%; overflow:hidden; color:#FFFFFF; font-size:.72rem; font-weight:750; line-height:1.15; white-space:nowrap; text-overflow:ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.28); } /* --------------------------------------------------------- IDENTITY — ONLINE STATUS --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-preview .concierge-chat-identity span{ position:relative; display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.78); font-size:.58rem; font-weight:600; line-height:1; } /* --------------------------------------------------------- ONLINE INDICATOR --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-preview .concierge-chat-identity span i{ display:block; width:6px; height:6px; border-radius:50%; background:#74D5B7; box-shadow: 0 0 0 3px rgba(116,213,183,.12), 0 0 10px rgba(116,213,183,.55); animation:ncOnlinePulse 2.4s ease-in-out infinite; } /* --------------------------------------------------------- CHAT MENU — PREMIUM GLASS CONTROL --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-menu{ position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:34px; padding:0; border:1px solid rgba(255,255,255,.34); border-radius:11px; color:rgba(255,255,255,.94); background: linear-gradient( 145deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.08) 48%, rgba(74,155,140,.12) 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 0 0 1px rgba(255,255,255,.045), 0 5px 12px rgba(0,0,0,.18), 0 0 14px rgba(74,155,140,.08); font-size:.80rem; font-weight:800; letter-spacing:.075em; line-height:1; text-shadow: 0 1px 3px rgba(0,0,0,.32); transform:translateY(-2px); isolation:isolate; overflow:hidden; } /* --------------------------------------------------------- PREMIUM GLASS REFLECTION --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-menu::before{ content:""; position:absolute; top:1px; left:7px; right:7px; height:10px; border-radius:999px; background: linear-gradient( 180deg, rgba(255,255,255,.18), rgba(255,255,255,0) ); opacity:.75; pointer-events:none; } /* --------------------------------------------------------- PREMIUM TEAL EDGE --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-menu::after{ content:""; position:absolute; inset:0; border-radius:11px; box-shadow: 0 0 0 1px rgba(74,155,140,.10) inset; pointer-events:none; } /* --------------------------------------------------------- CHAT BODY --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-body{ position:relative; display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; padding:12px 13px 13px; background: radial-gradient( circle at 100% 0%, rgba(74,155,140,.08), transparent 42% ), linear-gradient( 180deg, #FDFEFE 0%, #F7FAFC 100% ); } /* ========================================================= PREMIUM PHONE — HOME INDICATOR STEP 7 ========================================================= */ body[data-page="cleaning-concierge"] .concierge-chat-body::after{ content:""; position:absolute; left:50%; bottom:9px; width:58px; height:4px; transform:translateX(-50%); border-radius:999px; background:#20384D; opacity:.72; box-shadow: 0 1px 0 rgba(255,255,255,.75); pointer-events:none; } /* --------------------------------------------------------- MESSAGE ROW --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-message{ display:flex; flex-direction:column; width:100%; } body[data-page="cleaning-concierge"] .concierge-chat-message-in{ align-items:flex-start; } body[data-page="cleaning-concierge"] .concierge-chat-message-out{ align-items:flex-end; } /* --------------------------------------------------------- MESSAGE BUBBLES --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-bubble{ position:relative; max-width:82%; padding:8px 10px; border:1px solid rgba(30,58,95,.08); border-radius:15px; color:#29435E; background:#fff; font-size:.67rem; line-height:1.42; font-weight:500; box-shadow: 0 4px 12px rgba(20,42,69,.055); } body[data-page="cleaning-concierge"] .concierge-chat-message-in .concierge-chat-bubble{ border-bottom-left-radius:5px; } body[data-page="cleaning-concierge"] .concierge-chat-message-out .concierge-chat-bubble{ border-color:rgba(74,155,140,.18); border-bottom-right-radius:5px; color:#fff; background: linear-gradient( 135deg, #1E3A5F 0%, #347F78 100% ); box-shadow: 0 7px 16px rgba(54,125,112,.15); } /* --------------------------------------------------------- MESSAGE TIME --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-time{ margin-top:4px; color:#93A1AF; font-size:.48rem; font-weight:600; } body[data-page="cleaning-concierge"] .concierge-chat-seen{ margin-left:4px; color:#4A9B8C; font-weight:800; letter-spacing:-.08em; } /* --------------------------------------------------------- TYPING INDICATOR --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-typing{ display:flex; align-items:center; gap:4px; width:max-content; margin-top:1px; padding:8px 11px; border:1px solid rgba(30,58,95,.07); border-radius:14px 14px 14px 5px; background:#fff; box-shadow: 0 4px 10px rgba(20,42,69,.045); } body[data-page="cleaning-concierge"] .concierge-chat-typing span{ display:block; width:5px; height:5px; border-radius:50%; background:#7F93A8; animation: ncPreviewTyping 1.35s ease-in-out infinite; } body[data-page="cleaning-concierge"] .concierge-chat-typing span:nth-child(2){ animation-delay:.16s; } body[data-page="cleaning-concierge"] .concierge-chat-typing span:nth-child(3){ animation-delay:.32s; } /* --------------------------------------------------------- PREMIUM AMBIENT GLOW --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .concierge-chat-preview::after{ content:""; position:absolute; left:12%; right:8%; bottom:-18px; height:55px; border-radius:50%; background: radial-gradient( ellipse, rgba(74,155,140,.16) 0%, rgba(74,155,140,.045) 42%, transparent 72% ); filter:blur(9px); z-index:-1; } /* --------------------------------------------------------- PREVIEW ANIMATIONS --------------------------------------------------------- */ @keyframes ncPreviewFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } @keyframes ncOnlinePulse{ 0%,100%{ opacity:.75; transform:scale(1); } 50%{ opacity:1; transform:scale(1.12); } } @keyframes ncPreviewTyping{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } } /* --------------------------------------------------------- LEFT CONTENT RESERVATION --------------------------------------------------------- */ @media (min-width:901px){ body[data-page="cleaning-concierge"] .concierge-card-header, body[data-page="cleaning-concierge"] .concierge-welcome-message, body[data-page="cleaning-concierge"] .concierge-email-form{ width:62%; max-width:590px; } } /* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ body[data-page="cleaning-concierge"] .concierge-chat-preview, body[data-page="cleaning-concierge"] .concierge-chat-preview .concierge-chat-identity span i, body[data-page="cleaning-concierge"] .concierge-chat-typing span{ animation:none; } } /* ========================================================= CHAT ========================================================= */ body[data-page="cleaning-concierge"] #conciergeChatSection{ padding:42px 0 50px; background:#F7FAFC; border-top:1px solid rgba(30,58,95,.06); } body[data-page="cleaning-concierge"] .concierge-chat-layout{ display:block; max-width:1100px; margin:0 auto; } /* ========================================================= PREMIUM CHAT CARD STEP 1 — CONVERSATION FOUNDATION ========================================================= */ body[data-page="cleaning-concierge"] .concierge-chat-card{ display:flex; flex-direction:column; height:min(720px, calc(100vh - 170px)); min-height:560px; border:1px solid rgba(30,58,95,.10); border-radius:24px; background:#ffffff; box-shadow: 0 1px 0 rgba(255,255,255,.96) inset, 0 18px 45px rgba(20,42,69,.08), 0 35px 75px rgba(20,42,69,.045); overflow:hidden; isolation:isolate; } body[data-page="cleaning-concierge"] .concierge-chat-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border-bottom:1px solid var(--nc-border); } body[data-page="cleaning-concierge"] .concierge-chat-identity{ display:flex; align-items:center; gap:10px; } body[data-page="cleaning-concierge"] .concierge-chat-avatar{ width:38px; height:38px; border-radius:11px; font-size:.68rem; } body[data-page="cleaning-concierge"] .concierge-chat-identity-text h2{ margin:0; color:var(--nc-navy); font-size:.9rem; } body[data-page="cleaning-concierge"] .concierge-online-status{ display:flex; align-items:center; gap:6px; margin-top:3px; color:var(--nc-muted); font-size:.64rem; } body[data-page="cleaning-concierge"] .concierge-online-dot{ width:7px; height:7px; border-radius:50%; background:var(--nc-teal); } body[data-page="cleaning-concierge"] .concierge-chat-actions{ display:flex; gap:6px; } body[data-page="cleaning-concierge"] .concierge-chat-action{ width:34px; height:34px; border:1px solid var(--nc-border); border-radius:10px; background:#fff; color:var(--nc-navy); } body[data-page="cleaning-concierge"] .concierge-context-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; border-bottom:1px solid var(--nc-border); background:var(--nc-teal-soft); color:var(--nc-soft); font-size:.68rem; } body[data-page="cleaning-concierge"] .concierge-context-content{ display:flex; align-items:center; gap:7px; } body[data-page="cleaning-concierge"] .concierge-context-icon{ color:var(--nc-teal-dark); font-weight:800; } body[data-page="cleaning-concierge"] .concierge-context-clear{ border:0; background:transparent; color:var(--nc-teal-dark); font-size:.66rem; font-weight:700; } /* ========================================================= PREMIUM CONVERSATION VIEWPORT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-messages{ flex:1 1 auto; min-height:0; max-height:none; padding:20px 22px 24px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scroll-behavior:smooth; background: radial-gradient( circle at 12% 6%, rgba(74,155,140,.055), transparent 27% ), radial-gradient( circle at 88% 8%, rgba(30,58,95,.045), transparent 25% ), linear-gradient( 180deg, #F6F9FA 0%, #F1F5F7 100% ); scrollbar-width:thin; scrollbar-color:rgba(30,58,95,.20) transparent; } /* ========================================================= PREMIUM CHAT SCROLLBAR STEP 6 ========================================================= */ body[data-page="cleaning-concierge"] .concierge-messages::-webkit-scrollbar{ width:7px; } body[data-page="cleaning-concierge"] .concierge-messages::-webkit-scrollbar-track{ background:transparent; } body[data-page="cleaning-concierge"] .concierge-messages::-webkit-scrollbar-thumb{ border:2px solid transparent; border-radius:999px; background-clip:padding-box; background:linear-gradient( 180deg, rgba(30,58,95,.24), rgba(74,155,140,.30) ); } body[data-page="cleaning-concierge"] .concierge-messages::-webkit-scrollbar-thumb:hover{ background:linear-gradient( 180deg, rgba(30,58,95,.38), rgba(74,155,140,.48) ); background-clip:padding-box; } /* ========================================================= CHAT MESSAGE ALIGNMENT STEP 2 — LEFT / RIGHT CONVERSATION ========================================================= */ body[data-page="cleaning-concierge"] .chat-message{ display:flex; align-items:flex-end; gap:10px; width:100%; margin-bottom:16px; } /* Concierge — LEFT */ body[data-page="cleaning-concierge"] .chat-message-concierge{ justify-content:flex-start; } /* Client — RIGHT */ body[data-page="cleaning-concierge"] .chat-message-user{ justify-content:flex-end; } /* Message content */ body[data-page="cleaning-concierge"] .chat-message-content{ width:fit-content; max-width:min(72%,620px); } /* Concierge keeps avatar on the left */ body[data-page="cleaning-concierge"] .chat-message-concierge .chat-message-content{ margin-right:auto; } /* Client message moves completely to the right */ body[data-page="cleaning-concierge"] .chat-message-user .chat-message-content{ margin-left:auto; } /* Client does not need the Concierge avatar */ body[data-page="cleaning-concierge"] .chat-message-user .chat-message-avatar{ display:none; } body[data-page="cleaning-concierge"] .chat-message-avatar{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 auto; border-radius:9px; background:var(--nc-gradient); color:#fff; font-size:.58rem; font-weight:800; } body[data-page="cleaning-concierge"] .chat-message-content{ max-width:min(82%,620px); } /* ========================================================= PREMIUM CHAT BUBBLES STEP 3 — CONCIERGE / CLIENT ========================================================= */ body[data-page="cleaning-concierge"] .chat-message-bubble{ position:relative; padding:11px 14px; border:1px solid rgba(30,58,95,.09); border-radius:17px 17px 17px 5px; background: linear-gradient( 145deg, #FFFFFF 0%, #F9FBFC 100% ); color:#34485C; font-size:.76rem; line-height:1.55; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 5px 14px rgba(30,58,95,.055), 0 1px 3px rgba(30,58,95,.035); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } /* --------------------------------------------------------- CONCIERGE — LEFT --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .chat-message-concierge .chat-message-bubble{ border-bottom-left-radius:5px; } body[data-page="cleaning-concierge"] .chat-message-concierge:hover .chat-message-bubble{ transform:translateY(-1px); border-color:rgba(74,155,140,.18); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 8px 18px rgba(30,58,95,.07); } /* --------------------------------------------------------- CLIENT — RIGHT --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .chat-message-user .chat-message-bubble{ border:0; border-radius:17px 17px 5px 17px; background: linear-gradient( 135deg, #1E3A5F 0%, #285879 52%, #4A9B8C 100% ); color:#FFFFFF !important; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 7px 18px rgba(30,58,95,.16), 0 2px 5px rgba(30,58,95,.08); } /* ========================================================= CLIENT MESSAGE — TEXT VISIBILITY ========================================================= */ body[data-page="cleaning-concierge"] .chat-message-user .chat-message-bubble p{ color:#FFFFFF !important; opacity:1 !important; } body[data-page="cleaning-concierge"] .chat-message-user:hover .chat-message-bubble{ transform:translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 10px 22px rgba(30,58,95,.19); } /* --------------------------------------------------------- TEXT INSIDE BUBBLES --------------------------------------------------------- */ body[data-page="cleaning-concierge"] .chat-message-bubble p{ margin:0 0 7px; } body[data-page="cleaning-concierge"] .chat-message-bubble p:last-child{ margin-bottom:0; } body[data-page="cleaning-concierge"] .chat-message-user .chat-message-bubble strong{ color:#FFFFFF; } body[data-page="cleaning-concierge"] .chat-message-bubble p{ margin:0 0 7px; } body[data-page="cleaning-concierge"] .chat-message-bubble p:last-child{ margin-bottom:0; } /* ========================================================= CHAT META — TIME + SEEN STEP 4 ========================================================= */ body[data-page="cleaning-concierge"] .chat-message-time{ display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:5px; color:rgba(91,111,134,.82); font-size:.56rem; font-weight:600; line-height:1; letter-spacing:.01em; } /* Client metadata sits naturally below the right bubble */ body[data-page="cleaning-concierge"] .chat-message-user .chat-message-time{ color:rgba(91,111,134,.82); } /* Concierge metadata remains quieter */ body[data-page="cleaning-concierge"] .chat-message-concierge .chat-message-time{ justify-content:flex-start; } /* Seen confirmation */ body[data-page="cleaning-concierge"] .chat-message-user .concierge-chat-seen{ margin-left:3px; color:#4A9B8C; font-size:.62rem; font-weight:800; line-height:1; letter-spacing:-.08em; text-shadow:0 1px 3px rgba(74,155,140,.15); } body[data-page="cleaning-concierge"] .concierge-quick-start{ margin-top:12px; } body[data-page="cleaning-concierge"] .quick-start-label{ margin:0 0 8px; color:var(--nc-navy); font-size:.68rem; font-weight:700; } /* ========================================================= QUICK ACTIONS — PREMIUM SERVICE SHORTCUTS ========================================================= */ body[data-page="cleaning-concierge"] .quick-action-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } /* ========================================================= QUICK ACTION BUTTON ========================================================= */ body[data-page="cleaning-concierge"] .quick-action-button{ position:relative; display:flex; align-items:center; justify-content:center; min-height:48px; padding:9px 10px; border:1px solid rgba(30,58,95,.10); border-radius:14px; background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(250,252,253,.98) 55%, rgba(245,249,250,.96) 100% ); color:#1E3A5F; font-size:.64rem; font-weight:700; line-height:1.22; letter-spacing:.005em; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 10px rgba(20,42,69,.045), 0 8px 18px rgba(20,42,69,.035); overflow:hidden; isolation:isolate; cursor:pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; } /* ========================================================= PREMIUM TOP LIGHT ========================================================= */ body[data-page="cleaning-concierge"] .quick-action-button::before{ content:""; position:absolute; top:0; left:12%; width:76%; height:1px; background: linear-gradient( 90deg, transparent, rgba(74,155,140,.34), transparent ); opacity:.55; transition: width .3s ease, opacity .3s ease; } /* ========================================================= TEAL ACCENT ========================================================= */ body[data-page="cleaning-concierge"] .quick-action-button::after{ content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; border-radius:999px; background: linear-gradient( 90deg, #1E3A5F, #4A9B8C ); transform:translateX(-50%); transition: width .3s cubic-bezier(.2,.8,.2,1); } /* ========================================================= ICON ========================================================= */ body[data-page="cleaning-concierge"] .quick-action-icon{ position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; margin-right:5px; font-size:1rem; line-height:1; transform:translateY(0) scale(1); filter:saturate(.92); transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease; } /* ========================================================= HOVER ========================================================= */ body[data-page="cleaning-concierge"] .quick-action-button:hover{ transform:translateY(-3px); border-color:rgba(74,155,140,.25); color:#173451; background: linear-gradient( 145deg, #FFFFFF 0%, #F8FCFB 55%, #F1F8F6 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 8px 16px rgba(20,42,69,.07), 0 14px 26px rgba(74,155,140,.075); } body[data-page="cleaning-concierge"] .quick-action-button:hover::before{ width:88%; opacity:.9; } body[data-page="cleaning-concierge"] .quick-action-button:hover::after{ width:42%; } body[data-page="cleaning-concierge"] .quick-action-button:hover .quick-action-icon{ transform:translateY(-1px) scale(1.08); filter:saturate(1.08); } /* ========================================================= ACTIVE — MICRO PRESS ========================================================= */ body[data-page="cleaning-concierge"] .quick-action-button:active{ transform:translateY(-1px) scale(.985); box-shadow: 0 2px 7px rgba(20,42,69,.07); } /* ========================================================= KEYBOARD FOCUS ========================================================= */ body[data-page="cleaning-concierge"] .quick-action-button:focus-visible{ outline:none; border-color:rgba(74,155,140,.38); box-shadow: 0 0 0 3px rgba(74,155,140,.14), 0 8px 18px rgba(20,42,69,.07); } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ body[data-page="cleaning-concierge"] .quick-action-button, body[data-page="cleaning-concierge"] .quick-action-button::before, body[data-page="cleaning-concierge"] .quick-action-button::after, body[data-page="cleaning-concierge"] .quick-action-icon{ transition:none; } } /* ========================================================= PREMIUM TYPING INDICATOR STEP 5 ========================================================= */ body[data-page="cleaning-concierge"] .typing-bubble{ display:flex; align-items:center; justify-content:center; gap:5px; width:54px; min-width:54px; min-height:36px; padding:9px 12px; border:1px solid rgba(30,58,95,.08); border-radius:17px 17px 17px 5px; background: linear-gradient( 145deg, #FFFFFF 0%, #F8FAFB 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 5px 14px rgba(30,58,95,.055); } /* Animated dots */ body[data-page="cleaning-concierge"] .typing-dot{ display:block; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:#6F8498; opacity:.45; animation:ncTyping 1.35s ease-in-out infinite; } body[data-page="cleaning-concierge"] .typing-dot:nth-child(2){ animation-delay:.16s; } body[data-page="cleaning-concierge"] .typing-dot:nth-child(3){ animation-delay:.32s; } /* Premium breathing animation */ @keyframes ncTyping{ 0%,60%,100%{ transform:translateY(0) scale(.88); opacity:.35; } 30%{ transform:translateY(-3px) scale(1); opacity:1; } } body[data-page="cleaning-concierge"] .concierge-chat-error{ display:flex; align-items:center; gap:9px; margin:0 18px 10px; padding:10px 12px; border:1px solid #E8C7C7; border-radius:11px; background:#FFF5F5; color:#8C3B3B; font-size:.68rem; } body[data-page="cleaning-concierge"] .concierge-chat-error p{ margin:2px 0 0; } body[data-page="cleaning-concierge"] .error-retry-button{ margin-left:auto; border:0; background:transparent; color:#8C3B3B; font-weight:700; font-size:.66rem; } body[data-page="cleaning-concierge"] .concierge-input-area{ padding:12px 14px 10px; border-top:1px solid var(--nc-border); background:#fff; } body[data-page="cleaning-concierge"] .concierge-attachment-preview{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; padding:7px 9px; border:1px solid var(--nc-border); border-radius:9px; background:#F7FAFC; font-size:.66rem; } body[data-page="cleaning-concierge"] .attachment-preview-content{ display:flex; align-items:center; gap:7px; min-width:0; } body[data-page="cleaning-concierge"] #attachmentFileName{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body[data-page="cleaning-concierge"] .remove-attachment-button{ border:0; background:transparent; color:var(--nc-muted); font-size:1rem; } body[data-page="cleaning-concierge"] .concierge-message-form{ display:flex; align-items:flex-end; gap:7px; } body[data-page="cleaning-concierge"] .concierge-input-action, body[data-page="cleaning-concierge"] .concierge-send-button{ width:38px; height:38px; flex:0 0 auto; border-radius:10px; } body[data-page="cleaning-concierge"] .concierge-input-action{ border:1px solid var(--nc-border); background:#fff; color:var(--nc-navy); } body[data-page="cleaning-concierge"] .concierge-send-button{ border:0; background:var(--nc-gradient); color:#fff; } body[data-page="cleaning-concierge"] .concierge-message-input-wrapper{ position:relative; flex:1; } body[data-page="cleaning-concierge"] #conciergeMessageInput{ display:block; width:100%; min-height:38px; max-height:130px; resize:none; padding:10px 10px 20px; border:1px solid #CBD8E1; border-radius:10px; background:#fff; color:var(--nc-text); font-size:.72rem; line-height:1.4; outline:none; } body[data-page="cleaning-concierge"] #conciergeMessageInput:focus{ border-color:var(--nc-teal); box-shadow:0 0 0 4px rgba(74,155,140,.08); } body[data-page="cleaning-concierge"] .concierge-character-count{ position:absolute; right:8px; bottom:4px; color:var(--nc-muted); font-size:.52rem; } body[data-page="cleaning-concierge"] .concierge-input-footer{ display:flex; justify-content:center; gap:6px; margin-top:7px; color:var(--nc-muted); font-size:.54rem; } /* ========================================================= SIDEBAR ========================================================= */ /* ========================================================= CONCIERGE SUPPORT INFORMATION Appears below the chat ========================================================= */ body[data-page="cleaning-concierge"] .concierge-support-info{ padding:28px 0 36px; background:#F7FAFC; } body[data-page="cleaning-concierge"] .concierge-support-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-width:1100px; margin:0 auto; } /* ========================================================= SUPPORT CARDS — NORTH CRESCENT TYPOGRAPHY & ALIGNMENT SYSTEM ========================================================= */ body[data-page="cleaning-concierge"] .concierge-support-card{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:250px; padding:24px 23px 22px; border:1px solid rgba(30,58,95,.14); border-radius:20px; background: linear-gradient( 145deg, #FFFFFF 0%, #FFFFFF 58%, #F4F9F8 100% ); color:#263449; text-align:left; box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 8px 18px rgba(30,58,95,.07), 0 20px 42px rgba(30,58,95,.09); overflow:hidden; isolation:isolate; transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease, background .28s ease; } /* ========================================================= PREMIUM TOP ACCENT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-support-card::before{ content:""; position:absolute; top:0; left:22px; width:48px; height:3px; border-radius:0 0 999px 999px; background: linear-gradient( 90deg, #1E3A5F 0%, #4A9B8C 100% ); box-shadow: 0 3px 10px rgba(74,155,140,.20); transition: width .28s ease, box-shadow .28s ease; } /* ========================================================= SOFT PREMIUM LIGHT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-support-card::after{ content:""; position:absolute; top:-95px; right:-95px; width:200px; height:200px; border-radius:50%; background: radial-gradient( circle, rgba(74,155,140,.09) 0%, rgba(74,155,140,0) 70% ); pointer-events:none; z-index:-1; } /* ========================================================= HOVER ========================================================= */ body[data-page="cleaning-concierge"] .concierge-support-card:hover{ transform:translateY(-5px); border-color:rgba(74,155,140,.30); background: linear-gradient( 145deg, #FFFFFF 0%, #FFFFFF 50%, #F1F8F6 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 12px 25px rgba(30,58,95,.09), 0 26px 52px rgba(30,58,95,.12); } body[data-page="cleaning-concierge"] .concierge-support-card:hover::before{ width:70px; box-shadow: 0 4px 13px rgba(74,155,140,.28); } /* ========================================================= UNIFIED TITLE SYSTEM ALL SUPPORT CARD TITLES USE THE SAME STYLE ========================================================= */ body[data-page="cleaning-concierge"] .concierge-support-card h2, body[data-page="cleaning-concierge"] .concierge-support-card h3{ margin:4px 0 11px; color:#173451; font-size:1rem; font-weight:800; line-height:1.3; letter-spacing:-.018em; text-align:left; text-wrap:balance; } /* ========================================================= BODY COPY ========================================================= */ body[data-page="cleaning-concierge"] .concierge-support-card p{ margin:0; color:#52677D; font-size:.76rem; font-weight:500; line-height:1.62; text-align:left; text-wrap:pretty; } /* ========================================================= EYEBROW ========================================================= */ body[data-page="cleaning-concierge"] .section-eyebrow{ display:inline-flex; align-items:center; width:max-content; max-width:100%; margin:0 0 9px; padding:5px 9px; border:1px solid rgba(74,155,140,.22); border-radius:999px; color:#216F65; background: linear-gradient( 135deg, rgba(74,155,140,.12), rgba(74,155,140,.045) ); font-size:.58rem; font-weight:800; letter-spacing:.13em; line-height:1; text-align:left; text-transform:uppercase; } /* ========================================================= HELP LIST ========================================================= */ body[data-page="cleaning-concierge"] .concierge-help-list{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; gap:7px; } /* ========================================================= HELP ITEM ========================================================= */ body[data-page="cleaning-concierge"] .concierge-help-list li{ display:flex; align-items:flex-start; gap:8px; margin:0; color:#52677D; font-size:.72rem; font-weight:500; line-height:1.4; text-align:left; } /* ========================================================= CHECK MARK ========================================================= */ body[data-page="cleaning-concierge"] .concierge-help-list li span{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px; width:18px; height:18px; border:1px solid rgba(74,155,140,.24); border-radius:50%; color:#267B6F; background:rgba(74,155,140,.09); font-size:.64rem; font-weight:900; line-height:1; } /* ========================================================= HUMAN SUPPORT ICON + TEXT NOW FOLLOW THE SAME GRID SYSTEM ========================================================= */ body[data-page="cleaning-concierge"] .concierge-human-support{ display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; column-gap:13px; background: linear-gradient( 145deg, #FFFFFF 0%, #F8FCFB 58%, #EDF7F4 100% ); } /* ========================================================= HUMAN SUPPORT ICON ========================================================= */ body[data-page="cleaning-concierge"] .human-support-icon{ grid-column:1; grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-top:1px; border:1px solid rgba(74,155,140,.24); border-radius:13px; background: linear-gradient( 145deg, #FFFFFF 0%, rgba(74,155,140,.12) 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 7px 15px rgba(30,58,95,.08); font-size:1.15rem; transition: transform .28s ease, box-shadow .28s ease; } /* ========================================================= HUMAN SUPPORT TEXT COLUMN ========================================================= */ body[data-page="cleaning-concierge"] .concierge-human-support > div:last-child{ grid-column:2; min-width:0; text-align:left; } /* ========================================================= HUMAN SUPPORT HOVER ========================================================= */ body[data-page="cleaning-concierge"] .concierge-human-support:hover .human-support-icon{ transform:translateY(-2px) rotate(-2deg); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 10px 20px rgba(30,58,95,.11); } /* ========================================================= INFORMATION / SERVICE PREVIEW / AREA ========================================================= */ body[data-page="cleaning-concierge"] .concierge-information-notice{ padding:18px 0; border-top:1px solid var(--nc-border); border-bottom:1px solid var(--nc-border); background:#F4F7F9; } body[data-page="cleaning-concierge"] .concierge-information-inner{ display:flex; align-items:flex-start; justify-content:center; gap:12px; max-width:850px; margin:auto; text-align:center; } body[data-page="cleaning-concierge"] .information-icon{ flex:0 0 auto; } body[data-page="cleaning-concierge"] .concierge-information-inner h2{ margin:0; color:var(--nc-navy); font-size:.82rem; } body[data-page="cleaning-concierge"] .concierge-information-inner p{ margin:5px 0 0; color:var(--nc-muted); font-size:.62rem; line-height:1.5; } /* ========================================================= SERVICE OPTIONS — PREMIUM SECTION FOUNDATION ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-preview{ position:relative; padding:62px 0 58px; background: radial-gradient( circle at 12% 8%, rgba(74,155,140,.065) 0%, rgba(74,155,140,0) 28% ), radial-gradient( circle at 88% 18%, rgba(30,58,95,.045) 0%, rgba(30,58,95,0) 27% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FAFB 52%, #F4F8F9 100% ); overflow:hidden; isolation:isolate; } /* ========================================================= TOP ACCENT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-preview::before{ content:""; position:absolute; top:0; left:50%; width:min(420px,42%); height:2px; border-radius:999px; background: linear-gradient( 90deg, rgba(30,58,95,0), rgba(74,155,140,.72), rgba(30,58,95,0) ); transform:translateX(-50%); box-shadow: 0 0 14px rgba(74,155,140,.16); pointer-events:none; } /* ========================================================= SECTION HEADING ========================================================= */ body[data-page="cleaning-concierge"] .section-heading{ position:relative; max-width:820px; margin:0 auto 30px; text-align:center; } /* ========================================================= EYEBROW ========================================================= */ body[data-page="cleaning-concierge"] .section-heading .section-eyebrow{ display:inline-flex; align-items:center; justify-content:center; width:max-content; max-width:100%; margin:0 0 13px; padding:6px 11px; border:1px solid rgba(74,155,140,.24); border-radius:999px; color:#216F65; background: linear-gradient( 135deg, rgba(74,155,140,.13), rgba(74,155,140,.045) ); font-size:.58rem; font-weight:800; line-height:1; letter-spacing:.14em; text-transform:uppercase; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 10px rgba(30,58,95,.035); } /* ========================================================= MAIN TITLE ========================================================= */ body[data-page="cleaning-concierge"] .section-heading h2{ position:relative; margin:0; color:#173451; font-size:clamp( 1.55rem, 2.6vw, 2.05rem ); font-weight:800; line-height:1.18; letter-spacing:-.028em; text-wrap:balance; text-shadow: 0 1px 0 rgba(255,255,255,.95); } /* ========================================================= TITLE ACCENT ========================================================= */ body[data-page="cleaning-concierge"] .section-heading h2::after{ content:""; display:block; width:52px; height:3px; margin:14px auto 0; border-radius:999px; background: linear-gradient( 90deg, #1E3A5F 0%, #4A9B8C 100% ); box-shadow: 0 3px 10px rgba(74,155,140,.18); } /* ========================================================= DESCRIPTION ========================================================= */ body[data-page="cleaning-concierge"] .section-heading p{ max-width:700px; margin:15px auto 0; color:#52677D; font-size:.77rem; font-weight:500; line-height:1.7; text-wrap:pretty; } /* ========================================================= SERVICE OPTIONS — PREMIUM CARDS ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; max-width:1050px; margin:0 auto; } /* ========================================================= CARD ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-card{ position:relative; display:flex; align-items:flex-start; gap:13px; width:100%; min-height:132px; padding:20px 18px; border:1px solid rgba(30,58,95,.12); border-radius:18px; background: linear-gradient( 145deg, #FFFFFF 0%, #FFFFFF 62%, #F3F8F7 100% ); color:#173451; text-align:left; box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 7px 17px rgba(30,58,95,.055), 0 18px 34px rgba(30,58,95,.055); overflow:hidden; isolation:isolate; cursor:pointer; transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease, background .28s ease; } /* ========================================================= CARD TOP ACCENT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-card::before{ content:""; position:absolute; top:0; left:18px; width:34px; height:3px; border-radius: 0 0 999px 999px; background: linear-gradient( 90deg, #1E3A5F 0%, #4A9B8C 100% ); box-shadow: 0 3px 9px rgba(74,155,140,.18); transition: width .28s ease, box-shadow .28s ease; } /* ========================================================= CARD BACKGROUND DETAIL ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-card::after{ content:""; position:absolute; width:150px; height:150px; top:-80px; right:-70px; border-radius:50%; background: radial-gradient( circle, rgba(74,155,140,.10) 0%, rgba(74,155,140,0) 70% ); pointer-events:none; z-index:-1; } /* ========================================================= ICON ========================================================= */ body[data-page="cleaning-concierge"] .service-card-icon{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; margin-top:1px; border:1px solid rgba(74,155,140,.20); border-radius:13px; background: linear-gradient( 145deg, #FFFFFF 0%, #EAF5F2 100% ); font-size:1.05rem; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 5px 12px rgba(30,58,95,.065); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } /* ========================================================= CONTENT ========================================================= */ body[data-page="cleaning-concierge"] .service-card-content{ display:flex; flex-direction:column; gap:5px; min-width:0; padding-right:22px; } body[data-page="cleaning-concierge"] .service-card-content strong{ color:#173451; font-size:.78rem; font-weight:800; line-height:1.3; letter-spacing:-.012em; text-wrap:balance; } body[data-page="cleaning-concierge"] .service-card-content > span{ color:#52677D; font-size:.64rem; font-weight:500; line-height:1.52; text-wrap:pretty; } /* ========================================================= ARROW ========================================================= */ body[data-page="cleaning-concierge"] .service-card-arrow{ position:absolute; top:20px; right:17px; display:flex; align-items:center; justify-content:center; width:25px; height:25px; border:1px solid rgba(74,155,140,.16); border-radius:8px; color:#267B6F; background:rgba(74,155,140,.055); font-size:.78rem; font-weight:800; line-height:1; transition: transform .28s ease, background .28s ease, border-color .28s ease, color .28s ease; } /* ========================================================= HOVER ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-card:hover{ transform:translateY(-5px); border-color:rgba(74,155,140,.28); background: linear-gradient( 145deg, #FFFFFF 0%, #FFFFFF 52%, #EFF8F5 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 12px 25px rgba(30,58,95,.075), 0 26px 48px rgba(30,58,95,.085); } body[data-page="cleaning-concierge"] .concierge-service-card:hover::before{ width:58px; box-shadow: 0 4px 12px rgba(74,155,140,.26); } body[data-page="cleaning-concierge"] .concierge-service-card:hover .service-card-icon{ transform:translateY(-2px); border-color:rgba(74,155,140,.32); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 8px 17px rgba(30,58,95,.09); } body[data-page="cleaning-concierge"] .concierge-service-card:hover .service-card-arrow{ transform:translateX(3px); color:#FFFFFF; border-color:rgba(74,155,140,.40); background: linear-gradient( 135deg, #285B70 0%, #4A9B8C 100% ); } /* ========================================================= KEYBOARD FOCUS ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-card:focus-visible{ outline:none; border-color:#4A9B8C; box-shadow: 0 0 0 3px rgba(74,155,140,.14), 0 14px 30px rgba(30,58,95,.10); } /* ========================================================= SERVICE AREA — NORTH CRESCENT PREMIUM PANEL ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-area{ padding:46px 0; background: linear-gradient( 180deg, #F7FAFC 0%, #F2F6F8 100% ); } /* ========================================================= MAIN PANEL ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-area-inner{ position:relative; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr); align-items:center; gap:34px; padding:30px 32px; border:1px solid rgba(30,58,95,.13); border-radius:24px; background: linear-gradient( 135deg, #FFFFFF 0%, #FFFFFF 55%, #F1F8F6 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 10px 24px rgba(30,58,95,.07), 0 24px 50px rgba(30,58,95,.08); overflow:hidden; isolation:isolate; } /* ========================================================= PREMIUM BACKGROUND GLOW ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-area-inner::before{ content:""; position:absolute; top:-150px; right:-110px; width:300px; height:300px; border-radius:50%; background: radial-gradient( circle, rgba(74,155,140,.13) 0%, rgba(74,155,140,.045) 38%, rgba(74,155,140,0) 72% ); pointer-events:none; z-index:-1; } /* ========================================================= SECONDARY LIGHT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-area-inner::after{ content:""; position:absolute; bottom:-120px; left:-90px; width:240px; height:240px; border-radius:50%; background: radial-gradient( circle, rgba(30,58,95,.055) 0%, rgba(30,58,95,0) 70% ); pointer-events:none; z-index:-1; } /* ========================================================= SERVICE AREA EYEBROW ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-area-inner .section-eyebrow{ display:inline-flex; align-items:center; width:max-content; max-width:100%; margin:0 0 11px; padding:6px 10px; border:1px solid rgba(74,155,140,.24); border-radius:999px; color:#216F65; background: linear-gradient( 135deg, rgba(74,155,140,.13), rgba(74,155,140,.045) ); font-size:.58rem; font-weight:800; letter-spacing:.14em; line-height:1; text-transform:uppercase; } /* ========================================================= SERVICE AREA TITLE ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-area-inner h2{ position:relative; margin:0; max-width:760px; color:#173451; font-size:clamp(1.35rem,2.2vw,1.75rem); font-weight:800; line-height:1.2; letter-spacing:-.025em; text-wrap:balance; } /* ========================================================= TITLE ACCENT ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-area-inner h2::after{ content:""; display:block; width:58px; height:3px; margin-top:13px; border-radius:999px; background: linear-gradient( 90deg, #1E3A5F 0%, #4A9B8C 100% ); box-shadow: 0 3px 10px rgba(74,155,140,.18); } /* ========================================================= SERVICE AREA DESCRIPTION ========================================================= */ body[data-page="cleaning-concierge"] .concierge-service-area-inner p{ max-width:690px; margin:14px 0 0; color:#52677D; font-size:.76rem; font-weight:500; line-height:1.7; text-wrap:pretty; } /* ========================================================= LOCATION LIST ========================================================= */ body[data-page="cleaning-concierge"] .service-area-list{ position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; width:100%; max-width:390px; margin-left:auto; padding:14px; border:1px solid rgba(30,58,95,.09); border-radius:18px; background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(246,250,249,.92) ); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 8px 20px rgba(30,58,95,.055); } /* ========================================================= LOCATION CHIP ========================================================= */ body[data-page="cleaning-concierge"] .service-area-list span{ position:relative; display:flex; align-items:center; justify-content:flex-start; min-height:42px; padding:0 12px 0 14px; border:1px solid rgba(30,58,95,.11); border-radius:12px; background: linear-gradient( 145deg, #FFFFFF 0%, #F8FBFA 100% ); color:#173451; font-size:.67rem; font-weight:750; line-height:1; white-space:nowrap; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 10px rgba(30,58,95,.045); transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; } /* ========================================================= LOCATION INDICATOR ========================================================= */ body[data-page="cleaning-concierge"] .service-area-list span::before{ content:""; width:6px; height:6px; flex:0 0 6px; margin-right:9px; border-radius:50%; background:#4A9B8C; box-shadow: 0 0 0 3px rgba(74,155,140,.10); } /* ========================================================= LOCATION HOVER ========================================================= */ body[data-page="cleaning-concierge"] .service-area-list span:hover{ transform:translateY(-2px); border-color:rgba(74,155,140,.30); color:#173451; background: linear-gradient( 145deg, #FFFFFF 0%, #F1F8F6 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 8px 16px rgba(30,58,95,.08); } body[data-page="cleaning-concierge"] .service-area-list span:hover::before{ background:#1E3A5F; box-shadow: 0 0 0 3px rgba(30,58,95,.10); } /* ========================================================= FOOTER — NORTH CRESCENT PREMIUM FOUNDATION ========================================================= */ body[data-page="cleaning-concierge"] .site-footer{ position:relative; padding:68px 0 24px; color:#FFFFFF; background: radial-gradient( circle at 12% 0%, rgba(74,155,140,.13) 0%, rgba(74,155,140,0) 32% ), radial-gradient( circle at 88% 100%, rgba(74,155,140,.09) 0%, rgba(74,155,140,0) 30% ), linear-gradient( 145deg, #0B2238 0%, #0D2942 48%, #102F46 100% ); overflow:hidden; isolation:isolate; } /* ========================================================= PREMIUM TOP LIGHT ========================================================= */ body[data-page="cleaning-concierge"] .site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient( 90deg, rgba(74,155,140,0), rgba(74,155,140,.65), rgba(255,255,255,.25), rgba(74,155,140,.65), rgba(74,155,140,0) ); box-shadow: 0 0 18px rgba(74,155,140,.18); pointer-events:none; } /* ========================================================= PREMIUM AMBIENT GLOW ========================================================= */ body[data-page="cleaning-concierge"] .site-footer::after{ content:""; position:absolute; width:420px; height:420px; top:-260px; right:-180px; border-radius:50%; background: radial-gradient( circle, rgba(74,155,140,.11) 0%, rgba(74,155,140,0) 70% ); pointer-events:none; z-index:-1; } /* ========================================================= MAIN FOOTER GRID ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid{ position:relative; display:grid; grid-template-columns: minmax(240px,1.35fr) minmax(130px,.72fr) minmax(180px,1fr) minmax(210px,.95fr); gap:48px; max-width:1160px; margin:0 auto; } /* ========================================================= FOOTER BRAND — PREMIUM IDENTITY ========================================================= */ body[data-page="cleaning-concierge"] .footer-logo-link{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:76px; height:76px; margin-bottom:15px; border:1px solid rgba(255,255,255,.16); border-radius:20px; background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(244,249,248,.96) 100% ); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px rgba(0,0,0,.16), 0 0 0 5px rgba(74,155,140,.055); overflow:hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease; } /* SOFT LOGO GLOW */ body[data-page="cleaning-concierge"] .footer-logo-link::after{ content:""; position:absolute; width:55px; height:55px; right:-22px; bottom:-25px; border-radius:50%; background: radial-gradient( circle, rgba(74,155,140,.18) 0%, rgba(74,155,140,0) 70% ); pointer-events:none; } /* LOGO */ body[data-page="cleaning-concierge"] .footer-logo{ position:relative; z-index:1; width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 3px 5px rgba(30,58,95,.12)); } /* LOGO HOVER */ body[data-page="cleaning-concierge"] .footer-logo-link:hover{ transform:translateY(-3px); border-color:rgba(74,155,140,.38); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 14px 30px rgba(0,0,0,.19), 0 0 0 5px rgba(74,155,140,.075); } /* COMPANY NAME */ body[data-page="cleaning-concierge"] .footer-company-name{ max-width:340px; margin:0; color:#FFFFFF; font-size:.98rem; font-weight:800; line-height:1.3; letter-spacing:-.015em; text-wrap:balance; } /* DESCRIPTION */ body[data-page="cleaning-concierge"] .footer-description{ max-width:340px; margin:10px 0 0; color:rgba(255,255,255,.74); font-size:.70rem; font-weight:500; line-height:1.65; text-wrap:pretty; } /* BRAND TAGLINE */ body[data-page="cleaning-concierge"] .footer-tagline{ position:relative; max-width:340px; margin:13px 0 0; padding-left:13px; color:#9ED0C5; font-size:.69rem; font-weight:700; line-height:1.55; letter-spacing:.005em; text-wrap:pretty; } /* TAGLINE ACCENT */ body[data-page="cleaning-concierge"] .footer-tagline::before{ content:""; position:absolute; left:0; top:4px; width:3px; height:calc(100% - 8px); border-radius:999px; background: linear-gradient( 180deg, #4A9B8C 0%, #9ED0C5 100% ); box-shadow: 0 0 9px rgba(74,155,140,.25); } body[data-page="cleaning-concierge"] .footer-tagline{ color:#9ED0C5; } /* ========================================================= FOOTER NAVIGATION — PREMIUM LINKS ========================================================= */ body[data-page="cleaning-concierge"] .footer-column h3{ position:relative; display:inline-block; margin:0 0 18px; padding-bottom:9px; color:#FFFFFF; font-size:.70rem; font-weight:800; line-height:1; letter-spacing:.13em; text-transform:uppercase; } /* TITLE ACCENT */ body[data-page="cleaning-concierge"] .footer-column h3::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; border-radius:999px; background: linear-gradient( 90deg, #4A9B8C 0%, #9ED0C5 100% ); box-shadow: 0 0 8px rgba(74,155,140,.24); } /* ========================================================= LINK LIST ========================================================= */ body[data-page="cleaning-concierge"] .footer-links{ display:flex; flex-direction:column; gap:3px; margin:0; padding:0; list-style:none; } /* ========================================================= LINK ITEM ========================================================= */ body[data-page="cleaning-concierge"] .footer-links li{ margin:0; padding:0; } /* ========================================================= LINK ========================================================= */ body[data-page="cleaning-concierge"] .footer-links a{ position:relative; display:inline-flex; align-items:center; width:max-content; max-width:100%; min-height:29px; padding:3px 0 3px 13px; color:rgba(255,255,255,.70); text-decoration:none; font-size:.67rem; font-weight:500; line-height:1.35; transition: color .24s ease, transform .24s cubic-bezier(.2,.8,.2,1); } /* ========================================================= LINK INDICATOR ========================================================= */ body[data-page="cleaning-concierge"] .footer-links a::before{ content:""; position:absolute; left:0; top:50%; width:4px; height:4px; border-radius:50%; background:rgba(74,155,140,.72); transform: translateY(-50%) scale(.75); box-shadow: 0 0 0 3px rgba(74,155,140,.055); transition: transform .24s ease, background .24s ease, box-shadow .24s ease; } /* ========================================================= LINK HOVER ========================================================= */ body[data-page="cleaning-concierge"] .footer-links a:hover{ color:#FFFFFF; transform:translateX(4px); } body[data-page="cleaning-concierge"] .footer-links a:hover::before{ background:#4A9B8C; transform: translateY(-50%) scale(1); box-shadow: 0 0 0 3px rgba(74,155,140,.10), 0 0 9px rgba(74,155,140,.30); } /* ========================================================= FOOTER SERVICES — PREMIUM SERVICE NAVIGATION ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(3) h3{ position:relative; display:inline-block; margin:0 0 18px; padding-bottom:9px; color:#FFFFFF; font-size:.70rem; font-weight:800; line-height:1; letter-spacing:.13em; text-transform:uppercase; } body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(3) h3::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; border-radius:999px; background:linear-gradient(90deg,#4A9B8C 0%,#9ED0C5 100%); box-shadow:0 0 8px rgba(74,155,140,.24); } /* ========================================================= SERVICES LIST ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(3) .footer-links{ display:flex; flex-direction:column; gap:2px; margin:0; padding:0; list-style:none; } body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(3) .footer-links li{ margin:0; padding:0; } /* ========================================================= SERVICE LINK ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(3) .footer-links a{ position:relative; display:flex; align-items:center; width:100%; min-height:31px; padding:4px 0 4px 15px; color:rgba(255,255,255,.70); text-decoration:none; font-size:.66rem; font-weight:550; line-height:1.35; transition: color .24s ease, transform .24s cubic-bezier(.2,.8,.2,1); } /* ========================================================= SERVICE INDICATOR ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(3) .footer-links a::before{ content:""; position:absolute; left:0; top:50%; width:5px; height:5px; border-radius:50%; background:#4A9B8C; transform:translateY(-50%) scale(.72); box-shadow:0 0 0 3px rgba(74,155,140,.055); transition: transform .24s ease, background .24s ease, box-shadow .24s ease; } /* ========================================================= SERVICE HOVER ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(3) .footer-links a:hover{ color:#FFFFFF; transform:translateX(4px); } body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(3) .footer-links a:hover::before{ background:#9ED0C5; transform:translateY(-50%) scale(1); box-shadow: 0 0 0 3px rgba(74,155,140,.10), 0 0 9px rgba(74,155,140,.30); /* ========================================================= FOOTER CONTACT — PREMIUM CONTACT PANEL ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) h3{ position:relative; display:inline-block; margin:0 0 18px; padding-bottom:9px; color:#FFFFFF; font-size:.70rem; font-weight:800; line-height:1; letter-spacing:.13em; text-transform:uppercase; } body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) h3::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; border-radius:999px; background:linear-gradient( 90deg, #4A9B8C 0%, #9ED0C5 100% ); box-shadow:0 0 8px rgba(74,155,140,.24); } /* ========================================================= CONTACT INFORMATION ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) .footer-contact-list{ display:flex; flex-direction:column; gap:5px; margin:0; padding:0; list-style:none; } body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) .footer-contact-list li{ display:flex; align-items:flex-start; gap:10px; margin:0; padding:8px 10px; border:1px solid rgba(255,255,255,.07); border-radius:11px; background:rgba(255,255,255,.025); color:rgba(255,255,255,.72); font-size:.64rem; line-height:1.45; transition: background .24s ease, border-color .24s ease, transform .24s ease; } /* ========================================================= CONTACT ICON ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) .footer-contact-icon{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; border:1px solid rgba(74,155,140,.22); border-radius:8px; color:#9ED0C5; background:rgba(74,155,140,.08); font-size:.70rem; } /* ========================================================= CONTACT LINKS ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) .footer-contact-list a{ color:rgba(255,255,255,.74); text-decoration:none; transition: color .24s ease, transform .24s ease; } body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) .footer-contact-list a:hover{ color:#FFFFFF; } /* ========================================================= CONTACT ROW HOVER ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) .footer-contact-list li:hover{ transform:translateX(3px); border-color:rgba(74,155,140,.18); background: linear-gradient( 135deg, rgba(74,155,140,.08), rgba(255,255,255,.035) ); } /* ========================================================= CONTACT CTA ========================================================= */ body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) .footer-contact-button{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin-top:12px; padding:0 16px; border:1px solid rgba(255,255,255,.16); border-radius:12px; color:#FFFFFF; background: linear-gradient( 135deg, #1E3A5F 0%, #285B70 55%, #4A9B8C 100% ); font-size:.64rem; font-weight:800; letter-spacing:.02em; text-decoration:none; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 18px rgba(0,0,0,.14); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .25s ease; } body[data-page="cleaning-concierge"] .footer-grid > .footer-column:nth-child(4) .footer-contact-button:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow: 0 1px 0 rgba(255,255,255,.30) inset, 0 12px 24px rgba(0,0,0,.18), 0 0 18px rgba(74,155,140,.10); } } body[data-page="cleaning-concierge"] .footer-contact-list li{ display:flex; align-items:flex-start; gap:7px; } body[data-page="cleaning-concierge"] .footer-contact-icon{ flex:0 0 auto; } body[data-page="cleaning-concierge"] .footer-contact-button{ display:inline-flex; margin-top:10px; padding:9px 13px; border-radius:999px; background:var(--nc-gradient); color:#fff; text-decoration:none; font-size:.62rem; font-weight:700; } body[data-page="cleaning-concierge"] .footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:30px; padding-top:15px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.52); font-size:.58rem; } body[data-page="cleaning-concierge"] .footer-bottom-links{ display:flex; gap:8px; } body[data-page="cleaning-concierge"] .footer-bottom a{ color:inherit; text-decoration:none; } /* ========================================================= FLOATING BUTTON / LOADING ========================================================= */ body[data-page="cleaning-concierge"] .floating-concierge-button{ position:fixed; right:22px; bottom:22px; z-index:500; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 17px; border:0; border-radius:999px; color:#fff; background:var(--nc-gradient); box-shadow:0 14px 32px rgba(20,42,69,.20); font-size:.72rem; font-weight:700; } body[data-page="cleaning-concierge"] .concierge-loading-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:rgba(13,31,51,.35); backdrop-filter:blur(5px); } body[data-page="cleaning-concierge"] .concierge-loading-card{ padding:22px 26px; border-radius:16px; background:#fff; box-shadow:var(--nc-shadow); text-align:center; } body[data-page="cleaning-concierge"] .concierge-loading-spinner{ width:30px; height:30px; margin:auto; border:3px solid #DDE6EC; border-top-color:var(--nc-teal); border-radius:50%; animation:ncSpin .8s linear infinite; } @keyframes ncSpin{ to{transform:rotate(360deg)} } body[data-page="cleaning-concierge"] .concierge-loading-card p{ margin:10px 0 0; color:var(--nc-soft); font-size:.68rem; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1050px){ body[data-page="cleaning-concierge"] .main-navigation > a{ padding-inline:8px; font-size:.72rem; } body[data-page="cleaning-concierge"] .concierge-hero-grid{ grid-template-columns:minmax(0,1fr) 370px; gap:28px; } body[data-page="cleaning-concierge"] .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:900px){ body[data-page="cleaning-concierge"] .main-navigation{ display:none; } body[data-page="cleaning-concierge"] .mobile-menu-toggle{ display:block; } body[data-page="cleaning-concierge"] .mobile-navigation.mobile-navigation-open{ display:flex !important; } body[data-page="cleaning-concierge"] .mobile-navigation{ position:absolute; left:20px; right:20px; top:calc(100% + 8px); flex-direction:column; gap:3px; padding:8px; border:1px solid var(--nc-border); border-radius:16px; background:rgba(255,255,255,.99); box-shadow:var(--nc-shadow); } body[data-page="cleaning-concierge"] .mobile-navigation > a{ min-height:44px; padding:11px 13px; border-radius:10px; color:var(--nc-text); text-decoration:none; font-size:.8rem; } body[data-page="cleaning-concierge"] .mobile-navigation .mobile-nav-cta{ text-align:center; color:#fff; background:var(--nc-gradient); } body[data-page="cleaning-concierge"] .concierge-hero-grid{ grid-template-columns:1fr; } body[data-page="cleaning-concierge"] .concierge-entry-card{ max-width:520px; margin:auto; } /* Chat remains a single full-width card */ body[data-page="cleaning-concierge"] .concierge-chat-layout{ display:block; } /* Support information becomes two columns */ body[data-page="cleaning-concierge"] .concierge-support-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } body[data-page="cleaning-concierge"] .concierge-service-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } body[data-page="cleaning-concierge"] .concierge-service-area-inner{ flex-direction:column; align-items:flex-start; } body[data-page="cleaning-concierge"] .service-area-list{ justify-content:flex-start; max-width:none; } } @media (max-width:600px){ body[data-page="cleaning-concierge"] .container{ width:min(calc(100% - 24px),1240px); } body[data-page="cleaning-concierge"] .header-inner{ min-height:66px; } body[data-page="cleaning-concierge"] .brand-logo{ width:42px; height:42px; } body[data-page="cleaning-concierge"] .brand-name{ font-size:.88rem; } body[data-page="cleaning-concierge"] .brand-subtitle{ font-size:.52rem; } body[data-page="cleaning-concierge"] .concierge-hero{ padding:36px 0 34px; } body[data-page="cleaning-concierge"] #conciergeHeroTitle{ font-size:clamp(2rem,10vw,3rem); } body[data-page="cleaning-concierge"] .concierge-hero-description{ font-size:.82rem; } body[data-page="cleaning-concierge"] .concierge-trust-points{ flex-direction:column; gap:6px; } body[data-page="cleaning-concierge"] .concierge-entry-card{ padding:20px; } body[data-page="cleaning-concierge"] #conciergeChatSection{ padding:28px 0 24px; } body[data-page="cleaning-concierge"] .concierge-chat-card{ min-height:480px; border-radius:16px; } body[data-page="cleaning-concierge"] .concierge-messages{ min-height:260px; padding:13px; } body[data-page="cleaning-concierge"] .quick-action-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* Support information becomes one column */ body[data-page="cleaning-concierge"] .concierge-support-info{ padding:22px 0 28px; } body[data-page="cleaning-concierge"] .concierge-support-grid{ grid-template-columns:1fr; gap:10px; } body[data-page="cleaning-concierge"] .concierge-support-card{ padding:14px; } body[data-page="cleaning-concierge"] .concierge-service-preview{ padding:34px 0; } body[data-page="cleaning-concierge"] .concierge-service-grid{ grid-template-columns:1fr; } body[data-page="cleaning-concierge"] .footer-grid{ grid-template-columns:1fr; } body[data-page="cleaning-concierge"] .footer-bottom{ flex-direction:column; align-items:flex-start; } body[data-page="cleaning-concierge"] .floating-concierge-button{ right:12px; bottom:12px; } } @media (prefers-reduced-motion:reduce){ body[data-page="cleaning-concierge"] *, body[data-page="cleaning-concierge"] *::before, body[data-page="cleaning-concierge"] *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ========================================================= FIX — CHAT HIDDEN UNTIL EMAIL IS SUBMITTED ========================================================= */ body[data-page="cleaning-concierge"] #conciergeChatSection[hidden] { display: none !important; } /* ========================================================= PORTAL FRAME — MOBILE ========================================================= */ @media (max-width:600px){ html:has(body[data-page="cleaning-concierge"]){ background:#fff; } body[data-page="cleaning-concierge"]{ width:100%; border-left:0; border-right:0; box-shadow:none; } } /* ========================================================= NORTH CRESCENT CONCIERGE EMBED MODE ========================================================= */ /* * Activated when cleaning-concierge.html is opened with: * * /cleaning-concierge.html?embed=1 * * The full Concierge page remains unchanged when accessed * normally. */ /* --------------------------------------------------------- EMBED BODY --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode{ width:100%; min-height:100%; margin:0; padding:0; overflow:hidden; background:#F7FAFC; } /* --------------------------------------------------------- HIDE FULL-PAGE ELEMENTS --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode .site-header, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-hero, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-support-info, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-information-notice, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-service-preview, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-service-area, body[data-page="cleaning-concierge"].concierge-embed-mode .site-footer, body[data-page="cleaning-concierge"].concierge-embed-mode #floatingConciergeButton, body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeLoadingOverlay{ display:none !important; } /* --------------------------------------------------------- MAIN --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode main{ width:100%; min-height:100vh; margin:0; padding:0; } /* --------------------------------------------------------- EMAIL ENTRY CARD --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeEntryCard{ width:100%; max-width:none; min-height:100vh; margin:0; padding:24px; display:flex; flex-direction:column; justify-content:center; border:0; border-radius:0; box-shadow:none; background:#F7FAFC; } /* --------------------------------------------------------- CHAT SECTION --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeChatSection{ width:100%; min-height:100vh; margin:0; padding:0; border:0; background:#F7FAFC; } /* --------------------------------------------------------- CHAT CONTAINER --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeChatSection .container{ width:100%; max-width:none; margin:0; padding:0; } /* --------------------------------------------------------- CHAT LAYOUT --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-chat-layout{ width:100%; max-width:none; margin:0; padding:0; display:block; } /* --------------------------------------------------------- CHAT CARD --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-chat-card{ width:100%; min-height:100vh; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:#ffffff; } /* --------------------------------------------------------- CHAT MESSAGES --------------------------------------------------------- */ body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-messages{ min-height:0; } /* --------------------------------------------------------- MOBILE EMBED --------------------------------------------------------- */ @media (max-width:600px){ body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeEntryCard{ padding:18px; } } /* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ body[data-page="cleaning-concierge"].concierge-embed-mode *{ scroll-behavior:auto !important; } } /* ========================================================= NORTH CRESCENT CONCIERGE EMBED MODE ========================================================= */ body[data-page="cleaning-concierge"].concierge-embed-mode{ width:100%; min-height:100%; margin:0; padding:0; overflow:hidden; background:#F7FAFC; } body[data-page="cleaning-concierge"].concierge-embed-mode .site-header, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-hero, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-support-info, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-information-notice, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-service-preview, body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-service-area, body[data-page="cleaning-concierge"].concierge-embed-mode .site-footer, body[data-page="cleaning-concierge"].concierge-embed-mode #floatingConciergeButton, body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeLoadingOverlay{ display:none !important; } body[data-page="cleaning-concierge"].concierge-embed-mode main{ width:100%; min-height:100vh; margin:0; padding:0; } body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeEntryCard{ width:100%; max-width:none; min-height:100vh; margin:0; padding:24px; display:flex; flex-direction:column; justify-content:center; border:0; border-radius:0; box-shadow:none; background:#F7FAFC; } body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeChatSection{ width:100%; min-height:100vh; margin:0; padding:0; border:0; background:#F7FAFC; } body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeChatSection .container{ width:100%; max-width:none; margin:0; padding:0; } body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-chat-layout{ width:100%; max-width:none; margin:0; padding:0; display:block; } body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-chat-card{ width:100%; min-height:100vh; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:#ffffff; } body[data-page="cleaning-concierge"].concierge-embed-mode .concierge-messages{ min-height:0; } @media (max-width:600px){ body[data-page="cleaning-concierge"].concierge-embed-mode #conciergeEntryCard{ padding:18px; } } @media (prefers-reduced-motion:reduce){ body[data-page="cleaning-concierge"].concierge-embed-mode *{ scroll-behavior:auto !important; } } /* ========================================================= PREMIUM BRAND NAME ========================================================= */ body[data-page="cleaning-concierge"] .brand-name{ position:relative; display:inline-block; color:var(--nc-navy); font-size:1.28rem; font-weight:800; letter-spacing:.015em; text-transform:uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.95); transition: color .3s ease, transform .3s ease, text-shadow .3s ease; } /* ========================================================= PREMIUM BRAND HOVER ========================================================= */ body[data-page="cleaning-concierge"] .brand:hover .brand-name{ color:var(--nc-teal); transform:translateY(-1px); text-shadow: 0 2px 8px rgba(74,155,140,.18); } /* ========================================================= BRAND SUBTITLE ========================================================= */ body[data-page="cleaning-concierge"] .brand-subtitle{ display:block; color:#5B6F86; font-size:.72rem; font-weight:700; letter-spacing:.075em; line-height:1.15; white-space:nowrap; text-rendering:geometricPrecision; text-shadow: 0 1px 0 rgba(255,255,255,.9); transition: color .3s ease, transform .3s ease; } /* ========================================================= BRAND SUBTITLE HOVER ========================================================= */ body[data-page="cleaning-concierge"] .brand:hover .brand-subtitle{ color:var(--nc-teal); } /* ========================================================= NORTH CRESCENT CONCIERGE MOBILE FULLSCREEN CHAT — STEP 1 CSS ONLY — EXISTING CHAT STATE ========================================================= */ @media (max-width: 600px) { /* ------------------------------------------------------- 1. LOCK THE PAGE WHEN THE CHAT IS ACTIVE ------------------------------------------------------- */ body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) { height: var(--nc-chat-viewport-height, 100dvh); min-height: 0; overflow: hidden; overscroll-behavior: none; } /* ------------------------------------------------------- 2. HIDE CONTENT OUTSIDE THE ACTIVE CHAT ------------------------------------------------------- */ body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) .site-header, body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) .concierge-hero, body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) .concierge-support-info, body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) .concierge-information-notice, body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) .concierge-service-preview, body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) .concierge-service-area, body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) .site-footer, body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) #floatingConciergeButton, body[data-page="cleaning-concierge"]:has( #conciergeChatSection.concierge-chat-active ) .floating-concierge-button { display: none !important; } /* ------------------------------------------------------- 3. MAKE THE CHAT SECTION FILL THE SCREEN ------------------------------------------------------- */ body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active { position: fixed; top: 0; left: 0; width: 100%; height: var(--nc-chat-viewport-height, 100dvh); min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: #F7FAFC; z-index: 9999; } /* ------------------------------------------------------- 4. REMOVE THE OUTER CONTAINER SPACING ------------------------------------------------------- */ body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .container { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; } /* ------------------------------------------------------- 5. LET THE CHAT LAYOUT USE ALL AVAILABLE HEIGHT ------------------------------------------------------- */ body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-chat-layout { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; } /* ------------------------------------------------------- 6. REMOVE THE CARD'S FIXED MINIMUM HEIGHT ------------------------------------------------------- */ body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-chat-card { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; height: 100%; min-height: 0; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; } /* ------------------------------------------------------- 7. GIVE THE MESSAGES THE REMAINING SPACE ------------------------------------------------------- */ body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-messages { flex: 1 1 auto; min-height: 0; max-height: none; padding: 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } /* ========================================================= MOBILE FIX — DECORATIVE CHAT PHONE ========================================================= */ @media screen and (max-width: 600px) { body[data-page="cleaning-concierge"] .concierge-chat-preview { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ========================================================= MOBILE CHAT — VISIBLE VIEWPORT ADJUSTMENT STEP 2A ========================================================= */ @media (max-width: 600px) { body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active { top: var(--nc-chat-viewport-top, 0px); height: var(--nc-chat-viewport-height, 100dvh); } } /* ========================================================= NORTH CRESCENT CONCIERGE MOBILE KEYBOARD — FIXED MESSAGE COMPOSER STEP 3A ========================================================= */ @media (max-width: 600px) { body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-input-area { position: fixed !important; top: var(--nc-chat-composer-top, auto) !important; bottom: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; z-index: 10001 !important; background: #FFFFFF; padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; } body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-messages { padding-bottom: 24px; } } /* ========================================================= NORTH CRESCENT CONCIERGE MOBILE CHAT — MESSAGE / INPUT LAYOUT CORRECTION STEP 4 ========================================================= */ @media (max-width: 600px) { /* CHAT CARD: USE THE VISIBLE SCREEN HEIGHT */ body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-chat-card { display: flex !important; flex-direction: column !important; height: var(--nc-chat-viewport-height, 100dvh) !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; } /* MESSAGES: USE ONLY THE SPACE ABOVE THE INPUT */ body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-messages { position: relative !important; display: flex; flex-direction: column; flex: 1 1 0% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* INPUT: RETURN IT TO THE CHAT'S NORMAL LAYOUT */ body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-input-area { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; z-index: 2 !important; box-sizing: border-box; background: #FFFFFF; padding-bottom: env(safe-area-inset-bottom, 0px); } } /* ========================================================= NORTH CRESCENT CONCIERGE MOBILE — MESSAGE COMPOSER WIDTH ========================================================= */ @media (max-width: 600px) { body[data-page="cleaning-concierge"] #conciergeChatSection.concierge-chat-active .concierge-input-area { width: calc(100% - 20px) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 12px 12px 0 0 !important; box-sizing: border-box !important; } }