267 lines
6.2 KiB
CSS
267 lines
6.2 KiB
CSS
@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;
|
|
background: #ffffff;
|
|
color-scheme: light;
|
|
}
|
|
|
|
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 */
|
|
text-shadow: 0 2px 24px rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.loyaly-home .hero-gradient-text {
|
|
background-image: linear-gradient(105deg, #bc7122 0%, #f4be28 45%, #c9960f 60%, #8a4f0f 100%) !important;
|
|
background-size: 200% auto !important;
|
|
-webkit-background-clip: text !important;
|
|
background-clip: text !important;
|
|
-webkit-text-fill-color: transparent !important;
|
|
color: transparent !important;
|
|
display: inline-block;
|
|
animation: heroGradientLoop 7s linear infinite;
|
|
}
|
|
|
|
@keyframes heroGradientLoop {
|
|
0% { background-position: 200% center; }
|
|
100% { background-position: -200% center; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.loyaly-home .hero-gradient-text { animation: none; }
|
|
}
|
|
|
|
.loyaly-home .hero-description {
|
|
color: var(--loyaly-carbon) !important; /* darker, higher-contrast text now that the hero image shows through clearly */
|
|
text-shadow: 0 2px 16px rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* Hero carousel layout lives in HeroCarousel.tsx as a scoped <style> tag,
|
|
matching every other home-page section — keeps it working even if this
|
|
global stylesheet has a load/HMR hiccup. */
|