/* ============================================================
Webcroo Design System — Base Styles & Helpers
============================================================
Global resets, typography, and reusable helper classes
that form the foundation of the design system.
============================================================ */
/* ==================== FONT IMPORTS ==================== */
/*
Add to via Divi or functions.php:
*/
/* ==================== GLOBAL RESETS ==================== */
html {
/* Native scrolling is generally smoother than JS-emulated or forced smooth-scroll behaviors */
}
* {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
color: inherit;
cursor: pointer;
}
button {
background: none;
border: none;
padding: 0;
}
ul,
ol {
padding: 0;
margin: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
/* ==================== BASE TYPOGRAPHY ==================== */
body {
font-family: var(--font-body);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-base);
color: var(--color-text-dark);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
}
h1 {
font-size: clamp(var(--font-size-3xl), 4.2vw, var(--font-size-4xl));
}
h2 {
font-size: clamp(var(--font-size-3xl), 4.2vw, var(--font-size-4xl));
}
h3 {
font-size: var(--font-size-2xl);
}
h4 {
font-size: var(--font-size-xl);
}
p {
line-height: var(--line-height-base);
margin-bottom: var(--space-md);
}
/* ==================== UTILITY HELPERS ==================== */
/* Display & Visibility */
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.no-pointer {
pointer-events: none;
}
/* Text Alignment */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
/* Text Transform */
.text-uppercase {
text-transform: uppercase;
}
.text-lowercase {
text-transform: lowercase;
}
.text-capitalize {
text-transform: capitalize;
}
/* Text Truncation */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Font Weight */
.font-normal {
font-weight: var(--font-weight-normal);
}
.font-medium {
font-weight: var(--font-weight-medium);
}
.font-semibold {
font-weight: var(--font-weight-semibold);
}
.font-bold {
font-weight: var(--font-weight-bold);
}
.font-extrabold {
font-weight: var(--font-weight-extrabold);
}
/* Flex Helpers */
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-no-wrap {
flex-wrap: nowrap;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-start {
display: flex;
align-items: flex-start;
}
.flex-end {
display: flex;
align-items: flex-end;
}
.gap-xs {
gap: var(--space-xs);
}
.gap-sm {
gap: var(--space-sm);
}
.gap-md {
gap: var(--space-md);
}
.gap-lg {
gap: var(--space-lg);
}
.gap-xl {
gap: var(--space-xl);
}
.gap-2xl {
gap: var(--space-2xl);
}
.gap-3xl {
gap: var(--space-3xl);
}
/* Grid Helpers */
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: 1fr;
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-gap-sm {
gap: var(--space-sm);
}
.grid-gap-md {
gap: var(--space-md);
}
.grid-gap-lg {
gap: var(--space-lg);
}
.grid-gap-xl {
gap: var(--space-xl);
}
/* Margin Helpers */
.m-0 {
margin: 0;
}
.m-auto {
margin: auto;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
.mt-0 {
margin-top: 0;
}
.mb-0 {
margin-bottom: 0;
}
.ml-0 {
margin-left: 0;
}
.mr-0 {
margin-right: 0;
}
.mt-auto {
margin-top: auto;
}
.mb-auto {
margin-bottom: auto;
}
.ml-auto {
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
/* Margin Scale */
.mt-xs {
margin-top: var(--space-xs);
}
.mt-sm {
margin-top: var(--space-sm);
}
.mt-md {
margin-top: var(--space-md);
}
.mt-lg {
margin-top: var(--space-lg);
}
.mt-xl {
margin-top: var(--space-xl);
}
.mt-2xl {
margin-top: var(--space-2xl);
}
.mb-xs {
margin-bottom: var(--space-xs);
}
.mb-sm {
margin-bottom: var(--space-sm);
}
.mb-md {
margin-bottom: var(--space-md);
}
.mb-lg {
margin-bottom: var(--space-lg);
}
.mb-xl {
margin-bottom: var(--space-xl);
}
.mb-2xl {
margin-bottom: var(--space-2xl);
}
/* Padding Helpers */
.p-0 {
padding: 0;
}
.px-sm {
padding-left: var(--space-sm);
padding-right: var(--space-sm);
}
.px-md {
padding-left: var(--space-md);
padding-right: var(--space-md);
}
.px-lg {
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
.px-xl {
padding-left: var(--space-xl);
padding-right: var(--space-xl);
}
.py-sm {
padding-top: var(--space-sm);
padding-bottom: var(--space-sm);
}
.py-md {
padding-top: var(--space-md);
padding-bottom: var(--space-md);
}
.py-lg {
padding-top: var(--space-lg);
padding-bottom: var(--space-lg);
}
.py-xl {
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}
.p-sm {
padding: var(--space-sm);
}
.p-md {
padding: var(--space-md);
}
.p-lg {
padding: var(--space-lg);
}
.p-xl {
padding: var(--space-xl);
}
/* Width & Height */
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.w-auto {
width: auto;
}
.h-auto {
height: auto;
}
/* Position */
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0;
}
.top-0 {
top: 0;
}
.bottom-0 {
bottom: 0;
}
.left-0 {
left: 0;
}
.right-0 {
right: 0;
}
/* Z-Index */
.z-base {
z-index: var(--z-base);
}
.z-content {
z-index: var(--z-content);
}
.z-overlay {
z-index: var(--z-overlay);
}
.z-nav {
z-index: var(--z-nav);
}
/* Border Radius */
.rounded-sm {
border-radius: var(--radius-sm);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-xl {
border-radius: var(--radius-xl);
}
.rounded-pill {
border-radius: var(--radius-pill);
}
.rounded-full {
border-radius: var(--radius-circle);
}
/* Overflow */
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
/* Transitions */
.transition-fast {
transition: all var(--transition-fast);
}
.transition-base {
transition: all var(--transition-base);
}
.transition-slow {
transition: all var(--transition-slow);
}
/* ==================== SCOPED RESETS (Slider) ==================== */
.wc-slider,
.wc-slider * {
box-sizing: border-box;
}
.wc-slider button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.wc-slider a {
text-decoration: none;
color: inherit;
}
.wc-slider {
position: relative;
width: 100%;
height: var(--height-hero);
min-height: var(--height-min);
max-height: var(--height-max);
overflow: hidden;
background: var(--color-navy-dark);
font-family: var(--font-heading);
color: var(--color-text-light);
isolation: var(--z-isolate);
}
.wc-slides {
position: absolute;
inset: 0;
}
.wc-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-slower), visibility 0s 1s;
z-index: var(--z-base);
}
.wc-slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity var(--transition-slower), visibility 0s;
z-index: calc(var(--z-base) + 1);
}
.wc-slide-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.02);
transition: transform var(--transition-kenburns);
will-change: transform;
}
.wc-slide.is-active .wc-slide-bg {
transform: scale(1.12);
}
.wc-slide[data-kb="left"] .wc-slide-bg {
transform-origin: 80% 50%;
}
.wc-slide[data-kb="right"] .wc-slide-bg {
transform-origin: 20% 50%;
}
.wc-slide[data-kb="top"] .wc-slide-bg {
transform-origin: 50% 80%;
}
.wc-slide[data-kb="bottom"] .wc-slide-bg {
transform-origin: 50% 20%;
}
.wc-slide[data-kb="center"] .wc-slide-bg {
transform-origin: 50% 50%;
}
.wc-slide-overlay {
/* position: absolute;
inset: 0;
background: linear-gradient(105deg,
rgba(10, 37, 64, 0.78) 0%,
rgba(10, 37, 64, 0.55) 45%,
rgba(10, 37, 64, 0.35) 100%); */
}
.wc-slide-overlay::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.12) 0%, transparent 40%),
radial-gradient(circle at 20% 80%, rgba(26, 74, 122, 0.4) 0%, transparent 50%);
pointer-events: none;
}
/* ==================== SCOPED RESETS (Homepage) ==================== */
.wch,
.wch * {
box-sizing: border-box;
}
.wch a {
text-decoration: none;
color: inherit;
}
.wch button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.wch ul {
padding: 0;
margin: 0;
list-style: none;
}
.wch {
font-family: var(--font-body);
color: var(--color-text-dark);
line-height: var(--line-height-base);
}
.wch h1,
.wch h2,
.wch h3,
.wch h4 {
font-family: var(--font-heading);
margin: 0;
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
}
/* ==================== SCROLL REVEAL (GSAP / Intersection Observer) ==================== */
.wch-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--transition-reveal),
transform var(--transition-reveal);
}
.wch-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wch-d1 {
transition-delay: var(--delay-1);
}
.wch-d2 {
transition-delay: var(--delay-2);
}
.wch-d3 {
transition-delay: var(--delay-3);
}
.wch-d4 {
transition-delay: var(--delay-4);
}
.wch-d5 {
transition-delay: var(--delay-5);
}
/* ==================== SECTION WRAPPERS ==================== */
.wch-section {
padding: var(--space-10xl) var(--space-3xl);
position: relative;
overflow: hidden;
}
.wch-inner {
max-width: var(--container-max);
margin: 0 auto;
position: relative;
z-index: var(--z-content);
}
.wch-section-light {
background: var(--color-white);
}
.wch-section-cream {
background: var(--color-cream);
}
.wch-section-dark {
background: var(--color-bg-footer);
color: var(--color-text-light);
}
/* ==================== SECTION HEADERS ==================== */
.wch-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-md);
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-lg);
}
.wch-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--color-accent);
}
.wch-eyebrow-center {
margin-left: auto;
margin-right: auto;
}
.wch h2.wch-heading {
font-size: var(--font-clamp-heading);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-lg);
}
.wch h2.wch-heading-xl {
font-size: var(--font-clamp-heading-xl);
font-weight: var(--font-weight-extrabold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--space-xl);
}
.wch-section-dark h2.wch-heading,
.wch-section-dark h2.wch-heading-xl,
.wch-cta h2 {
color: var(--color-text-light) !important;
}
.wch-section-dark h2 em,
.wch-cta h2 em {
font-style: normal !important;
color: var(--color-accent) !important;
}
.wch-section-light h2 em,
.wch-section-cream h2 em {
font-style: normal !important;
color: var(--color-accent) !important;
}
.wch-lede {
font-size: clamp(var(--font-size-lg), 1.4vw, var(--font-size-xl));
line-height: var(--line-height-relaxed);
color: var(--color-text-muted);
max-width: var(--container-lede);
margin: 0;
}
.wch-section-dark .wch-lede {
color: var(--color-text-soft);
}
/* ============================================================
Webcroo About Page — Reset, Reveal, Section & Shared Tokens
============================================================ */
/* Scoped reset */
.wc-about,
.wc-about * {
box-sizing: border-box;
}
.wc-about a {
text-decoration: none;
color: inherit;
}
.wc-about button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
}
.wc-about ul {
padding: 0;
margin: 0;
list-style: none;
}
.wc-about {
font-family: var(--font-body);
color: var(--wc-text-dark);
line-height: 1.6;
}
.wc-about h1,
.wc-about h2,
.wc-about h3,
.wc-about h4 {
font-family: var(--font-heading);
margin: 0;
line-height: 1.15;
letter-spacing: -0.02em;
}
/* Scroll-reveal */
.wc-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wc-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wc-reveal-delay-1 {
transition-delay: 0.1s;
}
.wc-reveal-delay-2 {
transition-delay: 0.2s;
}
.wc-reveal-delay-3 {
transition-delay: 0.3s;
}
.wc-reveal-delay-4 {
transition-delay: 0.4s;
}
/* Section wrapper */
.wc-section {
padding: 7rem 2rem;
position: relative;
overflow: hidden;
}
.wc-section-inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.wc-section-dark {
background: #0a2540 url('https://webcroo.com/wp-content/uploads/footer-bg.jpg') center / cover no-repeat;
color: var(--wc-white);
}
.wc-section-light {
background: var(--wc-white);
}
.wc-section-cream {
background: var(--wc-cream);
}
/* Eyebrow label */
.wc-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--wc-accent);
margin-bottom: 1.25rem;
}
.wc-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--wc-accent);
}
/* Headings */
.wc-heading {
font-size: clamp(2rem, 4.2vw, 3.5rem);
font-weight: 700;
margin-bottom: 1.25rem;
}
.wc-heading-xl {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.035em;
margin-bottom: 1.25rem;
}
/* Dark-section heading color overrides */
.wc-about .wc-section-dark .wc-heading,
.wc-about .wc-section-dark .wc-heading-xl,
.wc-about .wc-cta h2 {
color: #ffffff !important;
}
.wc-about .wc-section-dark .wc-heading em,
.wc-about .wc-section-dark .wc-heading-xl em,
.wc-about .wc-cta h2 em {
font-style: normal;
color: var(--wc-accent) !important;
}
/* Light/cream sections — em accent */
.wc-section-light .wc-heading em,
.wc-section-light .wc-heading-xl em,
.wc-section-cream .wc-heading em,
.wc-section-cream .wc-heading-xl em {
font-style: normal;
color: var(--wc-accent) !important;
}
/* Lede paragraph */
.wc-lede {
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
line-height: 1.65;
color: var(--wc-text-muted);
max-width: 700px;
}
.wc-section-dark .wc-lede {
color: var(--wc-text-soft-w);
}
/* Scroll-cue keyframe */
@keyframes wcScrollPulse {
0%,
100% {
transform: scaleY(0.4);
opacity: 0.4;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
/* ============================================================
Webcroo Services Hub — Base, Reset & Section Styles (wcsv-)
============================================================ */
.wcsv,
.wcsv * {
box-sizing: border-box;
}
.wcsv a {
text-decoration: none;
color: inherit;
}
.wcsv button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.wcsv ul {
padding: 0;
margin: 0;
list-style: none;
}
.wcsv {
font-family: var(--font-body);
color: var(--wcsv-text-dark);
line-height: var(--line-height-base);
}
.wcsv h1,
.wcsv h2,
.wcsv h3,
.wcsv h4 {
font-family: var(--font-heading);
margin: 0;
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
}
/* Scroll-reveal */
.wcsv-reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity var(--duration-reveal) var(--ease-reveal),
transform var(--duration-reveal) var(--ease-reveal);
}
.wcsv-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wcsv-d1 {
transition-delay: var(--delay-1);
}
.wcsv-d2 {
transition-delay: var(--delay-2);
}
.wcsv-d3 {
transition-delay: var(--delay-3);
}
.wcsv-d4 {
transition-delay: var(--delay-4);
}
/* Section wrappers */
.wcsv-section {
padding: var(--space-10xl) var(--space-3xl);
position: relative;
overflow: hidden;
}
.wcsv-inner {
max-width: var(--container-lg);
margin: 0 auto;
position: relative;
z-index: var(--z-content);
}
.wcsv-section-light {
background: var(--wcsv-white);
}
.wcsv-section-cream {
background: var(--wcsv-cream);
}
.wcsv-section-dark {
background: var(--color-bg-footer);
color: var(--wcsv-white);
}
/* Eyebrow */
.wcsv-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--wcsv-accent);
margin-bottom: var(--space-lg);
}
.wcsv-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--wcsv-accent);
}
.wcsv h2.wcsv-heading {
font-size: clamp(var(--font-size-3xl), 4.2vw, 3.3rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-lg);
}
.wcsv .wcsv-section-dark h1,
.wcsv .wcsv-section-dark h2.wcsv-heading,
.wcsv .wcsv-cta h2,
.wcsv .wcsv-hero h1 {
color: var(--wcsv-white) !important;
}
.wcsv .wcsv-section-dark h2 em,
.wcsv .wcsv-cta h2 em,
.wcsv .wcsv-hero h1 em,
.wcsv .wcsv-section-light h2 em,
.wcsv .wcsv-section-cream h2 em {
font-style: normal !important;
color: var(--wcsv-accent) !important;
}
.wcsv-lede {
font-size: clamp(var(--font-size-lg), 1.4vw, var(--font-size-xl));
line-height: var(--line-height-relaxed);
color: var(--wcsv-text-muted);
max-width: var(--container-lede);
margin: 0;
}
.wcsv-section-dark .wcsv-lede {
color: var(--wcsv-text-soft-w);
}
/* ============================================================
Webcroo Service Page — Base, Reset & Section Styles (wcs-)
============================================================ */
.wcs,
.wcs * {
box-sizing: border-box;
}
.wcs a {
text-decoration: none;
color: inherit;
}
.wcs button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.wcs ul {
padding: 0;
margin: 0;
list-style: none;
}
.wcs {
font-family: var(--font-body);
color: var(--wcs-text-dark);
line-height: var(--line-height-base);
}
.wcs h1,
.wcs h2,
.wcs h3,
.wcs h4 {
font-family: var(--font-heading);
margin: 0;
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
}
/* Reveal */
.wcs-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--duration-reveal) var(--ease-reveal),
transform var(--duration-reveal) var(--ease-reveal);
}
.wcs-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wcs-d1 {
transition-delay: var(--delay-1);
}
.wcs-d2 {
transition-delay: var(--delay-2);
}
.wcs-d3 {
transition-delay: var(--delay-3);
}
.wcs-d4 {
transition-delay: var(--delay-4);
}
/* Section wrappers */
.wcs-section {
padding: var(--space-10xl) var(--space-3xl);
position: relative;
overflow: hidden;
}
.wcs-inner {
max-width: var(--container-lg);
margin: 0 auto;
position: relative;
z-index: var(--z-content);
}
.wcs-section-light {
background: var(--wcs-white);
}
.wcs-section-cream {
background: var(--wcs-cream);
}
.wcs-section-dark {
background: var(--color-bg-footer);
color: var(--wcs-white);
}
/* Eyebrow */
.wcs-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--wcs-accent);
margin-bottom: var(--space-lg);
}
.wcs-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--wcs-accent);
}
.wcs h2.wcs-heading {
font-size: clamp(var(--font-size-3xl), 4.2vw, 3.3rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-lg);
}
.wcs h2.wcs-heading-xl {
font-size: clamp(2.4rem, 5.4vw, 4.2rem);
font-weight: var(--font-weight-extrabold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--space-xl);
}
.wcs .wcs-section-dark h1,
.wcs .wcs-section-dark h2.wcs-heading,
.wcs .wcs-section-dark h2.wcs-heading-xl,
.wcs .wcs-cta h2,
.wcs .wcs-hero h1 {
color: var(--wcs-white) !important;
}
.wcs .wcs-section-dark h2 em,
.wcs .wcs-cta h2 em,
.wcs .wcs-hero h1 em,
.wcs .wcs-section-light h2 em,
.wcs .wcs-section-cream h2 em {
font-style: normal !important;
color: var(--wcs-accent) !important;
}
.wcs-lede {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: var(--line-height-relaxed);
color: var(--wcs-text-muted);
max-width: 700px;
margin: 0;
}
.wcs-section-dark .wcs-lede {
color: var(--wcs-text-soft-w);
}
/* ============================================================
Webcroo Graphic Design Page — Base, Reset & Section Styles (wcg-)
============================================================ */
.wcg,
.wcg * {
box-sizing: border-box;
}
.wcg a {
text-decoration: none;
color: inherit;
}
.wcg button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.wcg ul {
padding: 0;
margin: 0;
list-style: none;
}
.wcg {
font-family: var(--font-body);
color: var(--wcg-text-dark);
line-height: var(--line-height-base);
}
.wcg h1,
.wcg h2,
.wcg h3,
.wcg h4 {
font-family: var(--font-heading);
margin: 0;
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
}
/* Reveal */
.wcg-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--duration-reveal) var(--ease-reveal),
transform var(--duration-reveal) var(--ease-reveal);
}
.wcg-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wcg-d1 {
transition-delay: var(--delay-1);
}
.wcg-d2 {
transition-delay: var(--delay-2);
}
.wcg-d3 {
transition-delay: var(--delay-3);
}
.wcg-d4 {
transition-delay: var(--delay-4);
}
/* Section wrappers */
.wcg-section {
padding: var(--space-10xl) var(--space-3xl);
position: relative;
overflow: hidden;
}
.wcg-inner {
max-width: var(--container-lg);
margin: 0 auto;
position: relative;
z-index: var(--z-content);
}
.wcg-section-light {
background: var(--wcg-white);
}
.wcg-section-cream {
background: var(--wcg-cream);
}
.wcg-section-dark {
background: var(--color-bg-footer);
color: var(--wcg-white);
}
/* Eyebrow */
.wcg-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--wcg-accent);
margin-bottom: var(--space-lg);
}
.wcg-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--wcg-accent);
}
.wcg h2.wcg-heading {
font-size: clamp(var(--font-size-3xl), 4.2vw, 3.3rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-lg);
}
.wcg h2.wcg-heading-xl {
font-size: clamp(2.4rem, 5.4vw, 4.2rem);
font-weight: var(--font-weight-extrabold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--space-xl);
}
.wcg .wcg-section-dark h1,
.wcg .wcg-section-dark h2.wcg-heading,
.wcg .wcg-section-dark h2.wcg-heading-xl,
.wcg .wcg-cta h2,
.wcg .wcg-hero h1 {
color: var(--wcg-white) !important;
}
.wcg .wcg-section-dark h2 em,
.wcg .wcg-cta h2 em,
.wcg .wcg-hero h1 em,
.wcg .wcg-section-light h2 em,
.wcg .wcg-section-cream h2 em {
font-style: normal !important;
color: var(--wcg-accent) !important;
}
.wcg-lede {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: var(--line-height-relaxed);
color: var(--wcg-text-muted);
max-width: 700px;
margin: 0;
}
.wcg-section-dark .wcg-lede {
color: var(--wcg-text-soft-w);
}
/* ============================================================
Webcroo Digital Marketing Page — Base, Reset & Section Styles (wcm-)
============================================================ */
.wcm,
.wcm * {
box-sizing: border-box;
}
.wcm a {
text-decoration: none;
color: inherit;
}
.wcm button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.wcm ul {
padding: 0;
margin: 0;
list-style: none;
}
.wcm {
font-family: var(--font-body);
color: var(--wcm-text-dark);
line-height: var(--line-height-base);
}
.wcm h1,
.wcm h2,
.wcm h3,
.wcm h4 {
font-family: var(--font-heading);
margin: 0;
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
}
/* Reveal */
.wcm-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--duration-reveal) var(--ease-reveal),
transform var(--duration-reveal) var(--ease-reveal);
}
.wcm-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wcm-d1 {
transition-delay: var(--delay-1);
}
.wcm-d2 {
transition-delay: var(--delay-2);
}
.wcm-d3 {
transition-delay: var(--delay-3);
}
.wcm-d4 {
transition-delay: var(--delay-4);
}
/* Section wrappers */
.wcm-section {
padding: var(--space-10xl) var(--space-3xl);
position: relative;
overflow: hidden;
}
.wcm-inner {
max-width: var(--container-lg);
margin: 0 auto;
position: relative;
z-index: var(--z-content);
}
.wcm-section-light {
background: var(--wcm-white);
}
.wcm-section-cream {
background: var(--wcm-cream);
}
.wcm-section-dark {
background: var(--color-bg-footer);
color: var(--wcm-white);
}
/* Eyebrow */
.wcm-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--wcm-accent);
margin-bottom: var(--space-lg);
}
.wcm-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--wcm-accent);
}
.wcm h2.wcm-heading {
font-size: clamp(var(--font-size-3xl), 4.2vw, 3.3rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-lg);
}
.wcm h2.wcm-heading-xl {
font-size: clamp(2.4rem, 5.4vw, 4.2rem);
font-weight: var(--font-weight-extrabold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--space-xl);
}
.wcm .wcm-section-dark h1,
.wcm .wcm-section-dark h2.wcm-heading,
.wcm .wcm-section-dark h2.wcm-heading-xl,
.wcm .wcm-cta h2,
.wcm .wcm-hero h1 {
color: var(--wcm-white) !important;
}
.wcm .wcm-section-dark h2 em,
.wcm .wcm-cta h2 em,
.wcm .wcm-hero h1 em,
.wcm .wcm-section-light h2 em,
.wcm .wcm-section-cream h2 em {
font-style: normal !important;
color: var(--wcm-accent) !important;
}
.wcm-lede {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: var(--line-height-relaxed);
color: var(--wcm-text-muted);
max-width: 700px;
margin: 0;
}
/* ============================================================
WCCT — CONTACT PAGE BASE
============================================================ */
.wcct,
.wcct * {
box-sizing: border-box;
}
.wcct a {
text-decoration: none;
color: inherit;
transition: color 0.2s ease;
}
.wcct button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.wcct ul {
padding: 0;
margin: 0;
list-style: none;
}
.wcct {
font-family: var(--font-body);
color: var(--wcct-text-dark);
line-height: var(--line-height-base);
}
.wcct h1,
.wcct h2,
.wcct h3,
.wcct h4 {
font-family: var(--font-heading);
margin: 0;
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
}
.wcct-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--duration-reveal) var(--ease-reveal),
transform var(--duration-reveal) var(--ease-reveal);
}
.wcct-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wcct-d1 {
transition-delay: var(--delay-1);
}
.wcct-d2 {
transition-delay: var(--delay-2);
}
.wcct-d3 {
transition-delay: var(--delay-3);
}
.wcct-section {
padding: 6rem var(--space-3xl);
background: var(--wcct-cream);
position: relative;
z-index: 2;
margin-top: -3rem;
}
.wcct-inner {
max-width: var(--container-lg);
margin: 0 auto;
}
.wcct-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--space-5xl);
align-items: start;
}
.wcct-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--wcct-accent);
margin-bottom: var(--space-md);
}
.wcct-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--wcct-accent);
}
.wcct .wcct-cta h2,
.wcct .wcct-hero h1 {
color: var(--wcct-white) !important;
}
.wcct .wcct-cta h2 em,
.wcct .wcct-hero h1 em,
.wcct .wcct-form-head h2 em,
.wcct .wcct-map-card h3 em,
.wcct .wcct-info-main h3 em {
font-style: normal !important;
color: var(--wcct-accent) !important;
}
/* ============================================================
WCCC — COOKIE CONSENT BAR BASE
============================================================ */
.wccc,
.wccc * {
box-sizing: border-box;
}
.wccc a {
color: var(--wccc-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: opacity 0.2s ease;
}
.wccc a:hover {
opacity: 0.8;
}
.wccc button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
}
.wcm-section-dark .wcm-lede {
color: var(--wcm-text-soft-w);
}
/* ============================================================
WCP — PORTFOLIO PAGE BASE
============================================================ */
.wcp,
.wcp * {
box-sizing: border-box;
}
.wcp a {
text-decoration: none;
color: inherit;
transition: color 0.2s ease;
}
.wcp button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.wcp ul {
padding: 0;
margin: 0;
list-style: none;
}
.wcp {
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
color: var(--wcp-text-dark);
line-height: 1.6;
}
.wcp h1,
.wcp h2,
.wcp h3,
.wcp h4 {
font-family: 'Outfit', system-ui, sans-serif;
margin: 0;
line-height: 1.15;
letter-spacing: -0.02em;
}
.wcp-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wcp-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wcp .wcp-cta h2,
.wcp .wcp-hero h1 {
color: var(--wcp-white) !important;
}
.wcp .wcp-cta h2 em,
.wcp .wcp-hero h1 em {
font-style: normal !important;
color: var(--wcp-accent) !important;
}
/* ============================================================
WCB - BLOG PAGE BASE
============================================================ */
.wcb,
.wcb * {
box-sizing: border-box;
}
.wcb a {
text-decoration: none;
color: inherit;
}
.wcb button,
.wcb input {
font: inherit;
}
.wcb {
font-family: var(--font-body);
color: var(--wcb-text-dark);
line-height: var(--line-height-base);
background: var(--wcb-white);
}
.wcb h1,
.wcb h2,
.wcb h3,
.wcb h4 {
font-family: var(--font-heading);
margin: 0;
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
}
.wcb p {
margin: 0;
}
.wcb-reveal {
opacity: 1;
transform: translateY(0);
transition: opacity var(--duration-reveal) var(--ease-reveal),
transform var(--duration-reveal) var(--ease-reveal);
}
.wcb-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.wcb-d1 {
transition-delay: var(--delay-1);
}
.wcb-d2 {
transition-delay: var(--delay-2);
}
.wcb-d3 {
transition-delay: var(--delay-3);
}
.wcb-section {
padding: var(--space-9xl) var(--space-3xl);
position: relative;
}
.wcb-inner {
max-width: var(--container-lg);
margin: 0 auto;
position: relative;
z-index: var(--z-content);
}
.wcb-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--wcb-accent);
margin-bottom: var(--space-lg);
}
.wcb-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--wcb-accent);
}
.wcb .wcb-hero h1,
.wcb .wcb-cta h2 {
color: var(--wcb-white) !important;
}
.wcb .wcb-hero h1 em,
.wcb .wcb-section-head h2 em,
.wcb .wcb-cta h2 em {
font-style: normal !important;
color: var(--wcb-accent) !important;
}