/* ================================================================
LIVEDEN — Global Brand Stylesheet
Version: 1.0
----------------------------------------------------------------
USAGE: Add this line inside on every LIVEDEN page:
This file controls:
• Brand colors (edit the :root variables below)
• Base font and body styles
• Reusable component classes (cards, buttons, video embeds)
• Custom spacing Tailwind doesn't include by default
================================================================ */
/* ── 1. Google Font Import ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
/* ── 2. Brand Color Variables ─────────────────────────────────── */
/* Edit these hex values to update the brand across all pages */
:root {
--ld-teal: #80b5bb; /* Primary: buttons, links, accents */
--ld-green: #8fb19f; /* Secondary: subtitles, icon circles */
--ld-dark: #1f2937; /* Headings and dark text */
--ld-body: #4b5563; /* Body paragraph text */
--ld-muted: #6b7280; /* Muted / placeholder text */
--ld-subtle: #374151; /* Slightly lighter dark text */
--ld-bg: #f9f9f6; /* Default page background */
--ld-bg-alt: #f4f7f5; /* Alternate section background */
--ld-bg-cta: #eaf2ef; /* CTA section background */
--ld-border: #dfe7e2; /* Card and section borders */
--ld-border-soft: #e5ece8; /* Softer border variant */
}
/* ── 3. Base Reset & Body ─────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--ld-bg);
color: var(--ld-dark);
margin: 0;
min-height: 100vh;
-webkit-font-smoothing: auto;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ── Font Weight Defaults ─────────────────────────────────────── */
h1, h2, h3 { font-weight: 700; }
p, li, a { font-weight: 500; }
a { text-decoration: none; }
/* ── 4. Custom Tailwind Spacing (py-18 / pt-18 / pb-18) ─────── */
/* Tailwind's scale skips 18; this adds it back */
.py-18 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.pt-18 { padding-top: 4.5rem; }
.pb-18 { padding-bottom: 4.5rem; }
.my-18 { margin-top: 4.5rem; margin-bottom: 4.5rem; }
.mt-18 { margin-top: 4.5rem; }
.mb-18 { margin-bottom: 4.5rem; }
/* ── 5. Reusable Card ─────────────────────────────────────────── */
.ld-card {
border-radius: 1.5rem;
border: 1px solid var(--ld-border);
background-color: #fff;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.ld-card-lg {
border-radius: 2rem;
border: 1px solid var(--ld-border);
background-color: #fff;
padding: 2rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}
/* ── 6. Buttons ───────────────────────────────────────────────── */
.ld-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: var(--ld-teal);
padding: 0.875rem 1.75rem;
font-size: 0.875rem;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
color: #fff;
text-decoration: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: opacity 0.2s ease;
cursor: pointer;
border: none;
}
.ld-btn-primary:hover { opacity: 0.9; }
.ld-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid var(--ld-teal);
background-color: #fff;
padding: 0.875rem 1.75rem;
font-size: 0.875rem;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
color: var(--ld-teal);
text-decoration: none;
transition: background-color 0.2s ease;
cursor: pointer;
}
.ld-btn-outline:hover { background-color: var(--ld-bg); }
/* ── 7. Section Eyebrow Labels ────────────────────────────────── */
.ld-eyebrow {
display: block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ld-teal);
}
/* ── 8. Section Headings ──────────────────────────────────────── */
.ld-h1 {
font-size: clamp(2rem, 5vw, 3.75rem);
font-weight: 600;
color: var(--ld-dark);
line-height: 1.15;
margin-top: 1rem;
}
.ld-h2 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 600;
color: var(--ld-dark);
line-height: 1.2;
margin-top: 0.75rem;
}
.ld-h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--ld-dark);
line-height: 1.4;
}
/* ── 9. Body Text ─────────────────────────────────────────────── */
.ld-body-lg {
font-size: 1.125rem;
line-height: 2;
color: var(--ld-body);
}
.ld-body {
font-size: 1rem;
line-height: 1.75;
color: var(--ld-body);
}
.ld-tagline {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ld-green);
}
/* ── 10. Vimeo / Video Embed Wrapper ──────────────────────────── */
/* Usage:
*/
.ld-video-wrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
border-radius: 2rem;
border: 1px solid var(--ld-border);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
}
.ld-video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ── 11. Section Containers ───────────────────────────────────── */
.ld-section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
.ld-container {
max-width: 72rem; /* max-w-6xl */
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (min-width: 768px) {
.ld-container { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 1024px) {
.ld-container { padding-left: 4rem; padding-right: 4rem; }
}
/* ── 12. Icon Circle (decorative dot in cards) ────────────────── */
.ld-icon-dot {
height: 2.5rem;
width: 2.5rem;
border-radius: 9999px;
background-color: color-mix(in srgb, var(--ld-teal) 15%, transparent);
margin-bottom: 1rem;
}
.ld-icon-dot-green {
height: 2.5rem;
width: 2.5rem;
border-radius: 9999px;
background-color: color-mix(in srgb, var(--ld-green) 15%, transparent);
margin-bottom: 1rem;
}