/* Hallmark · macrostructure: Workbench · tone: editorial · anchor hue: 155
* genre: editorial · family: DraftSOS
* design-system: draftsos-family-design.md
*/
/* ============================================
Shared Styles — DraftSOS Family
============================================ */
@import url('tokens.css');
/* ── Font Preconnect ── */
/* Add to HTML :
*/
/* ── Reset ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ── Base ── */
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--text-primary);
background: var(--bg-base);
min-height: 100vh;
overflow-x: hidden;
}
/* ── Typography ── */
h1, h2, h3 {
font-family: var(--font-display);
color: var(--text-primary);
line-height: 1.1;
}
h1 { font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; }
p { color: var(--text-secondary); max-width: 65ch; }
a { color: var(--text-accent); text-decoration: none; transition: opacity var(--duration-fast) var(--ease-default); }
a:hover { opacity: 0.8; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ── Container ── */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
/* ── Glassmorphism ── */
.glass {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
}
.glass-elevated {
background: var(--bg-elevated);
border: 1px solid var(--border-hover);
box-shadow: var(--shadow-2);
border-radius: var(--radius-md);
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 12px 28px;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 500;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
opacity var(--duration-fast) var(--ease-default);
text-decoration: none;
}
.btn-primary {
background: var(--accent);
color: var(--color-paper);
}
.btn-primary:hover {
background: var(--color-accent-dim);
opacity: 0.9;
}
.btn-outline {
background: transparent;
color: var(--accent);
border: 1px solid var(--color-border-default);
}
.btn-outline:hover {
background: var(--color-accent-ghost);
border-color: var(--accent);
opacity: 1;
}
/* ── Badge ── */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--accent);
border: 1px solid var(--color-border-default);
border-radius: 999px;
background: var(--color-accent-ghost);
}
/* ── Section — varied padding ── */
.section {
padding: 4rem 0;
}
.section--tight {
padding: 3rem 0;
}
.section--generous {
padding: 5rem 0;
}
.section--hero {
padding: 6rem 0;
}
/* ── Premium Feature Cards — Asymmetric (first card spans 2 cols) ── */
.feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.feature-card {
position: relative;
background: var(--grad-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: var(--space-xl) var(--space-lg);
transition: border-color var(--duration-base) var(--ease-default),
box-shadow var(--duration-base) var(--ease-default);
overflow: hidden;
}
.feature-card--lead {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: center;
}
.feature-card:hover {
border-color: var(--color-border-default);
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
border-radius: var(--radius-sm);
background: var(--color-accent-ghost);
color: var(--accent);
font-size: 1.25rem;
margin-bottom: var(--space-md);
}
.feature-card h3 {
font-size: 1.125rem;
margin-bottom: var(--space-sm);
}
.feature-card p {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ── Stat Cards (metrics row) ── */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
}
.stat-card {
text-align: center;
padding: var(--space-xl) var(--space-lg);
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
transition: box-shadow var(--duration-base) var(--ease-default);
}
.stat-card:hover { border-color: var(--color-border-default); }
.stat-value {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
letter-spacing: -0.02em;
}
.stat-label {
font-size: 0.875rem;
color: var(--text-muted);
margin-top: 8px;
font-weight: 500;
}
/* ── Premium CTA Buttons ── */
.btn-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--color-paper);
background: var(--accent);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
transition: background var(--duration-base) var(--ease-default),
opacity var(--duration-base) var(--ease-default);
}
.btn-cta:hover {
background: var(--color-accent-dim);
opacity: 1;
}
.btn-cta:active {
opacity: 0.9;
}
/* ── Section Divider ── */
.section-divider {
height: 1px;
background: var(--grad-divider);
border: none;
margin: 0;
}
/* ── Section Header (centered) ── */
.section-header {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-2xl);
}
.section-header .eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-sm);
}
.section-header h2 {
margin-bottom: var(--space-md);
}
.section-header p {
margin: 0 auto;
font-size: 1.0625rem;
}
/* ── Dark Section (testimonials, CTA blocks) ── */
.section-dark {
background: var(--color-void);
color: var(--color-ink);
padding: 5rem 0;
}
.section-dark h2, .section-dark h3 { color: var(--color-ink); }
.section-dark p { color: var(--color-ink-80); }
.section-dark .eyebrow { color: var(--accent); }
/* ── Testimonial Cards — Asymmetric 2-column ── */
.testimonial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.testimonial-grid .testimonial-card:last-child {
grid-column: 1 / -1;
max-width: 560px;
justify-self: center;
}
.testimonial-card {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-xl);
}
.testimonial-card blockquote {
font-size: 1rem;
line-height: 1.7;
color: var(--color-ink-80);
font-style: italic;
margin-bottom: var(--space-md);
}
.testimonial-card blockquote::before { content: '\201C'; font-size: 2rem; color: var(--accent); line-height: 0; vertical-align: -0.3em; margin-right: 4px; }
.testimonial-author {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-ink);
}
.testimonial-role {
font-size: 0.8125rem;
color: var(--color-ink-muted);
}
/* ── Pricing Card — Asymmetric (featured taller) ── */
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: var(--space-lg);
align-items: stretch;
}
.pricing-card {
background: var(--bg-base);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: var(--space-xl);
transition: border-color var(--duration-base) var(--ease-default);
position: relative;
}
.pricing-card:hover {
border-color: var(--color-border-default);
}
.pricing-card.featured {
border-color: var(--accent);
}
.pricing-card.featured::before {
content: 'Most Popular';
position: absolute;
top: -12px; left: 50%; transform: translateX(-50%);
padding: 4px 16px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-paper);
background: var(--accent);
border-radius: 999px;
}
.pricing-price {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
}
.pricing-price .currency { font-size: 1.5rem; vertical-align: super; }
.pricing-period {
font-size: 0.875rem;
color: var(--text-muted);
}
/* ── Scroll Reveal Animations — HERO ONLY ──
* Banned: scroll-triggered fade-up on every section.
* Only .hero .reveal elements animate. All others are visible by default.
*/
.hero .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--duration-reveal) var(--ease-out-expo),
transform var(--duration-reveal) var(--ease-out-expo);
}
.hero .reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* All non-hero .reveal elements: visible by default */
.reveal:not(.hero .reveal) {
opacity: 1;
transform: none;
transition: none;
}
/* Stagger children: add data-reveal-delay="1" through "6" */
[data-reveal-delay="1"] { transition-delay: calc(var(--stagger) * 1); }
[data-reveal-delay="2"] { transition-delay: calc(var(--stagger) * 2); }
[data-reveal-delay="3"] { transition-delay: calc(var(--stagger) * 3); }
[data-reveal-delay="4"] { transition-delay: calc(var(--stagger) * 4); }
[data-reveal-delay="5"] { transition-delay: calc(var(--stagger) * 5); }
[data-reveal-delay="6"] { transition-delay: calc(var(--stagger) * 6); }
/* ── Glass Effect (premium) ── */
.glass-premium {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
}
/* ── Accent Line Decorator ── */
.accent-line-left {
border-left: var(--accent-line-width) solid var(--accent-line);
padding-left: var(--space-md);
}
/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero .reveal {
opacity: 1 !important;
transform: none !important;
}
}
/* ── Mobile Responsive ── */
@media (max-width: 768px) {
.hero { padding: 100px 0 60px; }
.hero-stats { gap: var(--space-lg); flex-wrap: wrap; }
.hero-stat .number { font-size: 1.5rem; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn-cta, .hero-actions .btn-outline { width: 100%; justify-content: center; }
.feature-grid { grid-template-columns: 1fr; }
.feature-grid > :nth-child(1) { grid-column: span 1; }
.feature-card--lead { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.trust-bar { gap: var(--space-lg); }
.pricing-grid { grid-template-columns: 1fr; }
.testimonial-grid { grid-template-columns: 1fr; }
.testimonial-grid .testimonial-card:last-child { grid-column: span 1; max-width: none; }
.stat-value { font-size: 2rem; }
.btn-cta { padding: 14px 28px; width: 100%; justify-content: center; }
}