/* @theme: Onyx */ /* @slug: onyx */ /* @description: The reference token-only theme — a refined dark surface with a warm amber accent. Overrides only --cow-* token values on body.theme-onyx; ships no paint subtree. */ /* Editor-managed token layer — plain CSS, no build needed. */ body.theme-onyx { /* @group: Brand */ /* @label: Brand Primary | @type: color */ --cow-brand-primary: #e0a23f; /* @label: Brand Primary Hover | @type: color */ --cow-brand-primary-hover: #ecb054; /* @label: Brand Primary Active | @type: color */ --cow-brand-primary-active: #c5882c; /* @label: Brand On Primary | @type: color */ --cow-brand-on-primary: #1a1206; /* @label: Brand Primary Subtle | @type: color */ --cow-brand-primary-subtle: color-mix(in srgb, var(--cow-brand-primary) 16%, transparent); /* @label: Brand Secondary | @type: color */ --cow-brand-secondary: #2a2d35; /* @label: Brand Secondary Hover | @type: color */ --cow-brand-secondary-hover: #333742; /* @label: Brand On Secondary | @type: color */ --cow-brand-on-secondary: #f2f3f5; /* @group: Background Colors */ /* @label: Body Background | @type: color */ --cow-color-background-body: #0e0f12; /* @label: Surface | @type: color */ --cow-color-background-surface: #181a1f; /* @label: Surface Alt | @type: color */ --cow-color-background-surface-alt: #21242b; /* @label: Surface Elevated | @type: color */ --cow-color-background-surface-elevated: #262932; /* @label: Hover Background | @type: color */ --cow-color-background-hover: #2b2e38; /* @label: Input Background | @type: color */ --cow-color-background-input: #1c1e24; /* @group: Text Colors */ /* @label: Text Default | @type: color */ /* Warm ivory cream — pulls a touch of the amber vignette into the type so body copy reads as part of the Onyx atmosphere rather than a sterile white slab printed on top of it. Contrast against the dark surface (#181a1f) stays well above WCAG AA (~15:1). */ --cow-color-text-default: #f5efe2; /* @label: Text Secondary | @type: color */ /* Tuned to match the warm-ivory family — neutral cool grey would clash against the amber-tinted default text once placed beside it. */ --cow-color-text-secondary: #c8c1b1; /* @label: Text Muted | @type: color */ --cow-color-text-muted: #8e8979; /* @label: Text Danger | @type: color */ --cow-color-text-danger: var(--cow-color-status-danger-text); /* @group: Borders */ /* @label: Border Default | @type: color */ /* Soft whitish borders that sit gently on the warm body atmosphere instead of cutting hard charcoal lines into it. Same opacity-based trick as Apple's translucent UI surfaces. */ --cow-color-border-default: rgb(255 255 255 / 0.08); /* @label: Border Subtle | @type: color */ --cow-color-border-subtle: rgb(255 255 255 / 0.04); /* @group: Overlay */ /* @label: Overlay Scrim | @type: color */ --cow-color-overlay-scrim: rgb(0 0 0 / 0.66); /* @group: Status Colors */ /* @label: Status Danger | @type: color */ --cow-color-status-danger: #ef6b6b; /* @label: Status Danger Background | @type: color */ --cow-color-status-danger-bg: color-mix(in srgb, var(--cow-color-status-danger) 18%, transparent); /* @label: Status Danger Text | @type: color */ --cow-color-status-danger-text: #f4a3a3; /* @label: Status Success | @type: color */ --cow-color-status-success: #4fc98a; /* @label: Status Success Background | @type: color */ --cow-color-status-success-bg: color-mix(in srgb, var(--cow-color-status-success) 18%, transparent); /* @label: Status Success Text | @type: color */ --cow-color-status-success-text: #8edcb4; /* @label: Status Warning | @type: color */ --cow-color-status-warning: #e6b052; /* @label: Status Warning Background | @type: color */ --cow-color-status-warning-bg: color-mix(in srgb, var(--cow-color-status-warning) 18%, transparent); /* @label: Status Warning Text | @type: color */ --cow-color-status-warning-text: #f0cd8f; /* @label: Status Info | @type: color */ --cow-color-status-info: #5fa8e6; /* @label: Status Info Background | @type: color */ --cow-color-status-info-bg: color-mix(in srgb, var(--cow-color-status-info) 18%, transparent); /* @label: Status Info Text | @type: color */ --cow-color-status-info-text: #a0c9ee; /* @group: Status Text-On Colors */ /* @label: Text On Status Warning | @type: color */ --cow-color-text-on-status-warning: #1a1206; /* @group: Typography */ /* @label: Base Font Family | @type: font */ --cow-font-family-base: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* @label: Display Font Family | @type: font */ --cow-font-family-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* @label: Heading Weight | @type: text */ --cow-typography-heading-weight: 400; /* @label: Heading Line Height | @type: text */ --cow-typography-heading-line-height: 1.1; /* @label: Heading Letter Spacing | @type: text */ --cow-typography-heading-letter-spacing: -0.01em; /* Onyx font-size scale — one notch finer than base so content reads smarter and less heavy: body 15px (was 16), h3 20px (was 24), h2 24px (was 30), h1 30px (was 36). The smaller sm/xs steps used by UI chrome (nav, buttons, footer links) stay put so chrome stays crisp. */ /* @label: Font Size Base | @type: size */ --cow-font-size-base: 0.9375rem; /* @label: Font Size 2XL | @type: size */ --cow-font-size-2xl: 1.25rem; /* @label: Font Size 3XL | @type: size */ --cow-font-size-3xl: 1.5rem; /* @label: Font Size 4XL | @type: size */ --cow-font-size-4xl: 1.875rem; /* @group: Radii */ /* @label: Radius | @type: size */ --cow-radius: 8px; /* @label: Radius Large | @type: size */ --cow-radius-lg: 14px; /* @label: Radius XL | @type: size */ --cow-radius-xl: 20px; /* @label: Radius 2XL | @type: size */ --cow-radius-2xl: 28px; /* @group: Shadows */ /* @label: Shadow SM | @type: shadow */ --cow-shadow-sm: 0 2px 8px rgb(0 0 0 / 0.45); /* @label: Shadow MD | @type: shadow */ --cow-shadow-md: 0 8px 24px rgb(0 0 0 / 0.55); /* @label: Shadow LG | @type: shadow */ --cow-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6); /* @label: Shadow XL | @type: shadow */ --cow-shadow-xl: 0 28px 70px rgb(0 0 0 / 0.7); /* @label: Shadow Inner | @type: shadow */ --cow-shadow-inner: inset 0 1px 0 rgb(255 255 255 / 0.04); /* @label: Shadow Glow | @type: shadow */ --cow-shadow-glow: 0 0 0 1px rgb(224 162 63 / 0.4), 0 8px 32px rgb(224 162 63 / 0.18); /* @group: Sizing */ /* @label: Header Height | @type: size */ --cow-sizing-navbar: 72px; /* @group: Header */ /* @label: Header Background | @type: color */ /* Transparent so the body atmosphere reads through the header band. The backdrop-filter still provides a soft frosted-glass legibility layer when content scrolls under, without hiding the gradient. */ --cow-frame-header-bg: transparent; /* @label: Header Backdrop Filter | @type: text */ --cow-frame-header-backdrop-filter: blur(6px) saturate(120%); /* @label: Header Max Width | @type: size */ --cow-frame-header-max-width: var(--cow-sizing-container-wide); /* @group: Footer */ /* @label: Footer Padding Block | @type: size */ --cow-frame-footer-padding-block: var(--cow-spacing-12) var(--cow-spacing-8); /* @label: Footer Heading Font Size | @type: size */ --cow-widget-footer-heading-font-size: var(--cow-font-size-xs); /* @label: Footer Heading Font Weight | @type: text */ --cow-widget-footer-heading-font-weight: var(--cow-font-weight-semibold); /* @label: Footer Heading Text Transform | @type: text */ --cow-widget-footer-heading-text-transform: uppercase; /* @label: Footer Heading Letter Spacing | @type: text */ --cow-widget-footer-heading-letter-spacing: 0.18em; /* @label: Footer Heading Color | @type: color */ --cow-widget-footer-heading-color: var(--cow-color-text-muted); /* @label: Footer Link Color | @type: color */ --cow-widget-footer-link-color: var(--cow-color-text-secondary); /* @label: Footer Link Color Hover | @type: color */ --cow-widget-footer-link-color-hover: var(--cow-color-text-default); /* @label: Footer Link Font Size | @type: size */ --cow-widget-footer-link-font-size: var(--cow-font-size-sm); /* @group: Button */ /* @label: Button Radius | @type: size */ --cow-widget-button-radius: var(--cow-radius-pill); /* @label: Button Font Size | @type: size */ --cow-widget-button-font-size: var(--cow-font-size-sm); /* @label: Button Font Size (sm) | @type: size */ --cow-widget-button-font-size-sm: var(--cow-font-size-xs); /* @label: Button Font Size (lg) | @type: size */ --cow-widget-button-font-size-lg: var(--cow-font-size-base); /* @label: Button Primary Background | @type: color */ --cow-widget-button-primary-bg: linear-gradient(180deg, var(--cow-brand-primary-hover), var(--cow-brand-primary)); /* @label: Button Primary Background Hover | @type: color */ --cow-widget-button-primary-bg-hover: linear-gradient(180deg, #f0bf6a, var(--cow-brand-primary-hover)); /* @label: Button Primary Inset Shadow | @type: shadow */ --cow-widget-button-primary-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.15); /* @group: User Profile */ /* @label: User Profile Toggle Font Size | @type: size */ --cow-widget-user-profile-toggle-font-size: var(--cow-font-size-sm); /* @label: User Profile Toggle Padding Block | @type: size */ --cow-widget-user-profile-toggle-padding-block: var(--cow-spacing-1); /* @label: User Profile Toggle Padding Inline | @type: size */ --cow-widget-user-profile-toggle-padding-inline: var(--cow-spacing-3); /* @label: User Profile Toggle Background | @type: color */ --cow-widget-user-profile-toggle-background: var(--cow-color-background-surface-alt); /* @label: User Profile Toggle Border Color | @type: color */ --cow-widget-user-profile-toggle-border-color: var(--cow-color-border-subtle); /* @label: User Profile Toggle Radius | @type: size */ --cow-widget-user-profile-toggle-radius: var(--cow-radius-pill); /* @label: User Profile Toggle Color | @type: color */ --cow-widget-user-profile-toggle-color: var(--cow-color-text-secondary); /* @label: User Profile Avatar Border Color | @type: color */ /* Thin amber-tinted ring around the avatar — picks up the brand accent so the disc reads as a deliberate badge rather than a flat circle. */ --cow-widget-user-profile-avatar-border-color: rgb(255 255 255 / 0.10); /* @label: User Profile Avatar Color | @type: color */ /* SVG placeholder + initial inside the avatar use the brand amber. */ --cow-widget-user-profile-avatar-color: var(--cow-brand-primary); /* @label: User Profile Link Font Size | @type: size */ --cow-widget-user-profile-link-font-size: var(--cow-font-size-sm); /* @group: Header Aux Chip */ /* Sharper outline so the four header chips read as a deliberate chip family on the dark surface — the default subtle border is too faint against Onyx's warm gradient body. */ /* @label: Aux Chip Border Color | @type: color */ --cow-widget-aux-chip-border-color: var(--cow-color-border-default); /* @group: Navigation */ /* @label: Nav Link Font Size | @type: size */ --cow-widget-navigation-link-font-size: var(--cow-font-size-sm); /* @label: Nav Link Color | @type: color */ --cow-widget-navigation-link-color: var(--cow-color-text-secondary); /* @label: Nav Link Radius | @type: size */ --cow-widget-navigation-link-radius: var(--cow-radius-pill); /* @label: Nav Link Background Hover | @type: color */ --cow-widget-navigation-link-bg-hover: var(--cow-color-background-hover); /* @label: Nav Link Background Active | @type: color */ --cow-widget-navigation-link-bg-active: var(--cow-brand-primary-subtle); /* @label: Nav Link Shadow Active | @type: shadow */ --cow-widget-navigation-link-shadow-active: inset 0 0 0 1px rgb(224 162 63 / 0.25); /* @group: Credit Option Card */ /* @label: Amount Font Family | @type: font */ /* Switch the big credit-amount to Cormorant Garamond so it reads as an editorial number, matching plan-name / gallery-title etc. */ --cow-widget-credit-option-card-amount-font-family: var(--cow-font-family-display); /* @label: Amount Font Size | @type: size */ /* One step finer (2xl = 20px) so the option-cards don't shout. */ --cow-widget-credit-option-card-amount-font-size: var(--cow-font-size-2xl); /* @label: Amount Font Weight | @type: text */ /* Regular weight matches the editorial heading tone. */ --cow-widget-credit-option-card-amount-font-weight: var(--cow-font-weight-regular); /* @group: Modal Frosted-Glass */ /* @label: Modal Background | @type: color */ /* Dark base tint. The gradient image (next token) layers above this so the modal still reads as a dark surface in dark spots. Slightly more transparent (0.55) than before so the gradient hot-spots have room to glow through. */ --cow-widget-modal-background: rgb(24 26 31 / 0.55); /* @label: Modal Background Image | @type: image */ /* Two off-center radial hot-spots (warm amber upper-left, cool violet lower-right) painted across the modal surface — mirrors the body vignette so the modal feels carved out of the same atmosphere rather than dropped on top of it. */ --cow-widget-modal-background-image: radial-gradient(ellipse 70% 60% at 15% 10%, rgb(224 162 63 / 0.18), transparent 60%), radial-gradient(ellipse 55% 50% at 85% 90%, rgb(130 70 190 / 0.16), transparent 60%); /* @label: Modal Backdrop Filter | @type: text */ --cow-widget-modal-backdrop-filter: blur(18px) saturate(130%); /* @label: Modal Border Color | @type: color */ --cow-widget-modal-border-color: rgb(255 255 255 / 0.08); /* @label: Modal Backdrop Scrim | @type: color */ /* Warmer scrim than the neutral default so the dimmed body underneath still reads as part of the same atmosphere. */ --cow-widget-modal-backdrop-scrim: rgb(14 9 4 / 0.55); /* @label: Modal Backdrop Filter (scrim) | @type: text */ --cow-widget-modal-backdrop-scrim-filter: blur(4px); /* @group: Card Frosted-Glass */ /* @label: Card Background | @type: color */ /* Semi-transparent dark surface so the warm body gradient bleeds through every card, tying tiles into the atmosphere instead of sitting as opaque rectangles on top of it. */ --cow-widget-card-background: rgb(24 26 31 / 0.55); /* @label: Card Backdrop Filter | @type: text */ /* Blur softens whatever sits behind the card (body gradient, the widget-band atmo layer, neighbouring content). Saturate keeps the warm tones from going grey through the blur. */ --cow-widget-card-backdrop-filter: blur(12px) saturate(130%); /* @label: Widget Shell Card Background | @type: color */ /* Same treatment for `.widget--outer-card` (Twig widget_shell macro) so every "card-mode" widget gets the frosted look too. */ --cow-widget-shell-card-background: rgb(24 26 31 / 0.55); /* @label: Widget Shell Card Backdrop Filter | @type: text */ --cow-widget-shell-card-backdrop-filter: blur(12px) saturate(130%); /* @group: Hero Image Widget */ /* @label: Headline Font Family | @type: font */ /* Cormorant Garamond — Onyx's editorial display face. Carries the same refined tone as the credit-option amount and the plan-name headings. */ --cow-widget-hero-image-headline-font-family: var(--cow-font-family-display); /* @label: Headline Font Size | @type: size */ /* 6xl (~56px) — gives the hero title the room a hero deserves without crossing into the bombast 7xl reserved for landing splash moments. */ --cow-widget-hero-image-headline-font-size: var(--cow-font-size-6xl); /* @label: Headline Font Weight | @type: text */ /* Regular weight matches the editorial tone — bold would feel shouty in the Cormorant face. */ --cow-widget-hero-image-headline-font-weight: var(--cow-font-weight-regular); /* @label: Headline Line Height | @type: text */ --cow-widget-hero-image-headline-line-height: 1.05; /* @label: Headline Letter Spacing | @type: text */ --cow-widget-hero-image-headline-letter-spacing: -0.01em; /* @label: Text Font Family | @type: font */ --cow-widget-hero-image-text-font-family: var(--cow-font-family-body); /* @label: Text Font Size | @type: size */ /* xl (~20px) — distinctly larger than body copy so the hero lede has presence next to the 6xl headline. */ --cow-widget-hero-image-text-font-size: var(--cow-font-size-xl); /* @label: Text Line Height | @type: text */ --cow-widget-hero-image-text-line-height: 1.5; /* @group: Frontend Chat */ /* @label: Details Overlay Background Color | @type: color */ /* Solid dark base — the overlay sits on top of the chat thread, so it must occlude completely (no transparency here). The gradient image (next token) layers warm/cool hot-spots so the panel still feels like part of the Onyx atmosphere instead of a flat slab. */ --cow-widget-fchat-details-overlay-bg: var(--cow-color-background-surface); /* @label: Details Overlay Background Image | @type: image */ --cow-widget-fchat-details-overlay-bg-image: radial-gradient(ellipse 70% 60% at 15% 10%, rgb(224 162 63 / 0.18), transparent 60%), radial-gradient(ellipse 55% 50% at 85% 90%, rgb(130 70 190 / 0.16), transparent 60%); /* @group: Atmospheric Decoration */ /* @label: Vignette | @type: image */ /* Multi-stop full-viewport gradient — three softly placed hot-spots (warm amber top-left, rouge top-right, violet bottom-centre) at 12-18% alpha give the entire page a painterly atmospheric base instead of a flat dark surface. With the header set to transparent, this gradient is what carries the mood. */ --cow-decoration-vignette: radial-gradient(ellipse 75% 60% at 20% 12%, rgb(224 162 63 / 0.28), transparent 60%), radial-gradient(ellipse 65% 50% at 88% 22%, rgb(200 90 70 / 0.22), transparent 60%), radial-gradient(ellipse 55% 45% at 90% 80%, rgb(224 130 70 / 0.18), transparent 60%), radial-gradient(ellipse 70% 55% at 35% 95%, rgb(130 70 190 / 0.18), transparent 65%); /* @label: Grain Texture | @type: image */ --cow-decoration-grain: url("data:image/svg+xml;utf8,"); /* @label: Grain Opacity | @type: text */ --cow-decoration-grain-opacity: 0.18; /* @label: Grain Blend Mode | @type: text */ --cow-decoration-grain-blend: overlay; }