/* ── Section rhythm (light prototype) ── */ .problem-section { background: var(--paper-light); } .usecases-section { background: var(--paper); } .features-section { background: var(--tint); } .compare-section { background: var(--paper-light); } .sec-gap, .sol-caps, .rival-section, .co-section--alt { background: var(--paper-light); } .sec-entities, .sol-how, .compat-section, .co-section { background: var(--paper); } .sec-layers, .sol-protect { background: var(--tint); } .platform-strip { background: var(--paper); } /* cards sit lighter than their section */ .usecases-section [class*="card"], .features-section [class*="card"] { background: var(--paper-card); } /* serif display headlines, italic accent phrase */ .sol-h1, .co-heading, h1 .line1, h1 .line2 { font-family: var(--serif); font-weight: 600; } .sol-h1-outline, .co-heading-outline, h1 .line2, h1 .line2 i { font-style: italic; color: var(--accent); -webkit-text-stroke: 0; } .footer-logo { mix-blend-mode: normal; filter: brightness(0.38) saturate(1.6); } /* ── Home: dark hero + nav, blue band, label and card refinements ── */ body nav { background: var(--hero); border-bottom-color: rgba(var(--paper-rgb),0.12); } body .nav-mid > li > a, body .nav-mid > li > .nav-dd-btn, body .nav-mid > li > button { color: rgba(var(--paper-rgb),0.85); } body .nav-mid a.nav-active { color: #fff; } body nav .logo-img { filter: none; mix-blend-mode: screen; } body .home-hero-wrap, body .home-hero { position: relative; } body:not(.plain) main > section:first-child { max-width: none; padding-left: max(2.5rem, calc((100% - 1200px) / 2 + 2.5rem)); padding-right: max(2.5rem, calc((100% - 1200px) / 2 + 2.5rem)); background: var(--hero); } body .home-h1 { color: var(--paper); } body .home-h1-outline { color: var(--accent-on-dark); } body .home-sub { color: rgba(var(--paper-rgb),0.75); } body .home-hero .btn-outline-lg { color: var(--paper); border-color: rgba(var(--paper-rgb),0.35); background: transparent; } body .home-hero .eyebrow { color: rgba(var(--paper-rgb),0.8); } body .grant-card { box-shadow: 8px 8px 0 rgba(108,220,216,0.28); } /* plain mono labels with a short blue rule instead of grey pills */ body .eyebrow, body .how-eyebrow { background: none; border: 0; padding: 0; border-radius: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; gap: 10px; } body .eyebrow-dot { width: 26px; height: 2px; border-radius: 0; background: var(--accent); } body .home-hero .eyebrow-dot, body .flow-section .eyebrow-dot { background: var(--accent-on-dark); } body .flow-section .how-eyebrow { background: none; border: 0; color: rgba(var(--paper-rgb),0.8); } /* full-blue platform band */ body .platform-strip { background: var(--accent); border-color: var(--accent); } body .platform-strip-eyebrow { color: rgba(255,255,255,0.85); } body .platform-strip-eyebrow .eyebrow-dot { background: #fff; } body .platform-strip-text { color: #fff; } body .platform-strip-link { color: #fff; border-color: rgba(255,255,255,0.6); } body .platform-strip-link:hover { background: rgba(255,255,255,0.14); border-color: #fff; } /* lifted white cards */ body .usecase-card, body .features-section [class*="card"] { background: var(--paper-card); border: 1px solid rgba(var(--ink-rgb),0.08); box-shadow: 0 1px 2px rgba(var(--ink-rgb),0.05), 0 8px 24px rgba(var(--ink-rgb),0.06); } body .usecase-card:hover { background: #fff; border-color: rgba(var(--accent-rgb),0.4); } /* ── Home: no black bands after the hero ── */ body .flow-section { background: var(--tint); border-color: rgba(var(--ink-rgb),0.08); } body .features-section { background: var(--tint); } body .home-cta-section { background: var(--paper); border-color: rgba(var(--ink-rgb),0.08); } body .flow-section .flow-heading, body .home-cta-section .home-cta-heading, body .flow-section .flow-title { color: var(--ink-strong); } body .flow-section .flow-desc, body .flow-section .flow-workflow-label, body .home-cta-section .home-cta-sub { color: rgba(var(--ink-rgb),0.72); } body .flow-section .flow-workflow--sub { border-color: rgba(var(--ink-rgb),0.12); } body .flow-section .flow-step { background: var(--paper-card); border-color: rgba(var(--ink-rgb),0.08); box-shadow: 0 1px 2px rgba(var(--ink-rgb),0.05), 0 8px 24px rgba(var(--ink-rgb),0.06); } body .flow-section .flow-num, body .flow-section .flow-label, body .flow-section .flow-arrow { color: var(--accent); } body .flow-section .how-eyebrow { color: rgba(var(--ink-rgb),0.75); } body .flow-section .eyebrow-dot { background: var(--accent); } body .home-cta-section .btn-primary-lg { background: var(--accent); color: #fff; } body .home-cta-section .btn-outline-lg { color: var(--ink-strong); border-color: rgba(var(--ink-rgb),0.3); } /* hero text on dark, all pages */ body:not(.plain) main > section:first-child h1, body:not(.plain) main > section:first-child .sol-h1, body:not(.plain) main > section:first-child .co-heading { color: var(--paper); } body:not(.plain) main > section:first-child .sol-h1-outline, body:not(.plain) main > section:first-child .co-heading-outline, body:not(.plain) main > section:first-child h1 .line2, body:not(.plain) main > section:first-child h1 .line2 i { color: var(--accent-on-dark); } body:not(.plain) main > section:first-child .sol-sub, body:not(.plain) main > section:first-child p, body:not(.plain) main > section:first-child .co-body { color: rgba(var(--paper-rgb),0.75); } body:not(.plain) main > section:first-child .sol-breadcrumb, body:not(.plain) main > section:first-child .sol-breadcrumb a { color: rgba(var(--paper-rgb),0.6); } body:not(.plain) main > section:first-child .btn-outline-lg { color: var(--paper); border-color: rgba(var(--paper-rgb),0.35); background: transparent; } body:not(.plain) main > section:first-child .eyebrow { color: rgba(var(--paper-rgb),0.8); } body:not(.plain) main > section:first-child .eyebrow-dot { background: var(--accent-on-dark); } body .flow-section .flow-heading { color: var(--ink-strong); } /* dark-hero fixes for other pages */ body nav a.nav-active { color: #fff !important; } body:not(.plain) main > section:first-child .how-eyebrow { color: rgba(var(--paper-rgb),0.8); } body:not(.plain) main > section:first-child .tl-text { color: rgba(var(--paper-rgb),0.85); } body:not(.plain) main > section:first-child .tl-label { color: var(--accent-on-dark); } body:not(.plain) main > section:first-child .tl-item { border-color: rgba(var(--paper-rgb),0.12); } body:not(.plain) main > section:first-child .tl-dot { background: var(--accent-on-dark); } body nav .btn-outline-lg { color: var(--paper); border-color: rgba(var(--paper-rgb),0.35); background: transparent; } body:not(.plain) main > section:first-child .sol-breadcrumb-sep { color: rgba(var(--paper-rgb),0.35); } /* dark footer */ .site-footer { background: var(--hero); border-top-color: rgba(var(--paper-rgb),0.12); } .footer-logo { filter: none; mix-blend-mode: screen; } .footer-tagline, .footer-col-heading, .footer-links a, .footer-copy, .footer-address, .footer-legal, .footer-legal a, .footer-bottom a { color: rgba(var(--paper-rgb),0.72); } .footer-links a:hover, .footer-bottom a:hover { color: #fff; } .footer-bottom, .footer-legal-inner { border-color: rgba(var(--paper-rgb),0.12); } .footer-legal a { text-decoration: underline; text-underline-offset: 2px; } .footer-legal-inner:has(+ .footer-legal-inner) { padding-bottom: 0.4rem; } .footer-legal { font-size: 13px; line-height: 1.6; } .footer-copy, .footer-address { font-size: 13px; } /* ── contrast fixes (Lighthouse) ── */ .grant-head, .grant-foot, .grant-rows dt { color: rgba(var(--ink-rgb),0.72); } .feature-details summary { color: var(--accent); } .rival-no { color: var(--danger); } .rival-part { color: var(--warn); } /* ── polish ── */ .prob-item, .sol-check, .sec-gap-row { font-family: 'Geist', sans-serif; } /* serif section headings, consistent with hero */ main h2, .flow-heading, .prob-heading, .home-cta-heading, .co-cta-heading { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; } .footer-col-heading { font-family: 'Geist Mono', monospace; } /* ── mobile nav ── */ .nav-toggle { display: none; } @media (max-width: 768px) { nav { position: relative; } .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; margin-right: 12px; background: none; border: 1px solid rgba(var(--paper-rgb),0.35); color: var(--paper); border-radius: 6px; padding: 6px 9px; font-size: 20px; cursor: pointer; } nav.open .nav-mid { display: flex; flex-direction: column; gap: 1rem; position: absolute; top: 100%; left: 0; right: 0; z-index: 300; background: var(--hero); padding: 1.25rem 1.25rem 1.5rem; border-bottom: 1px solid rgba(var(--paper-rgb),0.15); } nav.open .nav-has-dropdown .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; min-width: 0; padding: 0.5rem 0 0 0.75rem; } nav.open .nav-dd-icon, nav.open .nav-dd-sub { display: none; } nav.open .nav-dd-item { padding: 6px 0; } nav.open .nav-dd-title { color: rgba(var(--paper-rgb),0.85); font-size: 16px; font-weight: 400; } nav.open .nav-has-dropdown .ti-chevron-down { display: none; } } /* stop grid children forcing horizontal scroll on narrow screens */ .hero > *, .sol-hero-inner > *, .home-hero > *, .problem-inner > *, .gs-inner > * { min-width: 0; } .prob-item span, .sol-check span, .tl-text { overflow-wrap: anywhere; } @media (max-width: 768px) { .gui-layout { grid-template-columns: 1fr; } .gui-layout .sidebar { display: none; } .win-title { font-size: 13px; } } /* ── brand accents (logo teal + periwinkle) ── */ /* eyebrow rule picks up both logo colours */ body .eyebrow-dot { background: linear-gradient(90deg, #6cdcd8, #6e7ddf); } body main > section:first-child .eyebrow-dot, body .flow-section .eyebrow-dot { background: linear-gradient(90deg, #6cdcd8, #6e7ddf); } body .platform-strip-eyebrow .eyebrow-dot { background: #6cdcd8; } /* soft teal glow, middle right of the hero */ body:not(.plain) main > section:first-child { background: radial-gradient(820px 480px at 64% 50%, rgba(108,220,216,0.20), transparent 70%), var(--hero); } /* footer glow: bookends the hero, placed left so it doesn't mirror it */ .site-footer { background: radial-gradient(720px 340px at 20% 100%, rgba(108,220,216,0.16), transparent 70%), var(--hero); } /* faint indigo wash on tinted sections (depth, not a shape); position varies */ body .flow-section { background: radial-gradient(900px 520px at 88% 0%, rgba(var(--accent-rgb),0.07), transparent 70%), var(--tint); } body .features-section, .sec-layers { background: radial-gradient(900px 520px at 10% 100%, rgba(var(--accent-rgb),0.07), transparent 70%), var(--tint); } .sol-protect { background: radial-gradient(900px 520px at 88% 0%, rgba(var(--accent-rgb),0.07), transparent 70%), var(--tint); } /* ══════════════════════════════════════════════════════════ Effects (CSS only, no JavaScript) ══════════════════════════════════════════════════════════ */ /* ── Hero: ring watermark + dot grid ── */ body:not(.plain) main > section:first-child { position: relative; overflow: hidden; isolation: isolate; } body:not(.plain) main > section:first-child > * { position: relative; z-index: 1; } body:not(.plain) main > section:first-child::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 640px; height: 640px; right: -150px; bottom: -230px; opacity: 0.13; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke-width='11'%3E%3Ccircle cx='70' cy='70' r='44' stroke='%236cdcd8'/%3E%3Ccircle cx='130' cy='70' r='44' stroke='%236e7ddf'/%3E%3Ccircle cx='70' cy='130' r='44' stroke='%236e7ddf'/%3E%3Ccircle cx='130' cy='130' r='44' stroke='%236cdcd8'/%3E%3C/svg%3E") center/contain no-repeat; } body:not(.plain) main > section:first-child::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(var(--on-dark-rgb),0.24) 1px, transparent 1.6px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 55% 75% at 66% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 55% 75% at 66% 50%, #000, transparent 75%); } /* ── Gradient hairline between sections ── */ body main > section + section { position: relative; } body main > section + section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, #6cdcd8 30%, #6e7ddf 70%, transparent); opacity: 0.55; } /* ── Hover lift + arrow slide ── */ body .usecase-card, body .flow-step, body .sec-layer, body .sol-step, body .sol-cap, body .features-section [class*="card"] { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } body .usecase-card:hover, body .flow-step:hover, body .sec-layer:hover, body .sol-step:hover, body .sol-cap:hover, body .features-section [class*="card"]:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(var(--ink-rgb),0.12); } .ti-arrow-right { display: inline-block; transition: transform 0.2s ease; } .btn-outline-lg:hover .ti-arrow-right, .platform-strip-link:hover .ti-arrow-right, .usecase-card:hover .ti-arrow-right { transform: translateX(4px); } /* ── Live grant card ── */ body .grant-card { position: relative; } .grant-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .grant-status { display: inline-flex; align-items: center; gap: 7px; } .grant-status-on, .grant-status-off { display: inline-flex; align-items: center; gap: 7px; } .grant-status-on::before, .grant-status-off::before { content: ""; width: 7px; height: 7px; border-radius: 50%; } .grant-status-on::before { background: var(--ok); animation: grant-pulse 2.4s ease-out infinite; } .grant-status-off { display: none; color: var(--danger); } .grant-status-off::before { background: var(--danger); } @keyframes grant-pulse { 0% { box-shadow: 0 0 0 0 rgba(26,127,75,0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(26,127,75,0); } } .grant-rows dd { display: inline-flex; align-items: center; gap: 10px; } .grant-dots { display: inline-flex; gap: 3px; } .grant-dots i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } .grant-dots .grant-dot-live { animation: grant-dot 9s infinite; } .grant-dots .grant-dot-off { opacity: 0.2; } .grant-count { display: inline-grid; } .grant-count .gc-a, .grant-count .gc-b { grid-area: 1 / 1; text-align: right; } .grant-count .gc-a { animation: gc-a 9s infinite; } .grant-count .gc-b { animation: gc-b 9s infinite; } @keyframes gc-a { 0%, 35% { opacity: 1; } 40%, 75% { opacity: 0; } 80%, 100% { opacity: 1; } } @keyframes gc-b { 0%, 35% { opacity: 0; } 40%, 75% { opacity: 1; } 80%, 100% { opacity: 0; } } @keyframes grant-dot { 0%, 35% { opacity: 0.2; } 40%, 75% { opacity: 1; } 80%, 100% { opacity: 0.2; } } .grant-revoke { cursor: pointer; display: inline-flex; padding: 4px 11px; border: 1px solid currentColor; border-radius: 6px; color: var(--danger); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; transition: background 0.15s; } .grant-revoke:hover { background: rgba(180,35,24,0.08); } .gr-restore { display: none; } .grant-toggle:focus-visible ~ .grant-foot .grant-revoke { outline: 2px solid var(--accent); outline-offset: 2px; } .grant-toggle:checked ~ .grant-head .grant-status-on { display: none; } .grant-toggle:checked ~ .grant-head .grant-status-off { display: inline-flex; } .grant-toggle:checked ~ .grant-wl, .grant-toggle:checked ~ .grant-rows { opacity: 0.45; transition: opacity 0.25s; } .grant-toggle:checked ~ .grant-rows * { animation-play-state: paused; } .grant-toggle:checked ~ .grant-rows .grant-dots i { background: rgba(var(--ink-rgb),0.3); animation: none; opacity: 1; } .grant-toggle:checked ~ .grant-foot .gr-revoke { display: none; } .grant-toggle:checked ~ .grant-foot .gr-restore { display: inline; } .grant-toggle:checked ~ .grant-foot .grant-revoke { color: var(--ok); } .grant-toggle:checked ~ .grant-foot .grant-revoke:hover { background: rgba(26,127,75,0.08); } /* ── Scroll reveal (progressive: only where scroll-driven animation exists) ── */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { @keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } } body main > section:not(:first-child) :is(.usecase-card, .flow-step, .sec-layer, .sol-step, .sol-cap, .prob-col, .features-section [class*="card"]) { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 40%; } } } /* ── Reduced motion: show the settled states, no looping ── */ @media (prefers-reduced-motion: reduce) { .grant-status-on::before, .grant-dots .grant-dot-live, .grant-count .gc-a, .grant-count .gc-b { animation: none; } .grant-count .gc-b, .grant-dots .grant-dot-live { opacity: 0; } .grant-count .gc-b { display: none; } .grant-dots .grant-dot-live { opacity: 0.2; } } /* ── Consistent buttons: and