/* ========================================================================== Sarvita brand layer. Design system per https://design.sarvita.app (v0.2). Loaded AFTER the prebuilt Tailwind utility base (/css/tailwind.css), so it owns all brand color, type, depth and components. Plain CSS — no build step. Core rules: color is a flat block (never a cross-fade); depth is a hard offset shadow (no blur); cream text on saturated blocks, ink on light ones. ========================================================================== */ :root { /* Surfaces & ink */ --sv-sand: #FBF3E9; --sv-sand-deep: #F1E6D4; --sv-cream: #FFF7EC; --sv-line: #E7D8BE; --sv-ink: #2A211B; --sv-ink-soft: #6F6256; --sv-ink-faded: #736550; /* AA on sand (5.15:1) — used for dates/captions/eyebrows */ --sv-ink-ghost: #C0B4A2; /* Brand */ --sv-coral: #E1593B; --sv-coral-deep: #C9462C; /* Crayon blocks */ --sv-rust: #C75A36; --sv-gold: #E0A12E; --sv-green: #2E9E7C; --sv-teal: #1A8C78; --sv-steel: #2F6FB0; --sv-indigo: #3F5DB0; --sv-plum: #5E4B8B; --sv-navy: #21384F; --sv-slate: #6E7A87; --sv-violet: #8A46A8; /* Hard-offset shadow tones */ --sv-sh-warm: #D8C4A1; /* neutral cut-out on sand/cream */ --sv-sh-ink: #2A211B; --font-display: 'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-ui: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ----------------------------------------------------------------- base --- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background-color: var(--sv-sand); color: var(--sv-ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Hard-offset shadows & decorative blobs extend past their boxes; clip the horizontal overflow without breaking position: sticky (clip, not hidden). */ overflow-x: clip; } /* Win over Tailwind's .font-sans (Inter) wherever it lands, incl. . */ .font-sans { font-family: var(--font-ui); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--sv-ink); letter-spacing: -0.01em; } .font-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; } ::selection { background: var(--sv-coral); color: var(--sv-cream); } /* Visible keyboard focus (brand ink ring; >=3:1 on coral/sand/crayon). */ a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--sv-ink); outline-offset: 2px; border-radius: 4px; } a { color: var(--sv-coral-deep); } a:hover { color: #A8391F; } /* ---------------------------------------------------------- color utils --- */ .text-ink { color: var(--sv-ink) !important; } .text-ink-soft { color: var(--sv-ink-soft) !important; } .text-ink-faded { color: var(--sv-ink-faded) !important; } .text-ink-ghost { color: var(--sv-ink-ghost) !important; } .text-coral { color: var(--sv-coral) !important; } .text-coral-deep { color: var(--sv-coral-deep) !important; } .text-cream { color: var(--sv-cream) !important; } .text-gold { color: var(--sv-gold) !important; } .text-green { color: var(--sv-green) !important; } .text-teal { color: var(--sv-teal) !important; } .text-steel { color: var(--sv-steel) !important; } .bg-sand { background-color: var(--sv-sand) !important; } .bg-sand-deep { background-color: var(--sv-sand-deep) !important; } .bg-cream { background-color: var(--sv-cream) !important; } .bg-coral { background-color: var(--sv-coral) !important; } .bg-coral-deep{ background-color: var(--sv-coral-deep) !important; } .bg-ink { background-color: var(--sv-ink) !important; } .bg-navy { background-color: var(--sv-navy) !important; } .bg-gold { background-color: var(--sv-gold) !important; } .bg-green { background-color: var(--sv-green) !important; } .bg-teal { background-color: var(--sv-teal) !important; } .bg-steel { background-color: var(--sv-steel) !important; } .bg-plum { background-color: var(--sv-plum) !important; } .bg-indigo { background-color: var(--sv-indigo) !important; } .border-line { border-color: var(--sv-line) !important; } .border-coral { border-color: var(--sv-coral) !important; } .border-ink { border-color: var(--sv-ink) !important; } /* --------------------------------------------------- hard offset shadows --- */ /* No blur — solid colour cut-out. Override tone with --sv-sc on the element. !important so an explicit hard-* always wins over a component base shadow. */ .hard-pop { box-shadow: 4px 5px 0 var(--sv-sc, var(--sv-sh-warm)) !important; } .hard-block { box-shadow: 7px 8px 0 var(--sv-sc, var(--sv-sh-warm)) !important; } .hard-hero { box-shadow: 12px 14px 0 var(--sv-sc, var(--sv-coral-deep)) !important; } .hard-none { box-shadow: none !important; } /* -------------------------------------------------------------- brand mark */ .app-icon { border-radius: 22.37%; background: var(--sv-sand); box-shadow: 3px 4px 0 var(--sv-sh-warm); } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; } .brand__tile { flex: none; border-radius: 26%; transform: rotate(-6deg); box-shadow: 3px 4px 0 var(--sv-coral-deep); transition: transform .2s ease; } .brand:hover .brand__tile { transform: rotate(0deg); } .brand__word { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--sv-ink); line-height: 1; } /* -------------------------------------------------------------- buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-ui); font-weight: 600; border-radius: 999px; padding: 0.95rem 1.7rem; line-height: 1; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .12s ease, background-color .15s ease, box-shadow .12s ease, color .15s ease; } .btn:active { transform: translateY(3px); } .btn-coral { background: var(--sv-coral); color: var(--sv-cream); box-shadow: 0 4px 0 var(--sv-coral-deep); } .btn-coral:hover { background: #E8674B; color: var(--sv-cream); } .btn-coral:active { box-shadow: 0 1px 0 var(--sv-coral-deep); } .btn-cream { background: var(--sv-cream); color: var(--sv-coral-deep); box-shadow: 0 4px 0 rgba(42, 33, 27, 0.22); } .btn-cream:hover { background: #fff; color: var(--sv-coral-deep); } .btn-cream:active { box-shadow: 0 1px 0 rgba(42, 33, 27, 0.22); } .btn-ghost { background: transparent; color: var(--sv-ink); border-color: var(--sv-ink); } .btn-ghost:hover { background: var(--sv-ink); color: var(--sv-sand); } .btn-sm { padding: 0.6rem 1.15rem; font-size: 0.95rem; } /* ---------------------------------------------------------------- cards --- */ .card { background: var(--sv-cream); border: 1.5px solid var(--sv-line); border-radius: 1.5rem; --sv-sc: var(--sv-sh-warm); } .card-pop { box-shadow: 4px 5px 0 var(--sv-sh-warm); } .card-block { box-shadow: 7px 8px 0 var(--sv-sh-warm); } .lift { transition: transform .2s ease, box-shadow .2s ease; } .lift:hover { transform: translate(-2px, -3px); box-shadow: 8px 11px 0 var(--sv-sc, var(--sv-sh-warm)); } /* Saturated "crayon" blocks: flat colour, cream text, coloured hard shadow. */ .crayon { color: var(--sv-cream); border-radius: 1.5rem; border: none; box-shadow: 5px 6px 0 var(--sv-sc, var(--sv-coral-deep)); } .crayon h1, .crayon h2, .crayon h3, .crayon h4 { color: var(--sv-cream); } /* Full-opacity cream for body copy on saturated blocks (no translucency). */ .crayon p { color: var(--sv-cream) !important; } .crayon .pillar-sub { font-weight: 600; } /* Longevity Path pillar mascot avatar (Sar) on a crayon block. */ .pillar-avatar { width: 5rem; height: 5rem; border-radius: 50%; background: var(--sv-cream); box-shadow: 3px 4px 0 var(--sv-sc, rgba(42, 33, 27, 0.22)); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 1.1rem; } .pillar-avatar img { width: 100%; height: 100%; object-fit: contain; } .crayon-coral { background: var(--sv-coral); --sv-sc: var(--sv-coral-deep); } .crayon-rust { background: var(--sv-rust); --sv-sc: #9d4226; } .crayon-gold { background: var(--sv-gold); --sv-sc: #b87f17; } .crayon-green { background: var(--sv-green); --sv-sc: #1f7359; } .crayon-teal { background: var(--sv-teal); --sv-sc: #11665a; } .crayon-steel { background: var(--sv-steel); --sv-sc: #234f80; } .crayon-indigo { background: var(--sv-indigo); --sv-sc: #2c4080; } .crayon-plum { background: var(--sv-plum); --sv-sc: #433763; } .crayon-navy { background: var(--sv-navy); --sv-sc: #142433; } .crayon-slate { background: var(--sv-slate); --sv-sc: #515a64; } /* -------------------------------------------------- five-pillar orbit --- */ /* Mobile-first: a stacked list of pillars with the payoff badge on top. md+: the five pillars arc into a ring orbiting the "younger you" badge. */ .orbit { display: flex; flex-direction: column; gap: 0.9rem; max-width: 30rem; margin: 0 auto; } .orbit__center { order: -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 9rem; height: 9rem; margin: 0 auto 0.6rem; border-radius: 50%; background: var(--sv-coral); color: var(--sv-cream); box-shadow: 5px 6px 0 var(--sv-coral-deep); } .orbit__center .o-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.04; } .orbit__center .o-sub { font-size: 0.72rem; margin-top: 0.25rem; opacity: 0.92; } .orbit__node { display: flex; align-items: center; gap: 0.9rem; text-align: left; } .orbit__node .pillar-avatar { width: 4rem; height: 4rem; margin-bottom: 0; flex: none; border: 3px solid var(--sv-sc, var(--sv-line)); } .orbit__node .o-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--sv-ink); line-height: 1.1; } .orbit__node .o-benefit { font-size: 0.85rem; color: var(--sv-ink-soft); margin-top: 0.15rem; } @media (min-width: 768px) { .orbit { display: block; position: relative; width: min(36rem, 100%); max-width: none; aspect-ratio: 1 / 1; margin: 0 auto; } .orbit::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; border: 2px dashed var(--sv-line); } .orbit__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10rem; height: 10rem; margin: 0; } .orbit__center .o-title { font-size: 1.2rem; } .orbit__node { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; width: 9rem; } .orbit__node .pillar-avatar { width: 5rem; height: 5rem; } .orbit__node .o-benefit { font-size: 0.8rem; } } /* ---------------------------------------------------------------- pills --- */ .pill { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 999px; line-height: 1; } .pill-coral { background: rgba(225, 89, 59, 0.14); color: #A8391F; } .pill-green { background: rgba(46, 158, 124, 0.16); color: #0F5A4F; } .pill-gold { background: rgba(224, 161, 46, 0.18); color: #7A5310; } .pill-cream { background: var(--sv-cream); color: var(--sv-ink-soft); border: 1.5px solid var(--sv-line); } .eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-ink-faded); } /* ------------------------------------------------------------ device frame */ .device { position: relative; background: #161412; border-radius: 2.4rem; padding: 0.5rem; box-shadow: 0 1px 0 1px rgba(0,0,0,0.25), 8px 12px 0 var(--sv-sc, var(--sv-sh-warm)); display: inline-block; width: 100%; } .device img { display: block; width: 100%; height: auto; border-radius: 2rem; } .device--notch::before { content: ""; position: absolute; top: 0.95rem; left: 50%; transform: translateX(-50%); width: 30%; height: 1.15rem; background: #000; border-radius: 999px; z-index: 5; } .device-coralshadow { --sv-sc: var(--sv-coral-deep); } /* ------------------------------------------------------------------- faq --- */ .faq { background: var(--sv-cream); border: 1.5px solid var(--sv-line); border-radius: 1.25rem; padding: 1.4rem 1.6rem; } .faq + .faq { margin-top: 1rem; } .faq > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--sv-ink); } .faq > summary::-webkit-details-marker { display: none; } .faq > summary .faq__chev { color: var(--sv-coral); transition: transform .2s ease; flex: none; } .faq[open] > summary .faq__chev { transform: rotate(180deg); } .faq__body { margin-top: 0.9rem; color: var(--sv-ink-soft); line-height: 1.7; } .faq__body a { color: var(--sv-coral); text-decoration: underline; } /* ---------------------------------------------------------------- header --- */ .sv-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 243, 233, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1.5px solid var(--sv-line); } .nav-link { color: var(--sv-ink-soft); font-weight: 500; text-decoration: none; transition: color .15s ease; } .nav-link:hover { color: var(--sv-ink); } /* ---------------------------------------------------------------- footer --- */ .sv-footer { background: var(--sv-navy); color: var(--sv-sand); } .sv-footer a { color: var(--sv-ink-ghost); text-decoration: none; transition: color .15s ease; } .sv-footer a:hover { color: var(--sv-cream); } /* -------------------------------------------------------- decorative blob --- */ .blob { position: absolute; border-radius: 999px; filter: blur(60px); opacity: 0.5; pointer-events: none; } /* ------------------------------------------------------------ animations --- */ @keyframes sv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .float-soft { animation: sv-float 5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .float-soft { animation: none; } html { scroll-behavior: auto; } } /* ----------------------------------------------------------------- prose --- */ /* Blog / legal long-form. Ink on sand, Bricolage headings, coral accents. */ .prose { color: var(--sv-ink-soft); font-size: 1.0625rem; line-height: 1.8; } .prose > :first-child { margin-top: 0; } .prose h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--sv-ink); margin: 2.5rem 0 1rem; letter-spacing: -0.02em; } .prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--sv-ink); margin: 2rem 0 0.75rem; } .prose h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--sv-ink); margin: 1.6rem 0 0.6rem; } .prose p { margin-bottom: 1.25rem; } .prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: 0.45rem; } .prose li::marker { color: var(--sv-coral); } .prose a { color: var(--sv-coral-deep); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { color: #A8391F; } .prose strong { color: var(--sv-ink); font-weight: 600; } .prose blockquote { border-left: 4px solid var(--sv-coral); background: var(--sv-cream); border-radius: 0 0.75rem 0.75rem 0; padding: 0.75rem 1.25rem; margin: 1.5rem 0; color: var(--sv-ink-soft); font-style: italic; } .prose img { border-radius: 1rem; margin: 2rem auto; } .prose hr { border: 0; border-top: 1.5px solid var(--sv-line); margin: 2.5rem 0; } .prose code { background: var(--sv-sand-deep); border-radius: 0.35rem; padding: 0.1rem 0.35rem; font-size: 0.92em; color: var(--sv-ink); } .prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.97rem; } .prose th { text-align: left; font-family: var(--font-display); color: var(--sv-ink); border-bottom: 2px solid var(--sv-line); padding: 0.6rem 0.75rem; } .prose td { border-bottom: 1px solid var(--sv-line); padding: 0.6rem 0.75rem; color: var(--sv-ink-soft); } /* ========================================================================== Legacy-utility remap — warms any content still using the old blue/purple palette (e.g. inline-styled /compare bodies not yet rebranded) so nothing clashes. Matches Tailwind's emitted class names; same specificity, later in the cascade, so these win over the prebuilt utilities. ========================================================================== */ .gradient-text { background: none !important; -webkit-text-fill-color: var(--sv-coral) !important; color: var(--sv-coral) !important; } .gradient-bg { background: var(--sv-coral) !important; } .gradient-bg-light { background: var(--sv-sand-deep) !important; } .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-600, .text-indigo-700, .text-purple-600, .text-purple-700 { color: var(--sv-coral-deep); } .hover\:text-blue-300:hover, .hover\:text-blue-500:hover, .hover\:text-blue-600:hover, .hover\:text-blue-700:hover { color: #A8391F; } /* Light text that sits on coral/coral-deep blocks → cream */ .text-blue-100, .text-blue-200, .text-blue-300 { color: var(--sv-cream); } /* Muted greys → warm ink tones (readable on sand/cream) */ .text-gray-400 { color: var(--sv-ink-faded); } .text-gray-500 { color: var(--sv-ink-soft); } .bg-blue-500, .bg-blue-600 { background-color: var(--sv-coral); } /* Cool light tint surfaces → warm cream card; cool hairlines → brand line */ .bg-blue-50, .bg-sky-50, .bg-indigo-50, .bg-purple-50 { background-color: var(--sv-cream); } .border-blue-100, .border-blue-200, .border-indigo-200, .border-purple-200 { border-color: var(--sv-line); } /* Gradient stops kept warm (warm-on-warm reads fine in legacy bodies) */ .from-blue-50 { --tw-gradient-from: var(--sv-cream) var(--tw-gradient-from-position); } .from-blue-500 { --tw-gradient-from: var(--sv-coral) var(--tw-gradient-from-position); } .to-purple-50 { --tw-gradient-to: var(--sv-sand-deep) var(--tw-gradient-to-position); } .to-purple-600 { --tw-gradient-to: var(--sv-coral-deep) var(--tw-gradient-to-position); } .border-blue-400 { border-color: var(--sv-coral); } .hover\:border-blue-300:hover { border-color: var(--sv-coral); }