/* =========================================================== Manorath Wellness — Earthy Ayurvedic theme 3 directions switched via Colors expressed as "R G B" so Tailwind alpha modifiers work. =========================================================== */ @import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:wght@500;600;700&family=Spectral:wght@500;600;700;800&family=Mulish:wght@300;400;500;600;700;800&family=Mukta:wght@300;400;500;600;700;800&display=swap"); :root { /* ---- palette (Direction 2 — Earthy Satvic, the default) ---- */ --forest: 38 58 40; /* deep green */ --leaf: 79 110 58; /* primary green */ --leaf-600: 92 124 70; --sage: 138 161 125; /* muted green */ --sage-soft: 205 215 192; --clay: 184 92 56; /* terracotta accent */ --clay-deep: 150 70 40; --ochre: 199 154 62; /* gold/ochre */ --cream: 245 238 222; /* satvic warm cream — page bg */ --sand: 234 223 199; /* deeper khaki-cream section */ --ivory: 251 247 237; /* surfaces / cards */ --paper: 252 249 241; /* clean warm near-white section bg */ --ink: 44 36 27; /* primary text */ --ink-soft: 96 84 68; /* secondary text */ --line: 222 210 188; /* hairlines */ --white: 255 255 255; --bg: var(--cream); --hero-from: 247 241 226; --hero-to: 235 225 202; /* roles */ --primary: var(--leaf); --primary-deep: var(--forest); --accent: var(--clay); --font-display: "Marcellus", serif; --font-body: "Mulish", system-ui, sans-serif; --radius-sm: 14px; --radius: 20px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(44 36 27 / 0.05), 0 2px 8px rgb(44 36 27 / 0.05); --shadow: 0 6px 18px rgb(44 36 27 / 0.08), 0 2px 6px rgb(44 36 27 / 0.05); --shadow-lg: 0 22px 50px -18px rgb(44 36 27 / 0.30); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); } /* ---- Direction 1 : Refined (safe, airy, minimal) ---- */ [data-dir="1"] { --leaf: 71 102 60; --clay: 168 96 64; --cream: 250 247 240; --sand: 243 238 229; --ivory: 255 255 255; --line: 230 222 208; --hero-from: 252 249 243; --hero-to: 244 238 228; --font-display: "Cormorant Garamond", serif; --font-body: "Mukta", system-ui, sans-serif; --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; } /* ---- Direction 2 : Earthy Satvic (default, declared in :root) ---- */ [data-dir="2"] { } /* ---- Direction 3 : Bold Traditional (rich, deep, ornamental) ---- */ [data-dir="3"] { --forest: 27 46 32; --leaf: 58 92 50; --clay: 176 78 42; --clay-deep: 138 58 30; --ochre: 192 142 48; --cream: 243 234 216; --sand: 232 219 196; --ivory: 251 246 236; --ink: 33 28 21; --line: 214 199 172; --hero-from: 27 46 32; --hero-to: 38 58 40; --font-display: "Spectral", serif; --font-body: "Mukta", system-ui, sans-serif; --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; } /* ================= base ================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: rgb(var(--ink)); background: rgb(var(--bg)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgb(var(--clay) / 0.22); } h1, h2, h3, h4, .font-display { font-family: var(--font-display); font-weight: 600; } .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--clay)); } /* leaf divider */ .leaf-rule { display: inline-flex; align-items: center; gap: 10px; color: rgb(var(--sage)); } .leaf-rule::before, .leaf-rule::after { content: ""; height: 1px; width: 46px; background: linear-gradient(90deg, transparent, rgb(var(--sage))); } .leaf-rule::after { background: linear-gradient(270deg, transparent, rgb(var(--sage))); } /* ================= buttons ================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; padding: 0.85rem 1.5rem; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform .14s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); text-decoration: none; line-height: 1; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: rgb(var(--clay)); color: #fff; box-shadow: 0 10px 24px -10px rgb(var(--clay) / 0.7); } .btn-primary:hover { background: rgb(var(--clay-deep)); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgb(var(--clay) / 0.8); } .btn-leaf { background: rgb(var(--leaf)); color: #fff; box-shadow: 0 10px 24px -12px rgb(var(--leaf) / 0.7); } .btn-leaf:hover { background: rgb(var(--forest)); transform: translateY(-2px); } .btn-ghost { background: transparent; color: rgb(var(--leaf)); border-color: rgb(var(--leaf) / 0.4); } .btn-ghost:hover { background: rgb(var(--leaf) / 0.08); border-color: rgb(var(--leaf)); transform: translateY(-2px); } .btn-wa { background: #25D366; color: #fff; box-shadow: 0 10px 24px -12px rgba(37,211,102,0.8); } .btn-wa:hover { background: #1ebe5a; transform: translateY(-2px); } /* ================= cards ================= */ .card { background: rgb(var(--ivory)); border: 1px solid rgb(var(--line)); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgb(var(--sage) / 0.6); } .chip { display: inline-flex; align-items: center; gap: 7px; background: rgb(var(--leaf) / 0.10); color: rgb(var(--forest)); border: 1px solid rgb(var(--leaf) / 0.18); padding: 0.42rem 0.85rem; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 700; white-space: nowrap; } /* organic blob behind imagery */ .blob { border-radius: 42% 58% 56% 44% / 50% 44% 56% 50%; } /* section backgrounds */ .bg-cream { background: rgb(var(--cream)); } .bg-sand { background: rgb(var(--sand)); } .bg-ivory { background: rgb(var(--ivory)); } .bg-paper { background: rgb(var(--paper)); } .bg-forest { background: rgb(var(--forest)); } .txt-onforest { color: rgb(var(--cream)); } /* paper texture-ish subtle pattern for forest sections */ .forest-tex { background-color: rgb(var(--forest)); background-image: radial-gradient(circle at 20% 15%, rgb(255 255 255 / 0.05), transparent 40%), radial-gradient(circle at 85% 80%, rgb(var(--ochre) / 0.10), transparent 45%); } /* ================= animations ================= */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .floaty { animation: floaty 6s ease-in-out infinite; } @keyframes floaty-slow { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(3deg); } } .floaty-slow { animation: floaty-slow 9s ease-in-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } .pulse-ring { animation: pulse-ring 2.4s infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; } .marquee-track:hover { animation-play-state: paused; } /* hide scrollbar on sliders */ .no-sb { scrollbar-width: none; -ms-overflow-style: none; } .no-sb::-webkit-scrollbar { display: none; } /* star rating */ .stars { color: #E8A33D; letter-spacing: 1px; } /* accordion */ .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .acc-panel.open { grid-template-rows: 1fr; } .acc-panel > div { overflow: hidden; } /* nav frosted */ .nav-blur { background: rgb(var(--ivory) / 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* input */ .field { width: 100%; font-family: var(--font-body); font-size: 0.98rem; padding: 0.8rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid rgb(var(--line)); background: #fff; color: rgb(var(--ink)); transition: border-color .18s, box-shadow .18s; } .field:focus { outline: none; border-color: rgb(var(--leaf)); box-shadow: 0 0 0 4px rgb(var(--leaf) / 0.14); } .field::placeholder { color: rgb(var(--ink-soft) / 0.6); } .link-underline { position: relative; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: rgb(var(--clay)); transition: width .25s var(--ease); } .link-underline:hover::after { width: 100%; } /* ============ playful + natural touches ============ */ /* menu popover entrance */ @keyframes pop { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } } .mw-pop { animation: pop .24s var(--ease) both; } .mw-mega-item { transition: background .15s var(--ease); } .mw-mega-item:hover { background: rgb(var(--leaf) / 0.09); } /* icon tiles spring on card hover */ .mw-ico { transition: transform .4s var(--ease-spring); } .card-hover:hover .mw-ico { transform: scale(1.14) rotate(-7deg); } /* full-photo zoom on card hover */ .mw-photozoom { transition: transform .5s var(--ease); } .card-hover:hover .mw-photozoom { transform: scale(1.06); } /* gentle leaf drift across the hero */ @keyframes drift { 0% { transform: translate(0,0) rotate(0deg); opacity: 0; } 10% { opacity: .8; } 90% { opacity: .8; } 100% { transform: translate(var(--dx, 120px), var(--dy, -60px)) rotate(160deg); opacity: 0; } } .leaf-drift { position: absolute; color: rgb(var(--leaf)); animation: drift linear infinite; will-change: transform; } /* breathing scale for soft accents */ @keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } .breathe { animation: breathe 5s ease-in-out infinite; } /* eyebrow leaf rule gently pulses its dashes */ @keyframes ruleGrow { from { width: 0; } to { width: 46px; } } .in .leaf-rule::before, .in .leaf-rule::after { animation: ruleGrow .7s var(--ease) both; } /* card lift adds a hair of rotation for life */ .card-hover { transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease); } /* primary button shine on hover */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.35), transparent); transform: skewX(-18deg); transition: left .6s var(--ease); } .btn-primary:hover::after { left: 130%; } /* float-in-up utility for hero list items */ @keyframes floatUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* rising dots */ @keyframes rise { 0% { transform: translateY(20px); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .55; } 100% { transform: translateY(-130px); opacity: 0; } } .rise { animation: rise linear infinite; } /* very slow spin for big lotus motifs */ @keyframes spinSlow { to { transform: rotate(360deg); } } .spin-slow { animation: spinSlow 50s linear infinite; } /* slow counter-drift */ @keyframes swayX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(18px); } } .sway-x { animation: swayX 11s ease-in-out infinite; } /* highlight underlay for keywords — green, persistent, varies subtly per direction */ .hl { position: relative; white-space: nowrap; display: inline-block; } .hl::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.0em; height: 0.32em; z-index: -1; border-radius: 999px; transform-origin: left center; transform: scaleX(1); background: linear-gradient(90deg, rgb(var(--leaf)), rgb(var(--sage))); } .in .hl::after { animation: hlGrow 0.7s var(--ease) 0.15s both; } @keyframes hlGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* dir 1 — Refined: slim solid green underline */ [data-dir="1"] .hl::after { height: 0.16em; bottom: 0.02em; background: linear-gradient(90deg, rgb(var(--leaf)), rgb(var(--leaf-600))); } /* dir 3 — Bold: soft green marker block behind text */ [data-dir="3"] .hl::after { left: -6px; right: -6px; bottom: 0.04em; height: 0.52em; border-radius: 6px 11px 7px 10px; background: rgb(var(--leaf) / 0.28); } /* reverse marquee row */ .marquee-track.rev { animation-direction: reverse; }