/* ============================================================ VITALITY — Cairn-grade homepage layer Scoped to body.cairn-home — editorial calm, gaming focus. ============================================================ */ /* Navbar + site-wide tokens live in cairn-site.css */ body.cairn-home { /* transparent so the fixed #vitality-shader-bg canvas (z-index:-1) shows through; the dark base gradient lives on (see design-tokens.css) */ background: transparent; } body.cairn-home #vitality-shader-bg { opacity: 0.5 !important; } /* ---- Hero ---- */ .cr-hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: clamp(120px, 16vh, 180px) clamp(20px, 5vw, 48px) 0; overflow: hidden; } .cr-hero-bg { position: absolute; inset: 0; z-index: 0; /* transparent — the live #vitality-shader-bg plasma is the hero backdrop */ background-color: transparent; background-image: radial-gradient(ellipse 90% 70% at 50% 12%, rgba(117, 52, 179, 0.22), transparent 62%), radial-gradient(ellipse 55% 45% at 78% 72%, rgba(145, 71, 255, 0.14), transparent 58%), linear-gradient(180deg, transparent 0%, transparent 60%, rgba(5, 5, 10, 0.55) 100%); background-position: center; background-size: cover; background-repeat: no-repeat; } .cr-hero-inner { position: relative; z-index: 2; max-width: 920px; margin-inline: auto; text-align: center; padding-bottom: clamp(48px, 8vh, 88px); } .cr-kicker { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242, 238, 252, 0.78); margin-bottom: 28px; } .cr-hero h1 { font-family: var(--font-cr-sans); font-weight: 600; font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.03em; color: #fff; margin-bottom: 22px; text-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); } .cr-hero h1 em { font-family: var(--font-cr-serif); font-style: italic; font-weight: 400; color: rgba(242, 238, 252, 0.95); } .cr-hero-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.65; color: rgba(242, 238, 252, 0.72); max-width: 38rem; margin: 0 auto 32px; } .cr-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .cr-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 999px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .cr-btn:hover { transform: translateY(-1px); } .cr-btn-primary { background: linear-gradient(135deg, #7534b3, #9147ff); color: #fff; box-shadow: 0 0 28px -6px rgba(145, 71, 255, 0.55); } .cr-btn-primary:hover { filter: brightness(1.08); color: #fff; } .cr-btn-ghost { border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.22); color: #fff; backdrop-filter: blur(8px); } .cr-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #fff; } .cr-hero-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; padding: 28px clamp(20px, 5vw, 48px) 36px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35)); } .cr-stat { text-align: center; } .cr-stat-val { display: block; font-family: var(--font-cr-sans); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -0.02em; color: #fff; } .cr-stat-label { display: block; margin-top: 6px; font-size: 0.82rem; line-height: 1.45; color: rgba(242, 238, 252, 0.55); } /* ---- Trust strip ---- */ .cr-trust { padding: 56px 0 24px; text-align: center; } .cr-trust p { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 238, 252, 0.45); margin-bottom: 22px; } .cr-trust-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 40px; max-width: 900px; margin-inline: auto; padding-inline: 24px; } .cr-trust-logos span { font-size: 0.92rem; font-weight: 500; color: rgba(242, 238, 252, 0.38); letter-spacing: 0.04em; } /* ---- Platform intro ---- */ .cr-platform-head { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; padding-inline: clamp(20px, 5vw, 48px); } .cr-platform-head .cr-kicker { margin-bottom: 18px; } .cr-platform-head h2 { font-family: var(--font-cr-sans); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin-bottom: 14px; } .cr-platform-head h2 em { font-family: var(--font-cr-serif); font-style: italic; font-weight: 400; } .cr-platform-head p { font-size: 1.05rem; line-height: 1.65; color: var(--cr-muted); margin: 0; } /* ---- Narrative split sections ---- */ .cr-story { padding: clamp(80px, 11vw, 140px) 0; } .cr-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); } .cr-story-grid.reverse .cr-story-copy { order: 2; } .cr-story-grid.reverse .cr-story-visual { order: 1; } .cr-story-copy .cr-kicker { margin-bottom: 16px; } .cr-story-copy h2 { font-family: var(--font-cr-sans); font-weight: 600; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 18px; } .cr-story-copy h2 em { font-family: var(--font-cr-serif); font-style: italic; font-weight: 400; } .cr-story-copy > p { font-size: 1.02rem; line-height: 1.7; color: var(--cr-muted); margin-bottom: 24px; } .cr-story-list { display: grid; gap: 14px; } .cr-story-list li { position: relative; padding-left: 22px; font-size: 0.95rem; line-height: 1.55; color: rgba(242, 238, 252, 0.78); } .cr-story-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--cr-accent); box-shadow: 0 0 10px rgba(145, 71, 255, 0.5); } .cr-story-visual { border-radius: 24px; border: 1px solid var(--cr-hairline); background: radial-gradient(120% 100% at 10% 0%, rgba(145, 71, 255, 0.2), transparent 55%), linear-gradient(180deg, rgba(16, 14, 22, 0.9), rgba(8, 8, 10, 0.95)); padding: 24px; min-height: 320px; } .cr-incident { display: grid; gap: 0; } .cr-incident-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .cr-incident-row:last-child { border-bottom: none; } .cr-incident-time { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(201, 166, 255, 0.65); padding-top: 2px; } .cr-incident-row strong { display: block; font-size: 0.95rem; margin-bottom: 4px; } .cr-incident-row span { font-size: 0.84rem; color: rgba(242, 238, 252, 0.52); } .cr-incident-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(205, 178, 255, 0.12); border: 1px solid rgba(205, 178, 255, 0.35); color: #cdb2ff; white-space: nowrap; } .cr-compliance-panel { padding: 8px 4px; } .cr-compliance-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242, 238, 252, 0.45); } .cr-compliance-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-bottom: 22px; } .cr-compliance-bar i { display: block; height: 100%; width: 98%; border-radius: 999px; background: linear-gradient(90deg, #7534b3, #9147ff); } .cr-compliance-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .cr-compliance-tags span { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--cr-hairline); font-family: var(--font-mono); font-size: 11px; color: rgba(242, 238, 252, 0.62); } /* ---- Cairn overrides for existing sections ---- */ body.cairn-home .feature-section { padding-top: clamp(40px, 6vw, 80px); background: transparent; } body.cairn-home .feature-section .section-header { display: none; } body.cairn-home .feature-item, body.cairn-home .feature-grid.el-features .feature-item { border-radius: 20px; border: 1px solid rgba(145, 71, 255, 0.14) !important; background: linear-gradient(180deg, rgba(14, 12, 18, 0.55), rgba(8, 8, 10, 0.62)) !important; padding: 28px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } body.cairn-home .feature-item:hover { transform: translateY(-2px); border-color: rgba(145, 71, 255, 0.35); } body.cairn-home .feature-item h3 { font-family: var(--font-cr-sans); font-weight: 600; } body.cairn-home .vx-title, body.cairn-home .vx-title em { font-family: var(--font-cr-sans); } body.cairn-home .vx-title em { font-family: var(--font-cr-serif); font-style: italic; font-weight: 400; } body.cairn-home .vx-eyebrow { color: rgba(205, 178, 255, 0.85); border-color: var(--cr-hairline); } body.cairn-home .about-section { display: none; } body.cairn-home .works-with { border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.2); } body.cairn-home .ww-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 238, 252, 0.4); } body.cairn-home .marquee-item { font-family: var(--font-cr-sans); color: rgba(242, 238, 252, 0.35); } body.cairn-home .performance-section { padding: clamp(80px, 11vw, 140px) 0; } body.cairn-home .performance-section .section-title, body.cairn-home .section-title { font-family: var(--font-cr-sans); font-weight: 600; } body.cairn-home .section-title .accent, body.cairn-home .section-title em { font-family: var(--font-cr-serif); font-style: italic; font-weight: 400; color: var(--cr-accent-soft); } body.cairn-home .final-cta-section .container { border-radius: 28px; border-color: var(--cr-hairline); background: radial-gradient(100% 120% at 50% 0%, rgba(145, 71, 255, 0.18), transparent 58%), linear-gradient(180deg, rgba(18, 16, 24, 0.75), rgba(8, 8, 10, 0.95)); } body.cairn-home .final-cta-section h2 { font-family: var(--font-cr-sans) !important; } body.cairn-home .final-cta-section h2 em { font-family: var(--font-cr-serif); font-style: italic; font-weight: 400; } body.cairn-home .cta-button:not(.secondary) { background: linear-gradient(135deg, #7534b3, #9147ff) !important; color: #fff !important; box-shadow: 0 0 28px -6px rgba(145, 71, 255, 0.5) !important; } body.cairn-home .cta-button.secondary { border: 1px solid rgba(255, 255, 255, 0.22) !important; background: rgba(0, 0, 0, 0.2) !important; color: #fff !important; } /* ---- Responsive ---- */ @media (max-width: 900px) { .cr-hero-stats { grid-template-columns: 1fr; gap: 20px; } .cr-story-grid { grid-template-columns: 1fr; } .cr-story-grid.reverse .cr-story-copy, .cr-story-grid.reverse .cr-story-visual { order: unset; } } @media (max-width: 560px) { .cr-hero-actions { flex-direction: column; align-items: stretch; } .cr-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .cr-btn:hover { transform: none; } }