/* ============================================================ WIREDHOWSE DESIGN SYSTEM — style-system.css Base: listmonk-setup-guide.html aesthetic Mobile-first. No framework. Drop into any HTML page. K.M. Oubre / WiredHowse DIY Builders ============================================================ */ /* ---- GOOGLE FONTS IMPORT (include in instead if preferred) ---- */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Barlow+Condensed:wght@400;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---- CSS CUSTOM PROPERTIES ---- */ :root { /* Core palette */ --dark: #0a0a0f; --dark2: #111118; --dark3: #1a1a24; --dark4: #0d0d15; /* Blue accent (WiredHowse default) */ --accent: #2563eb; --accent-light: #3b82f6; --accent-dim: rgba(37,99,235,0.15); --accent-border:rgba(37,99,235,0.3); /* DSP overrides (apply .brand-dsp to or wrapper) */ --dsp-gold: #c3ab7e; --dsp-yellow: #fffb34; --dsp-danger: #e53e3e; /* Text */ --text: #e8e6f0; --text-mid: #b0aec8; --text-dim: #7a7890; --text-muted: #4a4a6a; /* Borders */ --rule: rgba(255,255,255,0.07); --rule-strong: rgba(255,255,255,0.12); /* Typography */ --font-display: 'Bebas Neue', sans-serif; --font-body: 'DM Sans', sans-serif; --font-condensed: 'Barlow Condensed', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* Layout */ --max-width: 1080px; --gutter: 20px; --nav-height: 52px; --section-pad-y: 72px; /* Radius */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; /* Transitions */ --trans-fast: 0.15s ease; --trans-med: 0.3s ease; } /* ---- DSP BRAND OVERRIDE ---- */ .brand-dsp { --accent: #c3ab7e; --accent-light: #d4bf96; --accent-dim: rgba(195,171,126,0.12); --accent-border: rgba(195,171,126,0.3); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--dark); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 400; min-height: 100vh; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--accent-light); text-decoration: none; transition: color var(--trans-fast); } a:hover { color: var(--text); } button { cursor: pointer; font-family: var(--font-body); } ul, ol { list-style: none; } /* ============================================================ BACKGROUND VARIANTS ============================================================ */ .bg-dark { background: var(--dark); } .bg-dark2 { background: var(--dark2); } .bg-dark3 { background: var(--dark3); } .bg-field { background: radial-gradient(ellipse at 15% 60%, rgba(37,99,235,0.10) 0%, transparent 55%), radial-gradient(ellipse at 85% 20%, rgba(99,102,241,0.07) 0%, transparent 50%), var(--dark); } .bg-field.brand-dsp, .brand-dsp .bg-field { background: radial-gradient(ellipse at 15% 60%, rgba(195,171,126,0.08) 0%, transparent 55%), radial-gradient(ellipse at 85% 20%, rgba(195,171,126,0.04) 0%, transparent 50%), var(--dark); } .bg-grid { background: linear-gradient(rgba(37,99,235,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,0.035) 1px, transparent 1px), var(--dark); background-size: 44px 44px, 44px 44px, auto; } .brand-dsp .bg-grid { background: linear-gradient(rgba(195,171,126,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(195,171,126,0.03) 1px, transparent 1px), var(--dark); background-size: 44px 44px, 44px 44px, auto; } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .container--wide { max-width: 1280px; } .container--narrow{ max-width: 680px; } .section { padding: var(--section-pad-y) 0; position: relative; } .section--hero { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav-height) + var(--space-xl)); padding-bottom: var(--space-2xl); } /* Two-column grid */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2--wide { grid-template-columns: 1.2fr 1fr; } } /* Feature cards grid */ .grid-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 480px) { .grid-cards { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .grid-cards--4 { grid-template-columns: repeat(4, 1fr); } .grid-cards--3 { grid-template-columns: repeat(3, 1fr); } } /* Stat row */ .stat-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); } .stat-item { text-align: center; } .stat-value { font-family: var(--font-condensed); font-size: clamp(28px, 5vw, 42px); font-weight: 700; color: var(--accent-light); line-height: 1; } .stat-label { font-size: 11px; letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase; margin-top: 4px; } /* ============================================================ NAVIGATION ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: rgba(10,10,15,0.95); border-bottom: 1px solid var(--rule); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 200; display: flex; align-items: center; } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .nav-brand { font-family: var(--font-condensed); font-size: 13px; letter-spacing: 3px; color: var(--accent-light); text-transform: uppercase; font-weight: 700; } .nav-brand img { height: 28px; width: auto; } .nav-links { display: none; gap: var(--space-lg); align-items: center; } @media (min-width: 768px) { .nav-links { display: flex; } } .nav-links a { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-condensed); transition: color var(--trans-fast); } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--accent-light); } /* Mobile hamburger */ .nav-burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; cursor: pointer; } @media (min-width: 768px) { .nav-burger { display: none; } } .nav-burger span { display: block; width: 22px; height: 1px; background: var(--text-mid); transition: var(--trans-med); } /* Mobile menu */ .nav-mobile { position: fixed; top: var(--nav-height); left: 0; right: 0; background: rgba(10,10,15,0.98); border-bottom: 1px solid var(--rule); padding: var(--space-lg) var(--gutter); display: none; flex-direction: column; gap: var(--space-md); z-index: 199; } .nav-mobile.open { display: flex; } .nav-mobile a { font-family: var(--font-condensed); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-mid); padding: var(--space-sm) 0; border-bottom: 1px solid var(--rule); } .nav-mobile a:last-child { border-bottom: none; } /* Nav CTA */ .nav-cta { background: var(--accent); color: white !important; padding: 7px 18px !important; border-radius: var(--radius-sm); letter-spacing: 1.5px !important; } .nav-cta:hover { background: var(--accent-light) !important; color: white !important; } /* Progress bar */ .progress-track { position: fixed; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.04); z-index: 200; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #818cf8); width: 0; transition: width 0.3s ease; } /* ============================================================ TYPOGRAPHY ============================================================ */ .eyebrow { font-family: var(--font-condensed); font-size: 11px; letter-spacing: 5px; color: var(--accent-light); text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-md); } .eyebrow::before, .eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--accent-border); } .display-title { font-family: var(--font-display); font-size: clamp(36px, 8vw, 80px); font-weight: 700; text-transform: uppercase; line-height: 1.0; letter-spacing: -0.5px; color: var(--text); } .display-title em { color: var(--accent-light); font-style: normal; } .display-title .dim { color: var(--text-dim); } .section-title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 44px); font-weight: 700; text-transform: uppercase; line-height: 1.1; color: var(--text); } .section-title em { color: var(--accent-light); font-style: normal; } .section-body { font-size: 15px; line-height: 1.8; color: var(--text-mid); font-weight: 400; max-width: 560px; } .section-body strong { color: var(--text); font-weight: 500; } .section-body p + p { margin-top: var(--space-md); } .divider { width: 40px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); margin: var(--space-md) 0; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-condensed); font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 12px 28px; border-radius: var(--radius-sm); border: none; transition: all var(--trans-med); white-space: nowrap; cursor: pointer; } .btn--primary { background: var(--accent); color: white; } .btn--primary:hover { background: var(--accent-light); color: white; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,99,235,0.3); } .btn--outline { background: transparent; color: var(--accent-light); border: 1px solid var(--accent-border); } .btn--outline:hover { background: var(--accent-dim); border-color: var(--accent-light); color: var(--text); } .btn--ghost { background: rgba(255,255,255,0.06); color: var(--text-mid); border: 1px solid var(--rule); } .btn--ghost:hover { background: rgba(255,255,255,0.10); color: var(--text); } .btn--lg { padding: 14px 36px; font-size: 13px; } .btn--sm { padding: 8px 18px; font-size: 11px; } .btn-group { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); } /* ============================================================ CARDS ============================================================ */ .card { background: var(--dark3); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-lg); transition: all var(--trans-med); position: relative; overflow: hidden; } .card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); } .card--accent { border-color: var(--accent-border); background: linear-gradient(135deg, var(--dark3), rgba(37,99,235,0.04)); } .card-icon { font-size: 28px; margin-bottom: var(--space-md); } .card-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--text); margin-bottom: var(--space-sm); line-height: 1.2; } .card-body { font-size: 13px; color: var(--text-dim); line-height: 1.6; font-weight: 400; } .card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-md); } .tag { font-family: var(--font-mono); font-size: 10px; color: var(--accent-light); background: var(--accent-dim); border: 1px solid var(--accent-border); padding: 2px 8px; border-radius: 2px; letter-spacing: 0.5px; } .tag--gold { color: var(--dsp-gold); background: rgba(195,171,126,0.1); border-color: rgba(195,171,126,0.25); } .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #34d399; margin-right: 6px; box-shadow: 0 0 6px rgba(52,211,153,0.5); } /* ============================================================ FORMS / OPT-IN ============================================================ */ .form-block { background: var(--dark3); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-xl); } .form-group { display: flex; flex-direction: column; gap: var(--space-md); } @media (min-width: 480px) { .form-group--inline { flex-direction: row; } .form-group--inline .form-input { flex: 1; } } .form-input { background: var(--dark2); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 12px 16px; font-family: var(--font-body); font-size: 14px; color: var(--text); transition: border-color var(--trans-fast); width: 100%; outline: none; } .form-input::placeholder { color: var(--text-muted); } .form-input:focus { border-color: var(--accent-border); } .form-fine-print { font-size: 11px; color: var(--text-dim); margin-top: var(--space-md); line-height: 1.6; } .form-label { font-family: var(--font-condensed); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; display: block; } /* ============================================================ ALERT / PROMO BAND ============================================================ */ .promo-band { background: linear-gradient(90deg, rgba(37,99,235,0.15), rgba(37,99,235,0.05)); border: 1px solid var(--accent-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } .promo-band--gold { background: linear-gradient(90deg, rgba(195,171,126,0.12), rgba(195,171,126,0.04)); border-color: rgba(195,171,126,0.3); } .promo-label { font-family: var(--font-condensed); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--dsp-yellow); background: rgba(255,251,52,0.1); border: 1px solid rgba(255,251,52,0.25); padding: 3px 10px; border-radius: 2px; white-space: nowrap; } /* ============================================================ HERO OVERLAY SECTION ============================================================ */ .hero-image-section { position: relative; overflow: hidden; } .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; opacity: 0.35; } .hero-bg-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10,10,15,0.4) 0%, rgba(10,10,15,0.7) 60%, rgba(10,10,15,0.97) 100% ); z-index: 1; } .hero-content { position: relative; z-index: 2; } /* ============================================================ CODE BLOCK ============================================================ */ .code-block { background: var(--dark2); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); font-family: var(--font-mono); font-size: 13px; color: var(--text-mid); line-height: 1.7; overflow-x: auto; } .code-block .kw { color: #818cf8; } .code-block .va { color: #34d399; } .code-block .st { color: #fb923c; } .code-block .cm { color: var(--text-muted); } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--rule); padding: var(--space-xl) 0; margin-top: var(--space-3xl); } .footer-inner { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; text-align: center; } @media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-brand { font-family: var(--font-condensed); font-size: 11px; letter-spacing: 3px; color: var(--accent-light); text-transform: uppercase; } .footer-tagline { font-size: 12px; color: var(--text-dim); margin-top: 4px; font-style: italic; } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; } @media (min-width: 768px) { .footer-links { justify-content: flex-end; } } .footer-links a { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-condensed); } .footer-links a:hover { color: var(--text); } .footer-copy { font-size: 11px; color: var(--text-muted); margin-top: var(--space-md); text-align: center; } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 50% { box-shadow: 0 0 0 8px rgba(59,130,246,0); } } .anim-slide-up { animation: slideUp 0.55s ease forwards; } .anim-fade-in { animation: fadeIn 0.4s ease forwards; } /* Staggered children */ .anim-stagger > * { opacity: 0; animation: slideUp 0.45s ease forwards; } .anim-stagger > *:nth-child(1) { animation-delay: 0.1s; } .anim-stagger > *:nth-child(2) { animation-delay: 0.2s; } .anim-stagger > *:nth-child(3) { animation-delay: 0.3s; } .anim-stagger > *:nth-child(4) { animation-delay: 0.4s; } .anim-stagger > *:nth-child(5) { animation-delay: 0.5s; } .anim-stagger > *:nth-child(6) { animation-delay: 0.6s; } /* Intersection observer trigger (JS adds .visible) */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============================================================ UTILITIES ============================================================ */ .text-center { text-align: center; } .text-left { text-align: left; } .text-accent { color: var(--accent-light); } .text-gold { color: var(--dsp-gold); } .text-yellow { color: var(--dsp-yellow); } .text-dim { color: var(--text-dim); } .text-mid { color: var(--text-mid); } .text-mono { font-family: var(--font-mono); } .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); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .no-mobile { display: none; } @media (min-width: 768px) { .no-mobile { display: revert; } } .mobile-only {} @media (min-width: 768px) { .mobile-only { display: none; } } /* ============================================================ PRINT ============================================================ */ @media print { .site-nav, .nav-mobile, .progress-track { display: none; } body { background: white; color: black; } }