convert-next.js
This commit is contained in:
R-Bharathraj
252
src/app/globals.css
Normal file
252
src/app/globals.css
Normal file
@@ -0,0 +1,252 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--loyaly-cream: #fff8e8;
|
||||
--loyaly-soft-cream: #fff2c8;
|
||||
--loyaly-brand-yellow: #f4be28;
|
||||
--loyaly-bright-yellow: #ffd95a;
|
||||
--loyaly-carbon: #171512;
|
||||
--loyaly-warm-text: #4f463a;
|
||||
--loyaly-copper: #bc7122;
|
||||
}
|
||||
|
||||
/* Legacy styles are loaded dynamically in layout.tsx. This file is kept minimal. */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html.lenis, html.lenis body {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.lenis.lenis-smooth {
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.lenis.lenis-smooth [data-lenis-prevent] {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.lenis.lenis-stopped {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lenis.lenis-smooth iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loyaly-home {
|
||||
--hero-parallax-x: 0px;
|
||||
--hero-parallax-y: 0px;
|
||||
background: none !important;
|
||||
color: var(--loyaly-carbon);
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Hero section text contrast and readability fixes */
|
||||
.loyaly-home .hero-subheading {
|
||||
color: var(--loyaly-brand-yellow) !important; /* Premium brand golden yellow */
|
||||
}
|
||||
|
||||
.loyaly-home .hero-heading {
|
||||
color: var(--loyaly-carbon) !important; /* Premium brand carbon (#171512) for high readability */
|
||||
font-weight: 900 !important; /* Ultra-bold / Black font weight override */
|
||||
}
|
||||
|
||||
.loyaly-home .hero-gradient-text {
|
||||
background-image: linear-gradient(102deg, #f4be28 0%, #ff9500 100%) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
color: transparent !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.loyaly-home .hero-description {
|
||||
color: var(--loyaly-warm-text) !important; /* Premium brand warm charcoal (#4f463a) */
|
||||
}
|
||||
|
||||
.loyaly-home .hero-btn-primary {
|
||||
background-color: var(--loyaly-brand-yellow) !important;
|
||||
color: var(--loyaly-carbon) !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 10px 15px -3px rgba(244, 190, 40, 0.3) !important;
|
||||
}
|
||||
|
||||
.loyaly-home .hero-btn-primary:hover {
|
||||
background-color: var(--loyaly-bright-yellow) !important;
|
||||
color: var(--loyaly-carbon) !important;
|
||||
box-shadow: 0 10px 15px -3px rgba(244, 190, 40, 0.5) !important;
|
||||
}
|
||||
|
||||
.loyaly-home .hero-btn-secondary {
|
||||
border: 2px solid var(--loyaly-brand-yellow) !important;
|
||||
color: var(--loyaly-brand-yellow) !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.loyaly-home .hero-btn-secondary:hover {
|
||||
background-color: var(--loyaly-brand-yellow) !important;
|
||||
color: var(--loyaly-carbon) !important;
|
||||
}
|
||||
|
||||
/* Hide sticky header during scroll down / show on scroll up on the home page */
|
||||
body.is-home-page .sticky-header,
|
||||
body.is-home-page .mobile-header.sticky-header,
|
||||
body.is-home-page .sticky-active {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
|
||||
}
|
||||
|
||||
body.is-home-page.scroll-down .sticky-header,
|
||||
body.is-home-page.scroll-down .mobile-header.sticky-header,
|
||||
body.is-home-page.scroll-down .sticky-active {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
visibility: hidden !important;
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
|
||||
body.is-home-page.scroll-up .sticky-header,
|
||||
body.is-home-page.scroll-up .mobile-header.sticky-header,
|
||||
body.is-home-page.scroll-up .sticky-active {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
/* Problem + Shift Custom Animations */
|
||||
@keyframes flowArrow {
|
||||
0% { left: 0%; opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { left: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes flowLine {
|
||||
0% {
|
||||
top: -150px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-flow-line {
|
||||
animation: flowLine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulseRing {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.85;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.6);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-ring-1 {
|
||||
animation: pulseRing 6s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-ring-2 {
|
||||
animation: pulseRing 6s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
@keyframes scrollArrow {
|
||||
0% {
|
||||
transform: translateY(-8px);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(8px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-scroll-arrow {
|
||||
animation: scrollArrow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Header Z-Index Overrides */
|
||||
.top-page-wrapper {
|
||||
position: relative !important;
|
||||
z-index: 99999999 !important;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
position: relative !important;
|
||||
z-index: 99999999 !important;
|
||||
}
|
||||
|
||||
.header,
|
||||
.mobile-header,
|
||||
.sticky-header,
|
||||
.sticky-active,
|
||||
#head {
|
||||
z-index: 99999999 !important;
|
||||
}
|
||||
|
||||
.header.sticky-header,
|
||||
.mobile-header.sticky-header {
|
||||
position: fixed !important;
|
||||
z-index: 99999999 !important;
|
||||
}
|
||||
|
||||
/* Ensure mobile menu container, search panel, slide sidebar, and body overlay are even higher so they sit on top of the headers when open */
|
||||
.body-overlay {
|
||||
z-index: 99999998 !important;
|
||||
}
|
||||
|
||||
.mobile-header-menu-container,
|
||||
.site-search,
|
||||
.slide-sidebar-wrapper {
|
||||
z-index: 999999999 !important;
|
||||
}
|
||||
|
||||
/* Ensure page loader covers everything during initial render */
|
||||
.page-loader-container {
|
||||
z-index: 1000000000 !important;
|
||||
}
|
||||
|
||||
/* Respect user preference for reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
/* Disable utility animation classes used across the project */
|
||||
[class*="animate-"] {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
/* Also pause any CSS-based keyframe animations */
|
||||
* {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user