wip
This commit is contained in:
@@ -2,7 +2,6 @@ import { notFound } from 'next/navigation';
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { getPostBySlug, getPostsByLocale, getMediaById, getSiteInfo } from '@/lib/data';
|
||||
import { processHTML } from '@/lib/html-compat';
|
||||
import { getLocalizedPath } from '@/lib/i18n';
|
||||
import { t } from '@/lib/i18n';
|
||||
import { SEO } from '@/components/SEO';
|
||||
@@ -142,8 +141,7 @@ export default async function BlogDetailPage({ params }: PageProps) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Process HTML content with WordPress compatibility
|
||||
const processedContent = processHTML(post.contentHtml);
|
||||
// Content is already processed during data export
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -191,7 +189,7 @@ export default async function BlogDetailPage({ params }: PageProps) {
|
||||
|
||||
{post.excerptHtml && (
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
{post.excerptHtml}
|
||||
<ContentRenderer content={post.excerptHtml} />
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
@@ -212,12 +210,13 @@ export default async function BlogDetailPage({ params }: PageProps) {
|
||||
})()}
|
||||
|
||||
{/* Article Content */}
|
||||
<div className="mb-12">
|
||||
<ContentRenderer
|
||||
content={processedContent}
|
||||
className="prose prose-lg prose-blue"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-12">
|
||||
<ContentRenderer
|
||||
content={post.contentHtml}
|
||||
className="prose prose-lg prose-blue"
|
||||
parsePatterns={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Article Footer */}
|
||||
<footer className="border-t border-gray-200 pt-8 mt-12">
|
||||
|
||||
@@ -2,7 +2,6 @@ import { notFound } from 'next/navigation';
|
||||
import { getPageBySlug, getAllPages, getMediaById } from '@/lib/data';
|
||||
import { Metadata } from 'next';
|
||||
import { SEO } from '@/components/SEO';
|
||||
import { processHTML } from '@/lib/html-compat';
|
||||
import { ContentRenderer } from '@/components/content/ContentRenderer';
|
||||
import { Breadcrumbs } from '@/components/content/Breadcrumbs';
|
||||
import { Hero } from '@/components/content/Hero';
|
||||
@@ -61,12 +60,10 @@ export default async function ContactPage({ params }: PageProps) {
|
||||
// Get featured image if available
|
||||
const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;
|
||||
|
||||
// Process the content
|
||||
// Content is already processed during data export
|
||||
const contentToDisplay = page.contentHtml && page.contentHtml.trim() !== ''
|
||||
? page.contentHtml
|
||||
: page.excerptHtml;
|
||||
|
||||
const processedContent = processHTML(contentToDisplay || '');
|
||||
|
||||
// Breadcrumb items
|
||||
const breadcrumbItems = [
|
||||
@@ -91,7 +88,7 @@ export default async function ContactPage({ params }: PageProps) {
|
||||
{featuredImage && (
|
||||
<Hero
|
||||
title={page.title}
|
||||
subtitle={page.excerptHtml ? processHTML(page.excerptHtml).replace(/<[^>]*>/g, '') : undefined}
|
||||
subtitle={page.excerptHtml ? page.excerptHtml.replace(/<[^>]*>/g, '') : undefined}
|
||||
backgroundImage={featuredImage.localPath}
|
||||
backgroundAlt={page.title}
|
||||
height="md"
|
||||
@@ -110,7 +107,7 @@ export default async function ContactPage({ params }: PageProps) {
|
||||
</h1>
|
||||
{page.excerptHtml && (
|
||||
<ContentRenderer
|
||||
content={processHTML(page.excerptHtml)}
|
||||
content={page.excerptHtml}
|
||||
className="text-lg sm:text-xl text-gray-600 leading-relaxed"
|
||||
/>
|
||||
)}
|
||||
@@ -118,10 +115,10 @@ export default async function ContactPage({ params }: PageProps) {
|
||||
)}
|
||||
|
||||
{/* Content from WordPress */}
|
||||
{processedContent && (
|
||||
{contentToDisplay && (
|
||||
<ResponsiveWrapper className="bg-white rounded-lg shadow-sm p-6 sm:p-8 mb-12" container={true} maxWidth="full">
|
||||
<ContentRenderer
|
||||
content={processedContent}
|
||||
content={contentToDisplay}
|
||||
className="prose prose-lg max-w-none"
|
||||
/>
|
||||
</ResponsiveWrapper>
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function LocaleLayout({
|
||||
<Layout
|
||||
locale={locale}
|
||||
siteName="KLZ Cables"
|
||||
logo="/media/logo.webp"
|
||||
logo="/media/logo.svg"
|
||||
>
|
||||
{children}
|
||||
</Layout>
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { getPageBySlug, getAllPages, getMediaById } from '@/lib/data';
|
||||
import { Metadata } from 'next';
|
||||
import { SEO } from '@/components/SEO';
|
||||
import { processHTML } from '@/lib/html-compat';
|
||||
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
|
||||
import Link from 'next/link';
|
||||
import { ResponsiveSection, ResponsiveWrapper, ResponsiveGrid } from '@/components/layout/ResponsiveWrapper';
|
||||
import { FeaturedImage } from '@/components/content/FeaturedImage';
|
||||
import { Container } from '@/components/ui/Container';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { ContentRenderer } from '@/components/content/ContentRenderer';
|
||||
import { FeaturedImage } from '@/components/content/FeaturedImage';
|
||||
import { ResponsiveWrapper, ResponsiveSection } from '@/components/layout/ResponsiveWrapper';
|
||||
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
|
||||
import { SEO } from '@/components/SEO';
|
||||
import { Container } from '@/components/ui/Container';
|
||||
import { getAllPages, getMediaById, getPageBySlug } from '@/lib/data';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
@@ -73,16 +70,40 @@ export default async function Page({ params }: PageProps) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Use contentHtml if available, otherwise use excerptHtml
|
||||
// Both should be processed through ContentRenderer which handles shortcodes
|
||||
const contentToDisplay = page.contentHtml && page.contentHtml.trim() !== ''
|
||||
? page.contentHtml
|
||||
: page.excerptHtml;
|
||||
// Special handling for home page vs other pages
|
||||
const isHomePage = slug === 'home' || actualSlug === 'corporate-3-landing-2' || actualSlug === 'start';
|
||||
|
||||
// Process the content to handle shortcodes and convert to HTML
|
||||
const processedContent = processHTML(contentToDisplay || '');
|
||||
if (isHomePage) {
|
||||
// HOME PAGE: Render content directly without additional wrappers
|
||||
// The content already contains full vc_row structures with backgrounds
|
||||
return (
|
||||
<>
|
||||
<SEO
|
||||
title={page.title}
|
||||
description={page.excerptHtml || ''}
|
||||
/>
|
||||
|
||||
{/* Main content - full width, no containers */}
|
||||
<div className="w-full">
|
||||
<ContentRenderer
|
||||
content={page.contentHtml || page.excerptHtml || ''}
|
||||
className=""
|
||||
parsePatterns={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
// Get featured image if available
|
||||
{/* Locale switcher at bottom */}
|
||||
<ResponsiveSection padding="responsive" className="bg-gray-50">
|
||||
<Container maxWidth="6xl" centered={true} padding="none">
|
||||
<LocaleSwitcher />
|
||||
</Container>
|
||||
</ResponsiveSection>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// STANDARD PAGES: Use the existing layout with hero and containers
|
||||
const contentToDisplay = page.contentHtml || page.excerptHtml;
|
||||
const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;
|
||||
|
||||
return (
|
||||
@@ -114,111 +135,25 @@ export default async function Page({ params }: PageProps) {
|
||||
|
||||
{/* Main Content */}
|
||||
<ResponsiveSection padding="responsive" maxWidth="4xl">
|
||||
{/* Title - only show if no featured image */}
|
||||
{!featuredImage && (
|
||||
<ResponsiveWrapper stackOnMobile={true} centerOnMobile={true} className="mb-8">
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
||||
{page.title}
|
||||
</h1>
|
||||
{page.excerptHtml && (
|
||||
<ContentRenderer
|
||||
content={processHTML(page.excerptHtml)}
|
||||
className="text-lg sm:text-xl text-gray-600 leading-relaxed"
|
||||
/>
|
||||
)}
|
||||
</ResponsiveWrapper>
|
||||
)}
|
||||
|
||||
{processedContent && (
|
||||
{/* Content with pattern parsing */}
|
||||
{contentToDisplay && (
|
||||
<ResponsiveWrapper className="bg-white rounded-lg shadow-sm p-6 sm:p-8" container={true} maxWidth="full">
|
||||
<ContentRenderer
|
||||
content={processedContent}
|
||||
content={contentToDisplay}
|
||||
className="prose prose-lg max-w-none"
|
||||
parsePatterns={true}
|
||||
/>
|
||||
</ResponsiveWrapper>
|
||||
)}
|
||||
|
||||
{/* Navigation Links */}
|
||||
<ResponsiveWrapper className="mt-12" container={true} maxWidth="full">
|
||||
<ResponsiveGrid
|
||||
columns={{ mobile: 1, tablet: 2, desktop: 4 }}
|
||||
gap="responsive"
|
||||
stackMobile={true}
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}/blog`}
|
||||
className="p-4 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 rounded-lg text-center transition-colors touch-target-md"
|
||||
>
|
||||
<div className="font-semibold text-blue-900 text-lg">Blog</div>
|
||||
<div className="text-sm text-blue-700 mt-1">Read our latest posts</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${locale}/products`}
|
||||
className="p-4 bg-green-50 hover:bg-green-100 active:bg-green-200 rounded-lg text-center transition-colors touch-target-md"
|
||||
>
|
||||
<div className="font-semibold text-green-900 text-lg">Products</div>
|
||||
<div className="text-sm text-green-700 mt-1">Browse our catalog</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${locale}/contact`}
|
||||
className="p-4 bg-orange-50 hover:bg-orange-100 active:bg-orange-200 rounded-lg text-center transition-colors touch-target-md"
|
||||
>
|
||||
<div className="font-semibold text-orange-900 text-lg">Contact</div>
|
||||
<div className="text-sm text-orange-700 mt-1">Get in touch</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${locale}/blog`}
|
||||
className="p-4 bg-purple-50 hover:bg-purple-100 active:bg-purple-200 rounded-lg text-center transition-colors touch-target-md"
|
||||
>
|
||||
<div className="font-semibold text-purple-900 text-lg">News</div>
|
||||
<div className="text-sm text-purple-700 mt-1">Latest updates</div>
|
||||
</Link>
|
||||
</ResponsiveGrid>
|
||||
</ResponsiveWrapper>
|
||||
</ResponsiveSection>
|
||||
|
||||
{/* Tailwind CSS Test Section */}
|
||||
<ResponsiveSection padding="responsive" className="bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
<Container maxWidth="6xl" centered={true} padding="none">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Tailwind CSS Test</h2>
|
||||
<p className="text-lg text-gray-600">If you can see styled components below, Tailwind CSS is working correctly!</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4 justify-center items-center">
|
||||
<Button variant="primary" size="lg">
|
||||
Primary Button
|
||||
</Button>
|
||||
<Button variant="secondary" size="lg">
|
||||
Secondary Button
|
||||
</Button>
|
||||
<Button variant="outline" size="lg">
|
||||
Outline Button
|
||||
</Button>
|
||||
<Button variant="ghost" size="lg">
|
||||
Ghost Button
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md border-2 border-blue-200">
|
||||
<h3 className="text-xl font-bold text-blue-900 mb-2">Card 1</h3>
|
||||
<p className="text-gray-600">This card uses Tailwind shadow, rounded, and border utilities.</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg border-2 border-green-200">
|
||||
<h3 className="text-xl font-bold text-green-900 mb-2">Card 2</h3>
|
||||
<p className="text-gray-600">Different shadow intensity and border color.</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-xl shadow-xl border-2 border-purple-200">
|
||||
<h3 className="text-xl font-bold text-purple-900 mb-2">Card 3</h3>
|
||||
<p className="text-gray-600">Rounded-xl and shadow-xl for emphasis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800">
|
||||
<p className="font-bold">Success!</p>
|
||||
<p>If you see this styled alert box with proper colors, spacing, and borders, Tailwind CSS is processing correctly.</p>
|
||||
</div>
|
||||
</Container>
|
||||
</ResponsiveSection>
|
||||
|
||||
{/* Locale Switcher */}
|
||||
|
||||
@@ -3,7 +3,6 @@ import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { getProductBySlug, getAllProducts, getCategoriesByLocale } from '@/lib/data';
|
||||
import { getSiteInfo, t, getLocaleFromPath, getLocalizedPath } from '@/lib/i18n';
|
||||
import { processHTML } from '@/lib/html-compat';
|
||||
import { SEO } from '@/components/SEO';
|
||||
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
|
||||
import { ContentRenderer } from '@/components/content/ContentRenderer';
|
||||
@@ -74,9 +73,9 @@ export default async function ProductDetailPage({ params }: PageProps) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Process description HTML with WordPress compatibility
|
||||
const processedDescription = product.descriptionHtml ?
|
||||
processHTML(product.descriptionHtml) : '';
|
||||
// Content is already processed during data export
|
||||
const processedDescription = product.descriptionHtml || '';
|
||||
const processedShortDescription = product.shortDescriptionHtml || '';
|
||||
|
||||
// Get related products (same category)
|
||||
const allProducts = getAllProducts();
|
||||
@@ -98,7 +97,7 @@ export default async function ProductDetailPage({ params }: PageProps) {
|
||||
type="product"
|
||||
images={product.images}
|
||||
/>
|
||||
|
||||
|
||||
<div className="bg-white py-12 sm:py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Back to products link */}
|
||||
@@ -176,10 +175,13 @@ export default async function ProductDetailPage({ params }: PageProps) {
|
||||
</p>
|
||||
)}
|
||||
|
||||
{product.shortDescriptionHtml && (
|
||||
<p className="text-lg text-gray-600 mb-6">
|
||||
{product.shortDescriptionHtml}
|
||||
</p>
|
||||
{processedShortDescription && (
|
||||
<div className="text-lg text-gray-600 mb-6">
|
||||
<ContentRenderer
|
||||
content={processedShortDescription}
|
||||
className="text-lg text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product Description */}
|
||||
@@ -189,7 +191,7 @@ export default async function ProductDetailPage({ params }: PageProps) {
|
||||
{t('products.description', locale as 'en' | 'de')}
|
||||
</h3>
|
||||
<ContentRenderer
|
||||
content={product.descriptionHtml || ''}
|
||||
content={processedDescription}
|
||||
className="prose prose-sm max-w-none text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
@@ -252,9 +254,12 @@ export default async function ProductDetailPage({ params }: PageProps) {
|
||||
{relatedProduct.name}
|
||||
</h3>
|
||||
{relatedProduct.shortDescriptionHtml && (
|
||||
<p className="text-sm text-gray-600 line-clamp-2 mb-2">
|
||||
{relatedProduct.shortDescriptionHtml}
|
||||
</p>
|
||||
<div className="text-sm text-gray-600 line-clamp-2 mb-2">
|
||||
<ContentRenderer
|
||||
content={relatedProduct.shortDescriptionHtml}
|
||||
className="text-sm text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-xs text-blue-600 font-medium">
|
||||
{t('products.viewDetails', locale as 'en' | 'de')} →
|
||||
|
||||
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