/* ============================================================ CARBOTURA main.css — Layout, resets, typography Imports tokens. All values reference CSS custom properties. ============================================================ */ /* NOTE: In production, replace local tokens with CDN: @import url('https://brand.carbotura.com/assets/v2/tokens/tokens.css'); For now, tokens.css is loaded as a separate in every page . */ /* ── Google Fonts (fallback until self-hosted on brand CDN) ── */ @import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--cb-dark); background: var(--cb-page); padding-top: var(--topbar-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } ul, ol { list-style: none; } h1,h2,h3,h4,h5,h6 { line-height: 1.2; font-weight: 700; } table { border-collapse: collapse; width: 100%; } input, textarea, select { font-family: inherit; font-size: inherit; border: none; background: none; outline: none; } /* ── Layout Containers ── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--sp-6); } @media (max-width: 768px) { .container { padding: 0 var(--sp-4); } } .container--narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--sp-6); } /* ── Section Wrapper ── */ .section { padding: var(--section-pad-v) 0; } .section--dark { background: var(--cb-slate); color: var(--cb-white); } .section--darkest { background: #070910; color: var(--cb-white); } .section--mid { background: var(--cb-dark); color: var(--cb-white); } .section--surface { background: var(--cb-surface); } .section--emerald { background: var(--cb-emerald); color: var(--cb-white); } /* ── Typography ── */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-emerald); margin-bottom: var(--sp-3); display: block; } .section--dark .eyebrow, .section--darkest .eyebrow, .section--mid .eyebrow { color: var(--cb-emerald); } .section-title { font-family: var(--font-brand); font-size: var(--text-section); font-weight: 400; color: var(--cb-dark); margin-bottom: var(--sp-4); line-height: 1.15; } .section--dark .section-title, .section--darkest .section-title, .section--mid .section-title { color: var(--cb-white); } .section-subtitle { font-size: var(--text-lg); color: var(--cb-mid); max-width: 640px; line-height: 1.65; font-weight: 300; } .section--dark .section-subtitle, .section--mid .section-subtitle { color: rgba(255,255,255,0.65); } .section-header { margin-bottom: var(--sp-12); } .section-header--center { text-align: center; } .section-header--center .section-subtitle { margin: 0 auto; } /* ── Grid ── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } @media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ── Scroll Reveal Animations ── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ── Utilities ── */ .text-emerald { color: var(--cb-emerald); } .text-blue { color: var(--cb-blue); } .text-muted { color: var(--cb-muted); } .text-mono { font-family: var(--font-mono); } .text-brand { font-family: var(--font-brand); } .text-center { text-align: center; } .text-sm { font-size: var(--text-sm); } .font-300 { font-weight: 300; } .font-600 { font-weight: 600; } .font-700 { font-weight: 700; } .mt-auto { margin-top: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* ── Print ── */ @media print { .topbar { position: static; background: white; color: black; border: none; } .topbar-nav, .topbar-cta, .hamburger, .hero-scroll, [data-noprint] { display: none !important; } .section { padding: 24pt 0; } body { font-size: 11pt; color: black; background: white; padding-top: 0; } a[href]::after { content: none; } .card { box-shadow: none; border: 1pt solid #ccc; } h1,h2,h3 { color: black; } }