/* ======================================================== Elevaide — Theme variants Each theme keyed on . Content HTML is identical across variants; only colors shift. ======================================================== */ /* ---- Shared structural additions ---- */ #canvas-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.18; } .page-layer { position: relative; z-index: 10; } .hero { padding: 22vh 0 0; text-align: center; } .hero h1 { margin: 0 auto; max-width: 16ch; } .hero-sub { margin: 32px auto 0; font-size: 15px; font-weight: 400; text-align: center; animation: fadeUp 1s .6s var(--ease) both; } .hero-btns { display: flex; gap: 10px; justify-content: center; margin-top: 28px; animation: fadeUp 1s .8s var(--ease) both; } .hero-btn { font-family: inherit; font-size: 13px; font-weight: 500; padding: 11px 22px; border-radius: 999px; text-decoration: none; transition: all .3s; } .hero-btn.primary { background: #DA3E27; color: #FFF7EB; } .hero-btn.primary:hover { background: #03362A; } .hero-btn.secondary { background: transparent; color: #03362A; border: 1px solid rgba(3,54,42,0.2); } .hero-btn.secondary:hover { border-color: #03362A; color: #03362A; } .sec { padding: 120px 0; } .sec-inner { max-width: 740px; } .sec-num { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px; } .scroll-hint { display: flex; flex-direction: column; align-items: center; margin-bottom: 48px; } .scroll-line { width: 1px; height: 52px; background: currentColor; opacity: 0.25; animation: scrollPulse 2.4s ease-in-out infinite; } .scroll-arrow { margin-top: 10px; font-size: 13px; opacity: 0.35; animation: scrollBounce 2.4s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { opacity: .15; transform: scaleY(.85); } 50% { opacity: .35; transform: scaleY(1); } } @keyframes scrollBounce { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: .5; transform: translateY(6px); } } .belief { padding: 100px 0; } .continuous-sec { padding: 120px 0; } .cont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .cont-text { max-width: 480px; } .cont-steps { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .cont-step { padding: 24px 20px; border-bottom: 1px solid var(--line); border-radius: 4px; transition: background .35s, transform .35s, padding-left .35s; } .cont-step .s-num { margin-bottom: 8px; transition: color .3s; } .cont-step .s-title { margin-bottom: 6px; } .cont-step p { font-size: 14px; line-height: 1.5; max-width: 30ch; margin: 0; } .hero-trusted { margin-top: 56px; margin-left: -50vw; margin-right: -50vw; position: relative; left: 50%; right: 50%; width: 100vw; padding: 32px 0; text-align: center; animation: fadeUp 1s .8s var(--ease) both; } .trusted-label { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; } .trusted-logos { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; } .trusted-logos span { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } /* join the conversation */ .join-sec { padding: 72px 0; border-top: none; } .join-row { display: flex; justify-content: space-between; align-items: center; gap: 48px; } .join-heading { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; flex-shrink: 0; margin: 0; } .join-form { display: flex; gap: 0; flex-shrink: 0; } .join-input { font-family: inherit; font-size: 14px; padding: 14px 20px; border-right: none; border-radius: 999px 0 0 999px; width: 260px; outline: none; transition: border-color .3s; } .join-btn { font-family: inherit; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 14px 24px; border-radius: 0 999px 999px 0; cursor: pointer; white-space: nowrap; transition: background .3s, border-color .3s, color .3s; } /* ── Modal ── */ .modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(3,54,42,0.5); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .modal-overlay.open { opacity: 1; visibility: visible; } .modal-box { background: #FFF7EB; border-radius: 16px; padding: 48px 40px; width: 100%; max-width: 520px; position: relative; margin: 24px; box-shadow: 0 24px 80px rgba(3,54,42,0.2); transform: translateY(20px); transition: transform .3s; } .modal-overlay.open .modal-box { transform: translateY(0); } .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer; font-size: 24px; color: rgba(3,54,42,0.4); line-height: 1; padding: 4px 8px; transition: color .2s; } .modal-close:hover { color: #DA3E27; } .modal-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: #03362A; margin: 0 0 8px; } .modal-sub { font-size: 14px; color: rgba(3,54,42,0.5); margin: 0 0 28px; line-height: 1.5; } .modal-form { display: flex; flex-direction: column; gap: 12px; } .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-input { font-family: inherit; font-size: 14px; padding: 14px 16px; width: 100%; background: rgba(3,54,42,0.04); color: #03362A; border: 1px solid rgba(3,54,42,0.12); border-radius: 8px; outline: none; transition: border-color .3s; -webkit-appearance: none; appearance: none; } .modal-input:focus { border-color: #03362A; } .modal-input::placeholder { color: rgba(3,54,42,0.35); } select.modal-input { cursor: pointer; color: rgba(3,54,42,0.35); } select.modal-input.selected { color: #03362A; } select.modal-input option { color: #03362A; } textarea.modal-input { resize: vertical; min-height: 80px; line-height: 1.5; } .modal-btn { font-family: inherit; font-size: 14px; font-weight: 600; padding: 14px 32px; width: 100%; background: #DA3E27; color: #FFF7EB; border: none; border-radius: 999px; cursor: pointer; transition: background .3s, opacity .3s; margin-top: 8px; } .modal-btn:hover { background: #03362A; } .modal-btn:disabled { opacity: 0.5; cursor: not-allowed; } .modal-toast { text-align: center; margin-top: 12px; font-size: 14px; font-weight: 500; min-height: 20px; } .modal-toast.success { color: #03362A; } .modal-toast.error { color: #DA3E27; } @media (max-width: 560px) { .modal-grid { grid-template-columns: 1fr; } .modal-box { padding: 36px 24px; } } /* about/team specific */ .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; margin-top: 56px; } .diff-grid h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; } .diff-grid p { font-size: 15px; line-height: 1.55; margin: 0; } .story-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .story-photo { overflow: visible; } .story-photo img { width: 100%; height: auto; display: block; border-radius: 12px; filter: saturate(0.92); box-shadow: 0 8px 40px rgba(3,54,42,0.12), 0 2px 12px rgba(3,54,42,0.06); } .story-photo-inner { width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: var(--sand); display: flex; align-items: center; justify-content: center; } .story-photo-inner::after { content: 'Team portrait'; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; } .story-text { max-width: 620px; margin: 0; font-size: 16px; line-height: 1.65; } .story-text p + p { margin-top: 20px; } .story-text p:first-child { font-size: 18px; } .story-text a.founder-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(3,54,42,0.25); text-underline-offset: 3px; transition: text-decoration-color 0.2s ease, color 0.2s ease; } .story-text a.founder-link::after { content: ' \2197'; font-size: 0.75em; opacity: 0.4; transition: opacity 0.2s ease; } .story-text a.founder-link:hover { color: #DA3E27; text-decoration-color: #DA3E27; } .story-text a.founder-link:hover::after { opacity: 0.8; } @media (max-width: 900px) { .trusted-logos { gap: 28px; } .diff-grid { grid-template-columns: 1fr; } .story-split { grid-template-columns: 1fr; } .story-photo { max-width: 420px; position: static; } .cont-grid { grid-template-columns: 1fr; gap: 48px; } .sec { padding: 64px 0; } .hero { padding: 14vh 0 0; } .hero h1 { font-size: clamp(36px, 8vw, 64px); } .page-header { padding: 80px 0 40px; } .page-header h1 { font-size: clamp(32px, 7vw, 56px); } footer.site .row { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 700px) { .join-row { flex-direction: column; gap: 28px; text-align: center; } .join-input { width: 200px; } } @media (max-width: 560px) { .hero h1 { font-size: 32px; } .cont-grid { grid-template-columns: 1fr; } .cont-steps { margin-top: 32px; } footer.site .row { grid-template-columns: 1fr; gap: 24px; } .trusted-logos { gap: 20px; } .trusted-logo { height: 14px !important; } } /* ============================================================ THEME v1 — Cream (light, warm, brand default) ============================================================ */ body[data-theme="v1"] { --ink: #03362A; --ink-soft: #575757; --ink-faint: #8A8A8A; --cream: #FFF7EB; --cream-2: #FAEEDA; --sand: #EAD8B8; --sky: #C6EBF7; --ember: #DA3E27; --line: rgba(3,54,42,0.14); background: #FFF7EB; color: #575757; } body[data-theme="v1"] nav.site { background: rgba(255,247,235,0.85); } body[data-theme="v1"] .sec.tint { background: rgba(198,235,247,0.35); } body[data-theme="v1"] .logo img { content: url('img/logo-forest.png'); } body[data-theme="v1"] .hero h1 { color: #03362A; } body[data-theme="v1"] .hero-sub { color: rgba(3,54,42,0.55); } body[data-theme="v1"] h2 { color: #03362A; } body[data-theme="v1"] h2 em { color: #DA3E27; } body[data-theme="v1"] .highlight::after { background: rgba(218,62,39,0.22); } body[data-theme="v1"] .sec-num { color: #DA3E27; } body[data-theme="v1"] .lede { color: rgba(3,54,42,0.65); } body[data-theme="v1"] .navlinks a { color: #03362A; } body[data-theme="v1"] .navlinks a::after { background: #03362A; } body[data-theme="v1"] .logo { color: #03362A; } body[data-theme="v1"] .nav-cta { background: #03362A; color: #FFF7EB; } body[data-theme="v1"] .nav-cta:hover { background: #DA3E27; color: #FFF7EB; } body[data-theme="v1"] .read-more { color: #03362A; border-color: #03362A; } body[data-theme="v1"] .read-more:hover { color: #DA3E27; border-color: #DA3E27; } body[data-theme="v1"] .eyebrow { color: rgba(3,54,42,0.55); } body[data-theme="v1"] .eyebrow::before { background: #03362A; opacity: 0.5; } body[data-theme="v1"] .s-num, body[data-theme="v1"] .list-num { color: #DA3E27; } body[data-theme="v1"] .s-title, body[data-theme="v1"] .list-title { color: #03362A; } body[data-theme="v1"] .cont-step p, body[data-theme="v1"] .list-desc { color: rgba(3,54,42,0.6); } body[data-theme="v1"] .cont-step:hover { background: rgba(198,235,247,0.4); padding-left: 28px; } body[data-theme="v1"] .cont-step:hover .s-num { color: #03362A; } body[data-theme="v1"] .belief.tint { background: rgba(198,235,247,0.4); } body[data-theme="v1"] .continuous-sec { background: linear-gradient(170deg, #FAEEDA 0%, #F5E5CC 60%, #FAEEDA 100%); } body[data-theme="v1"] .hero-trusted { background: rgba(3,54,42,0.04); border-top: 1px solid rgba(3,54,42,0.08); border-bottom: 1px solid rgba(3,54,42,0.08); } body[data-theme="v1"] .trusted-label { color: rgba(3,54,42,0.5); } body[data-theme="v1"] .trusted-logos span { color: rgba(3,54,42,0.65); } body[data-theme="v1"] .trusted-logo { height: 18px; width: auto; opacity: 0.4; filter: grayscale(1) brightness(0.3); transition: all .4s; } body[data-theme="v1"] .trusted-logo:hover { opacity: 1; filter: grayscale(0) brightness(1); } body[data-theme="v1"] .join-sec { background: #03362A; color: #FFF7EB; } body[data-theme="v1"] .join-sec .join-heading { color: #FFF7EB; } body[data-theme="v1"] .join-input { background: rgba(255,247,235,0.08); color: #FFF7EB; border: 1px solid rgba(255,247,235,0.2); border-right: none; } body[data-theme="v1"] .join-input::placeholder { color: rgba(255,247,235,0.4); } body[data-theme="v1"] .join-input:focus { border-color: #FFF7EB; } body[data-theme="v1"] .join-btn { background: #DA3E27; border: 1px solid #DA3E27; color: #FFF7EB; } body[data-theme="v1"] .join-btn:hover { background: #FFF7EB; color: #03362A; border-color: #FFF7EB; } body[data-theme="v1"] footer.site { background: #FAEEDA; } body[data-theme="v1"] footer.site .logo { color: #03362A; } body[data-theme="v1"] footer.site a:hover { color: #DA3E27; } body[data-theme="v1"] .page-header h1 { color: #03362A; } body[data-theme="v1"] .diff-grid h3 { color: #03362A; } body[data-theme="v1"] .diff-grid p { color: rgba(3,54,42,0.6); } body[data-theme="v1"] .story-text { color: rgba(3,54,42,0.6); } body[data-theme="v1"] .story-text p:first-child { color: #03362A; } body[data-theme="v1"] .story-text strong { color: #03362A; } /* ============================================================ THEME v2 — Forest (deep dark brand) ============================================================ */ body[data-theme="v2"] { --ink: #FFF7EB; --ink-soft: rgba(255,247,235,0.65); --ink-faint: rgba(255,247,235,0.4); --cream: #03362A; --cream-2: #07483A; --sand: #0B5C4A; --sky: #C6EBF7; --ember: #DA3E27; --line: rgba(255,247,235,0.14); background: #03362A; color: #FFF7EB; } body[data-theme="v2"] nav.site { background: rgba(3,54,42,0.85); } body[data-theme="v2"] .logo img { content: url('img/logo-cream.png'); } body[data-theme="v2"] .logo { color: #FFF7EB; } body[data-theme="v2"] .navlinks a { color: #FFF7EB; } body[data-theme="v2"] .navlinks a::after { background: #FFF7EB; } body[data-theme="v2"] .nav-cta { background: #FFF7EB; color: #03362A; } body[data-theme="v2"] .nav-cta:hover { background: #DA3E27; color: #FFF7EB; } body[data-theme="v2"] .hero h1 { color: #FFF7EB; } body[data-theme="v2"] .hero-sub { color: rgba(255,247,235,0.55); } body[data-theme="v2"] h2 { color: #FFF7EB; } body[data-theme="v2"] h2 em { color: #DA3E27; } body[data-theme="v2"] .highlight::after { background: rgba(198,235,247,0.25); } body[data-theme="v2"] .sec-num { color: #C6EBF7; } body[data-theme="v2"] .lede { color: rgba(255,247,235,0.6); } body[data-theme="v2"] .read-more { color: #FFF7EB; border-color: #FFF7EB; } body[data-theme="v2"] .read-more:hover { color: #C6EBF7; border-color: #C6EBF7; } body[data-theme="v2"] .eyebrow { color: rgba(255,247,235,0.55); } body[data-theme="v2"] .eyebrow::before { background: #FFF7EB; opacity: 0.5; } body[data-theme="v2"] .s-num, body[data-theme="v2"] .list-num { color: #DA3E27; } body[data-theme="v2"] .s-title, body[data-theme="v2"] .list-title { color: #FFF7EB; } body[data-theme="v2"] .cont-step p, body[data-theme="v2"] .list-desc { color: rgba(255,247,235,0.6); } body[data-theme="v2"] .cont-step:hover { background: rgba(198,235,247,0.08); padding-left: 28px; } body[data-theme="v2"] .cont-step:hover .s-num { color: #C6EBF7; } body[data-theme="v2"] .belief.tint { background: rgba(7,72,58,0.5); } body[data-theme="v2"] .continuous-sec { background: linear-gradient(170deg, #07483A 0%, #0A5244 50%, #03362A 100%); } body[data-theme="v2"] .hero-trusted { background: rgba(255,247,235,0.04); border-top: 1px solid rgba(255,247,235,0.08); border-bottom: 1px solid rgba(255,247,235,0.08); backdrop-filter: blur(20px); } body[data-theme="v2"] .trusted-label { color: rgba(255,247,235,0.45); } body[data-theme="v2"] .trusted-logos span { color: rgba(255,247,235,0.6); } body[data-theme="v2"] .join-sec { background: #FFF7EB; color: #03362A; } body[data-theme="v2"] .join-sec .join-heading { color: #03362A; } body[data-theme="v2"] .join-input { background: #FFFFFF; color: #03362A; border: 1px solid rgba(3,54,42,0.2); border-right: none; } body[data-theme="v2"] .join-input::placeholder { color: rgba(3,54,42,0.35); } body[data-theme="v2"] .join-input:focus { border-color: #03362A; } body[data-theme="v2"] .join-btn { background: #03362A; border: 1px solid #03362A; color: #FFF7EB; } body[data-theme="v2"] .join-btn:hover { background: #DA3E27; border-color: #DA3E27; } body[data-theme="v2"] footer.site { background: #02291F; border-top: none; color: rgba(255,247,235,0.55); } body[data-theme="v2"] footer.site h5 { color: rgba(255,247,235,0.4); } body[data-theme="v2"] footer.site a { color: rgba(255,247,235,0.7); } body[data-theme="v2"] footer.site a:hover { color: #C6EBF7; } body[data-theme="v2"] footer.site .legal { border-top-color: rgba(255,247,235,0.1); color: rgba(255,247,235,0.35); } body[data-theme="v2"] .page-header { border-bottom-color: rgba(255,247,235,0.14); } body[data-theme="v2"] .list-block, body[data-theme="v2"] .list-row { border-color: rgba(255,247,235,0.14); } body[data-theme="v2"] .diff-grid h3 { color: #FFF7EB; } body[data-theme="v2"] .diff-grid p { color: rgba(255,247,235,0.6); } body[data-theme="v2"] .story-text { color: rgba(255,247,235,0.7); } body[data-theme="v2"] .story-text p:first-child { color: #FFF7EB; } body[data-theme="v2"] .story-text strong { color: #FFF7EB; } body[data-theme="v2"] .story-photo-inner { background: #07483A; color: rgba(255,247,235,0.4); } /* ============================================================ THEME v3 — Flame (bold warm, sunset) cream ground, flame hero block ============================================================ */ body[data-theme="v3"] { --ink: #2A1410; --ink-soft: rgba(42,20,16,0.7); --ink-faint: rgba(42,20,16,0.45); --cream: #FFF1E0; --cream-2: #FFDDBB; --sand: #F4C8A0; --sky: #C6EBF7; --ember: #DA3E27; --line: rgba(218,62,39,0.18); background: #FFF1E0; color: #2A1410; } body[data-theme="v3"] nav.site { background: rgba(218,62,39,0.95); border-bottom: 1px solid rgba(255,247,235,0.08); } body[data-theme="v3"] .logo img { content: url('img/logo-cream.png'); } body[data-theme="v3"] .logo { color: #FFF7EB; } body[data-theme="v3"] .navlinks a { color: #FFF7EB; } body[data-theme="v3"] .navlinks a::after { background: #FFF7EB; } body[data-theme="v3"] .nav-cta { background: #FFF7EB; color: #DA3E27; } body[data-theme="v3"] .nav-cta:hover { background: #03362A; color: #FFF7EB; } body[data-theme="v3"] .hero { background: linear-gradient(170deg, #DA3E27 0%, #E85E3A 60%, #FFF1E0 100%); padding-bottom: 80px; } body[data-theme="v3"] .hero h1 { color: #FFF7EB; } body[data-theme="v3"] .hero-sub { color: rgba(255,247,235,0.75); } body[data-theme="v3"] .hero .highlight::after { background: rgba(255,247,235,0.3); } body[data-theme="v3"] h1 em { color: #FFF7EB; } body[data-theme="v3"] h2 { color: #2A1410; } body[data-theme="v3"] h2 em { color: #DA3E27; } body[data-theme="v3"] .highlight::after { background: rgba(218,62,39,0.22); } body[data-theme="v3"] .sec-num { color: #DA3E27; } body[data-theme="v3"] .lede { color: rgba(42,20,16,0.65); } body[data-theme="v3"] .read-more { color: #2A1410; border-color: #2A1410; } body[data-theme="v3"] .read-more:hover { color: #DA3E27; border-color: #DA3E27; } body[data-theme="v3"] .eyebrow { color: rgba(42,20,16,0.55); } body[data-theme="v3"] .eyebrow::before { background: #2A1410; opacity: 0.5; } body[data-theme="v3"] .s-num, body[data-theme="v3"] .list-num { color: #DA3E27; } body[data-theme="v3"] .s-title, body[data-theme="v3"] .list-title { color: #2A1410; } body[data-theme="v3"] .cont-step p, body[data-theme="v3"] .list-desc { color: rgba(42,20,16,0.6); } body[data-theme="v3"] .cont-step:hover { background: rgba(218,62,39,0.08); padding-left: 28px; } body[data-theme="v3"] .belief.tint { background: rgba(255,221,187,0.5); } body[data-theme="v3"] .continuous-sec { background: #FFE4CC; } body[data-theme="v3"] .hero-trusted { background: rgba(255,247,235,0.12); border-top: 1px solid rgba(255,247,235,0.15); border-bottom: 1px solid rgba(255,247,235,0.15); backdrop-filter: blur(16px); } body[data-theme="v3"] .trusted-label { color: rgba(255,247,235,0.65); } body[data-theme="v3"] .trusted-logos span { color: rgba(255,247,235,0.85); } body[data-theme="v3"] .join-sec { background: #2A1410; color: #FFF1E0; } body[data-theme="v3"] .join-sec .join-heading { color: #FFF1E0; } body[data-theme="v3"] .join-input { background: rgba(255,241,224,0.08); color: #FFF1E0; border: 1px solid rgba(255,241,224,0.2); border-right: none; } body[data-theme="v3"] .join-input::placeholder { color: rgba(255,241,224,0.4); } body[data-theme="v3"] .join-btn { background: #DA3E27; border: 1px solid #DA3E27; color: #FFF1E0; } body[data-theme="v3"] .join-btn:hover { background: #FFF1E0; color: #2A1410; border-color: #FFF1E0; } body[data-theme="v3"] footer.site { background: #FFDDBB; border-top: none; } body[data-theme="v3"] footer.site .logo { color: #2A1410; } body[data-theme="v3"] footer.site a:hover { color: #DA3E27; } body[data-theme="v3"] .page-header { background: linear-gradient(170deg, #DA3E27 0%, #E85E3A 70%, #FFF1E0 100%); padding: 160px 0 96px; border-bottom: none; } body[data-theme="v3"] .page-header h1 { color: #FFF7EB; } body[data-theme="v3"] .page-header h1 .highlight::after { background: rgba(255,247,235,0.3); } body[data-theme="v3"] .page-header .lede { color: rgba(255,247,235,0.85); } body[data-theme="v3"] .diff-grid h3 { color: #2A1410; } body[data-theme="v3"] .diff-grid p { color: rgba(42,20,16,0.6); } body[data-theme="v3"] .story-text { color: rgba(42,20,16,0.65); } body[data-theme="v3"] .story-text p:first-child { color: #2A1410; } body[data-theme="v3"] .story-text strong { color: #2A1410; } body[data-theme="v3"] .story-photo-inner { background: #F4C8A0; color: rgba(42,20,16,0.4); } /* ============================================================ THEME v4 — Sky (light, airy) ============================================================ */ body[data-theme="v4"] { --ink: #03362A; --ink-soft: rgba(3,54,42,0.65); --ink-faint: rgba(3,54,42,0.4); --cream: #E8F5FA; --cream-2: #D4EDF5; --sand: #B8DCEA; --sky: #C6EBF7; --ember: #DA3E27; --line: rgba(3,54,42,0.14); background: #E8F5FA; color: #03362A; } body[data-theme="v4"] nav.site { background: rgba(232,245,250,0.85); } body[data-theme="v4"] .logo img { content: url('img/logo-forest.png'); } body[data-theme="v4"] .logo { color: #03362A; } body[data-theme="v4"] .navlinks a { color: #03362A; } body[data-theme="v4"] .navlinks a::after { background: #03362A; } body[data-theme="v4"] .nav-cta { background: #03362A; color: #FFF7EB; } body[data-theme="v4"] .nav-cta:hover { background: #DA3E27; color: #FFF7EB; } body[data-theme="v4"] .hero h1 { color: #03362A; } body[data-theme="v4"] .hero-sub { color: rgba(3,54,42,0.6); } body[data-theme="v4"] h2 { color: #03362A; } body[data-theme="v4"] h2 em { color: #DA3E27; } body[data-theme="v4"] .highlight::after { background: rgba(218,62,39,0.22); } body[data-theme="v4"] .sec-num { color: #DA3E27; } body[data-theme="v4"] .lede { color: rgba(3,54,42,0.6); } body[data-theme="v4"] .read-more { color: #03362A; border-color: #03362A; } body[data-theme="v4"] .read-more:hover { color: #DA3E27; border-color: #DA3E27; } body[data-theme="v4"] .eyebrow { color: rgba(3,54,42,0.55); } body[data-theme="v4"] .eyebrow::before { background: #03362A; opacity: 0.5; } body[data-theme="v4"] .s-num, body[data-theme="v4"] .list-num { color: #DA3E27; } body[data-theme="v4"] .s-title, body[data-theme="v4"] .list-title { color: #03362A; } body[data-theme="v4"] .cont-step p, body[data-theme="v4"] .list-desc { color: rgba(3,54,42,0.6); } body[data-theme="v4"] .cont-step:hover { background: rgba(198,235,247,0.6); padding-left: 28px; } body[data-theme="v4"] .belief.tint { background: rgba(198,235,247,0.55); } body[data-theme="v4"] .continuous-sec { background: linear-gradient(170deg, #C6EBF7 0%, #D4EDF5 50%, #E8F5FA 100%); } body[data-theme="v4"] .hero-trusted { background: rgba(3,54,42,0.04); border-top: 1px solid rgba(3,54,42,0.08); border-bottom: 1px solid rgba(3,54,42,0.08); } body[data-theme="v4"] .trusted-label { color: rgba(3,54,42,0.5); } body[data-theme="v4"] .trusted-logos span { color: rgba(3,54,42,0.65); } body[data-theme="v4"] .join-sec { background: #C6EBF7; color: #03362A; } body[data-theme="v4"] .join-sec .join-heading { color: #03362A; } body[data-theme="v4"] .join-input { background: #FFFFFF; color: #03362A; border: 1px solid rgba(3,54,42,0.2); border-right: none; } body[data-theme="v4"] .join-input::placeholder { color: rgba(3,54,42,0.35); } body[data-theme="v4"] .join-input:focus { border-color: #03362A; } body[data-theme="v4"] .join-btn { background: #03362A; border: 1px solid #03362A; color: #FFF7EB; } body[data-theme="v4"] .join-btn:hover { background: #DA3E27; border-color: #DA3E27; } body[data-theme="v4"] footer.site { background: #D4EDF5; } body[data-theme="v4"] footer.site .logo { color: #03362A; } body[data-theme="v4"] footer.site a:hover { color: #DA3E27; } body[data-theme="v4"] .page-header h1 { color: #03362A; } body[data-theme="v4"] .diff-grid h3 { color: #03362A; } body[data-theme="v4"] .diff-grid p { color: rgba(3,54,42,0.6); } body[data-theme="v4"] .story-text { color: rgba(3,54,42,0.65); } body[data-theme="v4"] .story-text p:first-child { color: #03362A; } body[data-theme="v4"] .story-text strong { color: #03362A; } body[data-theme="v4"] .story-photo-inner { background: #C6EBF7; color: rgba(3,54,42,0.4); } /* ============================================================ THEME v5 — Painterly (full brand gradient) ============================================================ */ body[data-theme="v5"] { --ink: #03362A; --ink-soft: rgba(3,54,42,0.7); --ink-faint: rgba(3,54,42,0.5); --cream: #FFF7EB; --cream-2: #FDEFDE; --sand: #E6D8BE; --sky: #C6EBF7; --ember: #DA3E27; --line: rgba(3,54,42,0.15); background: linear-gradient(135deg, #FFF7EB 0%, #FDEFDE 25%, #F0DDCC 50%, #DDEEF4 75%, #C6EBF7 100%); background-attachment: fixed; color: #03362A; } body[data-theme="v5"] nav.site { background: rgba(255,247,235,0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body[data-theme="v5"] .logo img { content: url('img/logo-forest.png'); } body[data-theme="v5"] .logo { color: #03362A; } body[data-theme="v5"] .navlinks a { color: #03362A; } body[data-theme="v5"] .navlinks a::after { background: #03362A; } body[data-theme="v5"] .nav-cta { background: #03362A; color: #FFF7EB; } body[data-theme="v5"] .nav-cta:hover { background: #DA3E27; color: #FFF7EB; } body[data-theme="v5"] .hero h1 { color: #03362A; } body[data-theme="v5"] .hero-sub { color: rgba(3,54,42,0.6); } body[data-theme="v5"] h2 { color: #03362A; } body[data-theme="v5"] h2 em { color: #DA3E27; } body[data-theme="v5"] .highlight::after { background: rgba(218,62,39,0.25); } body[data-theme="v5"] .sec-num { color: #DA3E27; } body[data-theme="v5"] .lede { color: rgba(3,54,42,0.65); } body[data-theme="v5"] .read-more { color: #03362A; border-color: #03362A; } body[data-theme="v5"] .read-more:hover { color: #DA3E27; border-color: #DA3E27; } body[data-theme="v5"] .eyebrow { color: rgba(3,54,42,0.55); } body[data-theme="v5"] .eyebrow::before { background: #03362A; opacity: 0.5; } body[data-theme="v5"] .s-num, body[data-theme="v5"] .list-num { color: #DA3E27; } body[data-theme="v5"] .s-title, body[data-theme="v5"] .list-title { color: #03362A; } body[data-theme="v5"] .cont-step p, body[data-theme="v5"] .list-desc { color: rgba(3,54,42,0.65); } body[data-theme="v5"] .cont-step:hover { background: rgba(255,247,235,0.4); padding-left: 28px; } body[data-theme="v5"] .belief.tint { background: rgba(255,247,235,0.18); backdrop-filter: none; } body[data-theme="v5"] .continuous-sec { background: rgba(255,247,235,0.18); backdrop-filter: none; } body[data-theme="v5"] .hero-trusted { background: rgba(255,247,235,0.25); border-top: 1px solid rgba(3,54,42,0.08); border-bottom: 1px solid rgba(3,54,42,0.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body[data-theme="v5"] .trusted-label { color: rgba(3,54,42,0.5); } body[data-theme="v5"] .trusted-logos span { color: rgba(3,54,42,0.7); } body[data-theme="v5"] .join-sec { background: #03362A; backdrop-filter: none; color: #FFF7EB; } body[data-theme="v5"] .join-sec .join-heading { color: #FFF7EB; } body[data-theme="v5"] .join-input { background: rgba(255,247,235,0.08); color: #FFF7EB; border: 1px solid rgba(255,247,235,0.2); border-right: none; } body[data-theme="v5"] .join-input::placeholder { color: rgba(255,247,235,0.4); } body[data-theme="v5"] .join-btn { background: #DA3E27; border: 1px solid #DA3E27; color: #FFF7EB; } body[data-theme="v5"] .join-btn:hover { background: #FFF7EB; color: #03362A; border-color: #FFF7EB; } body[data-theme="v5"] footer.site { background: #03362A; border-top: 1px solid rgba(255,247,235,0.08); color: rgba(255,247,235,0.55); } body[data-theme="v5"] footer.site .logo img { filter: none; } body[data-theme="v5"] footer.site h5 { color: rgba(255,247,235,0.35); } body[data-theme="v5"] footer.site a { color: rgba(255,247,235,0.65); } body[data-theme="v5"] footer.site a:hover { color: #C6EBF7; } body[data-theme="v5"] footer.site .brand p { color: rgba(255,247,235,0.4); } body[data-theme="v5"] footer.site .legal { border-top-color: rgba(255,247,235,0.08); color: rgba(255,247,235,0.3); } body[data-theme="v5"] .page-header { border-bottom: none; padding: 120px 0 48px; } body[data-theme="v5"] .page-header h1 { color: #03362A; } body[data-theme="v5"] .diff-grid h3 { color: #03362A; } body[data-theme="v5"] .diff-grid p { color: rgba(3,54,42,0.65); } body[data-theme="v5"] .story-text { color: rgba(3,54,42,0.7); } body[data-theme="v5"] .story-text p:first-child { color: #03362A; } body[data-theme="v5"] .story-text strong { color: #03362A; } body[data-theme="v5"] .story-photo-inner { background: rgba(3,54,42,0.1); color: rgba(3,54,42,0.45); } body[data-theme="v5"] .trusted-logo { height: 18px; width: auto; opacity: 0.35; filter: grayscale(1) brightness(0.3); transition: all .4s; } body[data-theme="v5"] .trusted-logo:hover { opacity: 1; filter: grayscale(0) brightness(1); }