/* ============================================================================ CloudDialer — marketing design system (standalone, isolation-safe) This file is loaded ONLY by the `clouddialer` layout (the pre-login marketing site). It is NOT part of the Tailwind build and never touches the app's `@theme` tokens, so it cannot affect the authenticated product. Everything is scoped under `.cd` (set on ). Brand colours live as `--nx-*` custom properties under that scope only. Ported from the CloudDialer Next.js site (globals.css + components/*). ============================================================================ */ .cd { /* brand palette — Nordic-light: teal → amber → deep navy */ --nx-navy: #02122c; --nx-navy-deep: #010c1f; --nx-blue: #0062b8; --nx-blue-bright: #0a6cff; --nx-teal: #1f8a8c; --nx-ink: #1a1a1a; --nx-cream: #f8f8f6; --nx-cream-warm: #f7f1ea; --nx-muted: #6c6967; --nx-muted-2: #a39e9b; --nx-amber: #f59e0b; --nx-green: #22c55e; --nx-line: rgba(0, 0, 0, 0.08); --cd-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --cd-heading: "Fraunces", Georgia, "Times New Roman", serif; --cd-radius: 0.75rem; /* 12px */ --cd-radius-md: 0.6rem; /* ~9.6px */ --cd-radius-2xl: 1.35rem; /* ~21.6px */ background: #ffffff; color: var(--nx-ink); font-family: var(--cd-sans); font-feature-settings: "ss01"; /* Pin Fraunces to its text optical size (no display-cut auto-scaling). */ font-optical-sizing: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } .cd h1, .cd h2, .cd h3, .cd h4, .cd h5, .cd h6 { font-family: var(--cd-heading); font-weight: 500; line-height: 1.1; } .cd a { color: inherit; text-decoration: none; } .cd img, .cd svg { display: block; max-width: 100%; } .cd ::selection { background: var(--nx-amber); color: var(--nx-navy); } /* ----------------------------------------------------------------- layout -- */ .cd-container { width: 100%; max-width: 1232px; margin-inline: auto; padding-inline: 24px; } .cd-eyebrow { font-family: var(--cd-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* Section rhythm + shared section header */ .cd-section { padding-block: 88px; } .cd-section--tight { padding-block: 64px; } .cd-section--cream { background: var(--nx-cream); } .cd-section--cream-warm { background: var(--nx-cream-warm); } .cd-section--navy { background: var(--nx-navy); color: #fff; } .cd-section-head { max-width: 720px; } .cd-section-head--center { margin-inline: auto; text-align: center; } .cd-section-head h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; margin-top: 12px; } .cd-section-head p { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--nx-muted); } .cd-section--navy .cd-section-head p { color: rgba(255, 255, 255, 0.8); } /* --------------------------------------------------------------- reveal ---- */ .cd-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .cd-reveal[data-revealed="true"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cd-reveal { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------------- buttons --- */ .cd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding-inline: 18px; border: 1px solid transparent; border-radius: var(--cd-radius); font-family: var(--cd-sans); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.05s ease; } .cd-btn:active { transform: translateY(1px); } .cd-btn svg { width: 16px; height: 16px; } .cd-btn--primary { background: var(--nx-blue); color: #fff; } .cd-btn--primary:hover { background: #00569f; } .cd-btn--light { background: #fff; color: var(--nx-ink); } .cd-btn--light:hover { background: rgba(255, 255, 255, 0.9); } .cd-btn--outline-light { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); color: #fff; } .cd-btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); } .cd-btn--outline { border-color: var(--nx-line); background: #fff; color: var(--nx-ink); } .cd-btn--outline:hover { background: var(--nx-cream); } .cd-btn--block { width: 100%; } /* --------------------------------------------------------------- logo ------ */ .cd-logo { display: inline-flex; align-items: center; gap: 0.32em; font-family: var(--cd-sans); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-size: 22px; } .cd-logo__mark { height: 0.92em; width: auto; flex-shrink: 0; } /* Animated logo reveal — "a connection goes live" (one 1500ms clock). Plays on .cd-logo--play (home header). Reduced-motion → static logo. */ @media (prefers-reduced-motion: no-preference) { .cd-logo--play .cd-logo__dot { transform-box: fill-box; transform-origin: center; animation: cd-logo-dot 1500ms linear both; } .cd-logo--play .cd-logo__arc { stroke-dasharray: 1 3; } .cd-logo--play .cd-logo__arc--inner { animation: cd-logo-arc-inner 1500ms linear both; } .cd-logo--play .cd-logo__arc--outer { animation: cd-logo-arc-outer 1500ms linear both; } .cd-logo--play .cd-logo__word { display: inline-block; clip-path: inset(0 100% 0 0); animation: cd-logo-word 1500ms linear both; } } @keyframes cd-logo-dot { 0% { opacity: 0; transform: scale(0.35); animation-timing-function: cubic-bezier(0.50, 0, 0.75, 0); } 8% { opacity: 0.6; transform: scale(0.30); animation-timing-function: cubic-bezier(0.16, 1, 0.30, 1); } 30% { opacity: 1; transform: scale(1.06); animation-timing-function: cubic-bezier(0.34, 0, 0.20, 1); } 43% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } } @keyframes cd-logo-arc-inner { 0% { stroke-dashoffset: -1.2; } 28% { stroke-dashoffset: -1.2; animation-timing-function: cubic-bezier(0.16, 1, 0.30, 1); } 58% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes cd-logo-arc-outer { 0% { stroke-dashoffset: -1.2; } 38% { stroke-dashoffset: -1.2; animation-timing-function: cubic-bezier(0.16, 1, 0.30, 1); } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes cd-logo-word { 0% { clip-path: inset(0 100% 0 0); transform: translateX(-6px); } 55% { clip-path: inset(0 100% 0 0); transform: translateX(-6px); animation-timing-function: cubic-bezier(0, 0, 0.20, 1); } 95% { clip-path: inset(0 0 0 0); transform: translateX(0); } 100% { clip-path: inset(0 0 0 0); transform: translateX(0); } } /* --------------------------------------------------------------- backdrop -- */ .cd-backdrop { position: absolute; inset: 0; overflow: hidden; } .cd-backdrop img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------- promo ----- */ .cd-promo { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; background: #0c1830; color: #fff; padding: 10px 16px; font-size: 13px; text-align: center; } .cd-promo strong { font-weight: 600; } .cd-promo__cta { border-radius: 999px; background: rgba(255, 255, 255, 0.1); padding: 4px 12px; font-size: 12px; font-weight: 600; transition: background-color 0.18s ease; } .cd-promo__cta:hover { background: rgba(255, 255, 255, 0.2); } .cd-promo__close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.7); background: none; border: 0; cursor: pointer; transition: color 0.18s ease; } .cd-promo__close:hover { color: #fff; } .cd-promo__close svg { width: 16px; height: 16px; } @media (max-width: 640px) { .cd-promo { font-size: 12px; } } /* --------------------------------------------------------------- header ---- */ .cd-header { position: sticky; top: 0; z-index: 50; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; background: var(--nx-navy); color: #fff; } .cd-header.is-scrolled { background: rgba(255, 255, 255, 0.95); color: var(--nx-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); backdrop-filter: saturate(180%) blur(8px); } .cd-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; } .cd-header__left { display: flex; align-items: center; gap: 32px; } .cd-nav { display: none; align-items: center; gap: 4px; } .cd-nav__link { border-radius: var(--cd-radius); padding: 8px 12px; font-size: 14px; font-weight: 600; transition: color 0.18s ease; } .cd-nav__link:hover { color: var(--nx-blue); } .cd-header__ctas { display: none; align-items: center; gap: 16px; font-size: 14px; } .cd-langswitch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .cd-langswitch a { opacity: 0.55; transition: opacity 0.15s ease; } .cd-langswitch a.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .cd-langswitch a:hover { opacity: 1; } .cd-langswitch span { opacity: 0.4; } .cd-header__support { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; background: none; border: 0; color: inherit; cursor: pointer; transition: color 0.18s ease; } .cd-header__support:hover { color: var(--nx-blue); } .cd-header__support svg { width: 16px; height: 16px; } .cd-header__login { border-radius: var(--cd-radius); border: 1px solid currentColor; opacity: 1; padding: 6px 12px; font-weight: 600; transition: background-color 0.18s ease; } .cd-header__login { border-color: color-mix(in srgb, currentColor 22%, transparent); } .cd-header__login:hover { background: color-mix(in srgb, currentColor 6%, transparent); } /* demo CTA colour flips with scroll state */ .cd-header__demo { background: #fff; color: var(--nx-ink); } .cd-header.is-scrolled .cd-header__demo { background: var(--nx-blue); color: #fff; } .cd-header.is-scrolled .cd-header__demo:hover { background: #00569f; } .cd-burger { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 0; background: none; color: inherit; border-radius: var(--cd-radius); cursor: pointer; } .cd-burger svg { width: 24px; height: 24px; } .cd-burger__close { display: none; } .cd-header.is-menu-open .cd-burger__open { display: none; } .cd-header.is-menu-open .cd-burger__close { display: block; } /* mega menu (hover, desktop) */ .cd-mega { position: relative; } .cd-mega__trigger { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--cd-radius); padding: 8px 12px; font-size: 14px; font-weight: 600; background: none; border: 0; color: inherit; cursor: pointer; transition: color 0.18s ease; } .cd-mega__trigger:hover { color: var(--nx-blue); } .cd-mega__trigger svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .cd-mega:hover .cd-mega__trigger svg { transform: rotate(180deg); } .cd-mega__panel { position: absolute; left: 0; top: 100%; z-index: 50; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .cd-mega:hover .cd-mega__panel { opacity: 1; visibility: visible; transform: translateY(0); } .cd-mega__grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 4px 32px; border: 1px solid var(--nx-line); border-radius: var(--cd-radius-2xl); background: #fff; color: var(--nx-ink); padding: 24px; box-shadow: 0 20px 40px -12px rgba(2, 18, 44, 0.25); } .cd-mega__coltitle { margin-bottom: 8px; color: var(--nx-muted-2); } .cd-mega__link { display: block; border-radius: var(--cd-radius); padding: 6px 8px; transition: background-color 0.18s ease; } .cd-mega__link:hover { background: var(--nx-cream); } .cd-mega__link-label { font-size: 14px; font-weight: 600; } .cd-mega__link-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--nx-muted); } /* mobile menu panel */ .cd-mobile { display: none; border-top: 1px solid var(--nx-line); background: #fff; color: var(--nx-ink); } .cd-header.is-menu-open .cd-mobile { display: block; } .cd-mobile__inner { max-height: calc(100vh - 4rem); overflow-y: auto; padding-block: 24px; display: flex; flex-direction: column; gap: 24px; } .cd-mobile__group-title { margin-bottom: 8px; color: var(--nx-muted-2); } .cd-mobile__coltitle { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--nx-muted-2); } .cd-mobile__link { display: block; padding-block: 4px; font-size: 14px; font-weight: 600; } .cd-mobile__cols { display: flex; flex-direction: column; gap: 16px; } .cd-mobile__foot { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--nx-line); padding-top: 24px; } /* --------------------------------------------------------------- hero ------ */ .cd-hero { position: relative; overflow: hidden; background: var(--nx-navy); color: #fff; } .cd-hero__scrim-1 { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--nx-navy) 75%, transparent) 0%, color-mix(in srgb, var(--nx-navy) 35%, transparent) 50%, color-mix(in srgb, var(--nx-navy) 60%, transparent) 100%); } .cd-hero__scrim-2 { position: absolute; inset: 0; background: color-mix(in srgb, var(--nx-navy) 20%, transparent); } .cd-hero__inner { position: relative; z-index: 10; padding-top: 112px; padding-bottom: 96px; } .cd-hero__center { display: flex; flex-direction: column; align-items: center; text-align: center; } .cd-hero__eyebrow { color: var(--nx-amber); } .cd-hero h1 { margin-top: 20px; font-size: clamp(34px, 6vw, 60px); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; color: #fff; } .cd-hero__subhead { margin-top: 24px; max-width: 42rem; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); } .cd-hero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } .cd-hero__shot { margin-top: 56px; margin-inline: auto; max-width: 64rem; width: 100%; } @media (max-width: 768px) { .cd-hero__scrim-2 { background: transparent; } } /* --------------------------------------------------- app shot / browser ---- */ .cd-shot { overflow: hidden; border-radius: var(--cd-radius-2xl); background: #fff; box-shadow: 0 25px 50px -12px rgba(2, 18, 44, 0.45); outline: 1px solid rgba(0, 0, 0, 0.05); } .cd-shot__chrome { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--nx-line); background: color-mix(in srgb, var(--nx-cream) 80%, transparent); padding: 10px 16px; } .cd-shot__dots { display: flex; gap: 6px; } .cd-shot__dots span { width: 10px; height: 10px; border-radius: 999px; } .cd-shot__url { flex: 1; border-radius: var(--cd-radius-md); background: #fff; padding: 4px 12px; text-align: center; font-size: 12px; color: var(--nx-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd-shot img { width: 100%; height: auto; } /* --------------------------------------------------------------- footer ---- */ .cd-footer__cols { background: var(--nx-cream); padding-block: 64px; } .cd-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .cd-footer__col h3 { font-family: var(--cd-sans); font-size: 14px; font-weight: 600; color: var(--nx-ink); margin-bottom: 12px; } .cd-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .cd-footer__col a { font-size: 14px; color: var(--nx-muted); transition: color 0.18s ease; } .cd-footer__col a:hover { color: var(--nx-ink); } .cd-footer__brand { position: relative; overflow: hidden; background: var(--nx-navy); } .cd-footer__brand-scrim { pointer-events: none; position: absolute; inset-inline: 0; bottom: 0; z-index: 0; height: 192px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); } .cd-footer__lockup { position: relative; z-index: 10; padding: 64px 24px 0; text-align: center; color: #fff; } .cd-footer__lockup .cd-logo { font-size: clamp(2.2rem, 11vw, 9rem); color: #fff; } .cd-footer__bottom { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; font-size: 12px; color: #fff; } .cd-footer__bottom p { margin: 0; } .cd-footer__made { font-weight: 500; } .cd-footer__copy { color: rgba(255, 255, 255, 0.8); } .cd-footer__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .cd-footer__badges span { border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); padding: 4px 12px; color: rgba(255, 255, 255, 0.9); } .cd-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; } .cd-footer__legal a { color: rgba(255, 255, 255, 0.9); transition: color 0.18s ease; } .cd-footer__legal a:hover { color: #fff; } /* --------------------------------------------------------- responsive ------ */ @media (min-width: 768px) { .cd-hero__inner { padding-top: 128px; } .cd-footer__grid { grid-template-columns: repeat(3, 1fr); } .cd-footer__bottom { flex-direction: row; } } @media (min-width: 1024px) { .cd-nav { display: flex; } .cd-header__ctas { display: flex; } .cd-burger { display: none; } .cd-mobile { display: none !important; } .cd-footer__grid { grid-template-columns: repeat(5, 1fr); } } /* ============================================================================ HOME SECTIONS ============================================================================ */ .cd-ic { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* shared section primitives */ .cd-eyebrow--muted { color: var(--nx-muted-2); } .cd-eyebrow--amber { color: var(--nx-amber); } .cd-h2 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; } .cd-lead { font-size: 18px; line-height: 1.65; color: var(--nx-muted); } .cd-tone-core { --tone: var(--nx-teal); --tone-ring: rgba(31, 138, 140, 0.4); } .cd-tone-dialer { --tone: var(--nx-blue); --tone-ring: rgba(0, 98, 184, 0.4); } .cd-tone-addon { --tone: var(--nx-amber); --tone-ring: rgba(245, 158, 11, 0.5); } /* trust bar */ .cd-trust { background: var(--nx-cream); padding-block: 28px; } .cd-trust__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; } .cd-trust__lead { display: flex; align-items: center; gap: 12px; max-width: 28rem; } .cd-trust__lead .cd-ic { color: var(--nx-teal); } .cd-flag { width: 26px; height: auto; flex-shrink: 0; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); } .cd-trust__lead p { font-size: 16px; font-weight: 500; color: var(--nx-ink); } .cd-trust__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; } .cd-trust__stats span { border-radius: 999px; border: 1px solid var(--nx-line); background: #fff; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--nx-muted); } /* problem */ .cd-problem { background: #fff; padding-block: 96px; } .cd-problem__head { max-width: 42rem; } .cd-problem__head h2 { margin-top: 16px; } .cd-problem__head p { margin-top: 20px; } .cd-problem__grid { margin-top: 48px; display: grid; gap: 20px; } .cd-problem__card { border-radius: 21px; border: 1px solid var(--nx-line); background: color-mix(in srgb, var(--nx-cream) 60%, #fff); padding: 24px; } .cd-icon-badge { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--nx-navy); color: #fff; } .cd-problem__card p { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--nx-ink); } /* how it works */ .cd-how { background: var(--nx-cream); padding-block: 96px; } .cd-how__inner { max-width: 48rem; margin-inline: auto; text-align: center; } .cd-how__inner h2 { margin-top: 16px; } .cd-how__inner p { margin-top: 20px; } /* build your suite */ .cd-suite { background: #fff; padding-block: 96px; } .cd-suite__head { max-width: 42rem; } .cd-suite__head h2 { margin-top: 16px; } .cd-suite__head p { margin-top: 16px; max-width: 36rem; } .cd-suite__bands { margin-top: 48px; display: flex; flex-direction: column; gap: 40px; } .cd-suite__band-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .cd-suite__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--tone); } .cd-suite__band-title { font-size: 18px; font-weight: 600; color: var(--nx-ink); } .cd-suite__band-note { font-size: 14px; color: var(--nx-muted); } .cd-suite__grid { margin-top: 16px; display: grid; gap: 12px; } .cd-suite__tile { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-radius: 18px; border: 1px solid var(--nx-line); padding: 16px; text-align: left; width: 100%; background: color-mix(in srgb, var(--nx-cream) 60%, #fff); cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .cd-suite__tile:hover { background: var(--nx-cream); } .cd-suite__tile[aria-pressed="true"] { border-color: transparent; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--tone-ring); } .cd-suite__tile[data-locked="true"] { cursor: default; } .cd-suite__tile-text { min-width: 0; } .cd-suite__tile-name { font-size: 16px; font-weight: 600; color: var(--nx-muted); } .cd-suite__tile-desc { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--nx-muted-2); } .cd-suite__tile[aria-pressed="true"] .cd-suite__tile-name { color: var(--nx-ink); } .cd-suite__tile[aria-pressed="true"] .cd-suite__tile-desc { color: var(--nx-muted); } .cd-switch { position: relative; margin-top: 2px; display: inline-flex; height: 24px; width: 40px; flex-shrink: 0; align-items: center; border-radius: 999px; background: color-mix(in srgb, var(--nx-muted-2) 40%, transparent); transition: background-color 0.18s ease; } .cd-switch__knob { position: absolute; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: left 0.18s ease; } .cd-suite__tile[aria-pressed="true"] .cd-switch { background: var(--tone); } .cd-suite__tile[aria-pressed="true"] .cd-switch__knob { left: 18px; } .cd-suite__summary { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; border-radius: 28px; background: var(--nx-navy); padding: 24px; color: #fff; } .cd-suite__summary p { font-size: 16px; color: rgba(255, 255, 255, 0.9); } .cd-suite__count { font-family: var(--cd-heading); font-size: 24px; font-weight: 600; color: #fff; } /* pillars */ .cd-pillars { background: var(--nx-cream); padding-block: 96px; } .cd-pillars__grid { display: grid; gap: 24px; } .cd-pillar { display: flex; flex-direction: column; border-radius: 28px; border: 1px solid var(--nx-line); background: #fff; padding: 32px; } .cd-pillar__top { display: flex; align-items: center; gap: 12px; } .cd-pillar h3 { margin-top: 20px; font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--nx-ink); } .cd-pillar__body { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--nx-muted); } .cd-pillar__proof { margin-top: auto; border-top: 1px solid var(--nx-line); padding-top: 16px; font-size: 14px; font-weight: 500; color: var(--nx-ink); } /* proof */ .cd-proof { background: var(--nx-navy); color: #fff; padding-block: 96px; } .cd-proof__head { max-width: 42rem; } .cd-proof__head h2 { margin-top: 16px; } .cd-proof__head p { margin-top: 20px; color: rgba(255, 255, 255, 0.8); } .cd-proof__grid { margin-top: 40px; display: grid; gap: 12px; } .cd-proof__chip { display: flex; align-items: flex-start; gap: 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); padding: 20px; } .cd-proof__chip .cd-ic { color: var(--nx-teal); margin-top: 2px; } .cd-proof__chip span { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); } /* pricing */ .cd-pricing { background: #fff; padding-block: 96px; } .cd-pricing__head { max-width: 42rem; } .cd-pricing__head h2 { margin-top: 16px; } .cd-pricing__head p { margin-top: 16px; } .cd-pricing__grid { margin-top: 48px; display: grid; gap: 20px; align-items: stretch; } .cd-plan { display: flex; flex-direction: column; border-radius: 28px; border: 1px solid var(--nx-line); background: #fff; padding: 32px; } .cd-plan--dark { border-color: transparent; background: var(--nx-navy); color: #fff; } .cd-plan--highlighted { box-shadow: 0 0 0 2px var(--nx-blue); } .cd-plan__badge { align-self: flex-start; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; background: var(--nx-cream); color: var(--nx-muted); } .cd-plan--highlighted .cd-plan__badge { background: var(--nx-blue); color: #fff; } .cd-plan--dark .cd-plan__badge { background: rgba(255, 255, 255, 0.15); color: #fff; } .cd-plan h3 { margin-top: 16px; font-size: 24px; } .cd-plan__tagline { font-size: 16px; color: var(--nx-muted); } .cd-plan--dark .cd-plan__tagline { color: rgba(255, 255, 255, 0.7); } .cd-plan__price { margin-top: 20px; display: flex; align-items: baseline; gap: 4px; } .cd-plan__price-big { font-family: var(--cd-heading); font-size: 48px; font-weight: 600; } .cd-plan__price-med { font-family: var(--cd-heading); font-size: 30px; font-weight: 600; } .cd-plan__price-suffix { font-size: 14px; color: var(--nx-muted); } .cd-plan--dark .cd-plan__price-suffix { color: rgba(255, 255, 255, 0.7); } .cd-plan__rule { margin-block: 20px; border-top: 1px solid var(--nx-line); } .cd-plan--dark .cd-plan__rule { border-color: rgba(255, 255, 255, 0.1); } .cd-plan__desc { font-size: 16px; line-height: 1.6; color: var(--nx-muted); } .cd-plan--dark .cd-plan__desc { color: rgba(255, 255, 255, 0.7); } .cd-plan__features-heading { margin-top: 20px; font-size: 16px; font-weight: 600; color: var(--nx-blue); } .cd-plan__features { margin-top: 12px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cd-plan__features li { display: flex; align-items: center; gap: 8px; font-size: 16px; } .cd-plan__features .cd-ic { width: 16px; height: 16px; color: var(--nx-blue); } .cd-plan--dark .cd-plan__features .cd-ic { color: #fff; } .cd-plan__cta-wrap { margin-top: auto; padding-top: 24px; } .cd-plan__cta { display: flex; width: 100%; align-items: center; justify-content: space-between; border-radius: 18px; padding: 16px 20px; font-size: 14px; font-weight: 600; background: var(--nx-navy); color: #fff; transition: background-color 0.18s ease; } .cd-plan__cta:hover { background: var(--nx-navy-deep); } .cd-plan--highlighted .cd-plan__cta { background: var(--nx-blue); } .cd-plan--highlighted .cd-plan__cta:hover { background: #00569f; } .cd-plan--dark .cd-plan__cta { border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; } .cd-plan--dark .cd-plan__cta:hover { background: rgba(255, 255, 255, 0.1); } .cd-plan__cta-arrow { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.15); } .cd-plan__cta-arrow .cd-ic { width: 16px; height: 16px; } .cd-pricing__note { margin-top: 32px; text-align: center; font-size: 16px; color: var(--nx-muted); } /* founder */ .cd-founder { background: var(--nx-cream); padding-block: 96px; } .cd-founder__grid { display: grid; gap: 48px; } .cd-founder__portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: var(--nx-navy); box-shadow: 0 25px 50px -12px rgba(2, 18, 44, 0.4); } .cd-founder__initials { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.3); font-family: var(--cd-heading); font-size: 6rem; } .cd-founder__portrait-scrim { position: absolute; inset-inline: 0; bottom: 0; height: 96px; background: linear-gradient(to top, rgba(1, 12, 31, 0.6), transparent); } .cd-founder__name-wrap { position: absolute; bottom: 20px; left: 24px; } .cd-founder__name { font-size: 16px; font-weight: 600; color: #fff; } .cd-founder__role { font-size: 14px; color: rgba(255, 255, 255, 0.7); } .cd-founder__body { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; font-size: 18px; line-height: 1.6; color: var(--nx-muted); } .cd-founder__body h2 { color: var(--nx-ink); } /* closing */ .cd-closing { background: var(--nx-navy); color: #fff; padding-block: 96px; } .cd-closing__inner { max-width: 48rem; margin-inline: auto; text-align: center; } .cd-closing__inner p { margin-top: 20px; margin-inline: auto; max-width: 42rem; color: rgba(255, 255, 255, 0.8); } .cd-closing__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } @media (min-width: 640px) { .cd-suite__grid { grid-template-columns: repeat(2, 1fr); } .cd-proof__grid { grid-template-columns: repeat(2, 1fr); } .cd-suite__summary { flex-direction: row; align-items: center; padding: 32px; } } @media (min-width: 768px) { .cd-trust__inner { flex-direction: row; } .cd-trust__stats { width: auto; justify-content: flex-end; } .cd-problem, .cd-suite, .cd-pillars, .cd-pricing, .cd-founder { padding-block: 128px; } .cd-problem__grid { grid-template-columns: repeat(3, 1fr); } .cd-pricing__grid { grid-template-columns: repeat(3, 1fr); } .cd-plan--highlighted { margin-top: -8px; } } @media (min-width: 1024px) { .cd-suite__grid { grid-template-columns: repeat(3, 1fr); } .cd-proof__grid { grid-template-columns: repeat(4, 1fr); } .cd-pillars__grid { grid-template-columns: repeat(2, 1fr); } .cd-founder__grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; } } /* ============================================================================ SUBPAGES (data-driven: hero + 7 section types + closing) ============================================================================ */ .cd-phero { position: relative; overflow: hidden; } .cd-phero--navy { background: var(--nx-navy); color: #fff; } .cd-phero--light { background: var(--nx-cream); } .cd-phero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--nx-navy) 80%, transparent), color-mix(in srgb, var(--nx-navy) 50%, transparent) 50%, color-mix(in srgb, var(--nx-navy) 75%, transparent)); } .cd-phero__inner { position: relative; z-index: 10; max-width: 48rem; padding-block: 96px; } .cd-phero h1 { margin-top: 16px; font-size: clamp(34px, 6vw, 60px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; } .cd-phero--navy h1 { color: #fff; } .cd-phero--light h1 { color: var(--nx-ink); } .cd-phero__subhead { margin-top: 20px; max-width: 42rem; font-size: 18px; line-height: 1.65; } .cd-phero--navy .cd-phero__subhead { color: rgba(255, 255, 255, 0.85); } .cd-phero--light .cd-phero__subhead { color: var(--nx-muted); } .cd-phero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .cd-sec { padding-block: 80px; } .cd-sec--white { background: #fff; } .cd-sec--cream { background: var(--nx-cream); } .cd-sech2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 500; line-height: 1.1; color: var(--nx-ink); } .cd-sec-head { max-width: 42rem; margin-bottom: 40px; } .cd-sec-head h2 { margin-top: 12px; } /* feature split */ .cd-fsplit { display: grid; align-items: center; gap: 48px; } .cd-fsplit__text h2 { margin-top: 12px; max-width: 36rem; } .cd-fsplit__text > .cd-lead { margin-top: 16px; max-width: 36rem; } .cd-fsplit__bullets { margin-top: 24px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cd-fsplit__bullets li { display: flex; align-items: flex-start; gap: 12px; } .cd-fsplit__bullets .cd-ic { width: 16px; height: 16px; color: var(--nx-blue); margin-top: 4px; } .cd-fsplit__bullets span { font-size: 16px; color: var(--nx-ink); } /* capability grid */ .cd-cap__grid { display: grid; gap: 20px; } .cd-cap__card { border-radius: 18px; border: 1px solid var(--nx-line); background: #fff; padding: 24px; } .cd-cap__card h3 { margin-top: 16px; font-size: 18px; font-weight: 600; color: var(--nx-ink); } .cd-cap__card p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--nx-muted); } /* steps */ .cd-steps__grid { display: grid; gap: 24px; } .cd-step__num { font-family: var(--cd-heading); font-size: 30px; font-weight: 600; color: var(--nx-blue); } .cd-step h3 { margin-top: 12px; font-size: 18px; font-weight: 600; color: var(--nx-ink); } .cd-step p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--nx-muted); } /* stat chips */ .cd-chips__row { display: flex; flex-wrap: wrap; gap: 12px; } .cd-chips__row span { border-radius: 999px; border: 1px solid var(--nx-line); background: #fff; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--nx-muted); } /* faq */ .cd-faq { max-width: 48rem; } .cd-faq h2 { margin-bottom: 32px; } .cd-faq__list { border-top: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); } .cd-faq__item { padding-block: 20px; } .cd-faq__item + .cd-faq__item { border-top: 1px solid var(--nx-line); } .cd-faq__item summary { display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 600; color: var(--nx-ink); } .cd-faq__item summary::-webkit-details-marker { display: none; } .cd-faq__item summary .cd-ic { width: 20px; height: 20px; color: var(--nx-muted); transition: transform 0.2s ease; } .cd-faq__item[open] summary .cd-ic { transform: rotate(180deg); } .cd-faq__a { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--nx-muted); } /* quote */ .cd-quote { max-width: 48rem; margin-inline: auto; text-align: center; } .cd-quote p { font-family: var(--cd-heading); font-size: clamp(22px, 3vw, 30px); line-height: 1.35; color: var(--nx-ink); } .cd-quote__attr { margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--nx-muted); } /* prose */ .cd-prose { max-width: 48rem; } .cd-prose p { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--nx-muted); } @media (min-width: 768px) { .cd-phero__inner { padding-block: 112px; } .cd-sec { padding-block: 96px; } .cd-cap__grid { grid-template-columns: repeat(2, 1fr); } .cd-steps__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .cd-fsplit--shot { grid-template-columns: repeat(2, 1fr); } .cd-fsplit--flip.cd-fsplit--shot .cd-fsplit__text { order: 2; } .cd-fsplit--flip.cd-fsplit--shot .cd-fsplit__shot { order: 1; } .cd-cap__grid { grid-template-columns: repeat(3, 1fr); } .cd-steps__grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================================ FUNCTIONAL + LEGAL PAGES (demo, contact, start, support, legal, thanks) ============================================================================ */ .cd-simple--cream { background: var(--nx-cream); } .cd-simple__inner { max-width: 48rem; padding-block: 96px; } .cd-simple--center .cd-simple__inner { max-width: 42rem; margin-inline: auto; text-align: center; } .cd-simple h1 { margin-top: 16px; font-size: clamp(32px, 5vw, 48px); font-weight: 500; line-height: 1.05; color: var(--nx-ink); } .cd-simple__sub { margin-top: 20px; font-size: 18px; line-height: 1.65; color: var(--nx-muted); } .cd-block { background: #fff; } .cd-block__inner { padding-block: 64px; } .cd-block__inner--narrow { max-width: 42rem; margin-inline: auto; } .cd-narrow { max-width: 42rem; margin-inline: auto; } .cd-step__title { margin-top: 12px; font-size: 18px; font-weight: 600; color: var(--nx-ink); } /* inquiry form */ .cd-card { border-radius: 18px; border: 1px solid var(--nx-line); background: #fff; padding: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .cd-card--light { color: var(--nx-ink); border: 0; box-shadow: 0 25px 50px -12px rgba(2, 18, 44, 0.25); } .cd-form { display: grid; gap: 16px; } .cd-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--nx-ink); } .cd-field input, .cd-field textarea { width: 100%; border-radius: 10px; border: 1px solid var(--nx-line); padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--nx-ink); background: #fff; } .cd-field input:focus, .cd-field textarea:focus { outline: 2px solid var(--nx-blue); outline-offset: 1px; border-color: transparent; } .cd-field--full { grid-column: 1 / -1; } .cd-form__submit { grid-column: 1 / -1; } .cd-form__note { grid-column: 1 / -1; font-size: 14px; color: var(--nx-muted); } .cd-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cd-btn--lg { height: 48px; font-size: 16px; padding-inline: 22px; } /* demo split */ .cd-demo { background: var(--nx-navy); color: #fff; } .cd-demo__grid { display: grid; gap: 48px; padding-block: 96px; align-items: start; } .cd-demo h1 { margin-top: 16px; font-size: clamp(32px, 5vw, 48px); font-weight: 500; line-height: 1.05; color: #fff; } .cd-demo__sub { margin-top: 20px; max-width: 28rem; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); } .cd-demo__points { margin-top: 32px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cd-demo__points li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255, 255, 255, 0.85); } .cd-demo__points .cd-ic { width: 16px; height: 16px; color: var(--nx-teal); margin-top: 4px; } /* support cards */ .cd-support__grid { display: grid; gap: 20px; } .cd-support__card { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--nx-line); background: #fff; padding: 24px; } .cd-support__card h2 { margin-top: 16px; font-size: 18px; font-weight: 600; color: var(--nx-ink); } .cd-support__card p { margin-top: 6px; flex: 1; font-size: 16px; line-height: 1.6; color: var(--nx-muted); } .cd-support__link { margin-top: 16px; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--nx-blue); } .cd-support__link .cd-ic { width: 16px; height: 16px; } /* start steps */ .cd-start__steps { display: grid; gap: 32px; } /* legal body */ .cd-legal__body p { max-width: 48rem; font-size: 16px; line-height: 1.6; color: var(--nx-muted); } .cd-legal__body a { font-weight: 600; color: var(--nx-blue); } @media (min-width: 640px) { .cd-form { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .cd-simple__inner { padding-block: 112px; } .cd-support__grid { grid-template-columns: repeat(3, 1fr); } .cd-start__steps { grid-template-columns: repeat(3, 1fr); } .cd-card { padding: 32px; } } @media (min-width: 1024px) { .cd-demo__grid { grid-template-columns: repeat(2, 1fr); } }