/* CHREMIGO Event Group — brand theme ================================================================== The B2B umbrella: brand holder, contract partner, sponsorship counterpart. It never sells a night out — it sells reliability. Visual logic (deliberately UNLIKE the event series): cool graphite and paper instead of warm sand; one restrained brass accent instead of a loud sunset; near-square corners; tight, technical spacing; crisp neutral shadows. Sober, documentary, trustworthy. Scope: apply data-brand="chremigo" on or any wrapper. ================================================================== */ [data-brand="chremigo"] { /* ---- Base palette ------------------------------------------------ */ /* Ink — the corporate dark */ --ch-ink-900: #0F1114; /* @kind color */ --ch-ink-800: #16191E; /* @kind color */ --ch-graphite: #23272E; /* @kind color */ --ch-slate-600: #4C525C; /* @kind color */ --ch-slate-400: #767D88; /* @kind color */ --ch-slate-200: #B6BBC3; /* @kind color */ /* Paper — cool off-white documents */ --ch-paper: #F4F3F0; /* @kind color */ --ch-paper-2: #EAE9E5; /* @kind color */ --ch-line: #D8D7D2; /* @kind color */ /* Brass — the single accent. Signature of value and contract. */ --ch-brass-300: #D9BD86; /* @kind color */ --ch-brass-500: #A8813F; /* @kind color */ --ch-brass-700: #7C5D28; /* @kind color */ /* ---- Semantic aliases ------------------------------------------- */ --color-bg: var(--ch-paper); --color-bg-alt: var(--ch-paper-2); --color-surface: #FFFFFF; --color-surface-alt: var(--ch-paper-2); --color-surface-dark: var(--ch-ink-900); --text-strong: var(--ch-ink-900); --text-body: var(--ch-graphite); --text-muted: var(--ch-slate-600); --text-faint: var(--ch-slate-400); --text-on-dark: var(--ch-paper); --text-on-dark-muted: rgba(244, 243, 240, 0.62); --color-accent: var(--ch-brass-500); --color-accent-hover: var(--ch-brass-700); --color-accent-soft: var(--ch-brass-300); --text-on-accent: #FFFFFF; --border-hair: rgba(15, 17, 20, 0.07); --border-soft: rgba(15, 17, 20, 0.12); --border-strong: rgba(15, 17, 20, 0.28); --border-on-dark: rgba(244, 243, 240, 0.16); --focus-ring: rgba(168, 129, 63, 0.42); /* ---- Typography -------------------------------------------------- */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* @kind font */ --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* @kind font */ --font-serif: 'Source Serif 4', Georgia, serif; /* @kind font */ --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* Tighter, more technical scale than the event brands */ --fs-display: clamp(2.5rem, 4.4vw, 4rem); /* @kind font */ --fs-h1: clamp(2rem, 3.2vw, 2.75rem); /* @kind font */ --fs-h2: 1.75rem; /* @kind font */ --fs-h3: 1.3125rem; /* @kind font */ --fs-lead: 1.125rem; /* @kind font */ --fs-body: 0.9375rem; /* @kind font */ --fs-sm: 0.8125rem; /* @kind font */ --fs-xs: 0.6875rem; /* @kind font */ --fs-label: 0.6875rem; /* @kind font */ --lh-tight: 1.06; /* @kind other */ --lh-snug: 1.24; /* @kind other */ --lh-body: 1.58; /* @kind other */ /* Corporate wordmark tracking — tight, not airy */ --ls-display: -0.022em; /* @kind other */ --ls-tight: -0.012em; /* @kind other */ --ls-normal: 0; /* @kind other */ --ls-label: 0.14em; /* @kind other */ /* ---- Spacing ----------------------------------------------------- */ --space-1: 4px; /* @kind spacing */ --space-2: 8px; /* @kind spacing */ --space-3: 12px; /* @kind spacing */ --space-4: 16px; /* @kind spacing */ --space-5: 24px; /* @kind spacing */ --space-6: 32px; /* @kind spacing */ --space-7: 48px; /* @kind spacing */ --space-8: 64px; /* @kind spacing */ --space-9: 88px; /* @kind spacing */ --section-y: clamp(56px, 7vw, 104px); /* @kind spacing */ --section-x: clamp(20px, 4vw, 64px); /* @kind spacing */ --measure: 68ch; /* @kind spacing */ --container: 1160px; /* @kind spacing */ /* ---- Effects ----------------------------------------------------- */ /* Near-square: documents and contracts, not lifestyle cards */ --radius-xs: 2px; /* @kind radius */ --radius-sm: 3px; /* @kind radius */ --radius-md: 5px; /* @kind radius */ --radius-lg: 8px; /* @kind radius */ --radius-pill: 999px; /* @kind radius */ --hairline: 1px solid var(--border-soft); /* Cool, crisp elevation — neutral, never warm */ --shadow-xs: 0 1px 2px rgba(15, 17, 20, 0.07); /* @kind shadow */ --shadow-sm: 0 2px 6px rgba(15, 17, 20, 0.09); /* @kind shadow */ --shadow-md: 0 8px 24px rgba(15, 17, 20, 0.11); /* @kind shadow */ --shadow-lg: 0 20px 48px rgba(15, 17, 20, 0.16); /* @kind shadow */ /* Motion — brisk and businesslike, not sunset-slow */ --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); /* @kind other */ --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* ---- Brand devices ---------------------------------------------- */ /* A single hairline brass rule is the recurring graphic device. */ --ch-rule: linear-gradient(90deg, var(--ch-brass-500) 0%, var(--ch-brass-500) 100%); /* @kind other */ /* Ink field for covers, contracts and title pages */ --ch-field-ink: linear-gradient(160deg, #1B1F25 0%, #0F1114 100%); /* @kind other */ } /* Element defaults inside the CHREMIGO scope. Wrapped in :where() so their specificity is ZERO — a component or kit class must always be able to override them (e.g. a heading turning paper-coloured on an ink field). Do not unwrap these. */ :where([data-brand="chremigo"]) body, :where(body[data-brand="chremigo"]) { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); background: var(--color-bg); } :where([data-brand="chremigo"]) :where(h1, h2, h3) { font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--text-strong); } /* Utility: the corporate label — tight caps, NOT the airy event eyebrow */ :where([data-brand="chremigo"]) .ch-label { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); } /* Utility: brass hairline divider */ :where([data-brand="chremigo"]) .ch-rule { height: 2px; width: 44px; background: var(--ch-brass-500); border: 0; }