/* Pauhu Brand System — v2.0.0 * Source of truth: public/shared/css/brand.css * Copied to: staging.pauhu.com/css/brand.css, staging.pauhu.eu/css/brand.css * Brand color: #002855 * Last updated: 2026-02-15 */ /* ============================================================ PALETTE — Analogous + Material Design 3 tokens ============================================================ */ :root { /* Brand */ --brand: #002855; --brand-contrast: #fff; /* Analogous palette */ --ana-1: #002855; --ana-1-contrast: #fff; --ana-2: #3d7489; --ana-2-contrast: #fff; --ana-3: #0c4865; --ana-3-contrast: #fff; --ana-4: #658eb2; --ana-4-contrast: #000; --ana-5: #99a7ce; --ana-5-contrast: #000; --ana-6: #c4c4e8; --ana-6-contrast: #000; /* Material Design 3 — Light mode (default) */ --color-primary: #00123d; --color-primary-contrast: #fff; --color-on-primary: #fff; --color-on-primary-contrast: #000; --color-primary-container: #bfe1ff; --color-primary-container-contrast: #000; --color-on-primary-container: #000021; --color-on-primary-container-contrast: #fff; --color-secondary: #748da2; --color-secondary-contrast: #000; --color-on-secondary: #000; --color-on-secondary-contrast: #fff; --color-tertiary: #5c7078; --color-tertiary-contrast: #fff; --color-on-tertiary: #fff; --color-on-tertiary-contrast: #000; --color-surface: #fafcfe; --color-surface-contrast: #000; --color-on-surface: #020306; --color-on-surface-contrast: #fff; --color-on-surface-variant: #2a2e33; --color-on-surface-variant-contrast: #fff; --color-container: #edeff1; --color-container-contrast: #000; --color-container-dim: #e2e5e9; --color-container-dim-contrast: #000; --color-container-bright: #fafcfe; --color-container-bright-contrast: #000; --color-outline: #44484d; --color-outline-contrast: #fff; --color-outline-variant: #9a9fa5; --color-outline-variant-contrast: #000; --color-inverse-surface: #151618; --color-inverse-surface-contrast: #fff; --color-on-inverse-surface: #eceff2; --color-on-inverse-surface-contrast: #000; --color-error: #742f25; --color-error-contrast: #fff; --color-on-error: #fff; --color-on-error-contrast: #000; --color-success: #26541c; --color-success-contrast: #fff; --color-on-success: #fff; --color-on-success-contrast: #000; --color-warning: #815c0a; --color-warning-contrast: #fff; --color-on-warning: #090200; --color-on-warning-contrast: #fff; /* Shared tokens */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace; --radius: 8px; --radius-lg: 12px; --max-width: 1200px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 40, 85, 0.07); --shadow-lg: 0 10px 20px rgba(0, 40, 85, 0.1); } /* ============================================================ DARK MODE — [data-theme="dark"] on pauhu.com uses dark mode ============================================================ */ [data-theme="dark"] { --color-primary: #658eb2; --color-primary-contrast: #000; --color-on-primary: #000; --color-on-primary-contrast: #fff; --color-primary-container: #002855; --color-primary-container-contrast: #fff; --color-on-primary-container: #bfe1ff; --color-on-primary-container-contrast: #000; --color-secondary: #99a7ce; --color-secondary-contrast: #000; --color-on-secondary: #000; --color-on-secondary-contrast: #fff; --color-tertiary: #9a9fa5; --color-tertiary-contrast: #000; --color-on-tertiary: #000; --color-on-tertiary-contrast: #fff; --color-surface: #0c0e11; --color-surface-contrast: #fff; --color-on-surface: #eceff2; --color-on-surface-contrast: #000; --color-on-surface-variant: #9a9fa5; --color-on-surface-variant-contrast: #000; --color-container: #1a1d22; --color-container-contrast: #fff; --color-container-dim: #141619; --color-container-dim-contrast: #fff; --color-container-bright: #22262b; --color-container-bright-contrast: #fff; --color-outline: #9a9fa5; --color-outline-contrast: #000; --color-outline-variant: #44484d; --color-outline-variant-contrast: #fff; --color-inverse-surface: #eceff2; --color-inverse-surface-contrast: #000; --color-on-inverse-surface: #151618; --color-on-inverse-surface-contrast: #fff; --color-error: #ffb4ab; --color-error-contrast: #000; --color-on-error: #561e16; --color-on-error-contrast: #fff; --color-success: #8dd87e; --color-success-contrast: #000; --color-on-success: #0a3a04; --color-on-success-contrast: #fff; --color-warning: #ffcc80; --color-warning-contrast: #000; --color-on-warning: #4a3200; --color-on-warning-contrast: #fff; } /* ============================================================ RESET + BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } body { font-family: var(--font-sans); background: var(--color-surface); color: var(--color-on-surface); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--ana-1); text-decoration: none; } [data-theme="dark"] a { color: var(--ana-4); } a:hover { text-decoration: underline; } /* ============================================================ LAYOUT ============================================================ */ .app { min-height: 100vh; display: flex; flex-direction: column; } .main { flex: 1; } /* ============================================================ HEADER ============================================================ */ .header { position: sticky; top: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-outline-variant); z-index: 100; } .nav { max-width: var(--max-width); margin: 0 auto; padding: 0.75rem 2rem; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--color-on-surface); font-size: 1.25rem; font-weight: 600; } .logo:hover { text-decoration: none; } .logo img { height: 28px; width: auto; } .logo-badge { background: var(--brand); color: var(--brand-contrast); font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .nav-links, .nav { display: flex; align-items: center; gap: 1.5rem; } .nav-links a, .nav-link { color: var(--color-on-surface-variant); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: 6px; transition: all 0.15s ease; } .nav-links a:hover, .nav-link:hover { color: var(--color-on-surface); background: var(--color-container); text-decoration: none; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-block; padding: 0.6rem 1.25rem; border-radius: var(--radius); font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--brand); color: var(--brand-contrast); } .btn-primary:hover { background: var(--ana-3); } .btn-secondary { background: var(--color-container); color: var(--color-on-surface); } .btn-secondary:hover { background: var(--color-container-dim); } .btn-outline { background: transparent; border: 1.5px solid var(--color-outline-variant); color: var(--color-on-surface-variant); padding: 0.5rem 1rem; font-size: 0.8rem; } .btn-outline:hover { border-color: var(--brand); color: var(--brand); } [data-theme="dark"] .btn-outline:hover { border-color: var(--ana-4); color: var(--ana-4); } /* ============================================================ HERO ============================================================ */ .hero { padding: 5rem 2rem; background: var(--color-container); } [data-theme="dark"] .hero { background: var(--color-container-dim); } .hero-content { max-width: var(--max-width); margin: 0 auto; text-align: center; } .hero-badge { display: inline-block; background: var(--brand); color: var(--brand-contrast); font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 20px; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.15; margin-bottom: 1.25rem; color: var(--color-on-surface); } .hero-subtitle { font-size: 1.15rem; color: var(--color-on-surface-variant); margin-bottom: 2rem; max-width: 680px; margin-left: auto; margin-right: auto; } .hero-actions { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 3rem; } .hero-stats { display: flex; justify-content: center; gap: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--color-outline-variant); } .stat { text-align: center; } .stat-value { display: block; font-size: 2.25rem; font-weight: 800; color: var(--brand); } [data-theme="dark"] .stat-value { color: var(--ana-4); } .stat-label { font-size: 0.85rem; color: var(--color-on-surface-variant); } /* ============================================================ SECTIONS ============================================================ */ section { padding: 4rem 2rem; } section h2 { font-size: 2.25rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; color: var(--color-on-surface); } .section-subtitle { text-align: center; color: var(--color-on-surface-variant); font-size: 1.05rem; margin-bottom: 2.5rem; } /* ============================================================ CARDS ============================================================ */ .product-grid { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .product-card { background: var(--color-surface); border: 1px solid var(--color-outline-variant); border-radius: var(--radius); padding: 1.75rem; transition: box-shadow 0.2s, transform 0.2s; } .product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .product-card.live { border-top: 3px solid var(--brand); } .product-badge { display: inline-block; background: var(--brand); color: var(--brand-contrast); font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.75rem; } .product-card h3 { font-size: 1.25rem; margin-bottom: 0.25rem; color: var(--color-on-surface); } .product-code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-on-surface-variant); margin-bottom: 0.75rem; } .product-desc { color: var(--color-on-surface-variant); font-size: 0.9rem; margin-bottom: 1.25rem; } .product-features { list-style: none; margin-bottom: 1.25rem; } .product-features li { padding: 0.3rem 0; padding-left: 1.5rem; position: relative; font-size: 0.9rem; color: var(--color-on-surface-variant); } .product-features li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-success); font-weight: bold; } .btn-product { display: block; background: var(--brand); color: var(--brand-contrast); width: 100%; text-align: center; padding: 0.7rem 1.25rem; border-radius: var(--radius); font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: background 0.2s; } .btn-product:hover { background: var(--ana-3); text-decoration: none; } /* ============================================================ PRICING TABLES ============================================================ */ .pricing { background: var(--color-container); } [data-theme="dark"] .pricing { background: var(--color-container-dim); } .pricing-tables { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.5rem; } .pricing-table { background: var(--color-surface); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-md); } .pricing-table h3 { font-size: 1.4rem; margin-bottom: 0.5rem; color: var(--color-on-surface); } .pricing-table > p { color: var(--color-on-surface-variant); margin-bottom: 1.25rem; } .pricing-table table { width: 100%; border-collapse: collapse; } .pricing-table th, .pricing-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--color-outline-variant); font-size: 0.9rem; } .pricing-table th { font-weight: 600; color: var(--color-on-surface-variant); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .price { font-size: 1.4rem; font-weight: 700; color: var(--brand); } [data-theme="dark"] .price { color: var(--ana-4); } .price-note { display: block; font-size: 0.8rem; color: var(--color-on-surface-variant); margin-top: 0.2rem; } /* ============================================================ CONNECTOR / DARK SECTION ============================================================ */ .connector { background: var(--brand); color: var(--brand-contrast); } .connector h2 { color: var(--brand-contrast); } .connector .section-subtitle { color: rgba(255, 255, 255, 0.85); } .connector-details p, .connector-details li { color: rgba(255, 255, 255, 0.85); } .connector-info { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .connector-details ul { list-style: none; } .connector-details li { padding: 0.4rem 0; } .connector-code pre { background: rgba(0, 0, 0, 0.25); padding: 1.25rem; border-radius: var(--radius); overflow-x: auto; } .connector-code code { font-family: var(--font-mono); font-size: 0.85rem; color: #bfe1ff; } /* ============================================================ CTA SECTION ============================================================ */ .cta { background: var(--ana-3); color: var(--ana-3-contrast); text-align: center; } .cta h2 { color: var(--ana-3-contrast); margin-bottom: 0.75rem; } .cta p { opacity: 0.9; margin-bottom: 1.5rem; } .cta-actions { display: flex; gap: 0.75rem; justify-content: center; } .cta .btn-primary { background: #fff; color: var(--brand); } .cta .btn-secondary { background: transparent; border: 2px solid #fff; color: #fff; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--color-inverse-surface); color: var(--color-on-inverse-surface); padding: 3rem 2rem 1.5rem; } .footer-content { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; margin-bottom: 2rem; } .footer-brand .logo-text { color: var(--color-on-inverse-surface); font-size: 1.25rem; } .footer-brand p { color: var(--color-on-inverse-surface); opacity: 0.75; margin-top: 0.4rem; font-size: 0.9rem; } .footer-links { display: flex; gap: 3rem; } .footer-col h5 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; color: var(--color-on-inverse-surface); opacity: 0.8; } .footer-col a { display: block; color: var(--color-on-inverse-surface); text-decoration: none; padding: 0.25rem 0; opacity: 0.8; font-size: 0.9rem; transition: opacity 0.2s; } .footer-col a:hover { opacity: 1; text-decoration: none; } .footer-bottom { max-width: var(--max-width); margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; color: var(--color-on-inverse-surface); opacity: 0.75; font-size: 0.85rem; } .footer-bottom p { margin: 0.2rem 0; } .footer-bottom a { color: inherit; } .footer a { color: var(--color-on-inverse-surface); } .footer-sep { color: var(--color-on-inverse-surface); opacity: 0.5; } /* Partner logos in footer */ .partner-logos { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .partner-logos img { height: 28px; opacity: 0.5; transition: opacity 0.2s; } .partner-logos img:hover { opacity: 0.8; } /* ============================================================ CODE / PRE ============================================================ */ pre { background: var(--color-container); padding: 1.25rem; border-radius: var(--radius); overflow-x: auto; margin: 1rem 0; } [data-theme="dark"] pre { background: var(--color-container-dim); } code { font-family: var(--font-mono); font-size: 0.85rem; } /* ============================================================ TABLES (docs, legal) ============================================================ */ table { width: 100%; border-collapse: collapse; margin: 1rem 0; } th, td { padding: 0.7rem; text-align: left; border-bottom: 1px solid var(--color-outline-variant); font-size: 0.9rem; } th { font-weight: 600; color: var(--color-on-surface-variant); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-container); } /* ============================================================ API DOCS ============================================================ */ .endpoint { background: var(--color-container); padding: 0.85rem 1rem; border-radius: var(--radius); margin: 1rem 0; font-family: var(--font-mono); font-size: 0.9rem; } [data-theme="dark"] .endpoint { background: var(--color-container-dim); } .method { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; margin-right: 0.5rem; color: #fff; } .method.get, .method-get { background: var(--ana-2); } .method.post, .method-post { background: #1a7a1a; } [data-theme="dark"] .method.get, [data-theme="dark"] .method-get { background: var(--ana-3); } [data-theme="dark"] .method.post, [data-theme="dark"] .method-post { background: #1a6b1a; } /* ============================================================ LEGAL PAGES ============================================================ */ .legal-content { max-width: 800px; margin: 0 auto; padding: 4rem 2rem; } .legal-content h1 { font-size: 2.25rem; margin-bottom: 0.5rem; } .legal-content .updated { color: var(--color-on-surface-variant); margin-bottom: 2.5rem; } .legal-content h2 { font-size: 1.25rem; margin-top: 2.25rem; margin-bottom: 0.75rem; text-align: left; } .legal-content p, .legal-content li { color: var(--color-on-surface-variant); line-height: 1.8; margin-bottom: 0.75rem; } .legal-content ul { margin-left: 1.5rem; } .legal-content a { color: var(--brand); } [data-theme="dark"] .legal-content a { color: var(--ana-4); } /* ============================================================ DOCS PAGES ============================================================ */ .docs-content { max-width: 900px; margin: 0 auto; padding: 4rem 2rem; } .docs-content h1 { font-size: 2.25rem; margin-bottom: 0.5rem; } .docs-subtitle { color: var(--color-on-surface-variant); margin-bottom: 2.5rem; font-size: 1.05rem; } .docs-content h2 { font-size: 1.6rem; margin-top: 3rem; margin-bottom: 0.75rem; text-align: left; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-outline-variant); } .docs-content h3 { font-size: 1.15rem; margin-top: 2rem; margin-bottom: 0.5rem; } .docs-content p, .docs-content li { line-height: 1.8; margin-bottom: 0.75rem; color: var(--color-on-surface-variant); } .docs-content ul { margin-left: 1.5rem; } /* ============================================================ PAGE CONTENT (products, pricing, developers) ============================================================ */ .page-content { max-width: 960px; margin: 0 auto; padding: 4rem 2rem; } .page-content h1 { font-size: 2.25rem; margin-bottom: 0.5rem; } .page-subtitle { color: var(--color-on-surface-variant); margin-bottom: 2.5rem; font-size: 1.05rem; } .page-content h2 { font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 0.75rem; } .page-content h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } .page-content p { color: var(--color-on-surface-variant); line-height: 1.7; margin-bottom: 0.75rem; } .page-content ul { margin-left: 1.5rem; margin-bottom: 1rem; } .page-content li { color: var(--color-on-surface-variant); line-height: 1.7; margin-bottom: 0.3rem; } /* ============================================================ BADGES ============================================================ */ .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; } .badge-azure { background: #0078d4; color: #fff; } .badge-live { background: var(--brand); color: var(--brand-contrast); } /* ============================================================ SECTION LINKS ============================================================ */ .section-link { display: inline-block; color: var(--brand); text-decoration: none; font-weight: 500; margin-top: 0.5rem; } [data-theme="dark"] .section-link { color: var(--ana-4); } .section-link:hover { text-decoration: underline; } /* ============================================================ SOURCE GRID (data sources on pauhu.eu docs) ============================================================ */ .source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; margin: 1rem 0; } .source-card { background: var(--color-container); padding: 0.7rem 1rem; border-radius: var(--radius); border-left: 3px solid var(--brand); } .source-card strong { display: block; margin-bottom: 0.2rem; color: var(--color-on-surface); font-size: 0.9rem; } .source-card code { font-size: 0.75rem; color: var(--color-on-surface-variant); } /* ============================================================ FOCUS — WCAG 2.4.7 ============================================================ */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; } [data-theme="dark"] :focus-visible { outline-color: var(--ana-4); } .btn:focus-visible { outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-to-content { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 0.75rem 1.5rem; background: var(--brand); color: var(--brand-contrast); font-weight: 600; font-size: 0.875rem; text-decoration: none; border-radius: 0 0 var(--radius) 0; } .skip-to-content:focus { left: 0; } /* Link distinguishability in text — WCAG 1.4.1 */ .legal-content a, .docs-content a, .page-content p a { text-decoration: underline; text-decoration-color: var(--color-outline-variant); text-underline-offset: 2px; } .legal-content a:hover, .docs-content a:hover, .page-content p a:hover { text-decoration-color: currentColor; } /* Footer contrast fix — dark inverse surface */ .footer-bottom { opacity: 0.7; } .footer-brand p { opacity: 0.7; } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-outline-variant); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-outline); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .hero h1 { font-size: 2.25rem; } .hero-stats { flex-wrap: wrap; gap: 1.5rem; } .hero-actions { flex-direction: column; align-items: center; } .nav-links { display: none; } .connector-info { grid-template-columns: 1fr; } .footer-content { flex-direction: column; gap: 1.5rem; } .footer-links { flex-wrap: wrap; gap: 1.5rem; } .product-grid { grid-template-columns: 1fr; } .pricing-tables { grid-template-columns: 1fr; } .partner-logos { flex-wrap: wrap; } } @media (max-width: 480px) { .hero { padding: 3rem 1rem; } section { padding: 3rem 1rem; } .page-content, .docs-content, .legal-content { padding: 2rem 1rem; } }