@import 'tailwindcss'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @theme { /* --------------------------------------------------------------- Brand palette — sampled from the Swadeshi Disha logo and the Keramruth brochure's earthy, coconut-leaf backdrop. --------------------------------------------------------------- */ --color-brand-green-950: #06331a; --color-brand-green-900: #0a4423; --color-brand-green-800: #0b5a2e; --color-brand-green-700: #0f6e39; --color-brand-green-600: #158247; --color-brand-green-200: #a9dabc; --color-brand-green-100: #e2f2e7; --color-brand-green-50: #f2f9f4; --color-brand-lime-500: #d7e600; --color-brand-lime-400: #e6f80a; --color-brand-lime-100: #f6fccc; --color-brand-cream: #faf6ec; --color-brand-cream-dark: #f0e8d6; --color-brand-ink: #1f2a22; /* Category accent colours, echoing each Keramruth product line */ --color-accent-sleep: #5b3a8e; --color-accent-liver: #c0272d; --color-accent-diabetic: #1b4f8c; --color-accent-joint: #e07b1f; --color-accent-hair: #6b6d70; --font-sans: 'Instrument Sans', 'Noto Sans Kannada', 'Noto Sans Devanagari', 'Noto Sans Telugu', 'Noto Sans Tamil', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-kn: 'Noto Sans Kannada', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --font-hi: 'Noto Sans Devanagari', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --font-te: 'Noto Sans Telugu', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --font-ta: 'Noto Sans Tamil', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --shadow-card: 0 1px 2px rgba(15, 30, 20, 0.04), 0 8px 24px -12px rgba(15, 30, 20, 0.18); --shadow-card-hover: 0 4px 8px rgba(15, 30, 20, 0.06), 0 20px 40px -16px rgba(15, 30, 20, 0.28); } /* Pick the right Indic font stack straight from so text set in Kannada, Hindi, Telugu or Tamil always renders with its native type design instead of falling back to whatever Latin font is active. */ html:lang(kn) body { font-family: var(--font-kn); } html:lang(hi) body { font-family: var(--font-hi); } html:lang(te) body { font-family: var(--font-te); } html:lang(ta) body { font-family: var(--font-ta); } /* Homepage intro splash — see resources/views/home.blade.php and the splash-related script in resources/js/app.js. */ @keyframes splash-pop { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } @keyframes splash-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Slow, organic drift for the soft blurred "blob" behind the hero image — see resources/views/home.blade.php. */ @keyframes blob-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12px, -16px) scale(1.06); } } /* Homepage testimonials carousel — continuous right-to-left loop. The track renders the testimonial list twice and scrolls exactly half its own width, so the seam between the first and second copy is never visible. See resources/views/home.blade.php and testimonial-card.blade.php. */ @keyframes testimonial-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testimonial-marquee { -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); } /* Only animation-duration is set inline (it's computed per-catalog-size in Blade); every other sub-property — including play-state — lives here so the hover/focus rule below can actually win the cascade. Setting the `animation` SHORTHAND inline would reset animation-play-state to "running" with inline-style specificity, which no ordinary stylesheet rule can then override. */ .testimonial-track { animation-name: testimonial-scroll; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: running; } .testimonial-marquee:hover .testimonial-track, .testimonial-marquee:focus-within .testimonial-track { animation-play-state: paused; } /* Respect the OS-level "reduce motion" preference — everything above (and the Tailwind-generated transitions/animations below) collapses to effectively instant for anyone who has asked for less motion. For most animations that just means "skip straight to the end state", which is fine. The testimonial carousel is the one exception: its "end state" is scrolled halfway off-screen, so forcing a single instant iteration would leave it looking frozen mid-scroll rather than calm. Turn its animation off entirely instead, so it rests at its natural, fully-visible starting position — a plain still row of testimonials. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .testimonial-track { animation: none !important; } } @layer base { body { @apply bg-brand-cream text-brand-ink antialiased; } } @layer components { .leaf-divider { background-image: radial-gradient(circle, var(--color-brand-lime-500) 1.5px, transparent 1.5px); background-size: 10px 10px; } .btn-primary { @apply inline-flex items-center justify-center gap-2 rounded-full bg-brand-green-800 px-6 py-3 text-sm font-semibold text-white shadow-card transition hover:-translate-y-0.5 hover:bg-brand-green-700 hover:shadow-card-hover active:translate-y-0 active:scale-[0.97] focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-green-600 focus-visible:ring-offset-2; } .btn-secondary { @apply inline-flex items-center justify-center gap-2 rounded-full border-2 border-brand-green-800 bg-transparent px-6 py-3 text-sm font-semibold text-brand-green-800 transition hover:-translate-y-0.5 hover:bg-brand-green-800 hover:text-white active:translate-y-0 active:scale-[0.97] focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-green-600 focus-visible:ring-offset-2; } .btn-lime { @apply inline-flex items-center justify-center gap-2 rounded-full bg-brand-lime-500 px-6 py-3 text-sm font-bold text-brand-green-950 shadow-card transition hover:-translate-y-0.5 hover:bg-brand-lime-400 hover:shadow-card-hover active:translate-y-0 active:scale-[0.97]; } .card { @apply rounded-2xl bg-white shadow-card transition hover:shadow-card-hover; } .section-eyebrow { @apply inline-flex items-center gap-2 rounded-full bg-brand-green-100 px-4 py-1.5 text-xs font-bold uppercase tracking-wide text-brand-green-800; } [data-reveal] { @apply translate-y-4 opacity-0 transition duration-700 ease-out; } [data-reveal].is-visible { @apply translate-y-0 opacity-100; } #site-splash { @apply transition-opacity duration-500 ease-out; } #site-splash.is-hidden { @apply pointer-events-none opacity-0; } html.splash-skip #site-splash { display: none !important; } /* Header starts white/95 (see layouts/app.blade.php); once the page is scrolled a little, resources/js/app.js adds this class for a mild green tint + lift so the bar reads as "active" rather than flat. */ header.is-scrolled { background-color: color-mix(in srgb, var(--color-brand-green-50) 95%, transparent); box-shadow: var(--shadow-card); } /* Nav dropdowns (products mega-menu, language switcher) fade + scale in instead of an abrupt show/hide — resources/js/app.js toggles `is-open`. */ [data-dropdown-panel] { @apply pointer-events-none origin-top scale-95 opacity-0 transition duration-150 ease-out; } [data-dropdown-panel].is-open { @apply pointer-events-auto scale-100 opacity-100; } }