/* * logos-marketing.css — Reusable landing / docs layout for LOGOS pages. * * Usage (after logos-base.css, which Flask injects on most routes): * *

... content ...

* * Typography and radii pull from --logos-* variables in logos-base.css. */ .logos-marketing-body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; line-height: 1.55; font-size: var(--logos-type-body, clamp(22px, 5.2vw + 15px, 30px)); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background-attachment: fixed; color: #333; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); } .logos-marketing { display: block; } .logos-mkt-shell { max-width: min(1200px, 100%); margin: 0 auto; padding: var(--logos-space-gutter); } .logos-mkt-panel { background: #fff; border-radius: var(--logos-radius-panel); padding: clamp(1rem, 4vw, 1.875rem); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .logos-marketing .logos-mkt-hero { text-align: center; padding: var(--logos-space-gutter) 0 clamp(1.25rem, 3vw, 1.875rem); } .logos-marketing .logos-mkt-hero h1 { color: #4a5568; margin: 0 0 var(--logos-space-gutter); font-size: var(--logos-type-hero); font-weight: 700; line-height: 1.12; } .logos-marketing .logos-mkt-hero .subtitle { color: #5a6778; font-style: italic; margin: 0 0 clamp(0.625rem, 2.5vw, 1rem); font-size: var(--logos-type-subhead); line-height: 1.4; } .logos-marketing .logos-mkt-hero .description { color: #3d4a5c; margin: 0 0 clamp(1rem, 2.5vw, 1.25rem); font-size: var(--logos-type-lead); line-height: 1.55; max-width: 50rem; margin-left: auto; margin-right: auto; } .logos-marketing .logos-mkt-hero .tagline { color: #5568dc; font-style: italic; font-size: var(--logos-type-subhead); font-weight: 600; margin: 0; line-height: 1.4; } .logos-marketing .philosophy-box { background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%); border: var(--logos-border-accent) solid #667eea; border-radius: var(--logos-radius-panel); padding: var(--logos-space-card-pad); margin: clamp(1rem, 3vw, 1.5rem) 0 clamp(1.25rem, 3.5vw, 2rem); text-align: center; } .logos-marketing .philosophy-box p { color: #3d4a5c; margin: 0.35rem 0; font-size: var(--logos-type-body); line-height: 1.55; } .logos-marketing h2.logos-mkt-section-title { color: #2d3748; border-bottom: var(--logos-border-accent) solid #667eea; padding-bottom: clamp(0.5rem, 1.5vw, 0.625rem); margin: clamp(1.75rem, 5vw, 2.75rem) 0 0; font-size: var(--logos-type-title); line-height: 1.28; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.375rem, 2vw, 0.625rem); } .logos-marketing h3 { color: #4a5568; margin: clamp(1rem, 2.5vw, 1.25rem) 0 0.5rem; font-size: var(--logos-type-heading); } .logos-marketing .philosophy-box h3 { color: #5a67d8; margin: 0 0 0.5rem; } .logos-marketing .card { background: #f8f9fa; border-left: clamp(3px, 0.55vw, 4px) solid #667eea; padding: var(--logos-space-card-pad); margin: clamp(0.75rem, 2.5vw, 1rem) 0; border-radius: var(--logos-radius-card); transition: background 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .logos-marketing .card:hover { background: #e2e8f0; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } } .logos-marketing .card-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: clamp(0.5rem, 2vw, 0.75rem); margin-bottom: clamp(0.75rem, 2vw, 1rem); } .logos-marketing .card-title { font-weight: 700; color: #2d3748; font-size: var(--logos-type-heading); display: flex; align-items: center; gap: 0.5rem; line-height: 1.28; min-width: 0; } .logos-marketing .card-description { color: #3d4a5c; margin-bottom: clamp(0.75rem, 2vw, 1rem); font-size: var(--logos-type-body); line-height: 1.55; } .logos-marketing .card-description:last-child { margin-bottom: 0; } .logos-marketing .card-link { background: #667eea; color: #fff; padding: clamp(0.5rem, 2vw, 0.625rem) clamp(1rem, 3vw, 1.125rem); border-radius: var(--logos-radius-pill); text-decoration: none; font-weight: 600; font-size: var(--logos-type-ui); transition: background 0.15s ease, transform 0.15s ease; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .logos-marketing .card-link:hover { background: #5a67d8; transform: scale(1.03); } } .logos-marketing .status-badge { display: inline-block; padding: clamp(3px, 0.75vw, 5px) clamp(8px, 2vw, 12px); border-radius: var(--logos-radius-card); font-weight: 700; font-size: var(--logos-type-caption); background: #38a169; color: #fff; line-height: 1.25; } .logos-marketing .rules-box { background: #edf2f7; border: 1px solid #cbd5e0; border-radius: var(--logos-radius-card); padding: clamp(0.875rem, 3vw, 1.25rem); margin: clamp(0.75rem, 2.5vw, 1rem) 0; } .logos-marketing .rules-box h4 { color: #2d3748; margin: 0 0 0.625rem; font-size: var(--logos-type-ui); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .logos-marketing .rules-box ul { margin: 0; padding-left: clamp(1rem, 4vw, 1.5rem); color: #3d4a5c; font-size: var(--logos-type-body); line-height: 1.55; } .logos-marketing .rules-box li { margin: clamp(0.35rem, 1.5vw, 0.5rem) 0; } .logos-marketing .footer { text-align: center; margin-top: clamp(1.75rem, 5vw, 2.75rem); padding: clamp(1rem, 3vw, 1.35rem); background: #f7fafc; border-radius: var(--logos-radius-card); border: 1px solid #e2e8f0; } .logos-marketing .footer p { margin: 0.35rem 0; font-size: var(--logos-type-body); } .logos-marketing .footer .copyright { color: #4a5568; } .logos-marketing .footer .motto { color: #667eea; font-weight: 700; font-style: italic; } /* Accent borders */ .logos-marketing .cortex-card { border-left-color: #00bcd4; } .logos-marketing .matrix-card { border-left-color: #4caf50; } .logos-marketing .world-card { border-left-color: #ff9800; } .logos-marketing .gallery-card { border-left-color: #e91e63; } .logos-marketing .egos-card { border-left-color: #9c27b0; } .logos-marketing .bridge-card { border-left-color: #f44336; } /* ── Touch / narrow viewports: px-first (incl. Android “Desktop site” ~980px wide) */ @media (max-width: 1024px) { .logos-marketing-body { font-size: clamp(26px, 1.5rem + 1.35vw, 38px); line-height: 1.62; color: #0f172a; } .logos-marketing .logos-mkt-hero h1 { font-size: clamp(52px, 2.85rem + 3.85vw, 78px); line-height: 1.1; font-weight: 800; color: #1e293b; } .logos-marketing .logos-mkt-hero .subtitle { font-size: clamp(26px, 1.5rem + 1.2vw, 36px); color: #334155; } .logos-marketing .logos-mkt-hero .description { font-size: clamp(26px, 1.48rem + 1.1vw, 36px); color: #1e293b; } .logos-marketing .logos-mkt-hero .tagline { font-size: clamp(25px, 1.45rem + 1.08vw, 34px); } .logos-marketing .philosophy-box p { font-size: clamp(25px, 1.42rem + 1.02vw, 34px); color: #1e293b; } .logos-marketing h2.logos-mkt-section-title { font-size: clamp(34px, 1.98rem + 1.42vw, 48px); color: #0f172a; } .logos-marketing h3 { font-size: clamp(28px, 1.68rem + 1.12vw, 40px); } .logos-marketing .card-title { font-size: clamp(26px, 1.62rem + 1.02vw, 38px); } .logos-marketing .card-description { font-size: clamp(25px, 1.48rem + 1.05vw, 36px); color: #1e293b; } .logos-marketing .card-link { font-size: clamp(23px, 1.42rem + 0.95vw, 32px); min-height: 56px; } .logos-marketing .status-badge { font-size: clamp(20px, 1.2rem + 0.72vw, 26px); } .logos-marketing .rules-box h4 { font-size: clamp(24px, 1.5rem + 1.02vw, 34px); } .logos-marketing .rules-box ul { font-size: clamp(25px, 1.45rem + 1.02vw, 34px); color: #1e293b; } .logos-marketing .footer p { font-size: clamp(24px, 1.45rem + 1.02vw, 34px); } } @media (max-width: 480px) { .logos-marketing .rules-box li { margin: 0.52em 0; } }