/* ============================================================ Vento LP base — reset, layout primitives, shared patterns. Mobile-first: base styles target 390px; enhancements at 768px and 1024px. Requires tokens.css loaded first. ============================================================ */ /* ---- reset ---- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ background:var(--paper); color:var(--ink); font:400 var(--fs-body)/var(--lh-body) var(--sans); -webkit-font-smoothing:antialiased; } img,picture,svg,video{display:block;max-width:100%} a{color:inherit} button{font:inherit;color:inherit} h1,h2,h3{font-weight:500} /* visible focus everywhere; dark contexts flip the ring to white */ :focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:2px} .btn-cta:focus-visible{border-radius:var(--r-pill)} /* skip link — first element in , visible only on focus */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--paper);color:var(--ink); padding:.75rem 1.25rem;font-weight:600; } .skip-link:focus-visible{left:0} /* ---- layout primitives ---- */ .wrap{width:100%;max-width:68rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem)} /* narrow measure caps children but stays LEFT-anchored in the 68rem wrap: the ads are strictly left-anchored and ad->LP continuity is the strategy */ .wrap--narrow>*{max-width:46rem} .section{padding-block:var(--section-pad)} .section--wash{background:var(--wash)} .section--ink{background:var(--ink);color:#fff;--focus-ring:#fff} .section--ink .eyebrow{color:rgba(255,255,255,.78)} .section--ink .lead{color:rgba(255,255,255,.92)} /* the ad-green clock reads AA on dark only; light contexts use --pos (tokens) */ .hero .clock,.section--ink .clock{color:var(--green)} /* consecutive white sections separate with the hairline, not spacing */ .section+.section:not(.section--wash):not(.section--ink){border-top:1px solid var(--line)} /* ---- header (over hero photo; no nav) ---- */ .site-header{position:absolute;inset-inline:0;top:0;z-index:10;padding:1.25rem 0} .site-header .wrap{display:flex;align-items:center} .brandrow{display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none} .brandrow .rud{ width:36px;height:36px; background:url("../img/vento-mark.svg") no-repeat center/contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); /* (ad .rud) */ } .brandrow .wm{font-weight:800;font-size:1.375rem;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.4)} /* (ad .wm) */ /* ---- hero with B&W photo + scrim (ad .creative) ---- */ .hero{ position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100svh; background:var(--ink); color:#fff; overflow:hidden; --focus-ring:#fff; } .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)} .scrim{position:absolute;inset:0;background:var(--scrim-hero)} .hero-inner{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; flex:1; width:100%; max-width:68rem; margin-inline:auto; padding:6.5rem clamp(1.25rem,4vw,2rem) clamp(3.5rem,9vw,5.5rem); } .hero .eyebrow{color:rgba(255,255,255,.78)} /* (ad .ey) */ .hero .display-1{text-shadow:0 4px 24px rgba(0,0,0,.45)} /* (ad .head) */ .hero .lead{ color:rgba(255,255,255,.92); /* (ad .sub) */ text-shadow:0 2px 12px rgba(0,0,0,.5); margin-top:var(--sp-5); max-width:34em; } .hero .lead b,.hero .lead strong{color:#fff} .hero .btn-cta{margin-top:var(--sp-6)} /* ---- light "paper" card (ad .post surface) ---- */ .card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:clamp(1.5rem,5vw,2.5rem); } /* ---- sticky mobile CTA bar ---- */ .sticky-cta{ position:fixed;inset-inline:0;bottom:0;z-index:40; padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-top:1px solid var(--border); transform:translateY(110%); transition:transform .25s ease; } .sticky-cta.is-visible{transform:none} .sticky-cta .btn-cta{width:100%} /* ---- Calendly embed section ---- */ .calendly-slot{margin-top:var(--sp-6)} .calendly-slot .calendly-inline-widget{min-width:320px;height:700px} /* placeholder state while CALENDLY_URL is unset — intentionally empty */ .calendly-pending{min-height:320px;border:1px dashed var(--border);border-radius:var(--r-card)} /* ---- footer ---- */ .site-footer{border-top:1px solid var(--border);padding-block:var(--sp-7);font-size:var(--fs-small);color:var(--ink600)} .site-footer .wrap{display:flex;flex-direction:column;gap:var(--sp-4)} .site-footer .brandrow{color:var(--ink)} .site-footer .brandrow .rud{background-image:url("../img/vento-mark-dark.svg");filter:none} .site-footer .brandrow .wm{text-shadow:none;font-size:1.125rem} /* ---- how-it-works steps (A3 / B6) ---- */ .steps{list-style:none;margin-top:var(--sp-6);display:grid;gap:var(--sp-5);counter-reset:step} .steps li{counter-increment:step;border-top:1px solid var(--line);padding-top:var(--sp-5)} .steps li::before{ content:counter(step,decimal-leading-zero); display:block; font:600 var(--fs-eyebrow)/1 var(--sans); letter-spacing:.12em; color:var(--ink600); margin-bottom:var(--sp-3); } /* ---- plain-text tool row (A4) — names as text, never logos ---- */ .toolrow{margin-top:var(--sp-6);font-weight:600;color:var(--ink600)} /* ---- 9am brief mock (A5) — models creative 10 .reading ---- */ .brief{margin-top:var(--sp-5);border-top:2px solid var(--ink)} .brief-row{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5) 2px;border-bottom:1px solid var(--line)} .brief-row .tag{font:700 .75rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink600)} .brief-row .hd{font-size:1.1875rem;font-weight:600;line-height:1.22} .brief-row .m{font-size:.9375rem;color:var(--ink600);margin-top:var(--sp-1)} .brief-row .m b{font-weight:600} /* ---- FAQ (A7 / B7) ---- */ .faq{margin-top:var(--sp-6);border-top:1px solid var(--ink)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ font-weight:700; padding:var(--sp-5) 2rem var(--sp-5) 0; cursor:pointer; list-style:none; position:relative; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+"; position:absolute;right:.25rem;top:50%;translate:0 -50%; font-weight:400;font-size:1.375rem;line-height:1;color:var(--ink600); } .faq details[open] summary::after{content:"\2212"} .faq details p{padding-bottom:var(--sp-5);color:var(--ink600)} /* ---- dark photo strip (B3) — models creative 02's dark variant ---- */ .photo-strip{position:relative;background:var(--ink);color:#fff;overflow:hidden;--focus-ring:#fff} .photo-strip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.5)} .photo-strip>.wrap{position:relative} .photo-strip .eyebrow{color:rgba(255,255,255,.78)} .photo-strip .caption{margin-top:var(--sp-6);font-size:var(--fs-small);color:rgba(255,255,255,.85);max-width:34rem} /* ---- decision card (B3) — models creative 02 .card; green appears only as accents (status dot, action-box border): the ad's green tag text fails AA at tag size on wash, so the tag reads in ink600 ---- */ .dcard{ background:var(--paper);color:var(--ink); border-radius:26px 26px 26px 6px; /* (ad) */ box-shadow:0 40px 80px -26px rgba(0,0,0,.6); /* (ad) */ padding:clamp(1.5rem,5vw,2.75rem); margin-top:var(--sp-6); max-width:34rem; } .dcard-top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4)} .dcard .chip{display:flex;align-items:center;gap:.6rem;font-weight:700} .dcard .cdot{width:.7rem;height:.7rem;border-radius:50%;background:var(--green);flex:none} .dcard .badge{font:600 .75rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink600)} .dcard .gap{ font-family:var(--serif);font-optical-sizing:auto;font-weight:500; font-size:clamp(3.25rem,11vw,5rem);line-height:1; letter-spacing:var(--ls-display);color:var(--neg); margin-top:var(--sp-3); } .dcard .gaplbl{color:var(--ink600);margin-top:var(--sp-2)} .dcard .route{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)} .dcard .ava{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none} .dcard .route .lbl{display:block;font:600 .75rem/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink600)} .dcard .route .n{font-weight:700} .dcard .route .r{color:var(--ink600)} .dcard .actionbox{margin-top:var(--sp-5);background:var(--wash);border-left:3px solid var(--pos);border-radius:16px;padding:var(--sp-4) var(--sp-5)} .dcard .actionbox .tag{font:700 .75rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink600)} .dcard .actionbox .txt{font-weight:600;margin-top:var(--sp-2)} /* ---- China Live quote section — mirrors the section on getvento.com. The real China Live logo (approved 2026-07-15) renders in its own brand red, as on the main site; the one approved quote + the published attribution. Centered as a deliberate set-piece. ---- */ .quote-section{text-align:center} .quote-section img{display:inline-block;width:110px;height:auto} .quote-section blockquote{ font-family:var(--serif);font-optical-sizing:auto;font-weight:500; font-size:clamp(1.75rem,4.4vw + .6rem,3rem); line-height:1.18;letter-spacing:var(--ls-display); max-width:22em;margin:var(--sp-6) auto 0; } .quote-section figcaption{margin-top:var(--sp-5);font-size:var(--fs-small);color:var(--ink600)} /* ---- proof small print (A6 / B5) ---- */ .smallprint{margin-top:var(--sp-5);font-size:var(--fs-small);color:var(--ink600)} /* ---- breakpoints: enhance at 768 / 1024 ---- */ @media (min-width:768px){ .sticky-cta{display:none} .brandrow .rud{width:40px;height:40px} .brandrow .wm{font-size:1.5rem} .site-footer .wrap{flex-direction:row;align-items:center;justify-content:space-between} .steps{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)} .brief-row{flex-direction:row;gap:var(--sp-5)} .brief-row .tag{flex:0 0 5.5rem;padding-top:.4rem} } @media (min-width:1024px){ .hero-inner{padding-bottom:6rem} } /* ---- reduced motion ---- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .sticky-cta{transition:none} }