/* ========================================================================= BLACK SAIL LABS — "Luxury Bahamian · Black-Sail Cinematic" design system Full-screen video hero → bright, airy, resort-luxury content. Fraunces display · Plus Jakarta Sans body · turquoise + sandy gold · navy ink ========================================================================= */ /* ------------------------------ TOKENS ---------------------------------- */ :root{ /* Deep ocean navy (dark hero + footer) */ --navy-950:#051620; --navy-900:#08202e; --navy-850:#0a2838; --navy-800:#0d3145; --navy-700:#123f57; /* Vivid Bahamian turquoise */ --turq:#0fbfb3; --turq-bright:#25d7c8; --turq-deep:#0a8f88; --turq-tint:#e7f7f5; --turq-ink:#063d3b; /* Sandy treasure gold */ --gold:#d8a24a; --gold-bright:#f0cf8a; --gold-deep:#b47f2b; --gold-ink:#241a08; /* Light, airy surfaces */ --paper:#ffffff; --cream:#faf6ee; --sand:#f4ecdd; /* Ink / text */ --ink:#0d2732; /* headings on light */ --ink-soft:#46606d; /* body on light */ --ink-faint:#7a8f99; --on-dark:#eef6f6; /* headings on dark */ --on-dark-soft:#bcd4d8;/* body on dark */ /* Effects — soft, premium */ --shadow-sm:0 3px 14px rgba(13,39,50,.07); --shadow-md:0 24px 50px -30px rgba(13,39,50,.40); --shadow-lg:0 50px 90px -45px rgba(13,39,50,.55); --glow-gold:0 18px 46px -16px rgba(216,162,74,.55); --glow-turq:0 0 0 1px rgba(37,215,200,.30),0 26px 70px -22px rgba(15,191,179,.45); --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:34px; --r-pill:999px; /* ---- FLAT WATER additions (2026 homepage redesign + shared light chrome). The navy/gold hexes above are canonical — never redefined. ---- */ --ink-2:#42606e; /* body copy on light */ --ink-3:#748e9b; /* captions, meta, eyebrows */ --fog:#edf3f7; /* alternating sections + footer — pale ocean blue */ --hairline:#e3e9ed; /* every 1px border on light */ --grid-line:rgba(13,39,50,.05); /* chart-paper grid, hero only — a touch stronger on the blue wash */ --on-dark-2:#afc6cf; --dark-hairline:rgba(242,247,249,.14); --shadow-hairline:0 1px 2px rgba(13,39,50,.05); --shadow-frame:0 1px 2px rgba(13,39,50,.06),0 32px 64px -36px rgba(13,39,50,.25); --r-6:6px; --r-10:10px; --r-14:14px; --r-18:18px; --section-pad:clamp(5.5rem,4rem + 6vw,9rem); --measure:34em; --fs-h1:clamp(2.75rem,1.9rem + 4vw,4.5rem); --fs-h2:clamp(2rem,1.55rem + 2vw,3rem); --fs-lede:clamp(1.125rem,1.05rem + .35vw,1.3125rem); --wrap:1180px; --ff-serif:"Fraunces",Georgia,"Times New Roman",serif; --ff-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --ease:cubic-bezier(.2,.7,.2,1); --header-h:72px; } /* ------------------------------ RESET ----------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);overflow-x:clip} body{ font-family:var(--ff-sans); color:var(--ink); background:var(--paper); line-height:1.65; font-size:clamp(1rem,.97rem + .18vw,1.12rem); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* clip, not hidden: `overflow-x:hidden` forces overflow-y to compute to `auto`, making a scroll container. On iOS that hands the page a stray horizontal rubber-band and janky momentum/URL-bar scrolling. `clip` kills sideways panning without creating a scroll container, so the normal document scroll (and position:sticky) behave. */ overflow-x:clip; } img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} ul,ol{list-style:none;padding:0} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} h1,h2,h3,h4{font-family:var(--ff-serif);font-weight:600;line-height:1.04;letter-spacing:-.018em;color:var(--ink)} :focus-visible{outline:2px solid var(--navy-700);outline-offset:3px;border-radius:4px} /* ------------------------------ HELPERS --------------------------------- */ .wrap{width:min(var(--wrap),92%);margin-inline:auto} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:16px;top:-64px;z-index:1200;background:var(--gold);color:var(--navy-900); padding:.6rem 1.1rem;border-radius:var(--r-pill);font-weight:700;transition:top .2s var(--ease)} .skip-link:focus{top:14px} .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--ff-sans);font-weight:700;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase; color:var(--navy-700); } .eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--gold)} .eyebrow--ondark{color:var(--gold-bright)} .eyebrow--center{justify-content:center} .gold-word{ font-style:italic;font-weight:500; background:linear-gradient(96deg,var(--gold-bright),var(--gold) 48%,var(--gold-deep)); -webkit-background-clip:text;background-clip:text;color:transparent; padding-right:.06em; } /* ------------------------------ BUTTONS --------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--ff-sans);font-weight:700;font-size:.9375rem;letter-spacing:.01em; padding:.9rem 1.6rem;border-radius:var(--r-10); transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .2s var(--ease),border-color .2s var(--ease); will-change:transform;position:relative;white-space:nowrap; } .btn--gold{ background:linear-gradient(180deg,var(--gold-bright),var(--gold) 60%,var(--gold-deep)); color:var(--gold-ink);box-shadow:var(--shadow-hairline); } .btn--gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(176,127,43,.6)} .btn--ink{background:var(--ink);color:#fff} .btn--ink:hover{transform:translateY(-2px);background:var(--navy-700);color:#fff} .btn--outline{ background:rgba(255,255,255,.06);color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);backdrop-filter:blur(4px); } .btn--outline:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px #fff,0 12px 30px -16px rgba(5,22,32,.5);color:#fff} .btn--ghost-dark{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(13,39,50,.25)} .btn--ghost-dark:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--navy-700);color:var(--navy-700)} .btn--sm{padding:.6rem 1.15rem;font-size:.9rem} .btn--lg{padding:1.15rem 2.15rem;font-size:1.08rem} .btn--block{width:100%} /* ------------------------------ BRAND / LOGO ---------------------------- */ .brand{display:inline-flex;align-items:center;gap:.7rem} .brand__mark{width:40px;height:40px;flex:none;color:var(--ink)} .brand__name{font-family:var(--ff-serif);font-weight:600;font-size:1.24rem;letter-spacing:-.01em;color:var(--ink)} .brand__name span{color:var(--gold-deep)} /* ------------------------------ HEADER ---------------------------------- Single light state (quiet chrome). The hairline + shadow fade in with the existing .is-scrolled JS; so does the sticky CTA — hidden at the top of the page so it never competes with the hero's one gold button. */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(255,255,255,.85); backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid transparent; transition:box-shadow .35s var(--ease),border-color .35s var(--ease); } .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h);padding:.6rem 0} .site-header.is-scrolled{ border-bottom-color:var(--hairline); box-shadow:var(--shadow-hairline); } .nav{display:flex;align-items:center;position:relative} .nav__links{display:flex;align-items:center;gap:.3rem} .nav__link{ color:var(--ink);font-weight:600;font-size:.9375rem;padding:.55rem .9rem;border-radius:var(--r-10); transition:color .2s var(--ease),background .2s var(--ease); } .nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink);background:var(--fog)} .nav__cta{margin-left:.45rem} /* delayed sticky CTA — invisible over the hero, fades in on scroll */ .nav__cta .btn{opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .35s var(--ease),transform .35s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)} .site-header.is-scrolled .nav__cta .btn{opacity:1;pointer-events:auto;transform:none} .nav__toggle{display:none;flex-direction:column;gap:5px;padding:10px;border-radius:var(--r-10)} .nav__toggle span{width:24px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s var(--ease),background .3s var(--ease)} /* ------------------------------ HERO (VIDEO) ---------------------------- */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:100vh;min-height:100svh; display:flex;align-items:center;justify-content:center;text-align:center; color:var(--on-dark); } .hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--navy-950)} .hero__poster,.hero__video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 45%; } .hero__video{opacity:0;transition:opacity 1.4s var(--ease)} .hero__video.is-playing{opacity:1} .hero__scrim{ position:absolute;inset:0;z-index:-1; background: radial-gradient(120% 85% at 50% 38%,rgba(5,20,30,.05),rgba(5,20,30,.42) 78%), linear-gradient(180deg,rgba(5,20,30,.72) 0%,rgba(5,20,30,.28) 20%,rgba(5,20,30,.16) 46%,rgba(5,20,30,.52) 80%,rgba(5,20,30,.9) 100%); } .hero__inner{ position:relative;width:min(var(--wrap),92%);margin-inline:auto; padding:calc(var(--header-h) + 3rem) 0 6rem; } .hero__lockup{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.6rem} .hero__lockup .brand__mark{width:46px;height:46px;color:#fff} .hero__lockup .brand__name{font-size:1.35rem} .hero h1{ color:#fff;font-weight:600; font-size:clamp(2.6rem,3vw + 2.1rem,5.4rem); letter-spacing:-.025em;line-height:1.0; max-width:16ch;margin:0 auto; text-shadow:0 6px 44px rgba(5,20,30,.5); } .hero__sub{ margin:1.5rem auto 0;max-width:40rem;color:var(--on-dark-soft); font-size:clamp(1.06rem,.5vw + 1rem,1.3rem);line-height:1.55; text-shadow:0 2px 20px rgba(5,20,30,.4); } .hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.1rem} .hero__reassure{ display:inline-flex;align-items:center;gap:.55rem;margin-top:1.5rem; color:var(--turq-bright);font-weight:600;font-size:.98rem; } .hero__reassure svg{color:var(--turq-bright);flex:none} /* scroll-down cue */ .hero__scroll{ position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:1; display:inline-flex;flex-direction:column;align-items:center;gap:.4rem; color:rgba(255,255,255,.78);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; } .hero__scroll svg{animation:bob 2.4s var(--ease) infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} /* short hero (pricing — photographic) */ .hero--short{min-height:clamp(460px,66vh,640px)} .hero--short .hero__scrim{ background: radial-gradient(120% 90% at 50% 35%,rgba(5,20,30,.15),rgba(5,20,30,.5) 80%), linear-gradient(180deg,rgba(5,20,30,.75) 0%,rgba(5,20,30,.35) 34%,rgba(5,20,30,.4) 70%,rgba(5,20,30,.72) 100%); } .hero--short .hero__inner{padding:calc(var(--header-h) + 3.5rem) 0 4rem} .vat-note{ display:inline-block;margin-top:1.5rem;color:var(--on-dark);font-size:.92rem; padding:.55rem 1.1rem;border-radius:var(--r-pill);background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(4px); } /* ------------------------------ SECTIONS -------------------------------- */ .section{padding:clamp(4rem,8.5vw,7.5rem) 0} .section--tight{padding:clamp(2.8rem,5.5vw,4.5rem) 0} .section--paper{background:var(--paper)} .section--cream{background:var(--cream)} .section--sand{background:var(--sand)} .section-head{max-width:48rem;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)} .section-head--center{margin-inline:auto;text-align:center} .section-head h2{font-size:clamp(2rem,2.6vw + 1.3rem,3.5rem);margin-top:1rem;line-height:1.04} .section-head p{margin-top:1.1rem;color:var(--ink-soft);font-size:1.12rem;max-width:44rem} .section-head--center p{margin-inline:auto} /* ------------------------------ TRUST STRIP ----------------------------- */ .trust-strip{background:var(--paper);border-bottom:1px solid rgba(13,39,50,.07)} .trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 3rem;padding:1.5rem 0} .trust__item{display:inline-flex;align-items:center;gap:.75rem;color:var(--ink);font-weight:600;font-size:1.02rem} .trust__ico{ display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none;color:#fff; background:linear-gradient(135deg,var(--turq-bright),var(--turq-deep)); box-shadow:0 10px 24px -10px rgba(15,191,179,.65); } /* ------------------------------ STEPS ----------------------------------- */ .steps{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr)} .step{ position:relative;background:var(--paper);border-radius:var(--r-lg);padding:2.5rem 1.9rem 2.1rem; box-shadow:var(--shadow-md);overflow:hidden;border:1px solid rgba(13,39,50,.06); transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .step:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .step::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--turq),var(--gold))} .step__num{ font-family:var(--ff-serif);font-weight:600;font-size:3rem;line-height:1;display:block;margin-bottom:.7rem; background:linear-gradient(135deg,var(--turq-deep),var(--turq)); -webkit-background-clip:text;background-clip:text;color:transparent; } .step h3{font-size:1.42rem;margin-bottom:.5rem} .step p{color:var(--ink-soft)} /* ------------------------------ FEATURE CARDS --------------------------- */ .cards{display:grid;gap:1.3rem} .cards--4{grid-template-columns:repeat(4,1fr)} .card{ background:var(--paper);border-radius:var(--r-lg);padding:2.1rem 1.8rem; box-shadow:var(--shadow-md);border:1px solid rgba(13,39,50,.06); transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .card__ico{ display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:1.1rem;color:#fff; background:linear-gradient(135deg,var(--turq-bright),var(--turq-deep)); box-shadow:0 14px 32px -12px rgba(15,191,179,.6); } .card h3{font-size:1.32rem;margin-bottom:.45rem} .card p{color:var(--ink-soft)} /* ------------------------------ EXAMPLES -------------------------------- */ .examples{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr)} .example{ background:var(--paper);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-md);border:1px solid rgba(13,39,50,.06); transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .example:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .example__art{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;color:#fff} .example__art--land{background:linear-gradient(150deg,#0a6d63,#25d7c8)} .example__art--cafe{background:linear-gradient(150deg,#7a4a1e,#e8b45a)} .example__art--tour{background:linear-gradient(150deg,#0c3145,#1478a0)} .example__art .bg{position:absolute;inset:auto 0 0 0;width:100%;height:70%} .example__glyph{font-size:3.4rem;filter:drop-shadow(0 6px 18px rgba(0,0,0,.3));z-index:1} .example__type{position:absolute;left:1rem;bottom:.85rem;font-weight:700;font-size:.82rem; letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.94);z-index:1} .example__label{ position:absolute;top:.8rem;right:.8rem;z-index:2; background:rgba(5,20,30,.72);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.05em; padding:.32rem .62rem;border-radius:var(--r-pill);backdrop-filter:blur(3px); } .example__body{padding:1.5rem 1.6rem 1.7rem} .example__body h3{font-size:1.3rem;margin-bottom:.4rem} .example__body p{color:var(--ink-soft);font-size:.98rem} .example__tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem} .tag{font-size:.76rem;font-weight:600;color:var(--turq-deep);background:var(--turq-tint);padding:.32rem .7rem;border-radius:var(--r-pill)} /* ------------------------------ PHOTO BANDS ----------------------------- */ .band{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark)} .band__media{position:absolute;inset:0;z-index:-2} .band__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)} .band:hover .band__media img{transform:scale(1.05)} .band__scrim{position:absolute;inset:0;z-index:-1} .band__inner{padding:clamp(4.5rem,12vw,9rem) 0} /* coast band — left-anchored copy */ .band--coast .band__media img{object-position:center 55%} .band--coast .band__scrim{ background: radial-gradient(90% 120% at 18% 50%,rgba(5,20,30,.82),rgba(5,20,30,.4) 55%,rgba(5,20,30,.3)), linear-gradient(90deg,rgba(5,20,30,.7),rgba(5,20,30,.1) 70%); } .band__quote{max-width:44rem} .band__quote .eyebrow{color:var(--gold-bright)} .band__quote h2{color:#fff;font-size:clamp(2rem,2.6vw + 1.3rem,3.6rem);margin-top:1rem;line-height:1.05} .band__quote p{margin-top:1.2rem;color:var(--on-dark-soft);font-size:1.14rem;max-width:38rem} .band__quote .btn{margin-top:1.9rem} /* water band — centered pricing teaser */ .band--water .band__media img{object-position:center 50%} .band--water .band__scrim{ background: radial-gradient(90% 120% at 50% 20%,rgba(6,61,59,.4),transparent 55%), linear-gradient(180deg,rgba(4,42,52,.72),rgba(5,26,34,.82)); } .band--center .band__inner{text-align:center} .band__center{max-width:46rem;margin-inline:auto} .band__center h2{color:#fff;font-size:clamp(2rem,2.5vw + 1.3rem,3.5rem);margin:1rem 0} .band__center p{color:var(--on-dark);opacity:.94;font-size:1.14rem;margin-bottom:1.9rem;max-width:40rem;margin-inline:auto} /* ------------------------------ PRICING --------------------------------- */ .pricing-grid{display:grid;gap:1.3rem;grid-template-columns:repeat(4,1fr);align-items:start} .plan{ position:relative;background:var(--paper);border-radius:var(--r-lg);padding:2.1rem 1.7rem; box-shadow:var(--shadow-md);border:1px solid rgba(13,39,50,.08);display:flex;flex-direction:column; transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .plan:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .plan--featured{ background:linear-gradient(180deg,var(--navy-800),var(--navy-900));color:var(--on-dark); box-shadow:var(--shadow-lg);border:1px solid rgba(216,162,74,.45); transform:scale(1.035);z-index:2; } .plan--featured:hover{transform:scale(1.035) translateY(-8px)} .plan--featured .plan__name,.plan--featured .plan__amount{color:#fff} .plan--featured .plan__who,.plan--featured .plan__setup,.plan--featured .plan__per{color:var(--on-dark-soft)} .plan--featured .plan__incl-label{color:var(--gold-bright)} .plan--featured .checklist li{color:var(--on-dark-soft)} .plan--featured .checklist b{color:#fff} .plan--featured .checklist svg{color:var(--gold-bright)} .plan__ribbon{ position:absolute;top:0;left:50%;transform:translate(-50%,-50%); background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:var(--gold-ink); font-weight:800;font-size:.76rem;letter-spacing:.05em;padding:.42rem 1rem;border-radius:var(--r-pill); box-shadow:var(--glow-gold);white-space:nowrap; } .plan__name{font-size:1.6rem;color:var(--ink)} .plan__tagline{font-family:var(--ff-serif);font-style:italic;color:var(--navy-700);font-size:1.05rem;margin-top:.15rem} .plan--featured .plan__tagline{color:var(--gold-bright)} .plan__who{color:var(--ink-soft);font-size:.9rem;margin-top:.6rem;min-height:2.7em} .plan__price{display:flex;align-items:baseline;gap:.2rem;margin-top:1rem} .plan__amount{font-family:var(--ff-serif);font-weight:600;font-size:2.9rem;line-height:1;color:var(--ink)} .plan__per{color:var(--ink-faint);font-weight:600} .plan__setup{color:var(--ink-soft);font-size:.9rem;margin-top:.35rem} .plan__cta{margin-top:1.35rem} .plan__incl-label{font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:1.6rem 0 .9rem} .checklist{display:grid;gap:.7rem} .checklist li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-soft);font-size:.94rem;line-height:1.45} .checklist svg{flex:none;margin-top:.15rem;color:var(--navy-700)} .checklist b{color:var(--ink);font-weight:700} /* ------------------------------ ADD-ONS --------------------------------- */ .addons{display:grid;gap:.9rem;grid-template-columns:repeat(3,1fr)} .addon{ display:flex;align-items:center;justify-content:space-between;gap:1rem; background:var(--paper);border-radius:var(--r-md);padding:1.05rem 1.35rem; box-shadow:var(--shadow-sm);border:1px solid rgba(13,39,50,.07); transition:transform .25s var(--ease),box-shadow .25s var(--ease); } .addon:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .addon__name{display:flex;align-items:center;gap:.7rem;font-weight:700;color:var(--ink);font-size:.98rem} .addon .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--navy-700)} .addon__price{color:var(--navy-700);font-weight:700;font-size:.92rem;text-align:right;white-space:nowrap} /* ------------------------------ INCLUDES -------------------------------- */ .includes{display:grid;gap:.9rem;grid-template-columns:repeat(4,1fr)} .include{ display:flex;align-items:center;gap:.7rem;font-weight:700;color:var(--ink); background:var(--paper);border-radius:var(--r-md);padding:1.15rem 1.35rem; box-shadow:var(--shadow-sm);border:1px solid rgba(13,39,50,.07);font-size:.98rem; } .include svg{flex:none;color:var(--navy-700)} /* ------------------------------ FAQ ------------------------------------- */ .faq{display:grid;gap:.85rem;max-width:52rem;margin-inline:auto} .faq details{ background:var(--paper);border-radius:var(--r-md);border:1px solid rgba(13,39,50,.08); box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .25s var(--ease)} .faq details[open]{box-shadow:var(--shadow-md)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer; padding:1.15rem 1.4rem;font-weight:700;color:var(--ink);list-style:none;font-size:1.05rem} .faq summary::-webkit-details-marker{display:none} .faq .chev{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none; color:var(--navy-700);background:var(--fog);border:1px solid var(--hairline);transition:transform .3s var(--ease)} .faq details[open] .chev{transform:rotate(45deg)} .faq details p{padding:0 1.4rem 1.3rem;color:var(--ink-soft)} /* ------------------------------ FINAL CTA ------------------------------- */ .final-cta{position:relative;isolation:isolate;overflow:hidden;text-align:center;color:var(--on-dark)} .final-cta__media{position:absolute;inset:0;z-index:-2} .final-cta__media img{width:100%;height:100%;object-fit:cover;object-position:center 55%} .final-cta__scrim{position:absolute;inset:0;z-index:-1; background: radial-gradient(90% 120% at 50% 12%,rgba(15,191,179,.22),transparent 55%), linear-gradient(180deg,rgba(5,20,30,.78),rgba(5,20,30,.9))} .final-cta .wrap{padding:clamp(4.5rem,11vw,7.5rem) 0} .final-cta h2{color:#fff;font-size:clamp(2.1rem,2.6vw + 1.4rem,3.7rem);margin:1rem auto;max-width:20ch} .final-cta p{color:var(--on-dark-soft);max-width:40rem;margin:0 auto 2rem;font-size:1.12rem} .final-cta__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center} /* ------------------------------ LEGAL PAGES ----------------------------- */ /* compact dark title band */ .legal-hero{ position:relative;isolation:isolate;color:var(--on-dark);text-align:center; background:linear-gradient(180deg,var(--navy-950),var(--navy-850) 70%,var(--navy-900)); padding:calc(var(--header-h) + 3.4rem) 0 3rem; border-bottom:1px solid rgba(188,212,216,.12); } .legal-hero .eyebrow{color:var(--gold-bright)} .legal-hero h1{ color:#fff;font-weight:600;margin-top:1rem; font-size:clamp(2.2rem,2.6vw + 1.5rem,3.6rem);letter-spacing:-.022em;line-height:1.05; } .legal-hero__updated{ display:inline-block;margin-top:1.2rem;color:var(--on-dark);font-size:.9rem; padding:.5rem 1.05rem;border-radius:var(--r-pill);background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); } /* readable content column */ .legal-section{background:var(--paper);padding:clamp(3rem,6vw,5rem) 0} .legal-wrap{width:min(760px,92%);margin-inline:auto} .legal{color:var(--ink-soft);font-size:1.02rem;line-height:1.78} .legal__intro{font-size:1.1rem;color:var(--ink-soft);margin-bottom:.5rem} /* table of contents */ .legal__toc{ background:var(--fog);border:1px solid var(--hairline);border-radius:var(--r-md); padding:1.5rem 1.75rem;margin-bottom:2.8rem;box-shadow:var(--shadow-hairline); } .legal__toc h2{ font-family:var(--ff-sans);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);margin:0 0 .9rem; } .legal__toc ol{list-style:none;counter-reset:toc;display:grid;gap:.5rem} .legal__toc li{counter-increment:toc} .legal__toc a{ display:flex;gap:.6rem;color:var(--ink-soft);font-weight:600;font-size:.96rem; transition:color .2s var(--ease); } .legal__toc a::before{content:counter(toc) ".";color:var(--navy-700);font-weight:700;flex:none;min-width:1.6em} .legal__toc a:hover{color:var(--navy-700)} /* long-form text */ .legal h2{ font-size:clamp(1.35rem,1vw + 1.1rem,1.7rem);color:var(--ink);line-height:1.2; margin:2.8rem 0 .9rem;padding-top:.4rem;scroll-margin-top:calc(var(--header-h) + 18px); } .legal h2:first-of-type{margin-top:.5rem} .legal h3{font-size:1.12rem;color:var(--ink);margin:1.7rem 0 .5rem;font-family:var(--ff-serif);font-weight:600} .legal p{margin-bottom:1.05rem} .legal a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:3px} .legal a:hover{color:var(--ink)} .legal strong{color:var(--ink);font-weight:700} .legal ul,.legal ol.legal-list{margin:0 0 1.15rem;padding-left:1.35rem} .legal ul{list-style:disc} .legal ol.legal-list{list-style:decimal} .legal li{margin-bottom:.5rem;padding-left:.2rem} .legal li::marker{color:var(--navy-700)} .legal__note{ background:var(--fog);border:1px solid var(--hairline);border-left:3px solid var(--navy-700);border-radius:var(--r-md); padding:1.1rem 1.3rem;margin:1.6rem 0;color:var(--ink-2); } .legal__note strong{color:var(--ink)} .legal__contact-box{ margin-top:2.6rem;padding:1.5rem 1.6rem;border-radius:var(--r-md); background:var(--fog);border:1px solid var(--hairline);box-shadow:var(--shadow-hairline); } .legal__contact-box h3{margin-top:0} .legal__back{ display:inline-flex;align-items:center;gap:.4rem;margin-top:2.4rem; font-weight:700;color:var(--navy-700); } .legal__back:hover{color:var(--ink)} .legal__crosslinks{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} .legal__crosslinks a{ font-size:.9rem;font-weight:700;color:var(--navy-700);background:var(--fog); border:1px solid var(--hairline); padding:.5rem .95rem;border-radius:var(--r-pill);text-decoration:none; } .legal__crosslinks a:hover{border-color:var(--ink-3)} /* ------------------------------ FOOTER ---------------------------------- Light chrome: fog surface, ink text, navy links — the navy footer is retired to honor the one-dark-band rule. */ .site-footer{background:var(--fog);color:var(--ink-2);padding:clamp(3.2rem,6vw,4.8rem) 0 2rem; border-top:1px solid var(--hairline)} .site-footer .brand__mark{color:var(--ink)} .site-footer .brand__name{color:var(--ink)} .footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;padding-bottom:2.2rem; border-bottom:1px solid var(--hairline)} .footer__brand .brand{margin-bottom:1rem} .footer__brand p{max-width:34rem;color:var(--ink-2);font-size:.9375rem;line-height:1.6} .footer__contact h4,.footer__legal h4{font-family:var(--ff-sans);font-weight:700;color:var(--ink);font-size:1rem;margin-bottom:.7rem} .footer__mail{color:var(--navy-700);font-weight:700;font-size:1.05rem} .footer__mail:hover{text-decoration:underline;text-underline-offset:3px} .footer__links{display:flex;gap:1.3rem;margin-top:1.1rem} .footer__links a{color:var(--navy-700);font-weight:600} .footer__links a:hover{text-decoration:underline;text-underline-offset:3px} .footer__legal-links{display:flex;flex-direction:column;gap:.65rem} .footer__legal-links a{color:var(--navy-700);font-weight:600} .footer__legal-links a:hover{text-decoration:underline;text-underline-offset:3px} .footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding-top:1.6rem; font-size:.8125rem;color:var(--ink-3)} .footer__note{font-style:normal} /* ------------------------------ REVEAL ---------------------------------- */ .reveal{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.is-visible{opacity:1;transform:none} .reveal-d1{transition-delay:.09s} .reveal-d2{transition-delay:.18s} .reveal-d3{transition-delay:.27s} /* ------------------------------ RESPONSIVE ------------------------------ */ @media (max-width:1000px){ .cards--4{grid-template-columns:repeat(2,1fr)} .pricing-grid{grid-template-columns:repeat(2,1fr)} .plan--featured{transform:none} .plan--featured:hover{transform:translateY(-8px)} .includes{grid-template-columns:repeat(2,1fr)} .addons{grid-template-columns:repeat(2,1fr)} .footer__top{grid-template-columns:1fr 1fr;gap:1.8rem 2rem} .footer__brand{grid-column:1 / -1} } @media (max-width:760px){ .nav__toggle{display:flex} .nav__links{ position:absolute;top:calc(100% + 10px);right:0;left:auto;min-width:min(80vw,320px); flex-direction:column;align-items:stretch;gap:.3rem; background:rgba(255,255,255,.97);backdrop-filter:blur(14px);padding:1rem;border-radius:var(--r-lg); box-shadow:var(--shadow-lg);border:1px solid rgba(13,39,50,.1); opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease)} .nav[data-open="true"] .nav__links{opacity:1;transform:none;pointer-events:auto} .nav__link{color:var(--ink-soft);padding:.8rem 1rem;border-bottom:1px solid var(--hairline);border-radius:0} .nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink);background:var(--fog)} .nav__cta{margin:.55rem 0 0} /* inside the mobile panel the CTA is always visible (the delayed-fade rule is a desktop-header behavior) */ .nav__cta .btn{width:100%;opacity:1;pointer-events:auto;transform:none} .nav[data-open="true"] .nav__toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .nav[data-open="true"] .nav__toggle span:nth-child(2){opacity:0} .nav[data-open="true"] .nav__toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .steps{grid-template-columns:1fr} .cards--4{grid-template-columns:1fr} .examples{grid-template-columns:1fr} .pricing-grid{grid-template-columns:1fr} .includes{grid-template-columns:1fr} .addons{grid-template-columns:1fr} .hero__lockup .brand__name{font-size:1.15rem} .footer__top{grid-template-columns:1fr;gap:1.6rem} .footer__bottom{flex-direction:column} .legal__toc{padding:1.2rem 1.3rem} } /* ------------------------------ REDUCED MOTION -------------------------- */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .band:hover .band__media img{transform:none} .hero__video{display:none!important} .reveal{opacity:1;transform:none} } /* ========================================================================= BLACK SAIL OS + HYBRID MODEL (Sprint 1 additions) New components only — built entirely from the existing tokens above. ========================================================================= */ /* hero emphasis + pricing early-access line */ .hero__sub strong{color:#fff;font-weight:700} .hero__earlyaccess{margin:1.15rem auto 0;max-width:40rem;color:var(--on-dark-soft);font-size:.98rem} .hero__earlyaccess a{color:var(--gold-bright);font-weight:700;text-decoration:underline;text-underline-offset:3px} .hero__earlyaccess a:hover{color:#fff} /* status pills */ .pill{ display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap; font-family:var(--ff-sans);font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; padding:.38rem .8rem;border-radius:var(--r-pill); } .pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .pill--now{color:var(--turq-deep);background:var(--turq-tint);box-shadow:inset 0 0 0 1px rgba(15,191,179,.3)} .pill--soon{color:var(--gold-ink);background:linear-gradient(135deg,var(--gold-bright),var(--gold));box-shadow:var(--glow-gold)} /* Black Sail OS capability grid */ .os-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)} .os-tile{ display:flex;gap:1rem;align-items:flex-start;background:var(--paper);border-radius:var(--r-md); padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm);border:1px solid rgba(13,39,50,.06); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .os-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .os-tile__ico{ display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:none;color:#fff; background:linear-gradient(135deg,var(--turq-bright),var(--turq-deep));box-shadow:0 12px 26px -12px rgba(15,191,179,.6); } .os-tile h3{font-size:1.12rem;margin-bottom:.25rem} .os-tile p{color:var(--ink-soft);font-size:.93rem;line-height:1.5} .os-note{margin-top:1.7rem;text-align:center;color:var(--ink-faint);font-size:.95rem} /* Two ways to work (hybrid) */ .ways{display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr);align-items:stretch} .way{ position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-lg); padding:2.2rem 2rem;box-shadow:var(--shadow-md);border:1px solid rgba(13,39,50,.07); transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .way:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .way--os{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));border-color:rgba(37,215,200,.32)} .way__head{display:flex;align-items:center;justify-content:space-between;gap:1rem} .way__title{font-family:var(--ff-serif);font-weight:600;font-size:1.55rem;color:var(--ink);line-height:1.1} .way--os .way__title{color:#fff} .way__tagline{font-family:var(--ff-serif);font-style:italic;color:var(--turq-deep);font-size:1.05rem;margin-top:.3rem} .way--os .way__tagline{color:var(--turq-bright)} .way__desc{color:var(--ink-soft);margin-top:.9rem} .way--os .way__desc{color:var(--on-dark-soft)} .way__list{display:grid;gap:.65rem;margin:1.3rem 0 1.7rem} .way__list li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-soft);font-size:.95rem;line-height:1.45} .way--os .way__list li{color:var(--on-dark-soft)} .way__list svg{flex:none;margin-top:.15rem;color:var(--turq-deep)} .way--os .way__list svg{color:var(--turq-bright)} .way__cta{margin-top:auto} /* responsive for the new blocks */ @media (max-width:1000px){ .os-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .os-grid{grid-template-columns:1fr} .ways{grid-template-columns:1fr} } /* ========================================================================= HOMEPAGE 2026 — "FLAT WATER" (engineered calm on chart paper) Every selector below is .hx- prefixed and used ONLY by index.html. Shared selectors above are untouched — pricing/legal/404 depend on them. STANDING DISCIPLINE — one gold action per screen. Gold appears at exactly three moments on this page: 1. the hero word + the hero CTA cluster 2. the #os band's waterline rules 3. the final CTA button Everything else is ink. The brand mark's gold and the crew characters' gold hats are identity, exempt from the budget. The old teal accent survives ONLY inside product frames and crew character art, where it is product truth, not decoration. ========================================================================= */ /* Fraunces swap-reflow mitigation: a metrics-tuned local fallback so the hero headline doesn't jump when the webfont lands. */ @font-face{ font-family:"Fraunces-fallback"; src:local("Georgia"); size-adjust:106%;ascent-override:96%;descent-override:24%; } /* ---------- THE label system (one component, nothing else) ---------- */ .hx-label{ display:block;font-family:var(--ff-sans);font-weight:700;font-size:.8125rem; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); } .hx-label--ondark{color:var(--on-dark-2)} /* ---------- display type ---------- */ .hx-h1{ font-family:"Fraunces","Fraunces-fallback",Georgia,serif;font-weight:560; font-variation-settings:"opsz" 144; font-size:var(--fs-h1);line-height:1.03;letter-spacing:-.022em;color:var(--ink); max-width:16ch;margin:.9rem auto 0;text-wrap:balance; } /* the one colored word on the light page — gradient anchored dark enough to hold >=3:1 on white; solid #8f6420 is the no-clip fallback */ .hx-goldword{ font-style:italic;color:#8f6420; background:linear-gradient(180deg,var(--gold-deep),#8f6420 75%); -webkit-background-clip:text;background-clip:text; padding-right:.04em; } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .hx-goldword{color:transparent} } .hx-head{max-width:46rem;margin-inline:auto;text-align:center;margin-bottom:clamp(2.6rem,5vw,3.6rem)} .hx-head h2{ font-family:"Fraunces","Fraunces-fallback",Georgia,serif;font-weight:560; font-variation-settings:"opsz" 144; font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.018em;color:var(--ink); margin-top:.9rem;text-wrap:balance; } .hx-head p{margin:1rem auto 0;color:var(--ink-2);font-size:1.0625rem;line-height:1.6;max-width:38rem} .hx-lede{ margin:1.4rem auto 0;max-width:var(--measure); color:var(--ink-2);font-size:var(--fs-lede);font-weight:500;line-height:1.6; } /* ---------- ONE caption style (roman, never italic) ---------- */ .hx-caption{margin-top:1.2rem;text-align:center;color:var(--ink-3);font-size:.875rem;line-height:1.55;font-style:normal} /* ---------- ONE button system ---------- */ .hx-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap; font-family:var(--ff-sans);font-weight:700;font-size:.9375rem; padding:.85rem 1.5rem;border-radius:var(--r-10); transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease); } .hx-btn:hover{transform:translateY(-2px)} .hx-btn--gold{ background:linear-gradient(180deg,var(--gold-bright),var(--gold) 60%,var(--gold-deep)); color:var(--gold-ink);box-shadow:var(--shadow-hairline); } .hx-btn--gold:hover{box-shadow:0 10px 24px -10px rgba(176,127,43,.55)} .hx-btn--ink{background:var(--ink);color:#fff} .hx-btn--ink:hover{background:var(--navy-700)} .hx-btn--quiet{background:var(--paper);color:var(--ink);border:1px solid var(--hairline)} .hx-btn--quiet:hover{border-color:var(--ink-3)} .hx-btn--block{width:100%} .hx-arrow{transition:transform .25s var(--ease)} .hx-btn:hover .hx-arrow{transform:translateX(3px)} .hx-link{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:3px} .hx-link:hover{color:var(--ink)} .hx-cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;margin-top:2rem} .hx-micro{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.1rem; color:var(--ink-3);font-size:.875rem; } .hx-micro svg{color:var(--navy-700);flex:none} .hx-micro a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:3px} .hx-micro a:hover{color:var(--ink)} .hx-center{text-align:center;margin-top:2.4rem} .hx-center .hx-micro{display:flex;justify-content:center;margin-top:1rem} /* ---------- section shells ---------- */ .hx-section{padding-block:var(--section-pad)} .hx-section--fog{background:var(--fog)} .hx-section--paper{background:var(--paper)} /* ---------- crew emblem — unified: navy well, one gold keyline ---------- */ .hx-emb{ display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none; background:linear-gradient(150deg,var(--navy-700),var(--navy-950)); box-shadow:inset 0 0 0 1.5px rgba(216,162,74,.5); } .hx-emb svg{width:100%;height:100%;display:block} .hx-emb--sm{width:28px;height:28px} /* =========================== HERO — chart paper ========================== THE one deliberate aesthetic risk: an ultra-faint 72px drafting grid at 3.5% navy alpha, hero-only, masked out before the product frame. Delete the .hx-hero::before rule to remove it entirely. */ /* Founder tune: bring a breath of the blue back — sky-to-paper wash, deepest at the very top, white again by the time the product frame sits down. */ .hx-hero{ position:relative;overflow:hidden; background:linear-gradient(180deg,#e6eff6 0%,#f2f7fa 38%,var(--paper) 70%); } .hx-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 72px), repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 72px); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 72%); mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 72%); } /* the retuned wake draws its faint current-lines ON the grid; multiply blending lets the white-alpha trail fade read as transparent over paper */ .hx-wake{ position:absolute;inset:0;width:100%;height:100%;pointer-events:none; mix-blend-mode:multiply; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 82%); mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 82%); } @media (prefers-reduced-motion:reduce){.hx-wake{display:none}} .hx-hero__inner{ position:relative;text-align:center; padding:calc(var(--header-h) + clamp(3.5rem,6vw,6rem)) 0 clamp(3rem,5vw,4.5rem); } /* ---------- the product frame (flat, one precision frame) ---------- */ .hx-frame{ max-width:1040px;margin:3rem auto 0;text-align:left; background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-18); box-shadow:var(--shadow-frame);overflow:hidden; } .hx-chromestrip{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding:.55rem .9rem;background:var(--fog);border-bottom:1px solid var(--hairline); } .hx-chromestrip__dots{display:inline-flex;gap:5px} .hx-chromestrip__dots i{width:8px;height:8px;border-radius:50%;background:#d5dee3} .hx-chromestrip__url{ font-size:.75rem;font-weight:600;color:var(--ink-3); background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill); padding:.2rem 1rem; } .hx-deck{display:grid;grid-template-columns:200px minmax(0,1fr)} .hx-deck__rail{ background:linear-gradient(170deg,#0a2838,#051620);color:var(--on-dark-2); padding:1rem .9rem;display:flex;flex-direction:column;gap:.5rem;font-size:.8rem; } .hx-deck__brand{display:flex;align-items:center;gap:.45rem;color:#fff;font-family:var(--ff-serif);font-size:.85rem;font-weight:600} .hx-deck__status{ display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start; color:#dbe7ed;font-weight:700;font-size:.72rem; padding:.2rem .6rem;border-radius:var(--r-pill);background:rgba(255,255,255,.08);margin:.25rem 0 .5rem; } .hx-dot{width:6px;height:6px;border-radius:50%;background:currentColor} .hx-deck__navitem{position:relative;padding:.38rem .55rem;border-radius:var(--r-6);color:var(--on-dark-2)} .hx-deck__navitem.is-active{ color:#fff;background:rgba(255,255,255,.07); box-shadow:inset 2px 0 0 var(--gold); } .hx-deck__main{padding:1rem;display:flex;flex-direction:column;gap:.75rem;min-width:0;background:var(--fog)} .hx-deck__welcome{ border-radius:var(--r-10);padding:.95rem 1.05rem;color:#fff; background:linear-gradient(160deg,var(--navy-800),var(--navy-950)); } .hx-deck__welcome strong{font-family:var(--ff-serif);font-weight:600;font-size:1.05rem;display:block} .hx-deck__stats{ display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.65rem;padding-top:.6rem; border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:var(--on-dark-2); } .hx-deck__stats em{ display:block;font-style:normal;font-weight:700;font-size:.72rem;letter-spacing:.08em; text-transform:uppercase;color:rgba(175,198,207,.75); } .hx-deck__crewband{display:flex;align-items:center;gap:.3rem;padding:.15rem .1rem} .hx-deck__crewband .hx-emb{width:30px;height:30px;margin-right:-6px} .hx-deck__crewband small{margin-left:.65rem;color:var(--ink-3);font-size:.75rem;font-weight:600} /* the project room line — part of the screenshot, not floating over it */ .hx-deck__room{ display:flex;gap:.6rem;align-items:flex-start; background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-10); padding:.7rem .8rem;box-shadow:var(--shadow-hairline); } .hx-deck__room strong{display:block;font-size:.75rem;color:var(--ink-3);font-weight:700} .hx-deck__room p{margin:.1rem 0 0;font-size:.8rem;line-height:1.45;color:var(--ink)} .hx-deck__tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem} .hx-deck__tile{ background:var(--paper);border-radius:var(--r-10);padding:.7rem .8rem; border:1px solid var(--hairline);box-shadow:var(--shadow-hairline);min-width:0; } .hx-deck__tile strong{display:block;color:var(--ink);font-size:.8rem;font-weight:700} .hx-deck__tile small{color:var(--ink-3);font-size:.72rem} /* ======================= TRUTH STRIP — three facts ======================= */ .hx-truth{background:var(--paper);border-block:1px solid var(--hairline)} .hx-truth__row{display:grid;grid-template-columns:repeat(3,1fr)} .hx-truth__item{display:flex;gap:.9rem;align-items:flex-start;padding:3rem clamp(1rem,2.5vw,2.2rem)} .hx-truth__item + .hx-truth__item{border-left:1px solid var(--hairline)} .hx-truth__item svg{flex:none;color:var(--navy-700);margin-top:.15rem} .hx-truth__item p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--ink-2)} .hx-truth__item strong{display:block;color:var(--ink);font-size:1.0625rem;font-weight:700;margin-bottom:.2rem} /* ==================== HOW IT WORKS — the build replay ==================== */ .hx-steps{ display:grid;grid-template-columns:repeat(3,1fr); border-block:1px solid var(--hairline);margin-bottom:2.4rem; } .hx-steps li{ display:flex;gap:.8rem;align-items:baseline; padding:1.05rem clamp(.9rem,2vw,1.6rem); font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.45; } .hx-steps li + li{border-left:1px solid var(--hairline)} .hx-steps span{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:.9375rem} .hx-demo{ background:var(--paper);border-radius:var(--r-18);border:1px solid var(--hairline); box-shadow:var(--shadow-frame);padding:1.2rem; } .hx-demo__chips{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1rem} /* segmented control */ .hx-demo__tablist,.hx-bp__tabs{ display:inline-flex;flex-wrap:wrap;gap:2px; border:1px solid var(--hairline);border-radius:var(--r-10);padding:3px;background:var(--fog); } .hx-chip{ font-family:var(--ff-sans);font-weight:600;font-size:.875rem;color:var(--ink-2); padding:.45rem .95rem;border-radius:7px; transition:background .2s var(--ease),color .2s var(--ease); } .hx-chip:hover{color:var(--ink)} .hx-chip[aria-selected="true"]{background:var(--ink);color:#fff} .hx-replay{ display:inline-flex;align-items:center;gap:.4rem;margin-left:auto; font-weight:600;font-size:.875rem;color:var(--navy-700); padding:.5rem .95rem;border-radius:var(--r-10);border:1px solid var(--hairline);background:var(--paper); transition:border-color .2s var(--ease); } .hx-replay:hover{border-color:var(--ink-3)} /* the [hidden] attribute must always win over display:flex (typing dots) */ .hx-demo__typing[hidden]{display:none} .hx-demo__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1rem} .hx-demo__chat{ height:400px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:.65rem; background:var(--fog);border-radius:var(--r-14);border:1px solid var(--hairline);padding:.9rem; } .hx-msg{display:flex;gap:.6rem;align-items:flex-start} .hx-msg > div{ background:var(--paper);border:1px solid var(--hairline);box-shadow:var(--shadow-hairline); border-radius:var(--r-10);border-top-left-radius:4px;padding:.55rem .8rem;min-width:0; } .hx-msg strong{display:block;font-size:.78rem;color:var(--ink)} .hx-msg strong i{ font-style:normal;font-weight:700;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3);margin-left:.3rem; } .hx-msg p{margin:.15rem 0 0;font-size:.85rem;line-height:1.45;color:var(--ink-2)} @keyframes hx-msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .hx-msg--in{animation:hx-msg-in .35s var(--ease)} .hx-demo__typing{display:flex;gap:4px;padding:.5rem .9rem} .hx-demo__typing span{ width:7px;height:7px;border-radius:50%;background:var(--ink-3); animation:hx-bounce 1.2s infinite; } .hx-demo__typing span:nth-child(2){animation-delay:.15s} .hx-demo__typing span:nth-child(3){animation-delay:.3s} @keyframes hx-bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}} .hx-demo__preview{display:flex;flex-direction:column;border-radius:var(--r-14);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--shadow-hairline)} .hx-chrome{ display:flex;align-items:center;gap:.6rem;background:var(--fog); padding:.5rem .8rem;border-bottom:1px solid var(--hairline);min-width:0; } .hx-chrome__dots{display:flex;gap:4px} .hx-chrome__dots i{width:8px;height:8px;border-radius:50%;background:#d5dee3} .hx-chrome__url{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:.22rem .8rem; font-size:.72rem;color:var(--ink-3);font-weight:600; } .hx-chrome__badge{ flex:none;font-size:.6875rem;font-weight:700;letter-spacing:.02em;color:var(--ink-2); background:var(--paper);border:1px solid var(--hairline);padding:.24rem .6rem;border-radius:var(--r-pill); } .hx-mini{flex:1;min-height:330px;background:var(--paper);padding:.9rem;display:flex;flex-direction:column;gap:.6rem} .hx-mini__hero{ border-radius:var(--r-10);min-height:130px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.2rem; text-align:center;color:#fff;padding:1rem; /* dark veil over the demo-brand tint keeps white text readable */ background:linear-gradient(rgba(5,22,32,.30),rgba(5,22,32,.30)),linear-gradient(150deg,var(--mini,#123f57),var(--mini2,#42606e)); text-shadow:0 1px 8px rgba(5,22,32,.45); opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease); } .hx-mini__hero.is-on{opacity:1;transform:none} .hx-mini__hero strong{font-family:var(--ff-serif);font-size:1.15rem;font-weight:600} .hx-mini__hero em{font-size:.78rem;opacity:.9} .hx-mini__row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .hx-mini__row.is-on{opacity:1;transform:none} .hx-mini__row span{ background:var(--fog);border:1px solid var(--hairline);border-radius:var(--r-6); padding:.55rem .5rem;text-align:center;font-size:.72rem;font-weight:700;color:var(--ink); } .hx-mini__tabs{display:flex;gap:.4rem;opacity:0;transition:opacity .5s var(--ease)} .hx-mini__tabs.is-on{opacity:1} .hx-mini__tabs span{ font-size:.72rem;font-weight:700;color:var(--navy-700);background:var(--fog); border:1px solid var(--hairline);padding:.28rem .7rem;border-radius:var(--r-pill); } .hx-mini__audit{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;opacity:0;transition:opacity .5s var(--ease)} .hx-mini__audit.is-on{opacity:1} .hx-mini__audit i{ font-style:normal;font-size:.72rem;font-weight:600;color:var(--ink); background:var(--fog);border:1px solid var(--hairline); padding:.2rem .5rem;border-radius:var(--r-pill); } /* ================ THE dark band — Meet Black Sail OS (#os) ================ The page's ONE dark moment. Gold waterline on both edges (entering and exiting the water). No buttons in here — this band is the trust bed, not a CTA moment. */ .hx-os{ position:relative;overflow:hidden;color:var(--on-dark-2); background:linear-gradient(180deg,var(--navy-950),var(--navy-900)); border-top:2px solid var(--gold);border-bottom:2px solid var(--gold); padding-block:var(--section-pad); } .hx-os .hx-aurora{position:absolute;inset:0;width:100%;height:100%;opacity:.5} .hx-os__inner{position:relative} .hx-os .hx-head h2{color:var(--on-dark)} .hx-os .hx-head p{color:var(--on-dark-2)} .hx-crewintro{ text-align:center;color:var(--on-dark);font-weight:600;font-size:1.0625rem; margin:0 auto 2rem;max-width:40rem; } .hx-crewgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:3rem} .hx-crew{ background:transparent;border:1px solid var(--dark-hairline);border-radius:var(--r-14); padding:1.5rem 1.4rem; } .hx-crew .hx-emb{width:64px;height:64px;margin-bottom:.9rem} .hx-crew strong{display:block;font-family:var(--ff-sans);font-weight:700;color:var(--on-dark);font-size:1.0625rem} .hx-crew small{display:block;font-weight:700;font-size:.8125rem;color:var(--on-dark-2);margin:.15rem 0 .5rem} .hx-crew p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--on-dark-2)} /* the truth grid — Live: solid chip + dot · Charted: dashed chip */ .hx-truthgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;max-width:56rem;margin-inline:auto} .hx-module{ display:inline-flex;align-items:center;gap:.5rem; border:1px solid var(--dark-hairline);border-radius:var(--r-pill); padding:.45rem .95rem;color:var(--on-dark);font-size:.875rem;font-weight:600; } .hx-module::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-dark);flex:none} .hx-module.is-ghost{border-style:dashed;color:var(--on-dark-2)} .hx-module.is-ghost::before{width:5px;height:5px;background:transparent;border:1px solid var(--on-dark-2)} .hx-truthnote{ margin:1.8rem auto 0;max-width:var(--measure);text-align:center; color:var(--on-dark-2);font-size:.875rem;line-height:1.6;font-style:normal; } /* ========================== BLUEPRINT (#blueprint) ======================== */ .hx-bp{max-width:56rem;margin-inline:auto} .hx-bp__tabs{margin:0 auto 1.2rem;justify-content:center} .hx-bp__tabswrap{text-align:center;margin-bottom:1.2rem} .hx-bp__card{ display:grid;grid-template-columns:1fr 1fr;gap:1.8rem; background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-18); box-shadow:var(--shadow-hairline);padding:1.8rem; } .hx-bp__col h3{font-family:var(--ff-sans);font-weight:700;font-size:1.0625rem;margin-bottom:.9rem;color:var(--ink)} .hx-bp__col ul{display:grid;gap:.6rem} .hx-bp__col li{ display:flex;align-items:flex-start;gap:.55rem;font-size:.9375rem;color:var(--ink-2);line-height:1.5; } .hx-pill{ flex:none;font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; padding:.22rem .55rem;border-radius:var(--r-pill);margin-top:.1rem;white-space:nowrap; } .hx-pill--built{border:1px solid var(--hairline);background:var(--fog);color:var(--ink)} .hx-pill--charted{border:1px dashed rgba(116,142,155,.6);background:transparent;color:var(--ink-3)} .hx-pill--lock{border:1px dashed rgba(116,142,155,.6);background:transparent;color:var(--ink-3)} .hx-pill--lock::before{ content:"";display:inline-block;width:11px;height:11px;margin-right:.35em;vertical-align:-1.5px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748e9b' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- phones (one row, ~15% smaller than before) ---------- */ .hx-phones{ display:flex;justify-content:center;align-items:flex-start;gap:clamp(1.5rem,5vw,3.5rem); margin-top:3.2rem;flex-wrap:wrap; } .hx-phone{max-width:230px;text-align:center} .hx-phone__frame{ width:178px;height:358px;margin-inline:auto;border-radius:26px;padding:.55rem; background:var(--paper);border:1px solid var(--hairline);box-shadow:var(--shadow-frame); } .hx-phone__screen{ height:100%;border-radius:20px;background:var(--fog);border:1px solid var(--hairline);padding:.6rem; display:flex;flex-direction:column;gap:.5rem;overflow:hidden;text-align:left; } .hx-phone__welcome{ border-radius:var(--r-10);padding:.65rem .75rem;color:#fff; background:linear-gradient(160deg,var(--navy-800),var(--navy-950)); } .hx-phone__welcome strong{font-family:var(--ff-serif);font-weight:600;font-size:.78rem;display:block} .hx-phone__welcome small{color:var(--on-dark-2);font-size:.72rem} .hx-phone__band{display:flex;align-items:center;gap:.25rem} .hx-phone__band .hx-emb--sm{width:24px;height:24px;margin-right:-5px} .hx-phone__band small{margin-left:.6rem;color:var(--ink-3);font-size:.72rem;font-weight:700} .hx-phone__tile{ background:var(--paper);border-radius:var(--r-10);padding:.55rem .65rem;text-align:left; border:1px solid var(--hairline);box-shadow:var(--shadow-hairline); } .hx-phone__tile strong{display:block;color:var(--ink);font-size:.74rem} .hx-phone__tile small{color:var(--ink-3);font-size:.72rem} .hx-phone__frame--ghost{ background:transparent;box-shadow:none; border:2px dashed rgba(13,39,50,.25); } .hx-phone__ghostin{ height:100%;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1rem;text-align:center;padding:1rem; } .hx-phone__ghostin strong{font-family:var(--ff-serif);font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.3} .hx-phone figcaption{margin-top:1rem;color:var(--ink-3);font-size:.875rem;line-height:1.5;max-width:26ch;margin-inline:auto} /* =================== PRICING — the ship's manifest (light) ================ */ .hx-ledger{ max-width:56rem;margin-inline:auto; background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-18); box-shadow:var(--shadow-hairline);overflow:hidden; } .hx-ledger__hdr,.hx-ledger__row{ display:grid;grid-template-columns:10rem minmax(0,1fr) 6.5rem 8.5rem 8rem;gap:1rem;align-items:center; padding:1.1rem 1.5rem; } .hx-ledger__hdr{padding-block:.8rem;border-bottom:1px solid var(--hairline)} .hx-ledger__hdr span{ font-weight:700;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); } .hx-ledger__hdr span:last-child{text-align:right} .hx-ledger__row + .hx-ledger__row{border-top:1px solid var(--hairline)} .hx-ledger__row strong{font-size:1.0625rem;font-weight:700;color:var(--ink)} .hx-ledger__row.is-rec{box-shadow:inset 2px 0 0 var(--navy-700)} .hx-rec{ display:block;width:max-content;margin:.4rem 0 0; font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink); border:1px solid var(--ink);border-radius:var(--r-pill);padding:.16rem .55rem;white-space:nowrap; } .hx-ledger__desc{font-size:.9375rem;color:var(--ink-2);line-height:1.5} .hx-ledger__biz{font-size:.875rem;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums} .hx-ledger__credits{font-size:.875rem;color:var(--ink-3);font-variant-numeric:tabular-nums} .hx-ledger__price{ justify-self:end;text-align:right;font-weight:700;font-size:1.75rem;line-height:1;color:var(--ink); font-variant-numeric:tabular-nums;white-space:nowrap; } .hx-ledger__price i{font-style:normal;font-size:.875rem;color:var(--ink-3);font-weight:600} /* the accountant's totals rule — double hairline, then the fee disclosure set beneath it as the totals note */ .hx-ledger__totals{ border-top:3px double var(--ink);padding:1rem 1.5rem; font-size:.875rem;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums; } /* ====================== TWO WAYS TO SET SAIL (#work) ====================== */ .hx-ways{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:62rem;margin-inline:auto;align-items:stretch} .hx-way{ display:flex;flex-direction:column; background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-18); box-shadow:var(--shadow-hairline);padding:2rem; } .hx-way__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .hx-way__title{font-family:var(--ff-sans);font-weight:700;font-size:1.125rem;color:var(--ink)} .hx-way__chip{ display:inline-flex;align-items:center;gap:.4rem; border:1px solid var(--hairline);border-radius:var(--r-pill);padding:.3rem .7rem; font-size:.75rem;font-weight:600;color:var(--ink);white-space:nowrap; } .hx-way__chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy-700)} .hx-way__tagline{ font-family:"Fraunces","Fraunces-fallback",Georgia,serif;font-style:italic;font-weight:500; font-size:1.375rem;color:var(--ink);margin-top:1rem; } .hx-way__desc{color:var(--ink-2);font-size:.9375rem;line-height:1.6;margin:.7rem 0 1.6rem} .hx-way .hx-btn{margin-top:auto} /* ===================== FINAL CTA — the calm closer ======================= */ /* Bookend: the sky wash returns at the bottom of the voyage. */ .hx-final{ background:linear-gradient(180deg,var(--paper) 0%,#f2f7fa 55%,#e6eff6 100%); text-align:center;padding-block:clamp(5.5rem,10vw,8rem); } .hx-final__rule{width:48px;height:2px;background:var(--gold);margin:0 auto 1.4rem} .hx-final h2{ font-family:"Fraunces","Fraunces-fallback",Georgia,serif;font-weight:560; font-variation-settings:"opsz" 144; font-size:clamp(2.5rem,1.9rem + 3vw,3.75rem);line-height:1.05;letter-spacing:-.02em;color:var(--ink); max-width:18ch;margin:.9rem auto 0;text-wrap:balance; } .hx-final p.hx-sub{margin:1.1rem auto 0;max-width:var(--measure);color:var(--ink-2);font-size:1.0625rem;line-height:1.6} /* ------------------------------ RESPONSIVE ------------------------------ */ @media (max-width:1100px){ .hx-crewgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .hx-ledger__hdr{display:none} .hx-ledger__row{grid-template-columns:minmax(0,1fr) auto;gap:.3rem .9rem} .hx-ledger__row strong{grid-column:1} .hx-ledger__price{grid-row:1;grid-column:2} .hx-ledger__desc,.hx-ledger__biz,.hx-ledger__credits{grid-column:1 / -1} .hx-ledger__totals{text-align:left} } @media (max-width:760px){ .hx-hero__inner{padding-top:calc(var(--header-h) + 3rem)} .hx-deck{grid-template-columns:136px minmax(0,1fr)} .hx-deck__rail{padding:.8rem .6rem;font-size:.75rem} .hx-truth__row{grid-template-columns:1fr} .hx-truth__item{padding:1.3rem .25rem} .hx-truth__item + .hx-truth__item{border-left:0;border-top:1px solid var(--hairline)} .hx-steps{grid-template-columns:1fr} .hx-steps li + li{border-left:0;border-top:1px solid var(--hairline)} .hx-demo__stage{grid-template-columns:1fr} .hx-demo__chat{height:320px} .hx-mini{min-height:300px} .hx-chrome__badge{display:none} .hx-replay{margin-left:0} .hx-crewgrid{grid-template-columns:1fr} .hx-bp__card{grid-template-columns:1fr;padding:1.3rem} .hx-ways{grid-template-columns:1fr} } @media (max-width:560px){ .hx-deck{grid-template-columns:1fr} .hx-deck__rail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;padding:.7rem .8rem} .hx-deck__rail .hx-deck__navitem{padding:.25rem .45rem} .hx-deck__status{margin:0} } /* ========================================================================= THE BOATSWAIN — marketing chat assistant widget (loaded site-wide via chat.js). All selectors .hxchat- prefixed; uses the shared design tokens. ========================================================================= */ .hxchat{position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:1000} /* launcher */ .hxchat__launcher{ display:inline-flex;align-items:center;gap:.6rem; padding:.55rem .95rem .55rem .6rem;border-radius:var(--r-pill); background:var(--ink); color:#fff;box-shadow:0 24px 50px -30px rgba(13,39,50,.4),inset 0 0 0 1px rgba(255,255,255,.1); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .hxchat__launcher:hover{transform:translateY(-2px);box-shadow:0 26px 60px -20px rgba(5,22,32,.55),inset 0 0 0 1px rgba(255,255,255,.22)} .hxchat__launchlabel{font-family:var(--ff-sans);font-weight:700;font-size:.92rem;padding-right:.2rem} .hxchat[data-open="true"] .hxchat__launcher{display:none} /* Phones: icon-only launcher — the labeled pill was wide enough to sit on top of page content (founder screenshot, 2026-07-11). */ @media (max-width: 560px){ .hxchat__launchlabel{display:none} .hxchat__launcher{padding:.55rem;border-radius:50%} } /* crew emblem (Boatswain accent) */ .hxchat__emb{ display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none; color:#fff;font-family:var(--ff-serif);font-weight:600;font-size:1.05rem; background:linear-gradient(150deg,var(--navy-700),var(--navy-950)); box-shadow:inset 0 0 0 1.5px rgba(216,162,74,.5); } .hxchat__emb svg{width:100%;height:100%;display:block} .hxchat__emb--sm{width:28px;height:28px;font-size:.82rem} /* panel */ .hxchat__panel{ position:absolute;right:0;bottom:0;width:min(380px,92vw);height:min(560px,78vh); display:flex;flex-direction:column;overflow:hidden; background:var(--paper);border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(5,22,32,.6),0 0 0 1px rgba(13,39,50,.1); opacity:0;transform:translateY(16px) scale(.98);pointer-events:none; transform-origin:bottom right; transition:opacity .28s var(--ease),transform .28s var(--ease); } .hxchat[data-open="true"] .hxchat__panel{opacity:1;transform:none;pointer-events:auto} .hxchat__head{ display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;flex:none; background:var(--ink);color:#fff; } .hxchat__id{flex:1;min-width:0;line-height:1.2} .hxchat__id strong{display:block;font-family:var(--ff-serif);font-weight:600;font-size:1.02rem} .hxchat__id small{color:var(--on-dark-soft);font-size:.75rem} .hxchat__close{ display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none; color:#fff;background:rgba(255,255,255,.08);transition:background .2s var(--ease); } .hxchat__close:hover{background:rgba(255,255,255,.18)} .hxchat__log{ flex:1;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:.7rem;padding:1rem;background:var(--fog); } .hxchat__msg{display:flex;gap:.5rem;align-items:flex-start;max-width:100%} .hxchat__msg--user{flex-direction:row-reverse} .hxchat__bubble{ border-radius:14px;padding:.6rem .85rem;font-size:.9rem;line-height:1.5; max-width:82%;word-wrap:break-word;overflow-wrap:anywhere; } .hxchat__msg--bot .hxchat__bubble{ background:var(--paper);color:var(--ink-2);border:1px solid var(--hairline); border-top-left-radius:4px;box-shadow:var(--shadow-hairline); } .hxchat__msg--bot .hxchat__bubble strong{color:var(--ink)} .hxchat__msg--bot .hxchat__bubble a{color:var(--navy-700);font-weight:700;text-decoration:underline;text-underline-offset:3px} .hxchat__msg--user .hxchat__bubble{ background:var(--ink);color:#fff; border-top-right-radius:4px; } .hxchat__dots{display:inline-flex;gap:4px;padding:.15rem 0} .hxchat__dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:hxchat-bounce 1.2s infinite} .hxchat__dots i:nth-child(2){animation-delay:.15s} .hxchat__dots i:nth-child(3){animation-delay:.3s} @keyframes hxchat-bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}} .hxchat__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem .8rem 0;flex:none;background:var(--fog)} .hxchat__chip{ font-size:.78rem;font-weight:600;color:var(--navy-700);background:var(--paper); border:1px solid var(--hairline);padding:.35rem .7rem;border-radius:var(--r-pill); transition:border-color .2s var(--ease); } .hxchat__chip:hover{border-color:var(--ink-3)} .hxchat__form{display:flex;gap:.5rem;padding:.7rem .8rem;flex:none;background:var(--fog);border-top:1px solid var(--hairline)} .hxchat__input{ flex:1;min-width:0;font-family:var(--ff-sans);font-size:.9rem;color:var(--ink); padding:.6rem .9rem;border-radius:var(--r-pill);background:var(--paper); border:1.5px solid var(--hairline);transition:border-color .2s var(--ease); } .hxchat__input:focus{outline:none;border-color:var(--navy-700)} .hxchat__send{ display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%; color:#fff;background:var(--ink); box-shadow:var(--shadow-hairline);transition:transform .2s var(--ease),opacity .2s var(--ease),background .2s var(--ease); } .hxchat__send:hover{transform:translateY(-1px);background:var(--navy-700)} .hxchat__send:disabled{opacity:.5;cursor:default;transform:none} .hxchat__foot{padding:0 .9rem .7rem;background:var(--fog);color:var(--ink-2);font-size:.72rem;line-height:1.4;text-align:center} .hxchat__foot a{color:var(--navy-700);font-weight:600;text-decoration:underline} .hxchat .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* --- human handoff: "talk to a human", staff replies, system notices, form --- */ .hxchat__human{ display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.5rem .8rem 0; font-family:var(--ff-sans);font-size:.82rem;font-weight:700;color:var(--navy-700); background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill); padding:.45rem .8rem;transition:border-color .2s var(--ease),background .2s var(--ease); } .hxchat__human:hover{border-color:var(--ink-3);background:var(--fog)} .hxchat__human svg{flex:none} .hxchat__offer{display:flex;justify-content:flex-start;padding-left:2.1rem} .hxchat__human--inline{margin:0} /* staff reply — a real teammate (their name + avatar, never the AI persona) */ .hxchat__emb--staff{background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(13,39,50,.15)} .hxchat__emb--staff img{width:100%;height:100%;object-fit:cover;border-radius:50%} .hxchat__staffcol{min-width:0;display:flex;flex-direction:column;max-width:82%} .hxchat__staffname{font-size:.72rem;font-weight:700;color:var(--navy-700);margin:0 0 .18rem;padding-left:.15rem} .hxchat__msg--staff .hxchat__bubble{ background:var(--paper);color:var(--ink-2);border:1px solid var(--hairline); border-top-left-radius:4px;box-shadow:var(--shadow-hairline);max-width:100%; } .hxchat__msg--staff .hxchat__bubble strong{color:var(--ink)} .hxchat__msg--staff .hxchat__bubble a{color:var(--navy-700);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* system notice + "start a new one?" control */ .hxchat__msg--system{justify-content:center} .hxchat__sysbubble{ font-size:.76rem;line-height:1.5;color:var(--ink-2);text-align:center; background:rgba(13,39,50,.05);border-radius:12px;padding:.5rem .8rem;max-width:90%; } .hxchat__newchat{font-weight:700;color:var(--navy-700);text-decoration:underline;text-underline-offset:2px} /* inline name + email handoff form (kept in the chat flow, not a modal) */ .hxchat__handoff{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem} .hxchat__hinput{ font-family:var(--ff-sans);font-size:.86rem;color:var(--ink); padding:.5rem .7rem;border-radius:10px;background:var(--paper); border:1.5px solid var(--hairline);transition:border-color .2s var(--ease); } .hxchat__hinput:focus{outline:none;border-color:var(--navy-700)} .hxchat__hsend{ align-self:flex-start;font-family:var(--ff-sans);font-size:.82rem;font-weight:700;color:#fff; background:var(--ink);border-radius:var(--r-pill);padding:.45rem 1rem; transition:background .2s var(--ease),opacity .2s var(--ease); } .hxchat__hsend:hover{background:var(--navy-700)} .hxchat__hsend:disabled{opacity:.5;cursor:default} .hxchat__herr{font-size:.74rem;color:#c0442f} @media (max-width:520px){ .hxchat{right:0;bottom:0;left:0} .hxchat__launcher{position:absolute;right:1rem;bottom:1rem} .hxchat__panel{width:100vw;height:82vh;border-radius:var(--r-lg) var(--r-lg) 0 0} .hxchat__input,.hxchat__hinput{font-size:16px} /* ≥16px suppresses iOS zoom-on-focus */ } @media (prefers-reduced-motion:reduce){ .hxchat__panel{transition:opacity .001ms} .hxchat__launcher{transition:none} .hxchat__dots i{animation:none;opacity:.7} } /* ========================================================================= MOTION LAYER — scroll choreography (docs/MOTION-SPEC.md, driven by motion.js). DISCIPLINE: every pre-animation hidden/offset state below is scoped under html.js-motion, a class motion.js adds ONLY when prefers-reduced-motion is off and IntersectionObserver exists. Without it (no JS, reduced motion, old browser) none of these states apply and the page is its complete, final, static self. Compositor properties only: transform / opacity / filter. ========================================================================= */ /* ---------- M1 — route line: above section backgrounds, below content. The svg (built by motion.js) sits at z-index:1; every .wrap is lifted to z-index:2 so the course line weaves BEHIND the page's content. ---------- */ .js-motion main{position:relative} .js-motion main .wrap{position:relative;z-index:2} .hx-route{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} .hx-route__path{fill:none;stroke-width:2;stroke-linecap:round;opacity:.85} .hx-route__pt{ fill:var(--gold);opacity:0;transform:scale(.4); transform-box:fill-box;transform-origin:center; transition:opacity .4s var(--ease),transform .4s cubic-bezier(.34,1.56,.64,1); } .hx-route__pt.is-on{opacity:1;transform:none} /* ---------- M2 — living hero frame ---------- The deck main pans up to 64px inside the frame (56 main + 8 deeper on the welcome card); the padding/negative-margin pair reserves the pan distance with ZERO net layout change (CLS 0). */ .js-motion .hx-deck__main{will-change:transform;padding-bottom:calc(1rem + 64px);margin-bottom:-64px} .js-motion .hx-deck__welcome{will-change:transform} /* first-reveal docking choreography (once, .is-docked) */ .js-motion .hx-frame .hx-deck__rail{opacity:0;transform:translateX(-16px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .js-motion .hx-frame.is-docked .hx-deck__rail{opacity:1;transform:none} .js-motion .hx-frame .hx-deck__welcome{opacity:0;transition:opacity .5s var(--ease) .15s} .js-motion .hx-frame.is-docked .hx-deck__welcome{opacity:1} .js-motion .hx-frame .hx-deck__crewband .hx-emb{opacity:0;transform:scale(.6);transition:opacity .3s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)} .js-motion .hx-frame.is-docked .hx-deck__crewband .hx-emb{opacity:1;transform:none} .js-motion .hx-frame.is-docked .hx-deck__crewband .hx-emb:nth-child(1){transition-delay:.25s} .js-motion .hx-frame.is-docked .hx-deck__crewband .hx-emb:nth-child(2){transition-delay:.31s} .js-motion .hx-frame.is-docked .hx-deck__crewband .hx-emb:nth-child(3){transition-delay:.37s} .js-motion .hx-frame.is-docked .hx-deck__crewband .hx-emb:nth-child(4){transition-delay:.43s} .js-motion .hx-frame.is-docked .hx-deck__crewband .hx-emb:nth-child(5){transition-delay:.49s} .js-motion .hx-frame.is-docked .hx-deck__crewband .hx-emb:nth-child(6){transition-delay:.55s} .js-motion .hx-frame .hx-deck__crewband small{opacity:0;transition:opacity .4s var(--ease) .72s} .js-motion .hx-frame.is-docked .hx-deck__crewband small{opacity:1} .js-motion .hx-frame .hx-deck__room{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease) .8s,transform .45s var(--ease) .8s} .js-motion .hx-frame.is-docked .hx-deck__room{opacity:1;transform:none} /* ---------- M3 — scroll-driven site assembly (#how flyover) ---------- Structure is UNGATED and its default paint is the FINISHED build (styled Harbour Bean + gold audit chip); the chips and wireframe default to opacity:0 because "absorbed into the build" IS their final state. motion.js scrubs everything both ways. Fixed heights reserve all space. */ .hx-asm{max-width:520px;margin:0 auto 2.6rem} .hx-asm__browser{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-14);box-shadow:var(--shadow-frame);overflow:hidden} .hx-asm__chrome{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;background:var(--fog);border-bottom:1px solid var(--hairline)} .hx-asm__dots{display:inline-flex;gap:4px} .hx-asm__dots i{width:8px;height:8px;border-radius:50%;background:#d5dee3} .hx-asm__url{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill); padding:.18rem .8rem;font-size:.7rem;font-weight:600;color:var(--ink-3); } .hx-asm__stage{position:relative;height:296px;padding:.85rem} .hx-asm__chips{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.55rem;pointer-events:none} .hx-asm__chips span{ font-size:.78rem;font-weight:700;color:var(--ink);background:var(--fog); border:1px solid var(--hairline);border-radius:var(--r-pill);padding:.35rem .85rem;opacity:0; } .hx-asm__wire{position:absolute;inset:.85rem;display:flex;flex-direction:column;gap:.6rem;pointer-events:none} .hx-asm__wire i{display:block;border-radius:8px;border:1.5px dashed rgba(13,39,50,.28);background:rgba(13,39,50,.04);opacity:0} .hx-asm__wnav{height:34px} .hx-asm__whero{flex:1} .hx-asm__wcols{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;height:88px} .hx-asm__site{position:absolute;inset:.85rem;display:flex;flex-direction:column;gap:.6rem} .hx-asm__nav{ display:flex;align-items:center;gap:.7rem;height:34px;flex:none; background:var(--ink);color:#fff;border-radius:8px;padding:0 .8rem;font-size:.7rem;font-weight:600; } .hx-asm__nav strong{font-family:var(--ff-serif);font-weight:600;font-size:.8rem;margin-right:auto} .hx-asm__nav span{opacity:.85} .hx-asm__hero{ flex:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.15rem;text-align:center;color:#fff;padding:.8rem; background:linear-gradient(rgba(5,22,32,.30),rgba(5,22,32,.30)),linear-gradient(150deg,#5b4632,#a98d68); text-shadow:0 1px 8px rgba(5,22,32,.45); } .hx-asm__hero strong{font-family:var(--ff-serif);font-weight:600;font-size:1.05rem} .hx-asm__hero em{font-size:.74rem;opacity:.92} .hx-asm__cols{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;height:88px;flex:none} .hx-asm__col{background:var(--fog);border:1px solid var(--hairline);border-radius:8px;padding:.6rem .7rem;overflow:hidden} .hx-asm__col b{display:block;width:46%;height:8px;border-radius:4px;background:var(--ink);opacity:.75} .hx-asm__col i{display:block;height:6px;border-radius:3px;background:#dbe3e8;margin-top:.42rem} .hx-asm__col i:last-child{width:62%} .hx-asm__check{ position:absolute;right:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.35rem; font-size:.72rem;font-weight:700;color:var(--gold-ink); background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border-radius:var(--r-pill);padding:.3rem .65rem;box-shadow:var(--shadow-hairline); } @media (max-width:560px){ .hx-asm__stage{height:264px} .hx-asm__wcols,.hx-asm__cols{height:76px} } /* ---------- M4 — dark-band chip marquee ---------- The wrapper/track/duplicate are built by motion.js, so they only ever exist when motion is allowed. Transform-only CSS animation, paused on hover and (via .is-live) whenever the band is offscreen. */ .hx-marq__clone{display:none} .js-motion .hx-marq{ 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); } .js-motion .hx-marq__track{display:flex;width:max-content;animation:hx-marq 40s linear infinite;animation-play-state:paused;will-change:transform} .js-motion .hx-marq.is-live .hx-marq__track{animation-play-state:running} .js-motion .hx-marq:hover .hx-marq__track{animation-play-state:paused} .js-motion .hx-marq .hx-truthgrid{flex:none;max-width:none;flex-wrap:nowrap;justify-content:flex-start;margin:0;padding-right:.6rem} .js-motion .hx-marq .hx-marq__clone{display:flex} @keyframes hx-marq{to{transform:translateX(-50%)}} /* ---------- M4 — two-ways cards: unified hover (4px lift + hairline darkens); the enter stagger rides the existing .reveal system ---------- */ .js-motion .hx-way{transition:transform .25s var(--ease),border-color .25s var(--ease)} .js-motion .hx-way:hover{transform:translateY(-4px);border-color:var(--ink-3)} /* ---------- M5 — word-split headline reveals (once) ---------- */ .js-motion .hx-split .hx-w{display:inline-block} .js-motion .hx-split:not(.is-in) .hx-w{opacity:0;transform:translateY(14px);filter:blur(6px)} .js-motion .hx-split.is-in .hx-w{opacity:1;transform:none;filter:none;transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease)} /* ---------- M5 — pricing ledger: hairlines draw, content fades, the Growth navy rule draws last. Hairline borders stay in layout (they just go transparent) and are redrawn by scaled ::before/::after — CLS 0. ---- */ .js-motion .hx-ledger__row{position:relative} .js-motion .hx-ledger__row + .hx-ledger__row{border-top-color:transparent} .js-motion .hx-ledger__row + .hx-ledger__row::before{ content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--hairline); transform:scaleX(0);transform-origin:0 50%; } .js-motion .hx-ledger.is-in .hx-ledger__row + .hx-ledger__row::before{transform:none;transition:transform .5s var(--ease)} .js-motion .hx-ledger.is-in .hx-ledger__row:nth-child(3)::before{transition-delay:.06s} .js-motion .hx-ledger.is-in .hx-ledger__row:nth-child(4)::before{transition-delay:.12s} .js-motion .hx-ledger.is-in .hx-ledger__row:nth-child(5)::before{transition-delay:.18s} .js-motion .hx-ledger:not(.is-in) .hx-ledger__hdr, .js-motion .hx-ledger:not(.is-in) .hx-ledger__totals, .js-motion .hx-ledger:not(.is-in) .hx-ledger__row > *{opacity:0} .js-motion .hx-ledger.is-in .hx-ledger__hdr{transition:opacity .4s var(--ease)} .js-motion .hx-ledger.is-in .hx-ledger__row > *{transition:opacity .5s var(--ease)} .js-motion .hx-ledger.is-in .hx-ledger__row:nth-child(2) > *{transition-delay:.15s} .js-motion .hx-ledger.is-in .hx-ledger__row:nth-child(3) > *{transition-delay:.21s} .js-motion .hx-ledger.is-in .hx-ledger__row:nth-child(4) > *{transition-delay:.27s} .js-motion .hx-ledger.is-in .hx-ledger__row:nth-child(5) > *{transition-delay:.33s} .js-motion .hx-ledger.is-in .hx-ledger__totals{transition:opacity .5s var(--ease) .5s} .js-motion .hx-ledger__row.is-rec{box-shadow:none} .js-motion .hx-ledger__row.is-rec::after{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--navy-700); transform:scaleY(0);transform-origin:50% 0; } .js-motion .hx-ledger.is-in .hx-ledger__row.is-rec::after{transform:none;transition:transform .2s var(--ease) .55s} /* ---------- M6 — gold CTA sheen (hover only, no infinite shimmer) ------- */ .js-motion .hx-btn--gold{position:relative;overflow:hidden} .js-motion .hx-btn--gold::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%); transform:translateX(-130%); } .js-motion .hx-btn--gold:hover::after{transform:translateX(130%);transition:transform .5s ease}