/*
Theme Name: Stratum Interior Design
Theme URI: https://seashell-chough-589065.hostingersite.com/
Author: Stratum
Description: Premium Interior Design WordPress Theme (Purged Source)
Version: 1.3.0
Text Domain: stratum
*/
/* --- variables.css (Purged) --- */
:root {
--navy: #fff;
/* Pure white background */
--navy-deep: #faf9f7;
/* Soft warm off-white */
--navy-mid: #f3f1ec;
/* Warm light grey for cards */
--navy-light: #e8e5df;
/* Deeper grey for borders/accents */
--black: #1a242f;
/* Elegant Dark slate/blue text */
--off-black: #2c3e50;
/* Secondary dark text */
--accent: #c8a96e;
/* Classy Gold/Beige accent */
--accent-light: #dfc49a;
/* Lighter gold for hover */
--text-muted: rgb(26 36 47 / 85%);
--text-dim: rgb(26 36 47 / 50%);
--border: rgb(26 36 47 / 10%);
--font-display: "Playfair Display", georgia, serif;
--font-body: "DM Sans", sans-serif;
}
/* --- reset.css (Purged) --- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--navy);
color: var(--black);
overflow-x: hidden;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
/* --- animations.css (Purged) --- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes heroScale {
from {
transform: scale(1.1) translateY(0);
}
to {
transform: scale(1) translateY(0);
}
}
@keyframes heroFade {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scrollPulse {
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes hotspotPulse {
0% {
transform: scale(0.6);
opacity: 0.8;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.fade-up {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
.fade-up.in {
opacity: 1;
transform: translateY(0);
}
/* --- style.css (Purged) --- */
/* ===================== COMMON UTILITIES & OPTIMIZATION ===================== */
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
color: var(--black);
font-weight: 500;
line-height: 1.2;
margin-bottom: 0.5em;
}
h1 {
font-size: 64px;
}
h2 {
font-size: 46px;
}
h3 {
font-size: 36px;
}
h4 {
font-size: 28px;
}
@media (width <= 1024px) {
h1 {
font-size: 52px;
}
h2 {
font-size: 38px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
}
@media (width <= 768px) {
h1 {
font-size: 40px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 26px;
}
h4 {
font-size: 22px;
}
}
a {
color: var(--accent);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--black);
}
/* ===================== NAV ===================== */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
height: 76px;
background: rgb(255 255 255 / 96%);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
transition: all 0.3s;
}
@media (width >= 1400px) {
nav {
padding: 0 60px;
}
}
.nav-logo {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--black);
text-decoration: none;
flex-shrink: 0;
}
@media (width >= 1250px) {
.nav-logo {
font-size: 20px;
letter-spacing: 3px;
}
}
@media (width >= 1400px) {
.nav-logo {
font-size: 22px;
letter-spacing: 4px;
}
}
.nav-logo span {
color: var(--accent);
}
.nav-links {
display: flex;
gap: 15px;
list-style: none;
margin: 0 20px;
}
@media (width >= 1250px) {
.nav-links {
gap: 25px;
}
}
@media (width >= 1400px) {
.nav-links {
gap: 38px;
}
}
.nav-links li {
position: relative;
display: flex;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--text-muted);
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
transition: color 0.3s;
position: relative;
white-space: nowrap;
}
@media (width >= 1300px) {
.nav-links a {
font-size: 14px;
letter-spacing: 2px;
}
}
.nav-links a::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--accent);
transition: width 0.3s;
}
.nav-links a:hover {
color: var(--black);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-links .dropdown-toggle i {
font-size: 10px;
margin-left: 6px;
transition: transform 0.3s;
}
/* Dropdown Menu */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
min-width: 240px;
padding: 20px 0;
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
list-style: none;
z-index: 1000;
border-top: 2px solid var(--accent);
}
.nav-links li:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-links li:hover .dropdown-toggle i {
transform: rotate(180deg);
}
.dropdown-menu li {
padding: 0 !important;
display: block !important;
}
.dropdown-menu a {
padding: 10px 25px;
display: block;
color: var(--text-muted);
font-size: 13px;
letter-spacing: 1px;
text-transform: none;
transition: all 0.3s;
font-weight: 400;
}
.dropdown-menu a::after {
display: none;
}
.dropdown-menu a:hover {
background: rgb(0 43 94 / 3%);
color: var(--accent);
padding-left: 30px;
}
/* Mobile Nav Button (Hamburger) */
.nav-mobile-btn {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 28px;
height: 28px;
cursor: pointer;
z-index: 1001;
position: relative;
padding: 0;
}
.nav-mobile-btn span {
display: block;
width: 100%;
height: 2px;
background: var(--black);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.nav-mobile-btn.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.nav-mobile-btn.active span:nth-child(2) {
opacity: 0;
transform: translateX(-10px);
}
.nav-mobile-btn.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-cta {
padding: 10px 22px;
background: var(--accent);
color: #fff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.3s;
border: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.nav-cta:hover {
background: var(--black);
color: #fff;
}
@media (width <= 1024px) {
.nav-links {
display: flex;
position: fixed;
top: 0;
right: -100%;
width: 320px;
height: 100vh;
background: #fff;
flex-direction: column;
padding: 90px 40px;
gap: 0;
text-align: left;
box-shadow: -15px 0 45px rgb(0 0 0 / 8%);
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
z-index: 1000;
overflow-y: auto;
}
.nav-links li {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
border-bottom: 1px solid rgb(0 0 0 / 5%);
}
.nav-links li:last-child {
border-bottom: none;
}
.nav-links a {
padding: 20px 0;
width: 100%;
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links a::after {
display: none;
}
/* Mobile Dropdown */
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
width: 100%;
padding: 0 0 15px;
display: none;
background: rgb(0 43 94 / 2%);
border-top: none;
}
.nav-links li.active .dropdown-menu {
display: block;
}
.dropdown-menu a {
padding: 12px 20px;
text-align: center;
}
.dropdown-menu a:hover {
padding-left: 20px;
}
.nav-links.active {
right: 0;
}
.nav-mobile-btn {
display: flex;
}
.nav-cta {
display: none;
}
}
@media (width <= 768px) {
.nav-links {
width: 100%;
margin: 0;
}
}
/* ===================== FOOTER ===================== */
footer {
background: var(--navy-deep);
padding: 90px 60px 50px;
border-top: 1px solid var(--border);
}
.footer-grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
gap: 60px;
margin-bottom: 70px;
}
.footer-logo {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--black);
margin-bottom: 18px;
display: block;
text-decoration: none;
}
.footer-logo span {
color: var(--accent);
}
.footer-about {
color: var(--text-muted);
font-size: 15px;
line-height: 1.9;
font-weight: 400;
max-width: 280px;
}
.footer-socials {
display: flex;
gap: 12px;
margin-top: 28px;
}
.social-link {
width: 36px;
height: 36px;
border: 1px solid rgb(0 43 94 / 12%);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 15px;
text-decoration: none;
transition: all 0.3s;
}
.social-link:hover {
border-color: var(--accent);
color: var(--accent);
}
.footer-heading {
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 24px;
font-weight: 500;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 13px;
}
.footer-links a {
color: var(--text-muted);
font-size: 15px;
text-decoration: none;
font-weight: 400;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--accent);
}
.footer-contact-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.footer-contact-icon {
color: var(--accent);
font-size: 16px;
flex-shrink: 0;
width: 20px;
text-align: center;
margin-top: 3px;
}
.footer-contact-text {
color: var(--black);
font-size: 15px;
line-height: 1.6;
font-weight: 400;
}
.footer-contact-text a {
color: var(--black);
text-decoration: none;
transition: color 0.3s;
}
.footer-contact-text a:hover {
color: var(--accent);
}
.footer-bottom {
padding-top: 40px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
font-size: 13px;
color: var(--text-dim);
text-decoration: none;
transition: color 0.3s;
}
.footer-legal a:hover {
color: var(--accent);
}
/* ===================== INNER PAGE HERO (GLOBAL) ===================== */
.page-hero {
position: relative;
min-height: 45vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--navy-deep);
}
.page-hero .hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.page-hero .hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.65);
animation: none;
}
.page-hero .hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: rgb(0 0 0 / 35%);
}
.page-hero .hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
padding: 0 40px;
}
.page-hero .hero-title {
color: #fff;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.page-hero .hero-title em {
font-style: italic;
color: var(--accent);
}
.page-hero .hero-subtitle {
font-size: 17px;
color: rgb(255 255 255 / 85%);
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
font-weight: 300;
}
.page-hero .breadcrumb {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgb(255 255 255 / 70%);
margin-bottom: 20px;
font-weight: 500;
}
.page-hero .breadcrumb a {
color: #fff;
text-decoration: none;
transition: color 0.3s;
}
.page-hero .breadcrumb a:hover,
.page-hero .breadcrumb span.sep,
.page-hero .breadcrumb span.current {
color: var(--accent);
}
@media (width <= 768px) {
.page-hero .hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
padding: 0 40px;
margin-top: 70px;
}
}
/* ===================== SECTION & CONTAINER (GLOBAL) ===================== */
section {
padding: 100px 0;
}
.container {
width: 90%;
max-width: 1600px;
/* Optional cap for very large screens to maintain readability */
margin: 0 auto;
}
@media (width <= 768px) {
section {
padding: 60px 0;
}
.container {
width: 100%;
max-width: 100%;
}
}
.section-tag {
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 14px;
}
.section-tag::before {
content: "";
width: 36px;
height: 1px;
background: var(--accent);
flex-shrink: 0;
}
.section-title {
font-weight: 400;
line-height: 1.08;
margin-bottom: 24px;
}
.section-title em {
font-style: italic;
color: var(--accent);
}
.text-center {
text-align: center;
}
.text-center .section-tag {
justify-content: center;
}
.section-header-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
@media (width <= 768px) {
.section-header-row {
width: 100%;
max-width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin-bottom: 40px;
}
}
/* ===================== COMMON UTILITIES & OPTIMIZATION ===================== */
.mt-10 {
margin-top: 10px !important;
}
.mt-15 {
margin-top: 15px !important;
}
.mt-60 {
margin-top: 60px !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.pt-30 {
padding-top: 30px !important;
}
.w-100 {
width: 100% !important;
}
.block {
display: block !important;
}
.inline-block {
display: inline-block !important;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-start {
justify-content: flex-start !important;
}
.text-dim {
color: var(--text-dim) !important;
}
.text-muted {
color: var(--text-muted) !important;
}
.text-accent {
color: var(--accent) !important;
}
.text-center {
text-align: center !important;
}
.font-body {
font-family: var(--font-body) !important;
}
.fs-11 {
font-size: 11px !important;
}
.fs-12 {
font-size: 12px !important;
}
.fs-14 {
font-size: 14px !important;
}
.fs-15 {
font-size: 15px !important;
}
.fs-16 {
font-size: 16px !important;
}
.fs-18 {
font-size: 18px !important;
}
.fs-32 {
font-size: 32px !important;
}
.fs-36 {
font-size: 36px !important;
}
.fs-clamp-title {
font-size: clamp(32px, 4vw, 56px) !important;
}
.fs-clamp-cta {
font-size: clamp(32px, 4vw, 42px) !important;
}
/* Custom Overrides for Common Elements */
.section-tag.flex-start::before {
display: block;
}
.hero-title.fs-clamp-title {
line-height: 1.1;
}
.gallery-header.mb-30 {
margin-bottom: 30px;
}
.gallery-header.mb-40 {
margin-bottom: 40px;
}
.font-display {
font-family: var(--font-display) !important;
}
.fw-400 {
font-weight: 400 !important;
}
.shadow-img {
width: 100%;
border-radius: 4px;
box-shadow: 0 15px 40px rgb(0 0 0 / 5%);
aspect-ratio: 4/3;
object-fit: cover;
}
.ml-auto {
margin-left: auto !important;
}
.h-20 {
height: 20px !important;
}
.pt-16 {
padding-top: 16px !important;
}
.pt-18 {
padding-top: 18px !important;
}
.p-40 {
padding: 40px !important;
}
.bg-white {
background: #fff !important;
}
.border-0 {
border: 0 !important;
}
.border-top-light {
border-top: 1px solid rgb(0 0 0 / 5%) !important;
}
.mr-8 {
margin-right: 8px !important;
}
.mt-50 {
margin-top: 50px !important;
}
.mh-200 {
max-height: 200px !important;
}
@media (width <= 768px) {
nav {
padding: 0 20px;
}
section {
padding: 60px 20px;
}
footer {
padding: 60px 20px 40px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
padding-top: 30px;
}
.footer-legal {
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
}
/* Full Width Container */
.container-fluid {
width: 100%;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
/* --- components.css (Purged) --- */
/* ===================== BUTTONS ===================== */
.nav-cta {
background: var(--accent);
color: var(--navy-deep);
border: 1px solid var(--navy-deep);
cursor: pointer;
padding: 12px 28px;
font-family: var(--font-body);
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.3s;
text-decoration: none;
}
.nav-cta:hover {
background: var(--accent-light);
transform: translateY(-1px);
}
.btn-gold {
background: var(--accent);
color: var(--navy);
text-decoration: none;
padding: 16px 44px;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.3s;
display: inline-block;
font-family: var(--font-body);
border: 1px solid var(--accent);
}
.btn-gold:hover {
background: var(--accent-light);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgb(0 43 94 / 20%);
}
.btn-ghost {
color: #fff;
text-decoration: none;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
display: flex;
align-items: center;
gap: 12px;
transition:
gap 0.3s,
background 0.3s,
border-color 0.3s,
color 0.3s;
border: 1px solid rgb(255 255 255 / 40%);
padding: 15px 32px;
}
.btn-ghost:hover {
gap: 20px;
background: #fff;
color: var(--black);
border-color: #fff;
}
.btn-dark {
background: var(--black);
color: var(--navy);
text-decoration: none;
padding: 16px 44px;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.3s;
font-family: var(--font-body);
}
.btn-dark:hover {
background: var(--off-black);
transform: translateY(-2px);
}
.view-all-link {
color: var(--text-muted);
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s;
font-weight: 500;
white-space: nowrap;
}
.view-all-link:hover {
color: var(--accent);
gap: 18px;
}
/* ===================== MARQUEE ===================== */
.marquee-strip {
background: var(--accent);
padding: 14px 0;
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 0;
animation: marquee 25s linear infinite;
white-space: nowrap;
}
.marquee-item {
color: var(--black);
font-size: 13px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 500;
display: flex;
align-items: center;
gap: 28px;
flex-shrink: 0;
padding-right: 28px;
}
.marquee-sep {
width: 4px;
height: 4px;
background: var(--navy-mid);
border-radius: 50%;
flex-shrink: 0;
}
/* ===================== HOTSPOTS ===================== */
.hotspot {
position: absolute;
z-index: 100;
/* High z-index to stay above all section content */
}
.hotspot-dot {
width: 28px;
height: 28px;
background: rgb(255 255 255 / 90%);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 20px rgb(0 0 0 / 20%);
cursor: pointer;
position: relative;
transition: all 0.3s;
}
.hotspot-dot:hover {
transform: scale(1.1);
background: #fff;
}
.hotspot-dot::after {
content: "";
position: absolute;
inset: -12px;
border-radius: 50%;
background: #fff;
opacity: 0.5;
animation: hotspotPulse 2.5s infinite;
pointer-events: none;
}
.hotspot-card {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%) translateY(15px);
width: 260px;
/* Made slightly larger */
background: #fff;
padding: 16px;
border-radius: 8px;
box-shadow: 0 40px 100px rgb(0 0 0 / 40%);
/* Much stronger shadow for pop */
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 110;
border: 1px solid rgb(0 0 0 / 5%);
}
.hotspot-card::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #fff;
}
.hotspot.active .hotspot-card {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.hotspot-card img {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 12px;
min-height: auto;
}
.hotspot-info {
text-align: left;
}
.hotspot-name {
font-size: 14px;
font-weight: 500;
color: var(--black);
margin-bottom: 6px;
font-family: var(--font-body);
}
.hotspot-price {
font-size: 15px;
color: var(--accent);
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.hotspot-price .old-price {
text-decoration: line-through;
color: #aaa;
font-size: 13px;
font-weight: 400;
}
/* ===================== SWATCHES ===================== */
.handmade-swatches {
display: flex;
gap: 12px;
margin: 32px 0;
flex-wrap: wrap;
}
.swatch {
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
border: 1px solid var(--border);
position: relative;
}
.swatch:hover,
.swatch.active {
transform: scale(1.15);
border: 2px solid var(--accent);
box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}
/* ===================== WHATSAPP FLOAT ===================== */
.wa-float {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
width: 60px;
height: 60px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgb(37 211 102 / 40%);
transition: all 0.3s;
}
.wa-float:hover {
transform: scale(1.1) translateY(-5px);
box-shadow: 0 15px 30px rgb(37 211 102 / 50%);
}
.wa-float svg {
width: 32px;
height: 32px;
fill: #fff;
}
.wa-tooltip {
position: absolute;
right: 80px;
background: #fff;
color: #333;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.wa-float:hover .wa-tooltip {
opacity: 1;
visibility: visible;
right: 75px;
}
/* ============ THEMED WHATSAPP BUTTON ============ */
/* For light backgrounds (outline version) */
.btn-whatsapp-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 35px;
background: transparent;
color: var(--accent);
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s ease;
border: 1px solid var(--accent);
font-family: var(--font-body);
}
.btn-whatsapp-outline:hover {
background: var(--accent);
color: var(--navy);
}
/* ===================== FINAL CTA COMPONENT ===================== */
.final-cta {
padding: 100px 30px;
background: var(--accent);
text-align: center;
content-visibility: auto;
contain-intrinsic-size: 0 300px;
}
.final-cta .section-title,
.final-cta .section-title em {
color: #fff;
margin-bottom: 40px;
}
.cta-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta {
display: inline-block;
padding: 15px 35px;
background: var(--black);
color: var(--navy);
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s ease;
border: 1px solid var(--black);
}
.btn-cta:hover {
background: transparent;
color: var(--black);
}
.btn-cta-outline {
display: inline-block;
padding: 15px 35px;
background: transparent;
color: var(--black);
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s ease;
border: 1px solid var(--black);
}
.btn-cta-outline:hover {
background: var(--black);
color: #fff;
border-color: var(--black);
}
@media (width <= 768px) {
.cta-actions {
flex-direction: column;
align-items: center;
}
}
/* ===================== FOOTER ===================== */
footer {
background: #fff;
border-top: 1px solid var(--border);
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
/* ===================== MOBILE STICKY FOOTER ===================== */
.mobile-sticky-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
display: none;
justify-content: space-around;
align-items: center;
padding: 10px 0;
box-shadow: 0 -5px 20px rgb(0 0 0 / 8%);
z-index: 1000;
border-top: 1px solid var(--border);
}
.msf-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--black);
gap: 4px;
flex: 1;
}
.msf-item i {
font-size: 18px;
color: var(--accent);
}
.msf-item span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
@media (width <= 1024px) {
.wa-float {
display: none !important;
}
.mobile-sticky-footer {
display: flex !important;
}
}
/* --- main.css (Purged) --- */
/* ===================== CORE ===================== */
/* Page specific styles should be imported in the page's HTML or here if global */
/* */
/* --- home.css (Purged) --- */
/* ===================== HERO ===================== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
padding-bottom: 100px;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.1);
animation: heroScale 12s ease-out forwards;
filter: brightness(0.75);
will-change: transform;
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to right,
rgb(0 0 0 / 50%) 0%,
transparent 40%,
rgb(0 0 0 / 40%) 100%
),
linear-gradient(to top, rgb(0 0 0 / 40%) 0%, transparent 30%);
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 60px;
max-width: 780px;
animation: heroFade 1.2s ease 0.3s both;
}
.hero-eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
}
.hero-eyebrow::before {
content: "";
width: 48px;
height: 1px;
background: var(--accent);
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(48px, 6.5vw, 96px);
font-weight: 400;
line-height: 1.02;
margin-bottom: 28px;
letter-spacing: -1px;
color: #fff;
}
.hero-title em {
font-style: italic;
color: var(--accent);
}
.hero-subtitle {
font-size: 15px;
color: rgb(255 255 255 / 85%);
line-height: 1.8;
max-width: 520px;
margin-bottom: 52px;
font-weight: 300;
}
.hero-actions {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.hero-stats {
position: absolute;
z-index: 2;
right: 60px;
bottom: 100px;
display: flex;
flex-direction: column;
gap: 28px;
animation: heroFade 1.2s ease 0.6s both;
}
.stat-box {
text-align: right;
}
.stat-num {
font-family: var(--font-display);
font-size: 38px;
font-weight: 400;
color: var(--accent);
line-height: 1;
text-shadow: 0 4px 15px rgb(0 0 0 / 60%);
}
.stat-label {
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgb(255 255 255 / 90%);
margin-top: 4px;
text-shadow: 0 2px 10px rgb(0 0 0 / 50%);
}
.hero-scroll-hint {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgb(255 255 255 / 60%);
}
.scroll-bar {
width: 1px;
height: 50px;
background: linear-gradient(to bottom, var(--accent), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
/* ===================== SHOP THE LOOK ===================== */
.shop-the-look {
background: var(--navy-deep);
padding: 0;
position: relative;
z-index: 50;
/* Ensures hotspot cards overlay the section below */
}
.stl-container {
position: relative;
width: 100%;
}
.stl-main-img-overlay {
position: relative;
border-radius: 0;
overflow: visible;
background: #f0f0f0;
min-height: 600px;
}
.stl-main-img-overlay::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgb(0 0 0 / 80%) 0%,
rgb(0 0 0 / 40%) 50%,
transparent 100%
);
pointer-events: none;
z-index: 5;
}
.stl-main-img-overlay img {
width: 100%;
height: 100%;
min-height: 250px;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stl-info-desktop {
position: absolute;
top: 30%;
left: 5%;
transform: translateY(-50%);
z-index: 15;
max-width: 520px;
}
@media (width >= 1600px) {
.stl-info-desktop {
left: calc((100% - 1600px) / 2);
}
}
.stl-info-desktop .section-title {
color: #fff;
margin-bottom: 24px;
text-shadow: 0 4px 15px rgb(0 0 0 / 50%);
}
.stl-info-desktop .section-p {
color: rgb(255 255 255 / 95%);
margin-bottom: 40px;
font-size: 16px;
line-height: 1.8;
font-weight: 300;
text-shadow: 0 2px 10px rgb(0 0 0 / 30%);
}
.stl-info-desktop .view-all-link {
background: transparent;
color: #fff;
border: 1px solid rgb(255 255 255 / 40%);
padding: 16px 36px;
display: inline-block;
text-decoration: none;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.3s;
}
.stl-info-desktop .view-all-link:hover {
background: #fff;
color: var(--black);
border-color: #fff;
}
/* ===================== FEATURED COLLECTIONS ===================== */
.collections-section {
background: var(--navy);
border-top: 1px solid var(--border);
}
.collections-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
grid-template-rows: 420px 300px;
gap: 14px;
}
.col-card {
position: relative;
overflow: hidden;
cursor: pointer;
background: var(--navy-mid);
}
.col-card:first-child {
grid-row: 1 / 3;
}
.col-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(0.8);
}
.col-card:hover img {
transform: scale(1.07);
filter: brightness(0.85);
}
.col-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgb(0 0 0 / 85%) 0%,
rgb(0 0 0 / 45%) 50%,
transparent 100%
);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px;
transition: background 0.4s;
}
.col-tag {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.col-name {
font-family: var(--font-display);
font-size: 26px;
font-weight: 400;
color: #fff;
margin-bottom: 6px;
text-shadow: 0 2px 10px rgb(0 0 0 / 50%);
}
.col-card:first-child .col-name {
font-size: 38px;
}
.col-count {
font-size: 13px;
color: rgb(255 255 255 / 70%);
margin-bottom: 18px;
letter-spacing: 1px;
}
.col-btn {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--accent);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.3s,
transform 0.3s,
gap 0.3s;
}
.col-card:hover .col-btn {
opacity: 1;
transform: translateY(0);
}
.col-btn:hover {
gap: 18px;
}
.col-hero-badge {
position: absolute;
top: 28px;
right: 28px;
background: var(--accent);
color: var(--navy);
padding: 10px 18px;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
}
/* ===================== CATEGORY GRID ===================== */
.categories-section {
background: var(--navy-deep);
}
.cat-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border: 1px solid var(--border);
}
section.categories-section {
padding: 0;
}
.cat-item {
padding: 48px 32px;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
transition: background 0.4s;
position: relative;
overflow: hidden;
}
.cat-item:last-child {
border-right: none;
}
.cat-item::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: var(--accent);
transition: height 0.4s;
z-index: 0;
}
.cat-item:hover::before {
height: 3px;
}
.cat-item:hover {
background: rgb(0 43 94 / 4%);
}
.cat-icon {
font-size: 32px;
margin-bottom: 18px;
position: relative;
z-index: 1;
color: var(--accent);
transition: transform 0.3s ease;
}
.cat-item:hover .cat-icon {
transform: translateY(-5px);
}
.cat-name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 400;
color: var(--black);
margin-bottom: 8px;
position: relative;
z-index: 1;
}
.cat-count {
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
position: relative;
z-index: 1;
}
.cat-arrow {
color: var(--accent);
font-size: 18px;
margin-top: 18px;
opacity: 0;
transform: translateX(-8px);
transition: all 0.3s;
position: relative;
z-index: 1;
}
.cat-item:hover .cat-arrow {
opacity: 1;
transform: translateX(0);
}
/* ===================== HANDMADE SPOTLIGHT ===================== */
.handmade-section {
background: var(--navy-mid);
position: relative;
overflow: hidden;
}
.handmade-section::before {
content: "HANDMADE";
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
font-family: var(--font-display);
font-size: 140px;
font-weight: 700;
color: rgb(0 43 94 / 2%);
white-space: nowrap;
pointer-events: none;
letter-spacing: 20px;
}
.handmade-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.handmade-images {
position: relative;
height: 600px;
}
.handmade-img-main {
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 75%;
overflow: hidden;
background: var(--navy-light);
}
.handmade-img-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.handmade-img-accent {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 55%;
overflow: hidden;
background: var(--navy);
border: 4px solid var(--navy-mid);
}
.handmade-img-accent img {
width: 100%;
height: 100%;
object-fit: cover;
}
.handmade-badge {
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
background: var(--accent);
padding: 20px 24px;
text-align: center;
z-index: 10;
box-shadow: 0 20px 60px rgb(0 0 0 / 40%);
}
.handmade-badge-num {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
color: var(--navy);
line-height: 1;
}
.handmade-badge-text {
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgb(255 255 255 / 70%);
margin-top: 4px;
}
.handmade-content {
padding-right: 20px;
}
.handmade-list {
list-style: none;
margin: 32px 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.handmade-list li {
display: flex;
align-items: center;
gap: 14px;
font-size: 15px;
color: var(--off-black);
font-weight: 400;
}
.handmade-list li::before {
content: "";
width: 24px;
height: 1px;
background: var(--accent);
flex-shrink: 0;
}
/* ===================== PROJECTS ===================== */
/* ── Projects Slider ── */
.pj-section { padding: 80px 0; }
.pj-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 5%;
margin-bottom: 40px;
}
.pj-nav { display: flex; gap: 12px; }
.pj-btn {
width: 44px;
height: 44px;
border: 1px solid var(--border);
background: var(--navy);
color: var(--accent);
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pj-btn:hover {
background: var(--accent);
color: var(--navy);
border-color: var(--accent);
}
.pj-track-wrap {
overflow: hidden; /* NO scroll here — JS moves the track */
padding: 0 5%;
}
.pj-track {
display: flex;
gap: 24px;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
.pj-card {
flex: 0 0 420px;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
cursor: pointer;
background: var(--navy-mid, #1a1a2e);
}
.pj-img {
aspect-ratio: 4/5;
overflow: hidden;
}
.pj-img img,
.pj-img-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease, filter 0.4s;
filter: brightness(0.85);
}
.pj-img-placeholder { background: #e0e0e0; }
.pj-card:hover .pj-img img { transform: scale(1.06); filter: brightness(0.7); }
.pj-info {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.28) 65%, transparent 100%);
padding: 48px 24px 24px;
display: flex;
flex-direction: column;
gap: 4px;
transform: translateY(10px);
transition: transform 0.4s;
}
.pj-card:hover .pj-info { transform: translateY(0); }
.pj-loc {
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
}
.pj-name {
font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: #fff;
}
.pj-type {
font-size: 12px;
color: rgba(255,255,255,0.7);
letter-spacing: 1px;
}
@media (max-width: 600px) {
.pj-card { flex: 0 0 82vw; }
}
/* ===================== TRUST BAR ===================== */
.trust-section {
background: var(--navy);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.trust-item {
padding: 40px 36px;
border-right: 1px solid var(--border);
text-align: center;
}
.trust-item:last-child {
border-right: none;
}
.trust-num {
font-family: var(--font-display);
font-size: 48px;
font-weight: 400;
color: var(--accent);
line-height: 1;
margin-bottom: 8px;
}
.trust-label {
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
}
.trust-desc {
font-size: 15px;
color: var(--text-muted);
margin-top: 6px;
font-weight: 400;
line-height: 1.6;
}
/* ===================== LEAD CAPTURE ===================== */
.lead-section {
background: var(--navy-deep);
position: relative;
overflow: hidden;
}
.lead-section::after {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgb(0 43 94 / 6%) 0%, transparent 70%);
pointer-events: none;
}
.lead-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.lead-content .section-title {
margin-bottom: 20px;
}
.lead-desc {
font-size: 14px;
color: var(--text-muted);
line-height: 1.85;
font-weight: 300;
margin-bottom: 36px;
max-width: 440px;
}
.lead-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.lead-features li {
font-size: 15px;
color: var(--off-black);
display: flex;
align-items: center;
gap: 12px;
font-weight: 400;
line-height: 1.6;
}
.lead-features li span {
color: var(--accent);
font-size: 14px;
}
.lead-form {
background: rgb(0 43 94 / 3%);
border: 1px solid var(--border);
padding: 48px 44px;
position: relative;
}
.lead-form::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent);
}
/* ===================== DEALER STRIP ===================== */
.dealer-strip {
background: var(--accent);
padding: 60px 0;
}
.dealer-strip .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.dealer-strip-text h3 {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
color: var(--navy-deep);
}
.dealer-strip-text p {
color: #fff;
margin-top: 6px;
font-weight: 300;
}
@media (width <= 1024px) {
.handmade-grid,
.lead-grid {
gap: 40px;
}
.collections-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
}
@media (width <= 768px) {
.hero {
align-items: center;
text-align: center;
padding-bottom: 60px;
}
.hero-content {
padding: 0 20px;
max-width: 100%;
}
.hero-title {
font-size: 42px;
}
.hero-subtitle {
margin: 0 auto 40px;
}
.hero-actions {
justify-content: center;
}
.hero-stats {
display: none;
/* Fix: Hide overlapping stats on mobile */
}
.hero-scroll-hint {
display: none;
}
/* Shop the Look Mobile */
.stl-info-desktop {
position: relative;
top: 0;
left: 0;
transform: none;
padding: 40px 20px;
background: var(--navy-deep);
text-align: center;
}
.stl-info-desktop .section-title,
.stl-info-desktop .section-p {
color: var(--black);
}
.stl-info-desktop .view-all-link {
color: var(--black);
border-color: var(--border);
}
.hotspot {
display: none;
/* Fix: Hide dots on mobile */
}
/* Collections Mobile */
.collections-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
width: 100%;
max-width: 100%;
}
.col-card:first-child {
grid-row: auto;
}
.col-card {
height: 350px;
}
/* Category Grid Mobile */
.cat-grid {
grid-template-columns: 1fr;
}
.cat-item {
padding: 30px 20px;
border-right: none;
border-bottom: 1px solid var(--border);
}
/* Handmade Spotlight Mobile */
.handmade-images {
height: 350px;
}
.handmade-badge {
left: 50%;
top: auto;
bottom: 20px;
}
/* Contact Form Mobile */
.lead-grid,
.handmade-grid {
grid-template-columns: 1fr;
gap: 40px;
width: 100%;
max-width: 100%;
}
.lead-form {
padding: 30px 20px;
}
.trust-grid {
grid-template-columns: 1fr;
width: 100%;
max-width: 100%;
}
.trust-item {
border-right: none;
border-bottom: 1px solid var(--border);
}
.dealer-strip {
padding: 40px 0;
}
.dealer-strip .container {
flex-direction: column;
text-align: center;
gap: 30px;
}
.dealer-strip-text h3 {
font-size: 26px;
}
}
/* ===================== EXTRACTED UTILITIES ===================== */
/* Swatches */
.swatch-mid {
background: #f3f1ec;
}
.swatch-light {
background: #faf9f7;
}
.swatch-dark {
background: #2c3e50;
}
.swatch-black {
background: #1a242f;
}
.swatch-white {
background: #fff;
}
.swatch-accent {
background: var(--accent);
}
/* Handmade Action Container */
.handmade-actions {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* Slider Navigation Container */
.slider-nav-container {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
/* Hotspots Positions */
.hotspot-1 {
top: 45%;
left: 47%;
}
.hotspot-2 {
top: 61%;
left: 13%;
}
.hotspot-3 {
top: 30%;
left: 66%;
}
.hotspot-4 {
top: 39%;
left: 85%;
}
/* Lead Direct Contact */
.lead-direct-contact {
margin-top: 40px;
padding: 24px;
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
}
.lead-direct-contact-title {
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.lead-direct-contact-link {
color: var(--black);
font-family: var(--font-display);
font-size: 20px;
text-decoration: none;
display: flex;
align-items: center;
gap: 12px;
}
.lead-direct-contact-icon {
color: var(--black);
font-size: 22px;
}
/* Category Specifics */
.categories-section {
padding-top: 0;
padding-bottom: 0;
}
.no-border-right {
border-right: none !important;
}
/* --- about.css (Purged) --- */
/* ===================== ABOUT PAGE STYLES ===================== */
.about-story {
padding: 100px 20px;
background: #fff;
}
.story-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.story-content h2 {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 48px);
color: var(--black);
margin-bottom: 24px;
line-height: 1.2;
}
.story-content p {
font-size: 16px;
line-height: 1.8;
color: var(--off-black);
margin-bottom: 20px;
}
.story-image {
position: relative;
}
.story-image img {
width: 100%;
height: 600px;
object-fit: cover;
border-radius: 4px;
}
.story-experience-badge {
position: absolute;
bottom: -30px;
left: -30px;
background: var(--accent);
padding: 30px;
color: var(--navy);
text-align: center;
}
.story-experience-badge span {
display: block;
font-family: var(--font-display);
font-size: 42px;
line-height: 1;
}
.story-experience-badge p {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
@media (width <= 992px) {
.story-container {
grid-template-columns: 1fr;
gap: 60px;
}
.story-image img {
height: 400px;
}
}
/* --- WHAT MAKES US DIFFERENT --- */
.diff-section {
padding: 100px 20px;
background: var(--navy-mid);
}
.diff-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.diff-card {
background: #fff;
padding: 40px 30px;
text-align: center;
border: 1px solid var(--border);
transition: all 0.3s;
}
.diff-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgb(0 0 0 / 5%);
}
.diff-icon {
font-size: 32px;
color: var(--accent);
margin-bottom: 24px;
}
.diff-card h3 {
font-size: 18px;
margin-bottom: 15px;
color: var(--black);
}
.diff-card p {
font-size: 14px;
color: var(--text-dim);
line-height: 1.6;
}
@media (width <= 992px) {
.diff-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 576px) {
.diff-grid {
grid-template-columns: 1fr;
}
}
/* --- COLLECTIONS PREVIEW --- */
.collections-preview {
padding: 100px 20px;
}
.coll-preview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 300px);
gap: 20px;
}
.coll-item {
position: relative;
overflow: hidden;
text-decoration: none;
border-radius: 4px;
}
.coll-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.coll-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(0 0 0 / 70%), transparent);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
}
.coll-overlay h3 {
color: #fff;
font-family: var(--font-display);
font-size: 24px;
margin-bottom: 5px;
}
.coll-overlay p {
color: rgb(255 255 255 / 80%);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
}
.coll-item:hover img {
transform: scale(1.1);
}
.coll-item.large {
grid-row: span 2;
grid-column: span 1;
}
@media (width <= 768px) {
.coll-preview-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(5, 300px);
}
.coll-item.large {
grid-row: span 1;
}
}
/* --- QUALITY COMMITMENT --- */
.quality-section {
background: var(--navy-deep);
color: var(--black);
padding: 100px 20px;
}
.quality-container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.quality-container .section-tag {
color: var(--accent);
}
.quality-container h2 {
color: var(--black);
margin-bottom: 30px;
}
.quality-content p {
font-size: 16px;
line-height: 1.8;
color: var(--off-black);
margin-bottom: 25px;
}
/* --- APPLICATIONS --- */
.app-section {
padding: 100px 20px;
}
.app-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 40px auto;
}
.app-img {
height: 350px;
overflow: hidden;
border-radius: 4px;
}
.app-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (width <= 992px) {
.app-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- VISION & MISSION --- */
.vision-mission {
padding: 80px 20px;
background: var(--navy-mid);
}
.vm-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.vm-box {
padding: 40px;
background: #fff;
border-left: 4px solid var(--accent);
}
.vm-box h3 {
font-family: var(--font-display);
font-size: 28px;
color: var(--black);
margin-bottom: 20px;
}
.vm-box p {
font-size: 16px;
color: var(--off-black);
line-height: 1.6;
}
@media (width <= 768px) {
.vm-container {
grid-template-columns: 1fr;
}
}
/* End of About Styles */
/* --- contact.css (Purged) --- */
/* ===================== CONTACT PAGE ===================== */
.contact-layout {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 60px;
margin: 80px auto;
}
@media (width <= 1024px) {
.contact-layout {
grid-template-columns: 1fr;
}
}
/* Contact Info Box */
.contact-info-panel {
background: #fdfdfd;
padding: 50px;
border: 1px solid rgb(0 0 0 / 5%);
}
.contact-info-panel h3 {
font-size: 28px;
font-family: var(--font-display);
margin-bottom: 30px;
color: var(--black);
}
.info-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 30px;
}
.info-icon {
font-size: 20px;
color: var(--accent);
margin-top: 3px;
}
.info-content h4 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
color: var(--black);
}
.info-content p,
.info-content a {
font-size: 16px;
color: var(--text-muted);
text-decoration: none;
line-height: 1.6;
}
.info-content a:hover {
color: var(--accent);
}
/* Form Styles Override */
.contact-form-wrapper {
background: #fff;
padding: 50px;
box-shadow: 0 15px 50px rgb(0 0 0 / 3%);
}
/* Map Section */
.contact-map {
width: 100%;
height: 450px;
background: #eee;
}
.contact-map iframe {
width: 100%;
height: 100%;
border: none;
}
/* SEO Content */
/* Dark CTA */
/* --- dealer.css (Purged) --- */
/* ===================== DEALER PAGE STYLES ===================== */
/* --- WHY PARTNER WITH US --- */
.partner-section {
background: #fff;
}
.partner-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.partner-card {
background: #fdfdfc;
padding: 40px;
text-align: center;
border: 1px solid rgb(0 0 0 / 5%);
transition:
transform 0.3s,
box-shadow 0.3s;
}
.partner-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgb(0 0 0 / 4%);
}
.partner-icon {
font-size: 36px;
color: var(--accent);
margin-bottom: 20px;
}
.partner-card h3 {
font-size: 20px;
margin-bottom: 12px;
}
.partner-card p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.6;
}
@media (width <= 1024px) {
.partner-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 768px) {
.partner-grid {
grid-template-columns: 1fr;
}
}
/* --- SPLIT SECTION (WHO CAN APPLY + FORM) --- */
.registration-section {
background: #f8f8f8;
}
.reg-layout {
display: grid;
grid-template-columns: 1.2fr 1.8fr;
gap: 60px;
max-width: 1400px;
margin: 0 auto;
}
@media (width <= 1024px) {
.reg-layout {
grid-template-columns: 1fr;
}
}
/* Who Can Apply */
.apply-info h3 {
font-size: 36px;
margin-bottom: 30px;
}
.apply-list {
list-style: none;
padding: 0;
margin-bottom: 40px;
}
.apply-list li {
display: flex;
align-items: center;
gap: 15px;
font-size: 18px;
color: var(--black);
padding: 18px 0;
border-bottom: 1px solid rgb(0 0 0 / 5%);
}
.apply-list li i {
color: var(--accent);
font-size: 20px;
}
/* Form Styles */
.reg-form-wrapper {
background: #fff;
padding: 50px;
box-shadow: 0 15px 50px rgb(0 0 0 / 3%);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group-full {
grid-column: 1 / -1;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dim);
margin-bottom: 8px;
}
.form-control {
width: 100%;
padding: 15px 20px;
background: #fdfdfd;
border: 1px solid var(--border);
font-family: var(--font-body);
font-size: 15px;
color: var(--black);
transition: all 0.3s;
outline: none;
}
.form-control:focus {
border-color: var(--accent);
background: #fff;
}
select.form-control {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 20px center;
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
@media (width <= 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.reg-form-wrapper {
padding: 30px 20px;
}
}
/* --- FAQ SECTION --- */
.faq-section {
background: #fff;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid rgb(0 0 0 / 5%);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
background: none;
border: none;
font-family: var(--font-display);
font-size: 20px;
color: var(--black);
text-align: left;
cursor: pointer;
transition: color 0.3s;
}
.faq-question:hover {
color: var(--accent);
}
.faq-icon {
font-size: 16px;
color: var(--accent);
transition: transform 0.3s;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-answer p {
padding-bottom: 24px;
color: var(--text-muted);
line-height: 1.6;
}
/* --- DEALER STRIP (CTA) --- */
.dealer-strip {
background: var(--accent);
padding: 60px 0;
}
.dealer-strip .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.dealer-strip-text h3 {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
color: var(--navy-deep);
}
.dealer-strip-text p {
color: #fff;
margin-top: 6px;
font-weight: 300;
}
@media (width <= 768px) {
.dealer-strip {
padding: 40px 0;
}
.dealer-strip .container {
flex-direction: column;
text-align: center;
gap: 30px;
padding: 0 20px;
}
.dealer-strip-text h3 {
font-size: 26px;
}
}
/* --- collections.css (Purged) --- */
/* ===================== COLLECTIONS LAYOUT ===================== */
.collections-layout {
display: flex;
gap: 60px;
padding: 80px 0;
background: #fdfdfc;
}
.overview-section {
padding: 80px 0;
background: var(--navy-mid);
}
.overview-header {
text-align: center;
max-width: 700px;
margin: 0 auto 60px;
}
.overview-header .section-title {
margin-bottom: 16px;
font-weight: 500;
}
.overview-desc {
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
}
.overview-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 30px;
}
.overview-card {
position: relative;
border-radius: 4px;
overflow: hidden;
text-decoration: none;
display: block;
grid-column: span 2;
aspect-ratio: 4/3;
background: var(--navy-mid);
}
.tall-card {
grid-row: span 2;
aspect-ratio: auto;
height: calc(100% - 30px + 4 / 3);
/* Approximate tall sizing based on gap */
}
.overview-img {
position: absolute;
inset: 0;
}
.overview-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.overview-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(0 0 0 / 70%) 0%, transparent 60%);
transition: background 0.3s;
}
.overview-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
z-index: 2;
}
.overview-content h3 {
font-family: var(--font-display);
font-size: 24px;
color: #fff;
font-weight: 500;
margin-bottom: 8px;
transition: color 0.3s;
}
.overview-content span {
color: var(--accent);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
display: inline-flex;
align-items: center;
transform: translateY(10px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.overview-card:hover .overview-img img {
transform: scale(1.05);
}
.overview-card:hover .overview-img::after {
background: linear-gradient(
to top,
rgb(0 0 0 / 80%) 0%,
rgb(0 0 0 / 20%) 60%
);
}
.overview-card:hover .overview-content span {
transform: translateY(0);
opacity: 1;
}
.wide-card {
grid-column: span 4;
aspect-ratio: 2.8 / 1;
}
.half-card {
grid-column: span 3;
aspect-ratio: 2 / 1;
}
@media (width <= 1200px) {
.overview-grid {
grid-template-columns: repeat(4, 1fr);
}
.overview-card {
grid-column: span 2;
}
.tall-card {
grid-row: auto;
aspect-ratio: 4/3;
height: auto;
}
.half-card {
grid-column: span 2;
aspect-ratio: 16 / 9;
}
.wide-card {
grid-column: 1 / -1;
aspect-ratio: 21 / 9;
}
}
@media (width <= 768px) {
.overview-grid {
grid-template-columns: 1fr;
}
.overview-section {
padding: 40px 20px;
}
.tall-card,
.wide-card,
.half-card,
.overview-card {
grid-column: 1 / -1;
aspect-ratio: 16/9;
}
}
/* ===================== SIDEBAR ===================== */
.collections-sidebar {
width: 280px;
flex-shrink: 0;
}
.sidebar-close {
display: none;
}
.filter-group {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border);
}
.filter-group:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.filter-title {
font-family: var(--font-display);
font-size: 20px;
color: var(--black);
margin-bottom: 20px;
font-weight: 500;
}
.filter-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.filter-list a {
text-decoration: none;
color: var(--text-muted);
font-size: 15px;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 10px;
}
.filter-list a::before {
content: "";
width: 12px;
height: 1px;
background: transparent;
transition: all 0.3s;
}
.filter-list a:hover {
color: var(--black);
transform: translateX(5px);
}
.filter-list a:hover::before {
background: var(--accent);
width: 16px;
}
.filter-list a.active {
color: var(--accent);
font-weight: 500;
}
.filter-list a.active::before {
background: var(--accent);
width: 16px;
}
/* ===================== MAIN CONTENT ===================== */
.collections-main {
flex-grow: 1;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.page-title {
font-size: 14px;
color: var(--text-muted);
letter-spacing: 1px;
}
.view-options {
display: flex;
gap: 16px;
}
.view-icon {
color: var(--text-muted);
cursor: pointer;
font-size: 18px;
transition: color 0.3s;
}
.view-icon:hover,
.view-icon.active {
color: var(--black);
}
/* ===================== PRODUCT GRID ===================== */
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px 30px;
}
.product-card {
text-decoration: none;
display: block;
}
.product-image-wrapper {
position: relative;
aspect-ratio: 4/5;
background: var(--navy-mid);
overflow: hidden;
margin-bottom: 20px;
}
.product-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover .product-image-wrapper img {
transform: scale(1.08);
}
.product-badge {
position: absolute;
top: 16px;
left: 16px;
background: var(--accent);
color: var(--navy);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 12px;
font-weight: 500;
z-index: 2;
}
.product-overlay-action {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: var(--accent);
color: var(--navy);
text-align: center;
padding: 16px 0;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
.product-card:hover .product-overlay-action {
transform: translateY(0);
}
.product-category {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 8px;
}
.product-title {
font-family: var(--font-display);
font-size: 22px;
color: var(--black);
font-weight: 400;
margin-bottom: 8px;
transition: color 0.3s;
}
.product-card:hover .product-title {
color: var(--accent);
}
.product-price {
font-size: 15px;
color: var(--off-black);
font-weight: 500;
}
/* ===================== PAGINATION ===================== */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid var(--border);
}
.page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
padding: 0 14px;
height: 44px;
border: 1px solid transparent;
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
}
.page-link:hover {
border-color: var(--border);
color: var(--black);
}
.page-link.active {
background: var(--black);
color: #fff;
border-color: var(--black);
}
.page-dots {
color: var(--text-muted);
}
/* ===================== RESPONSIVE ===================== */
@media (width <= 1200px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 1024px) {
.collections-layout {
padding: 60px 40px;
gap: 40px;
}
.collections-sidebar {
width: 220px;
}
}
.filter-toggle {
display: none;
align-items: center;
gap: 10px;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s;
margin-right: 10px;
}
.filter-toggle:hover {
background: var(--black);
color: #fff;
border-color: var(--black);
}
@media (width <= 768px) {
.filter-toggle {
display: flex;
}
.collections-layout {
flex-direction: column;
padding: 40px 20px;
}
.collections-sidebar {
position: fixed;
left: -320px;
top: 0;
bottom: 0;
width: 300px;
background: #fff;
z-index: 300;
padding: 40px;
box-shadow: 20px 0 50px rgb(0 0 0 / 10%);
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
/* Make it block, but hidden by position */
overflow-y: auto;
}
.collections-sidebar.active {
left: 0;
}
/* Sidebar Close Button */
.sidebar-close {
display: block;
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
cursor: pointer;
z-index: 10;
color: var(--black);
}
.filter-group {
border-bottom: 1px solid var(--border);
margin-bottom: 30px;
padding-bottom: 30px;
}
.product-grid {
grid-template-columns: 1fr;
}
}
/* ===================== BRAND PHILOSOPHY ===================== */
.brand-philosophy {
padding: 100px 30px;
background: transparent;
}
.philosophy-container {
}
.brand-philosophy .section-title {
margin-bottom: 24px;
}
.philosophy-title {
margin-bottom: 50px;
}
.philosophy-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
text-align: left;
align-items: center;
}
.philosophy-image img {
width: 100%;
height: auto;
border-radius: 4px;
object-fit: cover;
aspect-ratio: 4/3;
}
.philosophy-text {
font-size: 16px;
line-height: 1.8;
color: var(--text-muted);
font-weight: 300;
}
.philosophy-text strong {
font-weight: 500;
color: var(--accent);
}
/* ===================== SIGNATURE LINE ===================== */
.signature-line-section {
padding: 100px 0;
background: var(--navy);
}
.signature-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
align-items: center;
}
.signature-header .section-title {
margin-bottom: 20px;
line-height: 1.2;
}
.signature-desc {
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
margin-bottom: 40px;
}
.signature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.signature-item {
display: block;
aspect-ratio: 3/4;
overflow: hidden;
border-radius: 4px;
}
.signature-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.signature-item:hover img {
transform: scale(1.08);
}
/* ===================== PROJECTS PREVIEW ===================== */
.projects-preview {
padding: 100px 0;
background: var(--navy-deep);
}
.projects-header {
margin-bottom: 60px;
}
.projects-header .section-title {
margin-bottom: 16px;
}
.projects-desc {
color: var(--text-muted);
font-size: 16px;
}
.projects-action {
margin-top: 50px;
}
.projects-preview .btn-outline {
display: inline-block;
padding: 15px 35px;
background: transparent;
color: var(--black);
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid var(--black);
transition: all 0.3s;
}
.projects-preview .btn-outline:hover {
background: var(--black);
color: var(--navy);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.project-wrap {
position: relative;
aspect-ratio: 4/5;
display: block;
overflow: hidden;
border-radius: 4px;
}
.project-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(0 0 0 / 80%) 0%, transparent 50%);
display: flex;
align-items: flex-end;
padding: 30px;
}
.project-overlay h4 {
color: #fff;
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
transform: translateY(20px);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-wrap:hover img {
transform: scale(1.05);
}
.project-wrap:hover .project-overlay h4 {
transform: translateY(0);
}
/* ===================== WHY CHOOSE US ===================== */
.why-choose-us {
padding: 100px 0;
background: var(--navy-mid);
border-top: 1px solid var(--border);
}
.why-choose-header {
margin-bottom: 50px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
text-align: center;
}
.feature-icon {
font-size: 38px;
color: var(--accent);
margin-bottom: 24px;
}
.feature-box h4 {
font-family: var(--font-display);
font-size: 22px;
color: #1a242f;
margin-bottom: 12px;
}
.feature-box p {
color: #555;
font-size: 16px;
line-height: 1.6;
}
/* Responsive Extra Layouts */
@media (width <= 1024px) {
.signature-container {
grid-template-columns: 1fr;
}
.philosophy-split {
grid-template-columns: 1fr;
}
.signature-header {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 768px) {
.signature-grid,
.projects-grid,
.features-grid {
grid-template-columns: 1fr;
}
.signature-line-section,
.projects-preview,
.why-choose-us {
padding: 60px 20px;
}
}
/* --- projects.css (Purged) --- */
/* ===================== PROJECTS GRID ===================== */
.projects-gallery {
background: var(--bg-light);
}
.gallery-header {
margin-bottom: 60px;
}
.gallery-header .section-tag {
justify-content: center;
}
.pg-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
@media (width <= 1024px) {
.pg-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 768px) {
.pg-grid {
grid-template-columns: 1fr;
}
}
.pg-item {
position: relative;
display: block;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 4px;
text-decoration: none;
background: #000;
}
.pg-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s;
}
.pg-item:hover img {
transform: scale(1.05);
opacity: 0.7;
}
.pg-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 30px;
background: linear-gradient(
to top,
rgb(0 0 0 / 80%) 0%,
rgb(0 0 0 / 20%) 100%
);
opacity: 1;
transition: opacity 0.4s ease;
}
.pg-item:hover .pg-overlay {
opacity: 0;
}
.pg-icon {
font-size: 32px;
color: var(--accent);
margin-bottom: 15px;
transform: translateY(0);
transition: transform 0.4s ease;
}
.pg-item:hover .pg-icon {
transform: translateY(-20px);
}
.pg-title {
color: #fff;
font-size: 24px;
font-family: var(--font-display);
margin-bottom: 8px;
transform: translateY(0);
transition: transform 0.4s ease;
}
.pg-item:hover .pg-title {
transform: translateY(20px);
}
.pg-type {
color: rgb(255 255 255 / 70%);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
transform: translateY(0);
transition: transform 0.4s ease 0.1s;
}
.pg-item:hover .pg-type {
transform: translateY(20px);
}
/* ===================== LIGHTBOX OVERLAY ===================== */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgb(10 15 22 / 98%);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.lightbox.active {
opacity: 1;
visibility: visible;
}
.lightbox-close {
position: absolute;
top: 30px;
right: 40px;
font-size: 30px;
color: #fff;
cursor: pointer;
transition: color 0.3s;
z-index: 10001;
}
.lightbox-close:hover {
color: var(--accent);
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
color: rgb(255 255 255 / 50%);
cursor: pointer;
transition: color 0.3s;
padding: 20px;
z-index: 10001;
}
.lightbox-nav:hover {
color: var(--accent);
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-content-wrapper {
position: relative;
width: 85%;
max-width: 1200px;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#lightbox-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#lightbox-content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 15px 50px rgb(0 0 0 / 50%);
}
#lightbox-content iframe,
#lightbox-content video {
width: 100%;
height: 100%;
border: none;
box-shadow: 0 15px 50px rgb(0 0 0 / 50%);
background: #000;
}
.lightbox-title {
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
text-align: center;
color: #fff;
font-size: 20px;
font-family: var(--font-display);
letter-spacing: 1px;
}
/* --- product-single.css (Purged) --- */
/* ===================== PRODUCT SINGLE PAGE STYLES ===================== */
.product-single-container {
margin: 80px auto;
color: var(--black, #1a242f);
}
.product-top-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
@media (width <= 1200px) {
.product-top-layout {
gap: 40px;
}
}
@media (width <= 991px) {
.product-top-layout {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* --- LEFT SIDE: GALLERY --- */
.product-gallery {
position: sticky;
top: 100px;
height: fit-content;
}
@media (width <= 1024px) {
.product-gallery {
position: relative;
top: 0;
}
}
.main-image-viewport img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.main-image-viewport {
width: 100%;
aspect-ratio: 3/2;
/* Standard architectural ratio */
margin-bottom: 20px;
overflow: hidden;
background: #fdfdfd;
border: 1px solid rgb(0 0 0 / 3%);
cursor: zoom-in;
}
.main-image-viewport:hover img {
transform: scale(1.1);
}
.thumbnails-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.thumb-item {
aspect-ratio: 1/1;
overflow: hidden;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.3s ease;
}
.thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
transition: opacity 0.3s;
}
.thumb-item.active {
border-color: var(--accent);
}
.thumb-item.active img,
.thumb-item:hover img {
opacity: 1;
}
/* Header Handling */
.product-main-header {
text-align: left;
margin-bottom: 40px;
}
.product-main-header h1 {
font-size: clamp(32px, 3.5vw, 48px);
font-family: var(--font-display);
color: var(--black);
line-height: 1.2;
}
@media (width <= 991px) {
.product-main-header {
text-align: center;
margin-bottom: 30px;
}
.product-main-header h1 {
font-size: 28px;
}
}
/* --- RIGHT SIDE: INFO --- */
.product-summary h1 {
font-size: clamp(28px, 3vw, 42px);
font-family: var(--font-display);
line-height: 1.2;
margin-bottom: 20px;
color: var(--black);
}
@media (width <= 991px) {
.product-summary h1 {
display: none;
}
}
.product-price-block {
margin-bottom: 30px;
}
.price-starting {
font-family: var(--font-display);
font-size: 24px;
color: var(--accent);
}
.bulk-subtle {
font-size: 14px;
color: var(--text-dim);
margin-top: 5px;
display: block;
}
.moq-info {
font-size: 14px;
color: var(--text-muted);
margin: 15px 0 30px;
display: flex;
align-items: center;
gap: 8px;
}
/* Attribute Display (CLEAN LIST) */
.product-attributes-locked {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px 40px;
padding: 30px 0;
border-top: 1px solid rgb(0 0 0 / 5%);
border-bottom: 1px solid rgb(0 0 0 / 5%);
margin: 30px 0;
}
.attr-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
padding: 5px 0;
}
.attr-label {
color: var(--text-dim);
font-weight: 500;
}
.attr-value {
color: var(--black, #1a242f);
font-weight: 400;
}
/* Call to Action */
.product-action-btns {
display: flex;
gap: 15px;
margin-top: 40px;
}
.product-action-btns .btn-dark,
.product-action-btns .btn-outline {
flex: 1;
padding: 18px;
text-align: center;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
font-weight: 500;
transition: all 0.3s ease;
}
.product-action-btns .btn-dark {
background: var(--black);
color: #fff;
border: 1px solid var(--black);
}
.product-action-btns .btn-dark:hover {
background: transparent;
color: var(--black);
}
.product-action-btns .btn-outline {
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
}
.product-action-btns .btn-outline:hover {
background: var(--accent);
color: #fff;
}
.product-action-btns .btn-outline i {
margin-right: 8px;
}
/* --- PRODUCT TABS --- */
.product-tabs-section {
margin-top: 120px;
/* More space from product info */
margin-bottom: 40px;
border-top: 1px solid var(--border);
}
.tabs-nav {
display: flex;
justify-content: center;
gap: 20px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
/* Prevent overlap by allowing wrap */
}
.tab-btn {
background: none;
border: none;
padding: 25px 0;
font-weight: 500;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
position: relative;
color: var(--text-dim);
transition: color 0.3s;
}
.tab-btn.active {
color: var(--black);
}
.tab-btn.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent);
}
.tab-content-panel {
display: none;
padding: 80px 0;
max-width: 1200px;
/* Wider for better text flow */
margin: 0 auto;
}
.tab-content-panel.active {
display: block;
}
/* Tab 1: Description */
.tab-desc-inner p {
margin-bottom: 25px;
}
.tab-desc-inner p:last-child {
margin-bottom: 0;
}
.spec-label {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 13px;
color: var(--text-dim);
font-weight: 500;
}
/* Tab 2: Technical Specs */
.tech-specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 40px;
}
.spec-line {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgb(0 0 0 / 3%);
font-size: 15px;
}
/* Tab 3: Applications Icons */
.apps-icon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
text-align: center;
}
.app-icon-item i {
font-size: 28px;
color: var(--accent);
margin-bottom: 15px;
}
.app-icon-item span {
display: block;
font-weight: 500;
}
/* Tab 4: Related Products */
.related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.related-grid .product-image-wrapper {
aspect-ratio: 1/1;
/* Force square for consistency */
overflow: hidden;
background: var(--navy-mid);
margin-bottom: 20px;
}
.related-grid .product-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.related-grid .product-card:hover img {
transform: scale(1.1);
}
.related-grid .product-title {
font-size: 18px;
margin-bottom: 5px;
}
/* Standard buttons and section headers are now in style.css and components.css */
@media (width <= 991px) {
.product-gallery {
position: relative;
top: 0;
margin-bottom: 30px;
}
.tabs-nav {
flex-direction: column;
gap: 0;
align-items: center;
border-bottom: none;
}
.tab-btn {
width: 100%;
padding: 18px 0;
border-bottom: 1px solid var(--border);
text-align: center;
}
.tab-btn.active::after {
display: none;
}
.tab-btn.active {
background: rgb(var(--accent-rgb, 197, 168, 128), 0.08);
color: var(--accent);
}
.tech-specs-grid,
.related-grid,
.apps-icon-grid,
.product-attributes-locked {
grid-template-columns: 1fr;
}
.product-action-btns {
flex-direction: column;
gap: 20px;
}
}
@media (width <= 576px) {
.product-single-container {
padding: 0 20px;
}
.product-summary h1 {
font-size: 24px;
}
}
/* --- inspiration.css (Purged) --- */
/* ===================== BLOG LAYOUT ===================== */
.blog-layout {
display: grid;
grid-template-columns: 2.2fr 1fr;
gap: 60px;
padding: 100px 0;
align-items: flex-start;
}
@media (width <= 1024px) {
.blog-layout {
grid-template-columns: 1fr;
gap: 80px;
}
}
@media (width <= 768px) {
.blog-layout {
padding: 60px 20px;
}
}
/* ===================== BLOG POSTS (LIST) ===================== */
.blog-list {
display: flex;
flex-direction: column;
gap: 60px;
}
.blog-card {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 40px;
align-items: center;
padding-bottom: 60px;
border-bottom: 1px solid var(--border);
}
.blog-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
@media (width <= 768px) {
.blog-card {
grid-template-columns: 1fr;
gap: 30px;
}
}
.blog-img-wrapper {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
border-radius: 4px;
text-decoration: none;
display: block;
}
.blog-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blog-card:hover .blog-img-wrapper img {
transform: scale(1.05);
}
.blog-meta {
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
font-family: var(--font-body);
}
.blog-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 400;
line-height: 1.3;
color: var(--black);
margin-bottom: 18px;
text-decoration: none;
display: block;
transition: color 0.3s;
}
.blog-title:hover {
color: var(--accent);
}
.blog-excerpt {
font-size: 15px;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 24px;
font-weight: 300;
}
.blog-readmore {
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--black);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.3s;
}
.blog-readmore i {
font-size: 12px;
transition: transform 0.3s;
}
.blog-readmore:hover {
color: var(--accent);
}
.blog-readmore:hover i {
transform: translateX(5px);
}
/* ===================== SIDEBAR ===================== */
.blog-sidebar {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 50px;
}
.widget-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
color: var(--black);
margin-bottom: 24px;
padding-bottom: 15px;
border-bottom: 1px solid rgb(0 0 0 / 5%);
}
/* Search Widget */
.search-form {
position: relative;
display: flex;
}
.search-input {
width: 100%;
padding: 16px 50px 16px 20px;
background: #f7f7f7;
border: 1px solid transparent;
border-radius: 4px;
font-size: 14px;
font-family: var(--font-body);
transition: border-color 0.3s;
outline: none;
}
.search-input:focus {
border-color: var(--accent);
}
.search-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--black);
font-size: 16px;
cursor: pointer;
padding: 10px;
transition: color 0.3s;
}
.search-btn:hover {
color: var(--accent);
}
/* Categories Widget */
.widget-categories ul {
list-style: none;
padding: 0;
margin: 0;
}
.widget-categories li {
border-bottom: 1px solid rgb(0 0 0 / 5%);
}
.widget-categories li:last-child {
border-bottom: none;
}
.widget-categories a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
font-weight: 300;
transition: color 0.3s;
}
.widget-categories a .count {
font-size: 13px;
color: var(--text-dim);
}
.widget-categories a:hover {
color: var(--accent);
}
/* Recent Posts Widget */
.recent-posts-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.recent-post-item {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
}
.recent-post-img {
width: 75px;
height: 75px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
}
.recent-post-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.recent-post-item:hover .recent-post-img img {
transform: scale(1.1);
}
.recent-post-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.recent-post-date {
font-size: 10px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-dim);
}
.recent-post-title {
font-family: var(--font-display);
font-size: 16px;
line-height: 1.3;
color: var(--black);
transition: color 0.3s;
}
.recent-post-item:hover .recent-post-title {
color: var(--accent);
}
/* Tags Widget */
.widget-tags-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag-link {
display: block;
padding: 8px 18px;
border: 1px solid rgb(0 0 0 / 10%);
border-radius: 40px;
font-size: 13px;
color: var(--text-muted);
text-decoration: none;
transition: all 0.3s;
font-weight: 300;
}
.tag-link:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* --- legal.css (Purged) --- */
/* ===================== LEGAL PAGES ===================== */
.legal-container {
max-width: 900px;
margin: 80px auto;
padding: 0 20px;
}
.legal-content {
background: #fff;
padding: 60px;
border: 1px solid rgb(0 0 0 / 5%);
box-shadow: 0 15px 50px rgb(0 0 0 / 2%);
}
.legal-content h2 {
font-family: var(--font-display);
font-size: 24px;
color: var(--black);
margin-top: 40px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgb(0 0 0 / 5%);
}
.legal-content h2:first-child {
margin-top: 0;
}
.legal-content h3 {
font-size: 18px;
color: var(--black);
margin-top: 25px;
margin-bottom: 10px;
}
.legal-content p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 20px;
}
.legal-content ul {
list-style-type: disc;
padding-left: 20px;
margin-bottom: 20px;
}
.legal-content ul li {
font-size: 15px;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 8px;
}
@media (width <= 768px) {
.legal-content {
padding: 40px 20px;
}
}
/* --- request-quote.css (Purged) --- */
/* ===================== REQUEST QUOTE PAGE STYLES ===================== */
/* --- WHY REQUEST QUOTE --- */
.quote-benefits {
background: #fff;
padding: 80px 20px;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.benefit-item {
text-align: center;
padding: 30px 20px;
background: #fdfdfd;
border: 1px solid rgb(0 0 0 / 5%);
transition: transform 0.3s;
}
.benefit-item:hover {
transform: translateY(-5px);
}
.benefit-icon {
font-size: 32px;
color: var(--accent);
margin-bottom: 20px;
}
.benefit-item h3 {
font-size: 18px;
margin-bottom: 10px;
color: var(--black);
}
@media (width <= 992px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 576px) {
.benefits-grid {
grid-template-columns: 1fr;
}
}
/* --- QUOTE FORM SECTION --- */
.quote-section {
background: #f8f8f8;
padding: 80px 20px;
}
.quote-container {
}
.quote-form-wrapper {
background: #fff;
padding: 50px;
box-shadow: 0 15px 50px rgb(0 0 0 / 3%);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group-full {
grid-column: 1 / -1;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dim);
margin-bottom: 8px;
}
.form-control {
width: 100%;
padding: 15px 20px;
background: #fdfdfd;
border: 1px solid var(--border);
font-family: var(--font-body);
font-size: 15px;
color: var(--black);
transition: all 0.3s;
outline: none;
}
.form-control:focus {
border-color: var(--accent);
background: #fff;
}
select.form-control {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 20px center;
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
/* Checkboxes */
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-top: 5px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--text-dim);
cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
cursor: pointer;
}
/* File Upload */
.file-upload-wrapper {
border: 1px dashed var(--border);
padding: 30px;
text-align: center;
background: #fafafa;
cursor: pointer;
transition: background 0.3s;
}
.file-upload-wrapper:hover {
background: #f1f1f1;
}
.file-upload-wrapper input[type="file"] {
display: none;
}
.file-upload-icon {
font-size: 24px;
color: var(--accent);
margin-bottom: 10px;
}
/* ReCaptcha Placeholder */
.recaptcha-placeholder {
background: #fdfdfd;
border: 1px solid #dcdcdc;
padding: 15px 20px;
display: flex;
align-items: center;
gap: 15px;
color: var(--text-dim);
font-size: 14px;
}
@media (width <= 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.quote-form-wrapper {
padding: 30px 20px;
}
}
/* --- TRUST INDICATORS (BELOW FORM) --- */
.trust-indicators {
background: #fff;
padding: 60px 20px;
}
.trust-row {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 1000px;
margin: 0 auto;
gap: 20px;
}
.indicator-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
color: var(--black);
font-weight: 500;
}
.indicator-item i {
color: var(--accent);
font-size: 20px;
}
@media (width <= 768px) {
.trust-row {
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* End of styles */
/* --- blog-single.css (Purged) --- */
/* ===================== BLOG SINGLE ARTICLE ===================== */
.blog-single-article {
display: flex;
flex-direction: column;
gap: 20px;
}
.single-feature-img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 4px;
margin-bottom: 20px;
}
.single-meta {
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
font-family: var(--font-body);
}
.single-title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 400;
line-height: 1.25;
color: var(--black);
margin-top: 0;
margin-bottom: 10px;
}
.single-content p {
font-size: 16px;
color: var(--text-dim);
line-height: 1.8;
margin-bottom: 24px;
font-weight: 300;
}
.single-content h2 {
font-size: 28px;
font-family: var(--font-display);
color: var(--black);
margin-top: 40px;
margin-bottom: 20px;
font-weight: 400;
}
.single-content h3 {
font-size: 22px;
font-family: var(--font-display);
color: var(--black);
margin-top: 30px;
margin-bottom: 15px;
font-weight: 400;
}
.single-content blockquote {
font-size: 22px;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--accent);
padding: 30px 40px;
border-left: 2px solid var(--accent);
background: rgb(0 0 0 / 2%);
margin: 40px 0;
line-height: 1.5;
}
/* Share & Tags Row */
.single-tags-share {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgb(0 0 0 / 5%);
}
.single-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.single-share {
display: flex;
align-items: center;
gap: 15px;
font-size: 14px;
font-weight: 400;
color: var(--black);
}
.single-share a {
color: var(--black);
text-decoration: none;
font-size: 16px;
transition: color 0.3s;
}
.single-share a:hover {
color: var(--accent);
}
@media (width <= 768px) {
.single-title {
font-size: 28px;
}
.single-tags-share {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
}