/* GLOBAL */
/* ==== */
html {
scroll-behavior: smooth;
}
#savecontent {
margin-top: -2px;
}
.codey {
font-family: courier, monospace;
}
.anchor {
scroll-margin-top: 200px;
}
@media(min-width: 576px) {
h1, .h1 {
font-size: 2.7rem;
}
h2,
.h2 {
font-size: 2.4rem;
}
h3,
.h3 {
font-size: 2.1rem;
}
h4,
.h4 {
font-size: 1.9rem;
}
h5,
.h5 {
font-size: 1.6rem;
}
h6,
.h6 {
font-size: 1.3rem;
}
}
@media(min-width: 768px) {
h1, .h1 {
font-size: 3.1rem;
}
h2,
.h2 {
font-size: 2.75rem;
}
h3,
.h3 {
font-size: 2.4rem;
}
h4,
.h4 {
font-size: 2.05rem;
}
h5,
.h5 {
font-size: 1.7rem;
}
h6,
.h6 {
font-size: 1.35rem;
}
}
@media(min-width: 1200px) {
h1.mega, .h1.mega {
font-size: 4.5rem !important;
}
body {
font-size: 1.1rem;
}
h1,
.h1 {
font-size: 3.4rem;
}
h2,
.h2 {
font-size: 3rem;
}
h3,
.h3 {
font-size: 2.6rem;
}
h4,
.h4 {
font-size: 2.2rem;
}
h5,
.h5 {
font-size: 1.8rem;
}
h6,
.h6 {
font-size: 1.4rem;
}
}
@media(min-width: 1600px) {
h1, .h1 {
font-size: 3.8rem;
}
h2,
.h2 {
font-size: 3.25rem;
}
h3,
.h3 {
font-size: 2.8rem;
}
h4,
.h4 {
font-size: 2.35rem;
}
h5,
.h5 {
font-size: 1.9rem;
}
h6,
.h6 {
font-size: 1.45rem;
}
}
.btn {
white-space: normal;
}
a:hover img,
a.bg-img:hover a.bg-image:hover {
opacity: .85;
}
/*#savecontent img {
max-width: 100% !important;
height: auto !important;
}*/
.rightfloat {
float: right;
margin: 0 0 .5rem 1rem;
width: 40%;
}
@media (max-width: 767px) {
.rightfloat {
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
}
.btn-primary,
.btn-primary-alt {
color: white !important;
}
.round {
border-radius: 12px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: rgba(0, 0, 0, 0.9);
padding: 1rem;
background-size: 20px;
}
@media(min-width: 1600px) {
.container {
max-width: 1300px;
}
}
@media(min-width: 1600px) {
.container.container-wide {
width: 1500px !important;
max-width: 1500px !important;
}
}
.product-image {
background-size: cover !important;
min-height: auto !important;
padding-bottom: 75%;
}
#savecontent form label {
font-weight: bold;
}
#savecontent form .checkbox-group label,
#savecontent form .radio-group label {
font-weight: normal;
}
.formbuilder-required {
color: red;
}
.text-right.addToCart {
text-align: left !important;
}
.blog-detail-page {
background: var(--light);
}
.blog-detail-page .blog {
border-radius: 12px;
padding: 1.5rem;
background: white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.blog-detail-page .blog h4 {
margin-top: 1rem;
}
form li p {
margin-bottom: 0;
}
form label {
font-weight: bold;
}
form .checkbox-group label,
form .radio-group label {
font-weight: normal;
}
.formbuilder-checkbox,
.formbuilder-radio {
margin-bottom: 4px;
}
.bg-stone {
background-image: url(/userfiles/2716/images/tilee.jpg);
background-size: 500px 500px;
background-position: left top;
background-repeat: repeat;
}
.sub-hero {
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2);
}
/* ==========================================================================
Colorado Stone — shared page design system
Reusable across sub-pages (services, products, about, etc.)
Relies on Bootstrap 4 utilities for colors/typography.
Add .text-white on headings over dark backgrounds in the markup.
========================================================================== */
/* ---------- PAGE HEADER (sub-hero) ----------------------------------------- */
.csl-page-header {
position: relative;
overflow: hidden;
isolation: isolate;
}
.csl-page-header .csl-ph-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.csl-page-header .csl-ph-veil {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(0, 0, 0, 0.5);
}
.csl-page-header .csl-ph-wrap {
position: relative;
z-index: 2;
text-align: center;
}
.csl-page-header .csl-ph-crumb {
display: inline-flex;
align-items: center;
gap: .7rem;
font-size: .66rem;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 1rem;
}
.csl-page-header .csl-ph-crumb a {
color: inherit;
text-decoration: none;
opacity: .75;
transition: opacity .2s ease, color .2s ease;
}
.csl-page-header .csl-ph-crumb a:hover {
color: var(--primary);
opacity: 1;
}
.csl-page-header .csl-ph-crumb .sep {
color: var(--primary);
opacity: .7;
}
.csl-page-header h1 {
font-weight: 300;
font-size: 3.25rem;
line-height: 1.05;
letter-spacing: -.02em;
margin: 0 0 1.25rem;
text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.csl-page-header h1 em {
font-style: italic;
font-weight: 400;
padding: 0 .08em;
}
.csl-page-header .csl-ph-rule {
width: 56px;
height: 1px;
background: var(--primary);
margin: 0 auto 1.5rem;
opacity: .85;
}
.csl-page-header .csl-ph-lede {
max-width: 640px;
margin: 0 auto;
font-size: 1.05rem;
line-height: 1.65;
font-weight: 300;
text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}
@media (max-width: 991.98px) {
.csl-page-header .csl-ph-wrap {
padding: 5.5rem 0 4rem;
}
.csl-page-header h1 {
font-size: 2.5rem;
}
}
@media (max-width: 575.98px) {
.csl-page-header .csl-ph-wrap {
padding: 4.5rem 0 3rem;
}
.csl-page-header h1 {
font-size: 2rem;
}
.csl-page-header .csl-ph-lede {
font-size: .95rem;
}
.csl-page-header .csl-ph-crumb {
font-size: .6rem;
letter-spacing: .22em;
}
}
/* ---------- ELEGANT SECTION HEADER ---------------------------------------- */
/* Eyebrow (gold rules) + serif-feel display heading with italic em + light lead */
.csl-section-header {
text-align: center;
margin-bottom: 1.75rem;
}
.csl-section-header.is-left {
text-align: left;
margin-bottom: 1.5rem;
}
.csl-section-header .csl-eyebrow {
display: inline-flex;
align-items: center;
gap: .85rem;
font-size: .7rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: .85rem;
}
.csl-section-header .csl-eyebrow .rule {
width: 28px;
height: 1px;
background: var(--primary);
opacity: .75;
}
.csl-section-header.is-left .csl-eyebrow .rule:last-child {
display: none;
}
.csl-section-header h2 {
font-weight: 300;
font-size: 2.4rem;
line-height: 1.15;
letter-spacing: -.01em;
margin: 0 0 .75rem;
}
.csl-section-header h2 em {
font-style: italic;
color: var(--primary);
font-weight: 400;
}
.csl-section-header .csl-lede {
max-width: 620px;
margin: 0 auto 1rem;
font-size: 1.05rem;
line-height: 1.7;
font-weight: 300;
}
.csl-section-header.is-left .csl-lede {
margin-left: 0;
margin-right: 0;
}
@media (min-width: 992px) {
.csl-section-header h2 {
font-size: 2.75rem;
}
}
@media (max-width: 575.98px) {
.csl-section-header {
margin-bottom: 1.5rem;
}
.csl-section-header h2 {
font-size: 1.85rem;
}
.csl-section-header .csl-lede {
font-size: .95rem;
}
}
/* ---------- DECORATIVE IMAGE FRAME ---------------------------------------- */
.csl-image-frame {
position: relative;
}
.csl-image-frame img {
position: relative;
z-index: 2;
width: 100%;
height: auto;
display: block;
}
.csl-image-frame::before {
content: "";
position: absolute;
top: 22px;
left: -22px;
width: 60%;
bottom: -22px;
border: 1px solid var(--primary);
z-index: 1;
}
.csl-image-frame[data-badge]::after {
content: attr(data-badge);
position: absolute;
top: -14px;
right: -8px;
background: var(--primary);
color: #fff;
padding: 8px 18px;
font-size: .68rem;
letter-spacing: .26em;
font-weight: 600;
z-index: 3;
box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
@media (max-width: 991.98px) {
.csl-image-frame {
margin-left: 22px;
margin-right: 8px;
margin-bottom: 3rem;
}
.csl-image-frame::before {
top: 18px;
left: -18px;
bottom: -18px;
}
}
/* ---------- SERVICES SECTION — textured warm bg + soft veil --------------- */
.csl-services-sect {
position: relative;
isolation: isolate;
}
.csl-services-sect::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(250, 248, 244, .9) 0%, rgba(250, 248, 244, .8) 100%);
pointer-events: none;
z-index: 0;
}
.csl-services-sect > .container {
position: relative;
z-index: 1;
}
/* ---------- CAPABILITY / SERVICE CARD ------------------------------------- */
.csl-capability {
height: 100%;
background: #fff;
border: 1px solid #e8e5df;
padding: 1.4rem 1.25rem;
position: relative;
transition: border-color .3s ease, box-shadow .3s ease;
overflow: hidden;
box-shadow: 0 2px 14px rgba(15, 23, 42, .05);
}
.csl-capability::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary);
transform: scaleY(0);
transform-origin: top;
transition: transform .35s ease;
}
a.csl-capability,
.csl-capability.is-clickable {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.csl-capability:hover,
.csl-capability.is-clickable:hover {
border-color: color-mix(in srgb, var(--primary) 35%, #e8e5df);
box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
text-decoration: none;
color: inherit;
}
a.csl-capability:hover::before,
.csl-capability.is-clickable:hover::before {
transform: scaleY(1);
}
.csl-capability .csl-cap-icon {
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--primary) 10%, #faf8f4);
border: 1px solid color-mix(in srgb, var(--primary) 22%, #e8e5df);
color: var(--primary);
font-size: 1.15rem;
margin-bottom: .9rem;
border-radius: 2px;
}
.csl-capability h3,
.csl-capability h4,
.csl-capability h5 {
font-weight: 400;
font-size: 1.25rem;
letter-spacing: -.01em;
margin: 0 0 .5rem;
}
.csl-capability h3 em,
.csl-capability h4 em,
.csl-capability h5 em {
font-style: italic;
color: var(--primary);
font-weight: 400;
}
.csl-capability p {
font-size: .92rem;
line-height: 1.7;
margin-bottom: 0;
}
.csl-capability ul {
list-style: none;
padding: 0;
margin: .75rem 0 0;
}
.csl-capability ul li {
position: relative;
padding: .3rem 0 .3rem 1.1rem;
font-size: .88rem;
line-height: 1.55;
}
.csl-capability ul li::before {
content: "";
position: absolute;
left: 0;
top: .85rem;
width: 6px;
height: 1px;
background: var(--primary);
}
/* Numbered variant: big translucent italic gold numeral behind content */
.csl-capability.is-numbered::after {
content: attr(data-num);
position: absolute;
right: .85rem;
top: -.35rem;
font-size: 4.5rem;
font-weight: 300;
font-style: italic;
color: var(--primary);
opacity: .14;
line-height: 1;
letter-spacing: -.04em;
pointer-events: none;
z-index: 0;
}
.csl-capability.is-numbered > * {
position: relative;
z-index: 1;
}
/* ---------- META ROW / STAT STRIP ----------------------------------------- */
.csl-meta-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding-top: 1.1rem;
margin-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, .08);
}
.csl-meta-row.on-dark {
border-top-color: rgba(255, 255, 255, .1);
}
.csl-meta-row .csl-meta-item .csl-meta-num {
font-size: 1.95rem;
line-height: 1;
color: var(--primary);
margin-bottom: .4rem;
font-weight: 400;
}
.csl-meta-row .csl-meta-item .csl-meta-label {
font-size: .66rem;
letter-spacing: .24em;
text-transform: uppercase;
font-weight: 600;
}
/* ---------- MATERIAL / BRAND LIST ----------------------------------------- */
.csl-material-group {
padding: 1.15rem 0;
}
.csl-material-group .csl-mg-label {
font-size: 1.1rem;
font-style: italic;
margin-bottom: .35rem;
}
.csl-mg-image {
position: relative;
overflow: hidden;
}
.csl-mg-image img {
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
display: block;
}
/* subtle decorative offset bar — non-interactive */
.csl-mg-image::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 48%;
height: 3px;
background: var(--primary);
opacity: .85;
}
.flex-lg-row-reverse .csl-mg-image::after {
left: auto;
right: 0;
}
@media (min-width: 992px) {
.csl-mg-image img {
min-height: 320px;
}
}
.csl-material-group + .csl-material-group {
margin-top: .5rem;
}
.csl-material-group .csl-mg-sub {
font-size: 1.85rem;
font-weight: 400;
color: var(--primary);
letter-spacing: -.02em;
line-height: 1.1;
margin: 0 0 .35rem;
}
@media (min-width: 768px) {
.csl-material-group .csl-mg-sub {
font-size: 2rem;
}
}
@media (min-width: 1200px) {
.csl-material-group .csl-mg-sub {
font-size: 2.2rem;
}
}
@media (min-width: 1600px) {
.csl-material-group .csl-mg-sub {
font-size: 2.4rem;
}
}
.csl-material-group .csl-mg-sub em {
font-style: italic;
color: var(--primary-alt);
font-weight: 400;
}
.csl-pill-row {
display: flex;
flex-wrap: wrap;
gap: .5rem .6rem;
}
.csl-pill {
display: inline-flex;
align-items: center;
padding: .45rem .9rem;
background: #faf8f4;
border: 1px solid #e8e5df;
font-size: .82rem;
font-weight: 500;
letter-spacing: .01em;
border-radius: 2px;
transition: background .2s ease, border-color .2s ease;
}
.csl-pill.is-accent {
background: color-mix(in srgb, var(--primary) 8%, #fff);
border-color: color-mix(in srgb, var(--primary) 22%, #e8e5df);
color: var(--primary);
}
/* ---------- APPLICATIONS LIST (icon + label) ------------------------------ */
.csl-apps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid #e8e5df;
border-left: 1px solid #e8e5df;
}
.csl-apps .csl-app {
display: flex;
align-items: center;
gap: .8rem;
padding: .75rem 1rem;
border-right: 1px solid #e8e5df;
border-bottom: 1px solid #e8e5df;
font-size: .9rem;
}
.csl-apps .csl-app i {
color: var(--primary);
font-size: .95rem;
width: 1.25rem;
text-align: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.csl-apps {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.csl-apps {
grid-template-columns: repeat(3, 1fr);
}
}
/* ---------- CABINET TIER CARDS -------------------------------------------- */
.csl-tier {
height: 100%;
background: #fff;
padding: 0;
border: 1px solid #e8e5df;
text-align: left;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease;
}
.csl-tier.is-featured {
background: #1a1a1a;
border-color: #1a1a1a;
}
/* Image region with an accent rule underneath tying to the tier's color */
.csl-tier-media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.csl-tier-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.csl-tier-media::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--primary);
}
.csl-tier.is-featured .csl-tier-media::after {
background: var(--primary-alt);
}
/* Floating tier badge — primary-alt across all cards */
.csl-tier-badge {
position: absolute;
top: .85rem;
left: .85rem;
z-index: 2;
background: var(--primary-alt);
color: #1a1a1a;
font-size: .62rem;
letter-spacing: .24em;
text-transform: uppercase;
font-weight: 700;
padding: .38rem .75rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
display: inline-flex;
align-items: center;
}
/* Text body below the image */
.csl-tier-body {
padding: 1.15rem 1.25rem 1.3rem;
flex: 1;
display: flex;
flex-direction: column;
}
.csl-tier h4 {
font-weight: 400;
font-size: 1.4rem;
margin-bottom: .25rem;
}
.csl-tier h4 em {
font-style: italic;
color: var(--primary);
font-weight: 400;
}
.csl-tier.is-featured h4 em {
color: var(--primary-alt);
}
.csl-tier .csl-tier-sub {
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: .7rem;
}
.csl-tier p {
font-size: .92rem;
line-height: 1.65;
margin: 0;
}
.csl-tier:not(.is-featured) p strong {
color: var(--primary);
}
.csl-tier.is-featured p strong {
color: var(--primary-alt);
}
/* ---------- INDEX / JUMP NAV ---------------------------------------------- */
.csl-index {
background: #faf8f4;
border-top: 1px solid #e8e5df;
border-bottom: 1px solid #e8e5df;
padding: .85rem 0;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(6px);
}
.csl-index ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1.75rem;
justify-content: center;
flex-wrap: wrap;
}
.csl-index ul a {
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
padding: .35rem 0;
border-bottom: 1px solid transparent;
transition: color .2s ease, border-color .2s ease;
}
.csl-index ul a:hover {
color: var(--primary);
border-bottom-color: var(--primary);
text-decoration: none;
}
/* Native CSS smooth-scroll already lives on html; give jump targets room
below the sticky bar so they don't land behind it. */
[id^="csl-"] {
scroll-margin-top: 80px;
}
/* ---------- EXPLORE PRODUCTS BAND (standalone nav strip) ------------------ */
.csl-explore-band {
background: radial-gradient(ellipse at 18% 25%, color-mix(in srgb, var(--primary) 88%, #fff) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--primary) 94%, #fff) 0%, var(--primary) 35%, color-mix(in srgb, var(--primary) 48%, #0b0b0c) 100%);
color: #fff;
}
.csl-explore-band .csl-explore-label {
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
color: #fff;
font-weight: 600;
margin-bottom: .85rem;
opacity: .85;
}
.csl-explore-band .csl-explore-btns .btn {
letter-spacing: .08em;
font-weight: 600;
}
.csl-explore-band .csl-explore-btns .btn i {
font-size: .75rem;
opacity: .7;
transition: transform .25s ease, opacity .2s ease;
}
.csl-explore-band .csl-explore-btns .btn:hover i {
opacity: 1;
transform: translateY(2px);
}
@media (max-width: 767.98px) {
.csl-index {
position: relative;
padding: .6rem 0;
}
.csl-index ul {
gap: 1rem;
}
.csl-index ul a {
font-size: .64rem;
letter-spacing: .18em;
}
}
/* ---------- CLOSING CTA --------------------------------------------------- */
.csl-closer {
background: #1a1a1a;
padding: 3rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.csl-closer::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 55%), radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 55%);
opacity: .5;
pointer-events: none;
}
.csl-closer > .container {
position: relative;
z-index: 1;
}
.csl-closer .csl-eyebrow {
display: inline-flex;
align-items: center;
gap: .85rem;
font-size: .7rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--primary);
font-weight: 600;
margin-bottom: .85rem;
}
.csl-closer .csl-eyebrow .rule {
width: 28px;
height: 1px;
background: var(--primary);
opacity: .85;
}
.csl-closer h2 {
font-weight: 300;
font-size: 2.4rem;
line-height: 1.2;
margin-bottom: .75rem;
}
.csl-closer h2 em {
font-style: italic;
color: var(--primary);
font-weight: 400;
}
.csl-closer p {
max-width: 560px;
margin: 0 auto 1.35rem;
line-height: 1.65;
font-weight: 300;
}
.csl-closer .csl-cta-row {
display: inline-flex;
gap: .85rem;
flex-wrap: wrap;
justify-content: center;
}
.csl-btn-gold {
background: var(--primary);
color: #0b0b0c;
border: 1px solid var(--primary);
font-size: .72rem;
letter-spacing: .22em;
font-weight: 700;
text-transform: uppercase;
padding: .8rem 1.5rem;
border-radius: 0;
transition: background .25s ease, color .25s ease;
}
.csl-btn-gold:hover {
background: transparent;
color: var(--primary);
text-decoration: none;
}
.csl-btn-ghost {
background: transparent;
color: rgba(255, 255, 255, .9);
border: 1px solid rgba(255, 255, 255, .45);
font-size: .72rem;
letter-spacing: .22em;
font-weight: 600;
text-transform: uppercase;
padding: .8rem 1.5rem;
border-radius: 0;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.csl-btn-ghost:hover {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .9);
color: #fff;
text-decoration: none;
}
/* ---------- SUPPLIER LINK LIST (inside tier card body) -------------------- */
.csl-sink-partners {
margin-top: auto;
padding-top: .85rem;
border-top: 1px solid #e8e5df;
}
.csl-sp-label {
font-size: .6rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--primary);
font-weight: 700;
margin-bottom: .35rem;
}
.csl-sink-partners ul {
list-style: none;
padding: 0;
margin: 0;
}
.csl-sink-partners ul li + li {
border-top: 1px dashed rgba(0, 0, 0, .07);
}
.csl-sink-partners ul li a {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
width: 100%;
padding: .45rem 0;
font-size: .88rem;
color: #333;
text-decoration: none;
transition: color .2s ease;
}
.csl-sink-partners ul li a:hover {
color: var(--primary);
text-decoration: none;
}
.csl-sink-partners ul li a i {
font-size: .68rem;
opacity: .55;
flex-shrink: 0;
transition: transform .2s ease, opacity .2s ease;
}
.csl-sink-partners ul li a:hover i {
opacity: 1;
transform: translate(2px, -2px);
}
/* ---------- HOME HERO (Ken Burns carousel with typographic heading) ------- */
.home-hero {
background: #0b0b0c;
position: relative;
overflow: hidden;
isolation: isolate;
}
.home-hero .kb-stage {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.home-hero .kb-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.home-hero .kb-slide.is-active {
opacity: 1;
}
.home-hero .kb-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
@media (min-width: 1200px) {
.home-hero .kb-img[data-kb="out"] {
animation: kbZoomOut 12s linear both;
}
.home-hero .kb-img[data-kb="in"] {
animation: kbZoomIn 12s linear both;
}
}
@keyframes kbZoomOut {
from {
transform: scale(1.15);
}
to {
transform: scale(1);
}
}
@keyframes kbZoomIn {
from {
transform: scale(1);
}
to {
transform: scale(1.15);
}
}
@media (prefers-reduced-motion: reduce) {
.home-hero .kb-slide,
.home-hero .kb-slide[data-kb="out"],
.home-hero .kb-slide[data-kb="in"] {
animation: none !important;
transition: opacity 1s ease !important;
}
}
.home-hero .side-gradient {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 70%;
background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, 0) 100%);
z-index: 1;
}
.home-hero .container {
position: relative;
z-index: 2;
}
.home-hero .hero-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .4rem .9rem .4rem .65rem;
background: rgba(255, 255, 255, .1);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 50px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .9);
margin-bottom: 1.25rem;
}
.home-hero .hero-badge i {
font-size: .7rem;
}
.home-hero h1 {
font-weight: 300;
letter-spacing: -.02em;
line-height: 1.08;
max-width: 720px;
}
.home-hero h1 em {
font-style: italic;
font-weight: 400;
color: var(--primary);
padding: 0 .06em;
}
.home-hero .hero-sub {
font-size: 1.1rem;
color: rgba(255, 255, 255, .82);
max-width: 560px;
line-height: 1.7;
font-weight: 300;
}
@media (max-width: 991.98px) {
.home-hero .side-gradient {
width: 100%;
background: rgba(0, 0, 0, .65);
}
}
@media (max-width: 767.98px) {
.home-hero .hero-sub {
font-size: 1rem;
}
}
/* ---------- PRODUCT / SERVICE TILES (home page grid) ---------------------- */
.csl-ps-label {
display: flex;
align-items: center;
gap: 1rem;
max-width: 800px;
margin: 0 auto 1rem;
font-weight: 300;
letter-spacing: -.01em;
}
.csl-ps-label::before,
.csl-ps-label::after {
content: "";
flex: 1;
height: 1px;
background: #e8e5df;
}
.csl-ps-label em {
font-style: italic;
color: var(--primary);
font-weight: 400;
}
.csl-ps-tile {
position: relative;
display: block;
width: 100%;
padding-bottom: 70%;
background-size: cover;
background-position: center;
overflow: hidden;
}
.csl-ps-tile .tile-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 75%);
transition: background .3s ease;
z-index: 1;
}
.csl-ps-tile:hover .tile-overlay {
background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 75%);
}
.csl-ps-tile .tile-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.15rem 1.25rem;
z-index: 2;
color: #fff;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -.005em;
line-height: 1.25;
transition: transform .3s ease;
}
.csl-ps-tile:hover .tile-label {
transform: translateY(-4px);
}
.csl-ps-tile .tile-label small {
display: block;
font-size: .76rem;
font-weight: 400;
color: rgba(255, 255, 255, .65);
margin-top: .3rem;
letter-spacing: 0;
}
.csl-ps-tile .tile-arrow {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .15);
backdrop-filter: blur(4px);
border-radius: 50%;
color: #fff;
font-size: .68rem;
opacity: 0;
transform: translate(-6px, 6px);
transition: opacity .3s ease, transform .3s ease;
}
.csl-ps-tile:hover .tile-arrow {
opacity: 1;
transform: translate(0, 0);
}
/* ---------- TESTIMONIALS (Google-style review cards) ---------------------- */
.csl-testimonials {
position: relative;
overflow: hidden;
}
.csl-testimonials::before {
content: "201C";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 18rem;
font-family: Georgia, serif;
color: rgba(0, 0, 0, .04);
line-height: 1;
pointer-events: none;
z-index: 0;
}
.csl-testimonials > .container {
position: relative;
z-index: 1;
}
@media (max-width: 767.98px) {
.csl-testimonials::before {
font-size: 10rem;
}
}
.csl-testimonial-card {
position: relative;
background: #f9f9f9;
border: 1px solid #e8e5df;
padding: 1.75rem 1.5rem 1.4rem;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
}
.csl-testimonial-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #4285f4, #ea4335, #fbbc04, #34a853);
}
.csl-testimonial-card .g-icon {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .6rem;
}
.csl-testimonial-card .g-icon i {
color: #4285f4;
font-size: 1.15rem;
}
.csl-testimonial-card .g-icon span {
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #94a3b8;
}
.csl-testimonial-card .stars {
color: #fbbc04;
font-size: .82rem;
margin-bottom: .85rem;
letter-spacing: .1em;
}
.csl-testimonial-card blockquote {
font-size: .9rem;
line-height: 1.6;
font-style: italic;
margin-bottom: 1rem;
flex: 1;
}
.csl-testimonial-card .attribution {
display: flex;
align-items: center;
gap: .65rem;
font-size: .88rem;
font-weight: 600;
padding-top: .85rem;
border-top: 1px solid #e8e5df;
}
.csl-testimonial-card .avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary) 12%, #fff);
border: 1px solid color-mix(in srgb, var(--primary) 25%, #e8e5df);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: .76rem;
font-weight: 700;
flex-shrink: 0;
}
.csl-testimonial-card .attribution span {
font-weight: 400;
}
/* ---------- CLIENT CARDS (letter-avatar grid, clients.html) --------------- */
.csl-client-card {
background: #fff;
border: 1px solid #e8e5df;
padding: 1.25rem 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: border-color .3s ease, box-shadow .3s ease;
}
.csl-client-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--primary) 65%, #fff) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--primary) 95%, #fff) 0%, var(--primary) 38%, color-mix(in srgb, var(--primary) 50%, #1a1a1a) 100%);
color: #fff;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .05em;
margin-bottom: .85rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.csl-client-name {
font-size: .95rem;
font-weight: 500;
letter-spacing: -.005em;
margin: 0;
line-height: 1.25;
}
/* ---------- TEAM CARDS (about page) -------------------------------------- */
.csl-team-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
border-radius: 50%;
margin-bottom: 1rem;
vertical-align: middle;
}
img.csl-team-avatar {
object-fit: cover;
border: 2px solid color-mix(in srgb, var(--primary) 45%, #e8e5df);
box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
span.csl-team-avatar {
background: radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--primary) 65%, #fff) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--primary) 95%, #fff) 0%, var(--primary) 38%, color-mix(in srgb, var(--primary) 50%, #1a1a1a) 100%);
color: #fff;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: .04em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.csl-team-role {
display: block;
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: .35rem;
}
/* ---------- NOTABLE PROJECT CARD ----------------------------------------- */
.csl-project {
background: #faf8f4;
border: 1px solid #e8e5df;
padding: 1.5rem 1.25rem 1.3rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 4px 18px rgba(15, 23, 42, .07);
}
.csl-project::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 85%, #fff) 0%, var(--primary) 50%, color-mix(in srgb, var(--primary) 55%, #000) 100%);
}
/* Soft gold aura behind the icon */
.csl-project::after {
content: "";
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 70px;
background: radial-gradient(ellipse, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.csl-project-icon {
color: var(--primary);
font-size: 1.85rem;
line-height: 1;
width: 1.85rem;
height: 1.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: .95rem;
position: relative;
z-index: 1;
}
.csl-project-name {
font-weight: 500;
font-size: 1.02rem;
margin: 0 0 .55rem;
line-height: 1.3;
letter-spacing: -.003em;
position: relative;
z-index: 1;
}
.csl-project-meta {
display: inline-block;
font-size: .58rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--primary);
font-weight: 700;
padding: .3rem .7rem;
background: color-mix(in srgb, var(--primary) 10%, #fff);
border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
position: relative;
z-index: 1;
}
/* ---------- PARTNER CONTACT CARD ----------------------------------------- */
.csl-partner {
background: #fff;
border: 1px solid #e8e5df;
padding: 1.35rem 1.35rem 1.2rem;
display: flex;
flex-direction: column;
position: relative;
transition: border-color .3s ease, box-shadow .3s ease;
}
.csl-partner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 2px;
background: var(--primary);
}
.csl-partner-eyebrow {
font-size: .6rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--primary);
font-weight: 700;
margin-bottom: .5rem;
}
.csl-partner-name {
font-weight: 400;
font-size: 1.2rem;
margin: 0 0 .6rem;
letter-spacing: -.01em;
line-height: 1.2;
}
.csl-partner-name em {
font-style: italic;
color: var(--primary);
font-weight: 400;
}
.csl-partner-address {
font-size: .88rem;
line-height: 1.5;
margin-bottom: .35rem;
}
.csl-partner-phone {
font-size: .88rem;
font-weight: 500;
margin-bottom: .9rem;
}
.csl-partner-phone a {
color: inherit;
text-decoration: none;
}
.csl-partner-phone a:hover {
color: var(--primary);
text-decoration: none;
}
.csl-partner-link {
margin-top: auto;
padding: .55rem .85rem;
background: transparent;
color: var(--primary);
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
border: 1px solid var(--primary);
transition: background .25s ease, color .25s ease;
align-self: start;
}
.csl-partner-link:hover {
background: var(--primary);
color: #fff;
text-decoration: none;
}
.csl-partner-link i {
font-size: .68rem;
opacity: .7;
transition: transform .2s ease, opacity .2s ease;
}
.csl-partner-link:hover i {
opacity: 1;
transform: translate(2px, -2px);
}
/* ---------- CONTACT PAGE (card + list + map + form) ---------------------- */
.csl-contact-card {
background: #faf8f4;
border: 1px solid #e8e5df;
padding: 1.5rem;
height: 100%;
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
.csl-contact-card {
padding: 2rem;
}
}
@media (min-width: 1200px) {
.csl-contact-card {
padding: 2.25rem;
}
}
.csl-contact-eyebrow {
display: inline-flex;
align-items: center;
gap: .85rem;
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--primary);
font-weight: 600;
margin-bottom: .75rem;
}
.csl-contact-eyebrow .rule {
width: 28px;
height: 1px;
background: var(--primary);
opacity: .75;
}
.csl-contact-heading {
font-weight: 400;
font-size: 1.65rem;
letter-spacing: -.01em;
line-height: 1.15;
margin: 0 0 .65rem;
}
@media (min-width: 1200px) {
.csl-contact-heading {
font-size: 1.9rem;
}
}
.csl-contact-heading em {
font-style: italic;
color: var(--primary);
font-weight: 400;
}
/* Contact list items */
.csl-contact-list {
margin: 1rem 0;
border-top: 1px solid #e8e5df;
}
.csl-contact-item {
display: flex;
align-items: center;
gap: .9rem;
padding: .7rem 0;
border-bottom: 1px solid #e8e5df;
}
.csl-contact-item > i {
color: var(--primary);
font-size: 1rem;
width: 1.5rem;
text-align: center;
flex-shrink: 0;
}
.csl-contact-item-body {
min-width: 0;
flex: 1;
}
.csl-contact-item-body a,
.csl-contact-item-body span {
color: inherit;
font-size: .95rem;
font-weight: 500;
text-decoration: none;
transition: color .2s ease;
}
.csl-contact-item-body a:hover {
color: var(--primary);
text-decoration: none;
}
.csl-contact-label {
font-size: .58rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--primary);
font-weight: 700;
margin-bottom: .1rem;
}
/* Social row */
.csl-contact-socials-wrap {
margin: 1rem 0;
padding-top: 1rem;
border-top: 1px solid #e8e5df;
}
.csl-contact-socials {
display: flex;
flex-wrap: wrap;
gap: .5rem .8rem;
font-size: 1.2rem;
}
.csl-contact-socials a {
color: #333;
transition: color .2s ease, transform .2s ease;
}
.csl-contact-socials a:hover {
color: var(--primary);
transform: translateY(-1px);
}
/* Map */
.csl-contact-map {
margin-top: auto;
padding-top: 1rem;
}
.csl-contact-map iframe {
display: block;
width: 100%;
min-height: 220px;
border: 1px solid #e8e5df;
background: transparent;
}
/* Contact form */
.csl-contact-form {
flex: 1;
}
.csl-contact-form label {
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--primary);
font-weight: 600;
margin-bottom: .35rem;
}
/* PAGE SPECIFIC */
/* FOOTER */