/* ========================================================================== bandel-router website — Anthropic-inspired warm design system Theme: tinted cream canvas, coral primary, dark navy product surfaces, serif display headlines + humanist sans body. ========================================================================== */ /* ---- Fonts (loaded in via Google Fonts) ---- */ :root { --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Colors ---- */ --color-primary: #cc785c; --color-primary-active: #a9583e; --color-primary-disabled: #e6dfd8; --color-ink: #141413; --color-body: #3d3d3a; --color-body-strong: #252523; --color-muted: #6c6a64; --color-muted-soft: #8e8b82; --color-hairline: #e6dfd8; --color-hairline-soft: #ebe6df; --color-canvas: #faf9f5; --color-surface-soft: #f5f0e8; --color-surface-card: #efe9de; --color-surface-cream-strong: #e8e0d2; --color-surface-dark: #181715; --color-surface-dark-elevated: #252320; --color-surface-dark-soft: #1f1e1b; --color-on-primary: #ffffff; --color-on-dark: #faf9f5; --color-on-dark-soft: #a09d96; --color-accent-teal: #5db8a6; --color-accent-amber: #e8a55a; --color-success: #5db872; --color-warning: #d4a017; --color-error: #c64545; /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* ---- Spacing ---- */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 96px; /* ---- Type sizes ---- */ --display-xl: 64px; --display-lg: 48px; --display-md: 36px; --display-sm: 28px; --title-lg: 22px; --title-md: 18px; --title-sm: 16px; --body-md: 16px; --body-sm: 14px; --caption: 13px; --caption-uppercase: 12px; --code: 14px; --button: 14px; --container-max: 1200px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-canvas); color: var(--color-body); font-family: var(--font-sans); font-size: var(--body-md); line-height: 1.55; letter-spacing: 0; -webkit-font-smoothing: antialiased; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--color-ink); margin: 0; } /* Serif display uses negative letter-spacing — brand-critical. */ .display-xl { font-size: var(--display-xl); line-height: 1.05; letter-spacing: -0.5px; } .display-lg { font-size: var(--display-lg); line-height: 1.1; letter-spacing: -0.3px; } .display-md { font-size: var(--display-md); line-height: 1.15; letter-spacing: -0.1px; } .display-sm { font-size: var(--display-sm); line-height: 1.2; letter-spacing: 0; } /* ---- Layout ---- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); } .section { padding: var(--space-section) 0; } /* ---- Top nav ---- */ .top-nav { position: sticky; top: 0; z-index: 50; background: var(--color-canvas); height: 64px; display: flex; align-items: center; } .top-nav .container { display: flex; align-items: center; gap: var(--space-xl); width: 100%; } .brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; color: var(--color-ink); } .spike { width: 18px; height: 18px; color: var(--color-ink); } .nav-links { display: flex; gap: var(--space-xl); margin-left: 0; } .nav-links a { color: var(--color-ink); font-weight: 500; font-size: var(--body-sm); } .nav-actions { margin-left: auto; display: flex; gap: var(--space-sm); align-items: center; } .nav-toggle { display: none; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; font-size: var(--button); font-weight: 500; line-height: 1; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { background: var(--color-primary-active); text-decoration: none; } .btn-secondary { background: var(--color-canvas); color: var(--color-ink); border-color: var(--color-hairline); } .btn-secondary:hover { text-decoration: none; border-color: var(--color-muted-soft); } .btn-on-dark { background: var(--color-surface-dark-elevated); color: var(--color-on-dark); } .btn-on-dark:hover { background: var(--color-surface-dark-soft); text-decoration: none; } .btn-ghost { background: transparent; color: var(--color-ink); } .btn-block { width: 100%; } /* ---- Cards ---- */ .card { background: var(--color-surface-card); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid var(--color-hairline-soft); } .card-dark { background: var(--color-surface-dark); color: var(--color-on-dark); border-radius: var(--radius-lg); padding: var(--space-xl); } .card-dark h2, .card-dark h3 { color: var(--color-on-dark); } .card-cream-clear { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); } /* ---- Hero ---- */ .hero { padding: var(--space-section) 0; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: center; } .hero-copy h1 { font-size: var(--display-xl); line-height: 1.05; } .hero-copy .lede { font-size: var(--title-md); color: var(--color-body); margin: var(--space-lg) 0; max-width: 32ch; } .hero-cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; } /* Dark code-window mockup */ .code-window { background: var(--color-surface-dark); border-radius: var(--radius-lg); padding: var(--space-lg); color: var(--color-on-dark); font-family: var(--font-mono); font-size: var(--code); line-height: 1.6; overflow-x: auto; } .code-window .titlebar { font-family: var(--font-sans); display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); color: var(--color-on-dark-soft); } .code-window .dots { display: flex; gap: 6px; } .code-window .dots span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dots span:nth-child(1){ background:#e8a55a; } .dots span:nth-child(2){ background:#5db8a6; } .dots span:nth-child(3){ background:#cc785c; } .code-window .ln { color: var(--color-muted-soft); display:inline-block; width:2.5ch; } .code-window .tok-coral { color:#e8a55a; } .code-window .tok-teal { color:#7fd9c9; } .code-window .tok-muted { color:#a09d96; } /* ---- Feature grid ---- */ .features .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .feature .icon { width: 40px; height: 40px; color: var(--color-primary); margin-bottom: var(--space-md); } .feature h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--title-md); color: var(--color-ink); margin: 0 0 var(--space-xs); } .feature p { margin: 0; color: var(--color-body); font-size: var(--body-sm); } /* ---- Model showcase (dark) ---- */ .model-showcase { background: var(--color-surface-dark); color: var(--color-on-dark); } .model-showcase .container { padding-top: var(--space-section); padding-bottom: var(--space-section); } .model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .model-card { background: var(--color-surface-dark-elevated); border-radius: var(--radius-lg); padding: var(--space-lg); } .model-card h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--title-md); color: var(--color-on-dark); margin: 0 0 var(--space-xs); } .model-card .meta { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; } .model-card .price { color: var(--color-accent-amber); font-size: var(--body-sm); } .badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--caption); font-weight: 500; background: var(--color-surface-dark-soft); color: var(--color-on-dark-soft); } .badge-grade { background: rgba(91,184,166,.18); color:#7fd9c9; } .badge-vision { background: rgba(216,158,90,.18); } .badge-mult { background: rgba(204,120,92,.2); color:#e8a55a; } /* ---- Pricing ---- */ .pricing .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: stretch; } .tier { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: var(--space-xl); display: flex; flex-direction: column; } .tier h4 { font-size: var(--title-lg); font-weight: 500; font-family: var(--font-sans); color: var(--color-ink); margin: 0; } .tier .price { font-family: var(--font-serif); font-size: var(--display-sm); margin: var(--space-sm) 0 var(--space-md); } .tier .price span { font-size: var(--body-sm); color: var(--color-muted); font-family: var(--font-sans); } .tier ul { list-style: none; margin: 0 0 var(--space-lg); padding: 0; } .tier li { padding: var(--space-xs) 0; color: var(--color-body); font-size: var(--body-sm); } .tier li::before { content: "✓"; color: var(--color-success); margin-right: var(--space-sm); } .tier .btn { margin-top: auto; } .tier.featured { background: var(--color-surface-dark); color: var(--color-on-dark); } .tier.featured h4 { color: var(--color-on-dark); } .tier.featured li { color: var(--color-on-dark-soft); } .tier.featured li::before { color: var(--color-accent-teal); } .tier .flag { margin-bottom: var(--space-sm); } /* ---- Callout / CTA band (coral) ---- */ .cta-coral { background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-lg); padding: var(--space-xxl); text-align: center; } .cta-coral h2 { color: #fff; font-size: var(--display-sm); } .cta-coral p { color: rgba(255,255,255,.9); margin: var(--space-md) auto var(--space-lg); max-width: 60ch; } .cta-coral .btn { background: var(--color-canvas); color: var(--color-ink); } .cta-coral .btn:hover { background: var(--color-surface-card); } /* ---- How-to / code ---- */ .howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } .steps { counter-reset: step; } .step { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); } .step .n { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--color-surface-card); display: grid; place-items: center; font-weight: 600; font-size: var(--body-sm); color: var(--color-ink); } .step h4 { font-family: var(--font-sans); font-weight: 500; font-size: var(--title-sm); color: var(--color-ink); margin: 0 0 var(--space-xs); } .step p { margin: 0; color: var(--color-body); font-size: var(--body-sm); } /* ---- Footer ---- */ .footer { background: var(--color-surface-dark); color: var(--color-on-dark-soft); padding: var(--space-xxl) 0; } .footer .container { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: var(--space-xxl); } .footer .brand { color: var(--color-on-dark); } .footer h5 { color: var(--color-on-dark); font-family: var(--font-sans); font-weight: 500; font-size: var(--caption-uppercase) + 1px; margin: 0 0 var(--space-sm); letter-spacing:.5px; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: var(--space-xs); } .footer a { color: var(--color-on-dark-soft); } .footer a:hover { color: var(--color-on-dark); } .footer .fine { margin-top: var(--space-xl); font-size: var(--body-sm); color: var(--color-muted-soft); border-top: 1px solid var(--color-surface-dark-elevated); padding-top: var(--space-md); } /* ---- Dashboard ---- */ .dash-shell { max-width: 900px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); } .dash-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); } .dash-header h1 { font-size: var(--display-md); } .panel { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-lg); } .panel h2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--title-md); color: var(--color-ink); margin: 0 0 var(--space-md); } .panel-dark { background: var(--color-surface-dark); color: var(--color-on-dark); border: none; } .panel-dark h2 { color: var(--color-on-dark); } .field { margin-bottom: var(--space-md); } .field label { display: block; font-size: var(--caption-uppercase); letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-xs); } .input { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-canvas); font-family: var(--font-mono); font-size: var(--body-sm); color: var(--color-ink); } .input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(204,120,92,.15); } .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .stat { background: var(--color-surface-card); border-radius: var(--radius-md); padding: var(--space-md); } .stat .label { font-size: var(--caption-uppercase); letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); } .stat .value { font-family: var(--font-serif); font-size: var(--display-sm); color: var(--color-ink); margin-top: var(--space-xs); } .progress { height: 8px; background: var(--color-hairline); border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--space-sm); } .progress > div { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); } .progress > div.warn { background: var(--color-warning); } .progress > div.full { background: var(--color-error); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-hairline-soft); font-size: var(--body-sm); } th { color: var(--color-muted); font-weight: 500; } .toolbar { display: flex; gap: var(--space-md); align-items: center; } /* ---- Helpers ---- */ .muted { color: var(--color-muted); } .mono { font-family: var(--font-mono); font-size: var(--body-sm); } .code-inline { font-family: var(--font-mono); font-size: var(--body-sm); background: var(--color-surface-card); padding: 2px 6px; border-radius: 4px; } .hidden { display: none !important; } .error-text { color: var(--color-error); font-size: var(--body-sm); } .success-text { color: var(--color-success); font-size: var(--body-sm); } .center { text-align: center; } .lead { font-size: var(--body-md); color: var(--color-body-strong); } /* ---- Responsive ---- */ @media (max-width: 1024px) { .hero-grid, .howto-grid { grid-template-columns: 1fr; } .features .grid, .model-grid, .pricing .grid { grid-template-columns: repeat(2, 1fr); } .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; margin-left: auto; } .nav-actions { margin-left: 0; } .display-xl { font-size: 40px; } .display-lg { font-size: 36px; } .features .grid, .model-grid, .pricing .grid, .stat-grid { grid-template-columns: 1fr; } .footer .container { grid-template-columns: 1fr; gap: var(--space-lg); } .hero, .section { padding-left: var(--space-md); padding-right: var(--space-md); } }