/* ============================================================ KindMind — Expressive Tweaks Three knobs that reshape the design's feel: · atmos-{bone|ink|sand} palette mood · voice-{italic|underline|roman} accent treatment · cadence-{calm|cinematic|brisk} rhythm + scale Classes go on . Variants override CSS vars + select editorial details that don't reduce to a single token. ============================================================ */ /* ── ATMOSPHERE ─────────────────────────────────────────── */ /* Bone is the default — already in colors_and_type.css. No overrides. */ html.atmos-ink { --km-bg: #1A100C; --km-ink: #FAF6F0; --km-white: #261813; --km-text-dark: #FAF6F0; --km-text-body: #C2B4A6; --km-text-light: #8A7A70; --km-text-mute: rgba(250, 246, 240, 0.32); --km-surface-warm: #261813; --km-border-subtle: rgba(250, 246, 240, 0.08); --km-border-soft: rgba(250, 246, 240, 0.16); --km-hairline: 1px solid rgba(250, 246, 240, 0.10); --km-orange: #D9B79A; --km-orange-light: #E8C9B4; --km-brown: #C68B66; /* lifted for contrast on ink */ --km-brown-hover: #D89977; } html.atmos-ink .btn-cta { background: var(--km-bg); color: var(--km-ink); border: 1px solid rgba(250,246,240,0.18); } html.atmos-ink .btn-cta:hover { background: var(--km-brown); color: #1A100C; border-color: var(--km-brown); } html.atmos-ink .cta-section::before { background: linear-gradient(180deg, rgba(26,16,12,0.55), rgba(26,16,12,0.86)); } html.atmos-ink .cta-card, html.atmos-ink .intake-form, html.atmos-ink .calendar-wrapper { background: var(--km-white); } html.atmos-ink .hero-credential { background: var(--km-white); } html.atmos-ink .service-card.editorial { background: var(--km-white); } html.atmos-ink .step-card { background: var(--km-bg); } html.atmos-ink .site-footer { background: #0E0805; } html.atmos-ink .navbar.scrolled { background: rgba(26, 16, 12, 0.86); border-bottom-color: rgba(250,246,240,0.08); } html.atmos-ink .nav-menu a { color: rgba(250, 246, 240, 0.65); } html.atmos-ink .nav-menu a:hover, html.atmos-ink .nav-menu a.active { color: var(--km-ink); } html.atmos-ink .nav-menu a::after { background: var(--km-ink); } html.atmos-ink .nav-status-dot { background: #82C7A1; box-shadow: 0 0 0 3px rgba(130, 199, 161, 0.22); animation-name: pulseDotInk; } html.atmos-ink .toast { background: var(--km-white); border-color: var(--km-border-subtle); color: var(--km-ink); } @keyframes pulseDotInk { 0%, 100% { box-shadow: 0 0 0 3px rgba(130, 199, 161, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(130, 199, 161, 0.08); } } html.atmos-sand { --km-bg: #EADFC6; --km-ink: #2A1810; --km-white: #F5EBD3; --km-text-dark: #2A1810; --km-text-body: #6B5040; --km-text-light: #8F7560; --km-text-mute: #B59A82; --km-surface-warm: #DDCFB0; --km-border-subtle: rgba(42, 24, 16, 0.08); --km-border-soft: rgba(42, 24, 16, 0.16); --km-hairline: 1px solid rgba(42, 24, 16, 0.10); } html.atmos-sand .site-footer { background: #1F1410; } /* ── VOICE ──────────────────────────────────────────────── */ /* Italic is the default. */ html.voice-underline h1 em, html.voice-underline h2 em, html.voice-underline blockquote em, html.voice-underline .footer-bottom-tag em { font-style: normal; color: var(--km-ink); background-image: linear-gradient(var(--km-brown), var(--km-brown)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 3px; padding-bottom: 0.04em; } html.voice-underline .stat-number em { font-style: normal; color: var(--km-ink); } html.voice-underline .meta-num, html.voice-underline .section-num, html.voice-underline .step-number { font-style: normal; } html.voice-underline .quote-mark { font-style: italic; } html.voice-roman h1 em, html.voice-roman h2 em, html.voice-roman blockquote em, html.voice-roman .footer-bottom-tag em { font-style: normal; color: inherit; } html.voice-roman .stat-number em { font-style: normal; color: var(--km-ink); opacity: 0.45; } html.voice-roman .meta-num, html.voice-roman .section-num { font-style: normal; color: var(--km-text-body); } html.voice-roman .step-number { font-style: normal; color: var(--km-ink); opacity: 0.18; font-size: 88px; } html.voice-roman .quote-mark { display: none; } html.voice-roman .testimonial-card.editorial blockquote { font-style: normal; } html.voice-roman .hero-content h1 { letter-spacing: -0.032em; } /* ── CADENCE ────────────────────────────────────────────── */ /* Calm is the default. */ html.cadence-cinematic .hero { padding: 200px 32px 160px; } html.cadence-cinematic .hero .container { gap: 100px; } html.cadence-cinematic .hero-content h1 { font-size: clamp(72px, 8.4vw, 144px); line-height: 0.96; margin-bottom: 64px; letter-spacing: -0.035em; } html.cadence-cinematic .hero-content h1 em { display: inline-block; padding-bottom: 0.08em; } html.cadence-cinematic .hero-subtitle { font-size: 22px; max-width: 540px; margin-bottom: 56px; } html.cadence-cinematic .hero-meta { margin-bottom: 52px; } html.cadence-cinematic .stats { padding: 120px 32px 140px; } html.cadence-cinematic .stats-grid { gap: 96px; } html.cadence-cinematic .stat-number { font-size: clamp(88px, 9vw, 168px); } html.cadence-cinematic .about, html.cadence-cinematic .services, html.cadence-cinematic .how-it-works, html.cadence-cinematic .testimonials { padding: 180px 32px; } html.cadence-cinematic .about .container { gap: 140px; } html.cadence-cinematic .about-content h2, html.cadence-cinematic .services-header h2, html.cadence-cinematic .how-header h2, html.cadence-cinematic .testimonials-header h2 { font-size: clamp(56px, 5.8vw, 96px); line-height: 0.96; } html.cadence-cinematic .services-grid { grid-template-columns: 1fr; gap: 56px; } html.cadence-cinematic .service-card.editorial .service-card-image { aspect-ratio: 21 / 9; } html.cadence-cinematic .service-card.editorial h3 { font-size: 46px; } html.cadence-cinematic .service-card.editorial .service-card-body { padding: 48px 56px 56px; } html.cadence-cinematic .testimonial-card.editorial { flex-basis: 620px; padding: 56px 56px 48px; } html.cadence-cinematic .testimonial-card.editorial blockquote { font-size: 36px; } html.cadence-cinematic .testimonials { padding: 180px 0; } html.cadence-cinematic .cta-section { padding: 200px 32px; } html.cadence-cinematic .cta-card { padding: 96px 72px; } html.cadence-cinematic .cta-card h2 { font-size: clamp(48px, 5.6vw, 88px); } html.cadence-cinematic .page-shell { padding: 200px 32px 140px; } html.cadence-cinematic .page-shell h1 { font-size: clamp(64px, 6.4vw, 108px); } html.cadence-brisk .hero { padding: 110px 32px 64px; } html.cadence-brisk .hero .container { gap: 56px; } html.cadence-brisk .hero-content h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; margin-bottom: 20px; letter-spacing: -0.022em; } html.cadence-brisk .hero-subtitle { font-size: 16px; margin-bottom: 28px; max-width: 420px; } html.cadence-brisk .hero-meta { margin-bottom: 24px; } html.cadence-brisk .hero-actions { margin-bottom: 36px; gap: 20px; } html.cadence-brisk .hero-modalities { padding-top: 16px; } html.cadence-brisk .stats { padding: 56px 32px 72px; } html.cadence-brisk .stats-grid { gap: 40px; } html.cadence-brisk .stat-number { font-size: clamp(44px, 4.8vw, 68px); } html.cadence-brisk .about, html.cadence-brisk .services, html.cadence-brisk .how-it-works, html.cadence-brisk .testimonials { padding: 72px 32px; } html.cadence-brisk .about .container { gap: 64px; grid-template-columns: 340px 1fr; } html.cadence-brisk .about-content h2, html.cadence-brisk .services-header h2, html.cadence-brisk .how-header h2, html.cadence-brisk .testimonials-header h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; } html.cadence-brisk .services-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } html.cadence-brisk .service-card.editorial .service-card-image { aspect-ratio: 4 / 3; } html.cadence-brisk .service-card.editorial .service-card-body { padding: 22px 22px 26px; gap: 10px; } html.cadence-brisk .service-card.editorial h3 { font-size: 22px; } html.cadence-brisk .service-card.editorial p { font-size: 14px; } html.cadence-brisk .step-card { padding: 28px 26px 30px; } html.cadence-brisk .step-card h3 { font-size: 22px; } html.cadence-brisk .step-number { font-size: 40px; } html.cadence-brisk .testimonial-card.editorial { flex-basis: 360px; padding: 28px 28px 26px; gap: 20px; } html.cadence-brisk .testimonial-card.editorial blockquote { font-size: 19px; line-height: 1.35; } html.cadence-brisk .testimonials { padding: 72px 0; } html.cadence-brisk .cta-section { padding: 80px 32px; } html.cadence-brisk .cta-card { padding: 48px 40px; } html.cadence-brisk .cta-card h2 { font-size: clamp(32px, 3.4vw, 44px); } html.cadence-brisk .page-shell { padding: 110px 32px 64px; } html.cadence-brisk .page-shell h1 { font-size: clamp(36px, 4vw, 56px); } @media (max-width: 900px) { html.cadence-brisk .services-grid { grid-template-columns: 1fr; } }