wip
This commit is contained in:
499
app/globals.css
499
app/globals.css
@@ -3144,6 +3144,505 @@ html {
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom animations for WordPress Salient compatibility */
|
||||
@keyframes zoomOutReveal {
|
||||
0% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-zoom-out {
|
||||
animation: zoomOutReveal 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Parallax effects */
|
||||
.parallax-slow {
|
||||
transform: translateY(var(--parallax-offset, 0));
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
.parallax-medium {
|
||||
transform: translateY(calc(var(--parallax-offset, 0) * 1.5));
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
.parallax-fast {
|
||||
transform: translateY(calc(var(--parallax-offset, 0) * 2));
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
/* Drop shadow for text contrast */
|
||||
.drop-shadow-lg {
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.drop-shadow-md {
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
/* Utility for full-height sections with proper spacing */
|
||||
.min-h-screen-safe {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
/* Flex centering utilities for full-screen positioning */
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.items-start-justify-center {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.items-end-justify-center {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* WPBakery/VC Row Compatibility Classes */
|
||||
.vc-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
.vc-row.full-width-bg {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
}
|
||||
|
||||
.vc-row.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vc-row.full-height {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vc-row.middle-content {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.vc-row.top-content {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.vc-row.bottom-content {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.vc-row.equal-height {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.vc-row.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vc-row.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vc-row.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vc-row.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vc-row.text-light {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.vc-row.text-dark {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.vc-row.overflow-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.vc-row.rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vc-row.has-video-mp4,
|
||||
.vc-row.has-video-webm {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vc-row.parallax-bg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vc-row.parallax-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* VC Column Classes */
|
||||
.vc-column {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vc-column.w-full {
|
||||
width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.vc-column.w-1\/2 {
|
||||
width: 50%;
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
|
||||
.vc-column.w-1\/3 {
|
||||
width: 33.333%;
|
||||
flex: 0 0 33.333%;
|
||||
}
|
||||
|
||||
.vc-column.w-1\/4 {
|
||||
width: 25%;
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
.vc-column.w-2\/3 {
|
||||
width: 66.667%;
|
||||
flex: 0 0 66.667%;
|
||||
}
|
||||
|
||||
.vc-column.w-3\/4 {
|
||||
width: 75%;
|
||||
flex: 0 0 75%;
|
||||
}
|
||||
|
||||
/* VC Text Column */
|
||||
.vc-column-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* VC Separator */
|
||||
.vc-separator {
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.vc-separator.border-primary {
|
||||
border-color: #0056b3;
|
||||
}
|
||||
|
||||
.vc-separator.border-secondary {
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.vc-separator.border-white {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
/* VC Button */
|
||||
.vc-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.vc-btn.bg-primary {
|
||||
background-color: #0056b3;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.vc-btn.bg-primary:hover {
|
||||
background-color: #003d82;
|
||||
}
|
||||
|
||||
.vc-btn.bg-secondary {
|
||||
background-color: #6c757d;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.vc-btn.bg-secondary:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
.vc-btn.border-2 {
|
||||
border: 2px solid #0056b3;
|
||||
color: #0056b3;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.vc-btn.border-2:hover {
|
||||
background-color: #0056b3;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.vc-btn.bg-white {
|
||||
background-color: #ffffff;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.vc-btn.bg-white:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.vc-btn.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.vc-btn.py-3 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.vc-btn.text-lg {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.vc-btn.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.vc-btn.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.vc-btn.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.vc-btn.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* VC Single Image */
|
||||
.vc-single-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vc-single-image.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.vc-single-image.float-left {
|
||||
float: left;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.vc-single-image.float-right {
|
||||
float: right;
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Video Background Container */
|
||||
.vc-video-bg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vc-video-bg video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.vc-video-bg .vc-video-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Split Line Heading */
|
||||
.split-line-heading {
|
||||
text-align: center;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.split-line-heading .split-heading {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.split-line-heading .split-heading .line {
|
||||
display: block;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.split-line-heading .split-heading .line-separator {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: #0056b3;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.split-line-heading.text-left .split-heading .line-separator {
|
||||
margin: 0.5rem 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.split-line-heading.text-right .split-heading .line-separator {
|
||||
margin: 0.5rem 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for WPBakery classes */
|
||||
@media (max-width: 768px) {
|
||||
.vc-row.full-width-bg {
|
||||
width: 100%;
|
||||
position: static;
|
||||
left: auto;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.vc-row.full-height,
|
||||
.vc-row.middle-content,
|
||||
.vc-row.top-content,
|
||||
.vc-row.bottom-content {
|
||||
min-height: auto;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.vc-column.w-1\/2,
|
||||
.vc-column.w-1\/3,
|
||||
.vc-column.w-1\/4,
|
||||
.vc-column.w-2\/3,
|
||||
.vc-column.w-3\/4 {
|
||||
width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.split-line-heading .split-heading {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional utility for video background detection */
|
||||
.has-video-background {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.has-video-background::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.has-video-background video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.has-video-background .video-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
|
||||
Reference in New Issue
Block a user