/* ── VedicHymns · Landing-page token layer ──────────────────────────────── One brand, four accents. Sits on top of vars.css — never forks its values. Brand base (dark-ink / ivory / serif) is aliased from vars.css. The four category accents resolve from the raw --acc-* palette in vars.css into a single semantic triad (--accent · --accent-soft · --accent-glow) selected per page by . accentFamily → data-accent value: oracle · deep violet (Ask the Oracle) astrology-gold · antique gold (charts, timing, birth-chart, talk) love-rose · rose (love, life, career, wellness) scripture-teal · teal (scripture, dharma, ayurveda) ───────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand base — aliased from vars.css, not re-defined ── */ --lp-ink: var(--midnight); /* darkest surface */ --lp-ink-2: var(--midnight-2); --lp-ink-3: var(--midnight-3); --lp-ivory: #F4ECDF; /* body text on ink */ --lp-ivory-bright: #FDF6EA; /* headlines */ --lp-ivory-55: rgba(244,236,223,0.55); --lp-ivory-40: rgba(244,236,223,0.40); --lp-ivory-30: rgba(244,236,223,0.30); --lp-hairline: rgba(244,236,223,0.10); --lp-panel: rgba(8,20,34,0.62); /* frosted card on ink */ /* Fonts — reuse the brand pairing */ --lp-serif: var(--font-display); --lp-sans: var(--font-body); /* ── Spacing scale (8pt-ish, t-shirt) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ── Radius ── */ --lp-r-sm: 10px; --lp-r: 14px; --lp-r-lg: 20px; --lp-r-pill: 999px; /* ── Big-header type scale — clamp(), serif display ── */ --fs-display: clamp(2.55rem, 7.4vw, 4.7rem); /* platform hero */ --fs-h1: clamp(2.0rem, 5.4vw, 3.2rem); /* doorway hero / big section head */ --fs-h2: clamp(1.65rem, 4.1vw, 2.5rem); --fs-h3: clamp(1.28rem, 3vw, 1.75rem); --fs-lead: clamp(1rem, 2.1vw, 1.16rem); --fs-eyebrow: 0.66rem; /* Motion */ --lp-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Sensible default accent (overridden by [data-accent]) */ --accent: var(--acc-gold); --accent-soft: var(--acc-gold-soft); --accent-glow: var(--acc-gold-glow); --accent-hi: var(--gold-light); --cta-fg: #1A0E02; } /* ── Accent selection — set on (or any wrapper) ── */ [data-accent="oracle"] { --accent: var(--acc-oracle); --accent-soft: var(--acc-oracle-soft); --accent-glow: var(--acc-oracle-glow); --accent-hi: #BE97F7; --cta-fg: #fff; } [data-accent="astrology-gold"] { --accent: var(--acc-gold); --accent-soft: var(--acc-gold-soft); --accent-glow: var(--acc-gold-glow); --accent-hi: var(--gold-light); --cta-fg: #1A0E02; } [data-accent="love-rose"] { --accent: var(--acc-rose); --accent-soft: var(--acc-rose-soft); --accent-glow: var(--acc-rose-glow); --accent-hi: #F090B0; --cta-fg: #fff; } [data-accent="scripture-teal"] { --accent: var(--acc-teal); --accent-soft: var(--acc-teal-soft); --accent-glow: var(--acc-teal-glow); --accent-hi: #37CEC0; --cta-fg: #04140F; } /* ── Highlighted phrase — subtle accent wash, NOT bold-everything ────────── A soft accent "highlighter" under the lower third of the words, plus a 1px accent underline. Weight/size unchanged so emphasis stays quiet. */ .hl { color: var(--lp-ivory-bright); background-image: linear-gradient(to top, var(--accent-soft) 0, var(--accent-soft) 0.36em, transparent 0.36em), linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 88%, 0 100%; background-size: 100% 100%, 100% 1.5px; padding: 0 0.06em 0.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ── Per-accent CTA button ─────────────────────────────────────────────── */ .lp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; background: linear-gradient(135deg, var(--accent), var(--accent-hi)); color: var(--cta-fg); border: none; border-radius: var(--lp-r); padding: 16px 24px; font: 800 1.02rem/1 var(--lp-sans); letter-spacing: 0.005em; cursor: pointer; box-shadow: 0 10px 30px var(--accent-glow); transition: filter 0.15s, transform 0.05s; } .lp-cta:hover { filter: brightness(1.07); } .lp-cta:active { transform: translateY(1px); } .lp-cta:disabled { opacity: 0.55; box-shadow: none; cursor: default; } .lp-cta--block { width: 100%; } /* Ghost / secondary CTA — accent outline on ink */ .lp-cta-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; background: var(--accent-soft); color: var(--lp-ivory-bright); border: 1px solid var(--accent); border-radius: var(--lp-r); padding: 15px 24px; font: 700 0.98rem/1 var(--lp-sans); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .lp-cta-ghost:hover { background: var(--accent-glow); } /* ── Small shared primitives ───────────────────────────────────────────── */ .lp-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .lp-chip { text-align: left; background: rgba(255,255,255,0.035); border: 1px solid var(--accent-soft); color: var(--lp-ivory); border-radius: 12px; padding: 11px 14px; font: 500 0.9rem/1.35 var(--lp-sans); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .lp-chip:hover, .lp-chip:active { background: var(--accent-soft); border-color: var(--accent); } /* Serif display headline helper */ .lp-display { font-family: var(--lp-serif); font-weight: 600; color: var(--lp-ivory-bright); line-height: 1.08; letter-spacing: -0.005em; } .lp-display em { font-style: italic; color: var(--accent-hi); } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }