/* --- Font Import & Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
:root {
--daikin-blue: #0097d3;
--daikin-dark-navy: #002d72;
--daikin-light-blue: #A0D2F4;
--daikin-deep-blue: #002244;
--daikin-blue-transparent: rgba(0, 151, 211, 0.05);
--border-color: #D1D5DB;
--flamingo-orange: #f26522;
--flamingo-orange-dark: #d85a1e;
--note-bg-color: #002C56;
--slate-300: #CBD5E1;
--slate-800: #1e293b;
--slate-950: #020617; /* Hex for slate-950 */
--color-red-600: #dc2626;
--color-red-700: #b91c1c;
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--gray-950-opaque: rgba(2, 6, 23, 0.9);
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-600: #2563EB;
--blue-700: #1d4ed8;
--blue-800: #1e40af;
--yellow-50: #fefce8;
--yellow-100: #fef9c3;
--yellow-200: #fde68a;
--yellow-300: #fcd34d;
--yellow-600: #ca8a04;
--yellow-700: #a16207;
--yellow-800: #854d0e;
--green-100: #d1fae5;
--green-700: #047857;
--orange-100: #ffedd5;
--orange-700: #c2410c;
--red-100: #fee2e2;
--red-500: #EF4444;
--red-700: #b91c1c;
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--opacity-85: 0.85;
--flamingo: #F14F27;
--green-blue: linear-gradient(129deg, rgba(51, 255, 108, .7) -5.06%, #0097E0 91.08%);
--dark-blue: #0f172a;
}
/* Modern CSS Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0;
background-color: #f9fafb;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
button {
background: none;
border: none;
cursor: pointer;
}
/* Remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* style.css */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
/* --- Keyframe Animations --- */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
50% {
opacity: .5;
}
}
/* Text Colors */
.text-white, .text-white :is(h1, h2, h3, h4, h5, h6) {
color: var(--white) !important;
}
.text-dark, .text-dark :is(h1, h2, h3, h4, h5, h6) {
color: var(--gray-900) !important;
}
.text-g-800, .text-g-800 :is(h1, h2, h3, h4, h5, h6) {
color: var(--gray-800) !important;
}
.text-gray-dark, .text-gray-dark :is(h1, h2, h3, h4, h5, h6) {
color: var(--gray-700) !important;
}
.text-gray-medium, .text-gray-medium :is(h1, h2, h3, h4, h5, h6) {
color: var(--gray-600) !important;
}
.text-gray-light, .text-gray-light :is(h1, h2, h3, h4, h5, h6) {
color: var(--gray-300) !important;
}
/* Used in showroom card description */
.text-blue {
color: var(--daikin-blue) !important;
}
.text-light-blue {
color: var(--daikin-light-blue) !important;
}
.text-dark-navy {
color: var(--daikin-dark-navy) !important;
}
.text-red {
color: var(--color-red-600) !important;
}
/* Font Weights */
.font-normal {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
/* Text Alignment */
.text-align-center {
text-align: center;
}
/* Flex Utilities */
.flex-container {
display: flex;
align-items: center;
}
.flex-col {
flex-direction: column;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.align-center {
align-items: center;
}
.align-start {
align-items: flex-start;
}
.flex-shrink-zero {
flex-shrink: 0;
}
.flex-grow-one {
flex-grow: 1;
}
/* Grid Layouts */
.grid-2-col {
display: grid;
grid-template-columns: 1fr;
gap: 2rem; /* gap-8 */
}
.grid-3-col {
display: grid;
grid-template-columns: repeat(1, 100%);
gap: 2rem;
}
.grid-4-col {
display: grid;
grid-template-columns: repeat(1, 100%);
gap: 2rem;
}
.grid-fit-280 {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (min-width: 768px) {
.grid-2-col {
grid-template-columns: repeat(2, 1fr);
}
.grid-3-col {
grid-template-columns: repeat(3, 1fr);
}
.grid-4-col {
grid-template-columns: repeat(4, 1fr);
}
}
.text-center.mt-12 {
text-align: center;
}
.mt-12 {
margin-top: 3rem;
}
.grid-3-350 {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
/* Icon Styles (using mask-image with data URIs) */
.icon {
display: inline-block;
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
}
/* Default icon size (adjust as needed for specific uses) */
.icon {
width: 1rem; /* Base size, like h-4 w-4 */
height: 1rem;
}
.icon.icon-large {
width: 3rem; /* h-12 w-12 */
height: 3rem;
}
.icon.icon-super-large {
width: 4rem; /* h-16 w-16 */
height: 4rem;
}
/* Specific icon definitions */
.icon-phone {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-mail {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-map-pin {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-calendar {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-download {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-clock {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-search {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-users {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-briefcase {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-award {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-external-link {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-check {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-chevron-down {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-arrow-right {
mask-image: url("data:image/svg+xml;utf8,");
}
.icon-offer {
mask-image: url('data:image/svg+xml;utf8,')
}
.icon-video {
mask-image: url('data:image/svg+xml,')
}
.icon-box {
mask-image: url('data:image/svg+xml,')
}
.icon-wrench {
mask-image: url('data:image/svg+xml,')
}
.icon-droplets {
mask-image: url('data:image/svg+xml,')
}
.icon-office-phone {
mask-image: url('data:image/svg+xml,')
}
.icon-bulb {
mask-image: url('data:image/svg+xml,')
}
.icon.grey-bg {
background: var(--gray-400);
}
.icon.blue-bg {
background: var(--daikin-blue);
}
.icon.white-bg {
background: var(--white);
}
.icon.dark-bg {
background: var(--gray-900);
}
.light-blue-bg {
background: var(--daikin-light-blue);
}
/* Buttons */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease-in-out;
border-radius: 0.375rem; /* rounded-md */
padding: 0.75rem 1rem; /* default padding */
font-weight: 500;
font-family: 'Poppins', sans-serif;
white-space: nowrap;
outline: none;
}
.button-primary {
background-color: var(--daikin-blue);
color: var(--white);
}
.button-primary:hover {
background-color: var(--daikin-dark-navy);
box-shadow: var(--shadow-md); /* subtle shadow on hover */
}
.button-white {
background-color: var(--white);
color: var(--daikin-blue);
}
.button-white:hover {
background-color: var(--daikin-dark-navy);
color: var(--white);
box-shadow: var(--shadow-md); /* subtle shadow on hover */
}
.button-danger {
background-color: var(--color-red-600);
color: var(--white);
border: 2px solid var(--color-red-600);
padding: 0.75rem 1.5rem; /* py-3 px-6 */
font-size: 1.125rem; /* text-lg */
border-radius: 0.5rem; /* rounded-lg */
}
.button-danger:hover {
background-color: var(--color-red-700);
box-shadow: var(--shadow-lg);
}
.button-outline {
background-color: transparent;
border: 1px solid var(--daikin-blue);
color: var(--daikin-blue);
}
.button-outline:hover {
background-color: var(--daikin-blue);
color: var(--white);
}
.button-icon {
width: 1rem; /* h-4 w-4 */
height: 1rem;
margin-right: 0.5rem; /* mr-2 */
}
.button-danger .button-icon {
width: 1.25rem; /* h-5 w-5 */
height: 1.25rem;
}
.flamingo-button {
/* Layout and positioning */
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap; /* Prevents text from wrapping */
gap: 0.5rem; /* Equivalent to gap-2, if you had an icon */
/* Sizing and spacing */
height: 2.5rem; /* Equivalent to h-10, though py-3 and text-lg will override this for height */
padding: 0.75rem 2rem; /* Equivalent to px-8 py-3 */
/* Text styling */
font-size: 1.125rem; /* Equivalent to text-lg */
font-weight: 500; /* Equivalent to font-medium */
color: #002D58; /* A representative value for 'daikin-deep-blue'. Adjust if your specific color differs. */
/* Border and shape */
border-radius: 0.75rem; /* Equivalent to rounded-xl */
border: none; /* Remove default button border */
cursor: pointer;
/* Gradient background */
background-image: linear-gradient(to right, #FF896B, var(--flamingo) ); /* from-[#FF896B] to-[#F14F27] */
/* Transitions for smooth hover effects */
transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
/* Focus outline (for accessibility) */
outline: 2px solid transparent; /* focus-visible:outline-none */
outline-offset: 2px; /* ring-offset-2 */
box-shadow: 0 0 0 0px var(--ring-color, transparent), 0 0 0 0px var(--ring-offset-color, transparent); /* focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 */
}
/* Hover state */
.flamingo-button:hover {
background-image: linear-gradient(to right, #FF7A5A, #E63D1F); /* hover:from-[#FF7A5A] hover:to-[#E63D1F] */
}
.g-gradient-button {
/* Layout and positioning */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem; /* Equivalent to gap-2 */
white-space: nowrap; /* Prevents text from wrapping */
/* Sizing and spacing */
height: 2.75rem; /* Equivalent to h-11 */
padding: 1rem 2rem; /* Equivalent to px-8 py-4 */
/* Text styling */
font-size: 1.125rem; /* Equivalent to text-lg */
font-weight: 500; /* Equivalent to font-medium */
color: #fff; /* Equivalent to text-white */
/* Background gradient */
background-image: var(--green-blue); /* from-[#33FF6C] to-[#318ADD] */
/*opacity: 0.7;*/ /* Equivalent to opacity-70 */
/* Border and shape */
border: 0; /* Equivalent to border-0 */
border-radius: 0.375rem; /* Equivalent to rounded-md */
cursor: pointer;
/* Transitions for smooth effects */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
/* Focus outline (for accessibility) */
outline: 2px solid transparent; /* focus-visible:outline-none */
outline-offset: 2px; /* focus-visible:ring-offset-2 */
box-shadow: 0 0 0 0px var(--ring-color, transparent), 0 0 0 0px var(--ring-offset-color, transparent); /* focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 */
}
/* Hover state for the button */
.g-gradient-button:hover {
/* Hover gradient with opacity */
background-image: linear-gradient(to right, rgba(51, 255, 108, 0.8), rgba(49, 138, 221, 0.8)); /* hover:from-[#33FF6C]/80 hover:to-[#318ADD]/80 */
/* Hover shadow effect */
box-shadow: 0 0 20px rgba(51, 255, 108, 0.3); /* hover:shadow-[0_0_20px_rgba(51,255,108,0.3)] */
}
/* Styles for the arrow icon inside the button */
.g-gradient-button svg {
/* Transition for the transform effect */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-transform */
}
/* Group-hover effect on the icon (when the button is hovered) */
.g-gradient-button:hover svg {
transform: translateX(0.25rem); /* Equivalent to group-hover:translate-x-1 */
}
.full-width-button {
width: 100%;
}
.large-button {
padding: 0.75rem 1.5rem; /* py-3 */
font-size: 1.125rem; /* text-lg */
border-radius: 0.5rem; /* rounded-lg */
font-weight: 600;
}
.full-width-link { /* For anchor tags acting as buttons */
display: block;
text-align: center;
}
.text-center:has(> .button) {
text-align: center;
margin: 2rem 0 0 0;
}
.button-group-container {
display: flex;
flex-direction: column; /* Equivalent to flex-col (default for mobile) */
align-items: center; /* Equivalent to items-center */
justify-content: center; /* Equivalent to justify-center */
gap: 1rem; /* Equivalent to gap-4 (4 * 0.25rem = 1rem) */
margin-top: 2rem;
}
@media (min-width: 640px) { /* sm breakpoint */
.button-group-container {
flex-direction: row; /* Equivalent to sm:flex-row */
}
}
.styled-button,
.styled-button-link .styled-button { /* Apply styles to both button types */
/* General button styling */
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap; /* Prevents text from wrapping */
/* Sizing and spacing */
padding: 0.75rem 2rem; /* Equivalent to px-8 py-3 */
/* Text styling */
font-size: 0.875rem; /* Equivalent to text-sm */
font-weight: 600; /* Equivalent to font-semibold */
color: #fff; /* Equivalent to text-white */
/* Background and border */
background-color: transparent; /* Equivalent to bg-transparent */
border: 1px solid rgba(255, 255, 255, 0.3); /* Equivalent to border border-white/30 */
border-radius: 0.375rem; /* Equivalent to rounded-md (assuming Button component default) */
cursor: pointer;
/* Transitions for hover effects */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
/* Resetting default button styles */
outline: none;
text-decoration: none; /* For the tag acting as a button */
}
.styled-button:hover,
.styled-button-link .styled-button:hover {
background-color: rgba(255, 255, 255, 0.1); /* Equivalent to hover:bg-white/10 */
backdrop-filter: blur(4px); /* Equivalent to hover:backdrop-blur-md */
}
/* Desktop Floating Tabs */
.desktop-floating-tabs-wrapper {
display: none; /* hidden */
position: sticky;
top: 9rem; /* top-36 */
z-index: 20;
padding-top: 0.75rem; /* py-3 */
padding-bottom: 0.75rem; /* py-3 */
transition: opacity 0.2s ease-in-out;
opacity: 1; /* opacity-100 */
pointer-events: auto; /* pointer-events-auto */
text-align: center; /* content center */
}
@media (min-width: 768px) {
.desktop-floating-tabs-wrapper {
display: block;
}
/* md:block */
}
.desktop-floating-tabs.hidden {
opacity: 0;
pointer-events: none;
}
.floating-tabs-container {
display: inline-flex;
align-items: center;
gap: 0.75rem; /* gap-3 */
background-color: rgba(255, 255, 255, 0.95); /* bg-white/95 */
backdrop-filter: blur(4px); /* backdrop-blur-sm */
border-radius: 9999px; /* rounded-full */
box-shadow: var(--shadow-lg);
border: 1px solid var(--gray-200);
padding: 0.75rem 1rem; /* px-4 py-3 */
margin: 0 auto; /* To center */
}
.floating-tab-button {
display: flex;
align-items: center;
gap: 0.5rem; /* space-x-2 */
padding: 0.5rem 1.25rem; /* px-5 py-2 */
border-radius: 9999px; /* rounded-full */
transition: all 0.2s ease-in-out;
font-weight: 500;
white-space: nowrap;
border: none;
background: none;
cursor: pointer;
color: var(--gray-700);
outline: none; /* Remove default focus outline */
}
.floating-tab-button .icon {
background: var(--gray-700)
}
.floating-tab-button:focus {
box-shadow: 0 0 0 2px var(--daikin-blue); /* focus:ring-2 focus:ring-daikin-blue */
outline-offset: 2px; /* focus:ring-offset-2 */
}
.floating-tab-button:hover {
background-color: var(--gray-100);
}
.floating-tab-button.active {
background-color: var(--daikin-blue);
color: var(--white);
box-shadow: var(--shadow-md);
}
.floating-tab-button.active .icon {
background: var(--white)
}
.floating-tab-button .tab-icon {
width: 1rem; /* h-4 w-4 */
height: 1rem;
}
.floating-tab-button .tab-label {
font-size: 0.875rem; /* text-sm */
}
/* HOME PAGE */
.-sc-image {
background: var(--sf-background-image);
background-size: var(--sf-background-size);
background-position: center;
/*background-position-y: -3px;*/
}
.section-block.pdLg {
padding-block: 5rem;
}
.text-section {
text-align: center;
}
.text-section .button {
margin: 2rem;
}
.section-block.bg-G-50 {
background: var(--gray-50)
}
.section-block.bg-white {
background: var(--white)
}
.section-block.bg-dark {
background: var(--dark-blue)
}
.section-block.bg-blue {
background: var(--daikin-blue)
}
.bg-blue-gd.has-overlay {
position: relative;
}
.bg-blue-gd.has-overlay:before {
content: '';
inset: 0;
position: absolute;
background: #ffffffe6;
}
.bg-blue-gd.has-overlay .container {
position: relative;
}
.darkPintiles .values-card {
position: relative;
/* background-color: rgba(0, 0, 0, 0.2); */
background-color: rgba(0, 0, 0, 0.2); /* bg-black/20 */
backdrop-filter: blur(12px); /* backdrop-blur-md */
border-radius: 1rem; /* rounded-2xl */
padding: 1.5rem; /* p-6 */
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 */
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1); /* border border-white/10 */
overflow: hidden; /* Important for the glass overlay effect */
}
.darkPintiles .values-card-title {
color: var(--white);
font-size: 1.125rem; /* text-lg */
font-weight: 600; /* font-semibold */
/* text-white */
margin-bottom: 0.5rem; /* mb-2 */
text-shadow: 0px 0px 1px var(--black);
}
/*.darkPintiles .values-card:before {
content: '';
position: absolute;
inset: 0;
border-radius: 1rem;*/ /* rounded-2xl */
/*pointer-events: none;*/ /* Allows clicks to pass through to the card */
/* This is a CSS gradient equivalent to bg-gradient-to-br from-white/5 to-transparent */
/*background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}*/
/* NEW DESIGN ADDITION */
.darkPintiles .values-card:before {
content: '';
position: absolute;
/* -inset-1 means top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem; */
inset: -0.25rem;
border-radius: 1rem; /* rounded-2xl */
opacity: 0; /* opacity-0 */
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transition-opacity duration-300 */
pointer-events: none; /* pointer-events-none */
background: var(--green-blue); /* bg-gradient-to-r from-[#33FF6C] to-[#318ADD] */
filter: blur(0px); /* blur-md (Tailwind's blur-md is 12px) */
z-index: -1; /* Place behind the main card content */
}
.darkPintiles .values-card:hover:before {
opacity: 1; /* group-hover:opacity-20 */
}
.darkPintiles .values-card:hover .values-icon-wrapper {
transform: scale(1.1);
transform-origin: bottom;
background: var(--white);
transition: transform 0.3s linear;
}
.darkPintiles .values-card:hover .values-icon-wrapper img {
filter: brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(483%) hue-rotate(166deg) brightness(96%) contrast(91%);
transform-origin: bottom;
}
/* NEW DESIGN ADDITION END */
.darkPintiles + .section-header-wrap {
margin-top: 8rem;
}
.roots-block .values-icon-wrapper {
width: 100%;
max-width: 125px;
height: 65px;
border-radius: 0;
background: transparent;
}
.roots-block .values-icon-wrapper img {
width: 100%;
height: 100%;
}
/* HOME PAGE END */
/* ABOUT US PAGE */
.expertise-section {
padding-top: 5rem;
padding-bottom: 5rem;
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.header-text {
text-align: center;
margin-bottom: 4rem;
}
.main-heading h2 {
font-size: 2.25rem;
font-weight: 700;
color: var(--daikin-dark-navy);
margin-bottom: 1rem;
}
.sub-heading {
font-size: 1.25rem;
color: var(--gray-600);
max-width: 56rem; /* max-w-4xl */
margin-left: auto;
margin-right: auto;
font-weight: 500;
}
/* --- Card & Glassmorphism --- */
.card {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
/* --- Desktop Tabs --- */
.tabs-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
margin-bottom: 3rem;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 0.5rem;
border-radius: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.tab-trigger {
border: 1px solid transparent;
background-color: transparent;
font-size: 0.875rem;
font-weight: 600;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
white-space: normal;
transition: all 0.2s ease-in-out;
cursor: pointer;
color: var(--gray-700);
}
.tab-trigger:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.tab-trigger.active {
background-color: rgba(255, 255, 255, 0.3);
color: var(--daikin-blue);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
border-color: rgba(0, 151, 211, 0.5);
}
.tab-content {
display: none;
animation: fadeInTab 0.4s;
}
.tab-content.active {
display: block;
}
@keyframes fadeInTab {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content-grid {
display: grid;
gap: 3rem;
align-items: center;
}
.content-grid .text-content {
order: 2;
}
.content-grid .image-content {
order: 1;
}
.expertise-section .content-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--daikin-dark-navy);
margin-bottom: 1.5rem;
}
.expertise-section .content-paragraph {
font-size: 1.125rem;
color: var(--gray-700);
line-height: 1.625;
}
.expertise-section .content-image {
width: 100%;
height: 20rem; /* h-80 */
object-fit: cover;
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
/* --- Mobile Accordion --- */
.accordion-item {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
overflow: hidden;
border: none;
margin-bottom: 0.5rem;
}
.accordion-item:last-child {
margin-bottom: 0;
}
.accordion-trigger {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
font-size: 1rem;
color: var(--daikin-dark-navy);
background: none;
border: none;
cursor: pointer;
}
.accordion-trigger .icon {
transition: transform 0.2s ease;
}
.accordion-item.open .accordion-trigger .icon {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.accordion-content-inner {
padding: 0 1rem 1rem 1rem;
}
.accordion-content-inner .content-image {
height: 8rem; /* reduced from 12rem */
margin-bottom: 0.5rem;
}
/* DEALER FUNDS */
.business-tag {
display: table;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
background-color: var(--daikin-blue);
color: #fff;
margin: 0 auto 1rem auto;
text-align: center;
}
/* DEALER FUNDS END */
/* --- Responsive Design --- */
@media (min-width: 768px) { /* Corresponds to Tailwind's 'md' breakpoint */
.accordion-container {
display: none;
}
}
@media (max-width: 767px) {
.tabs-container {
display: none;
}
.expertise-section {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.header-text {
margin-bottom: 1.25rem;
}
.main-heading h2 {
font-size: 1.15rem;
margin-bottom: 0.25rem;
}
.sub-heading {
font-size: 0.95rem;
}
.card {
padding: 0.75rem;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-content-inner {
padding: 0 0.75rem 0.75rem 0.75rem;
}
.accordion-content-inner .content-image {
height: 7rem;
}
}
@media (min-width: 1024px) { /* lg */
.content-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-grid .text-content {
order: 1;
}
.content-grid .image-content {
order: 2;
}
}
@media (min-width: 640px) { /* sm */
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.main-heading h2 {
font-size: 3rem;
}
}
/* --- Values Section --- */
.values-section {
padding-top: 5rem;
padding-bottom: 5rem;
background-color: var(--gray-50);
}
.values-container {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.values-header {
text-align: center;
margin-bottom: 4rem;
}
.values-eyebrow-wrapper {
display: inline-block;
margin-bottom: 1rem;
}
.values-eyebrow {
color: var(--daikin-blue);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.values-main-heading h2 {
font-size: 1.875rem;
font-weight: 600;
color: var(--daikin-dark-navy);
margin-bottom: 1.5rem;
}
.values-sub-heading {
font-size: 1.25rem;
color: var(--gray-600);
max-width: 48rem;
margin-left: auto;
margin-right: auto;
}
/* --- Responsive Styles --- */
@media (min-width: 640px) {
.values-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.values-main-heading h2 {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.values-container {
padding-left: 2rem;
padding-right: 2rem;
}
.values-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 767px) {
/* Hero Section */
.page-hero-section {
min-height: 60vh;
padding-top: 9rem;
}
.page-hero-eyebrow-wrapper {
margin-bottom: 1rem;
}
.page-hero-eyebrow {
padding: 0.5rem 1.25rem;
font-size: 0.75rem;
}
.page-hero-heading {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.page-hero-subheading {
font-size: 1.125rem;
margin-bottom: 1rem;
line-height: 1.4;
}
.page-hero-paragraph {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
/* STRONGER TOGETHER Section */
.expertise-section {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.header-text {
margin-bottom: 1.25rem;
}
.main-heading {
font-size: 1.15rem;
margin-bottom: 0.25rem;
}
.sub-heading {
font-size: 0.95rem;
}
.card {
padding: 0.75rem;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-content-inner {
padding: 0 0.75rem 0.75rem 0.75rem;
}
.accordion-content-inner .content-image {
height: 7rem;
}
/* Perfect Air Section */
.perfect-air-section {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.perfect-air-heading {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.perfect-air-paragraph {
font-size: 0.95rem;
line-height: 1.5;
}
.perfect-air-content-container {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Values Section */
.values-section {
padding-top: 2rem;
padding-bottom: 2rem;
}
.values-header {
margin-bottom: 1.5rem;
}
.values-main-heading {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.values-sub-heading {
font-size: 0.95rem;
}
.values-grid {
gap: 1rem;
}
.values-card {
padding: 1rem;
}
.values-icon-wrapper {
width: 2.5rem;
height: 2.5rem;
}
.values-card-title {
font-size: 1rem;
}
.values-card-text {
font-size: 0.95rem;
}
/* Vision Section */
.vision-section {
padding-top: 2rem;
padding-bottom: 2rem;
}
.vision-header {
margin-bottom: 1.25rem;
}
.vision-main-heading {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.vision-sub-heading {
font-size: 0.95rem;
}
.vision-content-text-inner {
padding: 1rem;
}
.vision-content-paragraph {
font-size: 0.95rem;
}
/* Testimonial Section */
.testimonial-showcase-section {
padding: 1.5rem 0;
}
.testimonial-header {
margin-bottom: 1rem;
}
.testimonial-main-heading {
font-size: 1.15rem;
margin-bottom: 0.25rem;
}
.testimonial-sub-heading {
font-size: 0.95rem;
}
.testimonial-card {
padding: 0.75rem;
}
.card-quote {
font-size: 0.95rem;
margin-bottom: 1rem;
}
.card-author-info {
padding-top: 0.5rem;
}
.author-name {
font-size: 1rem;
}
.author-title, .author-location {
font-size: 0.85rem;
}
/* Local Expert Section */
.local-expert-section {
padding: 1.5rem 0;
}
.local-expert-heading {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.local-expert-paragraph {
font-size: 0.95rem;
margin-bottom: 1rem;
}
.local-expert-image {
border-radius: 0.5rem;
}
/* CTA Banner Section */
.cta-banner-section {
padding: 2rem 0;
}
.cta-banner-heading {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.cta-banner-subheading {
font-size: 0.95rem;
margin-bottom: 1rem;
}
.cta-banner-content {
padding: 0 0.5rem;
}
.cta-banner-button {
font-size: 1rem;
padding: 0.5rem 1.25rem;
height: 2.25rem;
}
}
/* ABOUT US PAGE END */
/* CONTACT PAGE */
.desktop-floating-tabs + .section-block {
padding-top: 3rem;
}
/* Section Blocks */
.section-block {
padding-left: 0rem; /* px-2 */
padding-right: 0rem; /* px-2 */
padding-block: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem; /* space-y-6 */
}
@media (min-width: 768px) {
.section-block {
padding-left: 0; /* md:px-0 */
padding-right: 0; /* md:px-0 */
gap: 2rem; /* md:space-y-8 */
}
}
@media (max-width: 767px) {
.-sc-image#products-section {
background-position: inherit;
}
}
.section-border-top {
padding-top: 3rem; /* pt-12 */
border-top: 1px solid var(--gray-200);
}
@media (min-width: 768px) {
.section-border-top {
padding-top: 4rem;
}
/* md:pt-16 */
}
.section-header {
text-align: center;
margin-bottom: 2rem; /* mb-8 */
}
.section-title h2, .section-title:not(:has(h2)) {
font-size: 1.875rem; /* text-3xl */
color: var(--daikin-dark-navy);
margin-bottom: 1rem; /* mb-4 */
font-weight: 500;
}
.section-title.h1Style h2, .section-title.h1Style:not(:has(h2)) {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 700;
}
.section-title.section-title--md h2 {
font-weight: 700;
font-size: 2.25rem;
line-height: 2.5rem;
}
.section-description {
color: var(--gray-600);
font-weight: 400;
padding-left: 1rem; /* px-4 */
padding-right: 1rem; /* px-4 */
}
.section-title + .section-description {
text-align: center;
}
.section-title + .section-description {
text-align: center;
}
.section-description.section-description--md {
font-size: 1.125rem;
line-height: 1.75rem;
}
.section-description.section-description--lg {
font-size: 1.25rem;
line-height: 1.75rem;
}
.section-description.section-description--lg {
font-size: 1.25rem;
line-height: 1.75rem;
}
.section-description.max-width-text {
max-width: 48rem; /* max-w-3xl */
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-title.large-title {
font-size: 1.875rem; /* text-3xl */
font-weight: 600;
}
@media (min-width: 1024px) {
.section-title.large-title {
font-size: 2.25rem;
}
/* lg:text-4xl */
}
.section-description.large-description {
font-size: 1.125rem; /* text-lg */
margin-bottom: 2rem; /* mb-8 */
}
.card-main-title {
font-size: 1.25rem; /* text-xl */
margin-bottom: 1rem; /* mb-4 */
font-weight: 500;
}
.card-description {
font-weight: 400;
}
/* Info Card General Styles (Used for Headquarters, Credit, Technical Support, Showroom, Subscription Form) */
.info-card {
background-color: var(--white);
border: 1px solid var(--gray-200);
border-radius: 0.75rem; /* rounded-xl */
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* shadow-sm on form, others no shadow initially */
padding: 1.5rem; /* p-6 */
transition: box-shadow 0.15s ease-in-out;
width: 100%;
}
.info-card.headquarters-card {
background-color: rgba(0, 0, 0, 0.3); /* bg-black/30 */
backdrop-filter: blur(8px); /* backdrop-blur-md */
border-color: rgba(255, 255, 255, 0.2); /* border-white/20 */
border-radius: 1rem; /* rounded-2xl */
padding: 1.5rem; /* p-6 */
box-shadow: var(--shadow-2xl);
max-width: 28rem; /* max-w-md */
color: var(--white);
text-align: center;
}
.info-card .button {
margin-top: auto;
}
.info-card .card-body {
height: 100%;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.info-card.headquarters-card {
padding: 2rem;
}
/* md:p-8 */
}
.info-card:hover {
box-shadow: var(--shadow-lg);
}
.info-card-title {
font-size: 1.125rem; /* text-lg */
margin-bottom: 1rem; /* mb-4 */
font-weight: 600;
}
@media (min-width: 768px) {
.info-card-title {
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
/* md:text-xl md:mb-6 */
}
.info-card-body {
display: flex;
flex-direction: column;
gap: 0.75rem; /* space-y-3 */
}
@media (min-width: 768px) {
.info-card-body {
gap: 1rem;
}
/* md:space-y-4 */
}
.card-text-center {
text-align: center;
margin-bottom: 0.75rem; /* mb-3 */
}
@media (min-width: 768px) {
.card-text-center {
margin-bottom: 1rem;
}
/* md:mb-4 */
}
.card-subtitle {
font-size: 1rem; /* text-base */
font-weight: 500;
}
@media (min-width: 768px) {
.card-subtitle {
font-size: 1.125rem;
}
/* md:text-lg */
}
.info-item {
display: flex;
align-items: flex-start; /* items-start */
font-size: 0.875rem; /* text-sm */
color: var(--white); /* for headquarters card */
}
.info-item.align-center {
align-items: center;
}
.info-icon {
width: 1.25rem; /* h-5 w-5 */
height: 1.25rem;
margin-right: 0.75rem; /* mr-3 */
margin-top: 0.25rem; /* mt-1 */
flex-shrink: 0;
}
.info-item.align-center .info-icon {
margin-top: 0;
}
.info-address p {
font-weight: 400;
}
.info-phone-link {
font-size: 1rem; /* text-base */
font-weight: 500;
}
@media (min-width: 768px) {
.info-phone-link {
font-size: 1.125rem;
}
/* md:text-lg */
}
/* Showroom Section */
.showroom-section-bg {
background-color: var(--daikin-dark-navy);
border-radius: 0.75rem; /* rounded-xl */
padding: 2rem; /* p-8 */
}
@media (min-width: 768px) {
.showroom-section-bg {
padding: 3rem;
}
/* md:p-12 */
}
@media (max-width: 767px) {
.showroom-section-bg {
padding: 2rem 0.5rem;
}
/* md:p-12 */
}
.showroom-location-card {
background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
backdrop-filter: blur(4px); /* backdrop-blur-sm */
border-color: rgba(255, 255, 255, 0.2); /* border-white/20 */
color: var(--white);
}
.calendar-widget {
margin-top: 2rem;
border-radius: 0.75rem 12px;
overflow: hidden;
}
/* Career Option Cards */
.career-option-card {
text-align: center;
}
.career-option-card .icon-large {
width: 3rem; /* h-12 w-12 */
height: 3rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem; /* mb-4 */
}
/* Emergency Helpline Section */
.emergency-helpline-card {
background-color: var(--daikin-dark-navy);
color: var(--white);
padding: 1.5rem; /* p-6 */
}
.emergency-helpline-card .button {
margin-bottom: 1rem;
}
.emergency-helpline-card .icon-super-large {
width: 4rem; /* h-16 w-16 */
height: 4rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem; /* mb-4 */
color: var(--white);
}
.emergency-phone-number {
font-size: 1.875rem; /* text-3xl */
margin-bottom: 1rem; /* mb-4 */
font-weight: 500;
}
.emergency-instructions {
font-size: 0.875rem; /* text-sm */
margin-bottom: 1rem; /* mb-4 */
font-weight: 400;
}
.emergency-details-box {
background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
padding: 1rem; /* p-4 */
border-radius: 0.5rem; /* rounded-lg */
text-align: left;
}
.details-title {
margin-bottom: 0.75rem; /* mb-3 */
font-weight: 500;
}
.details-list {
list-style-type: decimal;
list-style-position: inside;
display: flex;
flex-direction: column;
gap: 0.25rem; /* space-y-1 */
font-weight: 400;
color: var(--white); /* for emergency card */
}
.details-list.ordered-list {
color: var(--gray-600); /* for tech support */
gap: 0.5rem; /* space-y-2 */
}
/* Technical Support Section */
.tech-support-details {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
}
.button-group {
display: flex;
flex-direction: column;
gap: 0.75rem; /* gap-3 */
}
.email-support-box {
background-color: var(--daikin-light-blue); /* bg-blue-50 - changed to daikin-light-blue as it's a closer visual match */
padding: 1rem; /* p-4 */
border-radius: 0.5rem; /* rounded-lg */
margin-top: auto;
}
.email-header {
display: flex;
align-items: center;
margin-bottom: 0.5rem; /* mb-2 */
}
.email-title {
font-weight: 500;
}
.email-link {
color: var(--daikin-blue);
font-weight: 400;
word-break: break-all;
}
.email-link:hover {
text-decoration: underline;
}
/* Credit Department Section */
.contact-info-details {
display: flex;
flex-direction: column;
gap: 1rem; /* space-y-4 */
}
.address-block p {
font-weight: 400;
}
.contact-methods {
display: flex;
flex-direction: column;
gap: 0.5rem; /* space-y-2 */
margin-bottom: 1rem;
}
.contact-methods .info-item .icon {
width: 1rem; /* h-4 w-4 */
height: 1rem;
}
.info-link {
font-weight: 400;
}
.contact-methods :is(.info-link, .info-text) {
color: #000000;
transition: 0.3s linear;
display: flex;
align-items: center;
}
.contact-methods .info-link:hover {
color: var(--daikin-blue);
transition: 0.3s linear;
}
--daikin-blue
.icon-text {
font-size: 1.2rem;
margin-right: 0.5rem;
}
.tax-credit-card {
background-image: linear-gradient(to bottom right, var(--gray-50), var(--daikin-light-blue)); /* from-green-50 to-blue-50, using updated variables */
padding: 1.5rem;
border-radius: 0.75rem;
border: 1px solid var(--gray-200);
}
.tax-credit-list {
display: flex;
flex-direction: column;
gap: 0.75rem; /* space-y-3 */
list-style: none; /* Remove default list style */
padding: 0;
margin: 1rem 0;
}
.tax-credit-list .info-item {
align-items: center;
font-weight: 400;
color: inherit; /* Inherit from parent card */
}
.bullet-point {
width: 0.75rem; /* w-3 */
height: 0.75rem; /* h-3 */
background-color: var(--daikin-blue);
border-radius: 9999px; /* rounded-full */
margin-right: 0.75rem; /* mr-3 */
}
/* Stay in Touch (Subscription) Section */
.grid-layout-sidebar {
display: grid;
grid-template-columns: 1fr;
gap: 3rem; /* gap-12 */
align-items: flex-start; /* items-start */
}
@media (min-width: 1024px) {
.grid-layout-sidebar {
grid-template-columns: 2fr 3fr;
}
/* lg:grid-cols-5 lg:col-span-2 & lg:col-span-3 */
}
@media (max-width: 767px) {
.grid-layout-sidebar {
grid-template-columns: repeat(1, 100%);
}
/* lg:grid-cols-5 lg:col-span-2 & lg:col-span-3 */
}
.sidebar-content {
padding: 0rem; /* px-4 */
}
.sidebar-content .section-description {
padding-left: 0;
}
@media (min-width: 768px) {
.sidebar-content {
padding: 0;
}
/* md:px-0 */
}
.feature-list {
display: flex;
flex-direction: column;
gap: 1rem; /* space-y-4 */
list-style: none; /* Remove default list style */
padding: 0;
margin: 0;
color: var(--gray-600);
font-weight: 400;
}
.feature-item {
display: flex;
align-items: flex-start; /* items-start */
}
.feature-icon {
width: 1.25rem; /* h-5 w-5 */
height: 1.25rem;
margin-right: 0.75rem; /* mr-3 */
margin-top: 0.125rem; /* mt-0.5 */
flex-shrink: 0;
}
/* Mobile Bottom Navigation (formerly mobile-floating-nav) */
.mobile-bottom-nav {
display: none; /* md:hidden (hidden by default, JS controls visibility) */
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 30; /* z-30 */
opacity: 0; /* opacity-0 */
pointer-events: none; /* pointer-events-none */
transition: opacity 0.2s ease-in-out; /* transition-opacity duration-200 ease-in-out */
}
/* Show on small screens */
@media (max-width: 767px) { /* md:hidden breakpoint */
.mobile-bottom-nav {
display: block;
}
}
/* State for JS-controlled visibility */
.mobile-bottom-nav:not(.hidden) {
opacity: 1;
pointer-events: auto;
}
.mobile-nav-wrapper {
background-color: rgba(255, 255, 255, 0.95); /* bg-white/95 */
backdrop-filter: blur(4px); /* backdrop-blur-sm */
box-shadow: var(--shadow-lg); /* shadow-lg */
border-top: 1px solid var(--gray-200); /* border-t border-gray-200 */
padding: 0.75rem 0.5rem; /* px-2 py-3 */
}
.mobile-nav-content {
display: flex; /* flex */
align-items: center; /* items-center */
justify-content: space-between; /* justify-between */
max-width: 28rem; /* max-w-md */
margin-left: auto; /* mx-auto */
margin-right: auto; /* mx-auto */
}
.mobile-nav-item {
/* Base button styles from ShadCN variant="ghost" & size="sm" */
display: flex;
flex-direction: column; /* flex-col */
align-items: center; /* items-center */
gap: 0.25rem; /* gap-1 */
padding: 0rem; /* p-3 */
height: auto; /* h-9 (from ShadCN size="sm") - this value needs adjustment for content size */
flex: 1; /* flex-1 */
border-radius: 0.5rem; /* rounded-lg */
transition: all 0.2s ease-in-out; /* transition-all duration-200 */
background: none; /* variant="ghost" implies no background by default */
border: none;
cursor: pointer;
outline: none; /* focus:outline-none */
color: var(--gray-700); /* text-gray-700 */
/* Remove text-sm and font-medium here, apply to label below */
white-space: nowrap; /* whitespace-nowrap */
}
/* Adjust button height to fit content better, or keep h-9 if preferred */
.mobile-nav-item {
min-height: auto; /* Adjust as needed, h-9 is too small with icon+text */
justify-content: center; /* Center content vertically */
}
.mobile-nav-item .icon {
background: var(--gray-900);
}
/* Focus state (mimicking ShadCN focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2) */
.mobile-nav-item:focus-visible { /* Use :focus-visible for better accessibility */
box-shadow: 0 0 0 2px var(--daikin-blue), /* focus:ring-2 focus:ring-daikin-blue */
0 0 0 4px var(--gray-200); /* A simple way to represent ring-offset-2 */
}
/* Hover state */
.mobile-nav-item:hover {
background-color: var(--gray-100); /* hover:bg-gray-100 */
color: var(--gray-900); /* Usually hover:text-accent-foreground means a slightly darker text */
}
/* Active state */
.mobile-nav-item.active {
background-color: var(--daikin-blue); /* bg-daikin-blue */
color: var(--white); /* text-white */
box-shadow: var(--shadow-md); /* shadow-md */
}
.mobile-nav-item.active .icon {
background: var(--white);
}
.mobile-nav-icon {
width: 1rem; /* h-4 w-4 */
height: 1rem;
color: currentColor; /* Inherit color from parent button */
/* [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 */
pointer-events: none; /* important for preventing click events on SVG itself */
flex-shrink: 0;
}
.mobile-nav-label {
font-size: 0.75rem; /* text-xs */
font-weight: 500; /* font-medium */
}
/* CONTACT PAGE END */
.full-width {
width: 100%;
}
.primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
transition: background-color 0.3s ease;
height: 3rem; /* h-11 */
border-radius: 0.375rem; /* rounded-md */
background-color: var(--daikin-blue);
color: white;
padding: 1rem 2rem; /* px-8 py-4 */
font-size: 1.125rem; /* text-lg */
font-weight: 500; /* font-medium */
border: none;
cursor: pointer;
}
.primary-button:hover {
background-color: var(--daikin-dark-navy);
}
.primary-button-icon {
margin-left: 0.5rem;
height: 1.25rem; /* h-5 */
width: 1.25rem; /* w-5 */
transition: transform 0.3s ease;
}
.primary-button:hover .primary-button-icon {
transform: translateX(4px);
}
/* Custom Select/Dropdown Styles */
.custom-select-container {
position: relative;
width: 100%;
}
.custom-select-trigger {
width: 100%;
height: 2.25rem;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.375rem;
padding: 0 0.75rem;
font-size: 0.875rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
}
.custom-select-trigger.outline-variant {
background-color: var(--white);
border-color: var(--gray-200);
}
.custom-select-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.375rem;
box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
z-index: 100;
display: none;
max-height: 200px;
overflow-y: auto;
}
.custom-select-panel.open {
display: block;
}
.custom-select-option {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
cursor: pointer;
transition: background-color 0.2s;
}
.custom-select-option:hover {
background-color: rgba(0, 114, 206, 0.1);
}
.custom-select-option.selected {
font-weight: 600;
color: var(--daikin-blue);
}
/* Custom scrollbar */
.results-scroll-container::-webkit-scrollbar, .custom-select-panel::-webkit-scrollbar {
width: 6px;
}
.results-scroll-container::-webkit-scrollbar-track, .custom-select-panel::-webkit-scrollbar-track {
background: var(--gray-100);
border-radius: 3px;
}
.results-scroll-container::-webkit-scrollbar-thumb, .custom-select-panel::-webkit-scrollbar-thumb {
background: var(--gray-400);
border-radius: 3px;
}
.results-scroll-container::-webkit-scrollbar-thumb:hover, .custom-select-panel::-webkit-scrollbar-thumb:hover {
background: var(--gray-500);
}
/* Icons */
.icon {
height: 1.25rem;
width: 1.25rem;
display: inline-block;
vertical-align: middle;
}
.icon-xs {
height: 0.75rem;
width: 0.75rem;
}
.icon-daikin-blue {
color: var(--daikin-blue);
}
.icon-sm {
height: 1rem;
width: 1rem;
}
#sort-dropdown-trigger .icon-sm {
transition: transform 0.2s;
}
#sort-dropdown-trigger.open .icon-sm {
transform: rotate(180deg);
}
@media (min-width: 640px) { /* sm */
.custom-select-container {
width: 10rem;
}
}
.bg-green-100 {
background-color: var(--green-100);
color: var(--green-700);
}
.bg-orange-100 {
background-color: var(--orange-100);
color: var(--orange-700);
}
.bg-red-100 {
background-color: var(--red-100);
color: var(--red-700);
}
.modal-directions-btn {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-family: var(--font-poppins);
font-size: 0.875rem;
background: var(--daikin-blue);
border-radius: .5rem;
padding: .25rem .5rem;
text-decoration: none !important;
color: #fff;
transition: 0.3s ease;
}
.modal-info {
display: flex;
align-items: center;
gap: 20px;
}
.modal-directions-btn:hover {
color: var(--white);background: var(--daikin-dark-navy);
}
.error-message {
color: #e53935;
font-size: 1rem;
margin-top: 6px;
margin-bottom: 0;
min-height: 1.25em;
font-weight: 500;
letter-spacing: 0.01em;
display: block;
}