:root{ --cf-public-max: 1180px; --cf-public-nav-h: 76px; } /* Cignyl's `.su-theme-dark` class is primarily designed as a themed surface/container. We also use it as a global theme toggle on ``, so we neutralize the container-specific background/border/radius/overlay effects here. */ html.su-theme-dark{ background: none; border: 0; border-radius: 0; overflow: visible; position: static; } html.su-theme-dark::before{ content: none; } html.su-theme-dark > body{ position: static; z-index: auto; } .cf-public{ background: radial-gradient(1200px 600px at 18% -20%, rgba(37,99,235,.18), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(16,185,129,.12), transparent 55%), var(--su-color-surface-subtle, #f7f8fa); color: var(--su-color-text, #0f172a); min-height: 100vh; } .cf-public-main{ padding-top: var(--cf-public-nav-h); } /* NAV */ .cf-public-nav{ position: fixed; inset: 0 0 auto 0; height: var(--cf-public-nav-h); z-index: 1200; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: color-mix(in srgb, var(--su-color-surface-subtle, #ffffff) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--su-color-border, #e5e7eb) 65%, transparent); } .su-theme-dark .cf-public-nav{ background: color-mix(in srgb, var(--su-color-surface-subtle, #0f172a) 82%, transparent); border-bottom-color: rgba(148,163,184,.18); } .cf-public-nav__inner{ max-width: var(--cf-public-max); margin: 0 auto; height: 100%; padding: 0 18px; display:flex; align-items:center; justify-content: space-between; gap: 16px; } .cf-public-nav__brand{ display:flex; align-items:center; gap: 12px; text-decoration:none; color: inherit; min-width: 0; } .cf-public-nav__mark{ width: 42px; height: 42px; border-radius: 14px; display:flex; align-items:center; justify-content:center; color: #2563eb; background: rgba(37,99,235,.12); } .su-theme-dark .cf-public-nav__mark{ background: rgba(37,99,235,.18); color: #93c5fd; } .cf-public-nav__mark svg{ width: 28px; height: 28px; } .cf-public-nav__brand-text{ display:flex; flex-direction:column; min-width:0; line-height:1.1; } .cf-public-nav__brand-name{ font-weight: 900; letter-spacing: .01em; font-size: 18px; } .cf-public-nav__brand-tag{ font-size: 11px; opacity: .75; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-public-nav__toggle{ display:none; border:0; background: transparent; padding: 10px; border-radius: 10px; cursor:pointer; } .cf-public-nav__toggle span{ display:block; width: 20px; height: 2px; background: currentColor; opacity: .8; } .cf-public-nav__toggle span+span{ margin-top: 4px; } .cf-public-nav__links{ display:flex; align-items:center; gap: 14px; } .cf-public-nav__link{ text-decoration:none; font-weight: 700; font-size: 13px; opacity: .82; padding: 10px 10px; border-radius: 12px; } .cf-public-nav__link:hover{ opacity: 1; background: rgba(148,163,184,.18); } .su-theme-dark .cf-public-nav__link:hover{ background: rgba(148,163,184,.12); } .cf-public-nav__link--active{ opacity: 1; background: rgba(37,99,235,.12); } .su-theme-dark .cf-public-nav__link--active{ background: rgba(37,99,235,.18); } .cf-public-nav__actions{ display:flex; align-items:center; gap: 10px; margin-left: 8px; } @media (max-width: 980px){ .cf-public-nav__toggle{ display:inline-flex; } .cf-public-nav__links{ position: fixed; top: var(--cf-public-nav-h); left: 0; right: 0; padding: 14px 18px 20px; display:none; flex-direction:column; align-items: stretch; gap: 8px; background: color-mix(in srgb, var(--su-color-surface-subtle, #ffffff) 92%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--su-color-border, #e5e7eb) 65%, transparent); } .su-theme-dark .cf-public-nav__links{ background: color-mix(in srgb, var(--su-color-surface-subtle, #0f172a) 88%, transparent); border-bottom-color: rgba(148,163,184,.18); } .cf-public-nav[data-open="1"] .cf-public-nav__links{ display:flex; } .cf-public-nav__actions{ margin-left: 0; flex-wrap: wrap; } } /* HERO */ .cf-public-hero{ padding: 44px 0 22px; } .cf-public-hero__inner{ max-width: var(--cf-public-max); margin: 0 auto; padding: 0 18px; display:grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: center; } @media (max-width: 980px){ .cf-public-hero__inner{ grid-template-columns: 1fr; } } .cf-public-hero__eyebrow{ display:inline-flex; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--su-color-text, #0f172a) 82%, transparent); background: rgba(37,99,235,.10); padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(37,99,235,.16); } .su-theme-dark .cf-public-hero__eyebrow{ background: rgba(37,99,235,.16); border-color: rgba(37,99,235,.22); color: rgba(226,232,240,.92); } .cf-public-hero__title{ font-size: clamp(34px, 4vw, 54px); line-height: 1.06; margin: 14px 0 10px; font-weight: 950; letter-spacing: -.02em; } .cf-public-hero__lead{ font-size: 16px; line-height: 1.6; opacity: .88; margin: 0; max-width: 56ch; } .cf-public-hero__actions{ margin-top: 18px; display:flex; gap: 12px; flex-wrap: wrap; } .cf-public-hero__meta{ margin-top: 18px; display:flex; gap: 10px; flex-wrap: wrap; } .cf-public-pill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: 12px; background: rgba(148,163,184,.14); } .su-theme-dark .cf-public-pill{ background: rgba(148,163,184,.10); } .cf-public-hero__visual{ min-height: 360px; } .cf-public-glass{ height: 100%; border-radius: 24px; background: linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.40)); border: 1px solid rgba(148,163,184,.30); box-shadow: 0 30px 70px rgba(2,6,23,.18); padding: 18px; display:flex; flex-direction:column; gap: 10px; } .su-theme-dark .cf-public-glass{ background: linear-gradient(140deg, rgba(15,23,42,.72), rgba(15,23,42,.44)); border-color: rgba(148,163,184,.18); box-shadow: 0 40px 90px rgba(0,0,0,.45); } .cf-public-glass__row{ display:flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(148,163,184,.12); } .su-theme-dark .cf-public-glass__row{ background: rgba(148,163,184,.10); } .cf-public-glass__k{ font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; } .cf-public-glass__v{ font-weight: 800; font-size: 13px; } .cf-public-glass__map{ position: relative; flex: 1; border-radius: 18px; background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.18), transparent 45%), radial-gradient(circle at 70% 60%, rgba(16,185,129,.12), transparent 50%), rgba(148,163,184,.14); overflow:hidden; } .su-theme-dark .cf-public-glass__map{ background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.25), transparent 45%), radial-gradient(circle at 70% 60%, rgba(16,185,129,.18), transparent 50%), rgba(148,163,184,.10); } .cf-public-glass__circle{ position:absolute; inset: 18% 12% 18% 12%; border-radius: 999px; border: 2px dashed rgba(37,99,235,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .su-theme-dark .cf-public-glass__circle{ border-color: rgba(147,197,253,.42); box-shadow: inset 0 0 0 1px rgba(148,163,184,.16); } .cf-public-glass__pin{ position:absolute; width: 12px; height: 12px; border-radius: 999px; background: #2563eb; box-shadow: 0 10px 22px rgba(37,99,235,.35); } .su-theme-dark .cf-public-glass__pin{ background: #93c5fd; } .cf-public-glass__pin--a{ left: 32%; top: 34%; } .cf-public-glass__pin--b{ left: 58%; top: 48%; background: #10b981; box-shadow: 0 10px 22px rgba(16,185,129,.28); } .su-theme-dark .cf-public-glass__pin--b{ background: #34d399; } .cf-public-glass__pin--c{ left: 45%; top: 62%; } /* SECTIONS */ .cf-public-section{ padding: 48px 0; } .cf-public-section--alt{ background: rgba(148,163,184,.08); } .su-theme-dark .cf-public-section--alt{ background: rgba(148,163,184,.06); } .cf-public-section__inner{ max-width: var(--cf-public-max); margin: 0 auto; padding: 0 18px; } .cf-public-section__head{ max-width: 760px; } .cf-public-section__title{ font-size: 26px; margin: 0 0 8px; font-weight: 950; letter-spacing: -.01em; } .cf-public-section__subtitle{ margin: 0; opacity: .84; line-height: 1.6; } .cf-public-cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; } .cf-public-cards--two{ grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 980px){ .cf-public-cards, .cf-public-cards--two{ grid-template-columns: 1fr; } } .cf-public-card{ padding: 18px 18px; } .cf-public-card__title{ font-weight: 950; font-size: 16px; margin-bottom: 8px; } .cf-public-card__body{ opacity: .86; line-height: 1.55; } .cf-public-split{ display:grid; grid-template-columns: 1fr .85fr; gap: 18px; margin-top: 22px; align-items: start; } @media (max-width: 980px){ .cf-public-split{ grid-template-columns: 1fr; } } .cf-public-list{ margin: 12px 0 0; padding-left: 18px; line-height: 1.7; opacity: .9; } .cf-public-metrics{ padding: 18px; } .cf-public-metrics__k{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; opacity: .72; } .cf-public-metrics__v{ font-weight: 950; font-size: 20px; margin: 4px 0 12px; } .cf-public-metrics__divider{ height: 1px; background: rgba(148,163,184,.20); margin: 12px 0; } .cf-public-cta{ margin-top: 26px; padding: 18px; border-radius: 18px; display:flex; align-items:center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(16,185,129,.10)); border: 1px solid rgba(148,163,184,.22); } .su-theme-dark .cf-public-cta{ border-color: rgba(148,163,184,.18); } @media (max-width: 780px){ .cf-public-cta{ flex-direction:column; align-items: stretch; } } .cf-public-cta__title{ font-weight: 950; font-size: 18px; } .cf-public-cta__subtitle{ opacity: .86; margin-top: 4px; } .cf-public-cta__actions{ display:flex; gap: 10px; flex-wrap: wrap; } .cf-public-page-hero{ padding: 38px 0 0; } .cf-public-page-hero__inner{ max-width: var(--cf-public-max); margin: 0 auto; padding: 0 18px; } .cf-public-page-hero__title{ font-size: 40px; font-weight: 950; margin: 0 0 10px; letter-spacing: -.02em; } .cf-public-page-hero__lead{ margin: 0; opacity: .86; max-width: 70ch; line-height: 1.6; } .cf-public-contact-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 980px){ .cf-public-contact-grid{ grid-template-columns: 1fr; } } .cf-public-muted{ opacity: .75; } /* FOOTER */ .cf-public-footer{ padding: 44px 0 34px; border-top: 1px solid rgba(148,163,184,.22); } .su-theme-dark .cf-public-footer{ border-top-color: rgba(148,163,184,.16); } .cf-public-footer__inner{ max-width: var(--cf-public-max); margin: 0 auto; padding: 0 18px; } .cf-public-footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 18px; } @media (max-width: 980px){ .cf-public-footer__grid{ grid-template-columns: 1fr; } } .cf-public-footer__brand{ font-weight: 950; font-size: 18px; } .cf-public-footer__tag{ opacity: .8; margin-top: 6px; line-height: 1.6; } .cf-public-footer__title{ font-weight: 950; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: 10px; } .cf-public-footer__link{ display:block; text-decoration:none; color: inherit; opacity: .82; padding: 6px 0; } .cf-public-footer__link:hover{ opacity: 1; } .cf-public-footer__bottom{ margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(148,163,184,.18); display:flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; opacity: .78; } .su-theme-dark .cf-public-footer__bottom{ border-top-color: rgba(148,163,184,.14); } .cf-public-footer__muted{ text-decoration:none; color: inherit; opacity: .85; } .cf-public-footer__muted:hover{ opacity: 1; } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; } }