/* ============================================================
SHELFOPTIX EXTERNAL STYLE GUIDE
Version: 1.0
Usage:
Fonts required in :
============================================================ */
/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
/* Brand Colors */
--sox-red: #dc2626;
--sox-red-mid: #b91c1c;
--sox-red-dark: #991b1b;
/* Neutrals */
--sox-ink: #111827;
--sox-ink-hero: #0d1117;
--sox-gray-7: #374151;
--sox-gray-6: #4b5563;
--sox-gray-5: #6b7280;
--sox-gray-4: #9ca3af;
--sox-gray-3: #d1d5db;
--sox-gray-2: #e5e7eb;
--sox-gray-1: #f3f4f6;
--sox-gray-0: #f9fafb;
--sox-white: #ffffff;
/* Accent Colors */
--sox-yellow: #f59e0b;
--sox-yellow-dark: #d97706;
--sox-green: #10b981;
--sox-purple: #7c3aed;
/* Background Layers */
--sox-bg-0: #ffffff;
--sox-bg-1: #f9fafb;
--sox-bg-2: #f3f4f6;
/* Typography Scale */
--sox-font-body: 'Barlow', sans-serif;
--sox-font-display: 'Barlow Condensed', sans-serif;
--sox-font-mono: 'JetBrains Mono', monospace;
/* Spacing */
--sox-section-pad: 96px;
--sox-container: 1280px;
--sox-border: 1px solid #e5e7eb;
--sox-radius: 3px;
--sox-radius-md: 4px;
}
/* ── 2. RESET & BASE ──────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--sox-font-body);
background: var(--sox-bg-0);
color: var(--sox-ink);
overflow-x: hidden;
}
/* ── 3. LAYOUT ────────────────────────────────────────────── */
.sox-container {
max-width: var(--sox-container);
margin: 0 auto;
padding: 0 64px;
}
.sox-section {
padding: var(--sox-section-pad) 0;
border-top: var(--sox-border);
}
.sox-section--dark {
background: var(--sox-ink-hero);
border-top: 1px solid rgba(255,255,255,0.05);
}
.sox-section--light {
background: var(--sox-bg-1);
}
.sox-section--alt {
background: var(--sox-bg-2);
}
.sox-section--red {
background: var(--sox-red);
position: relative;
overflow: hidden;
}
.sox-section--red::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg, transparent, transparent 38px,
rgba(0,0,0,.05) 38px, rgba(0,0,0,.05) 39px
);
}
/* Grid helpers */
.sox-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sox-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sox-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
@media (max-width: 900px) {
.sox-container { padding: 0 24px; }
.sox-grid-2,
.sox-grid-3,
.sox-grid-4 { grid-template-columns: 1fr; gap: 24px; }
}
/* ── 4. TYPOGRAPHY ────────────────────────────────────────── */
/* Display / Headlines */
.sox-headline-xl {
font-family: var(--sox-font-display);
font-weight: 900;
font-size: clamp(64px, 8.5vw, 112px);
line-height: .93;
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--sox-white);
}
.sox-headline-lg {
font-family: var(--sox-font-display);
font-weight: 900;
font-size: clamp(34px, 4.5vw, 52px);
text-transform: uppercase;
line-height: 1;
color: var(--sox-ink);
}
.sox-headline-md {
font-family: var(--sox-font-display);
font-weight: 900;
font-size: clamp(28px, 3vw, 38px);
text-transform: uppercase;
line-height: 1;
color: var(--sox-ink);
}
.sox-headline-sm {
font-family: var(--sox-font-display);
font-weight: 800;
font-size: clamp(20px, 2vw, 26px);
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1.1;
color: var(--sox-ink);
}
/* Accent colors on headlines */
.sox-accent-red { color: var(--sox-red); }
.sox-accent-yellow { color: var(--sox-yellow); }
.sox-accent-white { color: var(--sox-white); }
/* Body text */
.sox-body-lg {
font-size: 17px;
font-weight: 300;
line-height: 1.75;
color: var(--sox-gray-5);
}
.sox-body-md {
font-size: 15px;
font-weight: 300;
line-height: 1.8;
color: var(--sox-gray-5);
}
.sox-body-sm {
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: var(--sox-gray-7);
}
.sox-body-xs {
font-size: 13px;
font-weight: 300;
line-height: 1.7;
color: var(--sox-gray-5);
}
/* Strong within body */
.sox-body-lg strong,
.sox-body-md strong,
.sox-body-sm strong { color: var(--sox-ink); font-weight: 500; }
/* Section label / eyebrow */
.sox-label {
font-family: var(--sox-font-mono);
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--sox-red);
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.sox-label::before {
content: '';
display: block;
width: 22px;
height: 1px;
background: var(--sox-red);
}
.sox-label--center {
justify-content: center;
}
.sox-label--center::before,
.sox-label--center::after {
content: '';
display: block;
width: 22px;
height: 1px;
background: var(--sox-red);
}
/* Mono tag badge */
.sox-tag {
display: inline-block;
font-family: var(--sox-font-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sox-red);
background: rgba(220,38,38,.07);
border: 1px solid rgba(220,38,38,.18);
padding: 4px 12px;
border-radius: 2px;
margin-bottom: 20px;
}
/* Stat number */
.sox-stat-num {
font-family: var(--sox-font-display);
font-size: 36px;
font-weight: 800;
color: var(--sox-white);
line-height: 1;
}
.sox-stat-num span { color: var(--sox-red); }
.sox-stat-label {
font-size: 11px;
font-weight: 500;
color: var(--sox-gray-5);
letter-spacing: .07em;
text-transform: uppercase;
margin-top: 5px;
}
/* ── 5. BUTTONS ───────────────────────────────────────────── */
/* Primary red button */
.sox-btn-red {
display: inline-block;
padding: 8px 22px;
border: none;
border-radius: var(--sox-radius);
font-family: var(--sox-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sox-white);
background: var(--sox-red);
cursor: pointer;
text-decoration: none;
transition: background .2s;
}
.sox-btn-red:hover { background: var(--sox-red-mid); }
/* Ghost button */
.sox-btn-ghost {
display: inline-block;
padding: 8px 20px;
border: 1px solid #374151;
border-radius: var(--sox-radius);
font-family: var(--sox-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--sox-gray-3);
background: transparent;
cursor: pointer;
text-decoration: none;
transition: all .2s;
}
.sox-btn-ghost:hover { border-color: var(--sox-red); color: var(--sox-white); }
/* Hero primary button */
.sox-btn-hero-primary {
display: inline-block;
padding: 14px 36px;
font-family: var(--sox-font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
border: none;
border-radius: var(--sox-radius);
cursor: pointer;
text-decoration: none;
transition: all .2s;
background: var(--sox-red);
color: var(--sox-white);
}
.sox-btn-hero-primary:hover {
background: var(--sox-red-mid);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(220,38,38,.35);
}
/* Hero secondary button */
.sox-btn-hero-secondary {
display: inline-block;
padding: 14px 36px;
font-family: var(--sox-font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
border: 1.5px solid rgba(255,255,255,.22);
border-radius: var(--sox-radius);
cursor: pointer;
text-decoration: none;
transition: all .2s;
background: transparent;
color: var(--sox-white);
}
.sox-btn-hero-secondary:hover {
border-color: var(--sox-white);
background: rgba(255,255,255,.06);
}
/* ── 6. CARDS ─────────────────────────────────────────────── */
/* Standard content card */
.sox-card {
background: var(--sox-bg-0);
border: 1px solid var(--sox-gray-2);
padding: 48px 40px;
position: relative;
overflow: hidden;
transition: border-color .2s;
}
.sox-card:hover { border-color: var(--sox-gray-3); }
/* Card with red top accent bar */
.sox-card--accent::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--sox-red);
}
/* Card with red left border on hover */
.sox-card--left-accent {
border-left: 3px solid transparent;
transition: border-color .2s;
}
.sox-card--left-accent:hover { border-left-color: var(--sox-red); }
/* Card with red bottom bar on hover */
.sox-card--bottom-accent::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: transparent;
transition: background .25s;
}
.sox-card--bottom-accent:hover::after { background: var(--sox-red); }
/* Stat metric card */
.sox-metric-card {
background: var(--sox-bg-1);
border: 1px solid var(--sox-gray-2);
padding: 32px 28px;
transition: border-color .2s;
}
.sox-metric-card:hover { border-color: var(--sox-gray-3); }
.sox-metric-icon {
font-size: 28px;
margin-bottom: 14px;
display: block;
transition: transform .2s;
}
.sox-metric-card:hover .sox-metric-icon { transform: scale(1.1); }
.sox-metric-title {
font-family: var(--sox-font-display);
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
color: var(--sox-ink);
margin-bottom: 10px;
letter-spacing: .03em;
}
/* ── 7. STAT CHIPS ────────────────────────────────────────── */
.stat-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 100px;
font-family: var(--sox-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .06em;
border: 1px solid var(--sox-gray-2);
background: var(--sox-bg-1);
color: var(--sox-gray-5);
}
.chip-count {
font-family: var(--sox-font-display);
font-size: 14px;
font-weight: 700;
color: var(--sox-ink);
}
/* Chip color variants */
.stat-chip--red { border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.06); }
.stat-chip--red .chip-count { color: var(--sox-red); }
.stat-chip--green { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.06); }
.stat-chip--green .chip-count { color: var(--sox-green); }
.stat-chip--yellow { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.06); }
.stat-chip--yellow .chip-count { color: var(--sox-yellow); }
.stat-chip--purple { border-color: rgba(124,58,237,.3); background: rgba(124,58,237,.06); }
.stat-chip--purple .chip-count { color: var(--sox-purple); }
/* ── 8. BULLET LISTS ──────────────────────────────────────── */
.sox-bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.sox-bullets li {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 14px;
color: var(--sox-gray-7);
}
.sox-bullets li::before {
content: '→';
color: var(--sox-red);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
/* ── 9. NAVIGATION ────────────────────────────────────────── */
.sox-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
height: 64px;
background: rgba(13,17,23,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sox-nav-links {
display: flex;
gap: 32px;
list-style: none;
font-size: 13px;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
}
.sox-nav-links a {
color: var(--sox-gray-4);
text-decoration: none;
transition: color .2s;
}
.sox-nav-links a:hover { color: var(--sox-white); }
@media (max-width: 900px) {
.sox-nav { padding: 0 20px; }
.sox-nav-links { display: none; }
}
/* ── 10. FORM ELEMENTS ────────────────────────────────────── */
.sox-input {
flex: 1;
padding: 13px 18px;
background: var(--sox-bg-0);
border: 1px solid var(--sox-gray-2);
border-radius: var(--sox-radius);
font-size: 14px;
color: var(--sox-ink);
font-family: var(--sox-font-body);
outline: none;
transition: border-color .2s;
}
.sox-input::placeholder { color: var(--sox-gray-5); }
.sox-input:focus { border-color: var(--sox-red); }
.sox-form-row {
display: flex;
gap: 12px;
max-width: 460px;
margin: 0 auto 16px;
}
@media (max-width: 600px) {
.sox-form-row { flex-direction: column; }
}
/* ── 11. COMPARISON TABLE ─────────────────────────────────── */
.sox-compare-col {
border: 1px solid var(--sox-gray-2);
border-radius: var(--sox-radius-md);
overflow: hidden;
background: var(--sox-bg-0);
}
.sox-compare-col--ours {
border-color: var(--sox-red);
box-shadow: 0 0 0 1px var(--sox-red), 0 20px 48px rgba(220,38,38,.1);
position: relative;
z-index: 1;
}
.sox-compare-head {
padding: 24px 30px;
background: var(--sox-bg-2);
border-bottom: 1px solid var(--sox-gray-2);
}
.sox-compare-col--ours .sox-compare-head { background: var(--sox-red); }
.sox-compare-item {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 14px 30px;
border-bottom: 1px solid var(--sox-gray-2);
font-size: 14px;
line-height: 1.5;
color: var(--sox-gray-7);
}
.sox-compare-item:last-child { border-bottom: none; }
.sox-icon-check {
flex-shrink: 0;
width: 21px; height: 21px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px; font-weight: 700;
margin-top: 1px;
background: rgba(16,185,129,.1);
color: var(--sox-green);
}
.sox-icon-x {
flex-shrink: 0;
width: 21px; height: 21px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px; font-weight: 700;
margin-top: 1px;
background: rgba(239,68,68,.1);
color: #ef4444;
}
/* ── 12. PARTNER / PROOF BAND ─────────────────────────────── */
.sox-partner-badge {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
padding: 28px 40px;
text-align: center;
}
.sox-partner-tag {
font-family: var(--sox-font-mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: #4b5563;
border: 1px solid #1f2937;
padding: 5px 14px;
border-radius: 2px;
}
/* ── 13. FOOTER ───────────────────────────────────────────── */
.sox-footer {
background: var(--sox-ink-hero);
border-top: 1px solid #1f2937;
padding: 64px 0 40px;
}
.sox-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 56px;
}
.sox-footer-col-title {
font-family: var(--sox-font-mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: #4b5563;
margin-bottom: 18px;
}
.sox-footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
}
.sox-footer-links a {
font-size: 14px;
color: var(--sox-gray-5);
text-decoration: none;
transition: color .2s;
}
.sox-footer-links a:hover { color: var(--sox-white); }
.sox-footer-bottom {
border-top: 1px solid #1f2937;
padding-top: 26px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.sox-footer-badge {
font-family: var(--sox-font-mono);
font-size: 10px;
letter-spacing: .09em;
color: #4b5563;
border: 1px solid #1f2937;
padding: 4px 10px;
border-radius: 2px;
}
@media (max-width: 900px) {
.sox-footer-grid { grid-template-columns: 1fr 1fr; }
.sox-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ── 14. TICKER / MARQUEE ─────────────────────────────────── */
.sox-ticker {
background: var(--sox-red);
padding: 13px 0;
overflow: hidden;
white-space: nowrap;
}
.sox-ticker-inner {
display: inline-flex;
animation: soxTickerScroll 32s linear infinite;
}
@keyframes soxTickerScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.sox-ticker-item {
font-family: var(--sox-font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sox-white);
padding: 0 44px;
display: inline-flex;
align-items: center;
gap: 44px;
}
.sox-ticker-item::after {
content: '◆';
font-size: 7px;
opacity: .55;
}
/* ── 15. FEATURE ROW ──────────────────────────────────────── */
.sox-feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--sox-gray-2);
border-radius: var(--sox-radius-md);
overflow: hidden;
}
.sox-feature-row--flip { direction: rtl; }
.sox-feature-row--flip > * { direction: ltr; }
.sox-feature-text {
padding: 52px;
background: var(--sox-bg-0);
display: flex;
flex-direction: column;
justify-content: center;
}
.sox-feature-visual {
background: var(--sox-ink-hero);
position: relative;
min-height: 380px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.sox-feature-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 1024px) {
.sox-feature-row { grid-template-columns: 1fr; }
.sox-feature-row--flip { direction: ltr; }
.sox-feature-visual { min-height: 280px; }
}
/* ── 16. ANIMATIONS ───────────────────────────────────────── */
@keyframes soxFadeUp {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
.sox-fu { opacity: 0; animation: soxFadeUp .65s ease forwards; }
.sox-d1 { animation-delay: .1s; }
.sox-d2 { animation-delay: .25s; }
.sox-d3 { animation-delay: .4s; }
.sox-d4 { animation-delay: .55s; }
.sox-d5 { animation-delay: .7s; }
/* ── 17. UTILITY CLASSES ──────────────────────────────────── */
.sox-text-center { text-align: center; }
.sox-text-white { color: var(--sox-white); }
.sox-text-muted { color: var(--sox-gray-5); }
.sox-text-red { color: var(--sox-red); }
.sox-mb-sm { margin-bottom: 16px; }
.sox-mb-md { margin-bottom: 24px; }
.sox-mb-lg { margin-bottom: 48px; }
.sox-divider { width: 72px; height: 4px; background: var(--sox-red); margin: 32px 0; }
.sox-divider--center { margin: 32px auto; }