/* ================================================================ COGNITONIC SYSTEMS — Shared Design System Consult | Innovate | Deliver © 2018 - [dynamic] Cognitonic Systems | All Rights Reserved ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap'); :root { --ink: #0d0f14; --ink-muted: #3a3f4d; --ink-faint: #7a8099; --surface: #f5f4f0; --surface-2: #eceae4; --white: #ffffff; --accent: #c8522a; --accent-2: #1a3a5c; --accent-3: #e8a44a; --border: rgba(13,15,20,0.12); --radius: 4px; --shadow: 0 2px 16px rgba(13,15,20,0.08); --shadow-lg: 0 8px 40px rgba(13,15,20,0.13); --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'Space Mono', monospace; --transition: 0.22s cubic-bezier(0.4,0,0.2,1); /* ── Lab identity colours ─────────────────────────── Applied via [data-lab="labs01|labs02|labs03|mplace"] on . Overrides --lab-primary & --lab-hero used by .cog-hero and .cog-header accent line. */ --lab-primary: var(--accent); /* default (no lab) */ --lab-hero: var(--accent-2); /* default hero bg */ /* Labs 01 — Teal */ --lab01-primary: #0b7a75; --lab01-hero: #074a47; /* Labs 02 — Indigo */ --lab02-primary: #3d52c4; --lab02-hero: #1e2a6e; /* Labs 03 — Plum (branded pages handle their own shell) */ --lab03-primary: #7b3fa0; --lab03-hero: #3e1457; /* Marketplace — Forest */ --mplace-primary: #1a8c52; --mplace-hero: #0d4f2e; } /* ── Lab theme overrides ──────────────────────────── */ [data-lab="labs01"] { --lab-primary: var(--lab01-primary); --lab-hero: var(--lab01-hero); } [data-lab="labs02"] { --lab-primary: var(--lab02-primary); --lab-hero: var(--lab02-hero); } [data-lab="labs03"] { --lab-primary: var(--lab03-primary); --lab-hero: var(--lab03-hero); } [data-lab="mplace"] { --lab-primary: var(--mplace-primary); --lab-hero: var(--mplace-hero); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--surface); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* ── HEADER ─────────────────────────────────────────── */ .cog-header { background: var(--ink); border-bottom: 3px solid var(--lab-primary); padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between; height: 68px; position: sticky; top: 0; z-index: 100; } .cog-logo { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; } .cog-logo img { height: 75px; width: auto; } .cog-logo-fallback { width: 36px; height: 36px; background: var(--accent); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--white); letter-spacing: -1px; flex-shrink: 0; } .cog-brand { display: flex; display: none; flex-direction: column; } .cog-brand-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); line-height: 1.1; letter-spacing: 0.01em; } .cog-brand-tag { font-family: var(--font-mono); font-size: 0.58rem; color: var(--accent-3); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; display: none; } .cog-nav { display: flex; /* display: none; */ align-items: center; gap: 0.25rem; } .cog-nav a { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.7); text-decoration: none; padding: 0.5rem 0.9rem; border-radius: var(--radius); transition: color var(--transition), background var(--transition); letter-spacing: 0.01em; } .cog-nav a:hover, .cog-nav a.active { color: var(--white); background: rgba(255,255,255,0.08); } .cog-nav a.active { color: var(--accent-3); } /* ── PAGE HERO / TITLE BAND ──────────────────────────── */ .cog-hero { background: var(--lab-hero); padding: 3rem 2.5rem 2.5rem; position: relative; overflow: hidden; } .cog-hero::before { content: ''; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(200,82,42,0.12); pointer-events: none; } .cog-hero::after { content: ''; position: absolute; bottom: -40px; left: 10%; width: 180px; height: 180px; border-radius: 50%; background: rgba(232,164,74,0.08); pointer-events: none; } .cog-hero-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-3); margin-bottom: 0.6rem; display: block; } .cog-hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--white); line-height: 1.15; font-weight: 400; max-width: 600px; } .cog-hero p { margin-top: 0.75rem; color: rgba(255,255,255,0.65); font-size: 1rem; max-width: 520px; line-height: 1.65; } /* ── MAIN CONTENT ────────────────────────────────────── */ .cog-main { flex: 1; padding: 2.5rem; max-width: 1300px; width: 100%; margin: 0 auto; } .cog-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .cog-card-header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; } .cog-card-header h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--ink); } .cog-card-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lab-primary); flex-shrink: 0; } .cog-card-body { padding: 2rem; } /* Pega embed wrapper */ .cog-pega-wrap { width: 100%; min-height: 560px; } /* ── FOOTER ──────────────────────────────────────────── */ .cog-footer { background: var(--ink); border-top: 3px solid var(--accent); padding: 1.35rem 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; } .cog-footer-copy { font-family: var(--font-mono); font-size: 0.7rem; color: var(--white); letter-spacing: 0.04em; } .cog-footer-links { display: flex; gap: 1.5rem; } .cog-footer-links a { font-size: 0.78rem; color: var(--white); text-decoration: none; transition: color var(--transition); font-weight: 500; } .cog-footer-links a:hover { color: var(--accent-3); } /* ── UTILITIES ───────────────────────────────────────── */ .cog-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 2px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; background: rgba(200,82,42,0.1); color: var(--accent); border: 1px solid rgba(200,82,42,0.2); } /* ── RESPONSIVE ─────────────────────────────────────── */ @media (max-width: 768px) { .cog-header { padding: 0 1.25rem; height: 58px; } .cog-hero { padding: 2rem 1.25rem 1.75rem; } .cog-main { padding: 1.25rem; } .cog-footer { padding: 1.1rem 1.25rem; flex-direction: column; align-items: flex-start; } .cog-nav { display: none; } .cog-card-body { padding: 1.25rem; } }