/* ============================================================
MINDVERITAS DESIGN SYSTEM — Version 1.1
The Self-Trust Method
Production-clean, ASCII comments, encoding-safe
============================================================ */
/* 1. DESIGN TOKENS */
:root {
/* Navy / structural */
--mv-navy-900: #0D1124;
--mv-navy-800: #1A1F3A;
--mv-navy-700: #232950;
--mv-navy-600: #2E3666;
--mv-navy-500: #3A4480;
--mv-navy-400: #5A6299;
--mv-navy-300: #8A91B8;
--mv-navy-200: #C0C4DA;
--mv-navy-100: #E0E2EE;
--mv-navy-50: #F0F1F6;
/* Gold / accent */
--mv-gold-900: #3D2800;
--mv-gold-800: #5C3D00;
--mv-gold-700: #7A5200;
--mv-gold-600: #9E6A00;
--mv-gold-500: #C48800;
--mv-gold-400: #D4A847;
--mv-gold-300: #E3C47A;
--mv-gold-200: #EDD8A6;
--mv-gold-100: #F6EDD4;
--mv-gold-50: #FBF6EA;
/* Neutral surfaces */
--mv-sand-light: #FDFCFB;
--mv-sand: #FAF7F4;
--mv-sand-deep: #F0EBE4;
--mv-white: #FFFFFF;
/* CTA (restricted use) */
--mv-rose-cta: #C4617A;
--mv-rose-hover: #B35570;
--mv-rose-light: #F2E8EC;
--mv-rose-muted: #E8D0D8;
/* Text */
--mv-text-primary: #1A1F3A;
--mv-text-secondary: #4A4E6A;
--mv-text-muted: #8A8EA8;
--mv-text-ghost: #C0C4DA;
--mv-text-on-dark: #FFFFFF;
--mv-text-on-dark-2: #C0C4DA;
--mv-text-on-dark-3: #8A91B8;
/* Typography */
--mv-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--mv-font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
--mv-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
/* Type scale */
--mv-text-xs: 10px;
--mv-text-sm: 12px;
--mv-text-base: 14px;
--mv-text-md: 15px;
--mv-text-lg: 17px;
--mv-text-xl: 20px;
--mv-text-2xl: 24px;
--mv-text-3xl: 30px;
--mv-text-4xl: 38px;
--mv-text-5xl: 48px;
--mv-text-6xl: 60px;
/* Line heights */
--mv-leading-tight: 1.15;
--mv-leading-snug: 1.3;
--mv-leading-normal: 1.5;
--mv-leading-body: 1.7;
--mv-leading-loose: 1.85;
/* Letter spacing */
--mv-tracking-tight: -0.01em;
--mv-tracking-normal: 0;
--mv-tracking-wide: 0.04em;
--mv-tracking-wider: 0.08em;
--mv-tracking-widest: 0.18em;
/* Radii */
--mv-radius-sm: 4px;
--mv-radius-md: 8px;
--mv-radius-lg: 14px;
--mv-radius-xl: 20px;
--mv-radius-2xl: 28px;
--mv-radius-pill: 999px;
/* Spacing */
--mv-space-1: 4px;
--mv-space-2: 8px;
--mv-space-3: 12px;
--mv-space-4: 16px;
--mv-space-5: 20px;
--mv-space-6: 24px;
--mv-space-8: 32px;
--mv-space-10:40px;
--mv-space-12:48px;
--mv-space-16:64px;
--mv-space-20:80px;
--mv-space-24:96px;
--mv-space-32:128px;
/* Containers */
--mv-container-sm: 540px;
--mv-container-md: 760px;
--mv-container-lg: 1000px;
--mv-container-xl: 1200px;
/* Transitions */
--mv-transition-fast: 0.12s ease;
--mv-transition-base: 0.18s ease;
--mv-transition-slow: 0.32s ease;
/* Borders and shadows */
--mv-border: 1px solid var(--mv-navy-100);
--mv-border-gold: 1px solid var(--mv-gold-300);
--mv-border-dark: 1px solid rgba(255,255,255,0.08);
}
/* 2. RESET & BASE */
, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--mv-font-body);
font-size: var(--mv-text-md);
line-height: var(--mv-leading-body);
color: var(--mv-text-primary);
background-color: var(--mv-sand);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
/* 3. TYPOGRAPHY */
/* Display — Cormorant Garamond */
.mv-display-xl {
font-family: var(--mv-font-display);
font-size: clamp(var(--mv-text-4xl), 6vw, var(--mv-text-6xl));
font-weight: 600;
line-height: var(--mv-leading-tight);
color: var(--mv-text-primary);
letter-spacing: var(--mv-tracking-tight);
}
.mv-display-lg {
font-family: var(--mv-font-display);
font-size: clamp(var(--mv-text-3xl), 4.5vw, var(--mv-text-5xl));
font-weight: 600;
line-height: var(--mv-leading-tight);
color: var(--mv-text-primary);
}
.mv-display-md {
font-family: var(--mv-font-display);
font-size: clamp(var(--mv-text-2xl), 3.5vw, var(--mv-text-4xl));
font-weight: 600;
line-height: var(--mv-leading-snug);
color: var(--mv-text-primary);
}
.mv-display-sm {
font-family: var(--mv-font-display);
font-size: var(--mv-text-2xl);
font-weight: 600;
line-height: var(--mv-leading-snug);
color: var(--mv-text-primary);
}
.mv-display-italic {
font-family: var(--mv-font-display);
font-style: italic;
font-weight: 400;
color: var(--mv-gold-500);
}
/* Headings — DM Sans */
.mv-h1 { font-family: var(--mv-font-body); font-size: var(--mv-text-3xl); font-weight: 500; line-height: var(--mv-leading-snug); color: var(--mv-text-primary); }
.mv-h2 { font-family: var(--mv-font-body); font-size: var(--mv-text-2xl); font-weight: 500; line-height: var(--mv-leading-snug); color: var(--mv-text-primary); }
.mv-h3 { font-family: var(--mv-font-body); font-size: var(--mv-text-xl); font-weight: 500; line-height: var(--mv-leading-normal); color: var(--mv-text-primary); }
/* Body */
.mv-body-lg { font-size: var(--mv-text-lg); line-height: var(--mv-leading-body); color: var(--mv-text-secondary); }
.mv-body { font-size: var(--mv-text-md); line-height: var(--mv-leading-body); color: var(--mv-text-secondary); }
.mv-body-sm { font-size: var(--mv-text-base); line-height: var(--mv-leading-body); color: var(--mv-text-secondary); }
.mv-caption { font-size: var(--mv-text-sm); line-height: var(--mv-leading-normal); color: var(--mv-text-muted); }
/* Eyebrow / label */
.mv-eyebrow { font-family: var(--mv-font-body); font-size: var(--mv-text-xs); font-weight: 500; letter-spacing: var(--mv-tracking-widest); text-transform: uppercase; color: var(--mv-gold-500); }
.mv-eyebrow-pill { display: inline-block; padding: 5px 14px; border-radius: var(--mv-radius-pill); border: 1px solid rgba(212,168,71,0.4); }
.mv-label { font-size: var(--mv-text-xs); font-weight: 500; letter-spacing: var(--mv-tracking-wide); color: var(--mv-text-muted); text-transform: uppercase; }
/* Dark-surface text modifiers */
.mv-on-dark { color: var(--mv-text-on-dark); }
.mv-on-dark-2 { color: var(--mv-text-on-dark-2); }
.mv-on-dark-3 { color: var(--mv-text-on-dark-3); }
.mv-on-dark .mv-eyebrow { color: var(--mv-gold-400); }
.mv-accent-gold { color: var(--mv-gold-400); }
.mv-accent-gold-strong { color: var(--mv-gold-500); }
/* 4. LAYOUT */
.mv-container { width: 100%; max-width: var(--mv-container-lg); margin-left: auto; margin-right: auto; padding-left: var(--mv-space-6); padding-right: var(--mv-space-6); }
.mv-container-sm { max-width: var(--mv-container-sm); }
.mv-container-md { max-width: var(--mv-container-md); }
.mv-container-xl { max-width: var(--mv-container-xl); }
.mv-section { padding-top: var(--mv-space-20); padding-bottom: var(--mv-space-20); }
.mv-section-sm { padding-top: var(--mv-space-12); padding-bottom: var(--mv-space-12); }
/* Background helpers */
.mv-bg-sand { background-color: var(--mv-sand); }
.mv-bg-sand-light { background-color: var(--mv-sand-light); }
.mv-bg-sand-deep { background-color: var(--mv-sand-deep); }
.mv-bg-white { background-color: var(--mv-white); }
.mv-bg-navy { background-color: var(--mv-navy-800); }
.mv-bg-navy-deep { background-color: var(--mv-navy-900); }
.mv-bg-gold-tint { background-color: var(--mv-gold-50); }
/* Grid helpers */
.mv-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--mv-space-6); }
.mv-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--mv-space-5); }
.mv-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--mv-space-4); }
/* 5. NAVIGATION */
.mv-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--mv-space-5) var(--mv-space-12); background-color: var(--mv-navy-800); }
.mv-nav-sticky { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background-color: rgba(26,31,58,0.95); }
.mv-nav-brand { font-family: var(--mv-font-display); font-size: var(--mv-text-2xl); font-weight: 600; color: var(--mv-white); letter-spacing: 0.02em; }
.mv-nav-brand span { color: var(--mv-gold-400); }
.mv-nav-links { display: flex; align-items: center; gap: var(--mv-space-8); list-style: none; }
.mv-nav-link { font-size: var(--mv-text-sm); color: var(--mv-navy-300); transition: color var(--mv-transition-fast); }
.mv-nav-link:hover { color: var(--mv-white); }
.mv-nav-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--mv-gold-400), transparent); }
/* 6. HERO */
.mv-hero { background-color: var(--mv-navy-800); padding: var(--mv-space-32) var(--mv-space-6) var(--mv-space-24); position: relative; overflow: hidden; }
.mv-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--mv-gold-400), transparent); }
.mv-hero-inner { max-width: var(--mv-container-md); margin: 0 auto; text-align: center; }
.mv-hero-title { font-family: var(--mv-font-display); font-size: clamp(var(--mv-text-3xl), 5.5vw, var(--mv-text-5xl)); font-weight: 600; line-height: var(--mv-leading-tight); color: var(--mv-white); margin: var(--mv-space-6) 0 var(--mv-space-5); }
.mv-hero-title em { color: var(--mv-gold-400); font-style: italic; }
.mv-hero-sub { font-size: var(--mv-text-lg); line-height: var(--mv-leading-body); color: var(--mv-navy-300); max-width: 580px; margin: 0 auto var(--mv-space-10); }
/* Hero glow decorative */
.mv-hero-glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(212,168,71,0.09) 0%, transparent 68%); pointer-events: none; }
/* 7. BUTTONS */
.mv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mv-space-2); font-family: var(--mv-font-body); font-weight: 500; font-size: var(--mv-text-base); padding: 12px var(--mv-space-6); border-radius: var(--mv-radius-md); border: none; cursor: pointer; white-space: nowrap; transition: background-color var(--mv-transition-base), border-color var(--mv-transition-base), transform var(--mv-transition-fast); text-decoration: none; }
.mv-btn:active { transform: scale(0.98); }
/* Primary — navy fill */
.mv-btn-primary { background-color: var(--mv-navy-800); color: var(--mv-white); }
.mv-btn-primary:hover { background-color: var(--mv-navy-700); }
/* Outline */
.mv-btn-outline { background-color: transparent; color: var(--mv-navy-800); border: 1.5px solid var(--mv-navy-200); }
.mv-btn-outline:hover { border-color: var(--mv-navy-600); background-color: var(--mv-navy-50); }
/* Ghost gold */
.mv-btn-ghost-gold { background-color: transparent; color: var(--mv-gold-600); border: 1.5px solid var(--mv-gold-300); }
.mv-btn-ghost-gold:hover { background-color: var(--mv-gold-50); border-color: var(--mv-gold-400); }
/* Ghost white (for dark sections) */
.mv-btn-ghost-white { background-color: transparent; color: var(--mv-white); border: 1.5px solid rgba(255,255,255,0.25); }
.mv-btn-ghost-white:hover { background-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
/* CTA (rose — restricted) */
.mv-btn-cta { background-color: var(--mv-rose-cta); color: var(--mv-white); border-radius: var(--mv-radius-pill); }
.mv-btn-cta:hover { background-color: var(--mv-rose-hover); transform: translateY(-1px); }
/* Pill and sizes */
.mv-btn-pill { border-radius: var(--mv-radius-pill); }
.mv-btn-sm { font-size: var(--mv-text-xs); padding: 8px var(--mv-space-4); }
.mv-btn-lg { font-size: var(--mv-text-md); padding: var(--mv-space-4) var(--mv-space-10); }
/* 8. BADGES & PILLS */
.mv-badge { display: inline-block; font-size: var(--mv-text-xs); font-weight: 500; letter-spacing: 0.05em; padding: 3px var(--mv-space-3); border-radius: var(--mv-radius-pill); white-space: nowrap; }
.mv-badge-navy { background: var(--mv-navy-800); color: var(--mv-navy-100); }
.mv-badge-navy-soft { background: var(--mv-navy-50); color: var(--mv-navy-600); }
.mv-badge-gold { background: var(--mv-gold-400); color: var(--mv-gold-900); }
.mv-badge-gold-soft { background: var(--mv-gold-50); color: var(--mv-gold-700); }
.mv-badge-sand { background: var(--mv-sand-deep); color: var(--mv-navy-600); }
.mv-badge-cta { background: var(--mv-rose-cta); color: var(--mv-white); }
/* 9. CARDS */
.mv-card { background-color: var(--mv-white); border-radius: var(--mv-radius-lg); border: var(--mv-border); padding: var(--mv-space-8); transition: transform var(--mv-transition-base), box-shadow var(--mv-transition-base); }
.mv-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,31,58,0.07); }
.mv-card-dark { background-color: var(--mv-navy-800); border: var(--mv-border-dark); color: var(--mv-white); }
.mv-card-sand { background-color: var(--mv-sand); border: 0.5px solid var(--mv-navy-100); }
.mv-card-gold-tint { background-color: var(--mv-gold-50); border: var(--mv-border-gold); }
/* Accent bar variants — kept for now but consider using subtler alternatives */
.mv-card-accent-gold { border-left: 3px solid var(--mv-gold-400); border-radius: 0 var(--mv-radius-md) var(--mv-radius-md) 0; }
.mv-card-accent-navy { border-left: 3px solid var(--mv-navy-600); border-radius: 0 var(--mv-radius-md) var(--mv-radius-md) 0; }
/* Insight / quote */
.mv-insight-box { background-color: var(--mv-rose-light); border: 1px solid var(--mv-rose-muted); border-left: 4px solid var(--mv-rose-cta); border-radius: 0 var(--mv-radius-md) var(--mv-radius-md) 0; padding: var(--mv-space-5) var(--mv-space-6); }
.mv-insight-box p { font-family: var(--mv-font-display); font-style: italic; font-size: var(--mv-text-lg); line-height: var(--mv-leading-snug); color: var(--mv-navy-800); }
.mv-quote { border-left: 3px solid var(--mv-gold-400); padding: var(--mv-space-4) var(--mv-space-6); background-color: var(--mv-gold-50); border-radius: 0 var(--mv-radius-md) var(--mv-radius-md) 0; }
.mv-quote p { font-family: var(--mv-font-display); font-style: italic; font-size: var(--mv-text-xl); line-height: var(--mv-leading-snug); color: var(--mv-navy-800); }
.mv-quote-attr { font-size: var(--mv-text-sm); color: var(--mv-text-muted); margin-top: var(--mv-space-3); font-weight: 500; }
/* 10. FORMS */
.mv-form-group { margin-bottom: var(--mv-space-4); }
.mv-label { display: block; font-size: var(--mv-text-xs); font-weight: 500; color: var(--mv-navy-700); letter-spacing: var(--mv-tracking-wide); margin-bottom: var(--mv-space-2); }
.mv-input, .mv-textarea, .mv-select {
width: 100%;
padding: 12px var(--mv-space-4);
background-color: var(--mv-sand);
border: 1.5px solid var(--mv-navy-100);
border-radius: var(--mv-radius-md);
font-family: var(--mv-font-body);
font-size: var(--mv-text-base);
color: var(--mv-text-primary);
outline: none;
transition: border-color var(--mv-transition-base), background-color var(--mv-transition-base);
-webkit-appearance: none;
}
.mv-input::placeholder, .mv-textarea::placeholder { color: var(--mv-text-ghost); }
.mv-input:focus, .mv-textarea:focus, .mv-select:focus { border-color: var(--mv-navy-500); background-color: var(--mv-white); }
.mv-textarea { resize: vertical; min-height: 100px; }
.mv-form-card { background-color: var(--mv-white); border-radius: var(--mv-radius-xl); padding: var(--mv-space-12); border: var(--mv-border); max-width: 520px; }
.mv-helper-text { font-size: var(--mv-text-xs); color: var(--mv-text-muted); margin-top: var(--mv-space-2); text-align: center; }
/* 11. DIVIDERS */
.mv-divider { height: 1px; background-color: var(--mv-navy-100); border: none; margin: var(--mv-space-6) 0; }
.mv-divider-gold { background-color: var(--mv-gold-300); }
.mv-divider-gradient { background: linear-gradient(90deg, transparent, var(--mv-gold-400), transparent); height: 1px; border: none; }
.mv-rule-gold { width: 48px; height: 2px; background-color: var(--mv-gold-400); border: none; margin: var(--mv-space-4) 0; }
.mv-rule-center { margin-left: auto; margin-right: auto; }
/* 12. SECTIONS */
.mv-section-dark { background-color: var(--mv-navy-800); position: relative; }
.mv-section-dark::before, .mv-section-dark::after {
content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--mv-gold-400), transparent);
}
.mv-section-gold-tint { background-color: var(--mv-gold-50); border-top: var(--mv-border-gold); border-bottom: var(--mv-border-gold); }
/* 13. FOOTER */
.mv-footer { background-color: var(--mv-navy-900); padding: var(--mv-space-10) var(--mv-space-6) var(--mv-space-8); text-align: center; }
.mv-footer-brand { font-family: var(--mv-font-display); font-size: var(--mv-text-2xl); font-weight: 600; color: var(--mv-white); margin-bottom: var(--mv-space-2); }
.mv-footer-brand span { color: var(--mv-gold-400); }
.mv-footer-tagline { font-size: var(--mv-text-xs); color: var(--mv-navy-400); letter-spacing: var(--mv-tracking-widest); text-transform: uppercase; margin-bottom: var(--mv-space-6); }
.mv-footer-links { display: flex; justify-content: center; gap: var(--mv-space-6); flex-wrap: wrap; margin-bottom: var(--mv-space-6); }
.mv-footer-link { font-size: var(--mv-text-sm); color: var(--mv-navy-400); transition: color var(--mv-transition-fast); }
.mv-footer-link:hover { color: var(--mv-gold-400); }
.mv-footer-copy { font-size: var(--mv-text-xs); color: var(--mv-navy-600); }
/* 14. UTILITIES */
.mv-text-left { text-align: left; }
.mv-text-center { text-align: center; }
.mv-text-right { text-align: right; }
.mv-flex { display: flex; }
.mv-flex-center { display: flex; align-items: center; justify-content: center; }
.mv-flex-between { display: flex; align-items: center; justify-content: space-between; }
.mv-flex-col { display: flex; flex-direction: column; }
.mv-gap-2 { gap: var(--mv-space-2); }
.mv-gap-3 { gap: var(--mv-space-3); }
.mv-gap-4 { gap: var(--mv-space-4); }
.mv-gap-6 { gap: var(--mv-space-6); }
.mv-gap-8 { gap: var(--mv-space-8); }
.mv-overflow-hidden { overflow: hidden; }
.mv-w-full { width: 100%; }
.mv-rounded-sm { border-radius: var(--mv-radius-sm); }
.mv-rounded-md { border-radius: var(--mv-radius-md); }
.mv-rounded-lg { border-radius: var(--mv-radius-lg); }
.mv-rounded-xl { border-radius: var(--mv-radius-xl); }
.mv-rounded-pill { border-radius: var(--mv-radius-pill); }
/* 15. ANIMATIONS */
@keyframes mv-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mv-fade-in { from { opacity: 0; } to { opacity: 1; } }
.mv-animate-fade-up { animation: mv-fade-up 0.6s ease both; }
.mv-animate-fade-in { animation: mv-fade-in 0.5s ease both; }
.mv-delay-1 { animation-delay: 0.1s; }
.mv-delay-2 { animation-delay: 0.2s; }
.mv-delay-3 { animation-delay: 0.3s; }
.mv-delay-4 { animation-delay: 0.4s; }
.mv-delay-5 { animation-delay: 0.5s; }
.mv-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.mv-reveal.is-visible { opacity: 1; transform: translateY(0); }
/* 16. RESPONSIVE */
@media (max-width: 768px) {
:root { --mv-text-5xl: 40px; --mv-text-4xl: 32px; }
.mv-nav { padding: var(--mv-space-4) var(--mv-space-6); }
.mv-section { padding-top: var(--mv-space-16); padding-bottom: var(--mv-space-16); }
.mv-form-card { padding: var(--mv-space-8) var(--mv-space-6); }
.mv-nav-links { display: none; }
.mv-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.mv-grid-2, .mv-grid-3, .mv-grid-4 { grid-template-columns: 1fr; }
.mv-container { padding-left: var(--mv-space-4); padding-right: var(--mv-space-4); }
.mv-hero { padding-top: var(--mv-space-20); }
}
/* End of file — Version 1.1 */
/* USAGE NOTES:
- Add font import in <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
- Save as: mindveritas-designsystem-v1-1-clean.css
- If you want, I can produce a v1.1 minified version next.
*/