/*
* Conecta Shared Theme CSS
*
* This file provides consistent typography, colors, and base styles
* across all Conecta marketing pages.
*
* Usage:
* 1. Add Google Fonts link to :
*
*
*
*
* 2. Add theme CSS link to (before other component CSS):
*
*/
/* ============================================
CSS VARIABLES (Color Palette & Design Tokens)
============================================ */
:root {
/* Primary Colors (Green) */
--green-900: #004D35;
--green-800: #006847;
--green-700: #1A7D5A;
--green-600: #2A9D6E;
--green-500: #3DBD84;
--green-100: #E6F7F0;
--green-50: #F0FDF7;
/* Accent Colors */
--red-600: #DC2626;
--red-500: #EF4444;
--red-100: #FEE2E2;
--gold-500: #F59E0B;
--gold-400: #FBBF24;
--gold-100: #FEF3C7;
/* Text Colors */
--ink: #1A1A1A;
--ink-light: #4A4A4A;
--ink-muted: #737373;
/* Surface Colors */
--surface: #FFFFFF;
--surface-warm: #FDFCFA;
--surface-cream: #FAF8F3;
/* Border Radius */
--radius: 16px;
--radius-lg: 24px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(42, 103, 55, 0.05);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* ============================================
BASE TYPOGRAPHY
============================================ */
/* Reset & Base */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
margin: 0;
padding: 0;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 1rem;
color: var(--ink);
background: var(--surface);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ============================================
HEADINGS (DM Serif Display)
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: 'DM Serif Display', Georgia, serif;
font-weight: 400;
line-height: 1.15;
color: var(--ink);
margin: 0;
}
h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: -0.01em;
}
h3 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
}
h4 {
font-size: clamp(1.25rem, 2vw, 1.5rem);
line-height: 1.3;
letter-spacing: -0.01em;
}
h5 {
font-size: clamp(1.125rem, 1.5vw, 1.25rem);
line-height: 1.4;
}
h6 {
font-size: 1rem;
line-height: 1.5;
}
/* ============================================
BODY TEXT (DM Sans)
============================================ */
p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--ink-light);
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
margin: 0 0 1em;
}
p.lead {
font-size: 1.2rem;
font-weight: 600;
line-height: 1.4;
color: var(--ink);
}
/* ============================================
LINKS
============================================ */
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ============================================
LISTS
============================================ */
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
/* ============================================
UTILITY CLASSES
============================================ */
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
/* Container utility (common max-width) */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 768px) {
.container {
padding: 0 16px;
}
}