/* ========================================================= CONVOKE NAVBAR styles.css Base layout / Responsive ========================================================= */ /* ========================================================= DESIGN TOKENS ========================================================= */ :root { /* Typography */ --cv-heading-font: "Plus Jakarta Sans", sans-serif; --cv-body-font: "Manrope", sans-serif; /* Navbar */ --cv-navbar-height: 82px; --cv-navbar-padding: clamp(18px, 3vw, 48px); /* Radius */ --cv-radius-sm: 8px; --cv-radius-md: 10px; --cv-radius-lg: 14px; /* Transition */ --cv-transition: 180ms ease; } /* ========================================================= BASIC RESET FOR NAVBAR ========================================================= */ .cv-navbar, .cv-navbar *, .cv-mobile-menu, .cv-mobile-menu * { box-sizing: border-box; } .cv-navbar button, .cv-navbar a { font-family: var(--cv-body-font); } .cv-navbar a { text-decoration: none; } /* ========================================================= STICKY NAVBAR ========================================================= */ .cv-navbar { position: sticky; top: 0; z-index: 5000; width: 100%; background: rgba(243, 246, 245, 0.96); border-bottom: 1px solid var(--cv-border); } @media (max-width: 767px) { html[dir="ltr"] body:has(#aboutHero) #cvNavbar { position: -webkit-sticky; position: sticky; inset-block-start: 0; z-index: 5000; } } /* The blur lives on a pseudo-element, not on the header itself. A backdrop-filter on the header would make it the containing block for the position: fixed mobile menu, which then opens offset from the screen edges instead of covering the viewport. */ .cv-navbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ========================================================= NAVBAR INNER ========================================================= */ .cv-navbar__inner { width: 100%; min-height: var(--cv-navbar-height); padding: 0 var(--cv-navbar-padding); display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 28px; } /* ========================================================= BRAND ========================================================= */ .cv-brand { min-width: 0; display: inline-flex; align-items: center; justify-self: start; gap: 11px; color: var(--cv-text); white-space: nowrap; } .cv-brand__logo { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; } .cv-brand__logo img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Light and dark logo variants */ .cv-logo-img--dark { display: none !important; } .cv-brand__name { font-family: var(--cv-heading-font); font-size: 21px; line-height: 1; font-weight: 700; letter-spacing: 0.10em; color: var(--cv-text); } /* ========================================================= DESKTOP NAVIGATION ========================================================= */ .cv-desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2vw, 30px); min-width: max-content; } .cv-nav-link { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 2px; border: 0; background: transparent; color: var(--cv-text-muted); font-size: 14px; line-height: 1.2; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; transition: color var(--cv-transition), background-color var(--cv-transition); } .cv-nav-link:hover, .cv-nav-link:focus-visible { color: var(--cv-accent); } .cv-nav-link:focus-visible, .cv-icon-button:focus-visible, .cv-rtl-button:focus-visible, .cv-login-button:focus-visible, .cv-menu-toggle:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 4px; } /* ========================================================= NAV DROPDOWNS ========================================================= */ .cv-nav-dropdown { position: relative; } .cv-dropdown-trigger { gap: 7px; } .cv-chevron { display: inline-flex; font-size: 10px; line-height: 1; transition: transform var(--cv-transition); } .cv-nav-dropdown.is-open .cv-chevron { transform: rotate(180deg); } /* ========================================================= DESKTOP DROPDOWN PANEL ========================================================= */ .cv-dropdown-menu { position: absolute; top: calc(100% + 13px); left: 50%; min-width: 205px; padding: 8px; transform: translate(-50%, -7px); opacity: 0; visibility: hidden; pointer-events: none; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-md); box-shadow: 0 16px 40px rgba(10, 13, 13, 0.10); transition: opacity var(--cv-transition), transform var(--cv-transition), visibility var(--cv-transition); } .cv-nav-dropdown.is-open .cv-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .cv-dropdown-menu a { display: flex; align-items: center; min-height: 42px; padding: 10px 13px; border-radius: 7px; color: var(--cv-text); font-size: 13px; font-weight: 400; line-height: 1.4; white-space: nowrap; transition: color var(--cv-transition), background-color var(--cv-transition); } .cv-dropdown-menu a:hover, .cv-dropdown-menu a:focus-visible { color: var(--cv-accent); background: var(--cv-accent-soft); } /* ========================================================= RIGHT ACTION AREA ========================================================= */ .cv-navbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; justify-self: end; min-width: max-content; } /* ========================================================= THEME ICON BUTTON ========================================================= */ .cv-icon-button { width: 39px; height: 39px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--cv-border); border-radius: 50%; background: var(--cv-surface); color: var(--cv-text); cursor: pointer; transition: color var(--cv-transition), background-color var(--cv-transition), border-color var(--cv-transition), transform var(--cv-transition); } .cv-icon-button:hover { color: var(--cv-accent); border-color: var(--cv-accent); transform: translateY(-1px); } .cv-theme-icon { font-size: 16px; line-height: 1; } .cv-theme-icon--sun { display: none; } .cv-theme-icon--moon { display: block; } /* ========================================================= RTL BUTTON ========================================================= */ .cv-rtl-button { width: 39px; min-width: 39px; height: 39px; padding: 0; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-sm); background: var(--cv-surface); color: var(--cv-text); line-height: 1; cursor: pointer; transition: color var(--cv-transition), background-color var(--cv-transition), border-color var(--cv-transition); } .cv-rtl-button:hover { color: var(--cv-accent); border-color: var(--cv-accent); background: var(--cv-accent-soft); transform: none; } .cv-rtl-icon { font-size: 17px; line-height: 1; } .cv-rtl-text-icon { display: inline-block; font-family: var(--cv-body-font); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; unicode-bidi: isolate; } /* ========================================================= LOGIN BUTTON ========================================================= */ .cv-login-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: var(--cv-radius-sm); background: var(--cv-accent); color: var(--cv-on-accent); font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; transition: background-color var(--cv-transition), transform var(--cv-transition); } .cv-login-button:hover { background: var(--cv-accent-hover); transform: translateY(-1px); } /* ========================================================= MOBILE MENU BUTTON ========================================================= */ .cv-menu-toggle { display: none; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-sm); background: var(--cv-surface); color: var(--cv-text); cursor: pointer; transition: color var(--cv-transition), border-color var(--cv-transition); } .cv-menu-toggle:hover { color: var(--cv-accent); border-color: var(--cv-accent); } .cv-menu-icon { font-size: 17px; line-height: 1; } /* ========================================================= MOBILE FULL SCREEN MENU ========================================================= */ .cv-mobile-menu { position: fixed; inset: 0; z-index: 6000; width: 100%; height: 100dvh; min-height: 100vh; display: flex; flex-direction: column; padding: 0 clamp(18px, 5vw, 30px); background: var(--cv-bg); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); overflow-y: auto; overscroll-behavior: contain; transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; } .cv-mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* ========================================================= MOBILE MENU HEADER ========================================================= */ .cv-mobile-menu__header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-bottom: 1px solid var(--cv-border); } .cv-mobile-menu__brand { display: inline-flex; align-items: center; gap: 10px; } .cv-mobile-menu__logo { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; } .cv-mobile-menu__logo img { width: 100%; height: 100%; object-fit: contain; } .cv-mobile-menu__brand-name { font-family: var(--cv-heading-font); color: var(--cv-text); font-size: 19px; line-height: 1; font-weight: 700; letter-spacing: 0.10em; } /* ========================================================= MOBILE CLOSE BUTTON ========================================================= */ .cv-mobile-close { position: relative; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-sm); background: var(--cv-surface); color: var(--cv-text); cursor: pointer; } .cv-close-icon { font-size: 18px; line-height: 1; } .cv-mobile-close:hover { border-color: var(--cv-accent); } /* ========================================================= MOBILE NAVIGATION ========================================================= */ .cv-mobile-nav { display: flex; flex-direction: column; width: 100%; padding: 20px 0 24px; } .cv-mobile-link { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--cv-border); background: transparent; color: var(--cv-text); font-size: 16px; line-height: 1.4; font-weight: 600; text-align: left; cursor: pointer; transition: color var(--cv-transition), padding var(--cv-transition); } a.cv-mobile-link:hover, button.cv-mobile-link:hover { color: var(--cv-accent); } .cv-mobile-chevron { font-size: 12px; transition: transform var(--cv-transition); } .cv-mobile-dropdown.is-open .cv-mobile-chevron { transform: rotate(180deg); } /* ========================================================= MOBILE SUBMENU ========================================================= */ .cv-mobile-dropdown-menu { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 220ms ease, visibility 220ms ease; } .cv-mobile-dropdown.is-open .cv-mobile-dropdown-menu { max-height: 320px; visibility: visible; } .cv-mobile-dropdown-menu a { display: flex; align-items: center; min-height: 46px; padding: 8px 16px; color: var(--cv-text-muted); font-size: 14px; line-height: 1.4; font-weight: 400; border-bottom: 1px solid var(--cv-border); transition: color var(--cv-transition), background-color var(--cv-transition); } .cv-mobile-dropdown-menu a:hover { color: var(--cv-accent); background: var(--cv-accent-soft); } /* ========================================================= MOBILE MENU FOOTER ========================================================= */ .cv-mobile-menu__footer { margin-top: auto; width: 100%; padding: 20px 0 max(20px, env(safe-area-inset-bottom)); } .cv-mobile-login { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: var(--cv-radius-sm); background: var(--cv-accent); color: var(--cv-on-accent); font-size: 15px; line-height: 1; font-weight: 600; transition: background-color var(--cv-transition); } .cv-mobile-login:hover { background: var(--cv-accent-hover); } /* ========================================================= BODY LOCK WHEN MOBILE MENU IS OPEN ========================================================= */ body.cv-menu-open { overflow: hidden; touch-action: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .cv-navbar__inner { gap: 18px; } .cv-desktop-nav { gap: 16px; } .cv-brand__name { font-size: 19px; } .cv-navbar-actions { gap: 7px; } } /* ========================================================= LAPTOP / SMALL LAPTOP ========================================================= */ @media (max-width: 980px) { .cv-navbar__inner { grid-template-columns: minmax(max-content, 1fr) auto; } .cv-desktop-nav { display: none; } .cv-menu-toggle { display: inline-grid; } .cv-login-button { display: none; } } /* ========================================================= MOBILE-L ========================================================= */ @media (max-width: 768px) { :root { --cv-navbar-height: 72px; } .cv-navbar__inner { min-height: 72px; padding: 0 16px; } .cv-brand { gap: 9px; } .cv-brand__logo { width: 38px; height: 38px; flex-basis: 38px; } .cv-brand__name { font-size: 18px; letter-spacing: 0.09em; } .cv-navbar-actions { gap: 6px; } .cv-icon-button, .cv-menu-toggle { width: 38px; height: 38px; } .cv-rtl-button { width: 38px; min-width: 38px; height: 38px; } .cv-login-button { display: none; } } /* ========================================================= MOBILE-M ========================================================= */ @media (max-width: 480px) { .cv-navbar__inner { padding: 0 13px; } .cv-brand__logo { width: 36px; height: 36px; flex-basis: 36px; } .cv-brand__name { font-size: 17px; letter-spacing: 0.08em; } .cv-navbar-actions { gap: 5px; } .cv-icon-button, .cv-menu-toggle, .cv-rtl-button { width: 37px; min-width: 37px; height: 37px; } } /* ========================================================= MOBILE-S ========================================================= */ @media (max-width: 360px) { .cv-navbar__inner { padding: 0 10px; } .cv-brand { gap: 7px; } .cv-brand__logo { width: 34px; height: 34px; flex-basis: 34px; } .cv-brand__name { font-size: 15px; letter-spacing: 0.06em; } .cv-navbar-actions { gap: 4px; } .cv-icon-button, .cv-menu-toggle { width: 35px; height: 35px; } .cv-rtl-button { width: 35px; min-width: 35px; height: 35px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cv-navbar *, .cv-mobile-menu { transition: none !important; } } /* ========================================================= CONVOKE CONTACT HERO 75VH IMAGE MARQUEE Base / Light Mode / Responsive ========================================================= */ /* ========================================================= HERO RESET ========================================================= */ .cv-contact-hero, .cv-contact-hero *, .cv-contact-marquee, .cv-contact-marquee * { box-sizing: border-box; } /* ========================================================= MAIN HERO ========================================================= */ .cv-contact-hero { position: relative; width: 100%; height: 75vh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--cv-bg); color: var(--cv-text); } /* ========================================================= HERO CONTENT ========================================================= */ .cv-contact-hero__content { position: relative; z-index: 10; width: min(760px, calc(100% - 48px)); margin: 0 auto; padding-top: clamp(54px, 7vh, 90px); text-align: center; } /* ========================================================= EYEBROW ========================================================= */ .cv-contact-hero__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; color: var(--cv-accent); font-family: var(--cv-body-font); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-contact-hero__eyebrow-line { display: block; width: 28px; height: 1px; background: var(--cv-accent); } /* ========================================================= HERO TITLE ========================================================= */ .cv-contact-hero__title { max-width: 720px; margin: 0 auto; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp( 34px, 4.4vw, 58px ); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; } .cv-contact-hero__title span { display: block; color: var(--cv-accent); } /* ========================================================= DESCRIPTION ========================================================= */ .cv-contact-hero__description { width: min(600px, 100%); margin: 20px auto 0; color: var(--cv-text-muted); font-family: var(--cv-body-font); font-size: clamp( 14px, 1.15vw, 16px ); font-weight: 400; line-height: 1.7; } /* ========================================================= ACTIONS ========================================================= */ .cv-contact-hero__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .cv-contact-hero__button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 19px; gap: 10px; border: 1px solid transparent; border-radius: var(--cv-radius-sm); font-family: var(--cv-body-font); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .cv-contact-hero__button i { font-size: 11px; } .cv-contact-hero__button--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-contact-hero__button--primary:hover { background: var(--cv-accent-hover); transform: translateY(-2px); } .cv-contact-hero__button--secondary { background: rgba(255, 255, 255, 0.72); border-color: var(--cv-border); color: var(--cv-text); } .cv-contact-hero__button--secondary:hover { background: var(--cv-surface); border-color: var(--cv-accent-soft); color: var(--cv-accent); transform: translateY(-2px); } /* ========================================================= META ========================================================= */ .cv-contact-hero__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 19px; color: var(--cv-text-muted); font-family: var(--cv-body-font); font-size: 11px; font-weight: 500; line-height: 1.5; } .cv-contact-hero__meta-dot { width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: var(--cv-accent); } /* ========================================================= IMAGE MARQUEE AREA ========================================================= */ .cv-contact-marquee { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: 100%; height: 38%; overflow: hidden; pointer-events: none; } /* ========================================================= EDGE FADE ========================================================= */ .cv-contact-marquee::before, .cv-contact-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 20; width: clamp(35px, 8vw, 130px); pointer-events: none; } .cv-contact-marquee::before { left: 0; background: linear-gradient( 90deg, var(--cv-bg) 0%, rgba(243, 246, 245, 0) 100% ); } .cv-contact-marquee::after { right: 0; background: linear-gradient( 270deg, var(--cv-bg) 0%, rgba(243, 246, 245, 0) 100% ); } /* ========================================================= MARQUEE ROWS ========================================================= */ .cv-contact-marquee__row { position: relative; width: 100%; overflow: hidden; } .cv-contact-marquee__row--top { height: 48%; } .cv-contact-marquee__row--bottom { height: 52%; margin-top: 8px; } /* ========================================================= MARQUEE TRACK ========================================================= */ .cv-contact-marquee__track { display: flex; align-items: stretch; width: max-content; height: 100%; gap: 10px; will-change: transform; animation: cvContactMarqueeLeft 34s linear infinite; } .cv-contact-marquee__row--bottom .cv-contact-marquee__track { animation: cvContactMarqueeRight 39s linear infinite; } /* ========================================================= IMAGE CARD ========================================================= */ .cv-contact-marquee__image { position: relative; width: clamp( 180px, 22vw, 340px ); height: 100%; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(31, 95, 91, 0.18); border-radius: 10px; background: var(--cv-surface); box-shadow: 0 8px 28px rgba(10, 13, 13, 0.06); } .cv-contact-marquee__image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78) contrast(0.98); transform: scale(1.015); transition: filter 300ms ease, transform 500ms ease; } /* ========================================================= IMAGE OVERLAY ========================================================= */ .cv-contact-marquee__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 13, 13, 0.02), rgba(10, 13, 13, 0.18) ); pointer-events: none; } /* ========================================================= FLOATING LABEL ========================================================= */ .cv-contact-hero__floating-label { position: absolute; z-index: 30; right: clamp(18px, 4vw, 60px); bottom: clamp(20px, 4vh, 42px); display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--cv-border); border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--cv-text); font-family: var(--cv-body-font); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .cv-contact-hero__floating-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--cv-accent); } .cv-contact-hero__floating-label i { color: var(--cv-accent); font-size: 9px; } /* ========================================================= MARQUEE ANIMATIONS ========================================================= */ @keyframes cvContactMarqueeLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes cvContactMarqueeRight { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* ========================================================= HOVER ========================================================= */ @media (hover: hover) { .cv-contact-marquee:hover .cv-contact-marquee__track { animation-play-state: paused; } } /* ========================================================= TABLET 768px - 1023px ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .cv-contact-hero { min-height: 600px; } .cv-contact-hero__content { width: min( 700px, calc(100% - 48px) ); padding-top: 50px; } .cv-contact-hero__title { font-size: clamp(38px, 5.2vw, 48px); } .cv-contact-hero__description { max-width: 560px; font-size: 14px; } .cv-contact-marquee { height: 37%; } .cv-contact-marquee__image { width: 270px; } } /* ========================================================= LAPTOP 1024px - 1279px ========================================================= */ @media (min-width: 1024px) and (max-width: 1279px) { .cv-contact-hero { min-height: 610px; } .cv-contact-hero__content { padding-top: 58px; } .cv-contact-hero__title { font-size: clamp(42px, 4.6vw, 54px); } .cv-contact-marquee { height: 38%; } .cv-contact-marquee__image { width: 285px; } } /* ========================================================= LAPTOP-L 1280px - 1439px ========================================================= */ @media (min-width: 1280px) and (max-width: 1439px) { .cv-contact-hero__content { padding-top: 62px; } .cv-contact-hero__title { font-size: 54px; } .cv-contact-marquee__image { width: 310px; } } /* ========================================================= DESKTOP 1440px+ ========================================================= */ @media (min-width: 1440px) { .cv-contact-hero__content { padding-top: 70px; } .cv-contact-hero__title { font-size: 58px; } .cv-contact-marquee__image { width: 340px; } } /* ========================================================= MOBILE-L 425px - 767px ========================================================= */ @media (max-width: 767px) { .cv-contact-hero { height: 75vh; min-height: 570px; } .cv-contact-hero__content { width: calc(100% - 32px); padding-top: 38px; } .cv-contact-hero__eyebrow { margin-bottom: 13px; font-size: 10px; } .cv-contact-hero__eyebrow-line { width: 20px; } .cv-contact-hero__title { font-size: clamp( 31px, 8.8vw, 40px ); line-height: 1.08; letter-spacing: -0.028em; } .cv-contact-hero__description { margin-top: 15px; font-size: 13px; line-height: 1.62; } .cv-contact-hero__actions { gap: 8px; margin-top: 19px; } .cv-contact-hero__button { min-height: 42px; padding: 0 14px; font-size: 11px; } .cv-contact-hero__button i { font-size: 9px; } .cv-contact-hero__meta { display: none; } .cv-contact-marquee { height: 32%; } .cv-contact-marquee__row--bottom { margin-top: 6px; } .cv-contact-marquee__image { width: 190px; border-radius: 8px; } .cv-contact-marquee__track { gap: 7px; animation-duration: 28s; } .cv-contact-marquee__row--bottom .cv-contact-marquee__track { animation-duration: 31s; } .cv-contact-hero__floating-label { right: 16px; bottom: 16px; padding: 7px 9px; font-size: 8px; } } /* ========================================================= MOBILE-M 375px - 424px ========================================================= */ @media (max-width: 424px) { .cv-contact-hero { min-height: 550px; } .cv-contact-hero__content { width: calc(100% - 28px); padding-top: 34px; } .cv-contact-hero__title { font-size: 31px; } .cv-contact-hero__description { font-size: 12.5px; } .cv-contact-hero__actions { flex-direction: column; width: 100%; } .cv-contact-hero__button { width: min( 100%, 230px ); } .cv-contact-marquee { height: 31%; } .cv-contact-marquee__image { width: 170px; } .cv-contact-hero__floating-label { display: none; } } /* ========================================================= MOBILE-S 320px - 374px ========================================================= */ @media (max-width: 374px) { .cv-contact-hero { min-height: 530px; } .cv-contact-hero__content { width: calc(100% - 24px); padding-top: 30px; } .cv-contact-hero__eyebrow { font-size: 9px; letter-spacing: 0.11em; } .cv-contact-hero__title { font-size: 28px; } .cv-contact-hero__description { font-size: 12px; line-height: 1.55; } .cv-contact-hero__actions { margin-top: 15px; } .cv-contact-hero__button { min-height: 40px; font-size: 10.5px; } .cv-contact-marquee { height: 29%; } .cv-contact-marquee__image { width: 150px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cv-contact-marquee__track { animation: none !important; transform: translate3d(0, 0, 0); } .cv-contact-hero__button { transition: none; } } /* ========================================================= CONTACT MARQUEE JS STATES ========================================================= */ .cv-contact-marquee--paused .cv-contact-marquee__track { animation-play-state: paused; } .cv-contact-marquee--reduced-motion .cv-contact-marquee__track { animation: none !important; } /* ========================================================= HERO Home page hero (#cvHero in pages/index.html) Composition (tablet and up): - Large rounded image panel with a semicircular NOTCH cut into the bottom-centre edge (clip-path: path(), built by script.js so radius + notch stay exact at every size). - Circular CTA is a SIBLING of the panel, centred in the notch. - Two thumbnails stacked top-right, 01 / 02 pills on the left edge, pause + dots bottom-left. - Solid content card overlays the image (no text on photos). Mobile (up to 767px): image panel first, content below it on the page background. Type sizes follow the CONVOKE Brand Design System (Mobile-S → Desktop). Colours come from --cv-* tokens only. ========================================================= */ /* --------------------------------------------------------- HERO TOKENS Mobile-S is the base; larger screens override below. --------------------------------------------------------- */ :root { /* Brand type scale */ --cv-hero-h1: 32px; --cv-hero-body: 15px; --cv-hero-small: 13px; --cv-hero-btn: 14px; /* Layout (px values are read by script.js, keep them literal) */ --cv-hero-gutter: clamp(12px, 3vw, 40px); --cv-hero-radius: 20px; --cv-hero-cta: 72px; --cv-hero-gap: 8px; --cv-hero-h: clamp(340px, 92vw, 480px); /* Motion */ --cv-hero-ease: cubic-bezier(.77, 0, .18, 1); --cv-hero-wipe: 700ms; } /* Mobile-M */ @media (min-width: 375px) { :root { --cv-hero-h1: 34px; } } /* Mobile-L */ @media (min-width: 425px) { :root { --cv-hero-h1: 36px; --cv-hero-body: 16px; --cv-hero-small: 14px; } } /* Tablet */ @media (min-width: 768px) { :root { --cv-hero-h1: 40px; --cv-hero-btn: 15px; --cv-hero-radius: 28px; --cv-hero-cta: 88px; --cv-hero-h: clamp(480px, 62vh, 620px); } } /* Laptop */ @media (min-width: 1024px) { :root { --cv-hero-h1: 44px; --cv-hero-cta: 112px; --cv-hero-h: clamp( 520px, calc(100vh - var(--cv-navbar-height) - 12px - 14px - 56px), 760px ); } } @supports (height: 100svh) { @media (min-width: 1024px) { :root { --cv-hero-h: clamp( 520px, calc(100svh - var(--cv-navbar-height) - 12px - 14px - 56px), 760px ); } } @media (min-width: 768px) and (max-width: 1023px) { :root { --cv-hero-h: clamp(480px, 62svh, 620px); } } } /* Laptop-L */ @media (min-width: 1440px) { :root { --cv-hero-h1: 48px; } } /* Desktop */ @media (min-width: 1920px) { :root { --cv-hero-h1: 52px; --cv-hero-body: 17px; } } /* --------------------------------------------------------- HERO BASE --------------------------------------------------------- */ /* Page base: removes the browser's default 8px body margin and paints the page with the theme background, so the hero edges line up with the navbar and no white strip shows in dark mode. */ body { margin: 0; background: var(--cv-bg); color: var(--cv-text); } .cv-hero, .cv-hero *, .cv-hero *::before, .cv-hero *::after { box-sizing: border-box; } .cv-hero { --cv-hero-notch-r: calc(var(--cv-hero-cta) / 2 + var(--cv-hero-gap)); position: relative; width: 100%; background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); overflow-x: clip; } .cv-hero button, .cv-hero a { font-family: var(--cv-body-font); -webkit-tap-highlight-color: transparent; } .cv-hero a { text-decoration: none; } .cv-hero button { cursor: pointer; } .cv-hero__frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1760px; margin-inline: auto; padding-block: 12px 32px; padding-inline: var(--cv-hero-gutter); } /* --------------------------------------------------------- VISUAL AREA (panel + controls + CTA) --------------------------------------------------------- */ .cv-hero__visual { position: relative; grid-area: 1 / 1; min-width: 0; height: var(--cv-hero-h); } /* Clipped panel. Radius is the fallback; script.js replaces it with an exact clip-path: path() (rounded corners + notch). */ .cv-hero__panel { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: var(--cv-hero-radius); background: var(--cv-accent-soft); } .cv-hero__panel.is-clipped { border-radius: 0; } .cv-hero__media-wrap { position: absolute; inset: 0; clip-path: inset(0); transition: clip-path 900ms var(--cv-hero-ease); } /* Slide images: collapsed at the thumbnail side (right in LTR). Every state uses a 4-point polygon so clip-path interpolates. */ .cv-hero__item { position: absolute; inset: 0; z-index: 0; overflow: hidden; visibility: hidden; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } .cv-hero__item.is-leaving { z-index: 1; visibility: visible; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .cv-hero__item.is-active { z-index: 2; visibility: visible; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path var(--cv-hero-wipe) var(--cv-hero-ease); } .cv-hero__item picture { display: block; width: 100%; height: 100%; } .cv-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cv-hero-pos, 50% 50%); transform: scale(1.06); transition: transform 1100ms cubic-bezier(.22, 1, .36, 1); } .cv-hero__item.is-active .cv-hero__img, .cv-hero__item.is-leaving .cv-hero__img { transform: none; } /* Per-image framing so the stage (c11) and the room (c7) stay in view as the panel changes shape. */ @media (max-width: 767px) { .cv-hero__item:nth-child(1) { --cv-hero-pos: 50% 74% !important; } .cv-hero__item:nth-child(2) { --cv-hero-pos: 54% 60% !important; } } /* --------------------------------------------------------- INDICATORS 01 / 02 (outline pills, left edge) --------------------------------------------------------- */ .cv-hero__indicators { position: absolute; z-index: 3; inset-block-start: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; gap: 8px; } .cv-hero__pill { position: relative; display: grid; place-items: center; inline-size: 56px; block-size: 44px; padding: 0; background: var(--cv-surface); color: var(--cv-text); border: 1.5px solid var(--cv-text-muted); border-radius: 999px; font-size: var(--cv-hero-small); font-weight: 600; line-height: 1; letter-spacing: 0.04em; transition: background-color var(--cv-transition), border-color var(--cv-transition); } .cv-hero__pill-num { transform: translateY(-2px); } .cv-hero__pill:hover { background: var(--cv-accent-soft); } .cv-hero__pill.is-active { border-color: var(--cv-accent); border-width: 2px; } .cv-hero__track { position: absolute; inset-inline: 12px; inset-block-end: 6px; block-size: 3px; overflow: hidden; border-radius: 3px; background: var(--cv-accent-soft); opacity: 0; } .cv-hero__pill.is-active .cv-hero__track { opacity: 1; } .cv-hero__fill { display: block; inline-size: 100%; block-size: 100%; background: var(--cv-accent); transform: scaleX(0); transform-origin: left center; } /* --------------------------------------------------------- PAGER (pause / play + dots, bottom-left) --------------------------------------------------------- */ .cv-hero__pager { position: absolute; z-index: 3; inset-inline-start: 12px; inset-block-end: calc(var(--cv-hero-notch-r) + 14px); display: flex; align-items: center; padding: 4px; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 999px; } .cv-hero__pause, .cv-hero__dot { display: grid; place-items: center; block-size: 44px; padding: 0; background: transparent; border: 0; border-radius: 999px; color: var(--cv-text); } .cv-hero__pause { inline-size: 44px; transition: background-color var(--cv-transition); } .cv-hero__pause:hover { background: var(--cv-accent-soft); } .cv-hero__pause[hidden] { display: none; } .cv-hero__icon { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .cv-hero__icon--play { display: none; fill: currentColor; stroke-width: 1.5; } .cv-hero.is-paused-by-user .cv-hero__icon--pause { display: none; } .cv-hero.is-paused-by-user .cv-hero__icon--play { display: block; } .cv-hero__dot { inline-size: 44px; } .cv-hero__dot::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 999px; background: var(--cv-text-muted); transition: inline-size 260ms ease, background-color 260ms ease; } .cv-hero__dot.is-active::before { inline-size: 22px; background: var(--cv-accent); } /* --------------------------------------------------------- THUMBNAILS (stacked vertically, top-right) --------------------------------------------------------- */ .cv-hero__thumbs { position: absolute; z-index: 3; inset-block-start: 12px; inset-inline-end: 12px; display: flex; flex-direction: column; gap: 12px; } .cv-hero__thumb { position: relative; display: block; inline-size: 104px; aspect-ratio: 3 / 2; padding: 0; overflow: hidden; background: var(--cv-accent-soft); border: 2px solid var(--cv-surface); border-radius: 14px; } .cv-hero__thumb picture { display: block; width: 100%; height: 100%; } .cv-hero__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cv-thumb-pos, 50% 50%); transform: scale(1.3); transition: transform 500ms cubic-bezier(.22, 1, .36, 1); } .cv-hero__thumb:hover img { transform: scale(1.4); } /* Active thumbnail: accent ring with a flat surface halo */ .cv-hero__thumb.is-active { outline: 3px solid var(--cv-accent); outline-offset: 0; box-shadow: 0 0 0 5px var(--cv-surface); } .cv-hero__chip { position: absolute; inset-inline-start: 5px; inset-block-end: 5px; max-inline-size: calc(100% - 10px); padding: 4px 8px; overflow: hidden; background: var(--cv-surface); color: var(--cv-text); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; } /* --------------------------------------------------------- FOCUS RINGS (visible on photo and on solid surfaces) --------------------------------------------------------- */ .cv-hero__pill:focus-visible, .cv-hero__pause:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -5px; } .cv-hero__thumb:focus-visible { outline: 3px solid var(--cv-text); outline-offset: 0; box-shadow: 0 0 0 5px var(--cv-surface); } .cv-hero__btn:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 3px; } .cv-hero__cta:focus-visible { outline: 3px solid var(--cv-text); outline-offset: 3px; } /* --------------------------------------------------------- CIRCULAR CTA (sits in the notch) --------------------------------------------------------- */ .cv-hero__cta { position: absolute; z-index: 4; /* centred with auto margins so it stays centred in RTL too */ inset-inline: 0; margin-inline: auto; inset-block-start: calc(100% - var(--cv-hero-cta) / 2); display: grid; place-items: center; inline-size: var(--cv-hero-cta); block-size: var(--cv-hero-cta); border-radius: 50%; background: var(--cv-accent); color: var(--cv-on-accent); transition: background-color var(--cv-transition); } .cv-hero__cta:hover { background: var(--cv-accent-hover); } /* Without clip-path support there is no notch: draw a flat ring in the page colour so the CTA still reads as seated in the edge. */ .cv-hero:not(.has-notch) .cv-hero__cta { box-shadow: 0 0 0 var(--cv-hero-gap) var(--cv-bg); } .cv-hero__cta-ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; animation: cv-hero-spin 22s linear infinite; } .cv-hero__cta-ring text { fill: currentColor; font-family: var(--cv-body-font); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; } .cv-hero__cta-core { position: relative; display: grid; place-items: center; inline-size: 42%; block-size: 42%; border-radius: 50%; background: var(--cv-on-accent); color: var(--cv-accent); } .cv-hero__cta-arrow { inline-size: 52%; block-size: 52%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 260ms cubic-bezier(.22, 1, .36, 1); } .cv-hero__cta:hover .cv-hero__cta-arrow, .cv-hero__cta:focus-visible .cv-hero__cta-arrow { transform: translate(3px, -3px); } /* --------------------------------------------------------- CONTENT (mobile: below the image, no overlay) --------------------------------------------------------- */ .cv-hero__content { grid-area: 2 / 1; display: grid; margin-block-start: calc(var(--cv-hero-cta) / 2 + 20px); min-width: 0; } .cv-hero__slide { grid-area: 1 / 1; align-self: start; min-width: 0; max-inline-size: 640px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 250ms ease, visibility 0s linear 250ms; } .cv-hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 400ms ease 300ms, visibility 0s; } .cv-hero__eyebrow { margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-hero__title { margin: 12px 0 14px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } /* Words are wrapped by script.js (split by WORD, never by letter) */ .cv-hero__word { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.1em; margin-block: -0.1em; } .cv-hero__word-inner { display: inline-block; } .cv-hero__text { max-inline-size: 46ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); font-weight: 400; line-height: 1.65; } .cv-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 22px; } .cv-hero__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 150px; min-block-size: 48px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; transition: background-color var(--cv-transition), color var(--cv-transition), border-color var(--cv-transition), transform var(--cv-transition); } .cv-hero__btn:hover { transform: translateY(-1px); } .cv-hero__btn--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-hero__btn--primary:hover { background: var(--cv-accent-hover); } .cv-hero__btn--primary:active { background: var(--cv-accent-pressed); } .cv-hero__btn--secondary { background: transparent; color: var(--cv-text); border-color: var(--cv-text); } .cv-hero__btn--secondary:hover { background: var(--cv-accent-soft); } /* --------------------------------------------------------- ENTRANCE ANIMATION data-state: loading → opening (panel reveal) → ready --------------------------------------------------------- */ .cv-hero[data-state="loading"] .cv-hero__media-wrap { clip-path: inset(0 50% 0 50%); } .cv-hero[data-state="loading"] .cv-hero__item.is-active .cv-hero__img { transform: scale(1.06); } .cv-hero[data-state="loading"] .cv-hero__anim, .cv-hero[data-state="opening"] .cv-hero__anim { opacity: 0; } .cv-hero[data-state="loading"] .cv-hero__slide.is-active, .cv-hero[data-state="opening"] .cv-hero__slide.is-active { opacity: 0; } .cv-hero[data-state="loading"] .cv-hero__word-inner, .cv-hero[data-state="opening"] .cv-hero__word-inner { transform: translateY(115%); } .cv-hero[data-state="ready"] .cv-hero__anim--static { animation: cv-hero-rise 700ms cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--d, 0) * 1ms); } .cv-hero[data-state="ready"] .cv-hero__slide.is-active .cv-hero__anim { animation: cv-hero-rise 700ms cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--d, 0) * 1ms + 250ms); } .cv-hero[data-state="ready"] .cv-hero__slide.is-active .cv-hero__word-inner { animation: cv-hero-word 850ms cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 280ms); } @keyframes cv-hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes cv-hero-word { from { transform: translateY(115%); } to { transform: none; } } @keyframes cv-hero-spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------- TABLET 768px and up Content card overlays the panel (about 52% wide). --------------------------------------------------------- */ @media (min-width: 768px) { .cv-hero { --cv-hero-card-x: 88px; } .cv-hero__frame { padding-block: 12px calc(var(--cv-hero-cta) / 2 + 16px); } .cv-hero__indicators { inset-block-start: 16px; inset-inline-start: 16px; } .cv-hero__pager { inset-inline-start: 16px; inset-block-end: 16px; } .cv-hero__thumbs { inset-block-start: 16px; inset-inline-end: 16px; gap: 14px; } .cv-hero__thumb { inline-size: 140px; border-radius: 16px; } .cv-hero__chip { inset-inline-start: 7px; inset-block-end: 7px; font-size: 13px; } .cv-hero__content { position: relative; z-index: 5; grid-area: 1 / 1; display: block; margin: 0; pointer-events: none; } .cv-hero__slide { position: absolute; inline-size: 52%; max-inline-size: none; padding: 28px; background: var(--cv-surface); background: color-mix(in srgb, var(--cv-surface) 94%, transparent); border: 1px solid var(--cv-border); border-radius: 22px; } .cv-hero__slide--bottom { inset-inline-start: var(--cv-hero-card-x); inset-block-end: calc(var(--cv-hero-notch-r) + 28px); } .cv-hero__slide--top { inset-inline-start: var(--cv-hero-card-x); inset-block-start: 16px; } .cv-hero__btn { flex: 0 1 auto; } } /* --------------------------------------------------------- LAPTOP 1024px and up --------------------------------------------------------- */ @media (min-width: 1024px) { .cv-hero { --cv-hero-card-x: 100px; } .cv-hero__indicators { inset-block-start: 24px; inset-inline-start: 24px; } .cv-hero__pager { inset-inline-start: 24px; inset-block-end: 24px; } .cv-hero__thumbs { inset-block-start: 24px; inset-inline-end: 24px; gap: 16px; } .cv-hero__thumb { inline-size: 164px; } .cv-hero__slide { inline-size: min(580px, 48%); padding: 34px; } .cv-hero__slide--top { inset-block-start: 24px; } } /* --------------------------------------------------------- HERO REDUCED MOTION No autoplay (script.js), no clip animation, instant switching --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cv-hero *, .cv-hero *::before, .cv-hero *::after { animation: none !important; transition: none !important; } .cv-hero .cv-hero__media-wrap { clip-path: none !important; } .cv-hero .cv-hero__anim, .cv-hero .cv-hero__slide.is-active { opacity: 1 !important; } .cv-hero .cv-hero__word-inner, .cv-hero .cv-hero__img { transform: none !important; } } /* ========================================================= CONVOKE CONTACT INFORMATION SECTION BASE / LIGHT MODE / RESPONSIVE ========================================================= */ .cv-contact-info { position: relative; width: 100%; overflow: hidden; background: var(--cv-bg); color: var(--cv-text); padding: clamp(72px, 8vw, 128px) 0; } /* ========================================================= CONTAINER ========================================================= */ .cv-contact-info__container { width: min(1400px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr); gap: clamp(48px, 6vw, 100px); align-items: stretch; } /* ========================================================= LEFT INTRO ========================================================= */ .cv-contact-info__intro { min-width: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(.2,.7,.2,1); } .cv-contact-info.is-visible .cv-contact-info__intro { opacity: 1; transform: translateY(0); } .cv-contact-info__eyebrow { display: flex; align-items: center; gap: 12px; width: fit-content; margin-bottom: 25px; color: var(--cv-accent); font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; } .cv-contact-info__eyebrow-line { display: block; width: 30px; height: 2px; background: var(--cv-accent); } .cv-contact-info__intro h2 { max-width: 650px; margin: 0; color: var(--cv-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(44px, 5vw, 76px); font-weight: 500; letter-spacing: -.055em; line-height: .98; } .cv-contact-info__intro h2 span { display: block; color: var(--cv-accent); } .cv-contact-info__lead { max-width: 530px; margin: 30px 0 0; color: var(--cv-text-muted); font-family: "Manrope", sans-serif; font-size: clamp(14px, 1.15vw, 17px); font-weight: 400; line-height: 1.8; } /* ========================================================= HORIZONTAL RULE ========================================================= */ .cv-contact-info__rule { display: flex; align-items: center; width: 100%; max-width: 500px; margin: 38px 0 34px; } .cv-contact-info__rule::before { content: ""; width: 58px; height: 2px; flex: 0 0 58px; background: var(--cv-accent); } .cv-contact-info__rule span { width: 100%; height: 1px; background: var(--cv-border); } /* ========================================================= EVENT BRIEF ========================================================= */ .cv-contact-info__brief { position: relative; width: min(100%, 500px); margin-top: auto; padding: 26px 28px 28px; background: var(--cv-surface); border: 1px solid var(--cv-border); clip-path: polygon( 0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100% ); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .cv-contact-info__brief::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 3px; background: var(--cv-accent); transition: width .35s ease; } .cv-contact-info__brief:hover { transform: translateY(-5px); border-color: var(--cv-accent); box-shadow: 0 20px 50px rgba(10, 13, 13, .08); } .cv-contact-info__brief:hover::before { width: 145px; } .cv-contact-info__brief-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; color: var(--cv-text-muted); font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .cv-contact-info__brief-meta span:first-child { color: var(--cv-accent); } .cv-contact-info__brief h3 { margin: 0; color: var(--cv-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(20px, 1.7vw, 27px); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; } .cv-contact-info__brief p { max-width: 430px; margin: 12px 0 22px; color: var(--cv-text-muted); font-family: "Manrope", sans-serif; font-size: 13px; line-height: 1.7; } .cv-contact-info__brief-link { display: inline-flex; align-items: center; gap: 11px; min-height: 42px; color: var(--cv-text); font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; text-decoration: none; transition: color .25s ease; } .cv-contact-info__brief-link:hover { color: var(--cv-accent); } .cv-contact-info__brief-arrow { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid currentColor; transition: transform .3s ease; } .cv-contact-info__brief-link:hover .cv-contact-info__brief-arrow { transform: translate(3px, -3px); } /* ========================================================= RIGHT ARCHITECTURE ========================================================= */ .cv-contact-info__architecture { position: relative; min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 17px; } /* ========================================================= NUMBER LINE ========================================================= */ .cv-contact-info__index-line { display: flex; flex-direction: column; align-items: center; padding: 5px 0 18px; } .cv-contact-info__index-line span { width: 1px; min-height: 42px; flex: 1; background: var(--cv-border); } .cv-contact-info__index-line b { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: 0 0 25px; color: var(--cv-accent); border: 1px solid var(--cv-border); font-family: "Manrope", sans-serif; font-size: 9px; font-weight: 700; } /* ========================================================= CONTACT STACK ========================================================= */ .cv-contact-info__contact-stack { min-width: 0; display: flex; flex-direction: column; gap: 15px; } /* ========================================================= OFFICE ========================================================= */ .cv-contact-info__office { position: relative; min-height: 330px; padding: 30px 34px; background: var(--cv-accent); color: var(--cv-on-accent); clip-path: polygon( 0 0, calc(100% - 52px) 0, 100% 52px, 100% 100%, 0 100% ); overflow: hidden; opacity: 0; transform: translateX(45px); transition: opacity .7s .15s ease, transform .7s .15s cubic-bezier(.2,.7,.2,1), background .3s ease; } .cv-contact-info.is-visible .cv-contact-info__office { opacity: 1; transform: translateX(0); } .cv-contact-info__office-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.25); font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; } .cv-contact-info__office-top span:last-child { opacity: .7; } .cv-contact-info__office-content { min-height: 225px; display: flex; flex-direction: column; justify-content: center; } .cv-contact-info__office-content h3 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(30px, 3.2vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; } .cv-contact-info__office-content p { margin: 18px 0 0; color: var(--cv-on-accent); font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.75; opacity: .82; } .cv-contact-info__office-corner { position: absolute; right: 28px; bottom: 25px; display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.4); font-size: 17px; transition: transform .3s ease, background .3s ease; } .cv-contact-info__office:hover .cv-contact-info__office-corner { transform: translate(4px, -4px); background: rgba(255,255,255,.1); } /* ========================================================= CALL ========================================================= */ .cv-contact-info__call { position: relative; min-height: 190px; padding: 26px 31px; background: var(--cv-black); color: #fff; clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100% ); opacity: 0; transform: translateX(45px); transition: opacity .7s .3s ease, transform .7s .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease; } .cv-contact-info.is-visible .cv-contact-info__call { opacity: 1; transform: translateX(0); } .cv-contact-info__call-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.62); font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; } .cv-contact-info__call-meta span:first-child { color: var(--cv-accent); } .cv-contact-info__call-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; } .cv-contact-info__call-main > a:first-child { min-width: 0; color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(23px, 2.3vw, 36px); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; text-decoration: none; overflow-wrap: anywhere; transition: color .25s ease; } .cv-contact-info__call-main > a:first-child:hover { color: var(--cv-accent); } .cv-contact-info__call-arrow { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; color: #fff; border: 1px solid rgba(255,255,255,.35); text-decoration: none; transition: transform .3s ease, background .3s ease; } .cv-contact-info__call-arrow:hover { transform: translate(4px, -4px); background: var(--cv-accent); border-color: var(--cv-accent); } .cv-contact-info__call p { margin: 14px 0 0; color: rgba(255,255,255,.58); font-family: "Manrope", sans-serif; font-size: 11px; line-height: 1.6; } /* ========================================================= EMAIL ========================================================= */ .cv-contact-info__email { position: relative; min-height: 180px; padding: 26px 31px; background: var(--cv-surface); border: 1px solid var(--cv-border); clip-path: polygon( 0 27px, 27px 0, 100% 0, 100% calc(100% - 27px), calc(100% - 27px) 100%, 0 100% ); opacity: 0; transform: translateX(45px); transition: opacity .7s .45s ease, transform .7s .45s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease; } .cv-contact-info.is-visible .cv-contact-info__email { opacity: 1; transform: translateX(0); } .cv-contact-info__email:hover { border-color: var(--cv-accent); box-shadow: 0 18px 45px rgba(10,13,13,.07); } .cv-contact-info__email-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--cv-text-muted); font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; } .cv-contact-info__email-top span:first-child { color: var(--cv-accent); } .cv-contact-info__email-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; } .cv-contact-info__email-main > a:first-child { min-width: 0; color: var(--cv-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(24px, 3vw, 48px); font-weight: 500; letter-spacing: -.045em; line-height: 1.15; text-decoration: none; overflow-wrap: anywhere; transition: color .25s ease; } .cv-contact-info__email-main > a:first-child:hover { color: var(--cv-accent); } .cv-contact-info__email-arrow { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; color: var(--cv-text); border: 1px solid var(--cv-border); text-decoration: none; transition: transform .3s ease, color .3s ease, border-color .3s ease; } .cv-contact-info__email-arrow:hover { color: var(--cv-accent); border-color: var(--cv-accent); transform: translate(4px, -4px); } /* ========================================================= TABLET 768px — 1023px ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .cv-contact-info { padding: 80px 0; } .cv-contact-info__container { width: min(900px, calc(100% - 48px)); grid-template-columns: 1fr; gap: 55px; } .cv-contact-info__intro { max-width: 760px; } .cv-contact-info__intro h2 { font-size: clamp(48px, 7vw, 64px); } .cv-contact-info__brief { max-width: 650px; } .cv-contact-info__architecture { grid-template-columns: 24px minmax(0, 1fr); } .cv-contact-info__office { min-height: 310px; } } /* ========================================================= MOBILE-L 600px — 767px ========================================================= */ @media (min-width: 600px) and (max-width: 767px) { .cv-contact-info { padding: 70px 0; } .cv-contact-info__container { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 44px; } .cv-contact-info__intro h2 { font-size: clamp(43px, 8.5vw, 56px); } .cv-contact-info__architecture { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; } .cv-contact-info__index-line b { width: 21px; height: 21px; flex-basis: 21px; font-size: 8px; } .cv-contact-info__office { min-height: 300px; padding: 26px; } .cv-contact-info__call, .cv-contact-info__email { padding: 24px 26px; } } /* ========================================================= MOBILE-M 480px — 599px ========================================================= */ @media (min-width: 480px) and (max-width: 599px) { .cv-contact-info { padding: 62px 0; } .cv-contact-info__container { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 38px; } .cv-contact-info__intro h2 { font-size: clamp(39px, 10vw, 49px); } .cv-contact-info__lead { font-size: 14px; line-height: 1.75; } .cv-contact-info__architecture { grid-template-columns: 18px minmax(0, 1fr); gap: 10px; } .cv-contact-info__office { min-height: 275px; padding: 23px; } .cv-contact-info__office-content { min-height: 185px; } .cv-contact-info__office-content h3 { font-size: 31px; } .cv-contact-info__call, .cv-contact-info__email { padding: 22px 23px; } .cv-contact-info__call-main > a:first-child { font-size: 23px; } .cv-contact-info__email-main > a:first-child { font-size: 25px; } } /* ========================================================= MOBILE-S BELOW 480px ========================================================= */ @media (max-width: 479px) { .cv-contact-info { padding: 54px 0; } .cv-contact-info__container { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 34px; } .cv-contact-info__eyebrow { margin-bottom: 19px; font-size: 9px; letter-spacing: .12em; } .cv-contact-info__eyebrow-line { width: 23px; } .cv-contact-info__intro h2 { font-size: clamp(35px, 11.5vw, 43px); letter-spacing: -.045em; } .cv-contact-info__lead { margin-top: 21px; font-size: 13.5px; line-height: 1.72; } .cv-contact-info__rule { margin: 27px 0 25px; } .cv-contact-info__brief { padding: 22px 20px 24px; clip-path: polygon( 0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100% ); } .cv-contact-info__brief h3 { font-size: 20px; } .cv-contact-info__brief p { font-size: 12.5px; } .cv-contact-info__architecture { grid-template-columns: 1fr; gap: 0; } .cv-contact-info__index-line { display: none; } .cv-contact-info__contact-stack { gap: 12px; } .cv-contact-info__office { min-height: 270px; padding: 22px 20px; clip-path: polygon( 0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100% ); } .cv-contact-info__office-top { font-size: 8px; gap: 10px; } .cv-contact-info__office-content { min-height: 185px; } .cv-contact-info__office-content h3 { font-size: 30px; } .cv-contact-info__office-content p { margin-top: 14px; font-size: 12.5px; line-height: 1.7; } .cv-contact-info__office-corner { right: 19px; bottom: 19px; width: 34px; height: 34px; } .cv-contact-info__call { min-height: 175px; padding: 21px 20px; clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100% ); } .cv-contact-info__call-meta, .cv-contact-info__email-top { font-size: 8px; letter-spacing: .09em; } .cv-contact-info__call-main { margin-top: 22px; } .cv-contact-info__call-main > a:first-child { font-size: clamp(20px, 6vw, 25px); } .cv-contact-info__call-arrow, .cv-contact-info__email-arrow { width: 35px; height: 35px; flex-basis: 35px; } .cv-contact-info__call p { font-size: 10px; } .cv-contact-info__email { min-height: 160px; padding: 21px 20px; clip-path: polygon( 0 21px, 21px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100% ); } .cv-contact-info__email-main { margin-top: 28px; } .cv-contact-info__email-main > a:first-child { font-size: clamp(20px, 6.5vw, 27px); } } @media (max-width: 767px) { .cv-contact-info__brief { box-sizing: border-box; } } /* ========================================================= LAPTOP-L 1440px — 1599px ========================================================= */ @media (min-width: 1440px) and (max-width: 1599px) { .cv-contact-hero { min-height: 660px; } .cv-contact-info__container { width: min(1400px, calc(100% - 72px)); } } /* ========================================================= DESKTOP 1600px+ ========================================================= */ @media (min-width: 1600px) { .cv-contact-info { padding: 135px 0; } .cv-contact-info__container { width: min(1480px, calc(100% - 100px)); } .cv-contact-info__office { min-height: 350px; } .cv-contact-info__call { min-height: 200px; } .cv-contact-info__email { min-height: 190px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cv-contact-info__intro, .cv-contact-info__office, .cv-contact-info__call, .cv-contact-info__email { opacity: 1; transform: none; transition: none; } .cv-contact-info__brief, .cv-contact-info__office-corner, .cv-contact-info__call-arrow, .cv-contact-info__email-arrow { transition: none; } } /* ========================================================= PAST CONFERENCES Mobile-S/M/L (base) · Tab 768 · Laptop 1024 · Laptop-L 1440 ========================================================= */ .cv-pc, .cv-pc *, .cv-pc *::before, .cv-pc *::after { box-sizing: border-box; } .cv-pc { padding-block: clamp(56px, 8vw, 110px); padding-inline: var(--cv-navbar-padding); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-pc__inner { max-inline-size: 1400px; margin-inline: auto; } /* ---------- Header ---------- */ .cv-pc__head { display: flex; flex-direction: column; gap: 20px; margin-block-end: clamp(24px, 4vw, 40px); } .cv-pc__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-pc__eyebrow::before { content: ""; inline-size: 28px; block-size: 2px; background: var(--cv-accent); flex: none; } .cv-pc__title { margin: 12px 0 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .cv-pc__lead { max-inline-size: 46ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); font-weight: 400; line-height: 1.65; } .cv-pc__btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; margin-block-start: 20px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); background: var(--cv-accent); color: var(--cv-on-accent); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: background-color var(--cv-transition), transform var(--cv-transition); } .cv-pc__btn:hover { background: var(--cv-accent-hover); transform: translateY(-1px); } .cv-pc__btn:active { background: var(--cv-accent-pressed); } .cv-pc__btn:focus-visible, .cv-pc__cta-btn:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } /* ---------- Stats ---------- */ .cv-pc__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; } .cv-pc__stat { min-inline-size: 0; padding: 18px 16px; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-lg); } .cv-pc__stat-num { display: block; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(28px, 4.2vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; } .cv-pc__stat-label { display: block; margin-block-start: 6px; color: var(--cv-text-muted); font-size: 13px; font-weight: 500; line-height: 1.4; } /* ---------- Grid (mobile: 1 column) ---------- */ .cv-pc__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(250px, 68vw, 340px); gap: 12px; } .cv-pc__card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-inline-size: 0; overflow: hidden; isolation: isolate; background: var(--cv-black); border-radius: var(--cv-radius-lg); } .cv-pc__img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); } /* Dark gradient behind the text: keeps it readable on any photo, in both themes */ .cv-pc__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, rgba(5, 9, 9, 0.94) 0%, rgba(5, 9, 9, 0.82) 45%, rgba(5, 9, 9, 0.45) 72%, rgba(5, 9, 9, 0) 100% ); } .cv-pc__chip { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; padding: 6px 11px; background: rgba(8, 12, 12, 0.66); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cv-pc__go { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: grid; place-items: center; inline-size: 38px; block-size: 38px; background: rgba(255, 255, 255, 0.94); border-radius: 50%; color: #0A0D0D; transition: background-color var(--cv-transition), color var(--cv-transition); } .cv-pc__go svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms ease; } .cv-pc__info { padding: 16px 16px 15px; color: #FFFFFF; } .cv-pc__title-sm { margin: 0 0 6px; color: #FFFFFF; font-family: var(--cv-heading-font); font-size: 16px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } .cv-pc__link { color: inherit; text-decoration: none; } /* Whole card is the click target */ .cv-pc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; } .cv-pc__link:focus-visible { outline: none; } .cv-pc__link:focus-visible::after { outline: 3px solid var(--cv-accent); outline-offset: -3px; border-radius: var(--cv-radius-lg); } .cv-pc__desc { display: block; max-inline-size: 52ch; margin: 0 0 8px; color: rgba(255, 255, 255, 0.92); font-size: 13px; line-height: 1.5; } .cv-pc__meta { display: flex; flex-wrap: wrap; margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 12px; font-weight: 500; line-height: 1.5; } .cv-pc__meta span:not(:last-child)::after { content: "\2022"; margin-inline: 7px; opacity: 0.7; } @media (hover: hover) { .cv-pc__card:hover .cv-pc__img { transform: scale(1.06); } .cv-pc__card:hover .cv-pc__go { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-pc__card:hover .cv-pc__go svg { transform: translate(2px, -2px); } } /* ---------- CTA band ---------- */ .cv-pc__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-block-start: 12px; padding: 24px 20px; background: var(--cv-accent); border-radius: var(--cv-radius-lg); } .cv-pc__cta-title { margin: 0; color: var(--cv-on-accent); font-family: var(--cv-heading-font); font-size: clamp(22px, 3vw, 30px); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; } .cv-pc__cta-text { max-inline-size: 52ch; margin: 8px 0 0; color: var(--cv-on-accent); font-size: var(--cv-hero-body); line-height: 1.6; opacity: 0.92; } .cv-pc__cta-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-block-size: 48px; padding: 12px 24px; background: var(--cv-on-accent); border-radius: var(--cv-radius-md); color: var(--cv-accent); font-size: var(--cv-hero-btn); font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform var(--cv-transition); } .cv-pc__cta-btn:hover { transform: translateY(-1px); } /* ---------- Entrance animation (enabled by script.js) ---------- */ .cv-pc[data-pc-anim] [data-pc-reveal] { opacity: 1; transform: none; transition: none; } .cv-pc[data-pc-anim] [data-pc-reveal].is-in { opacity: 1; transform: none; } .cv-pc[data-pc-anim] .cv-pc__card { clip-path: inset(0 round var(--cv-radius-lg)); transition: none; } .cv-pc[data-pc-anim] .cv-pc__card.is-in { clip-path: inset(0 0 0 0 round var(--cv-radius-lg)); } /* ---------- Tablet · 768px+ (2 columns) ---------- */ @media (min-width: 768px) { .cv-pc__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-block-end: 14px; } .cv-pc__stat { padding: 22px 24px; } .cv-pc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 250px; grid-auto-flow: row dense; gap: 14px; } .cv-pc__card--lg { grid-column: span 2; } .cv-pc__chip { inset-block-start: 14px; inset-inline-start: 14px; } .cv-pc__go { inset-block-start: 14px; inset-inline-end: 14px; } .cv-pc__info { padding: 20px 20px 18px; } .cv-pc__title-sm { font-size: 18px; } .cv-pc__card--lg .cv-pc__title-sm { font-size: 22px; } .cv-pc__card--lg .cv-pc__desc { display: block; max-inline-size: 52ch; margin: 0 0 10px; color: rgba(255, 255, 255, 0.92); font-size: 14px; line-height: 1.55; } .cv-pc__meta { font-size: 13px; } .cv-pc__cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; margin-block-start: 14px; padding: 30px 32px; } } /* ---------- Laptop · 1024px+ (4-column bento) ---------- */ @media (min-width: 1024px) { .cv-pc__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; } .cv-pc__title { max-inline-size: 20ch; } .cv-pc__head-end { flex: 0 1 460px; } .cv-pc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, clamp(190px, 17vw, 240px)); grid-auto-rows: clamp(190px, 17vw, 240px); grid-auto-flow: row; grid-template-areas: "a a s1 t1" "a a s2 t1" "w1 w1 t2 s3" "s4 s5 t2 s6" "w2 w2 w3 w3"; } .cv-pc__card--lg { grid-column: auto; } .cv-pc__card--a { grid-area: a; } .cv-pc__card--s1 { grid-area: s1; } .cv-pc__card--t1 { grid-area: t1; } .cv-pc__card--s2 { grid-area: s2; } .cv-pc__card--w1 { grid-area: w1; } .cv-pc__card--t2 { grid-area: t2; } .cv-pc__card--s3 { grid-area: s3; } .cv-pc__card--s4 { grid-area: s4; } .cv-pc__card--s5 { grid-area: s5; } .cv-pc__card--s6 { grid-area: s6; } .cv-pc__card--w2 { grid-area: w2; } .cv-pc__card--w3 { grid-area: w3; } .cv-pc__info { padding: 16px 16px 15px; } .cv-pc__title-sm { font-size: 15px; } .cv-pc__card--lg .cv-pc__title-sm { font-size: 20px; } .cv-pc__card--a .cv-pc__title-sm { font-size: clamp(22px, 2.4vw, 30px); } .cv-pc__card--a .cv-pc__info { padding: 26px 26px 24px; } .cv-pc__meta { font-size: 12px; } .cv-pc__card--a .cv-pc__meta { font-size: 13px; } .cv-pc__card--a .cv-pc__desc { font-size: 15px; } } /* ---------- Laptop-L · 1440px+ ---------- */ @media (min-width: 1440px) { .cv-pc__grid { gap: 16px; } .cv-pc__info { padding: 20px 20px 18px; } .cv-pc__title-sm { font-size: 17px; } .cv-pc__card--lg .cv-pc__title-sm { font-size: 22px; } .cv-pc__meta { font-size: 13px; } .cv-pc__card--lg .cv-pc__desc { font-size: 15px; } } /* ---------- Mobile-S tweaks ---------- */ @media (max-width: 374px) { .cv-pc__stat { padding: 16px 12px; } .cv-pc__info { padding: 14px 14px 13px; } .cv-pc__title-sm { font-size: 15px; } .cv-pc__cta { padding: 22px 16px; } .cv-pc__cta-btn { inline-size: 100%; } } @media (max-width: 767px) { .cv-pc__btn { inline-size: 100%; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cv-pc__img, .cv-pc__go svg, .cv-pc__btn, .cv-pc__cta-btn { transition: none; } .cv-pc__card:hover .cv-pc__img { transform: none; } } /* Contact section: email is part of the office card. */ .cv-contact-info__office-email { display: grid; gap: 5px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .25); font-family: var(--cv-body-font); } .cv-contact-info__office-email span { color: var(--cv-on-accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; opacity: .76; } .cv-contact-info__office-email a { width: fit-content; max-width: 100%; color: var(--cv-on-accent); font-size: 15px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-underline-offset: 3px; } .cv-contact-info__office-email a:hover, .cv-contact-info__office-email a:focus-visible { color: var(--cv-on-accent); text-decoration-color: currentColor; } .cv-contact-info__call { margin-top: auto; } .cv-contact-info__office-email a { direction: ltr; text-align: start; unicode-bidi: isolate; } /* ========================================================= CLIENT DASHBOARD CONSOLE Mobile-S/M/L (base) · Tab 768 · Laptop 1024 · Laptop-L 1440 ========================================================= */ :root { --cv-cd-c1: #1F5F5B; --cv-cd-c2: #3FA39B; --cv-cd-c3: #8CC6C0; --cv-cd-c4: #B9C7C4; --cv-cd-c5: #0A0D0D; --cv-cd-dur: 7s; } .cv-cd, .cv-cd *, .cv-cd *::before, .cv-cd *::after { box-sizing: border-box; } .cv-cd { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 110px); padding-inline: var(--cv-navbar-padding); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } /* Drifting dot grid + soft glow */ .cv-cd::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(var(--cv-border) 1.3px, transparent 1.6px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 70% 45%, #000 0%, transparent 72%); animation: cvCdDrift 30s linear infinite; } .cv-cd::after { content: ""; position: absolute; inset-inline-end: -10%; inset-block-start: 22%; z-index: -1; inline-size: min(780px, 90vw); block-size: min(780px, 90vw); background: radial-gradient(circle, var(--cv-accent-soft) 0%, transparent 62%); opacity: 0.75; pointer-events: none; } .cv-cd__inner { max-inline-size: 1400px; margin-inline: auto; } /* ---------- Header ---------- */ .cv-cd__head { display: flex; flex-direction: column; gap: 20px; margin-block-end: clamp(26px, 4vw, 44px); } .cv-cd__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-cd__eyebrow::before { content: ""; flex: none; inline-size: 28px; block-size: 2px; background: var(--cv-accent); } .cv-cd__title { margin: 12px 0 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .cv-cd__lead { max-inline-size: 50ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); line-height: 1.65; } .cv-cd__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 22px; } .cv-cd__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 150px; min-block-size: 48px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: background-color var(--cv-transition), color var(--cv-transition), transform var(--cv-transition); } .cv-cd__btn:hover { transform: translateY(-1px); } .cv-cd__btn:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } .cv-cd__btn--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-cd__btn--primary:hover { background: var(--cv-accent-hover); } .cv-cd__btn--primary:active { background: var(--cv-accent-pressed); } .cv-cd__btn--secondary { background: transparent; color: var(--cv-text); border-color: var(--cv-text); } .cv-cd__btn--secondary:hover { background: var(--cv-accent-soft); } /* ---------- Stage ---------- */ .cv-cd__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-block-end: clamp(34px, 5vw, 54px); } /* ---------- Steps ---------- */ .cv-cd__rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: center; } .cv-cd__step { position: relative; display: block; inline-size: 100%; margin: 0; padding: 18px 18px 22px; overflow: hidden; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-lg); color: var(--cv-text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--cv-transition), box-shadow var(--cv-transition), background-color var(--cv-transition); } .cv-cd__step:hover { border-color: var(--cv-accent); } .cv-cd__step:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } .cv-cd__step.is-active { border-color: var(--cv-accent); box-shadow: 0 0 0 1px var(--cv-accent); } .cv-cd__step-num { display: block; margin-block-end: 8px; color: var(--cv-text-muted); font-family: var(--cv-heading-font); font-size: 26px; font-weight: 400; line-height: 1; transition: color var(--cv-transition); } .cv-cd__step.is-active .cv-cd__step-num { color: var(--cv-accent); } .cv-cd__step-title { display: block; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 18px; font-weight: 600; line-height: 1.25; } .cv-cd__step-desc { display: block; margin-block-start: 8px; color: var(--cv-text-muted); font-size: 14.5px; font-weight: 400; line-height: 1.6; } .cv-cd__step-bar { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: var(--cv-border); } .cv-cd__step-fill { display: block; inline-size: 100%; block-size: 100%; background: var(--cv-accent); transform: scaleX(0); transform-origin: var(--cv-cd-origin, 0 50%); } .cv-cd__step.is-active .cv-cd__step-fill { animation: cvCdFill var(--cv-cd-dur) linear forwards; } .cv-cd:not([data-cd-play]) .cv-cd__step-fill { animation-play-state: paused; } /* ---------- Console ---------- */ .cv-cd__wrap { position: relative; min-inline-size: 0; } .cv-cd__console { position: relative; overflow: hidden; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 20px; box-shadow: 0 34px 60px -42px rgba(10, 13, 13, 0.45); } .cv-cd__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; background: var(--cv-bg); border-bottom: 1px solid var(--cv-border); } .cv-cd__dots { display: inline-flex; gap: 6px; } .cv-cd__dots i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cv-border); border: 1px solid var(--cv-text-muted); } .cv-cd__bar-title { flex: 1 1 auto; color: var(--cv-text); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; } .cv-cd__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; background: var(--cv-accent-soft); border-radius: 999px; color: var(--cv-text); font-size: 12px; font-weight: 700; line-height: 1.2; } .cv-cd__live-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cv-accent); animation: cvCdPulse 1.8s ease-out infinite; } .cv-cd__pause { display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; background: transparent; border: 1px solid var(--cv-border); border-radius: 50%; color: var(--cv-text); cursor: pointer; transition: background-color var(--cv-transition); } .cv-cd__pause:hover { background: var(--cv-accent-soft); } .cv-cd__pause:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 2px; } .cv-cd__ico { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cv-cd__ico--play, .cv-cd__pause[aria-pressed="true"] .cv-cd__ico--pause { display: none; } .cv-cd__pause[aria-pressed="true"] .cv-cd__ico--play { display: block; fill: currentColor; } /* ---------- Panels ---------- */ .cv-cd__panels { padding: 16px 14px 18px; } .cv-cd[data-cd-ready] .cv-cd__panels { display: grid; } .cv-cd[data-cd-ready] .cv-cd__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 350ms ease, transform 350ms ease, visibility 0s linear 350ms; } .cv-cd[data-cd-ready] .cv-cd__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 500ms ease 150ms, transform 500ms ease 150ms, visibility 0s; } .cv-cd__panel-label { margin: 0 0 14px; color: var(--cv-text-muted); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; } .cv-cd__label { display: block; margin-block-end: 6px; color: var(--cv-text-muted); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; } /* Panel 1 · form */ .cv-cd__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .cv-cd__field { padding: 11px 13px; background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-md); } .cv-cd__field .cv-cd__label { margin-block-end: 3px; } .cv-cd__value { display: block; min-block-size: 1.5em; color: var(--cv-text); font-size: 14.5px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } .cv-cd__value.is-typing::after { content: ""; display: inline-block; inline-size: 2px; block-size: 1em; margin-inline-start: 2px; vertical-align: -0.15em; background: var(--cv-accent); animation: cvCdBlink 0.8s steps(1) infinite; } .cv-cd__group { margin-block-start: 14px; } .cv-cd__chips { display: flex; flex-wrap: wrap; gap: 8px; } .cv-cd__tag { padding: 7px 12px; border: 1px solid var(--cv-border); border-radius: 999px; color: var(--cv-text-muted); font-size: 13px; font-weight: 600; line-height: 1.2; transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease; } .cv-cd__panel.is-active .cv-cd__tag--pick { background: var(--cv-accent-soft); border-color: var(--cv-accent); color: var(--cv-text); transition-delay: calc(1.3s + var(--t, 0) * 0.28s); } .cv-cd:not([data-cd-ready]) .cv-cd__tag--pick { background: var(--cv-accent-soft); border-color: var(--cv-accent); color: var(--cv-text); } .cv-cd__send { position: relative; display: grid; inline-size: 100%; margin-block-start: 18px; background: var(--cv-accent); border-radius: var(--cv-radius-md); color: var(--cv-on-accent); font-size: var(--cv-hero-btn); font-weight: 700; line-height: 1.2; text-align: center; } .cv-cd__send > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 46px; padding: 10px 16px; } .cv-cd__send-b { opacity: 0; } .cv-cd__panel.is-active .cv-cd__send-a { animation: cvCdOut 400ms ease 4.2s forwards; } .cv-cd__panel.is-active .cv-cd__send-b { animation: cvCdIn 400ms ease 4.2s forwards; } /* Panel 2 · vendors */ .cv-cd__vendors { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .cv-cd__vendor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px; background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-md); } .cv-cd__v-icon { display: grid; place-items: center; inline-size: 38px; block-size: 38px; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 50%; color: var(--cv-accent); } .cv-cd__v-icon .cv-cd__ico { inline-size: 18px; block-size: 18px; } .cv-cd__v-body { min-inline-size: 0; } .cv-cd__v-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; } .cv-cd__v-name { margin: 0; color: var(--cv-text); font-size: 14.5px; font-weight: 700; line-height: 1.3; } .cv-cd__v-sub { margin: 3px 0 10px; color: var(--cv-text-muted); font-size: 13px; line-height: 1.45; } .cv-cd__pill { display: inline-block; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .cv-cd__pill--done { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-cd__pill--live { background: var(--cv-accent-soft); border-color: var(--cv-accent); color: var(--cv-text); } .cv-cd__pill--wait { background: transparent; border-color: var(--cv-border); color: var(--cv-text-muted); } .cv-cd__v-track { display: block; block-size: 6px; overflow: hidden; background: var(--cv-border); border-radius: 999px; } .cv-cd__v-fill { display: block; block-size: 100%; background: var(--cv-accent); border-radius: inherit; transform: scaleX(0); transform-origin: var(--cv-cd-origin, 0 50%); transition: transform 300ms ease; } .cv-cd__panel.is-active .cv-cd__v-fill { transform: scaleX(var(--p)); transition: transform 1200ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(350ms + var(--i) * 220ms); } .cv-cd:not([data-cd-ready]) .cv-cd__v-fill { transform: scaleX(var(--p)); } /* Panel 3 · budget */ .cv-cd__budget { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; } .cv-cd__donut { position: relative; inline-size: clamp(150px, 44vw, 190px); aspect-ratio: 1; } .cv-cd__donut svg { display: block; inline-size: 100%; block-size: 100%; } .cv-cd__ring, .cv-cd__seg { fill: none; stroke-width: 5; } .cv-cd__ring { stroke: var(--cv-border); } .cv-cd__seg { stroke: var(--c); stroke-dasharray: 0 100; stroke-dashoffset: calc(var(--o) * -1); transition: stroke-dasharray 300ms ease; } .cv-cd__panel.is-active .cv-cd__seg { stroke-dasharray: calc(var(--s) - 0.9) 100; transition: stroke-dasharray 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(300ms + var(--i) * 170ms); } .cv-cd:not([data-cd-ready]) .cv-cd__seg { stroke-dasharray: calc(var(--s) - 0.9) 100; } .cv-cd__donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .cv-cd__donut-v { color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(20px, 5.4vw, 26px); font-weight: 600; line-height: 1.1; } .cv-cd__donut-l { margin-block-start: 3px; color: var(--cv-text-muted); font-size: 12px; font-weight: 600; line-height: 1.3; } .cv-cd__legend { display: grid; inline-size: 100%; gap: 10px; margin: 0; padding: 0; list-style: none; } .cv-cd__lg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; } .cv-cd__lg-dot { inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--c); } .cv-cd__lg-name { color: var(--cv-text); font-size: 14px; font-weight: 600; line-height: 1.3; } .cv-cd__lg-amt { color: var(--cv-text); font-size: 14px; font-weight: 700; line-height: 1.3; } .cv-cd__lg-bar { grid-column: 1 / -1; display: block; block-size: 5px; overflow: hidden; background: var(--cv-border); border-radius: 999px; } .cv-cd__lg-bar span { display: block; block-size: 100%; background: var(--c); transform: scaleX(0); transform-origin: var(--cv-cd-origin, 0 50%); transition: transform 300ms ease; } .cv-cd__panel.is-active .cv-cd__lg-bar span { transform: scaleX(calc(var(--w) * 2.4)); transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(400ms + var(--i) * 150ms); } .cv-cd:not([data-cd-ready]) .cv-cd__lg-bar span { transform: scaleX(calc(var(--w) * 2.4)); } .cv-cd__note { margin: 16px 0 0; padding: 10px 13px; background: var(--cv-accent-soft); border-radius: var(--cv-radius-md); color: var(--cv-text); font-size: 13.5px; font-weight: 600; line-height: 1.45; text-align: center; } /* ---------- Floating chips (laptop and up) ---------- */ .cv-cd__float { display: none; } /* ---------- Services ticker ---------- */ .cv-cd__ticker { overflow: hidden; background: var(--cv-surface); border-block: 1px solid var(--cv-border); -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .cv-cd__ticker-track { display: flex; inline-size: max-content; animation: cvCdTicker 36s linear infinite; } .cv-cd__ticker:hover .cv-cd__ticker-track { animation-play-state: paused; } .cv-cd__ticker-group { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; } .cv-cd__ticker-group li { display: inline-flex; align-items: center; padding-block: 18px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .cv-cd__ticker-group li::after { content: ""; inline-size: 8px; block-size: 8px; margin-inline: 22px; background: var(--cv-accent); transform: rotate(45deg); } /* ---------- Keyframes ---------- */ @keyframes cvCdFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes cvCdDrift { to { background-position: 260px 260px; } } @keyframes cvCdPulse { 0% { box-shadow: 0 0 0 0 var(--cv-accent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } } @keyframes cvCdBlink { 50% { opacity: 0; } } @keyframes cvCdIn { to { opacity: 1; } } @keyframes cvCdOut { to { opacity: 0; } } @keyframes cvCdFloat { from { transform: translateY(-5px); } to { transform: translateY(7px); } } @keyframes cvCdRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes cvCdTicker { from { transform: translateX(0); } to { transform: translateX(calc(var(--cv-cd-dir, -1) * 50%)); } } /* ---------- Entrance (enabled by script.js) ---------- */ .cv-cd[data-cd-ready] [data-cd-reveal] { opacity: 0; } .cv-cd[data-cd-ready] [data-cd-reveal].is-in { animation: cvCdRise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--cd-d, 0ms) both; } /* ---------- Mobile-L · 425px+ ---------- */ @media (min-width: 425px) { .cv-cd__panels { padding: 18px 18px 20px; } .cv-cd__bar { padding: 12px 18px; } } @media (min-width: 480px) { .cv-cd__form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Tablet · 768px+ ---------- */ @media (min-width: 768px) { .cv-cd__stage { gap: 32px; } .cv-cd__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; } .cv-cd__step { padding: 20px 20px 24px; } .cv-cd__step-title { font-size: 19px; } .cv-cd__panels { padding: 24px 26px 28px; } .cv-cd__bar { padding: 14px 24px; } .cv-cd__budget { grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; } .cv-cd__donut { inline-size: 200px; } .cv-cd__donut-v { font-size: 28px; } .cv-cd__ticker-group li { font-size: 14px; padding-block: 22px; } } /* ---------- Laptop · 1024px+ ---------- */ @media (min-width: 1024px) { .cv-cd__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; } .cv-cd__title { max-inline-size: 16ch; } .cv-cd__head-end { flex: 0 1 480px; } .cv-cd__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; align-items: center; } .cv-cd__rail { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; } .cv-cd__step { padding: 22px 24px 26px; } .cv-cd__step-num { font-size: 30px; } .cv-cd__step-title { font-size: 20px; } .cv-cd__step-desc { font-size: 15px; } .cv-cd__float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 999px; box-shadow: 0 16px 30px -18px rgba(10, 13, 13, 0.5); color: var(--cv-text); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; animation: cvCdFloat 5s ease-in-out infinite alternate; } .cv-cd__float-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cv-accent); } .cv-cd__float--a { inset-block-start: -22px; inset-inline-end: 40px; } .cv-cd__float--b { inset-block-end: -22px; inset-inline-start: 46px; animation-delay: -2.2s; } } /* ---------- Laptop-L · 1440px+ ---------- */ @media (min-width: 1440px) { .cv-cd__stage { gap: 72px; } .cv-cd__panels { padding: 28px 32px 32px; } .cv-cd__step { padding: 26px 28px 30px; } .cv-cd__step-desc { font-size: 16px; } .cv-cd__value { font-size: 15.5px; } .cv-cd__v-name { font-size: 15.5px; } .cv-cd__ticker-group li { font-size: 15px; } } /* ---------- Mobile-S · up to 374px ---------- */ @media (max-width: 374px) { .cv-cd__step { padding: 16px 14px 20px; } .cv-cd__step-title { font-size: 17px; } .cv-cd__panels { padding: 14px 12px 16px; } .cv-cd__vendor { gap: 10px; padding: 11px; } .cv-cd__v-icon { inline-size: 34px; block-size: 34px; } } @media (max-width: 767px) { .cv-cd__btn { inline-size: 100%; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cv-cd::before, .cv-cd__ticker-track, .cv-cd__float, .cv-cd__live-dot, .cv-cd__value.is-typing::after { animation: none; } .cv-cd [data-cd-reveal] { opacity: 1 !important; animation: none !important; } .cv-cd__panel, .cv-cd__v-fill, .cv-cd__seg, .cv-cd__lg-bar span, .cv-cd__tag { transition: none !important; } .cv-cd__step.is-active .cv-cd__step-fill { animation: none; transform: scaleX(1); } .cv-cd__panel.is-active .cv-cd__send-a, .cv-cd__panel.is-active .cv-cd__send-b { animation: none; } .cv-cd__panel.is-active .cv-cd__send-b { opacity: 1; } .cv-cd__panel.is-active .cv-cd__send-a { opacity: 0; } } /* ========================================================= EVENT JOURNEY Pinned colour-stack scroll · Mobile-S/M/L · Tab · Laptop · Laptop-L Note: no ancestor of .cv-jr__panel may use overflow:hidden, or position:sticky stops working. ========================================================= */ .cv-jr, .cv-jr *, .cv-jr *::before, .cv-jr *::after { box-sizing: border-box; } .cv-jr { /* Phase colours (light mode) */ --jr-bg-1: #FF8F78; --jr-bg-2: #FFC93C; --jr-bg-3: #A78BFA; --jr-bg-4: #4FC3F7; --jr-bg-5: #3DDC97; --jr-ink: #0A0D0D; --jr-card: rgba(255, 255, 255, 0.55); --jr-row: rgba(255, 255, 255, 0.86); --jr-line: rgba(10, 13, 13, 0.24); /* Confetti */ --jr-cf-1: #FF6B6B; --jr-cf-2: #FFC93C; --jr-cf-3: #A78BFA; --jr-cf-4: #4FC3F7; --jr-cf-5: #FFFFFF; --jr-nav: var(--cv-navbar-height, 82px); --jr-step: 10px; --jr-flip: 1; position: relative; padding-block-start: clamp(56px, 8vw, 110px); padding-block-end: clamp(40px, 6vw, 80px); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } /* ---------- Intro ---------- */ .cv-jr__intro { max-inline-size: 1400px; margin-inline: auto; margin-block-end: clamp(26px, 4vw, 44px); padding-inline: var(--cv-navbar-padding); } .cv-jr__intro-in { display: flex; flex-direction: column; gap: 18px; margin-block-end: 26px; } .cv-jr__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-jr__eyebrow::before { content: ""; flex: none; inline-size: 28px; block-size: 2px; background: var(--cv-accent); } .cv-jr__title { margin: 12px 0 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .cv-jr__lead { max-inline-size: 46ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); line-height: 1.65; } .cv-jr__pills { display: flex; flex-wrap: wrap; gap: 10px; } .cv-jr__pill { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 6px 18px 6px 8px; border: 1.5px solid var(--jr-ink); border-radius: 999px; color: var(--jr-ink); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform 220ms ease; } .cv-jr__pill span { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--jr-ink); color: var(--cv-bg); font-size: 12px; font-weight: 700; } .cv-jr__pill:hover { transform: translateY(-3px) rotate(-1.5deg); } .cv-jr__pill:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } .cv-jr__pill--1 { background: var(--jr-bg-1); } .cv-jr__pill--2 { background: var(--jr-bg-2); } .cv-jr__pill--3 { background: var(--jr-bg-3); } .cv-jr__pill--4 { background: var(--jr-bg-4); } .cv-jr__pill--5 { background: var(--jr-bg-5); } /* ---------- Stack ---------- */ .cv-jr__stack { position: relative; } .cv-jr__panel { --ph-bg: var(--jr-bg-1); position: sticky; top: calc(var(--jr-nav) + var(--jr-i, 0) * var(--jr-step)); z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 16px; block-size: calc(100vh - var(--jr-nav) - 5 * var(--jr-step) - 8px); block-size: calc(100svh - var(--jr-nav) - 5 * var(--jr-step) - 8px); margin-inline: var(--cv-navbar-padding); margin-block-end: 18svh; padding: 20px 18px; overflow: hidden; background: var(--ph-bg); color: var(--jr-ink); border-radius: 26px; box-shadow: 0 -16px 36px -22px rgba(10, 13, 13, 0.5); scroll-margin-top: calc(var(--jr-nav) + var(--jr-i, 0) * var(--jr-step)); transform-origin: 50% 0; transform: scale(calc(1 - var(--cv-jr-cover, 0) * 0.05)); filter: brightness(calc(1 - var(--cv-jr-cover, 0) * 0.22)); will-change: transform; } .cv-jr__panel:last-child { margin-block-end: 0; } .cv-jr__panel--1 { --ph-bg: var(--jr-bg-1); } .cv-jr__panel--2 { --ph-bg: var(--jr-bg-2); } .cv-jr__panel--3 { --ph-bg: var(--jr-bg-3); } .cv-jr__panel--4 { --ph-bg: var(--jr-bg-4); } .cv-jr__panel--5 { --ph-bg: var(--jr-bg-5); } /* Giant outlined number */ .cv-jr__big { position: absolute; inset-inline-end: 3%; inset-block-end: -5%; z-index: 0; color: transparent; -webkit-text-stroke: 2px var(--jr-ink); font-family: var(--cv-heading-font); font-size: clamp(150px, 34vw, 420px); font-weight: 700; line-height: 0.8; opacity: 0.16; transform: translateY(calc((1 - var(--cv-jr-p, 1)) * 150px)); pointer-events: none; user-select: none; } .cv-jr__copy, .cv-jr__vis, .cv-jr__end { position: relative; z-index: 1; } /* ---------- Copy ---------- */ .cv-jr__tag { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 5px 14px 5px 5px; border: 1.5px solid var(--jr-ink); border-radius: 999px; color: var(--jr-ink); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; } .cv-jr__tag-n { padding: 5px 10px; border-radius: 999px; background: var(--jr-ink); color: var(--ph-bg); letter-spacing: 0.06em; } .cv-jr__h { margin: 12px 0 10px; color: var(--jr-ink); font-family: var(--cv-heading-font); font-size: clamp(30px, 9vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; } .cv-jr__line { display: block; overflow: hidden; padding-block: 0.07em; margin-block: -0.07em; } .cv-jr__line > span { display: block; overflow-wrap: anywhere; } .cv-jr__p { max-inline-size: 44ch; margin: 0; color: var(--jr-ink); font-size: 14.5px; font-weight: 500; line-height: 1.55; } .cv-jr__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .cv-jr__list li { padding: 7px 13px; background: var(--jr-card); border: 1.5px solid var(--jr-line); border-radius: 999px; color: var(--jr-ink); font-size: 13px; font-weight: 700; line-height: 1.25; } /* ---------- Visual card (shared) ---------- */ .cv-jr__vis { display: grid; place-items: center; block-size: clamp(176px, 46vw, 230px); padding: 12px; overflow: hidden; background: var(--jr-card); border: 1.5px solid var(--jr-line); border-radius: 22px; } /* 1 · Brief */ .cv-jr__form { display: grid; gap: 8px; inline-size: min(100%, 320px); } .cv-jr__form-t { display: none; margin: 0 0 2px; color: var(--jr-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .cv-jr__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--jr-row); border-radius: 12px; color: var(--jr-ink); font-size: 13px; font-weight: 700; line-height: 1.2; } .cv-jr__row:nth-of-type(5) { display: none; } .cv-jr__tick { position: relative; flex: none; inline-size: 18px; block-size: 18px; border: 2px solid var(--jr-ink); border-radius: 50%; } .cv-jr__tick::after { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 1px; inline-size: 5px; block-size: 9px; border: solid var(--ph-bg); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; } .cv-jr__row b { position: relative; flex: 1; block-size: 6px; margin-inline-start: 6px; overflow: hidden; background: var(--jr-line); border-radius: 9px; } .cv-jr__row b::after { content: ""; position: absolute; inset: 0; background: var(--jr-ink); transform: scaleX(0); transform-origin: var(--cv-jr-origin, 0 50%); } .cv-jr__note { display: none; position: absolute; padding: 7px 13px; background: var(--jr-ink); border-radius: 999px; color: var(--ph-bg); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; } /* 2 · Venue */ .cv-jr__plan { display: grid; gap: 9px; inline-size: min(100%, 330px); } .cv-jr__stage { display: grid; place-items: center; block-size: 26px; background: var(--jr-ink); border-radius: 8px; color: var(--ph-bg); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; } .cv-jr__tables { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; justify-items: center; } .cv-jr__table { inline-size: 100%; max-inline-size: 34px; aspect-ratio: 1; background: var(--jr-row); border: 2px solid var(--jr-ink); border-radius: 50%; } .cv-jr__tables .cv-jr__table:nth-child(n + 11) { display: none; } .cv-jr__table.is-hot { background: var(--jr-ink); } .cv-jr__cap { margin: 0; color: var(--jr-ink); font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: center; } /* 3 · AV */ .cv-jr__vis--av { position: relative; align-items: end; } .cv-jr__beam { position: absolute; inset-block-start: -6%; inline-size: 52%; block-size: 112%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), transparent 82%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity: 0.55; transform-origin: 50% 0; } .cv-jr__beam--l { inset-inline-start: -4%; transform: rotate(-14deg); } .cv-jr__beam--r { inset-inline-end: -4%; transform: rotate(14deg); } .cv-jr__badge { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; padding: 6px 12px; background: var(--jr-ink); border-radius: 999px; color: var(--ph-bg); font-size: 11px; font-weight: 700; line-height: 1.2; } .cv-jr__eq { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 5px; inline-size: 100%; block-size: 62%; } .cv-jr__eq i { flex: 1; max-inline-size: 16px; block-size: 100%; background: var(--jr-ink); border-radius: 6px 6px 2px 2px; transform: scaleY(0.3); transform-origin: 50% 100%; } /* 4 · Vendors orbit */ .cv-jr__orbit { --r: 56px; position: relative; inline-size: calc(var(--r) * 2 + 80px); block-size: calc(var(--r) * 2 + 36px); display: grid; place-items: center; } .cv-jr__ring { position: absolute; inline-size: calc(var(--r) * 2); block-size: calc(var(--r) * 2); border: 2px dashed var(--jr-line); border-radius: 50%; } .cv-jr__core { position: relative; z-index: 2; display: grid; place-items: center; inline-size: 66px; block-size: 66px; padding: 6px; background: var(--jr-ink); border-radius: 50%; color: var(--ph-bg); font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; } .cv-jr__spin { position: absolute; inset: 0; } .cv-jr__node { position: absolute; inset: 0; margin: auto; inline-size: 70px; block-size: 28px; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); } .cv-jr__node span { display: grid; place-items: center; inline-size: 100%; block-size: 100%; background: var(--jr-row); border: 1.5px solid var(--jr-ink); border-radius: 999px; color: var(--jr-ink); font-size: 11.5px; font-weight: 700; line-height: 1; } /* 5 · Show day */ .cv-jr__vis--run { position: relative; } .cv-jr__run { position: relative; z-index: 1; display: grid; gap: 8px; inline-size: min(100%, 330px); } .cv-jr__slot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--jr-row); border-radius: 12px; color: var(--jr-ink); font-size: 13px; font-weight: 700; line-height: 1.25; } .cv-jr__slot:nth-child(4) { display: none; } .cv-jr__slot b { font-variant-numeric: tabular-nums; } .cv-jr__slot em { inline-size: 9px; block-size: 9px; border-radius: 50%; background: currentColor; } .cv-jr__confetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .cv-jr__confetti i { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: -16px; inline-size: 8px; block-size: 13px; border-radius: 2px; background: var(--jr-cf-1); opacity: 0; } .cv-jr__confetti i:nth-child(5n + 2) { background: var(--jr-cf-2); } .cv-jr__confetti i:nth-child(5n + 3) { background: var(--jr-cf-3); } .cv-jr__confetti i:nth-child(5n + 4) { background: var(--jr-cf-4); } .cv-jr__confetti i:nth-child(5n) { background: var(--jr-cf-5); } /* ---------- Sliding keyword strip ---------- */ .cv-jr__strip { display: none; position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; overflow: hidden; background: var(--jr-card); border-block-start: 1.5px solid var(--jr-line); } .cv-jr__strip-track { display: flex; inline-size: max-content; animation: cvJrSlide 40s linear infinite; animation-direction: var(--jr-ad, normal); } .cv-jr__strip-g { display: flex; flex: none; } .cv-jr__strip-g span { display: inline-flex; align-items: center; padding-block: 12px; color: var(--jr-ink); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .cv-jr__strip-g span::after { content: ""; inline-size: 7px; block-size: 7px; margin-inline: 20px; background: var(--jr-ink); transform: rotate(45deg); } /* ---------- Finale ---------- */ .cv-jr__panel--end { background: linear-gradient(115deg, var(--jr-bg-1), var(--jr-bg-2), var(--jr-bg-5), var(--jr-bg-4), var(--jr-bg-3), var(--jr-bg-1)); background-size: 300% 300%; animation: cvJrMesh 16s ease-in-out infinite alternate; text-align: center; } .cv-jr__panel--end .cv-jr__tag { justify-self: center; } .cv-jr__panel--end .cv-jr__end { display: grid; justify-items: center; } .cv-jr__panel--end .cv-jr__tag-n { background: var(--jr-ink); color: var(--cv-bg); } .cv-jr__h--end { font-size: clamp(36px, 11vw, 56px); text-align: center; } .cv-jr__p--end { margin-inline: auto; text-align: center; } .cv-jr__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 22px; } .cv-jr__btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 50px; padding: 12px 26px; border: 2px solid var(--jr-ink); border-radius: var(--cv-radius-md); font-size: var(--cv-hero-btn); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: transform 220ms ease, background-color 220ms ease; } .cv-jr__btn--primary { background: var(--jr-ink); color: var(--cv-bg); } .cv-jr__btn--ghost { background: transparent; color: var(--jr-ink); } .cv-jr__btn:hover { transform: translateY(-3px); } .cv-jr__btn--ghost:hover { background: var(--jr-card); } .cv-jr__btn:focus-visible { outline: 3px solid var(--jr-ink); outline-offset: 3px; } .cv-jr__blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(8px); opacity: 0.55; pointer-events: none; } .cv-jr__blob--a { inline-size: 180px; block-size: 180px; inset-block-start: -50px; inset-inline-start: -40px; background: var(--jr-cf-3); animation: cvJrFloat 9s ease-in-out infinite alternate; } .cv-jr__blob--b { inline-size: 140px; block-size: 140px; inset-block-end: -30px; inset-inline-end: 8%; background: var(--jr-cf-4); animation: cvJrFloat 11s ease-in-out -3s infinite alternate; } .cv-jr__blob--c { inline-size: 110px; block-size: 110px; inset-block-start: 20%; inset-inline-end: -30px; background: var(--jr-cf-2); animation: cvJrFloat 8s ease-in-out -5s infinite alternate; } /* ---------- Progress rail ---------- */ .cv-jr__rail { display: none; } /* ---------- Keyframes ---------- */ @keyframes cvJrSlide { from { transform: translateX(0); } to { transform: translateX(calc(var(--jr-flip, 1) * -50%)); } } @keyframes cvJrMesh { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes cvJrFloat { from { transform: translate(0, -10px) scale(1); } to { transform: translate(14px, 16px) scale(1.12); } } @keyframes cvJrRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes cvJrSlideIn { from { opacity: 0; transform: translateX(calc(var(--sd, 1) * var(--jr-flip, 1) * 70px)); } to { opacity: 1; transform: none; } } @keyframes cvJrTick { to { background: var(--jr-ink); } } @keyframes cvJrCheck { to { opacity: 1; } } @keyframes cvJrBar { to { transform: scaleX(var(--w, 0.7)); } } @keyframes cvJrPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes cvJrPulse { 0% { box-shadow: 0 0 0 0 var(--jr-ink); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } } @keyframes cvJrEq { from { transform: scaleY(0.22); } to { transform: scaleY(1); } } @keyframes cvJrSwingL { from { transform: rotate(-22deg); } to { transform: rotate(-4deg); } } @keyframes cvJrSwingR { from { transform: rotate(22deg); } to { transform: rotate(4deg); } } @keyframes cvJrSpin { to { transform: rotate(360deg); } } @keyframes cvJrBack { to { transform: rotate(-360deg); } } @keyframes cvJrSlot { 0%, 22% { background: var(--jr-ink); color: var(--ph-bg); } 28%, 100% { background: var(--jr-row); color: var(--jr-ink); } } @keyframes cvJrFall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(260px) rotate(540deg); opacity: 0.9; } } @keyframes cvJrNote { from { transform: translateY(-5px); } to { transform: translateY(7px); } } /* ---------- Entrance states (enabled by script.js) ---------- */ .cv-jr[data-jr-ready] [data-jr-reveal] { opacity: 0; } .cv-jr[data-jr-ready] [data-jr-reveal].is-in { animation: cvJrRise 750ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--jr-d, 0ms) both; } .cv-jr[data-jr-ready] [data-jr-reveal="slide"].is-in { animation-name: cvJrSlideIn; } .cv-jr[data-jr-ready] .cv-jr__line > span { transform: translateY(112%); } .cv-jr[data-jr-ready] [data-jr-slide] { opacity: 0; transform: translateX(calc(var(--sd, 1) * var(--jr-flip, 1) * -70px)); } .cv-jr[data-jr-ready] [data-jr-vis] { opacity: 0; transform: translateX(calc(var(--sd, 1) * var(--jr-flip, 1) * 110px)) rotate(calc(var(--sd, 1) * 4deg)); } .cv-jr[data-jr-ready] .is-in .cv-jr__line > span { transform: none; transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--k, 0) * 110ms + 150ms); } .cv-jr[data-jr-ready] .is-in [data-jr-slide], .cv-jr[data-jr-ready] .is-in[data-jr-slide] { opacity: 1; transform: none; transition: opacity 700ms ease calc(var(--k, 0) * 110ms + 150ms), transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--k, 0) * 110ms + 150ms); } .cv-jr[data-jr-ready] .is-in [data-jr-vis] { opacity: 1; transform: none; transition: opacity 700ms ease 300ms, transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms; } /* Phase animations start when the card comes in */ .cv-jr .is-in .cv-jr__tick { animation: cvJrTick 300ms ease forwards calc(900ms + var(--k, 0) * 420ms); } .cv-jr .is-in .cv-jr__tick::after { animation: cvJrCheck 200ms ease forwards calc(950ms + var(--k, 0) * 420ms); } .cv-jr .is-in .cv-jr__row b::after { animation: cvJrBar 900ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards calc(850ms + var(--k, 0) * 420ms); --w: 0.8; } .cv-jr .is-in .cv-jr__row:nth-of-type(3) b::after { --w: 0.55; } .cv-jr .is-in .cv-jr__row:nth-of-type(4) b::after { --w: 0.9; } .cv-jr .is-in .cv-jr__note--a { animation: cvJrNote 4s ease-in-out infinite alternate; } .cv-jr .is-in .cv-jr__note--b { animation: cvJrNote 5s ease-in-out -2s infinite alternate; } .cv-jr[data-jr-ready] .cv-jr__table { opacity: 0; transform: scale(0); } .cv-jr .is-in .cv-jr__table { animation: cvJrPop 450ms cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards calc(600ms + var(--i, 0) * 70ms); } .cv-jr .is-in .cv-jr__table.is-hot { animation: cvJrPop 450ms cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards calc(600ms + var(--i, 0) * 70ms), cvJrPulse 1.8s ease-out 2s infinite; } .cv-jr .is-in .cv-jr__eq i { animation: cvJrEq var(--d, 0.8s) ease-in-out var(--s, 0s) infinite alternate; } .cv-jr .is-in .cv-jr__beam--l { animation: cvJrSwingL 3.2s ease-in-out infinite alternate; } .cv-jr .is-in .cv-jr__beam--r { animation: cvJrSwingR 3.8s ease-in-out -1.4s infinite alternate; } .cv-jr .is-in .cv-jr__spin { animation: cvJrSpin 26s linear infinite; } .cv-jr .is-in .cv-jr__node span { animation: cvJrBack 26s linear infinite; } .cv-jr .is-in .cv-jr__slot { animation: cvJrSlot 6s ease-in-out calc(1s + var(--i, 0) * 1.5s) infinite; } .cv-jr .is-in .cv-jr__confetti i { animation: cvJrFall calc(3.2s + var(--i, 0) * 0.3s) linear calc(var(--i, 0) * -0.7s) infinite; } /* ---------- Mobile-L · 425px+ ---------- */ @media (min-width: 425px) { .cv-jr__panel { padding: 24px 22px; } .cv-jr__p { font-size: 15px; } } /* ---------- Tablet · 768px+ ---------- */ @media (min-width: 768px) { .cv-jr { --jr-step: 12px; } .cv-jr__intro-in { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; } .cv-jr__pill { font-size: 15px; } .cv-jr__panel { gap: 22px; padding: 34px 36px 60px; border-radius: 30px; } .cv-jr__h { font-size: clamp(44px, 6vw, 56px); } .cv-jr__p { font-size: 16px; } .cv-jr__list li { font-size: 14px; } .cv-jr__vis { block-size: clamp(250px, 34vw, 320px); padding: 18px; } .cv-jr__form-t { display: block; } .cv-jr__row { padding: 10px 14px; font-size: 14px; } .cv-jr__note { display: block; } .cv-jr__note--a { inset-block-start: 16px; inset-inline-end: 16px; } .cv-jr__note--b { inset-block-end: 16px; inset-inline-start: 16px; } .cv-jr__tables .cv-jr__table:nth-child(n + 11) { display: block; } .cv-jr__table { max-inline-size: 38px; } .cv-jr__orbit { --r: 78px; } .cv-jr__core { inline-size: 78px; block-size: 78px; font-size: 12.5px; } .cv-jr__node { inline-size: 80px; block-size: 32px; } .cv-jr__node span { font-size: 12.5px; } .cv-jr__slot:nth-child(4) { display: grid; } .cv-jr__strip { display: block; } .cv-jr__h--end { font-size: clamp(52px, 8vw, 84px); } } /* ---------- Laptop · 1024px+ ---------- */ @media (min-width: 1024px) { .cv-jr__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; padding: 36px 84px 60px 52px; } .cv-jr__panel--flip .cv-jr__vis { order: -1; } .cv-jr__h { font-size: clamp(42px, 4.3vw, 58px); } .cv-jr__vis { block-size: clamp(300px, 52svh, 400px); } .cv-jr__orbit { --r: 100px; } .cv-jr__core { inline-size: 92px; block-size: 92px; font-size: 13.5px; } .cv-jr__node { inline-size: 92px; block-size: 36px; } .cv-jr__node span { font-size: 13.5px; } .cv-jr__form { inline-size: min(100%, 360px); } .cv-jr__plan { inline-size: min(100%, 380px); } .cv-jr__table { max-inline-size: 42px; } .cv-jr__run { inline-size: min(100%, 380px); } .cv-jr__panel--end { display: grid; grid-template-columns: minmax(0, 1fr); padding: 36px 84px 60px 52px; } .cv-jr__rail { display: block; position: absolute; inset-block: 0; inset-inline-end: 22px; z-index: 60; pointer-events: none; } .cv-jr__rail-in { position: sticky; top: calc(50svh - 120px); display: grid; gap: 12px; pointer-events: auto; } .cv-jr__dot { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border: 2px solid var(--jr-ink); border-radius: 50%; color: var(--jr-ink); font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; transition: transform 260ms ease, box-shadow 260ms ease; } .cv-jr__dot--1 { background: var(--jr-bg-1); } .cv-jr__dot--2 { background: var(--jr-bg-2); } .cv-jr__dot--3 { background: var(--jr-bg-3); } .cv-jr__dot--4 { background: var(--jr-bg-4); } .cv-jr__dot--5 { background: var(--jr-bg-5); } .cv-jr__dot.is-active { transform: scale(1.3); box-shadow: 0 0 0 4px var(--cv-bg), 0 0 0 6px var(--jr-ink); } .cv-jr__dot:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } } /* ---------- Laptop-L · 1440px+ ---------- */ @media (min-width: 1440px) { .cv-jr { --jr-step: 14px; } .cv-jr__panel { gap: 72px; padding: 44px 100px 64px 72px; } .cv-jr__h { font-size: 64px; } .cv-jr__p { font-size: 17px; max-inline-size: 46ch; } .cv-jr__list li { font-size: 15px; padding: 9px 16px; } .cv-jr__vis { block-size: clamp(340px, 54svh, 440px); } .cv-jr__strip-g span { font-size: 13px; padding-block: 14px; } } /* ---------- Mobile-S · up to 374px ---------- */ @media (max-width: 374px) { .cv-jr__panel { padding: 18px 14px; } .cv-jr__pill { padding-inline-end: 14px; font-size: 13px; } .cv-jr__list li { font-size: 12.5px; padding: 6px 11px; } } /* ---------- Static (unpinned) mode --------------------------------- Short screens and reduced motion get normal stacked cards, so nothing is ever cut off. ---------------------------------------------------------------------- */ @media ((max-height: 759px) and (max-width: 1023px)), (max-height: 599px), (prefers-reduced-motion: reduce) { .cv-jr__panel { position: relative; top: auto; block-size: auto; margin-block-end: 14px; transform: none !important; filter: none !important; } .cv-jr__big { transform: none; } .cv-jr__rail { display: none !important; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cv-jr [data-jr-reveal], .cv-jr [data-jr-slide], .cv-jr [data-jr-vis], .cv-jr .cv-jr__line > span, .cv-jr .cv-jr__table { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .cv-jr__strip-track, .cv-jr__panel--end, .cv-jr__blob, .cv-jr .is-in .cv-jr__spin, .cv-jr .is-in .cv-jr__node span, .cv-jr .is-in .cv-jr__eq i, .cv-jr .is-in .cv-jr__beam, .cv-jr .is-in .cv-jr__slot, .cv-jr .is-in .cv-jr__confetti i, .cv-jr .is-in .cv-jr__note { animation: none !important; } .cv-jr__tick { background: var(--jr-ink); } .cv-jr__tick::after { opacity: 1; } .cv-jr__row b::after { transform: scaleX(0.75); } .cv-jr__eq i { transform: scaleY(0.6); } .cv-jr__pill:hover { transform: none; } } /* ========================================================= CONTACT PAGE — EVENT APPROACH ========================================================= */ .cv-contact-story, .cv-contact-story *, .cv-contact-story *::before, .cv-contact-story *::after { box-sizing: border-box; } .cv-contact-story { padding: clamp(58px, 7.5vw, 112px) clamp(18px, 4vw, 54px); overflow: hidden; background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-contact-story__layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 82px); max-inline-size: 1400px; margin-inline: auto; } .cv-contact-story__visual { position: relative; min-inline-size: 0; min-block-size: clamp(285px, 76vw, 440px); isolation: isolate; animation: cv-contact-story-rise 720ms cubic-bezier(.2,.7,.2,1) both; } .cv-contact-story__photo { position: absolute; margin: 0; overflow: hidden; background: var(--cv-surface-raised); border: 4px solid var(--cv-bg); box-shadow: 0 18px 48px rgba(10, 13, 13, .16); } .cv-contact-story__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .cv-contact-story__photo--main { inset: 4% 7% 5% 10%; border-radius: 26px; } .cv-contact-story__photo--top { z-index: 2; inset-block-start: 8%; inset-inline-start: 0; inline-size: 34%; aspect-ratio: 1; border-radius: 20px; animation: cv-contact-story-rise 720ms 100ms cubic-bezier(.2,.7,.2,1) both; } .cv-contact-story__photo--bottom { z-index: 2; inset-block-end: 7%; inset-inline-end: 0; inline-size: 31%; aspect-ratio: .88; border-radius: 20px; animation: cv-contact-story-rise 720ms 180ms cubic-bezier(.2,.7,.2,1) both; } .cv-contact-story__metric { position: absolute; z-index: 3; inset-inline-start: 3%; inset-block-end: 3%; display: flex; align-items: center; gap: 12px; max-inline-size: calc(100% - 12px); padding: 13px 17px; background: var(--cv-accent); color: var(--cv-on-accent); border: 1px solid rgba(255, 255, 255, .24); border-radius: 13px; box-shadow: 0 12px 30px rgba(10, 13, 13, .18); animation: cv-contact-story-rise 720ms 250ms cubic-bezier(.2,.7,.2,1) both; } .cv-contact-story__metric strong { flex: none; font-family: var(--cv-heading-font); font-size: clamp(25px, 3vw, 34px); font-weight: 700; line-height: 1; direction: ltr; unicode-bidi: isolate; } .cv-contact-story__metric span { max-inline-size: 13ch; font-size: 11px; font-weight: 700; line-height: 1.3; } .cv-contact-story__content { min-inline-size: 0; animation: cv-contact-story-rise 720ms 120ms cubic-bezier(.2,.7,.2,1) both; } .cv-contact-story__eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; color: var(--cv-accent); font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .13em; } .cv-contact-story__eyebrow span { flex: none; inline-size: 28px; block-size: 2px; background: var(--cv-accent); } .cv-contact-story__content h2 { max-inline-size: 17ch; margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(32px, 4vw, 52px); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; } .cv-contact-story__lead { max-inline-size: 58ch; margin: 17px 0 22px; color: var(--cv-text-muted); font-size: 15px; line-height: 1.75; } .cv-contact-story__features { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .cv-contact-story__feature { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px; min-inline-size: 0; padding: 14px 0; border-block-end: 1px solid var(--cv-border); } .cv-contact-story__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; color: var(--cv-accent); background: var(--cv-accent-soft); border: 1px solid var(--cv-border); border-radius: 50%; font-size: 16px; } .cv-contact-story__feature-copy { display: grid; gap: 4px; min-inline-size: 0; } .cv-contact-story__feature-copy strong { color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 15px; font-weight: 700; line-height: 1.35; } .cv-contact-story__feature-copy > span { color: var(--cv-text-muted); font-size: 13px; line-height: 1.55; } .cv-contact-story__button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-block-size: 48px; margin-block-start: 23px; padding: 12px 20px; color: var(--cv-on-accent); background: var(--cv-accent); border: 1px solid var(--cv-accent); border-radius: var(--cv-radius-md); font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background-color var(--cv-transition), transform var(--cv-transition), box-shadow var(--cv-transition); } .cv-contact-story__button:hover { background: var(--cv-accent-hover); border-color: var(--cv-accent-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 13, 13, .16); } .cv-contact-story__button:focus-visible { outline: 3px solid var(--cv-text); outline-offset: 4px; } .cv-contact-story__button i { font-size: 13px; } @keyframes cv-contact-story-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 600px) and (max-width: 767px) { .cv-contact-story__visual { min-block-size: 420px; } .cv-contact-story__photo--main { inset-inline: 9%; } .cv-contact-story__photo--top { inline-size: 31%; } .cv-contact-story__photo--bottom { inline-size: 28%; } } @media (min-width: 768px) { .cv-contact-story__layout { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(26px, 4vw, 58px); } .cv-contact-story__visual { min-block-size: clamp(360px, 47vw, 500px); } .cv-contact-story__photo--main { inset-inline: 7%; } .cv-contact-story__photo--top { inline-size: 34%; } .cv-contact-story__photo--bottom { inline-size: 30%; } .cv-contact-story__content h2 { font-size: clamp(34px, 4.1vw, 48px); } } @media (min-width: 1024px) { .cv-contact-story__layout { gap: clamp(48px, 6vw, 88px); } .cv-contact-story__visual { min-block-size: 500px; } .cv-contact-story__lead { margin-block-end: 25px; } .cv-contact-story__feature { padding-block: 16px; } } @media (min-width: 1440px) { .cv-contact-story__layout { max-inline-size: 1440px; } .cv-contact-story__visual { min-block-size: 540px; } .cv-contact-story__content h2 { font-size: 54px; } } @media (max-width: 380px) { .cv-contact-story { padding-inline: 16px; } .cv-contact-story__visual { min-block-size: 275px; } .cv-contact-story__photo--top { inline-size: 32%; border-radius: 16px; } .cv-contact-story__photo--bottom { inline-size: 27%; border-radius: 16px; } .cv-contact-story__metric { gap: 8px; padding: 11px 12px; } .cv-contact-story__metric span { font-size: 10px; } .cv-contact-story__feature { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; } .cv-contact-story__icon { inline-size: 40px; block-size: 40px; } } @media (prefers-reduced-motion: reduce) { .cv-contact-story__visual, .cv-contact-story__content, .cv-contact-story__photo--top, .cv-contact-story__photo--bottom, .cv-contact-story__metric { animation: none; } .cv-contact-story__button { transition: none; } } /* ========================================================= HOMEPAGE — EVENT JOURNEY RUNWAY ========================================================= */ .cv-journey, .cv-journey *, .cv-journey *::before, .cv-journey *::after { box-sizing: border-box; } .cv-journey { overflow: hidden; background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-journey__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); align-items: end; gap: clamp(14px, 3vw, 42px); padding: clamp(20px, 3vw, 40px) clamp(18px, 4vw, 60px); border-block-end: 1px solid var(--cv-border); } .cv-journey__heading, .cv-journey__lead { min-inline-size: 0; } .cv-journey__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--cv-accent); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .13em; } .cv-journey__eyebrow span { flex: none; inline-size: 26px; block-size: 2px; background: var(--cv-accent); } .cv-journey__head h2 { margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(30px, 4vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; } .cv-journey__lead { max-inline-size: 44ch; justify-self: end; margin: 0; color: var(--cv-text-muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65; } .cv-journey__stages { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; isolation: isolate; } .cv-journey__stage { position: relative; min-inline-size: 0; block-size: clamp(370px, 39vw, 520px); overflow: hidden; isolation: isolate; background: var(--cv-black); color: #fff; } .cv-journey__stage + .cv-journey__stage { border-inline-start: 1px solid rgba(255,255,255,.3); } .cv-journey__image { position: absolute; z-index: -2; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.25s cubic-bezier(.2,.7,.2,1); } .cv-journey__stage::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(5,9,9,.42) 0%, rgba(5,9,9,.12) 35%, rgba(5,9,9,.28) 52%, rgba(5,9,9,.94) 100%); } .cv-journey__stage-top { position: absolute; z-index: 3; inset-block-start: clamp(18px, 2.3vw, 30px); inset-inline: clamp(14px, 1.7vw, 24px); display: flex; align-items: center; gap: 9px; } .cv-journey__number { display: grid; place-items: center; flex: none; inline-size: 42px; block-size: 42px; color: var(--cv-on-accent); background: var(--cv-accent); border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-family: var(--cv-heading-font); font-size: 14px; font-weight: 700; direction: ltr; unicode-bidi: isolate; } .cv-journey__label { color: rgba(255,255,255,.92); font-size: 10px; font-weight: 700; line-height: 1.35; letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.6); } .cv-journey__copy { position: absolute; z-index: 4; inset-inline: clamp(14px, 1.7vw, 24px); inset-block-end: clamp(20px, 3vw, 38px); max-inline-size: 34ch; } .cv-journey__copy > p { margin: 0 0 8px; color: #9FE0D9; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; } .cv-journey__copy h3 { margin: 0 0 9px; color: #fff; font-family: var(--cv-heading-font); font-size: clamp(23px, 2.3vw, 34px); font-weight: 600; line-height: 1.1; text-wrap: balance; } .cv-journey__copy > span { display: block; max-inline-size: 35ch; color: rgba(255,255,255,.94); font-size: clamp(12px, 1.05vw, 14px); line-height: 1.58; text-shadow: 0 1px 8px rgba(0,0,0,.55); } .cv-journey__route { position: absolute; z-index: 2; inset-inline: 10%; inset-block-start: 43%; block-size: 4px; pointer-events: none; } .cv-journey__route-line { position: absolute; inset: 0; display: block; background: linear-gradient(90deg, var(--cv-accent), #B2FFF4 50%, var(--cv-accent)); box-shadow: 0 0 14px rgba(63,163,155,.75), 0 0 32px rgba(63,163,155,.4); transform: scaleX(1); transform-origin: left center; } .cv-journey__pulse { display: none; position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 15px; block-size: 15px; background: #E8FFFB; border: 3px solid var(--cv-accent); border-radius: 50%; box-shadow: 0 0 0 7px rgba(63,163,155,.22), 0 0 24px rgba(178,255,244,.95); transform: translateY(-50%); } .cv-journey__node { position: absolute; z-index: 3; inset-block-start: 43%; inset-inline-start: 50%; inline-size: 18px; block-size: 18px; background: #E8FFFB; border: 4px solid var(--cv-accent); border-radius: 50%; box-shadow: 0 0 0 6px rgba(63,163,155,.22), 0 0 20px rgba(178,255,244,.6); transform: translate(-50%, -40%); } .cv-journey.is-in .cv-journey__route-line { animation: cv-journey-line 1.35s cubic-bezier(.2,.7,.2,1) both; } .cv-journey.is-in .cv-journey__pulse { display: block; animation: cv-journey-travel 5s 1.25s ease-in-out infinite alternate; } .cv-journey.is-in .cv-journey__image { animation: cv-journey-image 1.2s calc(var(--journey-step) * 110ms) cubic-bezier(.2,.7,.2,1) both; } .cv-journey.is-in .cv-journey__copy { animation: cv-journey-copy .75s calc(180ms + var(--journey-step) * 100ms) cubic-bezier(.2,.7,.2,1) both; } @keyframes cv-journey-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes cv-journey-travel { from { inset-inline-start: 0; } to { inset-inline-start: calc(100% - 15px); } } @keyframes cv-journey-image { from { transform: scale(1.2); } to { transform: scale(1); } } @keyframes cv-journey-copy { from { opacity: .4; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 768px) and (max-width: 1023px) { .cv-journey__head { grid-template-columns: minmax(0,1fr) minmax(190px,.8fr); } .cv-journey__stages { grid-template-columns: repeat(2,minmax(0,1fr)); } .cv-journey__stage { block-size: 380px; } .cv-journey__stage:nth-child(5) { grid-column: span 2; block-size: 320px; } .cv-journey__route { display: none; } .cv-journey__node { display: none; } .cv-journey__stage-top { inset-inline: 22px; } .cv-journey__copy { inset-inline: 22px; max-inline-size: 42ch; } .cv-journey__copy h3 { font-size: clamp(26px,3.5vw,34px); } .cv-journey__copy > span { font-size: 14px; } } @media (max-width: 767px) { .cv-journey__head { grid-template-columns: minmax(0,1fr); align-items: start; gap: 8px; padding: 19px 16px 22px; } .cv-journey__lead { justify-self: start; max-inline-size: 58ch; } .cv-journey__stages { grid-template-columns: minmax(0,1fr); } .cv-journey__stage { block-size: clamp(290px, 74vw, 380px); border-block-end: 1px solid rgba(255,255,255,.28); } .cv-journey__stage-top { inset-inline-start: 58px; inset-inline-end: 16px; inset-block-start: 18px; } .cv-journey__copy { inset-inline-start: 58px; inset-inline-end: 18px; inset-block-end: 22px; max-inline-size: 50ch; } .cv-journey__copy h3 { font-size: clamp(25px,7vw,32px); } .cv-journey__copy > span { max-inline-size: 48ch; font-size: 14px; } .cv-journey__route { inset-inline-start: 33px; inset-inline-end: auto; inset-block: 0; inline-size: 4px; block-size: auto; } .cv-journey__route-line { transform: scaleY(1); transform-origin: center top; background: linear-gradient(180deg, var(--cv-accent), #B2FFF4 50%, var(--cv-accent)); } .cv-journey.is-in .cv-journey__route-line { animation-name: cv-journey-line-vertical; } .cv-journey__pulse { inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); } .cv-journey.is-in .cv-journey__pulse { animation-name: cv-journey-travel-vertical; } .cv-journey__node { inset-block-start: 30px; inset-inline-start: 34px; transform: translate(-50%, -50%); } @keyframes cv-journey-line-vertical { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes cv-journey-travel-vertical { from { inset-block-start: 0; } to { inset-block-start: calc(100% - 15px); } } } @media (max-width: 380px) { .cv-journey__head h2 { font-size: 29px; } .cv-journey__stage { block-size: 300px; } .cv-journey__copy { inset-inline-start: 54px; inset-inline-end: 14px; } .cv-journey__stage-top { inset-inline-start: 54px; inset-inline-end: 12px; } .cv-journey__number { inline-size: 38px; block-size: 38px; font-size: 13px; } .cv-journey__label { font-size: 9px; } .cv-journey__route { inset-inline-start: 29px; } .cv-journey__node { inset-inline-start: 30px; } } @media (prefers-reduced-motion: reduce) { .cv-journey__route-line, .cv-journey__pulse, .cv-journey__image, .cv-journey__copy { animation: none !important; transition: none !important; } .cv-journey__image { transform: none; } .cv-journey__copy { opacity: 1; transform: none; } } /* ========================================================= CONVOKE — FIND CONVOKE / LOCATION Base + responsive styles ========================================================= */ .cv-location, .cv-location * { box-sizing: border-box; } .cv-location { width: 100%; position: relative; overflow: hidden; background: var(--cv-bg); color: var(--cv-text); padding: clamp(72px, 8vw, 128px) 0; } /* ========================================================= CONTAINER ========================================================= */ .cv-location__container { width: min( 1400px, calc(100% - 64px) ); margin-inline: auto; display: grid; grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr); gap: clamp(48px, 6vw, 100px); align-items: center; } /* ========================================================= LEFT CONTENT ========================================================= */ .cv-location__content { min-width: 0; opacity: 0; transform: translateY(34px); transition: opacity 700ms ease, transform 800ms cubic-bezier(.2, .75, .25, 1); } .cv-location.is-visible .cv-location__content { opacity: 1; transform: translateY(0); } /* ========================================================= EYEBROW ========================================================= */ .cv-location__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--cv-accent); font-family: var(--cv-body-font); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.4; } .cv-location__eyebrow-number { flex: 0 0 auto; } .cv-location__eyebrow-line { width: 42px; height: 1px; background: var(--cv-accent); opacity: 0.7; } /* ========================================================= TITLE ========================================================= */ .cv-location__title { max-width: 700px; margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp( 42px, 5vw, 72px ); font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; } .cv-location__title span { display: block; color: var(--cv-accent); } /* ========================================================= DESCRIPTION ========================================================= */ .cv-location__description { max-width: 560px; margin: clamp(22px, 3vw, 30px) 0 0; color: var(--cv-text-muted); font-family: var(--cv-body-font); font-size: clamp( 15px, 1.2vw, 17px ); font-weight: 400; line-height: 1.75; } /* ========================================================= LOCATION DETAILS ========================================================= */ .cv-location__details { display: grid; grid-template-columns: minmax(130px, 0.65fr) minmax(200px, 1fr); gap: 24px; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--cv-border); } .cv-location__detail { min-width: 0; } .cv-location__detail-label { display: block; margin-bottom: 9px; color: var(--cv-text-muted); font-family: var(--cv-body-font); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; } .cv-location__detail strong { display: block; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 18px; font-weight: 500; line-height: 1.4; } .cv-location__detail address { margin: 0; color: var(--cv-text); font-family: var(--cv-body-font); font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.75; } /* ========================================================= GOOGLE MAP CTA ========================================================= */ .cv-location__map-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; margin-top: 34px; padding: 12px 18px; color: var(--cv-on-accent); background: var(--cv-accent); border: 1px solid var(--cv-accent); text-decoration: none; font-family: var(--cv-body-font); font-size: 14px; font-weight: 700; line-height: 1.3; transition: background-color var(--cv-transition), border-color var(--cv-transition), transform var(--cv-transition), color var(--cv-transition); } .cv-location__map-link:hover { background: var(--cv-accent-hover); border-color: var(--cv-accent-hover); transform: translateY(-2px); } .cv-location__map-link:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 4px; } .cv-location__map-link i { font-size: 12px; transition: transform 250ms ease; } .cv-location__map-link:hover i { transform: translate(2px, -2px); } /* ========================================================= MAP VISUAL ========================================================= */ .cv-location__visual { min-width: 0; opacity: 0; transform: translateX(44px); transition: opacity 800ms ease 120ms, transform 900ms cubic-bezier(.2, .75, .25, 1); } .cv-location.is-visible .cv-location__visual { opacity: 1; transform: translateX(0); } /* ========================================================= MAP SHELL ========================================================= */ .cv-location__map-shell { position: relative; width: 100%; background: var(--cv-surface); border: 1px solid var(--cv-border); overflow: hidden; clip-path: polygon( 0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px) ); } /* ========================================================= MAP HEADER ========================================================= */ .cv-location__map-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--cv-border); background: var(--cv-surface-raised); } .cv-location__map-status { display: inline-flex; align-items: center; gap: 9px; color: var(--cv-text); font-family: var(--cv-body-font); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; } .cv-location__status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--cv-accent); box-shadow: 0 0 0 5px var(--cv-accent-soft); animation: cv-location-status-pulse 2.2s ease-in-out infinite; } @keyframes cv-location-status-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--cv-accent-soft); } 50% { box-shadow: 0 0 0 8px var(--cv-accent-soft); } } .cv-location__map-country { color: var(--cv-text-muted); font-family: var(--cv-body-font); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-align: right; } /* ========================================================= MAP ========================================================= */ .cv-location__map { position: relative; width: 100%; height: clamp( 430px, 43vw, 600px ); overflow: hidden; background: var(--cv-accent-soft); } .cv-location__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; filter: grayscale(0.12) contrast(0.96); } /* ========================================================= CUSTOM MAP MARKER ========================================================= */ .cv-location__marker { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); pointer-events: none; } .cv-location__marker-pulse { position: absolute; width: 72px; height: 72px; border-radius: 50%; background: var(--cv-accent); opacity: 0.22; animation: cv-location-marker-pulse 2.4s ease-out infinite; } @keyframes cv-location-marker-pulse { 0% { transform: scale(0.45); opacity: 0.5; } 70% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1.2); opacity: 0; } } .cv-location__marker-core { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--cv-on-accent); background: var(--cv-accent); border: 4px solid var(--cv-surface); border-radius: 50%; box-shadow: 0 8px 24px rgba(10, 13, 13, 0.22); animation: cv-location-marker-float 2.8s ease-in-out infinite; } @keyframes cv-location-marker-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .cv-location__marker-core i { font-size: 15px; } /* ========================================================= MAP LABEL ========================================================= */ .cv-location__map-label { position: absolute; left: 24px; bottom: 24px; min-width: 155px; padding: 14px 16px; color: var(--cv-on-accent); background: var(--cv-accent); clip-path: polygon( 0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100% ); pointer-events: none; transform: translateY(12px); opacity: 0; transition: opacity 700ms ease 650ms, transform 700ms ease 650ms; } .cv-location.is-visible .cv-location__map-label { opacity: 1; transform: translateY(0); } .cv-location__map-label-small { display: block; margin-bottom: 4px; font-family: var(--cv-body-font); font-size: 9px; font-weight: 700; letter-spacing: 0.13em; line-height: 1.4; opacity: 0.78; } .cv-location__map-label strong { display: block; font-family: var(--cv-heading-font); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; } /* ========================================================= MAP FOOTER ========================================================= */ .cv-location__map-footer { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; color: var(--cv-text-muted); background: var(--cv-surface-raised); font-family: var(--cv-body-font); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; } .cv-location__map-footer-line { width: 70px; height: 1px; background: var(--cv-border); } /* ========================================================= LAPTOP 1024px — 1439px ========================================================= */ @media (min-width: 1024px) and (max-width: 1439px) { .cv-location__container { width: min( 1200px, calc(100% - 56px) ); gap: clamp(44px, 5vw, 70px); } .cv-location__title { font-size: clamp( 42px, 4.6vw, 62px ); } .cv-location__map { height: clamp( 400px, 42vw, 520px ); } } /* ========================================================= LAPTOP-L 1440px — 1599px ========================================================= */ @media (min-width: 1440px) and (max-width: 1599px) { .cv-location__container { width: min( 1380px, calc(100% - 72px) ); } } /* ========================================================= DESKTOP 1600px+ ========================================================= */ @media (min-width: 1600px) { .cv-location__container { width: min( 1400px, calc(100% - 80px) ); } } /* ========================================================= TABLET 768px — 1023px ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .cv-location { padding: 82px 0; } .cv-location__container { width: calc(100% - 48px); grid-template-columns: 1fr; gap: 52px; } .cv-location__title { max-width: 720px; font-size: clamp( 42px, 6vw, 58px ); } .cv-location__description { max-width: 700px; } .cv-location__visual { transform: translateY(34px); } .cv-location.is-visible .cv-location__visual { transform: translateY(0); } .cv-location__map { height: 500px; } } /* ========================================================= MOBILE-L 600px — 767px ========================================================= */ @media (min-width: 600px) and (max-width: 767px) { .cv-location { padding: 68px 0; } .cv-location__container { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 42px; } .cv-location__title { font-size: 42px; line-height: 1.08; } .cv-location__description { font-size: 15px; line-height: 1.7; } .cv-location__details { grid-template-columns: 0.8fr 1.2fr; } .cv-location__visual { transform: translateY(30px); } .cv-location.is-visible .cv-location__visual { transform: translateY(0); } .cv-location__map { height: 430px; } .cv-location__map-label { left: 18px; bottom: 18px; } } /* ========================================================= MOBILE-M 480px — 599px ========================================================= */ @media (min-width: 480px) and (max-width: 599px) { .cv-location { padding: 60px 0; } .cv-location__container { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 36px; } .cv-location__eyebrow { margin-bottom: 20px; font-size: 11px; } .cv-location__title { font-size: 36px; line-height: 1.1; letter-spacing: -0.035em; } .cv-location__description { margin-top: 20px; font-size: 14px; line-height: 1.72; } .cv-location__details { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; } .cv-location__detail strong { font-size: 17px; } .cv-location__detail address { font-size: 13px; } .cv-location__map-link { width: 100%; margin-top: 28px; } .cv-location__map-header { min-height: 54px; padding: 0 15px; } .cv-location__map-country { font-size: 8px; } .cv-location__map { height: 370px; } .cv-location__map-label { left: 14px; bottom: 14px; min-width: 135px; padding: 11px 13px; } .cv-location__map-label strong { font-size: 15px; } .cv-location__map-footer { min-height: 46px; gap: 9px; font-size: 8px; } .cv-location__map-footer-line { width: 42px; } } /* ========================================================= MOBILE-S BELOW 480px ========================================================= */ @media (max-width: 479px) { .cv-location { padding: 52px 0; } .cv-location__container { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 32px; } .cv-location__eyebrow { gap: 9px; margin-bottom: 18px; font-size: 10px; letter-spacing: 0.12em; } .cv-location__eyebrow-line { width: 28px; } .cv-location__title { font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; } .cv-location__description { margin-top: 18px; font-size: 14px; line-height: 1.7; } .cv-location__details { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; padding-top: 20px; } .cv-location__detail-label { margin-bottom: 6px; font-size: 9px; } .cv-location__detail strong { font-size: 16px; } .cv-location__detail address { font-size: 13px; line-height: 1.65; } .cv-location__map-link { width: 100%; min-height: 46px; margin-top: 24px; padding: 11px 14px; font-size: 13px; } .cv-location__map-shell { clip-path: polygon( 0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px) ); } .cv-location__map-header { min-height: 50px; padding: 0 12px; gap: 8px; } .cv-location__map-status { gap: 7px; font-size: 9px; letter-spacing: 0.08em; } .cv-location__status-dot { width: 6px; height: 6px; flex-basis: 6px; } .cv-location__map-country { font-size: 7px; letter-spacing: 0.08em; } .cv-location__map { height: 315px; } .cv-location__marker { width: 58px; height: 58px; } .cv-location__marker-pulse { width: 58px; height: 58px; } .cv-location__marker-core { width: 36px; height: 36px; } .cv-location__marker-core i { font-size: 13px; } .cv-location__map-label { left: 10px; bottom: 10px; min-width: 120px; padding: 9px 11px; } .cv-location__map-label-small { font-size: 7px; } .cv-location__map-label strong { font-size: 14px; } .cv-location__map-footer { min-height: 42px; padding: 0 10px; gap: 7px; font-size: 7px; letter-spacing: 0.08em; } .cv-location__map-footer-line { width: 28px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cv-location__content, .cv-location__visual, .cv-location__map-label { opacity: 1; transform: none; transition: none; } .cv-location__status-dot, .cv-location__marker-pulse, .cv-location__marker-core { animation: none; } .cv-location__map-link, .cv-location__map-link i { transition: none; } } /* ========================================================= EVENT FORMAT MIXER — scoped homepage section ========================================================= */ .cv-mixer, .cv-mixer *, .cv-mixer *::before, .cv-mixer *::after { box-sizing: border-box; } .cv-mixer { --mx-bg: #f1f6f4; --mx-panel: #ffffff; --mx-ink: #19312f; --mx-muted: #586d69; --mx-line: #d7e3df; --mx-accent: var(--cv-accent, #138f86); --mx-soft: #e5f3ef; padding: clamp(56px, 7vw, 100px) clamp(18px, 5vw, 76px); color: var(--mx-ink); background: var(--mx-bg); overflow: hidden; } .cv-mixer__inner { width: min(100%, 1320px); margin-inline: auto; } .cv-mixer__header { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(260px,.7fr); gap: clamp(24px,5vw,72px); align-items: end; margin-block-end: clamp(28px,4vw,52px); } .cv-mixer__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; color: var(--mx-accent); font-family: var(--cv-body-font); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: .14em; } .cv-mixer__eyebrow span { inline-size: 24px; block-size: 2px; background: currentColor; } .cv-mixer__header h2 { margin: 0; color: var(--mx-ink); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; } .cv-mixer__header h2 em { color: var(--mx-accent); font-style: normal; } .cv-mixer__header > p { max-inline-size: 43ch; margin: 0 0 5px; color: var(--mx-muted); font-family: var(--cv-body-font); font-size: var(--cv-hero-body); font-weight: 400; line-height: 1.65; } .cv-mixer__layout { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.55fr); align-items: stretch; gap: 18px; } .cv-mixer__controls, .cv-mixer__results { min-inline-size: 0; border: 1px solid var(--mx-line); border-radius: 18px; background: var(--mx-panel); } .cv-mixer__controls { display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(20px,2.5vw,34px); } .cv-mixer__fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; } .cv-mixer__fieldset + .cv-mixer__fieldset { margin-block-start: 30px; padding-block-start: 25px; border-block-start: 1px solid var(--mx-line); } .cv-mixer__fieldset legend { display: flex; align-items: center; gap: 11px; margin-block-end: 16px; color: var(--mx-ink); font-family: var(--cv-heading-font); font-size: 18px; font-weight: 600; line-height: 1.25; } .cv-mixer__fieldset legend span { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; color: var(--mx-accent); background: var(--mx-soft); font: 700 11px/1 var(--cv-body-font, sans-serif); } .cv-mixer__goals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .cv-mixer__goal, .cv-mixer__scale { min-block-size: 46px; display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid var(--mx-line); border-radius: 10px; color: var(--mx-ink); background: transparent; font: 600 14px/1.3 var(--cv-body-font); text-align: start; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .cv-mixer__goal span { color: var(--mx-accent); font-size: 17px; line-height: 1; } .cv-mixer__goal:hover, .cv-mixer__scale:hover { border-color: var(--mx-accent); transform: translateY(-2px); } .cv-mixer__goal.is-selected, .cv-mixer__scale.is-selected { border-color: var(--mx-accent); color: var(--mx-ink); background: var(--mx-soft); box-shadow: inset 0 0 0 1px var(--mx-accent); } .cv-mixer__goal:focus-visible, .cv-mixer__scale:focus-visible { outline: 3px solid var(--mx-accent); outline-offset: 3px; } .cv-mixer__scales { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; } .cv-mixer__scale { min-block-size: 42px; justify-content: center; padding-inline: 7px; font-size: 13px; text-align: center; } .cv-mixer__note { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; margin-block-start: 30px; padding: 15px; border-radius: 12px; color: var(--mx-muted); background: var(--mx-soft); } .cv-mixer__note > span { color: var(--mx-accent); font-size: 21px; line-height: 1.1; } .cv-mixer__note p { margin: 0; font-family: var(--cv-body-font); font-size: 14.5px; font-weight: 400; line-height: 1.6; } .cv-mixer__coverage { margin-block-start: 20px; padding-block-start: 17px; border-block-start: 1px solid var(--mx-line); } .cv-mixer__coverage > p { margin: 0 0 10px; color: var(--mx-accent); font-family: var(--cv-body-font); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; } .cv-mixer__coverage ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .cv-mixer__coverage li { display: flex; align-items: flex-start; gap: 9px; color: var(--mx-muted); font-family: var(--cv-body-font); font-size: 14.5px; font-weight: 400; line-height: 1.55; } .cv-mixer__coverage li span { color: var(--mx-accent); font-size: 14px; font-weight: 600; } .cv-mixer__results { padding: clamp(18px,2.2vw,30px); overflow: hidden; } .cv-mixer__results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cv-mixer__results-head p { margin: 0 0 7px; color: var(--mx-accent); font-family: var(--cv-body-font); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: .12em; } .cv-mixer__results-head h3 { margin: 0; color: var(--mx-ink); font-family: var(--cv-heading-font); font-size: 18px; font-weight: 600; line-height: 1.25; text-wrap: balance; } .cv-mixer__result-count { display: flex; flex: none; align-items: center; gap: 7px; color: var(--mx-muted); font-family: var(--cv-body-font); font-size: 11px; font-weight: 600; letter-spacing: .08em; } .cv-mixer__result-count b { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; color: var(--mx-accent); background: var(--mx-soft); font-size: 13px; letter-spacing: 0; } .cv-mixer__scale-caption { margin: 11px 0 18px; color: var(--mx-muted); font-family: var(--cv-body-font); font-size: 14px; font-weight: 400; line-height: 1.6; } .cv-mixer__cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } .cv-mixer__card { min-inline-size: 0; overflow: hidden; border: 1px solid var(--mx-line); border-radius: 13px; background: var(--mx-panel); box-shadow: 0 5px 18px rgba(19,53,48,.05); } .cv-mixer__card:nth-child(2) { --mixer-card-order: 1; } .cv-mixer__card:nth-child(3) { --mixer-card-order: 2; } .cv-mixer__card img { display: block; inline-size: 100%; block-size: clamp(115px,12vw,170px); object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .cv-mixer__card:hover img { transform: scale(1.045); } .cv-mixer__card-copy { padding: 14px 14px 16px; } .cv-mixer__card-kicker { display: block; margin-block-end: 7px; color: var(--mx-accent); font-family: var(--cv-body-font); font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 1.4; } .cv-mixer__card h4 { margin: 0 0 7px; color: var(--mx-ink); font-family: var(--cv-heading-font); font-size: 18px; font-weight: 600; line-height: 1.25; } .cv-mixer__card p { margin: 0 0 12px; color: var(--mx-muted); font-family: var(--cv-body-font); font-size: 14.5px; font-weight: 400; line-height: 1.55; } .cv-mixer__card-fit { display: block; padding-block-start: 10px; border-block-start: 1px solid var(--mx-line); color: var(--mx-muted); font-family: var(--cv-body-font); font-size: 12px; font-weight: 500; line-height: 1.45; } .cv-mixer__result-foot { display: flex; align-items: center; gap: 9px; margin-block-start: 17px; padding-block-start: 14px; border-block-start: 1px solid var(--mx-line); color: var(--mx-muted); font-family: var(--cv-body-font); font-size: 13px; font-weight: 400; line-height: 1.5; } .cv-mixer__next-step { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block-start: 16px; padding: 18px 20px; border: 1px solid var(--mx-line); border-radius: 12px; color: var(--mx-ink); background: var(--mx-soft); } .cv-mixer__next-step > div { min-inline-size: 0; } .cv-mixer__next-step p { margin: 0 0 5px; color: var(--mx-accent); font-family: var(--cv-body-font); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .08em; } .cv-mixer__next-step h4 { margin: 0 0 5px; color: var(--mx-ink); font-family: var(--cv-heading-font); font-size: 18px; font-weight: 600; line-height: 1.25; } .cv-mixer__next-step > div > span { display: block; color: var(--mx-muted); font-family: var(--cv-body-font); font-size: 14.5px; font-weight: 400; line-height: 1.55; } .cv-mixer__next-step > a { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 9px; min-block-size: 44px; padding: 10px 16px; border: 1px solid var(--mx-accent); border-radius: var(--cv-radius-md); color: var(--cv-on-accent); background: var(--mx-accent); font-family: var(--cv-body-font); font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; transition: background-color var(--cv-transition), transform var(--cv-transition); } .cv-mixer__next-step > a:hover { background: var(--cv-accent-hover); transform: translateY(-1px); } .cv-mixer__next-step > a:focus-visible { outline: 3px solid var(--mx-accent); outline-offset: 3px; } .cv-mixer__live-dot { inline-size: 8px; block-size: 8px; flex: none; border-radius: 50%; background: var(--mx-accent); box-shadow: 0 0 0 4px var(--mx-soft); animation: cv-mixer-dot 2s ease-in-out infinite; } .cv-mixer__result-arrow { margin-inline-start: auto; color: var(--mx-accent); font-size: 17px; } .cv-mixer.is-refreshing .cv-mixer__card { animation: cv-mixer-card-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--mixer-card-order, 0) * 75ms); } @keyframes cv-mixer-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes cv-mixer-dot { 50% { box-shadow: 0 0 0 7px transparent; } } @media (min-width: 1440px) { .cv-mixer__layout { grid-template-columns: minmax(340px,.72fr) minmax(0,1.55fr); gap: 22px; } .cv-mixer__cards { gap: 16px; } } @media (max-width: 1023px) { .cv-mixer__layout { grid-template-columns: minmax(0,1fr); } .cv-mixer__controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 28px; row-gap: 18px; } .cv-mixer__fieldset--scale { margin: 0 !important; padding: 0 !important; border: 0 !important; } .cv-mixer__note { grid-column: 1 / -1; margin-block-start: 0; } .cv-mixer__coverage { grid-column: 1 / -1; margin-block-start: 0; } .cv-mixer__card img { block-size: clamp(150px,24vw,240px); } } @media (max-width: 767px) { .cv-mixer { padding-inline: 16px; } .cv-mixer__header { grid-template-columns: minmax(0,1fr); gap: 13px; margin-block-end: 23px; } .cv-mixer__header > p { max-inline-size: 60ch; } .cv-mixer__controls { grid-template-columns: minmax(0,1fr); padding: 18px; } .cv-mixer__fieldset--scale { margin-block-start: 20px !important; padding-block-start: 20px !important; border-block-start: 1px solid var(--mx-line) !important; } .cv-mixer__note { grid-column: auto; } .cv-mixer__cards { grid-template-columns: minmax(0,1fr); gap: 10px; } .cv-mixer__card { display: grid; grid-template-columns: minmax(105px,.72fr) minmax(0,1.5fr); } .cv-mixer__card img { block-size: 100%; min-block-size: 172px; } .cv-mixer__card-copy { padding: 13px; } .cv-mixer__card p { min-block-size: 0; } .cv-mixer__results { padding: 16px; } .cv-mixer__next-step { align-items: flex-start; flex-direction: column; gap: 14px; padding: 16px; } .cv-mixer__next-step > a { align-self: flex-start; } } @media (max-width: 380px) { .cv-mixer { padding-inline: 12px; } .cv-mixer__goals { gap: 7px; } .cv-mixer__goal { min-block-size: 42px; padding: 8px 9px; font-size: 12px; } .cv-mixer__scales { grid-template-columns: 1fr; } .cv-mixer__scale { min-block-size: 38px; } .cv-mixer__card { grid-template-columns: 92px minmax(0,1fr); } .cv-mixer__card img { min-block-size: 190px; } .cv-mixer__card-copy { padding: 11px; } .cv-mixer__card h4, .cv-mixer__next-step h4 { font-size: 16px; } .cv-mixer__next-step > a { inline-size: 100%; } } @media (prefers-reduced-motion: reduce) { .cv-mixer *, .cv-mixer *::before, .cv-mixer *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= CONVOKE — FINAL CTA SECTION: 05 / READY WHEN YOU ARE ========================================================= */ .cv-final-cta { --cv-cta-height: clamp(620px, 78vh, 860px); position: relative; width: 100%; min-height: var(--cv-cta-height); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--cv-accent); color: var(--cv-on-accent); isolation: isolate; padding: clamp(90px, 9vw, 150px) clamp(20px, 4vw, 64px); } /* --------------------------------------------------------- Inner content --------------------------------------------------------- */ .cv-final-cta__inner { position: relative; z-index: 3; width: min(100%, 1100px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin: 0 auto; } /* --------------------------------------------------------- Decorative horizontal lines --------------------------------------------------------- */ .cv-final-cta__line { position: absolute; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.20); pointer-events: none; transform: scaleX(0); transform-origin: center; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .cv-final-cta__line--top { top: 18%; } .cv-final-cta__line--bottom { bottom: 18%; } .cv-final-cta.is-visible .cv-final-cta__line { transform: scaleX(1); } /* --------------------------------------------------------- Eyebrow --------------------------------------------------------- */ .cv-final-cta__eyebrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: clamp(24px, 3vw, 38px); color: rgba(255, 255, 255, 0.88); font-family: var(--cv-body-font, "Manrope", sans-serif); font-size: clamp(11px, 0.75vw, 13px); font-weight: 600; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease 0.05s, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.05s; } .cv-final-cta__eyebrow-line { width: clamp(28px, 4vw, 58px); height: 1px; flex: 0 0 auto; background: rgba(255, 255, 255, 0.55); } /* --------------------------------------------------------- Heading --------------------------------------------------------- */ .cv-final-cta__title { width: 100%; max-width: 1050px; margin: 0; color: #FFFFFF; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(42px, 6vw, 88px); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; } .cv-final-cta__title-line { display: block; opacity: 0; transform: translateY(42px); transition: opacity 0.8s ease 0.18s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s; } .cv-final-cta__title-line--accent { color: #FFFFFF; transition-delay: 0.27s; } /* --------------------------------------------------------- Description --------------------------------------------------------- */ .cv-final-cta__description { width: min(100%, 650px); margin: clamp(26px, 3vw, 34px) auto 0; color: rgba(255, 255, 255, 0.84); font-family: var(--cv-body-font, "Manrope", sans-serif); font-size: clamp(15px, 1.15vw, 18px); font-weight: 400; line-height: 1.75; text-wrap: balance; opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease 0.38s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.38s; } /* --------------------------------------------------------- CTA actions --------------------------------------------------------- */ .cv-final-cta__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 4vw, 46px); opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease 0.52s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.52s; } /* --------------------------------------------------------- CTA buttons Same visual language as CONVOKE navbar Login --------------------------------------------------------- */ .cv-final-cta__button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 20px; border: 1px solid transparent; border-radius: 8px; font-family: var(--cv-body-font, "Manrope", sans-serif); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.045em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } /* Main button — same teal/white treatment as navbar Login */ .cv-final-cta__button--primary { background: #FFFFFF; color: var(--cv-accent); border-color: #FFFFFF; } .cv-final-cta__button--primary:hover, .cv-final-cta__button--primary:focus-visible { background: rgba(255, 255, 255, 0.90); color: var(--cv-accent-pressed); border-color: rgba(255, 255, 255, 0.90); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); } /* Secondary button */ .cv-final-cta__button--secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.65); } .cv-final-cta__button--secondary:hover, .cv-final-cta__button--secondary:focus-visible { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; border-color: #FFFFFF; transform: translateY(-2px); } .cv-final-cta__button-arrow { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: transform 0.25s ease; } .cv-final-cta__button:hover .cv-final-cta__button-arrow, .cv-final-cta__button:focus-visible .cv-final-cta__button-arrow { transform: translate(2px, -2px); } /* --------------------------------------------------------- Metadata --------------------------------------------------------- */ .cv-final-cta__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(44px, 6vw, 68px); color: rgba(255, 255, 255, 0.68); font-family: var(--cv-body-font, "Manrope", sans-serif); font-size: clamp(10px, 0.68vw, 12px); font-weight: 600; line-height: 1.5; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease 0.68s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.68s; } .cv-final-cta__meta-dot { width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, 0.65); } /* --------------------------------------------------------- Reveal states --------------------------------------------------------- */ .cv-final-cta.is-visible .cv-final-cta__eyebrow, .cv-final-cta.is-visible .cv-final-cta__title-line, .cv-final-cta.is-visible .cv-final-cta__description, .cv-final-cta.is-visible .cv-final-cta__actions, .cv-final-cta.is-visible .cv-final-cta__meta { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------- Corner architectural markers --------------------------------------------------------- */ .cv-final-cta__corner { position: absolute; width: 44px; height: 44px; z-index: 2; pointer-events: none; opacity: 0.55; } .cv-final-cta__corner--tl { top: 30px; left: 30px; border-top: 1px solid rgba(255, 255, 255, 0.55); border-left: 1px solid rgba(255, 255, 255, 0.55); } .cv-final-cta__corner--tr { top: 30px; right: 30px; border-top: 1px solid rgba(255, 255, 255, 0.55); border-right: 1px solid rgba(255, 255, 255, 0.55); } .cv-final-cta__corner--bl { bottom: 30px; left: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.55); border-left: 1px solid rgba(255, 255, 255, 0.55); } .cv-final-cta__corner--br { right: 30px; bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.55); border-right: 1px solid rgba(255, 255, 255, 0.55); } /* ========================================================= LAPTOP 1024px — 1439px ========================================================= */ @media (min-width: 1024px) and (max-width: 1439px) { .cv-final-cta { min-height: 650px; padding: 100px 48px; } .cv-final-cta__title { max-width: 900px; font-size: clamp(58px, 6.2vw, 78px); } .cv-final-cta__description { max-width: 610px; } } /* ========================================================= LAPTOP-L 1440px — 1599px ========================================================= */ @media (min-width: 1440px) and (max-width: 1599px) { .cv-final-cta { min-height: 720px; padding: 120px 64px; } .cv-final-cta__title { max-width: 1000px; font-size: 82px; } } /* ========================================================= DESKTOP 1600px+ ========================================================= */ @media (min-width: 1600px) { .cv-final-cta { min-height: 760px; } .cv-final-cta__title { max-width: 1100px; font-size: 88px; } .cv-final-cta__description { max-width: 680px; } } /* ========================================================= TABLET 768px — 1023px ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .cv-final-cta { min-height: 650px; padding: 100px clamp(28px, 5vw, 50px); } .cv-final-cta__title { max-width: 760px; font-size: clamp(50px, 7.2vw, 70px); line-height: 1.02; } .cv-final-cta__description { max-width: 570px; font-size: 16px; } .cv-final-cta__line--top { top: 14%; } .cv-final-cta__line--bottom { bottom: 14%; } .cv-final-cta__corner { width: 34px; height: 34px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--tr { top: 22px; } .cv-final-cta__corner--bl, .cv-final-cta__corner--br { bottom: 22px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--bl { left: 22px; } .cv-final-cta__corner--tr, .cv-final-cta__corner--br { right: 22px; } } /* ========================================================= MOBILE-L 600px — 767px ========================================================= */ @media (min-width: 600px) and (max-width: 767px) { .cv-final-cta { min-height: 620px; padding: 88px 24px; } .cv-final-cta__eyebrow { gap: 12px; margin-bottom: 26px; font-size: 10px; letter-spacing: 0.13em; } .cv-final-cta__eyebrow-line { width: 24px; } .cv-final-cta__title { max-width: 650px; font-size: clamp(42px, 9vw, 58px); line-height: 1.02; letter-spacing: -0.035em; } .cv-final-cta__description { max-width: 510px; margin-top: 24px; font-size: 15px; line-height: 1.7; } .cv-final-cta__actions { width: 100%; max-width: 430px; flex-direction: column; margin-top: 30px; } .cv-final-cta__button { width: 100%; min-height: 48px; } .cv-final-cta__meta { max-width: 430px; margin-top: 38px; gap: 9px; font-size: 9px; letter-spacing: 0.10em; } .cv-final-cta__line--top { top: 12%; } .cv-final-cta__line--bottom { bottom: 12%; } .cv-final-cta__corner { width: 28px; height: 28px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--tr { top: 18px; } .cv-final-cta__corner--bl, .cv-final-cta__corner--br { bottom: 18px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--bl { left: 18px; } .cv-final-cta__corner--tr, .cv-final-cta__corner--br { right: 18px; } } /* ========================================================= MOBILE-M 480px — 599px ========================================================= */ @media (min-width: 480px) and (max-width: 599px) { .cv-final-cta { min-height: 620px; padding: 82px 20px; } .cv-final-cta__eyebrow { gap: 9px; margin-bottom: 24px; font-size: 9px; letter-spacing: 0.105em; } .cv-final-cta__eyebrow-line { width: 18px; } .cv-final-cta__title { max-width: 500px; font-size: clamp(36px, 10vw, 48px); line-height: 1.04; letter-spacing: -0.03em; } .cv-final-cta__description { max-width: 430px; margin-top: 22px; font-size: 14px; line-height: 1.7; } .cv-final-cta__actions { width: 100%; flex-direction: column; gap: 11px; margin-top: 28px; } .cv-final-cta__button { width: min(100%, 380px); min-height: 47px; padding: 12px 17px; font-size: 11px; } .cv-final-cta__meta { max-width: 380px; margin-top: 34px; gap: 8px; font-size: 8px; letter-spacing: 0.08em; } .cv-final-cta__meta-dot { width: 3px; height: 3px; } .cv-final-cta__line--top { top: 11%; } .cv-final-cta__line--bottom { bottom: 11%; } .cv-final-cta__corner { width: 24px; height: 24px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--tr { top: 14px; } .cv-final-cta__corner--bl, .cv-final-cta__corner--br { bottom: 14px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--bl { left: 14px; } .cv-final-cta__corner--tr, .cv-final-cta__corner--br { right: 14px; } } /* ========================================================= MOBILE-S Below 480px ========================================================= */ @media (max-width: 479px) { .cv-final-cta { min-height: 600px; padding: 76px 16px; } .cv-final-cta__eyebrow { width: 100%; gap: 7px; margin-bottom: 22px; font-size: 8px; letter-spacing: 0.085em; white-space: nowrap; } .cv-final-cta__eyebrow-line { width: 14px; } .cv-final-cta__title { max-width: 360px; font-size: clamp(32px, 10.5vw, 42px); line-height: 1.05; letter-spacing: -0.025em; } .cv-final-cta__description { width: 100%; max-width: 340px; margin-top: 20px; font-size: 13px; line-height: 1.7; } .cv-final-cta__actions { width: 100%; flex-direction: column; gap: 10px; margin-top: 26px; } .cv-final-cta__button { width: 100%; max-width: 340px; min-height: 46px; padding: 11px 14px; font-size: 10px; letter-spacing: 0.035em; } .cv-final-cta__button-arrow { font-size: 14px; } .cv-final-cta__meta { width: 100%; max-width: 330px; margin-top: 30px; gap: 7px; font-size: 7.5px; line-height: 1.7; letter-spacing: 0.065em; text-align: center; } .cv-final-cta__meta-dot { width: 3px; height: 3px; } .cv-final-cta__line--top { top: 9%; } .cv-final-cta__line--bottom { bottom: 9%; } .cv-final-cta__corner { width: 20px; height: 20px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--tr { top: 11px; } .cv-final-cta__corner--bl, .cv-final-cta__corner--br { bottom: 11px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--bl { left: 11px; } .cv-final-cta__corner--tr, .cv-final-cta__corner--br { right: 11px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cv-final-cta__line, .cv-final-cta__eyebrow, .cv-final-cta__title-line, .cv-final-cta__description, .cv-final-cta__actions, .cv-final-cta__meta { transition: none; transform: none; } .cv-final-cta__line, .cv-final-cta__eyebrow, .cv-final-cta__title-line, .cv-final-cta__description, .cv-final-cta__actions, .cv-final-cta__meta { opacity: 1; } .cv-final-cta__button { transition: none; } } /* ========================================================= FINAL CTA — use the shared CONVOKE type and button scale ========================================================= */ .cv-final-cta { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-final-cta__eyebrow { font-family: var(--cv-body-font); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: .14em; } .cv-final-cta__title { font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; } .cv-final-cta__description { font-family: var(--cv-body-font); font-size: var(--cv-hero-body); font-weight: 400; line-height: 1.65; } .cv-final-cta__button { min-height: 48px; padding: 12px 20px; border-radius: var(--cv-radius-sm); font-family: var(--cv-body-font); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: .01em; } .cv-final-cta__meta { font-family: var(--cv-body-font); font-size: clamp(12px, 1vw, 13px); font-weight: 500; line-height: 1.5; letter-spacing: .08em; } /* Contact page: contain animated/positioned content and keep the CTA content-led. */ body:has(.cv-contact-hero) { overflow-x: clip; } .cv-final-cta { min-height: 0; padding-block: clamp(54px, 7vh, 84px); } /* Keep the CTA controls and corner details inside narrow mobile viewports. */ .cv-final-cta, .cv-final-cta * { box-sizing: border-box; } .cv-final-cta__corner--tl, .cv-final-cta__corner--bl { left: clamp(12px, 3vw, 30px); } .cv-final-cta__corner--tr, .cv-final-cta__corner--br { right: clamp(12px, 3vw, 30px); left: auto; } @media (max-width: 767px) { .cv-final-cta { min-height: 0; padding: 64px 28px; } .cv-final-cta__inner { width: 100%; min-width: 0; } .cv-final-cta__actions { width: 100%; max-width: 430px; align-items: stretch; gap: 10px; } .cv-final-cta__button { width: 100%; max-width: 100%; min-width: 0; white-space: normal; padding-inline: 12px; font-size: clamp(11px, 3.2vw, 14px); } .cv-final-cta__meta { width: 100%; max-width: 380px; gap: 7px; font-size: clamp(9px, 2.8vw, 12px); letter-spacing: .06em; } .cv-final-cta__corner { width: 22px; height: 22px; } .cv-final-cta__corner--tl, .cv-final-cta__corner--tr { top: 12px; } .cv-final-cta__corner--bl, .cv-final-cta__corner--br { bottom: 12px; } } /* ========================================================= CONTACT PAGE — EVENT ENQUIRY FORM ========================================================= */ .cv-enquiry { padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 56px); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-enquiry, .cv-enquiry * { box-sizing: border-box; } .cv-enquiry__panel { width: min(100%, 1240px); min-width: 0; margin-inline: auto; display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); overflow: hidden; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-lg); background: var(--cv-surface); box-shadow: 0 18px 48px rgba(10, 35, 32, .10); animation: cvEnquiryRise .75s cubic-bezier(.2,.75,.25,1) both; } @keyframes cvEnquiryRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .cv-enquiry__intro { position: relative; isolation: isolate; min-width: 0; min-height: 100%; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #fff; background: linear-gradient(145deg, rgba(10, 49, 47, .94), rgba(18, 78, 73, .88)), url("../images/c3.jpg") center / cover no-repeat; } .cv-enquiry__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: rgba(255,255,255,.78); font-size: var(--cv-hero-small, 12px); font-weight: 600; line-height: 1.5; letter-spacing: .12em; } .cv-enquiry__eyebrow span, .cv-enquiry__availability > span { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #7ed4c8; box-shadow: 0 0 0 5px rgba(126,212,200,.15); } .cv-enquiry__intro h2 { max-width: 460px; margin: 0; color: #fff; font-family: var(--cv-heading-font); font-size: var(--cv-hero-h2, clamp(32px, 3.5vw, 48px)); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; } .cv-enquiry__description { max-width: 440px; margin: 18px 0 0; color: rgba(255,255,255,.82); font-size: var(--cv-hero-body, 15px); line-height: 1.75; } .cv-enquiry__note { display: flex; align-items: center; gap: 13px; margin-top: clamp(24px, 3vw, 38px); padding: 14px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--cv-radius-md); background: rgba(5,25,24,.24); } .cv-enquiry__note-mark { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(126,212,200,.17); color: #a8eee3; } .cv-enquiry__note strong, .cv-enquiry__note small { display: block; line-height: 1.5; } .cv-enquiry__note strong { color: #fff; font-size: 13px; font-weight: 700; } .cv-enquiry__note small { margin-top: 2px; color: rgba(255,255,255,.75); font-size: 11px; } .cv-enquiry__availability { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 30px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; } .cv-enquiry__availability > span { width: 6px; height: 6px; } .cv-enquiry__form { min-width: 0; padding: clamp(24px, 3.8vw, 48px); background: var(--cv-surface); color: var(--cv-text); } .cv-enquiry__form-heading { margin-bottom: 22px; } .cv-enquiry__form-heading > span { color: var(--cv-accent); font-size: var(--cv-hero-small, 12px); font-weight: 700; line-height: 1.5; letter-spacing: .12em; } .cv-enquiry__form-heading p { margin: 7px 0 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body, 14px); line-height: 1.6; } .cv-enquiry__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .cv-enquiry__field { min-width: 0; display: flex; flex-direction: column; gap: 7px; color: var(--cv-text); font-size: 12px; font-weight: 600; line-height: 1.4; } .cv-enquiry__field > span b { color: #d84545; font-weight: 700; } .cv-enquiry__field > span small { color: var(--cv-text-muted); font-size: 11px; font-weight: 400; } .cv-enquiry__field input, .cv-enquiry__field select, .cv-enquiry__field textarea { width: 100%; min-width: 0; min-height: 44px; padding: 11px 13px; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-sm); outline: none; background: var(--cv-bg); color: var(--cv-text); font: 400 13px/1.45 var(--cv-body-font); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .cv-enquiry__field textarea { min-height: 92px; resize: vertical; } .cv-enquiry__field input::placeholder, .cv-enquiry__field textarea::placeholder { color: var(--cv-text-muted); opacity: .8; } .cv-enquiry__field select:invalid { color: var(--cv-text-muted); } .cv-enquiry__field input:focus, .cv-enquiry__field select:focus, .cv-enquiry__field textarea:focus { border-color: var(--cv-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-accent) 16%, transparent); background: var(--cv-surface); } .cv-enquiry__field [aria-invalid="true"] { border-color: #d84545; } .cv-enquiry__field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(216,69,69,.14); } .cv-enquiry__field--wide { grid-column: 1 / -1; } .cv-enquiry__error { display: none; color: #d84545; font-size: 11px; font-weight: 600; } .cv-enquiry__error.is-visible { display: block; } .cv-enquiry__form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 20px; } .cv-enquiry__form-footer p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cv-text-muted); font-size: 11px; line-height: 1.5; } .cv-enquiry__form-footer p i { color: var(--cv-accent); } .cv-enquiry__submit { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 20px; border: 1px solid var(--cv-accent); border-radius: var(--cv-radius-sm); background: var(--cv-accent); color: var(--cv-on-accent); font: 600 var(--cv-hero-btn, 13px)/1.3 var(--cv-body-font); cursor: pointer; transition: background .2s ease, transform .2s ease; } .cv-enquiry__submit:hover { background: var(--cv-accent-hover); transform: translateY(-2px); } .cv-enquiry__submit:focus-visible { outline: 3px solid var(--cv-accent-soft); outline-offset: 3px; } .cv-enquiry__submit i { transition: transform .2s ease; } .cv-enquiry__submit:hover i { transform: translateX(3px); } .cv-enquiry__status { min-height: 0; margin: 0; color: var(--cv-text-muted); font-size: 12px; } @media (max-width: 1023px) { .cv-enquiry__panel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .cv-enquiry__intro { padding: clamp(24px, 4vw, 40px); } .cv-enquiry__form { padding: clamp(22px, 3.2vw, 36px); } } @media (max-width: 767px) { .cv-enquiry { padding: 42px 16px; } .cv-enquiry__panel { grid-template-columns: minmax(0, 1fr); } .cv-enquiry__intro { min-height: 0; padding: 30px clamp(22px, 6vw, 36px); } .cv-enquiry__intro h2 { font-size: clamp(30px, 8vw, 42px); } .cv-enquiry__description { margin-top: 12px; font-size: 14px; } .cv-enquiry__note { margin-top: 18px; } .cv-enquiry__availability { margin-top: 18px; padding-top: 0; } .cv-enquiry__form { padding: 26px clamp(20px, 5vw, 30px); } .cv-enquiry__form-heading { margin-bottom: 17px; } .cv-enquiry__fields { gap: 12px; } .cv-enquiry__form-footer { align-items: stretch; } .cv-enquiry__submit { width: 100%; } } @media (max-width: 479px) { .cv-enquiry { padding: 32px 12px; } .cv-enquiry__panel { border-radius: 12px; } .cv-enquiry__eyebrow { font-size: 10px; } .cv-enquiry__fields { grid-template-columns: minmax(0, 1fr); } .cv-enquiry__field--wide { grid-column: auto; } .cv-enquiry__form-footer { margin-top: 16px; } } @media (prefers-reduced-motion: reduce) { .cv-enquiry__panel { animation: none; } .cv-enquiry * { scroll-behavior: auto; transition-duration: .01ms !important; } } /* ========================================================= CONTACT PAGE — COMMON QUESTIONS ========================================================= */ .cv-faq { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 56px); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-faq, .cv-faq * { box-sizing: border-box; } .cv-faq::before { position: absolute; z-index: -1; inset: 0; content: ""; background: url("../images/c8.jpg") center 45% / cover no-repeat; opacity: .035; pointer-events: none; } .cv-faq__inner { width: min(100%, 960px); margin-inline: auto; } .cv-faq__header { margin-bottom: clamp(22px, 3vw, 34px); text-align: center; } .cv-faq__eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; color: var(--cv-accent); font-size: var(--cv-hero-small, 12px); font-weight: 700; line-height: 1.5; letter-spacing: .12em; } .cv-faq__eyebrow span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--cv-accent); } .cv-faq__header h2 { margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1, clamp(30px, 4vw, 46px)); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; } .cv-faq__header > p:last-child { margin: 9px 0 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body, 15px); line-height: 1.6; } .cv-faq__list { display: grid; gap: 10px; } .cv-faq__item { min-width: 0; overflow: hidden; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-md); background: var(--cv-surface); box-shadow: 0 4px 15px rgba(10,35,32,.035); transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease; } .cv-faq__item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cv-accent) 42%, var(--cv-border)); } .cv-faq__item.is-open { border-color: color-mix(in srgb, var(--cv-accent) 52%, var(--cv-border)); box-shadow: 0 8px 24px rgba(10,35,32,.075); } .cv-faq__item h3 { margin: 0; font: inherit; } .cv-faq__question { width: 100%; min-height: 62px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: transparent; color: var(--cv-text); text-align: start; font: 600 var(--cv-hero-body, 15px)/1.5 var(--cv-body-font); cursor: pointer; } .cv-faq__question:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: -4px; border-radius: var(--cv-radius-md); } .cv-faq__number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--cv-bg); color: var(--cv-text-muted); font-size: 10px; font-weight: 700; line-height: 1; } .cv-faq__question-text { min-width: 0; overflow-wrap: anywhere; } .cv-faq__toggle { position: relative; width: 30px; height: 30px; justify-self: end; border-radius: 50%; background: var(--cv-accent); transition: background .2s ease, transform .25s ease; } .cv-faq__toggle::before, .cv-faq__toggle::after { position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; content: ""; border-radius: 2px; background: var(--cv-on-accent); transform: translate(-50%, -50%); transition: transform .22s ease; } .cv-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .cv-faq__item.is-open .cv-faq__toggle { background: var(--cv-surface); box-shadow: inset 0 0 0 1px var(--cv-border); transform: rotate(180deg); } .cv-faq__item.is-open .cv-faq__toggle::before, .cv-faq__item.is-open .cv-faq__toggle::after { background: var(--cv-accent); } .cv-faq__item.is-open .cv-faq__toggle::after { transform: translate(-50%, -50%) rotate(0); } .cv-faq__answer { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .36s cubic-bezier(.2,.75,.25,1), opacity .24s ease; } .cv-faq__item.is-open .cv-faq__answer { max-height: 240px; opacity: 1; } .cv-faq__answer p { max-width: 780px; margin: 0; padding: 0 62px 20px; color: var(--cv-text-muted); font-size: var(--cv-hero-body, 14px); font-weight: 400; line-height: 1.75; } .cv-faq__footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 24px; text-align: center; } .cv-faq__footer p { margin: 0; color: var(--cv-text-muted); font-size: 13px; line-height: 1.5; } .cv-faq__footer a { display: inline-flex; align-items: center; gap: 7px; color: var(--cv-accent); font-size: 13px; font-weight: 700; line-height: 1.5; text-decoration: none; } .cv-faq__footer a:hover { color: var(--cv-accent-hover); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767px) { .cv-faq { padding: 42px 16px; } .cv-faq__header { margin-bottom: 22px; } .cv-faq__question { min-height: 58px; grid-template-columns: 30px minmax(0,1fr) 30px; gap: 9px; padding: 11px 12px; font-size: 14px; } .cv-faq__number, .cv-faq__toggle { width: 28px; height: 28px; } .cv-faq__answer p { padding: 0 51px 17px; font-size: 13px; } } @media (max-width: 399px) { .cv-faq { padding: 34px 12px; } .cv-faq__question { grid-template-columns: 26px minmax(0,1fr) 26px; gap: 8px; padding-inline: 9px; font-size: 13px; } .cv-faq__number, .cv-faq__toggle { width: 25px; height: 25px; } .cv-faq__answer p { padding: 0 43px 15px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .cv-faq *, .cv-faq *::before, .cv-faq *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Contact page footer: repair the missing light-mode surface and align type sizes. */ body:has(#contact-form) .cv-footer { --black: #103E3B; --text: #F4F7F6; --accent: #63AAA4; --accent-hover: #7AC4BC; --on-accent: #08201E; background: #103E3B; color: #F4F7F6; } body:has(#contact-form) .cv-footer__brand-name { font-family: var(--cv-heading-font); font-size: clamp(22px, 1.7vw, 26px); } body:has(#contact-form) .cv-footer__description, body:has(#contact-form) .cv-footer__links a, body:has(#contact-form) .cv-footer__contact-text span, body:has(#contact-form) .cv-footer__newsletter-text { font-family: var(--cv-body-font); font-size: clamp(13px, 1vw, 14px); line-height: 1.7; } body:has(#contact-form) .cv-footer__eyebrow, body:has(#contact-form) .cv-footer__newsletter-label { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.45; } body:has(#contact-form) .cv-footer__heading { font-family: var(--cv-heading-font); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.3; } body:has(#contact-form) .cv-footer__contact-text strong { font-family: var(--cv-body-font); font-size: 13px; line-height: 1.45; } body:has(#contact-form) .cv-footer__newsletter-form input { font-family: var(--cv-body-font); font-size: 13px; } body:has(#contact-form) .cv-footer__copyright, body:has(#contact-form) .cv-footer__bottom-links, body:has(#contact-form) .cv-footer__location { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.6; } body:has(#contact-form) .cv-footer__copyright, body:has(#contact-form) .cv-footer__location { color: rgba(244,247,246,.74); } body:has(#contact-form) .cv-footer__bottom-links a { color: rgba(244,247,246,.78); } @media (max-width: 767px) { body:has(#contact-form) .cv-footer__description, body:has(#contact-form) .cv-footer__links a, body:has(#contact-form) .cv-footer__contact-text span, body:has(#contact-form) .cv-footer__newsletter-text { font-size: 13px; } body:has(#contact-form) .cv-footer__heading { font-size: 19px; } body:has(#contact-form) .cv-footer__bottom { row-gap: 12px; } } @media (max-width: 479px) { body:has(#contact-form) .cv-footer__eyebrow, body:has(#contact-form) .cv-footer__newsletter-label { font-size: 10px; } body:has(#contact-form) .cv-footer__copyright, body:has(#contact-form) .cv-footer__bottom-links, body:has(#contact-form) .cv-footer__location { font-size: 10px; } } /* ========================================================= CONVOKE FOOTER Light-mode base + responsive layout ========================================================= */ .cv-footer { width: 100%; position: relative; overflow: hidden; background: var(--black); color: #F4F7F6; border-top: 1px solid rgba(255, 255, 255, 0.10); isolation: isolate; } .cv-footer *, .cv-footer *::before, .cv-footer *::after { box-sizing: border-box; } /* ========================================================= MAIN FOOTER ========================================================= */ .cv-footer__main { width: min(1400px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: minmax(210px, 1.15fr) minmax(145px, 0.75fr) minmax(175px, 0.95fr) minmax(220px, 1.05fr) minmax(210px, 1fr); column-gap: clamp(28px, 3vw, 58px); row-gap: 56px; padding: clamp(72px, 7vw, 108px) 0 72px; } /* ========================================================= BRAND ========================================================= */ .cv-footer__brand-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .cv-footer__brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; color: #FFFFFF; text-decoration: none; margin-bottom: 25px; } .cv-footer__logo { width: 42px; height: 42px; position: relative; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; } .cv-footer__logo-img { position: absolute; inset: 0; width: 42px; height: 42px; display: block; object-fit: contain; } .cv-footer__logo-img--dark { display: none; } .cv-footer__brand-name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 23px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: #FFFFFF; } .cv-footer__description { max-width: 310px; margin: 0; color: rgba(244, 247, 246, 0.70); font-family: "Manrope", sans-serif; font-size: 13px; line-height: 1.8; font-weight: 400; } .cv-footer__brand-meta { display: flex; flex-wrap: wrap; gap: 7px 10px; margin-top: 24px; } .cv-footer__brand-meta span { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border: 1px solid rgba(63, 163, 155, 0.38); color: #8FCBC6; font-family: "Manrope", sans-serif; font-size: 8px; line-height: 1; font-weight: 700; letter-spacing: 0.10em; white-space: nowrap; } /* ========================================================= SOCIALS ========================================================= */ .cv-footer__socials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 27px; } .cv-footer__social { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 50%; color: rgba(255, 255, 255, 0.78); background: transparent; text-decoration: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } .cv-footer__social i { font-size: 12px; line-height: 1; } .cv-footer__social:hover { color: #FFFFFF; background: var(--accent); border-color: var(--accent); transform: translateY(-3px); } .cv-footer__social:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ========================================================= FOOTER COLUMNS ========================================================= */ .cv-footer__column { min-width: 0; } .cv-footer__eyebrow { margin: 0 0 10px; color: #63AAA4; font-family: "Manrope", sans-serif; font-size: 9px; line-height: 1.2; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .cv-footer__heading { margin: 0 0 22px; color: #FFFFFF; font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; } /* ========================================================= LINK LIST ========================================================= */ .cv-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; width: 100%; } .cv-footer__links a { position: relative; display: inline-flex; align-items: flex-start; width: fit-content; max-width: 100%; padding-inline-start: 0; color: rgba(244, 247, 246, 0.66); font-family: "Manrope", sans-serif; font-size: 12px; line-height: 1.55; font-weight: 400; text-decoration: none; transition: color 180ms ease, padding 180ms ease; } .cv-footer__links a::before { content: ""; width: 0; height: 1px; flex: 0 0 auto; margin-top: 9px; margin-inline-end: 0; background: var(--accent); transition: width 180ms ease, margin 180ms ease; } .cv-footer__links a:hover { color: #FFFFFF; padding-inline-start: 7px; } .cv-footer__links a:hover::before { width: 13px; margin-inline-end: 7px; } /* ========================================================= CONTACT ========================================================= */ .cv-footer__contact-list { display: flex; flex-direction: column; gap: 20px; width: 100%; } .cv-footer__contact-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; color: inherit; text-decoration: none; } .cv-footer__contact-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(63, 163, 155, 0.38); color: #63AAA4; flex: 0 0 30px; } .cv-footer__contact-icon i { font-size: 11px; line-height: 1; } .cv-footer__contact-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .cv-footer__contact-text strong { display: block; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 11px; line-height: 1.35; font-weight: 700; } .cv-footer__contact-text span { display: block; color: rgba(244, 247, 246, 0.64); font-family: "Manrope", sans-serif; font-size: 11px; line-height: 1.55; font-weight: 400; overflow-wrap: anywhere; } /* ========================================================= NEWSLETTER ========================================================= */ .cv-footer__newsletter { width: 100%; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.11); } .cv-footer__newsletter-label { display: block; margin-bottom: 8px; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 9px; line-height: 1.3; font-weight: 700; letter-spacing: 0.12em; } .cv-footer__newsletter-text { margin: 0 0 13px; color: rgba(244, 247, 246, 0.62); font-family: "Manrope", sans-serif; font-size: 10px; line-height: 1.65; } .cv-footer__newsletter-form { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 40px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); } .cv-footer__newsletter-form input { min-width: 0; width: 100%; height: 40px; padding: 0 12px; border: 0; outline: 0; background: transparent; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 10px; line-height: 1.2; } .cv-footer__newsletter-form input::placeholder { color: rgba(244, 247, 246, 0.42); } .cv-footer__newsletter-form input:focus { box-shadow: inset 0 0 0 1px var(--accent); } .cv-footer__newsletter-form button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-inline-start: 1px solid rgba(255, 255, 255, 0.13); background: var(--accent); color: var(--on-accent); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; } .cv-footer__newsletter-form button i { font-size: 11px; } .cv-footer__newsletter-form button:hover { background: var(--accent-hover); } /* ========================================================= FOOTER BOTTOM ========================================================= */ .cv-footer__bottom { width: min(1400px, calc(100% - 64px)); margin: 0 auto; min-height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .cv-footer__copyright, .cv-footer__bottom-links, .cv-footer__location { min-width: 0; font-family: "Manrope", sans-serif; font-size: 9px; line-height: 1.5; font-weight: 500; } .cv-footer__copyright { color: rgba(244, 247, 246, 0.48); } .cv-footer__bottom-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; text-align: center; } .cv-footer__bottom-links a { color: rgba(244, 247, 246, 0.55); text-decoration: none; transition: color 180ms ease; } .cv-footer__bottom-links a:hover { color: #FFFFFF; } .cv-footer__bottom-links span { color: rgba(244, 247, 246, 0.28); } .cv-footer__location { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: rgba(244, 247, 246, 0.48); } .cv-footer__location i { color: #63AAA4; font-size: 10px; } /* ========================================================= SCREEN-READER ONLY ========================================================= */ .cv-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================= LAPTOP 1024px – 1439px ========================================================= */ @media (min-width: 1024px) and (max-width: 1439px) { .cv-footer__main { width: min(1240px, calc(100% - 48px)); grid-template-columns: minmax(190px, 1.05fr) minmax(130px, 0.75fr) minmax(155px, 0.90fr) minmax(190px, 1fr) minmax(190px, 1fr); column-gap: 28px; padding-top: 72px; padding-bottom: 62px; } .cv-footer__bottom { width: min(1240px, calc(100% - 48px)); } .cv-footer__brand-name { font-size: 21px; } .cv-footer__description { font-size: 12px; } .cv-footer__links a { font-size: 11px; } .cv-footer__contact-text span { font-size: 10px; } } /* ========================================================= LAPTOP-L 1440px – 1599px ========================================================= */ @media (min-width: 1440px) and (max-width: 1599px) { .cv-footer__main { width: min(1400px, calc(100% - 72px)); column-gap: 40px; } .cv-footer__bottom { width: min(1400px, calc(100% - 72px)); } } /* ========================================================= DESKTOP 1600px+ ========================================================= */ @media (min-width: 1600px) { .cv-footer__main { width: min(1500px, calc(100% - 96px)); column-gap: clamp(42px, 3vw, 68px); padding-top: 112px; padding-bottom: 78px; } .cv-footer__bottom { width: min(1500px, calc(100% - 96px)); min-height: 74px; } .cv-footer__description { max-width: 330px; font-size: 14px; } .cv-footer__links a { font-size: 12px; } .cv-footer__contact-text span { font-size: 11px; } } /* ========================================================= TABLET 768px – 1023px ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .cv-footer__main { width: min(900px, calc(100% - 48px)); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 34px; row-gap: 54px; padding: 72px 0 60px; } .cv-footer__brand-col { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr); column-gap: 44px; align-items: start; } .cv-footer__brand { grid-column: 1; grid-row: 1; } .cv-footer__description { grid-column: 1; grid-row: 2; max-width: 360px; } .cv-footer__brand-meta { grid-column: 2; grid-row: 1; margin-top: 0; } .cv-footer__socials { grid-column: 2; grid-row: 2; margin-top: 20px; } .cv-footer__support-col { grid-column: 3; } .cv-footer__newsletter { margin-top: 25px; } .cv-footer__bottom { width: min(900px, calc(100% - 48px)); grid-template-columns: 1fr 1fr; min-height: auto; padding: 20px 0; } .cv-footer__bottom-links { justify-content: flex-end; } .cv-footer__location { justify-content: flex-start; grid-column: 1 / -1; } } /* ========================================================= MOBILE-L 600px – 767px ========================================================= */ @media (min-width: 600px) and (max-width: 767px) { .cv-footer__main { width: calc(100% - 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 48px; padding: 64px 0 50px; } .cv-footer__brand-col { grid-column: 1 / -1; } .cv-footer__description { max-width: 560px; } .cv-footer__contact-col, .cv-footer__support-col { min-width: 0; } .cv-footer__bottom { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 12px; padding: 20px 0 24px; text-align: center; } .cv-footer__copyright, .cv-footer__bottom-links, .cv-footer__location { justify-content: center; text-align: center; } } /* ========================================================= MOBILE-M 480px – 599px ========================================================= */ @media (min-width: 480px) and (max-width: 599px) { .cv-footer__main { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 42px; padding: 58px 0 44px; } .cv-footer__brand-col { width: 100%; } .cv-footer__description { max-width: 100%; } .cv-footer__column { width: 100%; } .cv-footer__heading { margin-bottom: 17px; } .cv-footer__links { gap: 10px; } .cv-footer__contact-list { gap: 17px; } .cv-footer__newsletter { max-width: 100%; } .cv-footer__bottom { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 12px; padding: 20px 0 24px; } .cv-footer__copyright, .cv-footer__bottom-links, .cv-footer__location { justify-content: center; text-align: center; } } /* ========================================================= MOBILE-S Below 480px ========================================================= */ @media (max-width: 479px) { .cv-footer__main { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 38px; padding: 52px 0 40px; } .cv-footer__brand { gap: 9px; margin-bottom: 20px; } .cv-footer__logo, .cv-footer__logo-img { width: 38px; height: 38px; } .cv-footer__logo { flex-basis: 38px; } .cv-footer__brand-name { font-size: 20px; } .cv-footer__description { font-size: 12px; line-height: 1.75; } .cv-footer__brand-meta { gap: 6px; margin-top: 19px; } .cv-footer__brand-meta span { font-size: 7px; } .cv-footer__socials { margin-top: 21px; } .cv-footer__social { width: 32px; height: 32px; } .cv-footer__eyebrow { font-size: 8px; } .cv-footer__heading { font-size: 16px; margin-bottom: 16px; } .cv-footer__links a { font-size: 11px; line-height: 1.6; } .cv-footer__contact-list { gap: 16px; } .cv-footer__contact-item { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; } .cv-footer__contact-icon { width: 28px; height: 28px; } .cv-footer__contact-text strong { font-size: 10px; } .cv-footer__contact-text span { font-size: 10px; } .cv-footer__newsletter { margin-top: 24px; padding-top: 19px; } .cv-footer__newsletter-text { font-size: 9px; } .cv-footer__bottom { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 10px; padding: 18px 0 22px; } .cv-footer__copyright, .cv-footer__bottom-links, .cv-footer__location { justify-content: center; text-align: center; font-size: 8px; } .cv-footer__bottom-links { gap: 6px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cv-footer__social, .cv-footer__links a, .cv-footer__links a::before, .cv-footer__newsletter-form button { transition: none; } } /* ========================================================= FOOTER REVEAL ========================================================= */ .cv-footer-reveal { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; } .cv-footer-reveal--visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .cv-footer-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================= INDEX — CINEMATIC EVENT FILM ========================================================= */ .cv-feature-film { width: 100%; padding: clamp(24px, 3.8vw, 52px) clamp(12px, 3vw, 40px); background: var(--cv-bg); color: #F6FAF9; font-family: var(--cv-body-font); } .cv-feature-film, .cv-feature-film * { box-sizing: border-box; } .cv-feature-film__stage { position: relative; isolation: isolate; display: flex; flex-direction: column; width: min(100%, 1540px); min-height: clamp(640px, 78vh, 900px); margin-inline: auto; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: clamp(12px, 1.7vw, 22px); background: #091716 url("../images/c11.jpg") center / cover no-repeat; box-shadow: 0 22px 70px rgba(4,20,18,.20); } .cv-feature-film__video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transform: scale(1.03); will-change: transform; } .cv-feature-film__shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(3,13,13,.90) 0%, rgba(3,13,13,.72) 34%, rgba(3,13,13,.23) 68%, rgba(3,13,13,.15) 100%), linear-gradient(0deg, rgba(3,13,13,.78) 0%, transparent 37%); } .cv-feature-film__topline { position: relative; z-index: 2; align-self: stretch; margin: clamp(20px, 3vw, 38px) clamp(20px, 3.2vw, 44px) 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.82); font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .13em; } .cv-feature-film__topline > span:first-child { display: inline-flex; align-items: center; gap: 10px; } .cv-feature-film__topline i { width: 7px; height: 7px; border-radius: 50%; background: #8AD7CB; box-shadow: 0 0 0 5px rgba(138,215,203,.14); } .cv-feature-film__content { position: relative; z-index: 2; margin-block: auto; margin-inline-start: clamp(22px, 7vw, 110px); margin-inline-end: auto; padding-block: clamp(42px, 7vh, 78px); width: min(60%, 780px); text-align: start; } .cv-feature-film__eyebrow { margin: 0 0 17px; color: #9EE1D7; font-size: var(--cv-hero-small, 13px); font-weight: 700; line-height: 1.5; letter-spacing: .16em; } .cv-feature-film__content h2 { max-width: 780px; margin: 0; color: #F7FBFA; font-family: var(--cv-heading-font); font-size: clamp(46px, 7.2vw, 104px); font-weight: 500; line-height: .99; letter-spacing: -.055em; text-wrap: balance; } .cv-feature-film__content h2 em { color: #9DE0D6; font-style: normal; } .cv-feature-film__description { max-width: 590px; margin: clamp(18px, 2vw, 25px) 0 0; color: rgba(248,251,250,.84); font-size: var(--cv-hero-body, 16px); line-height: 1.75; } .cv-feature-film__button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; margin-top: clamp(20px, 2.4vw, 30px); padding: 13px 20px; border: 1px solid #A2E2D9; border-radius: var(--cv-radius-sm, 8px); background: #A2E2D9; color: #082320; font-size: var(--cv-hero-btn, 14px); font-weight: 700; line-height: 1.4; text-decoration: none; transition: background .22s ease, border-color .22s ease, transform .22s ease; } .cv-feature-film__button:hover { transform: translateY(-2px); background: #D1F3EE; border-color: #D1F3EE; } .cv-feature-film__button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .cv-feature-film__button i { transition: transform .2s ease; } .cv-feature-film__button:hover i { transform: translate(2px,-2px); } .cv-feature-film__side-note { position: absolute; z-index: 2; top: 35%; inset-inline-end: clamp(16px, 2.5vw, 34px); color: rgba(255,255,255,.74); font-size: 9px; font-weight: 700; letter-spacing: .16em; writing-mode: vertical-rl; text-orientation: mixed; } .cv-feature-film__signature { position: relative; z-index: 2; margin-top: auto; display: grid; grid-template-columns: minmax(130px, .72fr) minmax(220px, 1fr) minmax(0, 1.5fr); align-items: center; gap: clamp(16px, 3vw, 42px); padding: clamp(18px, 2.5vw, 32px) clamp(22px, 3.2vw, 44px); border-top: 1px solid rgba(255,255,255,.28); background: linear-gradient(0deg, rgba(4,15,14,.84), rgba(4,15,14,.42)); backdrop-filter: blur(4px); } .cv-feature-film__signature-index { color: #9DE0D6; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .13em; } .cv-feature-film__signature-copy { color: #F6FAF9; font-family: var(--cv-heading-font); font-size: clamp(16px, 1.65vw, 22px); font-weight: 500; line-height: 1.45; } .cv-feature-film__signals { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 22px; } .cv-feature-film__signals span { display: inline-flex; align-items: center; gap: 9px; color: rgba(248,251,250,.78); font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; } .cv-feature-film__signals b { color: #9DE0D6; font-size: 12px; } .cv-feature-film__frame-mark { position: absolute; z-index: 3; width: 30px; height: 30px; pointer-events: none; opacity: .76; } .cv-feature-film__frame-mark--tl { top: 14px; inset-inline-start: 14px; border-top: 1px solid rgba(255,255,255,.55); border-inline-start: 1px solid rgba(255,255,255,.55); } .cv-feature-film__frame-mark--br { bottom: 14px; inset-inline-end: 14px; border-bottom: 1px solid rgba(255,255,255,.55); border-inline-end: 1px solid rgba(255,255,255,.55); } .cv-feature-film.is-ready .cv-feature-film__topline, .cv-feature-film.is-ready .cv-feature-film__content, .cv-feature-film.is-ready .cv-feature-film__signature, .cv-feature-film.is-ready .cv-feature-film__side-note { opacity: 0; transform: translateY(22px); } .cv-feature-film.is-visible .cv-feature-film__topline, .cv-feature-film.is-visible .cv-feature-film__content, .cv-feature-film.is-visible .cv-feature-film__signature, .cv-feature-film.is-visible .cv-feature-film__side-note { opacity: 1; transform: none; } .cv-feature-film__topline, .cv-feature-film__content, .cv-feature-film__signature, .cv-feature-film__side-note { transition: opacity .75s ease, transform .8s cubic-bezier(.2,.75,.25,1); } .cv-feature-film.is-visible .cv-feature-film__content { transition-delay: .08s; } .cv-feature-film.is-visible .cv-feature-film__signature { transition-delay: .18s; } @supports (animation-timeline: view()) { .cv-feature-film__video { animation: cvFeatureFilmScrollExpand linear both; animation-timeline: view(block); animation-range: entry 0% cover 38%; } @keyframes cvFeatureFilmScrollExpand { from { transform: scale(1.20); } to { transform: scale(1.03); } } } @media (max-width: 1023px) { .cv-feature-film__stage { min-height: 720px; } .cv-feature-film__content { width: min(70%, 700px); } .cv-feature-film__content h2 { font-size: clamp(56px, 8vw, 82px); } .cv-feature-film__signature { grid-template-columns: minmax(120px,.7fr) minmax(200px,1fr); } .cv-feature-film__signals { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); } } @media (max-width: 767px) { .cv-feature-film { padding: 28px 12px; } .cv-feature-film__stage { min-height: 820px; } .cv-feature-film__topline { margin: 20px 18px 0; font-size: 9px; letter-spacing: .09em; } .cv-feature-film__content { width: auto; margin: auto 22px; padding-block: 48px; } .cv-feature-film__eyebrow { margin-bottom: 13px; font-size: 11px; } .cv-feature-film__content h2 { max-width: 560px; font-size: clamp(46px, 10vw, 72px); } .cv-feature-film__description { max-width: 520px; margin-top: 16px; font-size: 14px; } .cv-feature-film__side-note { display: none; } .cv-feature-film__signature { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 18px 20px 22px; } .cv-feature-film__signature-index { font-size: 9px; } .cv-feature-film__signature-copy { font-size: 18px; } .cv-feature-film__signals { grid-column: auto; display: grid; justify-content: start; gap: 8px; padding-top: 11px; } } @media (max-width: 399px) { .cv-feature-film { padding: 22px 9px; } .cv-feature-film__stage { min-height: 850px; } .cv-feature-film__topline { align-items: flex-start; flex-direction: column; gap: 5px; padding-bottom: 10px; } .cv-feature-film__content { margin-inline: 18px; } .cv-feature-film__content h2 { font-size: clamp(42px, 11vw, 56px); } .cv-feature-film__description { font-size: 13px; line-height: 1.7; } .cv-feature-film__button { min-height: 46px; padding: 11px 14px; font-size: 12px; } .cv-feature-film__signature { padding-inline: 18px; } } @media (prefers-reduced-motion: reduce) { .cv-feature-film *, .cv-feature-film *::before, .cv-feature-film *::after { animation: none !important; transition: none !important; } .cv-feature-film.is-ready .cv-feature-film__topline, .cv-feature-film.is-ready .cv-feature-film__content, .cv-feature-film.is-ready .cv-feature-film__signature, .cv-feature-film.is-ready .cv-feature-film__side-note { opacity: 1; transform: none; } } /* ========================================================= U.S. ORGANIZATION MARQUEE — HOMEPAGE ONLY ========================================================= */ .cv-org-marquee { --org-card-bg: var(--cv-surface); --org-card-border: var(--cv-border); width: 100%; padding: clamp(34px, 5vw, 68px) max(18px, calc((100% - 1320px) / 2)); overflow: hidden; background: var(--cv-bg); color: var(--cv-text); } .cv-org-marquee__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); align-items: end; column-gap: clamp(24px, 5vw, 72px); row-gap: 8px; max-width: 1320px; margin: 0 auto clamp(20px, 3vw, 34px); } .cv-org-marquee__eyebrow { grid-column: 1 / -1; margin: 0; color: var(--cv-accent); font: 700 11px/1.4 var(--cv-body-font); letter-spacing: .12em; } .cv-org-marquee__intro h2 { margin: 0; color: var(--cv-text); font: 400 var(--cv-hero-h1)/1.12 var(--cv-heading-font); letter-spacing: -.01em; text-wrap: balance; } .cv-org-marquee__lead { max-width: 44ch; margin: 0 0 3px; color: var(--cv-text-muted); font: 400 var(--cv-hero-body)/1.65 var(--cv-body-font); } .cv-org-marquee__rows { display: grid; gap: 12px; max-width: 1480px; margin-inline: auto; } .cv-org-marquee__window { width: 100%; overflow: hidden; } .cv-org-marquee__track { display: flex; width: max-content; direction: ltr; animation: cvOrgMarqueeLeft 42s linear infinite; will-change: transform; } .cv-org-marquee__track--right { animation-name: cvOrgMarqueeRight; animation-duration: 48s; } .cv-org-marquee__group { display: flex; flex: 0 0 auto; align-items: stretch; gap: 12px; padding-inline-end: 12px; } .cv-org-marquee__name { display: inline-flex; min-height: 58px; align-items: center; justify-content: center; padding: 12px clamp(17px, 2.1vw, 30px); border: 1px solid var(--org-card-border); border-radius: 8px; background: var(--org-card-bg); color: var(--cv-text); font: 700 clamp(14px, 1.2vw, 17px)/1.3 var(--cv-heading-font); letter-spacing: -.025em; white-space: nowrap; unicode-bidi: isolate; } .cv-org-marquee__window:hover .cv-org-marquee__track, .cv-org-marquee__window:focus-within .cv-org-marquee__track { animation-play-state: paused; } .cv-org-marquee__note { max-width: 1480px; margin: 14px auto 0; color: var(--cv-text-muted); font: 400 11px/1.6 var(--cv-body-font); } @keyframes cvOrgMarqueeLeft { to { transform: translateX(-50%); } } @keyframes cvOrgMarqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (max-width: 767px) { .cv-org-marquee { padding-inline: 16px; } .cv-org-marquee__intro { grid-template-columns: minmax(0, 1fr); row-gap: 9px; margin-bottom: 19px; } .cv-org-marquee__eyebrow { font-size: 10px; } .cv-org-marquee__lead { max-width: 55ch; } .cv-org-marquee__rows { gap: 9px; } .cv-org-marquee__group { gap: 9px; padding-inline-end: 9px; } .cv-org-marquee__name { min-height: 50px; padding: 10px 16px; font-size: 14px; } .cv-org-marquee__track { animation-duration: 36s; } .cv-org-marquee__track--right { animation-duration: 42s; } } @media (max-width: 399px) { .cv-org-marquee { padding-inline: 12px; } .cv-org-marquee__name { min-height: 46px; padding-inline: 13px; font-size: 13px; } .cv-org-marquee__note { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .cv-org-marquee__track { animation: none; transform: none; } .cv-org-marquee__window { overflow-x: auto; scrollbar-width: thin; } } /* Keep the homepage film typography on the same responsive scale as its other sections. */ body:has(#eventFilm) .cv-feature-film__content h2 { font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; } body:has(#eventFilm) .cv-feature-film__description { font-family: var(--cv-body-font); font-size: var(--cv-hero-body); font-weight: 400; line-height: 1.65; } /* Match the homepage footer to the contact page footer styling. */ body:has(#eventFilm) .cv-footer { --black: #103E3B; --text: #F4F7F6; --accent: #63AAA4; --accent-hover: #7AC4BC; --on-accent: #08201E; background: #103E3B; color: #F4F7F6; } body:has(#eventFilm) .cv-footer__brand-name { font-family: var(--cv-heading-font); font-size: clamp(22px, 1.7vw, 26px); } body:has(#eventFilm) .cv-footer__description, body:has(#eventFilm) .cv-footer__links a, body:has(#eventFilm) .cv-footer__contact-text span, body:has(#eventFilm) .cv-footer__newsletter-text { font-family: var(--cv-body-font); font-size: clamp(13px, 1vw, 14px); line-height: 1.7; } body:has(#eventFilm) .cv-footer__eyebrow, body:has(#eventFilm) .cv-footer__newsletter-label { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.45; } body:has(#eventFilm) .cv-footer__heading { font-family: var(--cv-heading-font); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.3; } body:has(#eventFilm) .cv-footer__contact-text strong { font-family: var(--cv-body-font); font-size: 13px; line-height: 1.45; } body:has(#eventFilm) .cv-footer__newsletter-form input { font-family: var(--cv-body-font); font-size: 13px; } body:has(#eventFilm) .cv-footer__copyright, body:has(#eventFilm) .cv-footer__bottom-links, body:has(#eventFilm) .cv-footer__location { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.6; } body:has(#eventFilm) .cv-footer__copyright, body:has(#eventFilm) .cv-footer__location { color: rgba(244,247,246,.74); } body:has(#eventFilm) .cv-footer__bottom-links a { color: rgba(244,247,246,.78); } @media (max-width: 767px) { body:has(#eventFilm) .cv-footer__description, body:has(#eventFilm) .cv-footer__links a, body:has(#eventFilm) .cv-footer__contact-text span, body:has(#eventFilm) .cv-footer__newsletter-text { font-size: 13px; } body:has(#eventFilm) .cv-footer__heading { font-size: 19px; } body:has(#eventFilm) .cv-footer__bottom { row-gap: 12px; } } @media (max-width: 479px) { body:has(#eventFilm) .cv-footer__eyebrow, body:has(#eventFilm) .cv-footer__newsletter-label { font-size: 10px; } body:has(#eventFilm) .cv-footer__copyright, body:has(#eventFilm) .cv-footer__bottom-links, body:has(#eventFilm) .cv-footer__location { font-size: 10px; } } /* ========================================================= HOME 2 HERO — EDITORIAL IMAGE AND COPY LAYOUT ========================================================= */ .cv-home2-hero { position: relative; display: grid; align-items: center; min-height: min(820px, calc(100svh - var(--cv-navbar-height, 82px))); padding: clamp(42px, 6vw, 82px) clamp(20px, 5vw, 72px) 74px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 8% 92%, rgba(63,163,155,.12), transparent 36%), var(--cv-bg); color: var(--cv-text); } .cv-home2-hero::before { position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 50%; width: 1px; content: ""; background: linear-gradient(transparent, var(--cv-border) 18%, var(--cv-border) 82%, transparent); opacity: .65; } .cv-home2-hero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(38px, 6vw, 92px); width: min(100%, 1340px); margin-inline: auto; } .cv-home2-hero__visual { position: relative; min-width: 0; aspect-ratio: 1.12 / 1; opacity: 1; transform: none; } .cv-home2-hero__main-shot { position: absolute; z-index: 1; inset-block: 0 9%; inset-inline: 0 13%; margin: 0; overflow: hidden; border: 1px solid var(--cv-border); border-radius: 18px; background: var(--cv-surface); box-shadow: 0 26px 70px rgba(8, 25, 23, .16); clip-path: inset(0 0 0 0 round 18px); } .cv-home2-hero__main-shot::after { position: absolute; inset: 40% 0 0; content: ""; background: linear-gradient(0deg, rgba(4, 16, 15, .76), transparent); } .cv-home2-hero__main-shot img, .cv-home2-hero__float-shot img { display: block; width: 100%; height: 100%; object-fit: cover; } .cv-home2-hero__main-shot img { object-position: center; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); } .cv-home2-hero__main-caption { position: absolute; z-index: 2; inset-inline: clamp(18px, 3vw, 34px); inset-block-end: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 8px; color: #fff; font: 600 clamp(18px, 2.2vw, 26px)/1.25 var(--cv-heading-font); } .cv-home2-hero__caption-index { color: rgba(255,255,255,.78); font: 700 10px/1.4 var(--cv-body-font); letter-spacing: .15em; } .cv-home2-hero__float-shot { position: absolute; z-index: 3; margin: 0; overflow: hidden; border: 6px solid var(--cv-surface); border-radius: 13px; background: var(--cv-surface); box-shadow: 0 18px 46px rgba(8,25,23,.2); opacity: 1; transform: none; } .cv-home2-hero__float-shot--network { inset-block-start: 7%; inset-inline-end: 0; width: 34%; aspect-ratio: 1.08; } .cv-home2-hero__float-shot--network img { height: calc(100% - 42px); } .cv-home2-hero__float-shot--network figcaption { display: flex; height: 42px; align-items: center; padding-inline: 9px; color: var(--cv-text); font: 600 9px/1.35 var(--cv-body-font); } .cv-home2-hero__float-shot--celebration { inset-block-end: 1%; inset-inline-start: 8%; width: 48%; aspect-ratio: 1.9; transition-delay: .36s; } .cv-home2-hero__visual-stamp { position: absolute; z-index: 4; inset-block-start: 51%; inset-inline-start: -2%; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; background: var(--cv-accent); color: var(--cv-on-accent); box-shadow: 0 10px 26px rgba(8,25,23,.16); font: 700 9px/1.2 var(--cv-body-font); letter-spacing: .08em; transform: translateY(-50%); } .cv-home2-hero__visual-stamp i, .cv-home2-hero__eyebrow span { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; } .cv-home2-hero__orbit { position: absolute; z-index: 0; border: 1px solid var(--cv-accent-soft); border-radius: 50%; pointer-events: none; } .cv-home2-hero__orbit--one { width: 74px; aspect-ratio: 1; inset-block-start: 0; inset-inline-start: 12%; } .cv-home2-hero__orbit--two { width: 22px; aspect-ratio: 1; inset-block-end: 13%; inset-inline-end: 7%; background: var(--cv-accent-soft); } .cv-home2-hero__copy { width: 100%; max-width: 590px; justify-self: center; opacity: 1; transform: none; } .cv-home2-hero__eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 clamp(18px, 2.4vw, 28px); color: var(--cv-accent); font: 700 11px/1.45 var(--cv-body-font); letter-spacing: .13em; } .cv-home2-hero__eyebrow span { width: 8px; height: 8px; flex-basis: 8px; } .cv-home2-hero__copy h1 { margin: 0; color: var(--cv-text); font: 500 clamp(42px, 5.3vw, 70px)/1.04 var(--cv-heading-font); letter-spacing: -.05em; text-wrap: balance; } .cv-home2-hero__copy h1 em { color: var(--cv-accent); font-style: normal; } .cv-home2-hero__description { max-width: 49ch; margin: clamp(18px, 2vw, 26px) 0 0; color: var(--cv-text-muted); font: 400 clamp(15px, 1.15vw, 17px)/1.75 var(--cv-body-font); } .cv-home2-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-block-start: clamp(24px, 3vw, 36px); } .cv-home2-hero__button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 16px; padding: 13px 20px; border: 1px solid transparent; border-radius: 7px; font: 700 12px/1.4 var(--cv-body-font); letter-spacing: .04em; text-decoration: none; transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .cv-home2-hero__button span { font-size: 16px; transition: transform .25s ease; } .cv-home2-hero__button:hover span, .cv-home2-hero__button:focus-visible span { transform: translate(3px,-3px); } .cv-home2-hero__button--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-home2-hero__button--primary:hover, .cv-home2-hero__button--primary:focus-visible { background: var(--cv-accent-hover); color: var(--cv-on-accent); box-shadow: 0 12px 25px rgba(12,73,68,.18); transform: translateY(-2px); } .cv-home2-hero__button--secondary { border-color: var(--cv-border); background: var(--cv-surface); color: var(--cv-text); } .cv-home2-hero__button--secondary:hover, .cv-home2-hero__button--secondary:focus-visible { border-color: var(--cv-accent); color: var(--cv-accent); transform: translateY(-2px); } .cv-home2-hero__button:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 3px; } .cv-home2-hero__proof { display: flex; align-items: center; gap: 12px; margin-block-start: clamp(25px, 3vw, 36px); color: var(--cv-text); } .cv-home2-hero__proof-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid var(--cv-border); border-radius: 50%; background: var(--cv-surface); color: var(--cv-accent); } .cv-home2-hero__proof > span:last-child { display: grid; gap: 3px; } .cv-home2-hero__proof strong { font: 700 12px/1.4 var(--cv-body-font); } .cv-home2-hero__proof small { color: var(--cv-text-muted); font: 400 11px/1.5 var(--cv-body-font); } .cv-home2-hero__footline { position: absolute; inset-inline: clamp(20px, 5vw, 72px); inset-block-end: 20px; display: flex; justify-content: space-between; gap: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--cv-border); color: var(--cv-text-muted); font: 700 9px/1.4 var(--cv-body-font); letter-spacing: .12em; } .cv-home2-hero.is-prepared .cv-home2-hero__visual { opacity: 0; transform: translateX(-54px) scale(.97); } .cv-home2-hero.is-prepared .cv-home2-hero__copy { opacity: 0; transform: translateX(54px); } .cv-home2-hero.is-visible .cv-home2-hero__visual, .cv-home2-hero.is-visible .cv-home2-hero__copy { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s cubic-bezier(.18,.75,.2,1); } .cv-home2-hero.is-visible .cv-home2-hero__copy { transition-delay: .16s; } .cv-home2-hero.is-visible .cv-home2-hero__main-shot img { transform: scale(1); } .cv-home2-hero.is-visible .cv-home2-hero__float-shot { animation: cvHome2Float 6s ease-in-out .7s infinite alternate; } .cv-home2-hero.is-visible .cv-home2-hero__float-shot--celebration { animation-delay: 1.1s; } .cv-home2-hero.is-visible .cv-home2-hero__orbit--one { animation: cvHome2Orbit 8s ease-in-out .4s infinite alternate; } @keyframes cvHome2Float { from { transform: translateY(0); } to { transform: translateY(-10px); } } @keyframes cvHome2Orbit { from { transform: rotate(0deg) scale(1); } to { transform: rotate(90deg) scale(1.18); } } @media (max-width: 1023px) { .cv-home2-hero { min-height: auto; padding-block: 58px 76px; } .cv-home2-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 780px; } .cv-home2-hero__visual { width: min(100%, 700px); margin-inline: auto; } .cv-home2-hero__copy { max-width: 700px; } .cv-home2-hero__copy h1 { max-width: 13ch; } .cv-home2-hero__footline { bottom: 16px; } } @media (max-width: 767px) { .cv-home2-hero { padding: 34px 18px 72px; } .cv-home2-hero__inner { gap: 28px; } .cv-home2-hero__visual { width: 100%; aspect-ratio: 1.04 / 1; } .cv-home2-hero__main-shot { inset-block-end: 11%; inset-inline-end: 11%; border-radius: 14px; } .cv-home2-hero__main-shot::after { inset-block-start: 48%; } .cv-home2-hero__float-shot { border-width: 4px; border-radius: 10px; } .cv-home2-hero__float-shot--network { width: 37%; } .cv-home2-hero__float-shot--network figcaption { height: 38px; padding-inline: 7px; font-size: 8px; } .cv-home2-hero__float-shot--network img { height: calc(100% - 38px); } .cv-home2-hero__float-shot--celebration { width: 50%; inset-inline-start: 5%; } .cv-home2-hero__visual-stamp { gap: 6px; padding: 9px 10px; font-size: 8px; } .cv-home2-hero__copy { text-align: start; } .cv-home2-hero__eyebrow { margin-bottom: 16px; font-size: 10px; letter-spacing: .1em; } .cv-home2-hero__copy h1 { max-width: 15ch; font-size: clamp(40px, 8.5vw, 58px); } .cv-home2-hero__description { margin-top: 16px; font-size: 15px; } .cv-home2-hero__actions { gap: 9px; margin-block-start: 22px; } .cv-home2-hero__button { min-height: 48px; padding-inline: 15px; font-size: 11px; } .cv-home2-hero__proof { margin-block-start: 22px; } .cv-home2-hero__footline { inset-inline: 18px; font-size: 8px; } .cv-home2-hero::before { display: none; } } @media (max-width: 479px) { .cv-home2-hero { padding-inline: 14px; } .cv-home2-hero__visual { aspect-ratio: .96 / 1; } .cv-home2-hero__main-caption { inset-inline: 14px; inset-block-end: 16px; font-size: 17px; } .cv-home2-hero__caption-index { font-size: 9px; } .cv-home2-hero__float-shot--network { width: 39%; } .cv-home2-hero__visual-stamp { inset-inline-start: -1%; gap: 5px; padding: 8px; font-size: 7px; } .cv-home2-hero__copy h1 { font-size: clamp(37px, 10vw, 46px); } .cv-home2-hero__actions { align-items: stretch; flex-direction: column; } .cv-home2-hero__button { width: 100%; justify-content: space-between; font-size: 12px; } .cv-home2-hero__footline { inset-inline: 14px; letter-spacing: .08em; } } @media (prefers-reduced-motion: reduce) { .cv-home2-hero *, .cv-home2-hero *::before, .cv-home2-hero *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .cv-home2-hero.is-prepared .cv-home2-hero__visual, .cv-home2-hero.is-prepared .cv-home2-hero__copy { opacity: 1; transform: none; } .cv-home2-hero__main-shot img { transform: none; } } /* Compact the homepage CTA while retaining the shared contact-page design. */ .cv-index-cta { min-height: 0; height: auto; padding: clamp(48px, 6vw, 76px) clamp(18px, 4vw, 48px); } .cv-index-cta .cv-final-cta__inner { width: min(100%, 1000px); } .cv-index-cta .cv-final-cta__eyebrow { margin-bottom: clamp(16px, 2vw, 24px); } .cv-index-cta .cv-final-cta__title { max-width: 980px; } .cv-index-cta .cv-final-cta__description { margin-top: clamp(18px, 2.2vw, 26px); } .cv-index-cta .cv-final-cta__actions { margin-top: clamp(22px, 3vw, 34px); } .cv-index-cta .cv-final-cta__meta { margin-top: clamp(22px, 3vw, 32px); } @media (max-width: 767px) { .cv-index-cta { padding: 46px 18px; } .cv-index-cta .cv-final-cta__eyebrow { margin-bottom: 16px; } .cv-index-cta .cv-final-cta__description { margin-top: 18px; } .cv-index-cta .cv-final-cta__actions { width: min(100%, 420px); margin-top: 23px; gap: 10px; } .cv-index-cta .cv-final-cta__button { width: 100%; min-height: 48px; } .cv-index-cta .cv-final-cta__meta { margin-top: 22px; } } @media (max-width: 399px) { .cv-index-cta { padding: 40px 14px; } .cv-index-cta .cv-final-cta__eyebrow { gap: 10px; letter-spacing: .1em; } .cv-index-cta .cv-final-cta__eyebrow-line { width: 22px; } .cv-index-cta .cv-final-cta__actions { width: 100%; } .cv-index-cta .cv-final-cta__meta { gap: 8px; letter-spacing: .08em; } } /* ========================================================= HOME 2 HERO · "OPENING NIGHT" Mobile-S/M/L (base) · Tab 768 · Laptop 1024 · Laptop-L 1440 ========================================================= */ .cv-h2, .cv-h2 *, .cv-h2 *::before, .cv-h2 *::after { box-sizing: border-box; } .cv-h2 { --cv-h2-cut: calc(100% - 64px); /* ticket perforation position */ --cv-h2-rot: -3deg; /* ticket tilt */ --cv-h2-bgx: 0%; /* highlight sweep origin */ --cv-h2-ah: 300px; /* arch height */ position: relative; isolation: isolate; display: flex; flex-direction: column; min-block-size: calc(100vh - var(--cv-navbar-height)); min-block-size: calc(100svh - var(--cv-navbar-height)); overflow-x: clip; background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-h2__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(58% 52% at 78% 38%, var(--cv-accent-soft), transparent 70%), radial-gradient(40% 40% at 6% 92%, var(--cv-accent-soft), transparent 70%); opacity: 0.9; pointer-events: none; } /* ---------- Curtain ---------- */ .cv-h2__curtain { display: none; position: absolute; inset: 0; z-index: 20; direction: ltr; overflow: hidden; pointer-events: none; } .cv-h2[data-state] .cv-h2__curtain { display: flex; } .cv-h2[data-state="done"] .cv-h2__curtain { display: none; } .cv-h2__cur { flex: 1 1 50%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0, rgba(0, 0, 0, 0.24) 14px, rgba(255, 255, 255, 0.07) 14px, rgba(255, 255, 255, 0.07) 28px), var(--cv-accent); box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); } .cv-h2[data-state="ready"] .cv-h2__cur { transition: transform 1500ms cubic-bezier(0.76, 0, 0.24, 1) 300ms; } .cv-h2[data-state="ready"] .cv-h2__cur--l { transform: translateX(-101%); } .cv-h2[data-state="ready"] .cv-h2__cur--r { transform: translateX(101%); } /* ---------- Layout ---------- */ .cv-h2__inner { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 34px; inline-size: 100%; max-inline-size: 1400px; margin-inline: auto; padding: clamp(28px, 5vw, 56px) var(--cv-navbar-padding) 14px; } /* ---------- Copy ---------- */ .cv-h2__pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 999px; color: var(--cv-text); font-size: var(--cv-hero-small); font-weight: 700; line-height: 1.3; } .cv-h2__dot { flex: none; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cv-accent); animation: cvH2Dot 1.8s ease-out infinite; } .cv-h2__title { margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; } .cv-h2__line { display: block; overflow: hidden; padding-block: 0.08em; margin-block: -0.08em; } .cv-h2__line > span { display: block; } .cv-h2__mark { padding-inline: 0.06em; background-color: transparent; background-image: linear-gradient(var(--cv-accent-soft), var(--cv-accent-soft)); background-repeat: no-repeat; background-position: var(--cv-h2-bgx) 88%; background-size: 100% 42%; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .cv-h2__lead { max-inline-size: 50ch; margin: 20px 0 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); line-height: 1.65; } .cv-h2__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; } .cv-h2__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 150px; min-block-size: 50px; padding: 12px 24px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: background-color var(--cv-transition), transform var(--cv-transition); } .cv-h2__btn:hover { transform: translateY(-2px); } .cv-h2__btn:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } .cv-h2__btn--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-h2__btn--primary:hover { background: var(--cv-accent-hover); } .cv-h2__btn--primary:active { background: var(--cv-accent-pressed); } .cv-h2__btn--secondary { background: transparent; border-color: var(--cv-text); color: var(--cv-text); } .cv-h2__btn--secondary:hover { background: var(--cv-accent-soft); } .cv-h2__stats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 28px 0 0; padding: 0; list-style: none; } .cv-h2__stats li { display: grid; gap: 2px; } .cv-h2__stats strong { color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 26px; font-weight: 600; line-height: 1.1; } .cv-h2__stats span { color: var(--cv-text-muted); font-size: 12.5px; font-weight: 600; line-height: 1.3; } /* ---------- Stage ---------- */ .cv-h2__stage { position: relative; display: grid; justify-items: center; min-inline-size: 0; } .cv-h2__tilt { position: relative; inline-size: min(100%, 250px); transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 400ms ease-out; will-change: transform; } .cv-h2__frame { position: absolute; inset: -10px; border: 1.5px dashed var(--cv-accent); border-radius: 999px 999px 30px 30px; pointer-events: none; } .cv-h2__arch { position: relative; isolation: isolate; block-size: var(--cv-h2-ah); overflow: hidden; background: #0A0D0D; border-radius: 999px 999px 22px 22px; clip-path: inset(0 0 0 0 round 999px 999px 22px 22px); } .cv-h2__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 42%; animation: cvH2Ken 18s ease-in-out infinite alternate; } .cv-h2__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(5, 9, 9, 0.7) 0%, rgba(5, 9, 9, 0.1) 50%, rgba(5, 9, 9, 0.25) 100%); } .cv-h2__beam { position: absolute; inset-block-start: -6%; z-index: 2; inline-size: 56%; block-size: 112%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), transparent 80%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity: 0.4; transform-origin: 50% 0; mix-blend-mode: screen; } .cv-h2__beam--l { inset-inline-start: -8%; animation: cvH2SwingL 5s ease-in-out infinite alternate; } .cv-h2__beam--r { inset-inline-end: -8%; animation: cvH2SwingR 6.4s ease-in-out -2s infinite alternate; } .cv-h2__lite { position: absolute; inset-block-start: 18%; inset-inline-start: 15%; z-index: 3; inline-size: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 62%); mix-blend-mode: overlay; opacity: 0.8; pointer-events: none; animation: cvH2Sweep 8s ease-in-out infinite alternate; } .cv-h2__lite.is-follow { animation: none; transition: transform 260ms ease-out; } .cv-h2__dust { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .cv-h2__dust i { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-end: -10px; inline-size: var(--s); block-size: var(--s); border-radius: 50%; background: #FFFFFF; opacity: 0; animation: cvH2Dust var(--d) linear var(--dl) infinite; } /* Applause bubble */ .cv-h2__bubble { position: absolute; inset-block-start: 8%; inset-inline-end: 0; z-index: 4; inline-size: 64px; block-size: 64px; overflow: hidden; border: 4px solid var(--cv-bg); border-radius: 50%; box-shadow: 0 0 0 0 var(--cv-accent); animation: cvH2Ring 2.6s ease-out infinite; } .cv-h2__bubble img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .cv-h2__bubble-tag { display: none; } /* Ticket */ .cv-h2__ticketw { position: relative; z-index: 5; inline-size: min(100%, 310px); margin-block-start: -46px; filter: drop-shadow(0 18px 22px rgba(10, 13, 13, 0.4)); transform: rotate(var(--cv-h2-rot)); transition: transform 320ms ease; } .cv-h2__ticketw:hover { transform: rotate(0deg) translateY(-3px); } .cv-h2__ticket { display: flex; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 16px; -webkit-mask: radial-gradient(circle at var(--cv-h2-cut) 0, transparent 8.5px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cv-h2-cut) 100%, transparent 8.5px, #000 9.5px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at var(--cv-h2-cut) 0, transparent 8.5px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cv-h2-cut) 100%, transparent 8.5px, #000 9.5px) bottom / 100% 51% no-repeat; } .cv-h2__tmain { flex: 1; min-inline-size: 0; padding: 14px 14px 14px 16px; } .cv-h2__tk { margin: 0; color: var(--cv-text-muted); font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; } .cv-h2__tt { margin: 4px 0 10px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 16px; font-weight: 700; line-height: 1.25; } .cv-h2__count { display: flex; gap: 5px; } .cv-h2__count span { display: grid; justify-items: center; flex: 1 1 0; min-inline-size: 34px; padding: 6px 2px 5px; background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: 8px; } .cv-h2__count b { color: var(--cv-text); font-size: 16px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .cv-h2__count small { color: var(--cv-text-muted); font-size: 10px; font-weight: 600; line-height: 1.3; } .cv-h2__stub { display: grid; place-items: center; flex: none; inline-size: 64px; background: var(--cv-accent-soft); border-inline-start: 2px dashed var(--cv-border); color: var(--cv-text); writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } /* ---------- Seat map ---------- */ .cv-h2__house { position: relative; z-index: 1; padding-inline: var(--cv-navbar-padding); padding-block-start: 10px; } .cv-h2__seats { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 20), var(--seat, 15px)); gap: var(--gap, 7px); justify-content: center; padding-block-end: var(--curve, 16px); min-block-size: 60px; } .cv-h2__seat { position: relative; inline-size: var(--seat, 15px); block-size: var(--seat, 15px); border-radius: 7px 7px 3px 3px; background: var(--cv-border); transform: translateY(calc(var(--y, 0px) - var(--hv, 0) * 7px)) scale(calc(1 + var(--hv, 0) * 0.35)); transition: background-color 450ms ease var(--d, 0ms), transform 180ms ease; } .cv-h2__seat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cv-accent-hover); opacity: var(--hv, 0); } .cv-h2__seats.is-live .cv-h2__seat { background: var(--cv-accent); } .cv-h2__seats.is-live .cv-h2__seat.is-tw { animation: cvH2Twinkle 3.4s ease-in-out var(--tw, 0s) infinite; } .cv-h2__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; max-inline-size: 1400px; margin-inline: auto; padding-block: 14px 18px; border-block-start: 1px solid var(--cv-border); } .cv-h2__bar-k { margin: 0; color: var(--cv-text-muted); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; } .cv-h2__bar-v { margin: 0; color: var(--cv-text); font-size: 14px; font-weight: 600; line-height: 1.4; } .cv-h2__bar-v strong { color: var(--cv-accent); font-family: var(--cv-heading-font); font-size: 20px; font-variant-numeric: tabular-nums; } /* ---------- Keyframes ---------- */ @keyframes cvH2Dot { 0% { box-shadow: 0 0 0 0 var(--cv-accent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } } @keyframes cvH2Ring { 0% { box-shadow: 0 0 0 0 var(--cv-accent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } } @keyframes cvH2Ken { from { transform: scale(1.04); } to { transform: scale(1.16) translateY(-2%); } } @keyframes cvH2SwingL { from { transform: rotate(-22deg); } to { transform: rotate(-3deg); } } @keyframes cvH2SwingR { from { transform: rotate(22deg); } to { transform: rotate(3deg); } } @keyframes cvH2Sweep { from { transform: translate(-32%, -12%); } to { transform: translate(34%, 26%); } } @keyframes cvH2Dust { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.85; } 100% { transform: translateY(-340px); opacity: 0; } } @keyframes cvH2Twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ---------- Intro states (set by the inline script + script.js) ---------- */ .cv-h2[data-state="loading"] .cv-h2__line > span { transform: translateY(112%); } .cv-h2[data-state="loading"] [data-h2-in] { opacity: 0; transform: translateY(26px); } .cv-h2[data-state="loading"] .cv-h2__mark { background-size: 0% 42%; } .cv-h2[data-state="loading"] .cv-h2__arch { clip-path: inset(100% 0 0 0 round 999px 999px 22px 22px); } .cv-h2[data-state="loading"] .cv-h2__frame { opacity: 0; transform: scale(0.92); } .cv-h2[data-state="loading"] .cv-h2__ticketw { opacity: 0; transform: translateY(70px) rotate(10deg); } .cv-h2[data-state="loading"] [data-h2-pop] { opacity: 0; transform: scale(0); } .cv-h2[data-state="loading"] .cv-h2__house { opacity: 0; transform: translateY(30px); } .cv-h2[data-state="ready"] .cv-h2__line > span { transition: transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(900ms + var(--k, 0) * 130ms); } .cv-h2[data-state="ready"] [data-h2-in] { transition: opacity 800ms ease calc(900ms + var(--k, 0) * 130ms), transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(900ms + var(--k, 0) * 130ms); } .cv-h2[data-state="ready"] .cv-h2__mark { transition: background-size 900ms ease 2000ms; } .cv-h2[data-state="ready"] .cv-h2__arch { transition: clip-path 1500ms cubic-bezier(0.7, 0, 0.2, 1) 1000ms; } .cv-h2[data-state="ready"] .cv-h2__frame { transition: opacity 800ms ease 1800ms, transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 1800ms; } .cv-h2[data-state="ready"] .cv-h2__ticketw { transition: opacity 700ms ease 2200ms, transform 1000ms cubic-bezier(0.2, 0.8, 0.3, 1.2) 2200ms; } .cv-h2[data-state="ready"] [data-h2-pop] { transition: transform 700ms cubic-bezier(0.2, 0.9, 0.3, 1.4) 2400ms, opacity 400ms ease 2400ms; } .cv-h2[data-state="ready"] .cv-h2__house { transition: opacity 800ms ease 1500ms, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 1500ms; } /* ---------- Mobile-L · 425px+ ---------- */ @media (min-width: 425px) { .cv-h2__stats strong { font-size: 28px; } .cv-h2__bubble { inline-size: 72px; block-size: 72px; } } /* ---------- Tablet · 768px+ ---------- */ @media (min-width: 768px) { .cv-h2 { --cv-h2-ah: clamp(340px, 52vw, 460px); } .cv-h2__inner { gap: 44px; } .cv-h2__tilt { inline-size: min(100%, calc(var(--cv-h2-ah) * 0.78)); } .cv-h2__btn { flex: 0 0 auto; } .cv-h2__stats { gap: 14px 36px; } .cv-h2__stats strong { font-size: 30px; } .cv-h2__bubble { inset-inline-end: calc(50% - var(--cv-h2-ah) * 0.39 - 30px); inline-size: 84px; block-size: 84px; } .cv-h2__bubble-tag { display: inline-flex; position: absolute; inset-block-start: calc(8% + 94px); inset-inline-end: calc(50% - var(--cv-h2-ah) * 0.39 - 44px); z-index: 4; padding: 7px 13px; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 999px; color: var(--cv-text); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; } .cv-h2__ticketw { inline-size: 340px; margin-block-start: -52px; } .cv-h2__tt { font-size: 17px; } .cv-h2__count b { font-size: 18px; } .cv-h2__bar { flex-wrap: nowrap; } } /* ---------- Laptop · 1024px+ ---------- */ @media (min-width: 1024px) { .cv-h2 { --cv-h2-ah: clamp(380px, 60svh, 540px); } .cv-h2__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; } .cv-h2__stage { align-self: center; } .cv-h2__bubble { inset-inline-end: 4%; } .cv-h2__bubble-tag { inset-inline-end: 1%; } .cv-h2__ticketw { position: absolute; inset-block-end: 6%; inset-inline-start: -52px; inline-size: 330px; margin: 0; } .cv-h2__stats strong { font-size: 32px; } } /* ---------- Laptop-L · 1440px+ ---------- */ @media (min-width: 1440px) { .cv-h2 { --cv-h2-ah: clamp(440px, 62svh, 620px); } .cv-h2__inner { gap: 80px; } .cv-h2__lead { max-inline-size: 54ch; font-size: 17px; } .cv-h2__ticketw { inline-size: 370px; inset-inline-start: -80px; } .cv-h2__tt { font-size: 19px; } .cv-h2__count b { font-size: 20px; } .cv-h2__bubble { inline-size: 96px; block-size: 96px; } } /* ---------- Mobile-S · up to 374px ---------- */ @media (max-width: 374px) { .cv-h2 { --cv-h2-ah: 270px; } .cv-h2__stats { gap: 12px 18px; } .cv-h2__stats strong { font-size: 23px; } .cv-h2__ticketw { inline-size: 100%; } .cv-h2__tmain { padding: 12px 10px 12px 12px; } .cv-h2__tt { font-size: 15px; } .cv-h2__count { gap: 4px; } .cv-h2__count span { min-inline-size: 32px; } .cv-h2__count b { font-size: 15px; } .cv-h2__stub { inline-size: 54px; } .cv-h2 { --cv-h2-cut: calc(100% - 54px); } } @media (max-width: 767px) { .cv-h2__btn { inline-size: 100%; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cv-h2__img, .cv-h2__beam, .cv-h2__lite, .cv-h2__dust i, .cv-h2__dot, .cv-h2__bubble, .cv-h2__seats.is-live .cv-h2__seat.is-tw { animation: none; } .cv-h2__dust { display: none; } .cv-h2__tilt, .cv-h2__ticketw, .cv-h2__seat { transition: none; } } /* ========================================================= FLAP BOARD · FEATURED PAST CONFERENCES Mobile-S/M/L (base) · Tab 768 · Laptop 1024 · Laptop-L 1440 ========================================================= */ .cv-fb, .cv-fb *, .cv-fb *::before, .cv-fb *::after { box-sizing: border-box; } .cv-fb { --fb-flip: 1; --cv-fb-origin: 0 50%; position: relative; isolation: isolate; padding-block: clamp(56px, 8vw, 110px); padding-inline: var(--cv-navbar-padding); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-fb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 88% 18%, var(--cv-accent-soft), transparent 70%), radial-gradient(40% 35% at 4% 92%, var(--cv-accent-soft), transparent 70%); opacity: 0.85; pointer-events: none; } .cv-fb__inner { max-inline-size: 1400px; margin-inline: auto; } /* ---------- Header ---------- */ .cv-fb__head { display: flex; flex-direction: column; gap: 20px; margin-block-end: clamp(26px, 4vw, 44px); } .cv-fb__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-fb__eyebrow::before { content: ""; flex: none; inline-size: 28px; block-size: 2px; background: var(--cv-accent); } .cv-fb__title { margin: 12px 0 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .cv-fb__lead { max-inline-size: 46ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); line-height: 1.65; } .cv-fb__btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; margin-block-start: 20px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); background: var(--cv-accent); color: var(--cv-on-accent); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: background-color var(--cv-transition), transform var(--cv-transition); } .cv-fb__btn:hover { background: var(--cv-accent-hover); transform: translateY(-1px); } .cv-fb__btn:active { background: var(--cv-accent-pressed); } .cv-fb__btn:focus-visible, .cv-fb__link:focus-visible, .cv-fb__next:focus-visible, .cv-fb__row:focus-visible, .cv-fb__pause:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } /* ---------- Layout ---------- */ .cv-fb__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; } .cv-fb__gate { order: -1; } /* ---------- Flap tiles (shared) ---------- */ .cv-fb__grp { display: inline-flex; gap: 2px; color: #F4F7F6; font-family: var(--cv-heading-font); font-size: 13px; font-weight: 700; line-height: 1; perspective: 400px; } .cv-fb__t { position: relative; display: inline-grid; place-items: center; inline-size: var(--tw, 12px); block-size: var(--th, 19px); overflow: hidden; background: #1D2827; border-radius: 3px; color: #F4F7F6; font-family: var(--cv-heading-font); font-size: var(--tf, 11.5px); font-weight: 700; line-height: 1; transform-origin: 50% 0; } .cv-fb__t::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 1px; background: rgba(0, 0, 0, 0.6); } .cv-fb__t.is-gap { inline-size: 6px; background: transparent; } .cv-fb__t.is-gap::after { display: none; } .cv-fb__t.is-f { animation: cvFbTick 150ms ease-out; } /* ---------- Board ---------- */ .cv-fb__board { --fb-bg: #0F1514; --fb-row: #17211F; --fb-line: rgba(255, 255, 255, 0.11); --fb-text: #F4F7F6; --fb-muted: #9FB0AC; --fb-acc: #5BC4BB; overflow: hidden; background: var(--fb-bg); border: 1px solid var(--cv-border); border-radius: 20px; color: var(--fb-text); box-shadow: 0 34px 60px -44px rgba(10, 13, 13, 0.6); } .cv-fb__bhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border-block-end: 1px solid var(--fb-line); } .cv-fb__btitle { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--fb-text); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; } .cv-fb__live { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--fb-acc); animation: cvFbPulse 1.8s ease-out infinite; } .cv-fb__clock { display: inline-flex; align-items: center; gap: 5px; } .cv-fb__clock small { margin-inline-end: 4px; color: var(--fb-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .cv-fb__clock i { color: var(--fb-text); font-style: normal; font-weight: 700; } .cv-fb__list { margin: 0; padding: 0; list-style: none; } .cv-fb__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no name type" "cells cells cells"; gap: 10px 12px; align-items: center; inline-size: 100%; margin: 0; padding: 15px 16px 14px; background: transparent; border: 0; border-block-end: 1px solid var(--fb-line); color: var(--fb-text); font: inherit; text-align: start; cursor: pointer; transition: background-color 250ms ease; } .cv-fb__row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--fb-acc); transform: scaleY(0); transform-origin: 50% 0; transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1); } .cv-fb__row:hover { background: rgba(255, 255, 255, 0.04); } .cv-fb__row.is-active { background: var(--fb-row); } .cv-fb__row.is-active::before { transform: scaleY(1); } .cv-fb__no { grid-area: no; color: var(--fb-muted); font-family: var(--cv-heading-font); font-size: 14px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; transition: color 250ms ease; } .cv-fb__row.is-active .cv-fb__no { color: var(--fb-acc); } .cv-fb__name { grid-area: name; color: var(--fb-text); font-family: var(--cv-heading-font); font-size: 16px; font-weight: 700; line-height: 1.25; } .cv-fb__type { grid-area: type; padding: 4px 10px; border: 1px solid var(--fb-line); border-radius: 999px; color: var(--fb-muted); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; transition: color 250ms ease, border-color 250ms ease; } .cv-fb__row.is-active .cv-fb__type { border-color: var(--fb-acc); color: var(--fb-acc); } .cv-fb__cells { grid-area: cells; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-inline-start: 0; } .cv-fb__cell { display: grid; gap: 4px; } .cv-fb__cell small { color: var(--fb-muted); font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; } .cv-fb__next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px 16px; background: transparent; color: var(--fb-text); text-decoration: none; transition: background-color 250ms ease; } .cv-fb__next:hover { background: rgba(255, 255, 255, 0.05); } .cv-fb__next-dot { flex: none; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--fb-acc); animation: cvFbPulse 1.8s ease-out infinite; } .cv-fb__next-copy { flex: 1 1 200px; color: var(--fb-text); font-size: 13.5px; font-weight: 500; line-height: 1.45; } .cv-fb__next-copy b { color: var(--fb-acc); font-weight: 700; } .cv-fb__next-go { display: inline-flex; align-items: center; gap: 8px; color: var(--fb-acc); font-size: 13px; font-weight: 700; line-height: 1.2; } .cv-fb__next-go svg, .cv-fb__link svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms ease; } .cv-fb__next:hover .cv-fb__next-go svg, .cv-fb__link:hover svg { transform: translateX(4px); } /* ---------- Gate screen ---------- */ .cv-fb__gate { overflow: hidden; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 20px; } .cv-fb__screen { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #0A0D0D; } /* faint monitor scan-lines */ .cv-fb__screen::after { content: ""; position: absolute; inset: 0; z-index: 4; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 4px); pointer-events: none; } .cv-fb__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; animation: cvFbKen 16s ease-in-out infinite alternate; } .cv-fb__blinds { position: absolute; inset: 0; z-index: 2; perspective: 900px; pointer-events: none; } .cv-fb__strip { position: absolute; inset-inline: 0; inset-block-start: calc(var(--i) * 12.5%); block-size: 12.5%; overflow: hidden; transform: rotateX(-90deg); transform-origin: 50% 0; backface-visibility: hidden; } .cv-fb__strip img { position: absolute; inset-inline: 0; inset-block-start: calc(var(--i) * -100%); inline-size: 100%; block-size: 800%; object-fit: cover; } .cv-fb__blinds.is-run .cv-fb__strip { animation: cvFbBlind 560ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 60ms) forwards; } .cv-fb__chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(8, 12, 12, 0.78); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .cv-fb__chip--a { inset-block-start: 12px; inset-inline-start: 12px; } .cv-fb__chip--b { inset-block-end: 16px; inset-inline-start: 12px; } .cv-fb__chip--b i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #5BC4BB; animation: cvFbPulse 1.8s ease-out infinite; } .cv-fb__pause { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 5; display: grid; place-items: center; inline-size: 34px; block-size: 34px; padding: 0; background: rgba(8, 12, 12, 0.78); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: #FFFFFF; cursor: pointer; } .cv-fb__ico { inline-size: 15px; block-size: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cv-fb__ico--play, .cv-fb__pause[aria-pressed="true"] .cv-fb__ico--pause { display: none; } .cv-fb__pause[aria-pressed="true"] .cv-fb__ico--play { display: block; fill: currentColor; } .cv-fb__prog { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 5; block-size: 4px; background: rgba(255, 255, 255, 0.28); } .cv-fb__prog span { display: block; inline-size: 100%; block-size: 100%; background: #5BC4BB; transform: scaleX(0); transform-origin: var(--cv-fb-origin); } .cv-fb__prog span.is-run { animation: cvFbProg var(--fb-dur, 7s) linear forwards; } .cv-fb:not([data-fb-play]) .cv-fb__prog span { animation-play-state: paused; } /* ---------- Gate info ---------- */ .cv-fb__info { padding: 18px 16px 20px; } .cv-fb__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-block-end: 14px; } .cv-fb__pill { padding: 5px 11px; background: var(--cv-accent-soft); border-radius: 999px; color: var(--cv-text); font-size: 11.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } .cv-fb__ititle { margin: 0 0 8px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(22px, 6vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } .cv-fb__idesc { margin: 0 0 16px; color: var(--cv-text-muted); font-size: 15px; line-height: 1.6; } .cv-fb__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 18px; } .cv-fb__facts > div { padding: 10px 13px; background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-md); } .cv-fb__facts dt { margin: 0 0 3px; color: var(--cv-text-muted); font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; } .cv-fb__facts dd { margin: 0; color: var(--cv-text); font-size: 14px; font-weight: 600; line-height: 1.4; } .cv-fb__link { display: inline-flex; align-items: center; gap: 10px; min-block-size: 46px; padding: 10px 20px; background: var(--cv-accent); border-radius: var(--cv-radius-md); color: var(--cv-on-accent); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color var(--cv-transition); } .cv-fb__link:hover { background: var(--cv-accent-hover); } .cv-fb__info.is-swap .cv-fb__ititle, .cv-fb__info.is-swap .cv-fb__idesc, .cv-fb__info.is-swap .cv-fb__facts, .cv-fb__info.is-swap .cv-fb__link { animation: cvFbRise 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 80ms); } /* ---------- Keyframes ---------- */ @keyframes cvFbTick { from { transform: rotateX(-85deg); } to { transform: none; } } @keyframes cvFbBlind { from { transform: rotateX(-90deg); } to { transform: rotateX(0deg); } } @keyframes cvFbProg { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes cvFbKen { from { transform: scale(1.02); } to { transform: scale(1.1); } } @keyframes cvFbPulse { 0% { box-shadow: 0 0 0 0 #5BC4BB; } 70%, 100% { box-shadow: 0 0 0 8px transparent; } } @keyframes cvFbRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes cvFbSlide { from { opacity: 0; transform: translateX(calc(var(--fb-flip, 1) * -34px)); } to { opacity: 1; transform: none; } } /* ---------- Entrance (enabled by script.js) ---------- */ .cv-fb[data-fb-ready] [data-fb-reveal] { opacity: 0; } .cv-fb[data-fb-ready] [data-fb-reveal].is-in { animation: cvFbRise 750ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--fb-d, 0ms) both; } .cv-fb[data-fb-ready] [data-fb-reveal="row"].is-in { animation-name: cvFbSlide; } /* ---------- Mobile-L · 425px+ ---------- */ @media (min-width: 425px) { .cv-fb { --tw: 13px; --th: 20px; --tf: 12px; } .cv-fb__row { padding: 16px 18px 15px; } .cv-fb__bhead { padding: 15px 18px; } .cv-fb__info { padding: 20px 20px 22px; } } /* ---------- Tablet · 768px+ ---------- */ @media (min-width: 768px) { .cv-fb__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; } .cv-fb__head-end { flex: 0 1 460px; } .cv-fb__screen { aspect-ratio: 16 / 9; } .cv-fb__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-fb__name { font-size: 18px; } .cv-fb__ititle { font-size: 30px; } .cv-fb__idesc { font-size: 16px; } .cv-fb__info { padding: 24px 26px 26px; } } /* ---------- Laptop · 1024px+ ---------- */ @media (min-width: 1024px) { .cv-fb { --tw: 14px; --th: 22px; --tf: 13px; } .cv-fb__layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 28px; } .cv-fb__gate { order: 0; } .cv-fb__screen { aspect-ratio: 4 / 3; } .cv-fb__facts { grid-template-columns: minmax(0, 1fr); } .cv-fb__row { padding: 16px 20px 15px; } .cv-fb__bhead { padding: 16px 20px; } .cv-fb__ititle { font-size: 26px; } .cv-fb__idesc { min-block-size: calc(1.6em * 3); } .cv-fb__info { padding: 22px 24px 24px; } } /* ---------- Laptop-L · 1440px+ ---------- */ @media (min-width: 1440px) { .cv-fb { --tw: 15px; --th: 24px; --tf: 14px; } .cv-fb__layout { gap: 40px; } .cv-fb__row { padding: 19px 24px 18px; gap: 12px 16px; } .cv-fb__name { font-size: 20px; } .cv-fb__ititle { font-size: 30px; } .cv-fb__idesc { font-size: 16px; } .cv-fb__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-fb__info { padding: 26px 30px 30px; } } /* ---------- Mobile-S · up to 374px ---------- */ @media (max-width: 374px) { .cv-fb { --tw: 11px; --th: 18px; --tf: 10.5px; } .cv-fb__row { padding: 14px 12px 13px; gap: 9px 10px; } .cv-fb__cells { gap: 8px 12px; } .cv-fb__name { font-size: 15px; } .cv-fb__info { padding: 16px 14px 18px; } .cv-fb__next { padding-inline: 12px; } } @media (max-width: 767px) { .cv-fb__btn, .cv-fb__link { inline-size: 100%; justify-content: center; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cv-fb [data-fb-reveal] { opacity: 1 !important; animation: none !important; } .cv-fb__img, .cv-fb__live, .cv-fb__next-dot, .cv-fb__chip--b i, .cv-fb__t.is-f, .cv-fb__prog span.is-run { animation: none !important; } .cv-fb__info.is-swap .cv-fb__ititle, .cv-fb__info.is-swap .cv-fb__idesc, .cv-fb__info.is-swap .cv-fb__facts, .cv-fb__info.is-swap .cv-fb__link { animation: none; } .cv-fb__row, .cv-fb__row::before, .cv-fb__next { transition: none; } } /* ========================================================= AV PRODUCTION · CONTROL ROOM + TECH RIDER Mobile-S/M/L (base) · Tab 768 · Laptop 1024 · Laptop-L 1440 ========================================================= */ .cv-av, .cv-av *, .cv-av *::before, .cv-av *::after { box-sizing: border-box; } .cv-av { position: relative; isolation: isolate; padding-block: clamp(56px, 8vw, 110px); padding-inline: var(--cv-navbar-padding); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-av::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 36% at 12% 14%, var(--cv-accent-soft), transparent 70%), radial-gradient(44% 34% at 92% 88%, var(--cv-accent-soft), transparent 70%); opacity: 0.8; pointer-events: none; } .cv-av__inner { max-inline-size: 1400px; margin-inline: auto; } /* ---------- Header ---------- */ .cv-av__head { display: flex; flex-direction: column; gap: 20px; margin-block-end: clamp(26px, 4vw, 44px); } .cv-av__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-av__eyebrow::before { content: ""; flex: none; inline-size: 28px; block-size: 2px; background: var(--cv-accent); } .cv-av__title { margin: 12px 0 0; max-inline-size: 22ch; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .cv-av__lead { max-inline-size: 52ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); line-height: 1.65; } .cv-av__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 22px; } .cv-av__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 160px; min-block-size: 48px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: background-color var(--cv-transition), transform var(--cv-transition); } .cv-av__btn:hover { transform: translateY(-1px); } .cv-av__btn:focus-visible, .cv-av__scene:focus-visible, .cv-av__hue:focus-visible, .cv-av__step button:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } .cv-av__btn--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-av__btn--primary:hover { background: var(--cv-accent-hover); } .cv-av__btn--primary:active { background: var(--cv-accent-pressed); } .cv-av__btn--secondary { background: transparent; border-color: var(--cv-text); color: var(--cv-text); } .cv-av__btn--secondary:hover { background: var(--cv-accent-soft); } /* ========================================================= CONTROL ROOM (dark in both themes) ========================================================= */ .cv-av__room { --av-bg: #0B1010; --av-panel: #121A19; --av-line: rgba(255, 255, 255, 0.11); --av-text: #F4F7F6; --av-muted: #9FB0AC; --av-acc: #5BC4BB; --av-track: #26322F; overflow: hidden; background: var(--av-bg); border: 1px solid var(--cv-border); border-radius: 22px; color: var(--av-text); box-shadow: 0 40px 70px -48px rgba(10, 13, 13, 0.7); } .cv-av__roombar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 13px 16px; border-block-end: 1px solid var(--av-line); } .cv-av__rooml, .cv-av__air, .cv-av__hint { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.3; } .cv-av__rooml { display: inline-flex; align-items: center; gap: 10px; color: var(--av-text); letter-spacing: 0.12em; text-transform: uppercase; } .cv-av__rec { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #FF6B6B; animation: cvAvBlink 1.4s steps(1) infinite; } .cv-av__hint { display: none; color: var(--av-muted); font-weight: 600; } .cv-av__air { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(91, 196, 187, 0.16); border-radius: 999px; color: var(--av-acc); letter-spacing: 0.1em; text-transform: uppercase; } .cv-av__air i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--av-acc); animation: cvAvPulse 1.8s ease-out infinite; } .cv-av__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; } .cv-av__main { display: grid; gap: 14px; min-inline-size: 0; align-content: start; } /* ---------- Stage preview ---------- */ .cv-av__stage { --av-hue: rgb(var(--av-hue-rgb)); position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(to bottom, #04070A 0%, #0A1114 70%, #0C1517 100%); border: 1px solid var(--av-line); border-radius: 16px; } .cv-av__truss { position: absolute; inset-inline: 8%; inset-block-start: 4%; z-index: 4; block-size: 3px; background: #2C3836; border-radius: 2px; } .cv-av__truss i { position: absolute; inset-inline-start: calc((var(--x) - 8) / 84 * 100%); inset-block-start: 2px; inline-size: 9px; block-size: 8px; margin-inline-start: -4px; background: #D9E3E1; border-radius: 2px 2px 5px 5px; box-shadow: 0 0 calc(var(--av-lite) * 12px) rgba(var(--av-hue-rgb), 0.9); } .cv-av__led { position: absolute; inset-inline: 19%; inset-block-start: 14%; z-index: 1; block-size: 44%; overflow: hidden; border: 3px solid #1D2827; border-radius: 4px; background: #000; filter: brightness(calc(0.3 + var(--av-led) * 0.9)) saturate(calc(0.7 + var(--av-led) * 0.5)); box-shadow: 0 0 calc(var(--av-led) * 34px) rgba(var(--av-hue-rgb), 0.45); } .cv-av__led-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 650ms ease; } .cv-av__led-img.is-on { opacity: 1; } .cv-av__pixels { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px); } .cv-av__beams { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .cv-av__beams span { position: absolute; inset-inline-start: calc(var(--x) * 1% - 12%); inset-block-start: 7%; inline-size: 24%; block-size: 76%; background: linear-gradient(to bottom, rgba(var(--av-hue-rgb), 0.95), rgba(var(--av-hue-rgb), 0) 86%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity: calc(var(--av-lite) * 0.62); transform-origin: 50% 0; mix-blend-mode: screen; animation: cvAvSweep 4.6s ease-in-out calc(var(--i) * -0.8s) infinite alternate; } .cv-av__floor { position: absolute; inset-inline: 0; inset-block-end: 12%; z-index: 1; block-size: 30%; background: radial-gradient(ellipse 62% 100% at 50% 0, rgba(var(--av-hue-rgb), calc(0.15 + var(--av-lite) * 0.5)), transparent 72%); pointer-events: none; } .cv-av__spk { position: absolute; inset-block-end: 24%; z-index: 3; inline-size: 9%; block-size: 30%; background: #0F1616; border: 1px solid #26322F; border-radius: 4px; } .cv-av__spk--l { inset-inline-start: 5%; } .cv-av__spk--r { inset-inline-end: 5%; } .cv-av__spk b { position: absolute; inset-inline: 22%; aspect-ratio: 1; background: #1B2726; border-radius: 50%; } .cv-av__spk b:nth-of-type(1) { inset-block-start: 14%; } .cv-av__spk b:nth-of-type(2) { inset-block-end: 14%; } .cv-av__spk i { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 100%; aspect-ratio: 1; border: 2px solid rgba(var(--av-hue-rgb), 0.9); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.4); animation: cvAvRing 1.8s ease-out calc(var(--i) * 0.6s) infinite; } .cv-av__cam { position: absolute; inset-block-end: 24%; z-index: 3; inline-size: 18px; block-size: 12px; background: #D9E3E1; border-radius: 2px; } .cv-av__cam::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -5px; inline-size: 6px; block-size: 6px; margin-block-start: -3px; background: #6B7A77; border-radius: 50%; } .cv-av__cam::after { content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: 2px; inline-size: 4px; block-size: 4px; background: #FF6B6B; border-radius: 50%; animation: cvAvBlink 1.4s steps(1) infinite; } .cv-av__cam--l { inset-inline-start: 19%; } .cv-av__cam--r { inset-inline-end: 19%; transform: scaleX(-1); } .cv-av__langs { position: absolute; inset-inline: 0; inset-block-end: 24%; z-index: 3; display: flex; justify-content: center; gap: 5px; pointer-events: none; } .cv-av__langs span { padding: 3px 7px; background: rgba(8, 12, 12, 0.85); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; opacity: 0; transform: scale(0.5); transition: opacity 300ms ease, transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1.4); } .cv-av__langs span.is-on { opacity: 1; transform: none; } .cv-av__aud { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3; block-size: 22%; background: radial-gradient(circle, #04080A 0, #04080A 5px, transparent 5.6px) 4px 4px / 18px 16px, radial-gradient(circle, #091011 0, #091011 6px, transparent 6.6px) 0 20px / 22px 20px, linear-gradient(to bottom, rgba(var(--av-hue-rgb), 0.35), #060A0B 70%); } .cv-av__tag { position: absolute; inset-block-end: 6px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: rgba(8, 12, 12, 0.9); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; } .cv-av__tag--live { inset-inline-start: 8px; } .cv-av__tag--led { inset-inline-end: 8px; } .cv-av__tag--live i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #FF6B6B; animation: cvAvBlink 1.4s steps(1) infinite; } /* ---------- Console ---------- */ .cv-av__console { display: grid; gap: 14px; padding: 14px; background: var(--av-panel); border: 1px solid var(--av-line); border-radius: 16px; } .cv-av__scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cv-av__scene { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-block-size: 44px; padding: 8px 12px; background: transparent; border: 1px solid var(--av-line); border-radius: 10px; color: var(--av-text); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease; } .cv-av__scene small { color: var(--av-muted); font-size: 11px; font-weight: 700; } .cv-av__scene:hover { border-color: var(--av-acc); } .cv-av__scene.is-on { background: var(--av-acc); border-color: var(--av-acc); color: #04100F; } .cv-av__scene.is-on small { color: #04100F; } /* Faders: horizontal rows on mobile */ .cv-av__faders { display: grid; } .cv-av__ch { display: grid; grid-template-columns: 86px minmax(0, 1fr) 56px; align-items: center; gap: 8px; padding-block: 6px; border-block-end: 1px solid var(--av-line); } .cv-av__ch:last-child { border-block-end: 0; } .cv-av__ch-k { color: var(--av-text); font-size: 13px; font-weight: 700; line-height: 1.25; } .cv-av__ch-v { color: var(--av-acc); font-size: 13px; font-weight: 700; line-height: 1.2; text-align: end; font-variant-numeric: tabular-nums; } .cv-av__ctl { min-inline-size: 0; } .cv-av__fader { position: relative; block-size: 38px; padding-inline: 14px; cursor: pointer; touch-action: pan-y; user-select: none; } .cv-av__fader:focus-visible { outline: none; } .cv-av__fader:focus-visible .cv-av__thumb { outline: 3px solid var(--av-acc); outline-offset: 3px; } .cv-av__rail { position: absolute; inset-inline: 14px; inset-block-start: 50%; block-size: 6px; margin-block-start: -3px; background: var(--av-track); border-radius: 6px; } .cv-av__fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--v) * 100%); background: var(--av-acc); border-radius: inherit; } .cv-av__thumb { position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--v) * 100%); inline-size: 26px; block-size: 26px; margin-block-start: -13px; margin-inline-start: -13px; background: #F4F7F6; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.18); } .cv-av__thumb::after { content: ""; position: absolute; inset-block: 6px; inset-inline: 50% auto; inline-size: 2px; margin-inline-start: -1px; background: #0B1010; border-radius: 2px; } .cv-av__meter { display: none; } /* Options */ .cv-av__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block-start: 14px; border-block-start: 1px solid var(--av-line); } .cv-av__opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; } .cv-av__opt-k { color: var(--av-muted); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; } .cv-av__hues { display: flex; gap: 10px; } .cv-av__hue { inline-size: 30px; block-size: 30px; padding: 0; background: var(--c); border: 2px solid transparent; border-radius: 50%; box-shadow: 0 0 0 2px var(--av-panel); cursor: pointer; transition: transform 200ms ease, border-color 200ms ease; } .cv-av__hue:hover { transform: scale(1.1); } .cv-av__hue.is-on { border-color: #FFFFFF; box-shadow: 0 0 0 2px var(--av-panel), 0 0 0 4px var(--c); } .cv-av__step { display: inline-flex; align-items: center; gap: 10px; color: var(--av-text); font-size: 13px; font-weight: 600; line-height: 1.2; } .cv-av__step button { display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; background: transparent; border: 1px solid var(--av-line); border-radius: 8px; color: var(--av-text); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease; } .cv-av__step button:hover:not(:disabled) { border-color: var(--av-acc); background: rgba(91, 196, 187, 0.14); } .cv-av__step button:disabled { opacity: 0.35; cursor: not-allowed; } .cv-av__step output { min-inline-size: 16px; color: var(--av-acc); font-family: var(--cv-heading-font); font-size: 18px; font-weight: 700; text-align: center; } /* ---------- Readout ---------- */ .cv-av__readout { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-inline-size: 0; padding: 18px 16px; background: var(--av-panel); border: 1px solid var(--av-line); border-radius: 16px; } .cv-av__rk { margin: 0 0 8px; color: var(--av-muted); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; } .cv-av__rtitle { margin: 0 0 8px; color: var(--av-text); font-family: var(--cv-heading-font); font-size: clamp(26px, 7vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; } .cv-av__rdesc { margin: 0; color: #D3DEDB; font-size: 14.5px; line-height: 1.6; } .cv-av__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; background: var(--av-line); border: 1px solid var(--av-line); border-radius: 12px; } .cv-av__stats > div { padding: 12px 14px; background: var(--av-panel); } .cv-av__stats dt { margin: 0 0 4px; color: var(--av-muted); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; } .cv-av__stats dd { margin: 0; color: var(--av-text); font-size: 14px; font-weight: 600; line-height: 1.2; } .cv-av__stats b { color: var(--av-acc); font-family: var(--cv-heading-font); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; } .cv-av__incl ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .cv-av__incl li { position: relative; padding-inline-start: 26px; color: #D3DEDB; font-size: 14px; line-height: 1.45; } .cv-av__incl li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 3px; inline-size: 6px; block-size: 11px; border: solid var(--av-acc); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ========================================================= PROMISES ========================================================= */ .cv-av__pledge { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: clamp(30px, 5vw, 56px); border-block: 1px solid var(--cv-border); } .cv-av__pl { padding: 22px 0; border-block-end: 1px solid var(--cv-border); } .cv-av__pl:last-child { border-block-end: 0; } .cv-av__pl-n { margin: 0 0 8px; color: var(--cv-accent); font-family: var(--cv-heading-font); font-size: clamp(44px, 12vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .cv-av__pl-t { margin: 0 0 6px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 19px; font-weight: 700; line-height: 1.25; } .cv-av__pl-p { max-inline-size: 40ch; margin: 0; color: var(--cv-text-muted); font-size: 15px; line-height: 1.6; } /* ========================================================= TECH RIDER ========================================================= */ .cv-av__rider { margin-block-start: clamp(30px, 5vw, 56px); padding: clamp(20px, 4vw, 44px); background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 22px; } .cv-av__rhead { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-block-end: clamp(22px, 3vw, 34px); } .cv-av__eyebrow--s { margin-block-end: 10px; } .cv-av__rh { margin: 0 0 8px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(26px, 6vw, 38px); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; } .cv-av__rp { max-inline-size: 52ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); line-height: 1.6; } .cv-av__stamp { flex: none; padding: 9px 14px; border: 2px solid var(--cv-accent); border-radius: 8px; color: var(--cv-accent); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-3deg); } .cv-av__cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 40px; } .cv-av__cat { min-inline-size: 0; padding-block-start: 14px; border-block-start: 2px solid var(--cv-text); } .cv-av__cat h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 19px; font-weight: 700; line-height: 1.2; } .cv-av__cat h4 small { color: var(--cv-accent); font-size: 13px; font-weight: 700; } .cv-av__cat ul { margin: 0; padding: 0; list-style: none; } .cv-av__cat li { display: flex; align-items: baseline; gap: 8px; padding-block: 9px; font-size: 14.5px; line-height: 1.4; } .cv-av__cat li span { min-inline-size: 0; color: var(--cv-text); font-weight: 600; } .cv-av__cat li i { flex: 1 1 14px; min-inline-size: 14px; border-block-end: 2px dotted var(--cv-text-muted); transform: translateY(-3px); } .cv-av__cat li b { min-inline-size: 0; color: var(--cv-accent); font-weight: 700; text-align: end; } .cv-av__rfoot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-block-start: clamp(24px, 4vw, 38px); padding-block-start: 22px; border-block-start: 1px solid var(--cv-border); } .cv-av__rfoot p { max-inline-size: 48ch; margin: 0; color: var(--cv-text); font-size: 16px; font-weight: 600; line-height: 1.5; } /* ---------- Keyframes ---------- */ @keyframes cvAvBlink { 50% { opacity: 0.25; } } @keyframes cvAvPulse { 0% { box-shadow: 0 0 0 0 #5BC4BB; } 70%, 100% { box-shadow: 0 0 0 8px transparent; } } @keyframes cvAvSweep { from { transform: rotate(calc(var(--r) - 7deg)); } to { transform: rotate(calc(var(--r) + 7deg)); } } @keyframes cvAvRing { 0% { opacity: calc(var(--av-snd) * 0.9); transform: translate(-50%, -50%) scale(0.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(calc(0.7 + var(--av-snd) * 2.2)); } } @keyframes cvAvRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ---------- Entrance (enabled by script.js) ---------- */ .cv-av[data-av-ready] [data-av-reveal] { opacity: 0; } .cv-av[data-av-ready] [data-av-reveal].is-in { animation: cvAvRise 800ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--av-d, 0ms) both; } /* ---------- Mobile-L · 425px+ ---------- */ @media (min-width: 425px) { .cv-av__grid { padding: 14px; gap: 16px; } .cv-av__console { padding: 16px; } .cv-av__readout { padding: 20px 18px; } .cv-av__ch { grid-template-columns: 100px minmax(0, 1fr) 62px; } .cv-av__scenes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cv-av__scene { flex-direction: column; gap: 2px; padding: 8px 4px; } .cv-av__tag { font-size: 12px; } .cv-av__langs span { font-size: 10.5px; padding: 3px 8px; } } /* ---------- Tablet · 768px+ ---------- */ @media (min-width: 768px) { .cv-av__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; } .cv-av__head-end { flex: 0 1 480px; } .cv-av__btn { flex: 0 0 auto; } .cv-av__roombar { padding: 15px 22px; } .cv-av__hint { display: block; } .cv-av__grid { padding: 18px; gap: 18px; } .cv-av__main { gap: 18px; } .cv-av__stage { aspect-ratio: 16 / 9; } .cv-av__cam { inline-size: 24px; block-size: 16px; } .cv-av__cam::before { inline-size: 8px; block-size: 8px; margin-block-start: -4px; inset-inline-end: -7px; } .cv-av__truss i { inline-size: 11px; block-size: 10px; margin-inline-start: -5px; } .cv-av__tag { inset-block-end: 10px; padding: 5px 12px; font-size: 12.5px; } .cv-av__tag--live { inset-inline-start: 14px; } .cv-av__tag--led { inset-inline-end: 14px; } .cv-av__console { padding: 20px; gap: 18px; } .cv-av__scene { flex-direction: row; gap: 9px; } /* Faders: vertical channel strips */ .cv-av__faders { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .cv-av__ch { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: center; gap: 10px; padding: 14px 6px 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--av-line); border-radius: 14px; } .cv-av__ch:last-child { border-block-end: 1px solid var(--av-line); } .cv-av__ch-k { text-align: center; } .cv-av__ch-v { text-align: center; font-size: 14px; } .cv-av__ctl { display: flex; align-items: stretch; justify-content: center; gap: 12px; } .cv-av__fader { inline-size: 46px; block-size: 160px; padding: 14px 0; touch-action: none; } .cv-av__rail { inset-inline: auto; inset-inline-start: 50%; inset-block: 14px; inline-size: 6px; block-size: auto; margin-block-start: 0; margin-inline-start: -3px; } .cv-av__fill { inset-block: auto 0; inset-inline: 0; inline-size: auto; block-size: calc(var(--v) * 100%); } .cv-av__thumb { inset-block-start: auto; inset-block-end: calc(var(--v) * 100%); inset-inline-start: 50%; inline-size: 38px; block-size: 24px; margin-block-start: 0; margin-block-end: -12px; margin-inline-start: -19px; } .cv-av__thumb::after { inset-block: 50% auto; inset-inline: 7px; inline-size: auto; block-size: 2px; margin-inline-start: 0; margin-block-start: -1px; } .cv-av__meter { display: flex; flex-direction: column-reverse; gap: 3px; padding-block: 14px; } .cv-av__meter i { inline-size: 6px; flex: 1; background: var(--av-track); border-radius: 2px; } .cv-av__meter i.is-lit { background: var(--av-acc); } .cv-av__meter i.is-lit:nth-child(n + 7) { background: #FFC93C; } .cv-av__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .cv-av__readout { padding: 24px 22px; } .cv-av__rdesc { font-size: 15px; } .cv-av__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-av__pledge { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-av__pl { padding: 30px 28px; border-block-end: 0; border-inline-start: 1px solid var(--cv-border); } .cv-av__pl:first-child { border-inline-start: 0; padding-inline-start: 0; } .cv-av__rhead { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 30px; } .cv-av__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; } .cv-av__rfoot { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; } .cv-av__rfoot .cv-av__btn { flex: none; } } /* ---------- Laptop · 1024px+ ---------- */ @media (min-width: 1024px) { .cv-av__grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: stretch; padding: 20px; gap: 20px; } .cv-av__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-av__rtitle { font-size: 32px; } .cv-av__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-av__pl-t { font-size: 20px; } } /* ---------- Laptop-L · 1440px+ ---------- */ @media (min-width: 1440px) { .cv-av__grid { padding: 26px; gap: 26px; } .cv-av__main { gap: 22px; } .cv-av__console { padding: 24px; } .cv-av__fader { block-size: 184px; } .cv-av__readout { padding: 30px 28px; } .cv-av__rtitle { font-size: 38px; } .cv-av__rdesc { font-size: 16px; } .cv-av__incl li { font-size: 15px; } .cv-av__rider { padding: 52px 56px; } .cv-av__cat li { font-size: 15.5px; } } /* ---------- Mobile-S · up to 374px ---------- */ @media (max-width: 374px) { .cv-av__ch { grid-template-columns: 74px minmax(0, 1fr) 50px; gap: 6px; } .cv-av__ch-k, .cv-av__ch-v { font-size: 12px; } .cv-av__scene { font-size: 13px; } .cv-av__console { padding: 12px; } .cv-av__readout { padding: 16px 14px; } .cv-av__stats > div { padding: 10px 11px; } .cv-av__stats b { font-size: 23px; } .cv-av__tag { font-size: 10.5px; padding: 3px 7px; } .cv-av__hues { gap: 8px; } .cv-av__hue { inline-size: 28px; block-size: 28px; } } @media (max-width: 767px) { .cv-av__btn { inline-size: 100%; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cv-av [data-av-reveal] { opacity: 1 !important; animation: none !important; } .cv-av__beams span, .cv-av__spk i, .cv-av__rec, .cv-av__air i, .cv-av__cam::after, .cv-av__tag--live i { animation: none; } .cv-av__spk i { opacity: 0.35; transform: translate(-50%, -50%) scale(0.9); } .cv-av__led-img, .cv-av__langs span, .cv-av__scene, .cv-av__hue { transition: none; } } /* ========================================================= EVENT OPERATIONS ATLAS — HOME 2 ONLY ========================================================= */ .cv-ops { --ops-ink: #10201F; --ops-deep: #17302E; --ops-paper: #F3F6F5; --ops-white: #FFFFFF; --ops-muted: #63716E; --ops-line: rgba(10, 13, 13, .12); --ops-accent: #1F5F5B; --ops-glow: #B7D7CE; --ops-positive: #21765D; --ops-warn: #9B6A20; position: relative; isolation: isolate; overflow: hidden; padding: clamp(58px, 7vw, 112px) clamp(18px, 4vw, 64px) clamp(42px, 5vw, 76px); background: radial-gradient(ellipse at 80% 7%, rgba(31, 95, 91, .12), transparent 34%), var(--cv-bg, #F3F6F5); color: var(--cv-text, #0A0D0D); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-ops *, .cv-ops *::before, .cv-ops *::after { box-sizing: border-box; } .cv-ops__inner { width: min(100%, 1480px); margin-inline: auto; } .cv-ops__header { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); align-items: end; gap: clamp(24px, 5vw, 80px); margin-bottom: clamp(26px, 3.5vw, 48px); } .cv-ops__eyebrow, .cv-ops__micro, .cv-ops__edition, .cv-ops__rail-index, .cv-ops__live, .cv-ops__event-facts div > span, .cv-ops__photo-caption, .cv-ops__photo--detail figcaption, .cv-ops__counter, .cv-ops__status, .cv-ops__run-head, .cv-ops__moment time { font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.4; } .cv-ops__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--cv-accent, #1F5F5B); } .cv-ops__eyebrow-dot, .cv-ops__live i, .cv-ops__status i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; } .cv-ops__eyebrow-dot { box-shadow: 0 0 0 5px rgba(31, 95, 91, .12); } .cv-ops__title { max-width: 850px; margin: 0; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(38px, 6vw, 82px); font-weight: 600; letter-spacing: -.065em; line-height: .99; } .cv-ops__title em, .cv-ops__run h3 em { color: var(--cv-accent, #1F5F5B); font-style: normal; } .cv-ops__header-aside { justify-self: end; width: min(100%, 400px); padding-inline-start: 22px; border-inline-start: 1px solid var(--cv-border, #DCE5E3); } .cv-ops__edition { display: block; margin-bottom: 12px; color: var(--cv-text-muted, #5E6B68); } .cv-ops__header-aside p { margin: 0 0 18px; color: var(--cv-text-muted, #5E6B68); font-size: clamp(14px, 1.15vw, 16px); line-height: 1.7; } .cv-ops__text-link, .cv-ops__footer-link { display: inline-flex; align-items: center; gap: 14px; color: var(--cv-text, #0A0D0D); font-size: 13px; font-weight: 800; text-decoration: none; } .cv-ops__text-link span, .cv-ops__footer-link span { color: var(--cv-accent, #1F5F5B); font-size: 19px; transition: transform 180ms ease; } .cv-ops__text-link:hover span, .cv-ops__footer-link:hover span { transform: translate(3px, -3px); } .cv-ops__board { display: grid; grid-template-columns: minmax(220px, .76fr) minmax(300px, 1.16fr) minmax(360px, 1.2fr); align-items: stretch; min-height: 680px; border: 1px solid var(--cv-border, #DCE5E3); border-radius: 18px; background: var(--cv-surface, #FFFFFF); box-shadow: 0 28px 70px rgba(10, 30, 28, .09); } .cv-ops__rail { display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 38px); color: #E9F0EE; background: radial-gradient(circle at 8% 6%, rgba(183, 215, 206, .18), transparent 27%), linear-gradient(150deg, var(--ops-deep), var(--ops-ink)); border-radius: 17px 0 0 17px; } .cv-ops__rail-top, .cv-ops__rail-foot, .cv-ops__panel-head, .cv-ops__budget-main, .cv-ops__budget-legend, .cv-ops__run-head, .cv-ops__footer { display: flex; align-items: center; justify-content: space-between; } .cv-ops__rail-index { color: rgba(233, 240, 238, .58); } .cv-ops__live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(233, 240, 238, .18); border-radius: 999px; color: #DDEBE6; font-size: 9px; white-space: nowrap; } .cv-ops__live i { width: 6px; height: 6px; color: #8CD0AE; box-shadow: 0 0 0 4px rgba(140, 208, 174, .13); animation: cvOpsPulse 2.4s ease-in-out infinite; } .cv-ops__event-name { margin-block: clamp(50px, 7vw, 102px) 32px; } .cv-ops__micro { display: block; color: var(--cv-text-muted, #5E6B68); font-size: 9px; } .cv-ops__rail .cv-ops__micro { color: #9CB0AA; } .cv-ops__event-name h3 { margin: 12px 0 10px; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(27px, 2.6vw, 39px); letter-spacing: -.06em; line-height: 1.08; } .cv-ops__event-name p { max-width: 230px; margin: 0; color: #B9C9C4; font-size: 13px; line-height: 1.6; } .cv-ops__event-facts { display: grid; gap: 0; margin-top: auto; } .cv-ops__event-facts div { display: flex; justify-content: space-between; gap: 12px; padding-block: 13px; border-top: 1px solid rgba(233, 240, 238, .14); } .cv-ops__event-facts div > span { color: #9CB0AA; font-size: 8px; } .cv-ops__event-facts strong { color: #F4F7F5; font-size: 11px; font-weight: 700; text-align: end; } .cv-ops__rail-foot { justify-content: flex-start; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(233, 240, 238, .14); } .cv-ops__avatar-stack { display: flex; padding-inline-start: 5px; } .cv-ops__avatar-stack b { display: grid; width: 29px; height: 29px; place-items: center; margin-inline-start: -5px; border: 2px solid var(--ops-deep); border-radius: 50%; background: #BCD8CE; color: #18312F; font-size: 10px; } .cv-ops__avatar-stack b:nth-child(2) { background: #D5BDA0; } .cv-ops__avatar-stack b:nth-child(3) { background: #DCE9E4; } .cv-ops__rail-foot > span:last-child { display: grid; gap: 4px; } .cv-ops__rail-foot strong { font-size: 10px; } .cv-ops__rail-foot small { color: #AFC0BB; font-size: 9px; } .cv-ops__visual { position: relative; display: grid; grid-template-rows: minmax(250px, 1fr) 180px; gap: 12px; min-width: 0; padding: clamp(15px, 1.7vw, 24px); overflow: hidden; background: linear-gradient(135deg, rgba(31, 95, 91, .08), transparent 58%), var(--cv-bg, #F3F6F5); } .cv-ops__photo { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border-radius: 10px; background: #20302E; } .cv-ops__photo::after { position: absolute; inset: 35% 0 0; content: ""; background: linear-gradient(transparent, rgba(5, 15, 14, .82)); pointer-events: none; } .cv-ops__photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); } .cv-ops__photo--main img { object-position: 50% 48%; } .cv-ops__photo--detail img { object-position: 50% 52%; } .cv-ops__visual:hover .cv-ops__photo--main img { transform: scale(1.045); } .cv-ops__photo-caption { position: absolute; z-index: 1; inset-inline: 16px; bottom: 16px; display: flex; align-items: center; gap: 11px; color: #FFFFFF; letter-spacing: normal; } .cv-ops__photo-number { color: #A8D3C5; font-size: 11px; letter-spacing: .1em; } .cv-ops__photo-caption > span:nth-child(2) { display: grid; gap: 3px; } .cv-ops__photo-caption strong { font-size: 12px; } .cv-ops__photo-caption small { color: #E0E8E5; font-size: 9px; font-weight: 500; } .cv-ops__photo-arrow { margin-inline-start: auto; font-size: 18px; } .cv-ops__photo--detail::after { inset: 15% 0 0; } .cv-ops__photo--detail figcaption { position: absolute; z-index: 1; inset-inline: 13px; bottom: 12px; color: #FFFFFF; font-size: 8px; } .cv-ops__visual-stamp { position: absolute; z-index: 2; top: 38px; inset-inline-start: 30px; display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(10, 20, 19, .3); color: #FFFFFF; font-size: 8px; font-weight: 800; letter-spacing: .12em; backdrop-filter: blur(9px); } .cv-ops__visual-stamp i { width: 3px; height: 3px; border-radius: 50%; background: #B7D7CE; } .cv-ops__visual-orbit { position: absolute; z-index: 1; width: 68px; height: 68px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; pointer-events: none; } .cv-ops__visual-orbit--a { inset-block-start: 18%; inset-inline-end: -25px; animation: cvOpsFloat 7s ease-in-out infinite; } .cv-ops__visual-orbit--b { inset-block-end: 24%; inset-inline-start: -31px; width: 88px; height: 88px; animation: cvOpsFloat 9s ease-in-out infinite reverse; } .cv-ops__details { display: grid; grid-template-rows: auto auto 1fr; align-content: stretch; gap: 12px; min-width: 0; padding: clamp(15px, 1.7vw, 24px); } .cv-ops__panel { min-width: 0; padding: 17px; border: 1px solid var(--cv-border, #DCE5E3); border-radius: 10px; background: var(--cv-surface-raised, #FFFFFF); } .cv-ops__panel-head { gap: 12px; } .cv-ops__panel-head h3 { margin: 6px 0 0; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 15px; letter-spacing: -.035em; } .cv-ops__panel-menu, .cv-ops__counter { color: var(--cv-text-muted, #5E6B68); } .cv-ops__panel-menu { letter-spacing: 3px; } .cv-ops__budget-main { gap: 10px; margin-block: 16px 13px; } .cv-ops__budget-copy { display: grid; gap: 5px; } .cv-ops__budget-copy strong { font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.06em; } .cv-ops__budget-copy span { color: var(--cv-text-muted, #5E6B68); font-size: 10px; } .cv-ops__budget-ring { display: grid; width: 68px; aspect-ratio: 1; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--cv-accent, #1F5F5B) 0 84%, rgba(31, 95, 91, .15) 84% 100%); position: relative; } .cv-ops__budget-ring::before { position: absolute; inset: 6px; border-radius: inherit; content: ""; background: var(--cv-surface, #FFFFFF); } .cv-ops__budget-ring > span { z-index: 1; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 16px; font-weight: 800; } .cv-ops__budget-ring small { font-size: 9px; } .cv-ops__budget-bar { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(31, 95, 91, .14); } .cv-ops__budget-bar span { display: block; width: 84%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cv-accent, #1F5F5B), #7FB6A7); transform-origin: left center; } .cv-ops__budget-legend { gap: 12px; margin-top: 11px; color: var(--cv-text-muted, #5E6B68); font-size: 9px; } .cv-ops__budget-legend span { display: inline-flex; align-items: center; gap: 5px; } .cv-ops__budget-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--cv-accent, #1F5F5B); } .cv-ops__budget-legend span:last-child i { background: #CBD4D1; } .cv-ops__budget-legend strong { color: var(--cv-text, #0A0D0D); white-space: nowrap; } .cv-ops__vendor-list { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; } .cv-ops__vendor-list li { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding-block: 10px; border-top: 1px solid var(--ops-line); } .cv-ops__vendor-icon { display: grid; width: 28px; aspect-ratio: 1; place-items: center; border-radius: 8px; background: var(--cv-accent-soft, #C9D8D5); color: var(--cv-accent, #1F5F5B); font-size: 10px; font-weight: 800; } .cv-ops__vendor-info { display: grid; gap: 3px; min-width: 0; } .cv-ops__vendor-info strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .cv-ops__vendor-info small { overflow: hidden; color: var(--cv-text-muted, #5E6B68); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .cv-ops__status { display: inline-flex; align-items: center; gap: 5px; font-size: 7px; white-space: nowrap; } .cv-ops__status i { width: 6px; height: 6px; } .cv-ops__status--done { color: var(--ops-positive); } .cv-ops__status--review { color: var(--ops-warn); } .cv-ops__run { min-width: 0; padding: 17px; border-radius: 10px; background: var(--cv-bg, #F3F6F5); } .cv-ops__run-head { gap: 10px; color: var(--cv-text-muted, #5E6B68); } .cv-ops__run-head .cv-ops__micro { color: inherit; } .cv-ops__timezone { font-size: 8px; white-space: nowrap; } .cv-ops__run h3 { margin: 13px 0 12px; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(14px, 1.2vw, 17px); letter-spacing: -.04em; line-height: 1.45; } .cv-ops__timeline { position: relative; display: grid; gap: 0; } .cv-ops__timeline::before { position: absolute; inset-block: 14px 18px; inset-inline-start: 58px; width: 1px; content: ""; background: var(--cv-border, #DCE5E3); } .cv-ops__moment { position: relative; display: grid; grid-template-columns: 43px 12px minmax(0, 1fr); align-items: start; gap: 8px; padding-block: 7px; } .cv-ops__moment time { padding-top: 2px; color: var(--cv-text-muted, #5E6B68); font-size: 8px; letter-spacing: .03em; } .cv-ops__moment-dot { z-index: 1; width: 9px; height: 9px; margin-top: 2px; border: 2px solid var(--cv-surface, #FFFFFF); border-radius: 50%; background: #9AA9A5; box-shadow: 0 0 0 1px var(--cv-border, #DCE5E3); } .cv-ops__moment--active .cv-ops__moment-dot { background: var(--cv-accent, #1F5F5B); box-shadow: 0 0 0 4px var(--cv-accent-soft, #C9D8D5); } .cv-ops__moment > span:last-child { display: grid; gap: 3px; } .cv-ops__moment strong { font-size: 9px; } .cv-ops__moment small { color: var(--cv-text-muted, #5E6B68); font-size: 8px; line-height: 1.45; } .cv-ops__footer { gap: 20px; margin-top: 18px; padding: 18px 22px; border: 1px solid var(--cv-border, #DCE5E3); border-radius: 10px; background: var(--cv-surface, #FFFFFF); } .cv-ops__footer-mark { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--cv-accent, #1F5F5B); color: var(--cv-on-accent, #FFFFFF); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 17px; font-weight: 800; } .cv-ops__footer p { display: grid; gap: 3px; flex: 1; margin: 0; font-size: 11px; } .cv-ops__footer p span { color: var(--cv-text-muted, #5E6B68); font-size: 10px; } .cv-ops__footer-link { white-space: nowrap; } @keyframes cvOpsPulse { 50% { opacity: .45; box-shadow: 0 0 0 7px rgba(140, 208, 174, .06); } } @keyframes cvOpsFloat { 50% { transform: translateY(-13px) rotate(12deg); } } @keyframes cvOpsReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .cv-ops.is-visible [data-ops-reveal] { animation: cvOpsReveal 700ms cubic-bezier(.2, .7, .2, 1) both; } .cv-ops.is-visible [data-ops-reveal]:nth-child(2) { animation-delay: 90ms; } .cv-ops.is-visible [data-ops-reveal]:nth-child(3) { animation-delay: 170ms; } .cv-ops.is-visible .cv-ops__budget-bar span { animation: cvOpsBudget 1100ms 250ms ease-out both; } @keyframes cvOpsBudget { from { transform: scaleX(.08); } to { transform: scaleX(1); } } @media (max-width: 1199px) { .cv-ops__board { grid-template-columns: minmax(205px, .7fr) minmax(270px, 1fr); } .cv-ops__rail { grid-row: span 2; } .cv-ops__visual { min-height: 570px; } .cv-ops__details { grid-column: 2; } } @media (max-width: 767px) { .cv-ops { padding: 58px 18px 42px; } .cv-ops__header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 23px; } .cv-ops__header-aside { justify-self: stretch; width: 100%; padding-inline-start: 14px; } .cv-ops__board { grid-template-columns: 1fr; min-height: 0; border-radius: 14px; } .cv-ops__rail { grid-row: auto; min-height: 440px; border-radius: 13px 13px 0 0; } .cv-ops__event-name { margin-block: 54px 28px; } .cv-ops__event-facts div { padding-block: 12px; } .cv-ops__visual { grid-template-rows: minmax(290px, 1.15fr) minmax(150px, .62fr); min-height: 560px; } .cv-ops__details { grid-column: auto; gap: 10px; padding: 12px; } .cv-ops__panel, .cv-ops__run { padding: 15px; } .cv-ops__footer { flex-wrap: wrap; } .cv-ops__footer p { min-width: calc(100% - 64px); } .cv-ops__footer-link { margin-inline-start: 50px; } } @media (max-width: 479px) { .cv-ops { padding-inline: 12px; } .cv-ops__title { font-size: clamp(36px, 11vw, 48px); } .cv-ops__rail { min-height: 420px; padding: 20px; } .cv-ops__live { font-size: 8px; } .cv-ops__visual { grid-template-rows: minmax(245px, 1fr) 145px; min-height: 450px; padding: 10px; } .cv-ops__visual-stamp { top: 23px; inset-inline-start: 22px; } .cv-ops__details { padding: 9px; } .cv-ops__budget-legend { font-size: 8px; } .cv-ops__vendor-list li { grid-template-columns: 27px minmax(0, 1fr) auto; gap: 7px; } .cv-ops__status { font-size: 6px; } .cv-ops__footer { gap: 12px; padding: 15px; } .cv-ops__footer-link { margin-inline-start: 0; } } @media (max-width: 359px) { .cv-ops__rail-top { align-items: flex-start; } .cv-ops__live { padding: 7px; font-size: 7px; } .cv-ops__vendor-list li { grid-template-columns: 25px minmax(0, 1fr); } .cv-ops__status { grid-column: 2; margin-top: -4px; } .cv-ops__budget-main { align-items: flex-start; } .cv-ops__budget-copy span { max-width: 140px; line-height: 1.45; } .cv-ops__timezone { font-size: 7px; } } @media (prefers-reduced-motion: reduce) { .cv-ops *, .cv-ops *::before, .cv-ops *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* EVENT OPERATIONS ATLAS — READABLE SMALL-TEXT OVERRIDES */ /* Labels and eyebrow text */ .cv-ops__eyebrow, .cv-ops__edition, .cv-ops__rail-index, .cv-ops__live, .cv-ops__micro, .cv-ops__photo-caption, .cv-ops__photo--detail figcaption, .cv-ops__counter, .cv-ops__status, .cv-ops__run-head, .cv-ops__moment time { font-size: 11px; line-height: 1.5; letter-spacing: .07em; } /* Event facts and team details */ .cv-ops__event-facts div > span { font-size: 10px; line-height: 1.5; } .cv-ops__event-facts strong { font-size: 12px; line-height: 1.45; } .cv-ops__rail-foot strong { font-size: 11px; line-height: 1.45; } .cv-ops__rail-foot small { font-size: 10px; line-height: 1.5; } /* Image captions */ .cv-ops__photo-number { font-size: 12px; } .cv-ops__photo-caption strong { font-size: 13px; line-height: 1.4; } .cv-ops__photo-caption small { font-size: 11px; line-height: 1.45; } .cv-ops__visual-stamp { font-size: 10px; line-height: 1.4; } /* Budget and booking status */ .cv-ops__budget-copy span { font-size: 12px; line-height: 1.5; } .cv-ops__budget-legend { font-size: 11px; line-height: 1.5; } .cv-ops__vendor-info strong { font-size: 13px; line-height: 1.45; } .cv-ops__vendor-info small { font-size: 12px; line-height: 1.5; } .cv-ops__status { font-size: 10px; font-weight: 800; line-height: 1.4; letter-spacing: .05em; } /* Run-of-show timeline */ .cv-ops__timezone { font-size: 10px; line-height: 1.5; } .cv-ops__moment time { font-size: 10px; letter-spacing: .02em; } .cv-ops__moment strong { font-size: 11px; line-height: 1.45; } .cv-ops__moment small { font-size: 10px; line-height: 1.5; } /* Closing line */ .cv-ops__footer p { font-size: 12px; line-height: 1.5; } .cv-ops__footer p span { font-size: 11px; line-height: 1.5; } /* Tablet and phone layouts: let labels wrap instead of shrinking or clipping. */ @media (max-width: 767px) { .cv-ops__event-facts div { gap: 16px; } .cv-ops__event-facts div > span { flex: 0 0 82px; } .cv-ops__event-facts strong { text-align: end; } .cv-ops__vendor-list li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; } .cv-ops__status { white-space: normal; text-align: end; } .cv-ops__budget-legend { flex-wrap: wrap; justify-content: flex-start; column-gap: 16px; row-gap: 6px; } } @media (max-width: 479px) { .cv-ops__eyebrow, .cv-ops__edition, .cv-ops__micro, .cv-ops__photo--detail figcaption, .cv-ops__counter, .cv-ops__run-head, .cv-ops__moment time { font-size: 10px; } .cv-ops__live { font-size: 9px; letter-spacing: .04em; } .cv-ops__event-facts div > span { flex-basis: 76px; font-size: 10px; } .cv-ops__event-facts strong, .cv-ops__vendor-info strong { font-size: 12px; } .cv-ops__vendor-info small, .cv-ops__budget-copy span { font-size: 11px; } .cv-ops__status { font-size: 9px; } .cv-ops__moment small, .cv-ops__rail-foot small, .cv-ops__footer p span { font-size: 10px; } } @media (max-width: 359px) { .cv-ops__rail-top { flex-wrap: wrap; gap: 10px; } .cv-ops__live { font-size: 9px; } .cv-ops__vendor-list li { grid-template-columns: 29px minmax(0, 1fr); row-gap: 6px; } .cv-ops__status { grid-column: 2; justify-self: start; margin-top: 0; font-size: 10px; } .cv-ops__budget-legend { font-size: 10px; } .cv-ops__timezone { font-size: 9px; } .cv-ops__photo--detail figcaption, .cv-ops__visual-stamp { font-size: 9px; } } /* ========================================================= CHECK-IN STUDIO · REGISTRATION & BADGES (home2.html) #cvCheckin - Guest builds a badge (name, event, role, access). - The badge hangs on a lanyard that swings (physics in script.js); drag to swing, tap to flip. - "Scan at the desk" flips the badge, sweeps a scan beam over the QR pass, then checks the guest in and logs them. Colours come from --cv-* tokens only. Flat: no gradients, glows or heavy shadows. ========================================================= */ :root { /* Brand type scale (Mobile-S base) */ --cv-ck-h2: 28px; --cv-ck-body: 15px; --cv-ck-small: 13px; --cv-ck-btn: 14px; } @media (min-width: 375px) { :root { --cv-ck-h2: 30px; } } @media (min-width: 425px) { :root { --cv-ck-h2: 32px; --cv-ck-body: 16px; --cv-ck-small: 14px; } } @media (min-width: 768px) { :root { --cv-ck-h2: 34px; --cv-ck-btn: 15px; } } @media (min-width: 1024px) { :root { --cv-ck-h2: 38px; } } @media (min-width: 1440px) { :root { --cv-ck-h2: 40px; } } @media (min-width: 1920px) { :root { --cv-ck-h2: 44px; --cv-ck-body: 17px; } } /* --------------------------------------------------------- BASE --------------------------------------------------------- */ .cv-ck, .cv-ck *, .cv-ck *::before, .cv-ck *::after { box-sizing: border-box; } .cv-ck { --cv-ck-ease: cubic-bezier(.22, 1, .36, 1); position: relative; background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); overflow-x: clip; } .cv-ck button, .cv-ck input { font-family: var(--cv-body-font); -webkit-tap-highlight-color: transparent; } .cv-ck button { cursor: pointer; } .cv-ck p, .cv-ck ul, .cv-ck ol { margin: 0; padding: 0; } .cv-ck ul, .cv-ck ol { list-style: none; } .cv-ck__inner { display: grid; gap: clamp(28px, 4vw, 52px); max-width: 1760px; margin-inline: auto; padding-block: clamp(56px, 8vw, 112px); padding-inline: clamp(12px, 3vw, 40px); } /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ .cv-ck__head { display: grid; gap: 16px; max-width: 760px; } .cv-ck__eyebrow { display: flex; align-items: center; gap: 12px; color: var(--cv-text-muted); font-size: var(--cv-ck-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-ck__eyebrow-line { flex: none; inline-size: 36px; block-size: 2px; background: var(--cv-accent); transform-origin: left center; } .cv-ck__title { margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-ck-h2); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .cv-ck__word { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.1em; margin-block: -0.1em; } .cv-ck__word-inner { display: inline-block; } .cv-ck__lead { max-inline-size: 56ch; color: var(--cv-text-muted); font-size: var(--cv-ck-body); line-height: 1.65; } /* --------------------------------------------------------- LAYOUT --------------------------------------------------------- */ .cv-ck__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } /* --------------------------------------------------------- CONTROL PANEL --------------------------------------------------------- */ .cv-ck__panel { display: grid; align-content: start; gap: 22px; min-width: 0; padding: clamp(18px, 2.4vw, 30px); background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 24px; } .cv-ck__group { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; } .cv-ck__label { display: flex; align-items: center; gap: 10px; padding: 0; color: var(--cv-text); font-size: var(--cv-ck-small); font-weight: 600; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; } .cv-ck__step { display: grid; place-items: center; flex: none; inline-size: 24px; block-size: 24px; border: 1.5px solid var(--cv-text); border-radius: 50%; font-size: 12px; letter-spacing: 0; } .cv-ck__field { display: grid; gap: 6px; } .cv-ck__field label { color: var(--cv-text-muted); font-size: var(--cv-ck-small); font-weight: 600; } .cv-ck__field input { inline-size: 100%; min-block-size: 48px; padding: 0 14px; background: var(--cv-bg); color: var(--cv-text); border: 1.5px solid var(--cv-text-muted); border-radius: var(--cv-radius-md); font-size: 16px; font-weight: 500; transition: border-color var(--cv-transition); } .cv-ck__field input:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 2px; border-color: var(--cv-accent); } .cv-ck__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cv-ck__opts--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* native inputs stay in the DOM and focusable, just visually hidden */ .cv-ck__native { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; } .cv-ck__opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding: 8px 12px; background: transparent; color: var(--cv-text); border: 1.5px solid var(--cv-text-muted); border-radius: var(--cv-radius-md); font-size: var(--cv-ck-btn); font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; user-select: none; transition: background-color var(--cv-transition), color var(--cv-transition), border-color var(--cv-transition), transform 200ms var(--cv-ck-ease); } .cv-ck__opt:hover { background: var(--cv-accent-soft); } .cv-ck__opt:active { transform: scale(0.97); } .cv-ck__native:checked + .cv-ck__opt { background: var(--cv-accent); color: var(--cv-on-accent); border-color: var(--cv-accent); } .cv-ck__opt--check::before { content: ""; flex: none; inline-size: 16px; block-size: 16px; border: 1.5px solid currentColor; border-radius: 5px; transition: background-color 200ms ease; } .cv-ck__native:checked + .cv-ck__opt--check::before { background: no-repeat center / 10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 4.8 9 10 3' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .cv-ck__native:focus-visible + .cv-ck__opt { outline: 2px solid var(--cv-accent); outline-offset: 3px; } .cv-ck__actions { display: flex; flex-wrap: wrap; gap: 12px; } .cv-ck__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 160px; min-block-size: 48px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); font-size: var(--cv-ck-btn); font-weight: 600; line-height: 1.2; text-align: center; transition: background-color var(--cv-transition), border-color var(--cv-transition), transform var(--cv-transition); } .cv-ck__btn:hover { transform: translateY(-1px); } .cv-ck__btn--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-ck__btn--primary:hover { background: var(--cv-accent-hover); } .cv-ck__btn--primary:active { background: var(--cv-accent-pressed); } .cv-ck__btn--secondary { background: transparent; color: var(--cv-text); border-color: var(--cv-text); } .cv-ck__btn--secondary:hover { background: var(--cv-accent-soft); } .cv-ck__btn[aria-disabled="true"] { pointer-events: none; background: var(--cv-accent-soft); color: var(--cv-text); } .cv-ck__btn:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 3px; } .cv-ck__hint { color: var(--cv-text-muted); font-size: var(--cv-ck-small); line-height: 1.5; } /* --------------------------------------------------------- STAGE --------------------------------------------------------- */ .cv-ck__stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; gap: 20px; min-width: 0; padding: 0 16px 24px; overflow: hidden; background: var(--cv-accent-soft); border-radius: 28px; } /* decorative rings, slowly turning */ .cv-ck__rings { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; pointer-events: none; } .cv-ck__ring { position: absolute; aspect-ratio: 1; border: 2px solid var(--cv-surface); border-radius: 50%; } .cv-ck__ring--a { inline-size: 62%; } .cv-ck__ring--b { inline-size: 92%; border-style: dashed; animation: cv-ck-turn 60s linear infinite; } .cv-ck__ring--c { inline-size: 126%; animation: cv-ck-turn 90s linear infinite reverse; } .cv-ck__rail { position: relative; inline-size: calc(100% + 32px); block-size: 10px; margin-inline: -16px; background: var(--cv-text); } .cv-ck__hook { position: absolute; z-index: 3; inset-block-start: -11px; inset-inline: 0; inline-size: 22px; block-size: 22px; margin-inline: auto; background: var(--cv-surface); border: 3px solid var(--cv-text); border-radius: 50%; } .cv-ck__hang { position: relative; justify-self: center; margin-block-start: -9px; } /* pendulum: pivots from the top-centre (the hook) */ .cv-ck__swing { display: grid; justify-items: center; transform-origin: 50% 0; will-change: transform; } .cv-ck__strap { inline-size: 16px; block-size: 64px; background: var(--cv-accent); border-inline: 2px solid var(--cv-text); } .cv-ck__clip { inline-size: 34px; block-size: 22px; margin-block: -2px -9px; position: relative; z-index: 2; background: var(--cv-surface); border: 2px solid var(--cv-text); border-radius: 6px; } .cv-ck__badge { --ck-band-bg: var(--cv-accent-soft); --ck-band-fg: var(--cv-text); --ck-band-bd: transparent; position: relative; inline-size: clamp(228px, 68vw, 276px); perspective: 1100px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } .cv-ck__badge.is-dragging { cursor: grabbing; } .cv-ck__badge[data-role="speaker"] { --ck-band-bg: var(--cv-accent); --ck-band-fg: var(--cv-on-accent); } .cv-ck__badge[data-role="sponsor"] { --ck-band-bg: var(--cv-text); --ck-band-fg: var(--cv-bg); } .cv-ck__badge[data-role="press"] { --ck-band-bg: var(--cv-bg); --ck-band-fg: var(--cv-text); --ck-band-bd: var(--cv-text); } .cv-ck__flip { display: grid; transform-style: preserve-3d; transition: transform 700ms var(--cv-ck-ease); } .cv-ck__badge.is-flipped .cv-ck__flip { transform: rotateY(180deg); } .cv-ck__face { position: relative; grid-area: 1 / 1; display: grid; justify-items: center; align-content: start; gap: 10px; min-block-size: 340px; padding: 30px 16px 18px; background: var(--cv-surface); color: var(--cv-text); border: 2px solid var(--cv-text); border-radius: 22px; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cv-ck__face--back { transform: rotateY(180deg); } .cv-ck__hole { position: absolute; inset-block-start: 10px; inset-inline: 0; inline-size: 46px; block-size: 10px; margin-inline: auto; background: var(--cv-accent-soft); border: 2px solid var(--cv-text); border-radius: 999px; } .cv-ck__brand { display: flex; align-items: center; gap: 8px; color: var(--cv-text); font-size: var(--cv-ck-small); font-weight: 600; letter-spacing: 0.16em; } .cv-ck__mark { inline-size: 12px; block-size: 12px; background: var(--cv-accent); border-radius: 4px; } .cv-ck__event { max-inline-size: 100%; color: var(--cv-text-muted); font-size: var(--cv-ck-small); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .cv-ck__band { inline-size: 100%; padding: 7px 10px; background: var(--ck-band-bg); color: var(--ck-band-fg); border: 1.5px solid var(--ck-band-bd); border-radius: 10px; font-size: var(--cv-ck-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background-color 300ms ease, color 300ms ease; } .cv-ck__avatar { display: grid; place-items: center; inline-size: 58px; block-size: 58px; background: var(--cv-accent-soft); color: var(--cv-text); border: 2px solid var(--cv-text); border-radius: 50%; font-family: var(--cv-heading-font); font-size: 21px; font-weight: 400; } .cv-ck__name { max-inline-size: 100%; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 22px; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; } .cv-ck__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .cv-ck__tag { padding: 4px 9px; color: var(--cv-text-muted); border: 1px dashed var(--cv-text-muted); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; } .cv-ck__tag.is-on { background: var(--cv-accent-soft); color: var(--cv-text); border-color: var(--cv-accent-soft); border-style: solid; } .cv-ck__stamp { position: absolute; inset-block-end: 14px; inset-inline-end: -12px; padding: 6px 12px; background: var(--cv-accent); color: var(--cv-on-accent); border: 2px solid var(--cv-surface); border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: rotate(-8deg) scale(1.6); } .cv-ck__badge.is-checked .cv-ck__stamp { opacity: 1; transform: rotate(-8deg) scale(1); transition: opacity 200ms ease, transform 420ms cubic-bezier(.34, 1.56, .64, 1); } /* back face */ .cv-ck__back-k { color: var(--cv-text-muted); font-size: var(--cv-ck-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .cv-ck__qr { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; inline-size: 132px; aspect-ratio: 1; padding: 8px; background: var(--cv-surface); border: 2px solid var(--cv-text); border-radius: 12px; box-sizing: content-box; } .cv-ck__qr span { background: var(--cv-text); border-radius: 1.5px; opacity: 0; transform: scale(0.2); transition: opacity 260ms ease, transform 260ms var(--cv-ck-ease); transition-delay: var(--cd, 0ms); } .cv-ck__qr span.is-on { opacity: 1; transform: none; } .cv-ck__back-t { color: var(--cv-text); font-size: var(--cv-ck-small); font-weight: 600; } .cv-ck__acc { display: grid; gap: 4px; inline-size: 100%; } .cv-ck__acc li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; font-size: 12px; line-height: 1.3; text-align: start; } .cv-ck__acc li span { color: var(--cv-text); font-weight: 600; } .cv-ck__acc li b { color: var(--cv-text-muted); font-weight: 400; } .cv-ck__acc li.is-on { background: var(--cv-accent-soft); } .cv-ck__acc li.is-on b { color: var(--cv-text); font-weight: 600; } /* scan overlay: corner brackets + sweeping beam */ .cv-ck__corners { position: absolute; inset: -8px; pointer-events: none; opacity: 0; transform: scale(1.06); transition: opacity 250ms ease, transform 400ms var(--cv-ck-ease); } .cv-ck__corners i { position: absolute; inline-size: 26px; block-size: 26px; border: 0 solid var(--cv-text); } .cv-ck__corners i:nth-child(1) { inset-block-start: 0; inset-inline-start: 0; border-block-start-width: 4px; border-inline-start-width: 4px; border-start-start-radius: 14px; } .cv-ck__corners i:nth-child(2) { inset-block-start: 0; inset-inline-end: 0; border-block-start-width: 4px; border-inline-end-width: 4px; border-start-end-radius: 14px; } .cv-ck__corners i:nth-child(3) { inset-block-end: 0; inset-inline-start: 0; border-block-end-width: 4px; border-inline-start-width: 4px; border-end-start-radius: 14px; } .cv-ck__corners i:nth-child(4) { inset-block-end: 0; inset-inline-end: 0; border-block-end-width: 4px; border-inline-end-width: 4px; border-end-end-radius: 14px; } .cv-ck.is-scanning .cv-ck__corners { opacity: 1; transform: none; } .cv-ck__beam { position: absolute; inset-inline: -10px; inset-block-start: 0; block-size: 4px; background: var(--cv-accent); border-radius: 4px; opacity: 0; pointer-events: none; } .cv-ck.is-scanning .cv-ck__beam { animation: cv-ck-sweep 1150ms cubic-bezier(.45, 0, .55, 1) forwards; } /* --------------------------------------------------------- CHECK-IN DESK (scanner) --------------------------------------------------------- */ .cv-ck__scanner { position: relative; inline-size: min(100%, 236px); padding: 12px; background: var(--cv-surface); border: 2px solid var(--cv-text); border-radius: 20px; } .cv-ck__reader { display: flex; align-items: center; justify-content: space-between; block-size: 22px; margin-block-end: 10px; padding-inline: 10px; background: var(--cv-text); border-radius: 999px; } .cv-ck__led { inline-size: 9px; block-size: 9px; background: var(--cv-accent-soft); border-radius: 50%; } .cv-ck__scanner[data-state="reading"] .cv-ck__led { animation: cv-ck-blink 360ms steps(2, jump-none) infinite; } .cv-ck__scanner[data-state="done"] .cv-ck__led { background: var(--cv-accent); } .cv-ck__screen { display: grid; gap: 3px; align-content: center; min-block-size: 112px; padding: 12px 14px; background: var(--cv-accent-soft); color: var(--cv-text); border-radius: 12px; overflow-wrap: anywhere; transition: background-color 350ms ease, color 350ms ease; } .cv-ck__scanner[data-state="done"] .cv-ck__screen { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-ck__sc-k { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .cv-ck__sc-v { font-family: var(--cv-heading-font); font-size: 22px; font-weight: 400; line-height: 1.2; } .cv-ck__sc-s { font-size: var(--cv-ck-small); line-height: 1.4; } .cv-ck__scanner[data-state="reading"] .cv-ck__sc-v { white-space: nowrap; } .cv-ck__scanner[data-state="reading"] .cv-ck__sc-v::after { content: "..."; display: inline-block; inline-size: 1.2em; overflow: hidden; vertical-align: bottom; animation: cv-ck-dots 1s steps(4, end) infinite; } .cv-ck__confetti { position: absolute; inset-block-start: 60%; inset-inline: 0; pointer-events: none; } .cv-ck__confetti i { position: absolute; inset-inline-start: 50%; inline-size: 9px; block-size: 9px; background: var(--cv-accent); border-radius: 2px; animation: cv-ck-burst 900ms cubic-bezier(.2, .7, .3, 1) forwards; } .cv-ck__confetti i:nth-child(3n + 2) { background: var(--cv-text); border-radius: 50%; } .cv-ck__confetti i:nth-child(3n) { background: var(--cv-surface); border: 2px solid var(--cv-text); } /* --------------------------------------------------------- LOG --------------------------------------------------------- */ .cv-ck__logbar { display: grid; gap: 14px; padding-block: 20px; border-block: 1px solid var(--cv-border); } .cv-ck__log-title { color: var(--cv-text-muted); font-size: var(--cv-ck-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .cv-ck__log { display: flex; flex-wrap: wrap; gap: 10px; } .cv-ck__log li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 16px; background: var(--cv-surface); color: var(--cv-text); border: 1px solid var(--cv-border); border-radius: 18px; font-size: var(--cv-ck-small); line-height: 1.35; } .cv-ck__log li[hidden] { display: none; } .cv-ck__log li.is-new { animation: cv-ck-slot 600ms var(--cv-ck-ease) backwards; } .cv-ck__log time { color: var(--cv-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; } .cv-ck__log strong { font-weight: 600; } .cv-ck__log em { padding: 2px 8px; background: var(--cv-accent-soft); border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 600; } .cv-ck__log-empty { color: var(--cv-text-muted) !important; background: transparent !important; border-style: dashed !important; } /* --------------------------------------------------------- MOTION --------------------------------------------------------- */ .cv-ck.is-armed [data-ck-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); } .cv-ck.is-armed [data-ck-reveal="stage"]:not(.is-in) { clip-path: inset(0 0 100% 0 round 28px); transform: none; } .cv-ck.is-armed .cv-ck__eyebrow:not(.is-in) .cv-ck__eyebrow-line { transform: scaleX(0); } .cv-ck.is-armed .cv-ck__word-inner { transform: translateY(115%); } .cv-ck.is-armed .cv-ck__title.is-in .cv-ck__word-inner { transform: none; } [data-ck-reveal] { transition: opacity 800ms var(--cv-ck-ease), transform 800ms var(--cv-ck-ease), clip-path 1100ms cubic-bezier(.77, 0, .18, 1); transition-delay: var(--ck-d, 0ms); } .cv-ck__eyebrow-line { transition: transform 900ms var(--cv-ck-ease) 200ms; } .cv-ck__word-inner { transition: transform 850ms var(--cv-ck-ease); transition-delay: calc(var(--i, 0) * 70ms + 100ms); } @keyframes cv-ck-turn { to { transform: rotate(360deg); } } @keyframes cv-ck-sweep { 0% { inset-block-start: 0; opacity: 1; } 92% { inset-block-start: calc(100% - 4px); opacity: 1; } 100% { inset-block-start: calc(100% - 4px); opacity: 0; } } @keyframes cv-ck-blink { 50% { opacity: 0.2; } } @keyframes cv-ck-dots { from { inline-size: 0; } to { inline-size: 1.2em; } } @keyframes cv-ck-burst { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } } @keyframes cv-ck-slot { from { opacity: 0; transform: translateY(-14px) scale(0.94); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------- TABLET 768px and up --------------------------------------------------------- */ @media (min-width: 768px) { .cv-ck__opts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-ck__stage { grid-template-columns: minmax(0, 1fr) 236px; align-items: end; column-gap: 24px; padding-inline: 28px; } .cv-ck__rail { grid-column: 1 / -1; inline-size: calc(100% + 56px); margin-inline: -28px; } .cv-ck__hang { grid-column: 1; grid-row: 2; align-self: start; } .cv-ck__scanner { grid-column: 2; grid-row: 2; margin-block-end: 8px; } } /* --------------------------------------------------------- LAPTOP 1024px and up --------------------------------------------------------- */ @media (min-width: 1024px) { .cv-ck__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; } .cv-ck__stage { grid-template-columns: minmax(0, 1fr) 200px; column-gap: 16px; } .cv-ck__scanner { inline-size: 200px; } } @media (min-width: 1440px) { .cv-ck__stage { grid-template-columns: minmax(0, 1fr) 236px; column-gap: 28px; } .cv-ck__scanner { inline-size: 236px; } } /* --------------------------------------------------------- REDUCED MOTION No physics, no reveal, no sweep, instant flip --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cv-ck *, .cv-ck *::before, .cv-ck *::after { animation: none !important; transition: none !important; } .cv-ck [data-ck-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .cv-ck__word-inner, .cv-ck__eyebrow-line { transform: none !important; } } /* ========================================================= CENTER-FOCUS MOMENTS CAROUSEL — INDEX SECTION ONLY ========================================================= */ .cv-moments { --moments-edge: var(--cv-bg, #F3F6F5); --moments-card-width: clamp(280px, 36vw, 470px); --moments-step: calc(var(--moments-card-width) * .86); position: relative; overflow: hidden; padding: clamp(46px, 5vw, 76px) clamp(16px, 3vw, 48px) 34px; background: var(--cv-bg, #F3F6F5); color: var(--cv-text, #0A0D0D); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-moments *, .cv-moments *::before, .cv-moments *::after { box-sizing: border-box; } .cv-moments__inner { width: min(100%, 1400px); margin-inline: auto; } .cv-moments__intro { max-width: 900px; margin: 0 auto 20px; text-align: center; } .cv-moments__eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--cv-accent, #1F5F5B); font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; } .cv-moments__eyebrow span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px var(--cv-accent-soft, #C9D8D5); } .cv-moments__title { margin: 0; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(34px, 5vw, 64px); font-weight: 600; letter-spacing: -.065em; line-height: 1.08; } .cv-moments__title em { color: var(--cv-accent, #1F5F5B); font-style: normal; } .cv-moments__description { max-width: 690px; margin: 12px auto 0; color: var(--cv-text-muted, #5E6B68); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65; } .cv-moments__carousel { width: 100%; } .cv-moments__viewport { position: relative; width: min(100%, 1320px); height: clamp(330px, 34vw, 430px); margin-inline: auto; overflow: hidden; isolation: isolate; } .cv-moments__viewport::before, .cv-moments__viewport::after { position: absolute; z-index: 5; top: 0; bottom: 0; width: clamp(34px, 9vw, 150px); content: ""; pointer-events: none; } .cv-moments__viewport::before { left: 0; background: linear-gradient(90deg, var(--moments-edge), transparent); } .cv-moments__viewport::after { right: 0; background: linear-gradient(270deg, var(--moments-edge), transparent); } .cv-moments__track { position: absolute; inset: 0; } .cv-moments__slide { position: absolute; top: 50%; left: 50%; width: var(--moments-card-width); aspect-ratio: 1.24 / 1; margin: 0; overflow: hidden; border: 1px solid rgba(10, 13, 13, .08); border-radius: var(--cv-radius-lg, 14px); background: var(--cv-surface, #FFFFFF); box-shadow: 0 18px 48px rgba(10, 30, 28, .16); opacity: 0; transform: translate(-50%, -50%) scale(.62); filter: blur(3px) saturate(.72); visibility: hidden; transition: transform 620ms cubic-bezier(.2, .72, .2, 1), opacity 620ms ease, filter 620ms ease, visibility 0s linear 620ms; will-change: transform, opacity, filter; } .cv-moments__slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .cv-moments__slide::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 48%, rgba(5, 14, 13, .72)); pointer-events: none; } .cv-moments__slide.is-active { z-index: 4; opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; visibility: visible; transition-delay: 0s; } .cv-moments__slide.is-prev, .cv-moments__slide.is-next { z-index: 3; opacity: .38; filter: blur(1.6px) saturate(.65); visibility: visible; transition-delay: 0s; } .cv-moments__slide.is-prev { transform: translate(calc(-50% - var(--moments-step)), -50%) scale(.78); } .cv-moments__slide.is-next { transform: translate(calc(-50% + var(--moments-step)), -50%) scale(.78); } .cv-moments__slide.is-prev-2, .cv-moments__slide.is-next-2 { z-index: 2; opacity: .16; filter: blur(3px) saturate(.55); visibility: visible; transition-delay: 0s; } .cv-moments__slide.is-prev-2 { transform: translate(calc(-50% - var(--moments-step) * 1.72), -50%) scale(.64); } .cv-moments__slide.is-next-2 { transform: translate(calc(-50% + var(--moments-step) * 1.72), -50%) scale(.64); } .cv-moments__caption { position: absolute; z-index: 1; right: 20px; bottom: 18px; left: 20px; display: grid; gap: 5px; color: #FFFFFF; opacity: 0; transform: translateY(8px); transition: opacity 300ms ease, transform 300ms ease; } .cv-moments__slide.is-active .cv-moments__caption { opacity: 1; transform: translateY(0); } .cv-moments__caption span { font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.5; } .cv-moments__caption strong { font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(17px, 1.7vw, 22px); font-weight: 600; line-height: 1.35; } .cv-moments__controls { display: flex; justify-content: center; align-items: center; gap: 13px; min-height: 48px; margin-top: 2px; } .cv-moments__arrow, .cv-moments__toggle { display: inline-flex; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; border: 1px solid var(--cv-border, #DCE5E3); border-radius: 999px; background: var(--cv-surface, #FFFFFF); color: var(--cv-text, #0A0D0D); font: inherit; cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .cv-moments__arrow:hover, .cv-moments__toggle:hover { border-color: var(--cv-accent, #1F5F5B); background: var(--cv-accent, #1F5F5B); color: var(--cv-on-accent, #FFFFFF); } .cv-moments__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .cv-moments__toggle { min-width: 72px; padding-inline: 13px; font-size: 11px; font-weight: 800; } .cv-moments__count { min-width: 56px; color: var(--cv-text-muted, #5E6B68); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: center; } .cv-moments__arrow:focus-visible, .cv-moments__toggle:focus-visible, .cv-moments__footer a:focus-visible { outline: 3px solid var(--cv-accent, #1F5F5B); outline-offset: 3px; } .cv-moments__footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 15px; text-align: center; } .cv-moments__footer p { margin: 0; color: var(--cv-text-muted, #5E6B68); font-size: 13px; line-height: 1.5; } .cv-moments__footer a { display: inline-flex; align-items: center; gap: 9px; color: var(--cv-text, #0A0D0D); font-size: 13px; font-weight: 800; text-decoration: none; } .cv-moments__footer a span { color: var(--cv-accent, #1F5F5B); font-size: 18px; } @media (min-width: 1440px) { .cv-moments { --moments-card-width: 470px; } } @media (min-width: 768px) and (max-width: 1199px) { .cv-moments { --moments-card-width: clamp(310px, 39vw, 420px); padding-inline: 20px; } .cv-moments__viewport { height: 380px; } } @media (max-width: 767px) { .cv-moments { --moments-card-width: min(66vw, 350px); --moments-step: calc(var(--moments-card-width) * .76); padding: 46px 12px 28px; } .cv-moments__intro { margin-bottom: 13px; padding-inline: 8px; } .cv-moments__eyebrow { font-size: 10px; letter-spacing: .1em; } .cv-moments__title { font-size: clamp(31px, 7.2vw, 44px); line-height: 1.12; } .cv-moments__description { max-width: 540px; margin-top: 9px; font-size: 14px; line-height: 1.55; } .cv-moments__viewport { height: clamp(270px, 66vw, 340px); } .cv-moments__slide.is-prev-2, .cv-moments__slide.is-next-2 { opacity: 0; visibility: hidden; } .cv-moments__caption { right: 14px; bottom: 13px; left: 14px; } .cv-moments__footer { gap: 7px 14px; margin-top: 10px; } } @media (max-width: 479px) { .cv-moments { --moments-card-width: min(68vw, 300px); --moments-step: calc(var(--moments-card-width) * .74); padding-inline: 8px; } .cv-moments__viewport { height: 270px; } .cv-moments__caption span { font-size: 9px; } .cv-moments__caption strong { font-size: 17px; } .cv-moments__controls { gap: 9px; } .cv-moments__footer p, .cv-moments__footer a { font-size: 12px; } } @media (max-width: 359px) { .cv-moments { --moments-card-width: 70vw; --moments-step: calc(var(--moments-card-width) * .72); } .cv-moments__viewport { height: 250px; } .cv-moments__description { font-size: 13px; } .cv-moments__footer { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .cv-moments *, .cv-moments *::before, .cv-moments *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= PRICING SECTION — HOME 2 ONLY ========================================================= */ .cv-pricing { --price-surface: var(--cv-surface, #FFFFFF); --price-line: var(--cv-border, #DCE5E3); --price-muted: var(--cv-text-muted, #5E6B68); --price-accent: var(--cv-accent, #1F5F5B); --price-accent-soft: var(--cv-accent-soft, #C9D8D5); padding: clamp(54px, 6.5vw, 92px) clamp(18px, 4vw, 60px); background: var(--cv-bg, #F3F6F5); color: var(--cv-text, #0A0D0D); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-pricing *, .cv-pricing *::before, .cv-pricing *::after { box-sizing: border-box; } .cv-pricing__inner { width: min(100%, 1160px); margin-inline: auto; } .cv-pricing__intro { max-width: 820px; margin: 0 auto clamp(28px, 3.5vw, 44px); text-align: center; } .cv-pricing__eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 13px; color: var(--price-accent); font-size: 11px; font-weight: 800; letter-spacing: .13em; line-height: 1.5; } .cv-pricing__eyebrow span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px var(--price-accent-soft); } .cv-pricing__title { margin: 0; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(34px, 5vw, 62px); font-weight: 600; letter-spacing: -.06em; line-height: 1.08; } .cv-pricing__title em { color: var(--price-accent); font-style: normal; } .cv-pricing__description { max-width: 700px; margin: 14px auto 0; color: var(--price-muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; } .cv-pricing__plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(16px, 2.4vw, 28px); } .cv-pricing__plan { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--price-line); border-radius: 20px; background: var(--price-surface); box-shadow: 0 16px 42px rgba(10, 30, 28, .06); } .cv-pricing__plan--featured { border: 2px solid var(--price-accent); background: linear-gradient(145deg, rgba(31, 95, 91, .07), transparent 55%), var(--price-surface); box-shadow: 0 22px 52px rgba(31, 95, 91, .13); } .cv-pricing__plan-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 25px; } .cv-pricing__plan-number, .cv-pricing__featured-tag { color: var(--price-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.5; } .cv-pricing__plan-mark { color: var(--price-accent); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 22px; font-weight: 800; } .cv-pricing__featured-tag { padding: 7px 10px; border-radius: 999px; background: var(--price-accent); color: var(--cv-on-accent, #FFFFFF); font-size: 9px; white-space: nowrap; } .cv-pricing__plan h3 { margin: 20px 0 8px; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(23px, 2.5vw, 30px); font-weight: 600; letter-spacing: -.045em; line-height: 1.2; } .cv-pricing__plan-description { min-height: 48px; margin: 0; color: var(--price-muted); font-size: 14px; line-height: 1.65; } .cv-pricing__price { margin: 22px 0 0; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(27px, 3vw, 38px); font-weight: 700; letter-spacing: -.05em; line-height: 1.15; } .cv-pricing__price span { color: var(--price-accent); font-size: 1em; } .cv-pricing__price-note { margin: 5px 0 16px; color: var(--price-muted); font-size: 12px; line-height: 1.5; } .cv-pricing__button { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px; border: 1px solid var(--price-accent); border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.4; text-decoration: none; transition: background 180ms ease, color 180ms ease, transform 180ms ease; } .cv-pricing__button:hover { transform: translateY(-2px); } .cv-pricing__button--outline { background: transparent; color: var(--price-accent); } .cv-pricing__button--outline:hover { background: var(--price-accent); color: var(--cv-on-accent, #FFFFFF); } .cv-pricing__button--solid { background: var(--price-accent); color: var(--cv-on-accent, #FFFFFF); } .cv-pricing__button--solid:hover { background: var(--cv-accent-hover, #17504C); } .cv-pricing__button-arrow { flex: 0 0 auto; font-size: 18px; line-height: 1; } .cv-pricing__includes { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--price-line); } .cv-pricing__includes h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800; line-height: 1.5; } .cv-pricing__includes ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .cv-pricing__includes li { position: relative; padding-inline-start: 25px; color: var(--price-muted); font-size: 13px; line-height: 1.55; } .cv-pricing__includes li::before { position: absolute; inset-inline-start: 0; top: .05em; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--price-accent-soft); color: var(--price-accent); content: "✓"; font-size: 10px; font-weight: 900; } .cv-pricing__advisor { display: flex; flex-direction: column; align-items: center; margin-top: clamp(18px, 2.5vw, 28px); padding: clamp(22px, 3vw, 34px) 20px; border: 1px solid rgba(31, 95, 91, .13); border-radius: 22px; background: radial-gradient(ellipse at 15% 20%, rgba(201, 216, 213, .8), transparent 43%), radial-gradient(ellipse at 84% 75%, rgba(31, 95, 91, .18), transparent 48%), var(--price-surface); text-align: center; } .cv-pricing__advisor-image { display: block; width: 78px; height: 78px; margin-bottom: 12px; border: 4px solid var(--price-surface); border-radius: 50%; object-fit: cover; object-position: 58% 30%; box-shadow: 0 5px 18px rgba(10, 30, 28, .18); } .cv-pricing__advisor-eyebrow { margin: 0 0 7px; color: var(--price-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; } .cv-pricing__advisor h3 { margin: 0; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(20px, 2vw, 25px); font-weight: 600; letter-spacing: -.04em; line-height: 1.3; } .cv-pricing__advisor-copy { max-width: 650px; margin: 8px auto 16px; color: var(--price-muted); font-size: 14px; line-height: 1.65; } .cv-pricing__advisor-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 46px; padding: 11px 20px; border-radius: 999px; background: var(--price-accent); color: var(--cv-on-accent, #FFFFFF); font-size: 13px; font-weight: 800; line-height: 1.4; text-decoration: none; transition: background 180ms ease, transform 180ms ease; } .cv-pricing__advisor-button:hover { transform: translateY(-2px); background: var(--cv-accent-hover, #17504C); } .cv-pricing__advisor-button span { font-size: 18px; } .cv-pricing__button:focus-visible, .cv-pricing__advisor-button:focus-visible { outline: 3px solid var(--price-accent); outline-offset: 3px; } /* Scroll reveal remains visible if JavaScript is unavailable. */ .cv-pricing.is-ready [data-pricing-reveal] { opacity: 0; transform: translateY(22px); } .cv-pricing.is-ready [data-pricing-reveal].is-revealed { opacity: 1; transform: translateY(0); transition: opacity 650ms ease, transform 650ms cubic-bezier(.2, .7, .2, 1); } @media (max-width: 767px) { .cv-pricing { padding: 48px 16px; } .cv-pricing__plans { grid-template-columns: 1fr; gap: 14px; } .cv-pricing__plan { padding: 23px; border-radius: 17px; } .cv-pricing__plan-description { min-height: 0; } .cv-pricing__advisor { margin-top: 16px; border-radius: 18px; } } @media (max-width: 479px) { .cv-pricing { padding: 42px 12px; } .cv-pricing__title { font-size: clamp(31px, 8.5vw, 40px); } .cv-pricing__description { font-size: 14px; } .cv-pricing__plan { padding: 19px 17px; } .cv-pricing__plan-number { font-size: 9px; } .cv-pricing__plan h3 { font-size: 23px; } .cv-pricing__includes li { font-size: 13px; } .cv-pricing__advisor-copy { font-size: 13px; } } @media (max-width: 359px) { .cv-pricing__eyebrow { font-size: 9px; letter-spacing: .08em; } .cv-pricing__plan-top { align-items: flex-start; } .cv-pricing__featured-tag { padding: 6px 8px; font-size: 8px; } } @media (prefers-reduced-motion: reduce) { .cv-pricing *, .cv-pricing *::before, .cv-pricing *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= TYPEWRITER CTA — HOME 2 ONLY ========================================================= */ .cv-next-cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(36px, 5vw, 68px) clamp(14px, 3vw, 42px) 0; background: radial-gradient(ellipse at 50% 38%, rgba(31, 95, 91, .12), transparent 54%), var(--cv-bg, #F3F6F5); color: var(--cv-text, #0A0D0D); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-next-cta *, .cv-next-cta *::before, .cv-next-cta *::after { box-sizing: border-box; } .cv-next-cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100%, 1320px); min-height: 550px; margin-inline: auto; padding: clamp(38px, 5vw, 68px) 22px 0; overflow: hidden; border: 1px solid var(--cv-border, #DCE5E3); border-radius: 20px 20px 0 0; background: radial-gradient(ellipse at 50% 38%, rgba(31, 95, 91, .09), transparent 55%), var(--cv-surface, #FFFFFF); text-align: center; } .cv-next-cta__eyebrow { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 17px; color: var(--cv-accent, #1F5F5B); font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; } .cv-next-cta__eyebrow span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px var(--cv-accent-soft, #C9D8D5); } .cv-next-cta__title { position: relative; z-index: 1; width: min(100%, 1050px); margin: 0; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(42px, 6.2vw, 78px); font-weight: 600; letter-spacing: -.065em; line-height: 1.06; } .cv-next-cta__title-static { display: block; color: var(--cv-text, #0A0D0D); } .cv-next-cta__typing-line { display: block; min-height: 1.14em; color: var(--cv-accent, #1F5F5B); overflow-wrap: anywhere; } .cv-next-cta__typed { unicode-bidi: plaintext; } .cv-next-cta__cursor { display: inline-block; width: 3px; height: .8em; margin-inline-start: 7px; background: var(--cv-accent, #1F5F5B); vertical-align: -.04em; animation: cvNextCtaBlink 850ms steps(2, start) infinite; } .cv-next-cta__description { position: relative; z-index: 1; max-width: 700px; margin: 20px auto 0; color: var(--cv-text-muted, #5E6B68); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; } .cv-next-cta__actions { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px 26px; margin-top: 25px; } /* cv-login-button preserves the navbar Login button's exact styling. */ .cv-next-cta__primary { gap: 12px; text-decoration: none; } .cv-next-cta__primary span { font-size: 17px; } .cv-next-cta__secondary { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; color: var(--cv-text, #0A0D0D); font-size: 14px; font-weight: 700; text-decoration: none; } .cv-next-cta__secondary span { color: var(--cv-accent, #1F5F5B); font-size: 18px; transition: transform 180ms ease; } .cv-next-cta__secondary:hover span { transform: translate(3px, -3px); } .cv-next-cta__promise { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: auto; padding: 28px 12px 24px; color: var(--cv-text-muted, #5E6B68); font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; } .cv-next-cta__promise span { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--cv-accent, #1F5F5B); } .cv-next-cta__marquee { position: relative; z-index: 1; width: calc(100% + 44px); min-height: 62px; overflow: hidden; background: var(--cv-accent, #1F5F5B); color: var(--cv-on-accent, #FFFFFF); } .cv-next-cta__marquee-track { display: flex; width: max-content; min-height: 62px; align-items: center; animation: cvNextCtaMarquee 28s linear infinite; } .cv-next-cta__marquee-track span { display: inline-flex; align-items: center; gap: 18px; padding-inline: 20px; font-size: 12px; font-weight: 800; letter-spacing: .16em; white-space: nowrap; } .cv-next-cta__marquee-track i { color: rgba(255, 255, 255, .7); font-style: normal; } .cv-next-cta__orbit { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(82vw, 980px); aspect-ratio: 1; border: 1px solid rgba(31, 95, 91, .11); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); } .cv-next-cta__orbit--two { width: min(68vw, 800px); border-color: rgba(31, 95, 91, .09); animation: cvNextCtaOrbit 42s linear infinite; } .cv-next-cta__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; } @keyframes cvNextCtaBlink { to { visibility: hidden; } } @keyframes cvNextCtaOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes cvNextCtaMarquee { to { transform: translateX(-50%); } } @media (min-width: 1440px) { .cv-next-cta__inner { min-height: 590px; } } @media (min-width: 768px) and (max-width: 1199px) { .cv-next-cta__inner { min-height: 520px; } .cv-next-cta__title { font-size: clamp(46px, 6vw, 68px); } } @media (max-width: 767px) { .cv-next-cta { padding: 38px 14px 0; } .cv-next-cta__inner { min-height: 500px; padding: 46px 20px 0; border-radius: 16px 16px 0 0; } .cv-next-cta__title { font-size: clamp(38px, 8vw, 56px); line-height: 1.1; } .cv-next-cta__description { margin-top: 16px; font-size: 15px; } .cv-next-cta__actions { gap: 10px 18px; margin-top: 21px; } .cv-next-cta__promise { padding-block: 24px 20px; font-size: 9px; } .cv-next-cta__marquee, .cv-next-cta__marquee-track { min-height: 54px; } } @media (max-width: 479px) { .cv-next-cta { padding-inline: 9px; } .cv-next-cta__inner { min-height: 485px; padding: 40px 15px 0; } .cv-next-cta__eyebrow { font-size: 10px; letter-spacing: .1em; } .cv-next-cta__title { font-size: clamp(34px, 9vw, 44px); letter-spacing: -.055em; } .cv-next-cta__description { font-size: 14px; line-height: 1.6; } .cv-next-cta__actions { flex-direction: column; gap: 8px; margin-top: 19px; } .cv-next-cta__secondary { min-height: 40px; font-size: 13px; } .cv-next-cta__promise { gap: 8px; font-size: 8px; letter-spacing: .08em; } .cv-next-cta__marquee, .cv-next-cta__marquee-track { min-height: 50px; } .cv-next-cta__marquee-track span { font-size: 10px; } } @media (max-width: 359px) { .cv-next-cta__inner { min-height: 500px; padding-inline: 12px; } .cv-next-cta__title { font-size: 33px; } .cv-next-cta__promise { font-size: 8px; } .cv-next-cta__orbit--one { width: 110vw; } } @media (prefers-reduced-motion: reduce) { .cv-next-cta__cursor, .cv-next-cta__orbit--two, .cv-next-cta__marquee-track { animation: none; } .cv-next-cta__cursor { visibility: hidden; } } body:has(#home2Hero) .cv-footer__brand-name { font-family: var(--cv-heading-font); font-size: clamp(22px, 1.7vw, 26px); } body:has(#home2Hero) .cv-footer__description, body:has(#home2Hero) .cv-footer__links a, body:has(#home2Hero) .cv-footer__contact-text span, body:has(#home2Hero) .cv-footer__newsletter-text { font-family: var(--cv-body-font); font-size: clamp(13px, 1vw, 14px); line-height: 1.7; } body:has(#home2Hero) .cv-footer__eyebrow, body:has(#home2Hero) .cv-footer__newsletter-label { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.45; } body:has(#home2Hero) .cv-footer__heading { font-family: var(--cv-heading-font); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.3; } body:has(#home2Hero) .cv-footer__contact-text strong { font-family: var(--cv-body-font); font-size: 13px; line-height: 1.45; } body:has(#home2Hero) .cv-footer__newsletter-form input { font-family: var(--cv-body-font); font-size: 13px; } body:has(#home2Hero) .cv-footer__copyright, body:has(#home2Hero) .cv-footer__bottom-links, body:has(#home2Hero) .cv-footer__location { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.6; } @media (max-width: 767px) { body:has(#home2Hero) .cv-footer__description, body:has(#home2Hero) .cv-footer__links a, body:has(#home2Hero) .cv-footer__contact-text span, body:has(#home2Hero) .cv-footer__newsletter-text { font-size: 13px; } body:has(#home2Hero) .cv-footer__heading { font-size: 19px; } body:has(#home2Hero) .cv-footer__bottom { row-gap: 12px; } } @media (max-width: 479px) { body:has(#home2Hero) .cv-footer__eyebrow, body:has(#home2Hero) .cv-footer__newsletter-label { font-size: 10px; } body:has(#home2Hero) .cv-footer__copyright, body:has(#home2Hero) .cv-footer__bottom-links, body:has(#home2Hero) .cv-footer__location { font-size: 10px; } } /* ========================================================= ABOUT HERO — 75VH WITH CENTER-LINE IMAGE OVERLAP ========================================================= */ .cv-about-hero { --about-bg: #1F5F5B; --about-text: #F4F7F6; --about-muted: #D5E5E0; --about-soft: #A9D1C5; position: relative; z-index: 2; display: block; width: 100%; height: 75vh; min-height: 0; max-height: none; overflow: visible; padding: 0; background: radial-gradient(ellipse at 50% 24%, rgba(255, 255, 255, .12), transparent 52%), var(--about-bg); color: var(--about-text); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-about-hero *, .cv-about-hero *::before, .cv-about-hero *::after { box-sizing: border-box; } .cv-about-hero__inner { position: static; width: min(100%, 1320px); height: 100%; margin-inline: auto; } .cv-about-hero__intro { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(calc(100% - 36px), 820px); margin: 0; text-align: center; transform: translate(-50%, -50%); } .cv-about-hero__eyebrow { margin: 0 0 12px; color: var(--about-soft); font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; } .cv-about-hero__intro h1 { margin: 0; color: var(--about-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(42px, 5.8vw, 74px); font-weight: 600; letter-spacing: -.065em; line-height: 1.06; } .cv-about-hero__description { max-width: 720px; margin: 15px auto 0; color: var(--about-muted); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.7; } .cv-about-hero__gallery { position: absolute; z-index: 3; bottom: 0; left: 50%; display: grid; width: min(calc(100% - 48px), 1280px); grid-template-columns: 1.14fr .9fr 1.14fr .9fr; align-items: center; gap: clamp(10px, 1.6vw, 22px); margin: 0; transform: translate(-50%, 50%); } .cv-about-hero__image { position: relative; min-width: 0; aspect-ratio: 1.32 / 1; margin: 0; overflow: hidden; border: 2px solid rgba(255, 255, 255, .9); border-radius: 11px; background: rgba(255, 255, 255, .14); box-shadow: 0 18px 40px rgba(4, 25, 23, .22); } .cv-about-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(.2, .7, .2, 1); } .cv-about-hero__image:hover img { transform: scale(1.05); } /* Reveal without hiding content when JavaScript is unavailable. */ .cv-about-hero.is-prepared [data-about-reveal] { opacity: 0; transform: translateY(18px); } .cv-about-hero.is-prepared .cv-about-hero__intro { transform: translate(-50%, calc(-50% + 18px)); } .cv-about-hero.is-visible [data-about-reveal] { opacity: 1; transform: translateY(0); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1); } .cv-about-hero.is-visible .cv-about-hero__intro { transform: translate(-50%, -50%); } .cv-about-hero.is-visible .cv-about-hero__image:nth-child(2) { transition-delay: 80ms; } .cv-about-hero.is-visible .cv-about-hero__image:nth-child(3) { transition-delay: 160ms; } .cv-about-hero.is-visible .cv-about-hero__image:nth-child(4) { transition-delay: 240ms; } @media (max-width: 1023px) { .cv-about-hero__gallery { width: calc(100% - 40px); gap: 12px; } } @media (max-width: 767px) { .cv-about-hero { height: 75vh; min-height: 0; padding: 0; } .cv-about-hero__intro { width: calc(100% - 32px); } .cv-about-hero__eyebrow { font-size: 10px; letter-spacing: .1em; } .cv-about-hero__intro h1 { font-size: clamp(38px, 8vw, 52px); } .cv-about-hero__description { max-width: 580px; margin-top: 12px; font-size: 14px; line-height: 1.55; } .cv-about-hero__gallery { width: calc(100% - 28px); grid-template-columns: 1.14fr .9fr 1.14fr .9fr; gap: 7px; } .cv-about-hero__image { aspect-ratio: 1 / 1; border-width: 1.5px; border-radius: 8px; } } @media (max-width: 479px) { .cv-about-hero__intro { width: calc(100% - 26px); } .cv-about-hero__intro h1 { font-size: clamp(34px, 9vw, 43px); } .cv-about-hero__description { font-size: 13px; } .cv-about-hero__gallery { width: calc(100% - 20px); gap: 5px; } } @media (max-width: 359px) { .cv-about-hero__eyebrow { font-size: 9px; } .cv-about-hero__intro h1 { font-size: 33px; } .cv-about-hero__description { font-size: 12px; } .cv-about-hero__gallery { width: calc(100% - 14px); gap: 4px; } .cv-about-hero__image { border-radius: 6px; } } @media (prefers-reduced-motion: reduce) { .cv-about-hero *, .cv-about-hero *::before, .cv-about-hero *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= OUR STORY — IMAGE CIRCLE COMPOSITION ========================================================= */ .cv-story { position: relative; overflow: hidden; padding: clamp(58px, 7vw, 96px) clamp(18px, 4vw, 60px); background: radial-gradient(ellipse at 18% 48%, rgba(31, 95, 91, .08), transparent 38%), var(--cv-bg, #F3F6F5); color: var(--cv-text, #0A0D0D); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-story *, .cv-story *::before, .cv-story *::after { box-sizing: border-box; } .cv-story__inner { width: min(100%, 1320px); margin-inline: auto; } .cv-story__layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr); align-items: center; gap: clamp(34px, 6vw, 88px); } .cv-story__visual { position: relative; width: 100%; max-width: 600px; height: clamp(430px, 39vw, 540px); margin-inline: auto; } .cv-story__photo { position: absolute; z-index: 2; overflow: hidden; margin: 0; border: 4px solid var(--cv-bg, #F3F6F5); border-radius: 50%; background: var(--cv-surface, #FFFFFF); box-shadow: 0 16px 42px rgba(10, 30, 28, .15); transition: transform 500ms cubic-bezier(.2, .7, .2, 1), box-shadow 500ms ease; } .cv-story__photo img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .cv-story__photo--large { width: clamp(220px, 22vw, 286px); aspect-ratio: 1; } .cv-story__photo--small { width: clamp(112px, 11vw, 146px); aspect-ratio: 1; border-width: 3px; } .cv-story__photo--one { inset-block-start: 2%; inset-inline-start: 4%; } .cv-story__photo--two { inset-block-start: 3%; inset-inline-end: 5%; } .cv-story__photo--three { inset-block-end: 4%; inset-inline-start: 0; } .cv-story__photo--four { inset-block-end: 0; inset-inline-end: 3%; } .cv-story__photo:hover { z-index: 5; transform: scale(1.045); box-shadow: 0 22px 52px rgba(10, 30, 28, .22); } .cv-story__orbit { position: absolute; z-index: 0; inset: 7% 8%; border: 1px solid rgba(31, 95, 91, .19); border-radius: 50%; transform: rotate(-14deg); } .cv-story__orbit--two { inset: 19% 1%; border-color: rgba(31, 95, 91, .12); transform: rotate(18deg); } .cv-story__visual-note { position: absolute; z-index: 3; inset-block-start: 48%; inset-inline-start: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--cv-border, #DCE5E3); border-radius: 999px; background: var(--cv-surface, #FFFFFF); color: var(--cv-text-muted, #5E6B68); font-size: 9px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; transform: translate(-50%, -50%); } .cv-story__visual-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--cv-accent, #1F5F5B); box-shadow: 0 0 0 4px var(--cv-accent-soft, #C9D8D5); } .cv-story__content { min-width: 0; text-align: start; } .cv-story__eyebrow { margin: 0 0 13px; color: var(--cv-accent, #1F5F5B); font-size: 11px; font-weight: 800; letter-spacing: .13em; line-height: 1.5; } .cv-story__title { margin: 0; color: var(--cv-text, #0A0D0D); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(34px, 4vw, 54px); font-weight: 600; letter-spacing: -.06em; line-height: 1.12; } .cv-story__title em { color: var(--cv-accent, #1F5F5B); font-style: normal; } .cv-story__lead { margin: 19px 0 0; color: var(--cv-text, #0A0D0D); font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; line-height: 1.65; } .cv-story__copy { margin: 12px 0 0; color: var(--cv-text-muted, #5E6B68); font-size: 14px; line-height: 1.75; } .cv-story__principles { display: grid; gap: 0; margin-top: 21px; border-top: 1px solid var(--cv-border, #DCE5E3); } .cv-story__principle { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--cv-border, #DCE5E3); } .cv-story__principle-number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--cv-accent-soft, #C9D8D5); color: var(--cv-accent, #1F5F5B); font-size: 10px; font-weight: 800; } .cv-story__principle h3 { margin: 0; color: var(--cv-text, #0A0D0D); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 15px; font-weight: 700; line-height: 1.4; } .cv-story__principle p { margin: 4px 0 0; color: var(--cv-text-muted, #5E6B68); font-size: 13px; line-height: 1.55; } .cv-story__button { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; text-decoration: none; } .cv-story__button span { font-size: 17px; } .cv-story [data-story-reveal] { opacity: 1; transform: translateY(0); } .cv-story.is-ready [data-story-reveal] { opacity: 0; transform: translateY(22px); } .cv-story.is-visible [data-story-reveal] { opacity: 1; transform: translateY(0); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); } .cv-story.is-visible .cv-story__photo--two { transition-delay: 90ms; } .cv-story.is-visible .cv-story__photo--three { transition-delay: 170ms; } .cv-story.is-visible .cv-story__photo--four { transition-delay: 250ms; } .cv-story.is-visible .cv-story__content { transition-delay: 120ms; } @media (max-width: 1023px) { .cv-story__layout { grid-template-columns: minmax(0, 1fr) minmax(330px, .95fr); gap: 32px; } .cv-story__visual { height: 450px; } .cv-story__photo--large { width: clamp(200px, 24vw, 250px); } .cv-story__photo--small { width: clamp(100px, 12vw, 125px); } .cv-story__title { font-size: clamp(32px, 4vw, 44px); } } @media (max-width: 767px) { .cv-story { padding: 48px 18px; } .cv-story__layout { grid-template-columns: 1fr; gap: 22px; } .cv-story__visual { width: min(100%, 520px); height: clamp(340px, 82vw, 430px); } .cv-story__photo--large { width: clamp(170px, 42vw, 230px); } .cv-story__photo--small { width: clamp(88px, 21vw, 118px); } .cv-story__content { width: min(100%, 620px); margin-inline: auto; text-align: center; } .cv-story__title { font-size: clamp(34px, 7vw, 46px); } .cv-story__principle { text-align: start; } .cv-story__button { justify-content: center; } } @media (max-width: 479px) { .cv-story { padding: 38px 14px; } .cv-story__visual { height: clamp(315px, 88vw, 370px); } .cv-story__photo--large { width: clamp(150px, 47vw, 195px); } .cv-story__photo--small { width: clamp(78px, 24vw, 100px); } .cv-story__title { font-size: clamp(31px, 8.5vw, 39px); } .cv-story__lead { font-size: 15px; } .cv-story__copy { font-size: 13px; } .cv-story__principle h3 { font-size: 14px; } .cv-story__principle p { font-size: 12px; } } @media (max-width: 359px) { .cv-story { padding-inline: 11px; } .cv-story__visual { height: 300px; } .cv-story__photo--large { width: 145px; } .cv-story__photo--small { width: 74px; } .cv-story__visual-note { font-size: 8px; } } @media (prefers-reduced-motion: reduce) { .cv-story *, .cv-story *::before, .cv-story *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* Space between the overlapping About hero images and Our Story */ .cv-story { margin-block-start: clamp(170px, 14vw, 210px); padding-block: clamp(58px, 7vw, 96px); } @media (max-width: 767px) { .cv-story { margin-block-start: clamp(110px, 22vw, 160px); padding-block: 48px; } } @media (max-width: 479px) { .cv-story { margin-block-start: clamp(96px, 25vw, 120px); padding-block: 38px; } } /* ========================================================= MISSION / VISION / GOALS TABS ========================================================= */ .cv-principles { --principles-surface: var(--cv-surface, #FFFFFF); --principles-raised: var(--cv-surface-raised, #FFFFFF); --principles-line: var(--cv-border, #DCE5E3); --principles-muted: var(--cv-text-muted, #5E6B68); --principles-accent: var(--cv-accent, #1F5F5B); --principles-soft: var(--cv-accent-soft, #C9D8D5); padding: clamp(54px, 6.5vw, 92px) clamp(16px, 4vw, 56px); background: radial-gradient(ellipse at 15% 50%, rgba(31, 95, 91, .07), transparent 38%), var(--cv-bg, #F3F6F5); color: var(--cv-text, #0A0D0D); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-principles *, .cv-principles *::before, .cv-principles *::after { box-sizing: border-box; } .cv-principles__inner { width: min(100%, 1120px); margin-inline: auto; } .cv-principles__intro { max-width: 760px; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; } .cv-principles__eyebrow { margin: 0 0 10px; color: var(--principles-accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; } .cv-principles__intro h2 { margin: 0; color: var(--cv-text, #0A0D0D); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(32px, 4.5vw, 54px); font-weight: 600; letter-spacing: -.06em; line-height: 1.12; } .cv-principles__intro > p:last-child { max-width: 660px; margin: 12px auto 0; color: var(--principles-muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65; } .cv-principles__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 7px; border: 1px solid var(--principles-line); border-radius: 13px; background: var(--principles-surface); } .cv-principles__tab { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 12px 16px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--cv-text, #0A0D0D); font-family: var(--cv-body-font, "Manrope", sans-serif); text-align: start; cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .cv-principles__tab:hover { border-color: var(--principles-line); background: var(--cv-bg, #F3F6F5); } .cv-principles__tab.is-active { border-color: var(--principles-accent); background: var(--principles-accent); color: var(--cv-on-accent, #FFFFFF); } .cv-principles__tab-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: var(--principles-soft); color: var(--principles-accent); font-size: 15px; } .cv-principles__tab.is-active .cv-principles__tab-icon { background: rgba(255, 255, 255, .17); color: inherit; } .cv-principles__tab-label { min-width: 0; font-size: 15px; font-weight: 800; line-height: 1.4; } .cv-principles__tab-number { color: var(--principles-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; } .cv-principles__tab.is-active .cv-principles__tab-number { color: inherit; opacity: .8; } .cv-principles__tab:focus-visible { outline: 3px solid var(--principles-accent); outline-offset: 3px; } .cv-principles__panels { margin-top: 14px; } .cv-principles__panel { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--principles-line); border-radius: 17px; background: var(--principles-surface); box-shadow: 0 18px 46px rgba(10, 30, 28, .07); } .cv-principles__panel[hidden] { display: none; } .cv-principles__panel.is-entering { animation: cvPrinciplesSlideIn 420ms cubic-bezier(.2, .7, .2, 1) both; } .cv-principles__panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--principles-line); color: var(--principles-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.5; } .cv-principles__panel-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .cv-principles__panel-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--principles-accent); } .cv-principles__panel-grid { display: grid; grid-template-columns: minmax(150px, .62fr) minmax(0, 1.55fr) minmax(185px, .73fr); align-items: stretch; gap: clamp(18px, 3vw, 36px); padding-block: clamp(22px, 3.2vw, 38px); } .cv-principles__symbol { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 210px; gap: 16px; border-radius: 12px; background: radial-gradient(circle at 50% 32%, rgba(31, 95, 91, .12), transparent 58%), var(--cv-bg, #F3F6F5); color: var(--principles-accent); } .cv-principles__symbol i { display: grid; width: 88px; height: 88px; place-items: center; border: 1px solid var(--principles-line); border-radius: 50%; background: var(--principles-surface); font-size: 32px; box-shadow: 0 10px 28px rgba(10, 30, 28, .08); } .cv-principles__symbol span { font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; } .cv-principles__copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .cv-principles__copy h3 { margin: 0; color: var(--cv-text, #0A0D0D); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(24px, 2.8vw, 36px); font-weight: 600; letter-spacing: -.05em; line-height: 1.18; } .cv-principles__copy > p { margin: 12px 0 0; color: var(--principles-muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; } .cv-principles__keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .cv-principles__keywords span { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border: 1px solid var(--principles-line); border-radius: 999px; background: var(--principles-surface); color: var(--cv-text, #0A0D0D); font-size: 11px; font-weight: 700; line-height: 1.4; } .cv-principles__note { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 19px; border-inline-start: 3px solid var(--principles-accent); border-radius: 10px; background: var(--principles-soft); color: var(--cv-text, #0A0D0D); } .cv-principles__note > span { color: var(--principles-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; } .cv-principles__note p { margin: 16px 0; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 17px; font-weight: 600; line-height: 1.55; } .cv-principles__note > i { color: var(--principles-accent); font-size: 21px; } .cv-principles__panel-foot { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 38px; padding-top: 13px; border-top: 1px solid var(--principles-line); color: var(--principles-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-align: center; } .cv-principles__panel-foot i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--principles-accent); } .cv-principles__progress { height: 3px; margin-top: 13px; overflow: hidden; border-radius: 99px; background: var(--principles-line); } .cv-principles__progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: var(--principles-accent); } .cv-principles.is-playing .cv-principles__progress span { animation: cvPrinciplesProgress 750ms linear infinite; } @keyframes cvPrinciplesSlideIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } @keyframes cvPrinciplesProgress { to { transform: scaleX(1); } } @media (max-width: 1023px) { .cv-principles__panel-grid { grid-template-columns: minmax(130px, .55fr) minmax(0, 1.45fr); } .cv-principles__note { grid-column: 2; min-height: 110px; } } @media (max-width: 767px) { .cv-principles { padding: 48px 16px; } .cv-principles__tabs { gap: 5px; padding: 5px; } .cv-principles__tab { grid-template-columns: 1fr; justify-items: center; gap: 6px; min-height: 78px; padding: 9px 6px; text-align: center; } .cv-principles__tab-number { display: none; } .cv-principles__tab-icon { width: 34px; height: 34px; } .cv-principles__tab-label { font-size: 13px; } .cv-principles__panel { padding: 19px; } .cv-principles__panel-grid { grid-template-columns: 1fr; gap: 16px; padding-block: 18px; } .cv-principles__symbol { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 14px; } .cv-principles__symbol i { width: 54px; height: 54px; font-size: 21px; } .cv-principles__note { grid-column: auto; min-height: 0; gap: 8px; } .cv-principles__note p { margin: 5px 0; font-size: 15px; } } @media (max-width: 479px) { .cv-principles { padding: 40px 12px; } .cv-principles__intro h2 { font-size: clamp(29px, 8vw, 37px); } .cv-principles__intro > p:last-child { font-size: 13px; } .cv-principles__panel { padding: 16px; border-radius: 14px; } .cv-principles__panel-head { align-items: flex-start; font-size: 9px; } .cv-principles__panel-status { font-size: 8px; letter-spacing: .06em; } .cv-principles__copy h3 { font-size: 24px; } .cv-principles__copy > p { font-size: 14px; } .cv-principles__panel-foot { gap: 7px; font-size: 8px; letter-spacing: .06em; } } @media (max-width: 359px) { .cv-principles__tab-label { font-size: 11px; } .cv-principles__panel-head { flex-direction: column; gap: 7px; } .cv-principles__keywords span { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .cv-principles *, .cv-principles *::before, .cv-principles *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .cv-team { --team-bg: var(--cv-bg, #f3f6f5); --team-surface: var(--cv-surface, #ffffff); --team-text: var(--cv-text, #0a0d0d); --team-muted: var(--cv-text-muted, #5e6b68); --team-accent: var(--cv-accent, #1f5f5b); --team-soft: var(--cv-accent-soft, #c9d8d5); padding: clamp(64px, 7vw, 104px) clamp(18px, 4vw, 64px); background: var(--team-bg); color: var(--team-text); font-family: "Manrope", sans-serif; } .cv-team *, .cv-team *::before, .cv-team *::after { box-sizing: border-box; } .cv-team__inner { width: min(100%, 1440px); margin-inline: auto; } .cv-team__intro { max-width: 780px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; } .cv-team__eyebrow { display: inline-block; margin-bottom: 12px; color: var(--team-accent); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; } .cv-team__intro h2 { margin: 0; color: var(--team-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.12; } .cv-team__intro > p { max-width: 680px; margin: 16px auto 0; color: var(--team-muted); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.75; } .cv-team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); } .cv-team__card { min-width: 0; height: clamp(390px, 38vw, 490px); perspective: 1200px; outline: none; } .cv-team__flip { position: relative; width: 100%; height: 100%; border-radius: 22px; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.2, .75, .25, 1); } .cv-team__card:hover .cv-team__flip, .cv-team__card:focus .cv-team__flip, .cv-team__card:focus-within .cv-team__flip, .cv-team__card.is-flipped .cv-team__flip { transform: rotateY(180deg); } .cv-team__face { position: absolute; inset: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--team-accent) 16%, transparent); border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .cv-team__front { display: flex; flex-direction: column; background: var(--team-surface); } .cv-team__front > img { display: block; width: 100%; height: 68%; min-height: 0; object-fit: cover; object-position: center; background: var(--team-soft); } .cv-team__identity { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 16px clamp(16px, 1.5vw, 22px); } .cv-team__identity h3 { margin: 0; color: var(--team-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.2rem, 1.6vw, 1.55rem); font-weight: 700; line-height: 1.3; } .cv-team__identity > p { margin: 5px 0 0; color: var(--team-muted); font-size: clamp(0.95rem, 1.1vw, 1.05rem); font-weight: 600; line-height: 1.5; } .cv-team__hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--team-accent); font-size: 0.9rem; font-weight: 700; } .cv-team__back { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 2.5vw, 36px); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--team-accent) 20%, transparent), transparent 42%), var(--team-surface); transform: rotateY(180deg); } .cv-team__number { position: absolute; inset-block-start: 20px; inset-inline-end: 22px; color: var(--team-accent); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.12em; } .cv-team__icon { display: grid; width: 54px; height: 54px; margin-bottom: 20px; place-items: center; border-radius: 16px; background: var(--team-soft); color: var(--team-accent); font-size: 1.35rem; } .cv-team__back h3 { margin: 0; color: var(--team-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.35rem, 1.7vw, 1.7rem); font-weight: 700; line-height: 1.25; } .cv-team__back > p { margin: 12px 0 22px; color: var(--team-muted); font-size: clamp(1rem, 1.12vw, 1.08rem); line-height: 1.75; } .cv-team__back-name { padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--team-accent) 22%, transparent); color: var(--team-text); font-size: 0.95rem; font-weight: 800; line-height: 1.5; } .cv-team__back-name span { color: var(--team-muted); font-weight: 600; } .cv-team__card:focus-visible { border-radius: 24px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--team-accent) 45%, transparent); } @media (max-width: 1100px) { .cv-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .cv-team__card { height: clamp(390px, 55vw, 480px); } } @media (max-width: 600px) { .cv-team { padding: 56px 16px; } .cv-team__intro { margin-bottom: 28px; } .cv-team__grid { grid-template-columns: 1fr; gap: 16px; } .cv-team__card { height: min(112vw, 470px); min-height: 390px; } .cv-team__front > img { height: 66%; } .cv-team__identity { padding: 14px 18px; } .cv-team__back { padding: 26px; } } @media (prefers-reduced-motion: reduce) { .cv-team__flip { transition-duration: 1ms; } } .cv-testimonials { --t-bg: var(--cv-bg, #f3f6f5); --t-surface: var(--cv-surface, #ffffff); --t-text: var(--cv-text, #0a0d0d); --t-muted: var(--cv-text-muted, #5e6b68); --t-accent: var(--cv-accent, #1f5f5b); --t-soft: var(--cv-accent-soft, #c9d8d5); overflow: hidden; padding: clamp(60px, 7vw, 100px) clamp(18px, 4vw, 64px); background: var(--t-bg); color: var(--t-text); font-family: "Manrope", sans-serif; } .cv-testimonials *, .cv-testimonials *::before, .cv-testimonials *::after { box-sizing: border-box; } .cv-testimonials__layout { display: grid; grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.8fr); gap: clamp(24px, 4vw, 58px); width: min(100%, 1440px); min-height: 660px; margin-inline: auto; } .cv-testimonials__intro { position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; gap: 24px; } .cv-testimonials__intro-image { position: relative; overflow: hidden; height: clamp(230px, 25vw, 330px); border-radius: 22px; background: var(--t-soft); } .cv-testimonials__intro-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .cv-testimonials__image-caption { position: absolute; inset-inline: 14px; inset-block-end: 14px; display: flex; align-items: center; gap: 9px; width: fit-content; max-width: calc(100% - 28px); padding: 11px 14px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px; background: rgb(8 13 12 / 78%); color: #fff; font-size: 0.9rem; font-weight: 700; line-height: 1.4; backdrop-filter: blur(10px); } .cv-testimonials__image-caption i { color: #75d1c5; } .cv-testimonials__intro-copy { padding-inline: 2px; } .cv-testimonials__eyebrow { display: inline-block; margin-bottom: 10px; color: var(--t-accent); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; } .cv-testimonials__intro h2 { margin: 0; color: var(--t-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.12; } .cv-testimonials__intro-copy > p { margin: 14px 0 0; color: var(--t-muted); font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.75; } .cv-testimonials__trust { display: flex; align-items: center; gap: 11px; margin-top: 18px; color: var(--t-accent); font-size: 0.95rem; font-weight: 800; line-height: 1.5; } .cv-testimonials__trust i { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: var(--t-soft); } .cv-testimonials__marquees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 24px); height: 720px; min-height: 0; overflow: hidden; direction: ltr; mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); } .cv-testimonials__column { overflow: hidden; min-width: 0; } .cv-testimonials__track { display: flex; flex-direction: column; gap: 18px; will-change: transform; } .cv-testimonials__group { display: flex; flex-direction: column; gap: 18px; } .cv-testimonials__column--up .cv-testimonials__track { animation: cvTestimonialUp 34s linear infinite; } .cv-testimonials__column--down .cv-testimonials__track { transform: translateY(-50%); animation: cvTestimonialDown 39s linear infinite; } .cv-testimonials__marquees:hover .cv-testimonials__track, .cv-testimonials__marquees:focus-within .cv-testimonials__track { animation-play-state: paused; } .cv-quote { padding: clamp(18px, 2vw, 26px); border: 1px solid color-mix(in srgb, var(--t-accent) 13%, transparent); border-radius: 20px; background: var(--t-surface); box-shadow: 0 12px 32px rgb(16 42 38 / 5%); } .cv-quote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .cv-quote__mark { color: var(--t-accent); font-family: Georgia, serif; font-size: 3rem; font-weight: 700; line-height: 0.9; } .cv-quote__type { padding: 7px 10px; border-radius: 999px; background: var(--t-soft); color: var(--t-accent); font-size: 0.82rem; font-weight: 800; line-height: 1.4; text-align: center; } .cv-quote > p { margin: 0; color: var(--t-text); font-size: clamp(0.98rem, 1.08vw, 1.08rem); line-height: 1.75; } .cv-quote__author { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--t-accent) 17%, transparent); } .cv-quote__author img { display: block; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--t-soft); } .cv-quote__author div { display: flex; min-width: 0; flex-direction: column; gap: 2px; line-height: 1.45; } .cv-quote__author strong { color: var(--t-text); font-size: 0.98rem; font-weight: 800; } .cv-quote__author div > span { color: var(--t-muted); font-size: 0.9rem; } .cv-quote__author .cv-quote__company { color: var(--t-accent); font-size: 0.9rem; font-weight: 800; } @keyframes cvTestimonialUp { to { transform: translateY(-50%); } } @keyframes cvTestimonialDown { to { transform: translateY(0); } } @media (max-width: 1050px) { .cv-testimonials__layout { grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.5fr); gap: 24px; } .cv-testimonials__marquees { height: 680px; } } @media (max-width: 760px) { .cv-testimonials { padding: 56px 18px; } .cv-testimonials__layout { display: flex; flex-direction: column; min-height: 0; } .cv-testimonials__intro { position: relative; inset: auto; display: grid; grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 20px; } .cv-testimonials__intro-image { height: 230px; } .cv-testimonials__marquees { height: min(76vh, 680px); min-height: 480px; gap: 14px; } .cv-quote { padding: 18px; } } @media (max-width: 520px) { .cv-testimonials { padding: 48px 14px; } .cv-testimonials__intro { display: flex; align-items: stretch; gap: 18px; } .cv-testimonials__intro-image { height: 210px; } .cv-testimonials__marquees { height: 590px; min-height: 0; gap: 10px; } .cv-testimonials__track, .cv-testimonials__group { gap: 12px; } .cv-quote { padding: 14px; border-radius: 16px; } .cv-quote__type { font-size: 0.75rem; } .cv-quote > p { font-size: 0.92rem; line-height: 1.65; } .cv-quote__author { align-items: flex-start; gap: 9px; margin-top: 14px; padding-top: 12px; } .cv-quote__author img { flex-basis: 40px; width: 40px; height: 40px; } .cv-quote__author strong { font-size: 0.88rem; } .cv-quote__author div > span, .cv-quote__author .cv-quote__company { font-size: 0.8rem; } } @media (prefers-reduced-motion: reduce) { .cv-testimonials__track { animation: none !important; transform: none !important; } .cv-testimonials__marquees { overflow-y: auto; mask-image: none; -webkit-mask-image: none; } } .cv-testimonials__marquees.is-paused .cv-testimonials__track { animation-play-state: paused; } .cv-stats { --stats-bg: var(--cv-bg, #f3f6f5); --stats-surface: var(--cv-surface, #ffffff); --stats-text: var(--cv-text, #0a0d0d); --stats-muted: var(--cv-text-muted, #5e6b68); --stats-accent: var(--cv-accent, #1f5f5b); --stats-soft: var(--cv-accent-soft, #c9d8d5); padding: clamp(54px, 7vw, 96px) clamp(16px, 4vw, 64px); background: var(--stats-bg); color: var(--stats-text); font-family: "Manrope", sans-serif; } .cv-stats *, .cv-stats *::before, .cv-stats *::after { box-sizing: border-box; } .cv-stats__inner { width: min(100%, 1440px); margin-inline: auto; } .cv-stats__intro { max-width: 760px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; } .cv-stats__eyebrow { display: inline-block; margin-bottom: 10px; color: var(--stats-accent); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; } .cv-stats__intro h2 { margin: 0; color: var(--stats-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.9rem, 3.6vw, 3.15rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; } .cv-stats__intro > p { margin: 12px 0 0; color: var(--stats-muted); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.7; } .cv-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--stats-accent) 18%, transparent); border-radius: 22px; background: var(--stats-surface); } .cv-stat { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px, 3vw, 38px) clamp(14px, 2vw, 28px); text-align: center; } .cv-stat + .cv-stat { border-inline-start: 1px solid color-mix(in srgb, var(--stats-accent) 18%, transparent); } .cv-stat__icon { display: grid; width: 48px; height: 48px; margin-bottom: 14px; place-items: center; border-radius: 15px; background: var(--stats-soft); color: var(--stats-accent); font-size: 1.15rem; } .cv-stat__value { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: 0; color: var(--stats-accent); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2.3rem, 4vw, 3.8rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1.1; } .cv-stat__number { font-variant-numeric: tabular-nums; } .cv-stat h3 { margin: 10px 0 0; color: var(--stats-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.05rem, 1.35vw, 1.2rem); font-weight: 700; line-height: 1.4; } .cv-stat__detail { max-width: 240px; margin: 7px 0 0; color: var(--stats-muted); font-size: clamp(0.92rem, 1vw, 1rem); line-height: 1.6; } @media (max-width: 900px) { .cv-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-stat:nth-child(3) { border-inline-start: 0; border-top: 1px solid color-mix(in srgb, var(--stats-accent) 18%, transparent); } .cv-stat:nth-child(4) { border-top: 1px solid color-mix(in srgb, var(--stats-accent) 18%, transparent); } } @media (max-width: 480px) { .cv-stats { padding: 48px 14px; } .cv-stats__grid { border-radius: 18px; } .cv-stat { padding: 22px 10px; } .cv-stat__icon { width: 42px; height: 42px; margin-bottom: 11px; border-radius: 13px; } .cv-stat__value { font-size: clamp(2rem, 10vw, 2.7rem); } .cv-stat h3 { font-size: 0.98rem; } .cv-stat__detail { font-size: 0.86rem; } } @media (prefers-reduced-motion: reduce) { .cv-stat__number { scroll-behavior: auto; } } .cv-about-cta { --about-cta-accent: var(--cv-accent, #1f5f5b); --about-cta-light: #f4f8f6; position: relative; isolation: isolate; display: grid; min-height: clamp(500px, 58vw, 720px); overflow: hidden; padding: clamp(64px, 8vw, 112px) clamp(18px, 5vw, 72px); place-items: center; background: #101716; color: var(--about-cta-light); font-family: "Manrope", sans-serif; text-align: center; } .cv-about-cta *, .cv-about-cta *::before, .cv-about-cta *::after { box-sizing: border-box; } .cv-about-cta__image, .cv-about-cta__veil { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; } .cv-about-cta__image { object-fit: cover; object-position: center 48%; animation: cvAboutCtaImageDrift 24s ease-in-out infinite alternate; } .cv-about-cta__veil { z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgb(11 24 22 / 34%) 0%, rgb(8 15 14 / 65%) 62%, rgb(5 10 9 / 80%) 100%), linear-gradient(105deg, rgb(10 20 19 / 58%), rgb(10 20 19 / 72%)); } .cv-about-cta::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 48%, rgb(63 163 155 / 18%), transparent 37%), linear-gradient(90deg, transparent 49.9%, rgb(255 255 255 / 6%) 50%, transparent 50.1%); content: ""; pointer-events: none; } .cv-about-cta__content { width: min(100%, 900px); opacity: 0; transform: translateY(26px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2, .7, .2, 1); } .cv-about-cta.is-visible .cv-about-cta__content { opacity: 1; transform: translateY(0); } .cv-about-cta__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: clamp(18px, 2.4vw, 28px); color: #a7e0d8; font-size: 0.92rem; font-weight: 800; letter-spacing: 0.13em; line-height: 1.5; text-transform: uppercase; } .cv-about-cta__eyebrow i { animation: cvAboutCtaSpark 2.4s ease-in-out infinite; } .cv-about-cta h2 { margin: 0; color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1.06; text-wrap: balance; } .cv-about-cta h2 span { color: #83d0c6; } .cv-about-cta__content > p { max-width: 700px; margin: clamp(18px, 2.2vw, 26px) auto 0; color: rgb(255 255 255 / 88%); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.8; text-wrap: pretty; } .cv-about-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(26px, 3.2vw, 38px); } .cv-about-cta__button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 11px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--cv-radius-sm, 8px); font-family: "Manrope", sans-serif; font-size: 0.98rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease; } .cv-about-cta__button:hover { transform: translateY(-3px); } .cv-about-cta__button--primary { background: var(--about-cta-accent); color: var(--cv-on-accent, #fff); } .cv-about-cta__button--primary:hover { background: var(--cv-accent-hover, #174d49); } .cv-about-cta__button--secondary { border-color: rgb(255 255 255 / 54%); background: rgb(255 255 255 / 7%); color: #fff; backdrop-filter: blur(8px); } .cv-about-cta__button--secondary:hover { border-color: #a7e0d8; background: rgb(255 255 255 / 14%); } .cv-about-cta__note { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 48px); color: rgb(255 255 255 / 78%); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; } .cv-about-cta__note-line { width: clamp(28px, 5vw, 68px); height: 1px; background: rgb(131 208 198 / 65%); } .cv-about-cta__orbit { position: absolute; z-index: -1; width: min(72vw, 780px); aspect-ratio: 1; border: 1px solid rgb(131 208 198 / 17%); border-radius: 50%; pointer-events: none; } .cv-about-cta__orbit--one { animation: cvAboutCtaOrbit 32s linear infinite; } .cv-about-cta__orbit--two { width: min(54vw, 580px); border-style: dashed; border-color: rgb(131 208 198 / 12%); animation: cvAboutCtaOrbit 45s linear infinite reverse; } .cv-about-cta__corner { position: absolute; width: 44px; height: 44px; border-color: rgb(131 208 198 / 72%); border-style: solid; opacity: 0.75; } .cv-about-cta__corner--tl { inset-block-start: 22px; inset-inline-start: 22px; border-width: 1px 0 0 1px; } .cv-about-cta__corner--br { inset-block-end: 22px; inset-inline-end: 22px; border-width: 0 1px 1px 0; } @keyframes cvAboutCtaImageDrift { from { transform: scale(1); } to { transform: scale(1.08); } } @keyframes cvAboutCtaOrbit { to { transform: rotate(360deg); } } @keyframes cvAboutCtaSpark { 0%, 100% { opacity: 0.7; transform: scale(0.9) rotate(-10deg); } 50% { opacity: 1; transform: scale(1.15) rotate(10deg); } } @media (max-width: 700px) { .cv-about-cta { min-height: 560px; padding: 64px 18px; } .cv-about-cta h2 { font-size: clamp(2.25rem, 10vw, 3.8rem); } .cv-about-cta__actions { flex-direction: column; width: 100%; } .cv-about-cta__button { width: min(100%, 340px); min-height: 50px; } .cv-about-cta__orbit { width: 95vw; } .cv-about-cta__orbit--two { width: 72vw; } } @media (max-width: 380px) { .cv-about-cta { min-height: 590px; padding-inline: 14px; } .cv-about-cta__eyebrow { font-size: 0.82rem; letter-spacing: 0.08em; } .cv-about-cta__note { gap: 8px; font-size: 0.75rem; } .cv-about-cta__note-line { width: 22px; } .cv-about-cta__corner { width: 28px; height: 28px; } } @media (prefers-reduced-motion: reduce) { .cv-about-cta__image, .cv-about-cta__orbit, .cv-about-cta__eyebrow i { animation: none; } .cv-about-cta__content { opacity: 1; transform: none; transition: none; } .cv-about-cta__button { transition: none; } } .cv-about-cta { min-height: clamp(460px, 52vw, 640px); } .cv-about-cta h2 { font-size: clamp(2rem, 3vw, 3.2rem); } @media (max-width: 700px) { .cv-about-cta { min-height: 520px; } .cv-about-cta h2 { font-size: clamp(2rem, 8vw, 3.2rem); } } @media (max-width: 380px) { .cv-about-cta { min-height: 540px; } } .cv-about-cta { min-height: 440px; padding-block: 44px; } @media (max-width: 700px) { .cv-about-cta { min-height: 470px; padding-block: 38px; } } @media (max-width: 380px) { .cv-about-cta { min-height: 490px; padding-block: 32px; } } /* About Us footer — mirror the homepage footer styling */ body:has(#aboutHero) .cv-footer { --black: #103E3B; --text: #F4F7F6; --accent: #63AAA4; --accent-hover: #7AC4BC; --on-accent: #08201E; background: #103E3B; color: #F4F7F6; } body:has(#aboutHero) .cv-footer__brand-name { font-family: var(--cv-heading-font); font-size: clamp(22px, 1.7vw, 26px); } body:has(#aboutHero) .cv-footer__description, body:has(#aboutHero) .cv-footer__links a, body:has(#aboutHero) .cv-footer__contact-text span, body:has(#aboutHero) .cv-footer__newsletter-text { font-family: var(--cv-body-font); font-size: clamp(13px, 1vw, 14px); line-height: 1.7; } body:has(#aboutHero) .cv-footer__eyebrow, body:has(#aboutHero) .cv-footer__newsletter-label { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.45; } body:has(#aboutHero) .cv-footer__heading { font-family: var(--cv-heading-font); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.3; } body:has(#aboutHero) .cv-footer__contact-text strong { font-family: var(--cv-body-font); font-size: 13px; line-height: 1.45; } body:has(#aboutHero) .cv-footer__newsletter-form input { font-family: var(--cv-body-font); font-size: 13px; } body:has(#aboutHero) .cv-footer__copyright, body:has(#aboutHero) .cv-footer__bottom-links, body:has(#aboutHero) .cv-footer__location { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.6; } body:has(#aboutHero) .cv-footer__copyright, body:has(#aboutHero) .cv-footer__location { color: rgba(244, 247, 246, .74); } body:has(#aboutHero) .cv-footer__bottom-links a { color: rgba(244, 247, 246, .78); } @media (max-width: 767px) { body:has(#aboutHero) .cv-footer__description, body:has(#aboutHero) .cv-footer__links a, body:has(#aboutHero) .cv-footer__contact-text span, body:has(#aboutHero) .cv-footer__newsletter-text { font-size: 13px; } body:has(#aboutHero) .cv-footer__heading { font-size: 19px; } body:has(#aboutHero) .cv-footer__bottom { row-gap: 12px; } } @media (max-width: 479px) { body:has(#aboutHero) .cv-footer__eyebrow, body:has(#aboutHero) .cv-footer__newsletter-label { font-size: 10px; } body:has(#aboutHero) .cv-footer__copyright, body:has(#aboutHero) .cv-footer__bottom-links, body:has(#aboutHero) .cv-footer__location { font-size: 10px; } } .cv-history { --history-bg: var(--cv-bg, #f3f6f5); --history-surface: var(--cv-surface, #ffffff); --history-text: var(--cv-text, #0a0d0d); --history-muted: var(--cv-text-muted, #5e6b68); --history-accent: var(--cv-accent, #1f5f5b); --history-soft: var(--cv-accent-soft, #c9d8d5); position: relative; overflow: clip; padding: clamp(64px, 7vw, 104px) clamp(18px, 4vw, 64px); background: var(--history-bg); color: var(--history-text); font-family: "Manrope", sans-serif; } .cv-history *, .cv-history *::before, .cv-history *::after { box-sizing: border-box; } .cv-history__inner { width: min(100%, 1360px); margin-inline: auto; } .cv-history__intro { max-width: 780px; margin: 0 auto clamp(42px, 5vw, 68px); text-align: center; } .cv-history__eyebrow { display: inline-block; margin-bottom: 11px; color: var(--history-accent); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; } .cv-history__intro h2 { margin: 0; color: var(--history-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.13; text-wrap: balance; } .cv-history__intro > p { max-width: 680px; margin: 14px auto 0; color: var(--history-muted); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.75; } .cv-history__timeline { position: relative; display: grid; gap: clamp(22px, 3vw, 38px); isolation: isolate; } .cv-history__rail, .cv-history__rail-progress { position: absolute; z-index: -1; inset-block: 12px; inset-inline-start: 50%; width: 2px; background: color-mix(in srgb, var(--history-accent) 20%, transparent); transform: translateX(-50%); } .cv-history__rail-progress { inset-block-end: auto; height: calc(100% - 24px); background: var(--history-accent); transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform 1.5s cubic-bezier(.2, .7, .2, 1); } .cv-history.is-visible .cv-history__rail-progress { transform: translateX(-50%) scaleY(1); } .cv-history__row { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; min-height: 220px; } .cv-history__content { position: relative; width: min(100%, 540px); padding: clamp(22px, 3vw, 34px); border: 1px solid color-mix(in srgb, var(--history-accent) 16%, transparent); border-radius: 22px; background: var(--history-surface); box-shadow: 0 12px 36px rgb(20 50 46 / 5%); opacity: 0; transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); } .cv-history__row--left .cv-history__content { grid-column: 1; justify-self: end; transform: translateX(-30px); } .cv-history__row--right .cv-history__content { grid-column: 3; justify-self: start; transform: translateX(30px); } .cv-history.is-visible .cv-history__content { opacity: 1; transform: translateX(0); } .cv-history__row:nth-of-type(2) .cv-history__content { transition-delay: 100ms; } .cv-history__row:nth-of-type(3) .cv-history__content { transition-delay: 220ms; } .cv-history__row:nth-of-type(4) .cv-history__content { transition-delay: 340ms; } .cv-history__row:nth-of-type(5) .cv-history__content { transition-delay: 460ms; } .cv-history__marker { z-index: 1; display: grid; grid-column: 2; grid-row: 1; width: 58px; height: 58px; margin-inline: auto; place-items: center; border: 5px solid var(--history-bg); border-radius: 50%; background: var(--history-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--history-accent) 30%, transparent); color: var(--cv-on-accent, #fff); font-size: 1.1rem; transition: transform 500ms cubic-bezier(.2, .8, .2, 1); } .cv-history.is-visible .cv-history__row:hover .cv-history__marker { transform: scale(1.12) rotate(-8deg); } .cv-history__spacer { grid-row: 1; } .cv-history__chapter { display: inline-block; margin-bottom: 10px; color: var(--history-accent); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.07em; line-height: 1.5; text-transform: uppercase; } .cv-history__content h3 { margin: 0; color: var(--history-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; } .cv-history__content > p { margin: 12px 0 0; color: var(--history-muted); font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.75; } .cv-history__detail { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--history-accent) 16%, transparent); color: var(--history-text); font-size: 0.95rem; font-weight: 700; line-height: 1.5; } .cv-history__detail i { color: var(--history-accent); } @media (max-width: 760px) { .cv-history { padding: 58px 18px; } .cv-history__intro { margin-bottom: 36px; } .cv-history__timeline { gap: 16px; } .cv-history__rail, .cv-history__rail-progress { inset-inline-start: 25px; transform: none; } .cv-history__rail-progress { transform: scaleY(0); transform-origin: top; } .cv-history.is-visible .cv-history__rail-progress { transform: scaleY(1); } .cv-history__row { grid-template-columns: 50px minmax(0, 1fr); min-height: 0; align-items: stretch; } .cv-history__content, .cv-history__row--left .cv-history__content, .cv-history__row--right .cv-history__content { grid-column: 2; grid-row: 1; justify-self: stretch; width: 100%; padding: 22px; transform: translateY(18px); } .cv-history.is-visible .cv-history__content { transform: translateY(0); } .cv-history__marker { grid-column: 1; grid-row: 1; align-self: start; width: 42px; height: 42px; margin: 18px 0 0; border-width: 4px; font-size: 0.9rem; } .cv-history__spacer { display: none; } } @media (max-width: 420px) { .cv-history { padding: 48px 14px; } .cv-history__row { grid-template-columns: 42px minmax(0, 1fr); } .cv-history__rail, .cv-history__rail-progress { inset-inline-start: 20px; } .cv-history__content, .cv-history__row--left .cv-history__content, .cv-history__row--right .cv-history__content { padding: 18px; border-radius: 17px; } .cv-history__chapter { font-size: 0.82rem; } .cv-history__content h3 { font-size: 1.28rem; } .cv-history__content > p { font-size: 0.96rem; } } @media (prefers-reduced-motion: reduce) { .cv-history__rail-progress, .cv-history__content, .cv-history__marker { transition: none !important; } .cv-history__content { opacity: 1; transform: none !important; } .cv-history__rail-progress { transform: translateX(-50%) scaleY(1); } } /* Reduce the gap before Our Story */ .cv-story { margin-block-start: clamp(56px, 6vw, 84px); padding-block-start: clamp(52px, 5vw, 72px); } /* Give Mission, Vision & Goals more room below the overlapping hero images */ .cv-principles { padding-block-start: clamp(110px, 10vw, 144px); } @media (max-width: 760px) { .cv-story { margin-block-start: 48px; padding-block-start: 52px; } .cv-principles { padding-block-start: 88px; } } @media (max-width: 480px) { .cv-story { margin-block-start: 40px; padding-block-start: 44px; } .cv-principles { padding-block-start: 72px; } } .cv-principles { padding-block-start: clamp(168px, 13vw, 200px); } .cv-story { padding-block-start: clamp(40px, 4vw, 56px); } @media (max-width: 760px) { .cv-principles { padding-block-start: 112px; } .cv-story { padding-block-start: 42px; } } @media (max-width: 480px) { .cv-principles { padding-block-start: 96px; } .cv-story { padding-block-start: 36px; } } .cv-services-hero { --services-accent: var(--cv-accent, #1f5f5b); --services-teal: #63c1b7; --services-white: #f4f7f6; position: relative; isolation: isolate; display: flex; min-height: max(680px, calc(100svh - 82px)); align-items: center; overflow: hidden; padding: clamp(52px, 6vw, 88px) clamp(20px, 6vw, 96px); background: #080a0a; color: var(--services-white); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-services-hero *, .cv-services-hero *::before, .cv-services-hero *::after { box-sizing: border-box; } .cv-services-hero__backdrop, .cv-services-hero__overlay { position: absolute; z-index: -2; inset: 0; } .cv-services-hero__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; opacity: 0; transform: scale(1.04); transition: opacity 520ms ease, transform 1200ms ease; } .cv-services-hero__background.is-current { opacity: 1; transform: scale(1); } .cv-services-hero__overlay { z-index: 1; background: linear-gradient(90deg, rgb(5 12 11 / 88%) 0%, rgb(5 12 11 / 69%) 45%, rgb(5 12 11 / 25%) 100%), linear-gradient(0deg, rgb(4 9 8 / 46%), transparent 46%); } .cv-services-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); align-items: center; gap: clamp(34px, 7vw, 104px); width: min(100%, 1480px); margin-inline: auto; } .cv-services-hero__copy { max-width: 740px; animation: cvServicesCopyIn 800ms cubic-bezier(.2, .7, .2, 1) both; } .cv-services-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(18px, 2vw, 28px); color: #b6e5df; font-size: 0.9rem; font-weight: 800; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; } .cv-services-hero__dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--services-teal); box-shadow: 0 0 0 6px rgb(99 193 183 / 15%); animation: cvServicesPulse 2s ease-in-out infinite; } .cv-services-hero h1 { margin: 0; color: #fff; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(2.8rem, 5.6vw, 5.5rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.06; text-wrap: balance; } .cv-services-hero h1 em { color: #82d1c7; font-style: normal; } .cv-services-hero__copy > p { max-width: 620px; margin: clamp(18px, 2vw, 26px) 0 0; color: rgb(244 247 246 / 88%); font-size: clamp(1.05rem, 1.35vw, 1.18rem); line-height: 1.8; } .cv-services-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(24px, 3vw, 36px); } .cv-services-hero__button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 11px; padding: 0 19px; border-radius: var(--cv-radius-sm, 8px); background: var(--services-accent); color: var(--cv-on-accent, #fff); font-size: 0.95rem; font-weight: 700; text-decoration: none; transition: transform 220ms ease, background-color 220ms ease; } .cv-services-hero__button:hover { transform: translateY(-2px); background: var(--cv-accent-hover, #174d49); } .cv-services-hero__link { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 0.95rem; font-weight: 700; text-decoration: none; } .cv-services-hero__link i { color: #82d1c7; } .cv-services-hero__signature { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: clamp(32px, 4vw, 52px); color: rgb(244 247 246 / 76%); font-size: 0.85rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; } .cv-services-hero__separator { width: 5px; height: 5px; border-radius: 50%; background: var(--services-teal); } .cv-services-hero__frame { position: relative; width: 100%; height: clamp(390px, 42vw, 570px); margin: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 64%); border-radius: 22px; background: #172321; box-shadow: 0 28px 80px rgb(0 0 0 / 38%); opacity: 0; transform: translateX(52px); animation: cvServicesFrameIn 850ms 120ms cubic-bezier(.2, .75, .2, 1) forwards; } .cv-services-hero__frame::after { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgb(4 10 9 / 87%)); content: ""; pointer-events: none; } .cv-services-hero__frame-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 260ms ease, transform 420ms cubic-bezier(.2, .7, .2, 1); } .cv-services-hero__frame.is-leaving .cv-services-hero__frame-image { opacity: 0; transform: translateX(38px) scale(.97); } .cv-services-hero__frame.is-entering .cv-services-hero__frame-image { opacity: 0; transform: translateX(44px) scale(.98); } .cv-services-hero__caption { position: absolute; z-index: 1; inset-inline: clamp(15px, 2vw, 24px); inset-block-end: clamp(15px, 2vw, 24px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; color: #fff; } .cv-services-hero__caption-index { display: flex; align-items: center; gap: 7px; color: #9cddd5; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; } .cv-services-hero__caption-index i { width: 16px; height: 1px; background: rgb(255 255 255 / 55%); } .cv-services-hero__caption-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .cv-services-hero__caption-copy strong { font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(.98rem, 1.35vw, 1.2rem); line-height: 1.35; } .cv-services-hero__caption-copy small { color: rgb(255 255 255 / 78%); font-size: .86rem; line-height: 1.5; } .cv-services-hero__caption-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgb(255 255 255 / 48%); border-radius: 50%; } @keyframes cvServicesCopyIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes cvServicesFrameIn { to { opacity: 1; transform: translateX(0); } } @keyframes cvServicesPulse { 50% { box-shadow: 0 0 0 10px rgb(99 193 183 / 4%); } } @media (max-width: 1050px) { .cv-services-hero { min-height: 700px; padding-inline: 5vw; } .cv-services-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); gap: 30px; } .cv-services-hero__frame { height: clamp(350px, 46vw, 480px); } } @media (max-width: 760px) { .cv-services-hero { min-height: 0; padding: 56px 20px 64px; } .cv-services-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; } .cv-services-hero__copy { max-width: 680px; } .cv-services-hero h1 { font-size: clamp(2.5rem, 8.5vw, 4rem); } .cv-services-hero__frame { width: min(100%, 580px); height: clamp(320px, 66vw, 440px); justify-self: center; } } @media (max-width: 480px) { .cv-services-hero { padding: 44px 16px 52px; } .cv-services-hero__inner { gap: 24px; } .cv-services-hero h1 { font-size: clamp(2.15rem, 9.5vw, 3.1rem); } .cv-services-hero__copy > p { font-size: 1rem; } .cv-services-hero__actions { align-items: flex-start; flex-direction: column; gap: 15px; } .cv-services-hero__frame { height: 320px; border-radius: 17px; } .cv-services-hero__caption { grid-template-columns: auto minmax(0, 1fr); } .cv-services-hero__caption-icon { display: none; } } @media (max-width: 360px) { .cv-services-hero h1 { font-size: 2rem; } .cv-services-hero__frame { height: 290px; } .cv-services-hero__signature { font-size: .76rem; } } @media (prefers-reduced-motion: reduce) { .cv-services-hero__dot { animation: none; } .cv-services-hero__copy, .cv-services-hero__frame { opacity: 1; transform: none; animation: none; } .cv-services-hero__background, .cv-services-hero__frame-image { transition: none; } } .cv-services-hero { height: 75vh; height: 75svh; min-height: 0; max-height: none; } @media (max-width: 760px) { .cv-services-hero { height: 75vh; height: 75svh; min-height: 0; padding: 16px; } .cv-services-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(100px, 0.75fr); gap: 12px; } .cv-services-hero h1 { font-size: clamp(1.55rem, 5vw, 2.5rem); } .cv-services-hero__copy > p { font-size: 0.9rem; line-height: 1.5; } .cv-services-hero__frame { width: 100%; height: 55vh; height: 55svh; min-height: 0; } .cv-services-hero__signature, .cv-services-hero__caption-icon { display: none; } } @media (max-width: 380px) { .cv-services-hero__eyebrow { font-size: 0.68rem; letter-spacing: 0.04em; } .cv-services-hero h1 { font-size: 1.45rem; } .cv-services-hero__actions { gap: 10px; } .cv-services-hero__button, .cv-services-hero__link { font-size: 0.82rem; } } .cv-auth-page { --auth-bg: var(--cv-bg, #f3f6f5); --auth-surface: var(--cv-surface, #ffffff); --auth-text: var(--cv-text, #0a0d0d); --auth-muted: var(--cv-text-muted, #5e6b68); --auth-accent: var(--cv-accent, #1f5f5b); --auth-border: color-mix(in srgb, var(--auth-text) 13%, transparent); --auth-input: var(--auth-surface); min-height: 100vh; margin: 0; background: var(--auth-bg); color: var(--auth-text); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-auth-page *, .cv-auth-page *::before, .cv-auth-page *::after { box-sizing: border-box; } .cv-auth-tools { position: absolute; z-index: 5; inset-block-start: 22px; inset-inline-end: clamp(18px, 4vw, 56px); display: flex; gap: 10px; } .cv-auth-tool { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--auth-border); border-radius: 50%; background: var(--auth-surface); color: var(--auth-text); cursor: pointer; font-size: 1rem; transition: border-color 180ms ease, color 180ms ease, transform 180ms ease; } .cv-auth-tool:hover { transform: translateY(-2px); border-color: var(--auth-accent); color: var(--auth-accent); } .cv-auth-sun { display: none; } .cv-auth { display: grid; min-height: 100vh; padding: 82px clamp(16px, 4vw, 60px) 34px; place-items: center; } .cv-auth__shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 1240px); min-height: min(760px, calc(100vh - 116px)); overflow: hidden; border: 1px solid var(--auth-border); border-radius: 26px; background: var(--auth-surface); box-shadow: 0 24px 80px rgb(15 40 36 / 10%); } .cv-auth__brand-panel { position: relative; isolation: isolate; display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4vw, 52px); background: #0b1715; color: #f4f7f6; } .cv-auth__backdrop, .cv-auth__image-shade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; } .cv-auth__backdrop { object-fit: cover; object-position: center; animation: cvAuthImageDrift 22s ease-in-out infinite alternate; } .cv-auth__image-shade { z-index: -1; background: linear-gradient(180deg, rgb(4 12 11 / 34%) 0%, rgb(4 12 11 / 74%) 58%, rgb(4 12 11 / 90%) 100%), linear-gradient(90deg, rgb(4 12 11 / 30%), transparent); } .cv-auth__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 1.35rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; } .cv-auth__brand-mark { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border-radius: 13px; background: #f2f6f5; } .cv-auth__brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; } .cv-auth__story { max-width: 510px; margin-block: auto; padding-block: 56px; animation: cvAuthRise 750ms cubic-bezier(.2, .7, .2, 1) both; } .cv-auth__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #78c8be; font-size: .88rem; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; } .cv-auth__eyebrow-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #63bcb2; } .cv-auth__story h1 { margin: 20px 0 0; color: #fff; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(2.4rem, 4.3vw, 4.5rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.08; } .cv-auth__story h1 em { color: #80d0c6; font-style: normal; } .cv-auth__story p { max-width: 450px; margin: 20px 0 0; color: rgb(244 247 246 / 86%); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.8; } .cv-auth__brand-foot { display: flex; align-items: center; gap: 12px; color: rgb(244 247 246 / 76%); font-size: .85rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; } .cv-auth__foot-line { width: clamp(28px, 4vw, 54px); height: 1px; background: #72c9bf; } .cv-auth__form-panel { display: grid; min-width: 0; padding: clamp(30px, 5vw, 68px); place-items: center; background: var(--auth-surface); } .cv-auth__form-wrap { width: min(100%, 440px); } .cv-auth__welcome { margin-bottom: 30px; text-align: center; } .cv-auth__welcome-mark { display: grid; width: 52px; height: 52px; margin: 0 auto 16px; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--auth-accent) 13%, transparent); color: var(--auth-accent); font-size: 1.2rem; } .cv-auth__welcome h2 { margin: 9px 0 0; color: var(--auth-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(2rem, 3vw, 2.65rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.15; } .cv-auth__welcome > p { margin: 9px 0 0; color: var(--auth-muted); font-size: 1rem; line-height: 1.65; } .cv-auth__form { display: grid; gap: 17px; } .cv-auth__field { min-width: 0; } .cv-auth__field > label { display: block; margin-bottom: 8px; color: var(--auth-text); font-size: .95rem; font-weight: 700; line-height: 1.5; } .cv-auth__input-wrap { display: flex; min-height: 50px; align-items: center; gap: 11px; padding-inline: 14px; border: 1px solid var(--auth-border); border-radius: 10px; background: var(--auth-input); color: var(--auth-muted); transition: border-color 180ms ease, box-shadow 180ms ease; } .cv-auth__input-wrap:focus-within { border-color: var(--auth-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 15%, transparent); } .cv-auth__input-wrap.has-error { border-color: #c83d48; box-shadow: 0 0 0 3px rgb(200 61 72 / 11%); } .cv-auth__input-wrap > i { flex: 0 0 auto; color: var(--auth-accent); } .cv-auth__input-wrap input { width: 100%; min-width: 0; min-height: 48px; border: 0; outline: 0; background: transparent; color: var(--auth-text); font: inherit; font-size: .96rem; text-align: start; } .cv-auth__input-wrap input::placeholder { color: color-mix(in srgb, var(--auth-muted) 76%, transparent); opacity: 1; } .cv-auth__input-wrap input[type="email"], .cv-auth__input-wrap input[type="password"] { direction: ltr; text-align: left; } .cv-auth__password-toggle { display: grid; width: 34px; height: 36px; flex: 0 0 34px; place-items: center; border: 0; background: transparent; color: var(--auth-muted); cursor: pointer; } .cv-auth__error { display: block; min-height: 0; margin-top: 0; color: #c62836; font-size: .85rem; font-weight: 700; line-height: 1.45; } .cv-auth__error:not(:empty) { min-height: 1.4em; margin-top: 5px; } .cv-auth__form-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: -1px; font-size: .9rem; line-height: 1.5; } .cv-auth__remember { display: inline-flex; align-items: center; gap: 8px; color: var(--auth-muted); cursor: pointer; } .cv-auth__remember input { width: 16px; height: 16px; accent-color: var(--auth-accent); } .cv-auth__form-options > a, .cv-auth__signup a { color: var(--auth-accent); font-weight: 800; text-decoration: none; } .cv-auth__form-options > a:hover, .cv-auth__signup a:hover { text-decoration: underline; text-underline-offset: 3px; } .cv-auth__submit { display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; padding: 0 18px; border: 0; border-radius: var(--cv-radius-sm, 8px); background: var(--auth-accent); color: var(--cv-on-accent, #fff); cursor: pointer; font: inherit; font-size: .98rem; font-weight: 800; transition: transform 180ms ease, background-color 180ms ease; } .cv-auth__submit:hover { transform: translateY(-2px); background: var(--cv-accent-hover, #174d49); } .cv-auth__form-status { min-height: 1.4em; margin: 0; color: var(--auth-muted); font-size: .9rem; line-height: 1.5; text-align: center; } .cv-auth__form-status.is-error { color: #c62836; } .cv-auth__form-status.is-success { color: var(--auth-accent); } .cv-auth__divider { display: flex; align-items: center; gap: 13px; margin: 18px 0; color: var(--auth-muted); font-size: .88rem; line-height: 1.5; text-align: center; } .cv-auth__divider::before, .cv-auth__divider::after { height: 1px; flex: 1; background: var(--auth-border); content: ""; } .cv-auth__socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .cv-auth__social { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; border: 1px solid var(--auth-border); border-radius: 9px; background: var(--auth-surface); color: var(--auth-text); cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; transition: border-color 180ms ease, background-color 180ms ease; } .cv-auth__social:hover { border-color: var(--auth-accent); background: color-mix(in srgb, var(--auth-accent) 7%, var(--auth-surface)); } .cv-auth__social i { font-size: 1rem; } .cv-auth__signup { margin: 22px 0 0; color: var(--auth-muted); font-size: .94rem; line-height: 1.6; text-align: center; } @keyframes cvAuthRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes cvAuthImageDrift { from { transform: scale(1); } to { transform: scale(1.06); } } @media (max-width: 900px) { .cv-auth { padding: 76px 20px 24px; } .cv-auth__shell { min-height: min(720px, calc(100vh - 100px)); } .cv-auth__brand-panel, .cv-auth__form-panel { padding: clamp(26px, 4vw, 42px); } .cv-auth__story h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); } } @media (max-width: 700px) { .cv-auth { min-height: 100svh; padding: 82px 16px 24px; } .cv-auth__shell { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; } .cv-auth__brand-panel { min-height: 320px; padding: 24px; } .cv-auth__story { padding-block: 36px; } .cv-auth__story h1 { margin-top: 14px; font-size: clamp(2rem, 8vw, 3rem); } .cv-auth__story p { margin-top: 12px; font-size: .98rem; } .cv-auth__brand-foot { font-size: .78rem; } .cv-auth__form-panel { padding: 32px 24px; } .cv-auth__welcome { margin-bottom: 24px; } } @media (max-width: 380px) { .cv-auth { padding-inline: 11px; } .cv-auth__brand-panel { min-height: 290px; padding: 20px; } .cv-auth__brand { font-size: 1.1rem; } .cv-auth__form-panel { padding: 28px 17px; } .cv-auth__socials { gap: 7px; } .cv-auth__social { gap: 6px; font-size: .82rem; } } @media (prefers-reduced-motion: reduce) { .cv-auth__backdrop, .cv-auth__story { animation: none; } .cv-auth-page *, .cv-auth-page *::before, .cv-auth-page *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; } } .cv-signup-page { --signup-bg: var(--cv-bg, #f3f6f5); --signup-surface: var(--cv-surface, #ffffff); --signup-text: var(--cv-text, #0a0d0d); --signup-muted: var(--cv-text-muted, #5e6b68); --signup-accent: var(--cv-accent, #1f5f5b); --signup-border: color-mix(in srgb, var(--signup-text) 14%, transparent); min-height: 100vh; margin: 0; background: var(--signup-bg); color: var(--signup-text); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-signup-page *, .cv-signup-page *::before, .cv-signup-page *::after { box-sizing: border-box; } .cv-signup__tools { position: absolute; z-index: 5; inset-block-start: 22px; inset-inline-end: clamp(18px, 4vw, 56px); display: flex; gap: 10px; } .cv-signup__tool { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--signup-border); border-radius: 50%; background: var(--signup-surface); color: var(--signup-text); cursor: pointer; font-size: 1rem; } .cv-signup__tool:hover { border-color: var(--signup-accent); color: var(--signup-accent); } .cv-signup__sun { display: none; } .cv-signup { display: grid; min-height: 100vh; padding: 82px clamp(16px, 4vw, 60px) 34px; place-items: center; } .cv-signup__shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 1260px); overflow: hidden; border: 1px solid var(--signup-border); border-radius: 26px; background: var(--signup-surface); box-shadow: 0 24px 80px rgb(15 40 36 / 10%); } .cv-signup__brand-panel { position: relative; isolation: isolate; display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4vw, 52px); background: #0b1715; color: #f4f7f6; } .cv-signup__backdrop, .cv-signup__shade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; } .cv-signup__backdrop { object-fit: cover; object-position: center; animation: cvSignupImageDrift 22s ease-in-out infinite alternate; } .cv-signup__shade { z-index: -1; background: linear-gradient(180deg, rgb(4 12 11 / 36%), rgb(4 12 11 / 82%) 72%, rgb(4 12 11 / 92%)); } .cv-signup__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 1.35rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; } .cv-signup__logo-mark { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border-radius: 13px; background: #f2f6f5; } .cv-signup__logo-mark img { width: 100%; height: 100%; object-fit: contain; } .cv-signup__story { max-width: 520px; margin-block: auto; padding-block: 58px; animation: cvSignupRise 750ms cubic-bezier(.2, .7, .2, 1) both; } .cv-signup__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #78c8be; font-size: .88rem; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; } .cv-signup__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #63bcb2; } .cv-signup__story h1 { margin: 20px 0 0; color: #fff; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(2.4rem, 4.2vw, 4.4rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.08; } .cv-signup__story h1 em { color: #80d0c6; font-style: normal; } .cv-signup__story p { max-width: 460px; margin: 20px 0 0; color: rgb(244 247 246 / 87%); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.8; } .cv-signup__brand-foot { display: flex; align-items: center; gap: 12px; color: rgb(244 247 246 / 78%); font-size: .84rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; } .cv-signup__foot-line { width: clamp(28px, 4vw, 54px); height: 1px; background: #72c9bf; } .cv-signup__form-panel { display: grid; min-width: 0; padding: clamp(28px, 4vw, 54px); place-items: center; background: var(--signup-surface); } .cv-signup__form-wrap { width: min(100%, 500px); } .cv-signup__welcome { margin-bottom: 22px; text-align: center; } .cv-signup__welcome-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 12px; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--signup-accent) 13%, transparent); color: var(--signup-accent); font-size: 1.1rem; } .cv-signup__welcome h2 { margin: 8px 0 0; color: var(--signup-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(1.8rem, 2.7vw, 2.45rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; } .cv-signup__welcome > p { margin: 8px 0 0; color: var(--signup-muted); font-size: .98rem; line-height: 1.6; } .cv-signup__form { display: grid; gap: 12px; } .cv-signup__field, .cv-signup__field-pair { min-width: 0; } .cv-signup__field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cv-signup__field > label { display: block; margin-bottom: 6px; color: var(--signup-text); font-size: .9rem; font-weight: 700; line-height: 1.4; } .cv-signup__input-wrap { display: flex; min-height: 46px; align-items: center; gap: 9px; padding-inline: 12px; border: 1px solid var(--signup-border); border-radius: 9px; background: var(--signup-surface); color: var(--signup-muted); } .cv-signup__input-wrap:focus-within { border-color: var(--signup-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signup-accent) 14%, transparent); } .cv-signup__input-wrap.has-error { border-color: #c62836; box-shadow: 0 0 0 3px rgb(200 40 54 / 10%); } .cv-signup__input-wrap > i { flex: 0 0 auto; color: var(--signup-accent); } .cv-signup__input-wrap input, .cv-signup__input-wrap select { width: 100%; min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; color: var(--signup-text); font: inherit; font-size: .9rem; text-align: start; } .cv-signup__input-wrap select { cursor: pointer; } .cv-signup__input-wrap input::placeholder { color: color-mix(in srgb, var(--signup-muted) 78%, transparent); opacity: 1; } .cv-signup__input-wrap input[type="email"], .cv-signup__input-wrap input[type="password"] { direction: ltr; text-align: left; } .cv-signup__password-toggle { display: grid; width: 30px; height: 34px; flex: 0 0 30px; place-items: center; border: 0; background: transparent; color: var(--signup-muted); cursor: pointer; } .cv-signup__error { display: block; min-height: 0; margin-top: 0; color: #c62836; font-size: .82rem; font-weight: 700; line-height: 1.4; } .cv-signup__error:not(:empty) { min-height: 1.3em; margin-top: 4px; } .cv-signup__terms { display: flex; align-items: flex-start; gap: 9px; color: var(--signup-muted); font-size: .86rem; line-height: 1.55; } .cv-signup__terms input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; accent-color: var(--signup-accent); } .cv-signup__terms a, .cv-signup__login a { color: var(--signup-accent); font-weight: 800; text-decoration: none; } .cv-signup__terms a:hover, .cv-signup__login a:hover { text-decoration: underline; text-underline-offset: 3px; } .cv-signup__terms-error { margin-top: -9px; } .cv-signup__submit { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 17px; border: 0; border-radius: var(--cv-radius-sm, 8px); background: var(--signup-accent); color: var(--cv-on-accent, #fff); cursor: pointer; font: inherit; font-size: .96rem; font-weight: 800; } .cv-signup__status { min-height: 1.4em; margin: 0; color: var(--signup-muted); font-size: .88rem; line-height: 1.5; text-align: center; } .cv-signup__status.is-error { color: #c62836; } .cv-signup__status.is-success { color: var(--signup-accent); } .cv-signup__divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--signup-muted); font-size: .86rem; line-height: 1.5; text-align: center; } .cv-signup__divider::before, .cv-signup__divider::after { height: 1px; flex: 1; background: var(--signup-border); content: ""; } .cv-signup__socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .cv-signup__social { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 0 7px; border: 1px solid var(--signup-border); border-radius: 9px; background: var(--signup-surface); color: var(--signup-text); cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; } .cv-signup__social:hover { border-color: var(--signup-accent); } .cv-signup__login { margin: 17px 0 0; color: var(--signup-muted); font-size: .9rem; line-height: 1.5; text-align: center; } @keyframes cvSignupRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes cvSignupImageDrift { from { transform: scale(1); } to { transform: scale(1.06); } } @media (max-width: 900px) { .cv-signup { padding: 76px 20px 24px; } .cv-signup__brand-panel, .cv-signup__form-panel { padding: 30px; } .cv-signup__story h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); } } @media (max-width: 720px) { .cv-signup { min-height: 100svh; padding: 82px 16px 24px; } .cv-signup__shell { grid-template-columns: 1fr; border-radius: 20px; } .cv-signup__brand-panel { min-height: 290px; padding: 23px; } .cv-signup__story { padding-block: 34px; } .cv-signup__story h1 { margin-top: 13px; font-size: clamp(2rem, 7.5vw, 2.8rem); } .cv-signup__story p { margin-top: 12px; font-size: .96rem; } .cv-signup__form-panel { padding: 30px 24px; } } @media (max-width: 460px) { .cv-signup { padding-inline: 12px; } .cv-signup__brand-panel { min-height: 270px; padding: 20px; } .cv-signup__brand { font-size: 1.15rem; } .cv-signup__form-panel { padding: 27px 17px; } .cv-signup__field-pair { grid-template-columns: 1fr; gap: 12px; } .cv-signup__socials { gap: 6px; } .cv-signup__social { gap: 5px; font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { .cv-signup__backdrop, .cv-signup__story { animation: none; } } /* ========================================================= VENUE ATLAS · SERVICES · VENUE SOURCING Mobile-S/M/L (base) · 425 · Tab 768 · Laptop 1024 · Laptop-L 1440 ========================================================= */ .cv-vs, .cv-vs *, .cv-vs *::before, .cv-vs *::after { box-sizing: border-box; } .cv-vs { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 110px); padding-inline: var(--cv-navbar-padding); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-vs::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 22% at 92% 4%, var(--cv-accent-soft), transparent 70%), radial-gradient(42% 20% at 6% 46%, var(--cv-accent-soft), transparent 70%), radial-gradient(46% 22% at 94% 92%, var(--cv-accent-soft), transparent 70%); opacity: 0.85; pointer-events: none; } .cv-vs__inner { max-inline-size: 1400px; margin-inline: auto; } .cv-vs[data-vs-ready] [data-vs-reveal]:not(.is-in) { opacity: 0; transform: translateY(32px); } .cv-vs[data-vs-ready] [data-vs-reveal] { transition: opacity 0.8s cubic-bezier(0.22, 0.9, 0.24, 1) var(--vs-d, 0ms), transform 0.8s cubic-bezier(0.22, 0.9, 0.24, 1) var(--vs-d, 0ms); } /* ---------- shared type ---------- */ .cv-vs__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-vs__eyebrow::before { content: ""; flex: none; inline-size: 28px; block-size: 2px; background: var(--cv-accent); } .cv-vs__title { margin: 0; max-inline-size: 16ch; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .cv-vs__h3 { margin: 10px 0 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(24px, 3.2vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; } .cv-vs__lead, .cv-vs__cmpp { max-inline-size: 56ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); line-height: 1.65; } .cv-vs__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 170px; min-block-size: 48px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: background-color var(--cv-transition), transform var(--cv-transition); } .cv-vs__btn:hover { transform: translateY(-1px); } .cv-vs__btn--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-vs__btn--primary:hover { background: var(--cv-accent-hover); } .cv-vs__btn--primary:active { background: var(--cv-accent-pressed); } .cv-vs__btn--secondary { background: transparent; border-color: var(--cv-text); color: var(--cv-text); } .cv-vs__btn--secondary:hover { background: var(--cv-accent-soft); } .cv-vs__btn:focus-visible, .cv-vs__nav:focus-visible, .cv-vs__dot:focus-visible, .cv-vs__cardbtn:focus-visible, .cv-vs__play:focus-visible, .cv-vs__add:focus-visible, .cv-vs__chip:focus-visible, .cv-vs__flip:focus-visible, .cv-vs__ccx:focus-visible, .cv-vs__guests input:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } /* ---------- header + collage ---------- */ .cv-vs__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-block-end: clamp(22px, 3vw, 36px); } .cv-vs__copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; } .cv-vs__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 4px; } .cv-vs__collage { position: relative; aspect-ratio: 1 / 0.86; } .cv-vs__fig { position: absolute; margin: 0; overflow: hidden; background: var(--cv-accent-soft); animation: cvVsFloat 7s ease-in-out infinite; } .cv-vs__fig img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .cv-vs__fig figcaption { display: none; position: absolute; inset-inline: 10px; inset-block-end: 10px; padding: 6px 10px; background: rgba(8, 10, 10, 0.78); border-radius: 99px; color: #F4F7F6; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; } .cv-vs__fig--a { inset-inline-start: 0; inset-block: 0; inline-size: 56%; border-radius: 999px 999px 22px 22px; } .cv-vs__fig--b { inset-inline-end: 0; inset-block-start: 0; inline-size: 38%; aspect-ratio: 1; border-radius: 50%; animation-delay: -2.4s; animation-duration: 8s; } .cv-vs__fig--c { inset-inline-end: 0; inset-block-end: 0; inline-size: 40%; block-size: 50%; border-radius: 22px; animation-delay: -4.6s; } .cv-vs[data-vs-ready] .cv-vs__collage:not(.is-in) .cv-vs__fig { clip-path: inset(0 0 100% 0); } .cv-vs .cv-vs__fig { clip-path: inset(0); transition: clip-path 1.2s cubic-bezier(0.22, 0.9, 0.24, 1) 0.2s; } @keyframes cvVsFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } .cv-vs__seal { position: absolute; inset-inline-end: 36%; inset-block-end: 4%; display: grid; place-items: center; inline-size: clamp(86px, 17vw, 124px); aspect-ratio: 1; background: var(--cv-accent); border: 4px solid var(--cv-bg); border-radius: 50%; color: var(--cv-on-accent); } .cv-vs__seal svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; animation: cvVsSpin 18s linear infinite; } .cv-vs__seal text { fill: currentColor; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .cv-vs__seal i { font-size: clamp(16px, 3vw, 22px); } @keyframes cvVsSpin { to { transform: rotate(360deg); } } /* ---------- stats ---------- */ .cv-vs__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 clamp(22px, 3vw, 36px); padding: 0; list-style: none; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 22px; overflow: hidden; } .cv-vs__stats li { padding: 20px 18px; border-block-end: 1px solid var(--cv-border); border-inline-end: 1px solid var(--cv-border); } .cv-vs__stats li:nth-child(2n) { border-inline-end: 0; } .cv-vs__stats li:nth-last-child(-n + 2) { border-block-end: 0; } .cv-vs__sn { margin: 0 0 6px; color: var(--cv-accent); font-family: var(--cv-heading-font); font-size: clamp(34px, 5vw, 56px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .cv-vs__sn span { font-size: 0.5em; font-weight: 700; } .cv-vs__sl { margin: 0; color: var(--cv-text-muted); font-size: 14px; font-weight: 600; line-height: 1.4; } /* ========================================================= ATLAS (dark in both themes) ========================================================= */ .cv-vs__atlas { --vs-bg: #0B1010; --vs-panel: #121A19; --vs-line: rgba(255, 255, 255, 0.12); --vs-text: #F4F7F6; --vs-muted: #AEBFBB; --vs-acc: #5BC4BB; --cw: 150px; --r: calc(var(--cw) * 2.05); overflow: hidden; background: var(--vs-bg); border: 1px solid var(--cv-border); border-radius: 22px; color: var(--vs-text); box-shadow: 0 40px 70px -48px rgba(10, 13, 13, 0.7); } .cv-vs__abar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 16px; border-block-end: 1px solid var(--vs-line); } .cv-vs__abl { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .cv-vs__live { inline-size: 9px; block-size: 9px; background: var(--vs-acc); border-radius: 50%; animation: cvVsPulse 1.8s ease-in-out infinite; } @keyframes cvVsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 196, 187, 0.6); } 50% { box-shadow: 0 0 0 7px rgba(91, 196, 187, 0); } } .cv-vs__guests { display: flex; flex: 1 1 100%; order: 3; align-items: center; gap: 12px; } .cv-vs__guests label, .cv-vs__guests output { font-size: 13px; font-weight: 700; line-height: 1.2; } .cv-vs__guests output { min-inline-size: 4ch; color: var(--vs-acc); font-variant-numeric: tabular-nums; text-align: end; } .cv-vs__guests input { --g: 20%; flex: 1; min-inline-size: 0; block-size: 6px; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 99px; background: linear-gradient(90deg, var(--vs-acc) var(--g), rgba(255, 255, 255, 0.2) var(--g)); } .cv-vs__guests input::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 22px; block-size: 22px; background: #F4F7F6; border: 4px solid var(--vs-acc); border-radius: 50%; } .cv-vs__guests input::-moz-range-thumb { inline-size: 16px; block-size: 16px; background: #F4F7F6; border: 4px solid var(--vs-acc); border-radius: 50%; } .cv-vs__play { display: inline-flex; align-items: center; gap: 8px; min-block-size: 38px; padding: 6px 14px; background: transparent; border: 1px solid var(--vs-line); border-radius: 99px; color: var(--vs-text); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; } .cv-vs__play:hover { background: rgba(255, 255, 255, 0.08); } .cv-vs__play[hidden] { display: none; } @media (max-width: 424px) { .cv-vs__play span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cv-vs__play { padding-inline: 12px; } } .cv-vs__pi { font-size: 11px; color: var(--vs-acc); } .cv-vs__pi--play { display: none; } .cv-vs__play[aria-pressed="true"] .cv-vs__pi--pause { display: none; } .cv-vs__play[aria-pressed="true"] .cv-vs__pi--play { display: inline; } /* stage + ring */ .cv-vs__stage { position: relative; overflow: hidden; padding-block: 28px 18px; background: radial-gradient(60% 70% at 50% 0%, rgba(91, 196, 187, 0.22), transparent 70%), var(--vs-bg); } .cv-vs__scene { position: relative; block-size: calc(var(--cw) * 1.25 + 40px); perspective: 1500px; touch-action: pan-y; cursor: grab; } .cv-vs__scene.is-drag { cursor: grabbing; } .cv-vs__spin { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateY(var(--a, 0deg)); transition: transform 1.25s cubic-bezier(0.22, 0.9, 0.24, 1); } .cv-vs__scene.is-drag .cv-vs__spin, .cv-vs__spin.is-snap { transition: none; } .cv-vs__card { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: var(--cw); aspect-ratio: 4 / 5; margin-inline-start: calc(var(--cw) / -2); margin-block-start: calc(var(--cw) * -0.625); transform: rotateY(calc(var(--i) * 30deg)) translateZ(var(--r)) scale(var(--sc, 1)); opacity: clamp(0.2, calc(1 - var(--d, 0) * 0.2), 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.9, 0.24, 1); } .cv-vs__card.is-active { --sc: 1.07; } .cv-vs__cardbtn { position: relative; display: block; inline-size: 100%; block-size: 100%; padding: 0; overflow: hidden; background: #1B2B29; border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 18px; color: #F4F7F6; font: inherit; text-align: start; cursor: pointer; transition: border-color 0.5s ease, box-shadow 0.5s ease; } .cv-vs__card.is-active .cv-vs__cardbtn { border-color: var(--vs-acc); box-shadow: 0 0 40px -6px rgba(91, 196, 187, 0.65); } .cv-vs__cardbtn img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; transition: transform 1.2s ease; } .cv-vs__card.is-active img { transform: scale(1.06); } .cv-vs__cardcap { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; gap: 2px; padding: 34px 12px 12px; background: linear-gradient(180deg, transparent, rgba(5, 9, 9, 0.9)); } .cv-vs__cardcap small { color: #8CF0E4; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .cv-vs__cardcap b { font-size: 13px; font-weight: 700; line-height: 1.25; } .cv-vs__cardno { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; padding: 4px 8px; background: rgba(5, 9, 9, 0.72); border-radius: 99px; font-size: 11px; font-weight: 800; line-height: 1; } .cv-vs__floor { position: absolute; inset-inline: 8%; inset-block-end: 34px; block-size: 46px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(91, 196, 187, 0.28), transparent 72%); animation: cvVsBreath 5s ease-in-out infinite; } @keyframes cvVsBreath { 0%, 100% { opacity: 0.55; transform: scaleX(0.9); } 50% { opacity: 1; transform: scaleX(1); } } .cv-vs__nav { position: absolute; inset-block-start: calc(28px + (var(--cw) * 1.25 + 40px) / 2 - 22px); z-index: 4; display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; background: rgba(5, 9, 9, 0.7); border: 1px solid var(--vs-line); border-radius: 50%; color: #F4F7F6; font-size: 14px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .cv-vs__nav:hover { background: var(--vs-acc); color: #051110; } .cv-vs__nav--prev { inset-inline-start: 10px; } .cv-vs__nav--next { inset-inline-end: 10px; } .cv-vs__dots { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-block-start: 12px; padding-inline: 12px; } .cv-vs__dot { position: relative; display: grid; place-items: center; inline-size: 30px; block-size: 30px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--vs-muted); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .cv-vs__dot:hover { color: #F4F7F6; } .cv-vs__dot.is-on { background: var(--vs-acc); color: #051110; } .cv-vs__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--vs-acc); opacity: 0; transform: scale(0.7); } .cv-vs__dot.is-on.is-run::after { animation: cvVsRing var(--vs-dur, 5200ms) linear forwards; } @keyframes cvVsRing { from { opacity: 0.9; transform: scale(1.5); } to { opacity: 0; transform: scale(1); } } /* dossier */ .cv-vs__dossier { display: grid; grid-template-columns: minmax(0, 1fr); border-block-start: 1px solid var(--vs-line); } .cv-vs__d1, .cv-vs__d2, .cv-vs__d3 { display: flex; flex-direction: column; gap: 14px; padding: clamp(16px, 2.4vw, 26px); background: var(--vs-panel); border-block-end: 1px solid var(--vs-line); } .cv-vs__d3 { border-block-end: 0; } .cv-vs__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .cv-vs__tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--vs-acc); border-radius: 99px; color: #051110; font-size: 12px; font-weight: 800; line-height: 1.2; } .cv-vs__tag--ghost { background: transparent; border: 1px solid var(--vs-line); color: var(--vs-text); } .cv-vs__tag i { color: var(--vs-acc); font-size: 11px; } .cv-vs__dname { margin: 0; color: var(--vs-text); font-family: var(--cv-heading-font); font-size: clamp(26px, 3.2vw, 38px); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; } .cv-vs__ddesc { margin: 0; color: var(--vs-muted); font-size: 14px; line-height: 1.65; } .cv-vs__fit { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; margin: 0; padding: 8px 14px; background: rgba(255, 255, 255, 0.07); border-radius: 99px; font-size: 13px; font-weight: 700; line-height: 1.3; } .cv-vs__fit i { flex: none; inline-size: 10px; block-size: 10px; background: #5BC4BB; border-radius: 50%; } .cv-vs__fit.is-snug i { background: #FFC93C; } .cv-vs__fit.is-small i { background: #FF8FA3; } .cv-vs__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; } .cv-vs__facts div { padding: 12px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--vs-line); border-radius: 12px; } .cv-vs__facts dt, .cv-vs__dk { margin: 0 0 4px; color: var(--vs-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .cv-vs__facts dd { margin: 0; color: var(--vs-text); font-family: var(--cv-heading-font); font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; } /* radar */ .cv-vs__radar { inline-size: 100%; max-inline-size: 340px; margin-inline: auto; } .cv-vs__radar svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; } .cv-vs__rg { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; } .cv-vs__ra { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; } .cv-vs__rs { fill: rgba(91, 196, 187, 0.32); stroke: #5BC4BB; stroke-width: 2.4; stroke-linejoin: round; } .cv-vs__rp { fill: #F4F7F6; stroke: #5BC4BB; stroke-width: 2.4; } .cv-vs__rt { fill: #AEBFBB; font-family: var(--cv-body-font); font-size: 11.5px; font-weight: 700; } .cv-vs__scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; } .cv-vs__scores li { display: flex; justify-content: space-between; gap: 8px; color: var(--vs-muted); font-size: 12px; font-weight: 600; line-height: 1.3; } .cv-vs__scores b { color: var(--vs-text); font-weight: 800; font-variant-numeric: tabular-nums; } .cv-vs__feat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .cv-vs__feat li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--vs-line); border-radius: 10px; color: var(--vs-text); font-size: 13px; font-weight: 600; line-height: 1.3; } .cv-vs__feat li::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; background: var(--vs-acc); border-radius: 50%; } .cv-vs__best { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 14px; border-block: 1px solid var(--vs-line); } .cv-vs__bv { margin: 0; color: var(--vs-text); font-size: 15px; font-weight: 700; line-height: 1.35; } .cv-vs__bv--price { color: var(--vs-acc); font-family: var(--cv-heading-font); font-size: 22px; letter-spacing: 0.04em; } .cv-vs__seat { display: flex; flex: 1; flex-direction: column; gap: 10px; } .cv-vs__seatl { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 10px; margin: 0; padding: 0; list-style: none; } .cv-vs__seatl li { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--vs-muted); font-size: 12px; font-weight: 600; line-height: 1.2; } .cv-vs__seatl i { display: block; inline-size: calc(var(--c, 0.5) * 100%); block-size: 8px; background: linear-gradient(90deg, #3FA39B, #8CF0E4); border-radius: 99px; transition: inline-size 0.9s cubic-bezier(0.22, 0.9, 0.24, 1); } .cv-vs__seatl span:last-child { color: var(--vs-text); font-weight: 800; font-variant-numeric: tabular-nums; } .cv-vs__add { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 50px; margin-block-start: auto; padding: 12px 18px; background: var(--vs-acc); border: 2px solid var(--vs-acc); border-radius: var(--cv-radius-md); color: #051110; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .cv-vs__add:hover { transform: translateY(-1px); background: #7ED6CE; } .cv-vs__add[aria-pressed="true"] { background: transparent; color: var(--vs-text); } /* ========================================================= COMPARER ========================================================= */ .cv-vs__cmp, .cv-vs__neg { margin-block-start: clamp(44px, 6vw, 84px); } .cv-vs__cmphead, .cv-vs__neghead { display: flex; flex-direction: column; gap: 14px; margin-block-end: 20px; } .cv-vs__chiprow { display: flex; flex-direction: column; gap: 12px; margin-block-end: 18px; } .cv-vs__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cv-vs__chip { display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; padding: 5px 12px 5px 5px; background: var(--cv-surface); border: 1.5px solid var(--cv-border); border-radius: 24px; color: var(--cv-text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: start; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .cv-vs__chip img { flex: none; inline-size: 34px; block-size: 34px; border-radius: 50%; object-fit: cover; } .cv-vs__chip:hover { transform: translateY(-2px); border-color: var(--cv-accent); } .cv-vs__chip[aria-pressed="true"] { background: var(--cv-accent); border-color: var(--cv-accent); color: var(--cv-on-accent); } .cv-vs__fdot { flex: none; display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: #3FA39B; border: 1.5px solid rgba(10, 13, 13, 0.25); } .cv-vs__fdot.is-snug { background: #FFC93C; } .cv-vs__fdot.is-small { background: #FF8FA3; } .cv-vs__chip[aria-pressed="true"] .cv-vs__fdot { border-color: rgba(255, 255, 255, 0.7); } .cv-vs__key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--cv-text-muted); font-size: 12px; font-weight: 600; line-height: 1.3; } .cv-vs__key span { display: inline-flex; align-items: center; gap: 7px; } .cv-vs__key b { margin-inline-start: auto; color: var(--cv-accent); font-size: 13px; font-weight: 800; } .cv-vs__ccgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .cv-vs__cc { display: flex; flex-direction: column; overflow: hidden; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 20px; animation: cvVsPop 0.7s cubic-bezier(0.22, 0.9, 0.24, 1) backwards; animation-delay: calc(var(--n, 0) * 90ms); } @keyframes cvVsPop { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } } .cv-vs__ccimg { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cv-accent-soft); } .cv-vs__ccimg img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; animation: cvVsReveal 1s cubic-bezier(0.22, 0.9, 0.24, 1) backwards; } @keyframes cvVsReveal { from { clip-path: inset(0 0 100% 0); transform: scale(1.15); } to { clip-path: inset(0); transform: none; } } .cv-vs__ccno { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; padding: 5px 10px; background: rgba(8, 10, 10, 0.78); border-radius: 99px; color: #F4F7F6; font-size: 11px; font-weight: 800; line-height: 1; } .cv-vs__ccx { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: grid; place-items: center; inline-size: 36px; block-size: 36px; padding: 0; background: rgba(8, 10, 10, 0.78); border: 0; border-radius: 50%; color: #F4F7F6; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .cv-vs__ccx:hover { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-vs__ccbody { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px; } .cv-vs__cct { margin: 0; color: var(--cv-text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .cv-vs__ccn { margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 22px; font-weight: 500; line-height: 1.15; } .cv-vs__ccfit { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin: 0; padding: 6px 12px; background: var(--cv-accent-soft); border-radius: 99px; color: var(--cv-text); font-size: 12px; font-weight: 700; line-height: 1.3; } .cv-vs__rows { display: flex; flex: 1; flex-direction: column; margin: 6px 0 0; } .cv-vs__rows > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 10px; padding-block: 10px; border-block-start: 1px solid var(--cv-border); } .cv-vs__rows dt { margin: 0; color: var(--cv-text-muted); font-size: 13px; font-weight: 600; line-height: 1.3; } .cv-vs__rows dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--cv-text); font-size: 14px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; } .cv-vs__top { padding: 2px 8px; background: var(--cv-accent); border-radius: 99px; color: var(--cv-on-accent); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; } .cv-vs__bar { flex: 1 1 60px; block-size: 8px; overflow: hidden; background: var(--cv-accent-soft); border-radius: 99px; } .cv-vs__bar i { display: block; inline-size: 0; block-size: 100%; background: linear-gradient(90deg, var(--cv-accent), #3FA39B); border-radius: 99px; transition: inline-size 1.1s cubic-bezier(0.22, 0.9, 0.24, 1) calc(0.3s + var(--n, 0) * 90ms); } .cv-vs__ccgrid.is-live .cv-vs__bar i { inline-size: calc(var(--v) * 1%); } .cv-vs__ccadd { align-items: center; justify-content: center; gap: 14px; padding: 28px 20px; background: transparent; border: 2px dashed var(--cv-accent); text-align: center; } .cv-vs__ccadd i.fa-solid { display: grid; place-items: center; inline-size: 60px; block-size: 60px; background: var(--cv-accent-soft); border-radius: 50%; color: var(--cv-accent); font-size: 22px; animation: cvVsBob 2.4s ease-in-out infinite; } @keyframes cvVsBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .cv-vs__ccadd h4 { margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 20px; font-weight: 500; line-height: 1.2; } .cv-vs__ccadd p { max-inline-size: 30ch; margin: 0; color: var(--cv-text-muted); font-size: 14px; line-height: 1.55; } .cv-vs__ccadd button { min-block-size: 46px; padding: 10px 20px; background: var(--cv-accent); border: 0; border-radius: var(--cv-radius-md); color: var(--cv-on-accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; } .cv-vs__ccadd button:hover { background: var(--cv-accent-hover); } .cv-vs__ccadd button:focus-visible { outline: 3px solid var(--cv-accent); outline-offset: 3px; } /* ========================================================= NEGOTIATE · FLIP CARDS ========================================================= */ .cv-vs__flips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; perspective: 1600px; } .cv-vs__flip { position: relative; display: grid; inline-size: 100%; min-block-size: 220px; padding: 0; background: transparent; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.24, 1); } .cv-vs__flip[aria-pressed="true"] { transform: rotateY(180deg); } @media (hover: hover) { .cv-vs__flip:hover { transform: rotateY(180deg); } .cv-vs__flip[aria-pressed="true"]:hover { transform: rotateY(0deg); } } .cv-vs__face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .cv-vs__face--f { background: var(--cv-surface); border: 1px solid var(--cv-border); } .cv-vs__face--b { background: var(--cv-accent); border: 1px solid var(--cv-accent); color: var(--cv-on-accent); transform: rotateY(180deg); justify-content: center; } .cv-vs__fico { display: grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block-end: auto; background: var(--cv-accent-soft); border-radius: 16px; color: var(--cv-accent); font-size: 22px; } .cv-vs__fno { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; } .cv-vs__face--f .cv-vs__fno { color: var(--cv-text-muted); } .cv-vs__ft { font-family: var(--cv-heading-font); font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; line-height: 1.2; } .cv-vs__face--f .cv-vs__ft { color: var(--cv-text); } .cv-vs__fh { color: var(--cv-accent); font-size: 13px; font-weight: 700; line-height: 1.3; } .cv-vs__fh::after { content: " \2192"; } .cv-vs__fp { font-size: 15px; line-height: 1.65; } /* ========================================================= CLOSING STRIP ========================================================= */ .cv-vs__end { display: flex; flex-direction: column; gap: 22px; margin-block-start: clamp(44px, 6vw, 84px); padding: clamp(22px, 3.4vw, 44px); background: var(--cv-accent-soft); border: 1px solid var(--cv-border); border-radius: 22px; } .cv-vs__endt h3 { margin: 0 0 10px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(24px, 3.2vw, 38px); font-weight: 400; line-height: 1.15; } .cv-vs__endt p { max-inline-size: 58ch; margin: 0; color: var(--cv-text); font-size: var(--cv-hero-body); line-height: 1.65; } .cv-vs__endl { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 18px 0 0; padding: 0; list-style: none; } .cv-vs__endl li { display: inline-flex; align-items: center; gap: 8px; color: var(--cv-text); font-size: 14px; font-weight: 700; line-height: 1.3; } .cv-vs__endl i { display: grid; place-items: center; inline-size: 22px; block-size: 22px; background: var(--cv-accent); border-radius: 50%; color: var(--cv-on-accent); font-size: 10px; } .cv-vs__end .cv-vs__btn { flex: none; } .cv-vs__endimgs { display: flex; align-items: center; } .cv-vs__endimgs img, .cv-vs__endimgs b { flex: none; inline-size: 64px; block-size: 64px; margin-inline-start: -16px; border: 3px solid var(--cv-accent-soft); border-radius: 50%; object-fit: cover; } .cv-vs__endimgs img:first-child { margin-inline-start: 0; } .cv-vs__endimgs b { display: grid; place-items: center; background: var(--cv-accent); color: var(--cv-on-accent); font-size: 15px; font-weight: 800; } /* ========================================================= MOBILE-L · 425 ========================================================= */ @media (min-width: 425px) { .cv-vs__atlas { --cw: 168px; } .cv-vs__stats li { padding: 22px 20px; } } /* ========================================================= TAB · 768 ========================================================= */ @media (min-width: 768px) { .cv-vs__atlas { --cw: 196px; } .cv-vs__fig figcaption { display: block; } .cv-vs__chips { display: flex; flex-wrap: wrap; } .cv-vs__endimgs img, .cv-vs__endimgs b { inline-size: 76px; block-size: 76px; margin-inline-start: -20px; } .cv-vs__guests { flex: 0 1 340px; order: 0; } .cv-vs__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cv-vs__stats li, .cv-vs__stats li:nth-last-child(-n + 2) { border-block-end: 0; } .cv-vs__stats li:nth-child(2n) { border-inline-end: 1px solid var(--cv-border); } .cv-vs__stats li:last-child { border-inline-end: 0; } .cv-vs__dossier { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-vs__d1 { border-inline-end: 1px solid var(--vs-line); } .cv-vs__d3 { grid-column: 1 / -1; border-block-start: 0; } .cv-vs__d3 .cv-vs__add { margin-block-start: 0; } .cv-vs__cmphead, .cv-vs__neghead { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 28px; } .cv-vs__cmpp { max-inline-size: 44ch; } .cv-vs__chiprow { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; } .cv-vs__key { flex: none; flex-direction: column; align-items: flex-start; } .cv-vs__key b { margin-inline-start: 0; } .cv-vs__ccgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-vs__flips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .cv-vs__end { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } .cv-vs__endt { flex: 1 1 0; } .cv-vs__endimgs { flex: none; } } @media (min-width: 768px) and (max-width: 1023px) { .cv-vs__end { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 32px; } .cv-vs__endt { grid-column: 1 / -1; } } /* ========================================================= LAPTOP · 1024 ========================================================= */ @media (min-width: 1024px) { .cv-vs__atlas { --cw: 220px; } .cv-vs__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .cv-vs__dossier { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); } .cv-vs__d2 { border-inline-end: 1px solid var(--vs-line); } .cv-vs__d1, .cv-vs__d2, .cv-vs__d3 { border-block-end: 0; } .cv-vs__d3 { grid-column: auto; } .cv-vs__d3 .cv-vs__add { margin-block-start: auto; } .cv-vs__flips { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================= LAPTOP-L · 1440 ========================================================= */ @media (min-width: 1440px) { .cv-vs__atlas { --cw: 250px; } .cv-vs__scene { perspective: 1800px; } .cv-vs__cardcap b { font-size: 15px; } .cv-vs__cardcap small { font-size: 11px; } } /* ========================================================= MOBILE-S · up to 374 ========================================================= */ @media (max-width: 374px) { .cv-vs__atlas { --cw: 138px; } .cv-vs__nav { inline-size: 38px; block-size: 38px; } .cv-vs__dot { inline-size: 27px; block-size: 27px; } .cv-vs__stats li { padding: 16px 12px; } .cv-vs__rows > div { grid-template-columns: 1fr; gap: 4px; } .cv-vs__face { padding: 18px; } .cv-vs__chip { font-size: 12px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cv-vs__fig, .cv-vs__seal svg, .cv-vs__floor, .cv-vs__live, .cv-vs__cc, .cv-vs__ccimg img, .cv-vs__ccadd i.fa-solid, .cv-vs__dot.is-on.is-run::after { animation: none; } .cv-vs__spin, .cv-vs__card, .cv-vs__flip, .cv-vs__bar i, .cv-vs .cv-vs__fig, .cv-vs[data-vs-ready] [data-vs-reveal] { transition: none; } .cv-vs__bar i { inline-size: calc(var(--v) * 1%); } } /* ========================================================= AV VENUE LAB · SERVICES · AV PRODUCTION Mobile-S/M/L (base) · Tab 768 · Laptop 1024 · Laptop-L 1440 ========================================================= */ .cv-ap, .cv-ap *, .cv-ap *::before, .cv-ap *::after { box-sizing: border-box; } .cv-ap { --ap-pin: #5BC4BB; --ap-pin-ink: #04100F; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 110px); padding-inline: var(--cv-navbar-padding); background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } .cv-ap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 18% at 8% 4%, var(--cv-accent-soft), transparent 70%), radial-gradient(42% 16% at 94% 36%, var(--cv-accent-soft), transparent 70%), radial-gradient(46% 18% at 6% 74%, var(--cv-accent-soft), transparent 70%), radial-gradient(46% 16% at 92% 98%, var(--cv-accent-soft), transparent 70%); opacity: 0.85; pointer-events: none; } .cv-ap__inner { max-inline-size: 1400px; margin-inline: auto; } .cv-ap[data-ap-ready] [data-ap-reveal]:not(.is-in) { opacity: 0; transform: translateY(32px); } .cv-ap[data-ap-ready] [data-ap-reveal] { transition: opacity 0.8s cubic-bezier(0.22, 0.9, 0.24, 1) var(--ap-d, 0ms), transform 0.8s cubic-bezier(0.22, 0.9, 0.24, 1) var(--ap-d, 0ms); } /* ---------- Shared type ---------- */ .cv-ap__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-small); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cv-ap__eyebrow::before { content: ""; flex: none; inline-size: 28px; block-size: 2px; background: var(--cv-accent); } .cv-ap__title { margin: 0; max-inline-size: 16ch; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hero-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .cv-ap__h3 { margin: 10px 0 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(24px, 3.2vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; } .cv-ap__lead, .cv-ap__mp { max-inline-size: 56ch; margin: 0; color: var(--cv-text-muted); font-size: var(--cv-hero-body); line-height: 1.65; } .cv-ap__k { margin: 0 0 8px; color: var(--cv-text-muted); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; } .cv-ap__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 170px; min-block-size: 48px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--cv-radius-md); font-size: var(--cv-hero-btn); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: background-color var(--cv-transition), transform var(--cv-transition); } .cv-ap__btn:hover { transform: translateY(-1px); } .cv-ap__btn--primary { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-ap__btn--primary:hover { background: var(--cv-accent-hover); } .cv-ap__btn--primary:active { background: var(--cv-accent-pressed); } .cv-ap__btn--secondary { background: transparent; border-color: var(--cv-text); color: var(--cv-text); } .cv-ap__btn--secondary:hover { background: var(--cv-accent-soft); } .cv-ap__btn:focus-visible, .cv-ap__mode:focus-visible, .cv-ap__play:focus-visible, .cv-ap__thumb:focus-visible, .cv-ap__pinbtn:focus-visible, .cv-ap__handle:focus-visible .cv-ap__grip { outline: 3px solid var(--cv-accent); outline-offset: 3px; } /* ---------- Header + signal path ---------- */ .cv-ap__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-block-end: clamp(18px, 3vw, 30px); } .cv-ap__copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; } .cv-ap__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 4px; } .cv-ap__path { padding: 20px 18px; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 22px; } .cv-ap__nodes { margin: 0; padding: 0; list-style: none; } .cv-ap__node { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding-block-end: 18px; } .cv-ap__node:last-child { padding-block-end: 0; } .cv-ap__node::before { content: ""; position: absolute; inset-inline-start: 17px; inset-block: 38px 0; inline-size: 2px; background: repeating-linear-gradient(to bottom, var(--cv-accent) 0, var(--cv-accent) 6px, transparent 6px, transparent 12px); background-size: 2px 12px; animation: cvApFlow 1s linear infinite; } .cv-ap__node:last-child::before { display: none; } .cv-ap__nn { display: grid; place-items: center; inline-size: 36px; block-size: 36px; background: var(--cv-accent); border-radius: 50%; color: var(--cv-on-accent); font-family: var(--cv-heading-font); font-size: 15px; font-weight: 700; } .cv-ap__node h3 { margin: 0 0 3px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 17px; font-weight: 700; line-height: 1.25; } .cv-ap__node p { margin: 0; color: var(--cv-text-muted); font-size: 14.5px; line-height: 1.55; } /* ---------- Waveform divider ---------- */ .cv-ap__wave { display: flex; align-items: center; justify-content: space-between; gap: 3px; block-size: 52px; margin-block-end: clamp(22px, 3vw, 36px); overflow: hidden; } .cv-ap__wave i { flex: 1 1 0; max-inline-size: 6px; min-inline-size: 2px; block-size: 100%; background: var(--cv-accent); border-radius: 3px; opacity: 0.85; transform: scaleY(var(--h, 0.3)); animation: cvApWave 1.5s ease-in-out var(--d, 0s) infinite alternate; } /* ========================================================= LAB ========================================================= */ .cv-ap__lab { overflow: hidden; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 24px; } .cv-ap__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border-block-end: 1px solid var(--cv-border); } .cv-ap__barl { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--cv-text); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; } .cv-ap__live { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cv-accent); animation: cvApPulse 1.8s ease-out infinite; } .cv-ap__modes { display: inline-flex; padding: 3px; background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: 999px; } .cv-ap__mode { min-block-size: 36px; padding: 6px 16px; background: transparent; border: 0; border-radius: 999px; color: var(--cv-text); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color 220ms ease, color 220ms ease; } .cv-ap__mode.is-on { background: var(--cv-accent); color: var(--cv-on-accent); } .cv-ap__play { display: inline-flex; align-items: center; gap: 9px; min-block-size: 38px; padding: 7px 14px; background: transparent; border: 1px solid var(--cv-border); border-radius: 999px; color: var(--cv-text); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color 220ms ease; } .cv-ap__play:hover { background: var(--cv-accent-soft); } .cv-ap__pi--play, .cv-ap__play[aria-pressed="true"] .cv-ap__pi--pause { display: none; } .cv-ap__play[aria-pressed="true"] .cv-ap__pi--play { display: inline-block; } .cv-ap__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; } .cv-ap__left { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; } /* ---------- Stage ---------- */ .cv-ap__stage { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; isolation: isolate; background: #0A0D0D; border-radius: 18px; user-select: none; } .cv-ap__img { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: cover; } .cv-ap__img--in { z-index: 2; clip-path: inset(0 100% 0 0); } .cv-ap__stage.is-wipe .cv-ap__img--in { clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(0.65, 0, 0.35, 1); } .cv-ap__scan { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 5; inline-size: 3px; background: #5BC4BB; box-shadow: 0 0 22px 6px rgba(91, 196, 187, 0.75); opacity: 0; pointer-events: none; } .cv-ap__stage.is-wipe .cv-ap__scan { animation: cvApScan 900ms cubic-bezier(0.65, 0, 0.35, 1); } /* Blueprint */ .cv-ap__bp { position: absolute; inset: 0; z-index: 4; background-image: linear-gradient(rgba(91, 196, 187, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 196, 187, 0.3) 1px, transparent 1px); background-size: 12.5% 12.5%; box-shadow: inset 0 0 0 1px rgba(91, 196, 187, 0.55); opacity: 0.55; pointer-events: none; transition: opacity 400ms ease; } .cv-ap__stage.is-wipe .cv-ap__bp { animation: cvApBp 900ms ease; } .cv-ap__dim { position: absolute; display: grid; place-items: center; } .cv-ap__dim--w { inset-inline: 10%; inset-block-start: 12px; block-size: 14px; border-block-end: 1px solid #5BC4BB; } .cv-ap__dim--h { inset-block: 14% 12%; inset-inline-start: 12px; inline-size: 14px; border-inline-end: 1px solid #5BC4BB; } .cv-ap__dim--w::before, .cv-ap__dim--w::after, .cv-ap__dim--h::before, .cv-ap__dim--h::after { content: ""; position: absolute; background: #5BC4BB; } .cv-ap__dim--w::before { inset-inline-start: 0; inset-block-end: -5px; inline-size: 1px; block-size: 9px; } .cv-ap__dim--w::after { inset-inline-end: 0; inset-block-end: -5px; inline-size: 1px; block-size: 9px; } .cv-ap__dim--h::before { inset-block-start: 0; inset-inline-end: -5px; block-size: 1px; inline-size: 9px; } .cv-ap__dim--h::after { inset-block-end: 0; inset-inline-end: -5px; block-size: 1px; inline-size: 9px; } .cv-ap__dim b { position: relative; padding: 2px 8px; background: rgba(8, 12, 12, 0.88); border: 1px solid rgba(91, 196, 187, 0.7); border-radius: 99px; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; } /* Pins */ .cv-ap__pins { position: absolute; inset: 0; z-index: 6; margin: 0; padding: 0; list-style: none; } .cv-ap__pin { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); margin-inline-start: -16px; margin-block-start: -16px; animation: cvApDrop 650ms cubic-bezier(0.2, 0.9, 0.3, 1.4) calc(var(--i) * 130ms + 250ms) both; } .cv-ap__pins.is-out .cv-ap__pin { animation: cvApOut 250ms ease forwards; } .cv-ap__pinbtn { position: relative; display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; background: var(--ap-pin); border: 2px solid #FFFFFF; border-radius: 50%; color: var(--ap-pin-ink); font: inherit; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); } .cv-ap__pin.is-active .cv-ap__pinbtn { background: #FFFFFF; animation: cvApPin 1.8s ease-out infinite; } .cv-ap__pinlab { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; padding: 5px 11px; background: rgba(8, 12, 12, 0.92); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 99px; color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; } .cv-ap__pin.is-l .cv-ap__pinlab { inset-inline-start: 0; transform: translate(0, 4px); } .cv-ap__pin.is-r .cv-ap__pinlab { inset-inline-start: auto; inset-inline-end: 0; transform: translate(0, 4px); } .cv-ap__pin:hover .cv-ap__pinlab, .cv-ap__pin:focus-within .cv-ap__pinlab, .cv-ap__pin.is-active .cv-ap__pinlab { opacity: 1; transform: translate(-50%, 0); } .cv-ap__pin.is-l:hover .cv-ap__pinlab, .cv-ap__pin.is-l:focus-within .cv-ap__pinlab, .cv-ap__pin.is-l.is-active .cv-ap__pinlab, .cv-ap__pin.is-r:hover .cv-ap__pinlab, .cv-ap__pin.is-r:focus-within .cv-ap__pinlab, .cv-ap__pin.is-r.is-active .cv-ap__pinlab { transform: translate(0, 0); } /* Caption */ .cv-ap__cap { position: absolute; inset-inline: 10px; inset-block-end: 10px; z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: rgba(8, 12, 12, 0.86); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; color: #FFFFFF; } .cv-ap__capt { display: grid; gap: 2px; min-inline-size: 0; } .cv-ap__capt small { color: #9FB0AC; font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; } .cv-ap__capt b { color: #FFFFFF; font-family: var(--cv-heading-font); font-size: 15px; font-weight: 700; line-height: 1.2; } .cv-ap__capn { flex: none; color: #FFFFFF; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Before / after */ .cv-ap__ba { position: absolute; inset: 0; z-index: 3; display: none; cursor: ew-resize; touch-action: pan-y; } .cv-ap__stage.is-ba .cv-ap__ba { display: block; } .cv-ap__stage.is-ba .cv-ap__bp, .cv-ap__stage.is-ba .cv-ap__pins { opacity: 0; visibility: hidden; } .cv-ap__stage.is-ba .cv-ap__img { filter: saturate(1.2) contrast(1.06) brightness(1.06); } .cv-ap__fx { position: absolute; inset: 0; background: radial-gradient(60% 42% at 50% 24%, rgba(91, 196, 187, 0.4), transparent 70%), conic-gradient(from 200deg at 50% -8%, transparent 0 8deg, rgba(255, 255, 255, 0.22) 12deg, transparent 18deg, transparent 38deg, rgba(91, 196, 187, 0.3) 44deg, transparent 50deg, transparent 70deg, rgba(255, 255, 255, 0.2) 76deg, transparent 82deg); mix-blend-mode: screen; animation: cvApBeam 7s ease-in-out infinite alternate; } .cv-ap__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); } .cv-ap__before img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: grayscale(0.9) brightness(0.55) contrast(0.9); } .cv-ap__chip { position: absolute; inset-block-start: 12px; padding: 6px 12px; background: rgba(8, 12, 12, 0.88); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 99px; color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1.2; } .cv-ap__chip--l { left: 12px; } .cv-ap__chip--r { right: 12px; } .cv-ap__handle { position: absolute; inset-block: 0; left: var(--p); inline-size: 44px; margin-inline-start: -22px; cursor: ew-resize; } .cv-ap__handle::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: 2px; margin-inline-start: -1px; background: #FFFFFF; box-shadow: 0 0 14px rgba(0, 0, 0, 0.6); } .cv-ap__handle:focus-visible { outline: none; } .cv-ap__grip { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin: -20px 0 0 -20px; background: #FFFFFF; border-radius: 50%; color: #0A0D0D; font-size: 15px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); } /* ---------- Thumbnail strip ---------- */ .cv-ap__strip { display: flex; gap: 8px; margin: 0; padding: 2px 2px 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .cv-ap__strip li { flex: 0 0 92px; scroll-snap-align: center; } .cv-ap__thumb { position: relative; display: block; inline-size: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; background: #0A0D0D; border: 2px solid var(--cv-border); border-radius: 12px; color: #FFFFFF; cursor: pointer; transition: transform 260ms ease, border-color 260ms ease; } .cv-ap__thumb img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.7; transition: opacity 260ms ease; } .cv-ap__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 9, 9, 0.9), transparent 62%); } .cv-ap__thumb:hover { transform: translateY(-4px) rotate(-1.5deg); } .cv-ap__thumb.is-on { border-color: var(--cv-accent); transform: translateY(-4px); } .cv-ap__thumb.is-on img, .cv-ap__thumb:hover img { opacity: 1; } .cv-ap__tn { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; z-index: 2; padding: 2px 7px; background: rgba(8, 12, 12, 0.85); border-radius: 99px; font-size: 11px; font-weight: 700; line-height: 1.3; } .cv-ap__tl { position: absolute; inset-inline: 6px; inset-block-end: 9px; z-index: 2; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: start; } .cv-ap__tp { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3; block-size: 3px; background: rgba(255, 255, 255, 0.25); } .cv-ap__tp i { display: block; inline-size: 100%; block-size: 100%; background: #5BC4BB; transform: scaleX(0); transform-origin: var(--cv-ap-origin, 0 50%); } .cv-ap__tp i.is-run { animation: cvApProg var(--ap-dur, 8s) linear forwards; } .cv-ap:not([data-ap-play]) .cv-ap__tp i { animation-play-state: paused; } /* ---------- Info ---------- */ .cv-ap__info { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-inline-size: 0; padding: 18px; background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: 18px; } .cv-ap__itype { margin: 0 0 6px; color: var(--cv-accent); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; } .cv-ap__iname { margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(24px, 6vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } .cv-ap__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; background: var(--cv-border); border: 1px solid var(--cv-border); border-radius: 12px; } .cv-ap__metrics > div { padding: 11px 13px; background: var(--cv-surface); } .cv-ap__metrics dt { margin: 0 0 3px; color: var(--cv-text-muted); font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; } .cv-ap__metrics dd { margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 21px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .cv-ap__diff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .cv-ap__diff .cv-ap__k { margin: 0; } .cv-ap__diff b { color: var(--cv-text); font-size: 13.5px; font-weight: 700; } .cv-ap__dots { display: inline-flex; gap: 5px; } .cv-ap__dots i { inline-size: 12px; block-size: 12px; border: 2px solid var(--cv-text-muted); border-radius: 50%; transition: background-color 300ms ease, border-color 300ms ease; } .cv-ap__dots i.is-on { background: var(--cv-accent); border-color: var(--cv-accent); } .cv-ap__blk p:not(.cv-ap__k) { margin: 0; color: var(--cv-text); font-size: 15px; line-height: 1.6; } .cv-ap__pininfo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 13px 14px; background: var(--cv-accent-soft); border-radius: 12px; } .cv-ap__pn { display: grid; place-items: center; inline-size: 30px; block-size: 30px; background: var(--cv-accent); border-radius: 50%; color: var(--cv-on-accent); font-size: 13px; font-weight: 800; } .cv-ap__pininfo b { display: block; margin-block-end: 2px; color: var(--cv-text); font-size: 15px; font-weight: 700; line-height: 1.3; } .cv-ap__pininfo p { margin: 0; color: var(--cv-text); font-size: 14px; line-height: 1.5; } .cv-ap__info.is-swap .cv-ap__ihead, .cv-ap__info.is-swap .cv-ap__metrics, .cv-ap__info.is-swap .cv-ap__diff, .cv-ap__info.is-swap .cv-ap__blk, .cv-ap__info.is-swap .cv-ap__pininfo { animation: cvApRise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 70ms); } /* ---------- Timeline + rig ---------- */ .cv-ap__run { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 18px 14px 20px; border-block-start: 1px solid var(--cv-border); } .cv-ap__ghead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-block-end: 8px; } .cv-ap__ghead .cv-ap__k { margin: 0; } .cv-ap__gtot { margin: 0; color: var(--cv-text); font-size: 14px; font-weight: 600; } .cv-ap__gtot b { color: var(--cv-accent); font-family: var(--cv-heading-font); font-size: 20px; } .cv-ap__rows { margin: 0; padding: 0; list-style: none; } .cv-ap__row, .cv-ap__axis { display: grid; grid-template-columns: 82px minmax(0, 1fr) 44px; align-items: center; gap: 10px; } .cv-ap__row { padding-block: 7px; } .cv-ap__rl { color: var(--cv-text); font-size: 12.5px; font-weight: 700; line-height: 1.25; } .cv-ap__row b { color: var(--cv-text-muted); font-size: 12.5px; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; } .cv-ap__track { position: relative; block-size: 14px; background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: 99px; } .cv-ap__track i { position: absolute; inset-block: 1px; inset-inline-start: calc(var(--s) * 100%); inline-size: calc((var(--e) - var(--s)) * 100%); background: var(--cv-accent); border-radius: 99px; transform: scaleX(0); transform-origin: var(--cv-ap-origin, 0 50%); } .cv-ap__row--end .cv-ap__track i { background: var(--cv-text); } .cv-ap__rows.is-run .cv-ap__track i { transform: none; transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--r) * 100ms); } .cv-ap:not([data-ap-ready]) .cv-ap__track i { transform: none; } .cv-ap__axis { margin-block-start: 4px; } .cv-ap__axt { position: relative; block-size: 18px; border-block-start: 1px solid var(--cv-border); } .cv-ap__axt span { position: absolute; inset-block-start: 4px; inset-inline-start: var(--t); color: var(--cv-text-muted); font-size: 11px; font-weight: 600; line-height: 1.2; transform: translateX(-50%); font-variant-numeric: tabular-nums; } .cv-ap__riglist { margin: 0; padding: 0; list-style: none; } .cv-ap__riglist li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-block: 11px; border-block-end: 1px solid var(--cv-border); font-size: 14.5px; line-height: 1.4; } .cv-ap__riglist li:first-child { border-block-start: 1px solid var(--cv-border); } .cv-ap__riglist span { color: var(--cv-text-muted); font-weight: 600; } .cv-ap__riglist b { min-inline-size: 0; color: var(--cv-text); font-weight: 700; text-align: end; } .cv-ap__riglist.is-swap li { animation: cvApSlide 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 70ms); } /* ========================================================= MATRIX ========================================================= */ .cv-ap__matrix { margin-block-start: clamp(40px, 6vw, 76px); } .cv-ap__mhead { display: grid; gap: 12px; margin-block-end: clamp(20px, 3vw, 32px); } .cv-ap__mhead .cv-ap__h3 { margin: 0; } .cv-ap__mtable { display: grid; gap: 12px; } .cv-ap__mrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 16px; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 16px; color: var(--cv-text); font-size: 14.5px; line-height: 1.45; transition: border-color 240ms ease, transform 240ms ease; } .cv-ap__mrow:not(.cv-ap__mrow--h):hover { border-color: var(--cv-accent); transform: translateY(-2px); } .cv-ap__mrow--h { display: none; } .cv-ap__mrow > span { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; padding-block: 9px; border-block-end: 1px solid var(--cv-border); } .cv-ap__mrow > span:last-child { border-block-end: 0; } .cv-ap__mrow > span[data-label]::before { content: attr(data-label); color: var(--cv-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .cv-ap__mroom { grid-template-columns: minmax(0, 1fr) !important; gap: 2px !important; } .cv-ap__mroom b { color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 18px; font-weight: 700; line-height: 1.2; } .cv-ap__mroom small { color: var(--cv-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .cv-ap__mhrs { grid-template-columns: 96px auto minmax(60px, 1fr) !important; } .cv-ap__mhrs b { color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .cv-ap__mhrs i { display: block; block-size: 6px; overflow: hidden; background: var(--cv-border); border-radius: 99px; } .cv-ap__mhrs u { display: block; inline-size: 100%; block-size: 100%; background: var(--cv-accent); border-radius: inherit; text-decoration: none; transform: scaleX(0); transform-origin: var(--cv-ap-origin, 0 50%); transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms); } .cv-ap__matrix.is-in .cv-ap__mhrs u, .cv-ap:not([data-ap-ready]) .cv-ap__mhrs u { transform: scaleX(var(--w)); } /* ========================================================= SURVEY ========================================================= */ .cv-ap__survey { margin-block-start: clamp(40px, 6vw, 76px); display: grid; gap: 26px; } .cv-ap__shead { position: relative; display: grid; gap: 12px; align-content: start; } .cv-ap__shead .cv-ap__h3 { margin: 0; } .cv-ap__stamp { justify-self: start; margin-block-start: 6px; padding: 8px 14px; border: 2px solid var(--cv-accent); border-radius: 8px; color: var(--cv-accent); font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; transform: rotate(-4deg) scale(1); } .cv-ap[data-ap-ready] .cv-ap__survey:not(.is-in) .cv-ap__stamp { opacity: 0; transform: rotate(-12deg) scale(1.7); } .cv-ap[data-ap-ready] .cv-ap__stamp { transition: opacity 400ms ease 1.6s, transform 500ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 1.6s; } .cv-ap__checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 36px; margin: 0; padding: 0; list-style: none; counter-reset: ap; } .cv-ap__check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding-block: 16px; border-block-end: 1px solid var(--cv-border); } .cv-ap__check:first-child { border-block-start: 1px solid var(--cv-border); } .cv-ap__cn { min-inline-size: 30px; color: var(--cv-accent); font-family: var(--cv-heading-font); font-size: 15px; font-weight: 700; line-height: 1.5; } .cv-ap__check h4 { margin: 0 0 4px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 17px; font-weight: 700; line-height: 1.25; } .cv-ap__check p { margin: 0; color: var(--cv-text-muted); font-size: 14.5px; line-height: 1.55; } .cv-ap__tick { position: relative; inline-size: 26px; block-size: 26px; border: 2px solid var(--cv-accent); border-radius: 50%; transition: background-color 350ms ease calc(var(--i) * 140ms + 300ms); } .cv-ap__tick::after { content: ""; position: absolute; inset-block-start: 4px; inset-inline-start: 8px; inline-size: 6px; block-size: 11px; border: solid var(--cv-on-accent); border-width: 0 2.5px 2.5px 0; opacity: 0; transform: rotate(45deg) scale(0.4); transition: opacity 300ms ease calc(var(--i) * 140ms + 400ms), transform 400ms cubic-bezier(0.2, 0.9, 0.3, 1.4) calc(var(--i) * 140ms + 400ms); } .cv-ap__survey.is-in .cv-ap__tick, .cv-ap:not([data-ap-ready]) .cv-ap__tick { background: var(--cv-accent); } .cv-ap__survey.is-in .cv-ap__tick::after, .cv-ap:not([data-ap-ready]) .cv-ap__tick::after { opacity: 1; transform: rotate(45deg) scale(1); } /* ========================================================= CLOSING ========================================================= */ .cv-ap__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-block-start: clamp(40px, 6vw, 76px); padding: clamp(22px, 4vw, 40px); background: var(--cv-accent-soft); border-radius: 22px; } .cv-ap__ctat { margin: 0 0 8px; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(24px, 3.2vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; } .cv-ap__ctap { max-inline-size: 54ch; margin: 0; color: var(--cv-text); font-size: var(--cv-hero-body); line-height: 1.6; } /* ---------- Keyframes ---------- */ @keyframes cvApFlow { to { background-position: 0 12px; } } @keyframes cvApWave { from { transform: scaleY(calc(var(--h, 0.3) * 0.35)); } to { transform: scaleY(var(--h, 0.3)); } } @keyframes cvApPulse { 0% { box-shadow: 0 0 0 0 var(--cv-accent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } } @keyframes cvApScan { 0% { inset-inline-start: 0; opacity: 1; } 100% { inset-inline-start: calc(100% - 3px); opacity: 1; } } @keyframes cvApBp { 0%, 100% { opacity: 0.55; } 40% { opacity: 1; } } @keyframes cvApDrop { from { opacity: 0; transform: translateY(-26px) scale(0.3); } to { opacity: 1; transform: none; } } @keyframes cvApOut { to { opacity: 0; transform: scale(0.4); } } @keyframes cvApPin { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(0, 0, 0, 0.5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0), 0 6px 14px rgba(0, 0, 0, 0.5); } } @keyframes cvApBeam { from { transform: rotate(-3deg) scale(1.1); } to { transform: rotate(3deg) scale(1.1); } } @keyframes cvApProg { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes cvApRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes cvApSlide { from { opacity: 0; transform: translateX(calc(var(--ap-flip, 1) * 22px)); } to { opacity: 1; transform: none; } } /* ---------- Mobile-L · 425px+ ---------- */ @media (min-width: 425px) { .cv-ap__metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cv-ap__grid { padding: 16px; gap: 18px; } .cv-ap__info { padding: 20px; } .cv-ap__run { padding: 20px 16px 22px; } .cv-ap__row, .cv-ap__axis { grid-template-columns: 92px minmax(0, 1fr) 48px; } .cv-ap__rl, .cv-ap__row b { font-size: 13px; } .cv-ap__mrow > span { grid-template-columns: 110px minmax(0, 1fr); } .cv-ap__mhrs { grid-template-columns: 110px auto minmax(60px, 1fr) !important; } } /* ---------- Tablet · 768px+ ---------- */ @media (min-width: 768px) { .cv-ap__path { padding: 26px 28px; } .cv-ap__bar { padding: 14px 22px; } .cv-ap__grid { padding: 22px; gap: 22px; } .cv-ap__strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; padding: 6px 0 4px; } .cv-ap__strip li { flex: none; } .cv-ap__tl { display: none; } .cv-ap__tn { inset-block-end: 6px; inset-block-start: auto; } .cv-ap__info { padding: 24px; gap: 18px; } .cv-ap__run { padding: 26px 22px 28px; gap: 30px; } .cv-ap__row, .cv-ap__axis { grid-template-columns: 110px minmax(0, 1fr) 54px; gap: 14px; } .cv-ap__rl, .cv-ap__row b { font-size: 14px; } .cv-ap__mhead { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; gap: 12px 40px; } .cv-ap__mhead .cv-ap__eyebrow { grid-column: 1 / -1; } .cv-ap__mtable { gap: 12px; } .cv-ap__mrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding: 8px 22px; } .cv-ap__mroom { grid-column: 1 / -1; } .cv-ap__mrow > span:nth-last-child(2) { border-block-end: 0; } .cv-ap__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-ap__check:nth-child(2) { border-block-start: 1px solid var(--cv-border); } .cv-ap__cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } .cv-ap__cta .cv-ap__btn { flex: none; } } /* ---------- Laptop · 1024px+ ---------- */ @media (min-width: 1024px) { .cv-ap__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; } .cv-ap__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 26px; padding: 26px; align-items: stretch; } .cv-ap__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-ap__info { padding: 24px 26px; gap: 16px; } .cv-ap__iname { font-size: 28px; } .cv-ap__run { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; padding: 30px 26px 32px; } .cv-ap__mhead { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); } /* Matrix becomes a real table */ .cv-ap__mtable { gap: 0; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 22px; overflow: hidden; } .cv-ap__mrow, .cv-ap__mrow--h { display: grid; grid-template-columns: 1.35fr 1.15fr 1.1fr 1.1fr 0.95fr 0.8fr; align-items: center; gap: 0 20px; padding: 14px 24px; background: transparent; border: 0; border-block-end: 1px solid var(--cv-border); border-radius: 0; } .cv-ap__mrow:not(.cv-ap__mrow--h):hover { background: var(--cv-accent-soft); transform: none; border-color: var(--cv-border); } .cv-ap__mrow:last-child { border-block-end: 0; } .cv-ap__mrow--h { background: var(--cv-bg); color: var(--cv-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .cv-ap__mrow > span, .cv-ap__mroom, .cv-ap__mhrs { display: block; grid-column: auto; padding: 0; border: 0; grid-template-columns: none !important; } .cv-ap__mrow > span[data-label]::before { display: none; } .cv-ap__mhrs { display: grid !important; grid-template-columns: auto minmax(40px, 1fr) !important; align-items: center; gap: 10px !important; } .cv-ap__survey { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 56px; align-items: start; } .cv-ap__checks { gap: 0 40px; } .cv-ap__check:nth-child(2) { border-block-start: 1px solid var(--cv-border); } } /* ---------- Laptop-L · 1440px+ ---------- */ @media (min-width: 1440px) { .cv-ap__grid { gap: 36px; padding: 32px; } .cv-ap__info { padding: 30px 32px; gap: 20px; } .cv-ap__iname { font-size: 32px; } .cv-ap__tl { display: block; font-size: 10px; inset-inline: 5px; inset-block-end: 8px; } .cv-ap__tn { inset-block-start: 5px; inset-block-end: auto; } .cv-ap__run { padding: 36px 32px 38px; gap: 64px; } .cv-ap__mrow, .cv-ap__mrow--h { padding: 17px 32px; font-size: 15px; } .cv-ap__survey { gap: 80px; } .cv-ap__check h4 { font-size: 18px; } } /* ---------- Mobile-S · up to 374px ---------- */ @media (max-width: 374px) { .cv-ap__bar { padding: 10px 12px; } .cv-ap__mode { padding: 6px 12px; font-size: 12.5px; } .cv-ap__grid { padding: 12px; } .cv-ap__info { padding: 16px 14px; } .cv-ap__row, .cv-ap__axis { grid-template-columns: 76px minmax(0, 1fr) 42px; gap: 8px; } .cv-ap__rl, .cv-ap__row b { font-size: 12px; } .cv-ap__cap { padding: 8px 10px; } .cv-ap__capt b { font-size: 13.5px; } .cv-ap__mrow { padding: 4px 12px; } .cv-ap__mrow > span { grid-template-columns: 84px minmax(0, 1fr); } .cv-ap__mhrs { grid-template-columns: 84px auto minmax(40px, 1fr) !important; } .cv-ap__check { gap: 10px; } } @media (max-width: 767px) { .cv-ap__btn { inline-size: 100%; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cv-ap [data-ap-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .cv-ap__wave i, .cv-ap__node::before, .cv-ap__live, .cv-ap__fx, .cv-ap__pin, .cv-ap__pin.is-active .cv-ap__pinbtn, .cv-ap__tp i.is-run, .cv-ap__stage.is-wipe .cv-ap__scan, .cv-ap__stage.is-wipe .cv-ap__bp { animation: none !important; } .cv-ap__stage.is-wipe .cv-ap__img--in, .cv-ap__track i, .cv-ap__mhrs u, .cv-ap__tick, .cv-ap__tick::after, .cv-ap__stamp, .cv-ap__thumb, .cv-ap__mrow { transition: none !important; } .cv-ap__track i { transform: none; } .cv-ap__mhrs u { transform: scaleX(var(--w)); } .cv-ap__tick { background: var(--cv-accent); } .cv-ap__tick::after { opacity: 1; transform: rotate(45deg) scale(1); } } .cv-not-found-page { --error-bg: var(--cv-bg, #f3f6f5); --error-surface: var(--cv-surface, #ffffff); --error-text: var(--cv-text, #0a0d0d); --error-muted: var(--cv-text-muted, #5e6b68); --error-accent: var(--cv-accent, #1f5f5b); --error-soft: var(--cv-accent-soft, #c9d8d5); --error-border: color-mix(in srgb, var(--error-text) 12%, transparent); min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--error-accent) 8%, transparent), transparent 58%), var(--error-bg); color: var(--error-text); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-not-found-page *, .cv-not-found-page *::before, .cv-not-found-page *::after { box-sizing: border-box; } .cv-404-tools { position: absolute; z-index: 5; inset-block-start: 22px; inset-inline-end: clamp(18px, 4vw, 56px); display: flex; gap: 10px; } .cv-404-tool { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--error-border); border-radius: 50%; background: var(--error-surface); color: var(--error-text); cursor: pointer; font-size: 1rem; transition: transform 180ms ease, border-color 180ms ease, color 180ms ease; } .cv-404-tool:hover { transform: translateY(-2px); border-color: var(--error-accent); color: var(--error-accent); } .cv-404-sun { display: none; } .cv-404 { display: flex; min-height: 100vh; flex-direction: column; justify-content: center; padding: 86px clamp(18px, 5vw, 72px) 28px; } .cv-404__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 7vw, 100px); width: min(100%, 1180px); margin-inline: auto; } .cv-404__art { position: relative; display: grid; min-height: clamp(360px, 40vw, 510px); place-items: center; perspective: 1000px; } .cv-404__orbit { position: absolute; width: min(90%, 440px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--error-accent) 22%, transparent); border-radius: 50%; } .cv-404__orbit--outer { animation: cv404Orbit 38s linear infinite; } .cv-404__orbit--inner { width: min(70%, 340px); border-style: dashed; opacity: .65; animation: cv404Orbit 30s linear infinite reverse; } .cv-404__ticket { position: relative; z-index: 1; width: min(82%, 390px); padding: clamp(20px, 3vw, 32px); border: 1px solid color-mix(in srgb, var(--error-accent) 20%, transparent); border-radius: 24px; background: var(--error-surface); box-shadow: 0 28px 70px rgb(12 35 31 / 14%); transform: rotate(-5deg); animation: cv404Float 5s ease-in-out infinite; } .cv-404__ticket-top, .cv-404__ticket-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cv-404__ticket-top { color: var(--error-muted); font-size: .78rem; font-weight: 800; letter-spacing: .1em; line-height: 1.5; } .cv-404__ticket-logo { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 12px; background: #080a0a; } .cv-404__ticket-logo img { display: block; width: 100%; height: 100%; object-fit: contain; } .cv-404__ticket-number { margin: 12px 0 2px; color: var(--error-accent); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(6rem, 15vw, 10rem); font-weight: 800; letter-spacing: -.09em; line-height: .95; text-align: center; text-shadow: 7px 8px 0 color-mix(in srgb, var(--error-accent) 14%, transparent); } .cv-404__ticket-bottom { padding-top: 16px; border-top: 1px dashed var(--error-border); color: var(--error-muted); font-size: .88rem; font-weight: 700; line-height: 1.5; } .cv-404__ticket-bottom > span:first-child { display: inline-flex; align-items: center; gap: 8px; } .cv-404__ticket-bottom > span:first-child i { color: var(--error-accent); } .cv-404__ticket-stamp { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--error-border); border-radius: 50%; color: var(--error-accent); font-size: 1.1rem; } .cv-404__floating-icon { position: absolute; z-index: 2; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid color-mix(in srgb, var(--error-accent) 20%, transparent); border-radius: 17px; background: var(--error-surface); color: var(--error-accent); box-shadow: 0 12px 30px rgb(12 35 31 / 10%); } .cv-404__floating-icon--pin { inset-block-start: 15%; inset-inline-end: 17%; animation: cv404Bob 3.5s ease-in-out infinite; } .cv-404__floating-icon--spark { inset-block-end: 16%; inset-inline-start: 15%; animation: cv404Bob 4s 500ms ease-in-out infinite reverse; } .cv-404__spark { position: absolute; color: var(--error-accent); animation: cv404Twinkle 2.4s ease-in-out infinite; } .cv-404__spark--one { inset-block-start: 13%; inset-inline-start: 21%; font-size: 1.25rem; } .cv-404__spark--two { inset-block-end: 19%; inset-inline-end: 18%; font-size: 1.1rem; animation-delay: 700ms; } .cv-404__spark--three { inset-block-start: 28%; inset-inline-end: 10%; font-size: .6rem; animation-delay: 300ms; } .cv-404__content { max-width: 520px; animation: cv404Enter 750ms cubic-bezier(.2, .7, .2, 1) both; } .cv-404__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--error-accent); font-size: .9rem; font-weight: 800; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; } .cv-404__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--error-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--error-accent) 13%, transparent); } .cv-404__content h1 { margin: 18px 0 0; color: var(--error-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(2.7rem, 5vw, 4.8rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.05; text-wrap: balance; } .cv-404__content h1 em { color: var(--error-accent); font-style: normal; } .cv-404__content > p { max-width: 460px; margin: 20px 0 0; color: var(--error-muted); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.8; } .cv-404__home-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 11px; margin-top: 28px; padding: 0 20px; border-radius: var(--cv-radius-sm, 8px); background: var(--error-accent); color: var(--cv-on-accent, #fff); font-size: .98rem; font-weight: 800; text-decoration: none; transition: transform 200ms ease, background-color 200ms ease; } .cv-404__home-button:hover { transform: translateY(-3px); background: var(--cv-accent-hover, #174d49); } .cv-404__home-button i { transition: transform 200ms ease; } .cv-404__home-button:hover i { transform: translateX(-4px); } .cv-404__help { display: flex; align-items: center; gap: 12px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--error-border); } .cv-404__help-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: var(--error-soft); color: var(--error-accent); } .cv-404__help > span:last-child { display: flex; flex-direction: column; gap: 3px; line-height: 1.5; } .cv-404__help strong { color: var(--error-text); font-size: .94rem; } .cv-404__help small { color: var(--error-muted); font-size: .9rem; } .cv-404__bottomline { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(100%, 1180px); margin: clamp(32px, 5vw, 58px) auto 0; color: var(--error-muted); font-size: .82rem; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; } .cv-404__bottomline-dots { color: var(--error-accent); } @keyframes cv404Orbit { to { transform: rotate(360deg); } } @keyframes cv404Float { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(-3deg); } } @keyframes cv404Bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(7deg); } } @keyframes cv404Twinkle { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes cv404Enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 800px) { .cv-404 { padding-block-start: 86px; } .cv-404__layout { grid-template-columns: 1fr; gap: 10px; max-width: 620px; } .cv-404__art { min-height: clamp(270px, 47vw, 380px); } .cv-404__ticket { width: min(72%, 340px); } .cv-404__ticket-number { font-size: clamp(6rem, 20vw, 8rem); } .cv-404__content { max-width: 620px; margin-inline: auto; text-align: center; } .cv-404__content > p { margin-inline: auto; } .cv-404__help { text-align: start; } } @media (max-width: 480px) { .cv-404 { padding: 82px 16px 22px; } .cv-404__art { min-height: 260px; } .cv-404__ticket { width: min(80%, 310px); padding: 18px; border-radius: 19px; } .cv-404__ticket-number { font-size: clamp(5.7rem, 25vw, 7rem); } .cv-404__content h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); } .cv-404__content > p { font-size: 1rem; } .cv-404__bottomline { flex-wrap: wrap; gap: 8px; font-size: .72rem; } .cv-404__floating-icon { width: 42px; height: 42px; border-radius: 14px; } } @media (max-width: 360px) { .cv-404 { padding-inline: 12px; } .cv-404__art { min-height: 230px; } .cv-404__eyebrow { font-size: .78rem; letter-spacing: .08em; } .cv-404__help { align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .cv-404__orbit, .cv-404__ticket, .cv-404__floating-icon, .cv-404__spark, .cv-404__content { animation: none; } .cv-404__home-button, .cv-404__home-button i, .cv-404-tool { transition: none; } } .cv-coming-page { --coming-bg: var(--cv-bg, #f3f6f5); --coming-surface: var(--cv-surface, #ffffff); --coming-text: var(--cv-text, #0a0d0d); --coming-muted: var(--cv-text-muted, #5e6b68); --coming-accent: var(--cv-accent, #1f5f5b); --coming-soft: var(--cv-accent-soft, #c9d8d5); --coming-border: color-mix(in srgb, var(--coming-text) 13%, transparent); min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--coming-accent) 9%, transparent), transparent 55%), var(--coming-bg); color: var(--coming-text); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-coming-page *, .cv-coming-page *::before, .cv-coming-page *::after { box-sizing: border-box; } .cv-coming-tools { position: absolute; z-index: 5; inset-block-start: 22px; inset-inline-end: clamp(18px, 4vw, 56px); display: flex; gap: 10px; } .cv-coming-tool { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--coming-border); border-radius: 50%; background: var(--coming-surface); color: var(--coming-text); cursor: pointer; font-size: 1rem; transition: transform 180ms ease, border-color 180ms ease, color 180ms ease; } .cv-coming-tool:hover { transform: translateY(-2px); border-color: var(--coming-accent); color: var(--coming-accent); } .cv-coming-sun { display: none; } .cv-coming { display: flex; min-height: 100vh; align-items: center; padding: 82px clamp(18px, 5vw, 72px) 28px; } .cv-coming__wrap { width: min(100%, 1320px); margin-inline: auto; } .cv-coming__brand { display: inline-flex; align-items: center; gap: 11px; color: var(--coming-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 1.22rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; } .cv-coming__brand-mark { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 12px; background: #080a0a; } .cv-coming__brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; } .cv-coming__hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 6vw, 84px); margin-top: clamp(28px, 4vw, 52px); } .cv-coming__visual { position: relative; display: grid; min-height: clamp(350px, 41vw, 520px); place-items: center; perspective: 900px; } .cv-coming__orbit { position: absolute; width: min(86%, 430px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--coming-accent) 23%, transparent); border-radius: 50%; } .cv-coming__orbit--one { animation: cvComingOrbit 40s linear infinite; } .cv-coming__orbit--two { width: min(68%, 340px); border-style: dashed; opacity: .65; animation: cvComingOrbit 32s linear infinite reverse; } .cv-coming__orbit--three { width: min(48%, 240px); border-color: color-mix(in srgb, var(--coming-accent) 13%, transparent); animation: cvComingPulse 4s ease-in-out infinite; } .cv-coming__dial { position: relative; display: grid; width: min(45vw, 235px); aspect-ratio: 1; place-items: center; border: 1px solid color-mix(in srgb, var(--coming-accent) 18%, transparent); border-radius: 50%; background: var(--coming-surface); box-shadow: 0 25px 70px rgb(12 35 31 / 12%); animation: cvComingFloat 5s ease-in-out infinite; } .cv-coming__dial-ring { position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--coming-accent) 28%, transparent); border-radius: inherit; } .cv-coming__dial-ring::before { position: absolute; inset-block-start: 13%; inset-inline-start: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--coming-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--coming-accent) 13%, transparent); content: ""; } .cv-coming__dial-center { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--coming-accent); text-align: center; } .cv-coming__dial-center i { font-size: 1.5rem; animation: cvComingTwinkle 2s ease-in-out infinite; } .cv-coming__dial-center strong { font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: .9rem; font-weight: 800; letter-spacing: .15em; line-height: 1.4; } .cv-coming__float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--coming-border); border-radius: 999px; background: var(--coming-surface); color: var(--coming-text); box-shadow: 0 12px 28px rgb(12 35 31 / 8%); font-size: .86rem; font-weight: 800; line-height: 1.4; } .cv-coming__float i { color: var(--coming-accent); } .cv-coming__float--venue { inset-block-start: 17%; inset-inline-start: 2%; animation: cvComingBob 3.6s ease-in-out infinite; } .cv-coming__float--production { inset-block-start: 30%; inset-inline-end: 0; animation: cvComingBob 4.2s 350ms ease-in-out infinite reverse; } .cv-coming__float--people { inset-block-end: 16%; inset-inline-start: 12%; animation: cvComingBob 4s 700ms ease-in-out infinite; } .cv-coming__copy { max-width: 670px; animation: cvComingEnter 750ms cubic-bezier(.2, .7, .2, 1) both; } .cv-coming__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--coming-accent); font-size: .88rem; font-weight: 800; letter-spacing: .1em; line-height: 1.55; text-transform: uppercase; } .cv-coming__live-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--coming-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--coming-accent) 12%, transparent); animation: cvComingBlink 1.8s ease-in-out infinite; } .cv-coming__copy h1 { margin: 18px 0 0; color: var(--coming-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(2.65rem, 5.2vw, 5rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.05; text-wrap: balance; } .cv-coming__copy h1 em { color: var(--coming-accent); font-style: normal; } .cv-coming__copy > p { max-width: 610px; margin: 18px 0 0; color: var(--coming-muted); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.8; } .cv-coming__timer-block { max-width: 560px; margin-top: clamp(24px, 3vw, 34px); padding: 18px 20px; border: 1px solid var(--coming-border); border-radius: 18px; background: var(--coming-surface); box-shadow: 0 12px 32px rgb(12 35 31 / 5%); } .cv-coming__timer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; color: var(--coming-muted); font-size: .9rem; font-weight: 800; line-height: 1.45; } .cv-coming__timer-live { display: inline-flex; align-items: center; gap: 6px; color: var(--coming-accent); font-size: .76rem; letter-spacing: .1em; } .cv-coming__timer-live i { font-size: .48rem; animation: cvComingBlink 1.5s infinite; } .cv-coming__timer { display: flex; align-items: center; justify-content: space-between; gap: clamp(5px, 1vw, 14px); direction: ltr; font-variant-numeric: tabular-nums; } .cv-coming__unit { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; gap: 5px; } .cv-coming__unit strong { color: var(--coming-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(1.8rem, 3.3vw, 2.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; } .cv-coming__unit span { color: var(--coming-muted); font-size: .82rem; font-weight: 700; line-height: 1.4; } .cv-coming__colon { align-self: flex-start; padding-top: 5px; color: var(--coming-accent); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 1.6rem; font-weight: 800; } .cv-coming__services { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; } .cv-coming__services span { display: inline-flex; align-items: center; gap: 7px; color: var(--coming-muted); font-size: .9rem; font-weight: 700; line-height: 1.5; } .cv-coming__services i { color: var(--coming-accent); font-size: .8rem; } .cv-coming__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 22px; margin-top: 26px; } .cv-coming__button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 11px; padding: 0 19px; border-radius: var(--cv-radius-sm, 8px); background: var(--coming-accent); color: var(--cv-on-accent, #fff); font-size: .96rem; font-weight: 800; text-decoration: none; transition: transform 180ms ease, background-color 180ms ease; } .cv-coming__button:hover { transform: translateY(-2px); background: var(--cv-accent-hover, #174d49); } .cv-coming__contact { color: var(--coming-accent); font-size: .94rem; font-weight: 800; text-decoration: none; } .cv-coming__contact:hover { text-decoration: underline; text-underline-offset: 4px; } .cv-coming__footerline { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: clamp(34px, 5vw, 58px); color: var(--coming-muted); font-size: .82rem; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; } .cv-coming__footerline i { width: 5px; height: 5px; border-radius: 50%; background: var(--coming-accent); } @keyframes cvComingOrbit { to { transform: rotate(360deg); } } @keyframes cvComingFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(3deg); } } @keyframes cvComingBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes cvComingPulse { 0%, 100% { transform: scale(.94); opacity: .45; } 50% { transform: scale(1.06); opacity: .9; } } @keyframes cvComingTwinkle { 0%, 100% { transform: rotate(-10deg) scale(.9); opacity: .7; } 50% { transform: rotate(10deg) scale(1.15); opacity: 1; } } @keyframes cvComingBlink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes cvComingEnter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 900px) { .cv-coming { padding-inline: 28px; } .cv-coming__hero { gap: 28px; } .cv-coming__float { font-size: .78rem; } } @media (max-width: 720px) { .cv-coming { padding: 82px 20px 26px; } .cv-coming__hero { grid-template-columns: 1fr; gap: 4px; max-width: 640px; margin-inline: auto; } .cv-coming__visual { min-height: clamp(280px, 62vw, 380px); } .cv-coming__dial { width: clamp(180px, 44vw, 220px); } .cv-coming__copy { text-align: center; } .cv-coming__copy > p { margin-inline: auto; } .cv-coming__timer-block { margin-inline: auto; } .cv-coming__services, .cv-coming__actions { justify-content: center; } .cv-coming__footerline { flex-wrap: wrap; } } @media (max-width: 460px) { .cv-coming { padding: 78px 15px 22px; } .cv-coming__brand { font-size: 1.08rem; } .cv-coming__visual { min-height: 265px; } .cv-coming__copy h1 { font-size: clamp(2.2rem, 10vw, 3.25rem); } .cv-coming__eyebrow { font-size: .75rem; letter-spacing: .07em; } .cv-coming__timer-block { padding: 15px 12px; } .cv-coming__unit strong { font-size: clamp(1.45rem, 7.5vw, 2.1rem); } .cv-coming__unit span { font-size: .72rem; } .cv-coming__services { justify-content: flex-start; gap: 8px 13px; } .cv-coming__actions { align-items: stretch; flex-direction: column; } .cv-coming__button { width: 100%; } .cv-coming__footerline { gap: 8px; font-size: .7rem; text-align: center; } .cv-coming__float { padding: 9px 11px; font-size: .74rem; } } @media (max-width: 360px) { .cv-coming__visual { min-height: 230px; } .cv-coming__float--venue { inset-inline-start: 0; } .cv-coming__float--production { inset-inline-end: 0; } .cv-coming__float--people { inset-inline-start: 4%; } .cv-coming__timer-heading { font-size: .82rem; } } @media (prefers-reduced-motion: reduce) { .cv-coming__orbit, .cv-coming__orbit--three, .cv-coming__dial, .cv-coming__float, .cv-coming__dial-center i, .cv-coming__live-dot, .cv-coming__timer-live i, .cv-coming__copy { animation: none; } .cv-coming-page *, .cv-coming-page *::before, .cv-coming-page *::after { transition-duration: 1ms !important; } } /* ===== BASE ===== */ /* ========================================================= HOME 2 HERO · "MAIN STAGE" Copy beside a stage of three photo lanes: two reels that scroll in opposite directions around a central arch whose photo follows the run-of-show rail underneath. Mobile (base) · 760 · 1024 Colours: --cv-* theme tokens only (light, dark, RTL). ========================================================= */ .cv-hx, .cv-hx *, .cv-hx *::before, .cv-hx *::after { box-sizing: border-box; } .cv-hx { --cv-hx-pad: clamp(24px, 3.4vw, 44px); /* same space above and below the content */ --cv-hx-dur: 4.8s; /* time each stop stays active */ --cv-hx-gap: clamp(8px, 1.1vw, 14px); /* gap between stage lanes */ --cv-hx-badge: clamp(70px, 7vw, 104px); /* rotating badge size */ --cv-hx-next: 66px; /* up-next card height */ --cv-hx-dir: 1; /* flips to -1 in RTL (pointer drift) */ --cv-hx-iris-delay: 0.9s; /* first photo waits for the curtains */ position: relative; isolation: isolate; display: flex; align-items: center; min-block-size: calc(100vh - var(--cv-navbar-height)); min-block-size: calc(100svh - var(--cv-navbar-height)); padding-block: var(--cv-hx-pad); overflow: clip; background: var(--cv-bg); color: var(--cv-text); font-family: var(--cv-body-font); } /* ---------- Backdrop: soft glows + slowly turning stage-light rays ---------- */ .cv-hx__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(48% 62% at 76% 46%, var(--cv-accent-soft), transparent 72%), radial-gradient(30% 32% at 0% 100%, var(--cv-accent-soft), transparent 72%); } .cv-hx__bg::before { content: ""; position: absolute; inset-block-start: 46%; left: 76%; inline-size: 130vmax; block-size: 130vmax; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, var(--cv-border) 0 0.5deg, transparent 0.5deg 9deg); -webkit-mask-image: radial-gradient(closest-side, #000, transparent 72%); mask-image: radial-gradient(closest-side, #000, transparent 72%); opacity: 0.55; animation: cvHxSpin 140s linear infinite; } @keyframes cvHxSpin { to { rotate: 360deg; } } /* ---------- Layout: copy, stage, rail ---------- */ .cv-hx__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: clamp(16px, 3vw, 28px); inline-size: min(1320px, 100% - 2 * var(--cv-navbar-padding)); margin-inline: auto; } /* Below 1024px the copy blocks join the page grid directly, so the photos follow the buttons and the stats sit under them (see "order") */ .cv-hx__copy { display: contents; text-align: start; } /* ---------- Entrance: everything rises in order (--k) ---------- */ .cv-hx__pill, .cv-hx__lead, .cv-hx__actions, .cv-hx__stats, .cv-hx__rail { animation: cvHxUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 0.09s + 0.1s); } @keyframes cvHxUp { from { opacity: 0; transform: translateY(22px); } } /* ---------- Pill + shared pulsing dot ---------- */ .cv-hx__pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px; border: 1px solid var(--cv-border); border-radius: 999px; background: var(--cv-surface); color: var(--cv-text); font-size: 14px; font-weight: 700; line-height: 1.3; } .cv-hx__dot { flex: none; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cv-accent); animation: cvHxPing 2.2s ease-out infinite; } @keyframes cvHxPing { 0% { box-shadow: 0 0 0 0 var(--cv-accent-soft); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } } /* ---------- Headline ---------- */ .cv-hx__title { --cv-hx-fs: clamp(34px, min(4.3vw, 7.2svh), 66px); display: grid; justify-items: start; gap: 0.04em; margin: 0; color: var(--cv-text); font-family: var(--cv-heading-font); font-size: var(--cv-hx-fs); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; } .cv-hx__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.26em; } /* Each word sits in a mask; the text slides up out of it */ .cv-hx__w { display: inline-block; overflow: hidden; padding-block: 0.06em 0.16em; margin-block: -0.06em -0.16em; } .cv-hx__w > span { display: inline-block; animation: cvHxWord 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 0.07s + 0.15s); } @keyframes cvHxWord { from { transform: translateY(115%); } } .cv-hx__mark { position: relative; background: none; color: var(--cv-accent); } /* ---------- Lead, buttons, stats ---------- */ .cv-hx__lead { max-inline-size: 54ch; margin: 0; color: var(--cv-text-muted); font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; line-height: 1.6; } .cv-hx__actions { display: flex; flex-wrap: wrap; gap: 12px; } .cv-hx__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-block-size: 52px; padding: 0 26px; overflow: hidden; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-md); font-family: var(--cv-body-font); font-size: 16px; font-weight: 700; text-decoration: none; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .cv-hx__btn:hover { transform: translateY(-2px); } .cv-hx__btn span { display: inline-block; transition: transform 0.25s ease; } .cv-hx__btn:hover span { transform: translate(3px, -3px); } .cv-hx__btn--primary { border-color: var(--cv-accent); background: var(--cv-accent); color: var(--cv-on-accent); box-shadow: 0 16px 34px -18px var(--cv-accent); } /* A band of light crosses the primary button on hover */ .cv-hx__btn--primary::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; inline-size: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: skewX(-18deg); transition: inset-inline-start 0.6s ease; } .cv-hx__btn--primary:hover { background: var(--cv-accent-hover); border-color: var(--cv-accent-hover); } .cv-hx__btn--primary:hover::after { inset-inline-start: 120%; } .cv-hx__btn--secondary { background: var(--cv-surface); color: var(--cv-text); } .cv-hx__btn--secondary:hover { border-color: var(--cv-accent); color: var(--cv-accent); } .cv-hx__btn:focus-visible, .cv-hx__step:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 3px; } .cv-hx__stats { order: 6; display: flex; flex-wrap: wrap; inline-size: 100%; gap: 10px 0; margin: 0; padding: 16px 0 0; border-block-start: 1px solid var(--cv-border); list-style: none; } .cv-hx__stats li { display: grid; gap: 2px; padding-inline: clamp(16px, 2.4vw, 30px); border-inline-start: 1px solid var(--cv-border); } .cv-hx__stats li:first-child { padding-inline-start: 0; border-inline-start: 0; } .cv-hx__stats strong { color: var(--cv-text); font-family: var(--cv-heading-font); font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; direction: ltr; /* "45K+" must not flip in RTL */ unicode-bidi: isolate; } .cv-hx__stats li > span { color: var(--cv-text-muted); font-size: 14px; font-weight: 600; } /* ---------- Stage: reel · arch · reel ---------- */ .cv-hx__stage { order: 5; inline-size: 100%; position: relative; display: grid; grid-template-columns: 0.62fr 1.2fr 0.62fr; grid-template-rows: minmax(0, 1fr); gap: var(--cv-hx-gap); block-size: clamp(300px, 92vw, 400px); min-inline-size: 0; } /* Curtains: each lane rises into place */ @keyframes cvHxCurtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } /* ---------- Reels ---------- */ .cv-hx__lane { position: relative; grid-row: 1; min-inline-size: 0; overflow: hidden; border-radius: 20px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); translate: calc(var(--px, 0) * var(--cv-hx-dir) * 7px) calc(var(--py, 0) * 9px); transition: translate 0.5s ease-out; animation: cvHxCurtain 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* Left reel hangs from the bottom, right reel from the top: the corners left over hold the badge and the up-next card */ .cv-hx__lane--a { grid-column: 1; align-self: end; block-size: calc(100% - var(--cv-hx-badge) - var(--cv-hx-gap)); animation-delay: 0.5s; } .cv-hx__lane--b { grid-column: 3; align-self: start; block-size: calc(100% - var(--cv-hx-next) - var(--cv-hx-gap)); translate: calc(var(--px, 0) * var(--cv-hx-dir) * -7px) calc(var(--py, 0) * -9px); animation-delay: 0.65s; } .cv-hx__reel { display: flex; flex-direction: column; animation: cvHxReel 48s linear infinite; will-change: transform; } .cv-hx__lane--b .cv-hx__reel { animation-duration: 40s; animation-direction: reverse; } .cv-hx__reel img { display: block; flex: none; inline-size: 100%; aspect-ratio: 3 / 4; margin-block-end: var(--cv-hx-gap); border-radius: 16px; object-fit: cover; } @keyframes cvHxReel { to { transform: translateY(-50%); } } .cv-hx__stage:hover .cv-hx__reel { animation-play-state: paused; } /* ---------- Arch ---------- */ .cv-hx__arch { position: relative; grid-column: 2; grid-row: 1; min-inline-size: 0; translate: calc(var(--px, 0) * var(--cv-hx-dir) * 4px) calc(var(--py, 0) * 4px); transition: translate 0.5s ease-out; } .cv-hx__frame, .cv-hx__ring { border-radius: 50% 50% 22px 22px / 28% 28% 22px 22px; } .cv-hx__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--cv-accent-soft); box-shadow: 0 40px 80px -42px var(--cv-accent); animation: cvHxCurtain 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both; } /* Outline that breathes outwards from the arch */ .cv-hx__ring { position: absolute; inset: -9px; border: 1px solid var(--cv-accent); opacity: 0; pointer-events: none; animation: cvHxRing 3.6s ease-out 1.6s infinite; } @keyframes cvHxRing { 0% { opacity: 0.7; transform: scale(0.985); } 100% { opacity: 0; transform: scale(1.06); } } /* Photos: the active one opens as a circle from the stage floor */ .cv-hx__scene { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: cover; clip-path: circle(0% at 50% 100%); } .cv-hx__scene.is-prev { clip-path: circle(150% at 50% 100%); } .cv-hx__scene.is-on { z-index: 2; clip-path: circle(150% at 50% 100%); animation: cvHxIris 1.3s cubic-bezier(0.65, 0, 0.2, 1) var(--cv-hx-iris-delay) both, cvHxKen 7s ease-out var(--cv-hx-iris-delay) both; } @keyframes cvHxIris { from { clip-path: circle(0% at 50% 100%); } to { clip-path: circle(150% at 50% 100%); } } @keyframes cvHxKen { from { transform: scale(1.14); } to { transform: scale(1); } } /* Two beams of stage light sweep across the top of the arch */ .cv-hx__beam { position: absolute; inset: -4% -70% 24% -70%; z-index: 3; pointer-events: none; background: conic-gradient( from 180deg at 50% 0, transparent 0 7deg, rgba(255, 255, 255, 0.3) 13deg, transparent 21deg, transparent 339deg, rgba(255, 255, 255, 0.3) 347deg, transparent 353deg ); mix-blend-mode: screen; opacity: 0.6; transform-origin: 50% 0; animation: cvHxSweep 6s ease-in-out infinite alternate; } @keyframes cvHxSweep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } } .cv-hx__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(5, 12, 12, 0.86), rgba(5, 12, 12, 0) 56%); } /* Caption sits on the photo, so its colours are fixed rather than themed */ .cv-hx__cap { position: absolute; inset-inline: clamp(12px, 1.6vw, 20px); inset-block-end: clamp(14px, 1.8vw, 22px); z-index: 4; display: grid; justify-items: start; gap: 6px; color: #fff; } .cv-hx__cap > * { animation: cvHxCap 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .cv-hx__cap > :nth-child(1) { animation-delay: 1.3s; } .cv-hx__cap > :nth-child(2) { animation-delay: 1.4s; } .cv-hx__cap > :nth-child(3) { animation-delay: 1.5s; } .cv-hx__cap.is-swap > * { animation: none; } @keyframes cvHxCap { from { opacity: 0; transform: translateY(14px); } } .cv-hx__cap-time { padding: 4px 10px; border-radius: 99px; background: var(--cv-accent); color: var(--cv-on-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; line-height: 1.2; } .cv-hx__cap-name { font-family: var(--cv-heading-font); font-size: clamp(18px, 1.8vw, 26px); font-weight: 800; line-height: 1.15; } .cv-hx__cap-desc { color: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 500; line-height: 1.45; } /* ---------- Badge and up-next card (they fill the corners the reels leave) ---------- */ .cv-hx__badge { position: relative; grid-column: 1; grid-row: 1; align-self: start; justify-self: center; z-index: 5; display: grid; place-items: center; inline-size: var(--cv-hx-badge); block-size: var(--cv-hx-badge); border: 1px solid var(--cv-border); border-radius: 50%; background: var(--cv-surface); color: var(--cv-text); box-shadow: 0 18px 40px -22px var(--cv-accent); translate: calc(var(--px, 0) * var(--cv-hx-dir) * -10px) calc(var(--py, 0) * -10px); transition: translate 0.5s ease-out; animation: cvHxPop 0.9s cubic-bezier(0.3, 1.5, 0.4, 1) 1.1s both; } @keyframes cvHxPop { from { opacity: 0; transform: scale(0.4) rotate(-40deg); } } .cv-hx__badge-ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; animation: cvHxSpinFast 18s linear infinite; } @keyframes cvHxSpinFast { to { transform: rotate(360deg); } } .cv-hx__badge-ring text { fill: currentColor; font-family: var(--cv-body-font); font-size: 9.5px; font-weight: 800; } .cv-hx__badge-core { display: grid; place-items: center; inline-size: 42%; block-size: 42%; border-radius: 50%; background: var(--cv-accent); color: var(--cv-on-accent); font-size: clamp(13px, 1.4vw, 20px); } .cv-hx__next { grid-column: 3; grid-row: 1; align-self: end; z-index: 5; display: grid; align-content: center; gap: 1px; min-block-size: var(--cv-hx-next); padding: 8px 12px; border: 1px solid var(--cv-border); border-radius: 16px; background: var(--cv-surface); box-shadow: 0 18px 40px -24px var(--cv-accent); animation: cvHxPop 0.9s cubic-bezier(0.3, 1.5, 0.4, 1) 1.3s both; } .cv-hx__next-k { color: var(--cv-accent); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .cv-hx__next-time { color: var(--cv-text-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } .cv-hx__next-name { color: var(--cv-text); font-family: var(--cv-heading-font); font-size: 13px; font-weight: 700; line-height: 1.2; } .cv-hx__next.is-swap > * { animation: cvHxCap 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* ---------- Run-of-show rail ---------- */ .cv-hx__rail { order: 7; inline-size: 100%; display: grid; gap: 6px 28px; padding: 12px clamp(14px, 2vw, 24px) 14px; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-lg); background: var(--cv-surface); box-shadow: 0 30px 70px -48px var(--cv-accent); } .cv-hx__rail-k { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--cv-text); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; } .cv-hx__rail-sep { color: var(--cv-text-muted); } /* Five stops in one row; each has a progress track on top */ .cv-hx__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; } .cv-hx__step { position: relative; display: grid; align-content: start; gap: 3px; inline-size: 100%; padding: 12px 0 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; box-shadow: none; } .cv-hx__step:hover { transform: none; box-shadow: none; } /* Track (grey) and fill (accent) */ .cv-hx__step::before, .cv-hx__step::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; border-radius: 99px; } .cv-hx__step::before { background: var(--cv-border); } .cv-hx__step::after { background: var(--cv-accent); transform: scaleX(0); transform-origin: 0 50%; } .cv-hx__step.is-done::after { transform: scaleX(1); } .cv-hx__step.is-on::after { animation: cvHxFill var(--cv-hx-dur) linear forwards; } @keyframes cvHxFill { to { transform: scaleX(1); } } /* Hold the active stop while hovered, focused or off screen */ .cv-hx__rail.is-held .cv-hx__step.is-on::after { animation-play-state: paused; } .cv-hx__time { color: var(--cv-text-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; transition: color 0.3s; } .cv-hx__name { color: var(--cv-text-muted); font-family: var(--cv-heading-font); font-size: clamp(12px, 1.3vw, 17px); font-weight: 700; line-height: 1.25; transition: color 0.3s; } /* The sentence for each stop is shown in the arch caption; it stays readable by assistive tech here */ .cv-hx__desc { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cv-hx__step.is-on .cv-hx__time { color: var(--cv-accent); } .cv-hx__step.is-on .cv-hx__name, .cv-hx__step.is-done .cv-hx__name { color: var(--cv-text); } .cv-hx__step:hover .cv-hx__name { color: var(--cv-accent); } /* ---------- Off screen: pause every loop ---------- */ .cv-hx.is-away .cv-hx__reel, .cv-hx.is-away .cv-hx__beam, .cv-hx.is-away .cv-hx__ring, .cv-hx.is-away .cv-hx__badge-ring, .cv-hx.is-away .cv-hx__bg::before { animation-play-state: paused; } /* ---------- Responsive ---------- */ @media (max-width: 760px) { .cv-hx { --cv-hx-next: 60px; } .cv-hx__actions { inline-size: 100%; flex-wrap: nowrap; gap: 10px; } .cv-hx__btn { flex: 1 1 0; min-inline-size: 0; padding-inline: 12px; font-size: 15px; gap: 8px; } .cv-hx__stats li { padding-inline: 14px; } .cv-hx__stats li > span { font-size: 12px; } .cv-hx__lane { border-radius: 14px; } .cv-hx__reel img { border-radius: 12px; } .cv-hx__cap-desc { display: none; } .cv-hx__next { padding: 6px 8px; border-radius: 12px; } .cv-hx__next-k { font-size: 9px; letter-spacing: 0.1em; } .cv-hx__next-name { font-size: 11px; } .cv-hx__rail-k { font-size: 11px; letter-spacing: 0.08em; } .cv-hx__time { font-size: 11px; letter-spacing: 0.04em; } } @media (min-width: 761px) and (max-width: 1023px) { .cv-hx__stage { block-size: clamp(400px, 56vw, 520px); } } @media (min-width: 1024px) { .cv-hx { --cv-hx-stage-h: clamp(400px, calc(100svh - var(--cv-navbar-height) - 2 * var(--cv-hx-pad) - 108px), 640px); --cv-hx-next: 72px; } .cv-hx__inner { grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); grid-template-areas: "copy stage" "rail rail"; column-gap: clamp(28px, 4.4vw, 76px); align-items: center; } .cv-hx__copy { grid-area: copy; display: grid; justify-items: start; align-content: center; gap: clamp(14px, 1.8vw, 22px); min-inline-size: 0; } .cv-hx__stage { grid-area: stage; } .cv-hx__rail { grid-area: rail; } .cv-hx__stage { block-size: var(--cv-hx-stage-h); } .cv-hx__rail { grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 6px clamp(20px, 3vw, 44px); } .cv-hx__rail-k { padding-inline-end: clamp(20px, 3vw, 44px); border-inline-end: 1px solid var(--cv-border); align-self: stretch; } } /* ---------- Reduced motion: still hero, active stop still selectable ---------- */ @media (prefers-reduced-motion: reduce) { .cv-hx *, .cv-hx *::before, .cv-hx *::after { animation: none !important; transition: none !important; } .cv-hx__step.is-on::after { transform: scaleX(1); } .cv-hx__ring { display: none; } } /* ========================================================= CONVOKE PRICING — scoped section styles ========================================================= */ .cv-price { --price-teal: #4aa99e; --price-teal-deep: #1f5f5b; --price-ink: #11201f; --price-muted: #536562; --price-line: rgba(17, 32, 31, 0.14); position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 100px) clamp(18px, 4.2vw, 72px) 44px; color: #f7fbfa; background: #07100f; font-family: inherit; } .cv-price *, .cv-price *::before, .cv-price *::after { box-sizing: border-box; } .cv-price__background, .cv-price__scrim, .cv-price__glow { position: absolute; inset: 0; pointer-events: none; } .cv-price__background { z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transform: scale(1.025); } .cv-price__scrim { z-index: -2; background: linear-gradient(90deg, rgba(3, 12, 11, 0.88), rgba(3, 12, 11, 0.70) 48%, rgba(3, 12, 11, 0.83)), linear-gradient(0deg, rgba(3, 12, 11, 0.58), rgba(3, 12, 11, 0.16) 48%, rgba(3, 12, 11, 0.62)); } .cv-price__glow { z-index: -1; inset: auto; width: min(42vw, 560px); aspect-ratio: 1; border-radius: 50%; filter: blur(2px); opacity: 0.22; background: radial-gradient(circle, var(--price-teal) 0, transparent 68%); } .cv-price__glow--one { top: 5%; inset-inline-start: -14%; } .cv-price__glow--two { bottom: -28%; inset-inline-end: -10%; opacity: 0.16; } .cv-price__inner { width: min(1320px, 100%); margin-inline: auto; } .cv-price__intro { max-width: 800px; margin: 0 auto clamp(30px, 4vw, 52px); text-align: center; } .cv-price__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 15px; color: #9be0d8; font-size: 13px; font-weight: 800; letter-spacing: 0.15em; line-height: 1.4; } .cv-price__eyebrow span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #74d1c5; box-shadow: 0 0 0 5px rgba(116, 209, 197, 0.14); } .cv-price__intro h2 { margin: 0; color: #fff; font-family: inherit; font-size: clamp(34px, 5.2vw, 68px); font-weight: 700; letter-spacing: -0.055em; line-height: 1.06; } .cv-price__intro h2 em { color: #83d3c9; font-style: normal; } .cv-price__intro > p:last-child { max-width: 660px; margin: 18px auto 0; color: rgba(245, 250, 249, 0.88); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.7; } .cv-price__carousel { position: relative; } .cv-price__viewport { position: relative; min-height: 478px; overflow: hidden; perspective: 1400px; } .cv-price__slide { position: absolute; top: 12px; left: 50%; width: min(36%, 405px); min-width: 330px; height: calc(100% - 24px); opacity: 0.58; transform: translateX(calc(-50% - 112%)) scale(0.88); transform-origin: center; transition: transform 750ms cubic-bezier(0.22, 0.75, 0.25, 1), opacity 750ms ease, filter 750ms ease; filter: saturate(0.76); z-index: 1; } .cv-price__slide.is-next { transform: translateX(calc(-50% + 112%)) scale(0.88); } .cv-price__slide.is-active { z-index: 3; opacity: 1; filter: none; transform: translateX(-50%) scale(1); } .cv-price__slide.is-before, .cv-price__slide.is-after { z-index: 2; } .cv-price__card { display: flex; flex-direction: column; width: 100%; height: 100%; padding: clamp(22px, 2.6vw, 34px); overflow: auto; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 25px; color: var(--price-ink); background: rgba(249, 252, 251, 0.97); box-shadow: 0 28px 85px rgba(0, 0, 0, 0.30); scrollbar-width: thin; } .cv-price__card--featured { border: 1px solid rgba(132, 221, 210, 0.92); box-shadow: 0 0 0 1px rgba(132, 221, 210, 0.25), 0 30px 95px rgba(0, 0, 0, 0.42); } .cv-price__card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 34px; } .cv-price__number { color: #50736f; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; } .cv-price__featured { padding: 7px 10px; border-radius: 999px; color: #12423e; background: #c7eeea; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; } .cv-price__icon { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border-radius: 14px; color: #236c65; background: #e3f2f0; } .cv-price__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .cv-price__icon--featured { margin-top: 17px; width: 52px; height: 52px; flex-basis: 52px; border-radius: 17px; } .cv-price__icon--featured svg { width: 25px; height: 25px; } .cv-price__card h3 { margin: 18px 0 8px; color: var(--price-ink); font-family: inherit; font-size: clamp(25px, 2.15vw, 31px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.12; } .cv-price__summary { min-height: 48px; margin: 0; color: var(--price-muted); font-size: 15px; line-height: 1.55; } .cv-price__price { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 0; color: var(--price-ink); font-family: inherit; font-size: clamp(32px, 3vw, 43px); font-weight: 800; letter-spacing: -0.055em; line-height: 1; } .cv-price__price span { color: #637571; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; } .cv-price__unit { margin: 8px 0 0; color: #637571; font-size: 12px; line-height: 1.5; } .cv-price__card ul { display: grid; gap: 11px; margin: 20px 0 20px; padding: 17px 0 0; border-top: 1px solid var(--price-line); list-style: none; } .cv-price__card li { position: relative; padding-inline-start: 25px; color: #314541; font-size: 14px; line-height: 1.48; } .cv-price__card li::before { position: absolute; inset-inline-start: 0; top: 0.22em; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: #fff; background: #348c83; content: "✓"; font-size: 10px; font-weight: 800; } .cv-price__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; min-height: 48px; padding: 12px 16px; border: 1px solid rgba(31, 95, 91, 0.32); border-radius: 12px; color: #164c47; background: rgba(31, 95, 91, 0.06); font-size: 14px; font-weight: 800; text-decoration: none; transition: color 180ms ease, background 180ms ease, transform 180ms ease; } .cv-price__link:hover { color: #fff; background: var(--price-teal-deep); transform: translateY(-2px); } .cv-price__link--featured { color: #fff; background: var(--price-teal-deep); } .cv-price__link--featured:hover { background: #164945; } .cv-price__link span { font-size: 20px; line-height: 1; } .cv-price__controls { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 18px; width: min(900px, 100%); margin: 22px auto 0; } .cv-price__counter { margin: 0; color: #e9f5f3; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; } .cv-price__counter span:first-child { color: #8ce0d5; font-size: 18px; } .cv-price__arrows { display: flex; gap: 8px; } .cv-price__arrow { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.46); border-radius: 50%; color: #fff; background: rgba(9, 24, 22, 0.42); cursor: pointer; font: inherit; font-size: 22px; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; } .cv-price__arrow:hover, .cv-price__arrow:focus-visible { border-color: #9ae1d8; color: #09211e; background: #9ae1d8; } .cv-price__arrow:focus-visible, .cv-price__link:focus-visible { outline: 3px solid #b2eee7; outline-offset: 3px; } .cv-price__note { justify-self: end; max-width: 470px; margin: 0; color: rgba(245, 250, 249, 0.86); font-size: 13px; line-height: 1.55; text-align: end; } @media (max-width: 1000px) { .cv-price { padding-inline: 22px; } .cv-price__viewport { min-height: 500px; } .cv-price__slide { width: 43%; min-width: 300px; transform: translateX(calc(-50% - 96%)) scale(0.86); } .cv-price__slide.is-next { transform: translateX(calc(-50% + 96%)) scale(0.86); } .cv-price__slide.is-active { transform: translateX(-50%) scale(1); } } @media (max-width: 700px) { .cv-price { padding: 52px 16px 30px; } .cv-price__intro { margin-bottom: 24px; } .cv-price__intro h2 { font-size: clamp(32px, 8.5vw, 46px); } .cv-price__intro > p:last-child { margin-top: 13px; font-size: 16px; } .cv-price__viewport { min-height: 550px; overflow: hidden; } .cv-price__slide, .cv-price__slide.is-next { top: 5px; width: min(100%, 430px); min-width: 0; height: calc(100% - 10px); opacity: 0; visibility: hidden; transform: translateX(calc(-50% + 110%)) scale(0.94); } .cv-price__slide.is-active { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); } .cv-price__card { padding: 22px; border-radius: 22px; } .cv-price__card h3 { font-size: 29px; } .cv-price__summary { min-height: unset; font-size: 15px; } .cv-price__controls { grid-template-columns: auto auto; gap: 12px; margin-top: 16px; } .cv-price__note { grid-column: 1 / -1; justify-self: start; max-width: none; text-align: start; } } @media (max-width: 380px) { .cv-price__viewport { min-height: 575px; } .cv-price__card { padding: 18px; } .cv-price__featured { font-size: 9px; letter-spacing: 0.04em; } .cv-price__card li { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .cv-price *, .cv-price *::before, .cv-price *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* CONVOKE pricing section: site typography and colors */ .cv-price { font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-price, .cv-price * { font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-price h2, .cv-price h3, .cv-price .cv-price__price, .cv-price .cv-price__number, .cv-price .cv-price__featured, .cv-price .cv-price__counter { font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); } /* Centered introduction */ .cv-price__intro h2 { color: #fff; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.12; } .cv-price__intro > p:last-child { color: rgba(255, 255, 255, 0.92); font-size: clamp(16px, 1.2vw, 18px); } /* Cards follow the active light/dark theme */ .cv-price__card { height: 100%; overflow: visible; color: var(--cv-text, #0A0D0D); background: var(--cv-surface, #fff); } .cv-price__card h3 { color: var(--cv-text, #0A0D0D); font-size: clamp(27px, 2.1vw, 32px); } .cv-price__summary, .cv-price__card li { color: var(--cv-text-muted, #5E6B68); font-size: 16px; line-height: 1.55; } .cv-price__unit { color: var(--cv-text-muted, #5E6B68); font-size: 14px; line-height: 1.5; } .cv-price__number { font-size: 13px; } .cv-price__featured { font-size: 11px; } .cv-price__link { color: var(--cv-accent, #1F5F5B); border-color: var(--cv-accent, #1F5F5B); font-size: 15px; } .cv-price__link--featured { color: var(--cv-on-accent, #fff); background: var(--cv-accent, #1F5F5B); } /* Give the full card contents room; keep scrolling outside the cards */ .cv-price__viewport { height: 680px; min-height: 0; } .cv-price__slide { height: calc(100% - 24px); } .cv-price__card { overflow: visible; } @media (max-width: 1000px) { .cv-price__viewport { height: 710px; } } @media (max-width: 700px) { .cv-price__viewport { height: 760px; } .cv-price__slide, .cv-price__slide.is-next { height: calc(100% - 10px); } .cv-price__card h3 { font-size: 29px; } .cv-price__summary, .cv-price__card li { font-size: 15px; } } @media (max-width: 380px) { .cv-price__viewport { height: 800px; } } /* Give every pricing card the same teal button */ .cv-price .cv-price__link, .cv-price .cv-price__link--featured { color: var(--cv-on-accent, #fff); border-color: var(--cv-accent, #1F5F5B); background: var(--cv-accent, #1F5F5B); } .cv-price .cv-price__link:hover, .cv-price .cv-price__link--featured:hover { color: var(--cv-on-accent, #fff); border-color: var(--cv-accent-hover, #17504C); background: var(--cv-accent-hover, #17504C); } /* ========================================================= CONVOKE — HOW WE WORK ========================================================= */ .cv-process { --process-accent: var(--cv-accent, #1F5F5B); --process-text: var(--cv-text, #0A0D0D); --process-muted: var(--cv-text-muted, #5E6B68); --process-surface: var(--cv-surface, #fff); --process-border: var(--cv-border, #DCE5E3); position: relative; overflow: hidden; padding: clamp(64px, 8vw, 112px) clamp(18px, 4vw, 64px); color: var(--process-text); background: radial-gradient(ellipse at 4% 50%, rgba(31, 95, 91, 0.08), transparent 35%), var(--cv-bg, #F3F6F5); font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-process *, .cv-process *::before, .cv-process *::after { box-sizing: border-box; } .cv-process__inner { width: min(1240px, 100%); margin-inline: auto; } .cv-process__intro { max-width: 800px; margin: 0 auto clamp(38px, 5vw, 66px); text-align: center; } .cv-process__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--process-accent); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.4; } .cv-process__eyebrow > span { width: 8px; height: 8px; border-radius: 50%; background: var(--process-accent); box-shadow: 0 0 0 5px rgba(31, 95, 91, 0.12); } .cv-process__intro h2 { margin: 0; color: var(--process-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(34px, 4.8vw, 60px); font-weight: 700; letter-spacing: -0.055em; line-height: 1.1; } .cv-process__intro h2 em { color: var(--process-accent); font-style: normal; } .cv-process__intro > p:last-child { margin: 16px 0 0; color: var(--process-muted); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; } .cv-process__layout { display: grid; grid-template-columns: minmax(300px, 0.86fr) minmax(560px, 1.5fr); align-items: center; gap: clamp(28px, 5vw, 76px); } .cv-process__feature-wrap { display: grid; place-items: center; } .cv-process__feature { position: relative; display: flex; width: min(100%, 390px); aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; padding: clamp(30px, 4vw, 52px); overflow: hidden; border: 1px solid rgba(31, 95, 91, 0.20); border-radius: 50%; color: var(--process-text); background: radial-gradient(circle at 50% 42%, var(--process-surface) 0 43%, transparent 74%), linear-gradient(145deg, rgba(31, 95, 91, 0.14), rgba(31, 95, 91, 0.035)); box-shadow: 0 26px 70px rgba(13, 53, 50, 0.11), inset 0 0 0 12px rgba(31, 95, 91, 0.035); text-align: center; transition: background 250ms ease, border-color 250ms ease; } .cv-process__feature-orbit { position: absolute; inset: 11px; border: 1px dashed rgba(31, 95, 91, 0.32); border-radius: 50%; pointer-events: none; animation: cvProcessOrbit 34s linear infinite; } @keyframes cvProcessOrbit { to { transform: rotate(360deg); } } .cv-process__feature-icon { display: grid; width: 62px; height: 62px; margin-bottom: 17px; place-items: center; border: 1px solid rgba(31, 95, 91, 0.18); border-radius: 20px; color: var(--process-accent); background: rgba(31, 95, 91, 0.10); } .cv-process__feature-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .cv-process__feature-kicker { color: var(--process-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.13em; } .cv-process__feature h3 { max-width: 260px; margin: 13px 0 9px; color: var(--process-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(24px, 2.4vw, 31px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.18; } .cv-process__feature > p { max-width: 270px; margin: 0; color: var(--process-muted); font-size: 15px; line-height: 1.65; } .cv-process__feature-foot { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--process-text); font-size: 12px; font-weight: 700; } .cv-process__pulse { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--process-accent); box-shadow: 0 0 0 5px rgba(31, 95, 91, 0.12); } .cv-process__steps { position: relative; display: grid; min-height: 470px; grid-template-rows: repeat(5, minmax(86px, 1fr)); align-items: stretch; } .cv-process__orbit { position: absolute; z-index: 0; inset-block: 0; inset-inline-start: 0; width: 120px; height: 100%; overflow: visible; pointer-events: none; } .cv-process__orbit path { fill: none; stroke: rgba(31, 95, 91, 0.30); stroke-width: 1.5; stroke-dasharray: 4 7; } .cv-process__step { position: relative; z-index: 1; display: grid; min-width: 0; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; } .cv-process__node { position: relative; display: grid; width: 54px; height: 54px; justify-self: center; place-items: center; border: 1px solid var(--process-border); border-radius: 50%; color: var(--process-accent); background: var(--process-surface); box-shadow: 0 8px 22px rgba(10, 40, 37, 0.10); cursor: pointer; transition: width 250ms ease, height 250ms ease, color 250ms ease, background 250ms ease, border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease; } .cv-process__node svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .cv-process__step:nth-of-type(2) .cv-process__node { transform: translateX(-20px); } .cv-process__step:nth-of-type(3) .cv-process__node { transform: translateX(-34px); } .cv-process__step:nth-of-type(4) .cv-process__node { transform: translateX(-34px); } .cv-process__step:nth-of-type(5) .cv-process__node { transform: translateX(-20px); } .cv-process__step.is-active .cv-process__node { width: 62px; height: 62px; border-color: var(--process-accent); color: #fff; background: var(--process-accent); box-shadow: 0 0 0 8px rgba(31, 95, 91, 0.13), 0 14px 28px rgba(10, 40, 37, 0.18); transform: translateX(0) scale(1.02); } .cv-process__step:nth-of-type(2).is-active .cv-process__node, .cv-process__step:nth-of-type(5).is-active .cv-process__node { transform: translateX(-20px) scale(1.02); } .cv-process__step:nth-of-type(3).is-active .cv-process__node, .cv-process__step:nth-of-type(4).is-active .cv-process__node { transform: translateX(-34px) scale(1.02); } .cv-process__node:focus-visible { outline: 3px solid rgba(31, 95, 91, 0.45); outline-offset: 5px; } .cv-process__step-copy { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--process-border); transition: opacity 220ms ease, transform 220ms ease; } .cv-process__step:last-child .cv-process__step-copy { border-bottom: 0; } .cv-process__step-label { display: flex; align-items: center; gap: 9px; margin: 0 0 5px; color: var(--process-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; } .cv-process__step-label span { color: var(--process-muted); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 14px; letter-spacing: 0.04em; } .cv-process__step-copy h3 { margin: 0; color: var(--process-text); font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(18px, 1.55vw, 22px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.35; } .cv-process__step-copy > p:last-child { margin: 4px 0 0; color: var(--process-muted); font-size: 15px; line-height: 1.55; } .cv-process__step:not(.is-active) .cv-process__step-copy { opacity: 0.82; } .cv-process__step.is-active .cv-process__step-copy { opacity: 1; transform: translateX(4px); } .cv-process__feature.is-changing { animation: cvProcessRefresh 420ms ease both; } @keyframes cvProcessRefresh { 0% { opacity: 0.68; transform: scale(0.975); } 100% { opacity: 1; transform: scale(1); } } @media (max-width: 1000px) { .cv-process__layout { grid-template-columns: minmax(250px, 0.8fr) minmax(470px, 1.4fr); gap: 24px; } .cv-process__feature { width: min(100%, 330px); } .cv-process__steps { min-height: 500px; grid-template-rows: repeat(5, minmax(92px, 1fr)); } .cv-process__step { grid-template-columns: 100px minmax(0, 1fr); } .cv-process__orbit { width: 100px; } .cv-process__step:nth-of-type(2) .cv-process__node, .cv-process__step:nth-of-type(5) .cv-process__node { transform: translateX(-16px); } .cv-process__step:nth-of-type(3) .cv-process__node, .cv-process__step:nth-of-type(4) .cv-process__node { transform: translateX(-27px); } } @media (max-width: 760px) { .cv-process { padding: 58px 18px 66px; } .cv-process__intro { margin-bottom: 32px; } .cv-process__layout { grid-template-columns: 1fr; gap: 34px; } .cv-process__feature { width: min(78vw, 330px); padding: 34px; } .cv-process__steps { min-height: 0; grid-template-rows: none; gap: 0; } .cv-process__orbit { inset-block: 23px 28px; inset-inline-start: 26px; width: 1px; height: auto; } .cv-process__orbit path { display: none; } .cv-process__orbit::after { position: absolute; inset: 0; border-inline-start: 1px dashed rgba(31, 95, 91, 0.38); content: ""; } .cv-process__step, .cv-process__step:nth-of-type(n) { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; min-height: 112px; } .cv-process__node, .cv-process__step:nth-of-type(n) .cv-process__node, .cv-process__step.is-active .cv-process__node, .cv-process__step:nth-of-type(n).is-active .cv-process__node { width: 48px; height: 48px; transform: none; } .cv-process__step.is-active .cv-process__node { width: 54px; height: 54px; } .cv-process__step-copy { padding: 16px 0; } .cv-process__step-copy h3 { font-size: 19px; } .cv-process__step-copy > p:last-child { font-size: 15px; } .cv-process__step.is-active .cv-process__step-copy { transform: none; } } @media (max-width: 380px) { .cv-process { padding-inline: 14px; } .cv-process__feature { width: min(86vw, 310px); padding: 29px; } .cv-process__feature h3 { font-size: 23px; } .cv-process__feature > p { font-size: 14px; } .cv-process__step, .cv-process__step:nth-of-type(n) { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; } } @media (prefers-reduced-motion: reduce) { .cv-process *, .cv-process *::before, .cv-process *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Reverse the orbit curve and center each icon on its crossing point */ @media (min-width: 761px) { .cv-process__steps { --process-orbit-width: 140px; } .cv-process__orbit { width: var(--process-orbit-width); } .cv-process__step { grid-template-columns: var(--process-orbit-width) minmax(0, 1fr); } /* The SVG's viewBox is 120px wide, so scale the path with its track. */ .cv-process__orbit path { vector-effect: non-scaling-stroke; } .cv-process__step:nth-of-type(1) .cv-process__node { transform: translateX(-50px); } .cv-process__step:nth-of-type(2) .cv-process__node { transform: translateX(20px); } .cv-process__step:nth-of-type(3) .cv-process__node { transform: translateX(30px); } .cv-process__step:nth-of-type(4) .cv-process__node { transform: translateX(20px); } .cv-process__step:nth-of-type(5) .cv-process__node { transform: translateX(-50px); } .cv-process__step:nth-of-type(1).is-active .cv-process__node { transform: translateX(-50px) scale(1.02); } .cv-process__step:nth-of-type(2).is-active .cv-process__node { transform: translateX(20px) scale(1.02); } .cv-process__step:nth-of-type(3).is-active .cv-process__node { transform: translateX(30px) scale(1.02); } .cv-process__step:nth-of-type(4).is-active .cv-process__node { transform: translateX(20px) scale(1.02); } .cv-process__step:nth-of-type(5).is-active .cv-process__node { transform: translateX(-50px) scale(1.02); } } /* Keep a straight, centered connector on mobile */ @media (max-width: 760px) { .cv-process__steps::before { position: absolute; z-index: 0; inset-block: 24px 28px; inset-inline-start: 26px; border-inline-start: 1px dashed rgba(31, 95, 91, 0.38); content: ""; } .cv-process__orbit { display: none; } .cv-process__step:nth-of-type(n) .cv-process__node, .cv-process__step:nth-of-type(n).is-active .cv-process__node { transform: none; } } /* Remove the connector and space the icons away from the step descriptions */ .cv-process__orbit, .cv-process__steps::before { display: none !important; } .cv-process__step { grid-template-columns: 120px minmax(0, 1fr); gap: 28px; } @media (max-width: 1000px) { .cv-process__step { grid-template-columns: 100px minmax(0, 1fr); gap: 24px; } } @media (max-width: 760px) { .cv-process__step, .cv-process__step:nth-of-type(n) { grid-template-columns: 54px minmax(0, 1fr); gap: 18px; } } /* CONVOKE — SERVICES CTA */ .cv-services-cta { --services-cta-teal: #1F5F5B; --services-cta-white: #fff; position: relative; display: grid; min-height: 390px; place-items: center; overflow: hidden; padding: clamp(58px, 7vw, 92px) clamp(18px, 4vw, 60px); color: var(--services-cta-white); background: var(--services-cta-teal); text-align: center; font-family: var(--cv-body-font, "Manrope", sans-serif); } .cv-services-cta *, .cv-services-cta *::before, .cv-services-cta *::after { box-sizing: border-box; } .cv-services-cta::before, .cv-services-cta::after { position: absolute; width: clamp(260px, 40vw, 560px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; content: ""; pointer-events: none; } .cv-services-cta::before { top: -72%; inset-inline-start: -13%; } .cv-services-cta::after { right: -12%; bottom: -78%; } .cv-services-cta__inner { position: relative; z-index: 1; width: min(900px, 100%); margin-inline: auto; } .cv-services-cta__eyebrow { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0 0 18px; color: rgba(255, 255, 255, 0.88); font-size: 13px; font-weight: 800; letter-spacing: 0.13em; line-height: 1.5; } .cv-services-cta__eyebrow span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #a5e5dc; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12); } .cv-services-cta h2 { margin: 0; color: #fff; font-family: var(--cv-heading-font, "Plus Jakarta Sans", sans-serif); font-size: clamp(36px, 5vw, 60px); font-weight: 700; letter-spacing: -0.055em; line-height: 1.12; } .cv-services-cta h2 em { color: #a8e5dc; font-style: normal; } .cv-services-cta__description { max-width: 690px; margin: 20px auto 0; color: rgba(255, 255, 255, 0.92); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.7; } .cv-services-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 13px; margin-top: 30px; } .cv-services-cta__button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 14px; padding: 12px 21px; border: 1px solid #fff; border-radius: var(--cv-radius-md, 10px); font-family: var(--cv-body-font, "Manrope", sans-serif); font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; } .cv-services-cta__button span { font-size: 19px; line-height: 1; } .cv-services-cta__button--primary { border-color: #fff; color: var(--services-cta-teal); background: #fff; } .cv-services-cta__button--secondary { color: #fff; background: transparent; } .cv-services-cta__button:hover { transform: translateY(-2px); } .cv-services-cta__button--primary:hover { border-color: #e5f4f1; background: #e5f4f1; } .cv-services-cta__button--secondary:hover { color: var(--services-cta-teal); background: #fff; } .cv-services-cta__button:focus-visible { outline: 3px solid #c9f2ec; outline-offset: 4px; } .cv-services-cta__footnote { margin: 25px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 14px; line-height: 1.6; } .cv-services-cta__inner.is-visible { animation: cvServicesCtaEnter 650ms cubic-bezier(0.2, 0.75, 0.25, 1) both; } @keyframes cvServicesCtaEnter { from { opacity: 0.45; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .cv-services-cta { min-height: 0; padding: 54px 18px; } .cv-services-cta__eyebrow { font-size: 12px; } .cv-services-cta h2 { font-size: clamp(32px, 9vw, 44px); } .cv-services-cta__description { margin-top: 16px; font-size: 16px; } .cv-services-cta__actions { width: min(100%, 360px); margin: 24px auto 0; } .cv-services-cta__button { width: 100%; min-height: 50px; } .cv-services-cta__footnote { margin-top: 20px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .cv-services-cta *, .cv-services-cta *::before, .cv-services-cta *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Services footer — same surface and typography as the About page fix */ body:has(#servicesHero) .cv-footer { --black: #103E3B; --text: #F4F7F6; --accent: #63AAA4; --accent-hover: #7AC4BC; --on-accent: #08201E; background: #103E3B; color: #F4F7F6; } body:has(#servicesHero) .cv-footer__brand-name { font-family: var(--cv-heading-font); font-size: clamp(22px, 1.7vw, 26px); } body:has(#servicesHero) .cv-footer__description, body:has(#servicesHero) .cv-footer__links a, body:has(#servicesHero) .cv-footer__contact-text span, body:has(#servicesHero) .cv-footer__newsletter-text { font-family: var(--cv-body-font); font-size: clamp(13px, 1vw, 14px); line-height: 1.7; } body:has(#servicesHero) .cv-footer__eyebrow, body:has(#servicesHero) .cv-footer__newsletter-label { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.45; } body:has(#servicesHero) .cv-footer__heading { font-family: var(--cv-heading-font); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.3; } body:has(#servicesHero) .cv-footer__contact-text strong { font-family: var(--cv-body-font); font-size: 13px; line-height: 1.45; } body:has(#servicesHero) .cv-footer__newsletter-form input { font-family: var(--cv-body-font); font-size: 13px; } body:has(#servicesHero) .cv-footer__copyright, body:has(#servicesHero) .cv-footer__bottom-links, body:has(#servicesHero) .cv-footer__location { font-family: var(--cv-body-font); font-size: 11px; line-height: 1.6; } body:has(#servicesHero) .cv-footer__copyright, body:has(#servicesHero) .cv-footer__location { color: rgba(244, 247, 246, 0.74); } body:has(#servicesHero) .cv-footer__bottom-links a { color: rgba(244, 247, 246, 0.78); } @media (max-width: 767px) { body:has(#servicesHero) .cv-footer__description, body:has(#servicesHero) .cv-footer__links a, body:has(#servicesHero) .cv-footer__contact-text span, body:has(#servicesHero) .cv-footer__newsletter-text { font-size: 13px; } body:has(#servicesHero) .cv-footer__heading { font-size: 19px; } body:has(#servicesHero) .cv-footer__bottom { row-gap: 12px; } } @media (max-width: 479px) { body:has(#servicesHero) .cv-footer__eyebrow, body:has(#servicesHero) .cv-footer__newsletter-label { font-size: 10px; } body:has(#servicesHero) .cv-footer__copyright, body:has(#servicesHero) .cv-footer__bottom-links, body:has(#servicesHero) .cv-footer__location { font-size: 10px; } } /* ========================================================= CONVOKE USER DASHBOARD — styles.css (append) ========================================================= */ .cv-ud-page{--ud-nav:82px;--ud-ok:#1F5F5B;--ud-warn:#8A5A00;--ud-bad:#B3261E;--ud-info:#2F5FA8;margin:0;background:var(--cv-bg);color:var(--cv-text);font:500 18px/1.65 var(--cv-body-font)} .cv-ud-page *,.cv-ud-page *::before,.cv-ud-page *::after{box-sizing:border-box} .cv-ud-page.cv-ud-lock{overflow:hidden} .cv-ud-skip{position:absolute;inset-inline-start:12px;top:-70px;z-index:120;padding:10px 16px;border-radius:var(--cv-radius-sm);background:var(--cv-accent);color:var(--cv-on-accent)} .cv-ud-skip:focus{top:12px} /* Navbar */ .cv-ud-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--ud-nav);padding-inline:var(--cv-navbar-padding,24px);background:var(--cv-surface);border-block-end:1px solid var(--cv-border)} .cv-ud-brand{display:inline-flex;align-items:center;gap:12px;color:var(--cv-text);text-decoration:none;font:700 24px/1 var(--cv-heading-font);letter-spacing:.02em} .cv-ud-brand--side{margin-block-end:24px} .cv-ud-logo{width:42px;height:42px;flex:none} .cv-ud-logo--dark{display:none} .cv-ud-actions{display:flex;align-items:center;gap:12px;margin-inline-start:auto} .cv-ud-icon{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--cv-border);border-radius:var(--cv-radius-sm);background:var(--cv-surface);color:var(--cv-text);font-size:19px;cursor:pointer;transition:background 180ms ease,border-color 180ms ease} .cv-ud-icon:hover{background:var(--cv-accent-soft);border-color:var(--cv-accent)} .cv-ud-sun{display:none} .cv-ud-logout{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding-inline:20px;border-radius:var(--cv-radius-sm);background:var(--cv-accent);color:var(--cv-on-accent);font:700 17px/1 var(--cv-body-font);text-decoration:none;transition:background 180ms ease} .cv-ud-logout:hover{background:var(--cv-accent-hover)} .cv-ud-logout--block{width:100%;min-height:52px;font-size:18px} .cv-ud-icon:focus-visible,.cv-ud-logout:focus-visible,.cv-ud-topic:focus-visible,.cv-ud-btn:focus-visible,.cv-ud-link:focus-visible,.cv-ud-chip:focus-visible,.cv-ud-brand:focus-visible{outline:2px solid var(--cv-accent);outline-offset:3px} /* Shell + sidebar */ .cv-ud-shell{display:grid;grid-template-columns:minmax(0,1fr)} .cv-ud-side{display:none;position:sticky;top:var(--ud-nav);height:calc(100vh - var(--ud-nav));height:calc(100dvh - var(--ud-nav));overflow-y:auto;overscroll-behavior:contain;padding:24px 18px;background:var(--cv-surface);border-inline-end:1px solid var(--cv-border);scrollbar-width:thin;scrollbar-color:var(--cv-accent-soft) transparent} .cv-ud-profile{display:flex;align-items:center;gap:14px;margin-block-end:22px;padding:16px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-lg);background:var(--cv-bg)} .cv-ud-profile img{flex:none;width:72px;height:72px;border:3px solid var(--cv-accent-soft);border-radius:50%;object-fit:cover;object-position:50% 22%} .cv-ud-profile div{min-width:0} .cv-ud-profile strong{display:block;font:700 20px/1.25 var(--cv-heading-font)} .cv-ud-profile small{display:block;color:var(--cv-text-muted);font-size:15px;line-height:1.45} .cv-ud-badge{display:inline-block;margin-block-start:8px;padding:3px 12px;border-radius:99px;background:var(--cv-accent-soft);color:var(--cv-accent);font-size:14px;font-weight:700} .cv-ud-topics{display:grid;gap:6px} .cv-ud-topic{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:12px 16px;border:0;border-radius:var(--cv-radius-md);background:transparent;color:var(--cv-text);font:600 18px/1.3 var(--cv-body-font);text-align:start;cursor:pointer;transition:background 180ms ease,color 180ms ease} .cv-ud-topic i{flex:none;width:24px;text-align:center;color:var(--cv-text-muted)} .cv-ud-topic:hover{background:var(--cv-accent-soft)} .cv-ud-topic.is-active{background:var(--cv-accent-soft);color:var(--cv-accent);font-weight:800} .cv-ud-topic.is-active i{color:var(--cv-accent)} /* Mobile menu */ .cv-ud-menu{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;height:100dvh;background:var(--cv-surface);overscroll-behavior:contain} .cv-ud-menu[hidden]{display:none} .cv-ud-menuh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--ud-nav);padding-inline:16px;border-block-end:1px solid var(--cv-border)} .cv-ud-menub{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px} .cv-ud-menuf{flex:none;padding:16px;border-block-start:1px solid var(--cv-border);background:var(--cv-surface)} /* Main */ .cv-ud-main{min-width:0;padding:clamp(18px,3vw,48px);outline:none} .cv-ud-panel{max-width:1240px;margin-inline:auto;animation:cvUdIn .35s ease both} .cv-ud-panel[hidden]{display:none} @keyframes cvUdIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .cv-ud-head{margin-block-end:28px} .cv-ud-head h1,.cv-ud-hero h1{margin:0 0 8px;font:600 clamp(30px,4vw,44px)/1.15 var(--cv-heading-font);letter-spacing:-.02em} .cv-ud-head p,.cv-ud-hero p{margin:0;color:var(--cv-text-muted);font-size:19px} .cv-ud-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-block-end:26px;padding:clamp(22px,3vw,36px);border:1px solid var(--cv-border);border-radius:var(--cv-radius-lg);background:var(--cv-accent-soft)} .cv-ud-hero p{color:var(--cv-text)} .cv-ud-hero b{color:var(--cv-accent)} .cv-ud-eyebrow{margin:0 0 6px;color:var(--cv-accent)!important;font-size:15px!important;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .cv-ud-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));margin-block-end:22px} .cv-ud-kpis{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-block-end:22px} .cv-ud-kpi{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-lg);background:var(--cv-surface)} .cv-ud-kpi b{display:block;font:700 28px/1.1 var(--cv-heading-font)} .cv-ud-kpi small{color:var(--cv-text-muted);font-size:16px} .cv-ud-card{min-width:0;padding:24px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-lg);background:var(--cv-surface);box-shadow:0 1px 2px rgba(10,13,13,.04)} .cv-ud-card h2{margin:0 0 12px;font:600 22px/1.25 var(--cv-heading-font)} .cv-ud-card p{margin:0 0 16px;color:var(--cv-text-muted)} .cv-ud-cardh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:8px} .cv-ud-cardh h2{margin:0} .cv-ud-link{display:inline-flex;align-items:center;gap:8px;padding:6px 0;border:0;background:none;color:var(--cv-accent);font:700 16px/1.2 var(--cv-body-font);white-space:nowrap;cursor:pointer} .cv-ud-link:hover{color:var(--cv-accent-hover);text-decoration:underline} .cv-ud-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 26px;border:2px solid var(--cv-accent);border-radius:var(--cv-radius-md);background:var(--cv-accent);color:var(--cv-on-accent);font:700 18px/1.2 var(--cv-body-font);cursor:pointer;transition:background 180ms ease} .cv-ud-btn:hover{background:var(--cv-accent-hover)} .cv-ud-btn--ghost{background:transparent;color:var(--cv-accent)} .cv-ud-btn--ghost:hover{background:var(--cv-accent-soft)} /* Lists */ .cv-ud-list{margin:0;padding:0;list-style:none} .cv-ud-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 0;border-block-start:1px solid var(--cv-border)} .cv-ud-row:first-child{border-block-start:0} .cv-ud-ico{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--cv-accent-soft);color:var(--cv-accent);font-size:19px} .cv-ud-rowtxt{flex:1;min-width:150px} .cv-ud-rowtxt strong{display:block;font-size:18px;line-height:1.35} .cv-ud-rowtxt small{display:block;color:var(--cv-text-muted);font-size:16px;line-height:1.5} .cv-ud-num{white-space:nowrap} .cv-ud-pill{--c:var(--cv-text-muted);flex:none;display:inline-block;padding:4px 14px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:99px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-size:15px;font-weight:800;white-space:nowrap} .cv-ud-pill--ok{--c:var(--ud-ok)}.cv-ud-pill--pend{--c:var(--ud-warn)}.cv-ud-pill--neg{--c:var(--ud-info)}.cv-ud-pill--bad{--c:var(--ud-bad)} .cv-ud-get{flex:none;width:44px;height:44px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-sm);background:var(--cv-surface);color:var(--cv-accent);cursor:pointer} .cv-ud-get:hover{background:var(--cv-accent-soft)} .cv-ud-track{flex-basis:100%;height:10px;margin-block-start:8px;border-radius:99px;background:var(--cv-border);overflow:hidden} .cv-ud-track i{display:block;height:100%;border-radius:99px;background:var(--cv-accent)} .cv-ud-bar{margin-block-end:16px} .cv-ud-barh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-weight:700} .cv-ud-barh .cv-ud-num{color:var(--cv-text-muted);font-weight:600;font-size:16px} .cv-ud-chips{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:20px} .cv-ud-chip{min-height:44px;padding:8px 20px;border:1px solid var(--cv-border);border-radius:99px;background:var(--cv-surface);color:var(--cv-text);font:700 16px/1.2 var(--cv-body-font);cursor:pointer} .cv-ud-chip[aria-pressed="true"]{border-color:var(--cv-accent);background:var(--cv-accent);color:var(--cv-on-accent)} /* Budget donut + timeline */ .cv-ud-bud{display:flex;align-items:center;gap:20px;margin-block-end:20px} .cv-ud-bud b{display:block;font:700 26px/1.2 var(--cv-heading-font)} .cv-ud-bud small{color:var(--cv-text-muted);font-size:16px} .cv-ud-donut{--p:0;position:relative;flex:none;display:grid;place-content:center;width:132px;aspect-ratio:1;border-radius:50%;text-align:center;background:conic-gradient(var(--cv-accent) calc(var(--p)*1%),var(--cv-border) 0)} .cv-ud-donut::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--cv-surface)} .cv-ud-donut b,.cv-ud-donut small{position:relative} .cv-ud-donut b{font:700 28px/1 var(--cv-heading-font)} .cv-ud-tl{margin:0;padding:0;list-style:none} .cv-ud-tl li{position:relative;padding-block-end:22px;padding-inline-start:34px} .cv-ud-tl li:last-child{padding-block-end:0} .cv-ud-tl li::before{content:"";position:absolute;inset-inline-start:8px;top:10px;bottom:-8px;width:2px;background:var(--cv-border)} .cv-ud-tl li:last-child::before{display:none} .cv-ud-tl li::after{content:"";position:absolute;inset-inline-start:0;top:5px;width:18px;height:18px;border:3px solid var(--cv-accent);border-radius:50%;background:var(--cv-surface)} .cv-ud-tl li.is-done::after{background:var(--cv-accent)} .cv-ud-tl strong{display:block;line-height:1.4} .cv-ud-tl small{color:var(--cv-text-muted);font-size:16px} /* Forms + settings */ .cv-ud-fgrid{display:grid;gap:18px 22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-block-end:18px} .cv-ud-field{margin-block-end:4px} .cv-ud-field label,.cv-ud-checks legend{display:block;margin-block-end:8px;font-weight:700} .cv-ud-field input,.cv-ud-field select,.cv-ud-field textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-md);background:var(--cv-bg);color:var(--cv-text);font:500 18px/1.4 var(--cv-body-font)} .cv-ud-field textarea{resize:vertical} .cv-ud-field input:focus,.cv-ud-field select:focus,.cv-ud-field textarea:focus{outline:2px solid var(--cv-accent);outline-offset:1px;border-color:var(--cv-accent)} .cv-ud-field [aria-invalid="true"]{border-color:var(--ud-bad)} .cv-ud-err{min-height:0;margin:6px 0 0!important;color:var(--ud-bad)!important;font-size:16px;font-weight:700} .cv-ud-checks{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px;padding:0;border:0} .cv-ud-chk{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 18px;border:1px solid var(--cv-border);border-radius:99px;background:var(--cv-bg);cursor:pointer} .cv-ud-chk input{width:22px;height:22px;margin:0;accent-color:var(--cv-accent)} .cv-ud-fact{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-block-start:18px} .cv-ud-ok{margin:0!important;color:var(--ud-ok)!important;font-weight:800} .cv-ud-ok[hidden]{display:none} .cv-ud-sw{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-block-start:1px solid var(--cv-border)} .cv-ud-sw input{position:relative;flex:none;width:54px;height:30px;margin:0;border-radius:99px;background:var(--cv-border);appearance:none;cursor:pointer;transition:background 180ms ease} .cv-ud-sw input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:var(--cv-text-muted);transition:inset-inline-start 180ms ease} .cv-ud-sw input:checked{background:var(--cv-accent)} .cv-ud-sw input:checked::after{inset-inline-start:27px;background:var(--cv-on-accent)} .cv-ud-sw input:focus-visible{outline:2px solid var(--cv-accent);outline-offset:3px} .cv-ud-info div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 0;border-block-start:1px solid var(--cv-border)} .cv-ud-info dt{color:var(--cv-text-muted)} .cv-ud-info dd{margin:0;font-weight:700} .cv-ud-info{margin:0} /* Responsive */ @media (min-width:1024px){ .cv-ud-shell{grid-template-columns:320px minmax(0,1fr);align-items:start} .cv-ud-side{display:block;padding:28px 22px} .cv-ud-burger,.cv-ud-menu{display:none!important} } @media (max-width:1023px){ .cv-ud-page{--ud-nav:72px} .cv-ud-logout--nav{display:none} .cv-ud-hero .cv-ud-btn{width:100%} } @media (min-width:600px) and (max-width:1023px){ .cv-ud-menub>*{max-width:560px;margin-inline:auto} .cv-ud-menuf{display:flex;justify-content:center} .cv-ud-menuf .cv-ud-logout{width:100%;max-width:560px;margin-inline:auto} } @media (max-width:479px){ .cv-ud-nav{padding-inline:14px;gap:8px} .cv-ud-actions{gap:8px} .cv-ud-icon{width:40px;height:40px} .cv-ud-brand{gap:10px;font-size:19px} .cv-ud-logo{width:36px;height:36px} .cv-ud-card{padding:20px 16px} .cv-ud-bud{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){.cv-ud-panel{animation:none}.cv-ud-page *{transition:none!important}} /* ========================================================= CONVOKE ADMIN DASHBOARD — styles.css (append) ========================================================= */ .cv-ad-page{--ad-nav:82px;--ad-ok:#1F5F5B;--ad-warn:#8A5A00;--ad-bad:#B3261E;--ad-info:#2F5FA8;margin:0;background:var(--cv-bg);color:var(--cv-text);font:500 18px/1.65 var(--cv-body-font)} .cv-ad-page *,.cv-ad-page *::before,.cv-ad-page *::after{box-sizing:border-box} .cv-ad-page.cv-ad-lock{overflow:hidden} .cv-ad-skip{position:absolute;inset-inline-start:12px;top:-70px;z-index:130;padding:10px 16px;border-radius:var(--cv-radius-sm);background:var(--cv-accent);color:var(--cv-on-accent)} .cv-ad-skip:focus{top:12px} /* Navbar */ .cv-ad-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--ad-nav);padding-inline:var(--cv-navbar-padding,24px);background:var(--cv-surface);border-block-end:1px solid var(--cv-border)} .cv-ad-brand{display:inline-flex;align-items:center;gap:12px;color:var(--cv-text);text-decoration:none;font:700 24px/1 var(--cv-heading-font);letter-spacing:.02em} .cv-ad-brand--side{margin-block-end:24px} .cv-ad-logo{width:42px;height:42px;flex:none} .cv-ad-logo--dark{display:none} .cv-ad-actions{display:flex;align-items:center;gap:12px;margin-inline-start:auto} .cv-ad-icon{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--cv-border);border-radius:var(--cv-radius-sm);background:var(--cv-surface);color:var(--cv-text);font-size:19px;cursor:pointer;transition:background 180ms ease,border-color 180ms ease} .cv-ad-icon:hover{background:var(--cv-accent-soft);border-color:var(--cv-accent)} .cv-ad-sun{display:none} .cv-ad-logout{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding-inline:20px;border-radius:var(--cv-radius-sm);background:var(--cv-accent);color:var(--cv-on-accent);font:700 17px/1 var(--cv-body-font);text-decoration:none;transition:background 180ms ease} .cv-ad-logout:hover{background:var(--cv-accent-hover)} .cv-ad-logout--block{width:100%;min-height:52px;font-size:18px} .cv-ad-icon:focus-visible,.cv-ad-logout:focus-visible,.cv-ad-topic:focus-visible,.cv-ad-btn:focus-visible,.cv-ad-link:focus-visible,.cv-ad-chip:focus-visible,.cv-ad-act:focus-visible,.cv-ad-brand:focus-visible{outline:2px solid var(--cv-accent);outline-offset:3px} /* Shell + sidebar */ .cv-ad-shell{display:grid;grid-template-columns:minmax(0,1fr)} .cv-ad-side{display:none;position:sticky;top:var(--ad-nav);height:calc(100vh - var(--ad-nav));height:calc(100dvh - var(--ad-nav));overflow-y:auto;overscroll-behavior:contain;padding:24px 18px;background:var(--cv-surface);border-inline-end:1px solid var(--cv-border);scrollbar-width:thin;scrollbar-color:var(--cv-accent-soft) transparent} .cv-ad-profile{display:flex;align-items:center;gap:14px;margin-block-end:22px;padding:16px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-lg);background:var(--cv-bg)} .cv-ad-profile img{flex:none;width:72px;height:72px;border:3px solid var(--cv-accent-soft);border-radius:50%;object-fit:cover;object-position:50% 18%} .cv-ad-profile div{min-width:0} .cv-ad-profile strong{display:block;font:700 20px/1.25 var(--cv-heading-font)} .cv-ad-profile small{display:block;color:var(--cv-text-muted);font-size:15px;line-height:1.45} .cv-ad-badge{display:inline-block;margin-block-start:8px;padding:3px 12px;border-radius:99px;background:var(--cv-accent-soft);color:var(--cv-accent);font-size:14px;font-weight:700} .cv-ad-topics{display:grid;gap:6px} .cv-ad-topic{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:12px 16px;border:0;border-radius:var(--cv-radius-md);background:transparent;color:var(--cv-text);font:600 18px/1.3 var(--cv-body-font);text-align:start;cursor:pointer;transition:background 180ms ease,color 180ms ease} .cv-ad-topic i{flex:none;width:24px;text-align:center;color:var(--cv-text-muted)} .cv-ad-topic:hover{background:var(--cv-accent-soft)} .cv-ad-topic.is-active{background:var(--cv-accent-soft);color:var(--cv-accent);font-weight:800} .cv-ad-topic.is-active i{color:var(--cv-accent)} /* Menu overlay */ .cv-ad-menu{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;height:100dvh;background:var(--cv-surface);overscroll-behavior:contain} .cv-ad-menu[hidden]{display:none} .cv-ad-menuh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--ad-nav);padding-inline:16px;border-block-end:1px solid var(--cv-border)} .cv-ad-menub{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px} .cv-ad-menuf{flex:none;padding:16px;border-block-start:1px solid var(--cv-border);background:var(--cv-surface)} /* Main */ .cv-ad-main{min-width:0;padding:clamp(18px,3vw,48px);outline:none} .cv-ad-panel{max-width:1240px;margin-inline:auto;animation:cvAdIn .35s ease both} .cv-ad-panel[hidden]{display:none} @keyframes cvAdIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .cv-ad-head{margin-block-end:28px} .cv-ad-head h1,.cv-ad-hero h1{margin:0 0 8px;font:600 clamp(30px,4vw,44px)/1.15 var(--cv-heading-font);letter-spacing:-.02em} .cv-ad-head p,.cv-ad-hero p{margin:0;color:var(--cv-text-muted);font-size:19px} .cv-ad-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-block-end:26px;padding:clamp(22px,3vw,36px);border:1px solid var(--cv-border);border-radius:var(--cv-radius-lg);background:var(--cv-accent-soft)} .cv-ad-hero p{color:var(--cv-text)} .cv-ad-hero b{color:var(--cv-accent)} .cv-ad-eyebrow{margin:0 0 6px;color:var(--cv-accent)!important;font-size:15px!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase} .cv-ad-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));margin-block-end:22px} .cv-ad-kpis{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-block-end:22px} .cv-ad-kpi{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-lg);background:var(--cv-surface)} .cv-ad-kpi b{display:block;font:700 28px/1.1 var(--cv-heading-font)} .cv-ad-kpi small{color:var(--cv-text-muted);font-size:16px} .cv-ad-card{min-width:0;padding:24px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-lg);background:var(--cv-surface);box-shadow:0 1px 2px rgba(10,13,13,.04)} .cv-ad-card h2{margin:0 0 12px;font:600 22px/1.25 var(--cv-heading-font)} .cv-ad-card p{margin:0 0 16px;color:var(--cv-text-muted)} .cv-ad-cardh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:8px} .cv-ad-cardh h2{margin:0} .cv-ad-link{display:inline-flex;align-items:center;gap:8px;padding:6px 0;border:0;background:none;color:var(--cv-accent);font:700 16px/1.2 var(--cv-body-font);white-space:nowrap;cursor:pointer} .cv-ad-link:hover{color:var(--cv-accent-hover);text-decoration:underline} .cv-ad-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 26px;border:2px solid var(--cv-accent);border-radius:var(--cv-radius-md);background:var(--cv-accent);color:var(--cv-on-accent);font:700 18px/1.2 var(--cv-body-font);cursor:pointer;transition:background 180ms ease} .cv-ad-btn:hover{background:var(--cv-accent-hover)} /* Lists, pills, bars */ .cv-ad-list{margin:0;padding:0;list-style:none} .cv-ad-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 0;border-block-start:1px solid var(--cv-border)} .cv-ad-row:first-child{border-block-start:0} .cv-ad-ico{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--cv-accent-soft);color:var(--cv-accent);font-size:19px} .cv-ad-rowtxt{flex:1;min-width:150px} .cv-ad-rowtxt strong{display:block;font-size:18px;line-height:1.35} .cv-ad-rowtxt small{display:block;color:var(--cv-text-muted);font-size:16px;line-height:1.5} .cv-ad-num{white-space:nowrap} .cv-ad-pill{--c:var(--cv-text-muted);flex:none;display:inline-block;padding:4px 14px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:99px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-size:15px;font-weight:800;white-space:nowrap} .cv-ad-pill--ok{--c:var(--ad-ok)}.cv-ad-pill--pend{--c:var(--ad-warn)}.cv-ad-pill--neg{--c:var(--ad-info)}.cv-ad-pill--bad{--c:var(--ad-bad)} .cv-ad-track{flex-basis:100%;height:10px;margin-block-start:8px;border-radius:99px;background:var(--cv-border);overflow:hidden} .cv-ad-track i{display:block;height:100%;border-radius:99px;background:var(--cv-accent)} .cv-ad-bar{margin-block-end:16px} .cv-ad-barh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-weight:700} .cv-ad-barh .cv-ad-num{color:var(--cv-text-muted);font-weight:600;font-size:16px} .cv-ad-acts{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px;margin-block-start:4px} .cv-ad-act{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-sm);background:var(--cv-surface);color:var(--cv-text);font:700 16px/1.2 var(--cv-body-font);cursor:pointer;transition:background 180ms ease} .cv-ad-act:hover{background:var(--cv-accent-soft)} .cv-ad-act--ok{border-color:var(--cv-accent);background:var(--cv-accent);color:var(--cv-on-accent)} .cv-ad-act--ok:hover{background:var(--cv-accent-hover)} .cv-ad-act--bad{border-color:var(--ad-bad);color:var(--ad-bad)} .cv-ad-act--bad:hover{background:color-mix(in srgb,var(--ad-bad) 12%,transparent)} .cv-ad-empty{margin:0;padding:18px 0;color:var(--cv-text-muted)} .cv-ad-chips{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:20px} .cv-ad-chip{min-height:44px;padding:8px 20px;border:1px solid var(--cv-border);border-radius:99px;background:var(--cv-surface);color:var(--cv-text);font:700 16px/1.2 var(--cv-body-font);cursor:pointer} .cv-ad-chip[aria-pressed="true"]{border-color:var(--cv-accent);background:var(--cv-accent);color:var(--cv-on-accent)} .cv-ad-search{position:relative;margin-block-end:18px} .cv-ad-search i{position:absolute;inset-inline-start:18px;top:50%;transform:translateY(-50%);color:var(--cv-text-muted);pointer-events:none} .cv-ad-search input{width:100%;min-height:52px;padding:12px 16px;padding-inline-start:50px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-md);background:var(--cv-surface);color:var(--cv-text);font:500 18px/1.4 var(--cv-body-font)} .cv-ad-search input:focus{outline:2px solid var(--cv-accent);outline-offset:1px;border-color:var(--cv-accent)} /* Stages, chart, table */ .cv-ad-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .cv-ad-stage{padding:16px;border:1px solid var(--cv-border);border-radius:var(--cv-radius-md);background:var(--cv-bg)} .cv-ad-stage b{display:block;font:700 30px/1.1 var(--cv-heading-font);color:var(--cv-accent)} .cv-ad-stage small{color:var(--cv-text-muted);font-size:16px} .cv-ad-chart{display:flex;align-items:flex-end;gap:clamp(6px,2vw,18px);margin-block-end:14px;padding-block-start:8px} .cv-ad-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center} .cv-ad-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;height:170px;border-block-end:2px solid var(--cv-border)} .cv-ad-bars i{width:min(16px,36%);border-radius:6px 6px 0 0} .cv-ad-b1{background:var(--cv-accent)} .cv-ad-b2{background:var(--cv-text-muted)} .cv-ad-col b{font-size:15px;line-height:1.3} .cv-ad-col small{color:var(--cv-text-muted);font-size:15px} .cv-ad-legend{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--cv-text-muted);font-size:16px} .cv-ad-legend span{display:inline-flex;align-items:center;gap:8px} .cv-ad-legend i{display:inline-block;width:14px;height:14px;border-radius:4px} .cv-ad-tw{overflow-x:auto;border:1px solid var(--cv-border);border-radius:var(--cv-radius-md)} .cv-ad-tbl{width:100%;min-width:620px;border-collapse:collapse;font-size:17px} .cv-ad-tbl th,.cv-ad-tbl td{padding:14px 16px;text-align:start} .cv-ad-tbl th{background:var(--cv-bg);color:var(--cv-text-muted);font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .cv-ad-tbl td{border-block-start:1px solid var(--cv-border)} /* Settings */ .cv-ad-sw{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-block-start:1px solid var(--cv-border)} .cv-ad-sw input{position:relative;flex:none;width:54px;height:30px;margin:0;border-radius:99px;background:var(--cv-border);appearance:none;cursor:pointer;transition:background 180ms ease} .cv-ad-sw input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:var(--cv-text-muted);transition:inset-inline-start 180ms ease} .cv-ad-sw input:checked{background:var(--cv-accent)} .cv-ad-sw input:checked::after{inset-inline-start:27px;background:var(--cv-on-accent)} .cv-ad-sw input:focus-visible{outline:2px solid var(--cv-accent);outline-offset:3px} .cv-ad-info{margin:0} .cv-ad-info div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 0;border-block-start:1px solid var(--cv-border)} .cv-ad-info dt{color:var(--cv-text-muted)} .cv-ad-info dd{margin:0;font-weight:700} /* Toast */ .cv-ad-toast{position:fixed;z-index:140;inset-inline:16px;bottom:16px;max-width:440px;margin-inline:auto;padding:14px 20px;border-radius:var(--cv-radius-md);background:var(--cv-text);color:var(--cv-bg);font-weight:700;text-align:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity 180ms ease,transform 180ms ease,visibility 180ms} .cv-ad-toast.is-on{opacity:1;visibility:visible;transform:none} /* Responsive: sidebar layout from 1024px; below that = mobile layout (incl. tablet) */ @media (min-width:1024px){ .cv-ad-shell{grid-template-columns:320px minmax(0,1fr);align-items:start} .cv-ad-side{display:block;padding:28px 22px} .cv-ad-burger,.cv-ad-menu{display:none!important} } @media (max-width:1023px){ .cv-ad-page{--ad-nav:72px} .cv-ad-logout--nav{display:none} .cv-ad-hero .cv-ad-btn{width:100%} } @media (min-width:600px) and (max-width:1023px){ .cv-ad-menub>*{max-width:560px;margin-inline:auto} .cv-ad-menuf{display:flex;justify-content:center} .cv-ad-menuf .cv-ad-logout{width:100%;max-width:560px;margin-inline:auto} } @media (max-width:479px){ .cv-ad-nav{padding-inline:14px;gap:8px} .cv-ad-actions{gap:8px} .cv-ad-icon{width:40px;height:40px} .cv-ad-brand{gap:10px;font-size:19px} .cv-ad-logo{width:36px;height:36px} .cv-ad-card{padding:20px 16px} } @media (prefers-reduced-motion:reduce){.cv-ad-panel{animation:none}.cv-ad-page *{transition:none!important}} /* Current page highlight */ .cv-desktop-nav .cv-nav-link.is-active { color: var(--cv-on-accent); background: var(--cv-accent); border-radius: 999px; padding-inline: 13px; box-shadow: 0 0 0 3px var(--cv-accent-soft), 0 6px 18px rgba(31, 95, 91, 0.28); } .cv-mobile-nav .cv-mobile-link.is-active { color: var(--cv-on-accent); background: var(--cv-accent); border-bottom-color: transparent; border-radius: var(--cv-radius-md); padding-inline: 14px; box-shadow: 0 4px 14px rgba(31, 95, 91, 0.22); } .cv-dropdown-menu a.is-active, .cv-mobile-dropdown-menu a.is-active { color: var(--cv-on-accent); background: var(--cv-accent); font-weight: 700; } .cv-back-to-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 4500; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--cv-accent); color: var(--cv-on-accent); box-shadow: 0 10px 28px rgba(10, 13, 13, 0.24); cursor: pointer; transition: background-color var(--cv-transition), box-shadow var(--cv-transition), transform var(--cv-transition); } .cv-back-to-top[hidden] { display: none; } .cv-back-to-top:hover { background: var(--cv-accent-hover); box-shadow: 0 12px 30px rgba(10, 13, 13, 0.3); transform: translateY(-3px); } .cv-back-to-top:focus-visible { outline: 3px solid var(--cv-accent-soft); outline-offset: 4px; } .cv-back-to-top svg { width: 22px; height: 22px; } @media (max-width: 480px) { .cv-back-to-top { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 48px; height: 48px; } } @media (prefers-reduced-motion: reduce) { .cv-back-to-top { transition: none; } } /* Contact page section intro headings */ body:has(.cv-contact-hero) .cv-contact-story__content h2, body:has(.cv-contact-hero) .cv-contact-info__intro h2, body:has(.cv-contact-hero) .cv-location__title, body:has(.cv-contact-hero) .cv-enquiry__intro h2, body:has(.cv-contact-hero) .cv-faq__header h2, body:has(.cv-contact-hero) .cv-final-cta__title { color: #0A0D0D; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(34px, 4.4vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; } body:has(.cv-contact-hero) .cv-contact-story__content h2 span, body:has(.cv-contact-hero) .cv-contact-info__intro h2 span, body:has(.cv-contact-hero) .cv-location__title span, body:has(.cv-contact-hero) .cv-final-cta__title-line--accent { color: #1F5F5B; } body:has(.cv-contact-hero) .cv-final-cta__line--bottom { display: none; } body:has(.cv-contact-hero) .cv-contact-info, body:has(.cv-contact-hero) .cv-location { box-sizing: border-box; padding-inline: clamp(18px, 4vw, 54px); } body:has(.cv-contact-hero) .cv-contact-info__container, body:has(.cv-contact-hero) .cv-location__container { width: 100%; max-width: 1440px; } body:has(#aboutHero) .cv-principles__intro h2, body:has(#aboutHero) .cv-story__title, body:has(#aboutHero) .cv-stats__intro h2, body:has(#aboutHero) .cv-history__intro h2, body:has(#aboutHero) .cv-team__intro h2, body:has(#aboutHero) .cv-testimonials__intro h2 { color: #0A0D0D; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(34px, 4.4vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; } body:has(#aboutHero) .cv-principles__intro h2 span, body:has(#aboutHero) .cv-story__title em, body:has(#aboutHero) .cv-stats__intro h2 span, body:has(#aboutHero) .cv-history__intro h2 span, body:has(#aboutHero) .cv-team__intro h2 span, body:has(#aboutHero) .cv-testimonials__intro h2 span { color: #1F5F5B; } @media (max-width: 479px) { body:has(#aboutHero) .cv-principles { padding-block-start: calc(41px + 14vw); } } @media (min-width: 480px) and (max-width: 767px) { body:has(#aboutHero) .cv-principles { padding-block-start: calc(39px + 14vw); } } @media (min-width: 768px) and (max-width: 1327px) { body:has(#aboutHero) .cv-principles { padding-block-start: calc(48px + 9.6vw); } } @media (min-width: 1328px) { body:has(#aboutHero) .cv-principles { padding-block-start: 176.5px; } } body:has(#aboutHero) .cv-about-cta h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(34px, 4.4vw, 58px); font-weight: 500; } @media (max-width: 380px) { body:has(.cv-contact-hero) .cv-contact-info, body:has(.cv-contact-hero) .cv-location { padding-inline: 16px; } } /* Services hero mobile fix — copy first, image below, full content height */ @media (max-width: 600px) { .cv-services-hero { height: auto; min-height: 0; max-height: none; align-items: stretch; padding: clamp(30px, 8vw, 46px) 16px clamp(36px, 9vw, 52px); } .cv-services-hero__inner { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 24px; } .cv-services-hero__copy { width: 100%; max-width: 560px; min-width: 0; } .cv-services-hero__eyebrow { max-width: 100%; margin-bottom: 16px; font-size: 12px; letter-spacing: 0.08em; line-height: 1.5; } .cv-services-hero h1 { font-size: clamp(30px, 8.7vw, 42px); letter-spacing: -0.045em; line-height: 1.12; overflow-wrap: anywhere; } .cv-services-hero__copy > p { max-width: 100%; margin-top: 15px; font-size: 16px; line-height: 1.65; } .cv-services-hero__actions { align-items: flex-start; flex-direction: column; gap: 13px; margin-top: 21px; } .cv-services-hero__button, .cv-services-hero__link { max-width: 100%; font-size: 15px; line-height: 1.45; } .cv-services-hero__button { min-height: 48px; padding: 10px 17px; } /* Keep this supporting text visible on mobile */ .cv-services-hero__signature { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; font-size: 12px; letter-spacing: 0.06em; } .cv-services-hero__frame { width: min(100%, 520px); height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 3; justify-self: center; border-radius: 17px; } .cv-services-hero__caption { inset-inline: 14px; inset-block-end: 14px; grid-template-columns: auto minmax(0, 1fr); gap: 10px; } .cv-services-hero__caption-index { font-size: 12px; } .cv-services-hero__caption-copy strong { font-size: 15px; line-height: 1.4; } .cv-services-hero__caption-copy small { font-size: 13px; line-height: 1.45; } .cv-services-hero__caption-icon { display: none; } } @media (max-width: 360px) { .cv-services-hero { padding-inline: 14px; } .cv-services-hero h1 { font-size: 29px; } .cv-services-hero__signature { font-size: 11px; } .cv-services-hero__caption-copy strong { font-size: 14px; } .cv-services-hero__caption-copy small { font-size: 12px; } } /* How We Work: responsive circle and five selectable steps */ .cv-process__feature-wrap { min-width: 0; } .cv-process__feature { width: min(100%, 430px); height: auto; aspect-ratio: 1; padding: clamp(28px, 3.2vw, 42px); overflow: visible; } .cv-process__feature-icon { width: 56px; height: 56px; flex: 0 0 56px; margin-bottom: 10px; } .cv-process__feature-kicker { line-height: 1.4; } .cv-process__feature h3 { margin: 9px 0 7px; font-size: clamp(23px, 2.2vw, 29px); line-height: 1.15; overflow-wrap: anywhere; } .cv-process__feature > p { max-width: 300px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; } .cv-process__feature-foot { max-width: 100%; margin-top: 12px; font-size: 12px; line-height: 1.45; justify-content: center; } .cv-process__feature-foot > span:last-child { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 1050px) { .cv-process__layout { grid-template-columns: minmax(0, 1fr); gap: 30px; } .cv-process__feature { width: min(70vw, 400px); padding: 36px; } .cv-process__steps { width: min(100%, 760px); min-height: 0; margin-inline: auto; grid-template-rows: none; } .cv-process__step, .cv-process__step:nth-of-type(n) { min-height: 104px; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; } .cv-process__step .cv-process__node, .cv-process__step.is-active .cv-process__node, .cv-process__step:nth-of-type(n) .cv-process__node, .cv-process__step:nth-of-type(n).is-active .cv-process__node { width: 52px; height: 52px; margin-inline: 0; justify-self: center; transform: none !important; } .cv-process__step-copy h3 { font-size: 19px; } .cv-process__step-copy > p:last-child { font-size: 15px; line-height: 1.55; } } @media (max-width: 600px) { .cv-process { padding: 48px 16px 54px; } .cv-process__intro { margin-bottom: 26px; } .cv-process__feature { width: min(92vw, 360px); padding: 22px; } .cv-process__feature-icon { width: 44px; height: 44px; flex-basis: 44px; margin-bottom: 8px; border-radius: 15px; } .cv-process__feature-icon svg { width: 23px; height: 23px; } .cv-process__feature-kicker { font-size: 11px; letter-spacing: 0.1em; } .cv-process__feature h3 { margin: 8px 0 6px; font-size: clamp(20px, 6vw, 23px); line-height: 1.12; } .cv-process__feature > p { max-width: 250px; font-size: 14px; line-height: 1.4; } .cv-process__feature-foot { gap: 7px; margin-top: 9px; font-size: 11px; line-height: 1.35; } .cv-process__steps { gap: 0; } .cv-process__step, .cv-process__step:nth-of-type(n) { min-height: 0; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; } .cv-process__step-copy { padding: 15px 0; } .cv-process__step-copy h3 { font-size: 18px; line-height: 1.35; } .cv-process__step-copy > p:last-child { font-size: 14px; line-height: 1.5; } } @media (max-width: 360px) { .cv-process { padding-inline: 13px; } .cv-process__feature { width: min(94vw, 340px); padding: 19px; } .cv-process__feature > p { max-width: 245px; font-size: 13.5px; } .cv-process__feature-foot { font-size: 10.5px; } .cv-process__step, .cv-process__step:nth-of-type(n) { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; } .cv-process__step .cv-process__node, .cv-process__step.is-active .cv-process__node, .cv-process__step:nth-of-type(n) .cv-process__node, .cv-process__step:nth-of-type(n).is-active .cv-process__node { width: 46px; height: 46px; } } /* Center the active-step footer text inside the circle on mobile-S */ @media (max-width: 360px) { .cv-process__feature-foot { position: relative; display: block; width: 100%; max-width: 220px; margin: 9px auto 0; padding-inline: 10px; text-align: center; } .cv-process__feature-foot .cv-process__pulse { position: absolute; inset-inline-start: 0; top: 0.4em; } .cv-process__feature-foot > span:last-child { display: block; width: 100%; text-align: center; overflow-wrap: anywhere; } } @media (max-width: 360px) { .cv-process__feature-foot .cv-process__pulse { display: none; } } @media (max-width: 767px) { .cv-ap__cta { align-items: stretch; } .cv-ap__cta .cv-ap__btn { flex: 0 0 auto; inline-size: 100%; block-size: auto; min-block-size: 48px; padding: 12px 18px; } } /* Keep the featured pricing CTA inside its card at tablet width */ @media (min-width: 761px) and (max-width: 820px) { #service-pricing .cv-price__viewport { height: 780px; } #service-pricing .cv-price__slide { height: calc(100% - 24px); } #service-pricing .cv-price__card { height: 100%; } #service-pricing .cv-price__link { flex: 0 0 auto; } } /* Keep the featured pricing CTA inside its card at 1024px laptop width */ @media (min-width: 1001px) and (max-width: 1100px) { #service-pricing .cv-price__viewport { height: 740px; } #service-pricing .cv-price__slide { height: calc(100% - 24px); } #service-pricing .cv-price__card { height: 100%; } #service-pricing .cv-price__link { flex: 0 0 auto; } } /* Services page intro headings and shared side spacing */ body:has(#servicesHero) .cv-services-hero, body:has(#servicesHero) .cv-vs, body:has(#servicesHero) .cv-ap { padding-inline: clamp(18px, 4vw, 54px); } body:has(#servicesHero) .cv-services-hero__inner, body:has(#servicesHero) .cv-vs__inner, body:has(#servicesHero) .cv-ap__inner { width: 100%; max-inline-size: 1440px; margin-inline: auto; } @media (max-width: 380px) { body:has(#servicesHero) .cv-services-hero, body:has(#servicesHero) .cv-vs, body:has(#servicesHero) .cv-ap { padding-inline: 16px; } } body:has(#servicesHero) .cv-services-hero h1, body:has(#servicesHero) .cv-vs__title, body:has(#servicesHero) .cv-process__intro h2, body:has(#servicesHero) .cv-ap__title, body:has(#servicesHero) .cv-price__intro h2, body:has(#servicesHero) .cv-services-cta h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(34px, 4.4vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; } body:has(#servicesHero) .cv-vs__title, body:has(#servicesHero) .cv-process__intro h2, body:has(#servicesHero) .cv-ap__title { color: #0A0D0D; } body:has(#servicesHero) .cv-vs__title span, body:has(#servicesHero) .cv-process__intro h2 em, body:has(#servicesHero) .cv-ap__title span { color: #1F5F5B; font-style: normal; } body:has(#servicesHero) .cv-services-hero h1 em { color: #82D1C7; } body:has(#servicesHero) .cv-price__intro h2 em { color: #83D3C9; } body:has(#servicesHero) .cv-services-cta h2 em { color: #FFFFFF; } /* Home 1 section intro headings */ body:has(#cvHero) .cv-hero__title, body:has(#cvHero) .cv-cd__title, body:has(#cvHero) .cv-pc__head .cv-pc__title, body:has(#cvHero) .cv-journey__head h2, body:has(#cvHero) .cv-org-marquee__intro h2, body:has(#cvHero) .cv-mixer__header h2, body:has(#cvHero) .cv-feature-film__content h2, body:has(#cvHero) .cv-index-cta .cv-final-cta__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(34px, 4.4vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; } body:has(#cvHero) .cv-cd__title, body:has(#cvHero) .cv-pc__head .cv-pc__title, body:has(#cvHero) .cv-journey__head h2, body:has(#cvHero) .cv-org-marquee__intro h2, body:has(#cvHero) .cv-mixer__header h2 { color: #0A0D0D; } body:has(#cvHero) .cv-cd__title span, body:has(#cvHero) .cv-pc__head .cv-pc__title span, body:has(#cvHero) .cv-journey__head h2 span, body:has(#cvHero) .cv-org-marquee__intro h2 span, body:has(#cvHero) .cv-mixer__header h2 em { color: #1F5F5B; font-style: normal; } body:has(#cvHero) .cv-hero__title { color: #FFFFFF; } body:has(#cvHero) .cv-hero__title span { color: #82D1C7; } body:has(#cvHero) .cv-feature-film__content h2 { color: #F7FBFA; } body:has(#cvHero) .cv-feature-film__content h2 em { color: #9DE0D6; } body:has(#cvHero) .cv-index-cta .cv-final-cta__title, body:has(#cvHero) .cv-index-cta .cv-final-cta__title-line { color: #FFFFFF; } /* Home 1 section content uses consistent horizontal gutters. */ body:has(#cvHero) .cv-hero__frame, body:has(#cvHero) .cv-cd, body:has(#cvHero) .cv-pc, body:has(#cvHero) .cv-journey, body:has(#cvHero) .cv-org-marquee, body:has(#cvHero) .cv-mixer, body:has(#cvHero) .cv-feature-film, body:has(#cvHero) .cv-index-cta { padding-inline: clamp(18px, 4vw, 54px); } body:has(#cvHero) .cv-hero__frame { width: 100%; max-width: 1548px; padding-inline: clamp(18px, 4vw, 54px); } body:has(#cvHero) .cv-cd__inner, body:has(#cvHero) .cv-pc__inner, body:has(#cvHero) .cv-journey__head, body:has(#cvHero) .cv-journey__stages, body:has(#cvHero) .cv-org-marquee__intro, body:has(#cvHero) .cv-org-marquee__rows, body:has(#cvHero) .cv-org-marquee__note, body:has(#cvHero) .cv-mixer__inner { width: 100%; max-width: 1440px; margin-inline: auto; } body:has(#cvHero) .cv-journey__head, body:has(#cvHero) .cv-journey__stages { padding-inline: 0; } body:has(#cvHero) .cv-cd, body:has(#cvHero) .cv-pc, body:has(#cvHero) .cv-org-marquee { box-sizing: border-box; } body:has(#cvHero) .cv-cd__inner, body:has(#cvHero) .cv-pc__inner, body:has(#cvHero) .cv-org-marquee__intro, body:has(#cvHero) .cv-org-marquee__rows, body:has(#cvHero) .cv-org-marquee__note, body:has(#cvHero) .cv-mixer__inner, body:has(#cvHero) .cv-feature-film__stage, body:has(#cvHero) .cv-index-cta .cv-final-cta__inner { box-sizing: border-box; } body:has(#cvHero) .cv-org-marquee { padding-block: clamp(34px, 5vw, 68px); } body:has(#cvHero) .cv-feature-film__stage { width: 100%; max-width: 1440px; } body:has(#cvHero) .cv-index-cta .cv-final-cta__inner { width: 100%; max-width: 1440px; } @media (max-width: 380px) { body:has(#cvHero) .cv-hero__frame, body:has(#cvHero) .cv-cd, body:has(#cvHero) .cv-pc, body:has(#cvHero) .cv-journey, body:has(#cvHero) .cv-org-marquee, body:has(#cvHero) .cv-mixer, body:has(#cvHero) .cv-feature-film, body:has(#cvHero) .cv-index-cta { padding-inline: 16px; } body:has(#cvHero) .cv-journey__head, body:has(#cvHero) .cv-journey__stages { padding-inline: 0; } } /* Home 2 section intro headings */ body:has(#home2Hero) .cv-hx__title, body:has(#home2Hero) .cv-fb__head .cv-fb__title, body:has(#home2Hero) .cv-av__head .cv-av__title, body:has(#home2Hero) .cv-home2-hero__copy h1, body:has(#home2Hero) .cv-ops__header .cv-ops__title, body:has(#home2Hero) .cv-ck__head .cv-ck__title, body:has(#home2Hero) .cv-pricing__intro .cv-pricing__title, body:has(#home2Hero) .cv-moments__intro .cv-moments__title, body:has(#home2Hero) .cv-next-cta__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(34px, 4.4vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; } body:has(#home2Hero) .cv-hx__title { --cv-hx-fs: clamp(34px, 4.4vw, 58px); } body:has(#home2Hero) .cv-hx__title, body:has(#home2Hero) .cv-fb__head .cv-fb__title, body:has(#home2Hero) .cv-av__head .cv-av__title, body:has(#home2Hero) .cv-home2-hero__copy h1, body:has(#home2Hero) .cv-ops__header .cv-ops__title, body:has(#home2Hero) .cv-ck__head .cv-ck__title, body:has(#home2Hero) .cv-pricing__intro .cv-pricing__title, body:has(#home2Hero) .cv-moments__intro .cv-moments__title, body:has(#home2Hero) .cv-next-cta__title-static { color: var(--cv-text); } body:has(#home2Hero) .cv-hx__mark, body:has(#home2Hero) .cv-fb__head .cv-fb__title span, body:has(#home2Hero) .cv-av__head .cv-av__title span, body:has(#home2Hero) .cv-home2-hero__copy h1 em, body:has(#home2Hero) .cv-ops__header .cv-ops__title em, body:has(#home2Hero) .cv-ck__head .cv-ck__title .cv-ck__word:nth-child(n + 4) .cv-ck__word-inner, body:has(#home2Hero) .cv-pricing__intro .cv-pricing__title em, body:has(#home2Hero) .cv-moments__intro .cv-moments__title em, body:has(#home2Hero) .cv-next-cta__typing-line { color: var(--cv-accent); } /* Home 2 section content uses consistent horizontal gutters. */ body:has(#home2Hero) .cv-hx, body:has(#home2Hero) .cv-fb, body:has(#home2Hero) .cv-av, body:has(#home2Hero) .cv-home2-hero, body:has(#home2Hero) .cv-ops, body:has(#home2Hero) .cv-ck, body:has(#home2Hero) .cv-next-cta { box-sizing: border-box; padding-inline: clamp(18px, 4vw, 54px); } body:has(#home2Hero) .cv-hx__inner, body:has(#home2Hero) .cv-fb__inner, body:has(#home2Hero) .cv-av__inner, body:has(#home2Hero) .cv-home2-hero__inner, body:has(#home2Hero) .cv-ops__inner, body:has(#home2Hero) .cv-ck__inner, body:has(#home2Hero) .cv-next-cta__inner { box-sizing: border-box; width: 100%; max-width: 1440px; margin-inline: auto; } body:has(#home2Hero) .cv-ck__inner { padding-inline: 0; } @media (max-width: 380px) { body:has(#home2Hero) .cv-hx, body:has(#home2Hero) .cv-fb, body:has(#home2Hero) .cv-av, body:has(#home2Hero) .cv-home2-hero, body:has(#home2Hero) .cv-ops, body:has(#home2Hero) .cv-ck, body:has(#home2Hero) .cv-next-cta { padding-inline: 16px; } } /* Keep the featured conference cards level and give the CTA room before the footer. */ body:has(#home2Hero) .cv-fb__layout { align-items: stretch; } @media (min-width: 1024px) { body:has(#home2Hero) .cv-fb__board { display: flex; flex-direction: column; } body:has(#home2Hero) .cv-fb__list { display: flex; flex: 1 1 auto; flex-direction: column; } body:has(#home2Hero) .cv-fb__item { display: flex; flex: 1 1 auto; } body:has(#home2Hero) .cv-fb__row { box-sizing: border-box; flex: 1 1 auto; } } body:has(#home2Hero) .cv-next-cta { padding-block-end: clamp(38px, 5vw, 68px); } body:has(#home2Hero) .cv-next-cta__inner { border-radius: clamp(16px, 1.4vw, 20px); } /* EVENT OPERATIONS ATLAS — readable type and responsive wrapping */ #cvEventAtlas { font-size: 16px; } #cvEventAtlas .cv-ops__eyebrow, #cvEventAtlas .cv-ops__edition, #cvEventAtlas .cv-ops__rail-index, #cvEventAtlas .cv-ops__micro, #cvEventAtlas .cv-ops__counter, #cvEventAtlas .cv-ops__run-head, #cvEventAtlas .cv-ops__moment time { font-size: 12px; line-height: 1.5; letter-spacing: 0.07em; } #cvEventAtlas .cv-ops__live { font-size: 11px; line-height: 1.4; letter-spacing: 0.05em; } #cvEventAtlas .cv-ops__header-aside p, #cvEventAtlas .cv-ops__event-name p { font-size: 16px; line-height: 1.65; } #cvEventAtlas .cv-ops__text-link, #cvEventAtlas .cv-ops__footer-link { font-size: 15px; line-height: 1.5; } #cvEventAtlas .cv-ops__event-facts div > span { font-size: 12px; line-height: 1.5; } #cvEventAtlas .cv-ops__event-facts strong, #cvEventAtlas .cv-ops__rail-foot strong { font-size: 14px; line-height: 1.5; } #cvEventAtlas .cv-ops__rail-foot small, #cvEventAtlas .cv-ops__budget-copy span, #cvEventAtlas .cv-ops__vendor-info small, #cvEventAtlas .cv-ops__moment small, #cvEventAtlas .cv-ops__footer p span { font-size: 13px; line-height: 1.55; } #cvEventAtlas .cv-ops__photo-number { font-size: 13px; } #cvEventAtlas .cv-ops__photo-caption strong { font-size: 14px; line-height: 1.45; } #cvEventAtlas .cv-ops__photo-caption small, #cvEventAtlas .cv-ops__photo--detail figcaption { font-size: 12px; line-height: 1.5; } #cvEventAtlas .cv-ops__visual-stamp { font-size: 11px; line-height: 1.5; } #cvEventAtlas .cv-ops__budget-copy strong { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.1; } #cvEventAtlas .cv-ops__budget-ring small { font-size: 12px; } #cvEventAtlas .cv-ops__budget-legend, #cvEventAtlas .cv-ops__budget-legend strong { font-size: 13px; line-height: 1.5; } #cvEventAtlas .cv-ops__vendor-info strong { font-size: 14px; line-height: 1.45; } #cvEventAtlas .cv-ops__status { font-size: 11px; line-height: 1.4; letter-spacing: 0.04em; white-space: normal; } #cvEventAtlas .cv-ops__moment strong { font-size: 12px; line-height: 1.45; } #cvEventAtlas .cv-ops__footer p { font-size: 14px; line-height: 1.55; } #cvEventAtlas .cv-ops__event-facts strong, #cvEventAtlas .cv-ops__vendor-info, #cvEventAtlas .cv-ops__budget-legend, #cvEventAtlas .cv-ops__moment, #cvEventAtlas .cv-ops__footer p { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 767px) { #cvEventAtlas .cv-ops__title { font-size: clamp(36px, 9vw, 48px); line-height: 1.08; } #cvEventAtlas .cv-ops__header-aside { width: 100%; padding-inline-start: 14px; } #cvEventAtlas .cv-ops__event-facts div { align-items: flex-start; gap: 12px; } #cvEventAtlas .cv-ops__event-facts div > span { flex: 0 0 86px; } #cvEventAtlas .cv-ops__event-facts strong { text-align: start; } #cvEventAtlas .cv-ops__vendor-list li { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 10px; } #cvEventAtlas .cv-ops__status { grid-column: 2; justify-self: start; margin: 0; font-size: 11px; } #cvEventAtlas .cv-ops__budget-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 14px; } #cvEventAtlas .cv-ops__footer { align-items: flex-start; gap: 12px; } #cvEventAtlas .cv-ops__footer-link { margin-inline-start: 0; } } @media (max-width: 479px) { #cvEventAtlas { padding-inline: 14px; } #cvEventAtlas .cv-ops__title { font-size: clamp(34px, 9.5vw, 42px); } #cvEventAtlas .cv-ops__eyebrow, #cvEventAtlas .cv-ops__edition, #cvEventAtlas .cv-ops__micro, #cvEventAtlas .cv-ops__counter, #cvEventAtlas .cv-ops__run-head, #cvEventAtlas .cv-ops__moment time { font-size: 11px; } #cvEventAtlas .cv-ops__live { font-size: 10px; } #cvEventAtlas .cv-ops__event-facts div > span { flex-basis: 78px; font-size: 11px; } #cvEventAtlas .cv-ops__event-facts strong, #cvEventAtlas .cv-ops__vendor-info strong { font-size: 13px; } #cvEventAtlas .cv-ops__vendor-info small, #cvEventAtlas .cv-ops__budget-copy span, #cvEventAtlas .cv-ops__moment small { font-size: 12px; } #cvEventAtlas .cv-ops__status { font-size: 10px; } #cvEventAtlas .cv-ops__photo-caption small { font-size: 11px; } } @media (max-width: 359px) { #cvEventAtlas .cv-ops__rail-top { flex-wrap: wrap; gap: 10px; } #cvEventAtlas .cv-ops__vendor-list li { grid-template-columns: 29px minmax(0, 1fr); } #cvEventAtlas .cv-ops__status { grid-column: 2; justify-self: start; font-size: 10px; } } @media (max-width: 767px) { body:has(#home2Hero) #cvEventAtlas .cv-ops__footer { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 12px; } body:has(#home2Hero) #cvEventAtlas .cv-ops__footer p { min-width: 0; } body:has(#home2Hero) #cvEventAtlas .cv-ops__footer-link { grid-column: 2; justify-self: start; margin: 0; } } @media (max-width: 380px) { body:has(#home2Hero) .cv-hx__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; } } @media (max-width: 767px) { body:has(#home2Hero) .cv-av__rfoot .cv-av__btn { flex: 0 0 auto; min-block-size: 48px; } } /* HOME 2 HERO — keep the photo caption clear and size CTAs to their labels */ #home2Hero .cv-home2-hero__visual { min-width: 0; } #home2Hero .cv-home2-hero__float-shot--celebration { inset-block-start: auto; inset-block-end: -6%; inset-inline-start: 8%; width: 48%; max-width: 340px; aspect-ratio: 1.9 / 1; } #home2Hero .cv-home2-hero__main-caption { display: none; } #home2Hero .cv-home2-hero__button { box-sizing: border-box; flex: 0 0 auto; width: fit-content; min-height: 48px; padding: 12px 18px; font-size: 13px; line-height: 1.4; } #home2Hero .cv-home2-hero__actions { align-items: center; gap: 12px; } @media (min-width: 1024px) { #home2Hero .cv-home2-hero__float-shot--celebration { inset-block-end: -6%; } } @media (min-width: 1024px) and (max-width: 1199px) { #home2Hero .cv-home2-hero__float-shot--celebration { inset-block-end: -9%; } } @media (max-width: 1023px) { #home2Hero .cv-home2-hero__inner { width: min(100%, 780px); } #home2Hero .cv-home2-hero__visual { width: min(100%, 700px); } #home2Hero .cv-home2-hero__float-shot--celebration { inset-block-start: auto; inset-block-end: -3%; } } @media (max-width: 767px) { #home2Hero .cv-home2-hero__visual { width: 100%; aspect-ratio: 1.04 / 1; } #home2Hero .cv-home2-hero__main-shot { inset-block-end: 11%; } #home2Hero .cv-home2-hero__float-shot--celebration { inset-block-start: auto; inset-block-end: 4%; width: 48%; max-width: 280px; } #home2Hero .cv-home2-hero__actions { align-items: flex-start; flex-direction: column; gap: 10px; } #home2Hero .cv-home2-hero__button { width: fit-content; max-width: 100%; justify-content: center; padding: 12px 16px; } } @media (max-width: 479px) { #home2Hero .cv-home2-hero__visual { aspect-ratio: 0.96 / 1; } #home2Hero .cv-home2-hero__float-shot--celebration { inset-block-start: auto; inset-block-end: 4%; width: 49%; } #home2Hero .cv-home2-hero__button { width: fit-content; max-width: 100%; } } body:has(#home2Hero) .cv-ck__head { justify-items: center; margin-inline: auto; text-align: center; } body:has(#home2Hero) .cv-ck__head .cv-ck__lead { margin-inline: auto; } html body:has(#home2Hero) .cv-next-cta__title-static { color: #FFFFFF; } @media (max-width: 767px) { } /* ========================================================= MOBILE RTL ========================================================= */ @media (max-width: 767px) { } /* ========================================================= MOBILE RTL ========================================================= */ @media (max-width: 767px) { } @media (hover: hover) { } @media (max-width: 767px) { } /* ========================================================= TABLET / MOBILE ========================================================= */ @media (max-width: 767px) { } @media (max-width: 479px) { } @media (max-width: 479px) { } /* Keep text fully readable on smaller RTL screens */ @media (max-width: 599px) { } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { } @media (max-width: 374px) { } @keyframes cvOpsBudgetRtl { from { transform: scaleX(.08); } to { transform: scaleX(1); } } @media (max-width: 767px) { } @keyframes cvPrinciplesProgressRtl { to { transform: scaleX(1); } } @media (max-width: 767px) { } @media (max-width: 600px) { } @media (max-width: 760px) { } @media (max-width: 760px) { } @media (max-width: 420px) { } @media (max-width: 760px) { } @media (max-width: 700px) { } @media (prefers-reduced-motion: reduce) { } @media (max-width: 800px) { } @media (max-width: 720px) { } @media (max-width: 460px) { } @media (max-width: 1000px) { } @media (max-width: 700px) { } @media (max-width: 1000px) { } @media (max-width: 760px) { } /* Mirror the half-orbit and its icon positions for RTL */ @media (min-width: 761px) { } @media (max-width: 760px) { } /* Migrated static styles from page markup */ .cv-inline-style-001{--k: 0} .cv-inline-style-002{--k: 1} .cv-inline-style-003{--k: 2} .cv-inline-style-004{--k: 3} .cv-inline-style-005{--k: 4} .cv-inline-style-006{--k: 5} .cv-inline-style-007{--k: 6} .cv-inline-style-008{--k: 7} .cv-inline-style-009{--k: 8} .cv-inline-style-010{--k: 9} .cv-inline-style-011{--k: 10} .cv-inline-style-012{--k: 11} .cv-inline-style-013{--fb-d: 120ms} .cv-inline-style-014{--fb-d: 100ms} .cv-inline-style-015{--fb-d: 180ms} .cv-inline-style-016{--fb-d: 260ms} .cv-inline-style-017{--fb-d: 340ms} .cv-inline-style-018{--fb-d: 420ms} .cv-inline-style-019{--fb-d: 500ms} .cv-inline-style-020{--fb-d: 200ms} .cv-inline-style-021{object-position: 50% 60%} .cv-inline-style-022{--av-d: 120ms} .cv-inline-style-023{--av-led: 0.85; --av-lite: 0.55; --av-snd: 0.7; --av-hue-rgb: 63, 163, 155} .cv-inline-style-024{--x: 14} .cv-inline-style-025{--x: 28} .cv-inline-style-026{--x: 42} .cv-inline-style-027{--x: 58} .cv-inline-style-028{--x: 72} .cv-inline-style-029{--x: 86} .cv-inline-style-030{--x: 14; --r: -10deg; --i: 0} .cv-inline-style-031{--x: 28; --r: -6deg; --i: 1} .cv-inline-style-032{--x: 42; --r: -2deg; --i: 2} .cv-inline-style-033{--x: 58; --r: 2deg; --i: 3} .cv-inline-style-034{--x: 72; --r: 6deg; --i: 4} .cv-inline-style-035{--x: 86; --r: 10deg; --i: 5} .cv-inline-style-036{--i: 0} .cv-inline-style-037{--i: 1} .cv-inline-style-038{--i: 2} .cv-inline-style-039{--v: 0.85} .cv-inline-style-040{--v: 0.55} .cv-inline-style-041{--v: 0.7} .cv-inline-style-042{--v: 0.6} .cv-inline-style-043{--c: #3FA39B} .cv-inline-style-044{--c: #FFC93C} .cv-inline-style-045{--c: #A78BFA} .cv-inline-style-046{--c: #FF8FA3} .cv-inline-style-047{--ck-d: 200ms} .cv-inline-style-048{--ck-d: 120ms} .cv-inline-style-049{--ck-d: 240ms} .cv-inline-style-050{--cv-hero-pos: 50% 68%} .cv-inline-style-051{--cv-hero-pos: 52% 58%} .cv-inline-style-052{--d: 380} .cv-inline-style-053{--d: 620} .cv-inline-style-054{--d: 300} .cv-inline-style-055{--cv-thumb-pos: 50% 72%} .cv-inline-style-056{--cv-thumb-pos: 30% 62%} .cv-inline-style-057{--d: 700} .cv-inline-style-058{--d: 0} .cv-inline-style-059{--d: 360} .cv-inline-style-060{--d: 460} .cv-inline-style-061{--cd-d: 120ms} .cv-inline-style-062{--cd-d: 100ms} .cv-inline-style-063{--cd-d: 200ms} .cv-inline-style-064{--cd-d: 160ms} .cv-inline-style-065{--t: 0} .cv-inline-style-066{--t: 1} .cv-inline-style-067{--t: 2} .cv-inline-style-068{--t: 3} .cv-inline-style-069{--t: 4} .cv-inline-style-070{--p: 1; --i: 0} .cv-inline-style-071{--p: 0.72; --i: 1} .cv-inline-style-072{--p: 0.48; --i: 2} .cv-inline-style-073{--p: 0.2; --i: 3} .cv-inline-style-074{--s: 38; --o: 0; --i: 0; --c: var(--cv-cd-c1)} .cv-inline-style-075{--s: 24; --o: 38; --i: 1; --c: var(--cv-cd-c2)} .cv-inline-style-076{--s: 20; --o: 62; --i: 2; --c: var(--cv-cd-c3)} .cv-inline-style-077{--s: 12; --o: 82; --i: 3; --c: var(--cv-cd-c4)} .cv-inline-style-078{--s: 6; --o: 94; --i: 4; --c: var(--cv-cd-c5)} .cv-inline-style-079{--w: 0.38; --i: 0; --c: var(--cv-cd-c1)} .cv-inline-style-080{--w: 0.24; --i: 1; --c: var(--cv-cd-c2)} .cv-inline-style-081{--w: 0.20; --i: 2; --c: var(--cv-cd-c3)} .cv-inline-style-082{--w: 0.12; --i: 3; --c: var(--cv-cd-c4)} .cv-inline-style-083{--w: 0.06; --i: 4; --c: var(--cv-cd-c5)} .cv-inline-style-084{object-position: 52% 40%} .cv-inline-style-085{object-position: 50% 62%} .cv-inline-style-086{object-position: 45% 50%} .cv-inline-style-087{object-position: 50% 45%} .cv-inline-style-088{object-position: 70% 50%} .cv-inline-style-089{object-position: 50% 55%} .cv-inline-style-090{--journey-step: 0} .cv-inline-style-091{--journey-step: 1} .cv-inline-style-092{--journey-step: 2} .cv-inline-style-093{--journey-step: 3} .cv-inline-style-094{--journey-step: 4} .cv-inline-style-095{--vs-d: 140ms} .cv-inline-style-096{--i: 3} .cv-inline-style-097{--i: 4} .cv-inline-style-098{--i: 5} .cv-inline-style-099{--i: 6} .cv-inline-style-100{--i: 7} .cv-inline-style-101{--i: 8} .cv-inline-style-102{--i: 9} .cv-inline-style-103{--i: 10} .cv-inline-style-104{--i: 11} .cv-inline-style-105{--ap-d: 140ms} .cv-inline-style-106{--p: 50%} .cv-inline-style-107{--s: 0; --e: 0.14; --r: 0} .cv-inline-style-108{--s: 0.1; --e: 0.34; --r: 1} .cv-inline-style-109{--s: 0.3; --e: 0.62; --r: 2} .cv-inline-style-110{--s: 0.28; --e: 0.7; --r: 3} .cv-inline-style-111{--s: 0.4; --e: 0.82; --r: 4} .cv-inline-style-112{--s: 0.8; --e: 1; --r: 5} .cv-inline-style-113{--w: 0.8; --d: 0ms} .cv-inline-style-114{--w: 1; --d: 60ms} .cv-inline-style-115{--w: 0.7; --d: 120ms} .cv-inline-style-116{--w: 0.4; --d: 180ms} .cv-inline-style-117{--w: 0.6; --d: 240ms} .cv-inline-style-118{--w: 0.9; --d: 300ms} .cv-inline-style-119{--w: 0.5; --d: 360ms} .cv-inline-style-120{--w: 0.2; --d: 420ms} /* Data-driven styles for generated content */ .cv-ud-track i[data-cv-progress="0"],.cv-ad-track i[data-cv-progress="0"]{width:0%} .cv-ud-donut[data-cv-donut="0"]{--p:0} .cv-vs__bar i[data-vs-score="0"]{--v:0} .cv-ud-track i[data-cv-progress="1"],.cv-ad-track i[data-cv-progress="1"]{width:1%} .cv-ud-donut[data-cv-donut="1"]{--p:1} .cv-vs__bar i[data-vs-score="1"]{--v:1} .cv-ud-track i[data-cv-progress="2"],.cv-ad-track i[data-cv-progress="2"]{width:2%} .cv-ud-donut[data-cv-donut="2"]{--p:2} .cv-vs__bar i[data-vs-score="2"]{--v:2} .cv-ud-track i[data-cv-progress="3"],.cv-ad-track i[data-cv-progress="3"]{width:3%} .cv-ud-donut[data-cv-donut="3"]{--p:3} .cv-vs__bar i[data-vs-score="3"]{--v:3} .cv-ud-track i[data-cv-progress="4"],.cv-ad-track i[data-cv-progress="4"]{width:4%} .cv-ud-donut[data-cv-donut="4"]{--p:4} .cv-vs__bar i[data-vs-score="4"]{--v:4} .cv-ud-track i[data-cv-progress="5"],.cv-ad-track i[data-cv-progress="5"]{width:5%} .cv-ud-donut[data-cv-donut="5"]{--p:5} .cv-vs__bar i[data-vs-score="5"]{--v:5} .cv-ud-track i[data-cv-progress="6"],.cv-ad-track i[data-cv-progress="6"]{width:6%} .cv-ud-donut[data-cv-donut="6"]{--p:6} .cv-vs__bar i[data-vs-score="6"]{--v:6} .cv-ud-track i[data-cv-progress="7"],.cv-ad-track i[data-cv-progress="7"]{width:7%} .cv-ud-donut[data-cv-donut="7"]{--p:7} .cv-vs__bar i[data-vs-score="7"]{--v:7} .cv-ud-track i[data-cv-progress="8"],.cv-ad-track i[data-cv-progress="8"]{width:8%} .cv-ud-donut[data-cv-donut="8"]{--p:8} .cv-vs__bar i[data-vs-score="8"]{--v:8} .cv-ud-track i[data-cv-progress="9"],.cv-ad-track i[data-cv-progress="9"]{width:9%} .cv-ud-donut[data-cv-donut="9"]{--p:9} .cv-vs__bar i[data-vs-score="9"]{--v:9} .cv-ud-track i[data-cv-progress="10"],.cv-ad-track i[data-cv-progress="10"]{width:10%} .cv-ud-donut[data-cv-donut="10"]{--p:10} .cv-vs__bar i[data-vs-score="10"]{--v:10} .cv-ud-track i[data-cv-progress="11"],.cv-ad-track i[data-cv-progress="11"]{width:11%} .cv-ud-donut[data-cv-donut="11"]{--p:11} .cv-vs__bar i[data-vs-score="11"]{--v:11} .cv-ud-track i[data-cv-progress="12"],.cv-ad-track i[data-cv-progress="12"]{width:12%} .cv-ud-donut[data-cv-donut="12"]{--p:12} .cv-vs__bar i[data-vs-score="12"]{--v:12} .cv-ud-track i[data-cv-progress="13"],.cv-ad-track i[data-cv-progress="13"]{width:13%} .cv-ud-donut[data-cv-donut="13"]{--p:13} .cv-vs__bar i[data-vs-score="13"]{--v:13} .cv-ud-track i[data-cv-progress="14"],.cv-ad-track i[data-cv-progress="14"]{width:14%} .cv-ud-donut[data-cv-donut="14"]{--p:14} .cv-vs__bar i[data-vs-score="14"]{--v:14} .cv-ud-track i[data-cv-progress="15"],.cv-ad-track i[data-cv-progress="15"]{width:15%} .cv-ud-donut[data-cv-donut="15"]{--p:15} .cv-vs__bar i[data-vs-score="15"]{--v:15} .cv-ud-track i[data-cv-progress="16"],.cv-ad-track i[data-cv-progress="16"]{width:16%} .cv-ud-donut[data-cv-donut="16"]{--p:16} .cv-vs__bar i[data-vs-score="16"]{--v:16} .cv-ud-track i[data-cv-progress="17"],.cv-ad-track i[data-cv-progress="17"]{width:17%} .cv-ud-donut[data-cv-donut="17"]{--p:17} .cv-vs__bar i[data-vs-score="17"]{--v:17} .cv-ud-track i[data-cv-progress="18"],.cv-ad-track i[data-cv-progress="18"]{width:18%} .cv-ud-donut[data-cv-donut="18"]{--p:18} .cv-vs__bar i[data-vs-score="18"]{--v:18} .cv-ud-track i[data-cv-progress="19"],.cv-ad-track i[data-cv-progress="19"]{width:19%} .cv-ud-donut[data-cv-donut="19"]{--p:19} .cv-vs__bar i[data-vs-score="19"]{--v:19} .cv-ud-track i[data-cv-progress="20"],.cv-ad-track i[data-cv-progress="20"]{width:20%} .cv-ud-donut[data-cv-donut="20"]{--p:20} .cv-vs__bar i[data-vs-score="20"]{--v:20} .cv-ud-track i[data-cv-progress="21"],.cv-ad-track i[data-cv-progress="21"]{width:21%} .cv-ud-donut[data-cv-donut="21"]{--p:21} .cv-vs__bar i[data-vs-score="21"]{--v:21} .cv-ud-track i[data-cv-progress="22"],.cv-ad-track i[data-cv-progress="22"]{width:22%} .cv-ud-donut[data-cv-donut="22"]{--p:22} .cv-vs__bar i[data-vs-score="22"]{--v:22} .cv-ud-track i[data-cv-progress="23"],.cv-ad-track i[data-cv-progress="23"]{width:23%} .cv-ud-donut[data-cv-donut="23"]{--p:23} .cv-vs__bar i[data-vs-score="23"]{--v:23} .cv-ud-track i[data-cv-progress="24"],.cv-ad-track i[data-cv-progress="24"]{width:24%} .cv-ud-donut[data-cv-donut="24"]{--p:24} .cv-vs__bar i[data-vs-score="24"]{--v:24} .cv-ud-track i[data-cv-progress="25"],.cv-ad-track i[data-cv-progress="25"]{width:25%} .cv-ud-donut[data-cv-donut="25"]{--p:25} .cv-vs__bar i[data-vs-score="25"]{--v:25} .cv-ud-track i[data-cv-progress="26"],.cv-ad-track i[data-cv-progress="26"]{width:26%} .cv-ud-donut[data-cv-donut="26"]{--p:26} .cv-vs__bar i[data-vs-score="26"]{--v:26} .cv-ud-track i[data-cv-progress="27"],.cv-ad-track i[data-cv-progress="27"]{width:27%} .cv-ud-donut[data-cv-donut="27"]{--p:27} .cv-vs__bar i[data-vs-score="27"]{--v:27} .cv-ud-track i[data-cv-progress="28"],.cv-ad-track i[data-cv-progress="28"]{width:28%} .cv-ud-donut[data-cv-donut="28"]{--p:28} .cv-vs__bar i[data-vs-score="28"]{--v:28} .cv-ud-track i[data-cv-progress="29"],.cv-ad-track i[data-cv-progress="29"]{width:29%} .cv-ud-donut[data-cv-donut="29"]{--p:29} .cv-vs__bar i[data-vs-score="29"]{--v:29} .cv-ud-track i[data-cv-progress="30"],.cv-ad-track i[data-cv-progress="30"]{width:30%} .cv-ud-donut[data-cv-donut="30"]{--p:30} .cv-vs__bar i[data-vs-score="30"]{--v:30} .cv-ud-track i[data-cv-progress="31"],.cv-ad-track i[data-cv-progress="31"]{width:31%} .cv-ud-donut[data-cv-donut="31"]{--p:31} .cv-vs__bar i[data-vs-score="31"]{--v:31} .cv-ud-track i[data-cv-progress="32"],.cv-ad-track i[data-cv-progress="32"]{width:32%} .cv-ud-donut[data-cv-donut="32"]{--p:32} .cv-vs__bar i[data-vs-score="32"]{--v:32} .cv-ud-track i[data-cv-progress="33"],.cv-ad-track i[data-cv-progress="33"]{width:33%} .cv-ud-donut[data-cv-donut="33"]{--p:33} .cv-vs__bar i[data-vs-score="33"]{--v:33} .cv-ud-track i[data-cv-progress="34"],.cv-ad-track i[data-cv-progress="34"]{width:34%} .cv-ud-donut[data-cv-donut="34"]{--p:34} .cv-vs__bar i[data-vs-score="34"]{--v:34} .cv-ud-track i[data-cv-progress="35"],.cv-ad-track i[data-cv-progress="35"]{width:35%} .cv-ud-donut[data-cv-donut="35"]{--p:35} .cv-vs__bar i[data-vs-score="35"]{--v:35} .cv-ud-track i[data-cv-progress="36"],.cv-ad-track i[data-cv-progress="36"]{width:36%} .cv-ud-donut[data-cv-donut="36"]{--p:36} .cv-vs__bar i[data-vs-score="36"]{--v:36} .cv-ud-track i[data-cv-progress="37"],.cv-ad-track i[data-cv-progress="37"]{width:37%} .cv-ud-donut[data-cv-donut="37"]{--p:37} .cv-vs__bar i[data-vs-score="37"]{--v:37} .cv-ud-track i[data-cv-progress="38"],.cv-ad-track i[data-cv-progress="38"]{width:38%} .cv-ud-donut[data-cv-donut="38"]{--p:38} .cv-vs__bar i[data-vs-score="38"]{--v:38} .cv-ud-track i[data-cv-progress="39"],.cv-ad-track i[data-cv-progress="39"]{width:39%} .cv-ud-donut[data-cv-donut="39"]{--p:39} .cv-vs__bar i[data-vs-score="39"]{--v:39} .cv-ud-track i[data-cv-progress="40"],.cv-ad-track i[data-cv-progress="40"]{width:40%} .cv-ud-donut[data-cv-donut="40"]{--p:40} .cv-vs__bar i[data-vs-score="40"]{--v:40} .cv-ud-track i[data-cv-progress="41"],.cv-ad-track i[data-cv-progress="41"]{width:41%} .cv-ud-donut[data-cv-donut="41"]{--p:41} .cv-vs__bar i[data-vs-score="41"]{--v:41} .cv-ud-track i[data-cv-progress="42"],.cv-ad-track i[data-cv-progress="42"]{width:42%} .cv-ud-donut[data-cv-donut="42"]{--p:42} .cv-vs__bar i[data-vs-score="42"]{--v:42} .cv-ud-track i[data-cv-progress="43"],.cv-ad-track i[data-cv-progress="43"]{width:43%} .cv-ud-donut[data-cv-donut="43"]{--p:43} .cv-vs__bar i[data-vs-score="43"]{--v:43} .cv-ud-track i[data-cv-progress="44"],.cv-ad-track i[data-cv-progress="44"]{width:44%} .cv-ud-donut[data-cv-donut="44"]{--p:44} .cv-vs__bar i[data-vs-score="44"]{--v:44} .cv-ud-track i[data-cv-progress="45"],.cv-ad-track i[data-cv-progress="45"]{width:45%} .cv-ud-donut[data-cv-donut="45"]{--p:45} .cv-vs__bar i[data-vs-score="45"]{--v:45} .cv-ud-track i[data-cv-progress="46"],.cv-ad-track i[data-cv-progress="46"]{width:46%} .cv-ud-donut[data-cv-donut="46"]{--p:46} .cv-vs__bar i[data-vs-score="46"]{--v:46} .cv-ud-track i[data-cv-progress="47"],.cv-ad-track i[data-cv-progress="47"]{width:47%} .cv-ud-donut[data-cv-donut="47"]{--p:47} .cv-vs__bar i[data-vs-score="47"]{--v:47} .cv-ud-track i[data-cv-progress="48"],.cv-ad-track i[data-cv-progress="48"]{width:48%} .cv-ud-donut[data-cv-donut="48"]{--p:48} .cv-vs__bar i[data-vs-score="48"]{--v:48} .cv-ud-track i[data-cv-progress="49"],.cv-ad-track i[data-cv-progress="49"]{width:49%} .cv-ud-donut[data-cv-donut="49"]{--p:49} .cv-vs__bar i[data-vs-score="49"]{--v:49} .cv-ud-track i[data-cv-progress="50"],.cv-ad-track i[data-cv-progress="50"]{width:50%} .cv-ud-donut[data-cv-donut="50"]{--p:50} .cv-vs__bar i[data-vs-score="50"]{--v:50} .cv-ud-track i[data-cv-progress="51"],.cv-ad-track i[data-cv-progress="51"]{width:51%} .cv-ud-donut[data-cv-donut="51"]{--p:51} .cv-vs__bar i[data-vs-score="51"]{--v:51} .cv-ud-track i[data-cv-progress="52"],.cv-ad-track i[data-cv-progress="52"]{width:52%} .cv-ud-donut[data-cv-donut="52"]{--p:52} .cv-vs__bar i[data-vs-score="52"]{--v:52} .cv-ud-track i[data-cv-progress="53"],.cv-ad-track i[data-cv-progress="53"]{width:53%} .cv-ud-donut[data-cv-donut="53"]{--p:53} .cv-vs__bar i[data-vs-score="53"]{--v:53} .cv-ud-track i[data-cv-progress="54"],.cv-ad-track i[data-cv-progress="54"]{width:54%} .cv-ud-donut[data-cv-donut="54"]{--p:54} .cv-vs__bar i[data-vs-score="54"]{--v:54} .cv-ud-track i[data-cv-progress="55"],.cv-ad-track i[data-cv-progress="55"]{width:55%} .cv-ud-donut[data-cv-donut="55"]{--p:55} .cv-vs__bar i[data-vs-score="55"]{--v:55} .cv-ud-track i[data-cv-progress="56"],.cv-ad-track i[data-cv-progress="56"]{width:56%} .cv-ud-donut[data-cv-donut="56"]{--p:56} .cv-vs__bar i[data-vs-score="56"]{--v:56} .cv-ud-track i[data-cv-progress="57"],.cv-ad-track i[data-cv-progress="57"]{width:57%} .cv-ud-donut[data-cv-donut="57"]{--p:57} .cv-vs__bar i[data-vs-score="57"]{--v:57} .cv-ud-track i[data-cv-progress="58"],.cv-ad-track i[data-cv-progress="58"]{width:58%} .cv-ud-donut[data-cv-donut="58"]{--p:58} .cv-vs__bar i[data-vs-score="58"]{--v:58} .cv-ud-track i[data-cv-progress="59"],.cv-ad-track i[data-cv-progress="59"]{width:59%} .cv-ud-donut[data-cv-donut="59"]{--p:59} .cv-vs__bar i[data-vs-score="59"]{--v:59} .cv-ud-track i[data-cv-progress="60"],.cv-ad-track i[data-cv-progress="60"]{width:60%} .cv-ud-donut[data-cv-donut="60"]{--p:60} .cv-vs__bar i[data-vs-score="60"]{--v:60} .cv-ud-track i[data-cv-progress="61"],.cv-ad-track i[data-cv-progress="61"]{width:61%} .cv-ud-donut[data-cv-donut="61"]{--p:61} .cv-vs__bar i[data-vs-score="61"]{--v:61} .cv-ud-track i[data-cv-progress="62"],.cv-ad-track i[data-cv-progress="62"]{width:62%} .cv-ud-donut[data-cv-donut="62"]{--p:62} .cv-vs__bar i[data-vs-score="62"]{--v:62} .cv-ud-track i[data-cv-progress="63"],.cv-ad-track i[data-cv-progress="63"]{width:63%} .cv-ud-donut[data-cv-donut="63"]{--p:63} .cv-vs__bar i[data-vs-score="63"]{--v:63} .cv-ud-track i[data-cv-progress="64"],.cv-ad-track i[data-cv-progress="64"]{width:64%} .cv-ud-donut[data-cv-donut="64"]{--p:64} .cv-vs__bar i[data-vs-score="64"]{--v:64} .cv-ud-track i[data-cv-progress="65"],.cv-ad-track i[data-cv-progress="65"]{width:65%} .cv-ud-donut[data-cv-donut="65"]{--p:65} .cv-vs__bar i[data-vs-score="65"]{--v:65} .cv-ud-track i[data-cv-progress="66"],.cv-ad-track i[data-cv-progress="66"]{width:66%} .cv-ud-donut[data-cv-donut="66"]{--p:66} .cv-vs__bar i[data-vs-score="66"]{--v:66} .cv-ud-track i[data-cv-progress="67"],.cv-ad-track i[data-cv-progress="67"]{width:67%} .cv-ud-donut[data-cv-donut="67"]{--p:67} .cv-vs__bar i[data-vs-score="67"]{--v:67} .cv-ud-track i[data-cv-progress="68"],.cv-ad-track i[data-cv-progress="68"]{width:68%} .cv-ud-donut[data-cv-donut="68"]{--p:68} .cv-vs__bar i[data-vs-score="68"]{--v:68} .cv-ud-track i[data-cv-progress="69"],.cv-ad-track i[data-cv-progress="69"]{width:69%} .cv-ud-donut[data-cv-donut="69"]{--p:69} .cv-vs__bar i[data-vs-score="69"]{--v:69} .cv-ud-track i[data-cv-progress="70"],.cv-ad-track i[data-cv-progress="70"]{width:70%} .cv-ud-donut[data-cv-donut="70"]{--p:70} .cv-vs__bar i[data-vs-score="70"]{--v:70} .cv-ud-track i[data-cv-progress="71"],.cv-ad-track i[data-cv-progress="71"]{width:71%} .cv-ud-donut[data-cv-donut="71"]{--p:71} .cv-vs__bar i[data-vs-score="71"]{--v:71} .cv-ud-track i[data-cv-progress="72"],.cv-ad-track i[data-cv-progress="72"]{width:72%} .cv-ud-donut[data-cv-donut="72"]{--p:72} .cv-vs__bar i[data-vs-score="72"]{--v:72} .cv-ud-track i[data-cv-progress="73"],.cv-ad-track i[data-cv-progress="73"]{width:73%} .cv-ud-donut[data-cv-donut="73"]{--p:73} .cv-vs__bar i[data-vs-score="73"]{--v:73} .cv-ud-track i[data-cv-progress="74"],.cv-ad-track i[data-cv-progress="74"]{width:74%} .cv-ud-donut[data-cv-donut="74"]{--p:74} .cv-vs__bar i[data-vs-score="74"]{--v:74} .cv-ud-track i[data-cv-progress="75"],.cv-ad-track i[data-cv-progress="75"]{width:75%} .cv-ud-donut[data-cv-donut="75"]{--p:75} .cv-vs__bar i[data-vs-score="75"]{--v:75} .cv-ud-track i[data-cv-progress="76"],.cv-ad-track i[data-cv-progress="76"]{width:76%} .cv-ud-donut[data-cv-donut="76"]{--p:76} .cv-vs__bar i[data-vs-score="76"]{--v:76} .cv-ud-track i[data-cv-progress="77"],.cv-ad-track i[data-cv-progress="77"]{width:77%} .cv-ud-donut[data-cv-donut="77"]{--p:77} .cv-vs__bar i[data-vs-score="77"]{--v:77} .cv-ud-track i[data-cv-progress="78"],.cv-ad-track i[data-cv-progress="78"]{width:78%} .cv-ud-donut[data-cv-donut="78"]{--p:78} .cv-vs__bar i[data-vs-score="78"]{--v:78} .cv-ud-track i[data-cv-progress="79"],.cv-ad-track i[data-cv-progress="79"]{width:79%} .cv-ud-donut[data-cv-donut="79"]{--p:79} .cv-vs__bar i[data-vs-score="79"]{--v:79} .cv-ud-track i[data-cv-progress="80"],.cv-ad-track i[data-cv-progress="80"]{width:80%} .cv-ud-donut[data-cv-donut="80"]{--p:80} .cv-vs__bar i[data-vs-score="80"]{--v:80} .cv-ud-track i[data-cv-progress="81"],.cv-ad-track i[data-cv-progress="81"]{width:81%} .cv-ud-donut[data-cv-donut="81"]{--p:81} .cv-vs__bar i[data-vs-score="81"]{--v:81} .cv-ud-track i[data-cv-progress="82"],.cv-ad-track i[data-cv-progress="82"]{width:82%} .cv-ud-donut[data-cv-donut="82"]{--p:82} .cv-vs__bar i[data-vs-score="82"]{--v:82} .cv-ud-track i[data-cv-progress="83"],.cv-ad-track i[data-cv-progress="83"]{width:83%} .cv-ud-donut[data-cv-donut="83"]{--p:83} .cv-vs__bar i[data-vs-score="83"]{--v:83} .cv-ud-track i[data-cv-progress="84"],.cv-ad-track i[data-cv-progress="84"]{width:84%} .cv-ud-donut[data-cv-donut="84"]{--p:84} .cv-vs__bar i[data-vs-score="84"]{--v:84} .cv-ud-track i[data-cv-progress="85"],.cv-ad-track i[data-cv-progress="85"]{width:85%} .cv-ud-donut[data-cv-donut="85"]{--p:85} .cv-vs__bar i[data-vs-score="85"]{--v:85} .cv-ud-track i[data-cv-progress="86"],.cv-ad-track i[data-cv-progress="86"]{width:86%} .cv-ud-donut[data-cv-donut="86"]{--p:86} .cv-vs__bar i[data-vs-score="86"]{--v:86} .cv-ud-track i[data-cv-progress="87"],.cv-ad-track i[data-cv-progress="87"]{width:87%} .cv-ud-donut[data-cv-donut="87"]{--p:87} .cv-vs__bar i[data-vs-score="87"]{--v:87} .cv-ud-track i[data-cv-progress="88"],.cv-ad-track i[data-cv-progress="88"]{width:88%} .cv-ud-donut[data-cv-donut="88"]{--p:88} .cv-vs__bar i[data-vs-score="88"]{--v:88} .cv-ud-track i[data-cv-progress="89"],.cv-ad-track i[data-cv-progress="89"]{width:89%} .cv-ud-donut[data-cv-donut="89"]{--p:89} .cv-vs__bar i[data-vs-score="89"]{--v:89} .cv-ud-track i[data-cv-progress="90"],.cv-ad-track i[data-cv-progress="90"]{width:90%} .cv-ud-donut[data-cv-donut="90"]{--p:90} .cv-vs__bar i[data-vs-score="90"]{--v:90} .cv-ud-track i[data-cv-progress="91"],.cv-ad-track i[data-cv-progress="91"]{width:91%} .cv-ud-donut[data-cv-donut="91"]{--p:91} .cv-vs__bar i[data-vs-score="91"]{--v:91} .cv-ud-track i[data-cv-progress="92"],.cv-ad-track i[data-cv-progress="92"]{width:92%} .cv-ud-donut[data-cv-donut="92"]{--p:92} .cv-vs__bar i[data-vs-score="92"]{--v:92} .cv-ud-track i[data-cv-progress="93"],.cv-ad-track i[data-cv-progress="93"]{width:93%} .cv-ud-donut[data-cv-donut="93"]{--p:93} .cv-vs__bar i[data-vs-score="93"]{--v:93} .cv-ud-track i[data-cv-progress="94"],.cv-ad-track i[data-cv-progress="94"]{width:94%} .cv-ud-donut[data-cv-donut="94"]{--p:94} .cv-vs__bar i[data-vs-score="94"]{--v:94} .cv-ud-track i[data-cv-progress="95"],.cv-ad-track i[data-cv-progress="95"]{width:95%} .cv-ud-donut[data-cv-donut="95"]{--p:95} .cv-vs__bar i[data-vs-score="95"]{--v:95} .cv-ud-track i[data-cv-progress="96"],.cv-ad-track i[data-cv-progress="96"]{width:96%} .cv-ud-donut[data-cv-donut="96"]{--p:96} .cv-vs__bar i[data-vs-score="96"]{--v:96} .cv-ud-track i[data-cv-progress="97"],.cv-ad-track i[data-cv-progress="97"]{width:97%} .cv-ud-donut[data-cv-donut="97"]{--p:97} .cv-vs__bar i[data-vs-score="97"]{--v:97} .cv-ud-track i[data-cv-progress="98"],.cv-ad-track i[data-cv-progress="98"]{width:98%} .cv-ud-donut[data-cv-donut="98"]{--p:98} .cv-vs__bar i[data-vs-score="98"]{--v:98} .cv-ud-track i[data-cv-progress="99"],.cv-ad-track i[data-cv-progress="99"]{width:99%} .cv-ud-donut[data-cv-donut="99"]{--p:99} .cv-vs__bar i[data-vs-score="99"]{--v:99} .cv-ud-track i[data-cv-progress="100"],.cv-ad-track i[data-cv-progress="100"]{width:100%} .cv-ud-donut[data-cv-donut="100"]{--p:100} .cv-vs__bar i[data-vs-score="100"]{--v:100} .cv-vs__cc[data-vs-order="0"]{--n:0} .cv-vs__cc[data-vs-order="1"]{--n:1} .cv-vs__cc[data-vs-order="2"]{--n:2} .cv-vs__seatl i[data-vs-fill="0.667"]{--c:0.667} .cv-vs__seatl i[data-vs-fill="0.400"]{--c:0.400} .cv-vs__seatl i[data-vs-fill="1.000"]{--c:1.000} .cv-vs__seatl i[data-vs-fill="0.600"]{--c:0.600} .cv-vs__seatl i[data-vs-fill="0.333"]{--c:0.333} .cv-vs__seatl i[data-vs-fill="0.250"]{--c:0.250} .cv-vs__seatl i[data-vs-fill="0.500"]{--c:0.500} .cv-vs__seatl i[data-vs-fill="0.300"]{--c:0.300} .cv-vs__seatl i[data-vs-fill="0.643"]{--c:0.643} .cv-vs__seatl i[data-vs-fill="0.386"]{--c:0.386} .cv-vs__seatl i[data-vs-fill="0.640"]{--c:0.640} .cv-vs__seatl i[data-vs-fill="0.800"]{--c:0.800} .cv-vs__seatl i[data-vs-fill="0.480"]{--c:0.480} .cv-vs__seatl i[data-vs-fill="0.444"]{--c:0.444} .cv-vs__seatl i[data-vs-fill="0.350"]{--c:0.350} .cv-vs__seatl i[data-vs-fill="0.583"]{--c:0.583} .cv-ap__wave i:nth-child(12n+1){--h:0.25;--d:0s} .cv-ap__wave i:nth-child(12n+2){--h:0.48;--d:-0.18s} .cv-ap__wave i:nth-child(12n+3){--h:0.65;--d:-0.36s} .cv-ap__wave i:nth-child(12n+4){--h:0.82;--d:-0.54s} .cv-ap__wave i:nth-child(12n+5){--h:0.95;--d:-0.72s} .cv-ap__wave i:nth-child(12n+6){--h:0.72;--d:-0.90s} .cv-ap__wave i:nth-child(12n+7){--h:0.88;--d:-1.08s} .cv-ap__wave i:nth-child(12n+8){--h:0.56;--d:-1.26s} .cv-ap__wave i:nth-child(12n+9){--h:0.36;--d:-0.09s} .cv-ap__wave i:nth-child(12n+10){--h:0.70;--d:-0.27s} .cv-ap__wave i:nth-child(12n+11){--h:0.90;--d:-0.45s} .cv-ap__wave i:nth-child(12n+12){--h:0.45;--d:-0.63s} .cv-ap__axt span[data-ap-tick="0.0"]{--t:0.0%} .cv-ap__axt span[data-ap-tick="20.0"]{--t:20.0%} .cv-ap__axt span[data-ap-tick="22.2"]{--t:22.2%} .cv-ap__axt span[data-ap-tick="25.0"]{--t:25.0%} .cv-ap__axt span[data-ap-tick="28.6"]{--t:28.6%} .cv-ap__axt span[data-ap-tick="33.3"]{--t:33.3%} .cv-ap__axt span[data-ap-tick="40.0"]{--t:40.0%} .cv-ap__axt span[data-ap-tick="44.4"]{--t:44.4%} .cv-ap__axt span[data-ap-tick="50.0"]{--t:50.0%} .cv-ap__axt span[data-ap-tick="57.1"]{--t:57.1%} .cv-ap__axt span[data-ap-tick="60.0"]{--t:60.0%} .cv-ap__axt span[data-ap-tick="66.7"]{--t:66.7%} .cv-ap__axt span[data-ap-tick="75.0"]{--t:75.0%} .cv-ap__axt span[data-ap-tick="80.0"]{--t:80.0%} .cv-ap__axt span[data-ap-tick="85.7"]{--t:85.7%} .cv-ap__axt span[data-ap-tick="88.9"]{--t:88.9%} .cv-ap__axt span[data-ap-tick="100.0"]{--t:100.0%} .cv-ad-b1--0{height:51.6667%} .cv-ad-b2--0{height:34.1667%} .cv-ad-b1--1{height:59.1667%} .cv-ad-b2--1{height:40%} .cv-ad-b1--2{height:48.3333%} .cv-ad-b2--2{height:33.3333%} .cv-ad-b1--3{height:78.3333%} .cv-ad-b2--3{height:52.5%} .cv-ad-b1--4{height:73.3333%} .cv-ad-b2--4{height:47.5%} .cv-ad-b1--5{height:89.1667%} .cv-ad-b2--5{height:57.5%} @media (min-width: 768px) and (max-width: 1023px) and (max-height: 700px) { body:has(#cvHero) .cv-hero__slide { padding: 18px 22px; } body:has(#cvHero) .cv-hero__title { margin-block: 8px 10px; font-size: clamp(28px, 3.4vw, 34px); } body:has(#cvHero) .cv-hero__actions { gap: 8px; margin-block-start: 14px; } body:has(#cvHero) .cv-hero__btn { min-block-size: 42px; padding: 9px 14px; } } /* Check-in form: keep Role and Access headings above their options */ #cvCheckin fieldset.cv-ck__group { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; } #cvCheckin fieldset.cv-ck__group > legend.cv-ck__label { display: flex; width: 100%; max-width: 100%; align-items: center; margin: 0 0 12px; padding: 0; line-height: 1.4; } #cvCheckin fieldset.cv-ck__group > .cv-ck__opts { width: 100%; min-width: 0; margin: 0; } #cvCheckin .cv-ck__opts { align-items: stretch; } #cvCheckin .cv-ck__opt { min-width: 0; min-height: 48px; height: auto; padding: 10px 8px; line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; } /* About page: prevent mobile horizontal overflow without breaking sticky */ @media (max-width: 767px) { html[dir="ltr"]:has(#aboutHero), html[dir="ltr"] body:has(#aboutHero) { overflow-x: clip; } html[dir="ltr"] body:has(#aboutHero) #cvNavbar { position: -webkit-sticky !important; position: sticky !important; inset-block-start: 0 !important; top: 0 !important; width: 100%; transform: none !important; z-index: 5000; } }