/* ==========================================================================
Cybriva Web Style Sheet v1.0 (2026-09-24)
Brand: Cybriva AI | A product family of TS Consulting LLC
--------------------------------------------------------------------------
Contents
1. Fonts
2. Design tokens (light, dark via OS setting, dark via data-theme)
3. Base and typography
4. Layout (container, section, grid, stack)
5. Components: logo, nav, buttons, eyebrow, chips/badges, cards,
industry cards, price, check list, table, segmented toggle,
forms, callout, kit panel, FAQ, footer
6. Utilities
7. Motion and accessibility
Class prefix: cy- Token prefix: --cy-
========================================================================== */
/* 1. Fonts ----------------------------------------------------------------
Headings: Montserrat 700/800. Body: Open Sans 400/600.
Add this to (or self-host the same families):
*/
/* 2. Design tokens -------------------------------------------------------- */
:root {
/* Brand palette (fixed, from the Cybriva brand sheet) */
--cy-navy: #123B5D;
--cy-blue: #0B5ED7;
--cy-teal: #0EA5A8;
--cy-teal-ink: #0A7C7F; /* teal for small text on white (4.9:1) */
--cy-sky: #EAF4FA;
--cy-slate: #1F2937;
--cy-gray: #64748B;
/* Industry colors (chips and dots only) */
--cy-ind-small-business: #0B5ED7;
--cy-ind-law: #1478A6;
--cy-ind-real-estate: #0A8F92;
--cy-ind-healthcare: #2E8B4E;
--cy-ind-accounting: #B45309;
--cy-ind-insurance: #0F766E;
--cy-ind-soc2: #6243B8;
--cy-ind-library: #123B5D;
/* Semantic tokens: light theme */
--cy-bg: #FFFFFF;
--cy-bg-alt: #F3F8FC;
--cy-surface: #FFFFFF;
--cy-surface-2: #EAF4FA;
--cy-text: #1F2937;
--cy-text-strong: #123B5D;
--cy-text-muted: #55657A;
--cy-border: #D5E2EC;
--cy-border-strong: #A9BFD1;
--cy-accent: #0B5ED7;
--cy-accent-hover: #0A4FB6;
--cy-accent-contrast: #FFFFFF;
--cy-accent-2: #0A7C7F;
--cy-link: #0B5ED7;
--cy-focus: #0B5ED7;
--cy-band: #123B5D; /* navy band background */
--cy-band-text: #FFFFFF;
--cy-band-muted: #B8C7D6;
--cy-success: #2E8B4E;
--cy-warning: #B45309;
/* Logo fills (inline SVG logo uses these) */
--cy-logo-outer: #123B5D;
--cy-logo-cyb: #123B5D;
--cy-logo-riva: #0EA5A8;
--cy-logo-badge: #0B5ED7;
--cy-logo-badge-text: #FFFFFF;
/* Type */
--cy-font-display: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--cy-font-body: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--cy-text-xs: 0.8125rem; /* 13 */
--cy-text-sm: 0.875rem; /* 14 */
--cy-text-md: 1rem; /* 16 */
--cy-text-lg: 1.125rem; /* 18 */
--cy-text-xl: 1.375rem; /* 22 */
--cy-text-2xl: 1.75rem; /* 28 */
--cy-text-3xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); /* 30-40 */
--cy-text-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); /* 36-56 */
/* Space (8-pt scale) */
--cy-space-1: 4px;
--cy-space-2: 8px;
--cy-space-3: 12px;
--cy-space-4: 16px;
--cy-space-5: 24px;
--cy-space-6: 32px;
--cy-space-7: 48px;
--cy-space-8: 64px;
--cy-space-9: 96px;
/* Shape and depth */
--cy-radius-sm: 6px;
--cy-radius-md: 10px;
--cy-radius-lg: 16px;
--cy-radius-pill: 999px;
--cy-shadow-sm: 0 1px 2px rgba(18, 59, 93, 0.08);
--cy-shadow-md: 0 8px 24px rgba(18, 59, 93, 0.10);
--cy-container: 1160px;
--cy-gutter: 20px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--cy-bg: #0B1B2B;
--cy-bg-alt: #0E2234;
--cy-surface: #112A40;
--cy-surface-2: #16324B;
--cy-text: #DCE6EF;
--cy-text-strong: #FFFFFF;
--cy-text-muted: #9FB3C6;
--cy-border: #24445F;
--cy-border-strong: #3A6184;
--cy-accent: #4C8DF6;
--cy-accent-hover: #6FA3F8;
--cy-accent-contrast: #081624;
--cy-accent-2: #2EC4C6;
--cy-link: #7FB0FA;
--cy-focus: #7FB0FA;
--cy-band: #07131F;
--cy-band-text: #FFFFFF;
--cy-band-muted: #9FB3C6;
--cy-success: #4FBF78;
--cy-warning: #F0A44B;
--cy-logo-outer: #FFFFFF;
--cy-logo-cyb: #FFFFFF;
--cy-logo-riva: #2EC4C6;
--cy-logo-badge: #FFFFFF;
--cy-logo-badge-text: #123B5D;
--cy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--cy-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--cy-bg: #0B1B2B;
--cy-bg-alt: #0E2234;
--cy-surface: #112A40;
--cy-surface-2: #16324B;
--cy-text: #DCE6EF;
--cy-text-strong: #FFFFFF;
--cy-text-muted: #9FB3C6;
--cy-border: #24445F;
--cy-border-strong: #3A6184;
--cy-accent: #4C8DF6;
--cy-accent-hover: #6FA3F8;
--cy-accent-contrast: #081624;
--cy-accent-2: #2EC4C6;
--cy-link: #7FB0FA;
--cy-focus: #7FB0FA;
--cy-band: #07131F;
--cy-band-text: #FFFFFF;
--cy-band-muted: #9FB3C6;
--cy-success: #4FBF78;
--cy-warning: #F0A44B;
--cy-logo-outer: #FFFFFF;
--cy-logo-cyb: #FFFFFF;
--cy-logo-riva: #2EC4C6;
--cy-logo-badge: #FFFFFF;
--cy-logo-badge-text: #123B5D;
--cy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--cy-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* 3. Base and typography -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--cy-bg);
color: var(--cy-text);
font-family: var(--cy-font-body);
font-size: var(--cy-text-md);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
font-family: var(--cy-font-display);
color: var(--cy-text-strong);
line-height: 1.15;
margin: 0;
text-wrap: balance;
}
h1 { font-size: var(--cy-text-4xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--cy-text-3xl); font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: var(--cy-text-xl); font-weight: 700; }
h4 { font-size: var(--cy-text-lg); font-weight: 700; }
p { margin: 0; }
.cy-lead { font-size: var(--cy-text-lg); color: var(--cy-text-muted); max-width: 62ch; }
.cy-small { font-size: var(--cy-text-sm); color: var(--cy-text-muted); }
a { color: var(--cy-link); text-underline-offset: 3px; }
a:hover { color: var(--cy-accent-hover); }
:focus-visible { outline: 3px solid var(--cy-focus); outline-offset: 2px; border-radius: 4px; }
.cy-num { font-variant-numeric: tabular-nums; }
code, .cy-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }
/* 4. Layout --------------------------------------------------------------- */
.cy-container { width: 100%; max-width: var(--cy-container); margin-inline: auto; padding-inline: var(--cy-gutter); }
.cy-section { padding-block: var(--cy-space-9); }
.cy-section--alt { background: var(--cy-bg-alt); }
.cy-section--band { background: var(--cy-band); color: var(--cy-band-text); }
.cy-section--band h2, .cy-section--band h3 { color: var(--cy-band-text); }
.cy-section--band .cy-lead, .cy-section--band .cy-small { color: var(--cy-band-muted); }
.cy-section-head { display: flex; flex-direction: column; gap: var(--cy-space-4); margin-bottom: var(--cy-space-7); max-width: 760px; }
.cy-stack { display: flex; flex-direction: column; gap: var(--cy-space-4); }
.cy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cy-space-3); }
.cy-grid { display: grid; gap: var(--cy-space-5); }
.cy-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cy-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cy-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
@media (max-width: 600px) { .cy-section { padding-block: var(--cy-space-8); } }
/* 5. Components ----------------------------------------------------------- */
/* Logo (inline SVG) */
.cy-logo { display: inline-flex; align-items: center; text-decoration: none; }
.cy-logo svg { height: 40px; width: auto; display: block; }
.cy-logo .lg-outer { fill: var(--cy-logo-outer); }
.cy-logo .lg-cyb { fill: var(--cy-logo-cyb); }
.cy-logo .lg-riva { fill: var(--cy-logo-riva); }
.cy-logo .lg-badge { fill: var(--cy-logo-badge); }
.cy-logo .lg-badge-text { fill: var(--cy-logo-badge-text); }
.cy-section--band .cy-logo, .cy-footer .cy-logo {
--cy-logo-outer: #FFFFFF; --cy-logo-cyb: #FFFFFF; --cy-logo-riva: #2EC4C6;
--cy-logo-badge: #FFFFFF; --cy-logo-badge-text: #123B5D;
}
/* Header / nav */
.cy-header {
position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
background: color-mix(in srgb, var(--cy-bg) 92%, transparent);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--cy-border);
}
.cy-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--cy-space-5); min-height: 72px; }
.cy-nav { display: flex; align-items: center; gap: var(--cy-space-5); }
.cy-nav a { color: var(--cy-text); text-decoration: none; font-weight: 600; font-size: var(--cy-text-sm); }
.cy-nav a:hover { color: var(--cy-accent); }
@media (max-width: 900px) { .cy-nav .cy-nav__link { display: none; } }
/* Buttons */
.cy-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--cy-space-2);
min-height: 44px; padding: 10px 20px;
font-family: var(--cy-font-display); font-weight: 700; font-size: var(--cy-text-sm);
letter-spacing: 0.02em; text-decoration: none; line-height: 1.2;
border: 2px solid transparent; border-radius: var(--cy-radius-sm);
cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.cy-btn--primary { background: var(--cy-accent); color: var(--cy-accent-contrast); }
.cy-btn--primary:hover { background: var(--cy-accent-hover); color: var(--cy-accent-contrast); }
.cy-btn--secondary { background: transparent; color: var(--cy-text-strong); border-color: var(--cy-border-strong); }
.cy-btn--secondary:hover { border-color: var(--cy-accent); color: var(--cy-accent); }
.cy-btn--on-band { background: #FFFFFF; color: #123B5D; }
.cy-btn--on-band:hover { background: var(--cy-sky); color: #123B5D; }
.cy-btn--ghost-band { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.cy-btn--ghost-band:hover { border-color: #FFFFFF; color: #FFFFFF; }
.cy-btn--block { width: 100%; }
/* Eyebrow with the logo's sparkle */
.cy-eyebrow {
display: inline-flex; align-items: center; gap: var(--cy-space-2);
font-family: var(--cy-font-display); font-weight: 700; font-size: var(--cy-text-xs);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--cy-accent-2);
}
.cy-eyebrow::before {
content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
clip-path: path("M6 0 C6.5 4 7.5 5.5 12 6 C7.5 6.5 6.5 8 6 12 C5.5 8 4.5 6.5 0 6 C4.5 5.5 5.5 4 6 0 Z");
}
.cy-section--band .cy-eyebrow { color: #2EC4C6; }
/* Chips and badges */
.cy-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--cy-text-xs); font-weight: 600; color: var(--cy-text-muted);
padding: 4px 10px; border: 1px solid var(--cy-border); border-radius: var(--cy-radius-pill);
}
.cy-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--cy-accent)); }
.cy-badge {
display: inline-block; font-family: var(--cy-font-display); font-weight: 700;
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
padding: 3px 8px; border-radius: var(--cy-radius-sm);
background: var(--cy-surface-2); color: var(--cy-text-strong);
}
.cy-badge--accent { background: var(--cy-accent); color: var(--cy-accent-contrast); }
/* Cards */
.cy-card {
display: flex; flex-direction: column; gap: var(--cy-space-4);
background: var(--cy-surface); border: 1px solid var(--cy-border);
border-radius: var(--cy-radius-lg); padding: var(--cy-space-6);
}
.cy-card--featured { border: 2px solid var(--cy-accent); box-shadow: var(--cy-shadow-md); }
.cy-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--cy-space-3); }
/* Industry card: two editions side by side */
.cy-editions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cy-space-3); }
.cy-edition {
display: flex; flex-direction: column; gap: 2px; padding: var(--cy-space-3) var(--cy-space-4);
border-radius: var(--cy-radius-md); background: var(--cy-surface-2);
}
.cy-edition__name { font-size: var(--cy-text-xs); font-weight: 600; color: var(--cy-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.cy-edition__meta { font-size: var(--cy-text-xs); color: var(--cy-text-muted); }
/* Price */
.cy-price { font-family: var(--cy-font-display); font-weight: 800; color: var(--cy-text-strong); font-size: var(--cy-text-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cy-price--lg { font-size: 2.5rem; }
.cy-price__unit { font-size: var(--cy-text-sm); font-weight: 600; color: var(--cy-text-muted); margin-left: 2px; }
/* Check list */
.cy-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cy-space-2); }
.cy-checks li { position: relative; padding-left: 28px; }
.cy-checks li::before {
content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%230EA5A8'/%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Tables */
.cy-table-wrap { overflow-x: auto; border: 1px solid var(--cy-border); border-radius: var(--cy-radius-lg); background: var(--cy-surface); }
.cy-table { width: 100%; border-collapse: collapse; font-size: var(--cy-text-sm); min-width: 520px; }
.cy-table th, .cy-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--cy-border); vertical-align: top; }
.cy-table thead th { font-family: var(--cy-font-display); font-weight: 700; color: var(--cy-text-strong); background: var(--cy-surface-2); }
.cy-table tbody tr:last-child td { border-bottom: 0; }
.cy-table td.cy-c, .cy-table th.cy-c { text-align: center; }
.cy-yes { color: var(--cy-success); font-weight: 700; }
.cy-no { color: var(--cy-text-muted); }
/* Segmented toggle */
.cy-toggle { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--cy-radius-pill); background: var(--cy-surface-2); border: 1px solid var(--cy-border); }
.cy-toggle button {
min-height: 40px; padding: 8px 18px; border: 0; border-radius: var(--cy-radius-pill);
background: transparent; color: var(--cy-text-muted); font: 700 var(--cy-text-sm) var(--cy-font-display); cursor: pointer;
}
.cy-toggle button[aria-pressed="true"] { background: var(--cy-surface); color: var(--cy-text-strong); box-shadow: var(--cy-shadow-sm); }
/* Forms */
.cy-field { display: flex; flex-direction: column; gap: 6px; }
.cy-label { font-weight: 600; font-size: var(--cy-text-sm); color: var(--cy-text-strong); }
.cy-input, .cy-select {
min-height: 46px; padding: 10px 14px; font: inherit; color: var(--cy-text);
background: var(--cy-surface); border: 1px solid var(--cy-border-strong); border-radius: var(--cy-radius-sm);
}
.cy-input:focus, .cy-select:focus { outline: 3px solid var(--cy-focus); outline-offset: 1px; border-color: var(--cy-accent); }
.cy-form-note { font-size: var(--cy-text-sm); color: var(--cy-text-muted); }
.cy-form-msg { font-size: var(--cy-text-sm); font-weight: 600; color: var(--cy-success); }
/* Callout / disclaimer */
.cy-callout { padding: var(--cy-space-4) var(--cy-space-5); border-radius: var(--cy-radius-md); background: var(--cy-surface-2); font-size: var(--cy-text-sm); color: var(--cy-text-muted); }
/* Kit panel: a file listing that shows what is in a kit */
.cy-kit { background: var(--cy-surface); border: 1px solid var(--cy-border); border-radius: var(--cy-radius-lg); box-shadow: var(--cy-shadow-md); overflow: hidden; }
.cy-kit__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cy-space-3); padding: var(--cy-space-4) var(--cy-space-5); background: var(--cy-band); color: #FFFFFF; }
.cy-kit__title { font-family: var(--cy-font-display); font-weight: 700; font-size: var(--cy-text-sm); }
.cy-kit__list { list-style: none; margin: 0; padding: var(--cy-space-2) 0; }
.cy-kit__list li { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--cy-space-3); align-items: baseline; padding: 9px var(--cy-space-5); font-size: var(--cy-text-sm); border-bottom: 1px dashed var(--cy-border); }
.cy-kit__list li:last-child { border-bottom: 0; }
.cy-kit__id { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; color: var(--cy-accent-2); font-weight: 600; }
.cy-kit__type { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cy-text-muted); text-transform: uppercase; }
@media (max-width: 480px) { .cy-kit__list li { grid-template-columns: 1fr auto; } .cy-kit__id { grid-column: 1 / -1; } }
/* Value strip */
.cy-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--cy-space-5); }
.cy-value { display: flex; gap: var(--cy-space-3); align-items: flex-start; }
.cy-value svg { flex: none; width: 28px; height: 28px; color: var(--cy-accent-2); }
.cy-value strong { display: block; font-family: var(--cy-font-display); color: var(--cy-text-strong); font-size: var(--cy-text-sm); letter-spacing: .06em; text-transform: uppercase; }
.cy-value span { font-size: var(--cy-text-sm); color: var(--cy-text-muted); }
/* FAQ */
.cy-faq { display: flex; flex-direction: column; gap: var(--cy-space-3); max-width: 820px; }
.cy-faq details { border: 1px solid var(--cy-border); border-radius: var(--cy-radius-md); background: var(--cy-surface); padding: var(--cy-space-4) var(--cy-space-5); }
.cy-faq summary { cursor: pointer; font-family: var(--cy-font-display); font-weight: 700; color: var(--cy-text-strong); min-height: 28px; }
.cy-faq details p { margin-top: var(--cy-space-3); color: var(--cy-text-muted); }
/* Footer */
.cy-footer { background: var(--cy-band); color: var(--cy-band-muted); padding-block: var(--cy-space-8) var(--cy-space-6); font-size: var(--cy-text-sm); }
.cy-footer a { color: #FFFFFF; }
.cy-footer__grid { display: grid; gap: var(--cy-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cy-footer h4 { color: #FFFFFF; font-size: var(--cy-text-sm); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--cy-space-3); }
.cy-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cy-space-2); }
.cy-footer__legal { margin-top: var(--cy-space-7); padding-top: var(--cy-space-5); border-top: 1px solid rgba(255,255,255,.15); font-size: var(--cy-text-xs); }
/* 6. Utilities ------------------------------------------------------------ */
.cy-center { text-align: center; }
.cy-mt-4 { margin-top: var(--cy-space-4); }
.cy-mt-6 { margin-top: var(--cy-space-6); }
.cy-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 7. Motion and accessibility --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* 8. Home page layout ------------------------------------------------------ */
.hero { padding-block: var(--cy-space-8) var(--cy-space-9); }
.hero__grid { display: grid; gap: var(--cy-space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: center; }
.hero__copy { gap: var(--cy-space-5); }
.hero__facts { list-style: none; margin: 0; padding: 0; }
.values-band { padding-block: var(--cy-space-6); border-block: 1px solid var(--cy-border); }
.assessment { align-items: start; }
.cy-section--band .cy-card { color: var(--cy-text); }
.cy-section--band .cy-card h3 { color: var(--cy-text-strong); }
.cy-section--band .cy-card .cy-small { color: var(--cy-text-muted); }
.cy-card > .cy-chip, .cy-card > .cy-badge, .cy-section-head > .cy-toggle, .cy-stack > .cy-eyebrow, .cy-section-head > .cy-eyebrow { align-self: flex-start; }
.cy-badge, .cy-chip { white-space: nowrap; }
/* Two purchase buttons side by side on industry cards */
.cy-buy-row { flex-direction: row; flex-wrap: wrap; }
.cy-buy-row .cy-btn { flex: 1 1 140px; }