/* * cowbloke-ui.css — shared "playful neobrutalist" design system. * * Extracted from the cowbloke.com landing page so every surface (home, * experiments, admin, budget …) can share the same warm, bold look: hard * offset shadows, 2px ink outlines, bright accent tiles and a colourful * ambient wash. Consume it as plain CSS via * https://cowbloke.com/theme/cowbloke-ui.css alongside tweakcn.css (which * supplies the theme-aware --background / --foreground tokens). * * Accent colours stay dark-inked in both themes on purpose: the tiles are * always bright, so the ink border + text keep their contrast either way. */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Space+Grotesk:wght@600;700&display=swap"); :root { --cb-ink: #17130f; --cb-paper: #fff9ed; --cb-coral: #ff6b6b; --cb-amber: #ffc844; --cb-yellow: #f4b942; --cb-teal: #4ecdc4; --cb-green: #72d39a; --cb-violet: #b69cff; --cb-blue: #69a7ff; --cb-orange: #ff9f43; --cb-peach: #ff8a65; --cb-shadow: 5px 6px 0 var(--cb-ink); --cb-shadow-hover: 8px 9px 0 var(--cb-ink); } /* ---- service → accent map (mirrors the service bar) ---- */ .cb-a-home, .cb-a-account { --cb-accent: var(--cb-amber); } .cb-a-games { --cb-accent: var(--cb-coral); } .cb-a-projects { --cb-accent: var(--cb-yellow); } .cb-a-cars { --cb-accent: var(--cb-peach); } .cb-a-chess { --cb-accent: var(--cb-teal); } .cb-a-budget { --cb-accent: var(--cb-green); } .cb-a-files { --cb-accent: var(--cb-violet); } .cb-a-kaneo { --cb-accent: var(--cb-blue); } .cb-a-admin { --cb-accent: var(--cb-orange); } /* ---- colourful ambient wash (opt in with ) ---- */ body.cb-ambient::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at 10% 6%, rgba(255, 200, 68, .20), transparent 30%), radial-gradient(circle at 92% 12%, rgba(255, 107, 107, .17), transparent 32%), radial-gradient(circle at 82% 92%, rgba(78, 205, 196, .16), transparent 34%), radial-gradient(circle at 16% 94%, rgba(182, 156, 255, .15), transparent 34%); } /* ---- typography ---- */ .cb-display { font-family: "Space Grotesk", var(--font-sans), sans-serif; font-weight: 700; line-height: .9; letter-spacing: -.06em; } .cb-domain-dot { color: var(--cb-coral); } /* ---- neobrutalist card ---- */ .cb-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; color: var(--cb-ink) !important; background: var(--cb-accent, var(--cb-paper)); border: 2px solid var(--cb-ink); border-radius: clamp(18px, 2.2vw, 26px); box-shadow: var(--cb-shadow); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; } a.cb-card:hover, button.cb-card:hover { transform: translate(-2px, -2px) rotate(-.3deg); box-shadow: var(--cb-shadow-hover); } a.cb-card:active, button.cb-card:active { transform: translate(2px, 3px); box-shadow: 2px 2px 0 var(--cb-ink); } .cb-card:focus-visible { outline: 4px solid #fff; outline-offset: 3px; } .cb-card::after { content: ""; position: absolute; z-index: -1; width: 110px; height: 110px; right: -45px; bottom: -55px; border: 18px solid rgba(255, 255, 255, .26); border-radius: 50%; } /* ---- pill badge ---- */ .cb-badge { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 5px 9px; border: 1.5px solid var(--cb-ink); border-radius: 999px; background: rgba(255, 255, 255, .3); color: var(--cb-ink); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* ---- icon chip ---- */ .cb-icon { display: grid; place-items: center; width: clamp(42px, 5vw, 54px); height: clamp(42px, 5vw, 54px); border: 2px solid var(--cb-ink); border-radius: 15px; background: rgba(255, 255, 255, .42); color: var(--cb-ink); } .cb-icon svg { width: 24px; height: 24px; } /* ---- button ---- */ .cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--cb-ink); border-radius: 12px; background: var(--cb-accent, #fff); color: var(--cb-ink) !important; font: inherit; font-weight: 800; box-shadow: 3px 3px 0 var(--cb-ink); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; } .cb-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--cb-ink); } .cb-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--cb-ink); } .cb-btn:focus-visible { outline: 3px solid var(--cb-teal); outline-offset: 2px; } .cb-btn-ghost { background: transparent; box-shadow: none; border-color: color-mix(in srgb, var(--foreground) 30%, transparent); color: var(--foreground) !important; } .cb-btn-ghost:hover { box-shadow: none; background: color-mix(in srgb, var(--foreground) 8%, transparent); } /* ---- launch / app grid ---- */ .cb-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(12px, 1.6vw, 18px); } .cb-launch { min-height: 158px; padding: clamp(16px, 2vw, 22px); justify-content: space-between; gap: 14px; } .cb-launch .cb-launch-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .cb-launch h3 { margin: 0 0 4px; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1; letter-spacing: -.05em; } .cb-launch p { margin: 0; max-width: 30ch; font-size: .82rem; line-height: 1.35; font-weight: 600; opacity: .78; } .cb-launch .cb-arrow { width: 22px; height: 22px; flex: none; transition: transform .16s ease; } .cb-launch:hover .cb-arrow { transform: translate(3px, -3px); } /* ---- page-level accent via [data-cb-service] ---- A page declares its identity once with and every .cb-card / .cb-btn below inherits that accent, unless a .cb-a-* class on the element overrides it. This is the single hook new pages need. */ [data-cb-service="home"], [data-cb-service="account"] { --cb-accent: var(--cb-amber); } [data-cb-service="games"] { --cb-accent: var(--cb-coral); } [data-cb-service="projects"] { --cb-accent: var(--cb-yellow); } [data-cb-service="cars"] { --cb-accent: var(--cb-peach); } [data-cb-service="chess"] { --cb-accent: var(--cb-teal); } [data-cb-service="budget"] { --cb-accent: var(--cb-green); } [data-cb-service="files"] { --cb-accent: var(--cb-violet); } [data-cb-service="kaneo"] { --cb-accent: var(--cb-blue); } [data-cb-service="admin"] { --cb-accent: var(--cb-orange); } /* semantic accent aliases (purpose, not service) */ .cb-a-primary { --cb-accent: var(--cb-coral); } .cb-a-success { --cb-accent: var(--cb-green); } .cb-a-danger { --cb-accent: var(--cb-coral); } /* canonical call-to-action button */ .cb-btn-primary { --cb-accent: var(--cb-coral); color: var(--cb-ink) !important; } /* ---- neobrutalist panel: bold ink frame, theme-aware calm surface ---- For content-dense pages (admin, dashboards) where a flooded accent card would be too loud. Pairs with the calm form primitives below. */ .cb-panel { position: relative; background: var(--card, var(--cb-paper)); color: var(--foreground, var(--cb-ink)); border: 2px solid var(--cb-ink); border-radius: clamp(16px, 2vw, 22px); box-shadow: var(--cb-shadow); padding: clamp(18px, 2.4vw, 28px); } /* ---- calm form primitives (sit inside bold shells) ---- White "wells" with a thin ink outline: legible on bright accent cards and on paper panels alike, without stacking another hard shadow on every input. */ .cb-field { display: grid; gap: 6px; text-align: left; } .cb-field > span:first-child { font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: var(--cb-ink); opacity: .72; } .cb-input, .cb-field input, .cb-field select { width: 100%; padding: 11px 13px; border: 1.5px solid var(--cb-ink); border-radius: 12px; background: rgba(255, 255, 255, .62); color: var(--cb-ink); font: inherit; font-weight: 600; } .cb-input::placeholder { color: color-mix(in srgb, var(--cb-ink) 50%, transparent); } .cb-input:focus-visible, .cb-field input:focus-visible, .cb-field select:focus-visible { outline: 3px solid #fff; outline-offset: 1px; border-color: var(--cb-ink); } /* ---- inline alert / flash ---- */ .cb-alert { padding: 10px 12px; border: 1.5px solid var(--cb-ink); border-radius: 12px; background: rgba(255, 255, 255, .34); color: var(--cb-ink); font-size: .85rem; font-weight: 700; } .cb-alert-error { background: color-mix(in srgb, var(--cb-coral) 46%, transparent); } @media (prefers-reduced-motion: reduce) { .cb-card, .cb-btn, .cb-arrow { transition-duration: .01ms !important; } }