/* ========================================================= ES Global — Landing design system v3 Brand colors: blue / green / orange on deep navy. Light-based, multi-color, modern. No build step. Brand tokens (--navy, --navy-2, --blue, --green, --orange, --red) are injected inline from CMS settings in . ========================================================= */ :root { --blue: #259bca; --green: #99c020; --orange: #ef9410; --red: #eb1821; --navy: #0a1628; --navy-2: #0f2040; --navy-3: #0d1e38; --ink: #04090f; --bg: #ffffff; --light-bg: #f8fafc; --light-2: #eef6fb; --light-border: #e2e8f0; --text: #1a2332; --text-2: #334155; --muted: #64748b; --muted-light: #94a3b8; /* secondary text on navy */ --white: #ffffff; --card-border: rgba(255,255,255,.08); --card-bg: rgba(255,255,255,.04); --radius: 14px; --radius-sm: 8px; --radius-lg: 18px; --radius-xl: 22px; --shadow: 0 24px 64px rgba(10,22,40,.12); --shadow-soft: 0 14px 38px rgba(10,22,40,.08); --container: 1200px; --section-y: clamp(64px, 8vw, 100px); --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Outfit", "Inter", system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -1px; font-weight: 800; color: var(--navy); } .h-xl { font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 900; letter-spacing: -1.8px; line-height: 1.12; } .h-lg { font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 900; letter-spacing: -1.2px; line-height: 1.18; } .h-md { font-size: clamp(1.35rem, 2.2vw, 1.8rem); } .lead { font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--muted); line-height: 1.7; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } .grad-text { background: linear-gradient(100deg, var(--blue), var(--green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .accent-orange { color: var(--orange); } .text-muted { color: var(--muted); } .center { text-align: center; } .mx-auto { margin-inline: auto; } .maxw-680 { max-width: 680px; } .maxw-760 { max-width: 760px; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: .97rem; padding: 14px 26px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--green); color: #fff; cursor: pointer; transition: transform .18s ease, background .2s ease, box-shadow .2s ease; box-shadow: 0 10px 26px -10px rgba(153,192,32,.75); } .btn:hover { background: #86a81c; transform: translateY(-2px); } .btn-sm { padding: 9px 18px; font-size: .85rem; } .nav-demo { box-shadow: 0 8px 20px -8px rgba(153,192,32,.7); } .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .btn .arrow { transition: transform .2s ease; } .btn:hover .arrow { transform: translateX(4px); } .btn-blue { background: var(--blue); box-shadow: 0 10px 26px -10px rgba(37,155,202,.7); } .btn-blue:hover { background: #1d8ab5; } .btn-ghost { background: transparent; color: var(--blue); border: 1px solid currentColor; box-shadow: none; opacity: .9; } .btn-ghost:hover { background: rgba(37,155,202,.08); transform: translateY(-2px); opacity: 1; } .bg-navy .btn-ghost, .hero .btn-ghost, .cta-band .btn-ghost { color: rgba(255,255,255,.7); } .bg-navy .btn-ghost:hover, .hero .btn-ghost:hover, .cta-band .btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; } .btn-block { width: 100%; } .btn-lg { padding: 16px 32px; font-size: 1rem; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 200; background: rgba(10,22,40,.96); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid rgba(37,155,202,.18); } .site-header .container { max-width: 1320px; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 70px; flex-wrap: nowrap; } .brand { display: flex; align-items: center; gap: 11px; color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: -.5px; flex: none; } .brand img { height: 60px; width: auto; } .brand .brand-mark { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 800; } .nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; } .nav-links a { color: rgba(255,255,255,.6); font-weight: 500; font-size: .88rem; white-space: nowrap; transition: color .15s ease; } .nav-links a:hover { color: #fff; } .nav-cta { display: flex; align-items: center; gap: 12px; flex: none; } .nav-cta .btn, .nav-demo { white-space: nowrap; } /* Language toggle — a sliding switch; each click flips to the other language */ .lang-toggle { position: relative; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 100px; padding: 3px; background: rgba(255,255,255,.06); overflow: hidden; } .lang-toggle::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 100px; background: var(--blue); transition: transform .22s ease; } .lang-toggle.es::before { transform: translateX(100%); } .lang-toggle .lt-opt { position: relative; z-index: 1; min-width: 34px; text-align: center; font-size: .74rem; font-weight: 800; color: rgba(255,255,255,.6); padding: 4px 6px; line-height: 1; transition: color .2s ease; } .lang-toggle.en .lt-en, .lang-toggle.es .lt-es { color: #fff; } .nav-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; } .nav-toggle svg { width: 26px; height: 26px; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; } .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,12,20,.68) 0%, rgba(6,12,20,.40) 48%, rgba(6,12,20,.10) 100%), linear-gradient(180deg, rgba(6,12,20,.06), rgba(6,12,20,.30)); } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(37,155,202,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(37,155,202,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000, transparent 90%); } .hero .container { position: relative; z-index: 2; } .hero-grid { display: grid; grid-template-columns: 1fr 460px; gap: clamp(36px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 90px); } .hero h1 { margin: 22px 0 22px; color: #fff; } .hero h1 .accent { color: var(--orange); } /* Highlighted word in the hero headline (brand green, matching the reference) */ .hero-accent { color: var(--green); } .hero .hero-sub { color: var(--muted-light); font-size: 1.05rem; line-height: 1.7; max-width: 540px; } .hero .hero-body { color: rgba(255,255,255,.55); margin-top: 14px; max-width: 540px; font-size: .96rem; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero-badge { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0; color: var(--green); padding: 0; border-radius: 0; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } /* live waste counter */ .waste-counter { display: flex; align-items: center; gap: 18px; margin-top: 32px; background: rgba(153,192,32,.08); border: 1px solid rgba(153,192,32,.24); border-radius: 14px; padding: 18px 22px; max-width: 520px; } .counter-icon { width: 46px; height: 46px; border-radius: 11px; background: rgba(153,192,32,.16); display: grid; place-items: center; flex: none; color: var(--green); } .counter-icon svg { width: 24px; height: 24px; } .counter-label { font-size: .7rem; color: var(--muted-light); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .counter-value { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--green); letter-spacing: -1.5px; line-height: 1.1; } .counter-note { font-size: .7rem; color: rgba(153,192,32,.7); margin-top: 2px; } .hero-trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; } .trust-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: rgba(255,255,255,.55); } .trust-pill .tk { color: var(--green); display: inline-flex; } .trust-pill svg { width: 14px; height: 14px; } /* ---------- Form card (hero + assessment) ---------- */ .lead-card { background: rgba(255,255,255,.04); color: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 36px); border: 1px solid rgba(37,155,202,.2); backdrop-filter: blur(12px); box-shadow: var(--shadow); } .lead-card h3 { color: #fff; font-size: 1.25rem; } .lead-card .sub { color: var(--muted-light); font-size: .85rem; margin-top: 6px; line-height: 1.5; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 20px; } .form-grid .full { grid-column: 1 / -1; } .field label { display: block; font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; } .field input, .field select { width: 100%; padding: 12px 13px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.06); font: inherit; font-size: .9rem; color: #fff; transition: border .15s ease, background .15s ease; } .field input::placeholder { color: rgba(255,255,255,.25); } .field select { color: rgba(255,255,255,.7); cursor: pointer; } .field select option { background: #0a1628; color: #fff; } .field input:focus, .field select:focus { outline: none; border-color: var(--blue); background: rgba(37,155,202,.08); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { text-align: center; color: rgba(255,255,255,.3); font-size: .72rem; margin-top: 12px; } .field-error { color: #fca5a5; font-size: .76rem; margin-top: 5px; } .field-hint { display: block; color: var(--muted, #94a3b8); font-size: .74rem; margin-top: 5px; } .opt-tag { color: var(--muted, #94a3b8); font-weight: 400; font-size: .82em; } .alert { border-radius: var(--radius-sm); padding: 12px 15px; font-size: .9rem; margin-bottom: 16px; background: rgba(153,192,32,.14); color: #c5e86a; border: 1px solid rgba(153,192,32,.4); } /* bullet checklist (assessment "what's included") */ .hero-bullets { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; } .hero-bullets li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.45; } .hero-bullets li .check { background: var(--green); } /* media frame (image inside a section) */ .media-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(37,155,202,.2); background: rgba(255,255,255,.04); box-shadow: var(--shadow); } .media-frame img { width: 100%; height: auto; display: block; } /* product image band (light section) */ .product-image { margin-top: 48px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--light-border); background: #fff; box-shadow: var(--shadow-soft); max-width: 980px; margin-inline: auto; } .product-image img { width: 100%; height: auto; display: block; } /* ---------- Section base ---------- */ .section { padding-block: var(--section-y); position: relative; } .section.tight { padding-block: clamp(40px, 5vw, 64px); } .section-head { max-width: 720px; margin-bottom: 44px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head .eyebrow { margin-bottom: 14px; } .section-head p { margin-top: 16px; } /* Light sections — breathing glow circle + slow radar ring (glow only, no grid) */ .bg-paper { position: relative; overflow: hidden; background: var(--light-bg); } .bg-paper > .container { position: relative; z-index: 1; } .bg-paper::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 480px; height: 480px; left: -130px; bottom: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(153,192,32,.18), transparent 62%); animation: glow-breathe 12s ease-in-out infinite; } .bg-paper::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 340px; height: 340px; right: -50px; top: -110px; border-radius: 50%; border: 1px solid rgba(37,155,202,.18); animation: ring-ping 9s ease-out infinite; } .bg-light-2 { background: var(--light-2); } /* Navy sections — breathing blue glow circle + radar ring (glow only, no grid) */ .bg-navy { position: relative; overflow: hidden; background: var(--navy); } .bg-navy > .container { position: relative; z-index: 1; } .bg-navy::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 580px; height: 580px; right: -150px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(37,155,202,.32), transparent 62%); animation: glow-breathe 12s ease-in-out infinite; } .bg-navy::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 320px; height: 320px; right: -10px; top: -50px; border-radius: 50%; border: 1px solid rgba(37,155,202,.25); animation: ring-ping 8s ease-out infinite; } .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; } .bg-navy .lead, .bg-navy .text-muted, .bg-navy .section-desc { color: var(--muted-light); } .bg-navy .prose p { color: var(--muted-light); } /* ---------- Per-section glow variants (different color + corner each) ---------- */ /* navy sections */ #leak::after { background: radial-gradient(circle, rgba(239,148,16,.24), transparent 62%); right: auto; left: -150px; top: -180px; } #leak::before { border-color: rgba(37,155,202,.22); right: auto; left: 50px; top: auto; bottom: -90px; } #assessment::after { background: radial-gradient(circle, rgba(37,155,202,.32), transparent 62%); } #assessment::before { border-color: rgba(153,192,32,.24); right: auto; left: -40px; top: 140px; } #why::after { background: radial-gradient(circle, rgba(153,192,32,.24), transparent 62%); top: auto; bottom: -180px; } #why::before { border-color: rgba(37,155,202,.22); right: auto; left: -30px; top: -60px; } #cost::after { background: radial-gradient(circle, rgba(235,24,33,.2), transparent 62%); } #cost::before { border-color: rgba(235,24,33,.22); right: auto; left: 40px; top: auto; bottom: -80px; } #comfort::after { background: radial-gradient(circle, rgba(153,192,32,.26), transparent 62%); right: auto; left: -150px; top: -160px; } #comfort::before { border-color: rgba(153,192,32,.22); } #dashboard::after { background: radial-gradient(circle, rgba(37,155,202,.3), transparent 62%); right: auto; left: -140px; top: auto; bottom: -180px; } #dashboard::before { border-color: rgba(239,148,16,.26); } #contact::after { background: radial-gradient(circle, rgba(239,148,16,.22), transparent 62%); } #contact::before { border-color: rgba(37,155,202,.22); right: auto; left: 40px; top: auto; bottom: -80px; } /* light sections */ #how::after { background: radial-gradient(circle, rgba(37,155,202,.16), transparent 62%); left: auto; right: -130px; top: -160px; bottom: auto; } #how::before { border-color: rgba(153,192,32,.2); right: auto; left: -40px; top: auto; bottom: -100px; } #features::after { background: radial-gradient(circle, rgba(239,148,16,.14), transparent 62%); } #features::before { border-color: rgba(37,155,202,.2); } #results::after { background: radial-gradient(circle, rgba(153,192,32,.16), transparent 62%); left: auto; right: -130px; top: -150px; bottom: auto; } #results::before { border-color: rgba(239,148,16,.2); right: auto; left: -30px; top: 120px; } #stakeholders::after { background: radial-gradient(circle, rgba(37,155,202,.14), transparent 62%); } #stakeholders::before { border-color: rgba(153,192,32,.2); } #blog::after { background: radial-gradient(circle, rgba(153,192,32,.16), transparent 62%); left: -130px; right: auto; top: -150px; bottom: auto; } #blog::before { border-color: rgba(37,155,202,.2); left: auto; right: -40px; top: auto; bottom: -100px; } /* EquiDesk-style large overlapping background circles (no glow) for these two sections */ #why, #cost { background: radial-gradient(680px 680px at 80% 8%, rgba(37,155,202,.10), transparent 60%), radial-gradient(560px 560px at 96% 66%, rgba(255,255,255,.03), transparent 62%), var(--navy); } #why::after, #cost::after { background: transparent; box-shadow: none; animation: none; border: 1.5px solid rgba(255,255,255,.07); width: 820px; height: 820px; left: auto; right: -210px; top: -280px; bottom: auto; } #why::before, #cost::before { background: transparent; animation: none; border: 1.5px solid rgba(255,255,255,.05); width: 560px; height: 560px; left: auto; right: -80px; top: -140px; bottom: auto; } /* ---------- Trust bar ---------- */ .trust { background: var(--navy); border-block: 1px solid rgba(255,255,255,.07); padding-block: 40px; } .trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .ti-icon { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), #7fa81e); color: #fff; box-shadow: 0 12px 26px -8px rgba(153,192,32,.55); } .ti-icon svg { width: 30px; height: 30px; stroke-width: 2; } .ti-title { display: block; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.02rem; line-height: 1.25; margin-bottom: 6px; } .ti-desc { margin: 0; color: rgba(255,255,255,.72); font-size: .85rem; line-height: 1.55; max-width: 240px; margin-inline: auto; } .leak-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .leak-media img { width: 100%; height: auto; display: block; } @media (max-width: 900px) { .leak-grid { grid-template-columns: 1fr; } } .trust .container { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; } .trust .title { font-family: var(--font-display); font-weight: 700; color: rgba(255,255,255,.85); } .trust-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 34px; } @media (max-width: 860px) { .trust-items { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .trust-items { grid-template-columns: 1fr; } } .check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; box-shadow: 0 0 0 4px rgba(153,192,32,.14); } .check svg { width: 13px; height: 13px; display: block; } /* ---------- Prose ---------- */ .prose p { margin: 0 0 18px; font-size: 1rem; color: var(--text-2); line-height: 1.8; } .prose p:last-child { margin-bottom: 0; } .callout { margin-top: 26px; padding: 20px 24px; border-radius: 0 10px 10px 0; background: rgba(239,148,16,.08); border-left: 3px solid var(--orange); font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.08rem; } .bg-navy .callout { color: #fff; background: rgba(239,148,16,.1); } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; } .steps::before { content: ""; position: absolute; top: 31px; left: 14%; right: 14%; height: 2px; background: linear-gradient(90deg, var(--blue), var(--green), var(--orange)); z-index: 0; } .step { text-align: center; padding: 0 12px; position: relative; z-index: 1; } .step .num { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; color: #fff; } .step:nth-child(1) .num { background: var(--blue); } .step:nth-child(2) .num { background: var(--navy); } .step:nth-child(3) .num { background: var(--green); } .step:nth-child(4) .num { background: var(--orange); } .step h4 { font-size: 1.02rem; margin-bottom: 9px; } .step p { color: var(--muted); font-size: .87rem; line-height: 1.65; margin: 0; } /* ---------- Cards (why / product) ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .card { background: #fff; border: 1px solid var(--light-border); border-radius: var(--radius); padding: 28px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(37,155,202,.3); } .bg-navy .card { background: var(--card-bg); border-color: var(--card-border); } .bg-navy .card:hover { background: rgba(37,155,202,.06); border-color: rgba(37,155,202,.22); } .bg-navy .card h4 { color: #fff; } .bg-navy .card p { color: var(--muted-light); } .card .icon { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; } .card .icon svg { width: 24px; height: 24px; } .card:nth-child(3n+1) .icon { background: rgba(37,155,202,.13); color: var(--blue); } .card:nth-child(3n+2) .icon { background: rgba(153,192,32,.14); color: var(--green); } .card:nth-child(3n+3) .icon { background: rgba(239,148,16,.14); color: var(--orange); } .card h4 { font-size: 1.05rem; margin-bottom: 9px; } .card p { color: var(--muted); margin: 0; font-size: .88rem; line-height: 1.7; } /* ---------- Cost of waiting ---------- */ .x-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; max-width: 760px; } .x-list li { display: flex; gap: 13px; align-items: flex-start; font-size: .95rem; color: rgba(255,255,255,.72); line-height: 1.5; } .x-mark { flex: none; width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: rgba(235,24,33,.15); color: var(--red); margin-top: 2px; font-weight: 700; } .bg-navy .eyebrow.alert, .eyebrow.alert { color: var(--red); } /* ---------- Results ---------- */ .results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .result-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--light-border); border-radius: var(--radius-lg); padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s ease, box-shadow .25s ease; } .result-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; } .result-card:nth-child(1)::before { background: var(--blue); } .result-card:nth-child(2)::before { background: var(--green); } .result-card:nth-child(3)::before { background: var(--orange); } .result-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .result-card .hotel { font-family: var(--font-display); font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; } .result-card .stat { font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; letter-spacing: -2px; line-height: 1; } .result-card:nth-child(1) .stat { color: var(--blue); } .result-card:nth-child(2) .stat { color: var(--green); } .result-card:nth-child(3) .stat { color: var(--orange); } .result-card p { color: var(--muted); margin: 0; font-size: .87rem; line-height: 1.65; flex: 1; } .result-card a { color: var(--blue); font-weight: 700; font-size: .82rem; display: inline-flex; gap: 6px; align-items: center; } .result-card a:hover { gap: 9px; } /* ---------- Split (comfort) ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; } /* ---------- Stakeholders ---------- */ .stakeholders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .stake { background: var(--light-bg); border-radius: 12px; padding: 24px; border-left: 3px solid var(--blue); transition: transform .25s ease, background .25s ease; } .stake:nth-child(3n+1) { border-left-color: var(--blue); } .stake:nth-child(3n+2) { border-left-color: var(--green); } .stake:nth-child(3n+3) { border-left-color: var(--orange); } .stake:hover { transform: translateX(4px); background: #eef4f8; } .stake h4 { font-size: .98rem; color: var(--navy); margin-bottom: 7px; } .stake p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.6; } /* ---------- Dashboard ---------- */ .dash-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.8); font-weight: 500; font-size: .87rem; } .chip .check { width: 16px; height: 16px; background: rgba(37,155,202,.16); color: var(--blue); } .dash-visual { border-radius: var(--radius-lg); padding: 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); } .dash-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .dash-row:last-child { border-bottom: 0; } .dash-room { font-weight: 600; color: #fff; } .badge { font-size: .76rem; font-weight: 700; padding: 5px 12px; border-radius: 100px; } .badge.empty { background: rgba(239,148,16,.16); color: #f6b75a; } .badge.occupied { background: rgba(153,192,32,.16); color: #b6dd54; } .badge.saving { background: rgba(37,155,202,.16); color: #5fc1e6; } /* animated mini bar chart */ .dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); } .dash-bars .bar { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--blue), rgba(37,155,202,.4)); height: 30%; animation: bar-rise 1.4s ease forwards; transform-origin: bottom; } .dash-bars .bar:nth-child(2) { background: linear-gradient(180deg, var(--green), rgba(153,192,32,.4)); } .dash-bars .bar:nth-child(4) { background: linear-gradient(180deg, var(--orange), rgba(239,148,16,.4)); } @keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* ---------- FAQ ---------- */ .faq-list { max-width: 800px; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--light-border); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 18px; } .faq-q .ic { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; transition: background .25s ease, transform .25s ease; } .faq-q .ic svg { width: 14px; height: 14px; transition: transform .25s ease; } .faq-item.open .faq-q .ic { background: var(--navy); } .faq-item.open .faq-q .ic svg { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-a .inner { padding: 0 0 22px; color: var(--muted); line-height: 1.78; font-size: .9rem; } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(44px, 6vw, 72px); text-align: center; background: linear-gradient(135deg, var(--navy), #0a2242); border: 1px solid rgba(37,155,202,.18); box-shadow: var(--shadow); } .cta-band::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(37,155,202,.16), transparent 65%); pointer-events: none; animation: glow-pulse-center 11s ease-in-out infinite; } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: #fff; max-width: 760px; margin-inline: auto; } .cta-band p { color: var(--muted-light); max-width: 540px; margin: 18px auto 0; line-height: 1.7; } .cta-band .hero-ctas { justify-content: center; margin-top: 32px; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: start; } .contact-info .line { display: flex; gap: 12px; align-items: center; margin-top: 16px; color: var(--muted-light); } .contact-info .line .ic { color: var(--blue); flex: none; display: inline-flex; align-items: center; } .contact-info .line .ic svg { width: 18px; height: 18px; display: block; } .contact-info .line .ic.wa { color: #25D366; } /* ---------- Multi-step assessment form ---------- */ .step-dots { display: flex; gap: 8px; justify-content: center; margin: 2px 0 16px; } .step-dots .step-dot { width: 26px; height: 5px; border-radius: 4px; background: rgba(148,163,184,.4); transition: background .2s ease; } .step-dots .step-dot.active { background: var(--green); } .form-step[hidden] { display: none; } .step-actions { display: flex; gap: 10px; align-items: center; } /* ---------- Lightbox (client logos) ---------- */ .lightbox { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 5vw; background: rgba(6,10,20,.82); backdrop-filter: blur(4px); } .lightbox.open { display: flex; } .lightbox img { width: min(300px, 90vw); max-height: 82vh; object-fit: contain; background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .lightbox-close { position: absolute; top: 18px; right: 26px; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; } .contact-card { background: rgba(255,255,255,.04); color: #fff; border-radius: var(--radius-lg); padding: clamp(26px,3vw,36px); border: 1px solid rgba(37,155,202,.18); backdrop-filter: blur(12px); box-shadow: var(--shadow); } /* ---------- Showcase image band ---------- */ .showcase { padding-block: clamp(8px, 2vw, 20px) clamp(44px, 6vw, 80px); background: var(--light-bg); } .showcase-frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--light-border); background: #fff; box-shadow: var(--shadow); } .showcase-frame img { width: 100%; height: auto; display: block; } .showcase-cap { position: absolute; left: 18px; bottom: 18px; right: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: rgba(10,22,40,.78); backdrop-filter: blur(8px); } .showcase-cap p { margin: 0; color: rgba(255,255,255,.85); font-size: .9rem; flex: 1; min-width: 220px; } /* ---------- Clients marquee ---------- */ .clients-title { text-align: center; font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--blue); margin: 0 0 28px; } .logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logo-track { display: flex; align-items: center; gap: 44px; width: max-content; animation: logo-scroll 36s linear infinite; } .logo-marquee:hover .logo-track { animation-play-state: paused; } .logo-item { flex: none; height: 96px; display: grid; place-items: center; padding: 0 10px; } .logo-item img { max-height: 80px; max-width: 190px; width: auto; object-fit: contain; opacity: .95; transition: opacity .25s ease, transform .25s ease; } .logo-item:hover img { opacity: 1; transform: scale(1.05); } .logo-item span { color: var(--muted); font-weight: 700; white-space: nowrap; } @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Feature tabs ---------- */ .feature-tabs { border-radius: var(--radius-lg); border: 1px solid var(--light-border); background: #fff; overflow: hidden; box-shadow: var(--shadow-soft); } .tab-btns { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; border-bottom: 1px solid var(--light-border); background: var(--light-bg); } .tab-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 11px 18px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 700; font-size: .88rem; transition: background .15s ease, color .15s ease; } .tab-btn:hover { color: var(--navy); } .tab-btn.active { background: var(--blue); color: #fff; } .tab-stage { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; padding: clamp(20px, 3vw, 34px); align-items: center; } .tab-image { background: var(--light-bg); border-radius: var(--radius); padding: 14px; border: 1px solid var(--light-border); } .tab-image img { width: 100%; height: auto; border-radius: 10px; } .tab-img { display: none; } .tab-img.active { display: block; } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fade-in .3s ease; } .tab-panel h4 { font-size: 1.25rem; margin-bottom: 12px; color: var(--navy); } .tab-panel p { color: var(--muted); font-size: .96rem; line-height: 1.75; margin: 0; } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- Guarantee banner ---------- */ .guarantee { position: relative; overflow: hidden; text-align: center; border-radius: var(--radius-xl); padding: clamp(36px, 5vw, 60px); background: linear-gradient(135deg, var(--navy), #0a2242); border: 1px solid rgba(153,192,32,.25); box-shadow: var(--shadow); } .guarantee::before { content: ""; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 600px; height: 360px; background: radial-gradient(circle, rgba(153,192,32,.2), transparent 65%); pointer-events: none; animation: glow-pulse-x 12s ease-in-out infinite; } .guarantee > * { position: relative; z-index: 1; } .guarantee h2 { color: #fff; max-width: 920px; margin: 18px auto 26px; } .guarantee-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: rgba(153,192,32,.16); color: #b6dd54; border: 1px solid rgba(153,192,32,.35); font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; } .guarantee-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } /* ---------- Comparison table ---------- */ .compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--light-border); background: #fff; box-shadow: var(--shadow-soft); } .compare { width: 100%; border-collapse: collapse; min-width: 640px; } .compare th, .compare td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--light-border); } .compare thead th { font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); vertical-align: bottom; font-weight: 800; } .compare tbody td { color: var(--text-2); font-size: .94rem; } .compare .rl { text-align: left; color: var(--muted); font-weight: 600; max-width: 280px; } .compare th.is-featured { position: relative; color: #fff; border-top-left-radius: 12px; border-top-right-radius: 12px; background: var(--green); } .compare td.is-featured { background: rgba(153,192,32,.1); color: var(--navy); font-weight: 700; } .compare tbody tr:last-child td.is-featured { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .compare .pop { display: block; font-family: var(--font-body); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; opacity: .92; } /* ---------- Blog cards ---------- */ .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--light-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .bg-navy .blog-card { background: var(--card-bg); border-color: var(--card-border); } .blog-thumb { display: block; aspect-ratio: 16/9; background: var(--light-bg); overflow: hidden; } .blog-thumb img { width: 100%; height: 100%; object-fit: cover; } .blog-thumb-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(37,155,202,.18), rgba(153,192,32,.14)); } .blog-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .blog-tag { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); background: rgba(37,155,202,.1); padding: 4px 11px; border-radius: 100px; } .blog-body h3 { font-size: 1.12rem; line-height: 1.3; color: var(--navy); } .bg-navy .blog-body h3 { color: #fff; } .blog-body h3 a:hover { color: var(--blue); } .blog-body > p { color: var(--muted); font-size: .88rem; margin: 0; flex: 1; line-height: 1.6; } .bg-navy .blog-body > p { color: var(--muted-light); } .blog-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: .82rem; color: var(--muted); } .blog-meta a { color: var(--orange); font-weight: 700; } /* blog post page */ .post-cover { width: 100%; border-radius: var(--radius-lg); margin-top: 26px; border: 1px solid var(--light-border); } .post-body p { font-size: 1.08rem; line-height: 1.85; color: var(--text-2); } /* ---------- Assessment results page ---------- */ .assess-head { text-align: center; max-width: 720px; margin: 0 auto 36px; } .assess-head .eyebrow { justify-content: center; } .assess-inputs { color: var(--muted); font-size: .95rem; margin-top: 10px; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 34px; } .stat-card { background: #fff; border: 1px solid var(--light-border); border-radius: var(--radius-lg); padding: 24px; text-align: center; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; align-items: center; gap: 6px; } .stat-card .sc-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); } .stat-card .sc-value { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--navy); letter-spacing: -1px; line-height: 1.1; } .stat-card.danger .sc-value { color: var(--red); } .stat-card.good .sc-value { color: #6f9c12; } .stat-card .sc-sub { font-size: .78rem; color: var(--muted); } .score-ring { position: relative; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--pct) * 1%), rgba(10,22,40,.10) 0); margin: 4px 0; } .score-ring .score-inner { width: 86px; height: 86px; border-radius: 50%; background: #fff; display: grid; place-items: center; } .score-ring strong { font-family: var(--font-display); font-size: 1.7rem; color: var(--navy); line-height: 1; } .score-ring small { color: var(--muted); font-size: .7rem; } .assess-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .assess-panel { background: #fff; border: 1px solid var(--light-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-soft); } .rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .rec-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.55; color: var(--text-2); } .rec-list .rec-tick { flex: none; color: var(--green); display: inline-flex; } .rec-list .rec-tick .check { width: 20px; height: 20px; background: rgba(153,192,32,.15); } .assess-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 40px 0 22px; } .assess-disclaimer { max-width: 780px; margin: 0 auto; text-align: center; color: var(--muted); font-size: .8rem; line-height: 1.6; } body.theme-white .stat-card, body.theme-white .assess-panel { background: #fff; border-color: #e6ddca; } @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .assess-cols { grid-template-columns: 1fr; } } @media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } } /* ---------- Single article layout (blog post + case study) ---------- */ .article-wrap { max-width: 780px; } .article-head .eyebrow { justify-content: center; } .article-cover-wrap { max-width: 960px; margin-block: 34px; } .article-cover { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .article-prose { font-size: 1.07rem; color: var(--text-2); } .article-prose p { margin: 0 0 18px; line-height: 1.85; } .article-prose h2 { font-size: 1.5rem; margin: 34px 0 12px; } .article-prose h3 { font-size: 1.2rem; margin: 28px 0 10px; } .article-prose ul, .article-prose ol { margin: 0 0 18px; padding-left: 22px; line-height: 1.8; } .article-prose img { border-radius: 12px; margin: 22px 0; } .article-prose a { color: var(--blue); text-decoration: underline; } .article-prose blockquote { margin: 22px 0; padding: 4px 20px; border-left: 3px solid var(--green); color: var(--muted); font-style: italic; } .article-cta { margin-top: 48px; padding: clamp(28px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--light-2); text-align: center; } body.theme-white .article-cta { background: #f3ede0; } nav[role="navigation"] svg { width: 18px; height: 18px; display: inline; } .pagination, nav[role="navigation"] { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: rgba(255,255,255,.5); padding-block: 56px 28px; } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; } .footer-brand .brand { margin-bottom: 14px; } .footer-brand p { max-width: 420px; font-size: .85rem; color: rgba(255,255,255,.4); line-height: 1.7; } .footer-col h5 { color: rgba(255,255,255,.45); font-family: var(--font-display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; } .footer-col a { display: block; padding: 6px 0; color: rgba(255,255,255,.5); font-size: .88rem; } .footer-col a:hover { color: #fff; } .socials { display: flex; gap: 12px; margin-top: 18px; } .socials a { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #fff; } .socials a:hover { background: var(--blue); } .footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: rgba(255,255,255,.3); } .footer-bottom .footer-tm { color: rgba(37,155,202,.55); } /* ---------- Footer locations (compact strip) ---------- */ .footer-locations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 34px 0; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.07); } .floc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .floc-head img { width: 30px; height: 20px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.4); } .floc-head span { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff; } .floc p { margin: 0 0 6px; color: rgba(255,255,255,.42); font-size: .78rem; line-height: 1.5; } .floc a { display: block; color: rgba(255,255,255,.5); font-size: .78rem; padding: 1px 0; } .floc a:hover { color: var(--blue); } @media (max-width: 860px) { .footer-locations { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 480px) { .footer-locations { grid-template-columns: 1fr; } } /* ---------- AI assistant (white, glowing FAB) ---------- */ .ai-fab { position: fixed; right: 22px; bottom: 22px; z-index: 300; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 32px -8px rgba(153,192,32,.7); animation: ai-glow 2.2s ease-in-out infinite; } .ai-fab svg { width: 28px; height: 28px; } .ai-fab.is-open { animation: none; } @keyframes ai-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(153,192,32,.55), 0 14px 32px -8px rgba(153,192,32,.7); } 50% { box-shadow: 0 0 0 14px rgba(153,192,32,0), 0 14px 32px -8px rgba(153,192,32,.7); } } .ai-nudge { position: fixed; right: 100px; bottom: 40px; z-index: 300; background: #fff; color: var(--navy); border-radius: 12px; padding: 9px 13px; font-family: var(--font-display); font-weight: 800; font-size: .8rem; line-height: 1.25; text-align: center; box-shadow: 0 10px 26px -10px rgba(10,22,40,.4); animation: ai-bob 2.2s ease-in-out infinite; cursor: pointer; } .ai-nudge::after { content: ""; position: absolute; right: -5px; bottom: 16px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); } .ai-nudge.hide { display: none; } @keyframes ai-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .ai-panel { position: fixed; right: 22px; bottom: 98px; z-index: 301; width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100vh - 130px)); background: #fff; border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(10,22,40,.45); display: none; flex-direction: column; overflow: hidden; } .ai-panel.open { display: flex; } .ai-head { background: linear-gradient(135deg, var(--green), #7fa81e); color: #fff; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; } .ai-head-l { display: flex; align-items: center; gap: 12px; } .ai-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; overflow: hidden; } .ai-avatar img { width: 28px; height: 28px; object-fit: contain; } .ai-avatar svg { width: 24px; height: 24px; } .ai-head .nm { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; } .ai-head .st { font-size: .8rem; opacity: .92; display: flex; align-items: center; gap: 7px; } .ai-head .st .dot { width: 8px; height: 8px; border-radius: 50%; background: #eafcc0; box-shadow: 0 0 0 0 rgba(234,252,192,.7); animation: pulse 2s infinite; } .ai-close { background: rgba(255,255,255,.22); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.3rem; line-height: 1; } .ai-body { flex: 1; overflow-y: auto; padding: 18px; background: #f7f9fb; display: flex; flex-direction: column; gap: 12px; } .ai-greet strong { font-size: 1.02rem; color: var(--navy); font-family: var(--font-display); } .ai-greet p { margin: 6px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; } .ai-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .ai-action { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e6ecf2; border-radius: 13px; padding: 12px 14px; cursor: pointer; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .ai-action:hover { box-shadow: 0 10px 24px -12px rgba(10,22,40,.35); transform: translateY(-1px); border-color: #d7e0ea; } .aa-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; } .aa-ic svg { width: 21px; height: 21px; } .aa-ic.green { background: var(--green); } .aa-ic.blue { background: var(--blue); } .aa-ic.orange { background: var(--orange); } .aa-ic.purple { background: #8b5cf6; } .aa-ic.teal { background: #14b8a6; } .aa-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; } .aa-txt b { color: var(--navy); font-size: .9rem; } .aa-txt small { color: var(--muted); font-size: .78rem; } .aa-arrow { color: #b6c2ce; font-size: 1.3rem; line-height: 1; } .ai-trust { display: flex; align-items: center; gap: 11px; justify-content: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e6ecf2; } .ai-trust .shield { color: var(--green); } .ai-trust .shield svg { width: 26px; height: 26px; } .ai-trust b { font-size: .82rem; color: var(--navy); } .ai-trust small { display: block; color: var(--muted); font-size: .72rem; } .ai-intro.hide { display: none; } .ai-msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.5; } .ai-msg.bot { background: #fff; border: 1px solid #e6ecf2; color: var(--text-2); align-self: flex-start; border-bottom-left-radius: 4px; } .ai-msg.user { background: var(--green); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .ai-foot { padding: 12px 14px; border-top: 1px solid #e6ecf2; background: #fff; } .ai-inputrow { display: flex; gap: 8px; align-items: center; background: #f1f5f9; border-radius: 100px; padding: 5px 5px 5px 16px; } .ai-foot input { flex: 1; border: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--navy); outline: none; } .ai-foot input::placeholder { color: #94a3b8; } .ai-send { border: 0; background: var(--green); color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: none; } .ai-send:hover { background: #86a81c; } .ai-reply-note { text-align: center; color: #94a3b8; font-size: .72rem; margin-top: 9px; } /* ---------- Animated ambient glows (sections, not hero) ---------- */ @keyframes glow-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.22); opacity: .95; } } @keyframes ring-ping { 0% { transform: scale(.55); opacity: .55; } 70% { opacity: .12; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes glow-pulse-center { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .78; } 50% { transform: translate(-50%, -50%) scale(1.22); opacity: 1; } } @keyframes glow-pulse-x { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .85; } 50% { transform: translateX(-50%) scale(1.18); opacity: 1; } } /* ---------- Reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .logo-track, .dash-bars .bar, .pulse-dot, .hero-badge .dot, .eyebrow .dot, .guarantee-badge i, .bg-navy::after, .bg-paper::after, .bg-navy::before, .bg-paper::before, .cta-band::before, .guarantee::before { animation: none; } html { scroll-behavior: auto; } } /* Collapse the nav to the menu button earlier so longer (Spanish) labels never wrap/overflow */ @media (max-width: 1200px) { .nav-links, .nav-cta .nav-demo { display: none; } .nav-toggle { display: block; } .nav.open .nav-links { display: flex; position: absolute; left: 0; right: 0; top: 70px; flex-direction: column; background: var(--navy); padding: 18px 24px; gap: 14px; border-bottom: 1px solid rgba(37,155,202,.18); } } /* ---------- Responsive ---------- */ @media (max-width: 1060px) { .hero-grid { grid-template-columns: 1fr; } .lead-card { max-width: 580px; } .steps { grid-template-columns: repeat(2, 1fr); } .steps::before { display: none; } .cards, .results-grid, .stakeholders { grid-template-columns: repeat(2, 1fr); } .split, .dash-wrap, .contact-grid, .tab-stage { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr 1fr; } .nav-links, .nav-cta .btn { display: none; } .nav-toggle { display: block; } .nav.open .nav-links { display: flex; position: absolute; left: 0; right: 0; top: 70px; flex-direction: column; background: var(--navy); padding: 18px 24px; gap: 14px; border-bottom: 1px solid rgba(37,155,202,.18); } } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .steps, .cards, .results-grid, .stakeholders, .footer-top { grid-template-columns: 1fr; } .footer-bottom { justify-content: center; text-align: center; } } /* ======================================================================= WHITE / LIGHT THEME (admin-selectable: Settings → Brand → Site theme) Activated by class "theme-white" on . The default (dark) theme is untouched; everything below only applies when the white theme is active. Cream palette mirrors the approved design (#faf6ec page, #fff cards, #ebe2ce footer, dark navy text, same brand accents). ===================================================================== */ body.theme-white { --bg: #faf6ec; --ink: #ebe2ce; /* footer background */ --light-bg: #f5efe2; /* "paper" sections */ --light-2: #eef3ef; --light-border: #e6ddca; --card-bg: #ffffff; --card-border: #e6ddca; --text: #0f1d2a; --text-2: #3a4a59; --muted: #5d6b78; --shadow: 0 24px 64px rgba(14,58,85,.12); --shadow-soft: 0 14px 38px rgba(14,58,85,.08); } /* Header → translucent cream + brand accent strip under it */ body.theme-white .site-header { background: rgba(250,246,236,.92); border-bottom: 1px solid #e6ddca; } body.theme-white .site-header::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--blue), var(--green) 40%, var(--orange) 72%, var(--red)); } body.theme-white .brand { color: var(--navy); } body.theme-white .nav-links a { color: rgba(15,29,42,.6); } body.theme-white .nav-links a:hover { color: var(--navy); } body.theme-white .lang-toggle { border-color: rgba(14,58,85,.2); background: rgba(15,29,42,.05); } body.theme-white .lang-toggle .lt-opt { color: rgba(15,29,42,.5); } body.theme-white .lang-toggle.en .lt-en, body.theme-white .lang-toggle.es .lt-es { color: #fff; } body.theme-white .nav-toggle { color: var(--navy); } body.theme-white .nav.open .nav-links { background: #faf6ec; border-bottom-color: #e6ddca; } /* Hero stays dark with the room photo + black overlay in BOTH themes (client request). Only the assessment-section bullets (rendered in a light section) need darkening. */ body.theme-white #assessment .hero-bullets li { color: var(--text-2); } /* Form / contact cards → solid white */ body.theme-white .lead-card, body.theme-white .contact-card { background: #fff; color: var(--navy); border-color: #e6ddca; box-shadow: var(--shadow); backdrop-filter: none; } body.theme-white .lead-card h3 { color: var(--navy); } body.theme-white .lead-card .sub { color: var(--muted); } body.theme-white .media-frame { background: #fff; border-color: #e6ddca; } body.theme-white .field label { color: rgba(15,29,42,.5); } body.theme-white .field input, body.theme-white .field select { background: #faf7f0; border-color: #e0d7c4; color: var(--navy); } body.theme-white .field input::placeholder { color: rgba(15,29,42,.35); } body.theme-white .field select { color: rgba(15,29,42,.7); } body.theme-white .field select option { background: #fff; color: var(--navy); } body.theme-white .field input:focus, body.theme-white .field select:focus { border-color: var(--blue); background: #fff; } body.theme-white .form-note { color: rgba(15,29,42,.4); } /* Dark ("navy") content sections → cream with dark text */ body.theme-white .bg-navy { background: #f5efe2; } body.theme-white #why, body.theme-white #cost { background: radial-gradient(680px 680px at 80% 8%, rgba(37,155,202,.08), transparent 60%), #f5efe2; } body.theme-white .bg-navy h1, body.theme-white .bg-navy h2, body.theme-white .bg-navy h3, body.theme-white .bg-navy h4 { color: var(--navy); } body.theme-white .bg-navy .lead, body.theme-white .bg-navy .text-muted, body.theme-white .bg-navy .section-desc, body.theme-white .bg-navy .prose p { color: var(--muted); } body.theme-white .bg-navy .card { background: #fff; border-color: #e6ddca; } body.theme-white .bg-navy .card h4 { color: var(--navy); } body.theme-white .bg-navy .card p { color: var(--muted); } body.theme-white .bg-navy .blog-card { background: #fff; border-color: #e6ddca; } body.theme-white .bg-navy .blog-body h3 { color: var(--navy); } body.theme-white .bg-navy .blog-body > p { color: var(--muted); } body.theme-white .bg-navy .callout { color: var(--navy); } body.theme-white .bg-navy .btn-ghost, body.theme-white .hero .btn-ghost { color: var(--blue); } body.theme-white .bg-navy .btn-ghost:hover, body.theme-white .hero .btn-ghost:hover { background: rgba(37,155,202,.08); color: var(--blue); } body.theme-white .contact-info .line { color: var(--muted); } body.theme-white .eyebrow.on-dark { color: var(--blue); } /* Trust strip — stays dark navy in both themes (matches the reference design) */ body.theme-white .trust { background: var(--navy); border-block-color: rgba(255,255,255,.07); } /* Keep CTA band + guarantee as rich colored gradients (white text stays legible) */ body.theme-white .cta-band { background: linear-gradient(135deg, var(--blue), #0e3a55); border-color: rgba(37,155,202,.3); } body.theme-white .guarantee { background: linear-gradient(135deg, #0e3a55, #143049); border-color: rgba(153,192,32,.3); } /* Footer → cream with dark text */ body.theme-white .site-footer { color: rgba(15,29,42,.65); } body.theme-white .footer-brand .brand { color: var(--navy); } body.theme-white .footer-brand p { color: rgba(15,29,42,.55); } body.theme-white .footer-col h5 { color: rgba(15,29,42,.55); } body.theme-white .footer-col a { color: rgba(15,29,42,.6); } body.theme-white .footer-col a:hover { color: var(--navy); } body.theme-white .socials a { background: rgba(15,29,42,.06); color: var(--navy); } body.theme-white .socials a:hover { background: var(--blue); color: #fff; } body.theme-white .footer-bottom { border-top-color: rgba(15,29,42,.1); color: rgba(15,29,42,.45); } body.theme-white .footer-locations { border-top-color: rgba(15,29,42,.1); } body.theme-white .floc-head span { color: var(--navy); } body.theme-white .floc p { color: rgba(15,29,42,.6); } body.theme-white .floc a { color: rgba(15,29,42,.55); } /* --- White theme: fix remaining low-contrast bits + more vibrant accents --- */ /* Headings carry an inline color:#fff in the dark sections — override it. (CTA band & guarantee banners are NOT .bg-navy, so they keep white text.) */ body.theme-white .bg-navy h1, body.theme-white .bg-navy h2, body.theme-white .bg-navy h3, body.theme-white .bg-navy h4 { color: var(--navy) !important; } /* Trust strip ("Built for hotels…") */ body.theme-white .trust .title { color: var(--navy); } body.theme-white .trust-items span { color: var(--text-2); } /* "Cost of waiting" cross-list */ body.theme-white .x-list li { color: var(--text-2); } body.theme-white .x-mark { background: rgba(235,24,33,.14); color: var(--red); } /* Dashboard section — chips + mockup card on cream */ body.theme-white .chip { background: #fff; border-color: #e6ddca; color: var(--text-2); } body.theme-white .chip .check { background: rgba(37,155,202,.16); color: var(--blue); } body.theme-white .dash-visual { background: #fff; border-color: #e6ddca; } body.theme-white .dash-visual strong { color: var(--navy) !important; } body.theme-white .dash-room { color: var(--navy); } body.theme-white .dash-row { border-bottom-color: rgba(15,29,42,.08); } body.theme-white .dash-bars { border-top-color: rgba(15,29,42,.08); } /* Vibrant, readable status badges on the white card */ body.theme-white .badge.empty { background: rgba(239,148,16,.18); color: #b9690a; } body.theme-white .badge.occupied { background: rgba(153,192,32,.22); color: #5c7a10; } body.theme-white .badge.saving { background: rgba(37,155,202,.18); color: #16739b; }