/*
* ═══════════════════════════════════════════════════════════════════════════
* LINX CONSULTING — BASE STYLESHEET
* Shared design system: variables, typography, layout, components, utilities
*
* Font import (add to every page ):
*
*
*
*
* Table of Contents:
* 1. CSS Reset & Root Variables
* 2. Typography
* 3. Layout & Containers
* 4. Buttons
* 5. Badges & Pills
* 6. Cards
* 7. Sections (full-width patterns)
* 8. Animations
* 9. Utilities
* 10. Responsive
* ═══════════════════════════════════════════════════════════════════════════
*/
/* ═══════════════════════════════════════════════════════════════════════════
1. CSS RESET & ROOT VARIABLES
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* --- Brand Colors --- */
--inferno: #A80808; /* primary red — CTAs, urgent actions */
--space-indigo: #1B2845; /* primary navy — headings, backgrounds */
--charcoal: #596065; /* secondary text, muted labels */
--apricot-cream: #E6C79C; /* warm accent — primary buttons, highlights */
--porcelain: #FFFCF9; /* off-white background */
--tech-blue: #7894B4; /* link color, secondary accents */
--tomato-jam: #C23535; /* alternate red (tomato variant) */
--white: #FFFFFF;
/* --- Semantic Aliases --- */
--color-text: #596065; /* default body text */
--color-border: #D8CDCD; /* card borders, dividers */
--color-accent: #c39f76; /* deeper apricot, used in some pages */
--color-success: #355A3F; /* success green (check marks) */
/* --- Shadows --- */
--shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
/* --- Border Radius --- */
--radius: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 999px;
/* --- Transitions --- */
--transition: all 0.3s ease;
}
/* Basic reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
min-width: 100%;
overflow-x: hidden;
}
body {
font-family: 'Raleway', sans-serif;
font-weight: 300;
color: var(--space-indigo);
background-color: #fff;
line-height: 1.5;
}
/* Headings default to heading font + navy */
h1, h2, h3, h4, h5, h6 {
font-family: 'Work Sans', sans-serif;
color: var(--space-indigo);
}
/* Reset lists when used inside components */
ul, ol {
list-style: none;
}
/* Sensible image defaults */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Remove default button styles */
button {
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
/* Remove default link underline */
a {
text-decoration: none;
color: inherit;
}
/* ═══════════════════════════════════════════════════════════════════════════
2. TYPOGRAPHY
═══════════════════════════════════════════════════════════════════════════ */
/* --- Headings — Work Sans --- */
/* H1: 72px / 400 / ls -2px / lh 1.1 */
.font-h1 {
font-family: 'Work Sans', sans-serif;
font-size: 72px;
font-weight: 400;
letter-spacing: -2px;
line-height: 1.1;
}
/* H2: 52px / 400 / ls -1.04px / lh 1.2 */
.font-h2 {
font-family: 'Oswald', sans-serif;
font-size: 52px;
font-weight: 400;
letter-spacing: -0.5px;
line-height: 1.15;
text-transform: uppercase;
}
/* H3: 40px / 400 / ls -0.8px / lh 1.2 */
.font-h3 {
font-family: 'Work Sans', sans-serif;
font-size: 40px;
font-weight: 400;
letter-spacing: -0.8px;
line-height: 1.2;
}
/* H4: 28px / 400 / ls -0.56px / lh 1.3 */
.font-h4 {
font-family: 'Work Sans', sans-serif;
font-size: 28px;
font-weight: 400;
letter-spacing: -0.56px;
line-height: 1.3;
}
/* H5: 22px / 400 / ls -0.44px / lh 1.3 */
.font-h5 {
font-family: 'Work Sans', sans-serif;
font-size: 22px;
font-weight: 400;
letter-spacing: -0.44px;
line-height: 1.3;
}
/* H6: 18px / 400 / ls -0.36px / lh 1.3 */
.font-h6 {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: -0.36px;
line-height: 1.3;
}
/* --- Body Text — Raleway --- */
/* Body Large: 18px / 300 / ls -0.36px / lh 1.55 */
.font-body-lg,
.font-body-large,
.font-body-2 {
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: -0.36px;
line-height: 1.55;
}
/* Body Default: 16px / 300 / ls -0.32px / lh 1.5 */
.font-body,
.font-body-3 {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: -0.32px;
line-height: 1.5;
}
/* Body Small: 14px / 300 / ls -0.28px / lh 1.4 */
.font-body-sm,
.font-body-small {
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 300;
letter-spacing: -0.28px;
line-height: 1.4;
}
/* --- Special Styles --- */
/* Subtitle/Eyebrow: Raleway 15px / 500 / uppercase */
.font-subtitle,
.font-sub-title {
font-family: 'Raleway', sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.3px;
line-height: 1.2;
text-transform: uppercase;
}
/* Caption: Raleway 14px / 300 */
.font-caption {
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 300;
letter-spacing: -0.28px;
line-height: 1.4;
}
/* Quote / Blockquote: Libre Baskerville 18px italic */
.font-quote,
blockquote.font-quote {
font-family: 'Libre Baskerville', serif;
font-size: 18px;
font-weight: 400;
font-style: italic;
line-height: 1.6;
}
/* Section label (small uppercase label above headings) */
.section-label {
font-family: 'Raleway', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
display: block;
margin-bottom: 12px;
}
/* --- Text Color Utilities --- */
.text-indigo { color: var(--space-indigo); }
.text-inferno { color: var(--tomato-jam); }
.text-charcoal { color: var(--charcoal); }
.text-apricot { color: var(--apricot-cream); }
.text-accent { color: var(--color-accent); }
.text-tech-blue { color: var(--tech-blue); }
.text-tomato { color: var(--tomato-jam); }
.text-white { color: var(--white); }
.text-text { color: var(--color-text); }
/* --- Font Weight Utilities --- */
.fw-light { font-weight: 300; }
.fw-regular { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
/* Inline quote box (left-border style) */
.quote-box {
background: var(--porcelain);
border-radius: var(--radius);
padding: 24px;
border-left: 4px solid var(--inferno);
}
.quote-box p {
font-weight: 500;
font-style: italic;
color: var(--space-indigo);
margin-bottom: 0;
}
/* Bio quote (apricot border) */
.bio-quote {
font-style: italic;
padding-left: 24px;
border-left: 3px solid var(--apricot-cream);
margin: 32px 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
3. LAYOUT & CONTAINERS
═══════════════════════════════════════════════════════════════════════════ */
/*
* .container — standard page wrapper
* Max-width 1440px with responsive horizontal padding.
*
* Breakpoints (mobile-first via min-width):
* default → 24px
* ≥ 640px → 40px
* ≥ 768px → 56px
* ≥ 1024px → 80px
* ≥ 1280px → 150px
*/
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
}
@media (min-width: 640px) { .container { padding: 0 40px; } }
@media (min-width: 768px) { .container { padding: 0 56px; } }
@media (min-width: 1024px) { .container { padding: 0 80px; } }
@media (min-width: 1280px) { .container { padding: 0 150px; } }
/*
* Legacy desktop-first notation (used in index.html, about.html).
* Kept as aliases so older pages still resolve correctly.
*/
@media (max-width: 1280px) { .container { padding: 0 80px; } }
@media (max-width: 1024px) { .container { padding: 0 56px; } }
@media (max-width: 768px) { .container { padding: 0 40px; } }
@media (max-width: 640px) { .container { padding: 0 24px; } }
/* Narrow content wrapper (for centered text blocks) */
.container-narrow {
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
}
/* Zoom / image hover helper */
.zoom-container {
overflow: hidden;
border-radius: var(--radius);
}
.zoom-container img {
transition: transform 0.4s ease-out;
width: 100%;
height: 100%;
object-fit: cover;
}
.zoom-container:hover img {
transform: scale(1.08);
}
/* ═══════════════════════════════════════════════════════════════════════════
4. BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
/* --- Base --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px 28px;
border-radius: var(--radius-pill);
font-family: 'Raleway', sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.3px;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: var(--transition);
border: 1px solid transparent;
white-space: nowrap;
}
/* --- Filled Variants --- */
/* Apricot Cream (primary) */
.btn-primary {
background-color: var(--apricot-cream);
color: #000000;
border-color: var(--apricot-cream);
}
.btn-primary:hover {
background-color: var(--white);
color: #000000;
border-color: var(--apricot-cream);
}
/* Inferno Red */
.btn-inferno {
background-color: var(--inferno);
color: var(--white);
border-color: var(--inferno);
}
.btn-inferno:hover {
background-color: var(--white);
color: var(--inferno);
border-color: var(--inferno);
}
/* Space Indigo / Navy */
.btn-navy {
background-color: var(--space-indigo);
color: var(--white);
border-color: var(--space-indigo);
}
.btn-navy:hover {
background-color: var(--white);
color: var(--space-indigo);
border-color: var(--space-indigo);
}
/* Tech Blue */
.btn-tech-blue {
background-color: var(--tech-blue);
color: var(--white);
border-color: var(--tech-blue);
}
.btn-tech-blue:hover {
background-color: var(--white);
color: var(--tech-blue);
border-color: var(--tech-blue);
}
/* Charcoal */
.btn-charcoal {
background-color: var(--charcoal);
color: var(--white);
border-color: var(--charcoal);
}
.btn-charcoal:hover {
background-color: var(--white);
color: var(--charcoal);
border-color: var(--charcoal);
}
/* Secondary (soft gray — used on home page) */
.btn-secondary {
background-color: #9EA4A9;
color: var(--space-indigo);
border-color: #9EA4A9;
}
.btn-secondary:hover {
background-color: var(--white);
color: var(--space-indigo);
border-color: #9EA4A9;
}
/* --- Outlined Variants --- */
.btn-outline-primary {
background-color: transparent;
color: var(--apricot-cream);
border: 1px solid var(--apricot-cream);
}
.btn-outline-primary:hover {
background-color: var(--apricot-cream);
color: #000000;
}
.btn-outline-inferno {
background-color: transparent;
color: var(--inferno);
border: 1px solid var(--inferno);
}
.btn-outline-inferno:hover {
background-color: var(--inferno);
color: var(--white);
}
.btn-outline-navy {
background-color: transparent;
color: var(--space-indigo);
border: 1px solid var(--space-indigo);
}
.btn-outline-navy:hover {
background-color: var(--space-indigo);
color: var(--white);
}
.btn-outline-tech-blue {
background-color: transparent;
color: var(--tech-blue);
border: 1px solid var(--tech-blue);
}
.btn-outline-tech-blue:hover {
background-color: var(--tech-blue);
color: var(--white);
}
.btn-outline-charcoal {
background-color: transparent;
color: var(--charcoal);
border: 1px solid var(--charcoal);
}
.btn-outline-charcoal:hover {
background-color: var(--charcoal);
color: var(--white);
}
.btn-outline-white {
background-color: transparent;
color: var(--white);
border: 1px solid var(--white);
}
.btn-outline-white:hover {
background-color: var(--white);
color: var(--space-indigo);
}
/* --- Size Modifiers --- */
/* Small: 10px 18px / 13px */
.btn-sm {
padding: 10px 18px;
font-size: 13px;
}
/* Large: 22px 36px / 17px */
.btn-lg {
padding: 22px 36px;
font-size: 17px;
}
/* XL: 26px 44px / 19px */
.btn-xl {
padding: 26px 44px;
font-size: 19px;
}
/* --- Block --- */
.btn-block {
width: 100%;
}
/* --- Button with SVG Icon --- */
.btn-icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-icon svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* --- Circle Buttons --- */
.btn-circle {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0;
transition: var(--transition);
cursor: pointer;
border: 1px solid transparent;
flex-shrink: 0;
}
.btn-circle-sm { width: 40px; height: 40px; }
.btn-circle-md { width: 48px; height: 48px; }
.btn-circle-lg { width: 56px; height: 56px; }
.btn-circle.btn-primary {
background-color: var(--apricot-cream);
color: #000;
border-color: var(--apricot-cream);
}
.btn-circle.btn-primary:hover {
background-color: var(--white);
color: var(--apricot-cream);
}
.btn-circle.btn-navy {
background-color: var(--space-indigo);
color: var(--white);
border-color: var(--space-indigo);
}
.btn-circle.btn-navy:hover {
background-color: var(--white);
color: var(--space-indigo);
}
.btn-circle.btn-inferno {
background-color: var(--inferno);
color: var(--white);
border-color: var(--inferno);
}
.btn-circle.btn-inferno:hover {
background-color: var(--white);
color: var(--inferno);
}
/* --- Social Pill Button --- */
.btn-social-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-pill);
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 500;
background-color: var(--apricot-cream);
color: var(--space-indigo);
border: 1px solid var(--apricot-cream);
cursor: pointer;
text-decoration: none;
transition: var(--transition);
}
.btn-social-pill:hover {
background-color: var(--space-indigo);
color: var(--white);
border-color: var(--space-indigo);
}
/* SVG icon fill follows button color on hover */
.btn-social-pill:hover svg path,
.btn-social-pill:hover svg rect,
.btn-social-pill:hover svg circle,
.btn-social-pill:hover svg polygon,
.btn-social-pill:hover svg g {
fill: var(--white);
}
/* --- Social Circle Button --- */
.btn-social-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--apricot-cream);
color: var(--space-indigo);
border: 1px solid var(--apricot-cream);
cursor: pointer;
text-decoration: none;
transition: var(--transition);
flex-shrink: 0;
}
.btn-social-circle:hover {
background-color: var(--space-indigo);
border-color: var(--space-indigo);
}
.btn-social-circle:hover svg path,
.btn-social-circle:hover svg rect,
.btn-social-circle:hover svg circle,
.btn-social-circle:hover svg polygon,
.btn-social-circle:hover svg g {
fill: var(--white);
}
/* --- Social Link (small rounded icon, about page style) --- */
.social-link {
width: 32px;
height: 32px;
background: var(--apricot-cream);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--space-indigo);
text-decoration: none;
transition: opacity 0.3s;
}
.social-link:hover {
opacity: 0.8;
}
.social-link svg {
width: 16px;
height: 16px;
}
/* --- Button Row/Column Layout Helpers --- */
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.btn-col {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ═══════════════════════════════════════════════════════════════════════════
5. BADGES & PILLS
═══════════════════════════════════════════════════════════════════════════ */
/* --- Base Badge (Libre Baskerville pill) --- */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px 10px 10px;
background-color: var(--porcelain);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
font-family: 'Libre Baskerville', serif;
font-size: 11px;
color: var(--space-indigo);
white-space: nowrap;
}
/* --- Badge Color Variants --- */
.badge-indigo {
background-color: var(--space-indigo);
border-color: var(--space-indigo);
color: var(--white);
}
.badge-inferno {
background-color: rgba(168, 8, 8, 0.08);
border-color: rgba(168, 8, 8, 0.3);
color: var(--inferno);
}
.badge-tech-blue {
background-color: transparent;
border-color: rgba(91, 130, 145, 0.3);
color: var(--tech-blue);
}
.badge-champagne {
background-color: var(--apricot-cream);
border-color: var(--apricot-cream);
color: var(--space-indigo);
}
/* --- Service Eyebrow Badge (page-level badge above hero h1) --- */
.badge-eyebrow {
display: inline-flex;
align-items: center;
background: transparent;
border: 1px solid rgba(91, 130, 145, 0.3);
color: var(--tech-blue);
font-family: 'Raleway', sans-serif;
font-size: 13px;
font-weight: 500;
padding: 8px 16px;
border-radius: var(--radius-pill);
width: fit-content;
}
/* Dark background eyebrow (navy hero sections) */
.badge-eyebrow-dark {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--apricot-cream);
font-family: 'Raleway', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding: 8px 16px;
border-radius: var(--radius-pill);
width: fit-content;
}
/* --- Badge Container (flex wrap row) --- */
.badges-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ═══════════════════════════════════════════════════════════════════════════
6. CARDS
═══════════════════════════════════════════════════════════════════════════ */
/* --- Base Card --- */
.card {
background-color: var(--porcelain);
border-radius: var(--radius);
overflow: hidden;
}
/* White card with border */
.card-bordered {
background: var(--white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* Rounded card (lg radius — stats, hero cards) */
.card-rounded {
background: var(--white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 32px;
}
/* --- Feature Card (about section: icon + text row) --- */
.feature-card {
display: flex;
gap: 22px;
padding: 34px;
background: var(--porcelain);
border-radius: var(--radius);
}
.feature-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
}
.feature-content h3 {
margin-bottom: 12px;
}
/* --- Testimonial Card --- */
.testimonial-card {
background: var(--porcelain);
border-radius: var(--radius);
padding: 30px 34px;
}
.testimonial-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 40px;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.testimonial-author h4 {
font-weight: 500;
font-size: 15px;
color: var(--space-indigo);
margin: 0;
line-height: 1.2;
}
.testimonial-author p {
font-size: 14px;
color: var(--color-text);
margin: 0;
line-height: 1.2;
}
.testimonial-text {
font-size: 16px;
color: var(--color-text);
margin-bottom: 20px;
line-height: 1.5;
}
.stars {
display: flex;
gap: 2px;
color: #f5a623;
font-size: 14px;
}
/* --- Stat Card (small inline stat) --- */
.stat-card {
background: var(--white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 20px 24px;
text-align: center;
}
.stat-card .stat-value {
font-family: 'Work Sans', sans-serif;
font-size: 32px;
font-weight: 400;
color: var(--color-accent);
letter-spacing: -0.8px;
line-height: 1;
margin-bottom: 4px;
}
.stat-card .stat-label {
font-size: 14px;
color: var(--color-text);
}
/* Stat divider (vertical line between stat items) */
.stat-divider {
display: none;
}
/* --- Value Card (about/values section) --- */
.value-card {
background: var(--white);
border: none;
border-radius: var(--radius);
padding: 32px;
text-align: center;
}
.value-icon {
width: 36px;
height: 36px;
display: block;
margin-bottom: 20px;
}
.value-icon svg {
width: 36px;
height: 36px;
color: var(--space-indigo);
}
.value-card h3 {
margin-bottom: 12px;
}
/* --- Feature Card (connect/services: icon top, text below) --- */
.feature-card-v {
background: var(--porcelain);
border-radius: var(--radius);
padding: 24px;
border: 1px solid transparent;
transition: border-color 0.3s ease;
}
.feature-card-v:hover {
border-color: var(--color-border);
}
.feature-card-v-inner {
display: flex;
align-items: flex-start;
gap: 16px;
}
.feature-card-v-icon {
width: 48px;
height: 48px;
background: rgba(168, 8, 8, 0.1);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.3s ease;
}
.feature-card-v:hover .feature-card-v-icon {
background: var(--inferno);
}
.feature-card-v-icon svg {
width: 20px;
height: 20px;
color: var(--inferno);
transition: color 0.3s ease;
}
.feature-card-v:hover .feature-card-v-icon svg {
color: var(--white);
}
.feature-card-v-title {
font-family: 'Work Sans', sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--space-indigo);
margin-bottom: 8px;
}
.feature-card-v-text {
font-size: 14px;
color: var(--color-text);
line-height: 1.5;
}
/* --- Process / How It Works Step --- */
.process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
position: relative;
}
.process-number {
width: 48px;
height: 48px;
background: var(--apricot-cream);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Work Sans', sans-serif;
font-size: 20px;
font-weight: 500;
color: var(--space-indigo);
flex-shrink: 0;
position: relative;
z-index: 2;
}
.process-title {
font-family: 'Work Sans', sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--white);
}
.process-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
max-width: 220px;
}
/* --- Pricing Tier Card --- */
.pricing-tier-card {
background: var(--porcelain);
border: 1.5px solid var(--color-border);
border-radius: 16px;
padding: 24px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.pricing-tier-card:hover {
border-color: var(--tech-blue);
box-shadow: 0 4px 20px rgba(120, 148, 180, 0.15);
}
/* --- Accordion (mission section) --- */
.accordion-container {
background: var(--porcelain);
border-radius: var(--radius);
padding: 50px;
}
.accordion-title {
margin-bottom: 20px;
}
.accordion-item {
border-bottom: 1px solid var(--color-border);
}
.accordion-trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: color 0.3s;
font-family: 'Work Sans', sans-serif;
font-size: 18px;
color: var(--space-indigo);
}
.accordion-trigger:hover,
.accordion-trigger.is-open,
.accordion-trigger.active {
color: var(--tomato-jam);
}
.accordion-trigger svg {
transition: transform 0.3s;
flex-shrink: 0;
}
.accordion-trigger.active svg {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.open {
max-height: 400px;
}
.accordion-content p {
padding-bottom: 20px;
color: var(--color-text);
}
@media (max-width: 768px) {
.accordion-container { padding: 24px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
7. SECTIONS (full-width patterns)
═══════════════════════════════════════════════════════════════════════════ */
/*
* Full-bleed section technique: breaks out of the container to span 100vw.
* Apply to the element directly (not the inner container).
*
* Two syntaxes in use across the codebase:
* A) vw/calc pattern (service pages):
* width: 100vw; margin-left: calc(-50vw + 50%);
* B) absolute-width pattern (home/about):
* position: relative; width: 100%;
* ::before { width: 100vw; left: 50%; transform: translateX(-50%); }
*
* .section-full-width uses the simpler vw/calc approach.
*/
.section-full-width {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
/* Legacy full-bleed via absolute pseudo-element (home/about style) */
.section-full-bleed {
position: relative;
width: 100%;
}
.section-full-bleed::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
width: 100vw;
left: 50%;
transform: translateX(-50%);
}
.section-full-bleed > * {
position: relative;
z-index: 1;
}
/* --- Section Backgrounds --- */
.section-white { background: var(--white); }
.section-porcelain { background: var(--porcelain); }
.section-indigo { background: var(--space-indigo); }
/* Porcelain via pseudo (for home/about full-bleed style) */
.section-full-bleed.section-porcelain::before { background: var(--porcelain); }
.section-full-bleed.section-white::before { background: var(--white); }
.section-full-bleed.section-indigo::before { background: var(--space-indigo); }
/* --- Standard Section Padding --- */
.section-pad { padding: 120px 0; }
.section-pad-md { padding: 80px 0; }
.section-pad-sm { padding: 50px 0; }
@media (max-width: 1024px) {
.section-pad { padding: 80px 0; }
}
/* --- Section Header Patterns --- */
/* Centered header (used in why, testimonials, values, audience, etc.) */
.section-header-center {
text-align: center;
max-width: 900px;
margin: 0 auto 80px;
}
.section-header-center .font-sub-title,
.section-header-center .font-subtitle {
margin-bottom: 20px;
}
.section-header-center .font-h2 {
margin-bottom: 20px;
}
@media (max-width: 1024px) {
.section-header-center { margin-bottom: 48px; }
}
/* Left-aligned header (used in services, story, mission) */
.section-header-left {
margin-bottom: 50px;
}
.section-header-left .font-sub-title,
.section-header-left .font-subtitle {
margin-bottom: 16px;
}
.section-header-left .font-h3 {
margin-bottom: 16px;
}
/* Two-column header (services, pillars) */
.section-header-split {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 80px;
gap: 32px;
flex-wrap: wrap;
}
.section-header-split-text {
max-width: 610px;
}
@media (max-width: 1024px) {
.section-header-split {
flex-direction: column;
align-items: flex-start;
margin-bottom: 48px;
}
}
/* --- Page Hero (interior pages: about, services) --- */
/*
* Full-bleed hero with background image + gradient overlay.
* Uses margin-left / margin-right: -50vw to break out of container.
*/
.page-hero {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 176px 0;
overflow: hidden;
background: var(--porcelain);
}
/* Background image layer */
.page-hero::after {
content: '';
position: absolute;
inset: 0;
background: url("https://linxconsulting.com/wp-content/uploads/2025/12/Website-Hero-Background.png") center/cover no-repeat;
z-index: 0;
}
/* Gradient overlay (light fade over image) */
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(251, 249, 249, 0.8) 0%, rgba(251, 249, 249, 1) 100%);
z-index: 1;
}
/* Content sits above both pseudo layers */
.page-hero .container {
position: relative;
z-index: 2;
text-align: center;
padding: 0 24px;
}
.page-hero-subtitle {
max-width: 400px;
margin: 0 auto;
}
@media (max-width: 768px) {
.page-hero { padding: 120px 0; }
}
/* --- Home Hero (full-width image background, centered content) --- */
.hero {
position: relative;
width: 100%;
min-height: 700px;
display: flex;
align-items: center;
justify-content: center;
background: none;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: url('https://linxconsulting.com/wp-content/uploads/2025/12/Business-District-Hero.png') center/cover no-repeat;
}
.hero-container {
position: relative;
z-index: 1;
}
.hero-content {
text-align: center;
max-width: 870px;
margin: 0 auto;
}
.hero-title {
margin-bottom: 20px;
}
.hero-subtitle {
max-width: 600px;
margin: 0 auto;
}
.hero-buttons {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 40px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.hero { min-height: 500px; }
.hero-buttons { flex-direction: column; align-items: center; }
.hero-buttons .btn { width: 100%; max-width: 280px; }
}
/* --- CTA Section (navy full-bleed, centered text + buttons) --- */
.cta-section {
position: relative;
width: 100%;
padding: 88px 0;
background: none;
}
.cta-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: var(--space-indigo);
}
.cta-content {
position: relative;
z-index: 1;
text-align: center;
}
.cta-content .font-sub-title,
.cta-content .font-subtitle {
color: var(--white);
margin-bottom: 20px;
}
.cta-content .font-h1,
.cta-content .font-h2 {
color: var(--white);
margin-bottom: 20px;
}
.cta-content > p {
color: var(--white);
max-width: 688px;
margin: 0 auto 40px;
}
.cta-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.cta-section { padding: 80px 0; }
.cta-buttons { flex-direction: column; align-items: center; }
.cta-buttons .btn { width: 100%; max-width: 280px; }
}
/* --- Stats Band (navy background, centered stats row) --- */
.stats-section {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: #fff;
padding: 50px 0 100px;
}
.stats-section .font-sub-title,
.stats-section .font-subtitle {
text-align: center;
margin-bottom: 32px;
color: var(--tech-blue);
}
.stats-grid {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 32px;
}
.stat-item {
display: flex;
align-items: center;
height: 160px;
}
.stat-content {
text-align: center;
width: 220px;
background: rgba(120,148,180,0.08);
border: 1px solid rgba(120,148,180,0.15);
border-radius: 16px;
padding: 28px 20px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.stat-content h3 {
color: var(--inferno);
margin-bottom: 4px;
}
.stat-content p {
color: var(--charcoal);
white-space: pre-line;
}
@media (max-width: 1024px) {
.stat-divider { display: none; }
.stat-content { width: 180px; }
}
/* --- Logo Slider (white band) --- */
.logo-slider {
width: 100%;
background: var(--white);
padding: 60px 0;
}
.logo-slider-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 57px;
overflow-x: auto;
}
.logo-slider img {
height: 100px;
object-fit: contain;
flex-shrink: 0;
}
.logo-divider {
width: 1px;
height: 60px;
background: #e5e5e5;
flex-shrink: 0;
}
@media (max-width: 1024px) {
.logo-slider-inner { justify-content: flex-start; gap: 32px; padding-bottom: 16px; }
.logo-divider { display: none; }
.logo-slider img { height: 30px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
8. ANIMATIONS
═══════════════════════════════════════════════════════════════════════════ */
/*
* Scroll-triggered reveal. JavaScript adds a trigger class when element
* enters the viewport.
*
* Trigger class names vary by page:
* - .in-view (index.html, about.html)
* - .animated (linxconnect.html)
* - .visible (alternate usage)
*
* All three are handled below.
*/
/* Base: hidden, no movement applied yet */
.animate-on-scroll {
opacity: 0;
transition:
opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Direction modifiers (set initial transform) */
.animate-on-scroll.animate-up { transform: translateY(60px); }
.animate-on-scroll.animate-down { transform: translateY(-60px); }
.animate-on-scroll.animate-left { transform: translateX(60px); }
.animate-on-scroll.animate-right { transform: translateX(-60px); }
/* Default (no direction): fade up slightly */
.animate-on-scroll:not(.animate-up):not(.animate-down):not(.animate-left):not(.animate-right) {
transform: translateY(30px);
}
/* Revealed — all three trigger class names */
.animate-on-scroll.in-view,
.animate-on-scroll.animated,
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0) translateX(0);
}
/* --- Staggered Item Animation --- */
/*
* Apply .animate-item to a list of children.
* Each child delays by its nth-child index.
* Trigger class: .in-view (same as animate-on-scroll)
*/
.animate-item {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animate-item.in-view,
.animate-item.animated,
.animate-item.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger via nth-child */
.animate-item:nth-child(1) { transition-delay: 0.1s; }
.animate-item:nth-child(2) { transition-delay: 0.2s; }
.animate-item:nth-child(3) { transition-delay: 0.3s; }
.animate-item:nth-child(4) { transition-delay: 0.4s; }
.animate-item:nth-child(5) { transition-delay: 0.5s; }
.animate-item:nth-child(6) { transition-delay: 0.6s; }
.animate-item:nth-child(7) { transition-delay: 0.7s; }
.animate-item:nth-child(8) { transition-delay: 0.8s; }
/* --- Explicit Delay Classes (linxconnect.html style) --- */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }
.animate-delay-6 { transition-delay: 0.6s; }
/* ═══════════════════════════════════════════════════════════════════════════
9. UTILITIES
═══════════════════════════════════════════════════════════════════════════ */
/* --- Text Alignment --- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* --- Display --- */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-flex { display: inline-flex; }
/* --- Flex Helpers --- */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
/* --- Gap Helpers --- */
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }
/* --- Width Helpers --- */
.w-full { width: 100%; }
.w-fit { width: fit-content; }
.max-w-sm { max-width: 400px; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 900px; }
.max-w-2xl { max-width: 1140px; }
/* --- Margin Helpers --- */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }
.mb-80 { margin-bottom: 80px; }
/* --- Padding Helpers --- */
.p-0 { padding: 0; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }
.px-24 { padding-left: 24px; padding-right: 24px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
/* --- Divider --- */
.divider {
border: none;
border-top: 1px solid var(--color-border);
margin: 40px 0;
}
/* --- Decorative title bar (apricot underline) --- */
.title-bar {
width: 40px;
height: 3px;
background-color: var(--apricot-cream);
border-radius: 2px;
margin-bottom: 40px;
}
/* --- Image placeholder (before images are loaded) --- */
.img-placeholder {
background: var(--charcoal);
border-radius: var(--radius);
overflow: hidden;
}
.img-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- Overflow hidden (clip images) --- */
.overflow-hidden { overflow: hidden; }
/* --- Sticky --- */
.sticky-top {
position: sticky;
top: 128px;
}
/* --- Accessibility: screen-reader only --- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* --- Emphasis text --- */
.text-emphasis {
font-weight: 500;
color: var(--space-indigo);
}
/* --- Count-up number (animated stats) --- */
.count-up {
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════════════════
10. RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
/* --- Typography Scaling at 1024px --- */
@media (max-width: 1024px) {
.font-h1 { font-size: 48px; }
.font-h2 { font-size: 36px; }
.font-h3 { font-size: 28px; }
.font-h4 { font-size: 22px; }
}
/* --- Typography Scaling at 640px --- */
@media (max-width: 640px) {
.font-h1 { font-size: 36px; }
.font-h2 { font-size: 28px; }
.font-h3 { font-size: 24px; }
.font-h4 { font-size: 20px; }
.font-h5 { font-size: 20px; }
}
/* --- Section Padding Scaling --- */
@media (max-width: 1024px) {
.section-pad { padding: 80px 0; }
}
@media (max-width: 768px) {
.section-pad { padding: 60px 0; }
.section-pad-md { padding: 60px 0; }
.cta-section { padding: 80px 0; }
}
/* --- Grid Collapse Patterns --- */
/* 3-col → 2-col → 1-col */
@media (max-width: 1024px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.grid-3 { grid-template-columns: 1fr; }
}
/* 4-col → 2-col → 1-col */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.grid-4 { grid-template-columns: 1fr; }
}
/* 2-col → 1-col */
@media (max-width: 768px) {
.grid-2 { grid-template-columns: 1fr; }
}
/* --- Responsive Visibility --- */
@media (max-width: 768px) {
.hide-mobile { display: none; }
}
@media (min-width: 769px) {
.hide-desktop { display: none; }
}
/* --- CTA buttons stack on mobile --- */
@media (max-width: 768px) {
.cta-buttons,
.hero-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn,
.hero-buttons .btn {
width: 100%;
max-width: 280px;
}
}