/* Aspen marketing site — shared base styles. Ported from the Claude Design "Landing v3 (Stripe-esque)" project. */ /* Self-hosted fonts (variable, one file covers the whole weight range) — avoids the extra DNS lookup/connection/request to Google's servers that a fonts.googleapis.com stylesheet needs before the browser can even start fetching the actual glyphs. */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/schibsted-grotesk.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/jetbrains-mono.woff2') format('woff2'); } /* ============ Dark mode palette ============ Toggled via [data-theme] on (assets/theme-init.js sets it before first paint from localStorage/prefers-color-scheme; assets/theme.js wires the toggle buttons). Each variable keeps its light-mode value identical to the original hardcoded hex, so light mode is pixel-for-pixel unchanged; only the [data-theme="dark"] block below diverges. Inline styles across the site reference these via var(--name) in place of the raw hex. */ :root { --bg: #faf8f4; --bg-white: #ffffff; --white: #fff; --surface-2: #fdfcfa; --surface-3: #f4efe5; --surface-5: #f0ece3; --surface-6: #f4f1ea; --surface-7: #eae4d6; --ink: #1c1a17; --ink-deep: #17150f; --text: #5c574e; --text-2: #57524a; --muted: #8a857a; --muted-2: #6b6559; --muted-3: #a39d8f; --muted-4: #a8a294; --muted-5: #9a9486; --accent-deep: #a06410; --status-green: #2f7a4d; --border-rgb: 28,26,23; } [data-theme="dark"] { --bg: #17150f; --bg-white: #17150f; --white: #23201a; --surface-2: #23201a; --surface-3: #29251d; --surface-5: #29251d; --surface-6: #29251d; --surface-7: #29251d; --ink: #f2ede2; --ink-deep: #faf8f4; --text: #c9c3b5; --text-2: #c9c3b5; --muted: #a39d8f; --muted-2: #9b9486; --muted-3: #948d7e; --muted-4: #948d7e; --muted-5: #948d7e; --accent-deep: #dc9a3c; --status-green: #5fb37f; --border-rgb: 255,255,255; } body { margin: 0; color: var(--ink); font-family: 'Schibsted Grotesk', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .2s ease, color .2s ease; } a { color: inherit; } a:hover { color: #c47f17; } @keyframes blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } } @keyframes dashFlow{ to { stroke-dashoffset: -16 } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } body { transition: none !important; } } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(var(--border-rgb),.16); background: none; color: var(--text); cursor: pointer; padding: 0; flex-shrink: 0; } .theme-toggle:hover { border-color: rgba(var(--border-rgb),.34); color: var(--ink); } /* Sits directly under the header, in normal page flow (not sticky), so it scrolls away with the page. Shares the header's max-width/side-padding so the button lines up under the "Sign Up for Early Access" button. */ .theme-bar { max-width: 1512px; margin: 0 auto; padding: 12px 48px 0; box-sizing: border-box; display: flex; justify-content: flex-end; } .theme-icon-moon { display: none; } [data-theme="dark"] .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-moon { display: inline-block; } /* ============ Responsive ============ The page markup is written with inline styles (desktop layout). These rules use !important to win over non-important inline declarations — the same technique hover.js uses for style-hover — so narrow viewports get a second layout without rewriting every inline style. */ *, *::before, *::after { box-sizing: border-box; } img, svg { max-width: 100%; height: auto; } .nav-toggle-checkbox { display: none; } .nav-toggle-label { display: none; } .nav-mobile-panel { display: none; } .site-nav { position: relative; } @media (max-width: 860px) { .site-nav { flex-wrap: wrap; padding: 14px 20px !important; } .nav-links, .nav-actions { display: none !important; } .theme-bar { padding: 10px 20px 0 !important; } .nav-toggle-label { display: flex !important; margin-left: auto; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; cursor: pointer; } .nav-toggle-label span { display: block; width: 100%; height: 2px; background: var(--ink); } .nav-toggle-checkbox:checked ~ .nav-mobile-panel { display: flex !important; } .nav-mobile-panel { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--white); border-bottom: 1px solid rgba(var(--border-rgb),.1); padding: 6px 20px 18px; box-shadow: 0 16px 28px -18px rgba(var(--border-rgb),.3); z-index: 80; } .nav-mobile-panel a { padding: 13px 0; font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(var(--border-rgb),.07); } .nav-mobile-panel a:last-child { border-bottom: none; } .nav-mobile-cta { margin-top: 12px !important; text-align: center; font-weight: 600; background: #1c1a17; color: #faf8f4 !important; border-radius: 6px; padding: 12px !important; border-bottom: none !important; } } @media (max-width: 768px) { .site-shell { min-width: 0 !important; } .section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 52px !important; padding-bottom: 52px !important; } .grid-stack { grid-template-columns: 1fr !important; gap: 32px !important; } /* "Build your own UI" section on index.html: image sits left of the copy on desktop (source order); on mobile it should drop below the copy instead of above it, so push it after in visual order only. */ .ux-screenshot { order: 2; } /* "Enforced by permission sets..." section on platform.html: same idea — diagram sits left of the copy on desktop (source order); on mobile it should drop below the copy instead of above it. */ .security-diagram-row { order: 2; } .three-col-divided > div { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 24px !important; border-top: 1px solid rgba(var(--border-rgb),.1); } .three-col-divided > div:first-child { border-top: none; } .flex-stack { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .flex-wrap-center { flex-wrap: wrap !important; justify-content: center !important; text-align: center; } .table-head-row { display: none !important; } .px-mobile { padding-left: 20px !important; padding-right: 20px !important; } .scroll-x-mobile { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .diagram-relationships { min-width: 440px; } .diagram-pipeline { min-width: 640px; } .diagram-security { min-width: 380px; } h1 { font-size: 30px !important; line-height: 1.2 !important; } h2 { font-size: 24px !important; line-height: 1.3 !important; } p { font-size: 15px !important; } .footer-signup-form { flex-direction: column !important; align-items: stretch !important; width: 100%; } .footer-signup-form input, .footer-signup-form button { width: 100%; } } .footer-signup-form input { outline-offset: 2px; } .footer-signup-note { display: none; }