/* ===================================================================== Steve Saintil — public marketing site Variant A · Refined Console (same tokens as /admin/admin.css) ===================================================================== */ :root{ --bg:#07101f; --bg-2:#0a1428; --surface:#0f1b33; --surface-2:#142342; --surface-3:#1a2c52; --border:#1f2e4d; --border-strong:#2a3d63; --hairline:rgba(255,255,255,0.07); --hairline-strong:rgba(255,255,255,0.12); --amber:#f5b400; --amber-2:#ffc83a; --amber-soft:rgba(245,180,0,0.14); --amber-glow:rgba(245,180,0,0.28); --text:#f3f6fb; --text-2:#c4cee0; --muted:#8a9bb5; --muted-2:#6a7a94; --green:#4ade80; --red:#fb7185; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:24px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden} body{ background:var(--bg); color:var(--text); font-family:"Geist",ui-sans-serif,system-ui,sans-serif; font-weight:400; font-size:15px; line-height:1.6; text-rendering:optimizeLegibility; } .mono,.label-mono{font-family:"Geist Mono",ui-monospace,monospace} a{color:inherit} img{max-width:100%;display:block} /* ===================== NAV ===================== */ /* Sticky lives on the

so its containing block is , giving the nav the full page height to stick within. Applying sticky to the inner

would fail because

is only as tall as its single child. */ header[role="banner"]{ position:sticky;top:0;z-index:50; } nav[role="banner"], header[role="banner"] nav{ display:flex;align-items:center;justify-content:space-between; padding:18px 56px; background:rgba(7,16,31,0.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hairline); } .nav-logo{ display:inline-flex;align-items:center;gap:12px; font-weight:700;letter-spacing:-0.2px;font-size:15px; text-decoration:none;color:var(--text); } .nav-logo .logo-mark{ width:32px;height:32px;border-radius:8px; background:linear-gradient(135deg,var(--amber),var(--amber-2)); display:grid;place-items:center; color:#0a1424;font-weight:800;font-size:14px; box-shadow:0 8px 24px -10px var(--amber-glow); } .nav-logo span.dot{color:var(--amber)} .nav-links{ display:flex;align-items:center;gap:28px; font-size:14px;color:var(--text-2);list-style:none; } .nav-links a{ color:inherit;text-decoration:none; transition:color .15s; } .nav-links a:hover{color:var(--text)} .nav-cta{ background:var(--amber)!important; color:#0a1424!important; padding:9px 16px!important; border-radius:8px!important; font-weight:600!important; font-size:13px!important; box-shadow:0 8px 20px -8px var(--amber-glow); } .nav-cta:hover{background:var(--amber-2)!important} /* ===================== HERO ===================== */ .hero{ padding:72px 56px 56px; position:relative; } .hero-grid{ display:grid;grid-template-columns:1.15fr 1fr; gap:56px;align-items:center; max-width:1280px;margin:0 auto; } .hero-pill{ display:inline-flex;align-items:center;gap:10px; padding:6px 12px 6px 8px;border-radius:99px; background:rgba(245,180,0,0.08); border:1px solid rgba(245,180,0,0.25); font-size:12px;color:var(--amber);font-weight:500; margin-bottom:28px; } .hero-pill::before{ content:"";width:6px;height:6px;border-radius:99px; background:var(--amber); box-shadow:0 0 0 4px rgba(245,180,0,0.18); } .hero-pill .hp-sub{color:var(--muted);font-weight:400} .hero h1{ font-size:84px;line-height:0.98;letter-spacing:-3px; font-weight:800;color:var(--text); margin:0; } .hero h1 .hl{color:var(--amber)} .hero h1 .dm{color:var(--text)} .hero-sub{ margin-top:28px;font-size:17px;line-height:1.6; color:var(--text-2);max-width:560px; } .hero-sub strong{color:var(--text);font-weight:600} .hero-sub .muted{color:var(--muted)} .hero-cta-row{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap} .btn-primary{ display:inline-flex;align-items:center;gap:8px; background:var(--amber);color:#0a1424;border:0; padding:14px 22px;border-radius:10px; font-weight:700;font-size:14px;cursor:pointer; text-decoration:none; box-shadow:0 14px 30px -10px var(--amber-glow); transition:transform .15s,box-shadow .15s,background .15s; } .btn-primary:hover{background:var(--amber-2);transform:translateY(-1px)} .btn-secondary{ display:inline-flex;align-items:center;gap:8px; background:transparent;color:var(--text); border:1px solid var(--hairline-strong); padding:14px 22px;border-radius:10px; font-weight:600;font-size:14px;cursor:pointer; text-decoration:none; transition:border-color .15s,background .15s; } .btn-secondary:hover{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.03)} .hero-meta-row{ margin-top:28px;display:flex;gap:22px;flex-wrap:wrap; font-size:13px;color:var(--muted); font-family:"Geist Mono",ui-monospace,monospace; } .hero-photo{position:relative} .hero-photo::before{ content:"";position:absolute;inset:-20px; background:radial-gradient(60% 60% at 50% 40%,rgba(245,180,0,0.18),transparent 70%); filter:blur(20px);border-radius:24px; pointer-events:none; } .hero-photo-frame{ position:relative;width:100%;max-width:420px;margin-left:auto; } .hero-photo-frame img, .hero-photo-frame .placeholder{ width:100%;aspect-ratio:420/520; border-radius:18px; background:var(--surface); border:1px solid var(--hairline-strong); object-fit:cover;display:block; } .hero-photo-frame .placeholder{ display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--surface),var(--surface-2)); color:rgba(255,255,255,0.08);font-size:7rem;font-weight:800; } .hp-card{ position:absolute;background:var(--surface); border:1px solid var(--hairline-strong); padding:14px 16px;border-radius:12px; box-shadow:0 20px 40px -16px rgba(0,0,0,0.6); } .hp-card-progress{left:-24px;bottom:24px;width:240px} .hp-card-progress .label{ font-size:11px;color:var(--muted); font-family:"Geist Mono",ui-monospace,monospace; letter-spacing:0.06em;text-transform:uppercase; } .hp-card-progress .title{font-weight:700;font-size:14px;margin-top:4px} .hp-card-progress .bar{ margin-top:10px;height:4px;border-radius:99px; background:rgba(255,255,255,0.08);overflow:hidden; } .hp-card-progress .bar > div{ width:10%;height:100%;background:var(--amber);border-radius:99px; } .hp-card-schedule{ right:-28px;top:28px; font-family:"Geist Mono",ui-monospace,monospace; font-size:12px;color:var(--text-2); } .hp-card-schedule .label{ color:var(--muted);font-size:10px;letter-spacing:0.08em; } .hp-card-schedule .open{margin-top:6px;color:var(--green)} .hp-card-schedule .taken{margin-top:6px;color:var(--red)} .hp-card-schedule .onsite{margin-top:6px;color:var(--amber)} .hp-card-schedule > div:nth-of-type(2){margin-top:6px} .hp-card-available .title{color:var(--green)} /* ===================== STRIP ===================== */ .a-strip{ margin:0 56px;padding:20px 28px; background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0)); border:1px solid var(--hairline); border-radius:16px; display:grid;grid-template-columns:repeat(4,1fr);gap:0; max-width:1280px;margin-left:auto;margin-right:auto; } .a-strip .cell{padding:10px 8px} .a-strip .cell + .cell{border-left:1px solid var(--hairline)} .a-strip .num{font-size:36px;font-weight:700;letter-spacing:-1px;color:var(--text)} .a-strip .cell.amber .num{color:var(--amber)} .a-strip .lbl{color:var(--muted);font-size:13px;margin-top:2px} /* ===================== COMMON SECTION ===================== */ section, .a-section{ padding:80px 56px 24px; max-width:1280px;margin:0 auto; position:relative; } .a-section.tight{padding-top:60px;padding-bottom:60px} .a-section.flush-bottom{padding-bottom:0} .section-eyebrow{ font-family:"Geist Mono",ui-monospace,monospace; font-size:11px;color:var(--muted); letter-spacing:0.12em;text-transform:uppercase; } .section-eyebrow::before{content:"· "} h2{ font-size:40px;letter-spacing:-1.5px;font-weight:700; color:var(--text);margin:10px 0 4px;line-height:1.05; } h2 .hl,h2 em{color:var(--amber);font-style:normal} h2 .dm{color:var(--muted)} .section-lead{ color:var(--muted);max-width:640px;font-size:15px; margin-bottom:32px;line-height:1.6; } /* ===================== INDUSTRIES ===================== */ .industry-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px; } .ind-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:14px;padding:20px; position:relative;overflow:hidden; transition:border-color .2s,transform .2s; } .ind-card:hover{border-color:var(--border-strong);transform:translateY(-1px)} .ind-icon{ width:32px;height:32px;border-radius:8px; background:rgba(245,180,0,0.12);color:var(--amber); display:grid;place-items:center;margin-bottom:14px; font-size:16px; } .ind-name{font-weight:600;font-size:16px;color:var(--text)} .ind-desc{ margin-top:8px;color:var(--text-2); font-size:13px;line-height:1.55; } .ind-tags{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap} .tag-chip{ padding:3px 9px;border-radius:99px; background:rgba(255,255,255,0.04); border:1px solid var(--hairline); font-size:11px;color:var(--text-2); font-family:"Geist Mono",ui-monospace,monospace; } /* ===================== HOW IT WORKS ===================== */ .stages-wrapper{ display:grid;grid-template-columns:1fr 1fr;gap:16px; } .stage-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:16px;padding:26px; position:relative; } .stage-card.s1{ border-color:rgba(245,180,0,0.3); box-shadow:0 30px 60px -30px rgba(245,180,0,0.25); } .stage-pill{ display:inline-flex;align-items:center; padding:4px 10px;border-radius:99px; font-size:11px;font-weight:600; font-family:"Geist Mono",ui-monospace,monospace; letter-spacing:0.08em;text-transform:uppercase; } .stage-pill.amber{ background:var(--amber-soft);color:var(--amber); border:1px solid rgba(245,180,0,0.3); } .stage-pill.slate{ background:rgba(255,255,255,0.04);color:var(--text-2); border:1px solid var(--hairline); } .stage-head{ margin-top:14px; display:flex;justify-content:space-between;align-items:baseline; gap:16px;flex-wrap:wrap; } .stage-title{font-size:26px;font-weight:700;letter-spacing:-0.5px;color:var(--text)} .stage-price{ color:var(--amber); font-family:"Geist Mono",ui-monospace,monospace; font-size:16px;font-weight:600; } .stage-desc{ margin-top:10px;color:var(--text-2); font-size:14px;line-height:1.55; } .stage-list{margin-top:8px;list-style:none;padding:0} .stage-list li{ display:flex;gap:10px;padding:8px 0; font-size:13px;color:var(--text-2); } .stage-list li + li{border-top:1px solid var(--hairline)} .stage-list li::before{ content:"✓";color:var(--amber);margin-top:1px;flex-shrink:0; font-weight:700; } .stage-cta{ margin-top:16px; background:var(--amber);color:#0a1424; border:0;padding:11px 18px;border-radius:8px; font-weight:700;font-size:13px;cursor:pointer; text-decoration:none;display:inline-block; } .stage-cta:hover{background:var(--amber-2)} .travel-note{ margin-top:18px;padding:16px 20px; background:linear-gradient(90deg,rgba(245,180,0,0.08),rgba(245,180,0,0)); border:1px solid rgba(245,180,0,0.2); border-radius:14px; display:flex;gap:14px;align-items:flex-start; } .travel-note .ico{color:var(--amber);font-size:18px;line-height:1;margin-top:2px;flex-shrink:0} .travel-note .txt{font-size:13px;color:var(--text-2);line-height:1.55} .travel-note .txt strong{color:var(--text)} /* ===================== CASE STUDIES (outcomes) ===================== */ .outcomes-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:12px; } .outcome-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:14px;padding:18px; min-height:200px; display:flex;flex-direction:column;justify-content:space-between; transition:border-color .2s,transform .2s; } .outcome-card:hover{border-color:var(--border-strong);transform:translateY(-1px)} .outcome-tag{ display:inline-flex;align-items:center; padding:3px 10px;border-radius:99px; font-size:11px;font-weight:600; font-family:"Geist Mono",ui-monospace,monospace; background:rgba(255,255,255,0.04); border:1px solid var(--hairline); color:var(--text-2); letter-spacing:0.04em; align-self:flex-start; } .outcome-title{ margin-top:12px;font-size:16px;font-weight:600;color:var(--text); } .outcome-body{ margin-top:6px;color:var(--text-2); font-size:13px;line-height:1.55; } .outcome-foot{ margin-top:14px;display:flex;align-items:center;justify-content:space-between; } .outcome-status{ font-family:"Geist Mono",ui-monospace,monospace; font-size:12px;color:var(--muted); } .outcome-arrow{color:var(--amber);display:inline-flex;font-size:16px} /* ===================== SERVICES ===================== */ .services-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:14px; } .svc-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:14px;padding:22px; transition:border-color .2s,transform .2s; } .svc-card:hover{border-color:var(--border-strong);transform:translateY(-1px)} .svc-head{display:flex;align-items:center;gap:10px} .svc-icon{ width:30px;height:30px;border-radius:8px; background:rgba(245,180,0,0.14);color:var(--amber); display:grid;place-items:center;font-size:14px; } .svc-title{font-size:17px;font-weight:600;color:var(--text)} .svc-desc{ margin-top:10px;color:var(--text-2); font-size:13px;line-height:1.55; } .svc-tags{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap} .svc-tags .tag-chip{padding:4px 10px} /* ===================== ABOUT ===================== */ .about-grid{ padding:60px 56px; display:grid;grid-template-columns:1fr 1.4fr;gap:56px; align-items:center; max-width:1280px;margin:0 auto; } .about-photo-frame{ width:100%;max-width:420px; aspect-ratio:420/500; border-radius:16px; background:var(--surface); border:1px solid var(--hairline-strong); overflow:hidden; display:flex;align-items:center;justify-content:center; } .about-photo-frame img{width:100%;height:100%;object-fit:cover} .about-photo-frame .placeholder{ width:100%;height:100%; background:linear-gradient(135deg,var(--surface),var(--surface-2)); color:rgba(255,255,255,0.08);font-size:7rem;font-weight:800; display:grid;place-items:center; } .about-meta-row{ display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px; } .meta-chip{ background:var(--surface); border:1px solid var(--hairline); border-radius:12px;padding:14px 16px; } .meta-chip .lbl{ font-size:11px;color:var(--muted); font-family:"Geist Mono",ui-monospace,monospace; text-transform:uppercase;letter-spacing:0.04em; } .meta-chip .val{font-weight:600;margin-top:2px;color:var(--text);font-size:14px;word-break:break-word} .meta-chip .val a{color:inherit;text-decoration:none} .meta-chip .val a:hover{color:var(--amber)} .about-text h2{font-size:44px;letter-spacing:-1.5px;margin:10px 0 16px} .about-text p{ color:var(--text-2);font-size:16px;line-height:1.6; max-width:640px;margin-bottom:14px; } .about-text p strong{color:var(--text);font-weight:600} .pull-quote{ margin-top:22px;padding:18px 22px; border-left:3px solid var(--amber); background:rgba(245,180,0,0.05); border-radius:0 12px 12px 0; font-size:16px;font-style:italic;color:var(--text); max-width:640px; } .pull-quote .sig{ margin-top:8px;font-style:normal;color:var(--muted); font-size:12px; font-family:"Geist Mono",ui-monospace,monospace; letter-spacing:0.06em; } /* ===================== FAQ ===================== */ .faq-list{ display:flex;flex-direction:column;gap:8px; } .faq-item{ background:var(--surface); border:1px solid var(--hairline); border-radius:12px;overflow:hidden; } .faq-q-btn{ width:100%;background:none;border:none;color:var(--text); text-align:left;font-family:"Geist",ui-sans-serif,system-ui,sans-serif; font-size:15px;font-weight:600; padding:18px 22px;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:16px; transition:background .15s; } .faq-q-btn:hover{background:var(--surface-2)} .faq-chevron{ font-size:18px;color:var(--amber);flex-shrink:0; transition:transform .2s;line-height:1; } .faq-item.open .faq-chevron{transform:rotate(45deg)} .faq-answer{ display:none;padding:0 22px 18px; font-size:14px;color:var(--text-2);line-height:1.6; } .faq-item.open .faq-answer{display:block} /* ===================== FOOTER (contact + lead magnet) ===================== */ .a-footer{ padding:60px 56px 32px; border-top:1px solid var(--hairline); max-width:1280px;margin:0 auto; } .a-footer-grid{ display:grid;grid-template-columns:1.4fr 1fr;gap:56px; } .contact-form{display:flex;flex-direction:column;gap:10px;position:relative;margin-top:22px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .fg{ border:1px solid var(--hairline); background:var(--surface); border-radius:10px; padding:10px 12px; display:flex;flex-direction:column;gap:4px; transition:border-color .15s,box-shadow .15s; } .fg:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)} .fg label{ font-size:10px;color:var(--muted); font-family:"Geist Mono",ui-monospace,monospace; letter-spacing:0.08em;text-transform:uppercase; } .fg input, .fg textarea, .fg select{ background:transparent;border:0;outline:none; color:var(--text);font-size:14px; font-family:"Geist",ui-sans-serif,system-ui,sans-serif; width:100%;padding:0; } .fg input::placeholder, .fg textarea::placeholder{color:var(--muted-2)} /* Mask Chrome/Firefox autofill so it doesn't paint inputs white. */ .fg input:-webkit-autofill, .fg input:-webkit-autofill:hover, .fg input:-webkit-autofill:focus, .fg textarea:-webkit-autofill, .fg select:-webkit-autofill, .chat-input input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px var(--surface) inset !important; box-shadow:0 0 0 1000px var(--surface) inset !important; -webkit-text-fill-color:var(--text) !important; caret-color:var(--text); transition:background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; } .fg input:autofill,.fg textarea:autofill,.fg select:autofill{ background:var(--surface) !important;color:var(--text) !important; } .fg textarea{resize:vertical;min-height:72px;line-height:1.5} .fg select{appearance:none;-webkit-appearance:none;cursor:pointer} .fg select option{background:var(--surface);color:var(--text)} .fg.textarea{min-height:96px} .form-submit{ margin-top:6px;background:var(--amber);color:#0a1424; border:0;padding:12px 20px;border-radius:10px; font-weight:700;font-size:14px;cursor:pointer; align-self:flex-start; transition:background .15s,transform .15s,box-shadow .15s; } .form-submit:hover{background:var(--amber-2);transform:translateY(-1px);box-shadow:0 14px 30px -10px var(--amber-glow)} .form-status{ font-size:13px;margin-top:4px;color:var(--text-2); font-family:"Geist Mono",ui-monospace,monospace; } .form-status.ok{color:var(--green)} .form-status.err{color:var(--red)} .lm-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:14px;padding:22px;align-self:start; } .lm-card .lm-head{display:flex;align-items:center;gap:10px} .lm-card .lm-logo{ width:28px;height:28px;border-radius:6px; background:linear-gradient(135deg,var(--amber),var(--amber-2)); color:#0a1424;display:grid;place-items:center; font-weight:800;font-size:12px; } .lm-card .lm-title{font-weight:700;font-size:15px} .lm-card .lm-body{margin-top:8px;color:var(--text-2);font-size:13px;line-height:1.55} .lm-card .lm-list{ margin-top:12px;list-style:none;padding:0; display:flex;flex-direction:column;gap:6px; } .lm-card .lm-list li{ font-size:13px;color:var(--text-2); display:flex;gap:8px; } .lm-card .lm-list li::before{content:"✓";color:var(--amber);font-weight:700} .lm-form{margin-top:14px;display:flex;flex-direction:column;gap:10px;position:relative} .lm-form .form-submit{width:100%;text-align:center;align-self:stretch;padding:11px 0} .lm-fineprint{ margin-top:12px;font-size:11px;color:var(--muted); font-family:"Geist Mono",ui-monospace,monospace; } .a-footer-rule{ margin-top:36px;padding-top:20px; border-top:1px solid var(--hairline); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:12px;color:var(--muted); font-family:"Geist Mono",ui-monospace,monospace; } .a-footer-rule a{color:inherit;text-decoration:none} .a-footer-rule a:hover{color:var(--amber)} /* ===================== STICKY CTA ===================== */ .sticky-cta{ display:none;position:fixed;left:16px;right:84px;bottom:16px; z-index:150;background:var(--amber);color:#0a1424; text-align:center;padding:14px 20px;border-radius:10px; font-weight:700;font-size:14px;text-decoration:none; box-shadow:0 8px 30px rgba(0,0,0,0.5); } /* ===================== CHAT WIDGET (v3 · breathing + teaser) ===================== */ /* Critical: the [hidden] attribute is otherwise overridden by display:flex below. */ .chat-widget[hidden]{display:none !important} .chat-toggle[hidden]{display:none !important} @keyframes chatBreath{ 0%,100%{box-shadow:0 8px 30px rgba(0,0,0,0.5), 0 0 0 0 rgba(245,180,0,0.55)} 50% {box-shadow:0 12px 38px rgba(0,0,0,0.55), 0 0 0 18px rgba(245,180,0,0)} } @keyframes chatBob{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-4px)} } @keyframes chatTeaserIn{ 0% {opacity:0;transform:translateY(8px) scale(.96)} 100%{opacity:1;transform:translateY(0) scale(1)} } @keyframes chatWidgetIn{ 0% {opacity:0;transform:translateY(12px) scale(.98)} 100%{opacity:1;transform:translateY(0) scale(1)} } @keyframes chatDot{ 0%,80%,100%{opacity:.25;transform:translateY(0)} 40% {opacity:1; transform:translateY(-3px)} } .chat-toggle{ position:fixed;z-index:160; /* Anchor with `left` + `top` so JS can drift it freely. `right`/`bottom` would fight the transition. The :empty initial state (no inline left/top) gets bottom-right via the fallback rule below. */ width:64px;height:64px;border-radius:50%;border:0; background:linear-gradient(140deg, #ffc83a 0%, #f5b400 55%, #d99c00 100%); color:#0a1424; font-size:28px;line-height:1;cursor:pointer; box-shadow:0 8px 30px rgba(0,0,0,0.5); transition:transform .15s ease, box-shadow .2s ease, left 1.8s cubic-bezier(.4,.0,.2,1), top 1.8s cubic-bezier(.4,.0,.2,1); animation:chatBreath 2.6s ease-in-out infinite, chatBob 4.2s ease-in-out infinite; display:inline-flex;align-items:center;justify-content:center; } /* Fallback initial position before JS runs / when JS is off. */ .chat-toggle:not([style*="left"]){ right:20px; bottom:20px; } .chat-toggle:hover{transform:translateY(-3px) scale(1.05);animation-play-state:paused} .chat-toggle:active{transform:translateY(-1px) scale(0.98)} .chat-toggle .dot{ position:absolute;top:6px;right:6px; width:14px;height:14px;border-radius:50%; background:#fb7185;border:2px solid var(--bg); display:none; } .chat-toggle.has-notice .dot{display:block} .chat-teaser{ position:fixed;z-index:155; max-width:260px; background:var(--surface);color:var(--text); border:1px solid var(--hairline-strong); border-radius:14px 14px 4px 14px; padding:10px 12px 10px 36px; font-size:13px;line-height:1.4; box-shadow:0 12px 36px rgba(0,0,0,0.5); animation:chatTeaserIn .35s ease-out; cursor:pointer; transition:left 1.8s cubic-bezier(.4,.0,.2,1), top 1.8s cubic-bezier(.4,.0,.2,1); } /* Fallback position before JS positions it. */ .chat-teaser:not([style*="left"]){ right:92px; bottom:96px; } .chat-teaser::before{ content:"S"; position:absolute;left:8px;top:8px; width:22px;height:22px;border-radius:50%; background:var(--amber);color:#0a1424; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:11px; } .chat-teaser .close{ position:absolute;top:4px;right:6px; width:18px;height:18px;border-radius:4px; display:flex;align-items:center;justify-content:center; color:var(--muted);font-size:14px;line-height:1;cursor:pointer; } .chat-teaser .close:hover{background:rgba(255,255,255,0.08);color:var(--text)} .chat-widget{ position:fixed;bottom:96px;right:20px;z-index:170; width:380px;max-width:calc(100vw - 32px); height:520px;max-height:calc(100vh - 120px); background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); border:1px solid var(--hairline-strong); border-radius:18px; display:flex;flex-direction:column;overflow:hidden; box-shadow:0 24px 68px rgba(0,0,0,0.65), 0 0 0 1px rgba(245,180,0,0.08); transition:height .25s ease; animation:chatWidgetIn .28s ease-out; } .chat-widget.minimized{height:54px;cursor:pointer} .chat-widget.minimized .chat-body{display:none} .chat-widget.minimized .chat-head{border-bottom:0} .chat-head{ background:linear-gradient(90deg, rgba(245,180,0,0.10) 0%, rgba(245,180,0,0.02) 100%); border:0;width:100%; padding:14px 16px; border-bottom:1px solid var(--hairline); color:var(--text); font-weight:700;font-size:14px; display:flex;justify-content:space-between;align-items:center; cursor:pointer;text-align:left; } .chat-head:hover{background:linear-gradient(90deg, rgba(245,180,0,0.16) 0%, rgba(245,180,0,0.04) 100%)} .chat-head-title{display:flex;align-items:center;gap:10px} .chat-avatar{ width:28px;height:28px;border-radius:50%; background:linear-gradient(140deg, #ffc83a 0%, #f5b400 100%); color:#0a1424;font-weight:700;font-size:13px; display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 2px rgba(245,180,0,0.15); } .chat-status-dot{ width:8px;height:8px;border-radius:50%; background:var(--green);box-shadow:0 0 8px var(--green); animation:chatBreath 3s ease-in-out infinite; } .chat-head-actions{display:flex;gap:4px;align-items:center} .chat-icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:6px; color:var(--text-2);font-size:18px;line-height:1;cursor:pointer; background:none;border:0; transition:background .12s,color .12s; } .chat-icon-btn:hover{background:rgba(255,255,255,0.10);color:var(--text)} #chatMinimize{font-size:22px} .chat-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0} .chat-log{ flex:1;overflow-y:auto;padding:14px 14px 8px; display:flex;flex-direction:column;gap:10px; font-size:14px;min-height:0; } .chat-log .m{ padding:10px 13px;border-radius:14px;max-width:85%; line-height:1.5;white-space:pre-wrap; animation:chatTeaserIn .2s ease-out; } .chat-log .m.user{ align-self:flex-end; background:linear-gradient(140deg, rgba(245,180,0,0.22) 0%, rgba(245,180,0,0.12) 100%); border:1px solid rgba(245,180,0,0.32); color:var(--text); border-bottom-right-radius:4px; } .chat-log .m.bot{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text); border-bottom-left-radius:4px; } .chat-log .m.bot.admin{ border-color:rgba(122,208,122,0.45); background:linear-gradient(140deg, rgba(122,208,122,0.10) 0%, var(--surface-2) 100%); } .chat-log .m.typing{ display:inline-flex;align-items:center;gap:4px;padding:12px 14px; } .chat-log .m.typing span{ width:6px;height:6px;border-radius:50%;background:var(--muted); animation:chatDot 1.2s ease-in-out infinite; } .chat-log .m.typing span:nth-child(2){animation-delay:.15s} .chat-log .m.typing span:nth-child(3){animation-delay:.3s} .chat-input{ display:flex;border-top:1px solid var(--hairline); padding:10px;gap:8px;background:var(--bg-2); } .chat-input input{ flex:1;background:var(--surface); border:1px solid var(--hairline); border-radius:10px;padding:11px 14px; color:var(--text);font-size:14px;outline:none; transition:border-color .12s, box-shadow .12s; } .chat-input input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,180,0,0.15)} .chat-input button{ background:linear-gradient(140deg, #ffc83a 0%, #f5b400 100%); color:#0a1424;border:0; border-radius:10px;width:44px;cursor:pointer;font-weight:700;font-size:18px; transition:transform .12s; } .chat-input button:hover{transform:translateY(-1px)} @media(prefers-reduced-motion: reduce){ .chat-toggle, .chat-status-dot{animation:none} .chat-widget, .chat-log .m, .chat-teaser{animation:none} } /* ===================== RESPONSIVE ===================== */ @media(max-width:1100px){ .hero-grid{grid-template-columns:1fr;gap:32px} .hero-photo-frame{margin:0 auto} .hero h1{font-size:64px;letter-spacing:-2px} .about-grid{grid-template-columns:1fr;gap:32px} .outcomes-grid{grid-template-columns:repeat(2,1fr)} .a-footer-grid{grid-template-columns:1fr;gap:32px} } @media(max-width:960px){ nav[role="banner"],header[role="banner"] nav{padding:14px 20px} .nav-links{gap:14px;font-size:13px} .nav-links li:not(:last-child){display:none} .hero{padding:48px 20px 32px} .hero h1{font-size:48px;letter-spacing:-1.5px} .hero-photo-frame{max-width:340px} /* Was display:none — caused "Currently on-site" + schedule to vanish on narrow viewports. Keep them visible; just reposition + shrink. */ .hp-card-progress, .hp-card-schedule{ position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; max-width:none; margin:14px 0 0; } .a-strip{margin:0 20px;grid-template-columns:repeat(2,1fr)} .a-strip .cell + .cell{border-left:0} .a-strip .cell:nth-child(2){border-left:1px solid var(--hairline)} .a-strip .cell:nth-child(4){border-left:1px solid var(--hairline)} section,.a-section,.about-grid,.a-footer{padding-left:20px;padding-right:20px} .industry-grid{grid-template-columns:1fr} .stages-wrapper{grid-template-columns:1fr} .outcomes-grid{grid-template-columns:1fr} .services-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .a-footer-rule{flex-direction:column} .sticky-cta{display:block} h2{font-size:32px;letter-spacing:-1px} .about-text h2{font-size:32px} } @media(max-width:600px){ .hero h1{font-size:38px;letter-spacing:-1px} } /* ================================================================= SITE-WIDE ANIMATIONS — same vocabulary as /book, used sparingly ================================================================= */ @keyframes siteFadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @keyframes siteFadeIn { from{opacity:0} to{opacity:1} } @keyframes siteShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes siteSparkleTwinkle { 0%,100%{opacity:0;transform:scale(.3) rotate(0deg)} 50% {opacity:1;transform:scale(1) rotate(90deg)} } @keyframes sitePulseGlow { 0%,100%{box-shadow:0 14px 30px -10px var(--amber-glow), 0 0 0 0 rgba(245,180,0,.55)} 50% {box-shadow:0 18px 40px -8px var(--amber-glow), 0 0 0 12px rgba(245,180,0,0)} } @keyframes siteBounceIn { 0% {transform:scale(.5);opacity:0} 60% {transform:scale(1.08);opacity:1} 100% {transform:scale(1)} } @keyframes siteStatusDot { 0%,100%{box-shadow:0 0 0 0 rgba(245,180,0,.55), 0 0 8px var(--amber)} 50% {box-shadow:0 0 0 6px rgba(245,180,0,0), 0 0 12px var(--amber)} } /* — Hero H1: gold shimmer gradient sweep across the .hl spans only — */ .hero h1 .hl{ background:linear-gradient(120deg, var(--amber) 0%, #ffd76a 50%, var(--amber) 100%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text; color:transparent; animation:siteShimmer 6s linear infinite; } /* — Sparkle layer in the hero (4 stars, different positions + delays) — */ .hero{position:relative} .hero-sparkles{position:absolute;inset:0;pointer-events:none;z-index:0} .hero-sparkles .sp{ position:absolute;width:14px;height:14px;color:var(--amber); animation:siteSparkleTwinkle 4s ease-in-out infinite; filter:drop-shadow(0 0 6px rgba(245,180,0,.6)); } .hero-sparkles .sp svg{width:100%;height:100%} .hero-sparkles .sp:nth-child(1){top:18%;left:48%;animation-delay:0s} .hero-sparkles .sp:nth-child(2){top:30%;left:8%; animation-delay:1.1s} .hero-sparkles .sp:nth-child(3){top:60%;left:62%;animation-delay:.6s;width:10px;height:10px} .hero-sparkles .sp:nth-child(4){top:74%;left:18%;animation-delay:1.8s;width:18px;height:18px} .hero > *{position:relative;z-index:1} /* — Primary buttons: shimmer-on-hover gradient + amber pulse-glow on the hero CTA — */ .btn-primary, .nav-cta, .stage-cta, .sticky-cta{ position:relative;overflow:hidden; } .btn-primary::before, .nav-cta::before, .stage-cta::before, .sticky-cta::before{ content:"";position:absolute;inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size:200% 100%;background-position:-100% 0; opacity:0;transition:opacity .15s;pointer-events:none; } .btn-primary:hover::before, .nav-cta:hover::before, .stage-cta:hover::before, .sticky-cta:hover::before{ opacity:1;animation:siteShimmer 1.2s linear; } /* The hero primary CTA gets a continuous breathing glow to attract the eye. */ .hero-cta-row .btn-primary:first-child{ animation:sitePulseGlow 2.8s ease-in-out infinite; } /* — Floating hero cards: pulsing status dot, fade-up entry — */ .hp-card{animation:siteFadeUp .55s ease-out .15s both} .hp-card .label::before{ content:"";display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--amber);margin-right:7px;vertical-align:middle; animation:siteStatusDot 2.4s ease-in-out infinite; box-shadow:0 0 8px var(--amber); } .hp-card-available .label::before{background:var(--green);box-shadow:0 0 8px var(--green);animation-name:siteStatusDot} .hp-card-progress .bar{position:relative;overflow:hidden} .hp-card-progress .bar::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%); background-size:200% 100%;background-position:-100% 0; animation:siteShimmer 2.6s linear infinite; } /* — Stat strip cells: bounce-in on appear (staggered via JS reveal observer) — */ .a-strip .cell{transition:transform .2s ease, background .2s ease} .a-strip .cell:hover{transform:translateY(-2px);background:var(--surface-2)} .a-strip .cell.amber .num{ background:linear-gradient(120deg, var(--amber) 0%, #ffd76a 50%, var(--amber) 100%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:siteShimmer 7s linear infinite; } /* — Industry / outcome / service cards: hover lift + amber edge glow — */ .ind-card, .out-card, .svc-card{ transition:transform .2s cubic-bezier(.4,.0,.2,1), border-color .2s, box-shadow .25s, background .2s; } .ind-card:hover, .out-card:hover, .svc-card:hover{ transform:translateY(-4px); border-color:rgba(245,180,0,.45); box-shadow:0 14px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(245,180,0,.15); } /* — Stage cards (engagement section) — */ .stage-card.glow{position:relative} .stage-card.glow::before{ content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none; background:linear-gradient(120deg, transparent 30%, rgba(245,180,0,.4) 50%, transparent 70%); background-size:200% 100%;background-position:-100% 0; opacity:0;transition:opacity .2s; -webkit-mask:linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); -webkit-mask-composite:source-out; mask:linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); mask-composite:exclude; } .stage-card.glow:hover::before{opacity:1;animation:siteShimmer 1.4s linear} /* — Reveal-on-scroll. JS adds .revealed when the element scrolls into view. — */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s cubic-bezier(.4,.0,.2,1)} .reveal.revealed{opacity:1;transform:none} .reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s cubic-bezier(.4,.0,.2,1)} .reveal-stagger.revealed > *{opacity:1;transform:none} .reveal-stagger.revealed > *:nth-child(1){transition-delay:.00s} .reveal-stagger.revealed > *:nth-child(2){transition-delay:.06s} .reveal-stagger.revealed > *:nth-child(3){transition-delay:.12s} .reveal-stagger.revealed > *:nth-child(4){transition-delay:.18s} .reveal-stagger.revealed > *:nth-child(5){transition-delay:.24s} .reveal-stagger.revealed > *:nth-child(6){transition-delay:.30s} .reveal-stagger.revealed > *:nth-child(n+7){transition-delay:.36s} /* — FAQ items: smoother open animation — */ .faq-item .faq-a{ max-height:0;overflow:hidden; transition:max-height .35s cubic-bezier(.4,.0,.2,1), padding .25s ease; } .faq-item.open .faq-a{max-height:1000px;padding-top:14px} /* — Contact form submit button: shimmer on hover — */ .form-submit, button[type=submit]{position:relative;overflow:hidden} .form-submit::before, button[type=submit]::before{ content:"";position:absolute;inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size:200% 100%;background-position:-100% 0; opacity:0;transition:opacity .15s;pointer-events:none; } .form-submit:hover::before, button[type=submit]:hover::before{opacity:1;animation:siteShimmer 1.2s linear} @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important } .reveal, .reveal-stagger > * { opacity:1 !important; transform:none !important } }