/* koo-design.css — shared design tokens & primitives for Koohost web. * Source of truth: koohost-ios/Koohost/Theme/KooTheme.swift. * Anything that should match iOS visually pulls from these vars. */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&display=swap'); :root { /* === Brand palette (mirrors KooTheme.swift exactly) === */ --koo-cocoa: #3A2E22; --koo-buff-tan: #D9A878; --koo-coral: #F4845F; --koo-coral-dark: #D96A45; --koo-cream: #FBEFD8; --koo-blush: #F4A488; /* Supporting tones */ --koo-cream-2: #F6E2BE; --koo-cream-card: #FFF8EA; --koo-bulb: #FFD66B; --koo-line: #E8D6B5; --koo-muted: #8A7964; --koo-text-soft: #5A4938; /* Functional */ --koo-success: #4F8A4A; --koo-success-bg: #E5F0D8; --koo-warning: #D17A2C; /* Property tints (10-color palette, matches KooPropertyPalette) */ --koo-sage: #7CA07F; --koo-dusk: #866B9C; --koo-sky: #6A91B5; --koo-terra: #B6554C; --koo-mustard: #C99C3A; --koo-rose: #C87688; /* Type scale */ --koo-font-display: 'Fraunces', 'Times New Roman', serif; --koo-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; /* Elevation scale (three-layer shadows for the "soft glass" feel) */ --koo-shadow-1: 0 1px 2px rgba(58,46,34,0.04), 0 4px 12px rgba(58,46,34,0.06); --koo-shadow-2: 0 1px 2px rgba(58,46,34,0.05), 0 8px 22px rgba(58,46,34,0.08), 0 22px 56px rgba(58,46,34,0.05); --koo-shadow-coral: 0 4px 12px rgba(244,132,95,0.30), 0 16px 40px rgba(244,132,95,0.20); /* Radii */ --koo-r-sm: 10px; --koo-r-md: 14px; --koo-r-lg: 18px; --koo-r-xl: 22px; --koo-r-pill: 999px; /* Surfaces */ --koo-surface-glass: rgba(255, 248, 234, 0.78); --koo-surface-card: #FFF8EA; --koo-bg-screen: #FBEFD8; } /* Defaults applied by including this file (page styles can override) */ html, body { font-family: var(--koo-font-body); color: var(--koo-cocoa); background: var(--koo-bg-screen); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } * { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } /* === Reusable primitives === */ .koo-card { background: var(--koo-surface-glass); backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%); border: 1px solid rgba(232,214,181,0.55); border-radius: var(--koo-r-lg); padding: 18px; box-shadow: var(--koo-shadow-1); } .koo-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--koo-r-pill); background: rgba(244,132,95,0.14); color: var(--koo-coral-dark); letter-spacing: 0.4px; } .koo-pill.cocoa { background: rgba(58,46,34,0.10); color: var(--koo-cocoa); } .koo-pill.success{ background: var(--koo-success-bg); color: var(--koo-success); } .koo-pill.neutral{ background: var(--koo-cream-2); color: var(--koo-text-soft); } .koo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--koo-font-body); font-size: 14px; font-weight: 700; padding: 10px 16px; border: none; cursor: pointer; border-radius: var(--koo-r-md); transition: transform 0.12s, box-shadow 0.18s, filter 0.15s; } .koo-btn:active { transform: scale(0.97); } .koo-btn-primary { color: #fff; background: linear-gradient(135deg, var(--koo-coral), var(--koo-coral-dark)); box-shadow: var(--koo-shadow-coral); } .koo-btn-primary:hover { filter: brightness(1.04); } .koo-btn-secondary { color: var(--koo-text-soft); background: var(--koo-cream-card); border: 1px solid var(--koo-line); } .koo-btn-secondary:hover { background: #fff; } /* Display headlines — italic Fraunces hero */ .koo-h1 { font-family: var(--koo-font-display); font-style: italic; font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; color: var(--koo-cocoa); margin: 0; } .koo-h1 b { font-weight: 700; font-style: normal; } .koo-h2 { font-family: var(--koo-font-display); font-style: italic; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--koo-cocoa); margin: 0; } .koo-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--koo-muted); } /* === Reusable page hero — pages drop in this markup right after the * top_nav and get a coral-gradient hero with bobbing KooMascot. * *
*
*

Title

*
Description
*
* *
*/ .koo-page-hero { position: relative; overflow: hidden; border-radius: var(--koo-r-xl); padding: 26px 28px; margin: 0 0 18px; background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, transparent 38%), linear-gradient(135deg, var(--koo-coral) 0%, var(--koo-blush) 60%, var(--koo-coral-dark) 110%); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 24px 56px rgba(244,132,95,0.34), 0 6px 18px rgba(244,132,95,0.22); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; } .koo-page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 90% 10%, rgba(255,255,255,0.30), transparent 60%), radial-gradient(ellipse 60% 100% at 10% 100%, rgba(58,46,34,0.18), transparent 60%); } .koo-page-hero > * { position: relative; z-index: 1; } .koo-page-hero h1 { font-family: var(--koo-font-display); font-style: italic; font-weight: 500; font-size: 38px; line-height: 1.05; letter-spacing: -0.01em; margin: 0; color: #fff; } .koo-page-hero h1 em { font-style: normal; font-weight: 700; } .koo-page-hero .sub { font-size: 14px; opacity: 0.92; margin-top: 6px; max-width: 640px; color: rgba(255,255,255,0.96); font-weight: 500; } .koo-page-hero .mascot { width: 110px; height: 110px; filter: drop-shadow(0 8px 22px rgba(58,46,34,0.20)); animation: koo-page-bob 5.4s ease-in-out infinite; transform-origin: center bottom; } @keyframes koo-page-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } } @media (max-width: 600px) { .koo-page-hero { padding: 22px 22px; } .koo-page-hero h1 { font-size: 28px; } .koo-page-hero .mascot { width: 76px; height: 76px; } } @media (prefers-reduced-motion: reduce) { .koo-page-hero .mascot { animation: none; } } /* Reusable shell — opt-in by setting class="koo-shell" on the page wrapper. */ .koo-shell { max-width: 1100px; margin: 0 auto; padding: 28px 24px 80px; } @media (max-width: 600px) { .koo-shell { padding: 18px 14px 90px; } } /* === Universal page background — applied to body if it has class="koo-page". * Pages can opt in by adding */ body.koo-page { background: radial-gradient(ellipse 70% 55% at 8% 12%, rgba(244,164,136,0.32) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 92% 18%, rgba(122,184,229,0.22) 0%, transparent 55%), var(--koo-cream); background-attachment: fixed; min-height: 100vh; } /* Glass card primitive — "feels like home" without inline styling. */ .koo-glass { background: rgba(255, 248, 234, 0.78); backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%); border: 1px solid rgba(232,214,181,0.55); border-radius: var(--koo-r-lg); padding: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(58,46,34,0.05), 0 12px 32px rgba(58,46,34,0.06); }